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

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

import { rect } from "@thi.ng/geom/rect";
import { hash } from "@thi.ng/vectors/hash";
import { handleButtonKeys, hoverButton } from "../behaviors/button.js";
import { layoutBox } from "../layout.js";
import { textLabelRaw } from "./textlabel.js";
const toggle = ({
  gui,
  layout,
  id,
  value,
  square,
  label,
  info
}) => {
  const { x, y, w, h } = layoutBox(layout);
  return toggleRaw(
    gui,
    id,
    x,
    y,
    square ? h : w,
    h,
    square ? h : 0,
    value,
    label,
    info
  );
};
const toggleRaw = (gui, id, x, y, w, h, labelX, 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 + labelX, y + h / 2 + theme.baseLine],
        gui.textColor(
          hover && labelX > 0 && labelX < w - theme.pad
        ),
        label
      )
    );
  }
  gui.lastID = id;
  return res;
};
export {
  toggle,
  toggleRaw
};