@inditextech/weave-sdk 0.52.2 → 0.53.0

package/dist/sdk.cjs

@@ -15913,6 +15913,39 @@ function getClosestParentWithId(el) {
 	}
 	return null;
 }
+function isInShadowDOM(el) {
+	return el?.getRootNode() instanceof ShadowRoot;
+}
+function getTopmostShadowHost(el) {
+	let current = el;
+	let root = current?.getRootNode();
+	while (root instanceof ShadowRoot) {
+		current = root.host;
+		root = current.getRootNode();
+	}
+	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
@@ -16148,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 = {
@@ -16981,14 +17030,23 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			if (stageContainer?.parentNode) stageContainer.parentNode.appendChild(catcher);
 		}
 	}
+	getCatcherElement() {
+		const stage = this.instance.getStage();
+		let catcher = document.getElementById(WEAVE_COPY_PASTE_PASTE_CATCHER_ID);
+		if (isInShadowDOM(stage.container())) {
+			const shadowHost = getTopmostShadowHost(stage.container());
+			if (shadowHost) catcher = shadowHost.querySelector(`#${WEAVE_COPY_PASTE_PASTE_CATCHER_ID}`);
+		}
+		return catcher;
+	}
 	focusPasteCatcher() {
-		const catcher = document.getElementById(WEAVE_COPY_PASTE_PASTE_CATCHER_ID);
+		const catcher = this.getCatcherElement();
 		catcher?.focus();
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
 		this.createPasteCatcher();
-		const catcher = document.getElementById(WEAVE_COPY_PASTE_PASTE_CATCHER_ID);
+		const catcher = this.getCatcherElement();
 		window.addEventListener("keydown", async (e) => {
 			if (stage.isFocused() && e.key === "c" && (e.ctrlKey || e.metaKey)) {
 				e.preventDefault();
@@ -17113,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;
@@ -17165,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() {
@@ -17181,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();
@@ -17207,7 +17267,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				items
 			});
 		} catch (ex) {
-			this.instance.emitEvent("onPaste", ex);
+			this.instance.emitEvent("onPaste", { error: ex });
 		}
 	}
 	getSelectedNodes() {
@@ -19169,7 +19229,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.52.2";
+var version = "0.53.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -19760,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);
 	}
@@ -20631,7 +20700,7 @@ var WeaveTextNode = class extends WeaveNode {
 				this.removeTextAreaDOM(textNode);
 				this.instance.removeEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
 				this.instance.removeEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
-				window.removeEventListener("pointerclick", handleOutsideClick);
+				window.removeEventListener("pointerup", handleOutsideClick);
 				return;
 			}
 		};
@@ -20655,20 +20724,27 @@ var WeaveTextNode = class extends WeaveNode {
 		const handleOutsideClick = (e) => {
 			e.stopPropagation();
 			if (!this.textArea) return;
+			const mouseX = e.clientX;
+			const mouseY = e.clientY;
+			let elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+			if (isInShadowDOM(stage.container())) {
+				const shadowHost = getTopmostShadowHost(stage.container());
+				if (shadowHost) elementUnderMouse = shadowHost.elementFromPoint(mouseX, mouseY);
+			}
 			let clickedOnCanvas = false;
-			if (e.target?.id !== `${textNode.id()}`) clickedOnCanvas = true;
+			if (elementUnderMouse?.id !== `${textNode.id()}`) clickedOnCanvas = true;
 			if (clickedOnCanvas) {
 				textNode.text(this.textArea.value);
 				this.removeTextAreaDOM(textNode);
 				this.textArea.removeEventListener("keydown", handleKeyDown);
 				this.textArea.removeEventListener("keyup", handleKeyUp);
-				window.removeEventListener("pointerclick", handleOutsideClick);
+				window.removeEventListener("pointerup", handleOutsideClick);
 				window.removeEventListener("pointerdown", handleOutsideClick);
 				return;
 			}
 		};
 		setTimeout(() => {
-			window.addEventListener("pointerclick", handleOutsideClick);
+			window.addEventListener("pointerup", handleOutsideClick);
 			window.addEventListener("pointerdown", handleOutsideClick);
 		}, 0);
 		this.editing = true;
@@ -22779,8 +22855,13 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			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);
+			let elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+			if (isInShadowDOM(stage.container())) {
+				const shadowHost = getTopmostShadowHost(stage.container());
+				if (shadowHost) elementUnderMouse = shadowHost.elementFromPoint(mouseX, mouseY);
+			}
 			if (!this.enabled || !performZoom || getClosestParentWithId(elementUnderMouse) !== stage.container()) return;
