tldraw
Version:
A tiny little drawing editor.
124 lines (123 loc) • 4.24 kB
JavaScript
import {
StateNode
} from "@tldraw/editor";
import { getTextLabels } from "../../../utils/shapes/shapes.mjs";
import { updateHoveredShapeId } from "../../selection-logic/updateHoveredShapeId.mjs";
class EditingShape extends StateNode {
static id = "editing_shape";
hitShapeForPointerUp = null;
info = {};
onEnter(info) {
const editingShape = this.editor.getEditingShape();
if (!editingShape) throw Error("Entered editing state without an editing shape");
this.hitShapeForPointerUp = null;
this.info = info;
if (info.isCreatingTextWhileToolLocked) {
this.parent.setCurrentToolIdMask("text");
}
updateHoveredShapeId(this.editor);
this.editor.select(editingShape);
}
onExit() {
const { editingShapeId } = this.editor.getCurrentPageState();
if (!editingShapeId) return;
this.editor.setEditingShape(null);
updateHoveredShapeId.cancel();
const shape = this.editor.getShape(editingShapeId);
const util = this.editor.getShapeUtil(shape);
util.onEditEnd?.(shape);
if (this.info.isCreatingTextWhileToolLocked) {
this.parent.setCurrentToolIdMask(void 0);
this.editor.setCurrentTool("text", {});
}
}
onPointerMove(info) {
if (this.hitShapeForPointerUp && this.editor.inputs.isDragging) {
if (this.editor.getIsReadonly()) return;
if (this.hitShapeForPointerUp.isLocked) return;
this.editor.select(this.hitShapeForPointerUp);
this.parent.transition("translating", info);
this.hitShapeForPointerUp = null;
return;
}
switch (info.target) {
case "shape":
case "canvas": {
updateHoveredShapeId(this.editor);
return;
}
}
}
onPointerDown(info) {
this.hitShapeForPointerUp = null;
switch (info.target) {
case "shape": {
const { shape: selectingShape } = info;
const editingShape = this.editor.getEditingShape();
if (!editingShape) {
throw Error("Expected an editing shape!");
}
const geometry = this.editor.getShapeUtil(selectingShape).getGeometry(selectingShape);
const textLabels = getTextLabels(geometry);
const textLabel = textLabels.length === 1 ? textLabels[0] : void 0;
const isEmptyTextShape = this.editor.isShapeOfType(editingShape, "text") && editingShape.props.text.trim() === "";
if (textLabel && !isEmptyTextShape) {
const pointInShapeSpace = this.editor.getPointInShapeSpace(
selectingShape,
this.editor.inputs.currentPagePoint
);
if (textLabel.bounds.containsPoint(pointInShapeSpace, 0) && textLabel.hitTestPoint(pointInShapeSpace)) {
if (selectingShape.id === editingShape.id) {
return;
} else {
this.hitShapeForPointerUp = selectingShape;
this.editor.markHistoryStoppingPoint("editing on pointer up");
this.editor.select(selectingShape.id);
return;
}
}
} else {
if (selectingShape.id === editingShape.id) {
if (this.editor.isShapeOfType(selectingShape, "frame")) {
this.editor.setEditingShape(null);
this.parent.transition("idle", info);
}
} else {
this.parent.transition("pointing_shape", info);
return;
}
return;
}
break;
}
}
this.parent.transition("idle", info);
this.editor.root.handleEvent(info);
}
onPointerUp(info) {
const hitShape = this.hitShapeForPointerUp;
if (!hitShape) return;
this.hitShapeForPointerUp = null;
const util = this.editor.getShapeUtil(hitShape);
if (hitShape.isLocked) return;
if (this.editor.getIsReadonly()) {
if (!util.canEditInReadOnly(hitShape)) {
this.parent.transition("pointing_shape", info);
return;
}
}
this.editor.select(hitShape.id);
this.editor.setEditingShape(hitShape.id);
updateHoveredShapeId(this.editor);
}
onComplete(info) {
this.parent.transition("idle", info);
}
onCancel(info) {
this.parent.transition("idle", info);
}
}
export {
EditingShape
};
//# sourceMappingURL=EditingShape.mjs.map