place caret on clicking

dist/assets/a-doc-editor2.js

@@ -14,7 +14,7 @@ var ADocEditor = function (customConfig) {
             tabWidth: 20, // mm
         },
         style: {
-            fontSize: 20, // this is in mm
+            fontSize: 16, // this is in mm
             fontFamily: 'Calibri',
             bold: false,
             italic: false,
@@ -39,7 +39,7 @@ var ADocEditor = function (customConfig) {
         index: 0,
         timeout: null,
         timeoutDuration: 800,
-        blink: false,
+        blink: true,
         pageIndex: 0,
         caretSize: config.style.fontSize,
         previousCaret: null,
@@ -142,6 +142,7 @@ var ADocEditor = function (customConfig) {
 
         reConfigure(customConfig)
         reRenderCanvas()
+        addGlobalEvents()
     }
     function reConfigure(newConfig) {
         if (newConfig?.size && paperSizes[newConfig?.size]) { config.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
@@ -400,7 +401,6 @@ var ADocEditor = function (customConfig) {
         }
 
         function keydownHandler(e) {
-            console.clear()
             if (e.altKey) return
             else if (e.key == 'Backspace') {
                 if (caretData.index == 0) {
@@ -459,22 +459,52 @@ var ADocEditor = function (customConfig) {
             }
             caretData.blink = false
             caretData.previousCaret = null
-            reRenderCanvas(dataList)
+            reRenderCanvas()
+        }
+
+        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))){
+                            caretData.activeData = dataSet
+                            if ( cursor.x <= dataSet.formatedText[c].x+dataSet.formatedText[c].width/2 ){
+                                caretData.index = c
+                            }else{
+                                caretData.index = c+1
+                            }
+                            found = true
+                            caretData.blink = false
+                            renderCaret(true)
+                            return
+                        }
+
+                    }
+                    if ( found )break; // break only when the caret index is determined
+                }
+            }
+            if (!found){
+                console.log('no char found')
+            }
         }
+
         function mousedownHandler(e) {
-            console.clear()
             if (focussedPage) {
-                console.log('mouse down', e.target)
                 const rect = e.target.getBoundingClientRect(); // Get the position of the canvas
 
-                const x = e.clientX - rect.left; // Adjusted X coordinate
-                const y = e.clientY - rect.top; // Adjusted Y coordinate
-                const width = Math.round(rect.width)
-                const height = Math.round(rect.height)
+                // const x = e.clientX - rect.left; // Adjusted X coordinate
+                // const y = e.clientY - rect.top; // Adjusted Y coordinate
+                // const width = Math.round(rect.width)
+                // const height = Math.round(rect.height)
 
-                console.log(`${x} ${y}  -- ${width} ${height}`);
-                console.log(dataList)
-                console.log(lines)
+                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) {
@@ -543,6 +573,14 @@ var ADocEditor = function (customConfig) {
     }
 
 
+    function onMouseWheelHandler(e){
+        if (e.ctrlKey || e.metaKey) e.preventDefault()
+    }
+
+    function addGlobalEvents(e){
+        shadow.querySelector('.page-list').addEventListener('wheel', onMouseWheelHandler)
+    }
+
     var returnObj = {
         addFonts,
         getConfiguration() { return JSON.parse(JSON.stringify(config)) },