@inditextech/weave-sdk 0.52.3 → 0.53.0

package/dist/sdk.js

@@ -15494,7 +15494,6 @@ var require_lodash = __commonJS({ "../../node_modules/lodash/lodash.js"(exports,
 		} else root._ = _;
 	}).call(exports);
 } });
-var import_lodash$1 = __toESM(require_lodash());
 var import_lodash = __toESM(require_lodash(), 1);
 
 //#endregion
@@ -15589,12 +15588,12 @@ var WeaveStore = class {
 					node: JSON.parse(JSON.stringify(nodeInfo.node))
 				});
 			}
-			if (!this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) {
+			if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
 				this.instance.setupRenderer();
 				this.isRoomLoaded = true;
 				this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 			}
-			if (this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) this.instance.render();
+			if (this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) this.instance.render();
 		});
 	}
 	canUndoStateStep() {
@@ -15926,6 +15925,27 @@ function getTopmostShadowHost(el) {
 	}
 	return current?.shadowRoot || null;
 }
+function getVisibleNodes(instance, stage, nodeParent, skipNodes, referenceLayer) {
+	const nodesSelection = instance.getPlugin("nodesSelection");
+	if (nodesSelection) nodesSelection.getTransformer().hide();
+	const nodes = getVisibleNodesInViewport(stage, referenceLayer);
+	const finalVisibleNodes = [];
+	nodes.forEach((node) => {
+		const actualNodeParent = instance.getNodeContainer(node);
+		if (actualNodeParent?.getAttrs().id !== nodeParent?.getAttrs().id) return;
+		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() !== referenceLayer && !node.getParent()?.getAttrs().nodeId) return;
+		if (node.getParent() !== referenceLayer && node.getParent()?.getAttrs().nodeId) {
+			const realNode = stage.findOne(`#${node.getParent()?.getAttrs().nodeId}`);
+			if (realNode && realNode !== referenceLayer) return;
+		}
+		finalVisibleNodes.push(node);
+	});
+	if (nodesSelection) nodesSelection.getTransformer().show();
+	return finalVisibleNodes;
+}
 
 //#endregion
 //#region src/actions/selection-tool/constants.ts
@@ -16161,6 +16181,22 @@ const NODE_SNAP = {
 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_DISTANCE_LINE_DEFAULT_CONFIG = {
+	line: {
+		stroke: "#E12D3C",
+		strokeWidth: 1
+	},
+	label: {
+		linePadding: 10,
+		height: 20,
+		cornerRadius: 0,
+		fill: "#E12D3C",
+		fontStyle: "normal",
+		fontSize: 14,
+		fontFamily: "Arial",
+		paddingX: 4
+	}
+};
 const GUIDE_ENTER_SNAPPING_TOLERANCE = 3;
 const GUIDE_EXIT_SNAPPING_TOLERANCE = 5;
 const NODE_SNAP_HORIZONTAL = {
@@ -16359,7 +16395,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (moved) this.getContextMenuPlugin()?.cancelLongPressTimer();
 			this.triggerSelectedNodesEvent();
 		};
-		tr.on("transform", (0, import_lodash$1.throttle)(handleTransform, 50));
+		tr.on("transform", (0, import_lodash.throttle)(handleTransform, 50));
 		tr.on("transformend", () => {
 			this.triggerSelectedNodesEvent();
 		});
@@ -17135,9 +17171,11 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				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", {
+				error: void 0,
+				pastedNodes: nodesToSelect.map((n) => n.getAttrs().id ?? "")
+			});
 			const nodesSelectionPlugin = this.getNodesSelectionPlugin();
 			nodesSelectionPlugin?.setSelectedNodes(nodesToSelect);
 			this.toPaste = void 0;
