@inditextech/weave-sdk 0.52.3 → 0.54.0

package/dist/sdk.cjs

@@ -15925,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
@@ -16160,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 = {
@@ -16943,12 +16980,24 @@ const COPY_PASTE_NODES_PLUGIN_STATE = {
 	["IDLE"]: "idle",
 	["PASTING"]: "pasting"
 };
+const WEAVE_COPY_PASTE_CONFIG_DEFAULT = { paddingOnPaste: {
+	enabled: false,
+	paddingX: 0,
+	paddingY: 0
+} };
 
 //#endregion
 //#region src/plugins/copy-paste-nodes/copy-paste-nodes.ts
 var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
-	constructor() {
+	constructor(params) {
 		super();
+		this.config = {
+			...WEAVE_COPY_PASTE_CONFIG_DEFAULT,
+			...params?.config
+		};
+		this.actualInternalPaddingX = 0;
+		this.actualInternalPaddingY = 0;
+		this.lastInternalPasteSnapshot = "";
 		this.state = COPY_PASTE_NODES_PLUGIN_STATE.IDLE;
 	}
 	getName() {
@@ -17006,6 +17055,20 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		const catcher = this.getCatcherElement();
 		catcher?.focus();
 	}
+	checkIfInternalElementsAreNew(newData) {
+		if (!this.config.paddingOnPaste.enabled) return false;
+		if (this.lastInternalPasteSnapshot !== newData) {
+			this.lastInternalPasteSnapshot = newData;
+			return true;
+		}
+		return false;
+	}
+	updateInternalPastePadding() {
+		if (this.config.paddingOnPaste.enabled) {
+			this.actualInternalPaddingX = this.actualInternalPaddingX + this.config.paddingOnPaste.paddingX;
+			this.actualInternalPaddingY = this.actualInternalPaddingY + this.config.paddingOnPaste.paddingY;
+		}
+	}
 	initEvents() {
 		const stage = this.instance.getStage();
 		this.createPasteCatcher();
@@ -17099,6 +17162,12 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		const stage = this.instance.getStage();
 		if (this.toPaste) {
 			const nodesToSelect = [];
+			const newElements = this.checkIfInternalElementsAreNew(JSON.stringify(this.toPaste));
+			if (this.config.paddingOnPaste.enabled && newElements) {
+				this.actualInternalPaddingX = 0;
+				this.actualInternalPaddingY = 0;
+			}
+			this.updateInternalPastePadding();
 			for (const element of Object.keys(this.toPaste.weave)) {
 				const node = this.toPaste.weave[element].element;
 				const posRelativeToSelection = this.toPaste.weave[element].posRelativeToSelection;
@@ -17116,8 +17185,8 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 						const scale = stage.scaleX();
 						const stagePos = stage.position();
 						localPos = {
-							x: (localPos.x - stagePos.x) / scale,
-							y: (localPos.y - stagePos.y) / scale
+							x: (localPos.x - stagePos.x + (this.config.paddingOnPaste.enabled ? this.actualInternalPaddingX : 0)) / scale,
+							y: (localPos.y - stagePos.y + (this.config.paddingOnPaste.enabled ? this.actualInternalPaddingY : 0)) / scale
 						};
 					}
 					if (container && container.getAttrs().nodeType === "frame") {
@@ -17130,15 +17199,27 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 						node.props.x = localPos.x + realOffset.x + posRelativeToSelection.x;
 						node.props.y = localPos.y + realOffset.y + posRelativeToSelection.y;
 					}
+				} else {
+					const nodeHandler = this.instance.getNodeHandler(node.props.nodeType ?? "");
+					if (nodeHandler) {
+						node.props.x = node.props.x + (this.config.paddingOnPaste.enabled ? this.actualInternalPaddingX : 0);
+						node.props.y = node.props.y + (this.config.paddingOnPaste.enabled ? this.actualInternalPaddingY : 0);
+					}
 				}
 				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.instance?.triggerAction("fitToSelectionTool", {
+				previousAction: "selectionTool",
+				smartZoom: true
+			});
 			this.toPaste = void 0;
 		}
 		this.cancel();
@@ -17184,9 +17265,12 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		}
 		try {
 			await this.writeClipboardData(JSON.stringify(copyClipboard));
+			this.actualInternalPaddingX = 0;
+			this.actualInternalPaddingY = 0;
+			this.lastInternalPasteSnapshot = "";
 			this.instance.emitEvent("onCopy");
 		} catch (ex) {
-			this.instance.emitEvent("onCopy", ex);
+			this.instance.emitEvent("onCopy", { error: ex });
 		}
 	}
 	async copy() {
@@ -17202,7 +17286,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();
@@ -17228,7 +17312,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				items
 			});
 		} catch (ex) {
-			this.instance.emitEvent("onPaste", ex);
+			this.instance.emitEvent("onPaste", { error: ex });
 		}
 	}
 	getSelectedNodes() {
@@ -19190,7 +19274,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.52.3";
+var version = "0.54.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -19781,6 +19865,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);
 	}
@@ -25596,8 +25689,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;
@@ -25609,7 +25705,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;
@@ -25633,7 +25729,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.getNodesEdgeSnappingPlugin()?.disable();
 				this.getNodesDistanceSnappingPlugin()?.disable();
 				this.isSpaceKeyPressed = true;
-				this.enableMove();
+				this.setCursor();
 			}
 		});
 		window.addEventListener("keyup", (e) => {
@@ -25648,7 +25744,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,
@@ -25656,14 +25751,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) => {
@@ -25677,7 +25773,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) {
@@ -25692,7 +25788,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) => {
@@ -26263,7 +26363,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);
@@ -26341,21 +26444,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 = [];
@@ -26577,6 +26665,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() {
@@ -26596,19 +26685,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();
@@ -26839,6 +26925,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 = [];
@@ -26855,30 +26946,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,
@@ -26901,56 +26994,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) => {
@@ -26967,40 +27042,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) {
@@ -27014,8 +27109,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();
@@ -27023,10 +27118,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);
 			}
 		});
@@ -27036,6 +27131,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) {
@@ -27049,18 +27145,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);
 			}
 		});
@@ -27090,6 +27186,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
@@ -27120,6 +27217,7 @@ exports.TEXT_LAYOUT = TEXT_LAYOUT
 exports.TEXT_TOOL_ACTION_NAME = TEXT_TOOL_ACTION_NAME
 exports.TEXT_TOOL_STATE = TEXT_TOOL_STATE
 exports.WEAVE_ARROW_NODE_TYPE = WEAVE_ARROW_NODE_TYPE
+exports.WEAVE_COPY_PASTE_CONFIG_DEFAULT = WEAVE_COPY_PASTE_CONFIG_DEFAULT
 exports.WEAVE_COPY_PASTE_NODES_KEY = WEAVE_COPY_PASTE_NODES_KEY
 exports.WEAVE_COPY_PASTE_PASTE_CATCHER_ID = WEAVE_COPY_PASTE_PASTE_CATCHER_ID
 exports.WEAVE_COPY_PASTE_PASTE_MODES = WEAVE_COPY_PASTE_PASTE_MODES
@@ -27224,6 +27322,7 @@ exports.getSelectedNodesMetadata = getSelectedNodesMetadata
 exports.getTargetAndSkipNodes = getTargetAndSkipNodes
 exports.getTargetedNode = getTargetedNode
 exports.getTopmostShadowHost = getTopmostShadowHost
+exports.getVisibleNodes = getVisibleNodes
 exports.getVisibleNodesInViewport = getVisibleNodesInViewport
 exports.hasFrames = hasFrames
 exports.hasImages = hasImages