verstak 0.22.509 → 0.22.511

package/build/dist/source/core/CellRange.d.ts

@@ -6,3 +6,4 @@ export interface CellRange {
 }
 export declare function parseCellRange(text: string, result: CellRange): CellRange;
 export declare function emitCellRange(value: CellRange): string;
+export declare function equalCellRanges(a: CellRange, b: CellRange): boolean;

package/build/dist/source/core/CellRange.js

@@ -134,6 +134,9 @@ export function emitCellRange(value) {
     const p2 = emitCellPosition(value.x2, value.y2);
     return `${p1}${p2 !== "" ? `:${p2}` : ""}`;
 }
+export function equalCellRanges(a, b) {
+    return a.x1 === b.x1 && a.y1 === b.y1 && a.x2 === b.x2 && a.y1 === b.y2;
+}
 function isWhitespace(char) {
     return char === 32 || (char >= 9 && char <= 13) || char === 133 || char === 160;
 }

package/build/dist/source/core/Cursor.d.ts

@@ -0,0 +1,49 @@
+import { CellRange } from "./CellRange";
+export declare enum Align {
+    Stretch = 0,
+    Left = 1,
+    Center = 2,
+    Right = 3,
+    Top = 4,
+    CenterV = 8,
+    Bottom = 12,
+    Default = 16
+}
+export interface ElasticSize {
+    cells?: number;
+    min?: string;
+    max?: string;
+    growth?: number;
+}
+export interface TrackSize extends ElasticSize {
+    track?: string | number;
+}
+export declare type Cells = undefined | string | number | {
+    right?: number;
+    horizontalOverlap?: boolean;
+    down?: number;
+    verticalOverlap?: boolean;
+};
+export declare class Cursor {
+    static readonly UndefinedCellRange: Readonly<{
+        x1: 0;
+        y1: 0;
+        x2: 0;
+        y2: 0;
+    }>;
+    reset(): void;
+    onwards(cells: Cells): CellRange;
+    lineFeed(): void;
+}
+export declare class GridCursor extends Cursor {
+    private maxColumnCount;
+    private maxRowCount;
+    private actualColumnCount;
+    private actualRowCount;
+    private columnCursor;
+    private rowCursor;
+    private newRowCursor;
+    reset(): void;
+    onwards(cells: Cells): CellRange;
+    lineFeed(): void;
+}

package/build/dist/source/core/Cursor.js

@@ -0,0 +1,125 @@
+import { parseCellRange } from "./CellRange";
+export var Align;
+(function (Align) {
+    Align[Align["Stretch"] = 0] = "Stretch";
+    Align[Align["Left"] = 1] = "Left";
+    Align[Align["Center"] = 2] = "Center";
+    Align[Align["Right"] = 3] = "Right";
+    Align[Align["Top"] = 4] = "Top";
+    Align[Align["CenterV"] = 8] = "CenterV";
+    Align[Align["Bottom"] = 12] = "Bottom";
+    Align[Align["Default"] = 16] = "Default";
+})(Align || (Align = {}));
+export class Cursor {
+    reset() { }
+    onwards(cells) { return Cursor.UndefinedCellRange; }
+    lineFeed() { }
+}
+Cursor.UndefinedCellRange = Object.freeze({ x1: 0, y1: 0, x2: 0, y2: 0 });
+export class GridCursor extends Cursor {
+    constructor() {
+        super(...arguments);
+        this.maxColumnCount = 0;
+        this.maxRowCount = 0;
+        this.actualColumnCount = 0;
+        this.actualRowCount = 0;
+        this.columnCursor = 0;
+        this.rowCursor = 0;
+        this.newRowCursor = 0;
+    }
+    reset() {
+        this.maxColumnCount = 0;
+        this.maxRowCount = 0;
+        this.actualColumnCount = 0;
+        this.actualRowCount = 0;
+        this.columnCursor = 0;
+        this.rowCursor = 0;
+        this.newRowCursor = 0;
+    }
+    onwards(cells) {
+        var _a, _b, _c, _d;
+        let result;
+        if (typeof (cells) === "string") {
+            result = parseCellRange(cells, { x1: 0, y1: 0, x2: 0, y2: 0 });
+            absolutizeCellRange(result, this.columnCursor + 1, this.rowCursor + 1, this.maxColumnCount || Infinity, this.maxRowCount || Infinity, result);
+        }
+        else {
+            let columns;
+            let rows;
+            let columnsOverlap;
+            let rowsOverlap;
+            if (typeof (cells) === "number") {
+                columns = cells;
+                rows = 1;
+                columnsOverlap = rowsOverlap = false;
+            }
+            else if (cells) {
+                columns = (_a = cells.right) !== null && _a !== void 0 ? _a : 1;
+                rows = (_b = cells.down) !== null && _b !== void 0 ? _b : 1;
+                columnsOverlap = (_c = cells.horizontalOverlap) !== null && _c !== void 0 ? _c : false;
+                rowsOverlap = (_d = cells.verticalOverlap) !== null && _d !== void 0 ? _d : false;
+            }
+            else {
+                columns = 1;
+                rows = 1;
+                columnsOverlap = rowsOverlap = false;
+            }
+            const totalColumnCount = this.maxColumnCount !== 0 ? this.maxColumnCount : this.actualColumnCount;
+            const totalRowCount = this.maxRowCount !== 0 ? this.maxRowCount : this.actualRowCount;
+            result = { x1: 0, y1: 0, x2: 0, y2: 0 };
+            if (columns === 0)
+                columns = totalColumnCount || 1;
+            if (columns >= 0) {
+                result.x1 = this.columnCursor + 1;
+                result.x2 = absolutizePosition(result.x1 + columns - 1, 0, this.maxColumnCount || Infinity);
+                if (!columnsOverlap)
+                    this.columnCursor = result.x2;
+            }
+            else {
+                result.x1 = Math.max(this.columnCursor + columns, 1);
+                result.x2 = this.columnCursor;
+            }
+            if (rows === 0)
+                rows = totalRowCount || 1;
+            if (rows >= 0) {
+                result.y1 = this.rowCursor + 1;
+                result.y2 = absolutizePosition(result.y1 + rows - 1, 0, this.maxRowCount || Infinity);
+                if (!rowsOverlap && result.y2 > this.newRowCursor)
+                    this.newRowCursor = result.y2;
+            }
+            else {
+                result.y1 = Math.max(this.rowCursor + rows, 1);
+                result.y2 = this.rowCursor;
+            }
+        }
+        return result;
+    }
+    lineFeed() {
+        this.columnCursor = 0;
+        this.rowCursor = this.newRowCursor;
+    }
+}
+function absolutizeCellRange(area, cursorX, cursorY, maxWidth, maxHeight, result) {
+    const x1 = absolutizePosition(area.x1, cursorX, maxWidth);
+    const x2 = absolutizePosition(area.x2, x1, maxWidth);
+    if (x1 <= x2)
+        result.x1 = x1, result.x2 = x2;
+    else
+        result.x1 = x2, result.x2 = x1;
+    const y1 = absolutizePosition(area.y1, cursorY, maxHeight);
+    const y2 = absolutizePosition(area.y2, y1, maxHeight);
+    if (y1 <= y2)
+        result.y1 = y1, result.y2 = y2;
+    else
+        result.y1 = y2, result.y2 = y1;
+    return result;
+}
+function absolutizePosition(pos, cursor, max) {
+    if (pos === 0)
+        pos = cursor;
+    else if (pos < 0)
+        pos = Math.max(max + pos, 1);
+    else
+        pos = Math.min(pos, max);
+    return pos;
+}

