lines width calculated successfully

dist/assets/a-doc-editor.js

@@ -23,7 +23,7 @@ var ADocEditor = function (customConfig) {
             fontFamily: 'Arial',
             bold: false,
             italic: false,
-            fontColor: "#0004"
+            fontColor: "#001"
         },
     }
     var config = JSON.parse(JSON.stringify(defaultConfig));
@@ -36,7 +36,14 @@ var ADocEditor = function (customConfig) {
         {
             id: ++counter,
             type: 0,
-            plainContent: "This approach divides the text into lines, trying to evenly distribute the words to justify the content within the specified canvas width. Keep in mind that this is a basic example and might not perfectly replicate the behavior of CSS text justification in HTML.",
+            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 }
         }
     ]
@@ -139,7 +146,6 @@ var ADocEditor = function (customConfig) {
     }
 
     function reRenderPages(dataList) {
-        console.clear()
         if (renderInProgress) return
         renderInProgress = true
 
@@ -161,15 +167,14 @@ var ADocEditor = function (customConfig) {
         for (let i = 0; i < dataList.length; i++) {
             let canvas = canvasList[canvasIndex].el
             canvas.setAttribute("tabIndex", -1)
-            calculateTextSizeAndPosition(canvas, i)
+            calculateTextSizeAndPosition(canvasIndex, i)
         }
-        console.log(dataList[0].plainContent.length, dataList[0].plainContent)
-        console.log('lines', lines)
-
+        renderTheLines()
 
 
-        function calculateTextSizeAndPosition(canvas, dataSetIndex) {
+        function calculateTextSizeAndPosition(canvasIndex, dataSetIndex) {
             let dataBlock = dataList[dataSetIndex]
+            let canvas = canvasList[canvasIndex].el
             let ctx = canvas.getContext('2d', { willReadFrequently: true })
             ctx.save()
 
@@ -181,7 +186,6 @@ var ADocEditor = function (customConfig) {
                     x: 0, // this is the starting point x; it will change based on the tabNumber
                     y: 0, // this is the starting y coordinate; it will change based on the max font size
                     plainContent: "",
-                    formatedText: [], // { x: 10, y: 25 }, // bold,italic, fontSize, can be pulled from "dataSet"
                     fontSize: 0,
                     maxFontSize: 0,
 
@@ -206,15 +210,16 @@ var ADocEditor = function (customConfig) {
                 if ( /\s/.test(dataBlock.plainContent[i]) ){
                     wordEndIndex = i
                     lineObj.charEndIndex = wordEndIndex;
-                    // let charWidth = getCharacterWidth(ctx, dataBlock.plainContent[i], dataBlock.formatedText[i])
                 }
 
-                tempLineWidth += getCharacterWidth( ctx, dataBlock.plainContent[i], style )
+                let charWidth = getCharacterWidth( canvasIndex, dataBlock.plainContent[i], style )
+                tempLineWidth += charWidth
                 if (tempLineWidth<=maxLineWidth){
                     // can be added to the line //
                 }else{
                     // cannot add this// new line should be added//
                     i = wordEndIndex;
+                    
                     lineObj.plainContent = dataBlock.plainContent.slice( lineObj.charStartIndex, lineObj.charEndIndex )
                     lineObj = new getLineObj()
                     lineObj.charStartIndex = i
@@ -238,17 +243,30 @@ var ADocEditor = function (customConfig) {
 
             lines.push( ...dataLineArr )            
 
-            function getCharacterWidth(ctx, char, style){
-                ctx.save()
-                ctx.font = `${style?.bold?'bold ':''}${style?.italic?'italic ':''} ${style.fontSize}px ${style.fontFamily}`
+
             ctx.restore()
-                return ctx.measureText(char).width
+            return true
         }
 
+        function renderTheLines(){
+            let canvas = canvasList[0].el
+            ctx = canvas.getContext('2d', {willReadFrequently: true })
+            let x = 0
+            let y = 0
+            for (let l=0; l<lines.length; l++){
+                let style = dataSet[ lines[l].dataSetIndex ].style
+                if ( dataSet[ lines[l].dataSetIndex ]?.formatedText?.[lines[l].charStartIndex] ){
+                    style = dataSet[ lines[l].dataSetIndex ]?.formatedText?.[lines[l].charStartIndex]
+                }
+                let maxFontSize = style.fontSize
+                y += maxFontSize
 
-
+                ctx.save()
+                ctx.font = `${style?.bold?'bold ':''}${style?.italic?'italic ':''} ${style.fontSize}px ${style.fontFamily}`
+                ctx.fillStyle = `${style?.fontColor}`
+                ctx.fillText( lines[l].plainContent, x,y )
                 ctx.restore()
-            return true
+            }
         }
 
         if (!caretData.blink && caretData.activeData) renderCaret()
@@ -276,6 +294,16 @@ var ADocEditor = function (customConfig) {
 
             ctx.restore()
         }
+        function getCharacterWidth(canvasIndex, char, style){
+            let canvas = canvasList[canvasIndex].el
+            let ctx = canvas.getContext('2d', { willReadFrequently: true })
+            ctx.save()
+            ctx.font = `${style?.bold?'bold ':''}${style?.italic?'italic ':''} ${style.fontSize}px ${style.fontFamily}`
+            ctx.fillStyle = `${style?.fontColor}`
+            let width = ctx.measureText(char).width
+            ctx.restore()
+            return width
+        }
 
         function createCanvas() {
             let canvas = document.createElement('canvas')
@@ -388,9 +416,7 @@ var ADocEditor = function (customConfig) {
         }
 
         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,
@@ -399,7 +425,6 @@ var ADocEditor = function (customConfig) {
             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)
         }