@thi.ng/layout 3.0.6 → 3.0.7

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-12-09T19:12:03Z
+- **Last updated**: 2023-12-11T10:07:09Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.

package/api.js

@@ -1 +0,0 @@
-export {};

package/box.js

@@ -1,10 +1,13 @@
-export const layoutBox = (x, y, w, h, cw, ch, gap, span) => ({
-    x,
-    y,
-    w,
-    h,
-    cw,
-    ch,
-    gap,
-    span: span || [~~(w / cw), ~~(h / ch)],
+const layoutBox = (x, y, w, h, cw, ch, gap, span) => ({
+  x,
+  y,
+  w,
+  h,
+  cw,
+  ch,
+  gap,
+  span: span || [~~(w / cw), ~~(h / ch)]
 });
+export {
+  layoutBox
+};

package/checks.js

@@ -1,2 +1,5 @@
 import { implementsFunction } from "@thi.ng/checks/implements-function";
-export const isLayout = (x) => implementsFunction(x, "next");
+const isLayout = (x) => implementsFunction(x, "next");
+export {
+  isLayout
+};

package/grid-layout.js

@@ -1,107 +1,99 @@
 import { isNumber } from "@thi.ng/checks/is-number";
-/** @internal */
-export const __DEFAULT_SPANS = [1, 1];
-export class GridLayout {
-    parent;
-    cols;
-    width;
-    x;
-    y;
-    cellW;
-    cellH;
-    cellWG;
-    cellHG;
-    gap;
-    currCol;
-    currRow;
-    rows;
-    constructor(parent, x, y, width, cols, rowH, gap) {
-        this.parent = parent;
-        this.cols = cols;
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.cellW = (width - (cols - 1) * gap) / cols;
-        this.cellH = rowH;
-        this.cellWG = this.cellW + gap;
-        this.cellHG = rowH + gap;
-        this.gap = gap;
+const __DEFAULT_SPANS = [1, 1];
+class GridLayout {
+  parent;
+  cols;
+  width;
+  x;
+  y;
+  cellW;
+  cellH;
+  cellWG;
+  cellHG;
+  gap;
+  currCol;
+  currRow;
+  rows;
+  constructor(parent, x, y, width, cols, rowH, gap) {
+    this.parent = parent;
+    this.cols = cols;
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.cellW = (width - (cols - 1) * gap) / cols;
+    this.cellH = rowH;
+    this.cellWG = this.cellW + gap;
+    this.cellHG = rowH + gap;
+    this.gap = gap;
+    this.currCol = 0;
+    this.currRow = 0;
+    this.rows = 0;
+  }
+  colsForWidth(w) {
+    return Math.ceil(w / this.cellWG);
+  }
+  rowsForHeight(h) {
+    return Math.ceil(h / this.cellHG);
+  }
+  spanForSize(w, h) {
+    const size = isNumber(w) ? [w, h] : w;
+    return [this.colsForWidth(size[0]), this.rowsForHeight(size[1])];
+  }
+  next(spans = __DEFAULT_SPANS) {
+    const { cellWG, cellHG, gap, cols } = this;
+    const cspan = Math.min(spans[0], cols);
+    const rspan = spans[1];
+    if (this.currCol > 0) {
+      if (this.currCol + cspan > cols) {
         this.currCol = 0;
-        this.currRow = 0;
-        this.rows = 0;
-    }
-    colsForWidth(w) {
-        return Math.ceil(w / this.cellWG);
-    }
-    rowsForHeight(h) {
-        return Math.ceil(h / this.cellHG);
-    }
-    spanForSize(w, h) {
-        const size = isNumber(w) ? [w, h] : w;
-        return [this.colsForWidth(size[0]), this.rowsForHeight(size[1])];
-    }
-    next(spans = __DEFAULT_SPANS) {
-        const { cellWG, cellHG, gap, cols } = this;
-        const cspan = Math.min(spans[0], cols);
-        const rspan = spans[1];
-        if (this.currCol > 0) {
-            if (this.currCol + cspan > cols) {
-                this.currCol = 0;
-                this.currRow = this.rows;
-            }
-        }
-        else {
-            this.currRow = this.rows;
-        }
-        const h = rspan * cellHG - gap;
-        const cell = {
-            x: this.x + this.currCol * cellWG,
-            y: this.y + this.currRow * cellHG,
-            w: cspan * cellWG - gap,
-            h,
-            cw: this.cellW,
-            ch: this.cellH,
-            gap,
-            span: [cspan, rspan],
-        };
-        this.propagateSize(rspan);
-        this.currCol = Math.min(this.currCol + cspan, cols) % cols;
-        return cell;
-    }
-    // TODO add optional colspan arg, fix rounding
-    nextSquare() {
-        const box = this.next([
-            1,
-            Math.ceil(this.cellW / (this.cellH + this.gap)) + 1,
-        ]);
-        box.h = box.w;
-        return box;
-    }
-    nest(cols, spans, gap = this.gap) {
-        const { x, y, w } = this.next(spans);
-        return new GridLayout(this, x, y, w, cols, this.cellH, gap);
-    }
-    /**
-     * Updates max rows used in this layout and all of its parents.
-     *
-     * @param rspan -
-     */
-    propagateSize(rspan) {
-        let rows = this.rows;
-        this.rows = rows = Math.max(rows, this.currRow + rspan);
-        const parent = this.parent;
-        parent && parent.propagateSize(rows);
+        this.currRow = this.rows;
+      }
+    } else {
+      this.currRow = this.rows;
     }
+    const h = rspan * cellHG - gap;
+    const cell = {
+      x: this.x + this.currCol * cellWG,
+      y: this.y + this.currRow * cellHG,
+      w: cspan * cellWG - gap,
+      h,
+      cw: this.cellW,
+      ch: this.cellH,
+      gap,
+      span: [cspan, rspan]
+    };
+    this.propagateSize(rspan);
+    this.currCol = Math.min(this.currCol + cspan, cols) % cols;
+    return cell;
+  }
+  // TODO add optional colspan arg, fix rounding
+  nextSquare() {
+    const box = this.next([
+      1,
+      Math.ceil(this.cellW / (this.cellH + this.gap)) + 1
+    ]);
+    box.h = box.w;
+    return box;
+  }
+  nest(cols, spans, gap = this.gap) {
+    const { x, y, w } = this.next(spans);
+    return new GridLayout(this, x, y, w, cols, this.cellH, gap);
+  }
+  /**
+   * Updates max rows used in this layout and all of its parents.
+   *
+   * @param rspan -
+   */
+  propagateSize(rspan) {
+    let rows = this.rows;
+    this.rows = rows = Math.max(rows, this.currRow + rspan);
+    const parent = this.parent;
+    parent && parent.propagateSize(rows);
+  }
 }
-/**
- * Syntax sugar for {@link GridLayout} ctor. By default creates a
- * single-column layout at given position and width.
- *
- * @param x -
- * @param y -
- * @param width -
- * @param cols -
- * @param rowH -
- * @param gap -
- */
-export const gridLayout = (x, y, width, cols = 1, rowH = 16, gap = 4) => new GridLayout(null, x, y, width, cols, rowH, gap);
+const gridLayout = (x, y, width, cols = 1, rowH = 16, gap = 4) => new GridLayout(null, x, y, width, cols, rowH, gap);
+export {
+  GridLayout,
+  __DEFAULT_SPANS,
+  gridLayout
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/layout",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "Configurable nested 2D grid layout generators",
   "type": "module",
   "module": "./index.js",
@@ -24,7 +24,9 @@
   "author": "Karsten Schmidt (https://thi.ng)",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "yarn clean && tsc --declaration",
+    "build": "yarn build:esbuild && yarn build:decl",
+    "build:decl": "tsc --declaration --emitDeclarationOnly",
+    "build:esbuild": "esbuild --format=esm --platform=neutral --target=es2022 --tsconfig=tsconfig.json --outdir=. src/**/*.ts",
     "clean": "rimraf --glob '*.js' '*.d.ts' '*.map' doc",
     "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
     "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -33,11 +35,12 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/arrays": "^2.7.7",
-    "@thi.ng/checks": "^3.4.11"
+    "@thi.ng/arrays": "^2.7.8",
+    "@thi.ng/checks": "^3.4.12"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
+    "esbuild": "^0.19.8",
     "rimraf": "^5.0.5",
     "tools": "^0.0.1",
     "typedoc": "^0.25.4",
@@ -91,5 +94,5 @@
     ],
     "year": 2019
   },
-  "gitHead": "25f2ac8ff795a432a930119661b364d4d93b59a0\n"
+  "gitHead": "5e7bafedfc3d53bc131469a28de31dd8e5b4a3ff\n"
 }

package/stacked-layout.js

@@ -1,111 +1,91 @@
 import { argMax, argMin } from "@thi.ng/arrays/argmin";
 import { GridLayout, __DEFAULT_SPANS } from "./grid-layout.js";
-/**
- * An extension of {@link GridLayout} which tracks individual column-based
- * heights and so can create more complex, irregular, packed, space-filling
- * layout arrangements. This layout algorithm prioritizes the column(s) with the
- * lowest height.
- *
- * The class also provides a {@link StackedLayout.availableSpan} method to find
- * available space and help equalize columns and fill/allocate any bottom gaps.
- *
- * **IMPORTANT:** As with {@link GridLayout}, nested layouts MUST be completed
- * first before requesting new cells (aka {@link LayoutBox}es) from a parent,
- * otherwise unintended overlaps will occur.
- */
-export class StackedLayout extends GridLayout {
-    offsets;
-    currSpan = 1;
-    constructor(parent, x, y, width, cols, rowH, gap) {
-        super(parent, x, y, width, cols, rowH, gap);
-        this.offsets = new Uint32Array(cols);
+class StackedLayout extends GridLayout {
+  offsets;
+  currSpan = 1;
+  constructor(parent, x, y, width, cols, rowH, gap) {
+    super(parent, x, y, width, cols, rowH, gap);
+    this.offsets = new Uint32Array(cols);
+  }
+  nest(cols, spans, gap = this.gap) {
+    const { x, y, w } = this.next(spans);
+    return new StackedLayout(this, x, y, w, cols, this.cellH, gap);
+  }
+  next(spans = __DEFAULT_SPANS) {
+    const { cellWG, cellHG, gap, cols, offsets } = this;
+    const cspan = Math.min(spans[0], cols);
+    const rspan = spans[1];
+    let minY = Infinity;
+    let maxY = 0;
+    let column = 0;
+    for (let i = 0; i <= cols - cspan; i++) {
+      const chunk = offsets.subarray(i, i + cspan);
+      const maxID = argMax(chunk);
+      const y = chunk[maxID];
+      if (y < minY) {
+        minY = y;
+        maxY = chunk[maxID];
+        column = i;
+      }
     }
-    nest(cols, spans, gap = this.gap) {
-        const { x, y, w } = this.next(spans);
-        return new StackedLayout(this, x, y, w, cols, this.cellH, gap);
-    }
-    next(spans = __DEFAULT_SPANS) {
-        const { cellWG, cellHG, gap, cols, offsets } = this;
-        const cspan = Math.min(spans[0], cols);
-        const rspan = spans[1];
-        let minY = Infinity;
-        let maxY = 0;
-        let column = 0;
-        for (let i = 0; i <= cols - cspan; i++) {
-            const chunk = offsets.subarray(i, i + cspan);
-            const maxID = argMax(chunk);
-            const y = chunk[maxID];
-            if (y < minY) {
-                minY = y;
-                maxY = chunk[maxID];
-                column = i;
-            }
-        }
-        const h = rspan * cellHG - gap;
-        const cell = {
-            x: this.x + column * cellWG,
-            y: this.y + maxY * cellHG,
-            w: cspan * cellWG - gap,
-            h,
-            cw: this.cellW,
-            ch: this.cellH,
-            gap,
-            span: [cspan, rspan],
-        };
-        this.currRow = maxY;
-        this.currCol = column;
-        offsets.fill(maxY + rspan, column, column + cspan);
-        this.currSpan = cspan;
-        this.parent && this.parent.propagateSize(Math.max(...this.offsets));
-        return cell;
-    }
-    /**
-     * Finds the largest available span of free area, such that if it'll be
-     * allocated via {@link StackedLayout.next} or {@link StackedLayout.nest},
-     * the impacted columns will all have the same height, and that height will
-     * match that of the next column after (if any). Repeated use of this method
-     * can be used to fill up (aka equalize) any bottom gaps of a layout
-     * container until all columns are equal. If the function returns a vertical
-     * span of 0, all columns are equalized already.
-     *
-     * @remarks
-     * An optional `maxSpan` can be provided to constrain the returned span (by
-     * default unconstrained).
-     *
-     * @param maxSpan
-     */
-    availableSpan(maxSpan = [Infinity, Infinity]) {
-        const { offsets, cols } = this;
-        const minID = argMin(offsets);
-        const y = offsets[minID];
-        let result;
-        for (let i = minID + 1; i < cols; i++) {
-            if (offsets[i] > y) {
-                result = [i - minID, offsets[i] - y];
-                break;
-            }
-        }
-        if (!result)
-            result = [cols - minID, offsets[argMax(offsets)] - y];
-        result[0] = Math.min(result[0], maxSpan[0]);
-        result[1] = Math.min(result[1], maxSpan[1]);
-        return result;
-    }
-    propagateSize(rspan) {
-        const newY = Math.max(this.currRow + rspan, this.offsets[this.currCol]);
-        this.offsets.fill(newY, this.currCol, this.currCol + this.currSpan);
-        this.parent && this.parent.propagateSize(newY);
+    const h = rspan * cellHG - gap;
+    const cell = {
+      x: this.x + column * cellWG,
+      y: this.y + maxY * cellHG,
+      w: cspan * cellWG - gap,
+      h,
+      cw: this.cellW,
+      ch: this.cellH,
+      gap,
+      span: [cspan, rspan]
+    };
+    this.currRow = maxY;
+    this.currCol = column;
+    offsets.fill(maxY + rspan, column, column + cspan);
+    this.currSpan = cspan;
+    this.parent && this.parent.propagateSize(Math.max(...this.offsets));
+    return cell;
+  }
+  /**
+   * Finds the largest available span of free area, such that if it'll be
+   * allocated via {@link StackedLayout.next} or {@link StackedLayout.nest},
+   * the impacted columns will all have the same height, and that height will
+   * match that of the next column after (if any). Repeated use of this method
+   * can be used to fill up (aka equalize) any bottom gaps of a layout
+   * container until all columns are equal. If the function returns a vertical
+   * span of 0, all columns are equalized already.
+   *
+   * @remarks
+   * An optional `maxSpan` can be provided to constrain the returned span (by
+   * default unconstrained).
+   *
+   * @param maxSpan
+   */
+  availableSpan(maxSpan = [Infinity, Infinity]) {
+    const { offsets, cols } = this;
+    const minID = argMin(offsets);
+    const y = offsets[minID];
+    let result;
+    for (let i = minID + 1; i < cols; i++) {
+      if (offsets[i] > y) {
+        result = [i - minID, offsets[i] - y];
+        break;
+      }
     }
+    if (!result)
+      result = [cols - minID, offsets[argMax(offsets)] - y];
+    result[0] = Math.min(result[0], maxSpan[0]);
+    result[1] = Math.min(result[1], maxSpan[1]);
+    return result;
+  }
+  propagateSize(rspan) {
+    const newY = Math.max(this.currRow + rspan, this.offsets[this.currCol]);
+    this.offsets.fill(newY, this.currCol, this.currCol + this.currSpan);
+    this.parent && this.parent.propagateSize(newY);
+  }
 }
-/**
- * Syntax sugar for {@link StackedLayout} ctor. By default creates a 4-column
- * layout at given position and total width.
- *
- * @param x -
- * @param y -
- * @param width -
- * @param cols -
- * @param rowH -
- * @param gap -
- */
-export const stackedLayout = (x, y, width, cols = 4, rowH = 16, gap = 4) => new StackedLayout(null, x, y, width, cols, rowH, gap);
+const stackedLayout = (x, y, width, cols = 4, rowH = 16, gap = 4) => new StackedLayout(null, x, y, width, cols, rowH, gap);
+export {
+  StackedLayout,
+  stackedLayout
+};