package/build/dist/source/core/VBlock.d.ts

@@ -1,5 +1,6 @@
 import { Monitor, LoggingOptions, Item, CollectionReader } from "reactronic";
-import { Bounds, Place, Allocator } from "./Allocator";
+import { CellRange } from "./CellRange";
+import { Cursor, Align, Cells } from "./Cursor";
 export declare type Callback<T = unknown> = (native: T) => void;
 export declare type Render<T = unknown, M = unknown, R = void> = (native: T, block: VBlock<T, M, R>, base: () => R) => R;
 export declare type AsyncRender<T = unknown, M = unknown> = (native: T, block: VBlock<T, M, Promise<void>>) => Promise<void>;
@@ -9,7 +10,7 @@ export declare const enum Priority {
     AsyncP2 = 2
 }
 export declare type Type<T> = new (...args: any[]) => T;
-export interface BlockArgs<T = unknown, M = unknown, R = void> extends Bounds {
+export interface BlockArgs<T = unknown, M = unknown, R = void> {
     reacting?: boolean;
     triggers?: unknown;
     priority?: Priority;
@@ -34,14 +35,23 @@ export declare abstract class VBlock<T = unknown, M = unknown, R = void> {
     abstract readonly driver: AbstractDriver<T>;
     abstract readonly args: Readonly<BlockArgs<T, M, R>>;
     abstract model: M;
+    abstract cells: Cells;
+    abstract widthGrowth: number;
+    abstract widthMin: string;
+    abstract widthMax: string;
+    abstract heightGrowth: number;
+    abstract heightMin: string;
+    abstract heightMax: string;
+    abstract alignContent: Align;
+    abstract alignFrame: Align;
+    abstract wrapContent: boolean;
+    abstract dangling: boolean;
     abstract readonly level: number;
     abstract readonly host: VBlock;
     abstract readonly children: CollectionReader<VBlock>;
     abstract readonly item: Item<VBlock> | undefined;
     abstract readonly stamp: number;
     abstract readonly native: T | undefined;
-    abstract readonly place: Readonly<Place> | undefined;
-    render(): R;
     get isInitialRendering(): boolean;
     static root(render: () => void): void;
     static get current(): VBlock;
@@ -62,21 +72,31 @@ export declare class AbstractDriver<T> {
     static readonly group: AbstractDriver<any>;
     readonly name: string;
     readonly layout: LayoutKind;
-    readonly createAllocator: () => Allocator;
+    readonly createCursor: () => Cursor;
     get isSequential(): boolean;
     get isAuxiliary(): boolean;
     get isBlock(): boolean;
     get isGrid(): boolean;
-    get isPart(): boolean;
-    constructor(name: string, layout: LayoutKind, createAllocator?: () => Allocator);
+    get isRow(): boolean;
+    constructor(name: string, layout: LayoutKind, createCursor?: () => Cursor);
     initialize(block: VBlock<T>, native: T | undefined): void;
     finalize(block: VBlock<T>, isLeader: boolean): boolean;
     deploy(block: VBlock<T>, sequential: boolean): void;
-    arrange(block: VBlock<T>, place: Place | undefined, heightGrowth: number | undefined): void;
+    applyCellRange(block: VBlock<T, any, any>, cellRange: CellRange | undefined): void;
+    applyWidthGrowth(block: VBlock<T, any, any>, widthGrowth: number): void;
+    applyWidthMin(block: VBlock<T, any, any>, widthMin: string): void;
+    applyWidthMax(block: VBlock<T, any, any>, widthMax: string): void;
+    applyHeightGrowth(block: VBlock<T, any, any>, heightGrowth: number): void;
+    applyHeightMin(block: VBlock<T, any, any>, heightMin: string): void;
+    applyHeightMax(block: VBlock<T, any, any>, heightMax: string): void;
+    applyAlignContent(block: VBlock<T, any, any>, alignContent: Align): void;
+    applyAlignFrame(block: VBlock<T, any, any>, alignFrame: Align): void;
+    applyWrapContent(block: VBlock<T, any, any>, wrapContent: boolean): void;
+    applyDangling(block: VBlock<T, any, any>, dangling: boolean): void;
     render(block: VBlock<T>): void | Promise<void>;
 }
 export declare class StaticDriver<T> extends AbstractDriver<T> {
     readonly element: T;
-    constructor(element: T, name: string, layout: LayoutKind, createAllocator?: () => Allocator);
+    constructor(element: T, name: string, layout: LayoutKind, createCursor?: () => Cursor);
     initialize(block: VBlock<T>, element: T | undefined): void;
 }

package/build/dist/source/core/VBlock.js

@@ -17,7 +17,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { reactive, nonreactive, Transaction, options, Reentrance, Rx, Collection, ObservableObject, raw } from "reactronic";
-import { Allocator, To } from "./Allocator";
+import { equalCellRanges } from "./CellRange";
+import { Cursor, Align } from "./Cursor";
 export var Priority;
 (function (Priority) {
     Priority[Priority["SyncP0"] = 0] = "SyncP0";
@@ -39,9 +40,6 @@ export function use(type) {
     return VBlockImpl.use(type);
 }
 export class VBlock {
-    render() {
-        return invokeRenderFunction(this);
-    }
     get isInitialRendering() {
         return this.stamp === 2;
     }
@@ -66,7 +64,7 @@ export class VBlock {
         let ex = undefined;
         driver !== null && driver !== void 0 ? driver : (driver = AbstractDriver.group);
         name || (name = `${++owner.numerator}`);
-        if (driver.isPart) {
+        if (driver.isRow) {
             const last = children.lastClaimedItem();
             if (((_a = last === null || last === void 0 ? void 0 : last.instance) === null || _a === void 0 ? void 0 : _a.driver) === driver)
                 ex = last;
@@ -109,74 +107,55 @@ export var LayoutKind;
     LayoutKind[LayoutKind["Group"] = 3] = "Group";
     LayoutKind[LayoutKind["Text"] = 4] = "Text";
 })(LayoutKind || (LayoutKind = {}));
-const createDefaultAllocator = () => new Allocator();
+const createDefaultCursor = () => new Cursor();
 export class AbstractDriver {
-    constructor(name, layout, createAllocator) {
+    constructor(name, layout, createCursor) {
         this.name = name;
         this.layout = layout;
-        this.createAllocator = createAllocator !== null && createAllocator !== void 0 ? createAllocator : createDefaultAllocator;
+        this.createCursor = createCursor !== null && createCursor !== void 0 ? createCursor : createDefaultCursor;
     }
     get isSequential() { return (this.layout & 1) === 0; }
     get isAuxiliary() { return (this.layout & 2) === 2; }
     get isBlock() { return this.layout === LayoutKind.Block; }
     get isGrid() { return this.layout === LayoutKind.Grid; }
-    get isPart() { return this.layout === LayoutKind.Row; }
+    get isRow() { return this.layout === LayoutKind.Row; }
     initialize(block, native) {
-        var _a;
+        var _a, _b;
         const b = block;
         b.native = native;
-        const initialize = (_a = block.args) === null || _a === void 0 ? void 0 : _a.initialize;
-        if (initialize) {
-            if (Array.isArray(initialize))
-                for (const init of initialize)
-                    init(native, block, NOP);
-            else
-                initialize(native, block, NOP);
-        }
+        (_b = (_a = block.args).initialize) === null || _b === void 0 ? void 0 : _b.call(_a, native, block, NOP);
     }
     finalize(block, isLeader) {
-        var _a;
+        var _a, _b;
         const b = block;
-        const finalize = (_a = block.args) === null || _a === void 0 ? void 0 : _a.finalize;
-        if (finalize) {
-            const native = block.native;
-            if (Array.isArray(finalize))
-                for (const fin of finalize)
-                    fin(native, block, NOP);
-            else
-                finalize(native, block, NOP);
-        }
+        const native = block.native;
+        (_b = (_a = block.args).finalize) === null || _b === void 0 ? void 0 : _b.call(_a, native, block, NOP);
         b.native = undefined;
         return isLeader;
     }
     deploy(block, sequential) {
     }
-    arrange(block, place, heightGrowth) {
-        var _a, _b, _c;
-        const b = block;
-        if (heightGrowth === undefined) {
-            b.place = place;
-            const host = b.host;
-            if (host.driver.isPart) {
-                const growth = (_a = place === null || place === void 0 ? void 0 : place.heightGrowth) !== null && _a !== void 0 ? _a : 0;
-                if (growth > 0 && ((_c = (_b = host.place) === null || _b === void 0 ? void 0 : _b.heightGrowth) !== null && _c !== void 0 ? _c : 0) < growth)
-                    host.driver.arrange(host, undefined, growth);
-            }
-        }
-        else if (heightGrowth > 0) {
-            if (b.place === undefined)
-                b.place = {
-                    exact: undefined,
-                    widthMin: "", widthMax: "", widthGrowth: 0,
-                    heightMin: "", heightMax: "", heightGrowth,
-                    alignContent: To.Default,
-                    alignFrame: To.Default,
-                    wrapping: false,
-                    floating: false,
-                };
-            else
-                b.place.heightGrowth = heightGrowth;
-        }
+    applyCellRange(block, cellRange) {
+    }
+    applyWidthGrowth(block, widthGrowth) {
+    }
+    applyWidthMin(block, widthMin) {
+    }
+    applyWidthMax(block, widthMax) {
+    }
+    applyHeightGrowth(block, heightGrowth) {
+    }
+    applyHeightMin(block, heightMin) {
+    }
+    applyHeightMax(block, heightMax) {
+    }
+    applyAlignContent(block, alignContent) {
+    }
+    applyAlignFrame(block, alignFrame) {
+    }
+    applyWrapContent(block, wrapContent) {
+    }
+    applyDangling(block, dangling) {
     }
     render(block) {
         var _a;
@@ -196,8 +175,8 @@ function invokeRenderFunction(block) {
     return r(block.native, block, NOP);
 }
 export class StaticDriver extends AbstractDriver {
-    constructor(element, name, layout, createAllocator) {
-        super(name, layout, createAllocator);
+    constructor(element, name, layout, createCursor) {
+        super(name, layout, createCursor);
         this.element = element;
     }
     initialize(block, element) {
@@ -225,6 +204,18 @@ class VBlockImpl extends VBlock {
         this.driver = driver;
         this.args = args;
         this.model = undefined;
+        this.assignedCells = undefined;
+        this.appliedCellRange = Cursor.UndefinedCellRange;
+        this.appliedWidthGrowth = 0;
+        this.appliedWidthMin = "";
+        this.appliedWidthMax = "";
+        this.appliedHeightGrowth = 0;
+        this.appliedHeightMin = "";
+        this.appliedHeightMax = "";
+        this.appliedAlignContent = Align.Default;
+        this.appliedAlignFrame = Align.Default;
+        this.appliedWrapContent = false;
+        this.appliedDangling = false;
         this.level = owner.level + 1;
         this.host = owner;
         this.children = new Collection(driver.isSequential, getBlockName);
@@ -232,14 +223,94 @@ class VBlockImpl extends VBlock {
         this.item = undefined;
         this.stamp = 0;
         this.native = undefined;
-        this.place = undefined;
-        this.allocator = driver.createAllocator();
+        this.cursor = driver.createCursor();
         this.senior = owner.context ? owner : owner.senior;
         this.context = undefined;
     }
     rerender(_triggers) {
         runRender(this.item);
     }
+    get cells() { return this.assignedCells; }
+    set cells(value) {
+        if (this.assignedCells !== undefined)
+            throw new Error("cells can be assigned only once during rendering");
+        const cellRange = this.host.cursor.onwards(value);
+        if (!equalCellRanges(cellRange, this.appliedCellRange)) {
+            this.driver.applyCellRange(this, cellRange);
+            this.appliedCellRange = cellRange;
+        }
+        this.assignedCells = value !== null && value !== void 0 ? value : {};
+    }
+    get widthGrowth() { return this.appliedWidthGrowth; }
+    set widthGrowth(value) {
+        if (value !== this.appliedWidthGrowth) {
+            this.driver.applyWidthGrowth(this, value);
+            this.appliedWidthGrowth = value;
+        }
+    }
+    get widthMin() { return this.appliedWidthMin; }
+    set widthMin(value) {
+        if (value !== this.appliedWidthMin) {
+            this.driver.applyWidthMin(this, value);
+            this.appliedWidthMin = value;
+        }
+    }
+    get widthMax() { return this.appliedWidthMax; }
+    set widthMax(value) {
+        if (value !== this.appliedWidthMax) {
+            this.driver.applyWidthMax(this, value);
+            this.appliedWidthMax = value;
+        }
+    }
+    get heightGrowth() { return this.appliedHeightGrowth; }
+    set heightGrowth(value) {
+        if (value !== this.appliedHeightGrowth) {
+            this.driver.applyHeightGrowth(this, value);
+            this.appliedHeightGrowth = value;
+        }
+    }
+    get heightMin() { return this.appliedHeightMin; }
+    set heightMin(value) {
+        if (value !== this.appliedWidthMin) {
+            this.driver.applyWidthMin(this, value);
+            this.appliedWidthMin = value;
+        }
+    }
+    get heightMax() { return this.appliedHeightMax; }
+    set heightMax(value) {
+        if (value !== this.appliedWidthMax) {
+            this.driver.applyWidthMax(this, value);
+            this.appliedWidthMax = value;
+        }
+    }
+    get alignContent() { return this.appliedAlignContent; }
+    set alignContent(value) {
+        if (value !== this.appliedAlignContent) {
+            this.driver.applyAlignContent(this, value);
+            this.appliedAlignContent = value;
+        }
+    }
+    get alignFrame() { return this.appliedAlignFrame; }
+    set alignFrame(value) {
+        if (value !== this.appliedAlignFrame) {
+            this.driver.applyAlignFrame(this, value);
+            this.appliedAlignFrame = value;
+        }
+    }
+    get wrapContent() { return this.appliedWrapContent; }
+    set wrapContent(value) {
+        if (value !== this.appliedWrapContent) {
+            this.driver.applyWrapContent(this, value);
+            this.appliedWrapContent = value;
+        }
+    }
+    get dangling() { return this.appliedDangling; }
+    set dangling(value) {
+        if (value !== this.appliedDangling) {
+            this.driver.applyDangling(this, value);
+            this.appliedDangling = value;
+        }
+    }
     static use(type) {
         var _a, _b;
         let b = gCurrent.instance;
@@ -302,25 +373,19 @@ function runRenderNestedTreesThenDo(error, action) {
             if (!error) {
                 const ownerIsBlock = owner.driver.isBlock;
                 const sequential = children.strict;
-                const allocator = owner.allocator;
-                allocator.reset();
+                const cursor = owner.cursor;
                 let p1 = undefined;
                 let p2 = undefined;
                 let redeploy = false;
                 let partHost = owner;
+                cursor.reset();
                 for (const item of children.items()) {
                     if (Transaction.isCanceled)
                         break;
                     const block = item.instance;
                     const driver = block.driver;
                     const opt = block.args;
-                    if (!driver.isPart) {
-                        const place = allocator.allocate(opt);
-                        driver.arrange(block, place, undefined);
-                    }
-                    else
-                        allocator.lineFeed();
-                    const host = driver.isPart ? owner : partHost;
+                    const host = driver.isRow ? owner : partHost;
                     redeploy = markToRedeployIfNecessary(redeploy, host, item, children, sequential);
                     const priority = (_a = opt === null || opt === void 0 ? void 0 : opt.priority) !== null && _a !== void 0 ? _a : Priority.SyncP0;
                     if (priority === Priority.SyncP0)
@@ -329,7 +394,7 @@ function runRenderNestedTreesThenDo(error, action) {
                         p1 = push(item, p1);
                     else
                         p2 = push(item, p2);
-                    if (ownerIsBlock && driver.isPart)
+                    if (ownerIsBlock && driver.isRow)
                         partHost = block;
                 }
                 if (!Transaction.isCanceled && (p1 !== undefined || p2 !== undefined))
@@ -430,7 +495,6 @@ function prepareRender(item, redeploy, sequential) {
             }
             driver.initialize(block, undefined);
             driver.deploy(block, sequential);
-            driver.arrange(block, block.place, undefined);
         });
     }
     else if (redeploy)
@@ -446,8 +510,13 @@ function runRender(item) {
             try {
                 block.stamp++;
                 block.numerator = 0;
+                block.assignedCells = undefined;
                 block.children.beginMerge();
                 result = block.driver.render(block);
+                if (block.driver.isRow)
+                    block.host.cursor.lineFeed();
+                else if (block.assignedCells === undefined)
+                    block.cells = undefined;
                 if (result instanceof Promise)
                     result.then(v => { runRenderNestedTreesThenDo(undefined, NOP); return v; }, e => { console.log(e); runRenderNestedTreesThenDo(e !== null && e !== void 0 ? e : new Error("unknown error"), NOP); });
                 else

package/build/dist/source/core/api.d.ts

@@ -1,5 +1,5 @@
 export * from "./Utils";
 export * from "./CellRange";
-export * from "./Allocator";
+export * from "./Cursor";
 export * from "./Restyler";
 export * from "./VBlock";

package/build/dist/source/core/api.js

@@ -1,5 +1,5 @@
 export * from "./Utils";
 export * from "./CellRange";
-export * from "./Allocator";
+export * from "./Cursor";
 export * from "./Restyler";
 export * from "./VBlock";

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

@@ -1,4 +1,4 @@
-import { VBlock, Place, BlockArgs } from "../core/api";
+import { VBlock, BlockArgs, Align, CellRange } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
 export declare function Block<M = unknown, R = void>(name: string, args: BlockArgs<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
 export declare function PlainText(content: string, name?: string, args?: BlockArgs<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
@@ -8,6 +8,16 @@ export declare function Line<T = void>(claim: (x: void) => T): VBlock<HTMLElemen
 export declare function lineFeed(args?: BlockArgs<HTMLElement, void, void>, noCoalescing?: boolean): VBlock<HTMLElement>;
 export declare function Group<M = unknown, R = void>(name: string, args: BlockArgs<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
 export declare class VerstakDriver<T extends HTMLElement> extends HtmlDriver<T> {
-    arrange(block: VBlock<T>, place: Place | undefined, heightGrowth: number | undefined): void;
+    applyCellRange(block: VBlock<T>, cellRange: CellRange | undefined): void;
+    applyWidthGrowth(block: VBlock<T>, widthGrowth: number): void;
+    applyWidthMin(block: VBlock<T>, widthMin: string): void;
+    applyWidthMax(block: VBlock<T>, widthMax: string): void;
+    applyHeightGrowth(block: VBlock<T>, heightGrowth: number): void;
+    applyHeightMin(block: VBlock<T>, heightMin: string): void;
+    applyHeightMax(block: VBlock<T>, heightMax: string): void;
+    applyAlignContent(block: VBlock<T>, alignContent: Align): void;
+    applyAlignFrame(block: VBlock<T>, alignFrame: Align): void;
+    applyWrapContent(block: VBlock<T>, wrapContent: boolean): void;
+    applyDangling(block: VBlock<T>, dangling: boolean): void;
     render(block: VBlock<T>): void | Promise<void>;
 }

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

@@ -1,4 +1,4 @@
-import { VBlock, LayoutKind, To, GridBasedAllocator, asComponent } from "../core/api";
+import { VBlock, LayoutKind, Align, GridCursor, asComponent } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
 export function Block(name, args) {
     return VBlock.claim(name, VerstakTags.block, args);
@@ -33,102 +33,90 @@ export function Group(name, args) {
     return VBlock.claim(name, VerstakTags.group, args);
 }
 export class VerstakDriver extends HtmlDriver {
-    arrange(block, place, heightGrowth) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-        const native = block.native;
-        if (native) {
-            if (heightGrowth === undefined) {
-                const ex = block.stamp > 1 ? block.place : undefined;
-                if (place !== ex) {
-                    const css = native.style;
-                    const exact = place === null || place === void 0 ? void 0 : place.exact;
-                    if (exact !== (ex === null || ex === void 0 ? void 0 : ex.exact)) {
-                        if (exact) {
-                            const x1 = exact.x1 || 1;
-                            const y1 = exact.y1 || 1;
-                            const x2 = exact.x2 || x1;
-                            const y2 = exact.y2 || y1;
-                            css.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
-                        }
-                        else
-                            css.gridArea = "";
-                    }
-                    const widthGrowth = (_a = place === null || place === void 0 ? void 0 : place.widthGrowth) !== null && _a !== void 0 ? _a : 0;
-                    if (widthGrowth !== ((_b = ex === null || ex === void 0 ? void 0 : ex.widthGrowth) !== null && _b !== void 0 ? _b : 0)) {
-                        if (widthGrowth > 0) {
-                            css.flexGrow = `${widthGrowth}`;
-                            css.flexBasis = "0";
-                        }
-                        else {
-                            css.flexGrow = "";
-                            css.flexBasis = "";
-                        }
-                    }
-                    const widthMin = (_c = place === null || place === void 0 ? void 0 : place.widthMin) !== null && _c !== void 0 ? _c : "";
-                    if (widthMin !== ((_d = ex === null || ex === void 0 ? void 0 : ex.widthMin) !== null && _d !== void 0 ? _d : ""))
-                        css.minWidth = `${widthMin}`;
-                    const widthMax = (_e = place === null || place === void 0 ? void 0 : place.widthMax) !== null && _e !== void 0 ? _e : "";
-                    if (widthMax !== ((_f = ex === null || ex === void 0 ? void 0 : ex.widthMax) !== null && _f !== void 0 ? _f : ""))
-                        css.maxWidth = `${widthMax}`;
-                    const heightMin = (_g = place === null || place === void 0 ? void 0 : place.heightMin) !== null && _g !== void 0 ? _g : "";
-                    if (heightMin !== ((_h = ex === null || ex === void 0 ? void 0 : ex.heightMin) !== null && _h !== void 0 ? _h : ""))
-                        css.minHeight = `${heightMin}`;
-                    const heightMax = (_j = place === null || place === void 0 ? void 0 : place.heightMax) !== null && _j !== void 0 ? _j : "";
-                    if (heightMax !== ((_k = ex === null || ex === void 0 ? void 0 : ex.heightMax) !== null && _k !== void 0 ? _k : ""))
-                        css.maxHeight = `${heightMax}`;
-                    const alignContent = (_l = place === null || place === void 0 ? void 0 : place.alignContent) !== null && _l !== void 0 ? _l : To.Default;
-                    if (alignContent !== ((_m = ex === null || ex === void 0 ? void 0 : ex.alignContent) !== null && _m !== void 0 ? _m : To.Default)) {
-                        if ((alignContent & To.Default) === 0) {
-                            const v = AlignToCss[(alignContent >> 2) & 0b11];
-                            const h = AlignToCss[alignContent & 0b11];
-                            const t = TextAlignCss[alignContent & 0b11];
-                            css.justifyContent = v;
-                            css.alignItems = h;
-                            css.textAlign = t;
-                        }
-                        else
-                            css.justifyContent = css.alignContent = css.textAlign = "";
-                    }
-                    const heightGrowth = (_o = place === null || place === void 0 ? void 0 : place.heightGrowth) !== null && _o !== void 0 ? _o : 0;
-                    const alignFrame = (_p = place === null || place === void 0 ? void 0 : place.alignFrame) !== null && _p !== void 0 ? _p : To.Default;
-                    if (alignFrame !== ((_q = ex === null || ex === void 0 ? void 0 : ex.alignFrame) !== null && _q !== void 0 ? _q : To.Default) ||
-                        heightGrowth !== ((_r = ex === null || ex === void 0 ? void 0 : ex.heightGrowth) !== null && _r !== void 0 ? _r : 0)) {
-                        if ((alignFrame & To.Default) === 0) {
-                            const v = AlignToCss[(alignFrame >> 2) & 0b11];
-                            const h = AlignToCss[alignFrame & 0b11];
-                            css.alignSelf = v;
-                            css.justifySelf = h;
-                        }
-                        else if (heightGrowth > 0) {
-                            css.alignSelf = AlignToCss[To.Fit];
-                        }
-                        else
-                            css.alignSelf = css.justifySelf = "";
-                    }
-                    const wrapping = (_s = place === null || place === void 0 ? void 0 : place.wrapping) !== null && _s !== void 0 ? _s : false;
-                    if (wrapping !== ((_t = ex === null || ex === void 0 ? void 0 : ex.wrapping) !== null && _t !== void 0 ? _t : false)) {
-                        if (wrapping)
-                            native.setAttribute("wrapping", "true");
-                        else
-                            native.removeAttribute("wrapping");
-                    }
-                    const floating = (_u = place === null || place === void 0 ? void 0 : place.floating) !== null && _u !== void 0 ? _u : false;
-                    if (floating !== ((_v = ex === null || ex === void 0 ? void 0 : ex.floating) !== null && _v !== void 0 ? _v : false)) {
-                        if (floating)
-                            native.setAttribute("floating", "true");
-                        else
-                            native.removeAttribute("floating");
-                    }
-                }
-            }
-            else {
-                if (heightGrowth > 0)
-                    block.native.style.flexGrow = `${heightGrowth}`;
-                else
-                    block.native.style.flexGrow = "";
-            }
+    applyCellRange(block, cellRange) {
+        const css = block.native.style;
+        if (cellRange) {
+            const x1 = cellRange.x1 || 1;
+            const y1 = cellRange.y1 || 1;
+            const x2 = cellRange.x2 || x1;
+            const y2 = cellRange.y2 || y1;
+            css.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
         }
-        super.arrange(block, place, heightGrowth);
+        else
+            css.gridArea = "";
+        super.applyCellRange(block, cellRange);
+    }
+    applyWidthGrowth(block, widthGrowth) {
+        const css = block.native.style;
+        if (widthGrowth > 0) {
+            css.flexGrow = `${widthGrowth}`;
+            css.flexBasis = "0";
+        }
+        else {
+            css.flexGrow = "";
+            css.flexBasis = "";
+        }
+    }
+    applyWidthMin(block, widthMin) {
+        block.native.style.minWidth = `${widthMin}`;
+    }
+    applyWidthMax(block, widthMax) {
+        block.native.style.maxWidth = `${widthMax}`;
+    }
+    applyHeightGrowth(block, heightGrowth) {
+        if (block.driver.isRow) {
+            const css = block.native.style;
+            if (heightGrowth > 0)
+                css.flexGrow = `${heightGrowth}`;
+            else
+                css.flexGrow = "";
+        }
+        else if (block.host.driver.isRow) {
+            block.driver.applyAlignFrame(block, Align.Stretch);
+            block.host.driver.applyHeightGrowth(block.host, heightGrowth);
+        }
+    }
+    applyHeightMin(block, heightMin) {
+        block.native.style.minHeight = `${heightMin}`;
+    }
+    applyHeightMax(block, heightMax) {
+        block.native.style.maxHeight = `${heightMax}`;
+    }
+    applyAlignContent(block, alignContent) {
+        const css = block.native.style;
+        if ((alignContent & Align.Default) === 0) {
+            const v = AlignToCss[(alignContent >> 2) & 0b11];
+            const h = AlignToCss[alignContent & 0b11];
+            const t = TextAlignCss[alignContent & 0b11];
+            css.justifyContent = v;
+            css.alignItems = h;
+            css.textAlign = t;
+        }
+        else
+            css.justifyContent = css.alignContent = css.textAlign = "";
+    }
+    applyAlignFrame(block, alignFrame) {
+        const css = block.native.style;
+        if ((alignFrame & Align.Default) === 0) {
+            const v = AlignToCss[(alignFrame >> 2) & 0b11];
+            const h = AlignToCss[alignFrame & 0b11];
+            css.alignSelf = v;
+            css.justifySelf = h;
+        }
+        else
+            css.alignSelf = css.justifySelf = "";
+    }
+    applyWrapContent(block, wrapContent) {
+        if (wrapContent)
+            block.native.setAttribute("wrapping", "true");
+        else
+            block.native.removeAttribute("wrapping");
+    }
+    applyDangling(block, dangling) {
+        if (dangling)
+            block.native.setAttribute("dangling", "true");
+        else
+            block.native.removeAttribute("dangling");
     }
     render(block) {
         if (block.driver.layout < LayoutKind.Row)
@@ -139,7 +127,7 @@ export class VerstakDriver extends HtmlDriver {
 const VerstakTags = {
     block: new VerstakDriver("v-block", LayoutKind.Block),
     text: new VerstakDriver("v-text", LayoutKind.Text),
-    grid: new VerstakDriver("v-grid", LayoutKind.Grid, () => new GridBasedAllocator()),
+    grid: new VerstakDriver("v-grid", LayoutKind.Grid, () => new GridCursor()),
     row: new VerstakDriver("v-row", LayoutKind.Row),
     group: new VerstakDriver("v-group", LayoutKind.Group),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verstak",
-  "version": "0.22.509",
+  "version": "0.22.511",
   "description": "Verstak - Front-End Library",
   "publisher": "Nezaboodka Software",
   "license": "Apache-2.0",

package/build/dist/source/core/Allocator.d.ts

@@ -1,68 +0,0 @@
-import { CellRange } from "./CellRange";
-export declare enum To {
-    Fit = 0,
-    Left = 1,
-    Center = 2,
-    Right = 3,
-    Top = 4,
-    CenterV = 8,
-    Bottom = 12,
-    Default = 16
-}
-export interface ElasticSize {
-    cells?: number;
-    min?: string;
-    max?: string;
-    growth?: number;
-}
-export interface TrackSize extends ElasticSize {
-    track?: string | number;
-}
-export interface Bounds {
-    place?: string;
-    widthSpan?: number;
-    widthMin?: string;
-    widthMax?: string;
-    widthGrowth?: number;
-    widthOverlap?: boolean;
-    heightSpan?: number;
-    heightMin?: string;
-    heightMax?: string;
-    heightGrowth?: number;
-    heightOverlap?: boolean;
-    alignContent?: To;
-    alignFrame?: To;
-    wrapping?: boolean;
-    floating?: boolean;
-}
-export interface Place {
-    exact: CellRange | undefined;
-    widthMin: string;
-    widthMax: string;
-    widthGrowth: number;
-    heightMin: string;
-    heightMax: string;
-    heightGrowth: number;
-    alignContent: To;
-    alignFrame: To;
-    wrapping: boolean;
-    floating: boolean;
-}
-export declare class Allocator {
-    reset(): void;
-    lineFeed(): void;
-    allocate(bounds: Bounds | undefined): Place | undefined;
-}
-export declare class GridBasedAllocator implements Allocator {
-    private maxColumnCount;
-    private maxRowCount;
-    private actualColumnCount;
-    private actualRowCount;
-    private columnCursor;
-    private rowCursor;
-    private newRowCursor;
-    reset(): void;
-    lineFeed(): void;
-    allocate(bounds: Bounds | undefined): Place | undefined;
-}
-export declare function equalPlaces(a: Place | undefined, b: Place | undefined): boolean;

package/build/dist/source/core/Allocator.js

@@ -1,145 +0,0 @@
-import { parseCellRange } from "./CellRange";
-export var To;
-(function (To) {
-    To[To["Fit"] = 0] = "Fit";
-    To[To["Left"] = 1] = "Left";
-    To[To["Center"] = 2] = "Center";
-    To[To["Right"] = 3] = "Right";
-    To[To["Top"] = 4] = "Top";
-    To[To["CenterV"] = 8] = "CenterV";
-    To[To["Bottom"] = 12] = "Bottom";
-    To[To["Default"] = 16] = "Default";
-})(To || (To = {}));
-export class Allocator {
-    reset() {
-    }
-    lineFeed() {
-    }
-    allocate(bounds) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return !bounds ? undefined : {
-            exact: bounds.place ? parseCellRange(bounds.place, { x1: 0, y1: 0, x2: 0, y2: 0 }) : undefined,
-            widthMin: (_a = bounds.widthMin) !== null && _a !== void 0 ? _a : "",
-            widthMax: (_b = bounds.widthMax) !== null && _b !== void 0 ? _b : "",
-            widthGrowth: (_c = bounds.widthGrowth) !== null && _c !== void 0 ? _c : 0,
-            heightMin: (_d = bounds.heightMin) !== null && _d !== void 0 ? _d : "",
-            heightMax: (_e = bounds.heightMax) !== null && _e !== void 0 ? _e : "",
-            heightGrowth: (_f = bounds.heightGrowth) !== null && _f !== void 0 ? _f : 0,
-            alignContent: (_g = bounds.alignContent) !== null && _g !== void 0 ? _g : To.Default,
-            alignFrame: (_h = bounds.alignFrame) !== null && _h !== void 0 ? _h : To.Default,
-            wrapping: (_j = bounds.wrapping) !== null && _j !== void 0 ? _j : false,
-            floating: (_k = bounds.floating) !== null && _k !== void 0 ? _k : false,
-        };
-    }
-}
-export class GridBasedAllocator {
-    constructor() {
-        this.maxColumnCount = 0;
-        this.maxRowCount = 0;
-        this.actualColumnCount = 0;
-        this.actualRowCount = 0;
-        this.columnCursor = 0;
-        this.rowCursor = 0;
-        this.newRowCursor = 0;
-    }
-    reset() {
-        this.maxColumnCount = 0;
-        this.maxRowCount = 0;
-        this.actualColumnCount = 0;
-        this.actualRowCount = 0;
-        this.columnCursor = 0;
-        this.rowCursor = 0;
-        this.newRowCursor = 0;
-    }
-    lineFeed() {
-        this.columnCursor = 0;
-        this.rowCursor = this.newRowCursor;
-    }
-    allocate(bounds) {
-        var _a, _b, _c, _d, _e, _f;
-        const result = {
-            exact: undefined,
-            widthMin: "", widthMax: "", widthGrowth: 0,
-            heightMin: "", heightMax: "", heightGrowth: 0,
-            alignContent: (_a = bounds === null || bounds === void 0 ? void 0 : bounds.alignContent) !== null && _a !== void 0 ? _a : To.Default,
-            alignFrame: (_b = bounds === null || bounds === void 0 ? void 0 : bounds.alignFrame) !== null && _b !== void 0 ? _b : To.Default,
-            wrapping: (_c = bounds === null || bounds === void 0 ? void 0 : bounds.wrapping) !== null && _c !== void 0 ? _c : false,
-            floating: (_d = bounds === null || bounds === void 0 ? void 0 : bounds.floating) !== null && _d !== void 0 ? _d : false,
-        };
-        if (bounds === null || bounds === void 0 ? void 0 : bounds.place) {
-            result.exact = parseCellRange(bounds.place, { x1: 0, y1: 0, x2: 0, y2: 0 });
-            absolutizeCellRange(result.exact, this.columnCursor + 1, this.rowCursor + 1, this.maxColumnCount || Infinity, this.maxRowCount || Infinity, result.exact);
-        }
-        else {
-            const totalColumnCount = this.maxColumnCount !== 0 ? this.maxColumnCount : this.actualColumnCount;
-            const totalRowCount = this.maxRowCount !== 0 ? this.maxRowCount : this.actualRowCount;
-            const cr = result.exact = { x1: 0, y1: 0, x2: 0, y2: 0 };
-            let w = (_e = bounds === null || bounds === void 0 ? void 0 : bounds.widthSpan) !== null && _e !== void 0 ? _e : 1;
-            if (w === 0)
-                w = totalColumnCount || 1;
-            if (w >= 0) {
-                cr.x1 = this.columnCursor + 1;
-                cr.x2 = absolutizePosition(cr.x1 + w - 1, 0, this.maxColumnCount || Infinity);
-                if (!(bounds === null || bounds === void 0 ? void 0 : bounds.widthOverlap))
-                    this.columnCursor = cr.x2;
-            }
-            else {
-                cr.x1 = Math.max(this.columnCursor + w, 1);
-                cr.x2 = this.columnCursor;
-            }
-            let h = (_f = bounds === null || bounds === void 0 ? void 0 : bounds.heightSpan) !== null && _f !== void 0 ? _f : 1;
-            if (h === 0)
-                h = totalRowCount || 1;
-            if (h >= 0) {
-                cr.y1 = this.rowCursor + 1;
-                cr.y2 = absolutizePosition(cr.y1 + h - 1, 0, this.maxRowCount || Infinity);
-                if (!(bounds === null || bounds === void 0 ? void 0 : bounds.heightOverlap) && cr.y2 > this.newRowCursor)
-                    this.newRowCursor = cr.y2;
-            }
-            else {
-                cr.y1 = Math.max(this.rowCursor + h, 1);
-                cr.y2 = this.rowCursor;
-            }
-        }
-        return result;
-    }
-}
-function absolutizeCellRange(area, cursorX, cursorY, maxWidth, maxHeight, result) {
-    const x1 = absolutizePosition(area.x1, cursorX, maxWidth);
-    const x2 = absolutizePosition(area.x2, x1, maxWidth);
-    if (x1 <= x2)
-        result.x1 = x1, result.x2 = x2;
-    else
-        result.x1 = x2, result.x2 = x1;
-    const y1 = absolutizePosition(area.y1, cursorY, maxHeight);
-    const y2 = absolutizePosition(area.y2, y1, maxHeight);
-    if (y1 <= y2)
-        result.y1 = y1, result.y2 = y2;
-    else
-        result.y1 = y2, result.y2 = y1;
-    return result;
-}
-function absolutizePosition(pos, cursor, max) {
-    if (pos === 0)
-        pos = cursor;
-    else if (pos < 0)
-        pos = Math.max(max + pos, 1);
-    else
-        pos = Math.min(pos, max);
-    return pos;
-}
-export function equalPlaces(a, b) {
-    let result;
-    if (a) {
-        if (b) {
-            result = a.widthGrowth == b.widthGrowth;
-        }
-        else
-            result = false;
-    }
-    else if (b)
-        result = false;
-    else
-        result = true;
-    return result;
-}