Skip to content

Commit 642ef4f

Browse files
prafull-opensignlabsprafull-opensignlabs
authored
Merge pull request #286 from OpenSignLabs/placeholder
feat: add copy placeholder feature and change in UI of placeholder
2 parents 56bb7d3 + 3b5875e commit 642ef4f

File tree

11 files changed

+893
-623
lines changed

11 files changed

+893
-623
lines changed

‎microfrontends/SignDocuments/src/Component/PdfRequestFiles.js‎

Lines changed: 71 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@ import {
2121
embedDocId,
2222
pdfNewWidthFun,
2323
signPdfFun,
24-
calculateImgAspectRatio,
25-
onImageSelect
24+
onImageSelect,
25+
onSaveSign,
26+
onSaveImage
2627
} from "../utils/Utils";
2728
import Loader from "./component/loader";
2829
import HandleError from "./component/HandleError";
@@ -482,181 +483,99 @@ function PdfRequestFiles() {
482483
}
483484
};
484485
//function for upload stamp image
485-
const onSaveImage = () => {
486+
const saveImage = () => {
487+
//get current signers placeholder position data
486488
const currentSigner = signerPos.filter(
487489
(data) => data.signerObjId === signerObjectId
488490
);
489-
const i = currentSigner[0].placeHolder.findIndex((object) => {
491+
//get current pagenumber placeholder index
492+
const getIndex = currentSigner[0].placeHolder.findIndex((object) => {
490493
return object.pageNumber === pageNumber;
491494
});
492-
const updateFilter = currentSigner[0].placeHolder[i].pos.filter(
493-
(data) =>
494-
data.key === signKey && data.Width && data.Height && data.SignUrl
495+
//get current signer placeholder position data
496+
const placeholderPosition = currentSigner[0].placeHolder;
497+
//function of save image and get updated position with image url
498+
const getUpdatePosition = onSaveImage(
499+
placeholderPosition,
500+
getIndex,
501+
signKey,
502+
imgWH,
503+
image
495504
);
496-
let getIMGWH = calculateImgAspectRatio(imgWH);
497-
498-
if (updateFilter.length > 0) {
499-
const getXYdata = currentSigner[0].placeHolder[i].pos;
500-
const getPosData = getXYdata;
501-
const addSign = getPosData.map((url, ind) => {
502-
if (url.key === signKey) {
503-
return {
504-
...url,
505-
Width: getIMGWH.newWidth,
506-
Height: getIMGWH.newHeight,
507-
SignUrl: image.src,
508-
ImageType: image.imgType
509-
};
510-
}
511-
return url;
512-
});
513-
514-
const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => {
515-
if (ind === i) {
516-
return { ...obj, pos: addSign };
517-
}
518-
return obj;
519-
});
520-
const getPlaceData = currentSigner[0].placeHolder;
521-
getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl);
522-
523-
const indexofSigner = signerPos.findIndex((object) => {
524-
return object.signerObjId === signerObjectId;
525-
});
526-
setSignerPos((prevState) => {
527-
const newState = [...prevState]; // Create a copy of the state
528-
newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy
529-
return newState; // Update the state with the modified copy
530-
});
531-
} else {
532-
const getXYdata = currentSigner[0].placeHolder[i].pos;
533-
534-
const getPosData = getXYdata;
535-
536-
const addSign = getPosData.map((url, ind) => {
537-
if (url.key === signKey) {
538-
return {
539-
...url,
540-
Width: getIMGWH.newWidth,
541-
Height: getIMGWH.newHeight,
542-
SignUrl: image.src,
543-
ImageType: image.imgType
544-
};
545-
}
546-
return url;
547-
});
548505

549-
const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => {
550-
if (ind === i) {
551-
return { ...obj, pos: addSign };
552-
}
553-
return obj;
554-
});
555-
556-
const getPlaceData = currentSigner[0].placeHolder;
557-
getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl);
558-
559-
const indexofSigner = signerPos.findIndex((object) => {
560-
return object.signerObjId === signerObjectId;
561-
});
562-
setSignerPos((prevState) => {
563-
const newState = [...prevState]; // Create a copy of the state
564-
newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy
565-
return newState; // Update the state with the modified copy
566-
});
567-
}
506+
//replace updated placeholder position with old data
507+
placeholderPosition.splice(
508+
0,
509+
placeholderPosition.length,
510+
...getUpdatePosition
511+
);
512+
//get current signers placeholder position data index number in array
513+
const indexofSigner = signerPos.findIndex((object) => {
514+
return object.signerObjId === signerObjectId;
515+
});
516+
//update current signers data with new placeholder position array data
517+
setSignerPos((prevState) => {
518+
const newState = [...prevState]; // Create a copy of the state
519+
newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy
520+
return newState; // Update the state with the modified copy
521+
});
568522
};
569523

