verstak 0.24.269 → 0.24.270

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

@@ -0,0 +1,37 @@
+import { RxNodeVariable } from "reactronic";
+export declare enum Axis {
+    X = 0,
+    Y = 1
+}
+export type NoUnit = void;
+export type DistanceUnit = "px" | "ln" | "em" | "rem" | "vw" | "vh" | "%" | "f";
+export declare class Dimension<T = NoUnit> {
+    num: number;
+    unit?: T;
+    constructor(num: number, unit?: T);
+    clone(): Dimension<T>;
+    equalsTo(another: Dimension<T>): boolean;
+    static parse<T>(text: string): Dimension<T>;
+    static emit<T>(value: Dimension<T>): string;
+    static readonly gFontSizePx: RxNodeVariable<number>;
+    private static readonly gLineSizePx;
+    static get lineSizePx(): number;
+    static set lineSizePx(value: number);
+    static getLineSizePx(): RxNodeVariable<number>;
+}
+export declare function dim<T = NoUnit>(num: number, unit?: T): Dimension<T>;
+export type SizeConverterOptions = {
+    axis: Axis;
+    lineSizePx: number;
+    fontSizePx: number;
+    containerSizeXpx: number;
+    containerSizeYpx: number;
+};
+export declare const BodyFontSize: number;
+export declare const BodySmallFontSize: number;
+export declare function px(num: number): Dimension<DistanceUnit>;
+export declare function ln(num: number): Dimension<DistanceUnit>;
+export declare function fromPx(value: number, unit: DistanceUnit, options: SizeConverterOptions): number;
+export declare function fromPx<T>(value: Dimension<T>, options: SizeConverterOptions): number;
+export declare function toPx(value: number, unit: DistanceUnit, options: SizeConverterOptions): number;
+export declare function toPx<T>(value: Dimension<T>, options: SizeConverterOptions): number;

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

