setting up caret position on mouse click

dist/assets/a-doc-editor.js

@@ -43,6 +43,24 @@ var ADocEditor = function (customConfig) {
             type: 0,
             plainContent: "",
             style: { ...config.style }
+        },
+        {
+            id: ++counter,
+            type: 0,
+            plainContent: "Her hand was balled into a fist with her keys protruding out from between her fingers.",
+            style: { ...config.style }
+        },
+        {
+            id: ++counter,
+            type: 0,
+            plainContent: "",
+            style: { ...config.style }
+        },
+        {
+            id: ++counter,
+            type: 0,
+            plainContent: "She wished that she had something a little more potent than keys between her fingers. It would have been nice to have some mace or pepper spray. He had been meaning to buy some but had never gotten around to it.",
+            style: { ...config.style }
         }
     ]
 
@@ -147,7 +165,7 @@ var ADocEditor = function (customConfig) {
         reRenderPages(dataSet)
     }
 
-    function reRenderPages(dataList, blinking = false) {
+    function reRenderPages(dataList, usingClick=false) {
         if (renderInProgress) return
         renderInProgress = true
 
@@ -169,7 +187,11 @@ var ADocEditor = function (customConfig) {
         for (let i = 0; i < dataList.length; i++) {
             if (dataList[i].plainContent.length == 0) {
                 y += (dataList?.[i].style.fontSize)
+                dataList[i].style.y = y
+            }else{
+                dataList[i].style.y = y+(dataList?.[i].style.fontSize)
             }
+            dataList[i].style.canvasX = x
             let canvas = canvasList[canvasIndex].el
             canvas.setAttribute("tabIndex", -1)
             calculateTextPositions(canvas, dataList[i])
@@ -179,6 +201,7 @@ var ADocEditor = function (customConfig) {
             }
         }
         renderFormattedData()
+        if (!caretData.blink && caretData.activeData) renderCaret()
 
         function calculateTextPositions(canvas, dataBlock) {
             let ctx = canvas.getContext('2d', { willReadFrequently: true })
@@ -248,15 +271,21 @@ var ADocEditor = function (customConfig) {
         function renderFormattedData() {
             let canvasIndex = 0;
             let pageYOffset = 0;
+            canvasList[canvasIndex].startDataIndex = 0;
+            canvasList[canvasIndex].startCharacterIndex = 0
             for (let j = 0; j < dataSet.length; j++) {
                 let dataBlock = dataSet[j]
+                dataBlock.style.maxFontSize = dataBlock.style.fontSize
                 
                 if ( dataBlock.style.y - pageYOffset>= config.pageSetup.canvasHeight ){
                     pageYOffset = dataBlock.style.y - dataBlock.style.fontSize; ; // calculate and use the max Font size on the current line in the formattedText array
                     canvasIndex++;
                     if (!canvasList[canvasIndex]) canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: j }
-                }
 
+                    canvasList[canvasIndex].startDataIndex = j;
+                    canvasList[canvasIndex].startCharacterIndex = 0
+                }
+                dataBlock.style.canvasY = dataBlock.style.y - pageYOffset
                 let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
                 ctx.save()
                 dataBlock.style.canvasIndex = canvasIndex
@@ -269,6 +298,10 @@ var ADocEditor = function (customConfig) {
                         if (!canvasList[canvasIndex]) canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: j }
                         ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
                         ctx.save()
+
+                        canvasList[canvasIndex].startDataIndex = j;
+                        canvasList[canvasIndex].startCharacterIndex = i
+
                     }
 
                     ctx.font = `${dataBlock.formatedText[i].fontSize}px ${dataBlock.formatedText[i].fontFamily}`
@@ -276,7 +309,10 @@ var ADocEditor = function (customConfig) {
                     dataBlock.formatedText[i].canvasX = dataBlock.formatedText[i].x
                     dataBlock.formatedText[i].canvasY = (dataBlock.formatedText[i].y-pageYOffset)
                     ctx.fillText(dataBlock.formatedText[i].char, dataBlock.formatedText[i].canvasX, dataBlock.formatedText[i].canvasY)
-                    dataBlock.formatedText[i].canvasIndex = canvasIndex
+                    dataBlock.formatedText[i].canvasIndex = canvasIndex;
+
+                    // these will be required when rendering caret and locating its positon on the page
+                    if (!(dataBlock.formatedText[i].fontSize<dataBlock.style?.maxFontSize)) dataBlock.style.maxFontSize = dataBlock.formatedText[i].fontSize
                 }
                 ctx.restore()
             }
@@ -286,14 +322,14 @@ var ADocEditor = function (customConfig) {
             for (let i=0; i<canvasDeleted.length; i++) canvasDeleted[i].el.remove();
         }
 
-        if (!caretData.blink && caretData.activeData) renderCaret()
         // to render caret
         function renderCaret() {
+            console.log('caretCanvas',caretData.canvasIndex)
             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;
-            let rectY = activeTextData?.y - activeTextData?.fontSize;
+            let rectX = activeTextData?.canvasX + activeTextData?.width;
+            let rectY = activeTextData?.canvasY - activeTextData?.fontSize;
             rectX = rectX ? rectX : 0
             rectY = rectY ? rectY : 0
             let rectWidth = 2;
@@ -458,29 +494,102 @@ var ADocEditor = function (customConfig) {
         }
 
         function setCaretPosition(e) {
+            console.clear()
 
             let rect = e.target.getBoundingClientRect()
+            let canvasIndex = canvasList.findIndex( item => item.el == e.target )
             let position = {
-                xP: e.offsetX / rect.width,
-                yP: e.offsetY / rect.height,
+                x: Math.round((e.offsetX / rect.width)*config.pageSetup.canvasWidth),
+                y: Math.round((e.offsetY / rect.height)*config.pageSetup.canvasHeight),
             }
-            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
-            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)) {
-                        break;
+
+            let currentPage = canvasList[canvasIndex]
+
+            // to get the last character dataIndex and char Index 
+            if ( canvasList[canvasIndex+1] ){ // if theree is a next canvas
+
+                if (canvasList[canvasIndex+1].startCharacterIndex == 0){
+                    currentPage.endDataIndex = canvasList[canvasIndex+1].startDataIndex -1
+                    currentPage.endCharacterIndex = dataSet [ currentPage.endDataIndex ].plainContent.length
+                }else{
+                    currentPage.endDataIndex = canvasList[canvasIndex+1].startDataIndex
+                    currentPage.endCharacterIndex = canvasList[canvasIndex+1].startCharacterIndex-1
+                }
+
+            }else{ // if THIS is the last canvas
+                currentPage.endDataIndex = dataSet.length-1;
+                currentPage.endCharacterIndex = dataSet [ currentPage.endDataIndex ].plainContent.length
+            }
+
+            let firstCharacterY = (dataSet[currentPage.startDataIndex].formatedText[currentPage.startCharacterIndex]?.canvasY || dataSet[currentPage.startDataIndex].style.canvasY)
+            let lastCharacterY = (dataSet[currentPage.endDataIndex].formatedText[currentPage.endCharacterIndex]?.canvasY || dataSet[currentPage.endDataIndex].style.canvasY)
+            
+
+
+            let setIndex=currentPage.startDataIndex, charIndex=currentPage.startCharacterIndex;
+            let lineY = firstCharacterY;
+
+            while( setIndex<currentPage.endDataIndex || (setIndex==currentPage.endDataIndex && charIndex<=currentPage.endCharacterIndex) ){
+                let thisLineY = (dataSet[setIndex].formatedText[charIndex]?.canvasY || dataSet[setIndex].style.canvasY)
+                let thisLineX = (dataSet[setIndex].formatedText[charIndex]?.canvasX || dataSet[setIndex].style.canvasX)
+                
+                // // check if this is the character
+                if (thisLineY >= position.y){
+                    lineY = thisLineY
+                    if (!dataSet[setIndex].plainContent.length){
+                        charIndex = 0
+                    }else{
+                        console.log('after loop, ', dataSet[setIndex].formatedText[86])
+                        for(let i=charIndex; (dataSet[setIndex].formatedText[i]?.canvasY && dataSet[setIndex].formatedText[i].canvasY == lineY);i++){
+                            console.log('i', i)
+                            if(dataSet[setIndex].formatedText[i]?.canvasX >= position.x){
+                                charIndex = i;
+                                break;
+                            }
+                        }
+                        console.log('after loop')
                     }
+
+
+
+                    caretData.activeData = dataSet[setIndex];
+                    caretData.index = charIndex;
+                    caretData.canvasIndex = canvasIndex;
+                    console.log("caretDatacanvasIndex:", caretData.canvasIndex)
+                    caretData.blink = false
+                    break;
+                }
+                
+                if (!dataSet[setIndex].plainContent.length){
+                    charIndex = 0
+                    setIndex++
+                    continue;
+                }
+
+
+
+                if (charIndex >= dataSet[setIndex].plainContent.length-1){
+                    charIndex = 0
+                    setIndex++
+                }else{
+                    charIndex++
                 }
+
+                console.log("final careCanvasIndex:", caretData.canvasIndex)
             }
+            console.log('full break;')
+            
+            
+
+
+
         }
 
 
         function mousedownHandler(e) {
             e.target.focus({ preventScroll: true });
             setCaretPosition(e)
+            reRenderPages(dataSet)
         }
         renderInProgress = false
     }