verstak 0.24.269 → 0.24.271

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,7 +1,4 @@
 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;
@@ -11,12 +8,24 @@ export type El<T = any, M = any> = {
     area: ElArea;
     width: Range;
     height: Range;
-    alignment: Align;
-    extraAlignment: Align;
+    alignment: Alignment | undefined;
+    alignmentInside: Alignment | undefined;
+    verticalAlignment: VerticalAlignment | undefined;
+    verticalAlignmentInside: VerticalAlignment | undefined;
     stretchingStrengthX: number | undefined;
     stretchingStrengthY: number | undefined;
     contentWrapping: boolean;
     overlayVisible: boolean | undefined;
+    splitView: SplitView | undefined;
+    widthPx: {
+        minPx: number;
+        maxPx: number;
+    };
+    heightPx: {
+        minPx: number;
+        maxPx: number;
+    };
+    partitionSizeInSplitViewPx: number;
     readonly style: CSSStyleDeclaration;
     useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
 };
@@ -26,8 +35,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;
@@ -35,22 +45,22 @@ export type ElCoords = {
     x2: number;
     y2: number;
 };
-export declare enum Align {
-    default = 0,
-    left = 4,
-    centerX = 5,
-    right = 6,
-    stretchX = 7,
-    top = 32,
-    centerY = 40,
-    bottom = 48,
-    stretchY = 56,
-    centerXY = 45,
-    stretchXY = 63
+export declare enum Alignment {
+    left = 0,
+    center = 1,
+    right = 2,
+    stretch = 3
+}
+export declare enum VerticalAlignment {
+    top = 0,
+    center = 1,
+    bottom = 2,
+    stretch = 3
 }
 export type Range = {
     readonly min?: string;
     readonly max?: string;
+    readonly preferred?: string;
 };
 export type MarkedRange = Range & {
     readonly marker?: string;
@@ -59,6 +69,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;
@@ -72,11 +89,14 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private _width;
     private _height;
     private _alignment;
-    private _extraAlignment;
+    private _verticalAlignment;
+    private _alignmentInside;
+    private _verticalAlignmentInside;
     private _stretchingStrengthX;
     private _stretchingStrengthY;
     private _contentWrapping;
     private _overlayVisible;
+    private _splitView;
     private _hasStylingPresets;
     constructor(node: RxNode<El<T, M>>);
     prepareForUpdate(): void;
@@ -90,12 +110,36 @@ 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 preferredWidthUsed(): boolean;
+    set preferredWidthUsed(value: boolean);
     get height(): Range;
     set height(value: Range);
-    get alignment(): Align;
-    set alignment(value: Align);
-    get extraAlignment(): Align;
-    set extraAlignment(value: Align);
+    get heightPx(): {
+        minPx: number;
+        maxPx: number;
+    };
+    set heightPx(value: {
+        minPx: number;
+        maxPx: number;
+    });
+    get preferredHeightUsed(): boolean;
+    set preferredHeightUsed(value: boolean);
+    get alignment(): Alignment | undefined;
+    set alignment(value: Alignment | undefined);
+    get verticalAlignment(): VerticalAlignment | undefined;
+    set verticalAlignment(value: VerticalAlignment | undefined);
+    get alignmentInside(): Alignment | undefined;
+    set alignmentInside(value: Alignment | undefined);
+    get verticalAlignmentInside(): VerticalAlignment | undefined;
+    set verticalAlignmentInside(value: VerticalAlignment | undefined);
     get stretchingStrengthX(): number | undefined;
     set stretchingStrengthX(value: number | undefined);
     get stretchingStrengthY(): number | undefined;
@@ -104,24 +148,28 @@ 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 partitionSizeInSplitViewPx(): number;
     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 applyMinWidth;
-    private static applyMaxWidth;
-    private static applyMinHeight;
-    private static applyMaxHeight;
+    private static applyWidth;
+    private static applyHeight;
     private static applyAlignment;
+    private static applyVerticalAlignment;
     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;
@@ -129,14 +177,24 @@ declare class ElLayoutInfo {
     alignerX?: ElImpl;
     alignerY?: ElImpl;
     flags: ElLayoutInfoFlags;
+    effectiveSizePx: number;
+    offsetXpx: number;
+    offsetYpx: number;
+    contentSizeXpx: number;
+    contentSizeYpx: number;
+    borderSizeYpx: number;
+    borderSizeXpx: number;
+    isConstrained: boolean;
     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;
@@ -148,6 +206,7 @@ export declare class CursorCommandDriver extends ElDriver<Element, unknown> {
 export declare const Constants: {
     element: string;
     partition: string;
+    splitter: string;
     group: string;
     layouts: string[];
     keyAttrName: string;