font lines calculated

dist/assets/a-doc-editor.js

@@ -36,7 +36,7 @@ var ADocEditor = function (customConfig) {
         {
             id: ++counter,
             type: 0,
-            plainContent: "",
+            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.",
             style: { ...config.style }
         }
     ]
@@ -136,17 +136,15 @@ var ADocEditor = function (customConfig) {
         })
 
         reRenderPages(dataSet)
-
-        removeStyles(dataSet)
     }
 
     function reRenderPages(dataList) {
+        console.clear()
         if (renderInProgress) return
         renderInProgress = true
 
         let canvasIndex = 0
         if (!canvasList.length) canvasList[0] = { el: createCanvas(), dataIndex: 0 }
-        var x = 0, y = 0;
 
 
         // to clear the canvases
@@ -159,50 +157,94 @@ var ADocEditor = function (customConfig) {
             ctx.restore()
         }
 
+        let lines = []
         for (let i = 0; i < dataList.length; i++) {
             let canvas = canvasList[canvasIndex].el
             canvas.setAttribute("tabIndex", -1)
-            renderText(canvas, dataList[i])
+            calculateTextSizeAndPosition(canvas, i)
         }
+        console.log(dataList[0].plainContent.length, dataList[0].plainContent)
+        console.log('lines', lines)
 
 
 
-        function renderText(canvas, dataBlock) {
+        function calculateTextSizeAndPosition(canvas, dataSetIndex) {
+            let dataBlock = dataList[dataSetIndex]
             let ctx = canvas.getContext('2d', { willReadFrequently: true })
             ctx.save()
 
             // to calculate the lines
             let dataLineArr = []
-            let wordsArr = dataBlock.plainContent.split(/\s/);
-            dataBlock.formatedText = []
-            let lineObj = {
-                x: 0,
-                y: 0,
+            function getLineObj(){
+                return {
+                    id: ++counter,
+                    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"
-                style: { maxFontSize: 30 }
-            }
-            let charIndex = 0
-            for (let i=0; i<wordsArr.length; i++){
-                if (i!=0){
-                    charIndex++;
-                }
-
-
-
-
-                // this is to add style on original dataSet
-                for (let j=0; j<wordsArr[i].length; j++){
-                    // console.log('char:', i, j, wordsArr[i][j], charIndex)
-
-                    
-                    charIndex++
-                }
-
-
+                    fontSize: 0,
+                    maxFontSize: 0,
+
+                    dataSetIndex: dataSetIndex,
+                    charStartIndex: 0, // index from where to check
+                    charEndIndex: 0, // index till where to check// not including this index.
+    
+                }
+            }
+            let lineObj = new getLineObj()
+            dataLineArr.push( lineObj )
+            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 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(ctx, dataBlock.plainContent[i], dataBlock.formatedText[i])
+                }
+
+                tempLineWidth += getCharacterWidth( ctx, dataBlock.plainContent[i], style )
+                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
+                    lineObj.charEndIndex = i
+                    dataLineArr.push(lineObj)
+                    tempLineWidth = 0
+                }
+
+                // counter++
+                // if (counter >= 500){
+                //     console.log('was stuck', counter)
+                //     break
+                // }
+            }
+            lineObj.plainContent = dataBlock.plainContent.slice( lineObj.charStartIndex, lineObj.charEndIndex )
+            // there is chance that the last line is not at the width// so we need to handle the last line separately
+            if (lineObj.charEndIndex <= dataBlock.plainContent.length){
+                lineObj.charEndIndex = dataBlock.plainContent.length-1
+            }
+            lineObj.plainContent = dataBlock.plainContent.slice( lineObj.charStartIndex, lineObj.charEndIndex )
+
+            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
             }
             
-            ctx.fillText( dataBlock.plainContent, 0, 70 )
 
 
             ctx.restore()
@@ -369,12 +411,11 @@ var ADocEditor = function (customConfig) {
     }
     function removeStyles(dataList){
         for (let i=0; i<dataList.length; i++){
-            console.log(i, dataList[i])
+            dataList[i].formatedText = []
             for(let j=0; j<dataList[i].plainContent.length; j++){
                 dataList[i].formatedText.push( JSON.parse( JSON.stringify( config.style ) ) )
             }
         }
-        console.log('removedStyles',dataList)
     }