@thi.ng/imgui/components/button.js

Immediate mode GUI with flexible state handling & data only shape output

import { rect } from "@thi.ng/geom/rect";
import { ZERO2 } from "@thi.ng/vectors/api";
import { hash } from "@thi.ng/vectors/hash";
import { handleButtonKeys, hoverButton } from "../behaviors/button.js";
import { labelHash } from "../hash.js";
import { layoutBox } from "../layout.js";
import { textLabelRaw, textTransformH, textTransformV } from "./textlabel.js";
const buttonH = ({
  gui,
  layout,
  id,
  label,
  labelHover,
  info
}) => {
  const { x, y, w, h } = layoutBox(layout);
  const key = hash([x, y, w, h]);
  return buttonRaw(
    gui,
    id,
    gui.resource(id, key, () => rect([x, y], [w, h])),
    key,
    label ? __mkLabel(gui, textTransformH, id, key, x, y, w, h, false, label) : void 0,
    labelHover ? (
      // prettier-ignore
      __mkLabel(gui, textTransformH, id, key, x, y, w, h, true, labelHover)
    ) : void 0,
    info
  );
};
const buttonV = ({
  gui,
  layout,
  rows,
  id,
  label,
  labelHover,
  info
}) => {
  const { x, y, w, h } = layoutBox(layout, [1, rows]);
  const key = hash([x, y, w, h]);
  return buttonRaw(
    gui,
    id,
    gui.resource(id, key, () => rect([x, y], [w, h])),
    key,
    label ? __mkLabel(gui, textTransformV, id, key, x, y, w, h, false, label) : void 0,
    labelHover ? (
      // prettier-ignore
      __mkLabel(gui, textTransformV, id, key, x, y, w, h, true, labelHover)
    ) : void 0,
    info
  );
};
const buttonRaw = (gui, id, shape, hash2, label, labelHover, info) => {
  gui.registerID(id, hash2);
  const hover = hoverButton(gui, id, shape, info);
  const focused = gui.requestFocus(id);
  if (gui.draw) {
    shape.attribs = {
      fill: hover ? gui.fgColor(true) : gui.bgColor(focused),
      stroke: gui.focusColor(id)
    };
    gui.add(shape);
    label && gui.add(hover && labelHover ? labelHover : label);
  }
  if (focused && handleButtonKeys(gui)) {
    return true;
  }
  gui.lastID = id;
  return !gui.buttons && gui.hotID === id && gui.activeID === id;
};
const __mkLabel = (gui, tx, id, key, x, y, w, h, hover, label) => gui.resource(
  id,
  labelHash(key, label, gui.disabled),
  () => textLabelRaw(
    ZERO2,
    {
      transform: tx(gui.theme, x, y, w, h),
      fill: gui.textColor(hover)
    },
    label
  )
);
export {
  buttonH,
  buttonRaw,
  buttonV
};