rerender feature fixing

dist/assets/a-doc-editor2.js

@@ -21,6 +21,31 @@ var ADocEditor = function (customConfig) {
             fontColor: "#001"
         },
     }
+    config = JSON.parse(JSON.stringify(defaultConfig))
+    var dataList = [
+        {
+            id: ++counter,
+            type: 0,
+            formatedText: [],
+            plainContent: "",
+            tabCount: 0,
+            style: { ...config.style }
+        },
+    ]
+
+    var caretData = {
+        activeData: dataList[0],
+        index: 0,
+        interval: null,
+        intervalDuration: 800,
+        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 },
+    }
     var pageList = []
     var isRendering = false
     function initialize() {
@@ -100,38 +125,6 @@ var ADocEditor = function (customConfig) {
             addFonts(["./assets/fonts/Assistant-VariableFont_wght.woff2", "./assets/fonts/Assistant-VariableFont_wght.ttf"], 'Assistant')
             addFonts(["./assets/fonts/Bitter-VariableFont_wght.woff2", "./assets/fonts/Bitter-VariableFont_wght.ttf"], 'Bitter')
             addFonts(["./assets/fonts/calibri-regular.woff2", "./assets/fonts/calibri-regular.ttf"], 'Calibri')
-            addFonts(["./assets/fonts/Caveat-VariableFont_wght.woff2", "./assets/fonts/Caveat-VariableFont_wght.ttf"], 'Caveat')
-            addFonts(["./assets/fonts/Comfortaa-VariableFont_wght.woff2", "./assets/fonts/Comfortaa-VariableFont_wght.ttf"], 'Comfortaa')
-            addFonts(["./assets/fonts/CrimsonText-Regular.woff2", "./assets/fonts/CrimsonText-Regular.ttf"], 'Crimson Text')
-            addFonts(["./assets/fonts/EduTASBeginner-VariableFont_wght.woff2", "./assets/fonts/EduTASBeginner-VariableFont_wght.ttf"], 'Edu TAS Beginner')
-            addFonts(["./assets/fonts/FiraSans-Regular.woff2", "./assets/fonts/FiraSans-Regular.ttf"], 'Fira Sans')
-            addFonts(["./assets/fonts/IndieFlower-Regular.woff2", "./assets/fonts/IndieFlower-Regular.ttf"], 'Indie Flower')
-            addFonts(["./assets/fonts/Kanit-Regular.woff2", "./assets/fonts/Kanit-Regular.ttf"], 'Kanit')
-            addFonts(["./assets/fonts/Karla-VariableFont_wght.woff2", "./assets/fonts/Karla-VariableFont_wght.ttf"], 'Karla')
-            addFonts(["./assets/fonts/Kenia-Regular.woff2", "./assets/fonts/Kenia-Regular.ttf"], 'Kenia')
-            addFonts(["./assets/fonts/Lato-Regular.woff2", "./assets/fonts/Lato-Regular.ttf"], 'Lato')
-            addFonts(["./assets/fonts/LibreFranklin-VariableFont_wght.woff2", "./assets/fonts/LibreFranklin-VariableFont_wght.ttf"], 'Libre Franklin')
-            addFonts(["./assets/fonts/Lora-Regular.woff2", "./assets/fonts/Lora-Regular.ttf"], 'Lora')
-            addFonts(["./assets/fonts/Macondo-Regular.woff2", "./assets/fonts/Macondo-Regular.ttf"], 'Macondo')
-            addFonts(["./assets/fonts/Merriweather-Regular.woff2", "./assets/fonts/Merriweather-Regular.ttf"], 'Merriweather')
-            addFonts(["./assets/fonts/Montserrat-VariableFont_wght.woff2", "./assets/fonts/Montserrat-VariableFont_wght.ttf"], 'Montserrat')
-            addFonts(["./assets/fonts/Mulish-VariableFont_wght.woff2", "./assets/fonts/Mulish-VariableFont_wght.ttf"], 'Mulish')
-            addFonts(["./assets/fonts/NotoSans-VariableFont_wdth,wght.woff2", "./assets/fonts/NotoSans-VariableFont_wdth,wght.ttf"], 'Noto Sans')
-            addFonts(["./assets/fonts/Nunito-VariableFont_wght.woff2", "./assets/fonts/Nunito-VariableFont_wght.ttf"], 'Nunito')
-            addFonts(["./assets/fonts/OpenSans-VariableFont_wdth,wght.woff2", "./assets/fonts/OpenSans-VariableFont_wdth,wght.ttf"], 'Open Sans')
-            addFonts(["./assets/fonts/Outfit-VariableFont_wght.woff2", "./assets/fonts/Outfit-VariableFont_wght.ttf"], 'Outfit')
-            addFonts(["./assets/fonts/Pacifico-Regular.woff2", "./assets/fonts/Pacifico-Regular.ttf"], 'Pacifico')
-            addFonts(["./assets/fonts/Poppins-Regular.woff2", "./assets/fonts/Poppins-Regular.ttf"], 'Poppins')
-            addFonts(["./assets/fonts/Prompt-Regular.woff2", "./assets/fonts/Prompt-Regular.ttf"], 'Prompt')
-            addFonts(["./assets/fonts/Rajdhani-Regular.woff2", "./assets/fonts/Rajdhani-Regular.ttf"], 'Rajdhani')
-            addFonts(["./assets/fonts/Roboto-Regular.woff2", "./assets/fonts/Roboto-Regular.ttf"], 'Roboto')
-            addFonts(["./assets/fonts/Rubik-VariableFont_wght.woff2", "./assets/fonts/Rubik-VariableFont_wght.ttf"], 'Rubik')
-            addFonts(["./assets/fonts/SourceCodePro-VariableFont_wght.woff2", "./assets/fonts/SourceCodePro-VariableFont_wght.ttf"], 'Source Code Pro')
-            addFonts(["./assets/fonts/Teko-VariableFont_wght.woff2", "./assets/fonts/Teko-VariableFont_wght.ttf"], 'Teko')
-            addFonts(["./assets/fonts/TitilliumWeb-Regular.woff2", "./assets/fonts/TitilliumWeb-Regular.ttf"], 'Titillium Web')
-            addFonts(["./assets/fonts/Ubuntu-Regular.woff2", "./assets/fonts/Ubuntu-Regular.ttf"], 'Ubuntu')
-            addFonts(["./assets/fonts/VarelaRound-Regular.woff2", "./assets/fonts/VarelaRound-Regular.ttf"], 'Varela Round')
-            addFonts(["./assets/fonts/WorkSans-Regular.woff2", "./assets/fonts/WorkSans-Regular.ttf"], 'Work Sans')
 
         })()
 
