feat(imgui): remove layout, update imports, readme

- all layout features migrated to new @thi.ng/layout pkg
thi-ng · Feb 13, 2020 · c89a6d8 · c89a6d8
1 parent 1822eb3
commit c89a6d8
Show file tree

Hide file tree

Showing 18 changed files with 71 additions and 331 deletions.
diff --git a/packages/imgui/README.md b/packages/imgui/README.md
@@ -1,6 +1,6 @@
 <!-- This file is generated - DO NOT EDIT! -->
 
-# ![@thi.ng/imgui](https://media.thi.ng/umbrella/banners/thing-imgui.svg?1581297789)
+# ![@thi.ng/imgui](https://media.thi.ng/umbrella/banners/thing-imgui.svg?1581555259)
 
 [![npm version](https://img.shields.io/npm/v/@thi.ng/imgui.svg)](https://www.npmjs.com/package/@thi.ng/imgui)
 ![npm downloads](https://img.shields.io/npm/dm/@thi.ng/imgui.svg)
@@ -119,25 +119,27 @@ res !== undefined && STATE.resetIn("foo", res);
 
 ### Layout support
 
-Most component functions exist in two versions: Using a layout manager
-or not (`Raw` suffix, e.g. `buttonRaw`). The latter versions are more
-"low-level" & verbose to use, but offer complete layout freedom and are
-re-used by other component types.
-
-Currently, this package features only a single grid layout type, but
-components are not hard-coded to require it, and those which do need a
-layout manager only expect a `ILayout` or `IGridLayout` interface,
-allowing for custom implementations. Furthermore / alternatively, we
-also define a simple [`LayoutBox`
+Most component functions exist in two versions: Using a
+[@thi.ng/layout](https://github.com/thi-ng/umbrella/tree/master/packages/layout)-compatible
+grid layout manager or not (e.g. `dial` vs. `dialRaw`). The latter
+versions are more "low-level" & verbose to use, but offer complete
+layout freedom and are re-used by other component types.
+
+The components in this package not needing a layout manager are only
+expecting a `ILayout` or `IGridLayout` interface, allowing for custom
+implementations. Furthermore / alternatively, the
+[@thi.ng/layout](https://github.com/thi-ng/umbrella/tree/develop/packages/layout)
+package also defines a [`LayoutBox`
 interface](https://github.com/thi-ng/umbrella/tree/develop/packages/imgui/src/api.ts),
-which can be passed instead and too is what `ILayout` implementations
-are expected to produce when allocating space for a component.
+which can be passed instead and too is the type `ILayout`
+implementations are expected to produce when allocating space for a
+component.
 
 The `GridLayout` class supports infinite nesting and column/row-based
 space allocation, based on an initial configuration and supporting
 multiple column/row spans.
 
-![screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/master/assets/imgui/imgui-layout.png)
+![screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/layout/grid-layout.png)
 
 The code producing this structure:
 
@@ -225,7 +227,7 @@ Some of the most obvious missing features:
 yarn add @thi.ng/imgui
 ```
 
-Package sizes (gzipped): ESM: 7.0KB / CJS: 7.2KB / UMD: 7.2KB
+Package sizes (gzipped): ESM: 6.6KB / CJS: 6.8KB / UMD: 6.7KB
 
 ## Dependencies
 
@@ -235,6 +237,7 @@ Package sizes (gzipped): ESM: 7.0KB / CJS: 7.2KB / UMD: 7.2KB
 - [@thi.ng/geom-api](https://github.com/thi-ng/umbrella/tree/develop/packages/geom-api)
 - [@thi.ng/geom-isec](https://github.com/thi-ng/umbrella/tree/develop/packages/geom-isec)
 - [@thi.ng/geom-tessellate](https://github.com/thi-ng/umbrella/tree/develop/packages/geom-tessellate)
+- [@thi.ng/layout](https://github.com/thi-ng/umbrella/tree/develop/packages/layout)
 - [@thi.ng/math](https://github.com/thi-ng/umbrella/tree/develop/packages/math)
 - [@thi.ng/transducers](https://github.com/thi-ng/umbrella/tree/develop/packages/transducers)
 - [@thi.ng/vectors](https://github.com/thi-ng/umbrella/tree/develop/packages/vectors)

diff --git a/packages/imgui/README.tpl.md b/packages/imgui/README.tpl.md
@@ -104,25 +104,27 @@ res !== undefined && STATE.resetIn("foo", res);
 
 ### Layout support
 
-Most component functions exist in two versions: Using a layout manager
-or not (`Raw` suffix, e.g. `buttonRaw`). The latter versions are more
-"low-level" & verbose to use, but offer complete layout freedom and are
-re-used by other component types.
-
-Currently, this package features only a single grid layout type, but
-components are not hard-coded to require it, and those which do need a
-layout manager only expect a `ILayout` or `IGridLayout` interface,
-allowing for custom implementations. Furthermore / alternatively, we
-also define a simple [`LayoutBox`
+Most component functions exist in two versions: Using a
+[@thi.ng/layout](https://github.com/thi-ng/umbrella/tree/master/packages/layout)-compatible
+grid layout manager or not (e.g. `dial` vs. `dialRaw`). The latter
+versions are more "low-level" & verbose to use, but offer complete
+layout freedom and are re-used by other component types.
+
+The components in this package not needing a layout manager are only
+expecting a `ILayout` or `IGridLayout` interface, allowing for custom
+implementations. Furthermore / alternatively, the
+[@thi.ng/layout](https://github.com/thi-ng/umbrella/tree/develop/packages/layout)
+package also defines a [`LayoutBox`
 interface](https://github.com/thi-ng/umbrella/tree/develop/packages/imgui/src/api.ts),
-which can be passed instead and too is what `ILayout` implementations
-are expected to produce when allocating space for a component.
+which can be passed instead and too is the type `ILayout`
+implementations are expected to produce when allocating space for a
+component.
 
 The `GridLayout` class supports infinite nesting and column/row-based
 space allocation, based on an initial configuration and supporting
 multiple column/row spans.
 
-![screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/master/assets/imgui/imgui-layout.png)
+![screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/layout/grid-layout.png)
 
 The code producing this structure:
 

diff --git a/packages/imgui/package.json b/packages/imgui/package.json
@@ -44,6 +44,7 @@
         "@thi.ng/geom-api": "^1.0.1",
         "@thi.ng/geom-isec": "^0.4.1",
         "@thi.ng/geom-tessellate": "^0.2.12",
+        "@thi.ng/layout": "^0.0.1",
         "@thi.ng/math": "^1.6.0",
         "@thi.ng/transducers": "^6.2.1",
         "@thi.ng/vectors": "^4.0.3"

diff --git a/packages/imgui/src/api.ts b/packages/imgui/src/api.ts
@@ -1,5 +1,4 @@
 import { Predicate } from "@thi.ng/api";
-import { ReadonlyVec } from "@thi.ng/vectors";
 
 export type Color = string | number | number[];
 
@@ -32,123 +31,6 @@ export interface IMGUIOpts {
     theme?: Partial<GUITheme>;
 }
 
-export interface LayoutBox {
-    /**
-     * Top-left corner X
-     */
-    x: number;
-    /**
-     * Top-left corner Y
-     */
-    y: number;
-    /**
-     * Box width (based on requested col span and inner gutter(s))
-     */
-    w: number;
-    /**
-     * Box height (based on requested row span and inner gutter(s))
-     */
-    h: number;
-    /**
-     * Single cell column width (always w/o col span), based on
-     * layout's available space and configured number of columns.
-     */
-    cw: number;
-    /**
-     * Single cell row height (always same as `rowHeight` arg given to
-     * layout ctor).
-     */
-    ch: number;
-    /**
-     * Gutter size.
-     */
-    gap: number;
-}
-
-export interface ILayout<O, T> {
-    next(opts?: O): T;
-}
-
-export interface IGridLayout extends ILayout<[number, number], LayoutBox> {
-    readonly x: number;
-    readonly y: number;
-    readonly width: number;
-    readonly cols: number;
-    readonly cellW: number;
-    readonly cellH: number;
-    readonly gap: number;
-
-    /**
-     * Returns the number of columns for given width.
-     *
-     * @param width -
-     */
-    colsForWidth(width: number): number;
-
-    /**
-     * Returns the number of rows for given height.
-     *
-     * @param height -
-     */
-    rowsForHeight(height: number): number;
-
-    /**
-     * Calculates the required number of columns & rows for the given
-     * size.
-     *
-     * @param size -
-     */
-    spansForSize(size: ReadonlyVec): [number, number];
-    spansForSize(w: number, h: number): [number, number];
-
-    /**
-     * Returns a squared {@link LayoutBox} based on this layout's column
-     * width. This box will consume `ceil(columnWidth / rowHeight)`
-     * rows, but the returned box height might be less to satisfy the
-     * square constraint.
-     */
-    nextSquare(): LayoutBox;
-
-    /**
-     * Requests a `spans` sized cell from this layout (via `.next()`)
-     * and creates and returns a new child {@link GridLayout} for the returned
-     * box / grid cell. This child layout is configured to use `cols`
-     * columns and shares same `gap` as this (parent) layout. The
-     * configured row span only acts as initial minimum vertical space
-     * reseervation, but is allowed to grow and if needed will propagate
-     * the new space requirements to parent layouts.
-     *
-     * Note: this size child-parent size propagation ONLY works until
-     * the next cell is requested from any parent. IOW, child layouts
-     * MUST be completed/populated first before continuing with
-     * siblings/ancestors of this current layout.
-     *
-     * ```
-     * // single column layout (default config)
-     * const outer = gridLayout(null, 0, 0, 200, 1, 16, 4);
-     *
-     * // add button (full 1st row)
-     * button(gui, outer, "foo",...);
-     *
-     * // 2-column nested layout (2nd row)
-     * const inner = outer.nest(2)
-     * // these buttons are on same row
-     * button(gui, inner, "bar",...);
-     * button(gui, inner, "baz",...);
-     *
-     * // continue with outer, create empty row
-     * outer.next();
-     *
-     * // continue with outer (4th row)
-     * button(gui, outer, "bye",...);
-     * ```
-     *
-     * @param cols - columns in nested layout
-     * @param spans - default [1, 1] (i.e. size of single cell)
-     */
-    nest(cols: number, spans?: [number, number]): IGridLayout;
-}
-
 export const enum MouseButton {
     LEFT = 1,
     RIGHT = 2,

diff --git a/packages/imgui/src/components/button.ts b/packages/imgui/src/components/button.ts
@@ -1,16 +1,11 @@
 import { rect } from "@thi.ng/geom";
 import { IShape } from "@thi.ng/geom-api";
+import { IGridLayout, isLayout, LayoutBox } from "@thi.ng/layout";
 import { hash, ZERO2 } from "@thi.ng/vectors";
-import {
-    Color,
-    Hash,
-    IGridLayout,
-    LayoutBox
-} from "../api";
+import { Color, Hash } from "../api";
 import { handleButtonKeys, isHoverButton } from "../behaviors/button";
 import { IMGUI } from "../gui";
 import { labelHash } from "../hash";
-import { isLayout } from "../layout";
 import { textLabelRaw, textTransformH, textTransformV } from "./textlabel";
 import { tooltipRaw } from "./tooltip";
 

diff --git a/packages/imgui/src/components/dial.ts b/packages/imgui/src/components/dial.ts
@@ -1,18 +1,17 @@
 import { Fn } from "@thi.ng/api";
 import { circle, line } from "@thi.ng/geom";
+import { IGridLayout, isLayout, LayoutBox } from "@thi.ng/layout";
 import {
     HALF_PI,
     norm,
     PI,
     TAU
 } from "@thi.ng/math";
 import { cartesian2, hash } from "@thi.ng/vectors";
-import { IGridLayout, LayoutBox } from "../api";
 import { dialVal } from "../behaviors/dial";
 import { handleSlider1Keys, isHoverSlider } from "../behaviors/slider";
 import { IMGUI } from "../gui";
 import { valHash } from "../hash";
-import { isLayout } from "../layout";
 import { textLabelRaw } from "./textlabel";
 import { tooltipRaw } from "./tooltip";
 

diff --git a/packages/imgui/src/components/dropdown.ts b/packages/imgui/src/components/dropdown.ts
@@ -1,8 +1,13 @@
 import { polygon } from "@thi.ng/geom";
+import {
+    gridLayout,
+    IGridLayout,
+    isLayout,
+    LayoutBox
+} from "@thi.ng/layout";
 import { hash } from "@thi.ng/vectors";
-import { IGridLayout, Key, LayoutBox } from "../api";
+import { Key } from "../api";
 import { IMGUI } from "../gui";
-import { gridLayout, isLayout } from "../layout";
 import { buttonH } from "./button";
 
 /**
@@ -41,7 +46,11 @@ export const dropdown = (
             gui.add(
                 gui.resource(id, key + 1, () =>
                     polygon(
-                        [[tx - 4, ty + 2], [tx + 4, ty + 2], [tx, ty - 2]],
+                        [
+                            [tx - 4, ty + 2],
+                            [tx + 4, ty + 2],
+                            [tx, ty - 2]
+                        ],
                         {
                             fill: gui.textColor(false)
                         }
@@ -82,7 +91,11 @@ export const dropdown = (
             gui.add(
                 gui.resource(id, key + 2, () =>
                     polygon(
-                        [[tx - 4, ty - 2], [tx + 4, ty - 2], [tx, ty + 2]],
+                        [
+                            [tx - 4, ty - 2],
+                            [tx + 4, ty - 2],
+                            [tx, ty + 2]
+                        ],
                         {
                             fill: gui.textColor(false)
                         }

diff --git a/packages/imgui/src/components/icon-button.ts b/packages/imgui/src/components/icon-button.ts
@@ -1,9 +1,8 @@
 import { rect } from "@thi.ng/geom";
+import { IGridLayout, isLayout, LayoutBox } from "@thi.ng/layout";
 import { hash } from "@thi.ng/vectors";
-import { IGridLayout, LayoutBox } from "../api";
 import { IMGUI } from "../gui";
 import { mixHash } from "../hash";
-import { isLayout } from "../layout";
 import { buttonRaw } from "./button";
 import { textLabelRaw } from "./textlabel";
 

diff --git a/packages/imgui/src/components/radio.ts b/packages/imgui/src/components/radio.ts
@@ -1,6 +1,10 @@
-import { IGridLayout, LayoutBox } from "../api";
+import {
+    gridLayout,
+    IGridLayout,
+    isLayout,
+    LayoutBox
+} from "@thi.ng/layout";
 import { IMGUI } from "../gui";
-import { gridLayout, isLayout } from "../layout";
 import { toggle } from "./toggle";
 
 export const radio = (

diff --git a/packages/imgui/src/components/ring.ts b/packages/imgui/src/components/ring.ts
@@ -1,6 +1,7 @@
 import { Fn } from "@thi.ng/api";
 import { polygon } from "@thi.ng/geom";
 import { pointInRect } from "@thi.ng/geom-isec";
+import { IGridLayout, isLayout, LayoutBox } from "@thi.ng/layout";
 import {
     fitClamped,
     HALF_PI,
@@ -11,12 +12,10 @@ import {
 } from "@thi.ng/math";
 import { map, normRange } from "@thi.ng/transducers";
 import { cartesian2, hash, Vec } from "@thi.ng/vectors";
-import { IGridLayout, LayoutBox } from "../api";
 import { dialVal } from "../behaviors/dial";
 import { handleSlider1Keys } from "../behaviors/slider";
 import { IMGUI } from "../gui";
 import { valHash } from "../hash";
-import { isLayout } from "../layout";
 import { textLabelRaw } from "./textlabel";
 import { tooltipRaw } from "./tooltip";
 

diff --git a/packages/imgui/src/components/sliderh.ts b/packages/imgui/src/components/sliderh.ts
@@ -1,12 +1,11 @@
 import { Fn } from "@thi.ng/api";
 import { rect } from "@thi.ng/geom";
+import { IGridLayout, isLayout, LayoutBox } from "@thi.ng/layout";
 import { fit, norm } from "@thi.ng/math";
 import { hash } from "@thi.ng/vectors";
-import { IGridLayout, LayoutBox } from "../api";
 import { handleSlider1Keys, isHoverSlider, slider1Val } from "../behaviors/slider";
 import { IMGUI } from "../gui";
 import { valHash } from "../hash";
-import { isLayout } from "../layout";
 import { textLabelRaw } from "./textlabel";
 import { tooltipRaw } from "./tooltip";
 

diff --git a/packages/imgui/src/components/sliderv.ts b/packages/imgui/src/components/sliderv.ts
@@ -1,12 +1,11 @@
 import { Fn } from "@thi.ng/api";
 import { rect } from "@thi.ng/geom";
+import { IGridLayout, isLayout, LayoutBox } from "@thi.ng/layout";
 import { fit, norm } from "@thi.ng/math";
 import { hash, ZERO2 } from "@thi.ng/vectors";
-import { IGridLayout, LayoutBox } from "../api";
 import { handleSlider1Keys, isHoverSlider, slider1Val } from "../behaviors/slider";
 import { IMGUI } from "../gui";
 import { valHash } from "../hash";
-import { isLayout } from "../layout";
 import { textLabelRaw, textTransformV } from "./textlabel";
 import { tooltipRaw } from "./tooltip";