@@ -17187,7 +17225,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			await this.writeClipboardData(JSON.stringify(copyClipboard));
 			this.instance.emitEvent("onCopy");
 		} catch (ex) {
-			this.instance.emitEvent("onCopy", ex);
+			this.instance.emitEvent("onCopy", { error: ex });
 		}
 	}
 	async copy() {
@@ -17203,7 +17241,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				return;
 			}
 		} catch (ex) {
-			this.instance.emitEvent("onPaste", ex);
+			this.instance.emitEvent("onPaste", { error: ex });
 		}
 		try {
 			const items = await navigator.clipboard.read();
@@ -17229,7 +17267,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				items
 			});
 		} catch (ex) {
-			this.instance.emitEvent("onPaste", ex);
+			this.instance.emitEvent("onPaste", { error: ex });
 		}
 	}
 	getSelectedNodes() {
@@ -17424,7 +17462,7 @@ var WeaveNode = class {
 				if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
 				if (nodesEdgeSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesEdgeSnappingPlugin.evaluateGuidelines(e);
 			};
-			node.on("transform", (0, import_lodash$1.throttle)(handleTransform, 100));
+			node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
 			node.on("transformend", (e) => {
 				const node$1 = e.target;
 				this.instance.emitEvent("onTransform", null);
@@ -17478,7 +17516,7 @@ var WeaveNode = class {
 					if (layerToMove && !hasFrames(node) && node.isDragging()) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 				}
 			};
-			node.on("dragmove", (0, import_lodash$1.throttle)(handleDragMove, 100));
+			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
 			node.on("dragend", (e) => {
 				if (!this.didMove) return;
 				const isErasing = this.instance.getActiveAction() === "eraseTool";
@@ -19191,7 +19229,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.52.3";
+var version = "0.53.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -19782,6 +19820,15 @@ var Weave = class {
 		}
 		return nodeContainer;
 	}
+	getNodeContainer(node) {
+		const stage = this.getStage();
+		let nodeContainer = node.getParent();
+		if (typeof node.getParent()?.getAttrs().nodeId !== "undefined") {
+			const realContainer = stage.findOne(`#${node.getParent()?.getAttrs().nodeId}`);
+			if (realContainer) nodeContainer = realContainer;
+		}
+		return nodeContainer;
+	}
 	moveUp(node) {
 		this.zIndexManager.moveUp(node);
 	}
@@ -20390,7 +20437,7 @@ var WeaveTextNode = class extends WeaveNode {
 		text.on("transformstart", (e) => {
 			this.instance.emitEvent("onTransform", e.target);
 		});
-		text.on("transform", (0, import_lodash$1.throttle)(handleTextTransform, 50));
+		text.on("transform", (0, import_lodash.throttle)(handleTextTransform, 50));
 		text.on("transformend", () => {
 			this.instance.emitEvent("onTransform", null);
 		});
@@ -21698,7 +21745,7 @@ var WeaveImageNode = class extends WeaveNode {
 		const stage = this.instance.getStage();
 		const image = stage.findOne(`#${imageAttrs.id}`);
 		const internalImage = image?.findOne(`#${imageAttrs.id}-image`);
-		if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash$1.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+		if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
 			const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
 			internalImage.width(imageAttrs.uncroppedImage.width);
 			internalImage.height(imageAttrs.uncroppedImage.height);
@@ -21715,7 +21762,7 @@ var WeaveImageNode = class extends WeaveNode {
 			internalImage.height(imageAttrs.cropSize.height);
 			this.cachedCropInfo[imageAttrs.id ?? ""] = imageAttrs.cropInfo;
 		}
-		if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash$1.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+		if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
 			internalImage.width(imageAttrs.uncroppedImage.width);
 			internalImage.height(imageAttrs.uncroppedImage.height);
 			internalImage.rotation(0);
@@ -22461,7 +22508,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
-		this.config = (0, import_lodash$1.merge)(WEAVE_STAGE_ZOOM_DEFAULT_CONFIG, config);
+		this.config = (0, import_lodash.merge)(WEAVE_STAGE_ZOOM_DEFAULT_CONFIG, config);
 		if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
 		this.pinching = false;
 		this.isTrackpad = false;
@@ -22489,7 +22536,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 				this.config.zoomSteps = [minimumZoom, ...this.config.zoomSteps];
 			}
 		};
-		mainLayer?.on("draw", (0, import_lodash$1.throttle)(handleDraw, 50));
+		mainLayer?.on("draw", (0, import_lodash.throttle)(handleDraw, 50));
 		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
 	setZoom(scale, centered = true, pointer) {
@@ -25383,7 +25430,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 			if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
 			this.onRender();
 		};
-		stage.on("pointermove", (0, import_lodash$1.throttle)(handleMouseMove, 50));
+		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
 		stage.on("pointermove", () => {
 			if (this.enabled) this.onRender();
 		});
@@ -25597,8 +25644,11 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		super();
 		this.pointers = new Map();
 		this.panning = false;
+		this.isDragging = false;
+		this.enableMove = false;
 		this.enabled = true;
 		this.moveToolActive = false;
+		this.isMouseLeftButtonPressed = false;
 		this.isMouseMiddleButtonPressed = false;
 		this.isCtrlOrMetaPressed = false;
 		this.isSpaceKeyPressed = false;
@@ -25610,7 +25660,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 	onInit() {
 		this.initEvents();
 	}
-	enableMove() {
+	setCursor() {
 		const stage = this.instance.getStage();
 		if (stage.container().style.cursor !== "grabbing") {
 			this.previousPointer = stage.container().style.cursor;
@@ -25634,7 +25684,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.getNodesEdgeSnappingPlugin()?.disable();
 				this.getNodesDistanceSnappingPlugin()?.disable();
 				this.isSpaceKeyPressed = true;
-				this.enableMove();
+				this.setCursor();
 			}
 		});
 		window.addEventListener("keyup", (e) => {
@@ -25649,7 +25699,6 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			}
 		});
 		let lastPos = null;
-		let isDragging = false;
 		stage.on("pointerdown", (e) => {
 			this.pointers.set(e.evt.pointerId, {
 				x: e.evt.clientX,
@@ -25657,14 +25706,15 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			});
 			if (this.pointers.size > 1) return;
 			const activeAction = this.instance.getActiveAction();
-			let enableMove = false;
-			if (e && (e.evt.pointerType !== "mouse" || e.evt.pointerType === "mouse" && e.evt.buttons === 1) && activeAction === MOVE_TOOL_ACTION_NAME) this.moveToolActive = true;
-			if (!enableMove && e.evt.pointerType === "mouse" && e.evt.buttons === 4) this.isMouseMiddleButtonPressed = true;
-			if (this.enabled && (this.isSpaceKeyPressed || this.moveToolActive || this.isMouseMiddleButtonPressed)) enableMove = true;
-			if (enableMove) {
-				isDragging = true;
+			this.enableMove = false;
+			if (activeAction === MOVE_TOOL_ACTION_NAME) this.moveToolActive = true;
+			if (e.evt.pointerType === "mouse" && e.evt.buttons === 1) this.isMouseLeftButtonPressed = true;
+			if (e.evt.pointerType === "mouse" && e.evt.buttons === 4) this.isMouseMiddleButtonPressed = true;
+			if (this.enabled && (this.isSpaceKeyPressed || this.moveToolActive && this.isMouseLeftButtonPressed || this.isMouseMiddleButtonPressed)) this.enableMove = true;
+			if (this.enableMove) {
+				this.isDragging = true;
 				lastPos = stage.getPointerPosition();
-				this.enableMove();
+				this.setCursor();
 			}
 		});
 		stage.on("pointercancel", (e) => {
@@ -25678,7 +25728,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			});
 			if (this.pointers.size > 1) return;
 			if (this.isSpaceKeyPressed) stage.container().style.cursor = "grabbing";
-			if (!isDragging) return;
+			if (!this.isDragging) return;
 			this.getContextMenuPlugin()?.cancelLongPressTimer();
 			const pos = stage.getPointerPosition();
 			if (pos && lastPos) {
@@ -25693,7 +25743,11 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		stage.on("pointermove", handleMouseMove);
 		stage.on("pointerup", (e) => {
 			this.pointers.delete(e.evt.pointerId);
-			isDragging = false;
+			this.isMouseLeftButtonPressed = false;
+			this.isMouseMiddleButtonPressed = false;
+			this.moveToolActive = false;
+			this.isDragging = false;
+			this.enableMove = false;
 			this.panning = false;
 		});
 		const handleWheel = (e) => {
@@ -25855,7 +25909,7 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 					newConnectedUsers[userInformation.id] = userInformation;
 				}
 			}
-			if (!(0, import_lodash$1.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
+			if (!(0, import_lodash.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
 			this.connectedUsers = newConnectedUsers;
 		});
 	}
@@ -26264,7 +26318,10 @@ var WeaveNodesEdgeSnappingPlugin = class extends WeavePlugin {
 		if (!utilityLayer) return;
 		const { targetNode: node, skipNodes } = getTargetAndSkipNodes(this.instance, e);
 		if (typeof node === "undefined") return;
-		const visibleNodes = this.getVisibleNodes(skipNodes);
+		const nodeParent = this.instance.getNodeContainer(node);
+		if (nodeParent === null) return;
+		const stage = this.instance.getStage();
+		const visibleNodes = getVisibleNodes(this.instance, stage, nodeParent, skipNodes, this.instance.getMainLayer());
 		const lineGuideStops = this.getLineGuideStops(visibleNodes);
 		const itemBounds = this.getObjectSnappingEdges(node);
 		const guides = this.getGuides(lineGuideStops, itemBounds, e.type);
@@ -26342,21 +26399,6 @@ var WeaveNodesEdgeSnappingPlugin = class extends WeavePlugin {
 			});
 		}
 	}
-	getVisibleNodes(skipNodes) {
-		const stage = this.instance.getStage();
-		const nodesSelection = this.instance.getPlugin("nodesSelection");
-		if (nodesSelection) nodesSelection.getTransformer().hide();
-		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 = [];
@@ -26578,6 +26620,7 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 		const { config } = params ?? {};
 		this.enterSnappingTolerance = config?.enterSnappingTolerance ?? GUIDE_ENTER_SNAPPING_TOLERANCE;
 		this.exitSnappingTolerance = config?.exitSnappingTolerance ?? GUIDE_EXIT_SNAPPING_TOLERANCE;
+		this.uiConfig = import_lodash.default.merge(GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, config?.ui);
 		this.enabled = true;
 	}
 	getName() {
@@ -26597,19 +26640,16 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 		}
 	}
 	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 nodeParent = this.instance.getNodeContainer(node);
+		if (nodeParent === null) return;
+		const stage = this.instance.getStage();
+		this.referenceLayer = nodeParent;
+		const visibleNodes = getVisibleNodes(this.instance, stage, nodeParent, skipNodes, this.referenceLayer);
 		const { intersectedNodes: sortedHorizontalIntersectedNodes, intersectedNodesWithDistances: horizontalIntersectedNodes } = this.getHorizontallyIntersectingNodes(node, visibleNodes);
 		const { intersectedNodes: sortedVerticalIntersectedNodes, intersectedNodesWithDistances: verticalIntersectedNodes } = this.getVerticallyIntersectingNodes(node, visibleNodes);
 		this.cleanupGuidelines();
@@ -26840,6 +26880,11 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 			});
 		}
 	}
