@react-x11/components 0.12.0 → 0.14.0

package/src/richtext/node.ts

@@ -110,8 +110,15 @@ export interface TextRun {
    *  `text-decoration-thickness`. Unset, two pixels below and one thick. */
   underlineOffset?: number;
   underlineThickness?: number;
-  /** 1px rule through the x-height, in this colour — `~~del~~`. */
+  /** Rule through the x-height, in this colour — `~~del~~`. Its middle is
+   *  a third of the run's own ascent above the baseline. */
   strike?: string;
+  /** The rule `strike` draws, as `underlineStyle` names them. Default
+   *  `'single'`; ignored without `strike`. */
+  strikeStyle?: 'single' | 'double' | 'curly' | 'dotted' | 'dashed';
+  /** How thick the rule through is, in the unit `size` is in — CSS's
+   *  `text-decoration-thickness` on a line through. Unset, one pixel. */
+  strikeThickness?: number;
   /** Link target. `null` is a link still streaming in (not clickable). */
   href?: string | null;
   /** OpenType features the run is shaped with, by tag — `{ tnum: 1 }`,
@@ -490,7 +497,8 @@ export class RichTextNode extends Node {
     return runs.map((r) =>
       typeof r.size === 'number' ||
       r.underlineOffset !== undefined ||
-      r.underlineThickness !== undefined
+      r.underlineThickness !== undefined ||
+      r.strikeThickness !== undefined
         ? {
             ...r,
             ...(typeof r.size === 'number' ? { size: r.size * scale } : null),
@@ -500,6 +508,9 @@ export class RichTextNode extends Node {
             ...(r.underlineThickness !== undefined
               ? { underlineThickness: r.underlineThickness * scale }
               : null),
+            ...(r.strikeThickness !== undefined
+              ? { strikeThickness: r.strikeThickness * scale }
+              : null),
           }
         : r,
     );

package/src/richtext/runs.ts

@@ -23,6 +23,11 @@ export interface FillContext {
   save(): void;
   restore(): void;
   fillRect(x: number, y: number, w: number, h: number): void;
+  /** A path, where the backend has one: a thick dotted rule's dots are
+   *  round through these, and square without them. */
+  beginPath?(): void;
+  roundRect?(x: number, y: number, w: number, h: number, radii: number[]): void;
+  fill?(): void;
 }
 
 export function canFill(ctx: unknown): ctx is FillContext {
@@ -180,10 +185,18 @@ export function paintRunBackgrounds(
  *  is one logical pixel thick — `scale` device pixels, so a link on a 2x
  *  panel is underlined as heavily as on a 1x one, not with a hairline —
  *  and an underline two below the baseline, where the run sets neither
- *  (`underlineThickness`, `underlineOffset`, in device pixels by now).
+ *  (`underlineThickness`, `underlineOffset`, in device pixels by now). A
+ *  line through is a logical pixel as well where the run names no
+ *  `strikeThickness`, and is drawn where its face puts it (`strikeTop`).
  *  `rules` picks a pass: CSS draws an underline under the glyphs and a
  *  line through over them (CSS 2.1 Appendix E), which is two passes around
- *  the glyphs'; drawn in one, both go over. */
+ *  the glyphs'; drawn in one, both go over.
+ *
+ *  A rule is drawn a stretch at a time and not a run: a layout hands
+ *  back a run a word, and a pattern begun again under each — dots spread
+ *  from one end of their rule to the other, above all — is a pattern with
+ *  a seam at every space. Runs that touch and draw the same rule share
+ *  one. */
 export function paintRunRules(
   ctx: FillContext,
   line: LaidLine,
@@ -193,52 +206,228 @@ export function paintRunRules(
   rules: 'under' | 'over' | 'all' = 'all',
 ): void {
   const t = ruleThickness(scale);
+  if (rules !== 'over') {
+    // the stretch being gathered: the span whose rule it is, and its ends
+    let ruled: TextRun | null = null;
+    let from = 0;
+    let to = 0;
+    for (const r of line.runs) {
+      const span = r.span;
+      if (!span?.underline) continue;
+      const end = r.x + r.width;
+      if (
+        ruled &&
+        // on either side: a right-to-left stretch's runs come last first
+        (Math.abs(r.x - to) <= 0.5 || Math.abs(end - from) <= 0.5) &&
+        sameRule(ruled, span)
+      ) {
+        from = Math.min(from, r.x);
+        to = Math.max(to, end);
+        continue;
+      }
+      if (ruled) stretchRule(ctx, ruled, line, dx + from, dx + to, dy, t);
+      ruled = span;
+      from = r.x;
+      to = end;
+    }
+    if (ruled) stretchRule(ctx, ruled, line, dx + from, dx + to, dy, t);
+  }
+  if (rules === 'under') return;
+  // A line through, gathered the same way, and ended as well where the
+  // font size changes: it is drawn across each size where that size has
+  // it (`strikeTop`). The faces of one size are one stretch, at the height
+  // they have it between them — a word the face has no glyphs for is set
+  // in another, and the rule does not step for it.
+  let struck: TextRun | null = null;
+  let size: number | undefined;
+  let from = 0;
+  let to = 0;
+  // the stretch's ascent: its first run's, and its runs' by how much of
+  // the stretch each sets, which is read only where they are not all the
+  // first's
+  let ascent = 0;
+  let summed = 0;
+  let widths = 0;
+  let mixed = false;
   for (const r of line.runs) {
     const span = r.span;
-    if (!span) continue;
-    const underline = rules !== 'over' ? span.underline : undefined;
-    const strike = rules !== 'under' ? span.strike : undefined;
-    if (underline) {
-      ctx.fillStyle = underline;
-      underlineRule(
-        ctx,
-        Math.round(dx + line.x + r.x),
-        Math.round(dy + line.baseline + (span.underlineOffset ?? 2 * t)),
-        Math.ceil(r.width),
-        span.underlineStyle ?? 'single',
-        span.underlineThickness === undefined
-          ? t
-          : Math.max(1, Math.round(span.underlineThickness)),
-      );
+    if (!span?.strike) continue;
+    const own = inkExtent(r, line).ascent;
+    const end = r.x + r.width;
+    if (
+      struck &&
+      r.run?.size === size &&
+      (Math.abs(r.x - to) <= 0.5 || Math.abs(end - from) <= 0.5) &&
+      sameStrike(struck, span)
+    ) {
+      from = Math.min(from, r.x);
+      to = Math.max(to, end);
+      summed += own * r.width;
+      widths += r.width;
+      if (own !== ascent) mixed = true;
+      continue;
     }
-    if (strike) {
-      const m = inkExtent(r, line);
-      ctx.fillStyle = strike;
-      ctx.fillRect(
-        Math.round(dx + line.x + r.x),
-        Math.round(dy + line.baseline - m.ascent * 0.38),
-        Math.ceil(r.width),
-        t,
-      );
+    if (struck) {
+      const mean = mixed && widths > 0 ? summed / widths : ascent;
+      strikeRule(ctx, struck, line, dx + from, dx + to, dy, mean, t);
     }
+    struck = span;
+    size = r.run?.size;
+    from = r.x;
+    to = end;
+    ascent = own;
+    summed = own * r.width;
+    widths = r.width;
+    mixed = false;
+  }
+  if (struck) {
+    const mean = mixed && widths > 0 ? summed / widths : ascent;
+    strikeRule(ctx, struck, line, dx + from, dx + to, dy, mean, t);
   }
 }
 
+/** The underline of a stretch of a line, from `from` to `to` of it, as
+ *  `span` has it; `t` is the thickness of a rule that names none. */
+function stretchRule(
+  ctx: FillContext,
+  span: TextRun,
+  line: LaidLine,
+  from: number,
+  to: number,
+  dy: number,
+  t: number,
+): void {
+  const left = Math.round(line.x + from);
+  ctx.fillStyle = span.underline;
+  underlineRule(
+    ctx,
+    left,
+    Math.round(dy + line.baseline + (span.underlineOffset ?? 2 * t)),
+    Math.ceil(line.x + to - left),
+    span.underlineStyle ?? 'single',
+    span.underlineThickness === undefined
+      ? t
+      : Math.max(1, Math.round(span.underlineThickness)),
+    t,
+  );
+}
+
+/** How thick a run's line through is: what it says, on whole pixels, or
+ *  `t`, a rule's own thickness. */
+function strikeThickness(span: TextRun, t: number): number {
+  return span.strikeThickness === undefined
+    ? t
+    : Math.max(1, Math.round(span.strikeThickness));
+}
+
+/**
+ * Where the top of a line through is, across text whose faces' ascent is
+ * `ascent`. Through the middle of the letters with no ascender, which a
+ * face does not say the height of in a way both text engines report: a
+ * third of its ascent above the baseline, where Blink has it, and the
+ * rule's middle there, so that a thick one grows both ways from where a
+ * thin one is. The ascent is the text's own, and not that of the font the
+ * rule was set in: a line through is worked out again across text of
+ * another font size, from the metrics of the fonts that size is set in,
+ * so that the text is still crossed out (CSS Text Decoration 4, 2.5), and
+ * is not held to the one position an underline is (2.9). Blink measures
+ * the ascent of the font the rule was set in from the top of the text it
+ * crosses, which puts it near the top of larger text and under smaller.
+ * The curl is two levels and straddles the middle; a double rule's first
+ * line is the single one's, and its second under it, as Blink draws it.
+ *
+ * A run that names no thickness keeps the pixel it always had: the rule's
+ * top 38% of the ascent up, which at a text size is the same place, and a
+ * pixel off it at some.
+ */
+function strikeTop(
+  line: LaidLine,
+  dy: number,
+  span: TextRun,
+  ascent: number,
+  t: number,
+): number {
+  if (span.strikeThickness === undefined) {
+    return Math.round(dy + line.baseline - ascent * 0.38);
+  }
+  const thick = strikeThickness(span, t);
+  return Math.round(
+    dy +
+      line.baseline -
+      ascent / 3 -
+      (span.strikeStyle === 'curly' ? thick : thick / 2),
+  );
+}
+
+/** The line through a stretch of a line, from `from` to `to` of it, as
+ *  `span` has it, over faces whose ascent is `ascent`. */
+function strikeRule(
+  ctx: FillContext,
+  span: TextRun,
+  line: LaidLine,
+  from: number,
+  to: number,
+  dy: number,
+  ascent: number,
+  t: number,
+): void {
+  const left = Math.round(line.x + from);
+  ctx.fillStyle = span.strike;
+  underlineRule(
+    ctx,
+    left,
+    strikeTop(line, dy, span, ascent, t),
+    Math.ceil(line.x + to - left),
+    span.strikeStyle ?? 'single',
+    strikeThickness(span, t),
+    t,
+  );
+}
+
+/** Whether two spans are struck through with one rule: the same ink, style
+ *  and thickness. Where it is drawn is their faces' to say (`strikeTop`). */
+function sameStrike(a: TextRun, b: TextRun): boolean {
+  return (
+    a === b ||
+    (a.strike === b.strike &&
+      a.strikeStyle === b.strikeStyle &&
+      a.strikeThickness === b.strikeThickness)
+  );
+}
+
+/** Whether two spans are underlined with one rule: the same ink, style,
+ *  place and thickness. */
+function sameRule(a: TextRun, b: TextRun): boolean {
+  return (
+    a === b ||
+    (a.underline === b.underline &&
+      a.underlineStyle === b.underlineStyle &&
+      a.underlineOffset === b.underlineOffset &&
+      a.underlineThickness === b.underlineThickness)
+  );
+}
+
 /** One logical pixel on the device grid, never less than one device pixel. */
 function ruleThickness(scale: number): number {
   return Math.max(1, Math.round(scale));
 }
 
 /**
- * The rule under a run, in one of SGR 4's five styles.
+ * The rule under a run, or through it, in one of SGR 4's five styles.
  *
  * All five are built from rectangles `t` pixels thick — one logical pixel —
  * rather than a stroked path: the mock backend has no path API, and a
  * hairline stroke on a text baseline is not worth an antialiased path even
  * where there is one. The curl is a two-level square wave — at a text size
  * it reads as a squiggle, which is the entire job. The dot pitch and the
- * dash length scale with the thickness, so the pattern is the pattern at
- * any display scale.
+ * dash length scale with the thickness (`dashedRule`), so the pattern is
+ * the pattern at any display scale. The one path is a thick dotted rule's
+ * (`dottedRule`): a square is a dot only while it is too small to be seen
+ * as a square.
+ *
+ * `gap` is what parts the two lines of a double rule: a logical pixel
+ * however thick they are, as Blink parts them, which for a rule of that
+ * thickness is the thickness between them it always was.
  */
 export function underlineRule(
   ctx: FillContext,
@@ -247,20 +436,18 @@ export function underlineRule(
   width: number,
   style: NonNullable<TextRun['underlineStyle']>,
   t = 1,
+  gap = t,
 ): void {
   switch (style) {
     case 'double':
       ctx.fillRect(x, y, width, t);
-      ctx.fillRect(x, y + 2 * t, width, t);
+      ctx.fillRect(x, y + t + gap, width, t);
       return;
     case 'dotted':
-      for (let i = 0; i < width; i += 2 * t) {
-        ctx.fillRect(x + i, y, Math.min(t, width - i), t);
-      }
+      dottedRule(ctx, x, y, width, t);
       return;
     case 'dashed':
-      for (let i = 0; i < width; i += 6 * t)
-        ctx.fillRect(x + i, y, Math.min(3 * t, width - i), t);
+      dashedRule(ctx, x, y, width, t);
       return;
     case 'curly':
       for (let i = 0; i < width; i += 2 * t) {
@@ -278,6 +465,97 @@ export function underlineRule(
   }
 }
 
+/** The thickness a dashed rule's dashes stop being the long ones of a thin
+ *  rule at. */
+const THIN_DASHES = 3;
+
+/**
+ * A dashed rule, its dashes the lengths Blink's are: three times the rule's
+ * thickness and two apart while it is thin, where a shorter dash reads as
+ * a dot and a nearer one as no gap, and twice and one from three pixels up.
+ * The first dash starts the rule and the last ends it, with as many between
+ * as leave the gaps nearest that: a rule that stopped where its length ran
+ * out ended on a sliver of a dash, or on nothing. One with room for two
+ * dashes and less than their gap is two, scaled to fit, and one too short
+ * for two is a line.
+ */
+function dashedRule(
+  ctx: FillContext,
+  x: number,
+  y: number,
+  width: number,
+  t: number,
+): void {
+  const thin = t < THIN_DASHES;
+  const dash = t * (thin ? 3 : 2);
+  const gap = t * (thin ? 2 : 1);
+  if (width <= 2 * dash) {
+    ctx.fillRect(x, y, width, t);
+    return;
+  }
+  if (width <= 2 * dash + gap) {
+    const each = Math.round((dash * width) / (2 * dash + gap));
+    ctx.fillRect(x, y, each, t);
+    ctx.fillRect(x + width - each, y, each, t);
+    return;
+  }
+  // the fewest dashes that gap fits between, and one more: whichever
+  // count's gap is nearer it
+  const few = Math.floor((width + gap) / (dash + gap));
+  const wide = (width - few * dash) / (few - 1);
+  const narrow = (width - (few + 1) * dash) / few;
+  const count =
+    narrow <= 0 || Math.abs(wide - gap) < Math.abs(narrow - gap)
+      ? few
+      : few + 1;
+  const pitch = (width - dash) / (count - 1);
+  for (let i = 0; i < count; i += 1) {
+    ctx.fillRect(x + Math.round(i * pitch), y, dash, t);
+  }
+}
+
+/** The thickest a dotted rule's dots are squares at: past it a square
+ *  reads as one. Where Blink's dotted stroke turns its caps round. */
+const SQUARE_DOTS = 3;
+
+/**
+ * A dotted rule: squares a thickness apart while it is thin, and round dots
+ * once it is thick enough for the shape to show — under a title, where the
+ * thickness follows the font size. The round ones are spread over the
+ * width, the first at its start and the last at its end, as many as leave
+ * the gap between two nearest to a dot's own width; a rule with room for
+ * fewer than two is one dot. A context with no path draws the squares.
+ */
+function dottedRule(
+  ctx: FillContext,
+  x: number,
+  y: number,
+  width: number,
+  t: number,
+): void {
+  if (t <= SQUARE_DOTS || !ctx.beginPath || !ctx.roundRect || !ctx.fill) {
+    for (let i = 0; i < width; i += 2 * t) {
+      ctx.fillRect(x + i, y, Math.min(t, width - i), t);
+    }
+    return;
+  }
+  // the fewest dots a gap of their own width fits, and one more: whichever
+  // count's gap is nearer that width
+  const few = Math.max(1, Math.floor((width + t) / (2 * t)));
+  const wide = few > 1 ? (width - few * t) / (few - 1) : Infinity;
+  const narrow = (width - (few + 1) * t) / few;
+  const count =
+    narrow <= 0 || Math.abs(wide - t) < Math.abs(narrow - t) ? few : few + 1;
+  const pitch = count > 1 ? (width - t) / (count - 1) : 0;
+  for (let i = 0; i < count; i += 1) {
+    // a path a dot: ntk knows a path that is one `roundRect` and fills it
+    // from its corners, where a path of them all is rasterized whole
+    ctx.beginPath();
+    ctx.roundRect(x + i * pitch, y, t, t, [t / 2]);
+    ctx.fill();
+  }
+}
+
 /** A selected empty line still shows as a sliver, so a selection spanning a
  *  blank line does not appear to skip it. Core's own width for the same. */
 export const EMPTY_LINE_BAND = 4;