From 404785bf2948bd78f75ea08b81d5143273e990f5 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 9 Oct 2024 18:05:10 +0530 Subject: [PATCH 1/3] fix: text box font size issue --- .../src/components/pdf/Placeholder.js | 27 ++++++++++++++++--- .../src/components/pdf/PlaceholderType.js | 4 +-- apps/OpenSign/src/components/pdf/RenderPdf.js | 11 +++++++- apps/OpenSign/src/constant/Utils.js | 14 +++------- apps/OpenSign/src/pages/PlaceHolderSign.js | 1 + apps/OpenSign/src/pages/SignyourselfPdf.js | 5 +++- .../OpenSign/src/pages/TemplatePlaceholder.js | 1 + 7 files changed, 44 insertions(+), 19 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js index db4dd44f7..0b1969e47 100644 --- a/apps/OpenSign/src/components/pdf/Placeholder.js +++ b/apps/OpenSign/src/components/pdf/Placeholder.js @@ -651,6 +651,21 @@ function Placeholder(props) { } } }; + //function to calculate font size + const calculateFont = (size, isMinHeight) => { + const containerScale = getContainerScale( + props.pdfOriginalWH, + props.pageNumber, + props.containerWH + ); + const fontSize = (size || 12) * containerScale * props.scale; + //isMinHeight to set text box minimum height + if (isMinHeight) { + return fontSize * 1.5; + } else { + return fontSize + "px"; + } + }; const getCursor = () => { if (props.data && props.isNeedSign) { @@ -745,12 +760,16 @@ function Placeholder(props) { ? "auto" : props.posHeight(props.pos, props.isSignYourself) }} + minHeight={calculateFont(props.pos.options?.fontSize, true)} + maxHeight="auto" onResizeStart={() => { setDraggingEnabled(true); props.setIsResize && props.setIsResize(true); }} onResizeStop={(e, direction, ref) => { - props.setIsResize && props.setIsResize(false); + setTimeout(() => { + props.setIsResize && props.setIsResize(false); + }, 500); props.handleSignYourselfImageResize && props.handleSignYourselfImageResize( ref, @@ -785,7 +804,7 @@ function Placeholder(props) { h: ref.offsetHeight / (props.scale * containerScale) }); }} - onClick={() => handleOnClickPlaceholder()} + onClick={() => !props.isResize && handleOnClickPlaceholder()} > {props.isShowBorder && props.pos.type !== radioButtonWidget && @@ -872,7 +891,7 @@ function Placeholder(props) { startDate={startDate} handleSaveDate={handleSaveDate} xPos={props.xPos} - posHeight={props.posHeight} + calculateFont={calculateFont} /> ) : ( @@ -900,7 +919,7 @@ function Placeholder(props) { startDate={startDate} handleSaveDate={handleSaveDate} xPos={props.xPos} - posHeight={props.posHeight} + calculateFont={calculateFont} /> )} diff --git a/apps/OpenSign/src/components/pdf/PlaceholderType.js b/apps/OpenSign/src/components/pdf/PlaceholderType.js index 6fe096844..96836446a 100644 --- a/apps/OpenSign/src/components/pdf/PlaceholderType.js +++ b/apps/OpenSign/src/components/pdf/PlaceholderType.js @@ -29,9 +29,7 @@ function PlaceholderType(props) { const [textValue, setTextValue] = useState(); const [selectedCheckbox, setSelectedCheckbox] = useState([]); const years = range(1990, getYear(new Date()) + 16, 1); - const height = props.posHeight(props.pos, props.isSignYourself); - const fontSize = - (props.pos.options?.fontSize || (height ? height - 4 : 12)) + "px"; + const fontSize = props.calculateFont(props.pos.options?.fontSize); const fontColor = props.pos.options?.fontColor || "black"; const months = [ "January", diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js index b7de317e0..ac5779847 100644 --- a/apps/OpenSign/src/components/pdf/RenderPdf.js +++ b/apps/OpenSign/src/components/pdf/RenderPdf.js @@ -65,7 +65,8 @@ function RenderPdf({ fontSize, setFontSize, fontColor, - setFontColor + setFontColor, + isResize }) { const { t } = useTranslation(); const isMobile = window.innerWidth < 767; @@ -104,6 +105,7 @@ function RenderPdf({ } } }; + const posHeight = (pos, signYourself) => { const containerScale = getContainerScale( pdfOriginalWH, @@ -207,6 +209,7 @@ function RenderPdf({ pageNumber={pageNumber} ispublicTemplate={ispublicTemplate} handleUserDetails={handleUserDetails} + isResize={isResize} /> ) @@ -357,6 +360,7 @@ function RenderPdf({ setFontSize={setFontSize} fontColor={fontColor} setFontColor={setFontColor} + isResize={isResize} /> ); @@ -417,6 +421,8 @@ function RenderPdf({ setFontSize={setFontSize} fontColor={fontColor} setFontColor={setFontColor} + isResize={isResize} + setIsResize={setIsResize} /> ) ); @@ -548,6 +554,7 @@ function RenderPdf({ setFontSize={setFontSize} fontColor={fontColor} setFontColor={setFontColor} + isResize={isResize} /> ); @@ -611,6 +618,8 @@ function RenderPdf({ setFontSize={setFontSize} fontColor={fontColor} setFontColor={setFontColor} + isResize={isResize} + setIsResize={setIsResize} /> ); diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index 3f323b40f..99562870a 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/apps/OpenSign/src/constant/Utils.js @@ -1289,14 +1289,8 @@ export const changeImageWH = async (base64Image) => { }; //function to calculate font size of text area widgets -const calculateFontSize = ( - position, - containerScale, - signyourself, - widgetHeight -) => { - const font = - position?.options?.fontSize || (widgetHeight ? widgetHeight / 2 : 12); +const calculateFontSize = (position, containerScale, signyourself) => { + const font = position?.options?.fontSize || 12; if (!signyourself && position?.isMobile && position?.scale) { return font / position?.scale / containerScale; } else { @@ -1506,8 +1500,7 @@ export const multiSignEmbed = async ( const fontSize = calculateFontSize( position, containerScale, - signyourself, - position.Height + signyourself ); parseInt(fontSize); let textContent; @@ -1688,6 +1681,7 @@ export const multiSignEmbed = async ( } if (!hasError) { const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false }); + // console.log("pdf", pdfBytes); return pdfBytes; } else { return { diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index f64e36f0b..9f6eb8c98 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -2058,6 +2058,7 @@ function PlaceHolderSign() { setSignerPos={setSignerPos} containerWH={containerWH} setIsResize={setIsResize} + isResize={isResize} setZIndex={setZIndex} setIsPageCopy={setIsPageCopy} signersdata={signersdata} diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index c4c91950d..f43d571d9 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -132,6 +132,7 @@ function SignYourSelf() { const [isRotate, setIsRotate] = useState({ status: false, degree: 0 }); const [isSubscribe, setIsSubscribe] = useState({ plan: "", isValid: true }); const [isDownloadModal, setIsDownloadModal] = useState(false); + const [isResize, setIsResize] = useState(false); const divRef = useRef(null); const nodeRef = useRef(null); const [, drop] = useDrop({ @@ -785,7 +786,7 @@ function SignYourSelf() { const handleStop = (event, dragElement) => { setFontSize(); setFontColor(); - if (isDragging && dragElement) { + if (!isResize && isDragging && dragElement) { event.preventDefault(); const containerScale = getContainerScale( pdfOriginalWH, @@ -1402,6 +1403,8 @@ function SignYourSelf() { setFontSize={setFontSize} fontColor={fontColor} setFontColor={setFontColor} + isResize={isResize} + setIsResize={setIsResize} /> )} diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 029801207..c1ed4333c 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -1600,6 +1600,7 @@ const TemplatePlaceholder = () => { setFontSize={setFontSize} fontColor={fontColor} setFontColor={setFontColor} + isResize={isResize} /> )} From f3667f6aaf2d6a7fc7a17bf1287a58685ba63a43 Mon Sep 17 00:00:00 2001 From: Raktima <110812506+raktima-opensignlabs@users.noreply.github.com> Date: Fri, 11 Oct 2024 19:07:54 +0530 Subject: [PATCH 2/3] Update Placeholder.js --- apps/OpenSign/src/components/pdf/Placeholder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js index 0b1969e47..24edc793c 100644 --- a/apps/OpenSign/src/components/pdf/Placeholder.js +++ b/apps/OpenSign/src/components/pdf/Placeholder.js @@ -661,7 +661,7 @@ function Placeholder(props) { const fontSize = (size || 12) * containerScale * props.scale; //isMinHeight to set text box minimum height if (isMinHeight) { - return fontSize * 1.5; + return fontSize * 1.5 + "px"; } else { return fontSize + "px"; } From 67b3417ac986dda48650db1ad18fbea9d4c77965 Mon Sep 17 00:00:00 2001 From: Raktima <110812506+raktima-opensignlabs@users.noreply.github.com> Date: Fri, 11 Oct 2024 19:13:00 +0530 Subject: [PATCH 3/3] Update Placeholder.js --- apps/OpenSign/src/components/pdf/Placeholder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/OpenSign/src/components/pdf/Placeholder.js b/apps/OpenSign/src/components/pdf/Placeholder.js index 24edc793c..82290b0cc 100644 --- a/apps/OpenSign/src/components/pdf/Placeholder.js +++ b/apps/OpenSign/src/components/pdf/Placeholder.js @@ -769,7 +769,7 @@ function Placeholder(props) { onResizeStop={(e, direction, ref) => { setTimeout(() => { props.setIsResize && props.setIsResize(false); - }, 500); + }, 50); props.handleSignYourselfImageResize && props.handleSignYourselfImageResize( ref,