new change

dist/assets/a-doc-editor2.js

 let isModule = (typeof module != 'undefined') ? true : false
 if (!isModule) console.log('Browser Environment')
 var ADocEditor = function (customConfig) {
-    var container, shadow, pxMmRatio, configuration, htmlStr, htmlTag, htmlObj = {}, fontList=[], headerToolbar=[];
+    var container, counter = 0, shadow, pxMmRatio, config, htmlStr, htmlTag, htmlObj = {}, fontList = [], headerToolbar = [];
     var paperSizes = {
         "A4": { mmWidth: 210, mmHeight: 297 },
     }
     var defaultConfig = {
         pageSetup: { size: "A4" }, zoom: 1,
+        format: {
+            background: "#fff",
+            margin: 20,
+            border: "",
+            tabWidth: 20,
+        },
+        style: {
+            fontSize: 16,
+            fontFamily: 'Calibri',
+            bold: false,
+            italic: false,
+            fontColor: "#001"
+        },
     }
     var pageList = []
+    var isRendering = false
     function initialize() {
-        configuration = JSON.parse(JSON.stringify(defaultConfig))
+        config = JSON.parse(JSON.stringify(defaultConfig))
         container = customConfig.container
         shadow = container.attachShadow({ mode: "open" })
 
@@ -70,15 +84,15 @@ var ADocEditor = function (customConfig) {
         !(function zoomHandles() {
             let zoomSelect = shadow.querySelector('[adc="zoom"]')
             zoomSelect.addEventListener('change', (e) => {
-                configuration.zoom = Number(e.target.value)
-                reConfigure(configuration)
+                config.zoom = Number(e.target.value)
+                reConfigure(config)
             })
         })()
 
         !(function fontSelectHandle() {
             let fontSelect = shadow.querySelector('[adc="font-select"]')
             headerToolbar.push(fontSelect)
-            fontSelect.addEventListener('change', (e)=>{
+            fontSelect.addEventListener('change', (e) => {
                 console.log('font', e.target.value)
             })
             addFonts(["./assets/fonts/Afacad-VariableFont_wght.woff2", "./assets/fonts/Afacad-VariableFont_wght.ttf"], 'Afacad')
@@ -122,31 +136,31 @@ var ADocEditor = function (customConfig) {
         })()
 
         reConfigure(customConfig)
-        createNewPage(0)
+        reRenderCanvas()
     }
     function reConfigure(newConfig) {
-        if (newConfig?.size && paperSizes[newConfig?.size]) { configuration.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
+        if (newConfig?.size && paperSizes[newConfig?.size]) { config.pageSetup = { ...paperSizes[newConfig.size], size: newConfig.size } }
         else if (newConfig?.width && newConfig?.height) {
-            configuration.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height }
+            config.pageSetup = { size: "Custom", mmWidth: newConfig.width, mmHeight: newConfig.height }
         }
-        else { configuration.pageSetup = { size: "A4", ...paperSizes['A4'] } }
+        else { config.pageSetup = { size: "A4", ...paperSizes['A4'] } }
 
         if (typeof window == 'object') {
-            configuration.pageSetup.multipler = configuration.pageSetup.mmHeight / configuration.pageSetup.mmWidth
-            configuration.pageSetup.pxWidth = 2480
-            configuration.pageSetup.pxHeight = Math.ceil(configuration.pageSetup.pxWidth * configuration.pageSetup.multipler)
+            config.pageSetup.multipler = config.pageSetup.mmHeight / config.pageSetup.mmWidth
+            config.pageSetup.pxWidth = 2480
+            config.pageSetup.pxHeight = Math.ceil(config.pageSetup.pxWidth * config.pageSetup.multipler)
         } else {
-            configuration.pageSetup.pxHeight = configuration.pageSetup.mmHeight
-            configuration.pageSetup.pxWidth = configuration.pageSetup.mmWidth
+            config.pageSetup.pxHeight = config.pageSetup.mmHeight
+            config.pageSetup.pxWidth = config.pageSetup.mmWidth
         }
 
-        if (configuration.zoom) {
-            configuration.pageSetup.uiWidth = configuration.pageSetup.mmWidth * configuration.zoom
-            configuration.pageSetup.uiHeight = configuration.pageSetup.mmHeight * configuration.zoom
+        if (config.zoom) {
+            config.pageSetup.uiWidth = config.pageSetup.mmWidth * config.zoom
+            config.pageSetup.uiHeight = config.pageSetup.mmHeight * config.zoom
         }
 
         for (let p = 0; p < pageList.length; p++) {
-            pageList[p].canvas.style.width = `${configuration.pageSetup.uiWidth}mm`
+            pageList[p].canvas.style.width = `${config.pageSetup.uiWidth}mm`
         }
 
         let scale = shadow.querySelector('.scale')
@@ -154,26 +168,64 @@ var ADocEditor = function (customConfig) {
         let rect = scale.getBoundingClientRect()
         pxMmRatio = rect.width / 100;
 
-        return configuration
+        return config
     }
 
-    function createNewPage(index) {
-        let pageObj = {
-            canvas: null,
-            firstDataIndex: null,
-            firstCharIndex: null,
-            lastDataIndex: null,
-            lastCharIndex: null
+    function reRenderCanvas() {
+        console.log('to rerender the page')
+        if (isRendering) return
+        let pageIndex = 0
+        if (!pageList.length) {
+            pageList[pageIndex] = { id: ++counter, el: createNewPage(), dataIndex: 0 }
+            shadow.querySelector('.page-list').append(pageList[pageIndex].el)
         }
-        if (!isModule) {
-            pageObj.canvas = document.createElement('canvas')
-            pageObj.canvas.setAttribute('tabIndex', '-1')
-            pageObj.canvas.width = configuration.pageSetup.pxWidth
-            pageObj.canvas.height = configuration.pageSetup.pxHeight
-            pageList.push(pageObj)
-            pageObj.canvas.style.width = `${configuration.pageSetup.uiWidth}mm`
-            shadow.querySelector('.page-list').append(pageObj.canvas)
+
+
+        // to clear the canvases
+        for (let i = 0; i < pageList.length; i++) {
+            let ctx = pageList[i].el.getContext('2d', { willReadFrequently: true })
+            ctx.save()
+            ctx.clearRect(0, 0, pageList[i].el.width, pageList[i].el.height); // clears the canvas
+            ctx.fillStyle = config.format.background
+            ctx.fillRect(0, 0, pageList[i].el.width, pageList[i].el.height)
+            ctx.restore()
         }
+
+
+    }
+
+    function createNewPage() {
+        let canvas;
+        if (isModule) {
+            const { createCanvas } = require('canvas')
+            canvas = createCanvas(config.pageSetup.canvasWidth, config.pageSetup.canvasHeight)
+        } else {
+            canvas = document.createElement('canvas')
+            canvas.setAttribute('class', 'page')
+            canvas.width = config.pageSetup.canvasWidth
+            canvas.height = config.pageSetup.canvasHeight
+            canvas.setAttribute("tabIndex", -1)
+            canvas.setAttribute('tabIndex', '-1')
+            canvas.width = config.pageSetup.pxWidth
+            canvas.height = config.pageSetup.pxHeight
+            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)
+
+            canvas.addEventListener('keydown', keydownHandler)
+            // canvas.addEventListener('mousedown', mousedownHandler)
+            // canvas.addEventListener("focus", onFocusHandler)
+            // canvas.addEventListener("blur", onBlurHandler)
+
+        }
+        return canvas
+    }
+
+    function keydownHandler(e) {
+        console.log(`${(e.shiftKey && e.key != 'Shift') ? 'Shift+' : ''}${(e.ctrlKey && e.key != 'Ctrl') ? 'Ctrl+' : ''}${e.key}`)
     }
 
 
@@ -205,7 +257,7 @@ var ADocEditor = function (customConfig) {
         }
 
         function reRenderFontDropdown() {
-            let fontFamilyDropdown = headerToolbar.find( item => item.getAttribute('adc')=='font-select' )
+            let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
             if (fontFamilyDropdown) {
                 fontFamilyDropdown.innerHTML = ""
                 fontList.forEach((font, i) => {
@@ -217,7 +269,7 @@ var ADocEditor = function (customConfig) {
                 })
             }
             // changeFontFamily()
-    
+
         }
 
     }
@@ -225,10 +277,10 @@ var ADocEditor = function (customConfig) {
 
     var returnObj = {
         addFonts,
-        getConfiguration(){ return JSON.parse( JSON.stringify(configuration) ) },
-        getPages(){
-            let pagesToReturn = JSON.parse( JSON.stringify( pageList ) )
-            for ( let i=0; i<pagesToReturn.length; i++ ) pagesToReturn[i].canvas = pageList[i].canvas
+        getConfiguration() { return JSON.parse(JSON.stringify(config)) },
+        getPages() {
+            let pagesToReturn = JSON.parse(JSON.stringify(pageList))
+            for (let i = 0; i < pagesToReturn.length; i++) pagesToReturn[i].canvas = pageList[i].canvas
             return pagesToReturn
         },
     }