@inditextech/weave-sdk 0.33.0 → 0.35.0

package/dist/sdk.cjs

@@ -15683,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);
@@ -15695,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) {
@@ -15723,19 +15729,34 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
+		this.instance.addEventListener("onDrag", (node) => {
+			if (node) this.dragging = true;
+			else this.dragging = false;
+		});
+		this.instance.addEventListener("onTransform", (node) => {
+			if (node) this.transforming = true;
+			else this.transforming = false;
+		});
 		stage.on("pointerdown", (e) => {
 			this.pointers[e.evt.pointerId] = e.evt;
+			if (e.evt.pointerType === "mouse") return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
 			this.touchTimer = setTimeout(() => {
 				this.tapHold = true;
+				if (this.touchTimer && (this.dragging || this.transforming)) {
+					clearTimeout(this.touchTimer);
+					return;
+				}
 				this.triggerContextMenu(e.target);
 			}, this.tapHoldTimeout);
 		});
-		stage.on("pointermove", () => {
+		stage.on("pointermove", (e) => {
+			if (e.evt.pointerType === "mouse") return;
 			if (this.touchTimer) clearTimeout(this.touchTimer);
 		});
 		stage.on("pointerup", (e) => {
 			delete this.pointers[e.evt.pointerId];
+			if (e.evt.pointerType === "mouse") return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) return;
 			if (this.touchTimer) {
 				clearTimeout(this.touchTimer);
@@ -15803,6 +15824,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();
@@ -16242,16 +16265,26 @@ 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.filter((shape) => {
+				return shape.getAttrs().nodeType === "frame";
+			});
+			const framesNodesIds = framesNodes.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";
+			}).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();
@@ -16302,6 +16335,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;
@@ -16665,106 +16699,104 @@ 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", (e) => {
+				transforming = true;
+				this.instance.emitEvent("onTransform", e.target);
+			});
+			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;
+				this.instance.emitEvent("onTransform", null);
+				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("pointerenter", () => {
-			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";
-				return;
-			}
-			if (this.isPasting()) {
-				const stage = this.instance.getStage();
-				this.previousPointer = stage.container().style.cursor;
-				stage.container().style.cursor = "crosshair";
-				return;
-			}
-		});
-		node.on("pointerleave", () => {
-			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;
-				return;
-			}
-			if (this.isPasting()) {
+				this.instance.emitEvent("onDrag", e.target);
+				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";
-				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) => {
+				this.instance.emitEvent("onDrag", null);
+				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 {
@@ -16796,6 +16828,61 @@ var WeaveNode = class {
 			}
 		};
 	}
+	show(instance) {
+		if (instance.getAttrs().nodeType !== this.getNodeType()) return;
+		instance.setAttrs({ visible: true });
+		this.instance.updateNode(this.serialize(instance));
+		this.setupDefaultNodeEvents(instance);
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+	}
+	hide(instance) {
+		if (instance.getAttrs().nodeType !== this.getNodeType()) return;
+		instance.setAttrs({ visible: false });
+		const selectionPlugin = this.getSelectionPlugin();
+		if (selectionPlugin) {
+			const ids = [instance.getAttrs().id];
+			if (instance.getAttrs().nodeType === "frame") ids.push(`${instance.getAttrs().id}-selector-area`);
+			const selectedNodes = selectionPlugin.getSelectedNodes();
+			const newSelectedNodes = selectedNodes.filter((node) => !ids.includes(node.getAttrs().id));
+			selectionPlugin.setSelectedNodes(newSelectedNodes);
+			selectionPlugin.getTransformer().forceUpdate();
+		}
+		this.instance.updateNode(this.serialize(instance));
+		this.setupDefaultNodeEvents(instance);
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+	}
+	isVisible(instance) {
+		if (typeof instance.getAttrs().visible === "undefined") return true;
+		return instance.getAttrs().visible ?? false;
+	}
+	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
@@ -18230,7 +18317,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.33.0";
+var version = "0.35.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18801,6 +18888,9 @@ var Weave = class {
 	getElementsTree() {
 		return this.stateManager.getElementsTree();
 	}
+	isEmpty() {
+		return this.getElementsTree().length === 0;
+	}
 	moveUp(node) {
 		this.zIndexManager.moveUp(node);
 	}
@@ -18841,7 +18931,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);
@@ -18862,6 +18953,90 @@ 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);
+		}
+	}
+	allNodesVisible(nodes) {
+		let allNodesVisible = true;
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			allNodesVisible = allNodesVisible && nodeHandler.isVisible(node);
+		}
+		return allNodesVisible;
+	}
+	allNodesHidden(nodes) {
+		let allNodesHidden = true;
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			allNodesHidden = allNodesHidden && !nodeHandler.isVisible(node);
+		}
+		return allNodesHidden;
+	}
+	hideNode(node) {
+		const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+		if (!nodeHandler) return;
+		nodeHandler.hide(node);
+	}
+	hideNodes(nodes) {
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			nodeHandler.hide(node);
+		}
+	}
+	showNode(node) {
+		const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+		if (!nodeHandler) return;
+		nodeHandler.show(node);
+	}
+	showNodes(nodes) {
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			nodeHandler.show(node);
+		}
+	}
 };
 
 //#endregion
