feat(imgui): add vertical slider, rename slider/sliderGroup

- slider / sliderGroup = sliderH/sliderHGroup - add new sliderV / sliderVGroup
thi-ng · Aug 4, 2019 · 40c050e · 40c050e
1 parent d662811
commit 40c050e
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 4 deletions.
diff --git a/packages/imgui/src/components/slider.ts → packages/imgui/src/components/sliderh.ts b/packages/imgui/src/components/slider.ts → packages/imgui/src/components/sliderh.ts
@@ -14,7 +14,7 @@ import { tooltip } from "./tooltip";
 const $ = (x: number, prec: number, min: number, max: number) =>
     clamp(roundTo(x, prec), min, max);
 
-export const slider = (
+export const sliderH = (
     gui: IMGUI,
     id: string,
     x: number,
@@ -92,7 +92,7 @@ export const slider = (
     return active;
 };
 
-export const sliderGroup = (
+export const sliderHGroup = (
     gui: IMGUI,
     id: string,
     x: number,
@@ -112,7 +112,7 @@ export const sliderGroup = (
     let res = false;
     // prettier-ignore
     for (let n = vals.length, i = 0; i < n; i++) {
-        res = slider(gui, `${id}-${i}`, x, y, w, h, min, max, prec, vals, i, label[i], fmt, info[i]) || res;
+        res = sliderH(gui, `${id}-${i}`, x, y, w, h, min, max, prec, vals, i, label[i], fmt, info[i]) || res;
         x += offX;
         y += offY;
     }

diff --git a/packages/imgui/src/components/sliderv.ts b/packages/imgui/src/components/sliderv.ts
@@ -0,0 +1,132 @@
+import { Fn } from "@thi.ng/api";
+import { pointInside, rect } from "@thi.ng/geom";
+import {
+    clamp,
+    fit,
+    norm,
+    roundTo
+} from "@thi.ng/math";
+import { Key, KeyModifier, MouseButton } from "../api";
+import { IMGUI } from "../gui";
+import { textLabel } from "./textlabel";
+import { tooltip } from "./tooltip";
+
+const $ = (x: number, prec: number, min: number, max: number) =>
+    clamp(roundTo(x, prec), min, max);
+
+export const sliderV = (
+    gui: IMGUI,
+    id: string,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    min: number,
+    max: number,
+    prec: number,
+    val: number[],
+    i: number,
+    label?: string,
+    fmt?: Fn<number, string>,
+    info?: string
+) => {
+    const theme = gui.theme;
+    const box = rect([x, y], [w, h]);
+    const hover = pointInside(box, gui.mouse);
+    const ymax = y + h;
+    let active = false;
+    if (hover) {
+        gui.hotID = id;
+        const aid = gui.activeID;
+        if ((aid === "" || aid === id) && gui.buttons == MouseButton.LEFT) {
+            gui.activeID = id;
+            active = true;
+            val[i] = $(
+                fit(gui.mouse[1], ymax - 1, y, min, max),
+                prec,
+                min,
+                max
+            );
+            if (gui.modifiers & KeyModifier.ALT) {
+                val.fill(val[i]);
+            }
+        }
+        info && tooltip(gui, info);
+    }
+    const focused = gui.requestFocus(id);
+    const v = val[i];
+    const normVal = norm(v, min, max);
+    const nh = normVal * (h - 1);
+    const valueBox = rect([x, ymax - nh], [w, nh], {
+        fill: gui.fgColor(hover)
+    });
+    box.attribs = {
+        fill: gui.bgColor(hover || focused),
+        stroke: gui.focusColor(id)
+    };
+    gui.add(
+        box,
+        valueBox,
+        textLabel(
+            [0, 0],
+            {
+                transform: [
+                    0,
+                    -1,
+                    1,
+                    0,
+                    x + w / 2 + theme.baseLine,
+                    ymax - theme.pad
+                ],
+                fill: gui.textColor(normVal > 0.25)
+            },
+            (label ? label + " " : "") + (fmt ? fmt(v) : v)
+        )
+    );
+    if (focused) {
+        switch (gui.key) {
+            case Key.TAB:
+                gui.switchFocus();
+                break;
+            case Key.UP:
+            case Key.DOWN: {
+                const step =
+                    (gui.key === Key.UP ? prec : -prec) *
+                    (gui.isShiftDown() ? 5 : 1);
+                val[i] = $(v + step, prec, min, max);
+                gui.isAltDown() && val.fill(val[i]);
+                return true;
+            }
+            default:
+        }
+    }
+    gui.lastID = id;
+    return active;
+};
+
+export const sliderVGroup = (
+    gui: IMGUI,
+    id: string,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    offX: number,
+    offY: number,
+    min: number,
+    max: number,
+    prec: number,
+    vals: number[],
+    label: string[],
+    fmt?: Fn<number, string>,
+    info: string[] = []
+) => {
+    let res = false;
+    // prettier-ignore
+    for (let n = vals.length, i = 0; i < n; i++) {
+        res = sliderV(gui, `${id}-${i}`, x, y, w, h, min, max, prec, vals, i, label[i], fmt, info[i]) || res;
+        x += offX;
+        y += offY;
+    }
+    return res;
+};
diff --git a/packages/imgui/src/index.ts b/packages/imgui/src/index.ts
@@ -3,7 +3,8 @@ export * from "./gui";
 
 export * from "./components/button";
 export * from "./components/dropdown";
-export * from "./components/slider";
+export * from "./components/sliderh";
+export * from "./components/sliderv";
 export * from "./components/textfield";
 export * from "./components/textlabel";
 export * from "./components/tooltip";