@ng-native/fabric 0.6.0 → 0.7.0

package/dist/engine.d.ts

@@ -303,6 +303,10 @@ export interface EngineNode extends HostNode {
     committedUnder: EngineNode | null;
     /** The hoisted views this node keeps committed for, by element name. See `HoistOptions`. */
     kept?: Map<string, KeptHoist>;
+    /** On a text field, the row aligned by baseline that takes a baseline from it: `lineBaseline`. */
+    onBaseline?: EngineNode;
+    /** On such a row, the fields it has marked, which it unmarks when they are no longer its own. */
+    baselineFields?: Set<EngineNode>;
     /** Commit this node again with its children so Fabric measures it again. `remeasureText`. */
     remeasure?: true;
     /**
@@ -1254,6 +1258,27 @@ export declare class Engine implements HostEngine {
      * that colour as a number and throws on a string, taking the whole surface down with it.
      */
     private processFilters;
+    /**
+     * Mark the text field each box of a row aligned by baseline takes its baseline from, before
+     * the field is merged, and unmark it when the row is aligned another way.
+     */
+    private noteBaselineFields;
+    private onBaselineOf;
+    /**
+     * Have the text a row aligned by baseline takes a baseline from measured again, where that
+     * text is inside one of the row's boxes and the row is committed again. React Native keeps
+     * what a paragraph measured on the one copy of its node that was measured, and Yoga copies a
+     * node it lays out around: a row that is laid out again asks a box for its baseline, the box
+     * asks the paragraph in it, and a copy that was never measured works it out then, on a node
+     * that is by then not to be changed. A debug build stops there. Committed to be measured
+     * again (`remeasure`), the paragraph is measured in this commit and has the answer.
+     *
+     * ponytail: the first box in the flow at each level, which is the one Yoga asks unless
+     * another is aligned by baseline itself. A row a commit lays out again without the engine
+     * cloning it, as its room changing does, is not reached: clone on a layout event if one is
+     * seen to stop there.
+     */
+    private freshBaselines;
     /**
      * Copy a list of gradients, running every stop's colour through the host's converter.
      *

package/dist/engine.js

@@ -10,7 +10,7 @@
 import { boundDeclaration, faded, fills, inlineInherited, setsInherited, StyleResolver, usesActive, elementsAtEnd, placeReadElsewhere, siblingReach, } from "./css.js";
 import { applyAria } from "./aria-props.js";
 import { STYLED_ELEMENTS } from "./element-styles.js";
-import { animationEvent, bezier, interpolate, readsInheritedColour, sample, step, tracksOf, } from "./transition.js";
+import { animationEvent, bezier, interpolate, readsInheritedColour, sample, step, steppedKeys, tracksOf, } from "./transition.js";
 import { isFormsInput } from "./forms-inputs.js";
 import { transformList } from "./inline-transform.js";
 import { tokenFromValue } from "./inline-token.js";
@@ -389,6 +389,33 @@ const VIRTUAL_TEXT = 'VirtualText';
 const DEFAULT_VIEW = 'View';
 /** A top-level text, the one view that aligns its lines. A nested text is a `VirtualText`. */
 const PARAGRAPH = 'Paragraph';
+/**
+ * The box Yoga takes a view's baseline from where the view has none of its own: its first child
+ * that is laid out in its flow. Words written straight into the view are the paragraph the
+ * engine makes around them, and a child that is not displayed has no view to ask.
+ */
+function firstInFlow(node) {
+    for (const child of node.children ?? []) {
+        // Not the paragraph itself, which holds the words it was made around.
+        if (child.kind === 'text' && child.box)
+            return child.box === node ? undefined : child.box;
+        if (child.kind !== 'element' || ownLayout(child, 'display') === 'none')
+            continue;
+        if (ownLayout(child, 'position') !== 'absolute')
+            return child;
+    }
+    return undefined;
+}
+const isNode = (node) => node !== undefined;
+/** Whether a row lays a child out among its others, and so can take its baseline from it. */
+const inFlow = (child) => child.kind === 'element' && ownLayout(child, 'position') !== 'absolute';
+/** The text field a row's box takes its baseline from: itself, or the first in its flow down. */
+function fieldOnBaseline(item) {
+    let at = item;
+    while (at?.kind === 'element' && !TEXT_INPUTS.has(viewNameOf(at)))
+        at = firstInFlow(at);
+    return at?.kind === 'element' ? at : undefined;
+}
 const textDirection = (value) => value === 'ltr' || value === 'rtl' ? value : undefined;
 /**
  * What iOS scales a text's `lineHeight` by: the system text size, capped by the text's own
@@ -433,6 +460,57 @@ function rowsTall(props, fontScale) {
     const lines = rows * line * textScale(props, fontScale);
     props['height'] = edges.reduce((sum, part) => sum + part, lines);
 }
+/** A field's own minimum height: none where it says `auto`, which a web element starts with. */
+const ownMinimum = (minHeight) => (minHeight === 'auto' ? 0 : (minHeight ?? 0));
+/** How tall the system's font is, as a share of its size: its rise over the baseline and fall under. */
+const FONT_LINE = 0.95 + 0.24;
+/**
+ * How tall a field is by its line: the line, padding and border of a border-box field, Yoga's
+ * default, and its content alone for a content-box one, which Yoga adds the padding and border
+ * to itself. In a row aligned by baseline some of the line is kept as padding: `lineBaseline`.
+ */
+function lineBox(props, box, onBaseline, fontScale) {
+    const half = onBaseline ? lineBaseline(props, box[0], box, fontScale) : 0;
+    if (props['boxSizing'] === 'content-box')
+        return box[0] - 2 * half;
+    return box.reduce((sum, part) => sum + part, 0);
+}
+/**
+ * `lineBaseline` for a field a height sizes: the room is what the height leaves its text, and
+ * the field stays that height. A content-box field's height is its content's, so what is now
+ * padding comes out of it.
+ */
+function heightBaseline(props, height, onBaseline, fontScale) {
+    if (!onBaseline)
+        return;
+    const edges = [...blockEdge(props, 'Top', 'Start'), ...blockEdge(props, 'Bottom', 'End')];
+    if (!edges.every((part) => typeof part === 'number'))
+        return;
+    const content = props['boxSizing'] === 'content-box';
+    const room = content ? height : edges.reduce((left, part) => left - part, height);
+    const half = lineBaseline(props, room, [room, ...edges], fontScale);
+    if (content)
+        props['height'] = height - 2 * half;
+}
+/**
+ * Give a field with its line height left out the baseline of a paragraph in a line as tall, for
+ * a field in a row aligned by baseline: half the room the line has over the font is kept as
+ * padding over and under the text. React Native says a field's baseline from its text and its
+ * top padding, so without this it is the font's own, and the row lifts the paragraphs beside the
+ * field to it: a form field's prefix and suffix sit higher than what is typed. Answers the half.
+ *
+ * ponytail: the font is taken to be as tall as the system's, `FONT_LINE` of its size. Read from
+ * the font if a field in another face is seen a point off its prefix.
+ */
+function lineBaseline(props, line, [, top, , bottom], fontScale) {
+    const size = props['fontSize'];
+    if (typeof size !== 'number')
+        return 0;
+    const half = Math.max(0, (line - size * textScale(props, fontScale) * FONT_LINE) / 2);
+    props['paddingTop'] = top + half;
+    props['paddingBottom'] = bottom + half;
+    return half;
+}
 /**
  * Centre the text of a single-line text field that has a line height, as Chrome centres an
  * input's, keeping the height the line height gives it.
@@ -453,7 +531,7 @@ function rowsTall(props, fontScale) {
  * height alone for a content-box one. A null `height` is no height. A value that is not a number
  * cannot be added up, and leaves the field as it was.
  */
-function centreSingleLine(viewName, props, fontScale) {
+function centreSingleLine(viewName, props, fontScale, onBaseline = false) {
     const lineHeight = props['lineHeight'];
     if (!TEXT_INPUTS.has(viewName) || typeof lineHeight !== 'number')
         return;
@@ -462,6 +540,7 @@ function centreSingleLine(viewName, props, fontScale) {
     const height = props['height'];
     if (typeof height === 'number') {
         delete props['lineHeight'];
+        heightBaseline(props, height, onBaseline, fontScale);
         return;
     }
     // A percentage is a fixed height only where the parent's is definite, known at layout alone.
@@ -473,15 +552,12 @@ function centreSingleLine(viewName, props, fontScale) {
     const edge = (side, logical) => blockEdge(props, side, logical);
     const line = lineHeight * textScale(props, fontScale);
     const box = [line, ...edge('Top', 'Start'), ...edge('Bottom', 'End')];
-    const own = props['minHeight'] ?? 0;
+    const own = ownMinimum(props['minHeight']);
     const max = props['maxHeight'] ?? Infinity;
     if (![...box, own, max].every((part) => typeof part === 'number'))
         return;
     delete props['lineHeight'];
-    // A content-box field's minHeight is its content's: Yoga adds the padding and border itself.
-    const content = props['boxSizing'] === 'content-box'
-        ? line
-        : box.reduce((sum, part) => sum + part, 0);
+    const content = lineBox(props, box, onBaseline, fontScale);
     props['minHeight'] = Math.max(own, Math.min(content, max));
 }
 const NO_STYLE = {};
@@ -544,6 +620,10 @@ const STRETCHES = new Set([undefined, null, 'auto', 'stretch']);
  * kept, since it stops the stretch already.
  */
 function fitContent(node, props) {
+    const capped = {
+        row: capAtContent(props, 'width', 'maxWidth'),
+        column: capAtContent(props, 'height', 'maxHeight'),
+    };
     const width = props['width'] === 'fit-content';
     const height = props['height'] === 'fit-content';
     if (!width && !height)
@@ -558,11 +638,46 @@ function fitContent(node, props) {
     const container = containerOf(parent);
     parent.fitContainer = container;
     const [direction, align] = container.split(' ');
+    if (capped[direction === 'row' ? 'row' : 'column'])
+        withoutGrowth(props);
     const across = direction === 'row' ? height : width;
     if (across && align === 'stretch' && STRETCHES.has(props['alignSelf'])) {
         props['alignSelf'] = 'flex-start';
     }
 }
+/**
+ * A box capped at its content along its container's main axis, where it would grow: a browser
+ * clamps a growing item by its maximum, and there is no such cap to hand Yoga. So it does not
+ * grow, and starts from its content, which is as far as the cap would let it get. It may still
+ * shrink.
+ */
+function withoutGrowth(props) {
+    if (typeof props['flex'] === 'number' && props['flex'] > 0) {
+        delete props['flex'];
+        props['flexShrink'] ??= 1;
+    }
+    delete props['flexGrow'];
+    delete props['flexBasis'];
+}
+/**
+ * `max-width: max-content`, and the same of a height: no bigger than its content, which for a
+ * box that would fill its container is `fit-content`. Yoga has no such cap. Answers whether the
+ * box is the size of its content for it: one that would fill, or one that was `fit-content` as
+ * written.
+ *
+ * ponytail: a size in points is left as it is, since nothing here knows how big the content
+ * is. Measure it if a box is ever given both.
+ */
+function capAtContent(props, size, cap) {
+    if (props[cap] !== 'max-content')
+        return false;
+    delete props[cap];
+    const own = props[size];
+    const fills = own == null || own === 'auto' || (typeof own === 'string' && own.endsWith('%'));
+    if (fills)
+        props[size] = 'fit-content';
+    return fills || own === 'fit-content';
+}
 const isPercent = (value) => typeof value === 'string' && value.endsWith('%');
 /** Whether a `flex-basis` is a length or a percentage of something: not zero, and not `auto`. */
 const isSizedBasis = (basis) => isPercent(basis)
@@ -1759,6 +1874,16 @@ const now = () => globalThis.performance?.now?.() ?? Date.now();
 function sameHandles(a, b) {
     return a.length === b.length && a.every((handle, i) => handle === b[i]);
 }
+/**
+ * Whether a node could be the element a compound is written for, by its classes alone: its own,
+ * and those of one alternative of each `:is()` on it, which is where Tailwind names a group or
+ * a peer. A compound with no class in either could be any element.
+ */
+function couldBe(compound, node) {
+    if (!compound.classes.every((name) => node.classes?.has(name)))
+        return false;
+    return (compound.is ?? []).every((alternatives) => alternatives.some((option) => couldBe(option, node)));
+}
 const FRAME_BUDGET_MS = 8;
 export class Engine {
     /** Scopes the CSS resolver's memo. Bumped once per commit. */
@@ -1959,9 +2084,7 @@ export class Engine {
         const { own, elsewhere } = this.activeUse;
         if (!own && !elsewhere.length)
             return;
-        // By its classes alone: a compound with none could be any element.
-        const asked = elsewhere.some((compound) => compound.classes.every((name) => node.classes?.has(name)));
-        if (asked)
+        if (elsewhere.some((compound) => couldBe(compound, node)))
             return this.markProps(node);
         node.stateDirty = true;
         this.markPath(node.parent ?? node);
@@ -3054,7 +3177,11 @@ export class Engine {
         alignMultiline(viewName, style);
         rowsTall(style, this.fontScale);
         const merged = composeTransform(node, this.animated(node, this.transitioned(node, style)));
-        centreSingleLine(viewName, merged, this.fontScale);
+        // On iOS: Android's field says the baseline of the line it is sized and centred by.
+        // Still under the row that marked it: a row taken away is not committed again to unmark it.
+        const row = node.onBaseline;
+        const onBaseline = viewName === 'TextInput' && row !== undefined && isWithin(node, row);
+        centreSingleLine(viewName, merged, this.fontScale, onBaseline);
         // After a transition, which eases the basis as the basis it was written as.
         basisAsSize(node, merged);
         // After the basis, which is a size given where it is committed as one.
@@ -3693,12 +3820,7 @@ export class Engine {
             return props;
         const state = (node.transitions ??= new Map());
         const now = this.now();
-        // The properties a transition *names*, even where the node has none yet. A property is only
-        // transitioned once it has been seen settling, and one that does not exist is never seen - so
-        // `transition: transform` with no transform until a class adds one would arrive instantly,
-        // which is the commonest way to write one. `all` names nothing, so it keeps the old rule.
-        const named = spec ? Object.keys(spec).filter((key) => key !== 'all') : [];
-        for (const key of new Set([...Object.keys(props), ...named])) {
+        for (const key of steppedKeys(props, spec, state)) {
             if (step(state, key, props, spec?.[key] ?? spec?.['all'], now)) {
                 this.running.add(node);
                 this.emitTransition(node, 'topTransitionstart', key);
@@ -3867,6 +3989,58 @@ export class Engine {
             };
         });
     }
+    /**
+     * Mark the text field each box of a row aligned by baseline takes its baseline from, before
+     * the field is merged, and unmark it when the row is aligned another way.
+     */
+    noteBaselineFields(row) {
+        const aligned = ownLayout(row, 'alignItems') === 'baseline';
+        const before = row.baselineFields;
+        if (!aligned && !before)
+            return;
+        const now = new Set(aligned ? row.children.filter(inFlow).map(fieldOnBaseline).filter(isNode) : []);
+        // One that is no longer this row's, and that no other row has marked since.
+        for (const field of before ?? []) {
+            if (!now.has(field) && field.onBaseline === row)
+                this.onBaselineOf(field, undefined);
+        }
+        for (const field of now)
+            if (field.onBaseline !== row)
+                this.onBaselineOf(field, row);
+        row.baselineFields = now.size ? now : undefined;
+    }
+    onBaselineOf(field, row) {
+        field.onBaseline = row;
+        this.markProps(field, false);
+    }
+    /**
+     * Have the text a row aligned by baseline takes a baseline from measured again, where that
+     * text is inside one of the row's boxes and the row is committed again. React Native keeps
+     * what a paragraph measured on the one copy of its node that was measured, and Yoga copies a
+     * node it lays out around: a row that is laid out again asks a box for its baseline, the box
+     * asks the paragraph in it, and a copy that was never measured works it out then, on a node
+     * that is by then not to be changed. A debug build stops there. Committed to be measured
+     * again (`remeasure`), the paragraph is measured in this commit and has the answer.
+     *
+     * ponytail: the first box in the flow at each level, which is the one Yoga asks unless
+     * another is aligned by baseline itself. A row a commit lays out again without the engine
+     * cloning it, as its room changing does, is not reached: clone on a layout event if one is
+     * seen to stop there.
+     */
+    freshBaselines(row) {
+        if (!row.committed || ownLayout(row, 'alignItems') !== 'baseline')
+            return;
+        for (const item of row.children) {
+            let at = firstInFlow(item);
+            while (at?.committed && committedViewName(at) !== PARAGRAPH)
+                at = firstInFlow(at);
+            if (!at?.committed)
+                continue;
+            at.remeasure = true;
+            for (let up = at; up && up !== row; up = up.parent)
+                up.subtreeDirty = true;
+        }
+    }
     /**
      * Copy a list of gradients, running every stop's colour through the host's converter.
      *
@@ -3910,6 +4084,8 @@ export class Engine {
         this.refitChildren(node);
         const viewName = committedViewName(node);
         this.forgetRenamed(node, viewName);
+        this.noteBaselineFields(node);
+        this.freshBaselines(node);
         const childHandles = this.reconcileChildren(node, viewName, style);
         noteTouches(node, style);
         const previous = node.committed;