remove unnecessary color splitting

goodness, ea50917 actually ended
up removing a lot of code. things were overcomplicated!

Author: chearon

src/layout-flow.ts

@@ -1576,29 +1576,6 @@ export function createInlineIterator(inline: IfcInline) {
   return {next};
 }
 
-export function createPreorderInlineIterator(inline: Inline) {
-  const stack: InlineLevel[] = inline.children.slice().reverse();
-
-  function next(): {done: true} | {done: false, value: Inline | Run} {
-    while (stack.length) {
-      const item = stack.pop()!;
-
-      if (item.isInline()) {
-        for (let i = item.children.length - 1; i >= 0; --i) {
-          stack.push(item.children[i]);
-        }
-        return {done: false, value: item};
-      } else if (item.isRun()) {
-        return {done: false, value: item};
-      }
-    }
-
-    return {done: true};
-  }
-
-  return {next};
-}
-
 interface ParagraphText {
   value: string;
 }

src/layout-text.ts

@@ -1,4 +1,4 @@
-import {binarySearchTuple, basename, loggableText, Logger} from './util.ts';
+import {basename, loggableText, Logger} from './util.ts';
 import {Box, FormattingBox, RenderItem} from './layout-box.ts';
 import {Style} from './style.ts';
 import {
@@ -8,7 +8,6 @@ import {
   IfcVacancy,
   Inline,
   createInlineIterator,
-  createPreorderInlineIterator,
   layoutFloatBox
 } from './layout-flow.ts';
 import LineBreak, {HardBreaker} from './text-line-break.ts';
@@ -21,7 +20,7 @@ import {createItemizeState, itemizeNext} from './text-itemize.ts';
 import type {LoadedFontFace} from './text-font.ts';
 import type {HbFace, HbFont, AllocatedUint16Array} from './text-harfbuzz.ts';
 import type {RenderItemLogOptions} from './layout-box.ts';
-import type {Color, TextAlign, WhiteSpace} from './style.ts';
+import type {TextAlign, WhiteSpace} from './style.ts';
 import type {BlockLevel, InlineLevel, LayoutContext} from './layout-flow.ts';
 
 const lineFeedCharacter = 0x000a;
@@ -778,22 +777,6 @@ export class ShapedItem implements IfcRenderItem {
     }
   }
 
-  // used in shaping
-  colorsStart(colors: [Color, number][]) {
-    const s = binarySearchTuple(colors, this.offset);
-    if (s === colors.length) return s - 1;
-    if (colors[s][1] !== this.offset) return s - 1;
-    return s;
-  }
-
-  // used in shaping
-  colorsEnd(colors: [Color, number][]) {
-    const s = binarySearchTuple(colors, this.end() - 1);
-    if (s === colors.length) return s;
-    if (colors[s][1] !== this.end() - 1) return s;
-    return s + 1;
-  }
-
   end() {
     return this.offset + this.length;
   }
@@ -1805,38 +1788,6 @@ export class Paragraph {
     }
   }
 
