@triniwiz/nativescript-masonkit 1.0.0-beta.121 → 1.0.0-beta.123

package/properties.d.ts

@@ -1,6 +1,7 @@
 import { CssProperty, CssAnimationProperty, InheritedCssProperty, Style, ShorthandProperty, Property } from '@nativescript/core';
 import { Display, Overflow, Length, Gap, LengthAuto, Position, BoxSizing, GridAutoFlow, AlignContent, VerticalAlign, Float, Clear } from '.';
 import type { ViewBase } from './common';
+import type { LogicalGroupName, Style as MasonStyle } from './style';
 import type { LonghandValue } from './css-shorthands';
 type ShorthandLonghand = CssProperty<Style, any> | CssAnimationProperty<Style, any>;
 export interface MasonShorthand {
@@ -10,6 +11,11 @@ export interface MasonShorthand {
 }
 export declare function shorthandConverter({ longhands, split }: MasonShorthand): (value: unknown) => [ShorthandLonghand, unknown][];
 export declare const textProperty: Property<ViewBase, string>;
+/**
+ * Writes `display`; unsetting it restores the element's own display (inline for an img or a
+ * span), kept from before the first write.
+ */
+export declare function applyDisplay(style: MasonStyle, value: Display | undefined): void;
 export declare const displayProperty: CssProperty<Style, Display>;
 export declare const filterProperty: CssProperty<Style, string>;
 export declare const borderColorProperty: CssProperty<Style, string>;
@@ -138,6 +144,9 @@ export declare const maskBorderModeProperty: CssProperty<Style, string>;
 export declare const maskProperty: ShorthandProperty<Style, any>;
 export declare const maskBorderProperty: ShorthandProperty<Style, any>;
 export declare const writingModeProperty: CssProperty<Style, string>;
+export declare const textOrientationProperty: CssProperty<Style, string>;
+export declare const textCombineUprightProperty: CssProperty<Style, string>;
+export declare const textSpacingTrimProperty: CssProperty<Style, string>;
 export declare const unicodeBidiProperty: CssProperty<Style, string>;
 export declare const caretColorProperty: CssProperty<Style, string>;
 export declare const listStyleTypeProperty: InheritedCssProperty<Style, string>;
@@ -150,5 +159,33 @@ export declare const borderTopProperty: ShorthandProperty<Style, any>;
 export declare const borderRightProperty: ShorthandProperty<Style, any>;
 export declare const borderBottomProperty: ShorthandProperty<Style, any>;
 export declare const borderLeftProperty: ShorthandProperty<Style, any>;
+type Sides = readonly [top: ShorthandLonghand, right: ShorthandLonghand, bottom: ShorthandLonghand, left: ShorthandLonghand];
+export interface LogicalLonghand {
+    property: CssProperty<Style, unknown>;
+    group: LogicalGroupName;
+    slot: number;
+}
+/** Logical longhands; Mason views write them in setNative (common.ts), once the native view exists. */
+export declare const logicalLonghands: LogicalLonghand[];
+export declare const marginLogicalLonghands: Sides;
+export declare const paddingLogicalLonghands: Sides;
+export declare const insetLogicalLonghands: Sides;
+export declare const logicalSizeLonghands: CssProperty<Style, unknown>[];
+/**
+ * Logical longhands a Mason view writes to physical sides: `physical` are the group's physical
+ * longhands (sides top, right, bottom, left; corners top-left, top-right, bottom-right,
+ * bottom-left; axes x, y), `logical` its logical ones in the positions of the physical ones
+ * they map to in horizontal left-to-right text.
+ */
+export interface LogicalBoxGroup {
+    kind: 'sides' | 'corners' | 'axes';
+    physical: CssProperty<Style, unknown>[];
+    logical: CssProperty<Style, unknown>[];
+    /** A side's value when neither kind of declaration sets it. */
+    initial: unknown;
+}
+export declare const logicalBoxGroups: LogicalBoxGroup[];
+export declare const radiusLogicalLonghands: CssProperty<Style, unknown>[];
+export declare const overflowLogicalLonghands: CssProperty<Style, unknown>[];
 export declare const masonShorthands: MasonShorthand[];
 export {};

package/properties.js

@@ -1,5 +1,5 @@
 import { CssProperty, CssAnimationProperty, InheritedCssProperty, backgroundColorProperty, Style, ShorthandProperty, Length as CoreLength, fontSizeProperty, textAlignmentProperty, textDecorationProperty, textTransformProperty, PercentLength as CorePercentLength, Trace, CoreTypes, unsetValue, verticalAlignmentProperty, textShadowProperty, Font, Property, makeParser, makeValidator, marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, minWidthProperty, minHeightProperty, widthProperty, heightProperty, lineHeightProperty, letterSpacingProperty, } from '@nativescript/core';
-import { isMasonView_, touchAction_ } from './symbols';
+import { elementDisplay_, isMasonView_, remapLogicalBoxes_, touchAction_ } from './symbols';
 /** Marks a Style whose size accessors already resolve Mason's units. */
 const MASON_SIZE_UNITS = Symbol('mason:size-units');
 import { beginStyleWrite, cssLengthToDip, endStyleWrite, isSizingKeyword, parseAspectRatio } from './style';
@@ -8,7 +8,7 @@ import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowP
 import { parseCSSShadow } from '@nativescript/core/ui/styling/css-shadow';
 import { installKeyframes, interpolatePositionList, interpolateSizeList, registerKeyframeProperty } from './css-keyframes';
 import { borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty, borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty } from '@nativescript/core/ui/styling/style-properties';
-import { BORDER_WIDTH_KEYWORDS, passThrough, splitBorder, splitBorderSide, splitBorderStyle, splitBorderStyleStartEnd, splitBorderWidthStartEnd, splitBorderColorStartEnd, splitInsetStartEnd, splitMarginStartEnd, splitPaddingStartEnd, splitBackground, splitMask, splitMaskBorder, splitWebkitMask, webkitMaskBox, webkitMaskComposite, splitBorderColor, splitBorderRadius, splitBorderWidth, splitFlex, splitFlexFlow, splitGap, splitMargin, splitOverflow, splitPadding } from './css-shorthands';
+import { BORDER_WIDTH_KEYWORDS, splitBorder, splitBorderSide, splitBorderStyle, splitBorderStyleStartEnd, splitBorderWidthStartEnd, splitBorderColorStartEnd, splitInsetStartEnd, splitMarginStartEnd, splitPaddingStartEnd, splitBackground, splitMask, splitMaskBorder, splitWebkitMask, webkitMaskBox, webkitMaskComposite, splitBorderColor, splitBorderRadius, splitBorderWidth, splitFlex, splitFlexFlow, splitGap, splitMargin, splitOverflow, splitPadding } from './css-shorthands';
 import { cssLength, isCssLength, toCamelCase } from './css-shorthands';
 import { splitListStyle, splitPlace } from './css-shorthands';
 function getViewStyle(view) {
@@ -70,17 +70,32 @@ function masonShorthandProperty(entry, getter = () => undefined) {
 export const textProperty = new Property({
     name: 'text',
 });
+/**
+ * Writes `display`; unsetting it restores the element's own display (inline for an img or a
+ * span), kept from before the first write.
+ */
+export function applyDisplay(style, value) {
+    const owner = style;
+    if (value) {
+        if (owner[elementDisplay_] === undefined)
+            owner[elementDisplay_] = style.display;
+        style.display = value;
+    }
+    else if (owner[elementDisplay_] !== undefined) {
+        style.display = owner[elementDisplay_];
+    }
+}
+// No defaultValue: core skips a value equal to the default, and `display: block` must still
+// reach an element that is inline on its own.
 export const displayProperty = new CssProperty({
     name: 'display',
     cssName: 'display',
-    defaultValue: 'block',
     valueChanged: (target, oldValue, newValue) => {
         if (appliedInSetNative(target, displayProperty))
             return;
         const view = getViewStyle(target.viewRef);
-        if (view && newValue) {
-            view.display = newValue;
-        }
+        if (view)
+            applyDisplay(view, newValue);
     },
     valueConverter: function (value) {
         if (typeof value === 'number') {
@@ -262,11 +277,14 @@ export const paddingProperty = new CssProperty({
 export const whiteSpaceProperty = new CssProperty({
     name: 'whiteSpace',
     cssName: 'white-space',
-    defaultValue: 'normal',
+    // No default: it inherits, so the initial value is a real change under another value.
     valueChanged(target, oldValue, newValue) {
         const view = getViewStyle(target.viewRef);
         if (view) {
-            view.whiteSpace = newValue;
+            if (newValue == null)
+                view.unsetInheritedText('whiteSpace');
+            else
+                view.whiteSpace = newValue;
         }
     },
 });
@@ -1804,11 +1822,14 @@ export const borderImageProperty = new CssProperty({
 export const fontStretchProperty = new CssProperty({
     name: 'fontStretch',
     cssName: 'font-stretch',
-    defaultValue: 'normal',
+    // No default: it inherits, so the initial value is a real change under another value.
     valueChanged(target, oldValue, newValue) {
         const view = getViewStyle(target.viewRef);
         if (view) {
-            view.fontStretch = newValue;
+            if (newValue == null)
+                view.unsetInheritedText('fontStretch');
+            else
+                view.fontStretch = newValue;
         }
     },
 });
@@ -1826,22 +1847,28 @@ export const fontFeatureSettingsProperty = new CssProperty({
 export const wordSpacingProperty = new CssProperty({
     name: 'wordSpacing',
     cssName: 'word-spacing',
-    defaultValue: 'normal',
+    // No default: it inherits, so the initial value is a real change under another value.
     valueChanged(target, oldValue, newValue) {
         const view = getViewStyle(target.viewRef);
         if (view) {
-            view.wordSpacing = newValue;
+            if (newValue == null)
+                view.unsetInheritedText('wordSpacing');
+            else
+                view.wordSpacing = newValue;
         }
     },
 });
 export const hyphensProperty = new CssProperty({
     name: 'hyphens',
     cssName: 'hyphens',
-    defaultValue: 'manual',
+    // No default: it inherits, so the initial value is a real change under another value.
     valueChanged(target, oldValue, newValue) {
         const view = getViewStyle(target.viewRef);
         if (view) {
-            view.hyphens = newValue;
+            if (newValue == null)
+                view.unsetInheritedText('hyphens');
+            else
+                view.hyphens = newValue;
         }
     },
 });
@@ -2169,11 +2196,58 @@ const webkitMaskBoxImageProperty = masonShorthandProperty(webkitMaskBoxImageShor
 export const writingModeProperty = new CssProperty({
     name: 'writingMode',
     cssName: 'writing-mode',
-    defaultValue: 'horizontal-tb',
+    // No default: it inherits, so the initial value is a real change under another value.
     valueChanged(target, oldValue, newValue) {
         const view = getViewStyle(target.viewRef);
         if (view) {
-            view.writingMode = newValue;
+            if (newValue == null)
+                view.unsetInheritedText('writingMode');
+            else
+                view.writingMode = newValue;
+            const ref = target.viewRef;
+            (__ANDROID__ ? ref?.get() : ref?.deref())?.[remapLogicalBoxes_]?.();
+        }
+    },
+});
+export const textOrientationProperty = new CssProperty({
+    name: 'textOrientation',
+    cssName: 'text-orientation',
+    // No default: it inherits, so the initial value is a real change under another value.
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue == null)
+                view.unsetInheritedText('textOrientation');
+            else
+                view.textOrientation = newValue;
+        }
+    },
+});
+export const textCombineUprightProperty = new CssProperty({
+    name: 'textCombineUpright',
+    cssName: 'text-combine-upright',
+    // No default: it inherits, so the initial value is a real change under another value.
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue == null)
+                view.unsetInheritedText('textCombineUpright');
+            else
+                view.textCombineUpright = newValue;
+        }
+    },
+});
+export const textSpacingTrimProperty = new CssProperty({
+    name: 'textSpacingTrim',
+    cssName: 'text-spacing-trim',
+    // No default: it inherits, so the initial value is a real change under another value.
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue == null)
+                view.unsetInheritedText('textSpacingTrim');
+            else
+                view.textSpacingTrim = newValue;
         }
     },
 });
@@ -2247,6 +2321,9 @@ maskClipProperty.register(Style);
 maskModeProperty.register(Style);
 maskCompositeProperty.register(Style);
 writingModeProperty.register(Style);
+textOrientationProperty.register(Style);
+textCombineUprightProperty.register(Style);
+textSpacingTrimProperty.register(Style);
 unicodeBidiProperty.register(Style);
 caretColorProperty.register(Style);
 registerAlongsideCore(backgroundImageProperty);
@@ -2411,38 +2488,87 @@ const LOGICAL_SIDES = [
     ['block-end', 2],
     ['inline-start', 3],
 ];
-/** `<prefix>-inline<suffix>`, `<prefix>-block<suffix>` and the four `-start`/`-end` sides. */
+/** `<prefix>-inline<suffix>` and `<prefix>-block<suffix>`, over a group's logical sides. */
 function logicalSides(prefix, suffix, sides, splitAxis) {
-    const inline = { cssName: `${prefix}-inline${suffix}`, longhands: [sides[3], sides[1]], split: splitAxis };
-    const block = { cssName: `${prefix}-block${suffix}`, longhands: [sides[0], sides[2]], split: splitAxis };
-    const perSide = LOGICAL_SIDES.map(([side, i]) => ({ cssName: `${prefix}-${side}${suffix}`, longhands: [sides[i]], split: passThrough }));
-    return [inline, block, ...perSide];
+    return [
+        { cssName: `${prefix}-inline${suffix}`, longhands: [sides[3], sides[1]], split: splitAxis },
+        { cssName: `${prefix}-block${suffix}`, longhands: [sides[0], sides[2]], split: splitAxis },
+    ];
+}
+/** Logical longhands; Mason views write them in setNative (common.ts), once the native view exists. */
+export const logicalLonghands = [];
+function logicalLonghand(cssName, group, slot, physical) {
+    const property = new CssProperty({
+        name: toCamelCase(cssName),
+        cssName,
+        valueChanged(target, oldValue, newValue) {
+            const ref = target?.viewRef;
+            const view = ref ? (__ANDROID__ ? ref.get() : ref.deref()) : undefined;
+            if (!view || view[isMasonView_])
+                return;
+            // cssName is the cascade's css-tier key ('css:margin-left').
+            target[physical.cssName] = (newValue ?? unsetValue);
+        },
+    });
+    property.register(Style);
+    logicalLonghands.push({ property, group, slot });
+    return property;
+}
+/** A group's four logical sides, in the positions of the physical sides they map to in horizontal left-to-right text. */
+function logicalSideLonghands(prefix, group, physical) {
+    return LOGICAL_SIDES.map(([side, i]) => logicalLonghand(`${prefix}-${side}`, group, i, physical[i]));
+}
+export const marginLogicalLonghands = logicalSideLonghands('margin', 'margin', marginLonghands);
+export const paddingLogicalLonghands = logicalSideLonghands('padding', 'padding', paddingLonghands);
+export const insetLogicalLonghands = logicalSideLonghands('inset', 'inset', [topProperty, rightProperty, bottomProperty, leftProperty]);
+export const logicalSizeLonghands = [
+    ['inline-size', widthProperty],
+    ['block-size', heightProperty],
+    ['min-inline-size', minWidthProperty],
+    ['min-block-size', minHeightProperty],
+    ['max-inline-size', maxWidthProperty],
+    ['max-block-size', maxHeightProperty],
+].map(([cssName, physical], slot) => logicalLonghand(cssName, 'size', slot, physical));
+export const logicalBoxGroups = [];
+function logicalBoxGroup(kind, physical, cssNames, initial) {
+    const group = { kind, physical: physical, logical: [], initial };
+    group.logical = cssNames.map((cssName, slot) => {
+        const property = new CssProperty({
+            name: toCamelCase(cssName),
+            cssName,
+            valueChanged(target, oldValue, newValue) {
+                const ref = target?.viewRef;
+                const view = ref ? (__ANDROID__ ? ref.get() : ref.deref()) : undefined;
+                if (!view || view[isMasonView_])
+                    return;
+                target[group.physical[slot].cssName] = (newValue ?? unsetValue);
+            },
+        });
+        property.register(Style);
+        return property;
+    });
+    logicalBoxGroups.push(group);
+    return group.logical;
 }
-const borderSideLonghands = (i) => [borderWidthLonghands[i], borderStyleLonghands[i], borderColorLonghands[i]];
+const sideNames = (prefix, suffix) => LOGICAL_SIDES.map(([side]) => `${prefix}-${side}${suffix}`);
+const borderWidthLogicalLonghands = logicalBoxGroup('sides', borderWidthLonghands, sideNames('border', '-width'), 0);
+const borderStyleLogicalLonghands = logicalBoxGroup('sides', borderStyleLonghands, sideNames('border', '-style'), 'none');
+const borderColorLogicalLonghands = logicalBoxGroup('sides', borderColorLonghands, sideNames('border', '-color'), 'black');
+// Corners are <block>-<inline>: start-start is top-left.
+export const radiusLogicalLonghands = logicalBoxGroup('corners', radiusLonghands, ['border-start-start-radius', 'border-start-end-radius', 'border-end-end-radius', 'border-end-start-radius'], 0);
+export const overflowLogicalLonghands = logicalBoxGroup('axes', [overflowXProperty, overflowYProperty], ['overflow-inline', 'overflow-block'], 'visible');
+const borderSideLonghands = (i) => [borderWidthLogicalLonghands[i], borderStyleLogicalLonghands[i], borderColorLogicalLonghands[i]];
 const logicalShorthands = [
-    ...logicalSides('margin', '', marginLonghands, splitMarginStartEnd),
-    ...logicalSides('padding', '', paddingLonghands, splitPaddingStartEnd),
-    ...logicalSides('inset', '', [topProperty, rightProperty, bottomProperty, leftProperty], splitInsetStartEnd),
-    ...logicalSides('border', '-width', borderWidthLonghands, splitBorderWidthStartEnd),
-    ...logicalSides('border', '-style', borderStyleLonghands, splitBorderStyleStartEnd),
-    ...logicalSides('border', '-color', borderColorLonghands, splitBorderColorStartEnd),
+    ...logicalSides('margin', '', marginLogicalLonghands, splitMarginStartEnd),
+    ...logicalSides('padding', '', paddingLogicalLonghands, splitPaddingStartEnd),
+    ...logicalSides('inset', '', insetLogicalLonghands, splitInsetStartEnd),
+    ...logicalSides('border', '-width', borderWidthLogicalLonghands, splitBorderWidthStartEnd),
+    ...logicalSides('border', '-style', borderStyleLogicalLonghands, splitBorderStyleStartEnd),
+    ...logicalSides('border', '-color', borderColorLogicalLonghands, splitBorderColorStartEnd),
     // `border-inline: 1px solid` gives both sides the same border.
     { cssName: 'border-inline', longhands: [...borderSideLonghands(3), ...borderSideLonghands(1)], split: (value) => [...splitBorderSide(value), ...splitBorderSide(value)] },
     { cssName: 'border-block', longhands: [...borderSideLonghands(0), ...borderSideLonghands(2)], split: (value) => [...splitBorderSide(value), ...splitBorderSide(value)] },
     ...LOGICAL_SIDES.map(([side, i]) => ({ cssName: `border-${side}`, longhands: borderSideLonghands(i), split: splitBorderSide })),
-    // Corners are <block>-<inline>: start-start is top-left.
-    { cssName: 'border-start-start-radius', longhands: [borderTopLeftRadiusProperty], split: passThrough },
-    { cssName: 'border-start-end-radius', longhands: [borderTopRightRadiusProperty], split: passThrough },
-    { cssName: 'border-end-end-radius', longhands: [borderBottomRightRadiusProperty], split: passThrough },
-    { cssName: 'border-end-start-radius', longhands: [borderBottomLeftRadiusProperty], split: passThrough },
-    { cssName: 'inline-size', longhands: [widthProperty], split: passThrough },
-    { cssName: 'block-size', longhands: [heightProperty], split: passThrough },
-    { cssName: 'min-inline-size', longhands: [minWidthProperty], split: passThrough },
-    { cssName: 'min-block-size', longhands: [minHeightProperty], split: passThrough },
-    { cssName: 'max-inline-size', longhands: [maxWidthProperty], split: passThrough },
-    { cssName: 'max-block-size', longhands: [maxHeightProperty], split: passThrough },
-    { cssName: 'overflow-inline', longhands: [overflowXProperty], split: passThrough },
-    { cssName: 'overflow-block', longhands: [overflowYProperty], split: passThrough },
 ];
 for (const entry of logicalShorthands) {
     masonShorthandProperty(entry, function () {