verstak 0.24.268 → 0.24.270

package/build/dist/source/html/DraggableArea.view.d.ts

@@ -0,0 +1,11 @@
+import { RxNodeDecl, RxNode } from "reactronic";
+import { El } from "./El.js";
+import { PointerSensor } from "./sensors/PointerSensor.js";
+export type DragAndDropHandler = (pointer: PointerSensor) => void;
+export interface DraggableAreaModel {
+    dragStartedAction?: DragAndDropHandler;
+    draggingOverAction?: DragAndDropHandler;
+    droppedAction?: DragAndDropHandler;
+    dragFinishedAction?: DragAndDropHandler;
+}
+export declare function DraggableArea(draggingId: string, builder: RxNodeDecl<El<HTMLDivElement, DraggableAreaModel>>): RxNode<El<HTMLDivElement>>;

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

@@ -0,0 +1,37 @@
+import { Mode } from "reactronic";
+import { Div } from "./HtmlElements.js";
+import { Handling } from "./Elements.js";
+export function DraggableArea(draggingId, builder) {
+    return (Div(builder, {
+        mode: Mode.independentUpdate,
+        onChange: b => {
+            const e = b.native;
+            const model = b.model;
+            const dataForSensor = e.dataForSensor;
+            dataForSensor.draggable = draggingId;
+            dataForSensor.drag = draggingId;
+            Handling(() => {
+                var _a, _b, _c, _d;
+                const pointer = e.sensors.pointer;
+                if (pointer.dragSource === draggingId) {
+                    if (pointer.dragStarted) {
+                        if (pointer.draggingOver) {
+                            (_a = model === null || model === void 0 ? void 0 : model.draggingOverAction) === null || _a === void 0 ? void 0 : _a.call(model, pointer);
+                            if (pointer.dropped) {
+                                (_b = model === null || model === void 0 ? void 0 : model.droppedAction) === null || _b === void 0 ? void 0 : _b.call(model, pointer);
+                            }
+                        }
+                        else {
+                            e.setAttribute("rx-dragging", "true");
+                            (_c = model === null || model === void 0 ? void 0 : model.dragStartedAction) === null || _c === void 0 ? void 0 : _c.call(model, pointer);
+                        }
+                        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");
+                        }
+                    }
+                }
+            });
+        },
+    }));
+}

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

@@ -1,9 +1,7 @@
 import { RxNode, BaseDriver } from "reactronic";