+			e.preventDefault();
 			const delta = e.deltaY > 0 ? 1 : -1;
 			this.zoomVelocity += delta;
 			this.isTrackpad = Math.abs(e.deltaY) < 15 && e.deltaMode === 0;
@@ -25563,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;
@@ -25576,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;
@@ -25600,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) => {
@@ -25615,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,
@@ -25623,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) => {
@@ -25644,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) {
@@ -25659,21 +25743,29 @@ 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) => {
 			const performPanning = !this.isCtrlOrMetaPressed && !e.ctrlKey;
 			const mouseX = e.clientX;
 			const mouseY = e.clientY;
-			const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+			let elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+			if (isInShadowDOM(stage.container())) {
+				const shadowHost = getTopmostShadowHost(stage.container());
+				if (shadowHost) elementUnderMouse = shadowHost.elementFromPoint(mouseX, mouseY);
+			}
 			if (!this.enabled || this.isCtrlOrMetaPressed || e.buttons === 4 || !performPanning || getClosestParentWithId(elementUnderMouse) !== stage.container()) return;
 			this.getContextMenuPlugin()?.cancelLongPressTimer();
 			stage.x(stage.x() - e.deltaX);
 			stage.y(stage.y() - e.deltaY);
 			this.instance.emitEvent("onStageMove");
 		};
-		window.addEventListener("wheel", handleWheel, { passive: false });
+		window.addEventListener("wheel", handleWheel, { passive: true });
 		stage.container().style.touchAction = "none";
 		stage.container().style.userSelect = "none";
 		stage.container().style.setProperty("-webkit-user-drag", "none");
@@ -26226,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);
@@ -26304,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 = [];
@@ -26540,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() {
@@ -26559,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();
@@ -26802,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 = [];
@@ -26818,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,
@@ -26864,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) => {
@@ -26930,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.default.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.default.Shape({
 			name: GUIDE_HORIZONTAL_LINE_NAME,
 			sceneFunc: function(ctx, shape) {
@@ -26977,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();
@@ -26986,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);
 			}
 		});
@@ -26999,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.default.Shape({
 			name: GUIDE_VERTICAL_LINE_NAME,
 			sceneFunc: function(ctx, shape) {
@@ -27012,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);
 			}
 		});
@@ -27053,6 +27141,7 @@ 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_DISTANCE_LINE_DEFAULT_CONFIG = GUIDE_DISTANCE_LINE_DEFAULT_CONFIG
 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
@@ -27186,10 +27275,13 @@ exports.getExportBoundingBox = getExportBoundingBox
 exports.getSelectedNodesMetadata = getSelectedNodesMetadata
 exports.getTargetAndSkipNodes = getTargetAndSkipNodes
 exports.getTargetedNode = getTargetedNode
+exports.getTopmostShadowHost = getTopmostShadowHost
+exports.getVisibleNodes = getVisibleNodes
 exports.getVisibleNodesInViewport = getVisibleNodesInViewport
 exports.hasFrames = hasFrames
 exports.hasImages = hasImages
 exports.intersectArrays = intersectArrays
+exports.isInShadowDOM = isInShadowDOM
 exports.isNodeInSelection = isNodeInSelection
 exports.moveNodeToContainer = moveNodeToContainer
 exports.resetScale = resetScale