@thi.ng/imgui/behaviors/slider.js

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

import { pointInside } from "@thi.ng/geom/point-inside";
import { clamp } from "@thi.ng/math/interval";
import { roundTo } from "@thi.ng/math/prec";
import { add2 } from "@thi.ng/vectors/add";
import { clamp2 } from "@thi.ng/vectors/clamp";
import { roundN2 } from "@thi.ng/vectors/roundn";
import { Key } from "../api.js";
const isHoverSlider = (gui, id, shape, cursor = "ew-resize") => {
  if (gui.disabled) return false;
  const aid = gui.activeID;
  const hover = aid === id || aid === "" && pointInside(shape, gui.mouse);
  if (hover) {
    gui.setCursor(cursor);
    gui.hotID = id;
  }
  return hover;
};
const slider1Val = (x, min, max, prec) => clamp(roundTo(x, prec), min, max);
const slider2Val = (v, min, max, prec) => clamp2(null, roundN2([], v, prec), min, max);
const handleSlider1Keys = (gui, min, max, prec, value) => {
  switch (gui.key) {
    case Key.TAB:
      gui.switchFocus();
      break;
    case Key.UP:
    case Key.DOWN: {
      const step = (gui.key === Key.UP ? prec : -prec) * (gui.isShiftDown() ? 5 : 1);
      return slider1Val(value + step, min, max, prec);
    }
    default:
  }
};
const handleSlider2Keys = (gui, min, max, prec, value, yUp) => {
  switch (gui.key) {
    case Key.TAB:
      gui.switchFocus();
      break;
    case Key.LEFT:
    case Key.RIGHT: {
      const step = (gui.key === Key.RIGHT ? prec : -prec) * (gui.isShiftDown() ? 5 : 1);
      return slider2Val(add2([], value, [step, 0]), min, max, prec);
    }
    case Key.UP:
    case Key.DOWN: {
      const step = (gui.key === Key.UP ? prec : -prec) * (yUp ? 1 : -1) * (gui.isShiftDown() ? 5 : 1);
      return slider2Val(add2([], value, [0, step]), min, max, prec);
    }
    default:
  }
};
export {
  handleSlider1Keys,
  handleSlider2Keys,
  isHoverSlider,
  slider1Val,
  slider2Val
};