words render

dist/assets/a-doc-editor.js

@@ -14,7 +14,14 @@ var ADocEditor = function (customConfig) {
             margin: 20,
             border: "",
             fontSize: 28,
-        }
+        },
+        style: {
+            fontSize: 28,
+            fontFamily: 'Arial',
+            bold: false,
+            italic: false,
+            fontColor: "#0007"
+        },
     }
     var config = null;
     var canvasList = []
@@ -22,7 +29,7 @@ var ADocEditor = function (customConfig) {
         {
             id: `${++counter}`,
             type: "text",
-            plainContent: "Since they are still preserved in the rocks for us to see, they must have been formed quite recently, that is, geologically speaking. What can explain these striations and their common orientation?"
+            plainContent: "Hello World"
         },
         // {
         //     id: `${++counter}`,
@@ -74,7 +81,7 @@ var ADocEditor = function (customConfig) {
 
         let canvasIndex = 0
         if (!canvasList.length) canvasList[0] = createCanvas()
-        var x = 0, y = config.format.fontSize;
+        var x = 0, y = 0;
 
 
         // to clear the canvases
@@ -99,47 +106,21 @@ var ADocEditor = function (customConfig) {
             let ctx = canvas.getContext('2d', { willReadFrequently: true })
             ctx.save()
 
-
-
-            // make list of each word(separated withblank spaces)
-            // loop through every word.
-            // Check if those words can fit in the writable width
-            // if yes draw those words, on x, y
-            // else add increase y, reset x, letting the indentation level same
-            // repeat
-            let wordsList = dataSet.plainContent.split(/\s+/)
-            let textToDraw = "";
-            let textToDrawWidth = 0;
-            for (let i = 0; i < wordsList.length; i++) {
-
-                let fontSize = 28;
-                let fontFamily = "Arial"
-                // let writableWidth = config.pageSetup.canvasWidth
-                ctx.font = `${fontSize}px ${fontFamily}`
-                ctx.fillStyle = `#0005`
-
-                let nextText = (textToDraw ? (textToDraw + ' ') : '') + wordsList[i]
-                let drawWidth = ctx.measureText(nextText).width
-
-                if (drawWidth <= config.pageSetup.canvasWidth) {
-                    textToDraw = nextText
-                    textToDrawWidth = drawWidth
-                } else {
-                    ctx.fillText(textToDraw, x, y+config.format.fontSize)
-                    y+=config.format.fontSize
-                    textToDraw = wordsList[i]
-                    textToDrawWidth = ctx.measureText(wordsList[i]).width
-                }
-
-            }
-            if (textToDraw){
-                ctx.fillText(textToDraw, x, y+config.format.fontSize)
+            
+            for (let i=0; i<dataSet.plainContent.length; i++){
+                console.log('i',i, dataSet.plainContent[i])
+                ctx.font = `28px Arial`
+                ctx.fillStyle = '#0007'
+                let charWidth = ctx.measureText(dataSet.plainContent[i]).width
+                ctx.fillText(dataSet.plainContent[i], x, y+config.style.fontSize)
+                x += charWidth
             }
 
 
 
 
 
+
             ctx.restore()
             return true
         }