@@ -0,0 +1,139 @@
+import { RxNodeVariable } from "reactronic";
+export var Axis;
+(function (Axis) {
+    Axis[Axis["X"] = 0] = "X";
+    Axis[Axis["Y"] = 1] = "Y";
+})(Axis || (Axis = {}));
+export class Dimension {
+    constructor(num, unit) {
+        this.num = num;
+        this.unit = unit;
+    }
+    clone() {
+        return new Dimension(this.num, this.unit);
+    }
+    equalsTo(another) {
+        return this.num === another.num && this.unit === another.unit;
+    }
+    static parse(text) {
+        text = text.trim();
+        const splitPos = text.search(/[^0-9.]/);
+        const num = Number.parseFloat(~splitPos ? text.substring(0, splitPos) : text);
+        const unit = ~splitPos ? text.substring(splitPos, text.length).trim() : undefined;
+        return dim(num, unit);
+    }
+    static emit(value) {
+        var _a;
+        return `${value.num}${(_a = value.unit) !== null && _a !== void 0 ? _a : ""}`;
+    }
+    static get lineSizePx() {
+        return Dimension.gLineSizePx.value;
+    }
+    static set lineSizePx(value) {
+        Dimension.gLineSizePx.value = value;
+    }
+    static getLineSizePx() {
+        return Dimension.gLineSizePx;
+    }
+}
+Dimension.gFontSizePx = new RxNodeVariable();
+Dimension.gLineSizePx = new RxNodeVariable();
+export function dim(num, unit) {
+    return new Dimension(num, unit);
+}
+export const BodyFontSize = Number.parseFloat(getComputedStyle(document.body).fontSize);
+export const BodySmallFontSize = Math.ceil(BodyFontSize * 0.75);
+export function px(num) {
+    return dim(num, "px");
+}
+export function ln(num) {
+    return dim(num, "ln");
+}
+export function fromPx(value, ...args) {
+    const isValueNumber = typeof value === "number";
+    const { num, unit } = isValueNumber
+        ? { num: value, unit: args[0] }
+        : value;
+    const options = isValueNumber ? args[1] : args[0];
+    let result = 0;
+    switch (unit) {
+        case "px":
+            result = num;
+            break;
+        case "ln":
+            result = pxToEmOrN(num, options.lineSizePx);
+            break;
+        case "em":
+            result = pxToEmOrN(num, options.fontSizePx);
+            break;
+        case "rem":
+            result = pxToRem(num);
+            break;
+        case "vw":
+            result = pxToPercent(num, options.containerSizeXpx);
+            break;
+        case "vh":
+            result = pxToPercent(num, options.containerSizeYpx);
+            break;
+        case "%":
+            result = pxToPercent(num, options.axis === Axis.X ? options.containerSizeXpx : options.containerSizeYpx);
+            break;
+        default:
+            result = num;
+            break;
+    }
+    return result;
+}
+export function toPx(value, ...args) {
+    const isValueNumber = typeof value === "number";
+    const { num, unit } = isValueNumber
+        ? { num: value, unit: args[0] }
+        : value;
+    const options = isValueNumber ? args[1] : args[0];
+    let result = 0;
+    switch (unit) {
+        case "px":
+            result = num;
+            break;
+        case "ln":
+            result = emOrNToPx(num, options.lineSizePx);
+            break;
+        case "em":
+            result = emOrNToPx(num, options.fontSizePx);
+            break;
+        case "rem":
+            result = remToPx(num);
+            break;
+        case "vw":
+            result = percentToPx(num, options.containerSizeXpx);
+            break;
+        case "vh":
+            result = percentToPx(num, options.containerSizeYpx);
+            break;
+        case "%":
+            result = percentToPx(num, options.axis === Axis.X ? options.containerSizeXpx : options.containerSizeYpx);
+            break;
+        default:
+            result = num;
+            break;
+    }
+    return result;
+}
+function pxToPercent(px, containerSizePx) {
+    return px * 100 / containerSizePx;
+}
+function pxToRem(px) {
+    return px / BodyFontSize;
+}
+function pxToEmOrN(px, sizePx) {
+    return px / sizePx;
+}
+function percentToPx(percent, containerSizePx) {
+    return percent * containerSizePx / 100;
+}
+function remToPx(rem) {
+    return Math.round(rem * BodyFontSize);
+}
+function emOrNToPx(em, sizePx) {
+    return Math.round(em * sizePx);
+}

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

@@ -0,0 +1,18 @@
+import { MergeList, MergedItem, RxNode } from "reactronic";
+import { ElImpl } from "./El.js";
+export declare function relayoutUsingSplitter(splitViewNode: RxNode<ElImpl>, deltaPx: number, index: number, initialSizesPx: Array<{
+    node: RxNode<ElImpl>;
+    sizePx: number;
+}>, priorities?: ReadonlyArray<number>): void;
+export declare function relayout(splitViewNode: RxNode<ElImpl>, priorities: ReadonlyArray<number>, sizesPx: Array<{
+    node: RxNode<ElImpl>;
+    sizePx: number;
+}>): void;
+export declare function resizeUsingDelta(splitViewNode: RxNode<ElImpl>, containerSizePx: number, deltaPx: number, index: number, priorities: ReadonlyArray<number>, sizesPx: Array<{
+    node: RxNode<ElImpl>;
+    sizePx: number;
+}>, force?: boolean): void;
+export declare function layout(splitViewNode: RxNode<ElImpl>): void;
+export declare function getPrioritiesForSplitter(index: number, size: number): ReadonlyArray<number>;
+export declare function getPrioritiesForSizeChanging(item: MergedItem<any>, children: MergeList<RxNode>): ReadonlyArray<number>;
+export declare function getPrioritiesForEmptySpaceDistribution(children: MergeList<RxNode>): ReadonlyArray<number>;

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

