Fix text layout and breaking

src/generators/GlyphGenerator.js

@@ -53,7 +53,7 @@ export default class GlyphGenerator {
       return res;
     });
 
-    return new GlyphString(attributedString.string, glyphRuns, 0, attributedString.string.length);
+    return new GlyphString(attributedString.string, glyphRuns);
   }
 
   resolveRuns(attributedString) {

src/layout/LayoutEngine.js

@@ -97,9 +97,10 @@ export default class LayoutEngine {
     const fragments = [];
 
     while (lineRect.y < rect.maxY && pos < glyphString.length && lines < maxLines) {
+      const lineString = glyphString.slice(pos, glyphString.length);
       const lineFragments = this.typesetter.layoutLineFragments(
         lineRect,
-        glyphString.slice(pos, glyphString.length),
+        lineString,
         container,
         paragraphStyle
       );
@@ -108,7 +109,7 @@ export default class LayoutEngine {
 
       if (lineFragments.length > 0) {
         fragments.push(...lineFragments);
-        pos += lineFragments[lineFragments.length - 1].end;
+        pos = lineFragments[lineFragments.length - 1].end;
         lines++;
 
         if (firstLine) {

src/layout/LineBreaker.js

@@ -21,39 +21,38 @@ export default class LineBreaker {
     }
 
     let stringIndex = glyphString.stringIndexForGlyphIndex(glyphIndex);
-
     const bk = this.findBreakPreceeding(glyphString.string, stringIndex);
 
-    // if (bk) {
-    //   let breakIndex = glyphString.glyphIndexForStringIndex(bk.position);
-    //
-    //   if (
-    //     bk.next != null &&
-    //     this.shouldHyphenate(glyphString, breakIndex, width, hyphenationFactor)
-    //   ) {
-    //     const lineWidth = glyphString.offsetAtGlyphIndex(glyphIndex);
-    //     const shrunk = lineWidth + lineWidth * SHRINK_FACTOR;
-    //
-    //     const shrunkIndex = glyphString.glyphIndexAtOffset(shrunk);
-    //     stringIndex = Math.min(bk.next, glyphString.stringIndexForGlyphIndex(shrunkIndex));
-    //
-    //     const point = this.findHyphenationPoint(
-    //       glyphString.string.slice(bk.position, bk.next),
-    //       stringIndex - bk.position
-    //     );
-    //
-    //     if (point > 0) {
-    //       bk.position += point;
-    //       breakIndex = glyphString.glyphIndexForStringIndex(bk.position);
-    //
-    //       if (bk.position < bk.next) {
-    //         glyphString.insertGlyph(breakIndex++, HYPHEN);
-    //       }
-    //     }
-    //   }
-    //
-    //   bk.position = breakIndex;
-    // }
+    if (bk) {
+      let breakIndex = glyphString.glyphIndexForStringIndex(bk.position);
+
+      if (
+        bk.next != null &&
+        this.shouldHyphenate(glyphString, breakIndex, width, hyphenationFactor)
+      ) {
+        const lineWidth = glyphString.offsetAtGlyphIndex(glyphIndex);
+        const shrunk = lineWidth + lineWidth * SHRINK_FACTOR;
+
+        const shrunkIndex = glyphString.glyphIndexAtOffset(shrunk);
+        stringIndex = Math.min(bk.next, glyphString.stringIndexForGlyphIndex(shrunkIndex));
+
+        const point = this.findHyphenationPoint(
+          glyphString.string.slice(bk.position, bk.next),
+          stringIndex - bk.position
+        );
+
+        if (point > 0) {
+          bk.position += point;
+          breakIndex = glyphString.glyphIndexForStringIndex(bk.position);
+
+          if (bk.position < bk.next) {
+            glyphString.insertGlyph(breakIndex++, HYPHEN);
+          }
+        }
+      }
+
+      bk.position = breakIndex;
+    }
 
     return bk;
   }

src/models/GlyphRun.js

@@ -7,13 +7,7 @@ class GlyphRun extends Run {
     this.positions = positions;
     this.stringIndices = stringIndices;
     this.scale = attributes.fontSize / attributes.font.unitsPerEm;
-    this.stringStart = Math.min(...stringIndices);
-    this.stringEnd = Math.max(...stringIndices);
-    this.glyphIndices = [];
-
-    for (let i = 0; i < stringIndices.length; i++) {
-      this.glyphIndices[stringIndices[i]] = i;
-    }
+    this._glyphIndices = null;
 
     if (!preScaled) {
       for (const pos of this.positions) {
@@ -26,7 +20,39 @@ class GlyphRun extends Run {
   }
 
   get length() {
-    return this.glyphs.length;
+    return this.end - this.start;
+  }
+
+  get glyphIndices() {
+    if (this._glyphIndices) {
+      return this._glyphIndices;
+    }
+
+    const glyphIndices = [];
+
+    for (let i = 0; i < this.stringIndices.length; i++) {
+      glyphIndices[this.stringIndices[i]] = i;
+    }
+
+    let lastValue = 0;
+    for (let i = glyphIndices.length - 1; i >= 0; i--) {
+      if (glyphIndices[i] === undefined) {
+        glyphIndices[i] = lastValue;
+      } else {
+        lastValue = glyphIndices[i];
+      }
+    }
+
+    this._glyphIndices = glyphIndices;
+    return glyphIndices;
+  }
+
+  get stringStart() {
+    return Math.min(...this.stringIndices);
+  }
+
+  get stringEnd() {
+    return Math.max(...this.stringIndices);
   }
 
   get advanceWidth() {
@@ -61,15 +87,15 @@ class GlyphRun extends Run {
   }
 
   slice(start, end) {
+    const glyphs = this.glyphs.slice(start, end);
+    const positions = this.positions.slice(start, end);
+    let stringIndices = this.stringIndices.slice(start, end);
+
+    stringIndices = stringIndices.map(index => index - this.stringIndices[start]);
+
     start += this.start;
     end += this.start;
-    end = Math.min(end, this.start + this.glyphs.length);
-
-    const glyphs = this.glyphs.slice(start - this.start, end - this.start);
-    const positions = this.positions.slice(start - this.start, end - this.start);
-    const stringIndices = this.stringIndices
-      .slice(start - this.start, end - this.start)
-      .map(index => index - this.stringIndices[start - this.start]);
+    end = Math.min(end, this.end);
 
     return new GlyphRun(start, end, this.attributes, glyphs, positions, stringIndices, true);
   }