feat(imgui): add dropdown widget, update hover behaviors

packages/imgui/src/components/button.ts

@@ -24,9 +24,9 @@ export const button = (
         }
         info && tooltip(gui, info);
     }
-    gui.requestFocus(id);
+    const focused = gui.requestFocus(id);
     box.attribs = {
-        fill: hover ? gui.fgColor(true) : gui.bgColor(false),
+        fill: hover ? gui.fgColor(true) : gui.bgColor(hover || focused),
         stroke: gui.focusColor(id)
     };
     gui.add(box);
@@ -38,7 +38,7 @@ export const button = (
                 label
             )
         );
-    if (gui.focusID == id) {
+    if (focused) {
         switch (gui.key) {
             case Key.TAB:
                 gui.switchFocus();

packages/imgui/src/components/dropdown.ts

@@ -0,0 +1,54 @@
+import { Key } from "../api";
+import { IMGUI } from "../gui";
+import { button } from "./button";
+
+export const dropdown = (
+    gui: IMGUI,
+    id: string,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    items: string[],
+    state: [number, boolean]
+) => {
+    let res = false;
+    const sel = state[0];
+    if (state[1]) {
+        for (let i = 0, n = items.length; i < n; i++) {
+            if (button(gui, id + "-" + i, x, y, w, h, items[i])) {
+                if (i !== sel) {
+                    state[0] = i;
+                    res = true;
+                }
+                state[1] = false;
+            }
+            y += h + 2;
+        }
+        const fID = gui.focusID;
+        if (fID.startsWith(`${id}-`)) {
+            switch (gui.key) {
+                case Key.UP: {
+                    const next = Math.max(0, state[0] - 1);
+                    gui.focusID = id + "-" + next;
+                    state[0] = next;
+                    res = true;
+                    break;
+                }
+                case Key.DOWN: {
+                    const next = Math.min(items.length - 1, state[0] + 1);
+                    gui.focusID = id + "-" + next;
+                    state[0] = next;
+                    res = true;
+                    break;
+                }
+                default:
+            }
+        }
+    } else {
+        if (button(gui, id + "-" + sel, x, y, w, h, items[sel])) {
+            state[1] = true;
+        }
+    }
+    return res;
+};

packages/imgui/src/components/slider.ts

@@ -37,7 +37,7 @@ export const slider = (
     if (hover) {
         gui.hotID = id;
         const aid = gui.activeID;
-        if ((aid === "" || aid == id) && gui.buttons == MouseButton.LEFT) {
+        if ((aid === "" || aid === id) && gui.buttons == MouseButton.LEFT) {
             gui.activeID = id;
             active = true;
             val[i] = $(
@@ -52,14 +52,14 @@ export const slider = (
         }
         info && tooltip(gui, info);
     }
-    gui.requestFocus(id);
+    const focused = gui.requestFocus(id);
     const v = val[i];
     const normVal = norm(v, min, max);
     const valueBox = rect([x, y], [1 + normVal * (w - 1), h], {
         fill: gui.fgColor(hover)
     });
     box.attribs = {
-        fill: gui.bgColor(hover),
+        fill: gui.bgColor(hover || focused),
         stroke: gui.focusColor(id)
     };
     gui.add(
@@ -71,7 +71,7 @@ export const slider = (
             (label ? label + " " : "") + (fmt ? fmt(v) : v)
         )
     );
-    if (gui.focusID == id) {
+    if (focused) {
         switch (gui.key) {
             case Key.TAB:
                 gui.switchFocus();

packages/imgui/src/components/textfield.ts

@@ -63,7 +63,7 @@ export const textField = (
             drawTxt
         )
     );
-    if (gui.focusID == id) {
+    if (focused) {
         const cursor = label[1] || 0;
         const drawCursor = Math.min(cursor - offset, maxLen);
         const xx = x + pad + drawCursor * cw;

packages/imgui/src/components/xypad.ts

@@ -45,16 +45,16 @@ export const xyPad = (
     if (hover) {
         gui.hotID = id;
         const aid = gui.activeID;
-        if ((aid === "" || aid == id) && gui.buttons == MouseButton.LEFT) {
+        if ((aid === "" || aid === id) && gui.buttons == MouseButton.LEFT) {
             gui.activeID = id;
             active = true;
             $(fit2(val, gui.mouse, pos, maxPos, min, max), prec, min, max);
         }
         info && tooltip(gui, info);
     }
-    gui.requestFocus(id);
+    const focused = gui.requestFocus(id);
     box.attribs = {
-        fill: gui.bgColor(hover),
+        fill: gui.bgColor(hover || focused),
         stroke: gui.focusColor(id)
     };
     const { 0: cx, 1: cy } = fit2([], val, min, max, pos, maxPos);

packages/imgui/src/gui.ts

@@ -48,17 +48,16 @@ export class IMGUI implements IToHiccup {
         const touchEnd = () => {
             this.buttons &= ~MouseButton.LEFT;
         };
+        const mouseActive = (e: MouseEvent) => {
+            setMouse(e, this.mouse);
+            this.buttons = e.buttons;
+        };
         this.attribs = {
             onmousemove: (e: MouseEvent) => {
-                const b = (<HTMLCanvasElement>e.target).getBoundingClientRect();
-                setC2(this.mouse, e.clientX - b.left, e.clientY - b.top);
-            },
-            onmousedown: (e: MouseEvent) => {
-                this.buttons = e.buttons;
-            },
-            onmouseup: (e: MouseEvent) => {
-                this.buttons = e.buttons;
+                setMouse(e, this.mouse);
             },
+            onmousedown: mouseActive,
+            onmouseup: mouseActive,
             ontouchstart: touchActive,
             ontouchmove: touchActive,
             ontouchend: touchEnd,

packages/imgui/src/index.ts

@@ -2,6 +2,7 @@ export * from "./api";
 export * from "./gui";
 
 export * from "./components/button";
+export * from "./components/dropdown";
 export * from "./components/slider";
 export * from "./components/textfield";
 export * from "./components/textlabel";