@tldraw/editor
Version:
tldraw infinite canvas SDK (editor).
88 lines (87 loc) • 2.5 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useValue } from "@tldraw/state-react";
import { useCallback, useRef, useState } from "react";
import { useCanvasEvents } from "../hooks/useCanvasEvents.mjs";
import { useEditor } from "../hooks/useEditor.mjs";
import { Vec } from "../primitives/Vec.mjs";
function MenuClickCapture() {
const editor = useEditor();
const isMenuOpen = useValue("is menu open", () => editor.menus.hasAnyOpenMenus(), [editor]);
const [isPointing, setIsPointing] = useState(false);
const showElement = isMenuOpen || isPointing;
const canvasEvents = useCanvasEvents();
const rPointerState = useRef({
isDown: false,
isDragging: false,
start: new Vec()
});
const handlePointerDown = useCallback(
(e) => {
if (e.button === 0) {
setIsPointing(true);
rPointerState.current = {
isDown: true,
isDragging: false,
start: new Vec(e.clientX, e.clientY)
};
}
editor.menus.clearOpenMenus();
},
[editor]
);
const handlePointerMove = useCallback(
(e) => {
if (!rPointerState.current.isDown) return;
if (rPointerState.current.isDragging) {
canvasEvents.onPointerMove?.(e);
return;
}
if (
// We're pointing, but are we dragging?
Vec.Dist2(rPointerState.current.start, new 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 = useCallback(
(e) => {
canvasEvents.onPointerUp?.(e);
setIsPointing(false);
rPointerState.current = {
isDown: false,
isDragging: false,
start: new Vec(e.clientX, e.clientY)
};
},
[canvasEvents]
);
return showElement && /* @__PURE__ */ jsx(
"div",
{
className: "tlui-menu-click-capture",
"data-testid": "menu-click-capture.content",
...canvasEvents,
onPointerDown: handlePointerDown,
onPointerMove: handlePointerMove,
onPointerUp: handlePointerUp
}
);
}
export {
MenuClickCapture
};
//# sourceMappingURL=MenuClickCapture.mjs.map