feat(imgui): add layouted sliderV/Group, add/update various comp

- add `square` option for toggle() & radio() - add sliderV/sliderVGroup() - add textLabel() (layouted version) - add layouted xyPad w/ opt height constraints - minor optimizations GridLayout.next() - add IMGUI.textWidth()
thi-ng · Aug 6, 2019 · 7e0bfeb · 7e0bfeb
1 parent af697d9
commit 7e0bfeb
Show file tree

Hide file tree

Showing 8 changed files with 233 additions and 66 deletions.
diff --git a/packages/imgui/src/components/radio.ts b/packages/imgui/src/components/radio.ts
@@ -1,6 +1,6 @@
 import { IGridLayout } from "../api";
 import { IMGUI } from "../gui";
-import { toggleRaw } from "./toggle";
+import { toggle } from "./toggle";
 
 export const radio = (
     gui: IMGUI,
@@ -9,20 +9,19 @@ export const radio = (
     horizontal: boolean,
     val: number[],
     idx: number,
+    square: boolean,
     labels: string[],
     info: string[] = []
 ) => {
     const n = labels.length;
     const nested = horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [1, n]);
     let res = false;
     const tmp: boolean[] = [];
-    const lx = nested.cellH;
     const sel = val[idx];
     for (let i = 0; i < n; i++) {
         tmp[0] = sel === i;
-        const { x, y, h } = nested.next();
         // prettier-ignore
-        if (toggleRaw(gui, `${id}-${i}`, x, y, h, h, lx, tmp, 0, labels[i], info[i])) {
+        if (toggle(gui, nested, `${id}-${i}`, tmp, 0, square, labels[i], info[i])) {
             val[idx] = i;
             res = true;
         }

diff --git a/packages/imgui/src/components/sliderh.ts b/packages/imgui/src/components/sliderh.ts
@@ -39,6 +39,29 @@ export const sliderH = (
     return sliderHRaw(gui, id, x, y, w, h, min, max, prec, val, i, label, fmt, info);
 };
 
+export const sliderHGroup = (
+    gui: IMGUI,
+    layout: IGridLayout,
+    id: string,
+    min: number,
+    max: number,
+    prec: number,
+    horizontal: boolean,
+    vals: number[],
+    label: string[],
+    fmt?: Fn<number, string>,
+    info: string[] = []
+) => {
+    const n = vals.length;
+    const nested = horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [1, n]);
+    let res = false;
+    for (let i = 0; i < n; i++) {
+        // prettier-ignore
+        res = sliderH(gui, nested, `${id}-${i}`, min, max, prec, vals, i, label[i], fmt, info[i]) || res;
+    }
+    return res;
+};
+
 export const sliderHRaw = (
     gui: IMGUI,
     id: string,
@@ -116,26 +139,3 @@ export const sliderHRaw = (
     gui.lastID = id;
     return active;
 };
-
-export const sliderHGroup = (
-    gui: IMGUI,
-    layout: IGridLayout,
-    id: string,
-    horizontal: boolean,
-    min: number,
-    max: number,
-    prec: number,
-    vals: number[],
-    label: string[],
-    fmt?: Fn<number, string>,
-    info: string[] = []
-) => {
-    const n = vals.length;
-    const nested = horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [1, n]);
-    let res = false;
-    for (let i = 0; i < n; i++) {
-        // prettier-ignore
-        res = sliderH(gui, nested, `${id}-${i}`, min, max, prec, vals, i, label[i], fmt, info[i]) || res;
-    }
-    return res;
-};
diff --git a/packages/imgui/src/components/sliderv.ts b/packages/imgui/src/components/sliderv.ts
@@ -6,14 +6,63 @@ import {
     norm,
     roundTo
 } from "@thi.ng/math";
-import { Key, KeyModifier, MouseButton } from "../api";
+import {
+    IGridLayout,
+    Key,
+    KeyModifier,
+    LayoutBox,
+    MouseButton
+} from "../api";
 import { IMGUI } from "../gui";
+import { isLayout } from "../layout";
 import { textLabelRaw } from "./textlabel";
 import { tooltipRaw } from "./tooltip";
 
 const $ = (x: number, prec: number, min: number, max: number) =>
     clamp(roundTo(x, prec), min, max);
 
+export const sliderV = (
+    gui: IMGUI,
+    layout: IGridLayout | LayoutBox,
+    id: string,
+    min: number,
+    max: number,
+    prec: number,
+    val: number[],
+    i: number,
+    rows: number,
+    label?: string,
+    fmt?: Fn<number, string>,
+    info?: string
+) => {
+    const { x, y, w, h } = isLayout(layout) ? layout.next([1, rows]) : layout;
+    // prettier-ignore
+    return sliderVRaw(gui, id, x, y, w, h, min, max, prec, val, i, label, fmt, info);
+};
+
+export const sliderVGroup = (
+    gui: IMGUI,
+    layout: IGridLayout,
+    id: string,
+    min: number,
+    max: number,
+    prec: number,
+    vals: number[],
+    rows: number,
+    label: string[],
+    fmt?: Fn<number, string>,
+    info: string[] = []
+) => {
+    const n = vals.length;
+    const nested = layout.nest(n, [1, rows]);
+    let res = false;
+    for (let i = 0; i < n; i++) {
+        // prettier-ignore
+        res = sliderV(gui, nested, `${id}-${i}`, min, max, prec, vals, i, rows, label[i], fmt, info[i]) || res;
+    }
+    return res;
+};
+
 export const sliderVRaw = (
     gui: IMGUI,
     id: string,
@@ -103,30 +152,3 @@ export const sliderVRaw = (
     gui.lastID = id;
     return active;
 };
-
-export const sliderVGroupRaw = (
-    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 = sliderVRaw(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/components/textlabel.ts b/packages/imgui/src/components/textlabel.ts
@@ -1,6 +1,24 @@
 import { isPlainObject } from "@thi.ng/checks";
 import { ReadonlyVec } from "@thi.ng/vectors";
-import { Color } from "../api";
+import { Color, IGridLayout, LayoutBox } from "../api";
+import { IMGUI } from "../gui";
+import { isLayout } from "../layout";
+
+export const textLabel = (
+    gui: IMGUI,
+    layout: IGridLayout | LayoutBox,
+    label: string,
+    pad = false
+) => {
+    const theme = gui.theme;
+    const { x, y, h } = isLayout(layout) ? layout.next() : layout;
+    gui.add([
+        "text",
+        { fill: theme.text },
+        [x + (pad ? theme.pad : 0), y + h / 2 + theme.baseLine],
+        label
+    ]);
+};
 
 export const textLabelRaw = (
     p: ReadonlyVec,

diff --git a/packages/imgui/src/components/toggle.ts b/packages/imgui/src/components/toggle.ts
@@ -10,18 +10,43 @@ import { isLayout } from "../layout";
 import { textLabelRaw } from "./textlabel";
 import { tooltipRaw } from "./tooltip";
 
+/**
+ * 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 const toggle = (
     gui: IMGUI,
     layout: IGridLayout | LayoutBox,
     id: string,
-    lx: number,
     val: boolean[],
     i: number,
+    square?: boolean,
     label?: string,
     info?: string
 ) => {
     const { x, y, w, h } = isLayout(layout) ? layout.next() : layout;
-    return toggleRaw(gui, id, x, y, w, h, lx, val, i, label, info);
+    return toggleRaw(
+        gui,
+        id,
+        x,
+        y,
+        square ? h : w,
+        h,
+        square ? h : 0,
+        val,
+        i,
+        label,
+        info
+    );
 };
 
 export const toggleRaw = (

diff --git a/packages/imgui/src/components/xypad.ts b/packages/imgui/src/components/xypad.ts
@@ -12,14 +12,75 @@ import {
     round2,
     Vec
 } from "@thi.ng/vectors";
-import { Key, MouseButton } from "../api";
+import { IGridLayout, Key, MouseButton } from "../api";
 import { IMGUI } from "../gui";
 import { textLabelRaw } from "./textlabel";
 import { tooltipRaw } from "./tooltip";
 
 const $ = (v: Vec, prec: number, min: Vec, max: Vec) =>
     clamp2(v, round2(v, v, prec), min, max);
 
+/**
+ *
+ * `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 const xyPad = (
+    gui: IMGUI,
+    layout: IGridLayout,
+    id: string,
+    min: Vec,
+    max: Vec,
+    prec: number,
+    val: Vec,
+    mode: number,
+    yUp: boolean,
+    label?: string,
+    fmt?: Fn<Vec, string>,
+    info?: string
+) => {
+    const ch = layout.cellH;
+    const gap = layout.gap;
+    let rows = mode > 0 ? mode : layout.cellW / (ch + gap);
+    rows = mode == -2 ? Math.ceil(rows) : rows | 0;
+    const { x, y, w, h } = layout.next([1, rows + 1]);
+    const hh = mode === -2 ? w : h - ch - gap;
+    return xyPadRaw(
+        gui,
+        id,
+        x,
+        y,
+        w,
+        hh,
+        min,
+        max,
+        prec,
+        val,
+        yUp,
+        0,
+        hh + gap + ch / 2 + gui.theme.baseLine,
+        label,
+        fmt,
+        info
+    );
+};
+
 export const xyPadRaw = (
     gui: IMGUI,
     id: string,

diff --git a/packages/imgui/src/gui.ts b/packages/imgui/src/gui.ts
@@ -167,6 +167,10 @@ export class IMGUI implements IToHiccup {
         return this.focusID === id ? this.theme.focus : undefined;
     }
 
+    textWidth(txt: string) {
+        return this.theme.charWidth * txt.length;
+    }
+
     add(...els: any[]) {
         this.layers[0].push(...els);
     }