@react-x11/components 0.12.0 → 0.13.0

package/dist/html/paint.js

@@ -43,6 +43,15 @@ import { SvgDrawing, inlineDrawing } from './svg.js';
  * (`layoutDocument`).
  */
 export const OUT_OF_FLOW_REACH = new WeakMap();
+/**
+ * How far above and below a block's lines its inline content draws, at
+ * most, by the array its lines are: glyphs taller than a `line-height` under
+ * their face's height, and an atomic's ink past the line it is on. The
+ * slack a paint's cull of the lines takes on top of their own rows
+ * (`paintLines`); none for the lines of almost every block, whose content
+ * is inside them.
+ */
+const LINE_INK = new WeakMap();
 export function computePaintBounds(box, moved = false) {
     // A box with no rectangle of its own gives only what it holds: nothing,
     // until a child with bounds is met.
@@ -170,8 +179,21 @@ export function computePaintBounds(box, moved = false) {
     // above has its bounds already: walked from its line as well, an
     // inline-block in an inline-block was walked twice a level, and twenty of
     // them took seventy milliseconds a layout.
+    //
+    // And a line's text is drawn from its face's ascent above the baseline to
+    // its descent below, its content area (CSS 2.1 10.6.1), which is past the
+    // line box wherever `line-height` is under the face's height: a line box
+    // is its line-height, whatever its glyphs are. Zen Garden 215's 91px title
+    // sits on the 20px lines its body's `line-height: 1.25em` gave it, as a
+    // length, and hangs 40px above them and 40px below — ink that a repaint
+    // of those rows has to reach, where the lines alone do not.
+    let above = 0;
+    let below = 0;
     if (lines) {
+        const movedOff = MOVED_OFF_LINES.get(lines);
         for (const line of lines) {
+            let top = line.y;
+            let bottom = line.y + line.height;
             for (const placed of line.atomics) {
                 const atomic = placed.box;
                 if (atomic.boundsY === Infinity)
@@ -180,9 +202,35 @@ export function computePaintBounds(box, moved = false) {
                 y1 = Math.min(y1, atomic.boundsY);
                 x2 = Math.max(x2, atomic.boundsX + atomic.boundsWidth);
                 y2 = Math.max(y2, atomic.boundsY + atomic.boundsHeight);
+                top = Math.min(top, atomic.boundsY);
+                bottom = Math.max(bottom, atomic.boundsY + atomic.boundsHeight);
+            }
+            // what `position: relative` moved off a line the cull finds on its
+            // own (`reachedOff`), wherever it went
+            if (movedOff?.has(line))
+                continue;
+            for (const text of line.texts) {
+                const natural = text.layout.lines[text.layoutLine];
+                if (!natural)
+                    continue;
+                const baseline = text.drawY + natural.baseline;
+                top = Math.min(top, baseline - (natural.ascent ?? 0));
+                bottom = Math.max(bottom, baseline + (natural.descent ?? 0));
+            }
+            if (top < line.y) {
+                y1 = Math.min(y1, top);
+                above = Math.max(above, line.y - top);
+            }
+            if (bottom > line.y + line.height) {
+                y2 = Math.max(y2, bottom);
+                below = Math.max(below, bottom - line.y - line.height);
             }
         }
     }
+    if (lines && (above > 0 || below > 0))
+        LINE_INK.set(lines, { above, below });
+    else if (lines)
+        LINE_INK.delete(lines);
     if (x1 === Infinity) {
         // nothing to draw: no damage meets it, and no parent takes it in
         box.boundsX = Infinity;
@@ -369,6 +417,7 @@ export function paintDocument(ctx, tree, options) {
         ...options,
         canvasSource: canvas?.source,
         negative: tree.negative,
+        selectionStyler: options.selection ? tree.selectionStyler : null,
     });
     ctx.restore();
 }
@@ -3502,7 +3551,12 @@ function paintLines(ctx, box, options) {
         const bottom = top + damage.height;
         let lo = 0;
         let hi = lines.length;
-        const slack = top - box.maxLineHeight;
+        // and a line whose glyphs, or an atomic on it, reach past it
+        // (`LINE_INK`) is drawn where they reach
+        const ink = LINE_INK.get(lines);
+        const above = ink?.above ?? 0;
+        const below = ink?.below ?? 0;
+        const slack = top - box.maxLineHeight - below;
         while (lo < hi) {
             const mid = (lo + hi) >> 1;
             if (lines[mid].y > slack)
@@ -3512,10 +3566,13 @@ function paintLines(ctx, box, options) {
         }
         for (let i = lo; i < lines.length; i += 1) {
             const line = lines[i];
-            if (line.y >= bottom)
+            if (line.y - above >= bottom)
                 break;
-            if (line.y + line.height > top)
+            if (line.y < bottom && line.y + line.height > top)
+                visible.push(line);
+            else if (ink && inkInto(line, top, bottom)) {
                 visible.push(line);
+            }
         }
         // and a line the damage misses whose text or inline-block `position:
         // relative` moved into it: drawn by its line, it went undrawn with it
@@ -3523,7 +3580,7 @@ function paintLines(ctx, box, options) {
         if (moved && reachedOff(visible, moved, top, bottom)) {
             const drawn = new Set(visible);
             for (const line of moved) {
-                if (movedInto(line, top, bottom))
+                if (inkInto(line, top, bottom))
                     drawn.add(line);
             }
             visible.length = 0;
@@ -3560,6 +3617,10 @@ function paintLines(ctx, box, options) {
     // drawing it once per line would be one X request per line for the same
     // batch.
     const drawn = new Set();
+    // text a `::selection` colours is drawn in that colour where selected
+    const recolored = options.selectionStyler
+        ? recoloredBands(visible, options)
+        : null;
     for (const line of visible) {
         for (const text of line.texts) {
             if (drawn.has(text.layout))
@@ -3574,7 +3635,11 @@ function paintLines(ctx, box, options) {
                 // thrown from the protocol encoder.
                 continue;
             }
-            text.layout.draw(ctx, text.drawX + dx, top);
+            const bands = recolored?.get(text.layout);
+            if (bands)
+                drawRecolored(ctx, text.layout, text.drawX + dx, top, bands);
+            else
+                text.layout.draw(ctx, text.drawX + dx, top);
         }
     }
     paintRules(ctx, visible, dx, dy, options.scale ?? 1, 'over');
@@ -3596,15 +3661,16 @@ function paintLines(ctx, box, options) {
  *  does not already draw, has it within the damage's rows. */
 function reachedOff(visible, moved, top, bottom) {
     for (const line of moved) {
-        if (!visible.includes(line) && movedInto(line, top, bottom))
+        if (!visible.includes(line) && inkInto(line, top, bottom))
             return true;
     }
     return false;
 }
-/** Whether what was moved off a line — its inline-blocks and images, where
- *  their ink is, and its texts, where they are drawn — reaches the rows
- *  between `top` and `bottom`. */
-function movedInto(line, top, bottom) {
+/** Whether what a line draws — its inline-blocks and images, where their
+ *  ink is, and its texts, where they are drawn, their glyphs from ascent to
+ *  descent — reaches the rows between `top` and `bottom`: what was moved off
+ *  it, and what hangs past it. */
+function inkInto(line, top, bottom) {
     for (const placed of line.atomics) {
         const box = placed.box;
         if (box.boundsY < bottom && box.boundsY + box.boundsHeight > top) {
@@ -3615,8 +3681,10 @@ function movedInto(line, top, bottom) {
         const natural = text.layout.lines[text.layoutLine];
         if (!natural)
             continue;
-        const y = text.drawY + natural.y;
-        if (y < bottom && y + natural.height > top)
+        const baseline = text.drawY + natural.baseline;
+        const y1 = Math.min(text.drawY + natural.y, baseline - (natural.ascent ?? 0));
+        const y2 = Math.max(text.drawY + natural.y + natural.height, baseline + (natural.descent ?? 0));
+        if (y1 < bottom && y2 > top)
             return true;
     }
     return false;
@@ -4361,15 +4429,34 @@ export function forgetDecoratedAncestors(box) {
  *
  * Translucent under the glyphs rather than inverted over them, so the ink
  * keeps its contrast on either palette — the same call `<textarea>` and
- * `<richtext>` both make.
+ * `<richtext>` both make. From the top of the line to its bottom, and past
+ * them over the glyphs where they are taller than the line (`selectionRows`).
  */
 function paintSelection(ctx, line, options) {
+    for (const band of selectedBands(line, options)) {
+        const fill = band.style ? band.style.background : options.selectionColor;
+        if (!fill || isTransparent(fill))
+            continue;
+        ctx.fillStyle = fill;
+        ctx.fillRect(band.x, band.y, band.width, band.height);
+    }
+}
+const NO_BANDS = [];
+/**
+ * Where the document selection covers a line's text, a band for each
+ * stretch of it one `::selection` styles, in window pixels as the band is
+ * filled — rounded, so a band's text is drawn to its edges and no further
+ * (`drawRecolored`).
+ */
+function selectedBands(line, options) {
     const range = options.selection;
-    if (!range || range.end <= range.start || !options.selectionColor)
-        return;
-    if (line.textEnd <= range.start || line.textStart >= range.end)
-        return;
-    ctx.fillStyle = options.selectionColor;
+    if (!range || range.end <= range.start)
+        return NO_BANDS;
+    if (line.textEnd <= range.start || line.textStart >= range.end) {
+        return NO_BANDS;
+    }
+    const styler = options.selectionStyler;
+    const out = [];
     for (const text of line.texts) {
         const natural = text.layout.lines[text.layoutLine];
         if (!natural)
@@ -4381,9 +4468,192 @@ function paintSelection(ctx, line, options) {
         const offsets = layoutOffsets(text.layout);
         const layoutFrom = layoutOffsetOf(text, from);
         const layoutTo = layoutOffsetOf(text, to, true);
-        for (const band of lineBands(text.layout, natural, offsets, layoutFrom, layoutTo)) {
-            ctx.fillRect(Math.round(band.x + text.drawX + options.originX), Math.round(line.y + options.originY), Math.ceil(band.width), Math.ceil(line.height));
+        const rows = selectionRows(line, text, natural);
+        const y = Math.round(rows.y + options.originY);
+        const height = Math.ceil(rows.height);
+        const pieces = styler
+            ? stylePieces(text, natural, layoutFrom, layoutTo, styler)
+            : [{ from: layoutFrom, to: layoutTo, style: null }];
+        for (const piece of pieces) {
+            for (const band of lineBands(text.layout, natural, offsets, piece.from, piece.to)) {
+                out.push({
+                    x: Math.round(band.x + text.drawX + options.originX),
+                    y,
+                    width: Math.ceil(band.width),
+                    height,
+                    style: piece.style,
+                    layout: text.layout,
+                });
+            }
+        }
+    }
+    return out;
+}
+/**
+ * A line's selected text, `from` to `to` in the layout's offsets, cut where
+ * the `::selection` over it changes: a run's is its element's, and a run of
+ * no element's — an inline box's edge, laid out as a spacer — the one
+ * beside it, so a styled band has no palette-coloured gap at a `<span>`.
+ */
+function stylePieces(text, natural, from, to, styler) {
+    const runs = natural.runs
+        .filter((run) => run.end > from && run.start < to)
+        .sort((a, b) => a.start - b.start);
+    const boxAt = text.spans.boxAt;
+    const styles = runs.map((run) => {
+        const box = boxAt?.call(text.spans, run.start) ?? null;
+        return box ? styler(box) : undefined;
+    });
+    for (let i = 1; i < styles.length; i += 1) {
+        if (styles[i] === undefined)
+            styles[i] = styles[i - 1];
+    }
+    for (let i = styles.length - 2; i >= 0; i -= 1) {
+        if (styles[i] === undefined)
+            styles[i] = styles[i + 1];
+    }
+    const out = [];
+    runs.forEach((run, i) => {
+        const style = styles[i] ?? null;
+        const last = out[out.length - 1];
+        if (last && last.style === style)
+            last.to = Math.min(to, run.end);
+        else {
+            out.push({
+                from: Math.max(from, run.start),
+                to: Math.min(to, run.end),
+                style,
+            });
+        }
+    });
+    return out;
+}
+/**
+ * The layouts whose selected text a `::selection` gives a colour of its
+ * own, each with the bands it is drawn in that colour (`drawRecolored`).
+ * Null where none does, which is every document with no such rule.
+ */
+function recoloredBands(lines, options) {
+    let out = null;
+    for (const line of lines) {
+        for (const band of selectedBands(line, options)) {
+            if (!band.style?.color || !(band.width > 0))
+                continue;
+            out ??= new Map();
+            const list = out.get(band.layout);
+            if (list)
+                list.push(band);
+            else
+                out.set(band.layout, [band]);
+        }
+    }
+    return out;
+}
+/**
+ * A layout with some of its text selected in a `::selection`'s colour
+ * (CSS Pseudo 4, 3.2): its own colours everywhere but those bands, and in
+ * each band the glyphs in that band's colour — cast there as a hard shadow
+ * from the layout drawn clear of the window, the way `castShadows` draws a
+ * text shadow, since a layout draws in its runs' own colours. Drawn over
+ * rather than in place of the text, the old glyphs' edges showed round the
+ * new ones. Where the context cannot clip or cast, the text keeps its own
+ * colours.
+ */
+function drawRecolored(ctx, layout, left, top, bands) {
+    if (!ctx.save ||
+        !ctx.restore ||
+        !ctx.beginPath ||
+        !ctx.rect ||
+        !ctx.clip ||
+        !('shadowBlur' in ctx)) {
+        layout.draw(ctx, left, top);
+        return;
+    }
+    ctx.save();
+    ctx.beginPath();
+    for (const r of outsideOf(bands))
+        ctx.rect(r.x, r.y, r.width, r.height);
+    ctx.clip();
+    layout.draw(ctx, left, top);
+    ctx.restore();
+    let right = layout.width;
+    for (const natural of layout.lines) {
+        right = Math.max(right, natural.x + natural.width);
+    }
+    const shift = Math.ceil(left + right) + 1;
+    const colors = new Map();
+    for (const band of bands) {
+        const color = band.style.color;
+        const group = colors.get(color);
+        if (group)
+            group.push(band);
+        else
+            colors.set(color, [band]);
+    }
+    for (const [color, group] of colors) {
+        ctx.save();
+        ctx.beginPath();
+        for (const r of group)
+            ctx.rect(r.x, r.y, r.width, r.height);
+        ctx.clip();
+        ctx.shadowColor = color;
+        ctx.shadowBlur = 0.01;
+        ctx.shadowOffsetX = shift;
+        ctx.shadowOffsetY = 0;
+        layout.draw(ctx, left - shift, top);
+        ctx.restore();
+    }
+}
+/** Everything but some rectangles, as rectangles: a strip between each two
+ *  of their edges, less what of it they cover. */
+function outsideOf(rects) {
+    const far = COORD_LIMIT;
+    const edges = new Set();
+    for (const r of rects) {
+        edges.add(r.y);
+        edges.add(r.y + r.height);
+    }
+    const ys = [...edges].sort((a, b) => a - b);
+    const out = [
+        { x: -far, y: -far, width: 2 * far, height: ys[0] + far },
+        {
+            x: -far,
+            y: ys[ys.length - 1],
+            width: 2 * far,
+            height: far - ys[ys.length - 1],
+        },
+    ];
+    for (let i = 0; i + 1 < ys.length; i += 1) {
+        const y0 = ys[i];
+        const y1 = ys[i + 1];
+        const spans = rects
+            .filter((r) => r.y <= y0 && r.y + r.height >= y1)
+            .sort((a, b) => a.x - b.x);
+        let x = -far;
+        for (const r of spans) {
+            if (r.x > x)
+                out.push({ x, y: y0, width: r.x - x, height: y1 - y0 });
+            x = Math.max(x, r.x + r.width);
         }
+        if (x < far)
+            out.push({ x, y: y0, width: far - x, height: y1 - y0 });
     }
+    return out;
+}
+/**
+ * The rows a highlight over a line's text covers: the line box's, united
+ * with the text's content area — its face's ascent above the baseline to
+ * its descent below (CSS 2.1 10.6.1) — which is taller wherever
+ * `line-height` is under the face's height. Blink unites the two in the
+ * block direction (`ExpandSelectionRectToLineHeight`), so a selection over
+ * a tall line fills it and one over tall glyphs on a short line covers
+ * them: Zen Garden 215's 91px title on 20px lines had a band a fifth of
+ * its letters' height through their middle.
+ */
+export function selectionRows(line, text, natural) {
+    const baseline = text.drawY + natural.baseline;
+    const top = Math.min(line.y, baseline - (natural.ascent ?? 0));
+    const bottom = Math.max(line.y + line.height, baseline + (natural.descent ?? 0));
+    return { y: top, height: bottom - top };
 }
 //# sourceMappingURL=paint.js.map