verstak 0.24.269 → 0.24.271

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

@@ -0,0 +1,323 @@
+import { ElLayoutInfo, InitialElLayoutInfo, SplitView } from "./El.js";
+import { Drivers, isSplitViewPartition } from "./Elements.js";
+import { clamp } from "./ElUtils.js";
+const DEBUG = false;
+const eps = 0.0001;
+export function equal(a, b) {
+    return Math.abs(a - b) <= eps;
+}
+export function less(a, b) {
+    return b - a > eps;
+}
+export function greater(a, b) {
+    return a - b > eps;
+}
+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.contentSizeXpx) !== null && _b !== void 0 ? _b : 0
+        : (_d = (_c = splitViewNode.element.layoutInfo) === null || _c === void 0 ? void 0 : _c.contentSizeYpx) !== null && _d !== void 0 ? _d : 0;
+    DEBUG && console.log(`(splitter) delta = ${deltaPx}, container = ${containerSizePx}, size = ${initialSizesPx.reduce((p, c) => p + c.sizePx, 0)}, index = ${index}`);
+    resizeUsingDelta(splitViewNode, deltaPx, index + 1, priorities, initialSizesPx, true);
+    layout(splitViewNode);
+}
+export function relayout(splitViewNode, priorities, manuallyResizablePriorities, 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.contentSizeXpx) !== null && _b !== void 0 ? _b : 0
+        : (_d = (_c = splitViewNode.element.layoutInfo) === null || _c === void 0 ? void 0 : _c.contentSizeYpx) !== null && _d !== void 0 ? _d : 0;
+    const totalSizePx = sizesPx.reduce((p, c) => p + c.sizePx, 0);
+    let deltaPx = containerSizePx - totalSizePx;
+    DEBUG && console.log(printPriorities(priorities, manuallyResizablePriorities), "color: grey", "color:", "color: grey", "color:");
+    DEBUG && console.log(`(relayout) ∆ = ${n(deltaPx)}px, container = ${n(containerSizePx)}px, total = ${totalSizePx}`);
+    deltaPx = resizeUsingDelta(splitViewNode, deltaPx, sizesPx.length, priorities, sizesPx);
+    DEBUG && console.log(`(relayout) ~∆ = ${n(deltaPx)}, container = ${n(containerSizePx, 3)}px, total = ${n(sizesPx.reduce((p, c) => p + c.sizePx, 0), 3)}px`);
+    if (deltaPx < -(1 / devicePixelRatio)) {
+        DEBUG && console.log(`%c${deltaPx}px`, "color: lime");
+        resizeUsingDelta(splitViewNode, deltaPx, sizesPx.length, manuallyResizablePriorities, sizesPx, true);
+    }
+    layout(splitViewNode);
+}
+export function resizeUsingDelta(splitViewNode, deltaPx, index, priorities, sizesPx, force = false) {
+    const isHorizontal = splitViewNode.element.splitView === SplitView.horizontal;
+    let beforeDeltaPx = 0;
+    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);
+        DEBUG && 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: skyblue");
+        DEBUG && console.log(`[%c${Array.from({ length: index }).map((x, i) => i).join(",")}%c | %c${Array.from({ length: Math.max(0, sizesPx.length - index) }).map((x, i) => index + i).join(",")}%c]\n∆ = ${n(minDeltaPx)}px..${n(deltaPx)}px -> %c${n(clampedDeltaPx)}px%c..${n(maxDeltaPx)}px`, "color: #00BB00", "color:", "color: orange", "color:", "color: yellow", "color:");
+        if (clampedDeltaPx !== 0) {
+            if (index > 0)
+                beforeDeltaPx = distribute(1, clampedDeltaPx, index, priorities, sizesPx, isHorizontal, force);
+            if (hasAfter)
+                distribute(-1, clampedDeltaPx, index, priorities, sizesPx, isHorizontal, force);
+        }
+    }
+    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;
+        DEBUG && console.log(`[${i}]: set size = ${n(sizesPx[i].sizePx)}px`);
+    }
+    return beforeDeltaPx;
+}
+export function layout(splitViewNode) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const isHorizontal = splitViewNode.element.splitView === SplitView.horizontal;
+    let posPx = 0;
+    let shrinkBefore = false;
+    let growBefore = false;
+    let isSplitterEnabled = false;
+    const sizesPx = [];
+    const layoutInfo = splitViewNode.element.layoutInfo;
+    const offsetXpx = (_a = layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.offsetXpx) !== null && _a !== void 0 ? _a : 0;
+    const offsetYpx = (_b = layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.offsetYpx) !== null && _b !== void 0 ? _b : 0;
+    for (const item of splitViewNode.children.items()) {
+        const child = item.instance;
+        if (isSplitViewPartition(child.driver)) {
+            const el = child.element;
+            if (el.native !== undefined) {
+                const current = item;
+                const sizePx = isHorizontal ? el.widthPx : el.heightPx;
+                const effectiveSizePx = (_d = (_c = el.layoutInfo) === null || _c === void 0 ? void 0 : _c.effectiveSizePx) !== null && _d !== void 0 ? _d : 0;
+                posPx += effectiveSizePx;
+                sizesPx.push(effectiveSizePx);
+                el.native.setAttribute("rx-max", equal(effectiveSizePx, sizePx.maxPx) ? "true" : "false");
+                el.native.setAttribute("rx-min", equal(effectiveSizePx, sizePx.minPx) ? "true" : "false");
+                shrinkBefore || (shrinkBefore = greater(effectiveSizePx - sizePx.minPx, 0));
+                growBefore || (growBefore = greater(sizePx.maxPx - effectiveSizePx, 0));
+                let shrinkAfter = false;
+                let growAfter = false;
+                for (const item of splitViewNode.children.items(current)) {
+                    const child = item.instance;
+                    if (isSplitViewPartition(child.driver)) {
+                        const el = child.element;
+                        if (el.native !== undefined) {
+                            const sizePx = isHorizontal ? el.widthPx : el.heightPx;
+                            const effectiveSizePx = (_f = (_e = el.layoutInfo) === null || _e === void 0 ? void 0 : _e.effectiveSizePx) !== null && _f !== void 0 ? _f : 0;
+                            shrinkAfter || (shrinkAfter = greater(effectiveSizePx - sizePx.minPx, 0));
+                            growAfter || (growAfter = greater(sizePx.maxPx - effectiveSizePx, 0));
+                            isSplitterEnabled = growBefore && shrinkAfter || growAfter && shrinkBefore;
+                            if (isSplitterEnabled)
+                                break;
+                        }
+                    }
+                }
+            }
+        }
+        else if (child.driver === Drivers.splitter) {
+            const el = child.element;
+            if (el.native !== undefined) {
+                el.style.display = isSplitterEnabled ? "block" : "none";
+                if (isHorizontal)
+                    el.style.left = `${offsetXpx + posPx}px`;
+                else
+                    el.style.top = `${offsetYpx + posPx}px`;
+            }
+        }
+    }
+    const containerSizePx = (_g = (isHorizontal ? layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.contentSizeXpx : layoutInfo === null || layoutInfo === void 0 ? void 0 : layoutInfo.contentSizeYpx)) !== null && _g !== void 0 ? _g : 0;
+    const isOverflowing = greater(posPx, containerSizePx);
+    const wrapper = (_h = splitViewNode.children.firstMergedItem()) === null || _h === void 0 ? void 0 : _h.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(" ");
+        if (isOverflowing) {
+            if (isHorizontal)
+                wrapper.element.style.overflow = "scroll hidden";
+            else
+                wrapper.element.style.overflow = "hidden scroll";
+        }
+        else {
+            wrapper.element.style.overflow = "hidden";
+        }
+    }
+}
+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(isHorizontal, children, indexes) {
+    var _a, _b;
+    const resizable = [];
+    const manuallyResizable = [];
+    const items = Array.from(children.items()).filter(x => isSplitViewPartition(x.instance.driver));
+    for (let i = items.length - 1; i >= 0; i--) {
+        const item = items[i];
+        const el = item.instance.element;
+        const strength = (_a = (isHorizontal ? el.stretchingStrengthX : el.stretchingStrengthY)) !== null && _a !== void 0 ? _a : 1;
+        if (!indexes.includes(i)) {
+            if (strength > 0)
+                resizable.push(1 << i);
+            else
+                manuallyResizable.push(1 << i);
+        }
+    }
+    for (const i of indexes) {
+        const item = items[i];
+        const el = item.instance.element;
+        const strength = (_b = (isHorizontal ? el.stretchingStrengthX : el.stretchingStrengthY)) !== null && _b !== void 0 ? _b : 1;
+        if (strength > 0)
+            resizable.push(1 << i);
+        else
+            manuallyResizable.push(1 << i);
+    }
+    return { resizable, manuallyResizable };
+}
+export function getPrioritiesForEmptySpaceDistribution(isHorizontal, children) {
+    var _a;
+    let r = 0;
+    let mr = 0;
+    let i = 0;
+    for (const child of children.items()) {
+        if (isSplitViewPartition(child.instance.driver)) {
+            const el = child.instance.element;
+            const strength = (_a = (isHorizontal ? el.stretchingStrengthX : el.stretchingStrengthY)) !== null && _a !== void 0 ? _a : 1;
+            if (strength > 0)
+                r |= 1 << i;
+            else
+                mr |= 1 << i;
+            i++;
+        }
+    }
+    return { resizable: [r], manuallyResizable: [mr] };
+}
+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 : 1;
+        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++;
+        }
+    }
+}
+function n(value, fractionDigits = 2) {
+    return value === 0 ? "0" : value.toFixed(fractionDigits);
+}
+function distribute(sign, deltaPx, index, priorities, sizesPx, isHorizontal, force) {
+    var _a, _b;
+    for (let priority = 0; priority < priorities.length; priority++) {
+        const vector = priorities[priority];
+        let fractionCount = getFractionCount(isHorizontal, sizesPx.map(x => x.node), vector, sign * index, force);
+        do {
+            const fractionSizePx = getFractionSizePx(deltaPx, fractionCount);
+            fractionCount = 0;
+            for (const i of indexes(vector, sign * index)) {
+                const child = sizesPx[i].node;
+                const initialSizePx = sizesPx[i].sizePx;
+                const strength = isHorizontal ? ((_a = child.element.stretchingStrengthX) !== null && _a !== void 0 ? _a : 1) : ((_b = child.element.stretchingStrengthY) !== null && _b !== void 0 ? _b : 1);
+                const growth = strength > 0 ? strength : (force ? 1 : 0);
+                const newSizePx = initialSizePx + sign * (growth * fractionSizePx);
+                const size = isHorizontal ? sizesPx[i].node.element.widthPx : sizesPx[i].node.element.heightPx;
+                const sizePx = clamp(newSizePx, size.minPx, size.maxPx);
+                deltaPx = deltaPx - sign * (sizePx - initialSizePx);
+                sizesPx[i].sizePx = sizePx;
+                if (sizesPx[i].sizePx > size.minPx && sizesPx[i].sizePx < size.maxPx) {
+                    fractionCount += growth;
+                }
+            }
+        } while (Math.abs(deltaPx) > eps && fractionCount > 0);
+        if (Math.abs(deltaPx) <= eps) {
+            break;
+        }
+    }
+    return deltaPx;
+}
+function printPriorities(priorities, manuallyResizablePriorities) {
+    let text = "";
+    if (priorities.length > 0) {
+        text += `Automatically Resizable:\n%c(${priorities.map(x => `0x${x.toString(2)}`).join(", ")})%c\n`;
+        for (let i = 0; i < priorities.length; i++) {
+            let vector = priorities[i];
+            const parts = [];
+            let j = 0;
+            while (vector) {
+                if (vector & 1)
+                    parts.push(j);
+                j++;
+                vector >>= 1;
+            }
+            text += `${i}: ${parts.join(", ")}\n`;
+        }
+    }
+    if (manuallyResizablePriorities.length > 0) {
+        text += `Manually Resizable:\n%c(${manuallyResizablePriorities.map(x => `0x${x.toString(2)}`).join(", ")})%c\n`;
+        for (let i = 0; i < manuallyResizablePriorities.length; i++) {
+            let vector = manuallyResizablePriorities[i];
+            const parts = [];
+            let j = 0;
+            while (vector) {
+                if (vector & 1)
+                    parts.push(j);
+                j++;
+                vector >>= 1;
+            }
+            text += `${i}: ${parts.join(", ")}\n`;
+        }
+    }
+    return text;
+}

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

