@react-x11/components 0.16.1 → 0.17.0

package/dist/html/layout/flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../src/html/layout/flex.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAE,GAAG,EAAwB,MAAM,YAAY,CAAC;AA4BvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAwBhD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CACxB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,aAAa,EAClB,YAAY,EAAE,MAAM,GACnB,MAAM,CAmbR"}
+{"version":3,"file":"flex.d.ts","sourceRoot":"","sources":["../../../src/html/layout/flex.ts"],"names":[],"mappings":"AAgCA,OAAO,EAAE,GAAG,EAAwB,MAAM,YAAY,CAAC;AA4BvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAwBhD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CACxB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,aAAa,EAClB,YAAY,EAAE,MAAM,GACnB,MAAM,CA6aR"}

package/dist/html/layout/flex.js

@@ -210,11 +210,7 @@ export function layoutFlex(box, ctx, contentWidth) {
         root.setWidth(contentWidth);
     const direction = box.style.direction === 'rtl' ? Y.DIRECTION_RTL : Y.DIRECTION_LTR;
     const row = box.style.flexDirection.startsWith('row');
-    // Yoga aligns the lines of a box that wraps, or of a row that aligns by
-    // baselines, in one pass of its own, which drops a margin
-    // (`lineMarginFix`) — and not those of a column that does not wrap,
-    // whatever it aligns by, whose margins Yoga keeps
-    let baselines = row &&
+    const baselines = row &&
         (box.style.alignItems === 'baseline' ||
             items.some(({ box: child }) => child.style.alignSelf === 'baseline'));
     // An `auto` margin across a row that wraps takes the room its line has
@@ -232,35 +228,43 @@ export function layoutFlex(box, ctx, contentWidth) {
         }
     }
     else if (baselines) {
-        // Yoga takes a row that does not wrap through that pass as well, and
-        // sets its line there as tall as its items and not the row: an item
-        // centred or at the end of a row of a height was centred or ended in
-        // the items' height. It has sized that line already, as the most any
-        // item reaches down to its bottom edge — a baseline, to Yoga — and the
-        // largest bottom margin besides, whichever items those are: a row of
-        // no height of its own was as tall as both. And it sets an item with
-        // an `auto` margin by its baseline: at the top, where the margin puts
-        // it at the bottom, and every item beside it as far down as its height
-        // reached. That item takes no part in aligning the line by baselines
-        // (9.4 step 8), and Yoga is told the alignment its margins come to.
-        // With fewer than two items left that do take part, they come to their
-        // line's start (8.3), which Yoga is told as well: then nothing in the
-        // row is aligned by its baseline, Yoga takes no such pass, and the line
-        // is the row. Two or more are lined up by their baselines once those
-        // are known (`baselineLines`), and the row laid out again with none.
+        // Yoga takes a row aligned by baselines through that pass whether it
+        // wraps or not, and sets an item with an `auto` margin there by its
+        // baseline: at the top, where the margin puts it at the bottom, and
+        // every item beside it as far down as its height reached. That item
+        // takes no part in aligning the line by baselines (9.4 step 8), and
+        // Yoga is told the alignment its margins come to.
         for (const { box: child, node } of items) {
             const aligned = autoAcross(child.style, false);
             if (aligned)
                 node.setAlignSelf(ALIGN[aligned]);
         }
-        const aligned = items.filter(({ box: child }) => byBaseline(box.style, child.style));
-        if (aligned.length < 2) {
-            for (const { node } of aligned)
-                node.setAlignSelf(Y.ALIGN_FLEX_START);
-            if (box.style.alignItems === 'baseline') {
-                root.setAlignItems(Y.ALIGN_FLEX_START);
-            }
-            baselines = false;
+    }
+    // Items aligned by their baselines, which Yoga cannot see, are told they
+    // are at their lines' starts, which is where one is that shares its line
+    // with no other (8.3); those that do share one are lined up by their
+    // baselines once those are known (`baselineLines`), and the row laid out
+    // again. Told an item is aligned by its baseline, Yoga sizes each line
+    // of the row as the most any item on it reaches down to its bottom edge
+    // — a baseline, to Yoga — and the largest bottom margin besides,
+    // whichever items those are, and stretches the items on the line to
+    // that: a row of no height of its own was as tall as both, and
+    // `align-content` had that much less room to share out. And it takes a
+    // row that does not wrap through its pass for lines, which sets the one
+    // line there as tall as its items and not the row: an item centred or at
+    // the end of a row of a height was centred or ended in the items'
+    // height. Told none is, it takes neither. A row whose lines wrap in
+    // reverse is left to Yoga.
+    const started = new Set();
+    if (baselines && box.style.flexWrap !== 'wrap-reverse') {
+        for (const { box: child, node } of items) {
+            if (!byBaseline(box.style, child.style))
+                continue;
+            node.setAlignSelf(Y.ALIGN_FLEX_START);
+            started.add(child);
+        }
+        if (box.style.alignItems === 'baseline') {
+            root.setAlignItems(Y.ALIGN_FLEX_START);
         }
     }
     // frozen at its least size on the one line of a box that does not
@@ -397,31 +401,23 @@ export function layoutFlex(box, ctx, contentWidth) {
             ctx.flexDepth = depth;
         }
     }
