handled margins

dist/assets/a-doc-editor.css

@@ -5,8 +5,7 @@
 }
 
 .a-doc-editor canvas:focus-visible {
-    /* outline: auto rgb(0, 68, 255, 50%); */
-    outline: none;
+    outline: auto rgb(0, 68, 255, 50%);
     background: #fff;
 }
 

dist/assets/a-doc-editor.js

@@ -40,13 +40,30 @@ var ADocEditor = function (customConfig) {
             plainContent: "Rendering text in HTML canvas involves using the CanvasRenderingContext2D interface to display text content within a canvas element. This process allows for dynamic text display, enabling the creation of custom text effects, labels, captions, or textual elements within the canvas.",
             style: { ...config.style }
         },
-
         {
             id: ++counter,
             type: 0,
             plainContent: "To render text on a canvas, developers typically use the fillText() method provided by the Canvas API. This method allows the specification of text content, font styles, position, and color. Additionally, the measureText() method helps in determining the width of text, facilitating accurate positioning and layout arrangements.",
             style: { ...config.style }
-        }
+        },
+        {
+            id: ++counter,
+            type: 0,
+            plainContent: "Text in canvas can be customized by setting various font properties like font family, font size, style (bold, italic), alignment, and color. However, canvas text rendering lacks the text reflow and responsive layout capabilities inherent in HTML and CSS.",
+            style: { ...config.style }
+        },
+        {
+            id: ++counter,
+            type: 0,
+            plainContent: "Despite its intricacies, canvas text rendering offers unparalleled creative freedom, enabling the development of immersive graphical experiences, custom typography, and visually stunning representations that enhance user engagement and interactivity within web-based applications and games.",
+            style: { ...config.style }
+        },
+        {
+            id: ++counter,
+            type: 0,
+            plainContent: "Developers often use canvas text rendering to create graphical representations of text-based information, such as game interfaces, data visualizations, charts, and diagrams. Despite its flexibility in text manipulation and artistic possibilities, rendering text in canvas may require additional manual adjustments for formatting, spacing, and alignment compared to traditional HTML text rendering.",
+            style: { ...config.style }
+        },
     ]
 
     var lines = []
@@ -66,7 +83,7 @@ var ADocEditor = function (customConfig) {
 
     function inititalize(customConfig) {
         config = { ...defaultConfig, ...customConfig }
-        config.pageSetup.canvasMultiplier = Math.round(720 / config.pageSetup.width)
+        config.pageSetup.canvasMultiplier = Math.round(screen.width / config.pageSetup.width)
         config.pageSetup.canvasWidth = config.pageSetup.canvasMultiplier * config.pageSetup.width
         config.pageSetup.canvasHeight = config.pageSetup.canvasMultiplier * config.pageSetup.height
 
@@ -164,10 +181,9 @@ var ADocEditor = function (customConfig) {
             ctx.restore()
         }
 
-        let lines = []
+        lines = []
         for (let i = 0; i < dataList.length; i++) {
             let canvas = canvasList[canvasIndex].el
-            canvas.setAttribute("tabIndex", -1)
             calculateTextSizeAndPosition(canvasIndex, i)
         }
         renderTheLines()
@@ -199,11 +215,13 @@ var ADocEditor = function (customConfig) {
             if (!dataBlock.formatedText) dataBlock.formatedText = []
             let lineObj = new getLineObj()
             dataLineArr.push(lineObj)
+            lineObj.type = dataBlock.type
+            lineObj.blockStart = true
             let lineIndex = 0
             let lineFirstCharIndex = 0; // this is the index of the first character in any line;; will change inside the loop
             let wordEndIndex = 0; // this stores the index of the word which can fit in the line;
             let tempLineWidth = 0;
-            let maxLineWidth = config.pageSetup.canvasWidth
+            let maxLineWidth = config.pageSetup.canvasWidth - (config.format.margin * 2 * config.pageSetup.canvasMultiplier)
             let i = 0
             for (i = 0; i < dataBlock.plainContent.length; i++) {
                 let style = dataBlock?.formatedText?.[i]
@@ -258,17 +276,20 @@ var ADocEditor = function (customConfig) {
             let canvasIndex = 0
             let ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
             let x = 0
-            let y = 0
+            let y = (config.format.margin * config.pageSetup.canvasMultiplier)
+            let maxVericalWidth = (config.pageSetup.canvasHeight - config.format.margin * config.pageSetup.canvasMultiplier * 2)
             for (let l = 0; l < lines.length; l++) {
-                x = 0
+                x = (config.format.margin * config.pageSetup.canvasMultiplier);
                 y += lines[l].maxFontSize
-                if (canvasList[canvasIndex].el.height <= y) {
+                if (lines[l].blockStart && l != 0) y += lines[l].maxFontSize
+                if ((maxVericalWidth + lines[l].maxFontSize) < (y - lines[l].maxFontSize)) {
                     canvasIndex++
+                    lines[l].canvasIndex = canvasIndex
                     if (!canvasList[canvasIndex]) {
                         canvasList[canvasIndex] = { id: ++counter, el: createCanvas(), dataIndex: lines[l].dataSetIndex, lineIndex: l }
-                        ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
                     }
-                    y = lines[l].maxFontSize
+                    ctx = canvasList[canvasIndex].el.getContext('2d', { willReadFrequently: true })
+                    y = lines[l].maxFontSize + (config.format.margin * config.pageSetup.canvasMultiplier)
                 }
                 lines[l].y = y
                 lines[l].x = x
@@ -342,6 +363,7 @@ var ADocEditor = function (customConfig) {
             canvas.addEventListener('mousedown', mousedownHandler)
             canvas.addEventListener("focus", onFocusHandler)
             canvas.addEventListener("blur", onBlurHandler)
+            canvas.setAttribute("tabIndex", -1)
             scrollingComponent.append(canvas)
             return canvas
         }