@react-x11/components 0.13.0 → 0.14.0

package/src/html/node.ts

@@ -59,7 +59,7 @@ import {
 } from './css/cascade.js';
 import type { HoverTouch, KeptStyles, MetricFace } from './css/cascade.js';
 import { mediaMatches, parseStylesheet } from './css/parse.js';
-import type { Stylesheet } from './css/parse.js';
+import type { MediaCondition, Stylesheet } from './css/parse.js';
 import { uaStylesheet } from './css/ua.js';
 import type { ComputedStyle, RootLook } from './css/style.js';
 import {
@@ -67,12 +67,16 @@ import {
   buildBoxes,
   CONTENT_IMAGES,
   CLEARED_FROM,
+  COLUMN_LINES,
+  COLUMN_PIECES,
+  COLUMN_ROWS,
   CUT_BLOCKS,
   GENERATED_FROM,
   INLINE_OFFSETS,
   LINE_BOX_RAISES,
   SHIFTED_LINES,
   TEXT_SHIFTS,
+  columned,
 } from './layout/boxes.js';
 import type {
   Box,
@@ -82,8 +86,10 @@ import type {
   ReplacedKind,
   TextLayoutLike,
 } from './layout/boxes.js';
-import { layoutDocument, retranslate, transformed } from './layout/block.js';
+import { layoutDocument, placedMatrix, retranslate } from './layout/block.js';
+import { invert, mapPoint, mapRect, transformed } from './css/transform.js';
 import { TextLayoutCache } from './layout/cache.js';
+import { weightAxes } from './layout/axes.js';
 import { shapingSafe } from './layout/shaping.js';
 import { SurfaceCache, newSurface } from './surfaces.js';
 import type { SurfaceLike } from './surfaces.js';
@@ -109,10 +115,16 @@ import {
   hoistNegative,
   holds,
   holdsAbsolute,
+  inClip,
+  inClipPath,
+  onLine,
+  ownBounds,
   paintDocument,
+  pathClips,
   queryChildIndex,
   selectionRows,
   stackLayers,
+  stacksLayers,
 } from './paint.js';
 import type { PaintContext } from './paint.js';
 import { controlRectsOf, measureControl } from './controls.js';
@@ -716,15 +728,23 @@ export class HtmlViewNode extends Node {
     place: (sheet: Stylesheet, element: Element) => void,
     depth = 0,
     chain: Set<string> = new Set(),
+    /** The media queries `sheet` is itself under, where it was imported
+     *  under some. */
+    under: MediaCondition[][] | null = null,
   ): void {
-    for (const url of sheet.imports) {
+    for (let i = 0; i < sheet.imports.length; i += 1) {
+      const url = sheet.imports[i];
+      // what it imports is under its import's media queries, and under
+      // the ones the sheet importing it is under
+      const conditions = sheet.importConditions[i];
+      const media = conditions ? [...(under ?? []), conditions] : under;
       this._resources.request({ url, kind: 'stylesheet', element });
       const fetched = this._resources.stylesheet(url, [encoding]);
       const base = this._resources.sheetBase(url);
       seen.push({ url, text: fetched?.text ?? null, base });
       const key = base ?? url;
       if (!fetched || depth >= MAX_IMPORT_DEPTH || chain.has(key)) continue;
-      const imported = parseStylesheet(fetched.text, 0, layers, base);
+      const imported = parseStylesheet(fetched.text, 0, layers, base, media);
       chain.add(key);
       this._placeImports(
         imported,
@@ -735,6 +755,7 @@ export class HtmlViewNode extends Node {
         place,
         depth + 1,
         chain,
+        media,
       );
       chain.delete(key);
       place(imported, element);
@@ -849,11 +870,22 @@ export class HtmlViewNode extends Node {
     return height && height > 0 ? height : 600;
   }
 
+  /** The engine this document lays text out with, and the one it is over:
+   *  one object while the engine is, since caches are kept by it. */
+  private _engine: { over: FontsLike; fonts: FontsLike } | null = null;
+
   private _fonts(): FontsLike | null {
     const fonts = (this.app as { fonts?: FontsLike } | null)?.fonts;
+    if (!fonts) return null;
     // a face the engine cannot shape from costs its characters, not the
     // document (`shaping.ts`)
-    return fonts ? shapingSafe(fonts) : null;
+    const safe = shapingSafe(fonts);
+    if (this._engine?.over !== safe) {
+      // and a variable face of the document's is set at the weight its
+      // rule has for a style's (`axes.ts`)
+      this._engine = { over: safe, fonts: weightAxes(safe, this._webFonts) };
+    }
+    return this._engine.fonts;
   }
 
   /** The text layouts the last pass made, for this one to reuse. */
@@ -1072,7 +1104,7 @@ export class HtmlViewNode extends Node {
     // The boxes are device pixels; each rect becomes the style of a widget
     // mounted beside this element, and a style is logical.
     const s = this._scale;
-    const rects = controlRectsOf(tree).map((r) =>
+    const rects = controlRectsOf(tree, s).map((r) =>
       s === 1
         ? r
         : {
@@ -1082,6 +1114,14 @@ export class HtmlViewNode extends Node {
             width: r.width / s,
             height: r.height / s,
             fontSize: r.fontSize / s,
+            ...(r.clip && {
+              clip: {
+                x: r.clip.x / s,
+                y: r.clip.y / s,
+                width: r.clip.width / s,
+                height: r.clip.height / s,
+              },
+            }),
             ...(r.bare && {
               bare: {
                 ...r.bare,
@@ -1396,6 +1436,9 @@ export class HtmlViewNode extends Node {
         rect = { x: caret.x, y: caret.y, width: 0, height: caret.height };
       }
     }
+    // where it is drawn: the rectangle around it, turned and scaled as the
+    // boxes it is in are, and itself (`getBoundingClientRect`, CSSOM View)
+    rect = throughTransforms(rect, box);
     const s = this._scale;
     return {
       x: rect.x / s,
@@ -2342,6 +2385,7 @@ function sameRects(a: ControlRect[], b: ControlRect[]): boolean {
       p.fontFamily !== q.fontFamily ||
       p.fontSize !== q.fontSize ||
       p.opacity !== q.opacity ||
+      !sameClip(p.clip, q.clip) ||
       !sameBare(p.bare, q.bare)
     ) {
       return false;
@@ -2350,6 +2394,13 @@ function sameRects(a: ControlRect[], b: ControlRect[]): boolean {
   return true;
 }
 
+function sameClip(a?: ControlRect['clip'], b?: ControlRect['clip']): boolean {
+  if (!a || !b) return a === b;
+  return (
+    a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
+  );
+}
+
 function sameBare(a?: BareField, b?: BareField): boolean {
   if (!a || !b) return a === b;
   return (
@@ -2399,7 +2450,16 @@ function nearestText(box: Box, x: number, y: number): number | null {
       const distance = dy * 4 + dx;
       if (distance >= bestDistance) continue;
       bestDistance = distance;
-      const local = text.layout.indexAt(x - text.drawX, y - text.drawY);
+      // in the row that is this line's, where the layout's other lines are
+      // in another column and a point past this one is not over them
+      let row = y - text.drawY;
+      if (columned.any && COLUMN_ROWS.has(text)) {
+        row = Math.max(
+          natural.y,
+          Math.min(row, natural.y + natural.height - 0.01),
+        );
+      }
+      const local = text.layout.indexAt(x - text.drawX, row);
       const offsets = layoutOffsetsOf(text.layout);
       const units = offsets.length
         ? offsets[Math.max(0, Math.min(local, offsets.length - 1))]
@@ -2413,14 +2473,37 @@ function nearestText(box: Box, x: number, y: number): number | null {
       axisDistance(y, node.boundsY, node.boundsHeight) * 4 +
       axisDistance(x, node.boundsX, node.boundsWidth);
     if (boundsDistance >= bestDistance) return;
+    // in a box painted through a matrix, the point taken back through it
+    // (`deepestAt`): the text is where it was laid out
+    const matrix = placedMatrix(node);
+    if (!matrix) {
+      visitIn(node);
+      return;
+    }
+    const back = invert(matrix);
+    if (!back) return;
+    const px = x;
+    const py = y;
+    [x, y] = mapPoint(back, px, py);
+    try {
+      visitIn(node);
+    } finally {
+      x = px;
+      y = py;
+    }
+  };
 
+  const visitIn = (node: Box): void => {
     const lines = node.lines;
     if (lines?.length) {
       // The line nearest in y, by binary search; then outward both ways
       // while vertical distance alone could still beat the best.
       let lo = 0;
       let hi = lines.length;
-      while (lo < hi) {
+      // the lines columns took apart are in no order down the page: each
+      // is tried
+      const apart = columned.any && COLUMN_LINES.has(lines);
+      while (!apart && lo < hi) {
         const mid = (lo + hi) >> 1;
         if (lines[mid].y > y) hi = mid;
         else lo = mid + 1;
@@ -2431,8 +2514,10 @@ function nearestText(box: Box, x: number, y: number): number | null {
         tryLine(lines[i]);
       }
       for (let i = lo; i < lines.length; i += 1) {
-        if (axisDistance(y, lines[i].y, lines[i].height) * 4 >= bestDistance)
+        if (axisDistance(y, lines[i].y, lines[i].height) * 4 >= bestDistance) {
+          if (apart) continue;
           break;
+        }
         tryLine(lines[i]);
       }
     }
@@ -2519,7 +2604,16 @@ function caretAt(
           const caret = text.layout.caretPosition(
             codePointAtOffset(offsets, layoutUnits),
           );
-          found = { x: text.drawX + caret.x, y: line.y, height: line.height };
+          const at = throughTransforms(
+            {
+              x: text.drawX + caret.x,
+              y: line.y,
+              width: 0,
+              height: line.height,
+            },
+            node,
+          );
+          found = { x: at.x, y: at.y, height: at.height };
           return;
         }
       }
@@ -2534,6 +2628,21 @@ function caretAt(
   return found;
 }
 
+/**
+ * A rectangle in a box's own coordinates — the ones it and what it holds
+ * were laid out in — as the rectangle around where it is drawn: through
+ * the matrix of each box from `from` up that is painted through one
+ * (`placedMatrix`). The rectangle itself, in a document that transforms
+ * nothing but by moving it.
+ */
+function throughTransforms(rect: Rect, from: Box | null): Rect {
+  for (let at = from; at; at = at.parent) {
+    const matrix = placedMatrix(at);
+    if (matrix) rect = mapRect(matrix, rect.x, rect.y, rect.width, rect.height);
+  }
+  return rect;
+}
+
 /** Every band a document range covers, in window coordinates. The subtree
  *  text ranges prune the walk to the boxes the range actually crosses, so a
  *  drag's small range costs its own paragraphs; only Ctrl+A pays for all. */
@@ -2689,6 +2798,19 @@ function lineBands(
             height: rows.height,
           });
         }
+        // The spaces a piece of a line ends on, where the line goes on
+        // after them: the engine stripped them from the piece it laid out
+        // as a line, and they are the text's all the same, in the elements
+        // that hold its end — a link whose text ends in a space, before
+        // the next link, is that space wider than its letters
+        if (text.trail && b >= text.textEnd && !rtlLine(natural)) {
+          out.push({
+            x: dx + natural.x + natural.width + text.drawX - moved,
+            y: dy + rows.y,
+            width: text.trail,
+            height: rows.height,
+          });
+        }
         // the spaces `pre-wrap` keeps that the line ends on, which have no
         // run: the engine hung them past the line (`LineText.hung`)
         for (const space of text.hung ?? []) {
@@ -2706,6 +2828,14 @@ function lineBands(
   }
 }
 
+/** Whether a laid-out line's last run reads right to left, its end at its
+ *  left. */
+function rtlLine(natural: {
+  runs: { run?: { direction?: string } }[];
+}): boolean {
+  return natural.runs[natural.runs.length - 1]?.run?.direction === 'rtl';
+}
+
 /** Whether a line's text is where the line ends: its last, with nothing
  *  placed after it — an inline-block or an image past its content. */
 function endsLine(
@@ -2732,12 +2862,27 @@ function collectBands(
 ): void {
   if (box.subtreeTextEnd <= box.subtreeTextStart) return;
   if (box.subtreeTextEnd <= from || box.subtreeTextStart >= to) return;
+  const first = out.length;
   if (box.lines) lineBands(box.lines, from, to, dx, dy, out, false, ink);
   // Atomics are ordinary children, reached below.
   for (const child of box.children) {
     if (child.kind === 'text' || child.kind === 'break') continue;
     collectBands(child, from, to, dx, dy, out, ink);
   }
+  // where a box painted through a matrix draws them
+  const matrix = out.length > first ? placedMatrix(box) : null;
+  if (!matrix) return;
+  for (let i = first; i < out.length; i += 1) {
+    const band = out[i];
+    const to = mapRect(
+      matrix,
+      band.x - dx,
+      band.y - dy,
+      band.width,
+      band.height,
+    );
+    out[i] = { ...band, ...to, x: to.x + dx, y: to.y + dy };
+  }
 }
 
 /** The layers of a hit test, in the order CSS paints them within a
@@ -2777,7 +2922,22 @@ function deepestAt(
   // are painted in `z-index` order and then the document's (`byZIndex`),
   // the negative ones under the flow: the Zen Garden's `›` has
   // `z-index: 3` over the bar the "View All Designs" link fills after it.
-  const take = (el: Element, key: readonly number[], text: boolean) => {
+  // Nor is a box the pointer passes through under it: one that is not
+  // visible, which is no target for the pointer in any browser (CSS 2.1
+  // 11.2 has it invisible, and a hit test finds what is seen), or one with
+  // `pointer-events: none` (CSS UI 4, 5.2). Both are inherited, and what is
+  // in such a box may say otherwise, so the walk goes on through it. A
+  // site's closed menu is laid out over its page, hidden: GitHub's covered
+  // its repository's tabs, and the pointer over a tab was over the menu.
+  const take = (
+    el: Element,
+    style: ComputedStyle,
+    key: readonly number[],
+    text: boolean,
+  ) => {
+    if (style.visibility !== 'visible' || style.pointerEvents === 'none') {
+      return;
+    }
     if (compareKeys(key, foundKey) < 0) return;
     found = el;
     foundKey = key;
@@ -2821,12 +2981,72 @@ function deepestAt(
       atViewport = false;
     }
   };
+  // A box painted through a matrix (`placedMatrix`) is under the point
+  // where the matrix puts it: inside the rectangle around what it draws
+  // there, the point is taken back through the matrix, into the
+  // coordinates the box and all it holds were laid out in, and the walk
+  // goes on with that. An icon turned a quarter is pressed where it is
+  // drawn; a box flattened to nothing is nowhere.
   const enterAt = (
     child: Box,
     context: readonly number[],
     clipped: readonly Box[],
+  ): void => {
+    const matrix = placedMatrix(child);
+    if (!matrix) {
+      enterIn(child, context, clipped, null);
+      return;
+    }
+    if (
+      x < child.boundsX ||
+      x >= child.boundsX + child.boundsWidth ||
+      y < child.boundsY ||
+      y >= child.boundsY + child.boundsHeight
+    ) {
+      return;
+    }
+    const back = invert(matrix);
+    if (!back) return;
+    const px = x;
+    const py = y;
+    [x, y] = mapPoint(back, px, py);
+    try {
+      enterIn(child, context, clipped, ownBounds(child));
+    } finally {
+      x = px;
+      y = py;
+    }
+  };
+  const enterIn = (
+    child: Box,
+    context: readonly number[],
+    clipped: readonly Box[],
+    /** What the box draws in its own coordinates, where those are not the
+     *  ones its bounds are in: a box painted through a matrix. */
+    bounds: Rect | null,
   ): void => {
     const style = child.style;
+    // What a `clip-path` cuts away of a box it cuts away of all the box
+    // holds, whatever that is positioned from (CSS Masking 1, 5.1), and
+    // nothing not drawn is under a pointer: a label a page hides for a
+    // screen reader alone under `clip-path: inset(50%)` took the hover and
+    // the press of what was drawn where it lay.
+    if (pathClips(child) && !inClipPath(child, x, y)) return;
+    // `clip` is not that rule as paint has it. It shows the part of an
+    // absolute box it names (CSS 2.1 11.1.2), and past that part nothing is
+    // drawn of the box, nor of what is painted with it. A stacking context
+    // paints all it holds, inside its clip. A box that is none leaves its
+    // positioned boxes to the context around it, which cuts each to the
+    // clips its containing block is under (`clipsFor`): this one for all
+    // but a fixed box, which is under none and is drawn past it. So past
+    // its clip the first is left, and the second is walked as a box that
+    // clips its overflow is past its edge — whether or not the point is in
+    // its own rectangle, which a clip may show only a part of. Both were
+    // walked as if they showed whole: a label hidden for a screen reader
+    // alone under `clip: rect(0, 0, 0, 0)` took the hover and the press of
+    // the link drawn where it lay.
+    let cut = !inClip(child, x, y);
+    if (cut && stacksLayers(child)) return;
     if (
       style.position !== 'static' ||
       (child.parent?.kind === 'flex' && typeof style.zIndex === 'number')
@@ -2834,6 +3054,14 @@ function deepestAt(
       // a flex item with a `z-index` is layered unpositioned (`layered`)
       const z = style.zIndex === 'auto' ? 0 : style.zIndex;
       context = [...context, z < 0 ? HIT_NEGATIVE : HIT_POSITIONED, z];
+    } else if (
+      transformed(style) &&
+      child.kind !== 'inline' &&
+      child.parent &&
+      !onLine(child.parent, child)
+    ) {
+      // a transformed box is painted with the positioned ones (`layered`)
+      context = [...context, HIT_POSITIONED, 0];
     } else if (style.float !== 'none') context = [...context, HIT_FLOAT];
     if (clipped.length !== 0 && child.outOfFlow) {
       const containing = containingBlockOf(child);
@@ -2841,34 +3069,46 @@ function deepestAt(
         ? clipped.filter((clip) => holds(clip, containing))
         : [];
     }
-    const inside =
-      x >= child.x &&
-      x < child.x + child.width &&
-      y >= child.y &&
-      y < child.y + child.height;
+    // in one of its pieces, where columns broke it: its rect takes in the
+    // columns between them, which are other boxes'
+    const pieces = columned.any ? COLUMN_PIECES.get(child) : undefined;
+    const inside = pieces
+      ? pieces.some(
+          (piece) =>
+            x >= piece.x &&
+            x < piece.x + piece.width &&
+            y >= piece.y &&
+            y < piece.y + piece.height,
+        )
+      : x >= child.x &&
+        x < child.x + child.width &&
+        y >= child.y &&
+        y < child.y + child.height;
     const own = inside && hasRect(child);
     if (!own) {
-      const reach = child.boundsY;
-      const known =
-        Number.isFinite(reach) &&
-        (child.boundsWidth > 0 || child.boundsHeight > 0);
+      const left = bounds ? bounds.x : child.boundsX;
+      const reach = bounds ? bounds.y : child.boundsY;
+      const across = bounds ? bounds.width : child.boundsWidth;
+      const down = bounds ? bounds.height : child.boundsHeight;
+      const known = Number.isFinite(reach) && (across > 0 || down > 0);
       if (!known) {
         if (!inside) return;
       } else if (
-        x < child.boundsX ||
-        x >= child.boundsX + child.boundsWidth ||
+        x < left ||
+        x >= left + across ||
         y < reach ||
-        y >= reach + child.boundsHeight
+        y >= reach + down
       ) {
         return;
       }
-      if (clipsOverflow(child)) {
-        if (!holdsAbsolute(child)) return;
-        clipped = [...clipped, child];
-      }
+      if (clipsOverflow(child)) cut = true;
+    }
+    if (cut) {
+      if (!holdsAbsolute(child)) return;
+      clipped = [...clipped, child];
     }
     if (own && child.el && clipped.length === 0) {
-      take(child.el, [...context, HIT_BLOCK], false);
+      take(child.el, style, [...context, HIT_BLOCK], false);
     }
     visit(child, context, clipped);
   };
@@ -2915,7 +3155,8 @@ function deepestAt(
                   tree.textBoxes,
                   text.spans.documentAt(run.start),
                 );
-                if (owner) take(owner, [...context, HIT_INLINE], true);
+                const style = owner && tree.styles.get(owner)?.style;
+                if (style) take(owner, style, [...context, HIT_INLINE], true);
               }
             }
           }
@@ -2986,6 +3227,9 @@ const PAINT_ONLY = new Set([
   'color',
   'textFillColor',
   'cursor',
+  'pointerEvents',
+  'fill',
+  'stroke',
   'backgroundColor',
   'borderTopColor',
   'borderRightColor',
@@ -3002,6 +3246,8 @@ const PAINT_ONLY = new Set([
   'underlineThickness',
   'underlineOffset',
   'lineThrough',
+  'lineThroughStyle',
+  'lineThroughThickness',
 ]);
 
 /** The fields of a run its ink is: what `runFor` takes from `PAINT_ONLY`. */
@@ -3012,6 +3258,8 @@ const INK_FIELDS = [
   'underlineOffset',
   'underlineThickness',
   'strike',
+  'strikeStyle',
+  'strikeThickness',
 ] as const;
 
 /** The fields of a run its shape is, which ink never changes. */
@@ -3065,10 +3313,20 @@ const INK_REACH = new Set([
   'outlineOffset',
 ]);
 
+/** What transforms a box: it moves, turns or scales where it is, and
+ *  nothing around it does (CSS Transforms 1, 3). */
+const TRANSFORM_FIELDS = new Set([
+  'translate',
+  'rotate',
+  'scale',
+  'transform',
+  'transformOrigin',
+]);
+
 /**
  * How two styles of one element differ, for a restyle in place: null where
  * they do not, a `HoverChange` where every difference is ink, how far ink
- * reaches, a `z-index` that stays a stacking context's, or a translation —
+ * reaches, a `z-index` that stays a stacking context's, or a transform —
  * none of which moves anything but the box and what it holds (CSS
  * Transforms 1: a transform does not affect layout) — and false where
  * anything else differs.
@@ -3107,7 +3365,7 @@ function hoverChange(
       change.order = true;
       continue;
     }
-    if (key === 'transformTranslate' || key === 'translate') {
+    if (TRANSFORM_FIELDS.has(key)) {
       change.move = true;
       continue;
     }
@@ -3150,12 +3408,17 @@ function inkOf(box: Box): Rect | null {
   }
   if (!at || at.boundsY === Infinity) return null;
   if (!(at.boundsWidth > 0 && at.boundsHeight > 0)) return null;
-  return {
-    x: at.boundsX,
-    y: at.boundsY,
-    width: at.boundsWidth,
-    height: at.boundsHeight,
-  };
+  // its bounds are in the coordinates of the box it is in, which a box
+  // around it painted through a matrix draws somewhere else
+  return throughTransforms(
+    {
+      x: at.boundsX,
+      y: at.boundsY,
+      width: at.boundsWidth,
+      height: at.boundsHeight,
+    },
+    at.parent,
+  );
 }
 
 /** Structural equality for a computed value: a number, a string, or the