backspace, enter, ctrl+enter events handled

dist/assets/a-doc-editor2.css

@@ -35,15 +35,12 @@
 }
 .page-list {
     position: relative;
-    display: flex;
-    flex-direction: column;
+    display: block;
     overflow-y: auto;
     overflow-x: auto;
     background: #858585;
     gap: 20px;
     align-items: center;
-    padding-top: 20px;
-    padding-bottom: 20px;
 }
 .page-list canvas {
     background-color: #fff;
@@ -51,6 +48,7 @@
     height: auto;
     display: block;
     position: relative;
+    margin: 20px;
 }
 .footer{
     position: relative;

dist/assets/a-doc-editor2.js

@@ -14,7 +14,7 @@ var ADocEditor = function (customConfig) {
             tabWidth: 20,
         },
         style: {
-            fontSize: 16,
+            fontSize: 24,
             fontFamily: 'Calibri',
             bold: false,
             italic: false,
@@ -29,7 +29,8 @@ var ADocEditor = function (customConfig) {
             formatedText: [],
             plainContent: "",
             tabCount: 0,
-            style: { ...config.style }
+            style: { ...config.style },
+            // newPage: false, // if this is true the data is send to new page
         },
     ]
 
@@ -41,10 +42,8 @@ var ADocEditor = function (customConfig) {
         blink: false,
         canvasIndex: 0,
         caretSize: config.style.fontSize,
-        x: config.format.margin,
-        y: config.format.margin + (3 * config.style.fontSize / 4),
         previousCaret: null,
-        style: { ...dataList[0].style },
+        style: { ...dataList[0].style, x: config.format.margin, y: config.format.margin + (3 * config.style.fontSize / 4) },
     }
     var pageList = []
     var isRendering = false
@@ -77,6 +76,10 @@ var ADocEditor = function (customConfig) {
             <option value="0.8">80%</option>
             <option value="0.9">90%</option>
             <option value="1" selected>100%</option>
+            <option value="1.2">120%</option>
+            <option value="1.5">150%</option>
+            <option value="1.8">180%</option>
+            <option value="2">200%</option>
         </select>
         <span class="item">Words : 0</span>
         <span class="item">Sentences : 0</span>
@@ -118,7 +121,11 @@ var ADocEditor = function (customConfig) {
             let fontSelect = shadow.querySelector('[adc="font-select"]')
             headerToolbar.push(fontSelect)
             fontSelect.addEventListener('change', (e) => {
-                console.log('font', e.target.value)
+                caretData.style = {
+                    ...caretData.style,
+                    fontFamily: e.target.value,
+                }
+
             })
             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')
@@ -153,7 +160,7 @@ var ADocEditor = function (customConfig) {
         }
 
         for (let p = 0; p < pageList.length; p++) {
-            pageList[p].canvas.style.width = `${config.pageSetup.uiWidth}mm`
+            pageList[p].el.style.width = `${config.pageSetup.uiWidth}mm`
         }
 
         let scale = shadow.querySelector('.scale')
@@ -165,8 +172,6 @@ var ADocEditor = function (customConfig) {
     }
 
     function reRenderCanvas() {
-        console.clear()
-        console.log('to rerender the page')
         if (isRendering) return
         let pageIndex = 0
         if (!pageList.length) {
@@ -193,35 +198,37 @@ var ADocEditor = function (customConfig) {
         renderCaret()
 
         function calculateTextSizeAndPosition(){
-            console.log('calculate size and position' )
+            // console.log('calculate size and position' )
         }
 
         function renderLines(){
-            console.log('render lines', lines)
+            // console.log('render lines', lines)
         }
 
         function renderCaret(){
-            clearTimeout( caretData.timeout )
-
+            clearTimeout(caretData.timeout)
             let ctx = pageList[0].el.getContext('2d', { willReadFrequently: true })
+            ctx.save()
+
+            if ( caretData.previousCaret ){
 
-            if (caretData.previousCaret){
-                const imageData = ctx.getImageData(caretData.previousCaret.x, caretData.previousCaret.y, caretData.previousCaret.width, caretData.previousCaret.height);
+            
+                const imageData = ctx.getImageData(caretData.style.x, caretData.style.y, caretData.style.fontSize/5, caretData.style.fontSize);
                 const data = imageData.data;
     
                 // Invert the color of the rectangular region
                 for (let i = 0; i < data.length; i += 4) {
-                    data[i] = 255 - data[i]; // Red
-                    data[i + 1] = 255 - data[i + 1]; // Green
-                    data[i + 2] = 255 - data[i + 2]; // Blue
+                    data[i] = data[i]+255; // Red
+                    data[i + 1] = data[i + 1]+255; // Green
+                    data[i + 2] = data[i + 2]+255; // Blue
                     // Alpha channel remains unchanged (data[i + 3])
-                    ctx.putImageData(imageData, caretData.previousCaret.x, caretData.previousCaret.y);
+                    ctx.putImageData(imageData, 100, 200);
                 }
                 caretData.previousCaret = null
             }
-
             if (!caretData.blink){
-                const imageData = ctx.getImageData(100, 200, 10, 300);
+            
+                const imageData = ctx.getImageData(caretData.style.x, caretData.style.y, caretData.style.fontSize/5, caretData.style.fontSize);
                 const data = imageData.data;
     
                 // Invert the color of the rectangular region
@@ -232,11 +239,13 @@ var ADocEditor = function (customConfig) {
                     // Alpha channel remains unchanged (data[i + 3])
                     ctx.putImageData(imageData, 100, 200);
                 }
-                caretData.previousCaret = { x: 100, y: 200, width: 10, height: 300 }
+                caretData.previousCaret = [caretData.style.x, caretData.style.y, caretData.style.fontSize/5, caretData.style.fontSize]
                 caretData.blink = true
             }else{
                 caretData.blink = false
             }
+            ctx.restore()
+
 
             caretData.timeout = setTimeout( ()=>{
                 renderCaret()
@@ -261,7 +270,6 @@ var ADocEditor = function (customConfig) {
                 canvas.style.width = `${config.pageSetup.uiWidth}mm`
 
                 let ctx = canvas.getContext('2d', { willReadFrequently: true })
-                console.log('conf', config)
                 ctx.fillStyle = config.format.background
                 ctx.fillRect(0, 0, canvas.width, canvas.height)
 
@@ -275,18 +283,49 @@ var ADocEditor = function (customConfig) {
         }
 
         function keydownHandler(e) {
-            console.log(`${(e.shiftKey && e.key != 'Shift') ? 'Shift+' : ''}${(e.ctrlKey && e.key != 'Ctrl') ? 'Ctrl+' : ''}${e.key}`)
+            console.clear()
+            if (e.key=='Backspace'){
+                if (caretData.index==0){
+
+                }else{
+                    caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index-1)+ caretData.activeData.plainContent.slice(caretData.index)
+                    caretData.activeData.formatedText.splice( caretData.index-1, 1 )
+                    --caretData.index;
+                }
+            }
+            else if (e.key == 'Enter'){
+                let dataObj = {
+                    id: ++counter,
+                    type: caretData.activeData.type,
+                    formatedText: [],
+                    plainContent: "",
+                    tabCount: caretData.activeData.tabCount,
+                    style: { ...caretData.activeData.style }
+                }
+                if (e.ctrlKey || e.metaKey) dataObj.newPage = true
+                caretData.index = 0
+                caretData.activeData = dataObj
+                dataList.push(dataObj)
+            }
+            else if ( e.key.length==1 && !e.ctrlKey && !e.metaKey){
+                e.preventDefault()
+                caretData.activeData.plainContent = caretData.activeData.plainContent.slice(0, caretData.index) +e.key+ caretData.activeData.plainContent.slice(caretData.index+1)
+                caretData.activeData.formatedText.splice( caretData.index, 0, caretData.style )
+                ++caretData.index
+            }
+            dataList.forEach( (dataSet, s) => console.log(s, dataSet))
+            caretData.blink = false
+            caretData.previousCaret = null
+            reRenderCanvas(dataList)
         }
         function mousedownHandler(e){
-            console.log('mouse down')
+            // console.log('mouse down')
         }
         function onFocusHandler(e){
-            console.log('focus')
-
             reRenderCanvas()
         }
         function onBlurHandler(e){
-            console.log('blur')
+            // console.log('blur')
         }
     }