verstak 0.24.303 → 0.24.308

package/build/dist/source/html/DraggableArea.view.js

@@ -1,8 +1,8 @@
-import { Mode } from "reactronic";
+import { Mode, RxNode } from "reactronic";
 import { Div } from "./HtmlElements.js";
 import { Handling } from "./Elements.js";
 export function DraggableArea(draggingId, builder) {
-    return (Div(builder, {
+    return (Div(RxNode.rebased(builder, {
         mode: Mode.independentUpdate,
         script: b => {
             const e = b.native;
@@ -33,5 +33,5 @@ export function DraggableArea(draggingId, builder) {
                 }
             });
         },
-    }));
+    })));
 }

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

@@ -65,8 +65,8 @@ export class ElImpl {
         this._kind = ElKind.part;
         this._place = undefined;
         this._coords = UndefinedElCoords;
-        this._width = Transaction.isolate(() => new Size());
-        this._height = Transaction.isolate(() => new Size());
+        this._width = new Size();
+        this._height = new Size();
         this._horizontal = undefined;
         this._vertical = undefined;
         this._contentHorizontal = undefined;
@@ -557,7 +557,12 @@ export class ElImpl {
         const e = element.native;
         if (e instanceof HTMLElement) {
             element.sealed = value;
-            Transaction.isolate(() => e.sensors.resize.observeResizing(element, value !== undefined));
+            const t = Transaction.current;
+            Transaction.outside(() => {
+                t.whenFinished(true).then(() => {
+                    e.sensors.resize.observeResizing(element, value !== undefined);
+                }, e => { });
+            });
         }
     }
     static applyStylingPreset(element, secondary, styleName, enabled) {

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

@@ -1,17 +1,22 @@
-import { RxNodeDecl, RxNodeDriver, RxNode, Script, MergedItem } from "reactronic";
+import { RxNodeDecl, RxNodeDriver, RxNode, Script, Mode, MergedItem, ScriptAsync } from "reactronic";
 import { CursorCommandDriver, El, ElPlace } from "./El.js";
 import { HtmlDriver } from "./HtmlDriver.js";
-export declare function Panel<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
-export declare function Table<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Panel<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Panel<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Table<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Table<M = unknown>(declaration?: 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>>, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Splitter<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Splitter<M = unknown>(declaration?: 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: ElPlace): 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>>, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Group<M = unknown>(script?: Script<El<HTMLElement, M>>, scriptAsync?: ScriptAsync<El<HTMLElement, M>>, key?: string, mode?: Mode, creation?: Script<El<HTMLElement, M>>, creationAsync?: ScriptAsync<El<HTMLElement, M>>, destruction?: Script<El<HTMLElement, M>>, triggers?: unknown, basis?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
+export declare function Group<M = unknown>(declaration?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
 export declare function Handling<M = unknown>(script: Script<El<void, M>>): RxNode<El<void, M>>;
-export declare function SyntheticElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>, basis?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
+export declare function SyntheticElement<M = unknown>(script?: Script<El<void, M>>, scriptAsync?: ScriptAsync<El<void, M>>, key?: string, mode?: Mode, creation?: Script<El<void, M>>, creationAsync?: ScriptAsync<El<void, M>>, destruction?: Script<El<void, M>>, triggers?: unknown, basis?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
+export declare function SyntheticElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
 export declare class PanelDriver<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, childBasis?: RxNodeDecl<any> | undefined): MergedItem<RxNode> | undefined;

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

@@ -4,18 +4,18 @@ import { getPrioritiesForEmptySpaceDistribution, getPrioritiesForSizeChanging, r
 import { Axis, BodyFontSize, Dimension, toPx } from "./Sizes.js";
 import { HtmlDriver } from "./HtmlDriver.js";
 import { clamp } from "./ElUtils.js";
-export function Panel(declaration, basis) {
-    return RxNode.declare(Drivers.panel, declaration, basis);
+export function Panel(scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis) {
+    return RxNode.declare(Drivers.panel, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
 }
-export function Table(declaration, basis) {
-    return RxNode.declare(Drivers.table, declaration, basis);
+export function Table(scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis) {
+    return RxNode.declare(Drivers.table, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
 }
 export function row(builder, shiftCursorDown) {
     rowBreak(shiftCursorDown);
     builder === null || builder === void 0 ? void 0 : builder();
 }
-export function Splitter(declaration, basis) {
-    return RxNode.declare(Drivers.splitter, declaration, basis);
+export function Splitter(scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis) {
+    return RxNode.declare(Drivers.splitter, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
 }
 export function rowBreak(shiftCursorDown) {
     RxNode.declare(Drivers.partition);
@@ -81,23 +81,23 @@ export function cursor(areaParams) {
     });
 }
 export function Note(content, formatted, declaration) {
-    return RxNode.declare(Drivers.note, declaration, {
+    return RxNode.declare(Drivers.note, RxNode.rebased(declaration, {
         script: el => {
             if (formatted)
                 el.native.innerHTML = content;
             else
                 el.native.innerText = content;
         },
-    });
+    }));
 }
-export function Group(declaration, basis) {
-    return RxNode.declare(Drivers.group, declaration, basis);
+export function Group(scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis) {
+    return RxNode.declare(Drivers.group, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
 }
 export function Handling(script) {
     return SyntheticElement({ mode: Mode.independentUpdate, script });
 }
-export function SyntheticElement(declaration, basis) {
-    return RxNode.declare(Drivers.synthetic, declaration, basis);
+export function SyntheticElement(scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis) {
+    return RxNode.declare(Drivers.synthetic, scriptOrDeclaration, scriptAsync, key, mode, creation, creationAsync, destruction, triggers, basis);
 }
 export class PanelDriver extends HtmlDriver {
     update(node) {
@@ -121,7 +121,7 @@ export class PanelDriver extends HtmlDriver {
                     layoutInfo.contentSizeYpx = contentBoxPx.blockSize;
                 }
             });
-            SyntheticElement({
+            const relayoutEl = SyntheticElement({
                 mode: Mode.independentUpdate,
                 script: () => {
                     const native = el.native;
@@ -155,7 +155,7 @@ export class PanelDriver extends HtmlDriver {
                                     size.preferred = undefined;
                                     preferred.push(i);
                                 }
-                                const sizePx = unobs(() => partEl.layoutInfo.effectiveSizePx = clamp(partEl.layoutInfo.effectiveSizePx, minPx, maxPx));
+                                const sizePx = partEl.layoutInfo.effectiveSizePx = clamp(partEl.layoutInfo.effectiveSizePx, minPx, maxPx);
                                 sizesPx.push({ node: child.instance, sizePx });
                                 i++;
                             }
@@ -169,6 +169,7 @@ export class PanelDriver extends HtmlDriver {
             });
             RxNode.updateNestedNodesThenDo(() => {
                 layoutInfo.isUpdateFinished = true;
+                RxNode.triggerUpdate(relayoutEl, { stamp: node.stamp });
             });
         }
         return result;

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

@@ -3,5 +3,6 @@ import { FocusModel } from "./sensors/FocusSensor.js";
 import { ResizedElement } from "./sensors/ResizeSensor.js";
 import { PointerSensor } from "./sensors/PointerSensor.js";
 export declare function OnClick(target: HTMLElement, action: ((pointer: PointerSensor) => void) | ToggleRef | undefined, key?: string): void;
+export declare function OnClickAsync(target: HTMLElement, action: ((pointer: PointerSensor) => Promise<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;

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

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { Mode, ToggleRef, unobs } from "reactronic";
 import { SyntheticElement } from "./Elements.js";
 export function OnClick(target, action, key) {
@@ -20,6 +29,26 @@ export function OnClick(target, action, key) {
         });
     }
 }
+export function OnClickAsync(target, action, key) {
+    if (action !== undefined) {
+        SyntheticElement({
+            key,
+            mode: Mode.independentUpdate,
+            triggers: { target },
+            scriptAsync: (el) => __awaiter(this, void 0, void 0, function* () {
+                const pointer = target.sensors.pointer;
+                if (target.dataForSensor.click !== undefined && pointer.clicked === target.dataForSensor.click || target.dataForSensor.click === undefined && pointer.clicked) {
+                    if (action instanceof Function) {
+                        yield unobs(() => action(pointer));
+                    }
+                    else if (action instanceof ToggleRef) {
+                        unobs(() => action.toggle());
+                    }
+                }
+            }),
+        });
+    }
+}
 export function OnResize(target, action, key) {
     if (action) {
         SyntheticElement({