text changed

dist/assets/a-doc-editor.css

@@ -111,7 +111,7 @@
 .a-doc-editor .body .scrolling-area canvas.page {
     background: #f3f3f3;
     margin-bottom: 10px;
-    width: 100%;
+    /* width: 100%; */
     box-shadow: 4px 0px 10px 4px rgba(0, 0, 0, 0.4);
 }
 

dist/assets/a-doc-editor.js

@@ -18,10 +18,10 @@ var ADocEditor = function (customConfig) {
             background: "#fff",
             margin: 20,
             border: "",
-            fontSize: 28,
+            fontSize: 10,
         },
         style: {
-            fontSize: 28,
+            fontSize: 10,
             fontFamily: 'Arial',
             bold: false,
             italic: false,
@@ -40,7 +40,7 @@ var ADocEditor = function (customConfig) {
             type: 0,
             plainContent: "",
             style: {
-                fontSize: 28,
+                fontSize: 10,
                 fontFamily: 'Arial',
                 bold: false,
                 italic: false,
@@ -56,7 +56,7 @@ var ADocEditor = function (customConfig) {
         intervalDuration: 800,
         blink: false,
         canvasIndex: 0,
-        caretSize: 28,
+        caretSize: 10,
         x: 0,
         y: 21,
     }
@@ -155,22 +155,22 @@ var ADocEditor = function (customConfig) {
         renderInProgress = true
 
         let canvasIndex = 0
-        if (!canvasList.length) canvasList[0] = createCanvas()
+        if (!canvasList.length) canvasList[0] = { el: createCanvas(), dataIndex: 0 }
         var x = 0, y = 0;
 
 
         // to clear the canvases
         for (let i = 0; i < canvasList.length; i++) {
-            let ctx = canvasList[i].getContext('2d', { willReadFrequently: true })
+            let ctx = canvasList[i].el.getContext('2d', { willReadFrequently: true })
             ctx.save()
-            ctx.clearRect(0, 0, canvasList[i].width, canvasList[i].height)
+            ctx.clearRect(0, 0, canvasList[i].el.width, canvasList[i].el.height)
             ctx.fillStyle = config.format.background
-            ctx.fillRect(0, 0, canvasList[i].width, canvasList[i].height)
+            ctx.fillRect(0, 0, canvasList[i].el.width, canvasList[i].el.height)
             ctx.restore()
         }
 
         for (let i = 0; i < dataList.length; i++) {
-            let canvas = canvasList[canvasIndex]
+            let canvas = canvasList[canvasIndex].el
             canvas.setAttribute("tabIndex", -1)
             renderText(canvas, dataList[i])
             x = 0;
@@ -211,6 +211,7 @@ var ADocEditor = function (customConfig) {
                     width: charWidth,
                     x: x,
                     y: y,
+                    canvas: canvas,
                     ...style,
                 }
                 x += charWidth
@@ -248,7 +249,7 @@ var ADocEditor = function (customConfig) {
         if (!caretData.blink && caretData.activeData) renderCaret()
         // to render caret
         function renderCaret() {
-            let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true })
+            let ctx = canvasList[caretData.canvasIndex].el.getContext('2d', { willReadFrequently: true })
             let activeTextData = caretData.activeData.formatedText[caretData.index - 1]
             if (!activeTextData) activeTextData = caretData.activeData.style
             let rectX = activeTextData?.x + activeTextData?.width;
@@ -389,9 +390,33 @@ var ADocEditor = function (customConfig) {
             }, caretData.intervalDuration)
         }
 
+        function setCaretPosition(e){
+
+            let rect = e.target.getBoundingClientRect()
+            // console.log('rect', rect)
+            let position = {
+                xP: e.offsetX/rect.width,
+                yP: e.offsetY/rect.height,
+            }
+            let canvasData = canvasList.find( item => item.el == e.target )
+            position.x = position.xP*config.pageSetup.canvasWidth
+            position.y = position.yP*config.pageSetup.canvasHeight
+            let lineY = dataSet[canvasData.dataIndex].style.y
+            console.log('positionY', position.y, dataSet[canvasData.dataIndex].style.fontSize)
+            for (let i=canvasData.dataIndex; i<dataSet.length; i++){
+                for ( let j=0; j< dataSet[i].formatedText.length; j++ ){
+                    if ( Math.floor( dataSet[i].formatedText[j].x ) == Math.floor(position.x) ){
+                        console.log('breaked')
+                        break;
+                    }
+                }
+            }
+        }
+
 
         function mousedownHandler(e) {
             e.target.focus({ preventScroll: true });
+            setCaretPosition(e)
         }
         renderInProgress = false
     }

dist/index.html

@@ -18,7 +18,7 @@
 </head>
 <body>
     <div class="body"></div>
-    <p>Click on the canvas and start typing]
+    <p>Click on the canvas and start typing
         <button onclick="extractData()">Extract</button>
         <button onclick="setData()">Set Data</button>
     </p>