@inditextech/weave-sdk 0.32.0 → 0.34.0

package/dist/sdk.cjs

@@ -15646,6 +15646,7 @@ const WEAVE_NODES_SELECTION_LAYER_ID = "selectionLayer";
 const WEAVE_CONTEXT_MENU_KEY = "contextMenu";
 const WEAVE_CONTEXT_MENU_X_OFFSET_DEFAULT = 4;
 const WEAVE_CONTEXT_MENU_Y_OFFSET_DEFAULT = 4;
+const WEAVE_CONTEXT_MENU_TAP_HOLD_TIMEOUT = 500;
 
 //#endregion
 //#region src/plugins/context-menu/context-menu.ts
@@ -15657,13 +15658,14 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 		this.touchTimer = void 0;
 		this.tapHold = false;
 		this.contextMenuVisible = false;
-		this.tapHoldTimeout = 500;
+		this.tapHoldTimeout = WEAVE_CONTEXT_MENU_TAP_HOLD_TIMEOUT;
 		const { config } = params ?? {};
 		this.config = {
 			xOffset: WEAVE_CONTEXT_MENU_X_OFFSET_DEFAULT,
 			yOffset: WEAVE_CONTEXT_MENU_Y_OFFSET_DEFAULT,
 			...config
 		};
+		this.pointers = {};
 	}
 	getName() {
 		return WEAVE_CONTEXT_MENU_KEY;
@@ -15681,9 +15683,8 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 			const mousePos = stage.getPointerPosition();
 			if (mousePos && mousePos.x >= box.x && mousePos.x <= box.x + box.width && mousePos.y >= box.y && mousePos.y <= box.y + box.height) clickOnTransformer = true;
 		}
-		if (target !== stage && !clickOnTransformer) return;
 		let nodes = [];
-		if (clickOnTransformer && selectionPlugin) {
+		if (target !== stage && clickOnTransformer && selectionPlugin) {
 			const transformer = selectionPlugin.getTransformer();
 			nodes = transformer.getNodes().map((node) => {
 				const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
@@ -15693,6 +15694,13 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 				};
 			}).filter((node) => typeof node !== "undefined");
 		}
