@inditextech/weave-sdk 0.50.0 → 0.52.0

package/dist/sdk.cjs

@@ -15645,7 +15645,7 @@ const WEAVE_NODES_SELECTION_LAYER_ID = "selectionLayer";
 
 //#endregion
 //#region src/plugins/context-menu/constants.ts
-const WEAVE_CONTEXT_MENU_KEY = "contextMenu";
+const WEAVE_CONTEXT_MENU_PLUGIN_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;
@@ -15665,10 +15665,10 @@ function clearContainerTargets(instance) {
 	const containers = instance.getContainerNodes();
 	for (const container of containers) container.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
 }
-function containerOverCursor(instance, ignoreNodes) {
+function containerOverCursor(instance, ignoreNodes, definedCursorPosition) {
 	konva.default.hitOnDragEnabled = true;
 	const stage = instance.getStage();
-	const cursorPosition = stage.getRelativePointerPosition();
+	const cursorPosition = definedCursorPosition ?? stage.getRelativePointerPosition();
 	if (!cursorPosition) return void 0;
 	const containerUnderPointer = new Set();
 	stage.find(".containerCapable").reverse().forEach((node) => {
@@ -15775,7 +15775,10 @@ function getBoundingBox(stage, nodes) {
 	let maxX = -Infinity;
 	let maxY = -Infinity;
 	for (const node of nodes) {
-		const box = node.getRealClientRect({ skipTransform: false });
+		const box = node.getRealClientRect({
+			relativeTo: stage,
+			skipTransform: false
+		});
 		minX = Math.min(minX, box.x);
 		minY = Math.min(minY, box.y);
 		maxX = Math.max(maxX, box.x + box.width);
@@ -15829,6 +15832,87 @@ function containsNodeDeep(nodes, target) {
 	}
 	return false;
 }
+function getSelectedNodesMetadata(transformer) {
+	const firstNode = transformer.getNodes()[0];
+	const firstNodeClientRect = firstNode.getClientRect();
+	const rectCoordsMin = {
+		x: firstNodeClientRect.x,
+		y: firstNodeClientRect.y
+	};
+	const rectCoordsMax = {
+		x: firstNodeClientRect.x + firstNodeClientRect.width,
+		y: firstNodeClientRect.y + firstNodeClientRect.height
+	};
+	const nodes = [];
+	for (const node of transformer.getNodes()) {
+		const clientRect = node.getClientRect();
+		if (clientRect.x < rectCoordsMin.x) rectCoordsMin.x = clientRect.x;
+		if (clientRect.y < rectCoordsMin.y) rectCoordsMin.y = clientRect.y;
+		if (clientRect.x + clientRect.width > rectCoordsMax.x) rectCoordsMax.x = clientRect.x + clientRect.width;
+		if (clientRect.y + clientRect.height > rectCoordsMax.y) rectCoordsMax.y = clientRect.y + clientRect.height;
+		nodes.push(node.getAttrs().id);
+	}
+	return {
+		width: rectCoordsMax.x - rectCoordsMin.x,
+		height: rectCoordsMax.y - rectCoordsMin.y,
+		nodes
+	};
+}
+function getTargetAndSkipNodes(instance, e) {
+	const nodesSelectionPlugin = instance.getPlugin("nodesSelection");
+	let skipNodes = [];
+	let node = void 0;
+	if (e.type === "dragmove" && nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length === 1) {
+		node = nodesSelectionPlugin.getTransformer().nodes()[0];
+		skipNodes.push(node.getAttrs().id ?? "");
+	}
+	if (e.type === "dragmove" && nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length > 1) {
+		const { nodes } = getSelectedNodesMetadata(nodesSelectionPlugin.getTransformer());
+		node = nodesSelectionPlugin.getTransformer();
+		skipNodes = [...nodes];
+	}
+	if (e.type === "transform") {
+		node = e.target;
+		skipNodes.push(node.getAttrs().id ?? "");
+	}
+	return {
+		targetNode: node,
+		skipNodes
+	};
+}
+function getVisibleNodesInViewport(stage, referenceLayer) {
+	const scale = stage.scaleX();
+	const stagePos = stage.position();
+	const stageSize = {
+		width: stage.width(),
+		height: stage.height()
+	};
+	const viewRect = {
+		x: -stagePos.x / scale,
+		y: -stagePos.y / scale,
+		width: stageSize.width / scale,
+		height: stageSize.height / scale
+	};
+	const visibleNodes = [];
+	referenceLayer?.find(".node").forEach((node) => {
+		if (!node.isVisible()) return;
+		const box = node.getClientRect({
+			relativeTo: stage,
+			skipStroke: true,
+			skipShadow: true
+		});
+		const intersects = box.x + box.width > viewRect.x && box.x < viewRect.x + viewRect.width && box.y + box.height > viewRect.y && box.y < viewRect.y + viewRect.height;
+		if (intersects) visibleNodes.push(node);
+	});
+	return visibleNodes;
+}
+function getClosestParentWithId(el) {
+	while (el) {
+		if (el.id) return el;
+		el = el.parentElement;
+	}
+	return null;
+}
 
 //#endregion
 //#region src/actions/selection-tool/constants.ts
@@ -15863,7 +15947,7 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 		this.pointers = {};
 	}
 	getName() {
-		return WEAVE_CONTEXT_MENU_KEY;
+		return WEAVE_CONTEXT_MENU_PLUGIN_KEY;
 	}
 	onInit() {
 		this.initEvents();
@@ -15905,14 +15989,16 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 		const containerRect = stage.container().getBoundingClientRect();
 		const pointerPos = stage.getPointerPosition();
 		if (containerRect && pointerPos) {
-			const point = {
+			const contextMenuPoint = {
 				x: containerRect.left + pointerPos.x + (this.config.xOffset ?? 4),
 				y: containerRect.top + pointerPos.y + (this.config.yOffset ?? 4)
 			};
+			const clickPoint = pointerPos;
 			this.contextMenuVisible = true;
 			this.instance.emitEvent("onNodeContextMenu", {
 				selection: nodes,
-				point,
+				contextMenuPoint,
+				clickPoint,
 				visible: true
 			});
 		}
@@ -15921,7 +16007,11 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 		this.contextMenuVisible = false;
 		this.instance.emitEvent("onNodeContextMenu", {
 			selection: [],
-			point: {
+			contextMenuPoint: {
+				x: 0,
+				y: 0
+			},
+			clickPoint: {
 				x: 0,
 				y: 0
 			},
@@ -15966,9 +16056,6 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 				this.tapHold = false;
 			}
 		});
-		window.addEventListener("contextmenu", (e) => {
-			e.preventDefault();
-		});
 		stage.on("contextmenu", (e) => {
 			e.evt.preventDefault();
 			if (!this.enabled) return;
@@ -15980,13 +16067,15 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 			const containerRect = stage.container().getBoundingClientRect();
 			const pointerPos = stage.getPointerPosition();
 			if (containerRect && pointerPos) {
-				const point = {
+				const contextMenuPoint = {
 					x: containerRect.left + pointerPos.x + (this.config.xOffset ?? 4),
 					y: containerRect.top + pointerPos.y + (this.config.yOffset ?? 4)
 				};
+				const clickPoint = pointerPos;
 				this.instance.emitEvent("onNodeContextMenu", {
 					selection: [],
-					point,
+					contextMenuPoint,
+					clickPoint,
 					visible: false
 				});
 			}
@@ -16016,6 +16105,45 @@ const WEAVE_USER_SELECTION_KEY = "userSelection";
 const WEAVE_STAGE_NODE_TYPE = "stage";
 const WEAVE_STAGE_DEFAULT_MODE = "default";
 
+//#endregion
+//#region src/plugins/nodes-edge-snapping/constants.ts
+const WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY = "nodesEdgeSnapping";
+const GUIDE_LINE_NAME = "guide-edge-snapping-line";
+const GUIDE_LINE_DEFAULT_CONFIG = {
+	stroke: "#ff0000",
+	strokeWidth: 1,
+	dash: []
+};
+const GUIDE_LINE_DRAG_SNAPPING_THRESHOLD = 3;
+const GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD = 3;
+const GUIDE_ORIENTATION = {
+	["HORIZONTAL"]: "H",
+	["VERTICAL"]: "V"
+};
+const NODE_SNAP = {
+	["START"]: "start",
+	["CENTER"]: "center",
+	["END"]: "end"
+};
+
+//#endregion
+//#region src/plugins/nodes-distance-snapping/constants.ts
+const WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY = "nodesDistanceSnapping";
+const GUIDE_HORIZONTAL_LINE_NAME = "guide-distance-snapping-horizontal-line";
+const GUIDE_VERTICAL_LINE_NAME = "guide-distance-snapping-vertical-line";
+const GUIDE_ENTER_SNAPPING_TOLERANCE = 3;
+const GUIDE_EXIT_SNAPPING_TOLERANCE = 5;
+const NODE_SNAP_HORIZONTAL = {
+	["LEFT"]: "left",
+	["CENTER"]: "center",
+	["RIGHT"]: "right"
+};
+const NODE_SNAP_VERTICAL = {
+	["TOP"]: "top",
+	["MIDDLE"]: "middle",
+	["BOTTOM"]: "bottom"
+};
+
 //#endregion
 //#region src/plugins/nodes-selection/nodes-selection.ts
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
@@ -16156,7 +16284,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		selectionLayer?.add(selectionRectangle);
 		const tr = new konva.default.Transformer({
 			id: "selectionTransformer",
-			...this.selectionOriginalConfig
+			...this.selectionOriginalConfig,
+			listening: true
 		});
 		selectionLayer?.add(tr);
 		const trHover = new konva.default.Transformer({
@@ -16168,6 +16297,29 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			listening: false
 		});
 		selectionLayer?.add(trHover);
+		stage.on("pointermove", () => {
+			if (tr.nodes().length === 1 && tr.nodes()[0].getAttrs().isContainerPrincipal) {
+				const pos = stage.getPointerPosition();
+				if (!pos) return;
+				const shapeUnder = stage.getIntersection(pos);
+				if (!shapeUnder) {
+					tr.setAttrs({ listening: true });
+					tr.forceUpdate();
+				}
+				if (shapeUnder && tr.getChildren().includes(shapeUnder) && shapeUnder.name() === "back") {
+					tr.setAttrs({ listening: false });
+					tr.forceUpdate();
+				}
+				if (shapeUnder && tr.nodes()[0].getChildren().includes(shapeUnder)) {
+					tr.setAttrs({ listening: false });
+					tr.forceUpdate();
+				}
+				if (shapeUnder && !tr.getChildren().includes(shapeUnder) && tr.nodes()[0].getChildren().includes(shapeUnder)) {
+					tr.setAttrs({ listening: true });
+					tr.forceUpdate();
+				}
+			}
+		});
 		tr.on("transformstart", () => {
 			this.triggerSelectedNodesEvent();
 		});
@@ -16257,12 +16409,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 							const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
 							if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
 							let containerToMove = this.instance.getMainLayer();
-							if (layerToMove) {
-								containerToMove = layerToMove;
-								containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
-							}
+							if (layerToMove) containerToMove = layerToMove;
 							let moved = false;
 							if (containerToMove && !selectionContainsFrames) moved = moveNodeToContainer(this.instance, node, containerToMove);
+							if (containerToMove) containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
 							if (!nodeHandler) return resolve();
 							toSelect.push(node.getAttrs().id ?? "");
 							if (!moved) toUpdate.push(nodeHandler.serialize(node));
@@ -16479,10 +16629,14 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		};
 		stage.on("pointermove", handleMouseMove);
 		stage.on("pointerup", (e) => {
+			this.tr.setAttrs({ listening: true });
 			const moved = this.checkMoved(e);
 			this.checkDoubleTap(e);
 			delete this.pointers[e.evt.pointerId];
-			if (stage.mode() === WEAVE_STAGE_DEFAULT_MODE) this.getSnappingPlugin()?.cleanupEvaluateGuidelines();
+			if (stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
+				this.getNodesEdgeSnappingPlugin()?.cleanupGuidelines();
+				this.getNodesDistanceSnappingPlugin()?.cleanupGuidelines();
+			}
 			const contextMenuPlugin = this.getContextMenuPlugin();
 			if (!this.initialized) {
 				this.hideSelectorArea();
@@ -16723,11 +16877,15 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.enabled = false;
 	}
 	getContextMenuPlugin() {
-		const contextMenuPlugin = this.instance.getPlugin("contextMenu");
+		const contextMenuPlugin = this.instance.getPlugin(WEAVE_CONTEXT_MENU_PLUGIN_KEY);
 		return contextMenuPlugin;
 	}
-	getSnappingPlugin() {
-		const snappingPlugin = this.instance.getPlugin("nodesSnapping");
+	getNodesEdgeSnappingPlugin() {
+		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY);
+		return snappingPlugin;
+	}
+	getNodesDistanceSnappingPlugin() {
+		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY);
 		return snappingPlugin;
 	}
 	getSelectorConfig() {
@@ -16738,6 +16896,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 //#endregion
 //#region src/plugins/copy-paste-nodes/constants.ts
 const WEAVE_COPY_PASTE_NODES_KEY = "copyPasteNodes";
+const WEAVE_COPY_PASTE_PASTE_CATCHER_ID = "weave-paste-catcher";
 const WEAVE_COPY_PASTE_PASTE_MODES = {
 	["INTERNAL"]: "internal",
 	["EXTERNAL"]: "external",
@@ -16763,18 +16922,6 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	onInit() {
 		this.initEvents();
 	}
-	readClipboardData() {
-		return new Promise((resolve, reject) => {
-			setTimeout(async () => {
-				if (typeof navigator.clipboard === "undefined") return reject(new Error("Clipboard API not supported"));
-				navigator.clipboard.readText().then((text) => {
-					resolve(this.isWeaveData(text));
-				}).catch((error) => {
-					reject(error);
-				});
-			});
-		});
-	}
 	writeClipboardData(data) {
 		return new Promise((resolve, reject) => {
 			setTimeout(async () => {
@@ -16787,8 +16934,36 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			});
 		});
 	}
+	existsPasteCatcher() {
+		return document.getElementById(WEAVE_COPY_PASTE_PASTE_CATCHER_ID) !== null;
+	}
+	createPasteCatcher() {
+		const stage = this.instance.getStage();
+		if (!this.existsPasteCatcher()) {
+			const catcher = document.createElement("div");
+			catcher.id = WEAVE_COPY_PASTE_PASTE_CATCHER_ID;
+			catcher.contentEditable = "true";
+			catcher.style.position = "absolute";
+			catcher.style.top = "-1px";
+			catcher.style.left = "-1px";
+			catcher.style.width = "1px";
+			catcher.style.height = "1px";
+			catcher.style.zIndex = "-1";
+			catcher.style.outline = "none";
+			catcher.style.opacity = "0";
+			catcher.tabIndex = 0;
+			const stageContainer = stage.container();
+			if (stageContainer?.parentNode) stageContainer.parentNode.appendChild(catcher);
+		}
+	}
+	focusPasteCatcher() {
+		const catcher = document.getElementById(WEAVE_COPY_PASTE_PASTE_CATCHER_ID);
+		catcher?.focus();
+	}
 	initEvents() {
 		const stage = this.instance.getStage();
+		this.createPasteCatcher();
+		const catcher = document.getElementById(WEAVE_COPY_PASTE_PASTE_CATCHER_ID);
 		window.addEventListener("keydown", async (e) => {
 			if (stage.isFocused() && e.key === "c" && (e.ctrlKey || e.metaKey)) {
 				e.preventDefault();
@@ -16796,49 +16971,49 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				return;
 			}
 			if (stage.isFocused() && e.key === "v" && (e.ctrlKey || e.metaKey)) {
-				const catcher = document.getElementById("paste-catcher");
-				catcher?.focus();
+				this.focusPasteCatcher();
 				if (!this.enabled) return;
-				try {
-					if (this.isClipboardAPIAvailable()) {
-						const continueToPaste = await this.readClipboardData();
-						if (continueToPaste) {
-							this.state = COPY_PASTE_NODES_PLUGIN_STATE.PASTING;
-							this.handlePaste();
-							e.preventDefault();
-							return;
-						}
-					}
-				} catch (ex) {
-					this.instance.emitEvent("onPaste", ex);
-				}
-				e.preventDefault();
-				stage.container().focus();
-				return;
 			}
 		});
-		document.addEventListener("paste", async (e) => {
+		if (catcher) catcher.addEventListener("paste", async (e) => {
 			e.preventDefault();
-			const items = e.clipboardData?.items;
-			if (!items) return;
+			const dataList = e.clipboardData?.items;
+			let items = void 0;
+			if (!items) {
+				if (this.isClipboardAPIAvailable()) items = await navigator.clipboard.read();
+			}
+			if (!items && !dataList) return;
 			let hasWeaveData = false;
 			if (this.isClipboardAPIAvailable()) {
-				for (const item of items) if (item.type === "text/plain") {
-					const text = await this.getTextFromClipboard(item);
-					if (this.isWeaveData(text)) {
-						hasWeaveData = true;
-						this.toPaste = JSON.parse(text);
-					}
+				const readText = await navigator.clipboard.readText();
+				const continueToPaste = this.isWeaveData(readText);
+				if (continueToPaste) hasWeaveData = true;
+			} else for (const item of dataList ?? []) if (item.type === "text/plain") {
+				const text = await this.getTextFromClipboard(item);
+				if (this.isWeaveData(text)) {
+					hasWeaveData = true;
+					this.toPaste = JSON.parse(text);
 				}
 			}
 			if (hasWeaveData) {
 				this.handlePaste();
 				return;
 			}
-			const position = this.instance.getStage().getRelativePointerPosition();
-			if (position) this.instance.emitEvent("onPasteExternal", {
-				position,
-				dataList: items
+			const container = stage.container();
+			const scale = stage.scale();
+			const position = stage.position();
+			const width = container.clientWidth;
+			const height = container.clientHeight;
+			const centerX = (width / 2 - position.x) / scale.x;
+			const centerY = (height / 2 - position.y) / scale.y;
+			const pastePosition = {
+				x: centerX,
+				y: centerY
+			};
+			this.instance.emitEvent("onPasteExternal", {
+				position: pastePosition,
+				dataList,
+				items
 			});
 		});
 	}
@@ -16864,8 +17039,8 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	}
 	mapToPasteNodes() {
 		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
-		const selectedNodes = nodesSelectionPlugin.getSelectedNodes();
-		return selectedNodes.map((node) => ({
+		const selectedNodes = nodesSelectionPlugin?.getSelectedNodes();
+		return (selectedNodes ?? []).map((node) => ({
 			konvaNode: node,
 			node: node.getAttrs()
 		}));
@@ -16881,22 +17056,50 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			if (child.props.children) this.recursivelyUpdateKeys(child.props.children);
 		}
 	}
-	handlePaste() {
+	handlePaste(position) {
+		const stage = this.instance.getStage();
 		if (this.toPaste) {
-			const { mousePoint, container } = this.instance.getMousePointer();
+			const nodesToSelect = [];
 			for (const element of Object.keys(this.toPaste.weave)) {
-				const node = this.toPaste.weave[element];
+				const node = this.toPaste.weave[element].element;
+				const posRelativeToSelection = this.toPaste.weave[element].posRelativeToSelection;
+				let containerId = this.toPaste.weave[element].containerId;
 				if (node.props.children) this.recursivelyUpdateKeys(node.props.children);
 				const newNodeId = v4_default();
 				delete node.props.containerId;
 				node.key = newNodeId;
 				node.props.id = newNodeId;
-				node.props.x = mousePoint.x + (node.props.x - this.toPaste.weaveMinPoint.x);
-				node.props.y = mousePoint.y + (node.props.y - this.toPaste.weaveMinPoint.y);
-				this.instance.addNode(node, container?.getAttrs().id);
+				if (position) {
+					const container = containerOverCursor(this.instance, [], position);
+					let localPos = position;
+					if (!container) {
+						containerId = this.instance.getMainLayer()?.getAttrs().id ?? "";
+						const scale = stage.scaleX();
+						const stagePos = stage.position();
+						localPos = {
+							x: (localPos.x - stagePos.x) / scale,
+							y: (localPos.y - stagePos.y) / scale
+						};
+					}
+					if (container && container.getAttrs().nodeType === "frame") {
+						containerId = container.getAttrs().id ?? "";
+						localPos = container.getAbsoluteTransform().copy().invert().point(position);
+					}
+					const nodeHandler = this.instance.getNodeHandler(node.props.nodeType ?? "");
+					if (nodeHandler) {
+						const realOffset = nodeHandler.realOffset(node);
+						node.props.x = localPos.x + realOffset.x + posRelativeToSelection.x;
+						node.props.y = localPos.y + realOffset.y + posRelativeToSelection.y;
+					}
+				}
+				this.instance.addNode(node, containerId);
+				const realNode = this.instance.getStage().findOne(`#${newNodeId}`);
+				if (realNode) nodesToSelect.push(realNode);
 				this.instance.emitEvent("onPaste");
-				this.instance.emitEvent("onPaste", void 0);
 			}
+			this.instance.emitEvent("onPaste", void 0);
+			const nodesSelectionPlugin = this.getNodesSelectionPlugin();
+			nodesSelectionPlugin?.setSelectedNodes(nodesToSelect);
 			this.toPaste = void 0;
 		}
 		this.cancel();
@@ -16908,8 +17111,9 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		stage.container().focus();
 		this.setState(COPY_PASTE_NODES_PLUGIN_STATE.IDLE);
 		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
-		const selectedNodes = nodesSelectionPlugin.getSelectedNodes();
-		if (selectedNodes.length === 0) return;
+		const selectedNodes = nodesSelectionPlugin?.getSelectedNodes();
+		if (!selectedNodes || selectedNodes.length === 0) return;
+		const box = getBoundingBox(stage, selectedNodes);
 		const copyClipboard = {
 			weaveInstanceId: this.instance.getId(),
 			weave: {},
@@ -16918,33 +17122,67 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				y: 0
 			}
 		};
-		const result = this.instance.nodesToGroupSerialized(selectedNodes);
-		if (result && result.serializedNodes && result.serializedNodes.length > 0) {
-			copyClipboard.weaveMinPoint = result.minPoint;
-			for (const serializedNode of result.serializedNodes) copyClipboard.weave[serializedNode.key ?? ""] = serializedNode;
-			try {
-				await this.writeClipboardData(JSON.stringify(copyClipboard));
-				this.instance.emitEvent("onCopy");
-			} catch (ex) {
-				this.instance.emitEvent("onCopy", ex);
-			}
+		for (const node of selectedNodes) {
+			const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			const parentNode = node.getParent();
+			let parentId = parentNode?.getAttrs().id;
+			if (parentNode?.getAttrs().nodeId) {
+				const realParent = this.instance.getStage().findOne(`#${parentNode.getAttrs().nodeId}`);
+				if (realParent) parentId = realParent.getAttrs().id;
+			}
+			if (!parentId) continue;
+			const serializedNode = nodeHandler.serialize(node);
+			const nodeBox = node.getClientRect({ relativeTo: stage });
+			copyClipboard.weave[serializedNode.key ?? ""] = {
+				element: serializedNode,
+				posRelativeToSelection: {
+					x: nodeBox.x - (box?.x ?? 0),
+					y: nodeBox.y - (box?.y ?? 0)
+				},
+				containerId: parentId
+			};
+		}
+		try {
+			await this.writeClipboardData(JSON.stringify(copyClipboard));
+			this.instance.emitEvent("onCopy");
+		} catch (ex) {
+			this.instance.emitEvent("onCopy", ex);
 		}
 	}
 	async copy() {
 		await this.performCopy();
 	}
-	async paste() {
+	async paste(position) {
+		const stage = this.instance.getStage();
 		try {
-			const continueToPaste = await this.readClipboardData();
-			if (continueToPaste) this.handlePaste();
+			const readText = await navigator.clipboard.readText();
+			const continueToPaste = this.isWeaveData(readText);
+			if (continueToPaste) {
+				this.handlePaste(position);
+				return;
+			}
 		} catch (ex) {
 			this.instance.emitEvent("onPaste", ex);
 		}
 		try {
 			const items = await navigator.clipboard.read();
-			const position = this.instance.getStage().getRelativePointerPosition();
-			if (position) this.instance.emitEvent("onPasteExternal", {
-				position,
+			let pastePosition = position;
+			if (typeof pastePosition === "undefined") {
+				const container = stage.container();
+				const scale = stage.scale();
+				const position$1 = stage.position();
+				const centerClientX = container.clientWidth / 2;
+				const centerClientY = container.clientHeight / 2;
+				const centerX = (centerClientX - position$1.x) / scale.x;
+				const centerY = (centerClientY - position$1.y) / scale.y;
+				pastePosition = {
+					x: centerX,
+					y: centerY
+				};
+			}
+			this.instance.emitEvent("onPasteExternal", {
+				position: pastePosition,
 				items
 			});
 		} catch (ex) {
@@ -16966,7 +17204,6 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	}
 	getNodesSelectionPlugin() {
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (!nodesSelectionPlugin) throw new Error("WeaveNodesSelectionPlugin plugin not found");
 		return nodesSelectionPlugin;
 	}
 	isClipboardApiEnabled() {
@@ -16975,7 +17212,8 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	async getAvailablePasteMode(canHandleExternal) {
 		if (!this.isClipboardApiEnabled()) return WEAVE_COPY_PASTE_PASTE_MODES.CLIPBOARD_API_NOT_SUPPORTED;
 		try {
-			const allowPaste = await this.readClipboardData();
+			const readText = await navigator.clipboard.readText();
+			const allowPaste = this.isWeaveData(readText);
 			if (allowPaste) return WEAVE_COPY_PASTE_PASTE_MODES.INTERNAL;
 			const items = await navigator.clipboard.read();
 			if (await canHandleExternal(items)) return WEAVE_COPY_PASTE_PASTE_MODES.EXTERNAL;
@@ -17139,9 +17377,9 @@ var WeaveNode = class {
 			const handleTransform = (e) => {
 				const node$1 = e.target;
 				const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-				const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
+				const nodesEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
 				if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
-				if (nodesSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesSnappingPlugin.evaluateGuidelines(e);
+				if (nodesEdgeSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesEdgeSnappingPlugin.evaluateGuidelines(e);
 			};
 			node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
 			node.on("transformend", (e) => {
@@ -17149,8 +17387,8 @@ var WeaveNode = class {
 				this.instance.emitEvent("onTransform", null);
 				transforming = false;
 				const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-				const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
-				if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
+				const nodesSnappingPlugin = this.getNodesEdgeSnappingPlugin();
+				if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupGuidelines();
 				if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
 				this.scaleReset(node$1);
 				const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
@@ -17194,7 +17432,7 @@ var WeaveNode = class {
 				if (this.isSelecting() && this.isNodeSelected(node) && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					clearContainerTargets(this.instance);
 					const layerToMove = containerOverCursor(this.instance, [node]);
-					if (layerToMove && !hasFrames(node)) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
+					if (layerToMove && !hasFrames(node) && node.isDragging()) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 				}
 			};
 			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
@@ -17208,16 +17446,16 @@ var WeaveNode = class {
 				this.instance.emitEvent("onDrag", null);
 				if (this.isSelecting() && this.isNodeSelected(node) && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					clearContainerTargets(this.instance);
-					const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
-					if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
+					const nodesEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
+					const nodesDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
+					if (nodesEdgeSnappingPlugin) nodesEdgeSnappingPlugin.cleanupGuidelines();
+					if (nodesDistanceSnappingPlugin) nodesDistanceSnappingPlugin.cleanupGuidelines();
 					const layerToMove = containerOverCursor(this.instance, [node]);
 					let containerToMove = this.instance.getMainLayer();
-					if (layerToMove) {
-						containerToMove = layerToMove;
-						containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
-					}
+					if (layerToMove) containerToMove = layerToMove;
 					let moved = false;
 					if (containerToMove && !hasFrames(node)) moved = moveNodeToContainer(this.instance, e.target, containerToMove);
+					if (containerToMove) containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
 					if (!moved) this.instance.updateNode(this.serialize(node));
 				}
 			});
@@ -17349,6 +17587,20 @@ var WeaveNode = class {
 			...nodeTransformConfig
 		};
 	}
+	getNodesEdgeSnappingPlugin() {
+		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY);
+		return snappingPlugin;
+	}
+	getNodesDistanceSnappingPlugin() {
+		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY);
+		return snappingPlugin;
+	}
+	realOffset(instance) {
+		return {
+			x: 0,
+			y: 0
+		};
+	}
 };
 
 //#endregion
@@ -18062,30 +18314,10 @@ var WeaveTargetingManager = class {
 	}
 	isNodesBoundingBoxIntersecting(nodes, nodeB) {
 		const stage = this.instance.getStage();
-		const a = this.getBoundingBoxOfNodes(nodes);
+		const a = getBoundingBox(stage, nodes);
 		const b = nodeB.getClientRect({ relativeTo: stage });
 		return !(a.x + a.width < b.x || a.x > b.x + b.width || a.y + a.height < b.y || a.y > b.y + b.height);
 	}
-	getBoundingBoxOfNodes(nodes) {
-		const stage = this.instance.getStage();
-		if (!nodes || nodes.length === 0) return {
-			x: 0,
-			y: 0,
-			width: 0,
-			height: 0
-		};
-		const rects = nodes.map((node) => node.getClientRect({ relativeTo: stage }));
-		const minX = Math.min(...rects.map((r) => r.x));
-		const minY = Math.min(...rects.map((r) => r.y));
-		const maxX = Math.max(...rects.map((r) => r.x + r.width));
-		const maxY = Math.max(...rects.map((r) => r.y + r.height));
-		return {
-			x: minX,
-			y: minY,
-			width: maxX - minX,
-			height: maxY - minY
-		};
-	}
 	nodeIntersectsContainerElement(node, actualLayer) {
 		const stage = this.instance.getStage();
 		const containers = stage.find(".containerCapable");
@@ -18105,7 +18337,7 @@ var WeaveTargetingManager = class {
 			}
 		} else {
 			let nodeActualContainer = node.getParent();
-			if (nodeActualContainer.getAttrs().nodeId) {
+			if (nodeActualContainer?.getAttrs().nodeId) {
 				const realParent = stage.findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
 				if (realParent) nodeActualContainer = realParent;
 			}
@@ -18134,7 +18366,7 @@ var WeaveTargetingManager = class {
 		this.logger.debug({ point }, "getMousePointer");
 		const stage = this.instance.getStage();
 		const mainLayer = this.instance.getMainLayer();
-		let relativeMousePointer = point ? point : mainLayer?.getRelativePointerPosition() ?? {
+		let relativeMousePointer = typeof point !== "undefined" ? point : mainLayer?.getRelativePointerPosition() ?? {
 			x: 0,
 			y: 0
 		};
@@ -18157,8 +18389,8 @@ var WeaveTargetingManager = class {
 				measureContainer = containerOfNode;
 			}
 		}
-		if (container?.getAttrs().nodeType !== "layer") relativeMousePointer = measureContainer?.getRelativePointerPosition() ?? relativeMousePointer;
-		if (container?.getAttrs().nodeType === "layer") relativeMousePointer = measureContainer?.getRelativePointerPosition() ?? {
+		if (typeof point === "undefined" && container?.getAttrs().nodeType !== "layer") relativeMousePointer = measureContainer?.getRelativePointerPosition() ?? relativeMousePointer;
+		if (typeof point === "undefined" && container?.getAttrs().nodeType === "layer") relativeMousePointer = measureContainer?.getRelativePointerPosition() ?? {
 			x: 0,
 			y: 0
 		};
@@ -18916,7 +19148,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.50.0";
+var version = "0.52.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -19959,6 +20191,12 @@ var WeaveEllipseNode = class extends WeaveNode {
 			y: 1
 		});
 	}
+	realOffset(element) {
+		return {
+			x: element.props.radiusX,
+			y: element.props.radiusY
+		};
+	}
 };
 
 //#endregion
@@ -20593,10 +20831,8 @@ var WeaveImageToolAction = class extends WeaveAction {
 			crossOrigin: "anonymous",
 			...options
 		};
-		if (!position) {
-			stage.container().style.cursor = "crosshair";
-			stage.container().focus();
-		}
+		stage.container().style.cursor = "crosshair";
+		stage.container().focus();
 		this.imageId = v4_default();
 		this.imageURL = imageURL;
 		this.preloadImgs[this.imageId] = new Image();
@@ -20623,10 +20859,8 @@ var WeaveImageToolAction = class extends WeaveAction {
 	}
 	addImageNode(position) {
 		const stage = this.instance.getStage();
-		if (!position) {
-			stage.container().style.cursor = "crosshair";
-			stage.container().focus();
-		}
+		stage.container().style.cursor = "crosshair";
+		stage.container().focus();
 		if (position) {
 			this.setState(IMAGE_TOOL_STATE.SELECTED_POSITION);
 			this.handleAdding(position);
@@ -20687,7 +20921,10 @@ var WeaveImageToolAction = class extends WeaveAction {
 					}
 				});
 				this.instance.addNode(node, this.container?.getAttrs().id);
-				this.instance.emitEvent("onAddedImage", { imageURL: this.props.imageURL });
+				this.instance.emitEvent("onAddedImage", {
+					imageURL: this.props.imageURL,
+					nodeId: this.imageId
+				});
 			}
 			this.setState(IMAGE_TOOL_STATE.FINISHED);
 		}
@@ -21556,6 +21793,12 @@ var WeaveStarNode = class extends WeaveNode {
 			y: 1
 		});
 	}
+	realOffset(element) {
+		return {
+			x: element.props.outerRadius,
+			y: element.props.outerRadius
+		};
+	}
 };
 
 //#endregion
@@ -21673,6 +21916,12 @@ var WeaveRegularPolygonNode = class extends WeaveNode {
 			y: 1
 		});
 	}
+	realOffset(element) {
+		return {
+			x: element.props.radius,
+			y: element.props.radius
+		};
+	}
 };
 
 //#endregion
@@ -22341,20 +22590,39 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		});
 		this.setZoom(scale, false);
 	}
-	fitToSelection() {
+	fitToSelection(smartZoom = false) {
 		if (!this.enabled) return;
 		const stage = this.instance.getStage();
 		const selectionPlugin = this.getNodesSelectionPlugin();
 		if (!selectionPlugin) return;
 		const nodes = selectionPlugin.getTransformer().getNodes();
 		if (nodes.length === 0) return;
+		const box = getBoundingBox(stage, selectionPlugin.getTransformer().getNodes());
+		if (box.width === 0 || box.height === 0) return;
+		const container = stage.container();
+		const scale = stage.scale();
+		const viewportWidth = container.clientWidth;
+		const viewportHeight = container.clientHeight;
+		const visibleStageWidth = viewportWidth / scale.x;
+		const visibleStageHeight = viewportHeight / scale.y;
+		const fitsInView = box.width + this.config.fitToSelection.padding * 2 <= visibleStageWidth && box.height + this.config.fitToSelection.padding * 2 <= visibleStageHeight;
+		const selectionCenter = {
+			x: box.x + box.width / 2,
+			y: box.y + box.height / 2
+		};
+		if (smartZoom && fitsInView) {
+			const newPosition = {
+				x: viewportWidth / 2 - selectionCenter.x * scale.x,
+				y: viewportHeight / 2 - selectionCenter.y * scale.y
+			};
+			stage.position(newPosition);
+			return;
+		}
 		this.setZoom(1, false);
 		stage.setAttrs({
 			x: 0,
 			y: 0
 		});
-		const box = getBoundingBox(stage, selectionPlugin.getTransformer().getNodes());
-		if (box.width === 0 || box.height === 0) return;
 		const stageBox = {
 			width: stage.width(),
 			height: stage.height()
@@ -22363,22 +22631,22 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		const availableScreenHeight = stageBox.height - 2 * this.config.fitToSelection.padding;
 		const scaleX = availableScreenWidth / box.width;
 		const scaleY = availableScreenHeight / box.height;
-		const scale = Math.min(scaleX, scaleY);
+		const finalScale = Math.min(scaleX, scaleY);
 		stage.scale({
-			x: scale,
-			y: scale
+			x: finalScale,
+			y: finalScale
 		});
 		const selectionCenterX = box.x + box.width / 2;
 		const selectionCenterY = box.y + box.height / 2;
-		const canvasCenterX = stage.width() / (2 * scale);
-		const canvasCenterY = stage.height() / (2 * scale);
-		const stageX = (canvasCenterX - selectionCenterX) * scale;
-		const stageY = (canvasCenterY - selectionCenterY) * scale;
+		const canvasCenterX = stage.width() / (2 * finalScale);
+		const canvasCenterY = stage.height() / (2 * finalScale);
+		const stageX = (canvasCenterX - selectionCenterX) * finalScale;
+		const stageY = (canvasCenterY - selectionCenterY) * finalScale;
 		stage.position({
 			x: stageX,
 			y: stageY
 		});
-		this.setZoom(scale, false);
+		this.setZoom(finalScale, false);
 	}
 	enable() {
 		this.enabled = true;
@@ -22473,20 +22741,21 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			lastCenter = null;
 		}, { passive: false });
 		const handleWheel = (e) => {
-			e.evt.preventDefault();
-			const stage$1 = this.instance.getStage();
-			const performZoom = this.isCtrlOrMetaPressed || !this.isCtrlOrMetaPressed && e.evt.ctrlKey && e.evt.deltaMode === 0;
-			if (!this.enabled || !stage$1.isFocused() || !performZoom) return;
-			const delta = e.evt.deltaY > 0 ? 1 : -1;
+			const performZoom = this.isCtrlOrMetaPressed || !this.isCtrlOrMetaPressed && e.ctrlKey && e.deltaMode === 0;
+			const mouseX = e.clientX;
+			const mouseY = e.clientY;
+			const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+			if (!this.enabled || !performZoom || getClosestParentWithId(elementUnderMouse) !== stage.container()) return;
+			const delta = e.deltaY > 0 ? 1 : -1;
 			this.zoomVelocity += delta;
-			this.isTrackpad = Math.abs(e.evt.deltaY) < 15 && e.evt.deltaMode === 0;
+			this.isTrackpad = Math.abs(e.deltaY) < 15 && e.deltaMode === 0;
 			if (!this.zooming) {
 				this.zooming = true;
 				this.zoomInertiaType = WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL;
 				requestAnimationFrame(this.zoomTick.bind(this));
 			}
 		};
-		stage.on("wheel", handleWheel);
+		window.addEventListener("wheel", handleWheel, { passive: false });
 	}
 	getInertiaScale() {
 		const stage = this.instance.getStage();
@@ -22659,7 +22928,7 @@ var WeaveFitToSelectionToolAction = class extends WeaveAction {
 	}
 	trigger(cancelAction, params) {
 		const stageZoomPlugin = this.getStageZoomPlugin();
-		stageZoomPlugin.fitToSelection();
+		stageZoomPlugin.fitToSelection(params?.smartZoom ?? false);
 		this.previousAction = params.previousAction;
 		this.cancelAction = cancelAction;
 		this.cancelAction();
@@ -24981,7 +25250,7 @@ const WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO = 4;
 const WEAVE_GRID_DEFAULT_RADIUS = 1;
 const WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO = 2;
 const WEAVE_GRID_DEFAULT_MAJOR_EVERY = 10;
-const WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS = 300;
+const WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS = 250;
 const WEAVE_GRID_LAYER_ID = "gridLayer";
 
 //#endregion
@@ -25356,16 +25625,17 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			this.panning = false;
 		});
 		const handleWheel = (e) => {
-			e.evt.preventDefault();
-			const stage$1 = this.instance.getStage();
-			const performPanning = !this.isCtrlOrMetaPressed && !e.evt.ctrlKey;
-			if (!this.enabled || !stage$1.isFocused() || this.isCtrlOrMetaPressed || e.evt.buttons === 4 || !performPanning) return;
+			const performPanning = !this.isCtrlOrMetaPressed && !e.ctrlKey;
+			const mouseX = e.clientX;
+			const mouseY = e.clientY;
+			const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+			if (!this.enabled || this.isCtrlOrMetaPressed || e.buttons === 4 || !performPanning || getClosestParentWithId(elementUnderMouse) !== stage.container()) return;
 			this.getContextMenuPlugin()?.cancelLongPressTimer();
-			stage$1.x(stage$1.x() - e.evt.deltaX);
-			stage$1.y(stage$1.y() - e.evt.deltaY);
+			stage.x(stage.x() - e.deltaX);
+			stage.y(stage.y() - e.deltaY);
 			this.instance.emitEvent("onStageMove");
 		};
-		stage.on("wheel", handleWheel);
+		window.addEventListener("wheel", handleWheel, { passive: false });
 		stage.container().style.touchAction = "none";
 		stage.container().style.userSelect = "none";
 		stage.container().style.setProperty("-webkit-user-drag", "none");
@@ -25877,29 +26147,8 @@ var WeaveStageDropAreaPlugin = class extends WeavePlugin {
 };
 
 //#endregion
-//#region src/plugins/nodes-snapping/constants.ts
-const WEAVE_NODES_SNAPPING_KEY = "nodesSnapping";
-const GUIDE_LINE_NAME = "guide-line";
-const GUIDE_LINE_DEFAULT_CONFIG = {
-	stroke: "rgb(0, 161, 255)",
-	strokeWidth: 1,
-	dash: [4, 6]
-};
-const GUIDE_LINE_DRAG_SNAPPING_THRESHOLD = 10;
-const GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD = 10;
-const GUIDE_ORIENTATION = {
-	["HORIZONTAL"]: "H",
-	["VERTICAL"]: "V"
-};
-const NODE_SNAP = {
-	["START"]: "start",
-	["CENTER"]: "center",
-	["END"]: "end"
-};
-
-//#endregion
-//#region src/plugins/nodes-snapping/nodes-snapping.ts
-var WeaveNodesSnappingPlugin = class extends WeavePlugin {
+//#region src/plugins/nodes-edge-snapping/nodes-edge-snapping.ts
+var WeaveNodesEdgeSnappingPlugin = class extends WeavePlugin {
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
@@ -25909,7 +26158,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		this.enabled = true;
 	}
 	getName() {
-		return WEAVE_NODES_SNAPPING_KEY;
+		return WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY;
 	}
 	onInit() {
 		this.initEvents();
@@ -25917,32 +26166,6 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 	setEnabled(enabled) {
 		this.enabled = enabled;
 	}
-	getSelectedNodesMetadata(transformer) {
-		const firstNode = transformer.getNodes()[0];
-		const firstNodeClientRect = firstNode.getClientRect();
-		const rectCoordsMin = {
-			x: firstNodeClientRect.x,
-			y: firstNodeClientRect.y
-		};
-		const rectCoordsMax = {
-			x: firstNodeClientRect.x + firstNodeClientRect.width,
-			y: firstNodeClientRect.y + firstNodeClientRect.height
-		};
-		const nodes = [];
-		for (const node of transformer.getNodes()) {
-			const clientRect = node.getClientRect();
-			if (clientRect.x < rectCoordsMin.x) rectCoordsMin.x = clientRect.x;
-			if (clientRect.y < rectCoordsMin.y) rectCoordsMin.y = clientRect.y;
-			if (clientRect.x + clientRect.width > rectCoordsMax.x) rectCoordsMax.x = clientRect.x + clientRect.width;
-			if (clientRect.y + clientRect.height > rectCoordsMax.y) rectCoordsMax.y = clientRect.y + clientRect.height;
-			nodes.push(node.getAttrs().id);
-		}
-		return {
-			width: rectCoordsMax.x - rectCoordsMin.x,
-			height: rectCoordsMax.y - rectCoordsMin.y,
-			nodes
-		};
-	}
 	deleteGuides() {
 		const utilityLayer = this.instance.getUtilityLayer();
 		if (utilityLayer) utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
@@ -25951,87 +26174,73 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
 		if (!utilityLayer) return;
-		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-		let skipNodes = [];
-		let node = void 0;
-		if (e.type === "dragmove" && nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length === 1) {
-			node = nodesSelectionPlugin.getTransformer().nodes()[0];
-			skipNodes.push(node.getAttrs().id ?? "");
-		}
-		if (e.type === "dragmove" && nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length > 1) {
-			const { nodes } = this.getSelectedNodesMetadata(nodesSelectionPlugin.getTransformer());
-			node = nodesSelectionPlugin.getTransformer();
-			skipNodes = [...nodes];
-		}
-		if (e.type === "transform") {
-			node = e.target;
-			skipNodes.push(node.getAttrs().id ?? "");
-		}
+		const { targetNode: node, skipNodes } = getTargetAndSkipNodes(this.instance, e);
 		if (typeof node === "undefined") return;
-		const lineGuideStops = this.getLineGuideStops(skipNodes);
+		const visibleNodes = this.getVisibleNodes(skipNodes);
+		const lineGuideStops = this.getLineGuideStops(visibleNodes);
 		const itemBounds = this.getObjectSnappingEdges(node);
 		const guides = this.getGuides(lineGuideStops, itemBounds, e.type);
-		utilityLayer.destroyChildren();
-		if (!guides.length) return;
-		utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
-		this.drawGuides(guides);
-		if (e.type === "dragmove") {
-			const orgAbsPos = node.absolutePosition();
-			const absPos = node.absolutePosition();
-			guides.forEach((lg) => {
-				switch (lg.orientation) {
-					case GUIDE_ORIENTATION.VERTICAL: {
-						absPos.x = lg.lineGuide + lg.offset;
-						break;
-					}
-					case GUIDE_ORIENTATION.HORIZONTAL: {
-						absPos.y = lg.lineGuide + lg.offset;
-						break;
-					}
-				}
-			});
-			const vecDiff = {
-				x: orgAbsPos.x - absPos.x,
-				y: orgAbsPos.y - absPos.y
-			};
-			if (node instanceof konva.default.Transformer) node.getNodes().forEach((n) => {
-				const nodeAbsPos = n.getAbsolutePosition();
-				const newPos = {
-					x: nodeAbsPos.x - vecDiff.x,
-					y: nodeAbsPos.y - vecDiff.y
-				};
-				n.setAbsolutePosition(newPos);
-			});
-			else node.absolutePosition(absPos);
-		}
-		if (e.type === "transform") {
-			const nodesSelectionPlugin$1 = this.instance.getPlugin("nodesSelection");
-			if (nodesSelectionPlugin$1) {
-				const transformer = nodesSelectionPlugin$1.getTransformer();
-				transformer.anchorDragBoundFunc((_, newAbsPos) => {
-					const finalPos = { ...newAbsPos };
-					for (const lg of guides) switch (lg.orientation) {
+		this.cleanupGuidelines();
+		if (guides.length > 0) {
+			this.drawGuides(guides);
+			if (e.type === "dragmove") {
+				const orgAbsPos = node.absolutePosition();
+				const absPos = node.absolutePosition();
+				guides.forEach((lg) => {
+					switch (lg.orientation) {
 						case GUIDE_ORIENTATION.VERTICAL: {
-							const distX = Math.sqrt(Math.pow(newAbsPos.x - lg.lineGuide, 2));
-							if (distX < this.transformSnappingThreshold) finalPos.x = lg.lineGuide;
+							absPos.x = lg.lineGuide + lg.offset;
 							break;
 						}
 						case GUIDE_ORIENTATION.HORIZONTAL: {
-							const distY = Math.sqrt(Math.pow(newAbsPos.y - lg.lineGuide, 2));
-							if (distY < this.transformSnappingThreshold) finalPos.y = lg.lineGuide;
+							absPos.y = lg.lineGuide + lg.offset;
 							break;
 						}
 					}
-					return finalPos;
 				});
+				const vecDiff = {
+					x: orgAbsPos.x - absPos.x,
+					y: orgAbsPos.y - absPos.y
+				};
+				if (node instanceof konva.default.Transformer) node.getNodes().forEach((n) => {
+					const nodeAbsPos = n.getAbsolutePosition();
+					const newPos = {
+						x: nodeAbsPos.x - vecDiff.x,
+						y: nodeAbsPos.y - vecDiff.y
+					};
+					n.setAbsolutePosition(newPos);
+				});
+				else node.absolutePosition(absPos);
+			}
+			if (e.type === "transform") {
+				const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+				if (nodesSelectionPlugin) {
+					const transformer = nodesSelectionPlugin.getTransformer();
+					transformer.anchorDragBoundFunc((_, newAbsPos) => {
+						const finalPos = { ...newAbsPos };
+						for (const lg of guides) switch (lg.orientation) {
+							case GUIDE_ORIENTATION.VERTICAL: {
+								const distX = Math.sqrt(Math.pow(newAbsPos.x - lg.lineGuide, 2));
+								if (distX < this.transformSnappingThreshold) finalPos.x = lg.lineGuide;
+								break;
+							}
+							case GUIDE_ORIENTATION.HORIZONTAL: {
+								const distY = Math.sqrt(Math.pow(newAbsPos.y - lg.lineGuide, 2));
+								if (distY < this.transformSnappingThreshold) finalPos.y = lg.lineGuide;
+								break;
+							}
+						}
+						return finalPos;
+					});
+				}
 			}
 		}
 	}
-	cleanupEvaluateGuidelines() {
+	cleanupGuidelines() {
 		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
 		if (!utilityLayer) return;
-		utilityLayer.destroyChildren();
+		this.deleteGuides();
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
@@ -26041,45 +26250,29 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 				this.evaluateGuidelines(e);
 			});
 			stage.on("dragend", () => {
-				this.cleanupEvaluateGuidelines();
+				this.cleanupGuidelines();
 			});
 		}
 	}
-	nodeIntersectsViewport(node) {
-		const stage = this.instance.getStage();
-		const scale = stage.scaleX();
-		const stageWidth = stage.width() / scale;
-		const stageHeight = stage.height() / scale;
-		const viewportRect = {
-			x: -stage.x() / scale,
-			y: -stage.y() / scale,
-			width: stageWidth,
-			height: stageHeight
-		};
-		if (!node.isVisible()) return false;
-		const box = node.getClientRect({ relativeTo: stage });
-		const intersects = box.x + box.width > viewportRect.x && box.x < viewportRect.x + viewportRect.width && box.y + box.height > viewportRect.y && box.y < viewportRect.y + viewportRect.height;
-		return intersects;
-	}
-	getLineGuideStops(skipNodes) {
+	getVisibleNodes(skipNodes) {
 		const stage = this.instance.getStage();
 		const nodesSelection = this.instance.getPlugin("nodesSelection");
 		if (nodesSelection) nodesSelection.getTransformer().hide();
-		const vertical = [
-			0,
-			stage.width() / 2,
-			stage.width()
-		];
-		const horizontal = [
-			0,
-			stage.height() / 2,
-			stage.height()
-		];
-		stage.find(".node").forEach((guideItem) => {
-			if (guideItem.getParent()?.getAttrs().nodeType === "group") return;
-			if (skipNodes.includes(guideItem.getParent()?.getAttrs().nodeId)) return;
-			if (skipNodes.includes(guideItem.getAttrs().id ?? "")) return;
-			if (!this.nodeIntersectsViewport(guideItem)) return;
+		const nodes = getVisibleNodesInViewport(stage, this.instance.getMainLayer());
+		const finalVisibleNodes = [];
+		nodes.forEach((node) => {
+			if (node.getParent()?.getAttrs().nodeType === "group") return;
+			if (skipNodes.includes(node.getParent()?.getAttrs().nodeId)) return;
+			if (skipNodes.includes(node.getAttrs().id ?? "")) return;
+			finalVisibleNodes.push(node);
+		});
+		if (nodesSelection) nodesSelection.getTransformer().show();
+		return finalVisibleNodes;
+	}
+	getLineGuideStops(nodes) {
+		const vertical = [];
+		const horizontal = [];
+		nodes.forEach((guideItem) => {
 			const box = guideItem.getClientRect({ skipStroke: true });
 			vertical.push([
 				box.x,
@@ -26092,7 +26285,6 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 				box.y + box.height / 2
 			]);
 		});
-		if (nodesSelection) nodesSelection.getTransformer().show();
 		return {
 			vertical: vertical.flat(),
 			horizontal: horizontal.flat()
@@ -26110,16 +26302,19 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		const snappingEdges = {
 			vertical: [
 				{
+					nodeId: node.getAttrs().id ?? "",
 					guide: box.x,
 					offset: Math.round(absPos.x - box.x),
 					snap: NODE_SNAP.START
 				},
 				{
+					nodeId: node.getAttrs().id ?? "",
 					guide: box.x + box.width / 2,
 					offset: Math.round(absPos.x - box.x - box.width / 2),
 					snap: NODE_SNAP.CENTER
 				},
 				{
+					nodeId: node.getAttrs().id ?? "",
 					guide: box.x + box.width,
 					offset: Math.round(absPos.x - box.x - box.width),
 					snap: NODE_SNAP.END
@@ -26127,16 +26322,19 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 			],
 			horizontal: [
 				{
+					nodeId: node.getAttrs().id ?? "",
 					guide: Math.round(box.y),
 					offset: Math.round(absPos.y - box.y),
 					snap: NODE_SNAP.START
 				},
 				{
+					nodeId: node.getAttrs().id ?? "",
 					guide: Math.round(box.y + box.height / 2),
 					offset: Math.round(absPos.y - box.y - box.height / 2),
 					snap: NODE_SNAP.CENTER
 				},
 				{
+					nodeId: node.getAttrs().id ?? "",
 					guide: Math.round(box.y + box.height),
 					offset: Math.round(absPos.y - box.y - box.height),
 					snap: NODE_SNAP.END
@@ -26146,34 +26344,45 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		return snappingEdges;
 	}
 	getGuides(lineGuideStops, itemBounds, type) {
+		const resultMapV = new Map();
+		const resultMapH = new Map();
 		const resultV = [];
 		const resultH = [];
 		lineGuideStops.vertical.forEach((lineGuide) => {
 			itemBounds.vertical.forEach((itemBound) => {
 				const diff = Math.abs(lineGuide - itemBound.guide);
-				if (diff < this.dragSnappingThreshold) resultV.push({
-					lineGuide,
-					diff,
-					snap: itemBound.snap,
-					offset: itemBound.offset
-				});
+				if (diff < this.dragSnappingThreshold && !resultMapV.has(itemBound.nodeId)) {
+					const guide = {
+						nodeId: itemBound.nodeId,
+						lineGuide,
+						diff,
+						snap: itemBound.snap,
+						offset: itemBound.offset
+					};
+					resultMapV.set(itemBound.nodeId, guide);
+					resultV.push(guide);
+				}
 			});
 		});
 		lineGuideStops.horizontal.forEach((lineGuide) => {
 			itemBounds.horizontal.forEach((itemBound) => {
 				const diff = Math.abs(lineGuide - itemBound.guide);
-				if (diff < this.dragSnappingThreshold) resultH.push({
-					lineGuide,
-					diff,
-					snap: itemBound.snap,
-					offset: itemBound.offset
-				});
+				if (diff < this.dragSnappingThreshold && !resultMapH.has(itemBound.nodeId)) {
+					const guide = {
+						nodeId: itemBound.nodeId,
+						lineGuide,
+						diff,
+						snap: itemBound.snap,
+						offset: itemBound.offset
+					};
+					resultMapH.set(itemBound.nodeId, guide);
+					resultH.push(guide);
+				}
 			});
 		});
 		const guides = [];
 		if (type === "dragmove") {
-			const minV = resultV.sort((a, b) => a.diff - b.diff)[0];
-			const minH = resultH.sort((a, b) => a.diff - b.diff)[0];
+			const { minH, minV } = this.sortedGuides(resultH, resultV);
 			if (minV) guides.push({
 				lineGuide: minV.lineGuide,
 				offset: minV.offset,
@@ -26207,6 +26416,14 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		}
 		return guides;
 	}
+	sortedGuides(resultH, resultV) {
+		const minV = resultV.toSorted((a, b) => a.diff - b.diff)[0];
+		const minH = resultH.toSorted((a, b) => a.diff - b.diff)[0];
+		return {
+			minH,
+			minV
+		};
+	}
 	drawGuides(guides) {
 		const stage = this.instance.getStage();
 		const utilityLayer = this.instance.getUtilityLayer();
@@ -26259,6 +26476,518 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 	}
 };
 
+//#endregion
+//#region src/plugins/nodes-distance-snapping/nodes-distance-snapping.ts
+var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
+	peerDistanceX = null;
+	peerDistanceY = null;
+	snapPositionX = null;
+	snapPositionY = null;
+	currentSizeSnapHorizontal = null;
+	currentSizeSnapVertical = null;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.enterSnappingTolerance = config?.enterSnappingTolerance ?? GUIDE_ENTER_SNAPPING_TOLERANCE;
+		this.exitSnappingTolerance = config?.exitSnappingTolerance ?? GUIDE_EXIT_SNAPPING_TOLERANCE;
+		this.enabled = true;
+	}
+	getName() {
+		return WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY;
+	}
+	onInit() {
+		this.initEvents();
+	}
+	setEnabled(enabled) {
+		this.enabled = enabled;
+	}
+	deleteGuides() {
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (utilityLayer) {
+			utilityLayer.find(`.${GUIDE_HORIZONTAL_LINE_NAME}`).forEach((l) => l.destroy());
+			utilityLayer.find(`.${GUIDE_VERTICAL_LINE_NAME}`).forEach((l) => l.destroy());
+		}
+	}
+	evaluateGuidelines(e) {
+		const stage = this.instance.getStage();
+		const mainLayer = this.instance.getMainLayer();
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (!this.enabled) return;
+		if (!utilityLayer) return;
+		const { targetNode: node, skipNodes } = getTargetAndSkipNodes(this.instance, e);
+		if (typeof node === "undefined") return;
+		if (node.getParent() === mainLayer) this.referenceLayer = mainLayer;
+		if (node.getParent()?.getAttrs().nodeId) {
+			const realNode = stage.findOne(`#${node.getParent()?.getAttrs().nodeId}`);
+			if (realNode) this.referenceLayer = realNode;
+		}
+		const visibleNodes = this.getVisibleNodes(skipNodes);
+		const { intersectedNodes: sortedHorizontalIntersectedNodes, intersectedNodesWithDistances: horizontalIntersectedNodes } = this.getHorizontallyIntersectingNodes(node, visibleNodes);
+		const { intersectedNodes: sortedVerticalIntersectedNodes, intersectedNodesWithDistances: verticalIntersectedNodes } = this.getVerticallyIntersectingNodes(node, visibleNodes);
+		this.cleanupGuidelines();
+		if (horizontalIntersectedNodes.length > 0 || verticalIntersectedNodes.length > 0) {
+			if (e.type === "dragmove") {
+				this.validateHorizontalSnapping(node, visibleNodes, sortedHorizontalIntersectedNodes, horizontalIntersectedNodes);
+				this.validateVerticalSnapping(node, visibleNodes, sortedVerticalIntersectedNodes, verticalIntersectedNodes);
+			}
+		}
+	}
+	getBoxClientRect(node) {
+		const stage = this.instance.getStage();
+		return node.getClientRect({
+			relativeTo: stage,
+			skipStroke: true,
+			skipShadow: true
+		});
+	}
+	getPeers(intersectedNodes, targetNode, prev, next) {
+		const peers = intersectedNodes.filter((int) => {
+			if (prev && next) return int.to.getAttrs().id !== targetNode.getAttrs().id && int.from.getAttrs().id !== targetNode.getAttrs().id;
+			if (!prev && next) return int.from.getAttrs().id !== targetNode.getAttrs().id;
+			return int.to.getAttrs().id !== targetNode.getAttrs().id;
+		});
+		let prevBox = null;
+		if (prev) prevBox = this.getBoxClientRect(prev);
+		let nextBox = null;
+		if (next) nextBox = this.getBoxClientRect(next);
+		return {
+			prevBox,
+			nextBox,
+			peers
+		};
+	}
+	validateHorizontalSnapping(node, visibleNodes, sortedHorizontalIntersectedNodes, horizontalIntersectedNodes) {
+		const box = this.getBoxClientRect(node);
+		const targetIndex = sortedHorizontalIntersectedNodes.findIndex((actNode) => actNode.getAttrs().id === node.getAttrs().id);
+		const prev = sortedHorizontalIntersectedNodes[targetIndex - 1];
+		const next = sortedHorizontalIntersectedNodes[targetIndex + 1];
+		const { prevBox, nextBox, peers } = this.getPeers(horizontalIntersectedNodes, node, prev, next);
+		if (this.currentSizeSnapHorizontal === NODE_SNAP_HORIZONTAL.LEFT && prev && prevBox) {
+			const dist = Math.round(box.x - (prevBox.x + prevBox.width));
+			const match = peers.find((d) => Math.abs(d.distance - dist) <= this.exitSnappingTolerance);
+			if (!match) this.currentSizeSnapHorizontal = null;
+		}
+		if (this.currentSizeSnapHorizontal === NODE_SNAP_HORIZONTAL.RIGHT && next && nextBox) {
+			const dist = Math.round(nextBox.x - (box.x + box.width));
+			const match = peers.find((d) => Math.abs(d.distance - dist) <= this.exitSnappingTolerance);
+			if (!match) this.currentSizeSnapHorizontal = null;
+		}
+		if (prev && prevBox && next && nextBox && prevBox.x + prevBox.width <= box.x && box.x + box.width <= nextBox.x) {
+			const distanceToPrev = box.x - (prevBox.x + prevBox.width);
+			const distanceToNext = nextBox.x - (box.x + box.width);
+			const delta = Math.abs(distanceToPrev - distanceToNext);
+			if (delta <= this.enterSnappingTolerance) {
+				const center = (prevBox.x + prevBox.width + nextBox.x) / 2;
+				const newX = center - box.width / 2;
+				this.setNodeClientRectX(node, newX);
+				this.snapPositionX = node.x();
+				this.currentSizeSnapHorizontal = NODE_SNAP_HORIZONTAL.CENTER;
+				const newBox = this.getBoxClientRect(node);
+				this.peerDistanceX = Math.round(newBox.x - (prevBox.x + prevBox.width));
+			}
+			if (this.currentSizeSnapHorizontal === NODE_SNAP_HORIZONTAL.CENTER && delta > this.exitSnappingTolerance) this.currentSizeSnapHorizontal = null;
+		}
+		if (this.currentSizeSnapHorizontal && this.peerDistanceX && this.snapPositionX) {
+			node.x(this.snapPositionX);
+			const { intersectedNodesWithDistances: newHorizontalIntersectedNodes } = this.getHorizontallyIntersectingNodes(node, visibleNodes);
+			this.drawSizeGuidesHorizontally(newHorizontalIntersectedNodes, this.peerDistanceX);
+			return;
+		}
+		const canSnapLeft = prev && prevBox && (() => {
+			const dist = Math.round(box.x - (prevBox.x + prevBox.width));
+			const match = peers.find((d) => Math.abs(d.distance - dist) <= this.enterSnappingTolerance);
+			if (match) {
+				const newX = prevBox.x + prevBox.width + match.distance;
+				this.setNodeClientRectX(node, newX);
+				this.snapPositionX = node.x();
+				this.currentSizeSnapHorizontal = NODE_SNAP_HORIZONTAL.LEFT;
+				const newBox = this.getBoxClientRect(node);
+				this.peerDistanceX = Math.round(newBox.x - (prevBox.x + prevBox.width));
+				return true;
+			}
+			return false;
+		})();
+		if (!canSnapLeft && next && nextBox) {
+			const dist = Math.round(nextBox.x - (box.x + box.width));
+			const match = peers.find((d) => Math.abs(d.distance - dist) <= this.enterSnappingTolerance);
+			if (match) {
+				const newX = nextBox.x - match.distance - box.width;
+				this.setNodeClientRectX(node, newX);
+				this.snapPositionX = node.x();
+				const newBox = this.getBoxClientRect(node);
+				this.peerDistanceX = Math.round(nextBox.x - (newBox.x + newBox.width));
+				this.currentSizeSnapHorizontal = NODE_SNAP_HORIZONTAL.RIGHT;
+			}
+		}
+	}
+	validateVerticalSnapping(node, visibleNodes, sortedVerticalIntersectedNodes, verticalIntersectedNodes) {
+		const box = this.getBoxClientRect(node);
+		const targetIndex = sortedVerticalIntersectedNodes.findIndex((actNode) => actNode.getAttrs().id === node.getAttrs().id);
+		const prev = sortedVerticalIntersectedNodes[targetIndex - 1];
+		const next = sortedVerticalIntersectedNodes[targetIndex + 1];
+		const { prevBox, nextBox, peers } = this.getPeers(verticalIntersectedNodes, node, prev, next);
+		if (this.currentSizeSnapVertical === NODE_SNAP_VERTICAL.TOP && prev && prevBox) {
+			const dist = Math.round(box.y - (prevBox.y + prevBox.height));
+			const match = peers.find((d) => Math.abs(d.distance - dist) <= this.exitSnappingTolerance);
+			if (!match) this.currentSizeSnapVertical = null;
+		}
+		if (this.currentSizeSnapVertical === NODE_SNAP_VERTICAL.BOTTOM && next && nextBox) {
+			const dist = Math.round(nextBox.y - (box.y + box.height));
+			const match = peers.find((d) => Math.abs(d.distance - dist) <= this.exitSnappingTolerance);
+			if (!match) this.currentSizeSnapVertical = null;
+		}
+		if (prev && prevBox && next && nextBox && prevBox.y + prevBox.height <= box.y && box.y + box.height <= nextBox.y) {
+			const distanceToPrev = box.y - (prevBox.y + prevBox.height);
+			const distanceToNext = nextBox.y - (box.y + box.height);
+			const delta = Math.abs(distanceToPrev - distanceToNext);
+			if (delta <= this.enterSnappingTolerance) {
+				const center = (prevBox.y + prevBox.height + nextBox.y) / 2;
+				const newY = center - box.height / 2;
+				this.setNodeClientRectY(node, newY);
+				this.snapPositionY = node.y();
+				this.currentSizeSnapVertical = NODE_SNAP_VERTICAL.MIDDLE;
+				const newBox = this.getBoxClientRect(node);
+				this.peerDistanceY = Math.round(newBox.y - (prevBox.y + prevBox.height));
+			}
+			if (this.currentSizeSnapVertical === NODE_SNAP_VERTICAL.MIDDLE && delta > this.exitSnappingTolerance) this.currentSizeSnapVertical = null;
+		}
+		if (this.currentSizeSnapVertical && this.peerDistanceY && this.snapPositionY) {
+			node.y(this.snapPositionY);
+			const { intersectedNodesWithDistances: newVerticalIntersectedNodes } = this.getVerticallyIntersectingNodes(node, visibleNodes);
+			this.drawSizeGuidesVertically(newVerticalIntersectedNodes, this.peerDistanceY);
+			return;
+		}
+		const canSnapTop = prev && prevBox && (() => {
+			const dist = Math.round(box.y - (prevBox.y + prevBox.height));
+			const match = peers.find((d) => Math.abs(d.distance - dist) <= this.enterSnappingTolerance);
+			if (match) {
+				const newY = prevBox.y + prevBox.height + match.distance;
+				this.setNodeClientRectY(node, newY);
+				this.snapPositionY = node.y();
+				this.currentSizeSnapVertical = NODE_SNAP_VERTICAL.TOP;
+				const newBox = this.getBoxClientRect(node);
+				this.peerDistanceY = Math.round(newBox.y - (prevBox.y + prevBox.height));
+				return true;
+			}
+			return false;
+		})();
+		if (!canSnapTop && next && nextBox) {
+			const dist = Math.round(nextBox.y - (box.y + box.height));
+			const match = peers.find((d) => Math.abs(d.distance - dist) <= this.enterSnappingTolerance);
+			if (match) {
+				const newY = nextBox.y - match.distance - box.height;
+				this.setNodeClientRectY(node, newY);
+				this.snapPositionY = node.y();
+				const newBox = this.getBoxClientRect(node);
+				this.peerDistanceY = Math.round(nextBox.y - (newBox.y + newBox.height));
+				this.currentSizeSnapVertical = NODE_SNAP_VERTICAL.BOTTOM;
+			}
+		}
+	}
+	setNodeClientRectX(node, snappedClientX) {
+		if (node.getParent()?.getType() === "Layer") {
+			node.x(snappedClientX);
+			return;
+		}
+		const box = this.getBoxClientRect(node);
+		const absolutePos = node.getAbsolutePosition();
+		const offsetX = absolutePos.x - box.x;
+		const newAbsX = snappedClientX + offsetX;
+		const parent = node.getParent();
+		if (!parent) {
+			console.warn("Node has no parent to set position");
+			return;
+		}
+		const local = parent.getAbsoluteTransform().copy().invert().point({
+			x: newAbsX,
+			y: absolutePos.y
+		});
+		node.position({
+			x: local.x,
+			y: node.y()
+		});
+	}
+	setNodeClientRectY(node, snappedClientY) {
+		if (node.getParent()?.getType() === "Layer") {
+			node.y(snappedClientY);
+			return;
+		}
+		const box = this.getBoxClientRect(node);
+		const absolutePos = node.getAbsolutePosition();
+		const offsetY = absolutePos.y - box.y;
+		const newAbsY = snappedClientY + offsetY;
+		const parent = node.getParent();
+		if (!parent) {
+			console.warn("Node has no parent to set position");
+			return;
+		}
+		const local = parent.getAbsoluteTransform().copy().invert().point({
+			x: absolutePos.x,
+			y: newAbsY
+		});
+		node.position({
+			x: node.x(),
+			y: local.y
+		});
+	}
+	cleanupGuidelines() {
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (!this.enabled) return;
+		if (!utilityLayer) return;
+		this.deleteGuides();
+	}
+	initEvents() {
+		const stage = this.instance.getStage();
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (utilityLayer) {
+			stage.on("dragmove", (e) => {
+				this.evaluateGuidelines(e);
+			});
+			stage.on("dragend", () => {
+				this.peerDistanceX = null;
+				this.peerDistanceY = null;
+				this.currentSizeSnapVertical = null;
+				this.currentSizeSnapHorizontal = null;
+				this.cleanupGuidelines();
+			});
+		}
+	}
+	getVerticallyIntersectingNodes(targetNode, nodes) {
+		const targetBox = this.getBoxClientRect(targetNode);
+		const intersectedNodes = [];
+		nodes.forEach((node) => {
+			if (node === targetNode || !node.isVisible()) return false;
+			const box = this.getBoxClientRect(node);
+			const horizontalOverlap = box.x + box.width > targetBox.x && box.x < targetBox.x + targetBox.width;
+			if (horizontalOverlap) intersectedNodes.push(node);
+		});
+		intersectedNodes.push(targetNode);
+		intersectedNodes.sort((a, b) => {
+			const ay = this.getBoxClientRect(a).y;
+			const by = this.getBoxClientRect(b).y;
+			return ay - by;
+		});
+		const intersectedNodesWithDistances = [];
+		for (let i = 0; i < intersectedNodes.length - 1; i++) {
+			const a = intersectedNodes[i];
+			const b = intersectedNodes[i + 1];
+			const boxA = this.getBoxClientRect(a);
+			const boxB = this.getBoxClientRect(b);
+			const aBottom = boxA.y + boxA.height;
+			const bTop = boxB.y;
+			const distance = Math.abs(aBottom - bTop);
+			const left = Math.max(boxA.x, boxB.x);
+			const right = Math.min(boxA.x + boxA.width, boxB.x + boxB.width);
+			let midX;
+			if (right > left) midX = left + (right - left) / 2;
+			else {
+				const aCenterX = boxA.x + boxA.width / 2;
+				const bCenterX = boxB.x + boxB.width / 2;
+				midX = (aCenterX + bCenterX) / 2;
+			}
+			intersectedNodesWithDistances.push({
+				index: i,
+				from: a,
+				to: b,
+				midX,
+				distance: Math.round(distance)
+			});
+		}
+		return {
+			intersectedNodes,
+			intersectedNodesWithDistances
+		};
+	}
+	getHorizontallyIntersectingNodes(targetNode, nodes) {
+		const targetBox = this.getBoxClientRect(targetNode);
+		const intersectedNodes = [];
+		nodes.forEach((node) => {
+			if (node === targetNode || !node.isVisible()) return false;
+			const box = this.getBoxClientRect(node);
+			const verticalOverlap = box.y + box.height > targetBox.y && box.y < targetBox.y + targetBox.height;
+			if (verticalOverlap) intersectedNodes.push(node);
+		});
+		intersectedNodes.push(targetNode);
+		intersectedNodes.sort((a, b) => {
+			const ax = this.getBoxClientRect(a).x;
+			const bx = this.getBoxClientRect(b).x;
+			return ax - bx;
+		});
+		const intersectedNodesWithDistances = [];
+		for (let i = 0; i < intersectedNodes.length - 1; i++) {
+			const a = intersectedNodes[i];
+			const b = intersectedNodes[i + 1];
+			const boxA = this.getBoxClientRect(a);
+			const boxB = this.getBoxClientRect(b);
+			const aRight = boxA.x + boxA.width;
+			const bLeft = boxB.x;
+			const distance = Math.abs(Math.round(aRight - bLeft));
+			const top = Math.max(boxA.y, boxB.y);
+			const bottom = Math.min(boxA.y + boxA.height, boxB.y + boxB.height);
+			let midY;
+			if (bottom > top) midY = top + (bottom - top) / 2;
+			else {
+				const aCenterY = boxA.y + boxA.height / 2;
+				const bCenterY = boxB.y + boxB.height / 2;
+				midY = (aCenterY + bCenterY) / 2;
+			}
+			intersectedNodesWithDistances.push({
+				index: i,
+				from: a,
+				to: b,
+				midY,
+				distance
+			});
+		}
+		return {
+			intersectedNodes,
+			intersectedNodesWithDistances
+		};
+	}
+	getVisibleNodes(skipNodes) {
+		const stage = this.instance.getStage();
+		const nodesSelection = this.instance.getPlugin("nodesSelection");
+		if (nodesSelection) nodesSelection.getTransformer().hide();
+		const nodes = getVisibleNodesInViewport(stage, this.referenceLayer);
+		const finalVisibleNodes = [];
+		nodes.forEach((node) => {
+			if (node.getParent()?.getAttrs().nodeType === "group") return;
+			if (skipNodes.includes(node.getParent()?.getAttrs().nodeId)) return;
+			if (skipNodes.includes(node.getAttrs().id ?? "")) return;
+			if (node.getParent() !== this.referenceLayer && !node.getParent()?.getAttrs().nodeId) return;
+			if (node.getParent() !== this.referenceLayer && node.getParent()?.getAttrs().nodeId) {
+				const realNode = stage.findOne(`#${node.getParent()?.getAttrs().nodeId}`);
+				if (realNode && realNode !== this.referenceLayer) return;
+			}
+			finalVisibleNodes.push(node);
+		});
+		if (nodesSelection) nodesSelection.getTransformer().show();
+		return finalVisibleNodes;
+	}
+	drawSizeGuidesHorizontally(intersectionsH, peerDistance) {
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (utilityLayer) intersectionsH.forEach((pairInfo) => {
+			const from = this.getBoxClientRect(pairInfo.from);
+			const to = this.getBoxClientRect(pairInfo.to);
+			if (pairInfo.distance === peerDistance) this.renderHorizontalLineWithDistanceBetweenNodes(from, to, pairInfo.midY, `${pairInfo.distance}`);
+		});
+	}
+	drawSizeGuidesVertically(intersectionsV, peerDistance) {
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (utilityLayer) intersectionsV.forEach((pairInfo) => {
+			const from = this.getBoxClientRect(pairInfo.from);
+			const to = this.getBoxClientRect(pairInfo.to);
+			if (pairInfo.distance === peerDistance) this.renderVerticalLineWithDistanceBetweenNodes(from, to, pairInfo.midX, `${pairInfo.distance}`);
+		});
+	}
+	renderDistanceLabel(ctx, stage, labelText, { canvasMidX, canvasMidY }) {
+		const scaleX = stage?.scaleX() || 1;
+		const scaleY = stage?.scaleY() || 1;
+		const fontSize = 12;
+		const fontFamily = "Arial";
+		const padding = 6;
+		const tempText = new konva.default.Text({
+			text: labelText,
+			fontSize,
+			fontFamily,
+			visible: false
+		});
+		const textWidth = tempText.width();
+		const textHeight = tempText.height();
+		const labelWidth = textWidth + padding * 2;
+		const labelHeight = textHeight + padding * 2;
+		ctx.save();
+		ctx.scale(1 / scaleX, 1 / scaleY);
+		const labelX = canvasMidX - labelWidth / 2;
+		const labelY = canvasMidY - labelHeight / 2;
+		ctx.beginPath();
+		ctx.rect(labelX, labelY, labelWidth, labelHeight);
+		ctx.fillStyle = "#ff0000";
+		ctx.fill();
+		ctx.font = `bold ${fontSize}px ${fontFamily}`;
+		ctx.fillStyle = "white";
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.fillText(labelText, canvasMidX, labelY + labelHeight / 2);
+		ctx.restore();
+	}
+	renderHorizontalLineWithDistanceBetweenNodes(from, to, midY, labelText) {
+		const utilityLayer = this.instance.getUtilityLayer();
+		const renderLabel = this.renderDistanceLabel;
+		const lineWithLabel = new konva.default.Shape({
+			name: GUIDE_HORIZONTAL_LINE_NAME,
+			sceneFunc: function(ctx, shape) {
+				const stage = shape.getStage();
+				const scaleX = stage?.scaleX() || 1;
+				const scaleY = stage?.scaleY() || 1;
+				const x1 = from.x + from.width;
+				const x2 = to.x;
+				const y = midY;
+				ctx.beginPath();
+				ctx.moveTo(x1, y);
+				ctx.lineTo(x2, y);
+				ctx.closePath();
+				ctx.strokeStyle = "#ff0000";
+				ctx.lineWidth = 1;
+				ctx.setLineDash([]);
+				ctx.stroke();
+				ctx.closePath();
+				const worldMidX = (x1 + x2) / 2;
+				const worldMidY = y;
+				const canvasMidX = worldMidX * scaleX;
+				const canvasMidY = worldMidY * scaleY;
+				renderLabel(ctx, stage, labelText, {
+					canvasMidX,
+					canvasMidY
+				});
+				ctx.fillStrokeShape(shape);
+			}
+		});
+		lineWithLabel.moveToBottom();
+		utilityLayer?.add(lineWithLabel);
+	}
+	renderVerticalLineWithDistanceBetweenNodes(from, to, midX, labelText) {
+		const utilityLayer = this.instance.getUtilityLayer();
+		const renderLabel = this.renderDistanceLabel;
+		const lineWithLabel = new konva.default.Shape({
+			name: GUIDE_VERTICAL_LINE_NAME,
+			sceneFunc: function(ctx, shape) {
+				const stage = shape.getStage();
+				const scaleX = stage?.scaleX() || 1;
+				const scaleY = stage?.scaleY() || 1;
+				const x = midX;
+				const y1 = from.y + from.height;
+				const y2 = to.y;
+				ctx.beginPath();
+				ctx.setLineDash([]);
+				ctx.moveTo(x, y1);
+				ctx.lineTo(x, y2);
+				ctx.strokeStyle = "#ff0000";
+				ctx.lineWidth = 1;
+				ctx.stroke();
+				ctx.closePath();
+				const worldMidX = x;
+				const worldMidY = (y1 + y2) / 2;
+				const canvasMidX = worldMidX * scaleX;
+				const canvasMidY = worldMidY * scaleY;
+				renderLabel(ctx, stage, labelText, {
+					canvasMidX,
+					canvasMidY
+				});
+				ctx.fillStrokeShape(shape);
+			}
+		});
+		lineWithLabel.moveToBottom();
+		utilityLayer?.add(lineWithLabel);
+	}
+	enable() {
+		this.enabled = true;
+	}
+	disable() {
+		this.enabled = false;
+	}
+};
+
 //#endregion
 exports.ALIGN_NODES_ALIGN_TO = ALIGN_NODES_ALIGN_TO
 exports.ALIGN_NODES_TOOL_ACTION_NAME = ALIGN_NODES_TOOL_ACTION_NAME
@@ -26274,16 +27003,22 @@ 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_ENTER_SNAPPING_TOLERANCE = GUIDE_ENTER_SNAPPING_TOLERANCE
+exports.GUIDE_EXIT_SNAPPING_TOLERANCE = GUIDE_EXIT_SNAPPING_TOLERANCE
+exports.GUIDE_HORIZONTAL_LINE_NAME = GUIDE_HORIZONTAL_LINE_NAME
 exports.GUIDE_LINE_DEFAULT_CONFIG = GUIDE_LINE_DEFAULT_CONFIG
 exports.GUIDE_LINE_DRAG_SNAPPING_THRESHOLD = GUIDE_LINE_DRAG_SNAPPING_THRESHOLD
 exports.GUIDE_LINE_NAME = GUIDE_LINE_NAME
 exports.GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD = GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD
 exports.GUIDE_ORIENTATION = GUIDE_ORIENTATION
+exports.GUIDE_VERTICAL_LINE_NAME = GUIDE_VERTICAL_LINE_NAME
 exports.IMAGE_TOOL_ACTION_NAME = IMAGE_TOOL_ACTION_NAME
 exports.IMAGE_TOOL_STATE = IMAGE_TOOL_STATE
 exports.MOVE_TOOL_ACTION_NAME = MOVE_TOOL_ACTION_NAME
 exports.MOVE_TOOL_STATE = MOVE_TOOL_STATE
 exports.NODE_SNAP = NODE_SNAP
+exports.NODE_SNAP_HORIZONTAL = NODE_SNAP_HORIZONTAL
+exports.NODE_SNAP_VERTICAL = NODE_SNAP_VERTICAL
 exports.PEN_TOOL_ACTION_NAME = PEN_TOOL_ACTION_NAME
 exports.PEN_TOOL_STATE = PEN_TOOL_STATE
 exports.RECTANGLE_TOOL_ACTION_NAME = RECTANGLE_TOOL_ACTION_NAME
@@ -26299,6 +27034,7 @@ exports.TEXT_TOOL_ACTION_NAME = TEXT_TOOL_ACTION_NAME
 exports.TEXT_TOOL_STATE = TEXT_TOOL_STATE
 exports.WEAVE_ARROW_NODE_TYPE = WEAVE_ARROW_NODE_TYPE
 exports.WEAVE_COPY_PASTE_NODES_KEY = WEAVE_COPY_PASTE_NODES_KEY
+exports.WEAVE_COPY_PASTE_PASTE_CATCHER_ID = WEAVE_COPY_PASTE_PASTE_CATCHER_ID
 exports.WEAVE_COPY_PASTE_PASTE_MODES = WEAVE_COPY_PASTE_PASTE_MODES
 exports.WEAVE_DEFAULT_USER_INFO_FUNCTION = WEAVE_DEFAULT_USER_INFO_FUNCTION
 exports.WEAVE_ELLIPSE_NODE_TYPE = WEAVE_ELLIPSE_NODE_TYPE
@@ -26322,9 +27058,10 @@ exports.WEAVE_IMAGE_CROP_END_TYPE = WEAVE_IMAGE_CROP_END_TYPE
 exports.WEAVE_IMAGE_NODE_TYPE = WEAVE_IMAGE_NODE_TYPE
 exports.WEAVE_LAYER_NODE_TYPE = WEAVE_LAYER_NODE_TYPE
 exports.WEAVE_LINE_NODE_TYPE = WEAVE_LINE_NODE_TYPE
+exports.WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY = WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY
+exports.WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY = WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY
 exports.WEAVE_NODES_SELECTION_KEY = WEAVE_NODES_SELECTION_KEY
 exports.WEAVE_NODES_SELECTION_LAYER_ID = WEAVE_NODES_SELECTION_LAYER_ID
-exports.WEAVE_NODES_SNAPPING_KEY = WEAVE_NODES_SNAPPING_KEY
 exports.WEAVE_RECTANGLE_NODE_TYPE = WEAVE_RECTANGLE_NODE_TYPE
 exports.WEAVE_REGULAR_POLYGON_NODE_TYPE = WEAVE_REGULAR_POLYGON_NODE_TYPE
 exports.WEAVE_STAGE_DEFAULT_MODE = WEAVE_STAGE_DEFAULT_MODE
@@ -26363,8 +27100,9 @@ exports.WeaveLayerNode = WeaveLayerNode
 exports.WeaveLineNode = WeaveLineNode
 exports.WeaveMoveToolAction = WeaveMoveToolAction
 exports.WeaveNode = WeaveNode
+exports.WeaveNodesDistanceSnappingPlugin = WeaveNodesDistanceSnappingPlugin
+exports.WeaveNodesEdgeSnappingPlugin = WeaveNodesEdgeSnappingPlugin
 exports.WeaveNodesSelectionPlugin = WeaveNodesSelectionPlugin
-exports.WeaveNodesSnappingPlugin = WeaveNodesSnappingPlugin
 exports.WeavePenToolAction = WeavePenToolAction
 exports.WeavePlugin = WeavePlugin
 exports.WeaveRectangleNode = WeaveRectangleNode
@@ -26392,9 +27130,13 @@ exports.clearContainerTargets = clearContainerTargets
 exports.containerOverCursor = containerOverCursor
 exports.containsNodeDeep = containsNodeDeep
 exports.getBoundingBox = getBoundingBox
+exports.getClosestParentWithId = getClosestParentWithId
 exports.getContrastTextColor = getContrastTextColor
 exports.getExportBoundingBox = getExportBoundingBox
+exports.getSelectedNodesMetadata = getSelectedNodesMetadata
+exports.getTargetAndSkipNodes = getTargetAndSkipNodes
 exports.getTargetedNode = getTargetedNode
+exports.getVisibleNodesInViewport = getVisibleNodesInViewport
 exports.hasFrames = hasFrames
 exports.hasImages = hasImages
 exports.intersectArrays = intersectArrays