@tldraw/editor
Version:
tldraw infinite canvas SDK (editor).
199 lines (198 loc) • 7.69 kB
JavaScript
;
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 useCanvasEvents_exports = {};
__export(useCanvasEvents_exports, {
useCanvasEvents: () => useCanvasEvents
});
module.exports = __toCommonJS(useCanvasEvents_exports);
var import_state_react = require("@tldraw/state-react");
var import_react = require("react");
var import_environment = require("../globals/environment");
var import_dom = require("../utils/dom");
var import_getPointerInfo = require("../utils/getPointerInfo");
var import_useEditor = require("./useEditor");
function useCanvasEvents() {
const editor = (0, import_useEditor.useEditor)();
const ownerDocument = editor.getContainerDocument();
const currentTool = (0, import_state_react.useValue)("current tool", () => editor.getCurrentTool(), [editor]);
const events = (0, import_react.useMemo)(
function canvasEvents() {
function onPointerDown(e) {
if (editor.wasEventAlreadyHandled(e)) return;
if (e.button === 2 && !editor.options.rightClickPanning) {
editor.dispatch({
type: "pointer",
target: "canvas",
name: "right_click",
...(0, import_getPointerInfo.getPointerInfo)(editor, e)
});
return;
}
if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return;
(0, import_dom.setPointerCapture)(e.currentTarget, e);
editor.dispatch({
type: "pointer",
target: "canvas",
name: "pointer_down",
...(0, import_getPointerInfo.getPointerInfo)(editor, e)
});
}
function onPointerUp(e) {
if (editor.wasEventAlreadyHandled(e)) return;
if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return;
const rightClickPanning = editor.options.rightClickPanning;
const wasRightClickPanning = rightClickPanning && e.button === 2 && editor.inputs.getIsPanning();
(0, import_dom.releasePointerCapture)(e.currentTarget, e);
editor.dispatch({
type: "pointer",
target: "canvas",
name: "pointer_up",
...(0, import_getPointerInfo.getPointerInfo)(editor, e)
});
if (rightClickPanning && e.button === 2 && !wasRightClickPanning) {
const contextMenuEvent = new PointerEvent("contextmenu", {
bubbles: true,
clientX: e.clientX,
clientY: e.clientY,
button: 2,
buttons: 0,
pointerId: e.pointerId,
pointerType: e.pointerType,
isPrimary: e.isPrimary
});
e.currentTarget.dispatchEvent(contextMenuEvent);
}
}
function onPointerEnter(e) {
if (editor.wasEventAlreadyHandled(e)) return;
if (editor.getInstanceState().isPenMode && e.pointerType !== "pen") return;
const canHover = e.pointerType === "mouse" || e.pointerType === "pen";
editor.updateInstanceState({ isHoveringCanvas: canHover ? true : null });
}
function onPointerLeave(e) {
if (editor.wasEventAlreadyHandled(e)) return;
if (editor.getInstanceState().isPenMode && e.pointerType !== "pen") return;
const canHover = e.pointerType === "mouse" || e.pointerType === "pen";
editor.updateInstanceState({ isHoveringCanvas: canHover ? false : null });
}
function onTouchStart(e) {
if (editor.wasEventAlreadyHandled(e)) return;
editor.markEventAsHandled(e);
(0, import_dom.preventDefault)(e);
}
function onTouchEnd(e) {
if (editor.wasEventAlreadyHandled(e)) return;
editor.markEventAsHandled(e);
if (!(e.target instanceof editor.getContainerWindow().HTMLElement)) return;
const editingShapeId = editor.getEditingShapeId();
if (
// if the target is not inside the editing shape
!(editingShapeId && e.target.closest(`[data-shape-id="${editingShapeId}"]`)) && // and the target is not an clickable element
e.target.tagName !== "A" && // and the target is not an editable element
!(0, import_dom.elementShouldCaptureKeys)(e.target, false)
) {
(0, import_dom.preventDefault)(e);
}
}
function onDragOver(e) {
if (editor.wasEventAlreadyHandled(e)) return;
(0, import_dom.preventDefault)(e);
}
async function onDrop(e) {
if (editor.wasEventAlreadyHandled(e)) return;
(0, import_dom.preventDefault)(e);
e.stopPropagation();
const pagePoint = editor.screenToPage({ x: e.clientX, y: e.clientY });
if (editor.options.experimental__onDropOnCanvas) {
const handled = editor.options.experimental__onDropOnCanvas({
point: pagePoint,
event: e
});
if (handled) return;
}
if (e.dataTransfer?.files?.length) {
const files = Array.from(e.dataTransfer.files);
await editor.putExternalContent({
type: "files",
files,
point: pagePoint
});
return;
}
const url = e.dataTransfer.getData("url");
if (url) {
await editor.putExternalContent({
type: "url",
url,
point: pagePoint
});
return;
}
}
function onClick(e) {
if (editor.wasEventAlreadyHandled(e)) return;
e.stopPropagation();
}
function onContextMenu(e) {
if (!editor.options.rightClickPanning) return;
if (!e.nativeEvent.isTrusted) return;
if (e.button !== 2 || e.ctrlKey) return;
(0, import_dom.preventDefault)(e);
}
return {
onPointerDown,
onPointerUp,
onPointerEnter,
onPointerLeave,
onDragOver,
onDrop,
onTouchStart,
onTouchEnd,
onClick,
onContextMenu
};
},
[editor]
);
(0, import_react.useEffect)(() => {
let lastX, lastY;
function onPointerMove(e) {
if (editor.wasEventAlreadyHandled(e)) return;
editor.markEventAsHandled(e);
if (e.clientX === lastX && e.clientY === lastY) return;
lastX = e.clientX;
lastY = e.clientY;
const events2 = !import_environment.tlenv.isIos && currentTool.useCoalescedEvents && e.getCoalescedEvents ? e.getCoalescedEvents() : [e];
for (const singleEvent of events2) {
editor.dispatch({
type: "pointer",
target: "canvas",
name: "pointer_move",
...(0, import_getPointerInfo.getPointerInfo)(editor, singleEvent)
});
}
}
ownerDocument.body.addEventListener("pointermove", onPointerMove);
return () => {
ownerDocument.body.removeEventListener("pointermove", onPointerMove);
};
}, [editor, currentTool, ownerDocument]);
return events;
}
//# sourceMappingURL=useCanvasEvents.js.map