@@ -0,0 +1,256 @@
+import { ElLayoutInfo, InitialElLayoutInfo, SplitView } from "./El.js";
+import { clamp } from "./ElUtils.js";
+import { Drivers, isSplitViewPartition } from "./Elements.js";
+export function relayoutUsingSplitter(splitViewNode, deltaPx, index, initialSizesPx, priorities) {
+    var _a, _b, _c, _d;
+    if (priorities === undefined) {
+        priorities = getPrioritiesForSplitter(index + 1, initialSizesPx.length);
+    }
+    const containerSizePx = splitViewNode.element.splitView === SplitView.horizontal
+        ? (_b = (_a = splitViewNode.element.layoutInfo) === null || _a === void 0 ? void 0 : _a.containerSizeXpx) !== null && _b !== void 0 ? _b : 0
+        : (_d = (_c = splitViewNode.element.layoutInfo) === null || _c === void 0 ? void 0 : _c.containerSizeYpx) !== null && _d !== void 0 ? _d : 0;
+    console.log(`(splitter) delta = ${deltaPx}, container = ${containerSizePx}, size = ${initialSizesPx.reduce((p, c) => p + c.sizePx, 0)}, index = ${index}`);
+    resizeUsingDelta(splitViewNode, containerSizePx, deltaPx, index + 1, priorities, initialSizesPx, true);
+    layout(splitViewNode);
+}
+export function relayout(splitViewNode, priorities, sizesPx) {
+    var _a, _b, _c, _d;
+    const containerSizePx = splitViewNode.element.splitView === SplitView.horizontal
+        ? (_b = (_a = splitViewNode.element.layoutInfo) === null || _a === void 0 ? void 0 : _a.containerSizeXpx) !== null && _b !== void 0 ? _b : 0
+        : (_d = (_c = splitViewNode.element.layoutInfo) === null || _c === void 0 ? void 0 : _c.containerSizeYpx) !== null && _d !== void 0 ? _d : 0;
+    const deltaPx = containerSizePx - sizesPx.reduce((p, c) => p + c.sizePx, 0);
+    console.log(`(relayout) delta = ${deltaPx}px, container = ${containerSizePx}px, priorities = ${priorities.map(x => `0x${x.toString(2)}`).join(",")}`);
+    resizeUsingDelta(splitViewNode, containerSizePx, deltaPx, sizesPx.length, priorities, sizesPx);
+    layout(splitViewNode);
+}
+export function resizeUsingDelta(splitViewNode, containerSizePx, deltaPx, index, priorities, sizesPx, force = false) {
+    var _a, _b, _c, _d;
+    const isHorizontal = splitViewNode.element.splitView === SplitView.horizontal;
+    if (sizesPx.length > 0 && deltaPx !== 0) {
+        let minBeforeDeltaPx = 0;
+        let maxBeforeDeltaPx = 0;
+        for (let i = 0; i < index; i++) {
+            const size = isHorizontal ? sizesPx[i].node.element.widthPx : sizesPx[i].node.element.heightPx;
+            minBeforeDeltaPx += size.minPx - sizesPx[i].sizePx;
+            maxBeforeDeltaPx += size.maxPx - sizesPx[i].sizePx;
+        }
+        const hasAfter = index < sizesPx.length;
+        let minAfterDeltaPx = hasAfter ? 0 : Number.NEGATIVE_INFINITY;
+        let maxAfterDeltaPx = hasAfter ? 0 : Number.POSITIVE_INFINITY;
+        for (let i = index; i < sizesPx.length; i++) {
+            const size = isHorizontal ? sizesPx[i].node.element.widthPx : sizesPx[i].node.element.heightPx;
+            minAfterDeltaPx += sizesPx[i].sizePx - size.maxPx;
+            maxAfterDeltaPx += sizesPx[i].sizePx - size.minPx;
+        }
+        const minDeltaPx = Math.max(minBeforeDeltaPx, minAfterDeltaPx);
+        const maxDeltaPx = Math.min(maxBeforeDeltaPx, maxAfterDeltaPx);
+        const clampedDeltaPx = clamp(deltaPx, minDeltaPx, maxDeltaPx);
+        console.log(`%c${sizesPx.map((x, i) => {
+            const size = isHorizontal ? x.node.element.widthPx : x.node.element.heightPx;
+            return `${i}: ${size.minPx}..${x.sizePx}..${size.maxPx} (px)`;
+        }).join("\n")}`, "color: orangered");
+        console.log(`[${Array.from({ length: index }).map((x, i) => i).join(",")} | ${Array.from({ length: Math.max(0, sizesPx.length - index) }).map((x, i) => index + i).join(",")}] min = ${minDeltaPx.toFixed(2)} (${minBeforeDeltaPx.toFixed(2)}, ${minAfterDeltaPx.toFixed(2)}), ${deltaPx.toFixed(2)} -> ${clampedDeltaPx.toFixed(2)}, max = ${maxDeltaPx.toFixed(2)} (${maxBeforeDeltaPx.toFixed(2)}, ${maxAfterDeltaPx.toFixed(2)})`);
+        if (clampedDeltaPx !== 0) {
+            const res = 1 / devicePixelRatio;
+            let lastGrowingElementIndex = undefined;
+            if (index > 0) {
+                let runningReminderPx = 0;
+                let beforeDeltaPx = clampedDeltaPx;
+                for (let priority = 0; priority < priorities.length; priority++) {
+                    const vector = priorities[priority];
+                    let fractionCount = getFractionCount(isHorizontal, sizesPx.map(x => x.node), vector, index, force);
+                    do {
+                        const fractionSizePx = getFractionSizePx(beforeDeltaPx, fractionCount);
+                        fractionCount = 0;
+                        for (const i of indexes(vector, index)) {
+                            const child = sizesPx[i].node;
+                            const initialSizePx = sizesPx[i].sizePx;
+                            const g = isHorizontal ? ((_a = child.element.stretchingStrengthX) !== null && _a !== void 0 ? _a : 0) : ((_b = child.element.stretchingStrengthY) !== null && _b !== void 0 ? _b : 0);
+                            const growth = g > 0 ? g : (force ? 1 : 0);
+                            if (growth > 0)
+                                lastGrowingElementIndex = i;
+                            const appendagePx = growth * fractionSizePx;
+                            const newSizePx = initialSizePx + appendagePx;
+                            let flooredNewSizePx = Math.floor(newSizePx * devicePixelRatio) / devicePixelRatio;
+                            runningReminderPx += newSizePx - flooredNewSizePx;
+                            if (runningReminderPx >= res) {
+                                runningReminderPx -= res;
+                                flooredNewSizePx += res;
+                            }
+                            const size = isHorizontal ? sizesPx[i].node.element.widthPx : sizesPx[i].node.element.heightPx;
+                            const sizePx = clamp(flooredNewSizePx, size.minPx, size.maxPx);
+                            console.log(`[${i}]: min = ${size.minPx}, max = ${size.maxPx}, growth = ${growth}, flooredNewSizePx = ${flooredNewSizePx}, size = ${sizePx} px`);
+                            beforeDeltaPx -= sizePx - initialSizePx;
+                            sizesPx[i].sizePx = sizePx;
+                            if (sizesPx[i].sizePx > size.minPx && sizesPx[i].sizePx < size.maxPx) {
+                                fractionCount += growth;
+                            }
+                        }
+                    } while (beforeDeltaPx > 0 && fractionCount > 0 && Math.abs(beforeDeltaPx) >= devicePixelRatio);
+                    if (Math.abs(beforeDeltaPx) < devicePixelRatio) {
+                        break;
+                    }
+                }
+                if (hasAfter) {
+                    let runningReminderPx = 0;
+                    let afterDeltaPx = clampedDeltaPx;
+                    for (let priority = 0; priority < priorities.length; priority++) {
+                        const vector = priorities[priority];
+                        let fractionCount = getFractionCount(isHorizontal, sizesPx.map(x => x.node), vector, -index, force);
+                        do {
+                            const fractionSizePx = getFractionSizePx(afterDeltaPx, fractionCount);
+                            fractionCount = 0;
+                            for (const i of indexes(vector, -index)) {
+                                const child = sizesPx[i].node;
+                                const initialSizePx = sizesPx[i].sizePx;
+                                const g = isHorizontal ? ((_c = child.element.stretchingStrengthX) !== null && _c !== void 0 ? _c : 0) : ((_d = child.element.stretchingStrengthY) !== null && _d !== void 0 ? _d : 0);
+                                const growth = g > 0 ? g : (force ? 1 : 0);
+                                if (growth > 0)
+                                    lastGrowingElementIndex = i;
+                                const appendagePx = growth * fractionSizePx;
+                                const newSizePx = initialSizePx - appendagePx;
+                                let flooredNewSizePx = Math.floor(newSizePx * devicePixelRatio) / devicePixelRatio;
+                                runningReminderPx += newSizePx - flooredNewSizePx;
+                                if (runningReminderPx >= res) {
+                                    runningReminderPx -= res;
+                                    flooredNewSizePx += res;
+                                }
+                                const size = isHorizontal ? sizesPx[i].node.element.widthPx : sizesPx[i].node.element.heightPx;
+                                const sizePx = clamp(flooredNewSizePx, size.minPx, size.maxPx);
+                                afterDeltaPx += sizePx - initialSizePx;
+                                sizesPx[i].sizePx = sizePx;
+                                if (sizesPx[i].sizePx > size.minPx && sizesPx[i].sizePx < size.maxPx) {
+                                    fractionCount += growth;
+                                }
+                            }
+                        } while (afterDeltaPx > 0 && fractionCount > 0 && Math.abs(containerSizePx - sizesPx.reduce((p, c) => p + c.sizePx, 0)) >= devicePixelRatio);
+                        if (Math.abs(containerSizePx - sizesPx.reduce((p, c) => p + c.sizePx, 0)) < devicePixelRatio) {
+                            break;
+                        }
+                    }
+                }
+                if (lastGrowingElementIndex !== undefined) {
+                }
+            }
+        }
+    }
+    for (let i = 0; i < sizesPx.length; i++) {
+        const el = sizesPx[i].node.element;
+        if (el.layoutInfo === undefined)
+            el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+        el.layoutInfo.effectiveSizePx = sizesPx[i].sizePx;
+        console.log(`[${i}]: set size = ${sizesPx[i].sizePx}px`);
+    }
+}
+export function layout(splitViewNode) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const isHorizontal = splitViewNode.element.splitView === SplitView.horizontal;
+    let posPx = 0;
+    const sizesPx = [];
+    const offsetXpx = (_b = (_a = splitViewNode.element.layoutInfo) === null || _a === void 0 ? void 0 : _a.offsetXpx) !== null && _b !== void 0 ? _b : 0;
+    const offsetYpx = (_d = (_c = splitViewNode.element.layoutInfo) === null || _c === void 0 ? void 0 : _c.offsetYpx) !== null && _d !== void 0 ? _d : 0;
+    for (const item of splitViewNode.children.items()) {
+        const child = item.instance;
+        if (isSplitViewPartition(child.driver)) {
+            const el = child.element;
+            if (el.native !== undefined) {
+                posPx += (_f = (_e = el.layoutInfo) === null || _e === void 0 ? void 0 : _e.effectiveSizePx) !== null && _f !== void 0 ? _f : 0;
+                sizesPx.push((_h = (_g = el.layoutInfo) === null || _g === void 0 ? void 0 : _g.effectiveSizePx) !== null && _h !== void 0 ? _h : 0);
+            }
+        }
+        else if (child.driver === Drivers.splitter) {
+            const el = child.element;
+            if (el.native !== undefined) {
+                if (isHorizontal)
+                    el.style.left = `${offsetXpx + posPx}px`;
+                else
+                    el.style.top = `${offsetYpx + posPx}px`;
+            }
+        }
+    }
+    const wrapper = (_j = splitViewNode.children.firstMergedItem()) === null || _j === void 0 ? void 0 : _j.instance;
+    if (wrapper !== undefined) {
+        if (isHorizontal)
+            wrapper.element.style.gridTemplateColumns = sizesPx.map(x => `${x}px`).join(" ");
+        else
+            wrapper.element.style.gridTemplateRows = sizesPx.map(x => `${x}px`).join(" ");
+    }
+}
+export function getPrioritiesForSplitter(index, size) {
+    const result = [];
+    let i = index - 1;
+    let j = index;
+    while (i >= 0 || j < size) {
+        if (i >= 0 && j < size) {
+            result.push((1 << i--) | (1 << j++));
+        }
+        else if (i >= 0) {
+            result.push(1 << i--);
+        }
+        else {
+            result.push(1 << j++);
+        }
+    }
+    return result;
+}
+export function getPrioritiesForSizeChanging(item, children) {
+    const result = [];
+    let i = 0;
+    let changedItemIndex = -1;
+    for (const child of children.items()) {
+        if (isSplitViewPartition(child.instance.driver)) {
+            if (child !== item)
+                result.push(1 << i);
+            else
+                changedItemIndex = i;
+            i++;
+        }
+    }
+    if (changedItemIndex !== -1)
+        result.push(1 << changedItemIndex);
+    return result;
+}
+export function getPrioritiesForEmptySpaceDistribution(children) {
+    let result = 0;
+    let i = 0;
+    for (const child of children.items()) {
+        if (isSplitViewPartition(child.instance.driver))
+            result |= 1 << i++;
+    }
+    return [result];
+}
+function getFractionCount(isHorizontal, children, vector, index, force = false) {
+    var _a;
+    let result = 0;
+    for (const i of indexes(vector, index)) {
+        const growth = (_a = (isHorizontal ? children[i].element.stretchingStrengthX : children[i].element.stretchingStrengthY)) !== null && _a !== void 0 ? _a : 0;
+        result += growth > 0 ? growth : (force ? 1 : 0);
+    }
+    return result;
+}
+function getFractionSizePx(spacePx, fractionCount) {
+    return fractionCount > 0 ? spacePx / fractionCount : 0;
+}
+function* indexes(vector, index) {
+    let i = 0;
+    if (index < 0) {
+        i = -index;
+        vector >>>= i;
+        while (vector > 0) {
+            if (vector & 1) {
+                yield i;
+            }
+            vector >>>= 1;
+            i++;
+        }
+    }
+    else {
+        while (i < index) {
+            if (vector & 1) {
+                yield i;
+            }
+            vector >>>= 1;
+            i++;
+        }
+    }
+}

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

