feat(imgui): add IMGUI.draw flag, update components, add/update hash fns

thi-ng · Aug 16, 2019 · c9bc287 · c9bc287
1 parent b3da5b1
commit c9bc287
Show file tree

Hide file tree

Showing 15 changed files with 314 additions and 192 deletions.
diff --git a/packages/imgui/src/api.ts b/packages/imgui/src/api.ts
@@ -3,7 +3,7 @@ import { ReadonlyVec } from "@thi.ng/vectors";
 
 export type Color = string | number | number[];
 
-export type Hash = number | string;
+export type Hash = number;
 
 export interface GUITheme {
     globalBg?: Color;

diff --git a/packages/imgui/src/components/button.ts b/packages/imgui/src/components/button.ts
@@ -9,6 +9,7 @@ import {
 } 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";
@@ -33,7 +34,7 @@ export const buttonH = (
         gui.resource(id, key, () => rect([x, y], [w, h])),
         key,
         label
-            ? gui.resource(id, `l${~~gui.disabled}${key}-${label}`, () =>
+            ? gui.resource(id, labelHash(key, label, gui.disabled), () =>
                   mkLabel(
                       textTransformH(theme, x, y, w, h),
                       gui.textColor(false),
@@ -42,7 +43,7 @@ export const buttonH = (
               )
             : undefined,
         labelHover
-            ? gui.resource(id, `lh${~~gui.disabled}${key}-${labelHover}`, () =>
+            ? gui.resource(id, labelHash(key, labelHover, gui.disabled), () =>
                   mkLabel(
                       textTransformH(theme, x, y, w, h),
                       gui.textColor(true),
@@ -72,7 +73,7 @@ export const buttonV = (
         gui.resource(id, key, () => rect([x, y], [w, h])),
         key,
         label
-            ? gui.resource(id, `l${~~gui.disabled}${label}-${key}`, () =>
+            ? gui.resource(id, labelHash(key, label, gui.disabled), () =>
                   mkLabel(
                       textTransformV(theme, x, y, w, h),
                       gui.textColor(false),
@@ -81,7 +82,7 @@ export const buttonV = (
               )
             : undefined,
         labelHover
-            ? gui.resource(id, `lh${~~gui.disabled}${labelHover}-${key}`, () =>
+            ? gui.resource(id, labelHash(key, labelHover, gui.disabled), () =>
                   mkLabel(
                       textTransformV(theme, x, y, w, h),
                       gui.textColor(true),
@@ -104,17 +105,20 @@ export const buttonRaw = (
 ) => {
     gui.registerID(id, hash);
     const hover = isHoverButton(gui, id, shape);
+    const draw = gui.draw;
     if (hover) {
         gui.isMouseDown() && (gui.activeID = id);
-        info && tooltipRaw(gui, info);
+        info && draw && tooltipRaw(gui, info);
     }
     const focused = gui.requestFocus(id);
-    shape.attribs = {
-        fill: hover ? gui.fgColor(true) : gui.bgColor(focused),
-        stroke: gui.focusColor(id)
-    };
-    gui.add(shape);
-    label && gui.add(hover && labelHover ? labelHover : label);
+    if (draw) {
+        shape.attribs = {
+            fill: hover ? gui.fgColor(true) : gui.bgColor(focused),
+            stroke: gui.focusColor(id)
+        };
+        gui.add(shape);
+        label && gui.add(hover && labelHover ? labelHover : label);
+    }
     if (focused && handleButtonKeys(gui)) {
         return true;
     }

diff --git a/packages/imgui/src/components/dial.ts b/packages/imgui/src/components/dial.ts
@@ -11,6 +11,7 @@ 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";
@@ -112,6 +113,7 @@ export const dialRaw = (
     gui.registerID(id, key);
     const bgShape = gui.resource(id, key, () => circle(pos, r, {}));
     const hover = isHoverSlider(gui, id, bgShape, "pointer");
+    const draw = gui.draw;
     let v: number | undefined = val;
     let res: number | undefined;
     if (hover) {
@@ -128,32 +130,34 @@ export const dialRaw = (
                 prec
             );
         }
-        info && tooltipRaw(gui, info);
+        info && draw && tooltipRaw(gui, info);
     }
     const focused = gui.requestFocus(id);
-    const valShape = gui.resource(id, v, () =>
-        line(
-            cartesian2(
-                null,
-                [r, startTheta + (TAU - thetaGap) * norm(v!, min, max)],
-                pos
-            ),
-            pos,
-            {}
-        )
-    );
-    const valLabel = gui.resource(id, `l${~~gui.disabled}${key}-${v}`, () =>
-        textLabelRaw(
-            [x + lx, y + ly],
-            gui.textColor(false),
-            (label ? label + " " : "") + (fmt ? fmt(v!) : v)
-        )
-    );
-    bgShape.attribs.fill = gui.bgColor(hover || focused);
-    bgShape.attribs.stroke = gui.focusColor(id);
-    valShape.attribs.stroke = gui.fgColor(hover);
-    valShape.attribs.weight = 2;
-    gui.add(bgShape, valShape, valLabel);
+    if (draw) {
+        const valShape = gui.resource(id, v, () =>
+            line(
+                cartesian2(
+                    null,
+                    [r, startTheta + (TAU - thetaGap) * norm(v!, min, max)],
+                    pos
+                ),
+                pos,
+                {}
+            )
+        );
+        const valLabel = gui.resource(id, valHash(key, v, gui.disabled), () =>
+            textLabelRaw(
+                [x + lx, y + ly],
+                gui.textColor(false),
+                (label ? label + " " : "") + (fmt ? fmt(v!) : v)
+            )
+        );
+        bgShape.attribs.fill = gui.bgColor(hover || focused);
+        bgShape.attribs.stroke = gui.focusColor(id);
+        valShape.attribs.stroke = gui.fgColor(hover);
+        valShape.attribs.weight = 2;
+        gui.add(bgShape, valShape, valLabel);
+    }
     if (
         focused &&
         (v = handleSlider1Keys(gui, min, max, prec, v)) !== undefined

diff --git a/packages/imgui/src/components/dropdown.ts b/packages/imgui/src/components/dropdown.ts
@@ -34,20 +34,25 @@ export const dropdown = (
     const key = hash([x, y, w, h, ~~gui.disabled]);
     const tx = x + w - gui.theme.pad - 4;
     const ty = y + h / 2;
+    const draw = gui.draw;
     if (open) {
         const bt = buttonH(gui, box, `${id}-title`, title);
-        gui.add(
-            gui.resource(id, `io${key}`, () =>
-                polygon([[tx - 4, ty + 2], [tx + 4, ty + 2], [tx, ty - 2]], {
-                    fill: gui.textColor(false)
-                })
-            )
-        );
+        draw &&
+            gui.add(
+                gui.resource(id, key + 1, () =>
+                    polygon(
+                        [[tx - 4, ty + 2], [tx + 4, ty + 2], [tx, ty - 2]],
+                        {
+                            fill: gui.textColor(false)
+                        }
+                    )
+                )
+            );
         if (bt) {
             gui.setState(id, false);
         } else {
             for (let i = 0, n = items.length; i < n; i++) {
-                if (buttonH(gui, nested, `${id}${i}`, items[i])) {
+                if (buttonH(gui, nested, `${id}-${i}`, items[i])) {
                     i !== sel && (res = i);
                     gui.setState(id, false);
                 }
@@ -70,16 +75,20 @@ export const dropdown = (
             }
         }
     } else {
-        if (buttonH(gui, box, `${id}${sel}`, items[sel], title, info)) {
+        if (buttonH(gui, box, `${id}-${sel}`, items[sel], title, info)) {
             gui.setState(id, true);
         }
-        gui.add(
-            gui.resource(id, `ic${key}`, () =>
-                polygon([[tx - 4, ty - 2], [tx + 4, ty - 2], [tx, ty + 2]], {
-                    fill: gui.textColor(false)
-                })
-            )
-        );
+        draw &&
+            gui.add(
+                gui.resource(id, key + 2, () =>
+                    polygon(
+                        [[tx - 4, ty - 2], [tx + 4, ty - 2], [tx, ty + 2]],
+                        {
+                            fill: gui.textColor(false)
+                        }
+                    )
+                )
+            );
     }
     return res;
 };

diff --git a/packages/imgui/src/components/icon-button.ts b/packages/imgui/src/components/icon-button.ts
@@ -2,6 +2,7 @@ import { rect } from "@thi.ng/geom";
 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";
@@ -51,8 +52,8 @@ export const iconButton = (
         id,
         gui.resource(id, key, () => rect([x, y], [w, h])),
         key,
-        gui.resource(id, `l${key}-${label}`, () => mkIcon(false)),
-        gui.resource(id, `lh${key}-${label}` + key, () => mkIcon(true)),
+        gui.resource(id, mixHash(key, `l${label}`), () => mkIcon(false)),
+        gui.resource(id, mixHash(key, `lh${label}`), () => mkIcon(true)),
         info
     );
 };
diff --git a/packages/imgui/src/components/radial-menu.ts b/packages/imgui/src/components/radial-menu.ts
@@ -9,7 +9,7 @@ import { triFan } from "@thi.ng/geom-tessellate";
 import { fmod } from "@thi.ng/math";
 import { mapIndexed } from "@thi.ng/transducers";
 import { add2, hash } from "@thi.ng/vectors";
-import { Key } from "../api";
+import { Hash, Key } from "../api";
 import { IMGUI } from "../gui";
 import { buttonRaw } from "./button";
 import { textLabelRaw } from "./textlabel";
@@ -26,7 +26,7 @@ export const radialMenu = (
     const n = items.length;
     const key = hash([x, y, r, n, ~~gui.disabled]);
     gui.registerID(id, key);
-    const cells: [Polygon, string, any, any][] = gui.resource(id, key, () => [
+    const cells: [Polygon, Hash, any, any][] = gui.resource(id, key, () => [
         ...mapIndexed((i, pts) => {
             const cell = polygon(pts);
             const p = add2(

diff --git a/packages/imgui/src/components/ring.ts b/packages/imgui/src/components/ring.ts
@@ -15,6 +15,7 @@ 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";
@@ -154,6 +155,7 @@ export const ringRaw = (
     const pos = [x + r, y + r];
     const startTheta = HALF_PI + thetaGap / 2;
     const endTheta = HALF_PI + TAU - thetaGap / 2;
+    const draw = gui.draw;
     const aid = gui.activeID;
     const hover =
         !gui.disabled &&
@@ -175,42 +177,44 @@ export const ringRaw = (
                 prec
             );
         }
-        info && tooltipRaw(gui, info);
+        info && draw && tooltipRaw(gui, info);
     }
     const focused = gui.requestFocus(id);
-    const valTheta = startTheta + (TAU - thetaGap) * norm(v, min, max);
-    const r2 = r * rscale;
-    // adaptive arc resolution
-    const numV = fitClamped(r, 15, 80, 12, 30);
-    const bgShape = gui.resource(id, key, () =>
-        polygon(
-            [
-                ...arcVerts(pos, r, startTheta, endTheta, numV),
-                ...arcVerts(pos, r2, endTheta, startTheta, numV)
-            ],
-            {}
-        )
-    );
-    const valShape = gui.resource(id, v, () =>
-        polygon(
-            [
-                ...arcVerts(pos, r, startTheta, valTheta, numV),
-                ...arcVerts(pos, r2, valTheta, startTheta, numV)
-            ],
-            {}
-        )
-    );
-    const valLabel = gui.resource(id, `l${~~gui.disabled}${key}-${v}`, () =>
-        textLabelRaw(
-            [x + lx, y + ly],
-            gui.textColor(false),
-            (label ? label + " " : "") + (fmt ? fmt(v!) : v)
-        )
-    );
-    bgShape.attribs.fill = gui.bgColor(hover || focused);
-    bgShape.attribs.stroke = gui.focusColor(id);
-    valShape.attribs.fill = gui.fgColor(hover);
-    gui.add(bgShape, valShape, valLabel);
+    if (draw) {
+        const valTheta = startTheta + (TAU - thetaGap) * norm(v, min, max);
+        const r2 = r * rscale;
+        // adaptive arc resolution
+        const numV = fitClamped(r, 15, 80, 12, 30);
+        const bgShape = gui.resource(id, key, () =>
+            polygon(
+                [
+                    ...arcVerts(pos, r, startTheta, endTheta, numV),
+                    ...arcVerts(pos, r2, endTheta, startTheta, numV)
+                ],
+                {}
+            )
+        );
+        const valShape = gui.resource(id, v, () =>
+            polygon(
+                [
+                    ...arcVerts(pos, r, startTheta, valTheta, numV),
+                    ...arcVerts(pos, r2, valTheta, startTheta, numV)
+                ],
+                {}
+            )
+        );
+        const valLabel = gui.resource(id, valHash(key, v, gui.disabled), () =>
+            textLabelRaw(
+                [x + lx, y + ly],
+                gui.textColor(false),
+                (label ? label + " " : "") + (fmt ? fmt(v!) : v)
+            )
+        );
+        bgShape.attribs.fill = gui.bgColor(hover || focused);
+        bgShape.attribs.stroke = gui.focusColor(id);
+        valShape.attribs.fill = gui.fgColor(hover);
+        gui.add(bgShape, valShape, valLabel);
+    }
     if (
         focused &&
         (v = handleSlider1Keys(gui, min, max, prec, v)) !== undefined