tldraw
Version:
A tiny little drawing editor.
148 lines (147 loc) • 4.43 kB
JavaScript
import { StateNode, createShapeId, maybeSnapToGrid } from "@tldraw/editor";
import { clearArrowTargetState, updateArrowTargetState } from "../arrowTargetState.mjs";
class Pointing extends StateNode {
static id = "pointing";
options = this.editor.getShapeUtil("arrow").options;
shape;
isPrecise = false;
isPreciseTimerId = null;
markId = "";
onEnter(info) {
this.markId = "";
this.isPrecise = !!info.isPrecise;
const targetState = updateArrowTargetState({
editor: this.editor,
pointInPageSpace: this.editor.inputs.currentPagePoint,
arrow: void 0,
isPrecise: this.isPrecise,
isExact: this.editor.inputs.altKey,
currentBinding: void 0,
oppositeBinding: void 0
});
if (!targetState) {
this.createArrowShape();
}
this.startPreciseTimeout();
}
onExit() {
this.shape = void 0;
clearArrowTargetState(this.editor);
this.clearPreciseTimeout();
}
onPointerMove() {
if (this.editor.inputs.isDragging) {
if (!this.shape) {
this.createArrowShape();
}
if (!this.shape) throw Error(`expected shape`);
this.updateArrowShapeEndHandle();
this.editor.setCurrentTool("select.dragging_handle", {
shape: this.shape,
handle: { id: "end", type: "vertex", index: "a3", x: 0, y: 0 },
isCreating: true,
creatingMarkId: this.markId || void 0,
onInteractionEnd: "arrow"
});
}
}
onPointerUp() {
this.cancel();
}
onCancel() {
this.cancel();
}
onComplete() {
this.cancel();
}
onInterrupt() {
this.cancel();
}
cancel() {
if (this.shape) {
this.editor.bailToMark(this.markId);
}
this.parent.transition("idle");
}
createArrowShape() {
const { originPagePoint } = this.editor.inputs;
const id = createShapeId();
this.markId = this.editor.markHistoryStoppingPoint(`creating_arrow:${id}`);
const newPoint = maybeSnapToGrid(originPagePoint, this.editor);
this.editor.createShape({
id,
type: "arrow",
x: newPoint.x,
y: newPoint.y,
props: {
scale: this.editor.user.getIsDynamicResizeMode() ? 1 / this.editor.getZoomLevel() : 1
}
});
const shape = this.editor.getShape(id);
if (!shape) throw Error(`expected shape`);
const handles = this.editor.getShapeHandles(shape);
if (!handles) throw Error(`expected handles for arrow`);
const util = this.editor.getShapeUtil("arrow");
const initial = this.shape;
const startHandle = handles.find((h) => h.id === "start");
const change = util.onHandleDrag?.(shape, {
handle: { ...startHandle, x: 0, y: 0 },
isPrecise: true,
initial
});
if (change) {
this.editor.updateShapes([change]);
}
this.shape = this.editor.getShape(id);
this.editor.select(id);
}
updateArrowShapeEndHandle() {
const shape = this.shape;
if (!shape) throw Error(`expected shape`);
const handles = this.editor.getShapeHandles(shape);
if (!handles) throw Error(`expected handles for arrow`);
{
const util = this.editor.getShapeUtil("arrow");
const initial = this.shape;
const startHandle = handles.find((h) => h.id === "start");
const change = util.onHandleDrag?.(shape, {
handle: { ...startHandle, x: 0, y: 0 },
isPrecise: this.isPrecise,
initial
});
if (change) {
this.editor.updateShapes([change]);
}
}
{
const util = this.editor.getShapeUtil("arrow");
const initial = this.shape;
const point = this.editor.getPointInShapeSpace(shape, this.editor.inputs.currentPagePoint);
const endHandle = handles.find((h) => h.id === "end");
const change = util.onHandleDrag?.(this.editor.getShape(shape), {
handle: { ...endHandle, x: point.x, y: point.y },
isPrecise: false,
initial
});
if (change) {
this.editor.updateShapes([change]);
}
}
this.shape = this.editor.getShape(shape.id);
}
startPreciseTimeout() {
this.isPreciseTimerId = this.editor.timers.setTimeout(() => {
if (!this.getIsActive()) return;
this.isPrecise = true;
}, this.options.pointingPreciseTimeout);
}
clearPreciseTimeout() {
if (this.isPreciseTimerId !== null) {
clearTimeout(this.isPreciseTimerId);
}
}
}
export {
Pointing
};
//# sourceMappingURL=Pointing.mjs.map