@@ -14,7 +14,6 @@ import {
1414 onSaveSign ,
1515 radioButtonWidget ,
1616 selectCheckbox ,
17- signatureTypes ,
1817 textInputWidget ,
1918 textWidget ,
2019 years
@@ -85,7 +84,8 @@ function WidgetsValueModal(props) {
8584 setXyPosition,
8685 isSave,
8786 setUniqueId,
88- tempSignerId
87+ tempSignerId,
88+ signatureTypes
8989 } = props ;
9090 const [ penColor , setPenColor ] = useState ( "blue" ) ;
9191 const [ isOptional , setIsOptional ] = useState ( true ) ;
@@ -400,7 +400,7 @@ function WidgetsValueModal(props) {
400400
401401 if ( getIndex !== - 1 ) {
402402 setIsSignTypes ( true ) ;
403- const tab = signatureTypes [ getIndex ] . name ;
403+ const tab = signatureTypes ?. [ getIndex ] . name ;
404404 if ( tab === "draw" ) {
405405 setIsTab ( "draw" ) ;
406406 setSignatureType ( "draw" ) ;
@@ -427,7 +427,7 @@ function WidgetsValueModal(props) {
427427 }
428428 }
429429 function isTabEnabled ( tabName ) {
430- const isEnabled = signatureTypes . find ( ( x ) => x . name === tabName ) ?. enabled ;
430+ const isEnabled = signatureTypes ? .find ( ( x ) => x . name === tabName ) ?. enabled ;
431431 return isEnabled ;
432432 }
433433
@@ -683,51 +683,64 @@ function WidgetsValueModal(props) {
683683 }
684684 // eslint-disable-next-line react-hooks/exhaustive-deps
685685 } , [ isTab ] ) ;
686- //function for convert input text value in image
686+ // function for convert input text value in image
687687 const convertToImg = async ( fontStyle , text , color ) => {
688- //get text content to convert in image
689- const textContent = text ;
690- const fontfamily = fontStyle
691- ? fontStyle
692- : fontSelect
693- ? fontSelect
694- : "Fasthand" ;
695- const fontSizeValue = "40px" ;
696- //creating span for getting text content width
688+ // 1) Read the max widget dimensions:
689+ const maxWidth = currWidgetsDetails . Width ; // e.g. 150 px
690+ const maxHeight = currWidgetsDetails . Height ; // e.g. 40 px
691+
692+ // 2) Pick a “baseline” font size for measurement:
693+ const baselineFontSizePx = 40 ;
694+ const chosenFontFamily = fontStyle || fontSelect || "Fasthand" ;
695+ const fillColor = color || penColor ;
696+
697+ // 3) Create a temporary <span> (hidden) to measure the text at 40px:
697698 const span = document . createElement ( "span" ) ;
698- span . textContent = textContent ;
699- span . style . font = `${ fontSizeValue } ${ fontfamily } ; // here put your text size and font family
700- span . style . color = color ? color : penColor ;
701- span . style . display = "hidden" ;
702- document . body . appendChild ( span ) ; // Replace 'container' with the ID of the container element
699+ span . textContent = text ;
700+ span . style . font = `${ baselineFontSizePx } ${ chosenFontFamily } ;
701+ span . style . visibility = "hidden" ; // keep it in the DOM so offsetWidth/Height works
702+ span . style . whiteSpace = "nowrap" ; // so we measure a single line
703+ document . body . appendChild ( span ) ;
704+
705+ // Measured size at 40px:
706+ const measuredWidth = span . offsetWidth ;
707+ const measuredHeight = span . offsetHeight ;
708+ document . body . removeChild ( span ) ;
703709
704- //create canvas to render text in canvas and convert in image
705- const canvasElement = document . createElement ( "canvas" ) ;
706- // Draw the text content on the canvas
707- const ctx = canvasElement . getContext ( "2d" ) ;
710+ // 4) Compute uniform scale so that 40px‐sized text fits inside (maxWidth × maxHeight):
711+ const scaleX = maxWidth / measuredWidth ;
712+ const scaleY = maxHeight / measuredHeight ;
713+ const scale = Math . min ( scaleX , scaleY , 1 ) ; // never scale up beyond 1
714+
715+ // 5) Final text size in **CSS px**:
716+ const finalFontSizePx = baselineFontSizePx * scale ;
717+
718+ // 6) Create a <canvas> that is ALWAYS maxWidth × maxHeight in **CSS px**,
719+ // but use devicePixelRatio for sharpness.
708720 const pixelRatio = window . devicePixelRatio || 1 ;
709- const addExtraWidth = currWidgetsDetails ?. type === "initials" ? 10 : 50 ;
710- const width = span . offsetWidth + addExtraWidth ;
711- const height = span . offsetHeight ;
712- setTextWidth ( width ) ;
713- setTextHeight ( height ) ;
714- const font = span . style [ "font" ] ;
715- // Set the canvas dimensions to match the span
716- canvasElement . width = width * pixelRatio ;
717- canvasElement . height = height * pixelRatio ;
721+ const canvas = document . createElement ( "canvas" ) ;
722+
723+ // ★ Instead of using `finalTextWidth/Height`, force it to be the max box:
724+ canvas . width = Math . ceil ( maxWidth * pixelRatio ) ;
725+ canvas . height = Math . ceil ( maxHeight * pixelRatio ) ;
718726
719- // You can customize text styles if needed
720- ctx . font = font ;
721- ctx . fillStyle = color ? color : penColor ; // Set the text color
727+ const ctx = canvas . getContext ( "2d" ) ;
728+ ctx . scale ( pixelRatio , pixelRatio ) ;
729+
730+ // 7) Draw the text **centered** inside the full maxWidth×maxHeight box:
731+ ctx . font = `${ finalFontSizePx } ${ chosenFontFamily } ;
732+ ctx . fillStyle = fillColor ;
722733 ctx . textAlign = "center" ;
723734 ctx . textBaseline = "middle" ;
724- ctx . scale ( pixelRatio , pixelRatio ) ;
725- // Draw the content of the span onto the canvas
726- ctx . fillText ( span . textContent , width / 2 , height / 2 ) ; // Adjust the x,y-coordinate as needed
727- //remove span tag
728- document . body . removeChild ( span ) ;
729- // Convert the canvas to image data
730- const dataUrl = canvasElement . toDataURL ( "image/png" ) ;
735+
736+ // ★ Center = (maxWidth/2, maxHeight/2):
737+ const centerX = maxWidth / 2 ;
738+ const centerY = maxHeight / 2 ;
739+
740+ ctx . fillText ( text , centerX , centerY ) ;
741+
742+ // 8) Export to a PNG data-URL:
743+ const dataUrl = canvas . toDataURL ( "image/png" ) ;
731744 setSignature ( dataUrl ) ;
732745 } ;
733746 const PenColorComponent = ( props ) => {
0 commit comments