refactor(imgui): update mouse hover handling

thi-ng · Aug 12, 2019 · 8e907e0 · 8e907e0
1 parent d381d33
commit 8e907e0
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 72 deletions.
diff --git a/packages/imgui/src/components/button.ts b/packages/imgui/src/components/button.ts
@@ -1,7 +1,7 @@
-import { pointInside, rect } from "@thi.ng/geom";
+import { rect } from "@thi.ng/geom";
 import { IShape } from "@thi.ng/geom-api";
 import { hash, ReadonlyVec, ZERO2 } from "@thi.ng/vectors";
-import { IGridLayout, LayoutBox, MouseButton } from "../api";
+import { IGridLayout, LayoutBox } from "../api";
 import { handleButtonKeys } from "../behaviors/button";
 import { IMGUI } from "../gui";
 import { isLayout } from "../layout";
@@ -80,12 +80,9 @@ export const buttonRaw = (
     info?: string
 ) => {
     gui.registerID(id, hash);
-    const hover = pointInside(shape, gui.mouse);
+    const hover = gui.isHover(id, shape);
     if (hover) {
-        gui.hotID = id;
-        if (gui.activeID === "" && gui.buttons & MouseButton.LEFT) {
-            gui.activeID = id;
-        }
+        gui.isMouseDown() && (gui.activeID = id);
         info && tooltipRaw(gui, info);
     }
     const focused = gui.requestFocus(id);

diff --git a/packages/imgui/src/components/dial.ts b/packages/imgui/src/components/dial.ts
@@ -8,7 +8,7 @@ import {
     TAU
 } from "@thi.ng/math";
 import { cartesian2, hash } from "@thi.ng/vectors";
-import { LayoutBox, MouseButton } from "../api";
+import { LayoutBox } from "../api";
 import { dialVal } from "../behaviors/dial";
 import { handleSlider1Keys } from "../behaviors/slider";
 import { IMGUI } from "../gui";
@@ -70,18 +70,17 @@ export const dialRaw = (
 ) => {
     const r = Math.min(w, h) / 2;
     const pos = [x + w / 2, y + h / 2];
-    const key = hash([x, y, r]);
-    gui.registerID(id, key);
-    const hover = pointInCircle(gui.mouse, pos, r);
-    let active = false;
     const thetaGap = PI / 2;
     const startTheta = HALF_PI + thetaGap / 2;
+    const key = hash([x, y, r]);
+    gui.registerID(id, key);
+    const aid = gui.activeID;
+    const hover =
+        aid === id || (aid === "" && pointInCircle(gui.mouse, pos, r));
     if (hover) {
         gui.hotID = id;
-        const aid = gui.activeID;
-        if ((aid === "" || aid === id) && gui.buttons & MouseButton.LEFT) {
+        if (gui.isMouseDown()) {
             gui.activeID = id;
-            active = true;
             val[i] = dialVal(
                 gui.mouse,
                 pos,
@@ -125,5 +124,5 @@ export const dialRaw = (
         return true;
     }
     gui.lastID = id;
-    return active;
+    return gui.activeID === id;
 };
diff --git a/packages/imgui/src/components/ring.ts b/packages/imgui/src/components/ring.ts
@@ -11,7 +11,6 @@ import {
 } from "@thi.ng/math";
 import { map, normRange } from "@thi.ng/transducers";
 import { cartesian2, hash, Vec } from "@thi.ng/vectors";
-import { MouseButton } from "../api";
 import { dialVal } from "../behaviors/dial";
 import { handleSlider1Keys } from "../behaviors/slider";
 import { IMGUI } from "../gui";
@@ -99,16 +98,15 @@ export const ringRaw = (
     const key = hash([x, y, r]);
     gui.registerID(id, key);
     const pos = [x + r, y + r];
-    const hover = pointInRect(gui.mouse, [x, y], [w, h]);
-    let active = false;
     const startTheta = HALF_PI + thetaGap / 2;
     const endTheta = HALF_PI + TAU - thetaGap / 2;
+    const aid = gui.activeID;
+    const hover =
+        aid === id || (aid === "" && pointInRect(gui.mouse, [x, y], [w, h]));
     if (hover) {
         gui.hotID = id;
-        const aid = gui.activeID;
-        if ((aid === "" || aid === id) && gui.buttons & MouseButton.LEFT) {
+        if (gui.isMouseDown()) {
             gui.activeID = id;
-            active = true;
             val[i] = dialVal(
                 gui.mouse,
                 pos,
@@ -161,5 +159,5 @@ export const ringRaw = (
         return true;
     }
     gui.lastID = id;
-    return active;
+    return gui.activeID === id;
 };
diff --git a/packages/imgui/src/components/sliderh.ts b/packages/imgui/src/components/sliderh.ts
@@ -1,8 +1,8 @@
 import { Fn } from "@thi.ng/api";
-import { pointInside, rect } from "@thi.ng/geom";
+import { rect } from "@thi.ng/geom";
 import { fit, norm } from "@thi.ng/math";
 import { hash } from "@thi.ng/vectors";
-import { IGridLayout, LayoutBox, MouseButton } from "../api";
+import { IGridLayout, LayoutBox } from "../api";
 import { handleSlider1Keys, slider1Val } from "../behaviors/slider";
 import { IMGUI } from "../gui";
 import { isLayout } from "../layout";
@@ -70,14 +70,10 @@ export const sliderHRaw = (
     const key = hash([x, y, w, h]);
     gui.registerID(id, key);
     const box = gui.resource(id, key, () => rect([x, y], [w, h], {}));
-    const hover = pointInside(box, gui.mouse);
-    let active = false;
+    const hover = gui.isHover(id, box);
     if (hover) {
-        gui.hotID = id;
-        const aid = gui.activeID;
-        if ((aid === "" || aid === id) && gui.buttons & MouseButton.LEFT) {
+        if (gui.isMouseDown()) {
             gui.activeID = id;
-            active = true;
             val[i] = slider1Val(
                 fit(gui.mouse[0], x, x + w - 1, min, max),
                 min,
@@ -109,5 +105,5 @@ export const sliderHRaw = (
         return true;
     }
     gui.lastID = id;
-    return active;
+    return gui.activeID === id;
 };
diff --git a/packages/imgui/src/components/sliderv.ts b/packages/imgui/src/components/sliderv.ts
@@ -1,8 +1,8 @@
 import { Fn } from "@thi.ng/api";
-import { pointInside, rect } from "@thi.ng/geom";
+import { rect } from "@thi.ng/geom";
 import { fit, norm } from "@thi.ng/math";
 import { hash, ZERO2 } from "@thi.ng/vectors";
-import { IGridLayout, LayoutBox, MouseButton } from "../api";
+import { IGridLayout, LayoutBox } from "../api";
 import { handleSlider1Keys, slider1Val } from "../behaviors/slider";
 import { IMGUI } from "../gui";
 import { isLayout } from "../layout";
@@ -71,15 +71,11 @@ export const sliderVRaw = (
     const key = hash([x, y, w, h]);
     gui.registerID(id, key);
     const box = gui.resource(id, key, () => rect([x, y], [w, h], {}));
-    const hover = pointInside(box, gui.mouse);
     const ymax = y + h;
-    let active = false;
+    const hover = gui.isHover(id, box);
     if (hover) {
-        gui.hotID = id;
-        const aid = gui.activeID;
-        if ((aid === "" || aid === id) && gui.buttons & MouseButton.LEFT) {
+        if (gui.isMouseDown()) {
             gui.activeID = id;
-            active = true;
             val[i] = slider1Val(
                 fit(gui.mouse[1], ymax - 1, y, min, max),
                 min,
@@ -122,5 +118,5 @@ export const sliderVRaw = (
         return true;
     }
     gui.lastID = id;
-    return active;
+    return gui.activeID === id;
 };
diff --git a/packages/imgui/src/components/textfield.ts b/packages/imgui/src/components/textfield.ts
@@ -1,13 +1,8 @@
 import { Predicate } from "@thi.ng/api";
-import { pointInside, rect } from "@thi.ng/geom";
+import { rect } from "@thi.ng/geom";
 import { fitClamped } from "@thi.ng/math";
 import { hash } from "@thi.ng/vectors";
-import {
-    IGridLayout,
-    Key,
-    LayoutBox,
-    MouseButton
-} from "../api";
+import { IGridLayout, Key, LayoutBox } from "../api";
 import { IMGUI } from "../gui";
 import { isLayout } from "../layout";
 import { textLabelRaw } from "./textlabel";
@@ -48,11 +43,10 @@ export const textFieldRaw = (
     const key = hash([x, y, w, h]);
     gui.registerID(id, key);
     const box = gui.resource(id, key, () => rect([x, y], [w, h], {}));
-    const hover = pointInside(box, gui.mouse);
+    const hover = gui.isHover(id, box);
     if (hover) {
-        gui.hotID = id;
-        if (gui.buttons & MouseButton.LEFT) {
-            gui.activeID === "" && (gui.activeID = id);
+        if (gui.isMouseDown()) {
+            gui.activeID = id;
             label[1] = Math.min(
                 Math.round(
                     fitClamped(

diff --git a/packages/imgui/src/components/toggle.ts b/packages/imgui/src/components/toggle.ts
@@ -1,6 +1,6 @@
-import { pointInside, rect } from "@thi.ng/geom";
+import { rect } from "@thi.ng/geom";
 import { hash } from "@thi.ng/vectors";
-import { IGridLayout, LayoutBox, MouseButton } from "../api";
+import { IGridLayout, LayoutBox } from "../api";
 import { handleButtonKeys } from "../behaviors/button";
 import { IMGUI } from "../gui";
 import { isLayout } from "../layout";
@@ -63,12 +63,9 @@ export const toggleRaw = (
     const key = hash([x, y, w, h]);
     gui.registerID(id, key);
     const box = gui.resource(id, key, () => rect([x, y], [w, h]));
-    const hover = pointInside(box, gui.mouse);
+    const hover = gui.isHover(id, box);
     if (hover) {
-        gui.hotID = id;
-        if (gui.activeID === "" && gui.buttons & MouseButton.LEFT) {
-            gui.activeID = id;
-        }
+        gui.isMouseDown() && (gui.activeID = id);
         info && tooltipRaw(gui, info);
     }
     const focused = gui.requestFocus(id);

diff --git a/packages/imgui/src/components/xypad.ts b/packages/imgui/src/components/xypad.ts
@@ -1,14 +1,13 @@
 import { Fn } from "@thi.ng/api";
-import { line, pointInside, rect } from "@thi.ng/geom";
+import { line, rect } from "@thi.ng/geom";
 import { fit2, hash, Vec } from "@thi.ng/vectors";
-import { IGridLayout, LayoutBox, MouseButton } from "../api";
+import { IGridLayout, LayoutBox } from "../api";
 import { handleSlider2Keys, slider2Val } from "../behaviors/slider";
 import { IMGUI } from "../gui";
 import { textLabelRaw } from "./textlabel";
 import { tooltipRaw } from "./tooltip";
 
 /**
- *
  * `mode` interpretation:
  *
  * - -2 = square
@@ -90,22 +89,18 @@ export const xyPadRaw = (
     fmt?: Fn<Vec, string>,
     info?: string
 ) => {
-    const maxX = x + w - 1;
-    const maxY = y + h - 1;
+    const maxX = x + w;
+    const maxY = y + h;
     const pos = yUp ? [x, maxY] : [x, y];
-    const maxPos = yUp ? [maxX, y] : [maxX, y + h - 1];
+    const maxPos = yUp ? [maxX, y] : [maxX, maxY];
     const key = hash([x, y, w, h]);
     gui.registerID(id, key);
     const box = gui.resource(id, key, () => rect([x, y], [w, h]));
     const col = gui.textColor(false);
-    const hover = pointInside(box, gui.mouse);
-    let active = false;
+    const hover = gui.isHover(id, box);
     if (hover) {
-        gui.hotID = id;
-        const aid = gui.activeID;
-        if ((aid === "" || aid === id) && gui.buttons & MouseButton.LEFT) {
+        if (gui.isMouseDown()) {
             gui.activeID = id;
-            active = true;
             slider2Val(
                 fit2(val, gui.mouse, pos, maxPos, min, max),
                 min,
@@ -140,5 +135,5 @@ export const xyPadRaw = (
         return true;
     }
     gui.lastID = id;
-    return active;
+    return gui.activeID === id;
 };
diff --git a/packages/imgui/src/gui.ts b/packages/imgui/src/gui.ts
@@ -1,4 +1,6 @@
 import { Fn0, IToHiccup } from "@thi.ng/api";
+import { pointInside } from "@thi.ng/geom";
+import { IShape } from "@thi.ng/geom-api";
 import { setC2, Vec } from "@thi.ng/vectors";
 import {
     DEFAULT_THEME,
@@ -125,6 +127,18 @@ export class IMGUI implements IToHiccup {
         this.key = "";
     }
 
+    isHover(id: string, shape: IShape) {
+        const aid = this.activeID;
+        const hover =
+            aid === id || (aid === "" && pointInside(shape, this.mouse));
+        hover && (this.hotID = id);
+        return hover;
+    }
+
+    isMouseDown() {
+        return this.buttons & MouseButton.LEFT;
+    }
+
     isShiftDown() {
         return (this.modifiers & KeyModifier.SHIFT) > 0;
     }