setting up new data

dist/assets/a-doc-editor.js

@@ -3,8 +3,6 @@ var ADocEditor = function (customConfig) {
     var counter = 0
     var container = null
     var mainComponent = null
-    var headerComponent = null
-    var footerComponent = null
     var scrollingComponent = null
     var leftSidebar = null
     var rightSidebar = null
@@ -12,7 +10,7 @@ var ADocEditor = function (customConfig) {
         element: "",
         pageSetup: {
             width: 210,
-            height: 210,
+            height: 140,
         },
         format: {
             background: "#fff",
@@ -25,10 +23,10 @@ var ADocEditor = function (customConfig) {
             fontFamily: 'Arial',
             bold: false,
             italic: false,
-            fontColor: "#1e1f77"
+            fontColor: "#0004"
         },
     }
-    var config = JSON.parse( JSON.stringify( defaultConfig ) );
+    var config = JSON.parse(JSON.stringify(defaultConfig));
     var canvasList = []
     const dataTypes = [
         "paragraph", // simple text filled line by line
@@ -43,6 +41,8 @@ var ADocEditor = function (customConfig) {
         }
     ]
 
+    var lines = []
+
     var caretData = {
         activeData: dataSet[0],
         index: 0,
@@ -51,8 +51,8 @@ var ADocEditor = function (customConfig) {
         blink: false,
         canvasIndex: 0,
         caretSize: config.style.fontSize,
-        x: config.style.margin,
-        y: 3*config.style.fontSize/4,
+        x: config.format.margin,
+        y: config.format.margin + (3 * config.style.fontSize / 4),
     }
     var renderInProgress = false;
 
@@ -128,23 +128,17 @@ var ADocEditor = function (customConfig) {
         footerComponent = document.getElementById(footerComponentId)
         leftSidebar = document.getElementById(leftSidebarId)
         rightSidebar = document.getElementById(rightSidebarId)
-        mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click',(e)=>{
+        mainComponent.getElementsByClassName('toggle-sidebar')[0].addEventListener('click', (e) => {
             leftSidebar.classList.toggle('hide')
         })
-        mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click',(e)=>{
+        mainComponent.getElementsByClassName('toggle-sidebar')[1].addEventListener('click', (e) => {
             rightSidebar.classList.toggle('hide')
         })
 
-
-
-        // mainComponent = document.createElement('div')
-        // mainComponent.setAttribute('class', 'a-doc-editor')
-        // container.append(mainComponent)
-
         reRenderPages(dataSet)
     }
 
-    function reRenderPages(dataList, blinking = false) {
+    function reRenderPages(dataList) {
         if (renderInProgress) return
         renderInProgress = true
 
@@ -157,7 +151,7 @@ var ADocEditor = function (customConfig) {
         for (let i = 0; i < canvasList.length; i++) {
             let ctx = canvasList[i].el.getContext('2d', { willReadFrequently: true })
             ctx.save()
-            ctx.clearRect(0, 0, canvasList[i].el.width, canvasList[i].el.height)
+            ctx.clearRect(0, 0, canvasList[i].el.width, canvasList[i].el.height); // clears the canvas
             ctx.fillStyle = config.format.background
             ctx.fillRect(0, 0, canvasList[i].el.width, canvasList[i].el.height)
             ctx.restore()
@@ -167,73 +161,15 @@ var ADocEditor = function (customConfig) {
             let canvas = canvasList[canvasIndex].el
             canvas.setAttribute("tabIndex", -1)
             renderText(canvas, dataList[i])
-            x = 0;
-
-            if (dataList[i].id == caretData.activeData.id) {
-                caretData.canvasIndex = canvasIndex;
-            }
         }
 
-        function renderText(canvas, dataSet) {
+        function renderText(canvas, dataBlock) {
+            console.log('to render text', dataBlock)
             let ctx = canvas.getContext('2d', { willReadFrequently: true })
             ctx.save()
+            ctx.font = `${config.style.fontSize}px ${config.style.fontFamily}`; ctx.fillStyle = "#0006"; ctx.fillText("A", x,y+config.style.fontSize)
 
-            let maxWidth = config.pageSetup.canvasWidth
-            let wordStartIndex = 0
-            let wordEndIndex = 0
-            let wordsLength = 0;
-            dataSet.formatedText = []
-            for (let i = 0; i < dataSet.plainContent.length; i++) {
-
-
-                if (/\s+/.test(dataSet.plainContent[i])) {
-                    wordEndIndex = i
-                }
-
-
-                let style = { ...config.style, ...dataSet?.style?.[i] }
-                if (i == 0) {
-                    y += style.fontSize
-                }
-                ctx.save()
-                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,
-                    canvas: canvas,
-                    ...style,
-                }
-                x += charWidth
-
-                if (wordsLength + charWidth <= maxWidth) {
-                    wordsLength += charWidth
-                } else {
-                    i = wordEndIndex
-                    wordsLength = 0
-                    y += style.fontSize
-                    x = 0;
-                    wordStartIndex = wordEndIndex
-
-                }
-
-
-            }
-            for (let i = 0; i < dataSet.formatedText.length; i++) {
-                ctx.save()
-                ctx.font = `${dataSet.formatedText[i].fontSize}px ${dataSet.formatedText[i].fontFamily}`
-                ctx.fillStyle = dataSet.formatedText[i].fontColor
-                ctx.fillText(dataSet.formatedText[i].char, dataSet.formatedText[i].x, dataSet.formatedText[i].y)
-                ctx.restore()
-            }
-
-
-
-
+            // to calculate the lines
 
 
             ctx.restore()
@@ -244,15 +180,13 @@ var ADocEditor = function (customConfig) {
         // to render caret
         function renderCaret() {
             let ctx = canvasList[caretData.canvasIndex].el.getContext('2d', { willReadFrequently: true })
-            let activeTextData = caretData.activeData.formatedText[caretData.index - 1]
-            if (!activeTextData) activeTextData = caretData.activeData.style
-            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 + activeTextData?.fontSize/3;
-
+            ctx.save()
+            let rectX = 0, rectY = 0, rectWidth = 2, rectHeight = 5*config.style.fontSize/4;
+            if (caretData.caretIndex == 0) {
+                // pick style from line
+            } else {
+                // pick style for previous character
+            }
             const imageData = ctx.getImageData(rectX, rectY, rectWidth, rectHeight);
             const data = imageData.data;
 
@@ -264,6 +198,8 @@ var ADocEditor = function (customConfig) {
                 // Alpha channel remains unchanged (data[i + 3])
                 ctx.putImageData(imageData, rectX, rectY);
             }
+
+            ctx.restore()
         }
 
         function createCanvas() {
@@ -283,10 +219,6 @@ var ADocEditor = function (customConfig) {
             focusedCanvas = e.target
             caretData.blink = false
             reRenderPages(dataSet)
-            caretData.interval = setInterval(() => {
-                caretData.blink = !caretData.blink
-                reRenderPages(dataSet, true)
-            }, caretData.intervalDuration)
         }
         function onBlurHandler(e) {
             focusedCanvas = null
@@ -315,13 +247,13 @@ var ADocEditor = function (customConfig) {
                 e.preventDefault()
             }
             else if (e.keyCode == 13) { // Enter Key
-                if (caretData){
-                    if (caretData.activeData.type == 0){ // for plain text // just go to next line
+                if (caretData) {
+                    if (caretData.activeData.type == 0) { // for plain text // just go to next line
                         let newLineData = {
                             id: ++counter,
                             type: 0,
                             plainContent: "",
-                            style: JSON.parse( JSON.stringify(caretData.activeData.formatedText[caretData.activeData.formatedText.length-1]) )
+                            style: JSON.parse(JSON.stringify(caretData.activeData.formatedText[caretData.activeData.formatedText.length - 1]))
                         }
                         newLineData.style.y += newLineData.style.fontSize
                         newLineData.style.x = 0
@@ -343,14 +275,14 @@ var ADocEditor = function (customConfig) {
             }
             else if (e.keyCode == 37) { // left key
                 e.preventDefault()
-                if (caretData.index<=0){
-                    let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
-                    let previousData = dataSet[currentIndex-1]
-                    if (previousData){
+                if (caretData.index <= 0) {
+                    let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
+                    let previousData = dataSet[currentIndex - 1]
+                    if (previousData) {
                         caretData.activeData = previousData
                         caretData.index = previousData.plainContent.length
                     }
-                }else{
+                } else {
                     caretData.index = (caretData.index <= 0) ? 0 : caretData.index - 1
                 }
             }
@@ -359,12 +291,12 @@ var ADocEditor = function (customConfig) {
             }
             else if (e.keyCode == 39) { // right key
                 e.preventDefault()
-                if (caretData.index <= caretData.activeData.plainContent.length-1){
+                if (caretData.index <= caretData.activeData.plainContent.length - 1) {
                     caretData.index = (caretData.index >= caretData.activeData.plainContent.length) ? caretData.activeData.plainContent.length : caretData.index + 1
-                }else{
-                    let currentIndex = dataSet.findIndex( item => item.id == caretData.activeData.id )
-                    let nextData = dataSet[currentIndex+1]
-                    if (nextData){
+                } else {
+                    let currentIndex = dataSet.findIndex(item => item.id == caretData.activeData.id)
+                    let nextData = dataSet[currentIndex + 1]
+                    if (nextData) {
                         caretData.index = 0
                         caretData.activeData = nextData
                     }
@@ -378,33 +310,21 @@ var ADocEditor = function (customConfig) {
 
             reRenderPages(dataSet)
             clearInterval(caretData.interval)
-            caretData.interval = setInterval(() => {
-                caretData.blink = !caretData.blink
-                reRenderPages(dataSet, true)
-            }, caretData.intervalDuration)
         }
 
-        function setCaretPosition(e){
-
+        function setCaretPosition(e) {
+            console.log('to set caret position, on click')
             let rect = e.target.getBoundingClientRect()
             // console.log('rect', rect)
             let position = {
-                xP: e.offsetX/rect.width,
-                yP: e.offsetY/rect.height,
+                xP: e.offsetX / rect.width,
+                yP: e.offsetY / rect.height,
             }
-            let canvasData = canvasList.find( item => item.el == e.target )
-            position.x = position.xP*config.pageSetup.canvasWidth
-            position.y = position.yP*config.pageSetup.canvasHeight
+            let canvasData = canvasList.find(item => item.el == e.target)
+            position.x = position.xP * config.pageSetup.canvasWidth
+            position.y = position.yP * config.pageSetup.canvasHeight
             let lineY = dataSet[canvasData.dataIndex].style.y
             console.log('positionY', position.y, dataSet[canvasData.dataIndex].style.fontSize)
-            for (let i=canvasData.dataIndex; i<dataSet.length; i++){
-                for ( let j=0; j< dataSet[i].formatedText.length; j++ ){
-                    if ( Math.floor( dataSet[i].formatedText[j].x ) == Math.floor(position.x) ){
-                        console.log('breaked')
-                        break;
-                    }
-                }
-            }
         }
 
 
@@ -430,8 +350,8 @@ var ADocEditor = function (customConfig) {
             caretData.activeData = null
             caretData.activeData = dataSet[0]
         },
-        getContent: function (){
-            return JSON.parse( JSON.stringify( dataSet ) )
+        getContent: function () {
+            return JSON.parse(JSON.stringify(dataSet))
         }
     }
     return returnObj

dist/assets/idea.js

@@ -14,7 +14,6 @@ var defaultConfig = {
     format: {
         background: "#fff",
         margin: 20, // mm //
-        canvasMargin: 20, // px //
         border: "", // could be image or anything
     },
     style: {
@@ -26,6 +25,16 @@ var defaultConfig = {
     },
 }
 
+var caretData = {
+    activeData: dataSet[0], // this holds the active data from the dataSet
+    index: 0,// this holds the caret index of the character in that activeData
+    interval: null, // to store the setInterval for the blinking cursor animation
+    intervalDuration: 800, // ms // to detemine for how long the caret is blinked before reappearing again
+    blink: false, // this will keep alternating to to show the caret or not
+    canvasIndex: 0, // to store index of the canvas which isBeing edited right now.
+    caretSize: config.style.fontSize,
+}
+
 var dataType = [
     "plainText", // plain text, normal text in a pdf or doc text
     "list", // items displayed in a list format
@@ -40,28 +49,16 @@ var dataSet = [
     },
     {
         type: 1, // type 1, denotes it is a list,
+        listType: "",
+        tabNumber: 0, // tab number by default is zero
+        plainText: "This is the first item in the list. it can be wrapped around the line if necessary"
+    },
+    {
+        // this is the second item on the list because the prvious item is also a list and has the same tabNumber
+        type: 1, // type 1, denotes it is a list,
         itemType: "",
         tabNumber: 0, // tab number by default is zero
-        items: [
-            {
-                plainText: "This is the first item in the list. it can be wrapped around the line if necessary"
-            },
-            {
-                plainText: "Second item is here."
-            },
-            {
-                plainText: "The list can be nested like this",
-                items: [
-                    {
-                        plainText: "First nested item is here"
-                    },
-                    {
-                        plainText: "This is the second nested item"
-                    }
-                ]
-            }
-        ]
-
+        plainText: "The second item on the list is here."
     },
     {
         type: 0, // this is just a blank line that is added