+	isOverlapping(node1, node2) {
+		const box1 = this.getBoxClientRect(node1);
+		const box2 = this.getBoxClientRect(node2);
+		return !(box1.x + box1.width <= box2.x || box2.x + box2.width <= box1.x || box1.y + box1.height <= box2.y || box2.y + box2.height <= box1.y);
+	}
 	getVerticallyIntersectingNodes(targetNode, nodes) {
 		const targetBox = this.getBoxClientRect(targetNode);
 		const intersectedNodes = [];
@@ -26856,30 +26901,32 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 			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)
-			});
+		for (let i = 0; i < intersectedNodes.length; i++) for (let j = i + 1; j < intersectedNodes.length; j++) {
+			const nodeA = intersectedNodes[i];
+			const nodeB = intersectedNodes[j];
+			if (!this.isOverlapping(nodeA, nodeB)) {
+				const boxA = this.getBoxClientRect(nodeA);
+				const boxB = this.getBoxClientRect(nodeB);
+				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: nodeA,
+					to: nodeB,
+					midX,
+					distance: Math.round(distance)
+				});
+			}
 		}
 		return {
 			intersectedNodes,
@@ -26902,56 +26949,38 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 			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
-			});
+		for (let i = 0; i < intersectedNodes.length; i++) for (let j = i + 1; j < intersectedNodes.length; j++) {
+			const nodeA = intersectedNodes[i];
+			const nodeB = intersectedNodes[j];
+			if (!this.isOverlapping(nodeA, nodeB)) {
+				const boxA = this.getBoxClientRect(nodeA);
+				const boxB = this.getBoxClientRect(nodeB);
+				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: nodeA,
+					to: nodeB,
+					midY,
+					distance: Math.round(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) => {
@@ -26968,40 +26997,60 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 			if (pairInfo.distance === peerDistance) this.renderVerticalLineWithDistanceBetweenNodes(from, to, pairInfo.midX, `${pairInfo.distance}`);
 		});
 	}
