rendering text via lines completed

dist/assets/a-doc-editor.js

@@ -36,6 +36,7 @@ var ADocEditor = function (customConfig) {
         {
             id: ++counter,
             type: 0,
+            formatedText: [],
             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 }
         },
@@ -195,6 +196,7 @@ var ADocEditor = function (customConfig) {
     
                 }
             }
+            if (!dataBlock.formatedText) dataBlock.formatedText = []
             let lineObj = new getLineObj()
             dataLineArr.push( lineObj )
             let lineIndex = 0
@@ -204,15 +206,23 @@ var ADocEditor = function (customConfig) {
             let maxLineWidth = config.pageSetup.canvasWidth
             let i=0
             for (i=0; i<dataBlock.plainContent.length; i++){
-
                 let style = dataBlock?.formatedText?.[i]
                 if (!style) style = JSON.parse( JSON.stringify( config.style ) )
                 if ( /\s/.test(dataBlock.plainContent[i]) ){
                     wordEndIndex = i
                     lineObj.charEndIndex = wordEndIndex;
                 }
-
                 let charWidth = getCharacterWidth( canvasIndex, dataBlock.plainContent[i], style )
+                dataBlock.formatedText[i] = {
+                    ...config.style,
+                    width: charWidth
+                }
+
+                if (i==0){
+                    style.bold = true; //render problem
+                    dataBlock.formatedText[0].bold = true
+                }
+                lineObj.maxFontSize = style.fontSize
                 tempLineWidth += charWidth
                 if (tempLineWidth<=maxLineWidth){
                     // can be added to the line //
@@ -254,19 +264,28 @@ var ADocEditor = function (customConfig) {
             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
-
+                x = 0
+                y += lines[l].maxFontSize
+                let setData = dataSet[ lines[l].dataSetIndex ]
+                for (let c=lines[l].charStartIndex; c<lines[l].charEndIndex; c++){
+                    let char = setData?.plainContent[ c ]
+                    if (char){
+                        let style = setData.formatedText[c]
                         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.fillText( char, x,y )
+                        setData.formatedText[c].x = x
+                        setData.formatedText[c].y = y
                         ctx.restore()
+                        if (setData.formatedText[c]?.width){
+                            x += setData.formatedText[c]?.width
+                        }
+                    }
+                }
+
             }
+            console.log('dataSet', dataSet)
         }
 
         if (!caretData.blink && caretData.activeData) renderCaret()