+		if (target !== stage && !clickOnTransformer) {
+			const nodeHandler = this.instance.getNodeHandler(target.getAttrs().nodeType);
+			nodes = [{
+				instance: target,
+				node: nodeHandler?.serialize(target)
+			}];
+		}
 		const containerRect = stage.container().getBoundingClientRect();
 		const pointerPos = stage.getPointerPosition();
 		if (containerRect && pointerPos) {
@@ -15721,28 +15729,24 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
-		stage.on("touchstart", (e) => {
-			e.evt.preventDefault();
-			if (e.evt instanceof TouchEvent && e.evt.touches && e.evt.touches.length > 1) {
-				if (this.touchTimer) clearTimeout(this.touchTimer);
-				return;
-			}
+		stage.on("pointerdown", (e) => {
+			this.pointers[e.evt.pointerId] = e.evt;
+			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
 			this.touchTimer = setTimeout(() => {
 				this.tapHold = true;
 				this.triggerContextMenu(e.target);
 			}, this.tapHoldTimeout);
 		});
-		stage.on("touchmove", () => {
+		stage.on("pointermove", () => {
 			if (this.touchTimer) clearTimeout(this.touchTimer);
 		});
-		stage.on("touchend", (e) => {
-			e.evt.preventDefault();
-			if (e.evt instanceof TouchEvent && e.evt.touches && e.evt.touches.length > 1) {
-				if (this.touchTimer) clearTimeout(this.touchTimer);
-				return;
+		stage.on("pointerup", (e) => {
+			delete this.pointers[e.evt.pointerId];
+			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) return;
+			if (this.touchTimer) {
+				clearTimeout(this.touchTimer);
+				this.tapHold = false;
 			}
-			if (this.touchTimer) clearTimeout(this.touchTimer);
-			if (this.tapHold) this.tapHold = false;
 		});
 		stage.on("contextmenu", (e) => {
 			e.evt.preventDefault();
@@ -15805,6 +15809,8 @@ function checkIfOverContainer(instance, node) {
 }
 function moveNodeToContainer(instance, node) {
 	const nodeIntersected = instance.pointIntersectsContainerElement();
+	const isLocked = instance.allNodesLocked([node]);
+	if (isLocked) return;
 	let nodeActualContainer = node.getParent();
 	if (!nodeActualContainer) return void 0;
 	const actualContainerAttrs = nodeActualContainer.getAttrs();
@@ -15960,8 +15966,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.active = false;
 		this.cameFromSelectingMultiple = false;
 		this.selecting = false;
+		this.dragging = false;
 		this.initialized = false;
 		this.enabled = false;
+		this.pointers = {};
 	}
 	getName() {
 		return WEAVE_NODES_SELECTION_KEY;
@@ -16009,20 +16017,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			...this.config.transformer
 		});
 		selectionLayer?.add(tr);
-		tr.on("mouseenter", (e) => {
-			if (!this.isPasting()) {
-				const stage$1 = this.instance.getStage();
-				stage$1.container().style.cursor = "grab";
-				e.cancelBubble = true;
-			}
-		});
-		tr.on("mouseleave", (e) => {
-			if (!this.isPasting()) {
-				const stage$1 = this.instance.getStage();
-				stage$1.container().style.cursor = "default";
-				e.cancelBubble = true;
-			}
-		});
 		tr.on("transformstart", () => {
 			this.triggerSelectedNodesEvent();
 		});
@@ -16034,6 +16028,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.triggerSelectedNodesEvent();
 		});
 		tr.on("dragstart", (e) => {
+			this.dragging = true;
 			const stage$1 = this.instance.getStage();
 			if (stage$1.isMouseWheelPressed()) {
 				e.cancelBubble = true;
@@ -16070,6 +16065,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		};
 		tr.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 50));
 		tr.on("dragend", (e) => {
+			this.dragging = false;
 			e.cancelBubble = true;
 			const selectedNodes = tr.nodes();
 			for (let i = 0; i < selectedNodes.length; i++) {
@@ -16104,11 +16100,11 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		});
 		this.tr = tr;
 		this.selectionRectangle = selectionRectangle;
-		this.tr.on("dblclick dbltap", (evt) => {
-			evt.cancelBubble = true;
+		this.tr.on("pointerdblclick", (e) => {
+			e.cancelBubble = true;
 			if (this.tr.getNodes().length === 1) {
 				const node = this.tr.getNodes()[0];
-				node.fire("dblclick");
+				node.fire("pointerdblclick");
 			}
 		});
 		this.initEvents();
@@ -16172,14 +16168,14 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				return;
 			}
 		});
-		stage.on("mousedown touchstart", (e) => {
+		stage.on("pointerdown", (e) => {
+			this.pointers[e.evt.pointerId] = e.evt;
 			if (!this.initialized) return;
 			if (!this.active) return;
-			if (e.evt.button && e.evt.button !== 0) return;
-			if (e.evt.touches && e.evt.touches.length > 1) return;
+			if (e.evt.pointerType === "mouse" && e.evt.button !== 0) return;
+			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
 			const selectedGroup = this.instance.getInstanceRecursive(e.target);
 			if (!(e.target instanceof konva.default.Stage) && !(selectedGroup && selectedGroup.getAttrs().nodeType === "frame")) return;
-			e.evt.preventDefault();
 			const intStage = this.instance.getStage();
 			x1 = intStage.getRelativePointerPosition()?.x ?? 0;
 			y1 = intStage.getRelativePointerPosition()?.y ?? 0;
@@ -16196,7 +16192,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		const handleMouseMove = (e) => {
 			if (!this.initialized) return;
 			if (!this.active) return;
-			if (e.evt instanceof TouchEvent && e.evt.touches && e.evt.touches.length > 1) return;
+			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
 			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
 			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
 				this.selecting = false;
@@ -16206,7 +16202,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				this.cameFromSelectingMultiple = false;
 				return;
 			}
-			e.evt.preventDefault();
 			const intStage = this.instance.getStage();
 			x2 = intStage.getRelativePointerPosition()?.x ?? 0;
 			y2 = intStage.getRelativePointerPosition()?.y ?? 0;
@@ -16218,11 +16213,13 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				height: Math.abs(y2 - y1)
 			});
 		};
-		stage.on("mousemove touchmove", (0, import_lodash.throttle)(handleMouseMove, 50));
-		stage.on("mouseup touchend", (e) => {
+		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
+		stage.on("pointerup", (e) => {
+			delete this.pointers[e.evt.pointerId];
 			if (!this.initialized) return;
 			if (!this.active) return;
-			if (e.evt instanceof TouchEvent && e.evt.touches && e.evt.touches.length > 1) return;
+			if (!this.selecting) return;
+			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) return;
 			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
 			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
 				this.selecting = false;
@@ -16234,7 +16231,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				this.cameFromSelectingMultiple = false;
 				return;
 			}
-			e.evt.preventDefault();
 			this.tr.nodes([]);
 			this.selectionRectangle.visible(false);
 			const shapes = stage.find((node) => {
@@ -16254,25 +16250,34 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				return false;
 			});
 			const selectedNodes = new Set();
-			const framesNodes = selected.filter((shape) => shape.getAttrs().nodeType === "frame");
-			const framesNodesIds = selected.map((shape) => shape.getAttrs().id);
+			const framesNodes = selected.map((shape) => {
+				if (shape.getAttrs().nodeType === "frame" && shape.getAttrs().nodeId) return stage.findOne(`#${shape.getAttrs().nodeId}`);
+				return shape;
+			}).filter((shape) => {
+				return shape.getAttrs().nodeType === "frame";
+			});
+			const framesNodesIds = framesNodes.map((shape) => {
+				return shape.getAttrs().id;
+			});
 			const otherNodes = selected.filter((shape) => shape.getAttrs().nodeType !== "frame");
 			otherNodes.forEach((node) => {
-				const parent = this.instance.getInstanceRecursive(node.getParent());
-				if (!framesNodesIds.includes(parent?.getAttrs().id)) selectedNodes.add(node);
+				let parent = this.instance.getInstanceRecursive(node.getParent());
+				if (parent?.getAttrs().nodeId) parent = this.instance.getStage().findOne(`#${parent.getAttrs().nodeId}`);
+				if (parent && !framesNodesIds.includes(parent?.getAttrs().id) && !node.getAttrs().locked) selectedNodes.add(node);
 			});
 			framesNodes.forEach((node) => {
 				const frameNode = node;
-				selectedNodes.add(frameNode);
+				if (!frameNode.getAttrs().locked) selectedNodes.add(frameNode);
 			});
 			this.tr.nodes([...selectedNodes]);
 			this.triggerSelectedNodesEvent();
 			stage.container().tabIndex = 1;
 			stage.container().focus();
 		});
-		stage.on("click tap", (e) => {
+		stage.on("pointerclick", (e) => {
 			if (!this.enabled) return;
 			if (this.instance.getActiveAction() !== "selectionTool") return;
+			if (this.dragging) return;
 			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
 			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
 				this.selecting = false;
@@ -16313,6 +16318,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				return node.getAttrs().id === nodeTargeted.getAttrs().id;
 			});
 			const isSelected = nodeSelectedIndex !== -1;
+			if (nodeTargeted.getAttrs().locked) return;
 			if (!metaPressed) {
 				this.tr.nodes([nodeTargeted]);
 				nodesSelected = this.tr.nodes().length;
@@ -16676,110 +16682,100 @@ var WeaveNode = class {
 		node.scaleY(1);
 	}
 	setupDefaultNodeEvents(node) {
-		this.previousPointer = null;
 		this.instance.addEventListener("onNodesChange", () => {
-			if (this.isSelecting() && this.isNodeSelected(node)) {
+			if (!this.isLocked(node) && this.isSelecting() && this.isNodeSelected(node)) {
 				node.draggable(true);
 				return;
 			}
 			node.draggable(false);
 		});
-		let transforming = false;
-		node.on("transformstart", () => {
-			transforming = true;
-		});
-		const handleTransform = (e) => {
-			const node$1 = e.target;
-			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
-			if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
-			if (nodesSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesSnappingPlugin.evaluateGuidelines(e);
-			if (this.isSelecting() && this.isNodeSelected(node$1)) {
-				this.scaleReset(node$1);
-				const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
-				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
-			}
-		};
-		node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
-		node.on("transformend", (e) => {
-			const node$1 = e.target;
-			transforming = false;
-			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
-			if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
-			if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
-			const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
-		});
-		node.on("dragstart", (e) => {
-			const stage = this.instance.getStage();
-			if (stage.isMouseWheelPressed()) {
-				e.cancelBubble = true;
-				node.stopDrag();
-				return;
-			}
-		});
-		const handleDragMove = (e) => {
-			const stage = this.instance.getStage();
-			if (stage.isMouseWheelPressed()) {
-				e.cancelBubble = true;
-				node.stopDrag();
-				return;
-			}
-			if (this.isSelecting() && this.isNodeSelected(node)) {
-				clearContainerTargets(this.instance);
-				const layerToMove = checkIfOverContainer(this.instance, e.target);
-				if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
-				const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
-				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
-			}
-		};
-		node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
-		node.on("dragend", (e) => {
-			if (this.isSelecting() && this.isNodeSelected(node)) {
-				clearContainerTargets(this.instance);
+		const isLocked = node.getAttrs().locked ?? false;
+		if (isLocked) {
+			node.off("transformstart");
+			node.off("transform");
+			node.off("transformend");
+			node.off("dragstart");
+			node.off("dragmove");
+			node.off("dragend");
+			node.off("pointerenter");
+			node.off("pointerleave");
+		} else {
+			let transforming = false;
+			node.on("transformstart", () => {
+				transforming = true;
+			});
+			const handleTransform = (e) => {
+				const node$1 = e.target;
+				const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+				const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
+				if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
+				if (nodesSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesSnappingPlugin.evaluateGuidelines(e);
+				if (this.isSelecting() && this.isNodeSelected(node$1)) {
+					this.scaleReset(node$1);
+					const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
+					if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
+				}
+			};
+			node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
+			node.on("transformend", (e) => {
+				const node$1 = e.target;
+				transforming = false;
+				const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 				const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
 				if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
-				const containerToMove = moveNodeToContainer(this.instance, e.target);
-				if (containerToMove) return;
-				this.instance.updateNode(this.serialize(node));
-			}
-		});
-		this.previousPointer = null;
-		node.on("mouseenter", (e) => {
-			const realNode = this.instance.getInstanceRecursive(node);
-			if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting()) {
-				const stage = this.instance.getStage();
-				this.previousPointer = stage.container().style.cursor;
-				stage.container().style.cursor = "pointer";
-				e.cancelBubble = true;
-				return;
-			}
-			if (this.isPasting()) {
-				const stage = this.instance.getStage();
-				this.previousPointer = stage.container().style.cursor;
-				stage.container().style.cursor = "crosshair";
-				e.cancelBubble = true;
-				return;
-			}
-		});
-		node.on("mouseleave", (e) => {
-			const realNode = this.instance.getInstanceRecursive(node);
-			if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting()) {
+				if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
+				const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
+				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
+			});
+			node.on("dragstart", (e) => {
 				const stage = this.instance.getStage();
-				stage.container().style.cursor = this.previousPointer ?? "default";
-				this.previousPointer = null;
-				e.cancelBubble = true;
-				return;
-			}
-			if (this.isPasting()) {
+				if (stage.isMouseWheelPressed()) {
+					e.cancelBubble = true;
+					e.target.stopDrag();
+				}
+			});
+			const handleDragMove = (e) => {
 				const stage = this.instance.getStage();
-				this.previousPointer = stage.container().style.cursor;
-				stage.container().style.cursor = "crosshair";
-				e.cancelBubble = true;
-				return;
-			}
-		});
+				if (stage.isMouseWheelPressed()) {
+					e.cancelBubble = true;
+					e.target.stopDrag();
+					return;
+				}
+				if (this.isSelecting() && this.isNodeSelected(node)) {
+					clearContainerTargets(this.instance);
+					const layerToMove = checkIfOverContainer(this.instance, e.target);
+					if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
+					const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+					if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
+				}
+			};
+			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
+			node.on("dragend", (e) => {
+				if (this.isSelecting() && this.isNodeSelected(node)) {
+					clearContainerTargets(this.instance);
+					const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
+					if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
+					const containerToMove = moveNodeToContainer(this.instance, e.target);
+					if (containerToMove) return;
+					this.instance.updateNode(this.serialize(node));
+				}
+			});
+			node.on("pointerenter", (e) => {
+				const realNode = this.instance.getInstanceRecursive(node);
+				const isLocked$1 = realNode.getAttrs().locked ?? false;
+				if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting()) {
+					const stage = this.instance.getStage();
+					stage.container().style.cursor = !isLocked$1 ? "pointer" : "default";
+					e.cancelBubble = true;
+					return;
+				}
+				if (this.isPasting()) {
+					const stage = this.instance.getStage();
+					stage.container().style.cursor = "crosshair";
+					e.cancelBubble = true;
+				}
+			});
+		}
 	}
 	create(key, props) {
 		return {
@@ -16811,6 +16807,32 @@ var WeaveNode = class {
 			}
 		};
 	}
+	lock(instance) {
+		if (instance.getAttrs().nodeType !== this.getNodeType()) return;
+		instance.setAttrs({ locked: true });
+		this.instance.updateNode(this.serialize(instance));
+		const selectionPlugin = this.getSelectionPlugin();
+		if (selectionPlugin) {
+			const selectedNodes = selectionPlugin.getSelectedNodes();
+			const newSelectedNodes = selectedNodes.filter((node) => node.getAttrs().id !== instance.getAttrs().id);
+			selectionPlugin.setSelectedNodes(newSelectedNodes);
+			selectionPlugin.getTransformer().forceUpdate();
+		}
+		this.setupDefaultNodeEvents(instance);
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+	}
+	unlock(instance) {
+		if (instance.getAttrs().nodeType !== this.getNodeType()) return;
+		instance.setAttrs({ locked: false });
+		this.instance.updateNode(this.serialize(instance));
+		this.setupDefaultNodeEvents(instance);
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+	}
+	isLocked(instance) {
+		return instance.getAttrs().locked ?? false;
+	}
 };
 
 //#endregion
@@ -18049,6 +18071,7 @@ var WeaveStateManager = class {
 				};
 				parent.props.children.push(finalNode);
 			}
+			this.instance.emitEvent("onNodeAdded", node);
 			if (doRender) this.instance.render();
 		}, userName);
 	}
@@ -18078,6 +18101,7 @@ var WeaveStateManager = class {
 				...node.props
 			}));
 			nodeState.props = { ...nodeNew };
+			this.instance.emitEvent("onNodeUpdated", node);
 			if (doRender) this.instance.render();
 		}, userName);
 	}
