loadExternalContent completed

dist/assets/a-doc-editor.js

@@ -20,28 +20,18 @@ var ADocEditor = function (customConfig) {
             fontFamily: 'Arial',
             bold: false,
             italic: false,
-            fontColor: "#0007"
+            fontColor: "#1e1f77"
         },
     }
     var config = null;
     var canvasList = []
     var dataSet = [
-        {
-            id: `${++counter}`,
-            type: "text",
-            plainContent: "Did you ever hear about the Great Ice Age or the Pleistocene Epoch? Less than one million years ago, in fact, some 12,000 years ago, an ice sheet many thousands of feet thick rode over Burke Mountain in a southeastward direction.",
-
-        },
-        // {
-        //     id: `${++counter}`,
-        //     type: "text",
-        //     plainContent: "Did you ever hear about the Great Ice Age or the Pleistocene Epoch? Less than one million years ago, in fact, some 12,000 years ago, an ice sheet many thousands of feet thick rode over Burke Mountain in a southeastward direction."
-        // }
+        { id: 1, plainContent: "" }
     ]
 
     var caretData = {
         activeData: dataSet[0],
-        index: dataSet[0].plainContent.length,
+        index: 0,
         interval: null,
         intervalDuration: 800,
         blink: false,
@@ -77,6 +67,7 @@ var ADocEditor = function (customConfig) {
     }
 
     function reRenderPages(dataList, blinking = false) {
+        console.log('rendering', dataList)
         if (renderInProgress) return
         renderInProgress = true
 
@@ -88,15 +79,18 @@ var ADocEditor = function (customConfig) {
         // to clear the canvases
         for (let i = 0; i < canvasList.length; i++) {
             let ctx = canvasList[i].getContext('2d', { willReadFrequently: true })
+            ctx.save()
             ctx.clearRect(0, 0, canvasList[i].width, canvasList[i].height)
             ctx.fillStyle = config.format.background
             ctx.fillRect(0, 0, canvasList[i].width, canvasList[i].height)
+            ctx.restore()
         }
 
         for (let i = 0; i < dataList.length; i++) {
             let canvas = canvasList[canvasIndex]
             canvas.setAttribute("tabIndex", -1)
             renderText(canvas, dataList[i])
+            x = 0;
 
             if (dataList[i].id == caretData.activeData.id) {
                 caretData.canvasIndex = canvasIndex;
@@ -123,16 +117,19 @@ var ADocEditor = function (customConfig) {
 
 
                 let style = { ...config.style, ...dataSet?.style?.[i] }
+                if (i==0){
+                    y += style.fontSize
+                }
                 ctx.save()
-                ctx.font = `28px Arial`
-                ctx.fillStyle = '#0007'
+                ctx.font = `${style.fontSize}px ${style.fontFamily}`
+                ctx.fillStyle = style.fontColor
                 let charWidth = ctx.measureText(dataSet.plainContent[i]).width
                 ctx.restore()
                 dataSet.formatedText[i] = {
                     char: dataSet.plainContent[i],
                     width: charWidth,
                     x: x,
-                    y: y+style.fontSize,
+                    y: y,
                     ...style,
                 }
                 x+= charWidth
@@ -154,6 +151,7 @@ var ADocEditor = function (customConfig) {
             for (let i=0; i<dataSet.formatedText.length; i++){
                 ctx.save()
                 ctx.font = `${dataSet.formatedText[i].fontSize}px ${dataSet.formatedText[i].fontFamily}`
+                console.log('dataSet.formatedText[i].fontColor', dataSet.formatedText[i].fontColor)
                 ctx.fillStyle = dataSet.formatedText[i].fontColor
                 ctx.fillText(dataSet.formatedText[i].char, dataSet.formatedText[i].x, dataSet.formatedText[i].y)
                 ctx.restore()
@@ -173,8 +171,10 @@ var ADocEditor = function (customConfig) {
         function renderCaret() {
             let ctx = canvasList[caretData.canvasIndex].getContext('2d', { willReadFrequently: true })
             let activeTextData = caretData.activeData.formatedText[caretData.index-1]
-            let rectX = activeTextData.x+activeTextData.width;
-            let rectY = activeTextData.y-activeTextData.fontSize;
+            let rectX = activeTextData?.x+activeTextData?.width;
+            let rectY = activeTextData?.y-activeTextData?.fontSize;
+            rectX = rectX?rectX:0
+            rectY = rectY?rectY:0
             let rectWidth = 2;
             let rectHeight = caretData.caretSize;
 
@@ -206,12 +206,12 @@ var ADocEditor = function (customConfig) {
         function onFocusHandler(e) {
             focusedCanvas = e.target
             caretData.blink = false
-            reRenderPages(dataList)
+            reRenderPages(dataSet)
         }
         function onBlurHandler(e) {
             focusedCanvas = null
             caretData.blink = true
-            reRenderPages(dataList)
+            reRenderPages(dataSet)
         }
 
 
@@ -255,7 +255,7 @@ var ADocEditor = function (customConfig) {
             else if (e.keyCode == 40) { }// down key
             else { } // unhandled cases
 
-            reRenderPages(dataList)
+            reRenderPages(dataSet)
             clearInterval(caretData.interval)
             caretData.interval = setInterval(() => {
                 caretData.blink = !caretData.blink
@@ -276,9 +276,20 @@ var ADocEditor = function (customConfig) {
     function destory() {
         clearInterval(caretData.interval)
     }
-    return {
+
+    var returnObj = {
         destory,
+        loadContent: function(data){
+            console.log('to load', JSON.parse( JSON.stringify( dataSet)))
+            dataSet = JSON.parse( JSON.stringify(data) )
+            console.log('new Data', JSON.parse( JSON.stringify( dataSet)))
+            caretData.activeData = null
+            caretData.activeData = dataSet[0]
+            caretData.index = dataSet[0].plainContent.length
+            reRenderPages(dataSet)
+        },
     }
+    return returnObj
 }
 
 

dist/script.js

 import { tempDocData } from "./randomDataSet.js"
 !(async function(){
-
     let editor = new ADocEditor({ element: document.getElementById("user-container-for-editor") })
+    editor.loadContent(tempDocData)
 })()
\ No newline at end of file