@@ -192,43 +185,74 @@ var ADocEditor = function (customConfig) {
         }
 
 
-    }
+        lines = []
 
-    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)
+        calculateTextSizeAndPosition()
+        renderLines()
+        renderCaret()
+
+        function calculateTextSizeAndPosition(){
+            console.log('calculate size and position' )
+        }
 
-            canvas.addEventListener('keydown', keydownHandler)
-            // canvas.addEventListener('mousedown', mousedownHandler)
-            // canvas.addEventListener("focus", onFocusHandler)
-            // canvas.addEventListener("blur", onBlurHandler)
+        function renderLines(){
+            console.log('render lines', lines)
+        }
 
+        function renderCaret(){
+            console.log('handle blinking')
         }
-        return canvas
-    }
 
-    function keydownHandler(e) {
-        console.log(`${(e.shiftKey && e.key != 'Shift') ? 'Shift+' : ''}${(e.ctrlKey && e.key != 'Ctrl') ? 'Ctrl+' : ''}${e.key}`)
+
+        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}`)
+        }
+        function mousedownHandler(e){
+            console.log('mouse down')
+        }
+        function onFocusHandler(e){
+            console.log('focus')
+
+            reRenderCanvas()
+        }
+        function onBlurHandler(e){
+            console.log('blur')
+        }
     }
 
 
+
+
     function addFonts(paths, name) {
         if (typeof paths == 'string') paths = [paths]
         let fontObj = {
@@ -268,9 +292,13 @@ var ADocEditor = function (customConfig) {
                     fontFamilyDropdown.append(optionTag)
                 })
             }
-            // changeFontFamily()
+            changeFontFamily()
 
         }
+        function changeFontFamily(){
+            let fontFamilyDropdown = headerToolbar.find(item => item.getAttribute('adc') == 'font-select')
+            if (fontFamilyDropdown) fontFamilyDropdown.value = caretData.style.fontFamily
+        }
 
     }