verstak 0.24.270 → 0.24.272

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

@@ -1,31 +1,49 @@
-import { ElLayoutInfo, InitialElLayoutInfo, SplitView } from "./El.js";
-import { clamp } from "./ElUtils.js";
+import { ElLayoutInfo, InitialElLayoutInfo, Direction } 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.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);
+    const containerSizePx = splitViewNode.element.splitView === Direction.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, sizesPx) {
+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.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);
+    const containerSizePx = splitViewNode.element.splitView === Direction.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, containerSizePx, deltaPx, index, priorities, sizesPx, force = false) {
-    var _a, _b, _c, _d;
-    const isHorizontal = splitViewNode.element.splitView === SplitView.horizontal;
+export function resizeUsingDelta(splitViewNode, deltaPx, index, priorities, sizesPx, force = false) {
+    const isHorizontal = splitViewNode.element.splitView === Direction.horizontal;
+    let beforeDeltaPx = 0;
     if (sizesPx.length > 0 && deltaPx !== 0) {
         let minBeforeDeltaPx = 0;
         let maxBeforeDeltaPx = 0;
@@ -45,93 +63,16 @@ export function resizeUsingDelta(splitViewNode, containerSizePx, deltaPx, index,
         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) => {
+        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: 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)})`);
+        }).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) {
-            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) {
-                }
-            }
+            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++) {
@@ -139,28 +80,58 @@ export function resizeUsingDelta(splitViewNode, containerSizePx, deltaPx, index,
         if (el.layoutInfo === undefined)
             el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
         el.layoutInfo.effectiveSizePx = sizesPx[i].sizePx;
-        console.log(`[${i}]: set size = ${sizesPx[i].sizePx}px`);
+        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, _j;
-    const isHorizontal = splitViewNode.element.splitView === SplitView.horizontal;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const isHorizontal = splitViewNode.element.splitView === Direction.horizontal;
     let posPx = 0;
+    let shrinkBefore = false;
+    let growBefore = false;
+    let isSplitterEnabled = false;
     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;
+    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) {
-                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);
+                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
@@ -168,12 +139,23 @@ export function layout(splitViewNode) {
             }
         }
     }
-    const wrapper = (_j = splitViewNode.children.firstMergedItem()) === null || _j === void 0 ? void 0 : _j.instance;
+    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) {
@@ -193,37 +175,56 @@ export function getPrioritiesForSplitter(index, size) {
     }
     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);
+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
-                changedItemIndex = i;
-            i++;
+                manuallyResizable.push(1 << i);
         }
     }
-    if (changedItemIndex !== -1)
-        result.push(1 << changedItemIndex);
-    return result;
+    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(children) {
-    let result = 0;
+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))
-            result |= 1 << i++;
+        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 [result];
+    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 : 0;
+        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;
@@ -254,3 +255,69 @@ function* indexes(vector, index) {
         }
     }
 }
+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

@@ -6,6 +6,7 @@ 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

@@ -6,6 +6,7 @@ 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/BasePointerSensor.d.ts

@@ -1,4 +1,3 @@
-import { FocusSensor } from "./FocusSensor.js";
 import { HtmlElementSensor } from "./HtmlElementSensor.js";
 import { KeyboardModifiers } from "./KeyboardSensor.js";
 import { WindowSensor } from "./WindowSensor.js";
@@ -12,7 +11,7 @@ export declare class BasePointerSensor extends HtmlElementSensor {
     positionX: number;
     positionY: number;
     modifiers: KeyboardModifiers;
-    constructor(element: HTMLElement | SVGElement, focusSensor?: FocusSensor, windowSensor?: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, windowSensor?: WindowSensor);
 }
 export declare function extractPointerButton(e: MouseEvent): PointerButton;
 export declare function isPointerButtonDown(button: PointerButton, buttonsMask: number): boolean;

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

@@ -8,8 +8,8 @@ export var PointerButton;
     PointerButton[PointerButton["middle"] = 4] = "middle";
 })(PointerButton || (PointerButton = {}));
 export class BasePointerSensor extends HtmlElementSensor {
-    constructor(element, focusSensor, windowSensor) {
-        super(element, focusSensor, windowSensor);
+    constructor(element, windowSensor) {
+        super(element, windowSensor);
         this.positionX = Infinity;
         this.positionY = Infinity;
         this.modifiers = KeyboardModifiers.none;

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

@@ -1,5 +1,4 @@
 import { PointerButton, BasePointerSensor } from "./BasePointerSensor.js";
-import { FocusSensor } from "./FocusSensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 export declare enum ButtonState {
     pressed = 0,
@@ -15,7 +14,7 @@ export declare class ButtonSensor extends BasePointerSensor {
     selectedX: number;
     selectedY: number;
     selected: boolean;
-    constructor(element: HTMLElement | SVGElement, focusSensor: FocusSensor, windowSensor: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, windowSensor: WindowSensor);
     listen(enabled?: boolean): void;
     protected onPointerDown(e: PointerEvent): void;
     protected onPointerMove(e: PointerEvent): void;

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

@@ -19,8 +19,8 @@ export var ButtonState;
     ButtonState[ButtonState["released"] = 3] = "released";
 })(ButtonState || (ButtonState = {}));
 export class ButtonSensor extends BasePointerSensor {
-    constructor(element, focusSensor, windowSensor) {
-        super(element, focusSensor, windowSensor);
+    constructor(element, windowSensor) {
+        super(element, windowSensor);
         this.state = ButtonState.released;
         this.pointerButton = PointerButton.none;
         this.originData = undefined;

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

@@ -2,6 +2,7 @@ export type DataForSensor = {
     context?: unknown;
     window?: unknown;
     focus?: unknown;
+    catchChildrenFocus?: boolean;
     hover?: unknown;
     keyboard?: unknown;
     click?: unknown;

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

@@ -43,8 +43,8 @@ export function grabElementDataList(targetPath, sym, payloadKey, existing, ignor
         if (candidateData !== undefined) {
             if (!ignoreWindow) {
                 if (window === undefined)
-                    window = candidateData["window"];
-                else if (window !== candidateData["window"])
+                    window = candidateData.window;
+                else if (window !== candidateData.window)
                     break;
             }
             payload = candidateData[payloadKey];
@@ -62,7 +62,7 @@ export function grabElementDataList(targetPath, sym, payloadKey, existing, ignor
                 }
             }
         }
-        if (activeData === undefined && predicate(candidate)) {
+        if (payloadKey === "focus" && activeData === undefined && (predicate(candidate) || (candidateData === null || candidateData === void 0 ? void 0 : candidateData.catchChildrenFocus))) {
             activeData = payload;
         }
         i++;

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

@@ -13,7 +13,7 @@ import { grabElementDataList, SymDataForSensor } from "./DataForSensor.js";
 import { HtmlElementSensor } from "./HtmlElementSensor.js";
 export class FocusSensor extends HtmlElementSensor {
     constructor(element, windowSensor) {
-        super(element, undefined, windowSensor);
+        super(element, windowSensor);
         this.activeData = undefined;
         this.oldActiveData = undefined;
         this.contextElementDataList = [];

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

@@ -1,4 +1,3 @@
-import { FocusSensor } from "./FocusSensor.js";
 import { HtmlElementSensor } from "./HtmlElementSensor.js";
 import { KeyboardModifiers } from "./KeyboardSensor.js";
 import { WindowSensor } from "./WindowSensor.js";
@@ -33,7 +32,7 @@ export declare class HtmlDragSensor extends HtmlElementSensor {
     immediatePositionX: number;
     immediatePositionY: number;
     immediateModifiers: KeyboardModifiers;
-    constructor(element: HTMLElement | SVGElement, focusSensor: FocusSensor, windowSensor: WindowSensor);
+    constructor(element: HTMLElement | SVGElement, windowSensor: WindowSensor);
     getData(format: string): unknown;
     setData(format: string, value: unknown): void;
     clearData(format?: string): void;

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

@@ -12,8 +12,8 @@ import { findTargetElementData, SymDataForSensor } from "./DataForSensor.js";
 import { HtmlElementSensor } from "./HtmlElementSensor.js";
 import { extractModifierKeys, KeyboardModifiers } from "./KeyboardSensor.js";
 export class HtmlDragSensor extends HtmlElementSensor {
-    constructor(element, focusSensor, windowSensor) {
-        super(element, focusSensor, windowSensor);
+    constructor(element, windowSensor) {
+        super(element, windowSensor);
         this.draggable = undefined;
         this.dragSource = undefined;
         this.dragTarget = undefined;

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

@@ -3,11 +3,10 @@ import { Sensor } from "./Sensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 export declare class HtmlElementSensor extends Sensor {
     readonly sourceElement: HTMLElement | SVGElement;
-    readonly focusSensor?: any;
     readonly windowSensor?: WindowSensor;
     preventDefault: boolean;
     stopPropagation: boolean;
-    constructor(sourceElement: HTMLElement | SVGElement, focusSensor?: any, windowSensor?: WindowSensor);
+    constructor(sourceElement: HTMLElement | SVGElement, windowSensor?: WindowSensor);
     protected getDefaultSensorData(): DataForSensor;
     protected setPreventDefaultAndStopPropagation(e: Event): void;
 }

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

@@ -12,10 +12,9 @@ import { SymDataForSensor } from "./DataForSensor.js";
 import { Sensor } from "./Sensor.js";
 import { WindowSensor } from "./WindowSensor.js";
 export class HtmlElementSensor extends Sensor {
-    constructor(sourceElement, focusSensor, windowSensor) {
+    constructor(sourceElement, windowSensor) {
         super();
         this.sourceElement = sourceElement;
-        this.focusSensor = focusSensor;
         this.windowSensor = windowSensor;
         this.preventDefault = false;
         this.stopPropagation = false;
@@ -38,10 +37,6 @@ __decorate([
     raw,
     __metadata("design:type", Object)
 ], HtmlElementSensor.prototype, "sourceElement", void 0);
-__decorate([
-    raw,
-    __metadata("design:type", Object)
-], HtmlElementSensor.prototype, "focusSensor", void 0);
 __decorate([
     raw,
     __metadata("design:type", WindowSensor)

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

@@ -58,21 +58,21 @@ export class HtmlSensors {
     }
     get htmlDrag() {
         if (this._htmlDrag === undefined) {
-            this._htmlDrag = new HtmlDragSensor(this._element, this.focus, this.window);
+            this._htmlDrag = new HtmlDragSensor(this._element, this.window);
             this._htmlDrag.listen();
         }
         return this._htmlDrag;
     }
     get button() {
         if (this._button === undefined) {
-            this._button = new ButtonSensor(this._element, this.focus, this.window);
+            this._button = new ButtonSensor(this._element, this.window);
             this._button.listen();
         }
         return this._button;
     }
     get pointer() {
         if (this._pointer === undefined) {
-            this._pointer = new PointerSensor(this._element, this.focus, this.window);
+            this._pointer = new PointerSensor(this._element, this.window);
             this._pointer.listen();
         }
         return this._pointer;

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 = "";