arrow keys function

dist/assets/a-doc-editor2.js

@@ -127,7 +127,10 @@ var ADocEditor = function (customConfig) {
                     ...caretData.style,
                     fontFamily: e.target.value,
                 }
-
+                if (lastFocussedPage) {
+                    lastFocussedPage.focus()
+                    lastFocussedPage.scrollIntoView({ behavior: 'manual' })
+                }
             })
             addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
             addFonts(["./assets/fonts/ArchitectsDaughter-Regular.woff2", "./assets/fonts/ArchitectsDaughter-Regular.ttf"], 'Architects Daughter')
@@ -226,7 +229,7 @@ var ADocEditor = function (customConfig) {
 
                 // to calculate the lines
                 let tempLineWidth = 0;
-                let maxLineWidth = config.pageSetup.pxWidth - (config.format.margin * pxMmRatio*2)
+                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?.[c]
@@ -277,10 +280,10 @@ var ADocEditor = function (customConfig) {
         }
 
         function renderLines() {
-            let x = 0, y = config.format.margin*pxMmRatio;
+            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 })
-                x = config.format.margin*pxMmRatio
+                x = config.format.margin * pxMmRatio
                 y = y + (lines[l].maxFontSize * pxMmRatio)
                 lines[l].y = y
                 ctx.save()
@@ -318,22 +321,22 @@ var ADocEditor = function (customConfig) {
             }
             if (!caretData.blink) {
 
-                let x = config.format.margin*pxMmRatio
-                let y = (config.format.margin)*pxMmRatio
-                let height = config.style.fontSize*pxMmRatio*5/4
-                let charData = caretData.activeData.formatedText[caretData.index-1]
-                if (charData){
-                    x = charData.x+charData.width
-                    y = charData.y-charData.fontSize*pxMmRatio
-                }else{
-                    let dataIndex = dataList.findIndex( item => item.id == caretData.activeData.id )
-                    let lineObj = lines.find( item => item.dataIndex==dataIndex && caretData.index>=item.charStartIndex)
-                    if (lineObj){
-                        y = lineObj.y-lineObj.maxFontSize*pxMmRatio
+                let x = config.format.margin * pxMmRatio
+                let y = (config.format.margin) * pxMmRatio
+                let height = config.style.fontSize * pxMmRatio * 5 / 4
+                let charData = caretData.activeData.formatedText[caretData.index - 1]
+                if (charData) {
+                    x = charData.x + charData.width
+                    y = charData.y - charData.fontSize * pxMmRatio
+                } else {
+                    let dataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
+                    let lineObj = lines.find(item => item.dataIndex == dataIndex && caretData.index >= item.charStartIndex)
+                    if (lineObj) {
+                        y = lineObj.y - lineObj.maxFontSize * pxMmRatio
                     }
                 }
 
-                let width = height/10
+                let width = height / 10
                 const imageData = ctx.getImageData(x, y, width, height);
                 const data = imageData.data;
                 caretData.previousCaret = { imageData: structuredClone(imageData), x, y }
@@ -351,7 +354,7 @@ var ADocEditor = function (customConfig) {
             }
 
             ctx.restore()
-            if(toLoop){
+            if (toLoop) {
                 caretData.timeout = setTimeout(() => {
                     renderCaret(true)
                 }, caretData.timeoutDuration)
@@ -404,9 +407,9 @@ var ADocEditor = function (customConfig) {
             if (e.altKey) return
             else if (e.key == 'Backspace') {
                 if (caretData.index == 0) {
-                    let activeDataIndex = dataList.findIndex( item => item.id==caretData.activeData.id )
-                    if (activeDataIndex>0){
-                        caretData.activeData = dataList[activeDataIndex-1]
+                    let activeDataIndex = dataList.findIndex(item => item.id == caretData.activeData.id)
+                    if (activeDataIndex > 0) {
+                        caretData.activeData = dataList[activeDataIndex - 1]
                         caretData.index = caretData.activeData.plainContent.length
                     }
                 } else {
@@ -437,24 +440,24 @@ var ADocEditor = function (customConfig) {
                 caretData.activeData.formatedText.splice(caretData.index, 0, caretData.style)
                 ++caretData.index
             }
-            else if (e.key=='ArrowLeft'){
+            else if (e.key == 'ArrowLeft') {
                 console.log('Left')
-                if (caretData.index){
+                if (caretData.index) {
                     --caretData.index
                     console.log('move')
                 }
             }
-            else if (e.key=='ArrowRight'){
+            else if (e.key == 'ArrowRight') {
                 console.log('Right')
-                if (caretData.index<caretData.activeData.plainContent.length){
+                if (caretData.index < caretData.activeData.plainContent.length) {
                     console.log('move')
                     ++caretData.index
                 }
             }
-            else if (e.key=='ArrowUp'){
+            else if (e.key == 'ArrowUp') {
                 console.log('Up')
             }
-            else if (e.key=='ArrowDown'){
+            else if (e.key == 'ArrowDown') {
                 console.log('Down')
             }
             caretData.blink = false
@@ -462,7 +465,20 @@ var ADocEditor = function (customConfig) {
             reRenderCanvas(dataList)
         }
         function mousedownHandler(e) {
-            // console.log('mouse down')
+            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)
+
+                console.log(`${x} ${y}  -- ${width} ${height}`);
+                console.log(dataList)
+                console.log(lines)
+            }
         }
         function onFocusHandler(e) {
             focussedPage = e.target

dist/script.js

@@ -25,7 +25,7 @@ function setData() {
     editor.loadContent(extractedData)
 }
 
-function generatePDF(){
+function generatePDF() {
     editor.generatePDF("your_doc-pdf-lib.pdf")
 }