@thi.ng/imgui/events.js

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

import { MouseButton } from "./api.js";
const useDefaultEventHandlers = (gui) => {
  const pos = (e) => {
    const b = e.target.getBoundingClientRect();
    const t = e.changedTouches ? e.changedTouches[0] : e;
    return [t.clientX - b.left, t.clientY - b.top];
  };
  const touchActive = (e) => {
    gui.setMouse(pos(e), MouseButton.LEFT);
  };
  const touchEnd = (e) => {
    gui.setMouse(pos(e), 0);
  };
  const mouseActive = (e) => {
    gui.setMouse(pos(e), e.buttons);
  };
  Object.assign(gui.attribs, {
    onmousemove: mouseActive,
    onmousedown: mouseActive,
    onmouseup: mouseActive,
    ontouchstart: touchActive,
    ontouchmove: touchActive,
    ontouchend: touchEnd,
    ontouchcancel: touchEnd
  });
  window.addEventListener("keydown", (e) => {
    gui.setKey(e);
    if (e.key === "Tab") {
      e.preventDefault();
    }
  });
  window.addEventListener("keyup", (e) => {
    gui.setKey(e);
  });
};
export {
  useDefaultEventHandlers
};