@inditextech/weave-sdk 0.50.0 → 0.51.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;
@@ -15829,6 +15829,80 @@ 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;
+}
 
 //#endregion
 //#region src/actions/selection-tool/constants.ts
@@ -15863,7 +15937,7 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 		this.pointers = {};
 	}
 	getName() {
-		return WEAVE_CONTEXT_MENU_KEY;
+		return WEAVE_CONTEXT_MENU_PLUGIN_KEY;
 	}
 	onInit() {
 		this.initEvents();
@@ -16016,6 +16090,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 {
@@ -16482,7 +16595,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			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 +16839,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() {
@@ -17139,9 +17259,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 +17269,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);
@@ -17208,8 +17328,10 @@ 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) {
@@ -17349,6 +17471,14 @@ 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;
+	}
 };
 
 //#endregion
@@ -18916,7 +19046,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.50.0";
+var version = "0.51.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -25877,29 +26007,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 +26018,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 +26026,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 +26034,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 +26110,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 +26145,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 +26162,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 +26182,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 +26204,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 +26276,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 +26336,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 +26863,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
@@ -26322,9 +26917,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 +26959,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
@@ -26394,7 +26991,10 @@ exports.containsNodeDeep = containsNodeDeep
 exports.getBoundingBox = getBoundingBox
 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