@@ -5,6 +5,8 @@ export * from "./HtmlElements.js";
 export * from "./HtmlApiExt.js";
 export * from "./Elements.js";
 export * from "./Handlers.js";
+export * from "./Sizes.js";
+export * from "./SplitViewMath.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,8 @@ export * from "./HtmlElements.js";
 export * from "./HtmlApiExt.js";
 export * from "./Elements.js";
 export * from "./Handlers.js";
+export * from "./Sizes.js";
+export * from "./SplitViewMath.js";
 export * from "./sensors/Sensor.js";
 export * from "./sensors/PointerSensor.js";
 export * from "./sensors/BasePointerSensor.js";

package/build/dist/source/html/sensors/KeyboardSensor.d.ts

@@ -25,6 +25,7 @@ export declare class KeyboardSensor extends HtmlElementSensor {
     reset(): void;
     protected onKeyDown(e: KeyboardEvent): void;
     protected onKeyUp(e: KeyboardEvent): void;
+    protected doWindowBlur(e: FocusEvent): void;
     protected keyDown(e: KeyboardEvent): void;
     protected keyUp(e: KeyboardEvent): void;
     protected updateSensorData(e: KeyboardEvent): void;

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

@@ -40,10 +40,12 @@ export class KeyboardSensor extends HtmlElementSensor {
         if (enabled) {
             element.addEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
             element.addEventListener("keyup", this.onKeyUp.bind(this), { capture: true });
+            window.addEventListener("blur", this.doWindowBlur.bind(this), { capture: true });
         }
         else {
             element.removeEventListener("keydown", this.onKeyDown.bind(this), { capture: true });
             element.removeEventListener("keyup", this.onKeyUp.bind(this), { capture: true });
+            window.removeEventListener("blur", this.doWindowBlur.bind(this), { capture: true });
         }
     }
     reset() {
@@ -61,6 +63,9 @@ export class KeyboardSensor extends HtmlElementSensor {
         this.keyUp(e);
         this.setPreventDefaultAndStopPropagation(e);
     }
+    doWindowBlur(e) {
+        this.reset();
+    }
     keyDown(e) {
         this.updateSensorData(e);
         this.up = "";

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.271",
   "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",