@@ -18107,6 +18131,7 @@ var WeaveStateManager = class {
 				const filteredChildren = newChildren.filter((actNode) => actNode.key !== node.key);
 				parentState.props.children = filteredChildren;
 			}
+			this.instance.emitEvent("onNodeRemoved", node);
 			if (doRender) this.instance.render();
 		}, userName);
 	}
@@ -18242,7 +18267,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.32.0";
+var version = "0.34.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18477,6 +18502,7 @@ var WeaveExportManager = class {
 					y: unscaledBounds.y - padding,
 					width: unscaledBounds.width + 2 * padding,
 					height: unscaledBounds.height + 2 * padding,
+					strokeWidth: 0,
 					fill: backgroundColor
 				});
 				exportGroup.add(background);
@@ -18492,10 +18518,10 @@ var WeaveExportManager = class {
 				mainLayer.add(exportGroup);
 				const backgroundRect = background.getClientRect();
 				exportGroup.toImage({
-					x: backgroundRect.x,
-					y: backgroundRect.y,
-					width: backgroundRect.width,
-					height: backgroundRect.height,
+					x: Math.round(backgroundRect.x),
+					y: Math.round(backgroundRect.y),
+					width: Math.round(backgroundRect.width),
+					height: Math.round(backgroundRect.height),
 					mimeType: format$2,
 					pixelRatio,
 					quality: options.quality ?? 1,
@@ -18812,6 +18838,9 @@ var Weave = class {
 	getElementsTree() {
 		return this.stateManager.getElementsTree();
 	}
+	isEmpty() {
+		return this.getElementsTree().length === 0;
+	}
 	moveUp(node) {
 		this.zIndexManager.moveUp(node);
 	}
@@ -18852,7 +18881,8 @@ var Weave = class {
 		if (selectionPlugin) {
 			const stage = this.getStage();
 			const instanceNodes = nodesIds.map((nodeId) => {
-				const nodeInstance = stage.findOne(`#${nodeId}`);
+				let nodeInstance = stage.findOne(`#${nodeId}`);
+				if (nodeInstance && nodeInstance.getAttrs().nodeType === "frame") nodeInstance = stage.findOne(`#${nodeId}-selector-area`);
 				return nodeInstance;
 			});
 			selectionPlugin.setSelectedNodes(instanceNodes);
@@ -18873,6 +18903,48 @@ var Weave = class {
 	async exportNodes(nodes, boundingNodes, options) {
 		return await this.exportManager.exportNodes(nodes, boundingNodes, options);
 	}
+	allNodesLocked(nodes) {
+		let allNodesLocked = true;
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			allNodesLocked = allNodesLocked && nodeHandler.isLocked(node);
+		}
+		return allNodesLocked;
+	}
+	allNodesUnlocked(nodes) {
+		let allNodesUnlocked = true;
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			allNodesUnlocked = allNodesUnlocked && !nodeHandler.isLocked(node);
+		}
+		return allNodesUnlocked;
+	}
+	lockNode(node) {
+		const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+		if (!nodeHandler) return;
+		nodeHandler.lock(node);
+	}
+	lockNodes(nodes) {
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			nodeHandler.lock(node);
+		}
+	}
+	unlockNode(node) {
+		const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+		if (!nodeHandler) return;
+		nodeHandler.unlock(node);
+	}
+	unlockNodes(nodes) {
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			nodeHandler.unlock(node);
+		}
+	}
 };
 
 //#endregion
@@ -18898,10 +18970,16 @@ var WeaveStageNode = class extends WeaveNode {
 		stage.container().addEventListener("blur", () => {
 			this.stageFocused = false;
 		});
-		stage.on("mousedown", (e) => {
+		stage.on("pointermove", (e) => {
+			if (e.target === stage) {
+				const stage$1 = this.instance.getStage();
+				stage$1.container().style.cursor = "default";
+			}
+		});
+		stage.on("pointerdown", (e) => {
 			if (e.evt.button === 1) this.wheelMousePressed = true;
 		});
-		stage.on("mouseup", (e) => {
+		stage.on("pointerup", (e) => {
 			if (e.evt.button === 1) this.wheelMousePressed = false;
 		});
 		stage.batchDraw();
@@ -19237,7 +19315,7 @@ var WeaveTextNode = class extends WeaveNode {
 				}
 			}
 		});
-		text.on("dblclick dbltap", (e) => {
+		text.on("pointerdblclick", (e) => {
 			e.cancelBubble = true;
 			if (this.editing) return;
 			if (!(this.isSelecting() && this.isNodeSelected(text))) return;
@@ -19485,7 +19563,7 @@ var WeaveTextNode = class extends WeaveNode {
 				this.removeTextAreaDOM(textNode);
 				this.instance.removeEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
 				this.instance.removeEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
-				window.removeEventListener("click", handleOutsideClick);
+				window.removeEventListener("pointerclick", handleOutsideClick);
 				return;
 			}
 		};
@@ -19514,14 +19592,14 @@ var WeaveTextNode = class extends WeaveNode {
 				this.removeTextAreaDOM(textNode);
 				this.textArea.removeEventListener("keydown", handleKeyDown);
 				this.textArea.removeEventListener("keyup", handleKeyUp);
-				window.removeEventListener("click", handleOutsideClick);
-				window.removeEventListener("touchstart", handleOutsideClick);
+				window.removeEventListener("pointerclick", handleOutsideClick);
+				window.removeEventListener("pointerdown", handleOutsideClick);
 				return;
 			}
 		};
 		setTimeout(() => {
-			window.addEventListener("click", handleOutsideClick);
-			window.addEventListener("touchstart", handleOutsideClick);
+			window.addEventListener("pointerclick", handleOutsideClick);
+			window.addEventListener("pointerdown", handleOutsideClick);
 		}, 0);
 		this.editing = true;
 	}
@@ -19673,8 +19751,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("click tap", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerclick", () => {
 			if (this.state === IMAGE_TOOL_STATE.IDLE) return;
 			if (this.state === IMAGE_TOOL_STATE.UPLOADING) return;
 			if (this.state === IMAGE_TOOL_STATE.ADDING) {
@@ -19682,8 +19759,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("mousemove touchmove", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointermove", () => {
 			const tempImage = this.instance.getStage().findOne(`#${this.tempImageId}`);
 			if (this.state === IMAGE_TOOL_STATE.ADDING && tempImage) {
 				const mousePos = stage.getRelativePointerPosition();
@@ -20294,7 +20370,7 @@ var WeaveImageNode = class extends WeaveNode {
 		});
 		image.add(cropGroup);
 		this.setupDefaultNodeEvents(image);
-		image.on("dblclick dbltap", (evt) => {
+		image.on("pointerdblclick", (evt) => {
 			evt.cancelBubble = true;
 			if (image.getAttrs().cropping ?? false) return;
 			if (!internalImage.getAttr("image")) return;
@@ -22752,7 +22828,6 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			...config
 		};
 		if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
-		this.isSpaceKeyPressed = false;
 		this.isCtrlOrMetaPressed = false;
 		this.updatedMinimumZoom = false;
 		this.actualStep = this.config.zoomSteps.findIndex((step) => step === this.config.defaultZoom);
@@ -22992,11 +23067,9 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	initEvents() {
 		window.addEventListener("keydown", (e) => {
 			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
-			if (e.code === "Space") this.isSpaceKeyPressed = true;
 		});
 		window.addEventListener("keyup", (e) => {
 			if (!(e.ctrlKey || e.metaKey)) this.isCtrlOrMetaPressed = false;
-			if (e.code === "Space") this.isSpaceKeyPressed = false;
 		});
 		const stage = this.instance.getStage();
 		const stageContainer = this.instance.getStage().container();
@@ -23022,17 +23095,20 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			const newScale = initialScale * ev.scale;
 			this.setZoom(newScale, false, center);
 		});
-		window.addEventListener("wheel", (e) => {
+		const handleWheel = (e) => {
+			e.evt.preventDefault();
 			const stage$1 = this.instance.getStage();
-			if (!this.enabled || !stage$1.isFocused() || !this.isCtrlOrMetaPressed || this.isSpaceKeyPressed) return;
+			const performZoom = this.isCtrlOrMetaPressed || !this.isCtrlOrMetaPressed && e.evt.ctrlKey && e.evt.deltaMode === 0;
+			if (!this.enabled || !stage$1.isFocused() || !performZoom) return;
 			const oldScale = stage$1.scaleX();
 			const pointer = stage$1.getPointerPosition();
 			if (!pointer) return;
 			const scaleBy = 1.025;
-			const direction = e.deltaY > 0 ? 1 : -1;
+			const direction = e.evt.deltaY > 0 ? 1 : -1;
 			const newScale = direction > 0 ? oldScale / scaleBy : oldScale * scaleBy;
 			this.setZoom(newScale, false, pointer);
-		});
+		};
+		stage.on("wheel", handleWheel);
 	}
 };
 
@@ -23315,8 +23391,7 @@ var WeaveEraserToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		stage.on("click tap", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerclick", () => {
 			if (!this.erasing) return;
 			const nodeIntersected = this.instance.pointIntersectsElement();
 			if (nodeIntersected) {
@@ -23324,7 +23399,8 @@ var WeaveEraserToolAction = class extends WeaveAction {
 				if (!realNode) return;
 				const nodeType = realNode.getAttrs().nodeType;
 				const nodeHandler = this.instance.getNodeHandler(nodeType);
-				if (nodeHandler) {
+				const isLocked = this.instance.allNodesLocked([realNode]);
+				if (nodeHandler && !isLocked) {
 					const nodeSerialized = nodeHandler.serialize(realNode);
 					this.instance.removeNode(nodeSerialized);
 				}
@@ -23424,22 +23500,19 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("mousedown touchstart", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerdown", () => {
 			if (this.state === RECTANGLE_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("mousemove touchmove", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointermove", () => {
 			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("mouseup touchend", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerup", () => {
 			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -23602,22 +23675,19 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("mousedown touchstart", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerdown", () => {
 			if (this.state === ELLIPSE_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("mousemove touchmove", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointermove", () => {
 			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("mouseup touchend", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerup", () => {
 			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -23789,12 +23859,7 @@ var WeavePenToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("dblclick dbltap", (e) => {
-			e.evt.preventDefault();
-			this.cancelAction();
-		});
-		stage.on("click tap", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerclick", () => {
 			if (this.state === PEN_TOOL_STATE.IDLE) return;
 			if (this.state === PEN_TOOL_STATE.ADDING) {
 				this.handleAdding();
@@ -23805,8 +23870,7 @@ var WeavePenToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("mousemove touchmove", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointermove", () => {
 			this.handleMovement();
 		});
 		this.initialized = true;
@@ -24029,22 +24093,19 @@ var WeaveBrushToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("mousedown touchstart", (e) => {
+		stage.on("pointerdown", (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.IDLE) return;
 			this.handleStartStroke();
-			e.evt.preventDefault();
 			e.evt.stopPropagation();
 		});
-		stage.on("mousemove touchmove", (e) => {
+		stage.on("pointermove", (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
 			this.handleMovement();
-			e.evt.preventDefault();
 			e.evt.stopPropagation();
 		});
-		stage.on("mouseup touchend", (e) => {
+		stage.on("pointerup", (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
 			this.handleEndStroke();
-			e.evt.preventDefault();
 			e.evt.stopPropagation();
 		});
 		this.initialized = true;
@@ -24171,17 +24232,13 @@ var WeaveTextToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("click tap", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerclick", () => {
 			if (this.state === TEXT_TOOL_STATE.IDLE) return;
 			if (this.state === TEXT_TOOL_STATE.ADDING) {
 				this.handleAdding();
 				return;
 			}
 		});
-		stage.on("mousemove touchmove", (e) => {
-			e.evt.preventDefault();
-		});
 		this.initialized = true;
 	}
 	setState(state) {
@@ -24298,22 +24355,19 @@ var WeaveStarToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("mousedown touchstart", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerdown", () => {
 			if (this.state === STAR_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("mousemove touchmove", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointermove", () => {
 			if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("mouseup touchend", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerup", () => {
 			if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -24491,12 +24545,10 @@ var WeaveArrowToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("dblclick dbltap", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerdblclick", () => {
 			this.cancelAction();
 		});
-		stage.on("click tap", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerclick", () => {
 			if (this.state === ARROW_TOOL_STATE.IDLE) return;
 			if (this.state === ARROW_TOOL_STATE.ADDING) {
 				this.handleAdding();
@@ -24507,8 +24559,7 @@ var WeaveArrowToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("mousemove touchmove", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointermove", () => {
 			this.handleMovement();
 		});
 		this.initialized = true;
@@ -24742,22 +24793,19 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("mousedown touchstart", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerdown", () => {
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("mousemove touchmove", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointermove", () => {
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("mouseup touchend", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerup", () => {
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -24912,8 +24960,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("click tap", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointerclick", () => {
 			if (this.state === FRAME_TOOL_STATE.IDLE) return;
 			if (this.state === FRAME_TOOL_STATE.ADDING) {
 				this.handleAdding();
@@ -25057,11 +25104,12 @@ var WeaveExportNodesToolAction = class extends WeaveAction {
 		link.click();
 		this.cancelAction?.();
 	}
-	async trigger(cancelAction, { nodes, boundingNodes, options, download = true }) {
+	async trigger(cancelAction, { nodes, boundingNodes, options, triggerSelectionTool = true, download = true }) {
 		if (!this.instance) throw new Error("Instance not defined");
 		const stage = this.instance.getStage();
 		stage.container().tabIndex = 1;
 		stage.container().focus();
+		this.triggerSelectionTool = triggerSelectionTool;
 		this.cancelAction = cancelAction;
 		this.options = {
 			...this.defaultFormatOptions,
@@ -25080,7 +25128,253 @@ var WeaveExportNodesToolAction = class extends WeaveAction {
 		stage.container().tabIndex = 0;
 		stage.container().click();
 		stage.container().focus();
-		this.instance.triggerAction("selectionTool");
+		if (this.triggerSelectionTool) this.instance.triggerAction("selectionTool");
+	}
+};
+
+//#endregion
+//#region src/actions/align-nodes-tool/constants.ts
+const ALIGN_NODES_TOOL_ACTION_NAME = "alignNodesTool";
+const ALIGN_NODES_ALIGN_TO = {
+	["LEFT_HORIZONTAL"]: "left-horizontal",
+	["CENTER_HORIZONTAL"]: "center-horizontal",
+	["RIGHT_HORIZONTAL"]: "right-horizontal",
+	["TOP_VERTICAL"]: "top-vertical",
+	["CENTER_VERTICAL"]: "center-vertical",
+	["BOTTOM_VERTICAL"]: "bottom-vertical"
+};
+const ALIGN_NODES_TOOL_STATE = { ["IDLE"]: "idle" };
+
+//#endregion
+//#region src/actions/align-nodes-tool/align-nodes-tool.ts
+var WeaveAlignNodesToolAction = class extends WeaveAction {
+	initialized = false;
+	onPropsChange = void 0;
+	onInit = void 0;
+	constructor() {
+		super();
+		this.initialized = false;
+		this.state = ALIGN_NODES_TOOL_STATE.IDLE;
+	}
+	getName() {
+		return ALIGN_NODES_TOOL_ACTION_NAME;
+	}
+	setupEvents() {
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	updateNode(node) {
+		const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+		if (nodeHandler) {
+			const actualNode = nodeHandler.serialize(node);
+			this.instance.updateNode(actualNode);
+		}
+	}
+	getParents(nodes) {
+		if (nodes.length === 0) return [];
+		const counts = {};
+		for (const node of nodes) {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			if (!realNode) continue;
+			const parentId = realNode.getParent()?.getAttrs().id ?? "";
+			const entry = counts[parentId];
+			if (entry) entry.count++;
+			else counts[parentId] = {
+				count: 1,
+				id: realNode.getParent()?.getAttrs().id ?? "",
+				value: realNode.getParent()
+			};
+		}
+		return Object.keys(counts).map((key) => counts[key].id);
+	}
+	alignToLeftHorizontal(nodes) {
+		let targetX = Infinity;
+		for (const node of nodes) {
+			const box = node.getClientRect({ relativeTo: this.instance.getStage() });
+			const realX = box.x;
+			if (realX < targetX) targetX = realX;
+		}
+		for (const node of nodes) {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			if (!realNode) continue;
+			const box = node.getClientRect({ relativeTo: this.instance.getStage() });
+			const deltaX = targetX - box.x;
+			realNode.x(realNode.x() + deltaX);
+			this.updateNode(realNode);
+		}
+	}
+	alignToCenterHorizontal(nodes) {
+		let minX = Infinity;
+		let maxX = -Infinity;
+		for (const node of nodes) {
+			const box = node.getClientRect({ relativeTo: this.instance.getStage() });
+			const realX = box.x;
+			const realXWidth = box.x + box.width;
+			if (realX < minX) minX = realX;
+			if (realXWidth > maxX) maxX = realXWidth;
+		}
+		const targetX = minX + (maxX - minX) / 2;
+		for (const node of nodes) {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			if (!realNode) continue;
+			const box = node.getClientRect({ relativeTo: this.instance.getStage() });
+			const deltaX = targetX - (box.x + box.width / 2);
+			realNode.x(realNode.x() + deltaX);
+			this.updateNode(realNode);
+		}
+	}
+	alignToRightHorizontal(nodes) {
+		let targetX = -Infinity;
+		for (const node of nodes) {
+			const box = node.getClientRect({ relativeTo: this.instance.getStage() });
+			const realX = box.x + box.width;
+			if (realX > targetX) targetX = realX;
+		}
+		for (const node of nodes) {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			if (!realNode) continue;
+			const box = node.getClientRect({ relativeTo: this.instance.getStage() });
+			const deltaX = targetX - (box.x + box.width);
+			realNode.x(realNode.x() + deltaX);
+			this.updateNode(realNode);
+		}
+	}
+	alignToTopVertical(nodes) {
+		let targetY = Infinity;
+		for (const node of nodes) {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			if (!realNode) continue;
+			const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
+			const realY = box.y;
+			if (realY < targetY) targetY = realY;
+		}
+		for (const node of nodes) {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			if (!realNode) continue;
+			const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
+			const deltaY = targetY - box.y;
+			realNode.y(realNode.y() + deltaY);
+			this.updateNode(realNode);
+		}
+	}
+	alignToCenterVertical(nodes) {
+		let minY = Infinity;
+		let maxY = -Infinity;
+		for (const node of nodes) {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			if (!realNode) continue;
+			const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
+			const realY = box.y;
+			const realYWidth = box.y + box.height;
+			if (realY < minY) minY = realY;
+			if (realYWidth > maxY) maxY = realYWidth;
+		}
+		const targetY = minY + (maxY - minY) / 2;
+		for (const node of nodes) {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			if (!realNode) continue;
+			const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
+			const deltaY = targetY - (box.y + box.height / 2);
+			realNode.y(realNode.y() + deltaY);
+			this.updateNode(realNode);
+		}
+	}
+	alignToBottomVertical(nodes) {
+		let targetY = -Infinity;
+		for (const node of nodes) {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			if (!realNode) continue;
+			const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
+			const realY = box.y + box.height;
+			if (realY > targetY) targetY = realY;
+		}
+		for (const node of nodes) {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			if (!realNode) continue;
+			const box = realNode.getClientRect({ relativeTo: this.instance.getStage() });
+			const deltaY = targetY - (box.y + box.height);
+			realNode.y(realNode.y() + deltaY);
+			this.updateNode(realNode);
+		}
+	}
+	alignNodes(alignTo) {
+		let selectedNodes = [];
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectedNodes = selectionPlugin.getSelectedNodes();
+		const parentsIds = this.getParents(selectedNodes);
+		let parent = this.instance.getMainLayer();
+		if (parentsIds.length === 1) parent = this.instance.getStage().findOne(`#${parentsIds[0]}`);
+		if (parentsIds.length > 1 && !parentsIds.includes("mainLayer")) {
+			this.cancelAction();
+			return;
+		}
+		selectedNodes = [...selectedNodes.filter((node) => {
+			let realNode = node;
+			if (node.getAttrs().nodeId) realNode = this.instance.getStage().findOne(`#${node.getAttrs().nodeId}`);
+			return realNode?.getParent()?.getAttrs().id === parent?.getAttrs().id;
+		})];
+		switch (alignTo) {
+			case ALIGN_NODES_ALIGN_TO.LEFT_HORIZONTAL: {
+				this.alignToLeftHorizontal(selectedNodes);
+				break;
+			}
+			case ALIGN_NODES_ALIGN_TO.CENTER_HORIZONTAL: {
+				this.alignToCenterHorizontal(selectedNodes);
+				break;
+			}
+			case ALIGN_NODES_ALIGN_TO.RIGHT_HORIZONTAL: {
+				this.alignToRightHorizontal(selectedNodes);
+				break;
+			}
+			case ALIGN_NODES_ALIGN_TO.TOP_VERTICAL: {
+				this.alignToTopVertical(selectedNodes);
+				break;
+			}
+			case ALIGN_NODES_ALIGN_TO.CENTER_VERTICAL: {
+				this.alignToCenterVertical(selectedNodes);
+				break;
+			}
+			case ALIGN_NODES_ALIGN_TO.BOTTOM_VERTICAL: {
+				this.alignToBottomVertical(selectedNodes);
+				break;
+			}
+			default: break;
+		}
+		this.cancelAction();
+	}
+	canAlignSelectedNodes() {
+		let selectedNodes = [];
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectedNodes = selectionPlugin.getSelectedNodes();
+		const parentsIds = this.getParents(selectedNodes);
+		if (parentsIds.length > 1) return false;
+		return true;
+	}
+	trigger(cancelAction, { alignTo, triggerSelectionTool = true }) {
+		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.triggerSelectionTool = triggerSelectionTool;
+		this.cancelAction = cancelAction;
+		this.alignNodes(alignTo);
+	}
+	cleanup() {
+		if (this.triggerSelectionTool) this.instance.triggerAction("selectionTool");
+		this.setState(ALIGN_NODES_TOOL_STATE.IDLE);
 	}
 };
 
@@ -25093,8 +25387,8 @@ const WEAVE_GRID_TYPES = {
 };
 const WEAVE_GRID_DEFAULT_SIZE = 50;
 const WEAVE_GRID_DEFAULT_TYPE = WEAVE_GRID_TYPES.LINES;
-const WEAVE_GRID_DEFAULT_COLOR = "rgba(0,0,0,0.2)";
-const WEAVE_GRID_DEFAULT_ORIGIN_COLOR = "rgba(255,0,0,0.2)";
+const WEAVE_GRID_DEFAULT_COLOR = "rgba(0,0,0,0.1)";
+const WEAVE_GRID_DEFAULT_ORIGIN_COLOR = "rgba(255,0,0,0.1)";
 const WEAVE_GRID_DEFAULT_STROKE = .5;
 const WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO = 4;
 const WEAVE_GRID_DEFAULT_RADIUS = 1;
@@ -25145,36 +25439,22 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		window.addEventListener("keyup", (e) => {
 			if (e.code === "Space") this.isSpaceKeyPressed = false;
 		});
-		stage.on("mousedown", (e) => {
+		stage.on("pointerdown", (e) => {
 			const activeAction = this.instance.getActiveAction();
-			if (e && e.evt.button === 0 && activeAction === "moveTool") {
-				this.moveToolActive = true;
-				e.cancelBubble = true;
-			}
-			if (e && (e.evt.button === 2 || e.evt.buttons === 4)) {
-				this.isMouseMiddleButtonPressed = true;
-				e.cancelBubble = true;
-			}
+			if (e && e.evt.button === 0 && activeAction === "moveTool") this.moveToolActive = true;
+			if (e && (e.evt.button === 2 || e.evt.buttons === 4)) this.isMouseMiddleButtonPressed = true;
 		});
-		stage.on("mouseup", (e) => {
+		stage.on("pointerup", (e) => {
 			const activeAction = this.instance.getActiveAction();
-			if (e && e.evt.button === 0 && activeAction === "moveTool") {
-				this.moveToolActive = false;
-				e.cancelBubble = true;
-			}
-			if (e && (e.evt.button === 1 || e.evt.buttons === 0)) {
-				this.isMouseMiddleButtonPressed = false;
-				e.cancelBubble = true;
-			}
+			if (e && e.evt.button === 0 && activeAction === "moveTool") this.moveToolActive = false;
+			if (e && (e.evt.button === 1 || e.evt.buttons === 0)) this.isMouseMiddleButtonPressed = false;
 		});
-		const handleMouseMove = (e) => {
-			e.evt.preventDefault();
+		const handleMouseMove = () => {
 			if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
 			this.onRender();
 		};
-		stage.on("mousemove", (0, import_lodash.throttle)(handleMouseMove, 50));
-		stage.on("touchmove", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
+		stage.on("pointermove", () => {
 			if (!this.enabled) return;
 			this.onRender();
 		});
@@ -25429,40 +25709,33 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.disableMove();
 			}
 		});
-		stage.on("mousedown", (e) => {
+		stage.on("pointerdown", (e) => {
 			const activeAction = this.instance.getActiveAction();
 			let enableMove = false;
-			if (e && e.evt.button === 0 && activeAction === "moveTool") {
+			if (e && (e.evt.pointerType !== "mouse" || e.evt.pointerType === "mouse" && e.evt.buttons === 1) && activeAction === "moveTool") {
 				this.moveToolActive = true;
 				enableMove = true;
 			}
-			if (!enableMove && e && e.evt.button === 1) {
+			if (!enableMove && e.evt.pointerType === "mouse" && e.evt.buttons === 4) {
 				this.isMouseMiddleButtonPressed = true;
 				enableMove = true;
 			}
-			if (enableMove) {
-				this.enableMove();
-				e.cancelBubble = true;
-			}
+			if (enableMove) this.enableMove();
 		});
-		stage.on("mouseup", (e) => {
+		stage.on("pointerup", (e) => {
 			const activeAction = this.instance.getActiveAction();
 			let disableMove = false;
-			if (e && e.evt.button === 0 && activeAction === "moveTool") {
+			if (e && (e.evt.pointerType !== "mouse" || e.evt.pointerType === "mouse" && e.evt.buttons === 0) && activeAction === "moveTool") {
 				this.moveToolActive = false;
 				disableMove = true;
 			}
-			if (e && (e.evt.button === 1 || e.evt.buttons === 0)) {
+			if (e && e.evt.pointerType === "mouse" && e.evt.buttons === 0) {
 				this.isMouseMiddleButtonPressed = false;
 				disableMove = true;
 			}
-			if (disableMove) {
-				this.disableMove();
-				e.cancelBubble = true;
-			}
+			if (disableMove) this.disableMove();
 		});
-		const handleMouseMove = (e) => {
-			e.evt.preventDefault();
+		const handleMouseMove = () => {
 			const mousePos = stage.getPointerPosition();
 			if (previousMouseX === Infinity) previousMouseX = mousePos?.x ?? 0;
 			if (previousMouseY === Infinity) previousMouseY = mousePos?.y ?? 0;
@@ -25475,38 +25748,22 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			stage.y(stage.y() - deltaY);
 			this.instance.emitEvent("onStageMove");
 		};
-		stage.on("mousemove", (0, import_lodash.throttle)(handleMouseMove, 50));
-		stage.on("touchstart", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
+		stage.on("pointerdown", () => {
 			const mousePos = stage.getPointerPosition();
 			previousMouseX = mousePos?.x ?? 0;
 			previousMouseY = mousePos?.y ?? 0;
 		});
-		stage.on("touchmove", (e) => {
-			e.evt.preventDefault();
-			const activeAction = this.instance.getActiveAction();
-			if (activeAction !== "moveTool") return;
-			const mousePos = stage.getPointerPosition();
-			if (previousMouseX === Infinity) previousMouseX = mousePos?.x ?? 0;
-			if (previousMouseY === Infinity) previousMouseY = mousePos?.y ?? 0;
-			const deltaX = previousMouseX - (mousePos?.x ?? 0);
-			const deltaY = previousMouseY - (mousePos?.y ?? 0);
-			previousMouseX = mousePos?.x ?? 0;
-			previousMouseY = mousePos?.y ?? 0;
-			if (!this.enabled) return;
-			stage.x(stage.x() - deltaX);
-			stage.y(stage.y() - deltaY);
-			this.instance.emitEvent("onStageMove");
-		});
 		const handleWheel = (e) => {
 			e.evt.preventDefault();
 			const stage$1 = this.instance.getStage();
-			if (!this.enabled || !stage$1.isFocused() || this.isCtrlOrMetaPressed) return;
+			const performPanning = !this.isCtrlOrMetaPressed && !e.evt.ctrlKey;
+			if (!this.enabled || !stage$1.isFocused() || this.isCtrlOrMetaPressed || e.evt.buttons === 4 || !performPanning) return;
 			stage$1.x(stage$1.x() - e.evt.deltaX);
 			stage$1.y(stage$1.y() - e.evt.deltaY);
 			this.instance.emitEvent("onStageMove");
 		};
-		stage.on("wheel", (0, import_lodash.throttle)(handleWheel, 10));
+		stage.on("wheel", handleWheel);
 	}
 	enable() {
 		this.enabled = true;
@@ -25842,8 +26099,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 			for (let i = 0; i < inactiveUsers.length; i++) delete this.usersPointers[inactiveUsers[i]];
 			this.renderPointers();
 		});
-		stage.on("dragmove", (e) => {
-			e.evt.preventDefault();
+		stage.on("dragmove", () => {
 			const userInfo = this.config.getUser();
 			const mousePos = stage.getRelativePointerPosition();
 			if (mousePos) store.setAwarenessInfo(WEAVE_USER_POINTER_KEY, {
@@ -25852,8 +26108,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 				y: mousePos.y
 			});
 		});
-		stage.on("pointermove", (e) => {
-			e.evt.preventDefault();
+		stage.on("pointermove", () => {
 			const userInfo = this.config.getUser();
 			const mousePos = stage.getRelativePointerPosition();
 			if (mousePos) store.setAwarenessInfo(WEAVE_USER_POINTER_KEY, {
@@ -25967,11 +26222,9 @@ var WeaveStageDropAreaPlugin = class extends WeavePlugin {
 	initEvents() {
 		const stage = this.instance.getStage();
 		stage.container().addEventListener("dragover", (e) => {
-			e.preventDefault();
 			e.stopPropagation();
 		});
 		stage.container().addEventListener("drop", (e) => {
-			e.preventDefault();
 			e.stopPropagation();
 			this.instance.emitEvent("onStageDrop", e);
 		});
@@ -26349,6 +26602,9 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 };
 
 //#endregion
+exports.ALIGN_NODES_ALIGN_TO = ALIGN_NODES_ALIGN_TO
+exports.ALIGN_NODES_TOOL_ACTION_NAME = ALIGN_NODES_TOOL_ACTION_NAME
+exports.ALIGN_NODES_TOOL_STATE = ALIGN_NODES_TOOL_STATE
 exports.ARROW_TOOL_ACTION_NAME = ARROW_TOOL_ACTION_NAME
 exports.ARROW_TOOL_STATE = ARROW_TOOL_STATE
 exports.BRUSH_TOOL_ACTION_NAME = BRUSH_TOOL_ACTION_NAME
@@ -26422,6 +26678,7 @@ exports.WEAVE_USER_POINTER_KEY = WEAVE_USER_POINTER_KEY
 exports.WEAVE_USER_SELECTION_KEY = WEAVE_USER_SELECTION_KEY
 exports.Weave = Weave
 exports.WeaveAction = WeaveAction
+exports.WeaveAlignNodesToolAction = WeaveAlignNodesToolAction
 exports.WeaveArrowNode = WeaveArrowNode
 exports.WeaveArrowToolAction = WeaveArrowToolAction
 exports.WeaveBrushToolAction = WeaveBrushToolAction