verstak 0.24.270 → 0.24.271

package/build/dist/source/html/El.d.ts

@@ -8,13 +8,24 @@ export type El<T = any, M = any> = {
     area: ElArea;
     width: Range;
     height: Range;
-    alignment: Align;
-    alignmentInside: Align;
+    alignment: Alignment | undefined;
+    alignmentInside: Alignment | undefined;
+    verticalAlignment: VerticalAlignment | undefined;
+    verticalAlignmentInside: VerticalAlignment | undefined;
     stretchingStrengthX: number | undefined;
     stretchingStrengthY: number | undefined;
     contentWrapping: boolean;
     overlayVisible: boolean | undefined;
     splitView: SplitView | undefined;
+    widthPx: {
+        minPx: number;
+        maxPx: number;
+    };
+    heightPx: {
+        minPx: number;
+        maxPx: number;
+    };
+    partitionSizeInSplitViewPx: number;
     readonly style: CSSStyleDeclaration;
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
 };
@@ -34,22 +45,22 @@ export type ElCoords = {
     x2: number;
     y2: number;
 };
-export declare enum Align {
-    default = 0,
-    left = 4,
-    centerX = 5,
-    right = 6,
-    stretchX = 7,
-    top = 32,
-    centerY = 40,
-    bottom = 48,
-    stretchY = 56,
-    centerXY = 45,
-    stretchXY = 63
+export declare enum Alignment {
+    left = 0,
+    center = 1,
+    right = 2,
+    stretch = 3
+}
+export declare enum VerticalAlignment {
+    top = 0,
+    center = 1,
+    bottom = 2,
+    stretch = 3
 }
 export type Range = {
     readonly min?: string;
     readonly max?: string;
+    readonly preferred?: string;
 };
 export type MarkedRange = Range & {
     readonly marker?: string;
@@ -78,7 +89,9 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private _width;
     private _height;
     private _alignment;
+    private _verticalAlignment;
     private _alignmentInside;
+    private _verticalAlignmentInside;
     private _stretchingStrengthX;
     private _stretchingStrengthY;
     private _contentWrapping;
@@ -105,6 +118,8 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
         minPx: number;
         maxPx: number;
     });
+    get preferredWidthUsed(): boolean;
+    set preferredWidthUsed(value: boolean);
     get height(): Range;
     set height(value: Range);
     get heightPx(): {
@@ -115,10 +130,16 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
         minPx: number;
         maxPx: number;
     });
-    get alignment(): Align;
-    set alignment(value: Align);
-    get alignmentInside(): Align;
-    set alignmentInside(value: Align);
+    get preferredHeightUsed(): boolean;
+    set preferredHeightUsed(value: boolean);
+    get alignment(): Alignment | undefined;
+    set alignment(value: Alignment | undefined);
+    get verticalAlignment(): VerticalAlignment | undefined;
+    set verticalAlignment(value: VerticalAlignment | undefined);
+    get alignmentInside(): Alignment | undefined;
+    set alignmentInside(value: Alignment | undefined);
+    get verticalAlignmentInside(): VerticalAlignment | undefined;
+    set verticalAlignmentInside(value: VerticalAlignment | undefined);
     get stretchingStrengthX(): number | undefined;
     set stretchingStrengthX(value: number | undefined);
     get stretchingStrengthY(): number | undefined;
@@ -129,6 +150,7 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     set overlayVisible(value: boolean | undefined);
     get splitView(): SplitView | undefined;
     set splitView(value: SplitView | undefined);
+    get partitionSizeInSplitViewPx(): number;
     get style(): CSSStyleDeclaration;
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
     protected children(onlyAfter?: ElImpl): Generator<ElImpl>;
@@ -139,6 +161,7 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private static applyWidth;
     private static applyHeight;
     private static applyAlignment;
+    private static applyVerticalAlignment;
     private static applyStretchingStrengthX;
     private static applyStretchingStrengthY;
     private static applyContentWrapping;
