Skip to content

Commit

Permalink
perf(imgui): update comp hashing to use murmur hash vs toString, use …
Browse files Browse the repository at this point in the history 
…ES6 Maps

- hash() ~2x faster than String()
- use ES6 Maps for IMGUI resource caches to avoid hash string conv (8-10x faster)
  • Loading branch information
@postspectacular
postspectacular committed Aug 11, 2019
1 parent 7c3d399 commit 7db92b9
Show file tree
Hide file tree
Showing 10 changed files with 77 additions and 92 deletions.
20 changes: 10 additions & 10 deletions packages/imgui/src/components/button.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { pointInside, rect } from "@thi.ng/geom";
import { IShape } from "@thi.ng/geom-api";
import { ReadonlyVec, ZERO2 } from "@thi.ng/vectors";
import { hash, ReadonlyVec, ZERO2 } from "@thi.ng/vectors";
import { IGridLayout, LayoutBox, MouseButton } from "../api";
import { handleButtonKeys } from "../behaviors/button";
import { IMGUI } from "../gui";
Expand All @@ -18,13 +18,13 @@ export const buttonH = (
) => {
const theme = gui.theme;
const { x, y, w, h } = isLayout(layout) ? layout.next() : layout;
const hash = String([x, y, w, h]);
const key = hash([x, y, w, h]);
return buttonRaw(
gui,
id,
gui.resource(id, hash, () => rect([x, y], [w, h])),
hash,
gui.resource(id, "mat" + hash, () => [
gui.resource(id, key, () => rect([x, y], [w, h])),
key,
gui.resource(id, "mat" + key, () => [
1,
0,
0,
Expand All @@ -49,13 +49,13 @@ export const buttonV = (
) => {
const theme = gui.theme;
const { x, y, w, h } = isLayout(layout) ? layout.next([1, rows]) : layout;
const hash = String([x, y, w, h]);
const key = hash([x, y, w, h]);
return buttonRaw(
gui,
id,
gui.resource(id, hash, () => rect([x, y], [w, h])),
hash,
gui.resource(id, "mat" + hash, () => [
gui.resource(id, key, () => rect([x, y], [w, h])),
key,
gui.resource(id, "mat" + key, () => [
0,
-1,
1,
Expand All @@ -73,7 +73,7 @@ export const buttonRaw = (
gui: IMGUI,
id: string,
shape: IShape,
hash: string,
hash: number | string,
lmat?: ReadonlyVec,
label?: string,
labelHover?: string,
Expand Down
12 changes: 6 additions & 6 deletions packages/imgui/src/components/dial.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
PI,
TAU
} from "@thi.ng/math";
import { cartesian2 } from "@thi.ng/vectors";
import { cartesian2, hash } from "@thi.ng/vectors";
import { LayoutBox, MouseButton } from "../api";
import { dialVal } from "../behaviors/dial";
import { handleSlider1Keys } from "../behaviors/slider";
Expand Down Expand Up @@ -70,16 +70,16 @@ export const dialRaw = (
) => {
const r = Math.min(w, h) / 2;
const pos = [x + w / 2, y + h / 2];
const hash = String([x, y, r]);
gui.registerID(id, hash);
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;
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] = dialVal(
Expand All @@ -97,10 +97,10 @@ export const dialRaw = (
}
const focused = gui.requestFocus(id);
const v = val[i];
const bgShape = gui.resource(id, hash, () => circle(pos, r, {}));
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, String(v), () =>
const valShape = gui.resource(id, v, () =>
line(
cartesian2(
null,
Expand Down
10 changes: 5 additions & 5 deletions packages/imgui/src/components/radial-menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from "@thi.ng/geom";
import { triFan } from "@thi.ng/geom-tessellate";
import { map } from "@thi.ng/transducers";
import { add2, Vec } from "@thi.ng/vectors";
import { add2, hash, Vec } from "@thi.ng/vectors";
import { IMGUI } from "../gui";
import { buttonRaw } from "./button";

Expand All @@ -21,9 +21,9 @@ export const radialMenu = (
info: string[]
) => {
const n = items.length;
const hash = String([x, y, r, n]);
gui.registerID(id, hash);
const cells: [Polygon, Vec][] = gui.resource(id, hash, () => [
const key = hash([x, y, r, n]);
gui.registerID(id, key);
const cells: [Polygon, Vec][] = gui.resource(id, key, () => [
...map((pts) => {
const cell = polygon(pts);
return [cell, centroid(cell)];
Expand All @@ -42,7 +42,7 @@ export const radialMenu = (
gui,
id + i,
cell[0],
String(p),
hash(p),
[1, 0, 0, 1, p[0], p[1]],
items[i],
undefined,
Expand Down
16 changes: 7 additions & 9 deletions packages/imgui/src/components/ring.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {
TAU
} from "@thi.ng/math";
import { map, normRange } from "@thi.ng/transducers";
import { cartesian2, Vec } from "@thi.ng/vectors";
import { KeyModifier, MouseButton } from "../api";
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";
Expand Down Expand Up @@ -96,8 +96,8 @@ export const ringRaw = (
info?: string
) => {
const r = w / 2;
const hash = String([x, y, r]);
gui.registerID(id, hash);
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;
Expand All @@ -118,9 +118,7 @@ export const ringRaw = (
max,
prec
);
if (gui.modifiers & KeyModifier.ALT) {
val.fill(val[i]);
}
gui.isAltDown() && val.fill(val[i]);
}
info && tooltipRaw(gui, info);
}
Expand All @@ -130,7 +128,7 @@ export const ringRaw = (
const r2 = r * rscale;
// adaptive arc resolution
const res = fitClamped(r, 15, 80, 12, 30);
const bgShape = gui.resource(id, hash, () =>
const bgShape = gui.resource(id, key, () =>
polygon(
[
...arcVerts(pos, r, startTheta, endTheta, res),
Expand All @@ -141,7 +139,7 @@ export const ringRaw = (
);
bgShape.attribs.fill = gui.bgColor(hover || focused);
bgShape.attribs.stroke = gui.focusColor(id);
const valShape = gui.resource(id, String(v), () =>
const valShape = gui.resource(id, v, () =>
polygon(
[
...arcVerts(pos, r, startTheta, valTheta, res),
Expand Down
22 changes: 8 additions & 14 deletions packages/imgui/src/components/sliderh.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
import { Fn } from "@thi.ng/api";
import { pointInside, rect } from "@thi.ng/geom";
import { fit, norm } from "@thi.ng/math";
import {
IGridLayout,
KeyModifier,
LayoutBox,
MouseButton
} from "../api";
import { hash } from "@thi.ng/vectors";
import { IGridLayout, LayoutBox, MouseButton } from "../api";
import { handleSlider1Keys, slider1Val } from "../behaviors/slider";
import { IMGUI } from "../gui";
import { isLayout } from "../layout";
Expand Down Expand Up @@ -71,15 +67,15 @@ export const sliderHRaw = (
info?: string
) => {
const theme = gui.theme;
const hash = String([x, y, w, h]);
gui.registerID(id, hash);
const box = gui.resource(id, hash, () => rect([x, y], [w, h], {}));
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;
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] = slider1Val(
Expand All @@ -88,16 +84,14 @@ export const sliderHRaw = (
max,
prec
);
if (gui.modifiers & KeyModifier.ALT) {
val.fill(val[i]);
}
gui.isAltDown() && val.fill(val[i]);
}
info && tooltipRaw(gui, info);
}
const focused = gui.requestFocus(id);
const v = val[i];
const normVal = norm(v, min, max);
const valueBox = gui.resource(id, String(v), () =>
const valueBox = gui.resource(id, v, () =>
rect([x, y], [1 + normVal * (w - 1), h], {})
);
valueBox.attribs.fill = gui.fgColor(hover);
Expand Down
25 changes: 9 additions & 16 deletions packages/imgui/src/components/sliderv.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
import { Fn } from "@thi.ng/api";
import { pointInside, rect } from "@thi.ng/geom";
import { fit, norm } from "@thi.ng/math";
import { ZERO2 } from "@thi.ng/vectors";
import {
IGridLayout,
KeyModifier,
LayoutBox,
MouseButton
} from "../api";
import { hash, ZERO2 } from "@thi.ng/vectors";
import { IGridLayout, LayoutBox, MouseButton } from "../api";
import { handleSlider1Keys, slider1Val } from "../behaviors/slider";
import { IMGUI } from "../gui";
import { isLayout } from "../layout";
Expand Down Expand Up @@ -73,16 +68,16 @@ export const sliderVRaw = (
info?: string
) => {
const theme = gui.theme;
const hash = String([x, y, w, h]);
gui.registerID(id, hash);
const box = gui.resource(id, hash, () => rect([x, y], [w, h], {}));
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;
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] = slider1Val(
Expand All @@ -91,16 +86,14 @@ export const sliderVRaw = (
max,
prec
);
if (gui.modifiers & KeyModifier.ALT) {
val.fill(val[i]);
}
gui.isAltDown() && val.fill(val[i]);
}
info && tooltipRaw(gui, info);
}
const focused = gui.requestFocus(id);
const v = val[i];
const normVal = norm(v, min, max);
const valueBox = gui.resource(id, String(v), () => {
const valueBox = gui.resource(id, v, () => {
const nh = normVal * (h - 1);
return rect([x, ymax - nh], [w, nh], {});
});
Expand All @@ -119,7 +112,7 @@ export const sliderVRaw = (
x + w / 2 + theme.baseLine,
ymax - theme.pad
],
fill: gui.textColor(normVal > 0.25)
fill: gui.textColor(false)
},
(label ? label + " " : "") + (fmt ? fmt(v) : v)
)
Expand Down
11 changes: 5 additions & 6 deletions packages/imgui/src/components/textfield.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Predicate } from "@thi.ng/api";
import { pointInside, rect } from "@thi.ng/geom";
import { fitClamped } from "@thi.ng/math";
import { hash } from "@thi.ng/vectors";
import {
IGridLayout,
Key,
Expand Down Expand Up @@ -44,16 +45,14 @@ export const textFieldRaw = (
const maxOffset = Math.max(0, txtLen - maxLen);
const offset = label[2] || 0;
const drawTxt = txt.substr(offset, maxLen);
const hash = String([x, y, w, h]);
gui.registerID(id, hash);
const box = gui.resource(id, hash, () => rect([x, y], [w, h], {}));
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);
if (hover) {
gui.hotID = id;
if (gui.buttons & MouseButton.LEFT) {
if (gui.activeID === "") {
gui.activeID = id;
}
gui.activeID === "" && (gui.activeID = id);
label[1] = Math.min(
Math.round(
fitClamped(
Expand Down
7 changes: 4 additions & 3 deletions packages/imgui/src/components/toggle.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { pointInside, rect } from "@thi.ng/geom";
import { hash } from "@thi.ng/vectors";
import { IGridLayout, LayoutBox, MouseButton } from "../api";
import { handleButtonKeys } from "../behaviors/button";
import { IMGUI } from "../gui";
Expand Down Expand Up @@ -59,9 +60,9 @@ export const toggleRaw = (
info?: string
) => {
const theme = gui.theme;
const hash = String([x, y, w, h]);
gui.registerID(id, hash);
const box = gui.resource(id, hash, () => rect([x, y], [w, h]));
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);
if (hover) {
gui.hotID = id;
Expand Down
8 changes: 4 additions & 4 deletions packages/imgui/src/components/xypad.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Fn } from "@thi.ng/api";
import { line, pointInside, rect } from "@thi.ng/geom";
import { fit2, Vec } from "@thi.ng/vectors";
import { fit2, hash, Vec } from "@thi.ng/vectors";
import { IGridLayout, LayoutBox, MouseButton } from "../api";
import { handleSlider2Keys, slider2Val } from "../behaviors/slider";
import { IMGUI } from "../gui";
Expand Down Expand Up @@ -94,9 +94,9 @@ export const xyPadRaw = (
const maxY = y + h - 1;
const pos = yUp ? [x, maxY] : [x, y];
const maxPos = yUp ? [maxX, y] : [maxX, y + h - 1];
const hash = String([x, y, w, h]);
gui.registerID(id, hash);
const box = gui.resource(id, hash, () => rect([x, y], [w, h]));
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;
Expand Down
Loading

0 comments on commit 7db92b9

Please sign in to comment.