@@ -18887,6 +19062,28 @@ var WeaveStageNode = class extends WeaveNode {
 		stage.container().addEventListener("blur", () => {
 			this.stageFocused = false;
 		});
+		konva.default.Stage.prototype.allowActions = function(actions) {
+			if (typeof actions !== "undefined") this._allowActions = actions;
+			return this._allowActions;
+		};
+		konva.default.Stage.prototype.allowSelectNodes = function(nodeTypes) {
+			if (typeof nodeTypes !== "undefined") this._allowSelectNodeTypes = nodeTypes;
+			return this._allowSelectNodeTypes;
+		};
+		konva.default.Stage.prototype.allowSelection = function(allowSelection) {
+			if (typeof allowSelection !== "undefined") this._allowSelection = allowSelection;
+			return this._allowSelection;
+		};
+		stage.on("pointermove", (e) => {
+			if (stage.allowSelection() && !stage.allowActions().includes(this.instance.getActiveAction() ?? "") && !stage.allowSelectNodes().includes(e.target.getAttrs()?.nodeType ?? "")) {
+				const stage$1 = this.instance.getStage();
+				stage$1.container().style.cursor = "default";
+			}
+			if (e.target === stage && this.instance.getActiveAction() === "selectionTool") {
+				const stage$1 = this.instance.getStage();
+				stage$1.container().style.cursor = "default";
+			}
+		});
 		stage.on("pointerdown", (e) => {
 			if (e.evt.button === 1) this.wheelMousePressed = true;
 		});
@@ -19216,7 +19413,13 @@ var WeaveTextNode = class extends WeaveNode {
 			const node = e.target;
 			if (this.isSelecting() && this.isNodeSelected(node)) e.cancelBubble = true;
 		};
+		text.on("transformstart", (e) => {
+			this.instance.emitEvent("onTransform", e.target);
+		});
 		text.on("transform", (0, import_lodash.throttle)(handleTextTransform, 50));
+		text.on("transformend", () => {
+			this.instance.emitEvent("onTransform", null);
+		});
 		window.addEventListener("keypress", (e) => {
 			if (e.key === "Enter" && this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME && !this.editing && e.target !== this.textArea) {
 				e.preventDefault();
@@ -19955,19 +20158,26 @@ var WeaveImageCrop = class WeaveImageCrop {
 			skipStroke: true
 		});
 		this.drawGridLines(0, 0, cropRect.width, cropRect.height);
-		this.cropRect.on("dragmove", () => {
+		const handleGridLines = () => {
 			const cropRect$1 = this.cropRect.getClientRect({
 				relativeTo: this.cropGroup,
 				skipStroke: true
 			});
 			this.drawGridLines(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
+		};
+		this.cropRect.on("dragstart", (e) => {
+			this.instance.emitEvent("onDrag", e.target);
 		});
-		this.cropRect.on("transform", () => {
-			const cropRect$1 = this.cropRect.getClientRect({
-				relativeTo: this.cropGroup,
-				skipStroke: true
-			});
-			this.drawGridLines(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
+		this.cropRect.on("dragmove", handleGridLines);
+		this.cropRect.on("dragend", () => {
+			this.instance.emitEvent("onDrag", null);
+		});
+		this.cropRect.on("transformstart", (e) => {
+			this.instance.emitEvent("onTransform", e.target);
+		});
+		this.cropRect.on("transform", handleGridLines);
+		this.cropRect.on("transformend", () => {
+			this.instance.emitEvent("onTransform", null);
 		});
 		this.transformer.nodes([this.cropRect]);
 		this.cropGroup.add(this.cropImage);
@@ -20881,8 +21091,12 @@ var WeaveFrameNode = class extends WeaveNode {
 			clonedSA.scaleY(1);
 			e.cancelBubble = true;
 		};
+		selectorArea.on("transformend", (e) => {
+			this.instance.emitEvent("onTransform", e.target);
+		});
 		selectorArea.on("transform", (0, import_lodash.throttle)(handleSelectorAreaTransform, 50));
 		selectorArea.on("transformend", (e) => {
+			this.instance.emitEvent("onTransform", null);
 			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
 			if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
 			const scaleX = selectorArea.scaleX();
@@ -22894,7 +23108,9 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			x: 0,
 			y: 0
 		});
-		const bounds = getBoundingBox(stage, mainLayer.getChildren());
+		let realNodes = mainLayer.getChildren();
+		realNodes = realNodes.filter((node) => typeof node.getAttrs().visible === "undefined" || node.getAttrs().visible);
+		const bounds = getBoundingBox(stage, realNodes);
 		const stageWidth = stage.width();
 		const stageHeight = stage.height();
 		const scaleX = (stageWidth - this.config.fitToScreen.padding * 2) / bounds.width;
@@ -23204,12 +23420,14 @@ var WeaveMoveToolAction = class extends WeaveAction {
 		stage.container().focus();
 		this.setState(MOVE_TOOL_STATE.MOVING);
 	}
-	trigger(cancelAction) {
+	trigger(cancelAction, params) {
 		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();
+		const { triggerSelectionTool = true } = params ?? {};
+		this.triggerSelectionTool = triggerSelectionTool;
 		this.cancelAction = cancelAction;
 		this.setMoving();
 	}
@@ -23217,7 +23435,7 @@ var WeaveMoveToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "default";
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (selectionPlugin) this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		if (selectionPlugin && this.triggerSelectionTool) this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		this.setState(MOVE_TOOL_STATE.IDLE);
 	}
 };
@@ -23310,7 +23528,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);
 				}
@@ -23769,9 +23988,6 @@ var WeavePenToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdblclick", () => {
-			this.cancelAction();
-		});
 		stage.on("pointerclick", () => {
 			if (this.state === PEN_TOOL_STATE.IDLE) return;
 			if (this.state === PEN_TOOL_STATE.ADDING) {
@@ -25045,6 +25261,252 @@ var WeaveExportNodesToolAction = class extends WeaveAction {
 	}
 };
 
+//#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);
+	}
+};
+
 //#endregion
 //#region src/plugins/stage-grid/constants.ts
 const WEAVE_STAGE_GRID_KEY = "stageGrid";
@@ -25054,8 +25516,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;
@@ -26269,6 +26731,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
@@ -26342,6 +26807,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