@@ -157,8 +180,11 @@ export declare class ElLayoutInfo {
     effectiveSizePx: number;
     offsetXpx: number;
     offsetYpx: number;
-    containerSizeXpx: number;
-    containerSizeYpx: number;
+    contentSizeXpx: number;
+    contentSizeYpx: number;
+    borderSizeYpx: number;
+    borderSizeXpx: number;
+    isConstrained: boolean;
     constructor(prev: ElLayoutInfo);
 }
 declare enum ElLayoutInfoFlags {

package/build/dist/source/html/El.js

@@ -1,4 +1,13 @@
-import { RxNode, BaseDriver, Transaction } from "reactronic";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { RxNode, BaseDriver, Transaction, obs, ObservableObject } from "reactronic";
 import { equalElCoords, parseElCoords } from "./ElUtils.js";
 export var ElKind;
 (function (ElKind) {
@@ -11,25 +20,34 @@ export var ElKind;
     ElKind[ElKind["cursor"] = 6] = "cursor";
     ElKind[ElKind["native"] = 7] = "native";
 })(ElKind || (ElKind = {}));
-export var Align;
-(function (Align) {
-    Align[Align["default"] = 0] = "default";
-    Align[Align["left"] = 4] = "left";
-    Align[Align["centerX"] = 5] = "centerX";
-    Align[Align["right"] = 6] = "right";
-    Align[Align["stretchX"] = 7] = "stretchX";
-    Align[Align["top"] = 32] = "top";
-    Align[Align["centerY"] = 40] = "centerY";
-    Align[Align["bottom"] = 48] = "bottom";
-    Align[Align["stretchY"] = 56] = "stretchY";
-    Align[Align["centerXY"] = 45] = "centerXY";
-    Align[Align["stretchXY"] = 63] = "stretchXY";
-})(Align || (Align = {}));
+export var Alignment;
+(function (Alignment) {
+    Alignment[Alignment["left"] = 0] = "left";
+    Alignment[Alignment["center"] = 1] = "center";
+    Alignment[Alignment["right"] = 2] = "right";
+    Alignment[Alignment["stretch"] = 3] = "stretch";
+})(Alignment || (Alignment = {}));
+export var VerticalAlignment;
+(function (VerticalAlignment) {
+    VerticalAlignment[VerticalAlignment["top"] = 0] = "top";
+    VerticalAlignment[VerticalAlignment["center"] = 1] = "center";
+    VerticalAlignment[VerticalAlignment["bottom"] = 2] = "bottom";
+    VerticalAlignment[VerticalAlignment["stretch"] = 3] = "stretch";
+})(VerticalAlignment || (VerticalAlignment = {}));
 export var SplitView;
 (function (SplitView) {
     SplitView[SplitView["horizontal"] = 0] = "horizontal";
     SplitView[SplitView["vertical"] = 1] = "vertical";
 })(SplitView || (SplitView = {}));
+class Size extends ObservableObject {
+    constructor() {
+        super();
+        this.raw = { min: "", max: "" };
+        this.minPx = 0;
+        this.maxPx = Number.POSITIVE_INFINITY;
+        this.preferredUsed = false;
+    }
+}
 export class ElDriver extends BaseDriver {
     allocate(node) {
         return new ElImpl(node);
@@ -46,10 +64,12 @@ export class ElImpl {
         this._kind = ElKind.part;
         this._area = undefined;
         this._coords = UndefinedElCoords;
-        this._width = { raw: { min: "", max: "" }, minPx: 0, maxPx: Number.POSITIVE_INFINITY };
-        this._height = { raw: { min: "", max: "" }, minPx: 0, maxPx: Number.POSITIVE_INFINITY };
-        this._alignment = Align.default;
-        this._alignmentInside = Align.default;
+        this._width = Transaction.separate(() => new Size());
+        this._height = Transaction.separate(() => new Size());
+        this._alignment = undefined;
+        this._verticalAlignment = undefined;
+        this._alignmentInside = undefined;
+        this._verticalAlignmentInside = undefined;
         this._stretchingStrengthX = undefined;
         this._stretchingStrengthY = undefined;
         this._contentWrapping = true;
@@ -102,6 +122,7 @@ export class ElImpl {
         if (value.min !== w.min || value.max !== w.max) {
             ElImpl.applyWidth(this, value);
             this._width.raw = value;
+            this._width.preferredUsed = false;
         }
     }
     get widthPx() { return this._width; }
@@ -112,12 +133,19 @@ export class ElImpl {
         if (value.maxPx !== w.maxPx)
             this._width.maxPx = value.maxPx;
     }
+    get preferredWidthUsed() {
+        return this._width.preferredUsed;
+    }
+    set preferredWidthUsed(value) {
+        this._width.preferredUsed = value;
+    }
     get height() { return this._height.raw; }
     set height(value) {
         const h = this._height.raw;
         if (value.min !== h.min || value.max !== h.max) {
             ElImpl.applyHeight(this, value);
             this._height.raw = value;
+            this._height.preferredUsed = false;
         }
     }
     get heightPx() { return this._height; }
@@ -128,22 +156,44 @@ export class ElImpl {
         if (value.maxPx !== w.maxPx)
             this._height.maxPx = value.maxPx;
     }
+    get preferredHeightUsed() {
+        return this._height.preferredUsed;
+    }
+    set preferredHeightUsed(value) {
+        this._height.preferredUsed = value;
+    }
     get alignment() { return this._alignment; }
     set alignment(value) {
         const existing = this._alignment;
         if (value !== existing) {
-            ElImpl.applyAlignment(this, existing, value, this._alignmentInside, this._alignmentInside, this._stretchingStrengthX, this._stretchingStrengthY);
+            ElImpl.applyAlignment(this, existing, value, this._alignmentInside, this._alignmentInside, this._stretchingStrengthX);
             this._alignment = value;
         }
     }
+    get verticalAlignment() { return this._verticalAlignment; }
+    set verticalAlignment(value) {
+        const existing = this._verticalAlignment;
+        if (value !== existing) {
+            ElImpl.applyVerticalAlignment(this, existing, value, this._verticalAlignmentInside, this._verticalAlignmentInside, this._stretchingStrengthY);
+            this._verticalAlignment = value;
+        }
+    }
     get alignmentInside() { return this._alignmentInside; }
     set alignmentInside(value) {
         const existing = this._alignmentInside;
         if (value !== existing) {
-            ElImpl.applyAlignment(this, this._alignment, this._alignment, existing, value, this._stretchingStrengthX, this._stretchingStrengthY);
+            ElImpl.applyAlignment(this, this._alignment, this._alignment, existing, value, this._stretchingStrengthX);
             this._alignmentInside = value;
         }
     }
+    get verticalAlignmentInside() { return this._verticalAlignmentInside; }
+    set verticalAlignmentInside(value) {
+        const existing = this._verticalAlignmentInside;
+        if (value !== existing) {
+            ElImpl.applyVerticalAlignment(this, this._verticalAlignment, this._verticalAlignment, existing, value, this._stretchingStrengthY);
+            this._verticalAlignmentInside = value;
+        }
+    }
     get stretchingStrengthX() { return this._stretchingStrengthX; }
     set stretchingStrengthX(value) {
         const existing = this._stretchingStrengthX;
@@ -181,6 +231,12 @@ export class ElImpl {
             this._splitView = value;
         }
     }
+    get partitionSizeInSplitViewPx() {
+        var _a;
+        if (this.layoutInfo === undefined)
+            this.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+        return (_a = this.layoutInfo.effectiveSizePx) !== null && _a !== void 0 ? _a : 0;
+    }
     get style() { return this.native.style; }
     useStylingPreset(stylingPresetName, enabled) {
         ElImpl.applyStylingPreset(this, this._hasStylingPresets, stylingPresetName, enabled);
@@ -246,24 +302,24 @@ export class ElImpl {
             s.maxHeight = (_b = value.max) !== null && _b !== void 0 ? _b : "";
         }
     }
-    static applyAlignment(element, oldPrimary, newPrimary, oldInside, newInside, strengthX, strengthY) {
+    static applyAlignment(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
         var _a;
+        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = Alignment.left);
+        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = Alignment.left);
+        oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
+        newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary);
         const css = element.style;
         let hostLayout = undefined;
-        let hostCss = undefined;
         if (element.node.host.driver.isPartition) {
             const hostEl = element.node.host.element;
-            hostCss = hostEl.style;
             hostLayout = hostEl.layoutInfo;
             if (hostLayout === undefined)
                 hostLayout = hostEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
         }
-        if (newInside === Align.default)
-            newInside = newPrimary;
         let isEffectiveAlignerX = false;
         if (hostLayout) {
-            const isAligner = alignedX(newPrimary, Align.centerX) ||
-                alignedX(newPrimary, Align.right);
+            const isAligner = newPrimary === Alignment.center ||
+                newPrimary === Alignment.right;
             isEffectiveAlignerX = isAligner && (hostLayout.alignerX === undefined ||
                 element.index <= hostLayout.alignerX.index);
             if (hostLayout.alignerX === element) {
@@ -281,65 +337,83 @@ export class ElImpl {
                 }
             }
         }
-        switch (newPrimary & 0b00000111) {
+        switch (newPrimary) {
             default:
-            case Align.left:
+            case Alignment.left:
                 css.justifySelf = "start";
-                if (alignedX(oldPrimary, Align.centerX)) {
+                if (oldPrimary === Alignment.center) {
                     css.marginLeft = "";
                     css.marginRight = "";
                 }
-                else if ((oldPrimary & Align.right) === Align.right)
+                else if (oldPrimary === Alignment.right)
                     css.marginLeft = "";
                 break;
-            case Align.centerX:
+            case Alignment.center:
                 css.justifySelf = "center";
                 if (hostLayout)
                     css.marginLeft = isEffectiveAlignerX ? "auto" : "";
                 css.marginRight = "auto";
                 break;
-            case Align.right:
+            case Alignment.right:
                 css.justifySelf = "end";
                 if (hostLayout)
                     css.marginLeft = isEffectiveAlignerX ? "auto" : "";
-                if (alignedX(oldPrimary, Align.centerX))
+                if (oldPrimary === Alignment.center)
                     css.marginRight = "";
                 break;
-            case Align.stretchX:
+            case Alignment.stretch:
                 css.justifySelf = "stretch";
-                if (alignedX(oldPrimary, Align.centerX)) {
+                if (oldPrimary === Alignment.center) {
                     css.marginLeft = "";
                     css.marginRight = "";
                 }
-                else if (alignedX(oldPrimary, Align.right))
+                else if (oldPrimary === Alignment.right)
                     css.marginLeft = "";
                 break;
         }
-        switch (newInside & 0b00000111) {
+        switch (newInside) {
             default:
-            case Align.left:
+            case Alignment.left:
                 css.alignItems = "start";
                 css.textAlign = "left";
                 break;
-            case Align.centerX:
+            case Alignment.center:
                 css.alignItems = "center";
                 css.textAlign = "center";
                 break;
-            case Align.right:
+            case Alignment.right:
                 css.alignItems = "end";
                 css.textAlign = "right";
                 break;
-            case Align.stretchX:
+            case Alignment.stretch:
                 css.alignItems = "stretch";
                 css.textAlign = "justify";
                 break;
         }
+        if (newPrimary === Alignment.stretch && strength === undefined)
+            ElImpl.applyStretchingStrengthX(element, 0, 1);
+    }
+    static applyVerticalAlignment(element, oldPrimary, newPrimary, oldInside, newInside, strength) {
+        oldPrimary !== null && oldPrimary !== void 0 ? oldPrimary : (oldPrimary = VerticalAlignment.top);
+        newPrimary !== null && newPrimary !== void 0 ? newPrimary : (newPrimary = VerticalAlignment.top);
+        oldInside !== null && oldInside !== void 0 ? oldInside : (oldInside = oldPrimary);
+        newInside !== null && newInside !== void 0 ? newInside : (newInside = newPrimary);
+        const css = element.style;
+        let hostLayout = undefined;
+        let hostCss = undefined;
+        if (element.node.host.driver.isPartition) {
+            const hostEl = element.node.host.element;
+            hostCss = hostEl.style;
+            hostLayout = hostEl.layoutInfo;
+            if (hostLayout === undefined)
+                hostLayout = hostEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+        }
         let isEffectiveAlignerY = false;
         if (hostLayout) {
-            const isAligner = alignedY(newPrimary, Align.centerY) ||
-                alignedY(newPrimary, Align.bottom);
+            const isAligner = newPrimary === VerticalAlignment.center ||
+                newPrimary === VerticalAlignment.bottom;
             isEffectiveAlignerY = isAligner && (hostLayout.alignerY === undefined ||
-                !alignedY(hostLayout.alignerY.alignment, Align.centerY));
+                hostLayout.alignerY.verticalAlignment !== VerticalAlignment.center);
             if (hostLayout.alignerY === element) {
                 if (!isEffectiveAlignerY) {
                     hostCss.marginTop = "";
@@ -352,39 +426,37 @@ export class ElImpl {
                 }
             }
         }
-        switch (newPrimary & 0b00111000) {
+        switch (newPrimary) {
             default:
-            case Align.top:
+            case VerticalAlignment.top:
                 css.alignSelf = "start";
                 break;
-            case Align.centerY:
+            case VerticalAlignment.center:
                 css.alignSelf = "center";
                 break;
-            case Align.bottom:
+            case VerticalAlignment.bottom:
                 css.alignSelf = "end";
                 break;
-            case Align.stretchY:
+            case VerticalAlignment.stretch:
                 css.alignSelf = "stretch";
                 break;
         }
-        switch (newInside & 0b00111000) {
+        switch (newInside) {
             default:
-            case Align.top:
+            case VerticalAlignment.top:
                 css.justifyContent = "start";
                 break;
-            case Align.centerY:
+            case VerticalAlignment.center:
                 css.justifyContent = "center";
                 break;
-            case Align.bottom:
+            case VerticalAlignment.bottom:
                 css.justifyContent = "end";
                 break;
-            case Align.stretchY:
+            case VerticalAlignment.stretch:
                 css.justifyContent = "stretch";
                 break;
         }
-        if (alignedX(newPrimary, Align.stretchX) && strengthX === undefined)
-            ElImpl.applyStretchingStrengthX(element, 0, 1);
-        if (alignedY(newPrimary, Align.stretchY) && strengthY === undefined)
+        if (newPrimary === VerticalAlignment.stretch && strength === undefined)
             ElImpl.applyStretchingStrengthY(element, 0, 1);
     }
     static applyStretchingStrengthX(element, existing, value) {
@@ -497,24 +569,7 @@ export class ElImpl {
     static applySplitView(element, value) {
         const e = element.native;
         if (e instanceof HTMLElement) {
-            const s = e.style;
-            if (value !== undefined) {
-                s.display = "flex";
-                s.position = "relative";
-                if (value === SplitView.horizontal) {
-                    s.flexDirection = "row";
-                    s.overflow = "scroll hidden";
-                }
-                else {
-                    s.flexDirection = "column";
-                    s.overflow = "hidden scroll";
-                }
-            }
-            else {
-                s.display = "";
-                s.position = "";
-                s.overflow = "";
-            }
+            e.style.position = value !== undefined ? "relative" : "";
             Transaction.separate(() => e.sensors.resize.observeResizing(element, value !== undefined));
         }
     }
@@ -539,10 +594,45 @@ export class ElLayoutInfo {
         this.effectiveSizePx = 0;
         this.offsetXpx = 0;
         this.offsetYpx = 0;
-        this.containerSizeXpx = 0;
-        this.containerSizeYpx = 0;
+        this.contentSizeXpx = 0;
+        this.contentSizeYpx = 0;
+        this.borderSizeXpx = 0;
+        this.borderSizeYpx = 0;
+        this.isConstrained = false;
     }
 }
+__decorate([
+    obs,
+    __metadata("design:type", Number)
+], ElLayoutInfo.prototype, "effectiveSizePx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Number)
+], ElLayoutInfo.prototype, "offsetXpx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Number)
+], ElLayoutInfo.prototype, "offsetYpx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Number)
+], ElLayoutInfo.prototype, "contentSizeXpx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Number)
+], ElLayoutInfo.prototype, "contentSizeYpx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Number)
+], ElLayoutInfo.prototype, "borderSizeYpx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Number)
+], ElLayoutInfo.prototype, "borderSizeXpx", void 0);
+__decorate([
+    obs,
+    __metadata("design:type", Boolean)
+], ElLayoutInfo.prototype, "isConstrained", void 0);
 var ElLayoutInfoFlags;
 (function (ElLayoutInfoFlags) {
     ElLayoutInfoFlags[ElLayoutInfoFlags["none"] = 0] = "none";
@@ -552,7 +642,7 @@ var ElLayoutInfoFlags;
     ElLayoutInfoFlags[ElLayoutInfoFlags["childrenRelayoutIsNeeded"] = 8] = "childrenRelayoutIsNeeded";
 })(ElLayoutInfoFlags || (ElLayoutInfoFlags = {}));
 const UndefinedElCoords = Object.freeze({ x1: 0, y1: 0, x2: 0, y2: 0 });
-export const InitialElLayoutInfo = Object.freeze(new ElLayoutInfo({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: ElLayoutInfoFlags.none, effectiveSizePx: 0, offsetXpx: 0, offsetYpx: 0, containerSizeXpx: 0, containerSizeYpx: 0 }));
+export const InitialElLayoutInfo = Object.freeze(new ElLayoutInfo({ x: 1, y: 1, runningMaxX: 0, runningMaxY: 0, flags: ElLayoutInfoFlags.none, effectiveSizePx: 0, offsetXpx: 0, offsetYpx: 0, contentSizeXpx: 0, contentSizeYpx: 0, borderSizeXpx: 0, borderSizeYpx: 0, isConstrained: false }));
 function getElCoordsAndAdjustLayoutInfo(isRegularElement, area, maxX, maxY, prevElLayoutInfo, layoutInfo) {
     var _a, _b;
     let result;
@@ -722,7 +812,6 @@ const VerstakDriversByLayout = [
         const owner = el.node.owner.element;
         s.position = "absolute";
         s.zIndex = `${Number.MAX_SAFE_INTEGER}`;
-        s.backgroundColor = "#00BB00";
         if (owner.splitView === SplitView.horizontal) {
             s.width = "4px";
             s.marginLeft = "-2px";
@@ -741,9 +830,3 @@ const VerstakDriversByLayout = [
     el => {
     },
 ];
-function alignedX(align, like) {
-    return (align & 0b00000011) == (like & 0b00000011);
-}
-function alignedY(align, like) {
-    return (align & 0b00011000) == (like & 0b00011000);
-}