-	renderDistanceLabel(ctx, stage, labelText, { canvasMidX, canvasMidY }) {
+	renderDistanceLabel(ctx, stage, labelText, orientation, { canvasMidX, canvasMidY }, config) {
 		const scaleX = stage?.scaleX() || 1;
 		const scaleY = stage?.scaleY() || 1;
-		const fontSize = 12;
-		const fontFamily = "Arial";
-		const padding = 6;
+		const fontSize = config.label.fontSize;
+		const fontFamily = config.label.fontFamily;
+		const fontStyle = config.label.fontStyle;
+		const cornerRadius = config.label.cornerRadius;
+		const linePadding = config.label.linePadding;
+		const fill = config.label.fill;
+		const height = config.label.height;
+		const paddingX = config.label.paddingX;
 		const tempText = new Konva.Text({
 			text: labelText,
 			fontSize,
+			fontStyle,
 			fontFamily,
 			visible: false
 		});
 		const textWidth = tempText.width();
-		const textHeight = tempText.height();
-		const labelWidth = textWidth + padding * 2;
-		const labelHeight = textHeight + padding * 2;
+		const labelWidth = textWidth + paddingX * 2;
+		const labelHeight = height;
 		ctx.save();
 		ctx.scale(1 / scaleX, 1 / scaleY);
-		const labelX = canvasMidX - labelWidth / 2;
-		const labelY = canvasMidY - labelHeight / 2;
+		let labelX = canvasMidX - labelWidth / 2;
+		let labelY = canvasMidY + linePadding;
+		if (orientation === "vertical") {
+			labelX = canvasMidX + linePadding;
+			labelY = canvasMidY - labelWidth / 2;
+		}
+		const r = Math.min(cornerRadius, labelWidth / 2, labelHeight / 2);
 		ctx.beginPath();
-		ctx.rect(labelX, labelY, labelWidth, labelHeight);
-		ctx.fillStyle = "#ff0000";
+		ctx.moveTo(labelX + r, labelY);
+		ctx.lineTo(labelX + labelWidth - r, labelY);
+		ctx.quadraticCurveTo(labelX + labelWidth, labelY, labelX + labelWidth, labelY + r);
+		ctx.lineTo(labelX + labelWidth, labelY + labelHeight - r);
+		ctx.quadraticCurveTo(labelX + labelWidth, labelY + labelHeight, labelX + labelWidth - r, labelY + labelHeight);
+		ctx.lineTo(labelX + r, labelY + labelHeight);
+		ctx.quadraticCurveTo(labelX, labelY + labelHeight, labelX, labelY + labelHeight - r);
+		ctx.lineTo(labelX, labelY + r);
+		ctx.quadraticCurveTo(labelX, labelY, labelX + r, labelY);
+		ctx.closePath();
+		ctx.fillStyle = fill;
 		ctx.fill();
-		ctx.font = `bold ${fontSize}px ${fontFamily}`;
+		ctx.font = `${fontStyle} ${fontSize}px ${fontFamily}`;
 		ctx.fillStyle = "white";
 		ctx.textAlign = "center";
 		ctx.textBaseline = "middle";
-		ctx.fillText(labelText, canvasMidX, labelY + labelHeight / 2);
+		ctx.fillText(labelText, labelX + labelWidth / 2, labelY + labelHeight / 2);
 		ctx.restore();
 	}
 	renderHorizontalLineWithDistanceBetweenNodes(from, to, midY, labelText) {
 		const utilityLayer = this.instance.getUtilityLayer();
 		const renderLabel = this.renderDistanceLabel;
+		const uiConfig = this.uiConfig;
 		const lineWithLabel = new Konva.Shape({
 			name: GUIDE_HORIZONTAL_LINE_NAME,
 			sceneFunc: function(ctx, shape) {
@@ -27015,8 +27064,8 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 				ctx.moveTo(x1, y);
 				ctx.lineTo(x2, y);
 				ctx.closePath();
-				ctx.strokeStyle = "#ff0000";
-				ctx.lineWidth = 1;
+				ctx.strokeStyle = uiConfig.line.stroke;
+				ctx.lineWidth = uiConfig.line.strokeWidth;
 				ctx.setLineDash([]);
 				ctx.stroke();
 				ctx.closePath();
@@ -27024,10 +27073,10 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 				const worldMidY = y;
 				const canvasMidX = worldMidX * scaleX;
 				const canvasMidY = worldMidY * scaleY;
-				renderLabel(ctx, stage, labelText, {
+				renderLabel(ctx, stage, labelText, "horizontal", {
 					canvasMidX,
 					canvasMidY
-				});
+				}, uiConfig);
 				ctx.fillStrokeShape(shape);
 			}
 		});
@@ -27037,6 +27086,7 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 	renderVerticalLineWithDistanceBetweenNodes(from, to, midX, labelText) {
 		const utilityLayer = this.instance.getUtilityLayer();
 		const renderLabel = this.renderDistanceLabel;
+		const uiConfig = this.uiConfig;
 		const lineWithLabel = new Konva.Shape({
 			name: GUIDE_VERTICAL_LINE_NAME,
 			sceneFunc: function(ctx, shape) {
@@ -27050,18 +27100,18 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 				ctx.setLineDash([]);
 				ctx.moveTo(x, y1);
 				ctx.lineTo(x, y2);
-				ctx.strokeStyle = "#ff0000";
-				ctx.lineWidth = 1;
+				ctx.strokeStyle = uiConfig.line.stroke;
+				ctx.lineWidth = uiConfig.line.strokeWidth;
 				ctx.stroke();
 				ctx.closePath();
 				const worldMidX = x;
 				const worldMidY = (y1 + y2) / 2;
 				const canvasMidX = worldMidX * scaleX;
 				const canvasMidY = worldMidY * scaleY;
-				renderLabel(ctx, stage, labelText, {
+				renderLabel(ctx, stage, labelText, "vertical", {
 					canvasMidX,
 					canvasMidY
-				});
+				}, uiConfig);
 				ctx.fillStrokeShape(shape);
 			}
 		});
@@ -27077,5 +27127,5 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 };
 
 //#endregion
-export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_TYPE, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTERS_DEFAULT_PROPS, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveZoomInToolAction, WeaveZoomOutToolAction, clearContainerTargets, containerOverCursor, containsNodeDeep, getBoundingBox, getClosestParentWithId, getContrastTextColor, getExportBoundingBox, getSelectedNodesMetadata, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isInShadowDOM, isNodeInSelection, moveNodeToContainer, resetScale, stringToColor };
+export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_TYPE, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTERS_DEFAULT_PROPS, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveZoomInToolAction, WeaveZoomOutToolAction, clearContainerTargets, containerOverCursor, containsNodeDeep, getBoundingBox, getClosestParentWithId, getContrastTextColor, getExportBoundingBox, getSelectedNodesMetadata, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isInShadowDOM, isNodeInSelection, moveNodeToContainer, resetScale, stringToColor };
 //# sourceMappingURL=sdk.js.map