verstak 0.24.269 → 0.24.271

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

@@ -1,5 +1,6 @@
 import { ElCoords } from "./El.js";
 export declare function objectHasMember<T>(obj: any, member: string): obj is T;
+export declare function clamp(value: number, min: number, max: number): number;
 export declare function emitLetters(n: number): string;
 export declare function parseElCoords(text: string, result: ElCoords): ElCoords;
 export declare function emitElCoords(value: ElCoords): string;

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

@@ -1,6 +1,9 @@
 export function objectHasMember(obj, member) {
     return obj === Object(obj) && !Array.isArray(obj) && member in obj;
 }
+export function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
 export function emitLetters(n) {
     if (n < 0)
         throw new Error(`emitLetters: argument (${n}) should not be negative or zero`);

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

@@ -1,15 +1,29 @@
-import { RxNodeDecl, RxNode, Delegate } from "reactronic";
-import { El, ElArea } from "./El.js";
-import { HtmlElementDriver } from "./HtmlDriver.js";
+import { RxNodeDecl, RxNodeDriver, RxNode, Delegate, MergedItem } from "reactronic";
+import { CursorCommandDriver, El, ElArea } from "./El.js";
+import { HtmlDriver } from "./HtmlDriver.js";
 export declare function Section<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function Table<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function row<T = void>(builder?: (element: void) => T, shiftCursorDown?: number): void;
+export declare function Splitter<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function rowBreak(shiftCursorDown?: number): void;
+export declare function declareSplitter<T>(index: number, splitViewNode: RxNode<El<T>>): RxNode<El<HTMLElement>>;
 export declare function cursor(areaParams: ElArea): void;
 export declare function Note(content: string, formatted?: boolean, declaration?: RxNodeDecl<El<HTMLElement, void>>): RxNode<El<HTMLElement, void>>;
 export declare function Group<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function Handling<M = unknown>(onChange: Delegate<El<void, M>>): RxNode<El<void, M>>;
 export declare function SyntheticElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>, preset?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
-export declare class VerstakElementDriver<T extends HTMLElement> extends HtmlElementDriver<T> {
+export declare class SectionDriver<T extends HTMLElement> extends HtmlDriver<T> {
     update(node: RxNode<El<T>>): void | Promise<void>;
+    child(ownerNode: RxNode<El<T, any>>, childDriver: RxNodeDriver<any>, childDeclaration?: RxNodeDecl<any> | undefined, childPreset?: RxNodeDecl<any> | undefined): MergedItem<RxNode> | undefined;
 }
+export declare function isSplitViewPartition(childDriver: RxNodeDriver): boolean;
+export declare const Drivers: {
+    section: SectionDriver<HTMLElement>;
+    table: HtmlDriver<HTMLElement, any>;
+    note: HtmlDriver<HTMLElement, any>;
+    group: HtmlDriver<HTMLElement, any>;
+    partition: HtmlDriver<HTMLElement, any>;
+    splitter: HtmlDriver<HTMLElement, any>;
+    cursor: CursorCommandDriver;
+    synthetic: RxNodeDriver<El<void, any>>;
+};

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

@@ -1,6 +1,9 @@
-import { RxNode, Mode } from "reactronic";
-import { Constants, CursorCommandDriver, ElKind, ElDriver } from "./El.js";
-import { HtmlElementDriver } from "./HtmlDriver.js";
+import { RxNode, Mode, unobs } from "reactronic";
+import { Constants, CursorCommandDriver, ElKind, ElDriver, SplitView, 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 { clamp } from "./ElUtils.js";
 export function Section(declaration, preset) {
     return RxNode.declare(Drivers.section, declaration, preset);
 }
@@ -11,8 +14,73 @@ export function row(builder, shiftCursorDown) {
     rowBreak(shiftCursorDown);
     builder === null || builder === void 0 ? void 0 : builder();
 }
+export function Splitter(declaration, preset) {
+    return RxNode.declare(Drivers.splitter, declaration, preset);
+}
 export function rowBreak(shiftCursorDown) {
-    RxNode.declare(Drivers.partition);
+    RxNode.declare(Drivers.partition, {
+        onChange: el => {
+            const ownerEl = el.node.owner.element;
+            if (ownerEl.splitView !== undefined) {
+                el.style.display = "grid";
+            }
+            else {
+            }
+        },
+    });
+}
+export function declareSplitter(index, splitViewNode) {
+    const key = `splitter-${index}`;
+    return (Splitter({
+        key,
+        mode: Mode.independentUpdate,
+        onCreate: el => el.native.className = `splitter ${key}`,
+        onChange: b => {
+            const e = b.native;
+            const model = b.model;
+            const dataForSensor = e.dataForSensor;
+            dataForSensor.draggable = key;
+            dataForSensor.drag = key;
+            Handling(() => {
+                var _a, _b, _c, _d;
+                const pointer = e.sensors.pointer;
+                if (pointer.dragSource === key) {
+                    if (pointer.dragStarted) {
+                        if (pointer.draggingOver) {
+                            pointer.dropAllowed = true;
+                            const initialSizesPx = pointer.getData();
+                            const deltaPx = Math.floor(splitViewNode.element.splitView === SplitView.horizontal
+                                ? pointer.positionX - pointer.startX : pointer.positionY - pointer.startY);
+                            const clonedSizesPx = [];
+                            for (const item of initialSizesPx) {
+                                clonedSizesPx.push({ node: item.node, sizePx: item.sizePx });
+                            }
+                            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);
+                            }
+                        }
+                        else {
+                            e.setAttribute("rx-dragging", "true");
+                            const initialSizesPx = [];
+                            for (const item of splitViewNode.children.items()) {
+                                const child = item.instance;
+                                if (isSplitViewPartition(child.driver)) {
+                                    const sizePx = (_c = (_b = child.element.layoutInfo) === null || _b === void 0 ? void 0 : _b.effectiveSizePx) !== null && _c !== void 0 ? _c : 0;
+                                    initialSizesPx.push({ node: child, sizePx });
+                                }
+                            }
+                            pointer.setData(initialSizesPx);
+                        }
+                        if (pointer.dragFinished) {
+                            (_d = model === null || model === void 0 ? void 0 : model.dragFinishedAction) === null || _d === void 0 ? void 0 : _d.call(model, pointer);
+                            e.setAttribute("rx-dragging", "false");
+                        }
+                    }
+                }
+            });
+        },
+    }));
 }
 export function cursor(areaParams) {
     RxNode.declare(Drivers.cursor, {
@@ -28,7 +96,7 @@ export function Note(content, formatted, declaration) {
                 el.native.innerHTML = content;
             else
                 el.native.innerText = content;
-        }
+        },
     });
 }
 export function Group(declaration, preset) {
@@ -40,20 +108,157 @@ export function Handling(onChange) {
 export function SyntheticElement(declaration, preset) {
     return RxNode.declare(Drivers.synthetic, declaration, preset);
 }
-export class VerstakElementDriver extends HtmlElementDriver {
+export class SectionDriver extends HtmlDriver {
     update(node) {
-        const element = node.element;
-        if (element.kind === ElKind.section)
-            rowBreak();
-        return super.update(node);
+        rowBreak();
+        const result = super.update(node);
+        const el = node.element;
+        if (el.splitView !== undefined) {
+            Handling(h => {
+                var _a, _b;
+                const native = el.native;
+                const resize = native.sensors.resize;
+                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 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;
+                        el.layoutInfo.isConstrained = true;
+                        if (isHorizontal)
+                            wrapperEl.style.width = wrapperEl.style.maxWidth = `${containerSizeXpx}px`;
+                        else
+                            wrapperEl.style.height = wrapperEl.style.maxHeight = `${containerSizeYpx}px`;
+                    }
+                }
+                if (h.node.stamp === 1) {
+                    const isHorizontal = el.splitView === SplitView.horizontal;
+                    const wrapper = (_b = node.children.firstMergedItem()) === null || _b === void 0 ? void 0 : _b.instance;
+                    if (wrapper !== undefined) {
+                        const wrapperEl = wrapper.element;
+                        if (isHorizontal)
+                            wrapperEl.style.width = wrapperEl.style.maxWidth = "0px";
+                        else
+                            wrapperEl.style.height = wrapperEl.style.maxHeight = "0px";
+                    }
+                }
+            });
+            Handling(() => {
+                const native = el.native;
+                const isHorizontal = el.splitView === SplitView.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: 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 (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;
     }
+    child(ownerNode, childDriver, childDeclaration, childPreset) {
+        var _a;
+        let result = undefined;
+        const el = ownerNode.element;
+        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 === SplitView.horizontal;
+                if (childDeclaration !== undefined) {
+                    overrideOnCreate(childDeclaration, el => {
+                        if (isHorizontal)
+                            el.style.gridColumn = `${partCount + 1}`;
+                        else
+                            el.style.gridRow = `${partCount + 1}`;
+                    });
+                }
+                if (partCount > 0)
+                    declareSplitter(partCount - 1, ownerNode);
+            }
+        }
+        else {
+            if (childDriver.isPartition) {
+                const last = ownerNode.children.lastMergedItem();
+                if (((_a = last === null || last === void 0 ? void 0 : last.instance) === null || _a === void 0 ? void 0 : _a.driver) === childDriver)
+                    result = last;
+            }
+        }
+        return result;
+    }
+}
+export function isSplitViewPartition(childDriver) {
+    return !childDriver.isPartition && childDriver !== Drivers.splitter && childDriver !== Drivers.synthetic;
+}
+function overrideOnCreate(declaration, func) {
+    const baseOnCreate = declaration.onCreate;
+    declaration.onCreate = baseOnCreate !== undefined
+        ? (el, base) => { baseOnCreate(el, base); func(el); }
+        : (el, base) => { base(); func(el); };
 }
-const Drivers = {
-    section: new VerstakElementDriver(Constants.element, false, el => el.kind = ElKind.section),
-    table: new VerstakElementDriver(Constants.element, false, el => el.kind = ElKind.table),
-    note: new VerstakElementDriver(Constants.element, false, el => el.kind = ElKind.note),
-    group: new VerstakElementDriver(Constants.group, false, el => el.kind = ElKind.group),
-    partition: new VerstakElementDriver(Constants.partition, true, el => el.kind = ElKind.part),
+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),
+    note: new HtmlDriver(Constants.element, false, el => el.kind = ElKind.note),
+    group: new HtmlDriver(Constants.group, false, el => el.kind = ElKind.group),
+    partition: new HtmlDriver(Constants.partition, true, el => el.kind = ElKind.part),
+    splitter: new HtmlDriver(Constants.splitter, false, el => el.kind = ElKind.splitter),
     cursor: new CursorCommandDriver(),
     synthetic: new ElDriver("synthetic", false, el => el.kind = ElKind.group),
 };

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/HtmlDriver.d.ts

@@ -16,9 +16,9 @@ export declare class StaticDriver<T extends HTMLElement> extends WebDriver<T> {
     constructor(native: T, name: string, isRow: boolean, predefine?: SimpleDelegate<El<T>>);
     setNativeElement(node: RxNode<El<T>>): void;
 }
-export declare class HtmlElementDriver<T extends HTMLElement, M = any> extends WebDriver<T, M> {
+export declare class HtmlDriver<T extends HTMLElement, M = any> extends WebDriver<T, M> {
     setNativeElement(node: RxNode<El<T, M>>): void;
 }
-export declare class SvgElementDriver<T extends SVGElement, M = any> extends WebDriver<T, M> {
+export declare class SvgDriver<T extends SVGElement, M = any> extends WebDriver<T, M> {
     setNativeElement(node: RxNode<El<T, M>>): void;
 }

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

@@ -88,12 +88,12 @@ export class StaticDriver extends WebDriver {
         node.element.native = this.native;
     }
 }
-export class HtmlElementDriver extends WebDriver {
+export class HtmlDriver extends WebDriver {
     setNativeElement(node) {
         node.element.native = document.createElement(node.driver.name);
     }
 }
-export class SvgElementDriver extends WebDriver {
+export class SvgDriver extends WebDriver {
     setNativeElement(node) {
         node.element.native = document.createElementNS("http://www.w3.org/2000/svg", node.driver.name);
     }