@thi.ng/imgui 3.0.2 → 3.1.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-10-05T12:12:32Z
+- **Last updated**: 2024-10-07T12:32:11Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,20 @@ 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.1.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/imgui@3.1.0) (2024-10-07)
+
+#### 🚀 Features
+
+- clamp value args to min/max range ([ee866b1](https://github.com/thi-ng/umbrella/commit/ee866b1))
+  - update dial, ring, sliders and XY pad components
+  - ensure provided value arg is within limits
+- update ramp component & RampOpts ([953f2fa](https://github.com/thi-ng/umbrella/commit/953f2fa))
+
+#### ♻️ Refactoring
+
+- update DropDownOpts ([fe0f080](https://github.com/thi-ng/umbrella/commit/fe0f080))
+  - rename `title` option => `label`
+
 # [3.0.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/imgui@3.0.0) (2024-10-03)
 
 #### 🛑 Breaking changes

package/behaviors/dial.d.ts

@@ -1,3 +1,3 @@
 import type { ReadonlyVec } from "@thi.ng/vectors";
-export declare const dialVal: (p: ReadonlyVec, c: ReadonlyVec, startTheta: number, thetaGap: number, min: number, max: number, prec: number) => number;
+export declare const dialVal: (p: ReadonlyVec, origin: ReadonlyVec, startTheta: number, thetaGap: number, min: number, max: number, prec: number) => number;
 //# sourceMappingURL=dial.d.ts.map

package/behaviors/dial.js

@@ -3,8 +3,8 @@ import { fit } from "@thi.ng/math/fit";
 import { heading } from "@thi.ng/vectors/heading";
 import { sub2 } from "@thi.ng/vectors/sub";
 import { slider1Val } from "./slider.js";
-const dialVal = (p, c, startTheta, thetaGap, min, max, prec) => {
-  let theta = heading(sub2([], p, c)) - startTheta;
+const dialVal = (p, origin, startTheta, thetaGap, min, max, prec) => {
+  let theta = heading(sub2([], p, origin)) - startTheta;
   theta < -0.5 && (theta += TAU);
   return slider1Val(
     fit(Math.min(theta / (TAU - thetaGap)), 0, 1, min, max),

package/behaviors/slider.d.ts

@@ -5,6 +5,6 @@ import type { IMGUI } from "../gui.js";
 export declare const isHoverSlider: (gui: IMGUI, id: string, shape: IShape, cursor?: string) => boolean;
 export declare const slider1Val: FnN4;
 export declare const slider2Val: (v: Vec, min: Vec, max: Vec, prec: number) => Vec;
-export declare const handleSlider1Keys: (gui: IMGUI, min: number, max: number, prec: number, val: number) => number | undefined;
-export declare const handleSlider2Keys: (gui: IMGUI, min: Vec, max: Vec, prec: number, val: Vec, yUp: boolean) => Vec | undefined;
+export declare const handleSlider1Keys: (gui: IMGUI, min: number, max: number, prec: number, value: number) => number | undefined;
+export declare const handleSlider2Keys: (gui: IMGUI, min: Vec, max: Vec, prec: number, value: Vec, yUp: boolean) => Vec | undefined;
 //# sourceMappingURL=slider.d.ts.map

package/behaviors/slider.js

@@ -17,7 +17,7 @@ const isHoverSlider = (gui, id, shape, cursor = "ew-resize") => {
 };
 const slider1Val = (x, min, max, prec) => clamp(roundTo(x, prec), min, max);
 const slider2Val = (v, min, max, prec) => clamp2(null, roundN2([], v, prec), min, max);
-const handleSlider1Keys = (gui, min, max, prec, val) => {
+const handleSlider1Keys = (gui, min, max, prec, value) => {
   switch (gui.key) {
     case Key.TAB:
       gui.switchFocus();
@@ -25,12 +25,12 @@ const handleSlider1Keys = (gui, min, max, prec, val) => {
     case Key.UP:
     case Key.DOWN: {
       const step = (gui.key === Key.UP ? prec : -prec) * (gui.isShiftDown() ? 5 : 1);
-      return slider1Val(val + step, min, max, prec);
+      return slider1Val(value + step, min, max, prec);
     }
     default:
   }
 };
-const handleSlider2Keys = (gui, min, max, prec, val, yUp) => {
+const handleSlider2Keys = (gui, min, max, prec, value, yUp) => {
   switch (gui.key) {
     case Key.TAB:
       gui.switchFocus();
@@ -38,12 +38,12 @@ const handleSlider2Keys = (gui, min, max, prec, val, yUp) => {
     case Key.LEFT:
     case Key.RIGHT: {
       const step = (gui.key === Key.RIGHT ? prec : -prec) * (gui.isShiftDown() ? 5 : 1);
-      return slider2Val(add2([], val, [step, 0]), min, max, prec);
+      return slider2Val(add2([], value, [step, 0]), min, max, prec);
     }
     case Key.UP:
     case Key.DOWN: {
       const step = (gui.key === Key.UP ? prec : -prec) * (yUp ? 1 : -1) * (gui.isShiftDown() ? 5 : 1);
-      return slider2Val(add2([], val, [0, step]), min, max, prec);
+      return slider2Val(add2([], value, [0, step]), min, max, prec);
     }
     default:
   }

package/components/button.d.ts

@@ -2,6 +2,10 @@ import type { IShape } from "@thi.ng/geom";
 import type { ComponentOpts, Hash } from "../api.js";
 import type { IMGUI } from "../gui.js";
 export interface ButtonOpts extends ComponentOpts {
+    /**
+     * Label text when button is in hover state (by default the same as
+     * {@link ComponentOpts.label}).
+     */
     labelHover?: string;
 }
 export declare const buttonH: ({ gui, layout, id, label, labelHover, info, }: ButtonOpts) => boolean;

package/components/dial.d.ts

@@ -22,5 +22,5 @@ export interface DialGroupOpts extends Omit<DialOpts, "layout" | "value" | "labe
     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>;
+export declare const dialRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: number, max: number, step: number, value: number, labelX: number, labelY: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
 //# sourceMappingURL=dial.d.ts.map

package/components/dial.js

@@ -3,6 +3,7 @@ import { line } from "@thi.ng/geom/line";
 import { isLayout } from "@thi.ng/layout/checks";
 import { HALF_PI, PI, TAU } from "@thi.ng/math/api";
 import { norm } from "@thi.ng/math/fit";
+import { clamp } from "@thi.ng/math/interval";
 import { cartesian2 } from "@thi.ng/vectors/cartesian";
 import { hash } from "@thi.ng/vectors/hash";
 import { dialVal } from "../behaviors/dial.js";
@@ -62,7 +63,7 @@ const dialGroup = (opts) => {
   }
   return res !== void 0 ? [idx, res] : void 0;
 };
-const dialRaw = (gui, id, x, y, w, h, min, max, step, value, lx, ly, label, fmt, info) => {
+const dialRaw = (gui, id, x, y, w, h, min, max, step, value, labelX, labelY, label, fmt, info) => {
   const r = Math.min(w, h) / 2;
   const pos = [x + w / 2, y + h / 2];
   const thetaGap = PI / 2;
@@ -72,7 +73,7 @@ const dialRaw = (gui, id, x, y, w, h, min, max, step, value, lx, ly, label, fmt,
   const bgShape = gui.resource(id, key, () => circle(pos, r, {}));
   const hover = isHoverSlider(gui, id, bgShape, "pointer");
   const draw = gui.draw;
-  let v = value;
+  let v = clamp(value, min, max);
   let res;
   if (hover) {
     gui.hotID = id;
@@ -102,8 +103,8 @@ const dialRaw = (gui, id, x, y, w, h, min, max, step, value, lx, ly, label, fmt,
       id,
       key,
       v,
-      x + lx,
-      y + ly,
+      x + labelX,
+      y + labelY,
       label,
       fmt
     );

package/components/dropdown.d.ts

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

package/components/dropdown.js

@@ -11,7 +11,7 @@ const dropdown = ({
   id,
   value,
   items,
-  title,
+  label,
   info
 }) => {
   const open = gui.state(id, () => false);
@@ -28,7 +28,7 @@ const dropdown = ({
       gui,
       layout: box,
       id: `${id}-title`,
-      label: title,
+      label,
       info
     });
     draw && gui.add(
@@ -71,7 +71,7 @@ const dropdown = ({
       layout: box,
       id: `${id}-${value}`,
       label: items[value],
-      labelHover: title,
+      labelHover: label,
       info
     })) {
       gui.setState(id, true);

package/components/radio.d.ts

@@ -11,8 +11,17 @@ export interface RadioOpts extends Omit<ComponentOpts, "label" | "info"> {
      * positioned next to it.
      */
     square?: boolean;
+    /**
+     * Index of selected radio item
+     */
     value: number;
+    /**
+     * Radio item labels
+     */
     label: string[];
+    /**
+     * Radio item tooltips
+     */
     info?: string[];
 }
 export declare const radio: ({ gui, layout, id, horizontal, square, value, label, info, }: RadioOpts) => Maybe<number>;

package/components/ramp.d.ts

@@ -3,7 +3,18 @@ import type { Ramp } from "@thi.ng/ramp";
 import { type ComponentOpts } from "../api.js";
 export interface RampOpts extends Omit<ComponentOpts, "label"> {
     ramp: Ramp<number>;
+    /**
+     * User defined interpolation mode. Only used to compute internal hash of
+     * ramp curve geometry, i.e. if the {@link RampOpts.ramp} interpolation
+     * method changes, so should this mode value.
+     */
     mode?: number;
+    /**
+     * Normalized snap/selection tolerance for ramp control point positions
+     *
+     * @defaultValue 0.05
+     */
+    eps?: number;
 }
-export declare const ramp: ({ gui, layout, id, ramp, mode, info }: RampOpts) => Maybe<Ramp<number>>;
+export declare const ramp: ({ gui, layout, id, ramp, mode, info, eps, }: RampOpts) => Maybe<Ramp<number>>;
 //# sourceMappingURL=ramp.d.ts.map

package/components/ramp.js

@@ -15,7 +15,15 @@ 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, ramp: ramp2, mode = 0, info }) => {
+const ramp = ({
+  gui,
+  layout,
+  id,
+  ramp: ramp2,
+  mode = 0,
+  info,
+  eps = 0.05
+}) => {
   const { x, y, w, h } = layoutBox(layout);
   const maxX = x + w;
   const maxY = y + h;
@@ -33,7 +41,7 @@ const ramp = ({ gui, layout, id, ramp: ramp2, mode = 0, info }) => {
   const focused = gui.requestFocus(id);
   if (hover) {
     sel = clamp01_2(null, fit2([], gui.mouse, pos, maxPos, ZERO2, ONE2));
-    selID = ramp2.closestIndex(sel[0], 0.05);
+    selID = ramp2.closestIndex(sel[0], eps);
     if (gui.isMouseDown()) {
       gui.activeID = id;
       if (selID >= 0) {
@@ -42,12 +50,12 @@ const ramp = ({ gui, layout, id, ramp: ramp2, mode = 0, info }) => {
         ramp2.setStopAt(
           roundTo(sel[0], 1e-3),
           roundTo(sel[1], 1e-3),
-          0.05
+          eps
         );
       }
       res = ramp2;
     }
-    if (focused && selID >= 0 && handleRampKeys(gui, ramp2, selID)) {
+    if (focused && selID >= 0 && __handleRampKeys(gui, ramp2, selID)) {
       res = ramp2;
     }
     info && gui.draw && tooltipRaw(gui, info);
@@ -66,7 +74,7 @@ const ramp = ({ gui, layout, id, ramp: ramp2, mode = 0, info }) => {
           [
             [x, maxY],
             mix2([], pos, maxPos, [0, stops[0][1]]),
-            ...rampVertices(ramp2, pos, maxPos),
+            ...__rampVertices(ramp2, pos, maxPos),
             mix2([], pos, maxPos, [1, stops[stops.length - 1][1]]),
             [maxX, maxY]
           ],
@@ -98,8 +106,8 @@ const ramp = ({ gui, layout, id, ramp: ramp2, mode = 0, info }) => {
   gui.lastID = id;
   return res;
 };
-const rampVertices = (ramp2, pos, maxPos, numSamples = 100) => map((p) => mix2(p, pos, maxPos, p), ramp2.samples(numSamples));
-const handleRampKeys = (gui, ramp2, selID) => {
+const __rampVertices = (ramp2, pos, maxPos, numSamples = 100) => map((p) => mix2(p, pos, maxPos, p), ramp2.samples(numSamples));
+const __handleRampKeys = (gui, ramp2, selID) => {
   switch (gui.key) {
     case Key.TAB:
       gui.switchFocus();

package/components/ring.d.ts

@@ -23,5 +23,5 @@ export interface RingGroupOpts extends Omit<RingOpts, "layout" | "value" | "labe
     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>;
+export declare const ringRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: number, max: number, step: number, value: number, thetaGap: number, rscale: number, labelX: number, labelY: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
 //# sourceMappingURL=ring.d.ts.map

package/components/ring.js

@@ -3,6 +3,7 @@ import { polygon } from "@thi.ng/geom/polygon";
 import { isLayout } from "@thi.ng/layout/checks";
 import { HALF_PI, PI, TAU } from "@thi.ng/math/api";
 import { fitClamped, norm } from "@thi.ng/math/fit";
+import { clamp } from "@thi.ng/math/interval";
 import { mix } from "@thi.ng/math/mix";
 import { map } from "@thi.ng/transducers/map";
 import { normRange } from "@thi.ng/transducers/norm-range";
@@ -82,7 +83,7 @@ const ringGroup = (opts) => {
   }
   return res !== void 0 ? [idx, res] : void 0;
 };
-const ringRaw = (gui, id, x, y, w, h, min, max, prec, val, thetaGap, rscale, lx, ly, label, fmt, info) => {
+const ringRaw = (gui, id, x, y, w, h, min, max, step, value, thetaGap, rscale, labelX, labelY, label, fmt, info) => {
   const r = w / 2;
   const key = hash([x, y, r]);
   gui.registerID(id, key);
@@ -92,14 +93,14 @@ const ringRaw = (gui, id, x, y, w, h, min, max, prec, val, thetaGap, rscale, lx,
   const draw = gui.draw;
   const aid = gui.activeID;
   const hover = !gui.disabled && (aid === id || aid === "" && pointInRect(gui.mouse, [x, y], [w, h]));
-  let v = val;
+  let v = clamp(value, min, max);
   let res;
   if (hover) {
     gui.setCursor("pointer");
     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);
   }
@@ -122,8 +123,8 @@ const ringRaw = (gui, id, x, y, w, h, min, max, prec, val, thetaGap, rscale, lx,
       id,
       key,
       v,
-      x + lx,
-      y + ly,
+      x + labelX,
+      y + labelY,
       label,
       fmt
     );
@@ -132,7 +133,7 @@ const ringRaw = (gui, id, x, y, w, h, min, max, prec, val, thetaGap, rscale, lx,
     valShape.attribs.fill = gui.fgColor(hover);
     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/sliderh.d.ts

@@ -21,5 +21,5 @@ export interface SliderGroupOpts extends Omit<SliderOpts, "layout" | "value" | "
     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>;
+export declare const sliderHRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: number, max: number, step: number, val: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
 //# sourceMappingURL=sliderh.d.ts.map

package/components/sliderh.js

@@ -1,5 +1,6 @@
 import { rect } from "@thi.ng/geom/rect";
 import { fit, norm } from "@thi.ng/math/fit";
+import { clamp } from "@thi.ng/math/interval";
 import { hash } from "@thi.ng/vectors/hash";
 import {
   handleSlider1Keys,
@@ -61,14 +62,14 @@ const sliderHGroup = (opts) => {
   }
   return res !== void 0 ? [idx, res] : void 0;
 };
-const sliderHRaw = (gui, id, x, y, w, h, min, max, prec, val, label, fmt, info) => {
+const sliderHRaw = (gui, id, x, y, w, h, min, max, step, val, label, fmt, info) => {
   const theme = gui.theme;
   const key = hash([x, y, w, h]);
   gui.registerID(id, key);
   const box = gui.resource(id, key, () => rect([x, y], [w, h], {}));
   const hover = isHoverSlider(gui, id, box);
   const draw = gui.draw;
-  let v = val;
+  let v = clamp(val, min, max);
   let res;
   if (hover) {
     if (gui.isMouseDown()) {
@@ -77,7 +78,7 @@ const sliderHRaw = (gui, id, x, y, w, h, min, max, prec, val, label, fmt, info)
         fit(gui.mouse[0], x, x + w - 1, min, max),
         min,
         max,
-        prec
+        step
       );
     }
     info && draw && tooltipRaw(gui, info);
@@ -103,7 +104,7 @@ const sliderHRaw = (gui, id, x, y, w, h, min, max, prec, val, label, fmt, info)
     valueBox.attribs.fill = gui.fgColor(hover);
     gui.add(box, valueBox, 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/sliderv.d.ts

@@ -8,5 +8,5 @@ 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>;
+export declare const sliderVRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: number, max: number, step: number, val: number, label?: string, fmt?: Fn<number, string>, info?: string) => Maybe<number>;
 //# sourceMappingURL=sliderv.d.ts.map

package/components/sliderv.js

@@ -1,5 +1,6 @@
 import { rect } from "@thi.ng/geom/rect";
 import { fit, norm } from "@thi.ng/math/fit";
+import { clamp } from "@thi.ng/math/interval";
 import { ZERO2 } from "@thi.ng/vectors/api";
 import { hash } from "@thi.ng/vectors/hash";
 import {
@@ -63,7 +64,7 @@ const sliderVGroup = (opts) => {
   }
   return res !== void 0 ? [idx, res] : void 0;
 };
-const sliderVRaw = (gui, id, x, y, w, h, min, max, prec, val, label, fmt, info) => {
+const sliderVRaw = (gui, id, x, y, w, h, min, max, step, val, label, fmt, info) => {
   const theme = gui.theme;
   const key = hash([x, y, w, h]);
   gui.registerID(id, key);
@@ -71,7 +72,7 @@ const sliderVRaw = (gui, id, x, y, w, h, min, max, prec, val, label, fmt, info)
   const ymax = y + h;
   const hover = isHoverSlider(gui, id, box, "ns-resize");
   const draw = gui.draw;
-  let v = val;
+  let v = clamp(val, min, max);
   let res;
   if (hover) {
     if (gui.isMouseDown()) {
@@ -80,7 +81,7 @@ const sliderVRaw = (gui, id, x, y, w, h, min, max, prec, val, label, fmt, info)
         fit(gui.mouse[1], ymax - 1, y, min, max),
         min,
         max,
-        prec
+        step
       );
     }
     info && draw && tooltipRaw(gui, info);
@@ -108,7 +109,7 @@ const sliderVRaw = (gui, id, x, y, w, h, min, max, prec, val, label, fmt, info)
     box.attribs.stroke = gui.focusColor(id);
     gui.add(box, valueBox, 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/toggle.d.ts

@@ -10,5 +10,5 @@ export interface ToggleOpts extends ComponentOpts {
     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>;
+export declare const toggleRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, labelX: number, val: boolean, label?: string, info?: string) => Maybe<boolean>;
 //# sourceMappingURL=toggle.d.ts.map

package/components/toggle.js

@@ -26,7 +26,7 @@ const toggle = ({
     info
   );
 };
-const toggleRaw = (gui, id, x, y, w, h, lx, val, label, info) => {
+const toggleRaw = (gui, id, x, y, w, h, labelX, val, label, info) => {
   const theme = gui.theme;
   const key = hash([x, y, w, h]);
   gui.registerID(id, key);
@@ -45,8 +45,10 @@ const toggleRaw = (gui, id, x, y, w, h, lx, val, label, info) => {
     gui.add(box);
     label && gui.add(
       textLabelRaw(
-        [x + theme.pad + lx, y + h / 2 + theme.baseLine],
-        gui.textColor(hover && lx > 0 && lx < w - theme.pad),
+        [x + theme.pad + labelX, y + h / 2 + theme.baseLine],
+        gui.textColor(
+          hover && labelX > 0 && labelX < w - theme.pad
+        ),
         label
       )
     );

package/components/xypad.d.ts

@@ -24,5 +24,5 @@ export interface XYPadOpts extends Omit<ComponentOpts, "layout"> {
     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>;
+export declare const xyPadRaw: (gui: IMGUI, id: string, x: number, y: number, w: number, h: number, min: Vec, max: Vec, step: number, val: Vec, yUp: boolean | undefined, labelX: number, labelY: number, label?: string, fmt?: Fn<Vec, string>, info?: string) => Maybe<Vec>;
 //# sourceMappingURL=xypad.d.ts.map

package/components/xypad.js

@@ -1,5 +1,6 @@
 import { line } from "@thi.ng/geom/line";
 import { rect } from "@thi.ng/geom/rect";
+import { clamp2 } from "@thi.ng/vectors/clamp";
 import { fit2 } from "@thi.ng/vectors/fit";
 import { hash } from "@thi.ng/vectors/hash";
 import {
@@ -52,7 +53,7 @@ const xyPad = ({
     info
   );
 };
-const xyPadRaw = (gui, id, x, y, w, h, min, max, prec, val, yUp = false, lx, ly, label, fmt, info) => {
+const xyPadRaw = (gui, id, x, y, w, h, min, max, step, val, yUp = false, labelX, labelY, label, fmt, info) => {
   const maxX = x + w;
   const maxY = y + h;
   const pos = yUp ? [x, maxY] : [x, y];
@@ -63,7 +64,7 @@ const xyPadRaw = (gui, id, x, y, w, h, min, max, prec, val, yUp = false, lx, ly,
   const col = gui.textColor(false);
   const hover = isHoverSlider(gui, id, box, "move");
   const draw = gui.draw;
-  let v = val;
+  let v = clamp2([], val, min, max);
   let res;
   if (hover) {
     if (gui.isMouseDown()) {
@@ -72,7 +73,7 @@ const xyPadRaw = (gui, id, x, y, w, h, min, max, prec, val, yUp = false, lx, ly,
         fit2([], gui.mouse, pos, maxPos, min, max),
         min,
         max,
-        prec
+        step
       );
     }
     info && draw && tooltipRaw(gui, info);
@@ -93,13 +94,13 @@ const xyPadRaw = (gui, id, x, y, w, h, min, max, prec, val, yUp = false, lx, ly,
         stroke: col
       }),
       textLabelRaw(
-        [x + lx, y + ly],
+        [x + labelX, y + labelY],
         col,
         (label ? label + " " : "") + (fmt ? fmt(val) : `${val[0] | 0}, ${val[1] | 0}`)
       )
     );
   }
-  if (focused && (v = handleSlider2Keys(gui, min, max, prec, v, yUp)) !== void 0) {
+  if (focused && (v = handleSlider2Keys(gui, min, max, step, v, yUp)) !== void 0) {
     return v;
   }
   gui.lastID = id;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/imgui",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "Immediate mode GUI with flexible state handling & data only shape output",
   "type": "module",
   "module": "./index.js",
@@ -38,13 +38,13 @@
   "dependencies": {
     "@thi.ng/api": "^8.11.11",
     "@thi.ng/checks": "^3.6.13",
-    "@thi.ng/geom": "^8.1.11",
-    "@thi.ng/geom-isec": "^4.0.15",
-    "@thi.ng/layout": "^3.1.3",
+    "@thi.ng/geom": "^8.1.12",
+    "@thi.ng/geom-isec": "^4.0.16",
+    "@thi.ng/layout": "^3.1.4",
     "@thi.ng/math": "^5.11.11",
-    "@thi.ng/ramp": "^3.3.3",
-    "@thi.ng/transducers": "^9.2.5",
-    "@thi.ng/vectors": "^7.12.3"
+    "@thi.ng/ramp": "^3.3.4",
+    "@thi.ng/transducers": "^9.2.6",
+    "@thi.ng/vectors": "^7.12.4"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.47.9",
@@ -160,5 +160,5 @@
     ],
     "year": 2019
   },
-  "gitHead": "9a32147fce4bd1e5f98dffb04a452576f9984de8\n"
+  "gitHead": "241df2019d93359c34da1a11a94e416b6ea73f32\n"
 }