-    // whether Yoga's last layout took its pass for lines (`placeItems`)
-    let lined = box.style.flexWrap !== 'nowrap' || baselines;
-    let bottom = placeItems(box, ctx, items, row, own, lined, contentWidth, undefined, crossed ? crossLines(box.style, items, contentWidth, columnGap) : undefined);
-    // Items aligned by their baselines, which Yoga cannot see, are aligned
-    // with their baselines known (`baselineLines`)
-    // by the flex layout again, set at their lines' starts with the margins
-    // that put their baselines together, which makes each line as tall as
-    // that does
-    const lines = baselines ? baselineLines(box.style, items) : null;
-    const started = new Set();
+    // Yoga aligns the lines of a box that wraps in one pass of its own, which
+    // drops a margin (`lineMarginFix`), and keeps the margins of one that
+    // does not, which it takes through that pass only where it is told an
+    // item is aligned by its baseline: here, never
+    const lined = box.style.flexWrap !== 'nowrap';
+    let bottom = placeItems(box, ctx, items, row, own, lined, contentWidth, started, crossed ? crossLines(box.style, items, contentWidth, columnGap) : undefined);
+    // Items that share a line and are aligned by their baselines are laid
+    // out by the flex layout again, set at their lines' starts with the
+    // margins that put their baselines together (`baselineLines`), which
+    // makes each line as tall as that does
+    const lines = started.size > 1 ? baselineLines(box.style, items) : null;
     if (lines) {
-        // every one of them, and the box's own `baseline` too, which is what
-        // takes Yoga down that pass
         for (const line of lines) {
-            line.forEach(({ box: child, node }, i) => {
-                node.setAlignSelf(Y.ALIGN_FLEX_START);
+            line.forEach(({ node }, i) => {
                 node.setMargin(Y.EDGE_TOP, line.margins[i]);
-                started.add(child);
             });
         }
-        if (box.style.alignItems === 'baseline') {
-            root.setAlignItems(Y.ALIGN_FLEX_START);
-        }
-        // so it takes it only where the row wraps
-        lined = box.style.flexWrap !== 'nowrap';
         ctx.flexDepth = depth + 1;
         try {
             calculate();
@@ -618,6 +614,11 @@ crossed) {
     let bottom = 0;
     // the lines of a row that wraps in reverse are turned round to run up it
     const reverse = row && box.style.flexWrap === 'wrap-reverse';
+    // the left edge a column's items aligned by baselines share, where it
+    // does not wrap (`baselineEdge`); a column that wraps is `crossed`
+    const edge = row || box.style.flexWrap !== 'nowrap'
+        ? NaN
+        : baselineEdge(box.style, items);
     for (const { box: child, node, laid } of items) {
         const placed = crossed?.get(child);
         const across = lined && !placed
@@ -625,7 +626,11 @@ crossed) {
             : 0;
         const itemHeight = row ? heightOf(node, laid) : laid.main;
         const left = box.contentX +
-            (placed ? placed.x : node.getComputedLeft() + (row ? 0 : across));
+            (placed
+                ? placed.x
+                : !Number.isNaN(edge) && byBaseline(box.style, child.style, false)
+                    ? edge
+                    : node.getComputedLeft() + (row ? 0 : across));
         // which Yoga turns an item round in by the height it laid it out at, and
         // not the one it is (`unspace`)
         const top = box.contentY +
@@ -2475,15 +2480,15 @@ function contentBottom(box) {
  * its bottom edge, so it lined them up by their bottoms. With the items laid
  * out, each line's, and for each the top margin that sets it at the line's
  * start with its first baseline where the lowest-reaching one's is — or
- * null where no line has two to align.
+ * null where no line has two to align. Not for a row whose lines wrap in
+ * reverse, which grow from their ends and are left to Yoga (`layoutFlex`).
  */
 function baselineLines(style, items) {
-    // a line that grows from its end is aligned from there, and left to Yoga
-    if (style.flexWrap === 'wrap-reverse')
-        return null;
     const wraps = style.flexWrap !== 'nowrap';
-    // along a line the items go the way the main axis does, and the next
-    // line starts where one does not
+    // along a line the items go the way the main axis does, each margin box
+    // after the last one's end, and the next line starts before it (9.3): at
+    // the line's start, where an item with a margin before it was further
+    // along than one alone on the line before
     const back = (style.flexDirection === 'row-reverse') !== (style.direction === 'rtl');
     const out = [];
     let line = [];
@@ -2504,12 +2509,18 @@ function baselineLines(style, items) {
         out.push(Object.assign(line, { margins }));
     };
     for (const item of items) {
-        const box = item.box;
-        if (wraps && line.length && (back ? box.x >= last : box.x <= last)) {
+        const { box, node } = item;
+        const left = node.getComputedLeft() - node.getComputedMargin(Y.EDGE_LEFT);
+        const right = node.getComputedLeft() +
+            node.getComputedWidth() +
+            node.getComputedMargin(Y.EDGE_RIGHT);
+        if (wraps &&
+            line.length &&
+            (back ? right > last + 0.01 : left < last - 0.01)) {
             close();
             line = [];
         }
-        last = box.x;
+        last = back ? left : right;
         if (byBaseline(style, box.style))
             line.push(item);
     }
@@ -2520,11 +2531,41 @@ function baselineLines(style, items) {
 /** Whether an item takes part in aligning its line by baselines (CSS
  *  Flexbox 8.3, 9.4 step 8): aligned by its baseline, with no `auto`
  *  margin across the line, which takes it over its alignment. */
-function byBaseline(container, item) {
+function byBaseline(container, item, 
+/** Whether the line is a row's, across which its margins are its top
+ *  and bottom ones; a column's are its left and right ones. */
+row = true) {
     const aligned = item.alignSelf === AUTO ? container.alignItems : item.alignSelf;
     return (aligned === 'baseline' &&
-        item.marginTop !== AUTO &&
-        item.marginBottom !== AUTO);
+        (row ? item.marginTop : item.marginLeft) !== AUTO &&
+        (row ? item.marginBottom : item.marginRight) !== AUTO);
+}
+/**
+ * Where the items a column that does not wrap aligns by baselines have
+ * their left edges, from its content box's: NaN where it has none.
+ *
+ * A horizontal item has no baseline across a column, and one is made from
+ * its border box — the line-under edge of the vertical writing mode it is
+ * taken to have, its left, whichever way its text runs (CSS Box Alignment
+ * 3, 9.1). So the items share their left edges, and are set together at
+ * the line's cross start, the column's left or, where it runs right to
+ * left, its right (9.3; CSS Flexbox 8.3), as Chrome sets them: as far from
+ * there as the most any of them reaches past its edge on that side. Yoga
+ * never aligns a column by baselines, and sets each at its line's start
+ * with its margin there, so that is the furthest any of them is from the
+ * start: the rightmost left edge, or from the right the leftmost.
+ */
+function baselineEdge(container, items) {
+    const rtl = container.direction === 'rtl';
+    let edge = NaN;
+    for (const { box, node } of items) {
+        if (!byBaseline(container, box.style, false))
+            continue;
+        const left = node.getComputedLeft();
+        if (!(rtl ? left >= edge : left <= edge))
+            edge = left;
+    }
+    return edge;
 }
 /**
  * Whether Yoga made a line of a row that wraps the row's height, where its
@@ -2622,13 +2663,13 @@ function autoAcross(item, reverse) {
 }
 /**
  * How far an item is from where it belongs across its line, where Yoga
- * (3.2.1) aligned the lines in the pass it takes for a box that wraps or
- * aligns by baselines: it sets an item aligned to its line's start there
- * as though it had no margin at that side, and one centred as though it had
- * none at either — `items-start` in a wrapping row put every card's top
- * margin under it. By the margin at the start of the line's cross axis, and
- * by half what it exceeds the one at the end by, as Yoga holds them: for an
- * item set at its line's start (`started`), its baseline's.
+ * (3.2.1) aligned the lines in the pass it takes for a box that wraps: it
+ * sets an item aligned to its line's start there as though it had no
+ * margin at that side, and one centred as though it had none at either —
+ * `items-start` in a wrapping row put every card's top margin under it. By
+ * the margin at the start of the line's cross axis, and by half what it
+ * exceeds the one at the end by, as Yoga holds them: for an item set at
+ * its line's start (`started`), its baseline's.
  *
  * A row whose lines wrap in reverse Yoga lays out as though they wrapped
  * forward, and then turns each item over across the box, its margins with
@@ -2637,9 +2678,7 @@ function autoAcross(item, reverse) {
  * stretched, is its bottom margin down from its line's top where it is its
  * top one; and one centred, half the difference. A column's, whose cross
  * axis runs right to left, or that wraps in reverse, is left as Yoga has
- * it, and so is an item an `auto` margin aligns in a row that does not
- * wrap: where Yoga still takes that pass for such a row, its items are
- * laid out again without it, aligned by their baselines (`layoutFlex`).
+ * it, and so is an item an `auto` margin aligns across a column.
  */
 function lineMarginFix(container, item, node, row, 
 /** Whether the flex box has a definite height. */
@@ -2656,10 +2695,7 @@ own, started = false) {
     if (started)
         align = 'flex-start';
     else if (lead === AUTO || trail === AUTO) {
-        align =
-            row && container.flexWrap !== 'nowrap'
-                ? autoAcross(style, reverse)
-                : null;
+        align = row ? autoAcross(style, reverse) : null;
     }
     else {
         align = style.alignSelf === AUTO ? container.alignItems : style.alignSelf;
@@ -2985,9 +3021,10 @@ function wrapsColumn(style, width) {
  * item with an `auto` margin across its line takes the room the line has
  * past it on that side (8.1), and none where there is none; a stretched
  * item is as wide as its line less its margins, within its limits (9.4,
- * step 11), and as tall as the column made it; and the rest are where
- * `align-self` says, a baseline at the line's start, as a column has none
- * across it to align by.
+ * step 11), and as tall as the column made it; those aligned by baselines
+ * share their left edges, set together at the line's start, where a column
+ * that does not wrap sets them (`baselineEdge`); and the rest are where
+ * `align-self` says.
  */
 function crossLines(style, items, 
 /** The flex box's content width. */
@@ -3018,7 +3055,26 @@ gap) {
         lead.push(fromRight ? r : l);
         trail.push(fromRight ? l : r);
     });
-    const across = lines.map((line) => line.reduce((most, i) => Math.max(most, sizes[i] + lead[i] + trail[i]), 0));
+    // A line is as wide as its widest item, margins and all, and as the
+    // items it aligns by baselines come to, sharing their left edges: the
+    // most any reaches from the line's start to that edge, and the most any
+    // reaches past it (`baselineEdge`; 9.4 step 8). `reach` is each line's
+    // first, where those items' left edges are from its start.
+    const reach = [];
+    const across = lines.map((line) => {
+        let most = 0;
+        let before = -Infinity;
+        let after = -Infinity;
+        for (const i of line) {
+            most = Math.max(most, sizes[i] + lead[i] + trail[i]);
+            if (!byBaseline(style, items[i].box.style, false))
+                continue;
+            before = Math.max(before, lead[i] + (fromRight ? sizes[i] : 0));
+            after = Math.max(after, trail[i] + (fromRight ? 0 : sizes[i]));
+        }
+        reach.push(before);
+        return Math.max(most, before + after);
+    });
     const count = lines.length;
     let room = width - gap * (count - 1);
     for (const size of across)
@@ -3087,6 +3143,9 @@ gap) {
                     itemWidth = least;
                 itemWidth = Math.max(itemWidth, box.horizontalExtra);
             }
+            else if (byBaseline(style, own, false)) {
+                offset = reach[k] - (fromRight ? itemWidth : 0);
+            }
             else {
                 const align = own.alignSelf === AUTO ? style.alignItems : own.alignSelf;
                 if (align === 'center')