verstak 0.24.268 → 0.24.270

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.268",
+  "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.265"
+    "reactronic": "^0.24.270"
   },
   "devDependencies": {
     "@types/node": "20.11.17",