@tldraw/editor
Version:
tldraw infinite canvas SDK (editor).
124 lines (123 loc) • 3.46 kB
JavaScript
import { createShapeId } from "@tldraw/tlschema";
import { structuredClone } from "@tldraw/utils";
import { Vec } from "../../../../primitives/Vec.mjs";
import { StateNode } from "../../StateNode.mjs";
class Pointing extends StateNode {
static id = "pointing";
onPointerMove(info) {
const { editor } = this;
if (editor.inputs.isDragging) {
const { originPagePoint } = editor.inputs;
const shapeType = this.parent.shapeType;
const id = createShapeId();
const creatingMarkId = editor.markHistoryStoppingPoint(`creating_box:${id}`);
const newPoint = maybeSnapToGrid(originPagePoint, editor);
this.editor.createShapes([
{
id,
type: shapeType,
x: newPoint.x,
y: newPoint.y,
props: {
w: 1,
h: 1
}
}
]);
const shape = editor.getShape(id);
if (!shape) {
this.cancel();
return;
}
editor.select(id);
const parent = this.parent;
this.editor.setCurrentTool(
"select.resizing",
{
...info,
target: "selection",
handle: "bottom_right",
isCreating: true,
creatingMarkId,
creationCursorOffset: { x: 1, y: 1 },
onInteractionEnd: this.parent.id,
onCreate: parent.onCreate ? (shape2) => parent.onCreate?.(shape2) : void 0
}
/** satisfies ResizingInfo, defined in main tldraw package 😧 */
);
}
}
onPointerUp() {
this.complete();
}
onCancel() {
this.cancel();
}
onComplete() {
this.complete();
}
onInterrupt() {
this.cancel();
}
complete() {
const { originPagePoint } = this.editor.inputs;
const shapeType = this.parent.shapeType;
const id = createShapeId();
this.editor.markHistoryStoppingPoint(`creating_box:${id}`);
this.editor.createShapes([
{
id,
type: shapeType,
x: originPagePoint.x,
y: originPagePoint.y
}
]);
const shape = this.editor.getShape(id);
if (!shape) {
this.cancel();
return;
}
let { w, h } = shape.props;
const delta = new Vec(w / 2, h / 2);
const parentTransform = this.editor.getShapeParentTransform(shape);
if (parentTransform) delta.rot(-parentTransform.rotation());
let scale = 1;
if (this.editor.user.getIsDynamicResizeMode()) {
scale = 1 / this.editor.getZoomLevel();
w *= scale;
h *= scale;
delta.mul(scale);
}
const next = structuredClone(shape);
const newPoint = maybeSnapToGrid(new Vec(shape.x - delta.x, shape.y - delta.y), this.editor);
next.x = newPoint.x;
next.y = newPoint.y;
next.props.w = w;
next.props.h = h;
if ("scale" in shape.props) {
;
next.props.scale = scale;
}
this.editor.updateShape(next);
this.editor.setSelectedShapes([id]);
if (this.editor.getInstanceState().isToolLocked) {
this.parent.transition("idle");
} else {
this.editor.setCurrentTool("select.idle");
}
}
cancel() {
this.parent.transition("idle");
}
}
function maybeSnapToGrid(point, editor) {
const isGridMode = editor.getInstanceState().isGridMode;
const gridSize = editor.getDocumentSettings().gridSize;
if (isGridMode) return point.clone().snapToGrid(gridSize);
return point.clone();
}
export {
Pointing,
maybeSnapToGrid
};
//# sourceMappingURL=Pointing.mjs.map