570524
//function for save button to save signature or image url
571-
const onSaveSign = (isDefaultSign) => {
525+
const saveSign = (isDefaultSign) => {
572526
const signatureImg = isDefaultSign ? defaultSignImg : signature;
573-
const isSign = true;
574-
let getIMGWH;
527+
let imgWH = { width: "", height: "" };
575528
setIsSignPad(false);
576529
setIsImageSelect(false);
577530
setImage();
531+
532+
//get current signers placeholder position data
533+
const currentSigner = signerPos.filter(
534+
(data) => data.signerObjId === signerObjectId
535+
);
536+
//get current pagenumber placeholder index
537+
const getIndex = currentSigner[0].placeHolder.findIndex((object) => {
538+
return object.pageNumber === pageNumber;
539+
});
540+
541+
//set default signature image width and height
578542
if (isDefaultSign) {
579543
const img = new Image();
580544
img.src = defaultSignImg;
581545
if (img.complete) {
582-
let imgWH = {
546+
imgWH = {
583547
width: img.width,
584548
height: img.height
585549
};
586-
getIMGWH = calculateImgAspectRatio(imgWH);
587550
}
588551
}
589-
const currentSigner = signerPos.filter(
590-
(data) => data.signerObjId === signerObjectId
552+
//get current signer placeholder position data
553+
const placeholderPosition = currentSigner[0].placeHolder;
554+
//function of save signature image and get updated position with signature image url
555+
const getUpdatePosition = onSaveSign(
556+
placeholderPosition,
557+
getIndex,
558+
signKey,
559+
signatureImg,
560+
imgWH,
561+
isDefaultSign
591562
);
592563

593-
const i = currentSigner[0].placeHolder.findIndex((object) => {
594-
return object.pageNumber === pageNumber;
564+
const updateSignerData = currentSigner.map((obj, ind) => {
565+
if (obj.signerObjId === signerObjectId) {
566+
return { ...obj, placeHolder: getUpdatePosition };
567+
}
568+
return obj;
595569
});
596570

597-
let updateFilter;
598-
599-
updateFilter = currentSigner[0].placeHolder[i].pos.filter(
600-
(data) => data.key === signKey && data.SignUrl
571+
const index = signerPos.findIndex(
572+
(data) => data.signerObjId === signerObjectId
601573
);
602-
603-
const getXYdata = currentSigner[0].placeHolder[i].pos;
604-
const getPosData = getXYdata;
605-
const posWidth = isDefaultSign
606-
? getIMGWH.newWidth
607-
: isSign && getPosData[0].ImageType
608-
? 150
609-
: getPosData[0].Width
610-
? getPosData[0].Width
611-
: 150;
612-
const posHidth = isDefaultSign
613-
? getIMGWH.newHeight
614-
: isSign && getPosData[0].ImageType
615-
? 60
616-
: getPosData[0].Height
617-
? getPosData[0].Height
618-
: 60;
619-
if (updateFilter.length > 0) {
620-
updateFilter[0].SignUrl = signatureImg;
621-
updateFilter[0].Width = posWidth;
622-
updateFilter[0].Height = posHidth;
623-
} else {
624-
const addSign = getPosData.map((url, ind) => {
625-
if (url.key === signKey) {
626-
return {
627-
...url,
628-
SignUrl: signatureImg,
629-
Width: posWidth,
630-
Height: posHidth,
631-
ImageType: "sign"
632-
};
633-
}
634-
return url;
635-
});
636-
637-
const newUpdateUrl = currentSigner[0].placeHolder.map((obj, ind) => {
638-
if (obj.pageNumber === pageNumber) {
639-
return { ...obj, pos: addSign };
640-
}
641-
return obj;
642-
});
643-
644-
const newUpdatePos = currentSigner.map((obj, ind) => {
645-
if (obj.signerObjId === signerObjectId) {
646-
return { ...obj, placeHolder: newUpdateUrl };
647-
}
648-
return obj;
649-
});
650-
651-
const index = signerPos.findIndex(
652-
(data) => data.signerObjId === signerObjectId
653-
);
654-
setSignerPos((prevState) => {
655-
const newState = [...prevState]; // Create a copy of the state
656-
newState.splice(index, 1, ...newUpdatePos); // Modify the copy
657-
return newState; // Update the state with the modified copy
658-
});
659-
}
574+
setSignerPos((prevState) => {
575+
const newState = [...prevState];
576+
newState.splice(index, 1, ...updateSignerData);
577+
return newState;
578+
});
660579
};
661580

662581
const checkSignerBackColor = (obj) => {
@@ -782,6 +701,7 @@ function PdfRequestFiles() {
782701
allPages={allPages}
783702
setAllPages={setAllPages}
784703
setPageNumber={setPageNumber}
704+
pageNumber={pageNumber}
785705
/>
786706

787707
{/* pdf render view */}
@@ -831,8 +751,8 @@ function PdfRequestFiles() {
831751
onImageChange={onImageChange}
832752
setSignature={setSignature}
833753
image={image}
834-
onSaveImage={onSaveImage}
835-
onSaveSign={onSaveSign}
754+
onSaveImage={saveImage}
755+
onSaveSign={saveSign}
836756
defaultSign={defaultSignImg}
837757
/>
838758
{/* pdf header which contain funish back button */}

0 commit comments

Comments
 (0)