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

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

import { rect } from "@thi.ng/geom/rect";
import { isLayout } from "@thi.ng/layout/checks";
import { hash } from "@thi.ng/vectors/hash";
import { mixHash } from "../hash.js";
import { buttonRaw } from "./button.js";
import { textLabelRaw } from "./textlabel.js";
const iconButton = ({
  gui,
  layout,
  id,
  icon,
  iconSize: [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
};