feat(imgui): update button, dropdown, radio, sliderHGroup

- update buttonRaw to allow any IShape - update button to provide rect - update dropdown, radio, sliderHGroup to use nested layout - update radio to support horizontal/vertical layouts - remove dropdownRaw, radioRaw, sliderHGroupRaw
thi-ng · Aug 6, 2019 · 588a321 · 588a321
1 parent 0c1d483
commit 588a321
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 106 deletions.
diff --git a/packages/imgui/src/components/button.ts b/packages/imgui/src/components/button.ts
@@ -1,4 +1,6 @@
 import { pointInside, rect } from "@thi.ng/geom";
+import { IShape } from "@thi.ng/geom-api";
+import { Vec } from "@thi.ng/vectors";
 import {
     IGridLayout,
     Key,
@@ -17,23 +19,27 @@ export const button = (
     label?: string,
     info?: string
 ) => {
+    const theme = gui.theme;
     const { x, y, w, h } = isLayout(layout) ? layout.next() : layout;
-    return buttonRaw(gui, id, x, y, w, h, label, info);
+    return buttonRaw(
+        gui,
+        id,
+        rect([x, y], [w, h]),
+        label,
+        [x + theme.pad, y + h / 2 + theme.baseLine],
+        info
+    );
 };
 
 export const buttonRaw = (
     gui: IMGUI,
     id: string,
-    x: number,
-    y: number,
-    w: number,
-    h: number,
+    shape: IShape,
     label?: string,
+    lpos?: Vec,
     info?: string
 ) => {
-    const theme = gui.theme;
-    const box = rect([x, y], [w, h]);
-    const hover = pointInside(box, gui.mouse);
+    const hover = pointInside(shape, gui.mouse);
     if (hover) {
         gui.hotID = id;
         if (gui.activeID === "" && gui.buttons & MouseButton.LEFT) {
@@ -42,19 +48,12 @@ export const buttonRaw = (
         info && tooltipRaw(gui, info);
     }
     const focused = gui.requestFocus(id);
-    box.attribs = {
+    shape.attribs = {
         fill: hover ? gui.fgColor(true) : gui.bgColor(focused),
         stroke: gui.focusColor(id)
     };
-    gui.add(box);
-    label &&
-        gui.add(
-            textLabelRaw(
-                [x + theme.pad, y + h / 2 + theme.baseLine],
-                gui.textColor(hover),
-                label
-            )
-        );
+    gui.add(shape);
+    label && lpos && gui.add(textLabelRaw(lpos, gui.textColor(hover), label));
     if (focused) {
         switch (gui.key) {
             case Key.TAB:

diff --git a/packages/imgui/src/components/dropdown.ts b/packages/imgui/src/components/dropdown.ts
@@ -1,48 +1,28 @@
 import { polygon } from "@thi.ng/geom";
-import { IGridLayout, Key, LayoutBox } from "../api";
+import { IGridLayout, Key } from "../api";
 import { IMGUI } from "../gui";
-import { isLayout } from "../layout";
-import { buttonRaw } from "./button";
+import { button } from "./button";
 
 export const dropdown = (
     gui: IMGUI,
-    layout: IGridLayout | LayoutBox,
+    layout: IGridLayout,
     id: string,
     state: [number, boolean],
     items: string[],
     info?: string
 ) => {
-    const { x, y, w, ch, gap } = isLayout(layout)
-        ? layout.next([1, state[1] ? items.length : 1])
-        : layout;
-    // prettier-ignore
-    return dropdownRaw(gui, id, x, y, w, ch, gap, state, items, info);
-};
-
-export const dropdownRaw = (
-    gui: IMGUI,
-    id: string,
-    x: number,
-    y: number,
-    w: number,
-    h: number,
-    gap: number,
-    state: [number, boolean],
-    items: string[],
-    info?: string
-) => {
+    const nested = layout.nest(1, [1, state[1] ? items.length : 1]);
     let res = false;
     const sel = state[0];
     if (state[1]) {
         for (let i = 0, n = items.length; i < n; i++) {
-            if (buttonRaw(gui, `${id}-${i}`, x, y, w, h, items[i])) {
+            if (button(gui, nested, `${id}-${i}`, items[i])) {
                 if (i !== sel) {
                     state[0] = i;
                     res = true;
                 }
                 state[1] = false;
             }
-            y += h + gap;
         }
         if (gui.focusID.startsWith(`${id}-`)) {
             switch (gui.key) {
@@ -59,7 +39,9 @@ export const dropdownRaw = (
             }
         }
     } else {
-        if (buttonRaw(gui, `${id}-${sel}`, x, y, w, h, items[sel], info)) {
+        const box = nested.next();
+        const { x, y, w, h } = box;
+        if (button(gui, box, `${id}-${sel}`, items[sel], info)) {
             state[1] = true;
         }
         const tx = x + w - gui.theme.pad - 4;

diff --git a/packages/imgui/src/components/radio.ts b/packages/imgui/src/components/radio.ts
@@ -1,50 +1,31 @@
 import { IGridLayout } from "../api";
 import { IMGUI } from "../gui";
-import { isLayout } from "../layout";
 import { toggleRaw } from "./toggle";
 
-export const radioH = (
+export const radio = (
     gui: IMGUI,
     layout: IGridLayout,
     id: string,
+    horizontal: boolean,
     val: number[],
     idx: number,
     labels: string[],
     info: string[] = []
 ) => {
-    const { x, y, cw, ch, gap } = isLayout(layout)
-        ? layout.next([labels.length, 1])
-        : layout;
-    // prettier-ignore
-    return radioRaw(gui, id, x, y, ch, ch, ch, cw + gap, 0, val, idx, labels, info);
-};
-
-export const radioRaw = (
-    gui: IMGUI,
-    id: string,
-    x: number,
-    y: number,
-    w: number,
-    h: number,
-    lx: number,
-    offX: number,
-    offY: number,
-    val: number[],
-    idx: number,
-    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[] = [];
-    // prettier-ignore
-    for (let n = labels.length, sel = val[idx], i = 0; i < n; i++) {
+    const lx = nested.cellH;
+    const sel = val[idx];
+    for (let i = 0; i < n; i++) {
         tmp[0] = sel === i;
-        if (toggleRaw(gui, `${id}-${i}`, x, y, w, h, lx, tmp, 0, labels[i], info[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])) {
             val[idx] = i;
             res = true;
         }
-        x += offX;
-        y += offY;
     }
     return res;
 };
diff --git a/packages/imgui/src/components/sliderh.ts b/packages/imgui/src/components/sliderh.ts
@@ -119,7 +119,7 @@ export const sliderHRaw = (
 
 export const sliderHGroup = (
     gui: IMGUI,
-    layout: IGridLayout | LayoutBox,
+    layout: IGridLayout,
     id: string,
     horizontal: boolean,
     min: number,
@@ -130,39 +130,12 @@ export const sliderHGroup = (
     fmt?: Fn<number, string>,
     info: string[] = []
 ) => {
-    const { x, y, cw, ch, gap } = isLayout(layout)
-        ? horizontal
-            ? layout.next([vals.length, 1])
-            : layout.next([1, vals.length])
-        : layout;
-    const [offX, offY] = horizontal ? [cw + gap, 0] : [0, ch + gap];
-    // prettier-ignore
-    return sliderHGroupRaw(gui, id, x, y, cw, ch, offX, offY, min, max, prec, vals, label, fmt, info);
-};
-
-export const sliderHGroupRaw = (
-    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[] = []
-) => {
+    const n = vals.length;
+    const nested = horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [1, n]);
     let res = false;
-    // prettier-ignore
-    for (let n = vals.length, i = 0; i < n; i++) {
-        res = sliderHRaw(gui, `${id}-${i}`, x, y, w, h, min, max, prec, vals, i, label[i], fmt, info[i]) || res;
-        x += offX;
-        y += offY;
+    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;
 };