margin and padding added on the text written

dist/assets/a-doc-editor2.js

@@ -9,12 +9,12 @@ var ADocEditor = function (customConfig) {
         pageSetup: { size: "A4" }, zoom: 1,
         format: {
             background: "#fff",
-            margin: 20,
+            margin: 20, // mm
             border: "",
-            tabWidth: 20,
+            tabWidth: 20, // mm
         },
         style: {
-            fontSize: 100,
+            fontSize: 16, // this is in mm
             fontFamily: 'Calibri',
             bold: false,
             italic: false,
@@ -199,7 +199,7 @@ var ADocEditor = function (customConfig) {
 
         function calculateTextSizeAndPosition() {
 
-            let d = 0, c=0;
+            let d = 0, c = 0;
             function getLineObj() {
 
                 let newLineObj = {
@@ -224,25 +224,25 @@ var ADocEditor = function (customConfig) {
 
                 // to calculate the lines
                 let tempLineWidth = 0;
-                let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * config.pageSetup.pxWidth*2)/100
+                let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio*2)
                 let wordEndIndex = 0; // this stores the index of the word which can fit in the line;
                 for (c = 0; c < dataBlock.plainContent.length; c++) {
-                    let style = dataBlock?.formatedText?.[d]
+                    let style = dataBlock?.formatedText?.[c]
                     if (/\s/.test(dataBlock.plainContent[c])) {
                         wordEndIndex = c
                         lineObj.charEndIndex = c
                     }
-                    let charWidth = getCharacterWidth(d, dataBlock.plainContent[c], style )
+                    let charWidth = getCharacterWidth(dataBlock.plainContent[c], style)
                     dataBlock.formatedText[c] = {
                         ...config.style,
                         ...style,
                         width: charWidth
                     }
                     tempLineWidth += charWidth
-                    if (tempLineWidth > maxLineWidth){
+                    if (tempLineWidth > maxLineWidth) {
                         // cannot add this// new line should be added//
                         i = wordEndIndex;
-                        
+
                         lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1)
                         lines.push(lineObj)
                         lineObj = new getLineObj()
@@ -275,21 +275,21 @@ var ADocEditor = function (customConfig) {
 
         function renderLines() {
             console.log('render lines', lines)
-            let x = 0, y=0;
-            for ( let l=0; l<lines.length; l++){
+            let x = 0, y = config.format.margin*pxMmRatio;
+            for (let l = 0; l < lines.length; l++) {
                 let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
                 console.log(lines[l])
-                x = 0
-                y = y+lines[l].maxFontSize
+                x = config.format.margin*pxMmRatio
+                y = y + (lines[l].maxFontSize * pxMmRatio)
                 ctx.save()
-                
+
                 let setData = dataList[lines[l].dataIndex]
                 for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
                     let char = setData?.plainContent[c]
                     if (char) {
                         let style = setData.formatedText[c]
                         ctx.save()
-                        ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize}px ${style.fontFamily}`
+                        ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize * pxMmRatio}px ${style.fontFamily}`
                         ctx.fillStyle = `${style?.fontColor}`
                         ctx.fillText(char, x, y)
                         setData.formatedText[c].x = x
@@ -352,11 +352,12 @@ var ADocEditor = function (customConfig) {
                 renderCaret()
             }, caretData.timeoutDuration)
         }
-        function getCharacterWidth(canvasIndex, char, style) {
-            let canvas = pageList[canvasIndex].el
+        function getCharacterWidth(char, style) {
+            console.log('style', style)
+            let canvas = pageList[0].el
             let ctx = canvas.getContext('2d', { willReadFrequently: true })
             ctx.save()
-            ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize * config.pageSetup.multipler}px ${style.fontFamily}`
+            ctx.font = `${style?.bold ? 'bold ' : ''}${style?.italic ? 'italic ' : ''} ${style.fontSize * pxMmRatio}px ${style.fontFamily}`
             ctx.fillStyle = `${style?.fontColor}`
             let width = ctx.measureText(char).width
             ctx.restore()

dist/index.html

@@ -21,7 +21,7 @@
 </head>
 <body>
     <div class="body"></div>
-    <p>Click on the <span style="font-family: 'customfont';">canvas</span> and start typing
+    <p style="font-family: 'Calibri';">Click on the <span>canvas</span> and start typing
         <button onclick="extractData()">Extract</button>
         <button onclick="setData()">Set Data</button>
         <button onclick="generatePDF()">Generate PDF</button>