@inditextech/weave-sdk 0.18.0 → 0.19.0

package/dist/sdk.cjs

@@ -15769,12 +15769,12 @@ function checkIfOverContainer(instance, node) {
 	return layerToMove;
 }
 function moveNodeToContainer(instance, node) {
-	const nodesIntersected = instance.pointIntersectsContainerElement();
+	const nodeIntersected = instance.pointIntersectsContainerElement();
 	let nodeActualContainer = node.getParent();
 	if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
 	let layerToMove = void 0;
-	if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
-	if (!nodesIntersected && nodeActualContainer?.getAttrs().id !== __inditextech_weave_types.WEAVE_NODE_LAYER_ID) layerToMove = instance.getMainLayer();
+	if (!node.getAttrs().containerId && nodeIntersected && nodeActualContainer?.getAttrs().id !== nodeIntersected.getAttrs().id) layerToMove = nodeIntersected;
+	if (!nodeIntersected && nodeActualContainer?.getAttrs().id !== __inditextech_weave_types.WEAVE_NODE_LAYER_ID) layerToMove = instance.getMainLayer();
 	if (layerToMove) {
 		const nodePos = node.getAbsolutePosition();
 		const nodeRotation = node.getAbsoluteRotation();
@@ -17138,6 +17138,28 @@ var WeaveTargetingManager = class {
 		this.logger = this.instance.getChildLogger("targeting-manager");
 		this.logger.debug("Targeting manager created");
 	}
+	resolveNode(node) {
+		const stage = this.instance.getStage();
+		const nodeAttrs = node.getAttrs();
+		if (nodeAttrs.nodeId) {
+			const parentNode = stage.findOne(`#${nodeAttrs.nodeId}`);
+			if (!parentNode) return void 0;
+			return this.resolveNode(parentNode);
+		}
+		if (nodeAttrs.nodeType && nodeAttrs.nodeType !== "layer") return node;
+		return void 0;
+	}
+	pointIntersectsElement(point) {
+		const stage = this.instance.getStage();
+		const relativeMousePointer = point ? point : stage.getPointerPosition() ?? {
+			x: 0,
+			y: 0
+		};
+		const mainLayer = this.instance.getMainLayer();
+		if (!mainLayer) return null;
+		const intersectedNode = mainLayer.getIntersection(relativeMousePointer);
+		return intersectedNode;
+	}
 	pointIntersectsContainerElement(actualLayer, point) {
 		const stage = this.instance.getStage();
 		const relativeMousePointer = point ? point : stage.getPointerPosition() ?? {
@@ -17149,7 +17171,9 @@ var WeaveTargetingManager = class {
 		if (intersections) for (const node of intersections) {
 			if (node.getAttrs().nodeId) {
 				const parent = stage.findOne(`#${node.getAttrs().nodeId}`);
-				intersectedNode = parent;
+				if (!parent) continue;
+				const resolvedNode = this.resolveNode(parent);
+				if (resolvedNode && resolvedNode.getAttrs().containerId && resolvedNode.getAttrs().id !== actualLayer?.getAttrs().id) intersectedNode = parent;
 				continue;
 			}
 			if (node.getAttrs().containerId && node.getAttrs().id !== actualLayer?.getAttrs().id) {
@@ -17919,7 +17943,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.18.0";
+var version = "0.19.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18525,6 +18549,14 @@ var Weave = class extends Emittery {
 	unGroup(group) {
 		this.groupsManager.unGroup(group);
 	}
+	resolveNode(node) {
+		const resolvedNode = this.targetingManager.resolveNode(node);
+		if (resolvedNode) return resolvedNode;
+		return void 0;
+	}
+	pointIntersectsElement(point) {
+		return this.targetingManager.pointIntersectsElement(point);
+	}
 	pointIntersectsContainerElement(actualLayer, point) {
 		return this.targetingManager.pointIntersectsContainerElement(actualLayer, point);
 	}
@@ -18708,6 +18740,20 @@ const SELECTION_TOOL_STATE = {
 	["SELECTING"]: "selection"
 };
 
+//#endregion
+//#region src/actions/text-tool/constants.ts
+const TEXT_TOOL_ACTION_NAME = "textTool";
+const TEXT_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["ADDING"]: "adding",
+	["FINISHED"]: "finished"
+};
+const TEXT_LAYOUT = {
+	["AUTO_ALL"]: "auto-all",
+	["AUTO_HEIGHT"]: "auto-height",
+	["FIXED"]: "fixed"
+};
+
 //#endregion
 //#region src/nodes/text/text.ts
 var WeaveTextNode = class extends WeaveNode {
@@ -18728,7 +18774,23 @@ var WeaveTextNode = class extends WeaveNode {
 			...props,
 			name: "node"
 		});
+		text.setAttrs({ measureMultilineText: this.measureMultilineText(text) });
 		this.setupDefaultNodeEvents(text);
+		text.on("transform", (e) => {
+			const node = e.target;
+			if (this.isSelecting() && this.isNodeSelected(node)) {
+				const nodeHandler = this.instance.getNodeHandler(WEAVE_TEXT_NODE_TYPE);
+				const serializedNode = nodeHandler.serialize(node);
+				this.instance.updateNode({
+					...serializedNode,
+					props: {
+						...serializedNode.props,
+						layout: TEXT_LAYOUT.FIXED
+					}
+				});
+				e.cancelBubble = true;
+			}
+		});
 		window.addEventListener("keypress", (e) => {
 			if (e.key === "Enter" && this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME && !this.editing) {
 				e.preventDefault();
@@ -18770,6 +18832,23 @@ var WeaveTextNode = class extends WeaveNode {
 	}
 	onUpdate(nodeInstance, nextProps) {
 		nodeInstance.setAttrs({ ...nextProps });
+		let width = nextProps.width;
+		let height = nextProps.height;
+		if (nextProps.layout === TEXT_LAYOUT.AUTO_ALL) {
+			const { width: textAreaWidth, height: textAreaHeight } = this.textRenderedSize(nextProps.text, nodeInstance);
+			width = textAreaWidth + 3.2;
+			height = textAreaHeight + 3.2;
+		}
+		if (nextProps.layout === TEXT_LAYOUT.AUTO_HEIGHT) {
+			const { height: textAreaHeight } = this.textRenderedSize(nextProps.text, nodeInstance);
+			height = textAreaHeight + 3.2;
+		}
+		nodeInstance.setAttrs({
+			width,
+			height
+		});
+		if (nextProps.width !== nodeInstance.getAttrs().width || nextProps.height !== nodeInstance.getAttrs().height) this.updateNode(nodeInstance);
+		if (this.editing) this.updateTextAreaDOM(nodeInstance);
 	}
 	serialize(instance) {
 		const attrs = instance.getAttrs();
@@ -18787,73 +18866,119 @@ var WeaveTextNode = class extends WeaveNode {
 			}
 		};
 	}
-	resizeTextAreaDOM(textNode) {
-		const textArea = document.getElementById(textNode.id());
-		if (!textArea) return;
-		const stage = this.instance.getStage();
-		const textPosition = textNode.absolutePosition();
-		const position = {
-			x: stage.container().offsetLeft + textPosition.x,
-			y: stage.container().offsetTop + textPosition.y
-		};
-		textArea.style.top = position.y + "px";
-		textArea.style.left = position.x + "px";
-		textArea.style.width = textNode.getWidth() * textNode.getAbsoluteScale().x + "px";
-		textArea.style.height = textNode.getHeight() * textNode.getAbsoluteScale().x + "px";
-		textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
-	}
 	onZoomChangeHandler = (textNode) => () => {
 		if (!this.editing) return;
-		this.resizeTextAreaDOM(textNode);
+		this.updateTextAreaDOM(textNode);
 	};
 	onStageMoveHandler = (textNode) => () => {
 		if (!this.editing) return;
-		this.resizeTextAreaDOM(textNode);
+		this.updateTextAreaDOM(textNode);
 	};
+	textAreaDomResize(textAreaContainer, textArea, textNode) {
+		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
+			const { width: textAreaWidth } = this.textRenderedSize(textArea.value, textNode);
+			textAreaContainer.style.width = (textAreaWidth + 5) * textNode.getAbsoluteScale().x + "px";
+		}
+		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) textAreaContainer.style.height = "auto";
+		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
+			textAreaContainer.style.height = "auto";
+			textAreaContainer.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().y + "px";
+		}
+		textArea.style.height = "auto";
+		textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+		textArea.rows = textArea.value.split("\n").length;
+	}
+	measureMultilineText(textNode) {
+		return () => {
+			return this.textRenderedSize(textNode.text(), textNode);
+		};
+	}
+	textRenderedSize(text, textNode) {
+		let width = 0;
+		let height = 0;
+		const lines = text.split("\n");
+		for (const line of lines) {
+			const textSize = textNode.measureSize(line);
+			if (textSize.width > width) width = textSize.width;
+			height = height + textSize.height * (textNode.lineHeight() ?? 1);
+		}
+		return {
+			width,
+			height
+		};
+	}
 	createTextAreaDOM(textNode, position) {
 		const stage = this.instance.getStage();
+		const textAreaSuperContainer = document.createElement("div");
+		textAreaSuperContainer.id = `${textNode.id()}_supercontainer`;
+		textAreaSuperContainer.style.position = "absolute";
+		textAreaSuperContainer.style.top = "0px";
+		textAreaSuperContainer.style.left = "0px";
+		textAreaSuperContainer.style.bottom = "0px";
+		textAreaSuperContainer.style.right = "0px";
+		textAreaSuperContainer.style.overflow = "hidden";
+		const textAreaContainer = document.createElement("div");
+		textAreaContainer.id = `${textNode.id()}_container`;
 		const textArea = document.createElement("textarea");
 		textArea.id = textNode.id();
-		stage.container().appendChild(textArea);
+		textAreaContainer.appendChild(textArea);
+		textAreaSuperContainer.appendChild(textAreaContainer);
+		stage.container().appendChild(textAreaSuperContainer);
+		const containerRect = stage.container().getBoundingClientRect();
 		this.instance.addEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
 		this.instance.addEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
 		window.weaveTextEditing[textNode.id()] = "editing";
 		textArea.value = textNode.text();
 		textArea.id = textNode.id();
-		textArea.style.position = "fixed";
-		textArea.style.top = position.y + "px";
-		textArea.style.left = position.x + "px";
-		textArea.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
-		textArea.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
+		textAreaContainer.style.overflow = "hidden";
+		textAreaContainer.style.display = "flex";
+		textAreaContainer.style.justifyContent = "start";
+		if (textNode.getAttrs().verticalAlign === "top") textAreaContainer.style.alignItems = "start";
+		if (textNode.getAttrs().verticalAlign === "middle") textAreaContainer.style.alignItems = "center";
+		if (textNode.getAttrs().verticalAlign === "bottom") textAreaContainer.style.alignItems = "end";
+		textAreaContainer.style.position = "absolute";
+		textAreaContainer.style.top = -containerRect.y + position.y + "px";
+		textAreaContainer.style.left = -containerRect.x + position.x + "px";
+		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
+			textAreaContainer.style.width = textArea.scrollWidth + "px";
+			textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
+		}
+		if (textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
+			textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
+			textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
+		}
+		if (textNode.getAttrs().layout === TEXT_LAYOUT.FIXED) {
+			textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
+			textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
+		}
 		textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
-		textArea.style.border = "solid 1px #1e40af";
+		textArea.rows = textNode.text().split("\n").length;
+		textAreaContainer.style.border = "solid 1px #1e40af";
+		textArea.style.caretColor = "black";
+		textArea.style.width = "100%";
 		textArea.style.minHeight = "auto";
 		textArea.style.margin = "0px";
 		textArea.style.overflow = "hidden";
 		textArea.style.background = "transparent";
+		textArea.style.border = "none";
 		textArea.style.outline = "none";
 		textArea.style.resize = "none";
 		textArea.style.lineHeight = `${textNode.lineHeight()}`;
 		textArea.style.fontFamily = textNode.fontFamily();
-		textArea.style.transformOrigin = "left top";
+		textAreaContainer.style.transformOrigin = "left top";
 		textArea.style.textAlign = textNode.align();
 		textArea.style.color = `${textNode.fill()}`;
 		textArea.onfocus = () => {
-			textArea.style.height = "auto";
-			textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
-			textArea.setSelectionRange(textArea.value.length, textArea.value.length);
+			this.textAreaDomResize(textAreaContainer, textArea, textNode);
 		};
 		textArea.onkeydown = () => {
-			textArea.style.height = "auto";
-			textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+			this.textAreaDomResize(textAreaContainer, textArea, textNode);
 		};
 		textArea.onkeyup = () => {
-			textArea.style.height = "auto";
-			textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+			this.textAreaDomResize(textAreaContainer, textArea, textNode);
 		};
 		textArea.oninput = () => {
-			textArea.style.height = "auto";
-			textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+			this.textAreaDomResize(textAreaContainer, textArea, textNode);
 		};
 		const rotation = textNode.rotation();
 		let transform = "";
@@ -18866,10 +18991,12 @@ var WeaveTextNode = class extends WeaveNode {
 		const handleKeyDown = (e) => {
 			e.stopPropagation();
 			if (textArea && textNode && e.key === "Escape") {
-				textNode.width(parseFloat(textArea.style.width) * (1 / textNode.getAbsoluteScale().x));
-				textNode.height((textArea.scrollHeight + 1.6) * (1 / textNode.getAbsoluteScale().x));
+				if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
+					const { width: textAreaWidth } = this.textRenderedSize(textArea.value, textNode);
+					textNode.width(textAreaWidth + 3.2);
+				}
+				if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) textNode.height((textArea.scrollHeight + 1.6) * (1 / textNode.getAbsoluteScale().x));
 				textNode.text(textArea.value);
-				this.updateNode(textNode);
 				this.removeTextAreaDOM(textNode);
 				this.instance.removeEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
 				this.instance.removeEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
@@ -18880,9 +19007,11 @@ var WeaveTextNode = class extends WeaveNode {
 		const handleKeyUp = () => {
 			textNode.text(textArea.value);
 			if (textArea && textNode) {
-				textArea.style.width = textNode.width() * textNode.getAbsoluteScale().x + "px";
-				textArea.style.height = "auto";
-				textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+				if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
+					textAreaContainer.style.height = "auto";
+					textAreaContainer.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+				}
+				this.textAreaDomResize(textAreaContainer, textArea, textNode);
 			}
 		};
 		textArea.addEventListener("keydown", handleKeyDown);
@@ -18890,22 +19019,16 @@ var WeaveTextNode = class extends WeaveNode {
 		textArea.tabIndex = 1;
 		textArea.focus();
 		const handleOutsideClick = (e) => {
-			if (!e && textArea.value === "") {
-				this.updateNode(textNode);
-				this.removeTextAreaDOM(textNode);
-				textArea.removeEventListener("keydown", handleKeyDown);
-				textArea.removeEventListener("keyup", handleKeyUp);
-				window.removeEventListener("click", handleOutsideClick);
-				window.removeEventListener("touchstart", handleOutsideClick);
-			}
-			if (e && e.target !== textArea && textArea.value !== "") {
+			let clickedOnCanvas = false;
+			if (e.target?.id === `${textNode.id()}_supercontainer`) clickedOnCanvas = true;
+			if (clickedOnCanvas) {
 				textNode.text(textArea.value);
-				this.updateNode(textNode);
 				this.removeTextAreaDOM(textNode);
 				textArea.removeEventListener("keydown", handleKeyDown);
 				textArea.removeEventListener("keyup", handleKeyUp);
 				window.removeEventListener("click", handleOutsideClick);
 				window.removeEventListener("touchstart", handleOutsideClick);
+				return;
 			}
 		};
 		setTimeout(() => {
@@ -18913,12 +19036,58 @@ var WeaveTextNode = class extends WeaveNode {
 			window.addEventListener("touchstart", handleOutsideClick);
 		});
 	}
+	updateTextAreaDOM(textNode) {
+		const textAreaContainer = document.getElementById(`${textNode.id()}_container`);
+		const textArea = document.getElementById(textNode.id());
+		if (!textAreaContainer || !textArea) return;
+		const stage = this.instance.getStage();
+		const containerRect = stage.container().getBoundingClientRect();
+		const textPosition = textNode.getClientRect();
+		const position = {
+			x: textPosition.x,
+			y: textPosition.y
+		};
+		textAreaContainer.style.top = -containerRect.y + position.y + "px";
+		textAreaContainer.style.left = -containerRect.x + position.x + "px";
+		if (textNode.getAttrs().verticalAlign === "top") textAreaContainer.style.alignItems = "start";
+		if (textNode.getAttrs().verticalAlign === "middle") textAreaContainer.style.alignItems = "center";
+		if (textNode.getAttrs().verticalAlign === "bottom") textAreaContainer.style.alignItems = "end";
+		textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
+		textArea.rows = textNode.text().split("\n").length;
+		textArea.style.lineHeight = `${textNode.lineHeight()}`;
+		textArea.style.fontFamily = textNode.fontFamily();
+		textArea.style.textAlign = textNode.align();
+		textArea.style.color = `${textNode.fill()}`;
+		this.textAreaDomResize(textAreaContainer, textArea, textNode);
+		this.textAreaDomResize(textAreaContainer, textArea, textNode);
+		const rotation = textNode.rotation();
+		let transform = "";
+		if (rotation) transform += "rotateZ(" + rotation + "deg)";
+		const px = 0;
+		const py = -3 * stage.scaleY();
+		transform += "translateX(" + px + "px)";
+		transform += "translateY(" + py + "px)";
+		textArea.style.transform = transform;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const tr = selectionPlugin.getTransformer();
+			this.instance.disablePlugin("nodesSelection");
+			tr.hide();
+		}
+		if (this.editing) textNode.visible(false);
+		else textNode.visible(true);
+	}
 	removeTextAreaDOM(textNode) {
 		const stage = this.instance.getStage();
 		delete window.weaveTextEditing[textNode.id()];
+		const textAreaSuperContainer = document.getElementById(`${textNode.id()}_supercontainer`);
+		if (textAreaSuperContainer) textAreaSuperContainer.remove();
+		const textAreaContainer = document.getElementById(`${textNode.id()}_container`);
+		if (textAreaContainer) textAreaContainer.remove();
 		const textArea = document.getElementById(textNode.id());
 		if (textArea) textArea.remove();
 		textNode.visible(true);
+		this.updateNode(textNode);
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
 			this.instance.enablePlugin("nodesSelection");
@@ -18926,7 +19095,6 @@ var WeaveTextNode = class extends WeaveNode {
 			if (tr) {
 				tr.nodes([textNode]);
 				tr.show();
-				tr.forceUpdate();
 			}
 			this.instance.triggerAction("selectionTool");
 		}
@@ -19401,6 +19569,7 @@ var WeaveImageNode = class extends WeaveNode {
 		const imageProps = props;
 		const { id } = imageProps;
 		const groupImageProps = { ...imageProps };
+		delete groupImageProps.children;
 		delete groupImageProps.imageProperties;
 		delete groupImageProps.zIndex;
 		const internalImageProps = { ...props };
@@ -19415,6 +19584,7 @@ var WeaveImageNode = class extends WeaveNode {
 		const imagePlaceholder = new konva.default.Rect({
 			...groupImageProps,
 			id: `${id}-placeholder`,
+			nodeId: id,
 			x: 0,
 			y: 0,
 			scaleX: 1,
@@ -19432,6 +19602,7 @@ var WeaveImageNode = class extends WeaveNode {
 			...internalImageProps,
 			...imageProperties,
 			id: `${id}-image`,
+			nodeId: id,
 			x: 0,
 			y: 0,
 			scaleX: 1,
@@ -19503,6 +19674,7 @@ var WeaveImageNode = class extends WeaveNode {
 				...nodeAttrs.imageProperties ?? {},
 				name: void 0,
 				id: `${id}-placeholder`,
+				nodeId: id,
 				x: 0,
 				y: 0,
 				scaleX: 1,
@@ -19519,6 +19691,7 @@ var WeaveImageNode = class extends WeaveNode {
 				...nodeAttrs.imageProperties ?? {},
 				name: void 0,
 				id: `${id}-image`,
+				nodeId: id,
 				x: 0,
 				y: 0,
 				scaleX: 1,
@@ -19534,6 +19707,7 @@ var WeaveImageNode = class extends WeaveNode {
 			...nodeAttrs.imageProperties ?? {},
 			name: void 0,
 			id: `${id}-image`,
+			nodeId: id,
 			x: 0,
 			y: 0,
 			scaleX: 1,
@@ -20179,6 +20353,13 @@ var WeaveMoveToolAction = class extends WeaveAction {
 		return MOVE_TOOL_ACTION_NAME;
 	}
 	setupEvents() {
+		const stage = this.instance.getStage();
+		stage.container().addEventListener("keydown", (e) => {
+			if (e.key === "Escape" && this.instance.getActiveAction() === MOVE_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+		});
 		this.initialized = true;
 	}
 	setState(state) {
@@ -20203,11 +20384,7 @@ var WeaveMoveToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "default";
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (selectionPlugin) {
-			const tr = selectionPlugin.getTransformer();
-			this.instance.disablePlugin("nodesSelection");
-			tr.hide();
-		}
+		if (selectionPlugin) this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		this.setState(MOVE_TOOL_STATE.IDLE);
 	}
 };
@@ -20266,6 +20443,82 @@ var WeaveSelectionToolAction = class extends WeaveAction {
 	}
 };
 
+//#endregion
+//#region src/actions/eraser-tool/constants.ts
+const ERASER_TOOL_ACTION_NAME = "eraserTool";
+const ERASER_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["ERASING"]: "erasing"
+};
+
+//#endregion
+//#region src/actions/eraser-tool/eraser-tool.ts
+var WeaveEraserToolAction = class extends WeaveAction {
+	initialized = false;
+	erasing = false;
+	onPropsChange = void 0;
+	onInit = void 0;
+	constructor() {
+		super();
+		this.initialized = false;
+		this.erasing = false;
+		this.state = ERASER_TOOL_STATE.IDLE;
+	}
+	getName() {
+		return ERASER_TOOL_ACTION_NAME;
+	}
+	setupEvents() {
+		const stage = this.instance.getStage();
+		stage.on("click touch", (e) => {
+			e.evt.preventDefault();
+			if (!this.erasing) return;
+			const nodeIntersected = this.instance.pointIntersectsElement();
+			if (nodeIntersected) {
+				const realNode = this.instance.resolveNode(nodeIntersected);
+				if (!realNode) return;
+				const nodeType = realNode.getAttrs().nodeType;
+				const nodeHandler = this.instance.getNodeHandler(nodeType);
+				const nodeSerialized = nodeHandler.serialize(realNode);
+				this.instance.removeNode(nodeSerialized);
+			}
+		});
+		stage.container().addEventListener("keydown", (e) => {
+			if (e.key === "Escape" && this.instance.getActiveAction() === ERASER_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+		});
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	setEraser() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "crosshair";
+		stage.container().focus();
+		this.erasing = true;
+		this.setState(ERASER_TOOL_STATE.ERASING);
+	}
+	trigger(cancelAction) {
+		if (!this.instance) throw new Error("Instance not defined");
+		if (!this.initialized) this.setupEvents();
+		const stage = this.instance.getStage();
+		stage.container().tabIndex = 1;
+		stage.container().focus();
+		this.cancelAction = cancelAction;
+		this.setEraser();
+	}
+	cleanup() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+		this.erasing = false;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		this.setState(ERASER_TOOL_STATE.IDLE);
+	}
+};
+
 //#endregion
 //#region src/actions/rectangle-tool/constants.ts
 const RECTANGLE_TOOL_ACTION_NAME = "rectangleTool";
@@ -20830,15 +21083,6 @@ var WeaveBrushToolAction = class extends WeaveAction {
 	}
 };
 
-//#endregion
-//#region src/actions/text-tool/constants.ts
-const TEXT_TOOL_ACTION_NAME = "textTool";
-const TEXT_TOOL_STATE = {
-	["IDLE"]: "idle",
-	["ADDING"]: "adding",
-	["FINISHED"]: "finished"
-};
-
 //#endregion
 //#region src/actions/text-tool/text-tool.ts
 var WeaveTextToolAction = class extends WeaveAction {
@@ -20901,8 +21145,9 @@ var WeaveTextToolAction = class extends WeaveAction {
 		const node = nodeHandler.create(this.textId, {
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
-			text: "Your text here...",
-			width: 300,
+			text: "",
+			layout: TEXT_LAYOUT.AUTO_ALL,
+			width: 10,
 			fontSize: 20,
 			fontFamily: "Arial, sans-serif",
 			fill: "#000000ff",
@@ -21438,10 +21683,10 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.disableMove();
 			}
 		});
-		stage.on("mouseenter", () => {
+		stage.container().addEventListener("mouseenter", () => {
 			this.overStage = true;
 		});
-		stage.on("mouseleave", () => {
+		stage.container().addEventListener("mouseleave", () => {
 			this.overStage = false;
 		});
 		stage.on("mousedown", (e) => {
@@ -21516,7 +21761,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			if (!this.enabled || !this.overStage || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
 			stage.x(stage.x() - e.deltaX);
 			stage.y(stage.y() - e.deltaY);
-			this.instance.emit("stageMove", void 0);
+			this.instance.emit("onStageMove", void 0);
 		});
 	}
 	enable() {
@@ -22376,6 +22621,8 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 exports.BRUSH_TOOL_ACTION_NAME = BRUSH_TOOL_ACTION_NAME
 exports.BRUSH_TOOL_STATE = BRUSH_TOOL_STATE
 exports.COPY_PASTE_NODES_PLUGIN_STATE = COPY_PASTE_NODES_PLUGIN_STATE
+exports.ERASER_TOOL_ACTION_NAME = ERASER_TOOL_ACTION_NAME
+exports.ERASER_TOOL_STATE = ERASER_TOOL_STATE
 exports.FRAME_TOOL_ACTION_NAME = FRAME_TOOL_ACTION_NAME
 exports.FRAME_TOOL_STATE = FRAME_TOOL_STATE
 exports.GUIDE_LINE_DEFAULT_CONFIG = GUIDE_LINE_DEFAULT_CONFIG
@@ -22394,6 +22641,7 @@ exports.RECTANGLE_TOOL_ACTION_NAME = RECTANGLE_TOOL_ACTION_NAME
 exports.RECTANGLE_TOOL_STATE = RECTANGLE_TOOL_STATE
 exports.SELECTION_TOOL_ACTION_NAME = SELECTION_TOOL_ACTION_NAME
 exports.SELECTION_TOOL_STATE = SELECTION_TOOL_STATE
+exports.TEXT_LAYOUT = TEXT_LAYOUT
 exports.TEXT_TOOL_ACTION_NAME = TEXT_TOOL_ACTION_NAME
 exports.TEXT_TOOL_STATE = TEXT_TOOL_STATE
 exports.WEAVE_COPY_PASTE_NODES_KEY = WEAVE_COPY_PASTE_NODES_KEY
@@ -22426,6 +22674,7 @@ exports.WeaveBrushToolAction = WeaveBrushToolAction
 exports.WeaveConnectedUsersPlugin = WeaveConnectedUsersPlugin
 exports.WeaveContextMenuPlugin = WeaveContextMenuPlugin
 exports.WeaveCopyPasteNodesPlugin = WeaveCopyPasteNodesPlugin
+exports.WeaveEraserToolAction = WeaveEraserToolAction
 exports.WeaveExportNodeToolAction = WeaveExportNodeToolAction
 exports.WeaveExportStageToolAction = WeaveExportStageToolAction
 exports.WeaveFitToScreenToolAction = WeaveFitToScreenToolAction