@thi.ng/imgui 2.2.13 → 2.2.14

package/components/textlabel.js

@@ -1,18 +1,32 @@
 import { isPlainObject } from "@thi.ng/checks/is-plain-object";
 import { valHash } from "../hash.js";
 import { layoutBox } from "../layout.js";
-export const textLabel = (gui, layout, label, pad = false) => {
-    const theme = gui.theme;
-    const { x, y, h } = layoutBox(layout);
-    gui.draw &&
-        gui.add([
-            "text",
-            { fill: gui.textColor(false) },
-            [x + (pad ? theme.pad : 0), y + h / 2 + theme.baseLine],
-            label,
-        ]);
+const textLabel = (gui, layout, label, pad = false) => {
+  const theme = gui.theme;
+  const { x, y, h } = layoutBox(layout);
+  gui.draw && gui.add([
+    "text",
+    { fill: gui.textColor(false) },
+    [x + (pad ? theme.pad : 0), y + h / 2 + theme.baseLine],
+    label
+  ]);
+};
+const textLabelRaw = (p, attribs, label) => ["text", isPlainObject(attribs) ? attribs : { fill: attribs }, p, label];
+const textTransformH = (theme, x, y, _, h) => [1, 0, 0, 1, x + theme.pad, y + h / 2 + theme.baseLine];
+const textTransformV = (theme, x, y, w, h) => [0, -1, 1, 0, x + w / 2 + theme.baseLine, y + h - theme.pad];
+const dialValueLabel = (gui, id, key, v, x, y, label, fmt) => gui.resource(
+  id,
+  valHash(key, v, gui.disabled),
+  () => textLabelRaw(
+    [x, y],
+    gui.textColor(false),
+    (label ? label + " " : "") + (fmt ? fmt(v) : v)
+  )
+);
+export {
+  dialValueLabel,
+  textLabel,
+  textLabelRaw,
+  textTransformH,
+  textTransformV
 };
-export const textLabelRaw = (p, attribs, label) => ["text", isPlainObject(attribs) ? attribs : { fill: attribs }, p, label];
-export const textTransformH = (theme, x, y, _, h) => [1, 0, 0, 1, x + theme.pad, y + h / 2 + theme.baseLine];
-export const textTransformV = (theme, x, y, w, h) => [0, -1, 1, 0, x + w / 2 + theme.baseLine, y + h - theme.pad];
-export const dialValueLabel = (gui, id, key, v, x, y, label, fmt) => gui.resource(id, valHash(key, v, gui.disabled), () => textLabelRaw([x, y], gui.textColor(false), (label ? label + " " : "") + (fmt ? fmt(v) : v)));

package/components/toggle.js

@@ -3,43 +3,50 @@ import { hash } from "@thi.ng/vectors/hash";
 import { handleButtonKeys, hoverButton } from "../behaviors/button.js";
 import { layoutBox } from "../layout.js";
 import { textLabelRaw } from "./textlabel.js";
-/**
- * If `square` is true, the clickable area will not fill the entire
- * cell, but only a left-aligned square of cell/row height.
- *
- * @param gui -
- * @param layout -
- * @param id -
- * @param val -
- * @param i -
- * @param square -
- * @param label -
- * @param info -
- */
-export const toggle = (gui, layout, id, val, square, label, info) => {
-    const { x, y, w, h } = layoutBox(layout);
-    return toggleRaw(gui, id, x, y, square ? h : w, h, square ? h : 0, val, label, info);
+const toggle = (gui, layout, id, val, square, label, info) => {
+  const { x, y, w, h } = layoutBox(layout);
+  return toggleRaw(
+    gui,
+    id,
+    x,
+    y,
+    square ? h : w,
+    h,
+    square ? h : 0,
+    val,
+    label,
+    info
+  );
 };
-export const toggleRaw = (gui, id, x, y, w, h, lx, val, label, info) => {
-    const theme = gui.theme;
-    const key = hash([x, y, w, h]);
-    gui.registerID(id, key);
-    let res;
-    const box = gui.resource(id, key, () => rect([x, y], [w, h]));
-    const hover = hoverButton(gui, id, box, info);
-    const focused = gui.requestFocus(id);
-    let changed = !gui.buttons && gui.hotID === id && gui.activeID === id;
-    focused && (changed = handleButtonKeys(gui) || changed);
-    changed && (res = val = !val);
-    if (gui.draw) {
-        box.attribs = {
-            fill: val ? gui.fgColor(hover) : gui.bgColor(hover),
-            stroke: gui.focusColor(id),
-        };
-        gui.add(box);
-        label &&
-            gui.add(textLabelRaw([x + theme.pad + lx, y + h / 2 + theme.baseLine], gui.textColor(hover && lx > 0 && lx < w - theme.pad), label));
-    }
-    gui.lastID = id;
-    return res;
+const toggleRaw = (gui, id, x, y, w, h, lx, val, label, info) => {
+  const theme = gui.theme;
+  const key = hash([x, y, w, h]);
+  gui.registerID(id, key);
+  let res;
+  const box = gui.resource(id, key, () => rect([x, y], [w, h]));
+  const hover = hoverButton(gui, id, box, info);
+  const focused = gui.requestFocus(id);
+  let changed = !gui.buttons && gui.hotID === id && gui.activeID === id;
+  focused && (changed = handleButtonKeys(gui) || changed);
+  changed && (res = val = !val);
+  if (gui.draw) {
+    box.attribs = {
+      fill: val ? gui.fgColor(hover) : gui.bgColor(hover),
+      stroke: gui.focusColor(id)
+    };
+    gui.add(box);
+    label && gui.add(
+      textLabelRaw(
+        [x + theme.pad + lx, y + h / 2 + theme.baseLine],
+        gui.textColor(hover && lx > 0 && lx < w - theme.pad),
+        label
+      )
+    );
+  }
+  gui.lastID = id;
+  return res;
+};
+export {
+  toggle,
+  toggleRaw
 };

package/components/tooltip.js

@@ -1,10 +1,20 @@
 import { rect } from "@thi.ng/geom/rect";
 import { add2 } from "@thi.ng/vectors/add";
 import { textLabelRaw } from "./textlabel.js";
-export const tooltipRaw = (gui, tooltip) => {
-    const theme = gui.theme;
-    const p = add2(null, [0, 10], gui.mouse);
-    gui.addOverlay(rect(p, [tooltip.length * theme.charWidth + theme.pad, 20], {
-        fill: theme.bgTooltip,
-    }), textLabelRaw(add2(null, [4, 10 + theme.baseLine], p), theme.textTooltip, tooltip));
+const tooltipRaw = (gui, tooltip) => {
+  const theme = gui.theme;
+  const p = add2(null, [0, 10], gui.mouse);
+  gui.addOverlay(
+    rect(p, [tooltip.length * theme.charWidth + theme.pad, 20], {
+      fill: theme.bgTooltip
+    }),
+    textLabelRaw(
+      add2(null, [4, 10 + theme.baseLine], p),
+      theme.textTooltip,
+      tooltip
+    )
+  );
+};
+export {
+  tooltipRaw
 };

package/components/xypad.js

@@ -2,81 +2,97 @@ import { line } from "@thi.ng/geom/line";
 import { rect } from "@thi.ng/geom/rect";
 import { fit2 } from "@thi.ng/vectors/fit";
 import { hash } from "@thi.ng/vectors/hash";
-import { handleSlider2Keys, isHoverSlider, slider2Val, } from "../behaviors/slider.js";
+import {
+  handleSlider2Keys,
+  isHoverSlider,
+  slider2Val
+} from "../behaviors/slider.js";
 import { textLabelRaw } from "./textlabel.js";
 import { tooltipRaw } from "./tooltip.js";
-/**
- * `mode` interpretation:
- *
- * - -2 = square
- * - -1 = proportional height (snapped to rows)
- * - >0 = fixed row height
- *
- * @param gui -
- * @param layout -
- * @param id -
- * @param min -
- * @param max -
- * @param prec -
- * @param val -
- * @param mode -
- * @param yUp -
- * @param label -
- * @param fmt -
- * @param info -
- */
-export const xyPad = (gui, layout, id, min, max, prec, val, mode, yUp, label, fmt, info) => {
-    let box;
-    const ch = layout.cellH;
-    const gap = layout.gap;
-    if (mode === -2) {
-        box = layout.nextSquare();
-    }
-    else {
-        let rows = (mode > 0 ? mode : layout.cellW / (ch + gap)) | 0;
-        box = layout.next([1, rows + 1]);
-        box.h -= ch + gap;
-    }
-    return xyPadRaw(gui, id, box.x, box.y, box.w, box.h, min, max, prec, val, yUp, 0, box.h + gap + ch / 2 + gui.theme.baseLine, label, fmt, info);
+const xyPad = (gui, layout, id, min, max, prec, val, mode, yUp, label, fmt, info) => {
+  let box;
+  const ch = layout.cellH;
+  const gap = layout.gap;
+  if (mode === -2) {
+    box = layout.nextSquare();
+  } else {
+    let rows = (mode > 0 ? mode : layout.cellW / (ch + gap)) | 0;
+    box = layout.next([1, rows + 1]);
+    box.h -= ch + gap;
+  }
+  return xyPadRaw(
+    gui,
+    id,
+    box.x,
+    box.y,
+    box.w,
+    box.h,
+    min,
+    max,
+    prec,
+    val,
+    yUp,
+    0,
+    box.h + gap + ch / 2 + gui.theme.baseLine,
+    label,
+    fmt,
+    info
+  );
 };
-export const xyPadRaw = (gui, id, x, y, w, h, min, max, prec, val, yUp = false, lx, ly, label, fmt, info) => {
-    const maxX = x + w;
-    const maxY = y + h;
-    const pos = yUp ? [x, maxY] : [x, y];
-    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 = isHoverSlider(gui, id, box, "move");
-    const draw = gui.draw;
-    let v = val;
-    let res;
-    if (hover) {
-        if (gui.isMouseDown()) {
-            gui.activeID = id;
-            res = slider2Val(fit2([], gui.mouse, pos, maxPos, min, max), min, max, prec);
-        }
-        info && draw && tooltipRaw(gui, info);
-    }
-    const focused = gui.requestFocus(id);
-    if (draw) {
-        box.attribs = {
-            fill: gui.bgColor(hover || focused),
-            stroke: gui.focusColor(id),
-        };
-        const { 0: cx, 1: cy } = fit2([], v, min, max, pos, maxPos);
-        gui.add(box, line([x, cy], [maxX, cy], {
-            stroke: col,
-        }), line([cx, y], [cx, maxY], {
-            stroke: col,
-        }), textLabelRaw([x + lx, y + ly], col, (label ? label + " " : "") +
-            (fmt ? fmt(val) : `${val[0] | 0}, ${val[1] | 0}`)));
+const xyPadRaw = (gui, id, x, y, w, h, min, max, prec, val, yUp = false, lx, ly, label, fmt, info) => {
+  const maxX = x + w;
+  const maxY = y + h;
+  const pos = yUp ? [x, maxY] : [x, y];
+  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 = isHoverSlider(gui, id, box, "move");
+  const draw = gui.draw;
+  let v = val;
+  let res;
+  if (hover) {
+    if (gui.isMouseDown()) {
+      gui.activeID = id;
+      res = slider2Val(
+        fit2([], gui.mouse, pos, maxPos, min, max),
+        min,
+        max,
+        prec
+      );
     }
-    if (focused &&
-        (v = handleSlider2Keys(gui, min, max, prec, v, yUp)) !== undefined) {
-        return v;
-    }
-    gui.lastID = id;
-    return res;
+    info && draw && tooltipRaw(gui, info);
+  }
+  const focused = gui.requestFocus(id);
+  if (draw) {
+    box.attribs = {
+      fill: gui.bgColor(hover || focused),
+      stroke: gui.focusColor(id)
+    };
+    const { 0: cx, 1: cy } = fit2([], v, min, max, pos, maxPos);
+    gui.add(
+      box,
+      line([x, cy], [maxX, cy], {
+        stroke: col
+      }),
+      line([cx, y], [cx, maxY], {
+        stroke: col
+      }),
+      textLabelRaw(
+        [x + lx, y + ly],
+        col,
+        (label ? label + " " : "") + (fmt ? fmt(val) : `${val[0] | 0}, ${val[1] | 0}`)
+      )
+    );
+  }
+  if (focused && (v = handleSlider2Keys(gui, min, max, prec, v, yUp)) !== void 0) {
+    return v;
+  }
+  gui.lastID = id;
+  return res;
+};
+export {
+  xyPad,
+  xyPadRaw
 };

package/events.js

@@ -1,49 +1,38 @@
 import { MouseButton } from "./api.js";
-/**
- * Injects default mouse & touch event handlers into `gui.attribs` and
- * attaches keydown/up listeners to `window`.
- *
- * This method should only be used if the IMGUI is to be updated via a
- * RAF loop or other non-reactive situation. For on-demand updates /
- * rendering event handling and IMGUI mouse/key state preparation is
- * left to the user.
- *
- * - {@link IMGUI.setMouse}
- * - {@link IMGUI.setKey}
- */
-export const useDefaultEventHandlers = (gui) => {
-    const pos = (e) => {
-        const b = e.target.getBoundingClientRect();
-        const t = e.changedTouches
-            ? e.changedTouches[0]
-            : e;
-        return [t.clientX - b.left, t.clientY - b.top];
-    };
-    const touchActive = (e) => {
-        gui.setMouse(pos(e), MouseButton.LEFT);
-    };
-    const touchEnd = (e) => {
-        gui.setMouse(pos(e), 0);
-    };
-    const mouseActive = (e) => {
-        gui.setMouse(pos(e), e.buttons);
-    };
-    Object.assign(gui.attribs, {
-        onmousemove: mouseActive,
-        onmousedown: mouseActive,
-        onmouseup: mouseActive,
-        ontouchstart: touchActive,
-        ontouchmove: touchActive,
-        ontouchend: touchEnd,
-        ontouchcancel: touchEnd,
-    });
-    window.addEventListener("keydown", (e) => {
-        gui.setKey(e);
-        if (e.key === "Tab") {
-            e.preventDefault();
-        }
-    });
-    window.addEventListener("keyup", (e) => {
-        gui.setKey(e);
-    });
+const useDefaultEventHandlers = (gui) => {
+  const pos = (e) => {
+    const b = e.target.getBoundingClientRect();
+    const t = e.changedTouches ? e.changedTouches[0] : e;
+    return [t.clientX - b.left, t.clientY - b.top];
+  };
+  const touchActive = (e) => {
+    gui.setMouse(pos(e), MouseButton.LEFT);
+  };
+  const touchEnd = (e) => {
+    gui.setMouse(pos(e), 0);
+  };
+  const mouseActive = (e) => {
+    gui.setMouse(pos(e), e.buttons);
+  };
+  Object.assign(gui.attribs, {
+    onmousemove: mouseActive,
+    onmousedown: mouseActive,
+    onmouseup: mouseActive,
+    ontouchstart: touchActive,
+    ontouchmove: touchActive,
+    ontouchend: touchEnd,
+    ontouchcancel: touchEnd
+  });
+  window.addEventListener("keydown", (e) => {
+    gui.setKey(e);
+    if (e.key === "Tab") {
+      e.preventDefault();
+    }
+  });
+  window.addEventListener("keyup", (e) => {
+    gui.setKey(e);
+  });
+};
+export {
+  useDefaultEventHandlers
 };