@@ -5,6 +5,7 @@ export * from "./HtmlElements.js";
 export * from "./HtmlApiExt.js";
 export * from "./Elements.js";
 export * from "./Handlers.js";
+export * from "./Sizes.js";
 export * from "./sensors/Sensor.js";
 export * from "./sensors/PointerSensor.js";
 export * from "./sensors/BasePointerSensor.js";

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

@@ -5,6 +5,7 @@ export * from "./HtmlElements.js";
 export * from "./HtmlApiExt.js";
 export * from "./Elements.js";
 export * from "./Handlers.js";
+export * from "./Sizes.js";
 export * from "./sensors/Sensor.js";
 export * from "./sensors/PointerSensor.js";
 export * from "./sensors/BasePointerSensor.js";

package/build/dist/source/html/sensors/PointerSensor.js

@@ -64,6 +64,8 @@ export class PointerSensor extends BasePointerSensor {
         }
     }
     onPointerDown(e) {
+        var _a;
+        (_a = this.sourceElement) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
         const button = extractPointerButton(e);
         if (!this.dragStarted && this.clickable === undefined &&
             (button === PointerButton.left || button === PointerButton.right)) {
@@ -97,6 +99,8 @@ export class PointerSensor extends BasePointerSensor {
         }
     }
     onPointerUp(e) {
+        var _a;
+        (_a = this.sourceElement) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
         if (this.draggingOver) {
             this.drop(e);
             this.finishDragging();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verstak",
-  "version": "0.24.269",
+  "version": "0.24.270",
   "description": "Verstak - Front-End Library",
   "publisher": "Nezaboodka Software",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
   },
   "homepage": "https://github.com/nezaboodka/verstak/blob/master/README.md#readme",
   "dependencies": {
-    "reactronic": "^0.24.268"
+    "reactronic": "^0.24.270"
   },
   "devDependencies": {
     "@types/node": "20.11.17",