feat(imgui): add buttonV, radialMenu, update dropdown

packages/imgui/src/components/button.ts

@@ -1,18 +1,19 @@
 import { pointInside, rect } from "@thi.ng/geom";
 import { IShape } from "@thi.ng/geom-api";
-import { Vec } from "@thi.ng/vectors";
+import { ReadonlyVec } from "@thi.ng/vectors";
 import { IGridLayout, LayoutBox, MouseButton } from "../api";
 import { handleButtonKeys } from "../behaviors/button";
 import { IMGUI } from "../gui";
 import { isLayout } from "../layout";
 import { textLabelRaw } from "./textlabel";
 import { tooltipRaw } from "./tooltip";
 
-export const button = (
+export const buttonH = (
     gui: IMGUI,
     layout: IGridLayout | LayoutBox,
     id: string,
     label?: string,
+    labelHover?: string,
     info?: string
 ) => {
     const theme = gui.theme;
@@ -21,8 +22,31 @@ export const button = (
         gui,
         id,
         rect([x, y], [w, h]),
+        [1, 0, 0, 1, x + theme.pad, y + h / 2 + theme.baseLine],
         label,
-        [x + theme.pad, y + h / 2 + theme.baseLine],
+        labelHover,
+        info
+    );
+};
+
+export const buttonV = (
+    gui: IMGUI,
+    layout: IGridLayout | LayoutBox,
+    id: string,
+    rows: number,
+    label?: string,
+    labelHover?: string,
+    info?: string
+) => {
+    const theme = gui.theme;
+    const { x, y, w, h } = isLayout(layout) ? layout.next([1, rows]) : layout;
+    return buttonRaw(
+        gui,
+        id,
+        rect([x, y], [w, h]),
+        [0, -1, 1, 0, x + w / 2 + theme.baseLine, y + h - theme.pad],
+        label,
+        labelHover,
         info
     );
 };
@@ -31,8 +55,9 @@ export const buttonRaw = (
     gui: IMGUI,
     id: string,
     shape: IShape,
+    lmat?: ReadonlyVec,
     label?: string,
-    lpos?: Vec,
+    labelHover?: string,
     info?: string
 ) => {
     const hover = pointInside(shape, gui.mouse);
@@ -49,7 +74,18 @@ export const buttonRaw = (
         stroke: gui.focusColor(id)
     };
     gui.add(shape);
-    label && lpos && gui.add(textLabelRaw(lpos, gui.textColor(hover), label));
+    label &&
+        lmat &&
+        gui.add(
+            textLabelRaw(
+                [0, 0],
+                {
+                    transform: lmat,
+                    fill: gui.textColor(hover)
+                },
+                hover && labelHover ? labelHover : label
+            )
+        );
     if (focused && handleButtonKeys(gui)) {
         return true;
     }

packages/imgui/src/components/dropdown.ts

@@ -1,51 +1,67 @@
 import { polygon } from "@thi.ng/geom";
 import { IGridLayout, Key } from "../api";
 import { IMGUI } from "../gui";
-import { button } from "./button";
+import { buttonH } from "./button";
 
 export const dropdown = (
     gui: IMGUI,
     layout: IGridLayout,
     id: string,
     state: [number, boolean],
     items: string[],
+    title: string,
     info?: string
 ) => {
     const nested = layout.nest(1, [1, state[1] ? items.length : 1]);
     let res = false;
     const sel = state[0];
+    const box = nested.next();
+    const { x, y, w, h } = box;
+    const tx = x + w - gui.theme.pad - 4;
+    const ty = y + h / 2;
     if (state[1]) {
-        for (let i = 0, n = items.length; i < n; i++) {
-            if (button(gui, nested, `${id}-${i}`, items[i])) {
-                if (i !== sel) {
-                    state[0] = i;
-                    res = true;
+        const bt = buttonH(gui, box, `${id}-title`, title);
+        gui.add(
+            polygon([[tx - 4, ty + 2], [tx + 4, ty + 2], [tx, ty - 2]], {
+                fill: gui.textColor(false)
+            })
+        );
+        if (bt) {
+            state[1] = false;
+        } else {
+            for (let i = 0, n = items.length; i < n; i++) {
+                if (buttonH(gui, nested, `${id}-${i}`, items[i])) {
+                    if (i !== sel) {
+                        state[0] = i;
+                        res = true;
+                    }
+                    state[1] = false;
                 }
-                state[1] = false;
             }
-        }
-        if (gui.focusID.startsWith(`${id}-`)) {
-            switch (gui.key) {
-                case Key.UP:
-                    return update(gui, state, id, Math.max(0, state[0] - 1));
-                case Key.DOWN:
-                    return update(
-                        gui,
-                        state,
-                        id,
-                        Math.min(items.length - 1, state[0] + 1)
-                    );
-                default:
+            if (gui.focusID.startsWith(`${id}-`)) {
+                switch (gui.key) {
+                    case Key.UP:
+                        return update(
+                            gui,
+                            state,
+                            id,
+                            Math.max(0, state[0] - 1)
+                        );
+                    case Key.DOWN:
+                        return update(
+                            gui,
+                            state,
+                            id,
+                            Math.min(items.length - 1, state[0] + 1)
+                        );
+                    default:
+                }
             }
         }
     } else {
-        const box = nested.next();
-        const { x, y, w, h } = box;
-        if (button(gui, box, `${id}-${sel}`, items[sel], info)) {
+        if (buttonH(gui, box, `${id}-${sel}`, items[sel], title, info)) {
             state[1] = true;
         }
-        const tx = x + w - gui.theme.pad - 4;
-        const ty = y + h / 2;
         gui.add(
             polygon([[tx - 4, ty - 2], [tx + 4, ty - 2], [tx, ty + 2]], {
                 fill: gui.textColor(false)

packages/imgui/src/components/radial-menu.ts

@@ -0,0 +1,47 @@
+import {
+    centroid,
+    circle,
+    polygon,
+    vertices
+} from "@thi.ng/geom";
+import { triFan } from "@thi.ng/geom-tessellate";
+import { add2 } from "@thi.ng/vectors";
+import { IMGUI } from "../gui";
+import { buttonRaw } from "./button";
+
+export const radialMenu = (
+    gui: IMGUI,
+    id: string,
+    x: number,
+    y: number,
+    r: number,
+    items: string[],
+    info: string[]
+) => {
+    const n = items.length;
+    const baseLine = gui.theme.baseLine;
+    let i = 0;
+    let res = -1;
+    for (let tri of triFan(vertices(circle([x, y], r), n))) {
+        const cell = polygon(tri);
+        const p = add2(null, centroid(cell)!, [
+            -gui.textWidth(items[i]) >> 1,
+            baseLine
+        ]);
+        if (
+            buttonRaw(
+                gui,
+                id + i,
+                cell,
+                [1, 0, 0, 1, p[0], p[1]],
+                items[i],
+                undefined,
+                info[i]
+            )
+        ) {
+            res = i;
+        }
+        i++;
+    }
+    return res;
+};

packages/imgui/src/index.ts

@@ -5,6 +5,7 @@ export * from "./layout";
 export * from "./components/button";
 export * from "./components/dial";
 export * from "./components/dropdown";
+export * from "./components/radial-menu";
 export * from "./components/radio";
 export * from "./components/sliderh";
 export * from "./components/sliderv";