-export declare class ElDriver<T extends Element, M = unknown> extends BaseDriver<El<T, M>> {
-    allocate(node: RxNode<El<T, M>>): El<T, M>;
-}
 export type El<T = any, M = any> = {
     readonly node: RxNode<El<T, M>>;
+    readonly index: number;
     native: T;
     model: M;
     kind: ElKind;
@@ -11,11 +9,12 @@ export type El<T = any, M = any> = {
     width: Range;
     height: Range;
     alignment: Align;
-    extraAlignment: Align;
+    alignmentInside: Align;
     stretchingStrengthX: number | undefined;
     stretchingStrengthY: number | undefined;
     contentWrapping: boolean;
     overlayVisible: boolean | undefined;
+    splitView: SplitView | undefined;
     readonly style: CSSStyleDeclaration;
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
 };
@@ -25,8 +24,9 @@ export declare enum ElKind {
     note = 2,
     group = 3,
     part = 4,
-    cursor = 5,
-    native = 6
+    splitter = 5,
+    cursor = 6,
+    native = 7
 }
 export type ElCoords = {
     x1: number;
@@ -37,15 +37,15 @@ export type ElCoords = {
 export declare enum Align {
     default = 0,
     left = 4,
-    centerWidth = 5,
+    centerX = 5,
     right = 6,
-    stretchWidth = 7,
+    stretchX = 7,
     top = 32,
-    centerHeight = 40,
+    centerY = 40,
     bottom = 48,
-    stretchHeight = 56,
-    center = 45,
-    stretch = 63
+    stretchY = 56,
+    centerXY = 45,
+    stretchXY = 63
 }
 export type Range = {
     readonly min?: string;
@@ -58,6 +58,13 @@ export type ElArea = undefined | string | {
     cellsOverWidth?: number;
     cellsOverHeight?: number;
 };
+export declare enum SplitView {
+    horizontal = 0,
+    vertical = 1
+}
+export declare class ElDriver<T extends Element, M = unknown> extends BaseDriver<El<T, M>> {
+    allocate(node: RxNode<El<T, M>>): El<T, M>;
+}
 export declare class ElImpl<T extends Element = any, M = any> implements El<T, M> {
     readonly node: RxNode<El<T, M>>;
     maxColumnCount: number;
@@ -71,14 +78,16 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private _width;
     private _height;
     private _alignment;
-    private _extraAlignment;
+    private _alignmentInside;
     private _stretchingStrengthX;
     private _stretchingStrengthY;
     private _contentWrapping;
     private _overlayVisible;
+    private _splitView;
     private _hasStylingPresets;
     constructor(node: RxNode<El<T, M>>);
     prepareForUpdate(): void;
+    get index(): number;
     get isSection(): boolean;
     get isTable(): boolean;
     get isAuxiliary(): boolean;
@@ -88,12 +97,28 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     set area(value: ElArea);
     get width(): Range;
     set width(value: Range);
+    get widthPx(): {
+        minPx: number;
+        maxPx: number;
+    };
+    set widthPx(value: {
+        minPx: number;
+        maxPx: number;
+    });
     get height(): Range;
     set height(value: Range);
+    get heightPx(): {
+        minPx: number;
+        maxPx: number;
+    };
+    set heightPx(value: {
+        minPx: number;
+        maxPx: number;
+    });
     get alignment(): Align;
     set alignment(value: Align);
-    get extraAlignment(): Align;
-    set extraAlignment(value: Align);
+    get alignmentInside(): Align;
+    set alignmentInside(value: Align);
     get stretchingStrengthX(): number | undefined;
     set stretchingStrengthX(value: number | undefined);
     get stretchingStrengthY(): number | undefined;
@@ -102,24 +127,48 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     set contentWrapping(value: boolean);
     get overlayVisible(): boolean | undefined;
     set overlayVisible(value: boolean | undefined);
+    get splitView(): SplitView | undefined;
+    set splitView(value: SplitView | undefined);
     get style(): CSSStyleDeclaration;
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
+    protected children(onlyAfter?: ElImpl): Generator<ElImpl>;
+    static childrenOf(node: RxNode<El>, onlyAfter?: El): Generator<ElImpl>;
     private rowBreak;
+    private static applyKind;
+    private static applyCoords;
+    private static applyWidth;
+    private static applyHeight;
+    private static applyAlignment;
+    private static applyStretchingStrengthX;
+    private static applyStretchingStrengthY;
+    private static applyContentWrapping;
+    private static applyOverlayVisible;
+    static applySplitView<T extends Element>(element: El<T, any>, value: SplitView | undefined): void;
+    private static applyStylingPreset;
 }
-declare class ElLayoutInfo {
+export declare class ElLayoutInfo {
     x: number;
     y: number;
     runningMaxX: number;
     runningMaxY: number;
+    alignerX?: ElImpl;
+    alignerY?: ElImpl;
     flags: ElLayoutInfoFlags;
+    effectiveSizePx: number;
+    offsetXpx: number;
+    offsetYpx: number;
+    containerSizeXpx: number;
+    containerSizeYpx: number;
     constructor(prev: ElLayoutInfo);
 }
 declare enum ElLayoutInfoFlags {
     none = 0,
     ownCursorPosition = 1,
     usesRunningColumnCount = 2,
-    usesRunningRowCount = 4
+    usesRunningRowCount = 4,
+    childrenRelayoutIsNeeded = 8
 }
+export declare const InitialElLayoutInfo: ElLayoutInfo;
 export declare class CursorCommand {
     absolute?: string;
     columnShift?: number;
@@ -128,23 +177,10 @@ export declare class CursorCommand {
 export declare class CursorCommandDriver extends ElDriver<Element, unknown> {
     constructor();
 }
-export declare class Apply {
-    static kind<T extends Element>(element: ElImpl<T, any>, value: ElKind): void;
-    static coords<T extends Element>(element: ElImpl<T, any>, value: ElCoords | undefined): void;
-    static minWidth<T extends Element>(element: ElImpl<T, any>, value: string): void;
-    static maxWidth<T extends Element>(element: ElImpl<T, any>, value: string): void;
-    static minHeight<T extends Element>(element: ElImpl<T, any>, value: string): void;
-    static maxHeight<T extends Element>(element: ElImpl<T, any>, value: string): void;
-    static alignment<T extends Element>(element: ElImpl<T, any>, primary: Align, extra: Align, strengthX: number | undefined, strengthY: number | undefined): void;
-    static stretchingStrengthX<T extends Element>(element: ElImpl<T, any>, value: number): void;
-    static stretchingStrengthY<T extends Element>(element: ElImpl<T, any>, value: number): void;
-    static contentWrapping<T extends Element>(element: ElImpl<T, any>, value: boolean): void;
-    static overlayVisible<T extends Element>(element: ElImpl<T, any>, value: boolean | undefined): void;
-    static stylingPreset<T extends Element>(element: ElImpl<T, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
-}
 export declare const Constants: {
     element: string;
     partition: string;
+    splitter: string;
     group: string;
     layouts: string[];
     keyAttrName: string;