@thi.ng/imgui 2.3.3 → 3.0.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-09-19T21:09:34Z
+- **Last updated**: 2024-10-03T15:37:53Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,13 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+# [3.0.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/imgui@3.0.0) (2024-10-03)
+
+#### 🛑 Breaking changes
+
+- update all component/widget functions ([ffe21dd](https://github.com/thi-ng/umbrella/commit/ffe21dd))
+- BREAKING CHANGE: replace function args w/ option objects
+
 ### [2.3.1](https://github.com/thi-ng/umbrella/tree/@thi.ng/imgui@2.3.1) (2024-09-05)
 
 #### 🩹 Bug fixes

package/README.md

@@ -119,15 +119,22 @@ import { toggle } from "@thi.ng/imgui";
 // example state (see @thi.ng/atom)
 const STATE = new History(new Atom({ foo: true }));
 
-//...IMGUI initialization omitted here
+//...IMGUI & layout initialization omitted here
 
 // get atom snapshot
 const curr = STATE.deref();
 
 // toggle component will only return result if user clicked it
-let res = toggle(gui, layout, "foo", curr.foo, false, curr.foo ? "ON" : "OFF");
+let res = toggle({
+    gui,
+    layout,
+    id: "foo",
+    value: curr.foo,
+    label: curr.foo ? "ON" : "OFF"
+});
+
 // conditional immutable update (w/ automatic undo snapshot)
-res !== undefined && STATE.resetIn("foo", res);
+if (res !== undefined) STATE.resetIn("foo", res);
 ```
 
 ### Layout support
@@ -157,6 +164,8 @@ multiple column/row spans.
 The code producing this structure:
 
 ```ts
+import { gridLayout } from "@thi.ng/layout";
+
 // create a single column layout @ position 10,10 / 200px wide
 // the last values are row height and cell spacing
 const layout = gridLayout(10, 10, 200, 1, 16, 4);
@@ -262,7 +271,7 @@ Browser ESM import:
 
 [JSDelivr documentation](https://www.jsdelivr.com/)
 
-Package sizes (brotli'd, pre-treeshake): ESM: 7.14 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 7.43 KB
 
 ## Dependencies
 

package/api.d.ts

@@ -1,4 +1,6 @@
 import type { Predicate } from "@thi.ng/api";
+import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
+import type { IMGUI } from "./gui.js";
 export type Color = string | number | number[];
 export type Hash = number;
 export interface GUITheme {
@@ -26,6 +28,13 @@ export interface GUITheme {
 export interface IMGUIOpts {
     theme?: Partial<GUITheme>;
 }
+export interface ComponentOpts {
+    id: string;
+    gui: IMGUI;
+    layout: IGridLayout<any> | LayoutBox;
+    label?: string;
+    info?: string;
+}
 export declare enum MouseButton {
     LEFT = 1,
     RIGHT = 2,

package/components/button.d.ts

@@ -1,8 +1,12 @@
 import type { IShape } from "@thi.ng/geom";
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
-import type { Hash } from "../api.js";
+import type { ComponentOpts, Hash } from "../api.js";
 import type { IMGUI } from "../gui.js";
-export declare const buttonH: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, label?: string, labelHover?: string | undefined, info?: string) => boolean;
-export declare const buttonV: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, rows: number, label?: string, labelHover?: string | undefined, info?: string) => boolean;
+export interface ButtonOpts extends ComponentOpts {
+    labelHover?: string;
+}
+export declare const buttonH: ({ gui, layout, id, label, labelHover, info, }: ButtonOpts) => boolean;
+export declare const buttonV: ({ gui, layout, rows, id, label, labelHover, info, }: ButtonOpts & {
+    rows: number;
+}) => boolean;
 export declare const buttonRaw: (gui: IMGUI, id: string, shape: IShape, hash: Hash, label?: any, labelHover?: any, info?: string) => boolean;
 //# sourceMappingURL=button.d.ts.map

package/components/button.js

@@ -5,19 +5,14 @@ import { handleButtonKeys, hoverButton } from "../behaviors/button.js";
 import { labelHash } from "../hash.js";
 import { layoutBox } from "../layout.js";
 import { textLabelRaw, textTransformH, textTransformV } from "./textlabel.js";
-const __mkLabel = (gui, tx, id, key, x, y, w, h, hover, label) => gui.resource(
+const buttonH = ({
+  gui,
+  layout,
   id,
-  labelHash(key, label, gui.disabled),
-  () => textLabelRaw(
-    ZERO2,
-    {
-      transform: tx(gui.theme, x, y, w, h),
-      fill: gui.textColor(hover)
-    },
-    label
-  )
-);
-const buttonH = (gui, layout, id, label, labelHover = label, info) => {
+  label,
+  labelHover,
+  info
+}) => {
   const { x, y, w, h } = layoutBox(layout);
   const key = hash([x, y, w, h]);
   return buttonRaw(
@@ -33,7 +28,15 @@ const buttonH = (gui, layout, id, label, labelHover = label, info) => {
     info
   );
 };
-const buttonV = (gui, layout, id, rows, label, labelHover = label, info) => {
+const buttonV = ({
+  gui,
+  layout,
+  rows,
+  id,
+  label,
+  labelHover,
+  info
+}) => {
   const { x, y, w, h } = layoutBox(layout, [1, rows]);
   const key = hash([x, y, w, h]);
   return buttonRaw(
@@ -67,6 +70,18 @@ const buttonRaw = (gui, id, shape, hash2, label, labelHover, info) => {
   gui.lastID = id;
   return !gui.buttons && gui.hotID === id && gui.activeID === id;
 };
+const __mkLabel = (gui, tx, id, key, x, y, w, h, hover, label) => gui.resource(
+  id,
+  labelHash(key, label, gui.disabled),
+  () => textLabelRaw(
+    ZERO2,
+    {
+      transform: tx(gui.theme, x, y, w, h),
+      fill: gui.textColor(hover)
+    },
+    label
+  )
+);
 export {
   buttonH,
   buttonRaw,

package/components/dial.d.ts

@@ -1,7 +1,26 @@
 import type { Fn, Maybe } from "@thi.ng/api";
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
+import type { IGridLayout } from "@thi.ng/layout";
+import type { ComponentOpts } from "../api.js";
 import type { IMGUI } from "../gui.js";
-export declare const dial: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, min: number, max: number, prec: number, val: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
-export declare const dialGroup: (gui: IMGUI, layout: IGridLayout<any>, id: string, min: number, max: number, prec: number, horizontal: boolean, vals: number[], label: string[], fmt?: Fn<number, string>, info?: string[]) => number[] | undefined;
-export declare const dialRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: number, max: number, prec: number, val: number, lx: number, ly: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
+export interface DialOpts extends ComponentOpts {
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    fmt?: Fn<number, string>;
+}
+export declare const dial: ({ gui, layout, id, min, max, step, value, label, fmt, info, }: DialOpts) => Maybe<number>;
+export interface DialGroupOpts extends Omit<DialOpts, "layout" | "value" | "label" | "info"> {
+    layout: IGridLayout<any>;
+    value: number[];
+    label: string[];
+    info?: string[];
+    /**
+     * If true (default), the dials will be arranged horizontally.
+     */
+    horizontal?: boolean;
+    fmt?: Fn<number, string>;
+}
+export declare const dialGroup: (opts: DialGroupOpts) => number[] | undefined;
+export declare const dialRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: number, max: number, step: number, value: number, lx: number, ly: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
 //# sourceMappingURL=dial.d.ts.map

package/components/dial.js

@@ -9,7 +9,18 @@ import { dialVal } from "../behaviors/dial.js";
 import { handleSlider1Keys, isHoverSlider } from "../behaviors/slider.js";
 import { dialValueLabel } from "./textlabel.js";
 import { tooltipRaw } from "./tooltip.js";
-const dial = (gui, layout, id, min, max, prec, val, label, fmt, info) => {
+const dial = ({
+  gui,
+  layout,
+  id,
+  min,
+  max,
+  step,
+  value,
+  label,
+  fmt,
+  info
+}) => {
   const { x, y, w, h, ch } = isLayout(layout) ? layout.nextSquare() : layout;
   return dialRaw(
     gui,
@@ -20,8 +31,8 @@ const dial = (gui, layout, id, min, max, prec, val, label, fmt, info) => {
     h,
     min,
     max,
-    prec,
-    val,
+    step,
+    value,
     gui.theme.pad,
     h + ch / 2 + gui.theme.baseLine,
     label,
@@ -29,24 +40,21 @@ const dial = (gui, layout, id, min, max, prec, val, label, fmt, info) => {
     info
   );
 };
-const dialGroup = (gui, layout, id, min, max, prec, horizontal, vals, label, fmt, info = []) => {
-  const n = vals.length;
-  const nested = horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [1, (layout.rowsForHeight(layout.cellW) + 1) * n]);
+const dialGroup = (opts) => {
+  const { layout, id, value, label, info } = opts;
+  const n = opts.value.length;
+  const nested = opts.horizontal !== false ? layout.nest(n, [n, 1]) : layout.nest(1, [1, (layout.rowsForHeight(layout.cellW) + 1) * n]);
   let res;
   let idx = -1;
   for (let i = 0; i < n; i++) {
-    const v = dial(
-      gui,
-      nested,
-      `${id}-${i}`,
-      min,
-      max,
-      prec,
-      vals[i],
-      label[i],
-      fmt,
-      info[i]
-    );
+    const v = dial({
+      ...opts,
+      layout: nested,
+      id: `${id}-${i}`,
+      value: value[i],
+      label: label[i],
+      info: info?.[i]
+    });
     if (v !== void 0) {
       res = v;
       idx = i;
@@ -54,7 +62,7 @@ const dialGroup = (gui, layout, id, min, max, prec, horizontal, vals, label, fmt
   }
   return res !== void 0 ? [idx, res] : void 0;
 };
-const dialRaw = (gui, id, x, y, w, h, min, max, prec, val, lx, ly, label, fmt, info) => {
+const dialRaw = (gui, id, x, y, w, h, min, max, step, value, lx, ly, label, fmt, info) => {
   const r = Math.min(w, h) / 2;
   const pos = [x + w / 2, y + h / 2];
   const thetaGap = PI / 2;
@@ -64,13 +72,13 @@ const dialRaw = (gui, id, x, y, w, h, min, max, prec, val, lx, ly, label, fmt, i
   const bgShape = gui.resource(id, key, () => circle(pos, r, {}));
   const hover = isHoverSlider(gui, id, bgShape, "pointer");
   const draw = gui.draw;
-  let v = val;
+  let v = value;
   let res;
   if (hover) {
     gui.hotID = id;
     if (gui.isMouseDown()) {
       gui.activeID = id;
-      res = dialVal(gui.mouse, pos, startTheta, thetaGap, min, max, prec);
+      res = dialVal(gui.mouse, pos, startTheta, thetaGap, min, max, step);
     }
     info && draw && tooltipRaw(gui, info);
   }
@@ -105,7 +113,7 @@ const dialRaw = (gui, id, x, y, w, h, min, max, prec, val, lx, ly, label, fmt, i
     valShape.attribs.weight = 2;
     gui.add(bgShape, valShape, valLabel);
   }
-  if (focused && (v = handleSlider1Keys(gui, min, max, prec, v)) !== void 0) {
+  if (focused && (v = handleSlider1Keys(gui, min, max, step, v)) !== void 0) {
     return v;
   }
   gui.lastID = id;

package/components/dropdown.d.ts

@@ -1,15 +1,12 @@
 import type { Maybe } from "@thi.ng/api";
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
-import type { IMGUI } from "../gui.js";
-/**
- *
- * @param gui -
- * @param layout -
- * @param id -
- * @param sel -
- * @param items -
- * @param title -
- * @param info -
- */
-export declare const dropdown: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, sel: number, items: string[], title: string, info?: string) => Maybe<number>;
+import { type ComponentOpts } from "../api.js";
+export interface DropDownOpts extends ComponentOpts {
+    /**
+     * Index of selected item.
+     */
+    value: number;
+    items: string[];
+    title: string;
+}
+export declare const dropdown: ({ gui, layout, id, value, items, title, info, }: DropDownOpts) => Maybe<number>;
 //# sourceMappingURL=dropdown.d.ts.map

package/components/dropdown.js

@@ -5,7 +5,15 @@ import { clamp0 } from "@thi.ng/math/interval";
 import { hash } from "@thi.ng/vectors/hash";
 import { Key } from "../api.js";
 import { buttonH } from "./button.js";
-const dropdown = (gui, layout, id, sel, items, title, info) => {
+const dropdown = ({
+  gui,
+  layout,
+  id,
+  value,
+  items,
+  title,
+  info
+}) => {
   const open = gui.state(id, () => false);
   const nested = isLayout(layout) ? layout.nest(1, [1, open ? items.length : 1]) : gridLayout(layout.x, layout.y, layout.w, 1, layout.ch, layout.gap);
   let res;
@@ -16,7 +24,13 @@ const dropdown = (gui, layout, id, sel, items, title, info) => {
   const ty = y + h / 2;
   const draw = gui.draw;
   if (open) {
-    const bt = buttonH(gui, box, `${id}-title`, title);
+    const bt = buttonH({
+      gui,
+      layout: box,
+      id: `${id}-title`,
+      label: title,
+      info
+    });
     draw && gui.add(
       gui.resource(id, key + 1, () => __triangle(gui, tx, ty, true))
     );
@@ -24,8 +38,13 @@ const dropdown = (gui, layout, id, sel, items, title, info) => {
       gui.setState(id, false);
     } else {
       for (let i = 0, n = items.length; i < n; i++) {
-        if (buttonH(gui, nested, `${id}-${i}`, items[i])) {
-          i !== sel && (res = i);
+        if (buttonH({
+          gui,
+          layout: nested,
+          id: `${id}-${i}`,
+          label: items[i]
+        })) {
+          i !== value && (res = i);
           gui.setState(id, false);
         }
       }
@@ -35,19 +54,26 @@ const dropdown = (gui, layout, id, sel, items, title, info) => {
             gui.setState(id, false);
             break;
           case Key.UP:
-            return __update(gui, id, clamp0(sel - 1));
+            return __update(gui, id, clamp0(value - 1));
           case Key.DOWN:
             return __update(
               gui,
               id,
-              Math.min(items.length - 1, sel + 1)
+              Math.min(items.length - 1, value + 1)
             );
           default:
         }
       }
     }
   } else {
-    if (buttonH(gui, box, `${id}-${sel}`, items[sel], title, info)) {
+    if (buttonH({
+      gui,
+      layout: box,
+      id: `${id}-${value}`,
+      label: items[value],
+      labelHover: title,
+      info
+    })) {
       gui.setState(id, true);
     }
     draw && gui.add(

package/components/icon-button.d.ts

@@ -1,4 +1,7 @@
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
-import type { IMGUI } from "../gui.js";
-export declare const iconButton: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, icon: any, iconW: number, iconH: number, label?: string, info?: string) => boolean;
+import type { ComponentOpts } from "../api.js";
+export interface IconButtonOpts extends ComponentOpts {
+    icon: any;
+    iconSize: [number, number];
+}
+export declare const iconButton: ({ gui, layout, id, icon, iconSize: [iconW, iconH], label, info, }: IconButtonOpts) => boolean;
 //# sourceMappingURL=icon-button.d.ts.map

package/components/icon-button.js

@@ -4,7 +4,15 @@ import { hash } from "@thi.ng/vectors/hash";
 import { mixHash } from "../hash.js";
 import { buttonRaw } from "./button.js";
 import { textLabelRaw } from "./textlabel.js";
-const iconButton = (gui, layout, id, icon, iconW, iconH, label, info) => {
+const iconButton = ({
+  gui,
+  layout,
+  id,
+  icon,
+  iconSize: [iconW, iconH],
+  label,
+  info
+}) => {
   const theme = gui.theme;
   const pad = theme.pad;
   const bodyW = label ? iconW + 3 * pad + gui.textWidth(label) : iconW + 2 * pad;

package/components/radial-menu.d.ts

@@ -1,4 +1,11 @@
 import type { Maybe } from "@thi.ng/api";
-import type { IMGUI } from "../gui.js";
-export declare const radialMenu: (gui: IMGUI, id: string, x: number, y: number, r: number, items: string[], info: string[]) => Maybe<number>;
+import { type ComponentOpts } from "../api.js";
+export interface RadialMenuOpts extends Omit<ComponentOpts, "layout" | "label" | "info"> {
+    x: number;
+    y: number;
+    r: number;
+    items: string[];
+    info?: string[];
+}
+export declare const radialMenu: ({ gui, id, x, y, r, items, info, }: RadialMenuOpts) => Maybe<number>;
 //# sourceMappingURL=radial-menu.d.ts.map

package/components/radial-menu.js

@@ -12,7 +12,15 @@ import { hash } from "@thi.ng/vectors/hash";
 import { Key } from "../api.js";
 import { buttonRaw } from "./button.js";
 import { textLabelRaw } from "./textlabel.js";
-const radialMenu = (gui, id, x, y, r, items, info) => {
+const radialMenu = ({
+  gui,
+  id,
+  x,
+  y,
+  r,
+  items,
+  info
+}) => {
   const n = items.length;
   const key = hash([x, y, r, n, ~~gui.disabled]);
   gui.registerID(id, key);
@@ -36,7 +44,7 @@ const radialMenu = (gui, id, x, y, r, items, info) => {
   for (let i = 0; i < n; i++) {
     const cell = cells[i];
     const _id = id + i;
-    buttonRaw(gui, _id, cell[0], cell[1], cell[2], cell[3], info[i]) && (res = i);
+    buttonRaw(gui, _id, cell[0], cell[1], cell[2], cell[3], info?.[i]) && (res = i);
     gui.focusID === _id && (sel = i);
   }
   if (sel !== -1) {

package/components/radio.d.ts

@@ -1,5 +1,19 @@
 import type { Maybe } from "@thi.ng/api";
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
-import type { IMGUI } from "../gui.js";
-export declare const radio: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, horizontal: boolean, sel: number, square: boolean, labels: string[], info?: string[]) => Maybe<number>;
+import type { ComponentOpts } from "../api.js";
+export interface RadioOpts extends Omit<ComponentOpts, "label" | "info"> {
+    /**
+     * If true (default: false), the radio buttons will be arranged
+     * horizontally.
+     */
+    horizontal?: boolean;
+    /**
+     * If true (default: false), the radio buttons will be square and the labels
+     * positioned next to it.
+     */
+    square?: boolean;
+    value: number;
+    label: string[];
+    info?: string[];
+}
+export declare const radio: ({ gui, layout, id, horizontal, square, value, label, info, }: RadioOpts) => Maybe<number>;
 //# sourceMappingURL=radio.d.ts.map

package/components/radio.js

@@ -1,20 +1,29 @@
 import { isLayout } from "@thi.ng/layout/checks";
 import { gridLayout } from "@thi.ng/layout/grid-layout";
 import { toggle } from "./toggle.js";
-const radio = (gui, layout, id, horizontal, sel, square, labels, info = []) => {
-  const n = labels.length;
+const radio = ({
+  gui,
+  layout,
+  id,
+  horizontal,
+  square,
+  value,
+  label,
+  info
+}) => {
+  const n = label.length;
   const nested = isLayout(layout) ? horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [1, n]) : horizontal ? gridLayout(layout.x, layout.y, layout.w, n, layout.ch, layout.gap) : gridLayout(layout.x, layout.y, layout.w, 1, layout.ch, layout.gap);
   let res;
   for (let i = 0; i < n; i++) {
-    toggle(
+    toggle({
       gui,
-      nested,
-      `${id}-${i}`,
-      sel === i,
       square,
-      labels[i],
-      info[i]
-    ) !== void 0 && (res = i);
+      layout: nested,
+      id: `${id}-${i}`,
+      value: value === i,
+      label: label[i],
+      info: info?.[i]
+    }) !== void 0 && (res = i);
   }
   return res;
 };

package/components/ramp.d.ts

@@ -1,6 +1,9 @@
 import type { Maybe } from "@thi.ng/api";
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
 import type { Ramp } from "@thi.ng/ramp";
-import type { IMGUI } from "../gui.js";
-export declare const ramp: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, ramp: Ramp<number>, rampMode?: number, info?: string) => Maybe<Ramp<number>>;
+import { type ComponentOpts } from "../api.js";
+export interface RampOpts extends Omit<ComponentOpts, "label"> {
+    ramp: Ramp<number>;
+    mode?: number;
+}
+export declare const ramp: ({ gui, layout, id, ramp, mode, info }: RampOpts) => Maybe<Ramp<number>>;
 //# sourceMappingURL=ramp.d.ts.map

package/components/ramp.js

@@ -15,8 +15,8 @@ import { Key } from "../api.js";
 import { isHoverSlider } from "../behaviors/slider.js";
 import { layoutBox } from "../layout.js";
 import { tooltipRaw } from "./tooltip.js";
-const ramp = (gui, layout, id, ramp2, rampMode = 0, info) => {
-  let { x, y, w, h } = layoutBox(layout);
+const ramp = ({ gui, layout, id, ramp: ramp2, mode = 0, info }) => {
+  const { x, y, w, h } = layoutBox(layout);
   const maxX = x + w;
   const maxY = y + h;
   const pos = [x, maxY];
@@ -61,7 +61,7 @@ const ramp = (gui, layout, id, ramp2, rampMode = 0, info) => {
       box,
       gui.resource(
         id,
-        hash(stops.flatMap((x2) => x2)) + rampMode,
+        hash(stops.flatMap((x2) => x2)) + mode,
         () => polygon(
           [
             [x, maxY],

package/components/ring.d.ts

@@ -1,7 +1,27 @@
 import type { Fn, Maybe } from "@thi.ng/api";
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
+import type { IGridLayout } from "@thi.ng/layout";
+import type { ComponentOpts } from "../api.js";
 import type { IMGUI } from "../gui.js";
-export declare const ring: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, min: number, max: number, prec: number, val: number, thetaGap: number, rscale: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
-export declare const ringGroup: (gui: IMGUI, layout: IGridLayout<any>, id: string, min: number, max: number, prec: number, horizontal: boolean, thetaGap: number, rscale: number, vals: number[], label: string[], fmt?: Fn<number, string>, info?: string[]) => number[] | undefined;
+export interface RingOpts extends ComponentOpts {
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    gap?: number;
+    rscale?: number;
+    fmt?: Fn<number, string>;
+}
+export declare const ring: ({ gui, layout, id, min, max, step, value, gap, rscale, label, info, fmt, }: RingOpts) => Maybe<number>;
+export interface RingGroupOpts extends Omit<RingOpts, "layout" | "value" | "label" | "info"> {
+    layout: IGridLayout<any>;
+    /**
+     * If true (default), the controls will be arranged horizontally.
+     */
+    horizontal?: boolean;
+    value: number[];
+    label: string[];
+    info?: string[];
+}
+export declare const ringGroup: (opts: RingGroupOpts) => number[] | undefined;
 export declare const ringRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: number, max: number, prec: number, val: number, thetaGap: number, rscale: number, lx: number, ly: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
 //# sourceMappingURL=ring.d.ts.map

package/components/ring.js

@@ -12,21 +12,27 @@ import { dialVal } from "../behaviors/dial.js";
 import { handleSlider1Keys } from "../behaviors/slider.js";
 import { dialValueLabel } from "./textlabel.js";
 import { tooltipRaw } from "./tooltip.js";
-const __ringHeight = (w, thetaGap) => w / 2 * (1 + Math.sin(HALF_PI + thetaGap / 2));
-const __arcVerts = (o, r, start, end, thetaRes = 12) => r > 1 ? map(
-  (t) => cartesian2(null, [r, mix(start, end, t)], o),
-  normRange(
-    Math.max(1, Math.abs(end - start) / (PI / thetaRes)) | 0
-  )
-) : [o];
-const ring = (gui, layout, id, min, max, prec, val, thetaGap, rscale, label, fmt, info) => {
+const ring = ({
+  gui,
+  layout,
+  id,
+  min,
+  max,
+  step,
+  value,
+  gap = Math.PI,
+  rscale = 0.5,
+  label,
+  info,
+  fmt
+}) => {
   let h;
   let box;
   if (isLayout(layout)) {
-    h = __ringHeight(layout.cellW, thetaGap);
+    h = __ringHeight(layout.cellW, gap);
     box = layout.next([1, layout.rowsForHeight(h) + 1]);
   } else {
-    h = __ringHeight(layout.cw, thetaGap);
+    h = __ringHeight(layout.cw, gap);
     box = layout;
   }
   return ringRaw(
@@ -38,9 +44,9 @@ const ring = (gui, layout, id, min, max, prec, val, thetaGap, rscale, label, fmt
     h,
     min,
     max,
-    prec,
-    val,
-    thetaGap,
+    step,
+    value,
+    gap,
     rscale,
     0,
     h + box.ch / 2 + gui.theme.baseLine,
@@ -49,29 +55,26 @@ const ring = (gui, layout, id, min, max, prec, val, thetaGap, rscale, label, fmt
     info
   );
 };
-const ringGroup = (gui, layout, id, min, max, prec, horizontal, thetaGap, rscale, vals, label, fmt, info = []) => {
-  const n = vals.length;
-  const nested = horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [
+const ringGroup = (opts) => {
+  const { layout, id, value, label, info } = opts;
+  const n = value.length;
+  const nested = opts.horizontal !== false ? layout.nest(n, [n, 1]) : layout.nest(1, [
     1,
-    (layout.rowsForHeight(__ringHeight(layout.cellW, thetaGap)) + 1) * n
+    (layout.rowsForHeight(
+      __ringHeight(layout.cellW, opts.gap ?? Math.PI)
+    ) + 1) * n
   ]);
   let res;
   let idx = -1;
   for (let i = 0; i < n; i++) {
-    const v = ring(
-      gui,
-      nested,
-      `${id}-${i}`,
-      min,
-      max,
-      prec,
-      vals[i],
-      thetaGap,
-      rscale,
-      label[i],
-      fmt,
-      info[i]
-    );
+    const v = ring({
+      ...opts,
+      layout: nested,
+      id: `${id}-${i}`,
+      value: value[i],
+      label: label[i],
+      info: info?.[i]
+    });
     if (v !== void 0) {
       res = v;
       idx = i;
@@ -135,6 +138,13 @@ const ringRaw = (gui, id, x, y, w, h, min, max, prec, val, thetaGap, rscale, lx,
   gui.lastID = id;
   return res;
 };
+const __ringHeight = (w, thetaGap) => w / 2 * (1 + Math.sin(HALF_PI + thetaGap / 2));
+const __arcVerts = (o, r, start, end, thetaRes = 12) => r > 1 ? map(
+  (t) => cartesian2(null, [r, mix(start, end, t)], o),
+  normRange(
+    Math.max(1, Math.abs(end - start) / (PI / thetaRes)) | 0
+  )
+) : [o];
 export {
   ring,
   ringGroup,

package/components/sliderh.d.ts

@@ -1,7 +1,25 @@
 import type { Fn, Maybe } from "@thi.ng/api";
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
+import type { IGridLayout } from "@thi.ng/layout";
+import type { ComponentOpts } from "../api.js";
 import type { IMGUI } from "../gui.js";
-export declare const sliderH: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, min: number, max: number, prec: number, val: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
-export declare const sliderHGroup: (gui: IMGUI, layout: IGridLayout<any>, id: string, min: number, max: number, prec: number, horizontal: boolean, vals: number[], label: string[], fmt?: Fn<number, string>, info?: string[]) => number[] | undefined;
+export interface SliderOpts extends ComponentOpts {
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    fmt?: Fn<number, string>;
+}
+export declare const sliderH: ({ gui, layout, id, min, max, step, value, label, info, fmt, }: SliderOpts) => Maybe<number>;
+export interface SliderGroupOpts extends Omit<SliderOpts, "layout" | "value" | "label" | "info"> {
+    layout: IGridLayout<any>;
+    /**
+     * If true (default: false), the sliders will be arranged horizontally.
+     */
+    horizontal?: boolean;
+    value: number[];
+    label: string[];
+    info?: string[];
+}
+export declare const sliderHGroup: (opts: SliderGroupOpts) => number[] | undefined;
 export declare const sliderHRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: number, max: number, prec: number, val: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
 //# sourceMappingURL=sliderh.d.ts.map

package/components/sliderh.js

@@ -10,7 +10,18 @@ import { valHash } from "../hash.js";
 import { layoutBox } from "../layout.js";
 import { textLabelRaw } from "./textlabel.js";
 import { tooltipRaw } from "./tooltip.js";
-const sliderH = (gui, layout, id, min, max, prec, val, label, fmt, info) => {
+const sliderH = ({
+  gui,
+  layout,
+  id,
+  min,
+  max,
+  step,
+  value,
+  label,
+  info,
+  fmt
+}) => {
   const box = layoutBox(layout);
   return sliderHRaw(
     gui,
@@ -21,31 +32,28 @@ const sliderH = (gui, layout, id, min, max, prec, val, label, fmt, info) => {
     box.h,
     min,
     max,
-    prec,
-    val,
+    step,
+    value,
     label,
     fmt,
     info
   );
 };
-const sliderHGroup = (gui, layout, id, min, max, prec, horizontal, vals, label, fmt, info = []) => {
-  const n = vals.length;
-  const nested = horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [1, n]);
+const sliderHGroup = (opts) => {
+  const { layout, id, value, label, info } = opts;
+  const n = value.length;
+  const nested = opts.horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [1, n]);
   let res;
   let idx = -1;
   for (let i = 0; i < n; i++) {
-    const v = sliderH(
-      gui,
-      nested,
-      `${id}-${i}`,
-      min,
-      max,
-      prec,
-      vals[i],
-      label[i],
-      fmt,
-      info[i]
-    );
+    const v = sliderH({
+      ...opts,
+      layout: nested,
+      id: `${id}-${i}`,
+      value: value[i],
+      label: label[i],
+      info: info?.[i]
+    });
     if (v !== void 0) {
       res = v;
       idx = i;

package/components/sliderv.d.ts

@@ -1,7 +1,12 @@
 import type { Fn, Maybe } from "@thi.ng/api";
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
 import type { IMGUI } from "../gui.js";
-export declare const sliderV: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, min: number, max: number, prec: number, val: number, rows: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
-export declare const sliderVGroup: (gui: IMGUI, layout: IGridLayout<any>, id: string, min: number, max: number, prec: number, vals: number[], rows: number, label: string[], fmt?: Fn<number, string>, info?: string[]) => number[] | undefined;
+import type { SliderGroupOpts, SliderOpts } from "./sliderh.js";
+export declare const sliderV: ({ gui, layout, id, rows, min, max, step, value, label, info, fmt, }: SliderOpts & {
+    rows: number;
+}) => Maybe<number>;
+export interface SliderVGroupOpts extends Omit<SliderGroupOpts, "horizontal"> {
+    rows: number;
+}
+export declare const sliderVGroup: (opts: SliderVGroupOpts) => number[] | undefined;
 export declare const sliderVRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: number, max: number, prec: number, val: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
 //# sourceMappingURL=sliderv.d.ts.map

package/components/sliderv.js

@@ -11,7 +11,19 @@ import { valHash } from "../hash.js";
 import { layoutBox } from "../layout.js";
 import { textLabelRaw, textTransformV } from "./textlabel.js";
 import { tooltipRaw } from "./tooltip.js";
-const sliderV = (gui, layout, id, min, max, prec, val, rows, label, fmt, info) => {
+const sliderV = ({
+  gui,
+  layout,
+  id,
+  rows,
+  min,
+  max,
+  step,
+  value,
+  label,
+  info,
+  fmt
+}) => {
   const box = layoutBox(layout, [1, rows]);
   return sliderVRaw(
     gui,
@@ -22,32 +34,28 @@ const sliderV = (gui, layout, id, min, max, prec, val, rows, label, fmt, info) =
     box.h,
     min,
     max,
-    prec,
-    val,
+    step,
+    value,
     label,
     fmt,
     info
   );
 };
-const sliderVGroup = (gui, layout, id, min, max, prec, vals, rows, label, fmt, info = []) => {
-  const n = vals.length;
-  const nested = layout.nest(n, [1, rows]);
+const sliderVGroup = (opts) => {
+  const { id, value, label, info } = opts;
+  const n = value.length;
+  const layout = opts.layout.nest(n, [1, opts.rows]);
   let res;
   let idx = -1;
   for (let i = 0; i < n; i++) {
-    const v = sliderV(
-      gui,
-      nested,
-      `${id}-${i}`,
-      min,
-      max,
-      prec,
-      vals[i],
-      rows,
-      label[i],
-      fmt,
-      info[i]
-    );
+    const v = sliderV({
+      ...opts,
+      layout,
+      id: `${id}-${i}`,
+      value: value[i],
+      label: label[i],
+      info: info?.[i]
+    });
     if (v !== void 0) {
       res = v;
       idx = i;

package/components/textfield.d.ts

@@ -1,6 +1,10 @@
 import type { Predicate } from "@thi.ng/api";
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
+import type { ComponentOpts } from "../api.js";
 import type { IMGUI } from "../gui.js";
-export declare const textField: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, label: string, filter?: Predicate<string>, info?: string) => string | undefined;
+export interface TextfieldOpts extends Omit<ComponentOpts, "label"> {
+    value: string;
+    filter?: Predicate<string>;
+}
+export declare const textField: ({ gui, layout, id, value, info, filter, }: TextfieldOpts) => string | undefined;
 export declare const textFieldRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, txt: string, filter?: Predicate<string>, info?: string) => string | undefined;
 //# sourceMappingURL=textfield.d.ts.map

package/components/textfield.js

@@ -6,7 +6,14 @@ import { handleTextfieldKeys } from "../behaviors/text.js";
 import { layoutBox } from "../layout.js";
 import { textLabelRaw } from "./textlabel.js";
 import { tooltipRaw } from "./tooltip.js";
-const textField = (gui, layout, id, label, filter = () => true, info) => {
+const textField = ({
+  gui,
+  layout,
+  id,
+  value,
+  info,
+  filter = () => true
+}) => {
   const box = layoutBox(layout);
   return textFieldRaw(
     gui,
@@ -15,7 +22,7 @@ const textField = (gui, layout, id, label, filter = () => true, info) => {
     box.y,
     box.w,
     box.h,
-    label,
+    value,
     filter,
     info
   );

package/components/toggle.d.ts

@@ -1,19 +1,14 @@
 import type { Maybe } from "@thi.ng/api";
-import type { IGridLayout, LayoutBox } from "@thi.ng/layout";
+import type { ComponentOpts } from "../api.js";
 import type { IMGUI } from "../gui.js";
-/**
- * If `square` is true, the clickable area will not fill the entire
- * cell, but only a left-aligned square of cell/row height.
- *
- * @param gui -
- * @param layout -
- * @param id -
- * @param val -
- * @param i -
- * @param square -
- * @param label -
- * @param info -
- */
-export declare const toggle: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, id: string, val: boolean, square?: boolean, label?: string, info?: string) => Maybe<boolean>;
+export interface ToggleOpts extends ComponentOpts {
+    /**
+     * If `square` is true (default: false), the clickable area will not fill
+     * the entire cell, but only a left-aligned square of cell/row height.
+     */
+    square?: boolean;
+    value: boolean;
+}
+export declare const toggle: ({ gui, layout, id, value, square, label, info, }: ToggleOpts) => Maybe<boolean>;
 export declare const toggleRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, lx: number, val: boolean, label?: string, info?: string) => Maybe<boolean>;
 //# sourceMappingURL=toggle.d.ts.map

package/components/toggle.js

@@ -3,7 +3,15 @@ import { hash } from "@thi.ng/vectors/hash";
 import { handleButtonKeys, hoverButton } from "../behaviors/button.js";
 import { layoutBox } from "../layout.js";
 import { textLabelRaw } from "./textlabel.js";
-const toggle = (gui, layout, id, val, square, label, info) => {
+const toggle = ({
+  gui,
+  layout,
+  id,
+  value,
+  square,
+  label,
+  info
+}) => {
   const { x, y, w, h } = layoutBox(layout);
   return toggleRaw(
     gui,
@@ -13,7 +21,7 @@ const toggle = (gui, layout, id, val, square, label, info) => {
     square ? h : w,
     h,
     square ? h : 0,
-    val,
+    value,
     label,
     info
   );

package/components/xypad.d.ts

@@ -1,27 +1,28 @@
 import type { Fn, Maybe } from "@thi.ng/api";
 import type { IGridLayout } from "@thi.ng/layout";
-import type { Vec } from "@thi.ng/vectors";
+import type { ReadonlyVec, Vec } from "@thi.ng/vectors";
+import type { ComponentOpts } from "../api.js";
 import type { IMGUI } from "../gui.js";
-/**
- * `mode` interpretation:
- *
- * - -2 = square
- * - -1 = proportional height (snapped to rows)
- * - >0 = fixed row height
- *
- * @param gui -
- * @param layout -
- * @param id -
- * @param min -
- * @param max -
- * @param prec -
- * @param val -
- * @param mode -
- * @param yUp -
- * @param label -
- * @param fmt -
- * @param info -
- */
-export declare const xyPad: (gui: IMGUI, layout: IGridLayout<any>, id: string, min: Vec, max: Vec, prec: number, val: Vec, mode: number, yUp: boolean, label?: string, fmt?: Fn<Vec, string>, info?: string) => Maybe<Vec>;
+export interface XYPadOpts extends Omit<ComponentOpts, "layout"> {
+    layout: IGridLayout<any>;
+    min: ReadonlyVec;
+    max: ReadonlyVec;
+    step: number;
+    value: Vec;
+    /**
+     * If `square` (default), the component will allocate a square, if `prop` an
+     * area of proportional height (snapped to rows). If given a number > 0, the
+     * component will occupy the given number of rows.
+     */
+    mode?: "square" | "prop" | number;
+    /**
+     * If true (default), the top-right corner of the XY pad corresponds to the
+     * configured {@link XYPadOpts.max} value. Otherwise, the bottom-right
+     * corner is used.
+     */
+    yUp?: boolean;
+    fmt?: Fn<Vec, string>;
+}
+export declare const xyPad: ({ gui, layout, id, min, max, step, value, mode, yUp, label, info, fmt, }: XYPadOpts) => Maybe<Vec>;
 export declare const xyPadRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: Vec, max: Vec, prec: number, val: Vec, yUp: boolean | undefined, lx: number, ly: number, label?: string, fmt?: Fn<Vec, string>, info?: string) => Maybe<Vec>;
 //# sourceMappingURL=xypad.d.ts.map

package/components/xypad.js

@@ -9,14 +9,27 @@ import {
 } from "../behaviors/slider.js";
 import { textLabelRaw } from "./textlabel.js";
 import { tooltipRaw } from "./tooltip.js";
-const xyPad = (gui, layout, id, min, max, prec, val, mode, yUp, label, fmt, info) => {
+const xyPad = ({
+  gui,
+  layout,
+  id,
+  min,
+  max,
+  step,
+  value,
+  mode = "square",
+  yUp = true,
+  label,
+  info,
+  fmt
+}) => {
   let box;
   const ch = layout.cellH;
   const gap = layout.gap;
-  if (mode === -2) {
+  if (mode === "square") {
     box = layout.nextSquare();
   } else {
-    let rows = (mode > 0 ? mode : layout.cellW / (ch + gap)) | 0;
+    const rows = mode === "prop" ? layout.cellW / (ch + gap) | 0 : mode;
     box = layout.next([1, rows + 1]);
     box.h -= ch + gap;
   }
@@ -29,8 +42,8 @@ const xyPad = (gui, layout, id, min, max, prec, val, mode, yUp, label, fmt, info
     box.h,
     min,
     max,
-    prec,
-    val,
+    step,
+    value,
     yUp,
     0,
     box.h + gap + ch / 2 + gui.theme.baseLine,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/imgui",
-  "version": "2.3.3",
+  "version": "3.0.0",
   "description": "Immediate mode GUI with flexible state handling & data only shape output",
   "type": "module",
   "module": "./index.js",
@@ -160,5 +160,5 @@
     ],
     "year": 2019
   },
-  "gitHead": "b52baa3750ddd1256892df966ab7ac9b4806a9ef\n"
+  "gitHead": "dadc6e71940c091e50fbf9f88ea3ba115d3937df\n"
 }