@tldraw/editor/dist-cjs/lib/components/MenuClickCapture.js

tldraw infinite canvas SDK (editor).

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var MenuClickCapture_exports = {};
__export(MenuClickCapture_exports, {
  MenuClickCapture: () => MenuClickCapture
});
module.exports = __toCommonJS(MenuClickCapture_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_state_react = require("@tldraw/state-react");
var import_react = require("react");
var import_useCanvasEvents = require("../hooks/useCanvasEvents");
var import_useEditor = require("../hooks/useEditor");
var import_Vec = require("../primitives/Vec");
function MenuClickCapture() {
  const editor = (0, import_useEditor.useEditor)();
  const isMenuOpen = (0, import_state_react.useValue)("is menu open", () => editor.menus.hasAnyOpenMenus(), [editor]);
  const [isPointing, setIsPointing] = (0, import_react.useState)(false);
  const showElement = isMenuOpen || isPointing;
  const canvasEvents = (0, import_useCanvasEvents.useCanvasEvents)();
  const rPointerState = (0, import_react.useRef)({
    isDown: false,
    isDragging: false,
    start: new import_Vec.Vec()
  });
  const handlePointerDown = (0, import_react.useCallback)(
    (e) => {
      if (e.button === 0) {
        setIsPointing(true);
        rPointerState.current = {
          isDown: true,
          isDragging: false,
          start: new import_Vec.Vec(e.clientX, e.clientY)
        };
      }
      editor.menus.clearOpenMenus();
    },
    [editor]
  );
  const handlePointerMove = (0, import_react.useCallback)(
    (e) => {
      if (!rPointerState.current.isDown) return;
      if (rPointerState.current.isDragging) {
        canvasEvents.onPointerMove?.(e);
        return;
      }
      if (
        // We're pointing, but are we dragging?
        import_Vec.Vec.Dist2(rPointerState.current.start, new import_Vec.Vec(e.clientX, e.clientY)) > editor.options.dragDistanceSquared
      ) {
        rPointerState.current = {
          ...rPointerState.current,
          isDown: true,
          isDragging: true
        };
        const { x, y } = rPointerState.current.start;
        canvasEvents.onPointerDown?.({
          ...e,
          clientX: x,
          clientY: y,
          button: 0
        });
        canvasEvents.onPointerMove?.(e);
      }
    },
    [canvasEvents, editor]
  );
  const handlePointerUp = (0, import_react.useCallback)(
    (e) => {
      canvasEvents.onPointerUp?.(e);
      setIsPointing(false);
      rPointerState.current = {
        isDown: false,
        isDragging: false,
        start: new import_Vec.Vec(e.clientX, e.clientY)
      };
    },
    [canvasEvents]
  );
  return showElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    "div",
    {
      className: "tlui-menu-click-capture",
      "data-testid": "menu-click-capture.content",
      ...canvasEvents,
      onPointerDown: handlePointerDown,
      onPointerMove: handlePointerMove,
      onPointerUp: handlePointerUp
    }
  );
}
//# sourceMappingURL=MenuClickCapture.js.map