@thi.ng/imgui 2.2.72 → 2.3.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-08-18T14:11:34Z
+- **Last updated**: 2024-09-05T12:23:14Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,16 @@ 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.
 
+## [2.3.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/imgui@2.3.0) (2024-09-05)
+
+#### 🚀 Features
+
+- add ramp widget ([3c84204](https://github.com/thi-ng/umbrella/commit/3c84204))
+
+#### ♻️ Refactoring
+
+- update textLabel to use geom types ([176024f](https://github.com/thi-ng/umbrella/commit/176024f))
+
 ### [2.2.60](https://github.com/thi-ng/umbrella/tree/@thi.ng/imgui@2.2.60) (2024-06-21)
 
 #### ♻️ Refactoring

package/README.md

@@ -88,6 +88,7 @@ The above screenshot shows most of the currently available components:
 - Dropdown
 - Radial menu
 - Radio button group (h / v)
+- Ramp (keyframe-based control curve editor)
 - Slider  & slider groups (h / v)
 - Text input (single line, filtered input)
 - Text label
@@ -261,7 +262,7 @@ Browser ESM import:
 
 [JSDelivr documentation](https://www.jsdelivr.com/)
 
-Package sizes (brotli'd, pre-treeshake): ESM: 6.67 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 7.11 KB
 
 ## Dependencies
 
@@ -271,6 +272,7 @@ Package sizes (brotli'd, pre-treeshake): ESM: 6.67 KB
 - [@thi.ng/geom-isec](https://github.com/thi-ng/umbrella/tree/develop/packages/geom-isec)
 - [@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/ramp](https://github.com/thi-ng/umbrella/tree/develop/packages/ramp)
 - [@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)
 

package/components/ramp.d.ts

@@ -0,0 +1,6 @@
+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>>;
+//# sourceMappingURL=ramp.d.ts.map

package/components/ramp.js

@@ -0,0 +1,115 @@
+import { group } from "@thi.ng/geom/group";
+import { line } from "@thi.ng/geom/line";
+import { polygon } from "@thi.ng/geom/polygon";
+import { rect } from "@thi.ng/geom/rect";
+import { triangle } from "@thi.ng/geom/triangle";
+import { mix } from "@thi.ng/math/mix";
+import { roundTo } from "@thi.ng/math/prec";
+import { map } from "@thi.ng/transducers/map";
+import { ONE2, ZERO2 } from "@thi.ng/vectors/api";
+import { fit2 } from "@thi.ng/vectors/fit";
+import { hash } from "@thi.ng/vectors/hash";
+import { mix2 } from "@thi.ng/vectors/mix";
+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 maxX = x + w;
+  const maxY = y + h;
+  const pos = [x, maxY];
+  const maxPos = [maxX, y];
+  const key = hash([x, y, w, h]);
+  gui.registerID(id, key);
+  const box = gui.resource(id, key, () => rect([x, y], [w, h]));
+  const col = gui.textColor(false);
+  const hover = isHoverSlider(gui, id, box, "move");
+  const stops = ramp2.stops;
+  let selID = -1;
+  let sel;
+  let res;
+  const focused = gui.requestFocus(id);
+  if (hover) {
+    sel = fit2([], gui.mouse, pos, maxPos, ZERO2, ONE2);
+    selID = ramp2.closestIndex(sel[0], 0.05);
+    if (gui.isMouseDown()) {
+      gui.activeID = id;
+      if (selID >= 0) {
+        stops[selID] = sel;
+      } else {
+        ramp2.setStopAt(
+          roundTo(sel[0], 1e-3),
+          roundTo(sel[1], 1e-3),
+          0.05
+        );
+      }
+      res = ramp2;
+    }
+    if (focused && selID >= 0 && handleRampKeys(gui, ramp2, selID)) {
+      res = ramp2;
+    }
+    info && gui.draw && tooltipRaw(gui, info);
+  }
+  if (gui.draw) {
+    box.attribs = {
+      fill: gui.bgColor(hover || focused),
+      stroke: gui.focusColor(id)
+    };
+    gui.add(
+      box,
+      gui.resource(
+        id,
+        hash(stops.flatMap((x2) => x2)) + rampMode,
+        () => polygon(
+          [
+            [x, maxY],
+            mix2([], pos, maxPos, [0, stops[0][1]]),
+            ...rampVertices(ramp2, pos, maxPos),
+            mix2([], pos, maxPos, [1, stops[stops.length - 1][1]]),
+            [maxX, maxY]
+          ],
+          { fill: col }
+        )
+      ),
+      ...stops.map(([t], i) => {
+        const xx = mix(x, maxX, t);
+        return triangle(
+          [
+            [xx - 5, maxY],
+            [xx + 5, maxY],
+            [xx, maxY - 5]
+          ],
+          { fill: gui.fgColor(selID === i) }
+        );
+      })
+    );
+    if (sel) {
+      const [cx, cy] = mix2([], pos, maxPos, sel);
+      gui.add(
+        group({ stroke: gui.fgColor(selID >= 0) }, [
+          line([x, cy], [maxX, cy]),
+          line([cx, y], [cx, maxY])
+        ])
+      );
+    }
+  }
+  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) => {
+  switch (gui.key) {
+    case Key.TAB:
+      gui.switchFocus();
+      break;
+    case "x":
+    case Key.DELETE:
+      ramp2.removeStopAtIndex(selID);
+      return true;
+    default:
+  }
+};
+export {
+  ramp
+};

package/components/textlabel.d.ts

@@ -4,7 +4,7 @@ import type { ReadonlyVec } from "@thi.ng/vectors";
 import type { Color, GUITheme } from "../api.js";
 import type { IMGUI } from "../gui.js";
 export declare const textLabel: (gui: IMGUI, layout: IGridLayout<any> | LayoutBox, label: string, pad?: boolean) => void;
-export declare const textLabelRaw: (p: ReadonlyVec, attribs: Color | any, label: string) => (string | ReadonlyVec | Record<string, any>)[];
+export declare const textLabelRaw: (p: ReadonlyVec, attribs: Color | any, label: string) => import("@thi.ng/geom").Text;
 export declare const textTransformH: (theme: GUITheme, x: number, y: number, _: number, h: number) => number[];
 export declare const textTransformV: (theme: GUITheme, x: number, y: number, w: number, h: number) => number[];
 export declare const dialValueLabel: (gui: IMGUI, id: string, key: number, v: number, x: number, y: number, label: Maybe<string>, fmt: Maybe<Fn<number, string>>) => any;

package/components/textlabel.js

@@ -1,17 +1,19 @@
 import { isPlainObject } from "@thi.ng/checks/is-plain-object";
+import { text } from "@thi.ng/geom/text";
 import { valHash } from "../hash.js";
 import { layoutBox } from "../layout.js";
 const textLabel = (gui, layout, label, pad = false) => {
   const theme = gui.theme;
   const { x, y, h } = layoutBox(layout);
-  gui.draw && gui.add([
-    "text",
-    { fill: gui.textColor(false) },
-    [x + (pad ? theme.pad : 0), y + h / 2 + theme.baseLine],
-    label
-  ]);
+  gui.draw && gui.add(
+    text(
+      [x + (pad ? theme.pad : 0), y + h / 2 + theme.baseLine],
+      label,
+      { fill: gui.textColor(false) }
+    )
+  );
 };
-const textLabelRaw = (p, attribs, label) => ["text", isPlainObject(attribs) ? attribs : { fill: attribs }, p, label];
+const textLabelRaw = (p, attribs, label) => text(p, label, isPlainObject(attribs) ? attribs : { fill: attribs });
 const textTransformH = (theme, x, y, _, h) => [1, 0, 0, 1, x + theme.pad, y + h / 2 + theme.baseLine];
 const textTransformV = (theme, x, y, w, h) => [0, -1, 1, 0, x + w / 2 + theme.baseLine, y + h - theme.pad];
 const dialValueLabel = (gui, id, key, v, x, y, label, fmt) => gui.resource(

package/index.d.ts

@@ -7,6 +7,7 @@ export * from "./components/dropdown.js";
 export * from "./components/icon-button.js";
 export * from "./components/radial-menu.js";
 export * from "./components/radio.js";
+export * from "./components/ramp.js";
 export * from "./components/ring.js";
 export * from "./components/sliderh.js";
 export * from "./components/sliderv.js";

package/index.js

@@ -7,6 +7,7 @@ export * from "./components/dropdown.js";
 export * from "./components/icon-button.js";
 export * from "./components/radial-menu.js";
 export * from "./components/radio.js";
+export * from "./components/ramp.js";
 export * from "./components/ring.js";
 export * from "./components/sliderh.js";
 export * from "./components/sliderv.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/imgui",
-  "version": "2.2.72",
+  "version": "2.3.0",
   "description": "Immediate mode GUI with flexible state handling & data only shape output",
   "type": "module",
   "module": "./index.js",
@@ -38,12 +38,13 @@
   "dependencies": {
     "@thi.ng/api": "^8.11.9",
     "@thi.ng/checks": "^3.6.11",
-    "@thi.ng/geom": "^8.1.5",
-    "@thi.ng/geom-isec": "^4.0.10",
+    "@thi.ng/geom": "^8.1.7",
+    "@thi.ng/geom-isec": "^4.0.12",
     "@thi.ng/layout": "^3.1.1",
-    "@thi.ng/math": "^5.11.8",
-    "@thi.ng/transducers": "^9.2.0",
-    "@thi.ng/vectors": "^7.11.10"
+    "@thi.ng/math": "^5.11.9",
+    "@thi.ng/ramp": "^3.3.0",
+    "@thi.ng/transducers": "^9.2.2",
+    "@thi.ng/vectors": "^7.12.0"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.47.5",
@@ -111,6 +112,9 @@
     "./components/radio": {
       "default": "./components/radio.js"
     },
+    "./components/ramp": {
+      "default": "./components/ramp.js"
+    },
     "./components/ring": {
       "default": "./components/ring.js"
     },
@@ -156,5 +160,5 @@
     ],
     "year": 2019
   },
-  "gitHead": "0d01681c64f5459647ab06f197f70dc90fb64cc9\n"
+  "gitHead": "9f71f7f82fed2a980078a96bdafd2e706f526c75\n"
 }