Работа над стилизацией текста

client/components/Reader/TextPage/TextPage.vue

@@ -63,6 +63,7 @@ class TextPage extends Vue {
             this.parsed.font = this.font;
             this.parsed.wordWrap = this.wordWrap;
             this.measureText = (text, style) => {// eslint-disable-line no-unused-vars
+                this.context.font = this.fontByStyle(style);
                 return this.context.measureText(text).width;
             };
             this.parsed.measureText = this.measureText;
@@ -130,6 +131,10 @@ class TextPage extends Vue {
         return `${this.fontStyle} ${this.fontSize}px ${this.fontName}`;
     }
 
+    fontByStyle(style) {
+        return `${style.italic ? 'italic' : ''} ${style.bold ? 'bold' : ''} ${this.fontSize}px ${this.fontName}`;
+    }
+
     drawPage() {
         if (!this.lastBook)
             return;
@@ -155,7 +160,6 @@ class TextPage extends Vue {
         let y = 0;
         for (let i = 0; i < len; i++) {
             const line = lines[i];
-console.log(line.parts);
             /* line:
             {
                 begin: Number,
@@ -171,37 +175,42 @@ console.log(line.parts);
             let indent = this.indent + (line.first ? this.p : 0);
             y += this.lineHeight;
 
-            /*let filled = false;
+            let filled = false;
             if (this.textAlignJustify && !line.last) {
-                const words = text.split(' ');
+                let lineText = '';
+                for (const part of line.parts) {
+                    lineText += part.text;
+                }
+                const words = lineText.split(' ');
+
                 if (words.length > 1) {
                     const spaceCount = words.length - 1;
+
                     const space = (this.w - line.width + spaceWidth*spaceCount)/spaceCount;
 
                     let x = indent;
-                    for (const word of words) {
-                        context.fillText(word, x, y);
-                        x += this.measureText(word) + space;
+                    for (const part of line.parts) {
+                        context.font = this.fontByStyle(part.style);
+                        let partWords = part.text.split(' ');
+
+                        for (let i = 0; i < partWords.length; i++) {
+                            let word = partWords[i];
+                            context.fillText(word, x, y);
+                            x += this.measureText(word, part.style) + (i < partWords.length - 1 ? space : 0);
+                        }
                     }
                     filled = true;
                 }
             }
 
-            if (!filled)
-                context.fillText(text, indent, y);
-            */
-            /*let text = '';
-            for (const part of line.parts) {
-                text += part.text;
-            }
-            context.fillText(text, indent, y);
-            */
-            let x = indent;
-            for (const part of line.parts) {
-                let text = part.text;
-                context.font = `${part.style.italic ? 'italic' : ''} ${part.style.bold ? 'bold' : ''} ${this.fontSize}px ${this.fontName}`;
-                context.fillText(text, x, y);
-                x += this.measureText(text);
+            if (!filled) {
+                let x = indent;
+                for (const part of line.parts) {
+                    let text = part.text;
+                    context.font = this.fontByStyle(part.style);
+                    context.fillText(text, x, y);
+                    x += this.measureText(text, part.style);
+                }
             }
         }