scale fixed

dist/assets/a-doc-editor2.css

-
 .main {
     position: relative;
     display: flex;
@@ -9,19 +8,22 @@
     flex-direction: column;
     justify-content: flex-start;
 }
+
 .header {
     position: relative;
     display: block;
     width: 100%;
     background-color: red;
 }
-.toolbar{
+
+.toolbar {
     position: relative;
     width: 100%;
     background: pink;
     display: flex;
     gap: 10px;
 }
+
 .toolbar .item {
     position: relative;
     background: green;
@@ -33,6 +35,7 @@
     padding-right: 4px;
     margin: 4px;
 }
+
 .page-list {
     position: relative;
     display: block;
@@ -42,6 +45,7 @@
     gap: 20px;
     align-items: center;
 }
+
 .page-list canvas {
     background-color: #fff;
     width: 210mm;
@@ -50,7 +54,8 @@
     position: relative;
     margin: 20px;
 }
-.footer{
+
+.footer {
     position: relative;
     display: block;
     width: 100%;

dist/assets/a-doc-editor2.js

 let isModule = (typeof module != 'undefined') ? true : false
 if (!isModule) console.log('Browser Environment')
 var ADocEditor = function (customConfig) {
-    var container, counter = 0, shadow, pxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = [], headerToolbar = [];
+    var container, counter = 0, shadow, pxMmRatio, canvasPxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = [], headerToolbar = [];
     var paperSizes = {
         "A4": { mmWidth: 210, mmHeight: 297 },
     }
@@ -9,12 +9,12 @@ var ADocEditor = function (customConfig) {
         pageSetup: { size: "A4" }, zoom: 1,
         format: {
             background: "#fff",
-            margin: 20, // mm
+            margin: 10, // mm
             border: "",
-            tabWidth: 20, // mm
+            tabWidth: 10, // mm
         },
         style: {
-            fontSize: 16, // this is in mm
+            fontSize: 10, // this is in mm
             fontFamily: 'Calibri',
             bold: false,
             italic: false,
@@ -55,7 +55,6 @@ var ADocEditor = function (customConfig) {
         shadow = container.attachShadow({ mode: "open" })
 
         htmlStr = /*html*/`
-<div class="scale"></div>
 <div class="header">
     <div class="toolbar">
         <select class="item" adc="font-select">
@@ -169,10 +168,7 @@ var ADocEditor = function (customConfig) {
             pageList[p].el.style.width = `${config.pageSetup.uiWidth}mm`
         }
 
-        let scale = shadow.querySelector('.scale')
-        scale.setAttribute('style', `position: absolute; display: block; width: 100mm; height: 100mm; z-index: -1; opacity: 0; pointer-events: none;`)
-        let rect = scale.getBoundingClientRect()
-        pxMmRatio = rect.width / 100;
+        pxMmRatio = config.pageSetup.pxWidth / config.pageSetup.mmWidth;
         return config
     }
 
@@ -234,11 +230,9 @@ var ADocEditor = function (customConfig) {
                 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?.[c]
-                    let isBlankChar = false
                     if (/\s/.test(dataBlock.plainContent[c])) {
                         wordEndIndex = c
                         lineObj.charEndIndex = c
-                        isBlankChar = true
                     }
                     let charWidth = getCharacterWidth(dataBlock.plainContent[c], style)
                     dataBlock.formatedText[c] = {
@@ -246,19 +240,19 @@ var ADocEditor = function (customConfig) {
                         ...style,
                         width: charWidth
                     }
-                    if (tempLineWidth+charWidth > maxLineWidth) {
+                    if (tempLineWidth + charWidth > maxLineWidth) {
                         // cannot add this// new line should be added//
                         i = wordEndIndex;
-                        lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex+1)
+                        lineObj.plainContent = dataBlock.plainContent.slice(lineObj.charStartIndex, lineObj.charEndIndex + 1)
                         lines.push(lineObj)
                         lineObj = new getLineObj()
                         lineObj.listIndex = dataBlock.listIndex
                         lineObj.maxLineWidth = maxLineWidth
                         lineObj.tabCount = dataBlock.tabCount
-                        lineObj.charStartIndex = i+1
-                        lineObj.charEndIndex = i+1
+                        lineObj.charStartIndex = i + 1
+                        lineObj.charEndIndex = i + 1
                         tempLineWidth = 0
-                    }else tempLineWidth+=charWidth
+                    } else tempLineWidth += charWidth
 
                 }
 
@@ -438,16 +432,12 @@ var ADocEditor = function (customConfig) {
                 ++caretData.index
             }
             else if (e.key == 'ArrowLeft') {
-                console.log('Left')
                 if (caretData.index) {
                     --caretData.index
-                    console.log('move')
                 }
             }
             else if (e.key == 'ArrowRight') {
-                console.log('Right')
                 if (caretData.index < caretData.activeData.plainContent.length) {
-                    console.log('move')
                     ++caretData.index
                 }
             }
@@ -462,21 +452,21 @@ var ADocEditor = function (customConfig) {
             reRenderCanvas()
         }
 
-        function placeCaret( cursor={ x: 0, y: 0 } ){
+        function placeCaret(cursor = { x: 0, y: 0 }) {
 
 
 
             let found = false
-            for( let l=0; l<lines.length; l++ ){
-                if ( (cursor.y <= lines[l].y) && (cursor.y>= (lines[l].maxFontSize*pxMmRatio)) ){
-                    let dataSet = dataList[ lines[l].dataIndex ]
-                    for ( let c=lines[l].charStartIndex; c<=lines[l].charEndIndex; c++ ){
-                        if ( (cursor.x >= dataSet.formatedText[c].x) && (cursor.x<= (dataSet.formatedText[c].width+dataSet.formatedText[c].x))){
+            for (let l = 0; l < lines.length; l++) {
+                if ((cursor.y <= lines[l].y) && (cursor.y >= (lines[l].maxFontSize * pxMmRatio))) {
+                    let dataSet = dataList[lines[l].dataIndex]
+                    for (let c = lines[l].charStartIndex; c <= lines[l].charEndIndex; c++) {
+                        if ((cursor.x >= dataSet.formatedText[c].x) && (cursor.x <= (dataSet.formatedText[c].width + dataSet.formatedText[c].x))) {
                             caretData.activeData = dataSet
-                            if ( cursor.x <= dataSet.formatedText[c].x+dataSet.formatedText[c].width/2 ){
+                            if (cursor.x <= dataSet.formatedText[c].x + dataSet.formatedText[c].width / 2) {
                                 caretData.index = c
-                            }else{
-                                caretData.index = c+1
+                            } else {
+                                caretData.index = c + 1
                             }
                             found = true
                             caretData.blink = false
@@ -485,10 +475,10 @@ var ADocEditor = function (customConfig) {
                         }
 
                     }
-                    if ( found )break; // break only when the caret index is determined
+                    if (found) break; // break only when the caret index is determined
                 }
             }
-            if (!found){
+            if (!found) {
                 console.log('no char found')
             }
         }
@@ -502,9 +492,9 @@ var ADocEditor = function (customConfig) {
                 // const width = Math.round(rect.width)
                 // const height = Math.round(rect.height)
 
-                const pxX = (e.clientX - rect.left)*config.pageSetup.pxWidth/rect.width;
-                const pxY = (e.clientY - rect.top)*config.pageSetup.pxHeight/rect.height;
-                placeCaret({ x:pxX, y: pxY })
+                const pxX = (e.clientX - rect.left) * config.pageSetup.pxWidth / rect.width;
+                const pxY = (e.clientY - rect.top) * config.pageSetup.pxHeight / rect.height;
+                placeCaret({ x: pxX, y: pxY })
             }
         }
         function onFocusHandler(e) {
@@ -573,11 +563,11 @@ var ADocEditor = function (customConfig) {
     }
 
 
-    function onMouseWheelHandler(e){
+    function onMouseWheelHandler(e) {
         if (e.ctrlKey || e.metaKey) e.preventDefault()
     }
 
-    function addGlobalEvents(e){
+    function addGlobalEvents(e) {
         shadow.querySelector('.page-list').addEventListener('wheel', onMouseWheelHandler)
     }