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

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

import { isPlainObject } from "@thi.ng/checks/is-plain-object";
import { text } from "@thi.ng/geom/text";
import { valHash } from "../hash.js";
import { layoutBox } from "../layout.js";
const textLabel = (gui, layout, label, pad = false) => {
  const theme = gui.theme;
  const { x, y, h } = layoutBox(layout);
  gui.draw && gui.add(
    text(
      [x + (pad ? theme.pad : 0), y + h / 2 + theme.baseLine],
      label,
      { fill: gui.textColor(false) }
    )
  );
};
const textLabelRaw = (p, attribs, label) => text(p, label, isPlainObject(attribs) ? attribs : { fill: attribs });
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
};