fix: landscape mode pdf after embed widget's position

This commit is contained in:
RaktimaNXG
2024-06-21 16:55:59 +05:30
parent 89f67bfeeb
commit a18aee0be1
9 changed files with 177 additions and 299 deletions
+25 -27
View File
@@ -565,26 +565,23 @@ function Placeholder(props) {
const xPos = (pos, signYourself) => {
const containerScale = props.containerWH.width / props.pdfOriginalWH.width;
const resizePos = pos.xPosition;
console.log("go here", resizePos, containerScale, props.scale);
if (signYourself) {
return resizePos * containerScale * props.scale;
} else {
//checking both condition mobile and desktop view
// if (pos.isMobile && pos.scale) {
// if (props.scale > 1) {
// return resizePos * pos.scale * containerScale * props.scale;
// } else {
// return resizePos * pos.scale * containerScale;
// }
// } else {
// if (pos.scale === containerScale) {
// return resizePos * pos.scale * props.scale;
// } else {
// return resizePos * pos.scale * containerScale * props.scale;
// }
// }
console.log("go here", resizePos, containerScale, props.scale);
return resizePos * containerScale * props.scale;
if (pos.isMobile && pos.scale) {
if (props.scale > 1) {
return resizePos * pos.scale * containerScale * props.scale;
} else {
return resizePos * pos.scale * containerScale;
}
} else {
// if (pos.scale === containerScale) {
// return resizePos * pos.scale * props.scale;
// } else {
return resizePos * containerScale * props.scale;
// }
}
}
};
const yPos = (pos, signYourself) => {
@@ -594,23 +591,24 @@ function Placeholder(props) {
if (signYourself) {
return resizePos * containerScale * props.scale;
} else {
// checking both condition mobile and desktop view
// if (pos.isMobile && pos.scale) {
// if (props.scale > 1) {
// return resizePos * pos.scale * containerScale * props.scale;
// } else {
// return resizePos * pos.scale * containerScale;
// }
// } else if (pos.scale === containerScale) {
//checking both condition mobile and desktop view
if (pos.isMobile && pos.scale) {
if (props.scale > 1) {
return resizePos * pos.scale * containerScale * props.scale;
} else {
return resizePos * pos.scale * containerScale;
}
}
// else if (pos.scale === containerScale) {
// if (props.scale > 1) {
// return resizePos * pos.scale * props.scale;
// } else {
// return resizePos * pos.scale;
// }
// } else {
// return resizePos * containerScale;
// }
return resizePos * containerScale * props.scale;
else {
return resizePos * containerScale * props.scale;
}
}
};
@@ -704,11 +704,9 @@ function PlaceholderType(props) {
return (
<div key={ind} className="flex items-center text-center gap-0.5">
<input
className={`${ind === 0 ? "mt-0" : "mt-[5px]"} ${
props?.pos?.Width
? `w-[${props?.pos?.Width}px] h-[${props?.pos?.Width}px]`
: "w-[15px] h-[15px]"
} flex justify-center op-radio`}
className={`${
ind === 0 ? "mt-0" : "mt-[5px]"
} ${"w-[15px] h-[15px]"} flex justify-center op-radio`}
type="radio"
disabled={
props.isNeedSign &&
+30 -35
View File
@@ -24,7 +24,6 @@ function RenderPdf({
pdfDetails,
xyPostion,
pdfUrl,
numPages,
pageDetails,
pdfRequest,
signerObjectId,
@@ -398,22 +397,20 @@ function RenderPdf({
: pdfDetails[0].URL
}
>
{Array.from(new Array(numPages), (el, index) => (
<Page
onLoadSuccess={({ height }) => {
setPdfRenderHeight && setPdfRenderHeight(height);
setIsLoadPdf(true);
}}
key={index}
pageNumber={pageNumber}
width={containerWH.width}
renderAnnotationLayer={false}
renderTextLayer={false}
onGetAnnotationsError={(error) => {
console.log("annotation error", error);
}}
/>
))}
<Page
onLoadSuccess={({ height }) => {
setPdfRenderHeight && setPdfRenderHeight(height);
setIsLoadPdf(true);
}}
key={index}
pageNumber={pageNumber}
width={containerWH.width}
renderAnnotationLayer={false}
renderTextLayer={false}
onGetAnnotationsError={(error) => {
console.log("annotation error", error);
}}
/>
</Document>
</div>
</div>
@@ -592,24 +589,22 @@ function RenderPdf({
: pdfDetails[0].URL
}
>
{Array.from(new Array(numPages), (el, index) => (
<Page
onLoadSuccess={({ height }) => {
setPdfRenderHeight && setPdfRenderHeight(height);
setIsLoadPdf(true);
}}
key={index}
width={containerWH.width}
scale={scale || 1}
className={"-z-[1]"} // when user zoom-in in tablet widgets move backward that's why pass -z-[1]
pageNumber={pageNumber}
renderAnnotationLayer={false}
renderTextLayer={false}
onGetAnnotationsError={(error) => {
console.log("annotation error", error);
}}
/>
))}
<Page
onLoadSuccess={({ height }) => {
setPdfRenderHeight && setPdfRenderHeight(height);
setIsLoadPdf(true);
}}
key={index}
width={containerWH.width}
scale={scale || 1}
className={"-z-[1]"} // when user zoom-in in tablet widgets move backward that's why pass -z-[1]
pageNumber={pageNumber}
renderAnnotationLayer={false}
renderTextLayer={false}
onGetAnnotationsError={(error) => {
console.log("annotation error", error);
}}
/>
</Document>
</div>
</RSC>
+112 -206
View File
@@ -379,7 +379,7 @@ export const getWidgetType = (item) => {
<div className="op-btn w-fit md:w-[100%] op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] ml-[6px] md:ml-0 p-0 overflow-hidden">
<div className="w-full h-full flex md:justify-between items-center">
<div className="flex justify-start items-center text-[13px] ml-1">
{!isMobile && <i className="fa-light fa-grip-vertical"></i>}
{!isMobile && <i className="fa-sharp fa-solid fa-grip-vertical"></i>}
<span className="md:inline-block text-center text-[15px] ml-[5px] font-semibold pr-1 md:pr-0">
{item.type}
</span>
@@ -419,7 +419,7 @@ export const defaultWidthHeight = (type) => {
case "email":
return { width: 150, height: 20 };
case radioButtonWidget:
return { width: 15, height: 30 };
return { width: 5, height: 10 };
case textWidget:
return { width: 150, height: 17 };
default:
@@ -1224,16 +1224,16 @@ export const changeImageWH = async (base64Image) => {
//function for embed multiple signature using pdf-lib
export const multiSignEmbed = async (
pngUrl,
xyPositionArray,
pdfDoc,
pdfOriginalWH,
signyourself,
containerWH,
zoomPercent
scale
) => {
for (let item of pngUrl) {
for (let item of xyPositionArray) {
const typeExist = item.pos.some((data) => data?.type);
let updateItem;
if (typeExist) {
if (signyourself) {
updateItem = item.pos;
@@ -1245,16 +1245,13 @@ export const multiSignEmbed = async (
} else {
updateItem = item.pos;
}
const newWidth = containerWH.width;
const scale = newWidth / pdfOriginalWH.width;
const pageNo = item.pageNumber;
console.log("page number", pageNo);
const imgUrlList = updateItem;
const widgetsPositionArr = updateItem;
const pages = pdfDoc.getPages();
const form = pdfDoc.getForm();
const page = pages[pageNo - 1];
const images = await Promise.all(
imgUrlList.map(async (url) => {
widgetsPositionArr.map(async (url) => {
let signUrl = url.SignUrl && url.SignUrl;
if (signUrl) {
if (url.ImageType === "image/png") {
@@ -1268,7 +1265,7 @@ export const multiSignEmbed = async (
})
);
imgUrlList.forEach(async (position, id) => {
widgetsPositionArr.forEach(async (position, id) => {
let img;
if (["signature", "stamp", "initials", "image"].includes(position.type)) {
if (
@@ -1289,60 +1286,48 @@ export const multiSignEmbed = async (
img = await pdfDoc.embedPng(images[id]);
}
}
let scaleWidth, scaleHeight;
scaleWidth = placeholderWidth(
let widgetWidth, widgetHeight;
widgetWidth = placeholderWidth(
position,
scale,
signyourself,
pdfOriginalWH,
zoomPercent
scale
);
scaleHeight = placeholderHeight(
widgetHeight = placeholderHeight(
position,
scale,
signyourself,
pdfOriginalWH.height,
zoomPercent
scale
);
const xPos = (pos) => {
const resizePos = pos.xPosition;
if (pos.isMobile && pos.scale) {
const x = resizePos * pos.scale;
const xPos = (position) => {
const resizePos = position.xPosition;
//first two condition handle to old data already saved from mobile view which scale point diffrent
if (isMobile && position.isMobile) {
//if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale
const x = resizePos * (position.scale / scale);
return x * scale;
} else if (position.isMobile && position.scale) {
const x = resizePos * position.scale;
return x;
} else {
return resizePos;
}
};
const yPos = (position) => {
const resizePos = position.yPosition;
const yPos = (pos, ind, labelDefaultHeight) => {
const resizePos = pos.yPosition;
let newUpdateHeight = labelDefaultHeight
? labelDefaultHeight
: scaleHeight;
const widgetHeight =
position.type === radioButtonWidget
? 10
: position.type === "checkbox"
? 10
: newUpdateHeight;
const newHeight = ind ? (ind > 0 ? widgetHeight : 0) : widgetHeight;
if (pos.isMobile && pos.scale) {
if (pos.IsResize) {
const y = resizePos * pos.scale;
return page.getHeight() - y - newUpdateHeight;
if (position.isMobile && position.scale) {
if (position.IsResize) {
const y = resizePos * position.scale;
return y;
} else {
const y = resizePos * pos.scale;
return page.getHeight() - y - newUpdateHeight;
const y = resizePos * position.scale;
return y;
}
} else {
if (ind && ind > 0 && position.type === "checkbox") {
return page.getHeight() - resizePos - newHeight;
} else if (position.type === "checkbox") {
return page.getHeight() - resizePos - 10;
} else {
return page.getHeight() - resizePos - newHeight;
}
return resizePos;
}
};
const widgetTypeExist = [
@@ -1355,14 +1340,16 @@ export const multiSignEmbed = async (
"email"
].includes(position.type);
if (position.type === "checkbox") {
let addYPosition = 0,
isCheck;
const font = await pdfDoc.embedFont("Helvetica");
let checkboxOptionGapFromTop, isCheck;
let y = yPos(position);
const optionsFontSize = 13;
const checkboxSize = 18;
const checkboxTextGapFromLeft = 22;
if (position?.options?.values.length > 0) {
position?.options?.values.forEach((item, ind) => {
const checkboxRandomId = "checkbox" + randomId();
let yPosition;
const height = 13;
if (
position?.options?.response &&
position?.options?.response?.length > 0
@@ -1373,27 +1360,38 @@ export const multiSignEmbed = async (
}
const checkbox = form.createCheckBox(checkboxRandomId);
if (ind > 0) {
yPosition = yPos(position, ind) - addYPosition;
addYPosition = addYPosition + height + 8;
y = y + checkboxOptionGapFromTop;
} else {
yPosition = yPos(position, ind);
addYPosition = height + 8;
checkboxOptionGapFromTop = 26;
}
if (!position?.options?.isHideLabel) {
// below line of code is used to embed label with radio button in pdf
page.drawText(item, {
x: xPos(position) + 17,
y: yPosition + 2,
size: height
});
const optionsPosition = compensateRotation(
page.getRotation().angle,
xPos(position) + checkboxTextGapFromLeft,
y,
1,
page.getSize(),
optionsFontSize,
rgb(0, 0, 0),
font,
page
);
page.drawText(item, optionsPosition);
}
checkbox.addToPage(page, {
let checkboxObj = {
x: xPos(position),
y: yPosition - 3,
width: height,
height: height
});
y: y,
width: checkboxSize,
height: checkboxSize
};
checkboxObj = getImagePosition(page, checkboxObj, 1);
checkbox.addToPage(page, checkboxObj);
//applied which checkbox should be checked
if (isCheck) {
checkbox.check();
} else {
@@ -1424,7 +1422,7 @@ export const multiSignEmbed = async (
} else if (position?.options?.defaultValue) {
textContent = position?.options?.defaultValue;
}
const fixedWidth = scaleWidth; // Set your fixed width
const fixedWidth = widgetWidth; // Set your fixed width
const isNewOnEnterLineExist = textContent.includes("\n");
// Function to break text into lines based on the fixed width
@@ -1478,10 +1476,10 @@ export const multiSignEmbed = async (
: NewbreakTextIntoLines(textContent, fixedWidth);
// Set initial y-coordinate for the first line
let x = xPos(position);
let y = position.yPosition;
let y = yPos(position);
// Embed each line on the page
for (const line of lines) {
const correction = compensateRotation(
const textPosition = compensateRotation(
page.getRotation().angle,
x,
y,
@@ -1492,7 +1490,7 @@ export const multiSignEmbed = async (
font,
page
);
page.drawText(line, correction);
page.drawText(line, textPosition);
y += 18; // Adjust the line height as needed
}
} else if (position.type === "dropdown") {
@@ -1504,19 +1502,11 @@ export const multiSignEmbed = async (
} else if (position?.options?.defaultValue) {
dropdown.select(position?.options?.defaultValue);
}
// dropdown.addToPage(page, {
// x: xPos(position),
// y: yPos(position),
// width: scaleWidth,
// height: scaleHeight,
// borderWidth: 0
// });
const dropdownObj = {
x: position.xPosition,
y: position.yPosition,
width: scaleWidth,
height: scaleHeight
x: xPos(position),
y: yPos(position),
width: widgetWidth,
height: widgetHeight
};
const dropdownOption = getImagePosition(page, dropdownObj, 1);
@@ -1524,80 +1514,61 @@ export const multiSignEmbed = async (
dropdown.addToPage(page, dropdownOption);
dropdown.enableReadOnly();
} else if (position.type === radioButtonWidget) {
const font = await pdfDoc.embedFont("Helvetica");
const radioRandomId = "radio" + randomId();
const radioGroup = form.createRadioGroup(radioRandomId);
let addYPosition = 18;
let radioOptionGapFromTop;
const optionsFontSize = 16;
const radioTextGapFromLeft = 20;
const radioSize = 18;
let y = yPos(position);
if (position?.options?.values.length > 0) {
position?.options?.values.forEach((item, ind) => {
if (ind > 0) {
y = y + radioOptionGapFromTop;
} else {
radioOptionGapFromTop = 25;
}
if (!position?.options?.isHideLabel) {
// below line of code is used to embed label with radio button in pdf
for (let i = 1; i <= position?.options?.values.length; i++) {
const data = position?.options?.values[i - 1];
let yPosition;
if (i > 1) {
yPosition = yPos(position) - addYPosition;
} else {
yPosition = yPos(position);
}
const optionsPosition = compensateRotation(
page.getRotation().angle,
xPos(position) + radioTextGapFromLeft,
y,
1,
page.getSize(),
optionsFontSize,
rgb(0, 0, 0),
font,
page
);
if (!position?.options?.isHideLabel) {
// below line of code is used to embed label with radio button in pdf
page.drawText(data, {
x: xPos(position) + 15,
y: yPosition + 2,
size: 11
});
// const text = {
// x: position.xPosition + 15,
// y: position.yPosition + 2,
// size: 11
// };
// const correction = compensateRotationRadioFont(
// page.getRotation().angle,
// position.xPosition,
// position.yPosition,
// 1,
// page.getSize(),
// 11,
// addYPosition,
// i
// );
page.drawText(item, optionsPosition);
}
let radioObj = {
x: xPos(position),
y: y,
width: radioSize,
height: radioSize
};
// // const imageOptions = getImagePosition(page, text, 1);
// console.log("correction", correction);
// page.drawText(data, correction);
}
// const radio = {
// x: position.xPosition,
// y: position.yPosition,
// width: 11,
// height: 11
// };
// const imageOptions = getImagePosition(page, radio, 1);
// console.log("imageOptions", imageOptions);
// radioGroup.addOptionToPage(data, page, imageOptions);
radioGroup.addOptionToPage(data, page, {
x: xPos(position),
y: yPosition,
width: 11,
height: 11
radioObj = getImagePosition(page, radioObj, 1);
radioGroup.addOptionToPage(item, page, radioObj);
});
if (i > 1) {
addYPosition = addYPosition + 18;
}
}
if (position?.options?.response) {
radioGroup.select(position.options?.response);
} else if (position?.options?.defaultValue) {
radioGroup.select(position?.options?.defaultValue);
}
radioGroup.enableReadOnly();
} else {
const signature = {
x: position.xPosition,
y: position.yPosition,
width: scaleWidth,
height: scaleHeight
x: xPos(position),
y: yPos(position),
width: widgetWidth,
height: widgetHeight
};
const imageOptions = getImagePosition(page, signature, 1);
@@ -2116,66 +2087,6 @@ export async function findContact(value) {
console.error("Error fetching suggestions:", error);
}
}
// `compensateRotation` is used to calculate x and y position of widget on portait, landscape pdf for pdf-lib
// function compensateRotationRadioFont(
// pageRotation,
// x,
// y,
// scale,
// dimensions,
// fontSize,
// addYPosition,
// i
// ) {
// //fontsize = imagewidth
// let rotationRads = (pageRotation * Math.PI) / 180;
// //These coords are now from bottom/left
// let coordsFromBottomLeft = { x: x / scale };
// if (pageRotation === 90 || pageRotation === 270) {
// coordsFromBottomLeft.y = dimensions.width - (y + fontSize) / scale;
// if (i > 1) {
// coordsFromBottomLeft.y = coordsFromBottomLeft.y - addYPosition;
// }
// } else {
// coordsFromBottomLeft.y = dimensions.height - (y + fontSize) / scale;
// }
// let drawX = null;
// let drawY = null;
// if (pageRotation === 90) {
// drawX =
// coordsFromBottomLeft.x * Math.cos(rotationRads) -
// coordsFromBottomLeft.y * Math.sin(rotationRads) +
// dimensions.width;
// drawY =
// coordsFromBottomLeft.x * Math.sin(rotationRads) +
// coordsFromBottomLeft.y * Math.cos(rotationRads);
// } else if (pageRotation === 180) {
// drawX =
// coordsFromBottomLeft.x * Math.cos(rotationRads) -
// coordsFromBottomLeft.y * Math.sin(rotationRads) +
// dimensions.width;
// drawY =
// coordsFromBottomLeft.x * Math.sin(rotationRads) +
// coordsFromBottomLeft.y * Math.cos(rotationRads) +
// dimensions.height;
// } else if (pageRotation === 270) {
// drawX =
// coordsFromBottomLeft.x * Math.cos(rotationRads) -
// coordsFromBottomLeft.y * Math.sin(rotationRads);
// drawY =
// coordsFromBottomLeft.x * Math.sin(rotationRads) +
// coordsFromBottomLeft.y * Math.cos(rotationRads) +
// dimensions.height;
// } else {
// //no rotation
// drawX = coordsFromBottomLeft.x;
// drawY = coordsFromBottomLeft.y;
// }
// return { x: drawX + 15, y: drawY + 2, size: fontSize };
// }
// `compensateRotation` is used to calculate x and y position of widget on portait, landscape pdf for pdf-lib
function compensateRotation(
pageRotation,
@@ -2249,15 +2160,10 @@ function getImagePosition(page, image, sizeRatio) {
let pageWidth;
// pageHeight;
if ([90, 270].includes(page.getRotation().angle)) {
console.log("go in 90 degree");
pageWidth = page.getHeight();
// pageHeight = page.getWidth();
} else {
console.log("go in 180 degree");
pageWidth = page.getWidth();
// pageHeight = page.getHeight();
}
// eslint-disable-next-line
if (!image?.hasOwnProperty("vpWidth")) {
image["vpWidth"] = pageWidth;
+1 -1
View File
@@ -74,7 +74,7 @@ const DebugPdf = () => {
const inferPdfType = async (pdf) => {
try {
const firstPage = await pdf.getPage(1);
const firstPage = await pdf.getPage(2);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
setPdfDimension({ width: width, height: height });
@@ -787,7 +787,6 @@ function PdfRequestFiles() {
pdfDoc,
pdfOriginalWH,
isSignYourSelfFlow,
containerWH,
scale
);
// console.log("pdfte", pdfBytes);
@@ -1019,7 +1018,6 @@ function PdfRequestFiles() {
style: { fontSize: "13px" }
}
];
//function for get pdf page details
const pageDetails = async (pdf) => {
const firstPage = await pdf.getPage(1);
+4 -11
View File
@@ -468,17 +468,12 @@ function PlaceHolderSign() {
const signer = signersdata.find((x) => x.Id === uniqueId);
const key = randomId();
const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
console.log(
"pdfwh",
containerScale,
containerWH?.width / pdfOriginalWH?.width
);
let dropData = [];
let placeHolder;
const dragTypeValue = item?.text ? item.text : monitor.type;
const widgetWidth = defaultWidthHeight(dragTypeValue).width;
const widgetHeight = defaultWidthHeight(dragTypeValue).height;
console.log("containerscale", containerScale, scale);
//adding and updating drop position in array when user drop signature button in div
if (item === "onclick") {
const dropObj = {
//onclick put placeholder center on pdf
@@ -488,13 +483,10 @@ function PlaceHolderSign() {
yPosition:
(containerWH.height / 2 - widgetHeight / 2) /
(containerScale * scale),
isStamp:
(dragTypeValue === "stamp" || dragTypeValue === "image") && true,
key: key,
isDrag: false,
scale: containerScale,
// isMobile: isMobile,
zIndex: posZIndex,
type: dragTypeValue,
options: addWidgetOptions(dragTypeValue),
@@ -508,10 +500,12 @@ function PlaceHolderSign() {
};
} else {
const offset = monitor.getClientOffset();
//adding and updating drop position in array when user drop signature button in div
//This method returns the offset of the current pointer (mouse) position relative to the client viewport.
const containerRect = document
.getElementById("container")
.getBoundingClientRect();
//`containerRect.left`, The distance from the left of the viewport to the left side of the element.
//`containerRect.top` The distance from the top of the viewport to the top of the element.
const x = offset.x - containerRect.left;
const y = offset.y - containerRect.top;
const getXPosition = signBtnPosition[0]
@@ -520,7 +514,6 @@ function PlaceHolderSign() {
const getYPosition = signBtnPosition[0]
? y - signBtnPosition[0].yPos
: y;
console.log("getxyPos", getXPosition, getYPosition);
const dropObj = {
xPosition: getXPosition / (containerScale * scale),
yPosition: getYPosition / (containerScale * scale),
+2 -11
View File
@@ -450,7 +450,6 @@ function SignYourSelf() {
const key = randomId();
let dropData = [];
let dropObj = {};
const pdfRenderWidth = containerWH.width;
let filterDropPos = xyPostion.filter(
(data) => data.pageNumber === pageNumber
);
@@ -482,9 +481,7 @@ function SignYourSelf() {
scale: containerScale,
Width: getWidth / (containerScale * scale),
Height: getHeight / (containerScale * scale),
options: addWidgetOptions(dragTypeValue),
pdfRenderHeight: pdfRenderHeight,
pdfRenderWidth: pdfRenderWidth
options: addWidgetOptions(dragTypeValue)
};
dropData.push(dropObj);
@@ -517,8 +514,6 @@ function SignYourSelf() {
Width: getWidth / (containerScale * scale),
Height: getHeight / (containerScale * scale),
options: addWidgetOptions(dragTypeValue),
pdfRenderHeight: pdfRenderHeight,
pdfRenderWidth: pdfRenderWidth,
scale: containerScale
};
@@ -702,7 +697,6 @@ function SignYourSelf() {
pdfDoc,
pdfOriginalWH,
isSignYourSelfFlow,
containerWH,
scale
);
// console.log("pdf", pdfBytes);
@@ -857,17 +851,14 @@ function SignYourSelf() {
//function for get pdf page details
const pageDetails = async (pdf) => {
const firstPage = await pdf.getPage(1);
const firstPage = await pdf.getPage(2);
const scale = 1;
const { width, height } = firstPage.getViewport({ scale });
// console.log("width height", width, height);
setPdfOriginalWH({ width: width, height: height });
setPdfLoadFail({
status: true
});
};
console.log("xyPosition", xyPostion);
//function for change page numver of pdf
function changePage(offset) {
setSignBtnPosition([]);
@@ -423,7 +423,6 @@ const TemplatePlaceholder = () => {
(dragTypeValue === "stamp" || dragTypeValue === "image") && true,
key: key,
scale: containerScale,
// isMobile: isMobile,
zIndex: posZIndex,
type: item.text,
options: addWidgetOptions(dragTypeValue),