verstak 0.24.270 → 0.24.272

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

@@ -1,9 +1,8 @@
-import { RxNode, Mode } from "reactronic";
-import { Constants, CursorCommandDriver, ElKind, ElDriver, SplitView, ElLayoutInfo, InitialElLayoutInfo } from "./El.js";
-import { getPrioritiesForEmptySpaceDistribution, relayout, relayoutUsingSplitter } from "./SplitViewMath.js";
+import { RxNode, Mode, unobs } from "reactronic";
+import { Constants, CursorCommandDriver, ElKind, ElDriver, Direction, ElLayoutInfo, InitialElLayoutInfo } from "./El.js";
+import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, relayout, relayoutUsingSplitter } from "./SplitViewMath.js";
 import { Axis, BodyFontSize, Dimension, toPx } from "./Sizes.js";
 import { HtmlDriver } from "./HtmlDriver.js";
-import { OnResize } from "./Handlers.js";
 import { clamp } from "./ElUtils.js";
 export function Section(declaration, preset) {
     return RxNode.declare(Drivers.section, declaration, preset);
@@ -35,6 +34,7 @@ export function declareSplitter(index, splitViewNode) {
     return (Splitter({
         key,
         mode: Mode.independentUpdate,
+        onCreate: el => el.native.className = `splitter ${key}`,
         onChange: b => {
             const e = b.native;
             const model = b.model;
@@ -49,13 +49,13 @@ export function declareSplitter(index, splitViewNode) {
                         if (pointer.draggingOver) {
                             pointer.dropAllowed = true;
                             const initialSizesPx = pointer.getData();
-                            const deltaPx = Math.floor(splitViewNode.element.splitView === SplitView.horizontal
+                            const deltaPx = Math.floor(splitViewNode.element.splitView === Direction.horizontal
                                 ? pointer.positionX - pointer.startX : pointer.positionY - pointer.startY);
                             const clonedSizesPx = [];
                             for (const item of initialSizesPx) {
                                 clonedSizesPx.push({ node: item.node, sizePx: item.sizePx });
                             }
-                            relayoutUsingSplitter(splitViewNode, deltaPx, index, clonedSizesPx);
+                            unobs(() => relayoutUsingSplitter(splitViewNode, deltaPx, index, clonedSizesPx));
                             if (pointer.dropped) {
                                 (_a = model === null || model === void 0 ? void 0 : model.droppedAction) === null || _a === void 0 ? void 0 : _a.call(model, pointer);
                             }
@@ -70,7 +70,6 @@ export function declareSplitter(index, splitViewNode) {
                                     initialSizesPx.push({ node: child, sizePx });
                                 }
                             }
-                            console.log("initial", initialSizesPx.map(x => x.sizePx).join(", "));
                             pointer.setData(initialSizesPx);
                         }
                         if (pointer.dragFinished) {
@@ -114,55 +113,103 @@ export class SectionDriver extends HtmlDriver {
         rowBreak();
         const result = super.update(node);
         const el = node.element;
-        if (el.splitView !== undefined) {
-            const native = el.native;
-            OnResize(native, x => {
-                var _a;
-                if (el.layoutInfo === undefined)
-                    el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
-                const rect = x.contentRect;
-                const contentBoxPx = x.contentBoxSize[0];
-                const containerSizeXpx = contentBoxPx.inlineSize;
-                const containerSizeYpx = contentBoxPx.blockSize;
-                el.layoutInfo.offsetXpx = rect.left;
-                el.layoutInfo.offsetYpx = rect.top;
-                el.layoutInfo.containerSizeXpx = containerSizeXpx;
-                el.layoutInfo.containerSizeYpx = containerSizeYpx;
-                const isHorizontal = el.splitView === SplitView.horizontal;
-                const wrapper = (_a = node.children.firstMergedItem()) === null || _a === void 0 ? void 0 : _a.instance;
-                if (wrapper !== undefined) {
-                    const wrapperEl = wrapper.element;
-                    if (isHorizontal)
-                        wrapperEl.style.width = wrapperEl.style.maxWidth = `${containerSizeXpx}px`;
-                    else {
-                        wrapperEl.style.height = wrapperEl.style.maxHeight = `${containerSizeYpx}px`;
+        if (el.sealed !== undefined) {
+            Handling(h => {
+                var _a, _b;
+                const native = el.native;
+                const resize = native.sensors.resize;
+                const isHorizontal = el.sealed === Direction.horizontal;
+                for (const x of resize.resizedElements) {
+                    if (el.layoutInfo === undefined)
+                        el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+                    const rect = x.contentRect;
+                    const contentBoxPx = x.contentBoxSize[0];
+                    const containerSizeXpx = contentBoxPx.inlineSize;
+                    const containerSizeYpx = contentBoxPx.blockSize;
+                    el.layoutInfo.offsetXpx = rect.left;
+                    el.layoutInfo.offsetYpx = rect.top;
+                    el.layoutInfo.contentSizeXpx = containerSizeXpx;
+                    el.layoutInfo.contentSizeYpx = containerSizeYpx;
+                    el.layoutInfo.borderSizeXpx = x.borderBoxSize[0].inlineSize;
+                    el.layoutInfo.borderSizeYpx = x.borderBoxSize[0].blockSize;
+                    const wrapper = (_a = node.children.firstMergedItem()) === null || _a === void 0 ? void 0 : _a.instance;
+                    if (wrapper !== undefined) {
+                        const wrapperEl = wrapper.element;
+                        el.layoutInfo.isConstrained = true;
+                        if (isHorizontal)
+                            wrapperEl.style.width = wrapperEl.style.maxWidth = `${containerSizeXpx}px`;
+                        else
+                            wrapperEl.style.height = wrapperEl.style.maxHeight = `${containerSizeYpx}px`;
                     }
                 }
-                const surroundingXpx = x.borderBoxSize[0].inlineSize - containerSizeXpx;
-                const surroundingYpx = x.borderBoxSize[0].blockSize - containerSizeYpx;
-                const sizesPx = [];
-                for (const child of node.children.items()) {
-                    const partEl = child.instance.element;
-                    if (isSplitViewPartition(child.instance.driver) && partEl !== undefined) {
-                        const size = isHorizontal ? partEl.width : partEl.height;
-                        const options = {
-                            axis: isHorizontal ? Axis.X : Axis.Y, lineSizePx: Dimension.lineSizePx, fontSizePx: BodyFontSize,
-                            containerSizeXpx: native.scrollWidth - surroundingXpx, containerSizeYpx: native.scrollHeight - surroundingYpx,
-                        };
-                        const minPx = size.min ? toPx(Dimension.parse(size.min), options) : 0;
-                        let maxPx = size.max ? toPx(Dimension.parse(size.max), options) : Number.POSITIVE_INFINITY;
-                        maxPx = Math.max(minPx, maxPx);
-                        if (partEl.layoutInfo === undefined)
-                            partEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+                if (h.node.stamp === 1) {
+                    const wrapper = (_b = node.children.firstMergedItem()) === null || _b === void 0 ? void 0 : _b.instance;
+                    if (wrapper !== undefined) {
+                        const wrapperEl = wrapper.element;
                         if (isHorizontal)
-                            partEl.widthPx = { minPx, maxPx };
+                            wrapperEl.style.width = wrapperEl.style.maxWidth = "0px";
                         else
-                            partEl.heightPx = { minPx, maxPx };
-                        const sizePx = partEl.layoutInfo.effectiveSizePx = clamp(partEl.layoutInfo.effectiveSizePx, minPx, maxPx);
-                        sizesPx.push({ node: child.instance, sizePx });
+                            wrapperEl.style.height = wrapperEl.style.maxHeight = "0px";
                     }
                 }
-                relayout(node, getPrioritiesForEmptySpaceDistribution(node.children), sizesPx);
+            });
+        }
+        if (el.splitView !== undefined) {
+            SyntheticElement({
+                mode: Mode.independentUpdate,
+                triggers: { count: el.node.stamp },
+                onChange: () => {
+                    const native = el.native;
+                    const isHorizontal = el.splitView === Direction.horizontal;
+                    if (el.layoutInfo === undefined)
+                        el.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+                    if (el.layoutInfo.isConstrained) {
+                        const surroundingXpx = el.layoutInfo.borderSizeXpx - el.layoutInfo.contentSizeXpx;
+                        const surroundingYpx = el.layoutInfo.borderSizeYpx - el.layoutInfo.contentSizeYpx;
+                        let i = 0;
+                        const preferred = [];
+                        const sizesPx = [];
+                        for (const child of node.children.items()) {
+                            const partEl = child.instance.element;
+                            if (isSplitViewPartition(child.instance.driver) && partEl !== undefined) {
+                                const size = isHorizontal ? partEl.width : partEl.height;
+                                const options = {
+                                    axis: isHorizontal ? Axis.X : Axis.Y, lineSizePx: BodyFontSize, fontSizePx: BodyFontSize,
+                                    containerSizeXpx: native.scrollWidth - surroundingXpx, containerSizeYpx: native.scrollHeight - surroundingYpx,
+                                };
+                                const minPx = size.min ? toPx(Dimension.parse(size.min), options) : 0;
+                                let maxPx = size.max ? toPx(Dimension.parse(size.max), options) : Number.POSITIVE_INFINITY;
+                                maxPx = Math.max(minPx, maxPx);
+                                if (partEl.layoutInfo === undefined)
+                                    partEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
+                                if (isHorizontal)
+                                    partEl.widthPx = { minPx, maxPx };
+                                else
+                                    partEl.heightPx = { minPx, maxPx };
+                                const preferredUsed = isHorizontal ? partEl.preferredWidthUsed : partEl.preferredHeightUsed;
+                                let preferredPx = 0;
+                                if (!preferredUsed) {
+                                    preferredPx = size.preferred ? toPx(Dimension.parse(size.preferred), options) : 0;
+                                    if (preferredPx > 0) {
+                                        partEl.layoutInfo.effectiveSizePx = preferredPx;
+                                        preferred.push(i);
+                                    }
+                                    if (isHorizontal)
+                                        partEl.preferredWidthUsed = true;
+                                    else
+                                        partEl.preferredHeightUsed = true;
+                                }
+                                const sizePx = partEl.layoutInfo.effectiveSizePx = clamp(partEl.layoutInfo.effectiveSizePx, minPx, maxPx);
+                                sizesPx.push({ node: child.instance, sizePx });
+                                i++;
+                            }
+                        }
+                        const priorities = preferred.length > 0
+                            ? getPrioritiesForSizeChanging(isHorizontal, node.children, preferred)
+                            : getPrioritiesForEmptySpaceDistribution(isHorizontal, node.children);
+                        unobs(() => relayout(node, priorities.resizable, priorities.manuallyResizable, sizesPx));
+                    }
+                },
             });
         }
         return result;
@@ -171,25 +218,28 @@ export class SectionDriver extends HtmlDriver {
         var _a;
         let result = undefined;
         const el = ownerNode.element;
-        if (el.splitView !== undefined && isSplitViewPartition(childDriver)) {
-            let partCount = 0;
-            for (const child of ownerNode.children.items()) {
-                if (isSplitViewPartition(child.instance.driver))
-                    partCount++;
-            }
-            const isHorizontal = el.splitView === SplitView.horizontal;
-            if (childDeclaration !== undefined) {
-                const onCreate = childDeclaration.onCreate;
-                childDeclaration.onCreate = (el, basis) => {
-                    onCreate === null || onCreate === void 0 ? void 0 : onCreate(el, basis);
-                    if (isHorizontal)
-                        el.style.gridColumn = `${partCount + 1}`;
-                    else
-                        el.style.gridRow = `${partCount + 1}`;
-                };
+        if (el.splitView !== undefined) {
+            if (isSplitViewPartition(childDriver)) {
+                let partCount = 0;
+                for (const child of ownerNode.children.items()) {
+                    if (isSplitViewPartition(child.instance.driver))
+                        partCount++;
+                }
+                const isHorizontal = el.splitView === Direction.horizontal;
+                if (childDeclaration !== undefined) {
+                    if (childDeclaration.triggers === undefined)
+                        childDeclaration.triggers = {};
+                    Object.defineProperty(childDeclaration.triggers, "index", { value: partCount });
+                    overrideMethod(childDeclaration, "onChange", el => {
+                        if (isHorizontal)
+                            el.style.gridColumn = `${partCount + 1}`;
+                        else
+                            el.style.gridRow = `${partCount + 1}`;
+                    });
+                }
+                if (partCount > 0)
+                    declareSplitter(partCount - 1, ownerNode);
             }
-            if (partCount > 0)
-                declareSplitter(partCount - 1, ownerNode);
         }
         else {
             if (childDriver.isPartition) {
@@ -204,6 +254,12 @@ export class SectionDriver extends HtmlDriver {
 export function isSplitViewPartition(childDriver) {
     return !childDriver.isPartition && childDriver !== Drivers.splitter && childDriver !== Drivers.synthetic;
 }
+function overrideMethod(declaration, method, func) {
+    const baseOnChange = declaration[method];
+    declaration[method] = baseOnChange !== undefined
+        ? (el, base) => { baseOnChange(el, base); func(el); }
+        : (el, base) => { base(); func(el); };
+}
 export const Drivers = {
     section: new SectionDriver(Constants.element, false, el => el.kind = ElKind.section),
     table: new HtmlDriver(Constants.element, false, el => el.kind = ElKind.table),

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

@@ -3,4 +3,4 @@ import { FocusModel } from "./sensors/FocusSensor.js";
 import { ResizedElement } from "./sensors/ResizeSensor.js";
 export declare function OnClick(target: HTMLElement, action: (() => void) | ToggleRef | undefined, key?: string): void;
 export declare function OnResize(target: HTMLElement, action: ((element: ResizedElement) => void) | undefined, key?: string): void;
-export declare function OnFocus(target: HTMLElement, model: FocusModel, switchEditMode?: ((model?: FocusModel) => void) | undefined, key?: string): void;
+export declare function OnFocus(target: HTMLElement, model: FocusModel, switchEditMode?: ((model: FocusModel) => void) | undefined, key?: string): void;

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

@@ -44,6 +44,8 @@ export function OnFocus(target, model, switchEditMode = undefined, key) {
             el.node.configureReactronic({ throttling: 0 });
         },
         onChange: el => {
+            if (switchEditMode === undefined && !target.hasAttribute("tabindex"))
+                console.warn(`"${key !== null && key !== void 0 ? key : "noname"}" element must have "tabindex" attribute set in order to be focusable`);
             if (switchEditMode !== undefined) {
                 switchEditMode(model);
             }

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

@@ -1,18 +1,27 @@
-import { MergeList, MergedItem, RxNode } from "reactronic";
+import { MergeList, RxNode } from "reactronic";
 import { ElImpl } from "./El.js";
+export declare function equal(a: number, b: number): boolean;
+export declare function less(a: number, b: number): boolean;
+export declare function greater(a: number, b: number): boolean;
 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<{
+export declare function relayout(splitViewNode: RxNode<ElImpl>, priorities: ReadonlyArray<number>, manuallyResizablePriorities: 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<{
+export declare function resizeUsingDelta(splitViewNode: RxNode<ElImpl>, deltaPx: number, index: number, priorities: ReadonlyArray<number>, sizesPx: Array<{
     node: RxNode<ElImpl>;
     sizePx: number;
-}>, force?: boolean): void;
+}>, force?: boolean): number;
 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>;
+export declare function getPrioritiesForSizeChanging(isHorizontal: boolean, children: MergeList<RxNode>, indexes: Array<number>): {
+    resizable: ReadonlyArray<number>;
+    manuallyResizable: ReadonlyArray<number>;
+};
+export declare function getPrioritiesForEmptySpaceDistribution(isHorizontal: boolean, children: MergeList<RxNode>): {
+    resizable: ReadonlyArray<number>;
+    manuallyResizable: ReadonlyArray<number>;
+};