-  getColors() {
-    const colors: [Color, number][] = [[this.ifc.style.color, 0]];
-
-    if (this.ifc.hasColoredInline()) {
-      const inlineIterator = createPreorderInlineIterator(this.ifc);
-      let inline = inlineIterator.next();
-
-      while (!inline.done) {
-        const [, lastColorOffset] = colors[colors.length - 1];
-        if (inline.value.isRun()) {
-          const style = inline.value.style;
-          const color = colors[colors.length - 1];
-
-          if (lastColorOffset === inline.value.start) {
-            color[0] = style.color;
-          } else if (
-            style.color.r !== color[0].r ||
-            style.color.g !== color[0].g ||
-            style.color.b !== color[0].b ||
-            style.color.a !== color[0].a
-          ) {
-            colors.push([style.color, inline.value.start]);
-          }
-        }
-
-        inline = inlineIterator.next();
-      }
-    }
-
-    return colors;
-  }
-
   postShapeLoadHyphens() {
     let itemIndex = 0;
     for (let textOffset = 0; textOffset < this.string.length; textOffset++) {

src/paint.ts

@@ -6,7 +6,7 @@ import {Box, FormattingBox} from './layout-box.ts';
 import {binarySearchOf} from './util.ts';
 
 import type {InlineLevel, BlockLevel} from './layout-flow.ts';
-import type {InlineFragment} from './layout-text.ts';
+import type {InlineFragment, Run} from './layout-text.ts';
 import type {Color} from './style.ts';
 import type {LoadedFontFace} from './text-font.ts';
 
@@ -70,7 +70,7 @@ function getTextOffsetsForUncollapsedGlyphs(item: ShapedItem) {
 
 function drawText(
   item: ShapedItem,
-  colors: [Color, number][],
+  run: Run,
   textStart: number,
   textEnd: number,
   b: PaintBackend
@@ -81,8 +81,6 @@ function drawText(
   // Sadly this seems to only work in Firefox and only when the font doesn't do
   // any normalizination, so I could probably stop trying to support it
   // https://github.com/w3c/csswg-drafts/issues/699
-  const colorEnd = item.colorsEnd(colors);
-  let colorIndex = item.colorsStart(colors);
   let tx = item.x;
   const collapsed = getTextOffsetsForUncollapsedGlyphs(item);
   textStart = Math.max(textStart, collapsed.textStart);
@@ -95,32 +93,23 @@ function drawText(
     tx += item.measure(textStart, 1, state).advance;
   }
 
-  while (colorIndex !== colorEnd) {
-    const [color, offset] = colors[colorIndex];
-    const colorStart = offset;
-    const colorEnd = colorIndex + 1 < colors.length ? colors[colorIndex + 1][1] : textEnd;
-    const start = Math.max(colorStart, textStart);
-    const end = Math.min(colorEnd, textEnd);
+  if (textStart < textEnd) {
+    // TODO: should really have isStartColorBoundary, isEndColorBoundary
+    const isColorBoundary = textStart !== item.offset && textStart === run.start
+      || textEnd !== item.end() && textEnd === run.end;
+    const ax = item.measure(textEnd, 1, state).advance;
 
-    if (start < end) {
-      // TODO: should really have isStartColorBoundary, isEndColorBoundary
-      const isColorBoundary = start !== item.offset && start === colorStart
-        || end !== item.end() && end === colorEnd;
-      const ax = item.measure(end, 1, state).advance;
+    if (item.attrs.level & 1) tx -= ax;
 
-      if (item.attrs.level & 1) tx -= ax;
+    b.fillColor = run.style.color;
+    b.fontSize = style.fontSize;
+    b.font = item.face;
+    b.direction = item.attrs.level & 1 ? 'rtl' : 'ltr';
+    b.text(tx, item.y, item, textStart, textEnd, isColorBoundary);
 
-      b.fillColor = color;
-      b.fontSize = style.fontSize;
-      b.font = item.face;
-      b.direction = item.attrs.level & 1 ? 'rtl' : 'ltr';
-      b.text(tx, item.y, item, start, end, isColorBoundary);
-
-      if (!(item.attrs.level & 1)) tx += ax;
-    }
-
-    colorIndex += 1;
+    if (!(item.attrs.level & 1)) tx += ax;
   }
+
 }
 
 /**
@@ -321,11 +310,11 @@ function paintInline(
   paragraph: Paragraph,
   b: PaintBackend
 ) {
-  const colors = paragraph.getColors();
   const items = paragraph.items;
   const stack: InlineLevel[] = [inlineRoot];
   let lastMark = inlineRoot.start;
   let inlineMark = inlineRoot.start;
+  let run: Run | undefined = undefined;
   let mark = inlineRoot.start;
   let itemIndex = 0; // common case, adjusted below if necessary
   let itemEnd = items.length; // common case, adjusted below
@@ -341,7 +330,7 @@ function paintInline(
   while (itemIndex < itemEnd || stack.length) {
     // paint lastMark..mark
     if (itemIndex < itemEnd) {
-      if (lastMark < mark) drawText(items[itemIndex], colors, lastMark, mark, b);
+      if (lastMark < mark) drawText(items[itemIndex], run!, lastMark, mark, b);
       if (mark === items[itemIndex].end()) itemIndex++;
     }
 
@@ -375,6 +364,7 @@ function paintInline(
           }
         }
       } else if (box.isRun()) {
+        run = box;
         inlineMark = box.end;
       }
     }

src/util.ts

@@ -50,30 +50,6 @@ export function binarySearchOf<T>(
   }
 }
 
-/**
- * Binary search that returns the position `x` should be in, using the second
- * value in a tuple in the `a` array
- */
-export function binarySearchTuple<T>(a: [T, number][], x: number): number {
-  let l = 0, r = a.length - 1;
-
-  if (r < 0) return -1;
-
-  while (true) {
-    let i = Math.floor((l+r)/2);
-
-    if (a[i][1] < x) {
-      l = i + 1;
-      if (l > r) return l;
-    } else if (a[i][1] > x) {
-      r = i - 1;
-      if (r < l) return i;
-    } else {
-      return i;
-    }
-  }
-}
-
 let _id = 0;
 export function id(): string {
   return String(_id++);

test/text.spec.js

@@ -851,26 +851,18 @@ describe('Lines', function () {
 
   it('carries over colors and line heights correctly', function () {
     this.layout(`
-      <div style="width: 0; line-height: 32px;">
+      <div style="width: 0; line-height: 32px; font: 10px Ahem;">
         break
         it
         <span style="color: red; line-height: 64px;">down</span>
       </div>
     `);
 
-    /** @type import('../src/layout-flow.ts').IfcInline[] */
-    const [ifc] = this.get(0).children;
-    const colors = ifc.paragraph.getColors();
-
-    expect(colors).to.deep.equal([
-      [{r: 0, g: 0, b: 0, a: 1}, 0],
-      [{r: 255, g: 0, b: 0, a: 1}, 10],
-      [{r: 0, g: 0, b: 0, a: 1}, 14]
+    expect(this.paint().getCalls()).to.deep.equal([
+      {t: 'text', x: 0, y: 8, text: 'break', fillColor: '#000'},
+      {t: 'text', x: 0, y: 18, text: 'it', fillColor: '#000'},
+      {t: 'text', x: 0, y: 55, text: 'down', fillColor: '#f00'}
     ]);
-
-    expect(ifc.paragraph.lineboxes[0].head.value.colorsStart(colors)).to.deep.equal(0);
-    expect(ifc.paragraph.lineboxes[1].head.value.colorsStart(colors)).to.deep.equal(0);
-    expect(ifc.paragraph.lineboxes[2].head.value.colorsStart(colors)).to.deep.equal(1);
   });
 
   it('takes strut into account', function () {