@thi.ng/imgui 2.2.12 → 2.2.14

package/components/dial.js

@@ -9,60 +9,110 @@ import { dialVal } from "../behaviors/dial.js";
 import { handleSlider1Keys, isHoverSlider } from "../behaviors/slider.js";
 import { dialValueLabel } from "./textlabel.js";
 import { tooltipRaw } from "./tooltip.js";
-export const dial = (gui, layout, id, min, max, prec, val, label, fmt, info) => {
-    const { x, y, w, h, ch } = isLayout(layout) ? layout.nextSquare() : layout;
-    return dialRaw(gui, id, x, y, w, h, min, max, prec, val, gui.theme.pad, h + ch / 2 + gui.theme.baseLine, label, fmt, info);
+const dial = (gui, layout, id, min, max, prec, val, label, fmt, info) => {
+  const { x, y, w, h, ch } = isLayout(layout) ? layout.nextSquare() : layout;
+  return dialRaw(
+    gui,
+    id,
+    x,
+    y,
+    w,
+    h,
+    min,
+    max,
+    prec,
+    val,
+    gui.theme.pad,
+    h + ch / 2 + gui.theme.baseLine,
+    label,
+    fmt,
+    info
+  );
 };
-export const dialGroup = (gui, layout, id, min, max, prec, horizontal, vals, label, fmt, info = []) => {
-    const n = vals.length;
-    const nested = horizontal
-        ? layout.nest(n, [n, 1])
-        : layout.nest(1, [1, (layout.rowsForHeight(layout.cellW) + 1) * n]);
-    let res;
-    let idx = -1;
-    for (let i = 0; i < n; i++) {
-        const v = dial(gui, nested, `${id}-${i}`, min, max, prec, vals[i], label[i], fmt, info[i]);
-        if (v !== undefined) {
-            res = v;
-            idx = i;
-        }
+const dialGroup = (gui, layout, id, min, max, prec, horizontal, vals, label, fmt, info = []) => {
+  const n = vals.length;
+  const nested = horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [1, (layout.rowsForHeight(layout.cellW) + 1) * n]);
+  let res;
+  let idx = -1;
+  for (let i = 0; i < n; i++) {
+    const v = dial(
+      gui,
+      nested,
+      `${id}-${i}`,
+      min,
+      max,
+      prec,
+      vals[i],
+      label[i],
+      fmt,
+      info[i]
+    );
+    if (v !== void 0) {
+      res = v;
+      idx = i;
     }
-    return res !== undefined ? [idx, res] : undefined;
+  }
+  return res !== void 0 ? [idx, res] : void 0;
 };
-export const dialRaw = (gui, id, x, y, w, h, min, max, prec, val, lx, ly, label, fmt, info) => {
-    const r = Math.min(w, h) / 2;
-    const pos = [x + w / 2, y + h / 2];
-    const thetaGap = PI / 2;
-    const startTheta = HALF_PI + thetaGap / 2;
-    const key = hash([x, y, r]);
-    gui.registerID(id, key);
-    const bgShape = gui.resource(id, key, () => circle(pos, r, {}));
-    const hover = isHoverSlider(gui, id, bgShape, "pointer");
-    const draw = gui.draw;
-    let v = val;
-    let res;
-    if (hover) {
-        gui.hotID = id;
-        if (gui.isMouseDown()) {
-            gui.activeID = id;
-            res = dialVal(gui.mouse, pos, startTheta, thetaGap, min, max, prec);
-        }
-        info && draw && tooltipRaw(gui, info);
+const dialRaw = (gui, id, x, y, w, h, min, max, prec, val, lx, ly, label, fmt, info) => {
+  const r = Math.min(w, h) / 2;
+  const pos = [x + w / 2, y + h / 2];
+  const thetaGap = PI / 2;
+  const startTheta = HALF_PI + thetaGap / 2;
+  const key = hash([x, y, r]);
+  gui.registerID(id, key);
+  const bgShape = gui.resource(id, key, () => circle(pos, r, {}));
+  const hover = isHoverSlider(gui, id, bgShape, "pointer");
+  const draw = gui.draw;
+  let v = val;
+  let res;
+  if (hover) {
+    gui.hotID = id;
+    if (gui.isMouseDown()) {
+      gui.activeID = id;
+      res = dialVal(gui.mouse, pos, startTheta, thetaGap, min, max, prec);
     }
-    const focused = gui.requestFocus(id);
-    if (draw) {
-        const valShape = gui.resource(id, v, () => line(cartesian2(null, [r, startTheta + (TAU - thetaGap) * norm(v, min, max)], pos), pos, {}));
-        const valLabel = dialValueLabel(gui, id, key, v, x + lx, y + ly, label, fmt);
-        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 &&
-        (v = handleSlider1Keys(gui, min, max, prec, v)) !== undefined) {
-        return v;
-    }
-    gui.lastID = id;
-    return res;
+    info && draw && tooltipRaw(gui, info);
+  }
+  const focused = gui.requestFocus(id);
+  if (draw) {
+    const valShape = gui.resource(
+      id,
+      v,
+      () => line(
+        cartesian2(
+          null,
+          [r, startTheta + (TAU - thetaGap) * norm(v, min, max)],
+          pos
+        ),
+        pos,
+        {}
+      )
+    );
+    const valLabel = dialValueLabel(
+      gui,
+      id,
+      key,
+      v,
+      x + lx,
+      y + ly,
+      label,
+      fmt
+    );
+    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 && (v = handleSlider1Keys(gui, min, max, prec, v)) !== void 0) {
+    return v;
+  }
+  gui.lastID = id;
+  return res;
+};
+export {
+  dial,
+  dialGroup,
+  dialRaw
 };

package/components/dropdown.js

@@ -5,76 +5,74 @@ import { clamp0 } from "@thi.ng/math/interval";
 import { hash } from "@thi.ng/vectors/hash";
 import { Key } from "../api.js";
 import { buttonH } from "./button.js";
-/**
- *
- * @param gui -
- * @param layout -
- * @param id -
- * @param sel -
- * @param items -
- * @param title -
- * @param info -
- */
-export const dropdown = (gui, layout, id, sel, items, title, info) => {
-    const open = gui.state(id, () => false);
-    const nested = isLayout(layout)
-        ? layout.nest(1, [1, open ? items.length : 1])
-        : gridLayout(layout.x, layout.y, layout.w, 1, layout.ch, layout.gap);
-    let res;
-    const box = nested.next();
-    const { x, y, w, h } = box;
-    const key = hash([x, y, w, h, ~~gui.disabled]);
-    const tx = x + w - gui.theme.pad - 4;
-    const ty = y + h / 2;
-    const draw = gui.draw;
-    if (open) {
-        const bt = buttonH(gui, box, `${id}-title`, title);
-        draw &&
-            gui.add(gui.resource(id, key + 1, () => triangle(gui, tx, ty, true)));
-        if (bt) {
-            gui.setState(id, false);
+const dropdown = (gui, layout, id, sel, items, title, info) => {
+  const open = gui.state(id, () => false);
+  const nested = isLayout(layout) ? layout.nest(1, [1, open ? items.length : 1]) : gridLayout(layout.x, layout.y, layout.w, 1, layout.ch, layout.gap);
+  let res;
+  const box = nested.next();
+  const { x, y, w, h } = box;
+  const key = hash([x, y, w, h, ~~gui.disabled]);
+  const tx = x + w - gui.theme.pad - 4;
+  const ty = y + h / 2;
+  const draw = gui.draw;
+  if (open) {
+    const bt = buttonH(gui, box, `${id}-title`, title);
+    draw && gui.add(
+      gui.resource(id, key + 1, () => triangle(gui, tx, ty, true))
+    );
+    if (bt) {
+      gui.setState(id, false);
+    } else {
+      for (let i = 0, n = items.length; i < n; i++) {
+        if (buttonH(gui, nested, `${id}-${i}`, items[i])) {
+          i !== sel && (res = i);
+          gui.setState(id, false);
         }
-        else {
-            for (let i = 0, n = items.length; i < n; i++) {
-                if (buttonH(gui, nested, `${id}-${i}`, items[i])) {
-                    i !== sel && (res = i);
-                    gui.setState(id, false);
-                }
-            }
-            if (gui.focusID.startsWith(`${id}-`)) {
-                switch (gui.key) {
-                    case Key.ESC:
-                        gui.setState(id, false);
-                        break;
-                    case Key.UP:
-                        return update(gui, id, clamp0(sel - 1));
-                    case Key.DOWN:
-                        return update(gui, id, Math.min(items.length - 1, sel + 1));
-                    default:
-                }
-            }
+      }
+      if (gui.focusID.startsWith(`${id}-`)) {
+        switch (gui.key) {
+          case Key.ESC:
+            gui.setState(id, false);
+            break;
+          case Key.UP:
+            return update(gui, id, clamp0(sel - 1));
+          case Key.DOWN:
+            return update(
+              gui,
+              id,
+              Math.min(items.length - 1, sel + 1)
+            );
+          default:
         }
+      }
     }
-    else {
-        if (buttonH(gui, box, `${id}-${sel}`, items[sel], title, info)) {
-            gui.setState(id, true);
-        }
-        draw &&
-            gui.add(gui.resource(id, key + 2, () => triangle(gui, tx, ty, false)));
+  } else {
+    if (buttonH(gui, box, `${id}-${sel}`, items[sel], title, info)) {
+      gui.setState(id, true);
     }
-    return res;
+    draw && gui.add(
+      gui.resource(id, key + 2, () => triangle(gui, tx, ty, false))
+    );
+  }
+  return res;
 };
 const update = (gui, id, next) => {
-    gui.focusID = `${id}-${next}`;
-    return next;
+  gui.focusID = `${id}-${next}`;
+  return next;
 };
 const triangle = (gui, x, y, open) => {
-    const s = open ? 2 : -2;
-    return polygon([
-        [x - 4, y + s],
-        [x + 4, y + s],
-        [x, y - s],
-    ], {
-        fill: gui.textColor(false),
-    });
+  const s = open ? 2 : -2;
+  return polygon(
+    [
+      [x - 4, y + s],
+      [x + 4, y + s],
+      [x, y - s]
+    ],
+    {
+      fill: gui.textColor(false)
+    }
+  );
+};
+export {
+  dropdown
 };

package/components/icon-button.js

@@ -4,35 +4,44 @@ import { hash } from "@thi.ng/vectors/hash";
 import { mixHash } from "../hash.js";
 import { buttonRaw } from "./button.js";
 import { textLabelRaw } from "./textlabel.js";
-export const iconButton = (gui, layout, id, icon, iconW, iconH, label, info) => {
-    const theme = gui.theme;
-    const pad = theme.pad;
-    const bodyW = label
-        ? iconW + 3 * pad + gui.textWidth(label)
-        : iconW + 2 * pad;
-    const bodyH = iconH + pad;
-    const { x, y, w, h } = isLayout(layout)
-        ? layout.next(layout.spanForSize(bodyW, bodyH))
-        : layout;
-    const key = hash([x, y, w, h, ~~gui.disabled]);
-    const mkIcon = (hover) => {
-        const col = gui.textColor(hover);
-        const pos = [x + pad, y + (h - iconH) / 2];
-        return [
-            "g",
-            {
-                translate: pos,
-                fill: col,
-                stroke: col,
-            },
-            icon,
-            label
-                ? textLabelRaw([
-                    iconW + pad,
-                    -(h - iconH) / 2 + h / 2 + theme.baseLine,
-                ], { fill: col, stroke: "none" }, label)
-                : undefined,
-        ];
-    };
-    return buttonRaw(gui, id, gui.resource(id, key, () => rect([x, y], [w, h])), key, gui.resource(id, mixHash(key, `l${label}`), () => mkIcon(false)), gui.resource(id, mixHash(key, `lh${label}`), () => mkIcon(true)), info);
+const iconButton = (gui, layout, id, icon, iconW, iconH, label, info) => {
+  const theme = gui.theme;
+  const pad = theme.pad;
+  const bodyW = label ? iconW + 3 * pad + gui.textWidth(label) : iconW + 2 * pad;
+  const bodyH = iconH + pad;
+  const { x, y, w, h } = isLayout(layout) ? layout.next(layout.spanForSize(bodyW, bodyH)) : layout;
+  const key = hash([x, y, w, h, ~~gui.disabled]);
+  const mkIcon = (hover) => {
+    const col = gui.textColor(hover);
+    const pos = [x + pad, y + (h - iconH) / 2];
+    return [
+      "g",
+      {
+        translate: pos,
+        fill: col,
+        stroke: col
+      },
+      icon,
+      label ? textLabelRaw(
+        [
+          iconW + pad,
+          -(h - iconH) / 2 + h / 2 + theme.baseLine
+        ],
+        { fill: col, stroke: "none" },
+        label
+      ) : void 0
+    ];
+  };
+  return buttonRaw(
+    gui,
+    id,
+    gui.resource(id, key, () => rect([x, y], [w, h])),
+    key,
+    gui.resource(id, mixHash(key, `l${label}`), () => mkIcon(false)),
+    gui.resource(id, mixHash(key, `lh${label}`), () => mkIcon(true)),
+    info
+  );
+};
+export {
+  iconButton
 };

package/components/radial-menu.js

@@ -10,42 +10,48 @@ import { hash } from "@thi.ng/vectors/hash";
 import { Key } from "../api.js";
 import { buttonRaw } from "./button.js";
 import { textLabelRaw } from "./textlabel.js";
-export const radialMenu = (gui, id, x, y, r, items, info) => {
-    const n = items.length;
-    const key = hash([x, y, r, n, ~~gui.disabled]);
-    gui.registerID(id, key);
-    const cells = gui.resource(id, key, () => [
-        ...mapIndexed((i, pts) => {
-            const cell = polygon(pts);
-            const p = add2(null, [-gui.textWidth(items[i]) >> 1, gui.theme.baseLine], centroid(cell));
-            return [
-                cell,
-                hash(p),
-                textLabelRaw(p, gui.textColor(false), items[i]),
-                textLabelRaw(p, gui.textColor(true), items[i]),
-            ];
-        }, triFan(vertices(circle([x, y], r), n))),
-    ]);
-    let res;
-    let sel = -1;
-    for (let i = 0; i < n; i++) {
-        const cell = cells[i];
-        const _id = id + i;
-        buttonRaw(gui, _id, cell[0], cell[1], cell[2], cell[3], info[i]) &&
-            (res = i);
-        gui.focusID === _id && (sel = i);
+const radialMenu = (gui, id, x, y, r, items, info) => {
+  const n = items.length;
+  const key = hash([x, y, r, n, ~~gui.disabled]);
+  gui.registerID(id, key);
+  const cells = gui.resource(id, key, () => [
+    ...mapIndexed((i, pts) => {
+      const cell = polygon(pts);
+      const p = add2(
+        null,
+        [-gui.textWidth(items[i]) >> 1, gui.theme.baseLine],
+        centroid(cell)
+      );
+      return [
+        cell,
+        hash(p),
+        textLabelRaw(p, gui.textColor(false), items[i]),
+        textLabelRaw(p, gui.textColor(true), items[i])
+      ];
+    }, triFan(vertices(circle([x, y], r), n)))
+  ]);
+  let res;
+  let sel = -1;
+  for (let i = 0; i < n; i++) {
+    const cell = cells[i];
+    const _id = id + i;
+    buttonRaw(gui, _id, cell[0], cell[1], cell[2], cell[3], info[i]) && (res = i);
+    gui.focusID === _id && (sel = i);
+  }
+  if (sel !== -1) {
+    switch (gui.key) {
+      case Key.UP:
+      case Key.RIGHT:
+        gui.focusID = id + mod(sel + 1, n);
+        break;
+      case Key.DOWN:
+      case Key.LEFT:
+        gui.focusID = id + mod(sel - 1, n);
+      default:
     }
-    if (sel !== -1) {
-        switch (gui.key) {
-            case Key.UP:
-            case Key.RIGHT:
-                gui.focusID = id + mod(sel + 1, n);
-                break;
-            case Key.DOWN:
-            case Key.LEFT:
-                gui.focusID = id + mod(sel - 1, n);
-            default:
-        }
-    }
-    return res;
+  }
+  return res;
+};
+export {
+  radialMenu
 };

package/components/radio.js

@@ -1,18 +1,23 @@
 import { isLayout } from "@thi.ng/layout/checks";
 import { gridLayout } from "@thi.ng/layout/grid-layout";
 import { toggle } from "./toggle.js";
-export const radio = (gui, layout, id, horizontal, sel, square, labels, info = []) => {
-    const n = labels.length;
-    const nested = isLayout(layout)
-        ? horizontal
-            ? layout.nest(n, [n, 1])
-            : layout.nest(1, [1, n])
-        : horizontal
-            ? gridLayout(layout.x, layout.y, layout.w, n, layout.ch, layout.gap)
-            : gridLayout(layout.x, layout.y, layout.w, 1, layout.ch, layout.gap);
-    let res;
-    for (let i = 0; i < n; i++) {
-        toggle(gui, nested, `${id}-${i}`, sel === i, square, labels[i], info[i]) !== undefined && (res = i);
-    }
-    return res;
+const radio = (gui, layout, id, horizontal, sel, square, labels, info = []) => {
+  const n = labels.length;
+  const nested = isLayout(layout) ? horizontal ? layout.nest(n, [n, 1]) : layout.nest(1, [1, n]) : horizontal ? gridLayout(layout.x, layout.y, layout.w, n, layout.ch, layout.gap) : gridLayout(layout.x, layout.y, layout.w, 1, layout.ch, layout.gap);
+  let res;
+  for (let i = 0; i < n; i++) {
+    toggle(
+      gui,
+      nested,
+      `${id}-${i}`,
+      sel === i,
+      square,
+      labels[i],
+      info[i]
+    ) !== void 0 && (res = i);
+  }
+  return res;
+};
+export {
+  radio
 };