Skip to content

Commit

Permalink
refactor(imgui): extract hover behavior fns, fix button behavior
Browse files Browse the repository at this point in the history 
- extract IMGUI.isHover as isHoverSlider()
- add isHoverButton(), revert behavior to not trigger if mouse released outside
- update all required comps
  • Loading branch information
@postspectacular
postspectacular committed Aug 14, 2019
1 parent d956954 commit 15ae744
Show file tree
Hide file tree
Showing 11 changed files with 48 additions and 44 deletions.
9 changes: 9 additions & 0 deletions packages/imgui/src/behaviors/button.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import { pointInside } from "@thi.ng/geom";
import { IShape } from "@thi.ng/geom-api";
import { Key } from "../api";
import { IMGUI } from "../gui";

export const isHoverButton = (gui: IMGUI, id: string, shape: IShape) => {
const aid = gui.activeID;
const hover = (aid === "" || aid === id) && pointInside(shape, gui.mouse);
hover && (gui.hotID = id);
return hover;
};

export const handleButtonKeys = (gui: IMGUI) => {
switch (gui.key) {
case Key.TAB:
Expand Down
9 changes: 9 additions & 0 deletions packages/imgui/src/behaviors/slider.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { pointInside } from "@thi.ng/geom";
import { IShape } from "@thi.ng/geom-api";
import { clamp, roundTo } from "@thi.ng/math";
import {
add2,
Expand All @@ -8,6 +10,13 @@ import {
import { Key } from "../api";
import { IMGUI } from "../gui";

export const isHoverSlider = (gui: IMGUI, id: string, shape: IShape) => {
const aid = gui.activeID;
const hover = aid === id || (aid === "" && pointInside(shape, gui.mouse));
hover && (gui.hotID = id);
return hover;
};

export const slider1Val = (x: number, min: number, max: number, prec: number) =>
clamp(roundTo(x, prec), min, max);

Expand Down
4 changes: 2 additions & 2 deletions packages/imgui/src/components/button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { rect } from "@thi.ng/geom";
import { IShape } from "@thi.ng/geom-api";
import { hash, ZERO2 } from "@thi.ng/vectors";
import { Color, IGridLayout, LayoutBox } from "../api";
import { handleButtonKeys } from "../behaviors/button";
import { handleButtonKeys, isHoverButton } from "../behaviors/button";
import { IMGUI } from "../gui";
import { isLayout } from "../layout";
import { textLabelRaw, textTransformH, textTransformV } from "./textlabel";
Expand Down Expand Up @@ -98,7 +98,7 @@ export const buttonRaw = (
info?: string
) => {
gui.registerID(id, hash);
const hover = gui.isHover(id, shape);
const hover = isHoverButton(gui, id, shape);
if (hover) {
gui.isMouseDown() && (gui.activeID = id);
info && tooltipRaw(gui, info);
Expand Down
17 changes: 7 additions & 10 deletions packages/imgui/src/components/dial.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Fn } from "@thi.ng/api";
import { circle, line } from "@thi.ng/geom";
import { pointInCircle } from "@thi.ng/geom-isec";
import {
HALF_PI,
norm,
Expand All @@ -10,7 +9,7 @@ import {
import { cartesian2, hash } from "@thi.ng/vectors";
import { LayoutBox } from "../api";
import { dialVal } from "../behaviors/dial";
import { handleSlider1Keys } from "../behaviors/slider";
import { handleSlider1Keys, isHoverSlider } from "../behaviors/slider";
import { IMGUI } from "../gui";
import { GridLayout, isLayout } from "../layout";
import { textLabelRaw } from "./textlabel";
Expand Down Expand Up @@ -74,9 +73,8 @@ export const dialRaw = (
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));
const bgShape = gui.resource(id, key, () => circle(pos, r, {}));
const hover = isHoverSlider(gui, id, bgShape);
if (hover) {
gui.hotID = id;
if (gui.isMouseDown()) {
Expand All @@ -96,9 +94,6 @@ export const dialRaw = (
}
const focused = gui.requestFocus(id);
const v = val[i];
const bgShape = gui.resource(id, key, () => circle(pos, r, {}));
bgShape.attribs.fill = gui.bgColor(hover || focused);
bgShape.attribs.stroke = gui.focusColor(id);
const valShape = gui.resource(id, v, () =>
line(
cartesian2(
Expand All @@ -110,15 +105,17 @@ export const dialRaw = (
{}
)
);
valShape.attribs.stroke = gui.fgColor(hover);
valShape.attribs.weight = 2;
const valLabel = gui.resource(id, "l" + v, () =>
textLabelRaw(
[x + lx, y + ly],
gui.textColor(false),
(label ? label + " " : "") + (fmt ? fmt(v) : v)
)
);
bgShape.attribs.fill = gui.bgColor(hover || focused);
bgShape.attribs.stroke = gui.focusColor(id);
valShape.attribs.stroke = gui.fgColor(hover);
valShape.attribs.weight = 2;
gui.add(bgShape, valShape, valLabel);
if (focused && handleSlider1Keys(gui, min, max, prec, val, i)) {
return true;
Expand Down
6 changes: 3 additions & 3 deletions packages/imgui/src/components/ring.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,8 +134,6 @@ export const ringRaw = (
{}
)
);
bgShape.attribs.fill = gui.bgColor(hover || focused);
bgShape.attribs.stroke = gui.focusColor(id);
const valShape = gui.resource(id, v, () =>
polygon(
[
Expand All @@ -145,14 +143,16 @@ export const ringRaw = (
{}
)
);
valShape.attribs.fill = gui.fgColor(hover);
const valLabel = gui.resource(id, "l" + v, () =>
textLabelRaw(
[x + lx, y + ly],
gui.textColor(false),
(label ? label + " " : "") + (fmt ? fmt(v) : v)
)
);
bgShape.attribs.fill = gui.bgColor(hover || focused);
bgShape.attribs.stroke = gui.focusColor(id);
valShape.attribs.fill = gui.fgColor(hover);
gui.add(bgShape, valShape, valLabel);
if (focused && handleSlider1Keys(gui, min, max, prec, val, i)) {
return true;
Expand Down
13 changes: 6 additions & 7 deletions packages/imgui/src/components/sliderh.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { rect } from "@thi.ng/geom";
import { fit, norm } from "@thi.ng/math";
import { hash } from "@thi.ng/vectors";
import { IGridLayout, LayoutBox } from "../api";
import { handleSlider1Keys, slider1Val } from "../behaviors/slider";
import { handleSlider1Keys, isHoverSlider, slider1Val } from "../behaviors/slider";
import { IMGUI } from "../gui";
import { isLayout } from "../layout";
import { textLabelRaw } from "./textlabel";
Expand Down Expand Up @@ -70,7 +70,7 @@ 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 = gui.isHover(id, box);
const hover = isHoverSlider(gui, id, box);
if (hover) {
if (gui.isMouseDown()) {
gui.activeID = id;
Expand All @@ -86,20 +86,19 @@ export const sliderHRaw = (
}
const focused = gui.requestFocus(id);
const v = val[i];
const normVal = norm(v, min, max);
const valueBox = gui.resource(id, v, () =>
rect([x, y], [1 + normVal * (w - 1), h], {})
rect([x, y], [1 + norm(v, min, max) * (w - 1), h], {})
);
valueBox.attribs.fill = gui.fgColor(hover);
box.attribs.fill = gui.bgColor(hover || focused);
box.attribs.stroke = gui.focusColor(id);
const valLabel = gui.resource(id, "l" + v, () =>
textLabelRaw(
[x + theme.pad, y + h / 2 + theme.baseLine],
gui.textColor(false),
(label ? label + " " : "") + (fmt ? fmt(v) : v)
)
);
box.attribs.fill = gui.bgColor(hover || focused);
box.attribs.stroke = gui.focusColor(id);
valueBox.attribs.fill = gui.fgColor(hover);
gui.add(box, valueBox, valLabel);
if (focused && handleSlider1Keys(gui, min, max, prec, val, i)) {
return true;
Expand Down
13 changes: 6 additions & 7 deletions packages/imgui/src/components/sliderv.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { rect } from "@thi.ng/geom";
import { fit, norm } from "@thi.ng/math";
import { hash, ZERO2 } from "@thi.ng/vectors";
import { IGridLayout, LayoutBox } from "../api";
import { handleSlider1Keys, slider1Val } from "../behaviors/slider";
import { handleSlider1Keys, isHoverSlider, slider1Val } from "../behaviors/slider";
import { IMGUI } from "../gui";
import { isLayout } from "../layout";
import { textLabelRaw, textTransformV } from "./textlabel";
Expand Down Expand Up @@ -72,7 +72,7 @@ export const sliderVRaw = (
gui.registerID(id, key);
const box = gui.resource(id, key, () => rect([x, y], [w, h], {}));
const ymax = y + h;
const hover = gui.isHover(id, box);
const hover = isHoverSlider(gui, id, box);
if (hover) {
if (gui.isMouseDown()) {
gui.activeID = id;
Expand All @@ -88,14 +88,10 @@ export const sliderVRaw = (
}
const focused = gui.requestFocus(id);
const v = val[i];
const normVal = norm(v, min, max);
const valueBox = gui.resource(id, v, () => {
const nh = normVal * (h - 1);
const nh = norm(v, min, max) * (h - 1);
return rect([x, ymax - nh], [w, nh], {});
});
valueBox.attribs.fill = gui.fgColor(hover);
box.attribs.fill = gui.bgColor(hover || focused);
box.attribs.stroke = gui.focusColor(id);
const valLabel = gui.resource(id, "l" + v, () =>
textLabelRaw(
ZERO2,
Expand All @@ -106,6 +102,9 @@ export const sliderVRaw = (
(label ? label + " " : "") + (fmt ? fmt(v) : v)
)
);
valueBox.attribs.fill = gui.fgColor(hover);
box.attribs.fill = gui.bgColor(hover || focused);
box.attribs.stroke = gui.focusColor(id);
gui.add(box, valueBox, valLabel);
if (focused && handleSlider1Keys(gui, min, max, prec, val, i)) {
return true;
Expand Down
3 changes: 2 additions & 1 deletion packages/imgui/src/components/textfield.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { rect } from "@thi.ng/geom";
import { fitClamped } from "@thi.ng/math";
import { hash } from "@thi.ng/vectors";
import { IGridLayout, Key, LayoutBox } from "../api";
import { isHoverSlider } from "../behaviors/slider";
import { IMGUI } from "../gui";
import { isLayout } from "../layout";
import { textLabelRaw } from "./textlabel";
Expand Down Expand Up @@ -43,7 +44,7 @@ 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 = gui.isHover(id, box);
const hover = isHoverSlider(gui, id, box);
if (hover) {
if (gui.isMouseDown()) {
gui.activeID = id;
Expand Down
4 changes: 2 additions & 2 deletions packages/imgui/src/components/toggle.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { rect } from "@thi.ng/geom";
import { hash } from "@thi.ng/vectors";
import { IGridLayout, LayoutBox } from "../api";
import { handleButtonKeys } from "../behaviors/button";
import { handleButtonKeys, isHoverButton } from "../behaviors/button";
import { IMGUI } from "../gui";
import { isLayout } from "../layout";
import { textLabelRaw } from "./textlabel";
Expand Down Expand Up @@ -63,7 +63,7 @@ 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 = gui.isHover(id, box);
const hover = isHoverButton(gui, id, box);
if (hover) {
gui.isMouseDown() && (gui.activeID = id);
info && tooltipRaw(gui, info);
Expand Down
4 changes: 2 additions & 2 deletions packages/imgui/src/components/xypad.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Fn } from "@thi.ng/api";
import { line, rect } from "@thi.ng/geom";
import { fit2, hash, Vec } from "@thi.ng/vectors";
import { IGridLayout, LayoutBox } from "../api";
import { handleSlider2Keys, slider2Val } from "../behaviors/slider";
import { handleSlider2Keys, isHoverSlider, slider2Val } from "../behaviors/slider";
import { IMGUI } from "../gui";
import { textLabelRaw } from "./textlabel";
import { tooltipRaw } from "./tooltip";
Expand Down Expand Up @@ -97,7 +97,7 @@ export const xyPadRaw = (
gui.registerID(id, key);
const box = gui.resource(id, key, () => rect([x, y], [w, h]));
const col = gui.textColor(false);
const hover = gui.isHover(id, box);
const hover = isHoverSlider(gui, id, box);
if (hover) {
if (gui.isMouseDown()) {
gui.activeID = id;
Expand Down
10 changes: 0 additions & 10 deletions packages/imgui/src/gui.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { Fn0, IToHiccup } from "@thi.ng/api";
import { pointInside } from "@thi.ng/geom";
import { IShape } from "@thi.ng/geom-api";
import { set2, Vec } from "@thi.ng/vectors";
import {
DEFAULT_THEME,
Expand Down Expand Up @@ -87,14 +85,6 @@ 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;
}
Expand Down

0 comments on commit 15ae744

Please sign in to comment.