@inditextech/weave-sdk 0.51.0 → 0.52.1

package/dist/sdk.cjs

@@ -15665,16 +15665,16 @@ function clearContainerTargets(instance) {
 	const containers = instance.getContainerNodes();
 	for (const container of containers) container.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
 }
-function containerOverCursor(instance, ignoreNodes) {
+function containerOverCursor(instance, ignoreNodes, definedCursorPosition) {
 	konva.default.hitOnDragEnabled = true;
 	const stage = instance.getStage();
-	const cursorPosition = stage.getRelativePointerPosition();
+	const cursorPosition = definedCursorPosition ?? stage.getRelativePointerPosition();
 	if (!cursorPosition) return void 0;
 	const containerUnderPointer = new Set();
 	stage.find(".containerCapable").reverse().forEach((node) => {
 		if (!node.isVisible()) return;
 		if (containsNodeDeep(ignoreNodes, node)) return;
-		const shapeRect = node.getClientRect({ relativeTo: stage });
+		const shapeRect = getBoundingBox(stage, [node]);
 		if (cursorPosition.x >= shapeRect.x && cursorPosition.x <= shapeRect.x + shapeRect.width && cursorPosition.y >= shapeRect.y && cursorPosition.y <= shapeRect.y + shapeRect.height) {
 			if (node?.getAttrs().isContainerPrincipal) containerUnderPointer.add(node);
 		}
@@ -15775,7 +15775,10 @@ function getBoundingBox(stage, nodes) {
 	let maxX = -Infinity;
 	let maxY = -Infinity;
 	for (const node of nodes) {
-		const box = node.getRealClientRect({ skipTransform: false });
+		const box = node.getRealClientRect({
+			relativeTo: stage,
+			skipTransform: false
+		});
 		minX = Math.min(minX, box.x);
 		minY = Math.min(minY, box.y);
 		maxX = Math.max(maxX, box.x + box.width);
@@ -15903,6 +15906,13 @@ function getVisibleNodesInViewport(stage, referenceLayer) {
 	});
 	return visibleNodes;
 }
+function getClosestParentWithId(el) {
+	while (el) {
+		if (el.id) return el;
+		el = el.parentElement;
+	}
+	return null;
+}
 
 //#endregion
 //#region src/actions/selection-tool/constants.ts
@@ -15978,15 +15988,19 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 		}
 		const containerRect = stage.container().getBoundingClientRect();
 		const pointerPos = stage.getPointerPosition();
-		if (containerRect && pointerPos) {
-			const point = {
+		const relativeClickPoint = stage.getRelativePointerPosition();
+		if (containerRect && pointerPos && relativeClickPoint) {
+			const contextMenuPoint = {
 				x: containerRect.left + pointerPos.x + (this.config.xOffset ?? 4),
 				y: containerRect.top + pointerPos.y + (this.config.yOffset ?? 4)
 			};
+			const stageClickPoint = this.getStageClickPoint(pointerPos);
 			this.contextMenuVisible = true;
 			this.instance.emitEvent("onNodeContextMenu", {
 				selection: nodes,
-				point,
+				contextMenuPoint,
+				clickPoint: pointerPos,
+				stageClickPoint,
 				visible: true
 			});
 		}
@@ -15995,7 +16009,15 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 		this.contextMenuVisible = false;
 		this.instance.emitEvent("onNodeContextMenu", {
 			selection: [],
-			point: {
+			contextMenuPoint: {
+				x: 0,
+				y: 0
+			},
+			clickPoint: {
+				x: 0,
+				y: 0
+			},
+			stageClickPoint: {
 				x: 0,
 				y: 0
 			},
@@ -16040,9 +16062,6 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 				this.tapHold = false;
 			}
 		});
-		window.addEventListener("contextmenu", (e) => {
-			e.preventDefault();
-		});
 		stage.on("contextmenu", (e) => {
 			e.evt.preventDefault();
 			if (!this.enabled) return;
@@ -16054,18 +16073,31 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 			const containerRect = stage.container().getBoundingClientRect();
 			const pointerPos = stage.getPointerPosition();
 			if (containerRect && pointerPos) {
-				const point = {
+				const contextMenuPoint = {
 					x: containerRect.left + pointerPos.x + (this.config.xOffset ?? 4),
 					y: containerRect.top + pointerPos.y + (this.config.yOffset ?? 4)
 				};
+				const stageClickPoint = this.getStageClickPoint(pointerPos);
 				this.instance.emitEvent("onNodeContextMenu", {
 					selection: [],
-					point,
+					contextMenuPoint,
+					clickPoint: pointerPos,
+					stageClickPoint,
 					visible: false
 				});
 			}
 		});
 	}
+	getStageClickPoint(pointerPos) {
+		const stage = this.instance.getStage();
+		const scale = stage.scale();
+		const position = stage.position();
+		const stageClickPoint = {
+			x: (pointerPos.x - position.x) / scale.x,
+			y: (pointerPos.y - position.y) / scale.y
+		};
+		return stageClickPoint;
+	}
 	isContextMenuVisible() {
 		return this.contextMenuVisible;
 	}
@@ -16269,7 +16301,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		selectionLayer?.add(selectionRectangle);
 		const tr = new konva.default.Transformer({
 			id: "selectionTransformer",
-			...this.selectionOriginalConfig
+			...this.selectionOriginalConfig,
+			listening: true
 		});
 		selectionLayer?.add(tr);
 		const trHover = new konva.default.Transformer({
@@ -16281,6 +16314,29 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			listening: false
 		});
 		selectionLayer?.add(trHover);
+		stage.on("pointermove", () => {
+			if (tr.nodes().length === 1 && tr.nodes()[0].getAttrs().isContainerPrincipal) {
+				const pos = stage.getPointerPosition();
+				if (!pos) return;
+				const shapeUnder = stage.getIntersection(pos);
+				if (!shapeUnder) {
+					tr.setAttrs({ listening: true });
+					tr.forceUpdate();
+				}
+				if (shapeUnder && tr.getChildren().includes(shapeUnder) && shapeUnder.name() === "back") {
+					tr.setAttrs({ listening: false });
+					tr.forceUpdate();
+				}
+				if (shapeUnder && tr.nodes()[0].getChildren().includes(shapeUnder)) {
+					tr.setAttrs({ listening: false });
+					tr.forceUpdate();
+				}
+				if (shapeUnder && !tr.getChildren().includes(shapeUnder) && tr.nodes()[0].getChildren().includes(shapeUnder)) {
+					tr.setAttrs({ listening: true });
+					tr.forceUpdate();
+				}
+			}
+		});
 		tr.on("transformstart", () => {
 			this.triggerSelectedNodesEvent();
 		});
@@ -16370,12 +16426,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 							const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
 							if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
 							let containerToMove = this.instance.getMainLayer();
-							if (layerToMove) {
-								containerToMove = layerToMove;
-								containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
-							}
+							if (layerToMove) containerToMove = layerToMove;
 							let moved = false;
 							if (containerToMove && !selectionContainsFrames) moved = moveNodeToContainer(this.instance, node, containerToMove);
+							if (containerToMove) containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
 							if (!nodeHandler) return resolve();
 							toSelect.push(node.getAttrs().id ?? "");
 							if (!moved) toUpdate.push(nodeHandler.serialize(node));
@@ -16592,6 +16646,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		};
 		stage.on("pointermove", handleMouseMove);
 		stage.on("pointerup", (e) => {
+			this.tr.setAttrs({ listening: true });
 			const moved = this.checkMoved(e);
 			this.checkDoubleTap(e);
 			delete this.pointers[e.evt.pointerId];
@@ -16858,6 +16913,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 //#endregion
 //#region src/plugins/copy-paste-nodes/constants.ts
 const WEAVE_COPY_PASTE_NODES_KEY = "copyPasteNodes";
+const WEAVE_COPY_PASTE_PASTE_CATCHER_ID = "weave-paste-catcher";
 const WEAVE_COPY_PASTE_PASTE_MODES = {
 	["INTERNAL"]: "internal",
 	["EXTERNAL"]: "external",
@@ -16883,18 +16939,6 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	onInit() {
 		this.initEvents();
 	}
-	readClipboardData() {
-		return new Promise((resolve, reject) => {
-			setTimeout(async () => {
-				if (typeof navigator.clipboard === "undefined") return reject(new Error("Clipboard API not supported"));
-				navigator.clipboard.readText().then((text) => {
-					resolve(this.isWeaveData(text));
-				}).catch((error) => {
-					reject(error);
-				});
-			});
-		});
-	}
 	writeClipboardData(data) {
 		return new Promise((resolve, reject) => {
 			setTimeout(async () => {
@@ -16907,8 +16951,36 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			});
 		});
 	}
+	existsPasteCatcher() {
+		return document.getElementById(WEAVE_COPY_PASTE_PASTE_CATCHER_ID) !== null;
+	}
+	createPasteCatcher() {
+		const stage = this.instance.getStage();
+		if (!this.existsPasteCatcher()) {
+			const catcher = document.createElement("div");
+			catcher.id = WEAVE_COPY_PASTE_PASTE_CATCHER_ID;
+			catcher.contentEditable = "true";
+			catcher.style.position = "absolute";
+			catcher.style.top = "-1px";
+			catcher.style.left = "-1px";
+			catcher.style.width = "1px";
+			catcher.style.height = "1px";
+			catcher.style.zIndex = "-1";
+			catcher.style.outline = "none";
+			catcher.style.opacity = "0";
+			catcher.tabIndex = 0;
+			const stageContainer = stage.container();
+			if (stageContainer?.parentNode) stageContainer.parentNode.appendChild(catcher);
+		}
+	}
+	focusPasteCatcher() {
+		const catcher = document.getElementById(WEAVE_COPY_PASTE_PASTE_CATCHER_ID);
+		catcher?.focus();
+	}
 	initEvents() {
 		const stage = this.instance.getStage();
+		this.createPasteCatcher();
+		const catcher = document.getElementById(WEAVE_COPY_PASTE_PASTE_CATCHER_ID);
 		window.addEventListener("keydown", async (e) => {
 			if (stage.isFocused() && e.key === "c" && (e.ctrlKey || e.metaKey)) {
 				e.preventDefault();
@@ -16916,49 +16988,49 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				return;
 			}
 			if (stage.isFocused() && e.key === "v" && (e.ctrlKey || e.metaKey)) {
-				const catcher = document.getElementById("paste-catcher");
-				catcher?.focus();
+				this.focusPasteCatcher();
 				if (!this.enabled) return;
-				try {
-					if (this.isClipboardAPIAvailable()) {
-						const continueToPaste = await this.readClipboardData();
-						if (continueToPaste) {
-							this.state = COPY_PASTE_NODES_PLUGIN_STATE.PASTING;
-							this.handlePaste();
-							e.preventDefault();
-							return;
-						}
-					}
-				} catch (ex) {
-					this.instance.emitEvent("onPaste", ex);
-				}
-				e.preventDefault();
-				stage.container().focus();
-				return;
 			}
 		});
-		document.addEventListener("paste", async (e) => {
+		if (catcher) catcher.addEventListener("paste", async (e) => {
 			e.preventDefault();
-			const items = e.clipboardData?.items;
-			if (!items) return;
+			const dataList = e.clipboardData?.items;
+			let items = void 0;
+			if (!items) {
+				if (this.isClipboardAPIAvailable()) items = await navigator.clipboard.read();
+			}
+			if (!items && !dataList) return;
 			let hasWeaveData = false;
 			if (this.isClipboardAPIAvailable()) {
-				for (const item of items) if (item.type === "text/plain") {
-					const text = await this.getTextFromClipboard(item);
-					if (this.isWeaveData(text)) {
-						hasWeaveData = true;
-						this.toPaste = JSON.parse(text);
-					}
+				const readText = await navigator.clipboard.readText();
+				const continueToPaste = this.isWeaveData(readText);
+				if (continueToPaste) hasWeaveData = true;
+			} else for (const item of dataList ?? []) if (item.type === "text/plain") {
+				const text = await this.getTextFromClipboard(item);
+				if (this.isWeaveData(text)) {
+					hasWeaveData = true;
+					this.toPaste = JSON.parse(text);
 				}
 			}
 			if (hasWeaveData) {
 				this.handlePaste();
 				return;
 			}
-			const position = this.instance.getStage().getRelativePointerPosition();
-			if (position) this.instance.emitEvent("onPasteExternal", {
-				position,
-				dataList: items
+			const container = stage.container();
+			const scale = stage.scale();
+			const position = stage.position();
+			const width = container.clientWidth;
+			const height = container.clientHeight;
+			const centerX = (width / 2 - position.x) / scale.x;
+			const centerY = (height / 2 - position.y) / scale.y;
+			const pastePosition = {
+				x: centerX,
+				y: centerY
+			};
+			this.instance.emitEvent("onPasteExternal", {
+				position: pastePosition,
+				dataList,
+				items
 			});
 		});
 	}
@@ -16984,8 +17056,8 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	}
 	mapToPasteNodes() {
 		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
-		const selectedNodes = nodesSelectionPlugin.getSelectedNodes();
-		return selectedNodes.map((node) => ({
+		const selectedNodes = nodesSelectionPlugin?.getSelectedNodes();
+		return (selectedNodes ?? []).map((node) => ({
 			konvaNode: node,
 			node: node.getAttrs()
 		}));
@@ -17001,22 +17073,50 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			if (child.props.children) this.recursivelyUpdateKeys(child.props.children);
 		}
 	}
-	handlePaste() {
+	handlePaste(position, relativePosition) {
+		const stage = this.instance.getStage();
 		if (this.toPaste) {
-			const { mousePoint, container } = this.instance.getMousePointer();
+			const nodesToSelect = [];
 			for (const element of Object.keys(this.toPaste.weave)) {
-				const node = this.toPaste.weave[element];
+				const node = this.toPaste.weave[element].element;
+				const posRelativeToSelection = this.toPaste.weave[element].posRelativeToSelection;
+				let containerId = this.toPaste.weave[element].containerId;
 				if (node.props.children) this.recursivelyUpdateKeys(node.props.children);
 				const newNodeId = v4_default();
 				delete node.props.containerId;
 				node.key = newNodeId;
 				node.props.id = newNodeId;
-				node.props.x = mousePoint.x + (node.props.x - this.toPaste.weaveMinPoint.x);
-				node.props.y = mousePoint.y + (node.props.y - this.toPaste.weaveMinPoint.y);
-				this.instance.addNode(node, container?.getAttrs().id);
+				if (position) {
+					const container = containerOverCursor(this.instance, [], relativePosition);
+					let localPos = position;
+					if (!container) {
+						containerId = this.instance.getMainLayer()?.getAttrs().id ?? "";
+						const scale = stage.scaleX();
+						const stagePos = stage.position();
+						localPos = {
+							x: (localPos.x - stagePos.x) / scale,
+							y: (localPos.y - stagePos.y) / scale
+						};
+					}
+					if (container && container.getAttrs().nodeType === "frame") {
+						containerId = container.getAttrs().id ?? "";
+						localPos = container.getAbsoluteTransform().copy().invert().point(position);
+					}
+					const nodeHandler = this.instance.getNodeHandler(node.props.nodeType ?? "");
+					if (nodeHandler) {
+						const realOffset = nodeHandler.realOffset(node);
+						node.props.x = localPos.x + realOffset.x + posRelativeToSelection.x;
+						node.props.y = localPos.y + realOffset.y + posRelativeToSelection.y;
+					}
+				}
+				this.instance.addNode(node, containerId);
+				const realNode = this.instance.getStage().findOne(`#${newNodeId}`);
+				if (realNode) nodesToSelect.push(realNode);
 				this.instance.emitEvent("onPaste");
-				this.instance.emitEvent("onPaste", void 0);
 			}
+			this.instance.emitEvent("onPaste", void 0);
+			const nodesSelectionPlugin = this.getNodesSelectionPlugin();
+			nodesSelectionPlugin?.setSelectedNodes(nodesToSelect);
 			this.toPaste = void 0;
 		}
 		this.cancel();
@@ -17028,8 +17128,9 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		stage.container().focus();
 		this.setState(COPY_PASTE_NODES_PLUGIN_STATE.IDLE);
 		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
-		const selectedNodes = nodesSelectionPlugin.getSelectedNodes();
-		if (selectedNodes.length === 0) return;
+		const selectedNodes = nodesSelectionPlugin?.getSelectedNodes();
+		if (!selectedNodes || selectedNodes.length === 0) return;
+		const box = getBoundingBox(stage, selectedNodes);
 		const copyClipboard = {
 			weaveInstanceId: this.instance.getId(),
 			weave: {},
@@ -17038,33 +17139,67 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				y: 0
 			}
 		};
-		const result = this.instance.nodesToGroupSerialized(selectedNodes);
-		if (result && result.serializedNodes && result.serializedNodes.length > 0) {
-			copyClipboard.weaveMinPoint = result.minPoint;
-			for (const serializedNode of result.serializedNodes) copyClipboard.weave[serializedNode.key ?? ""] = serializedNode;
-			try {
-				await this.writeClipboardData(JSON.stringify(copyClipboard));
-				this.instance.emitEvent("onCopy");
-			} catch (ex) {
-				this.instance.emitEvent("onCopy", ex);
-			}
+		for (const node of selectedNodes) {
+			const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			const parentNode = node.getParent();
+			let parentId = parentNode?.getAttrs().id;
+			if (parentNode?.getAttrs().nodeId) {
+				const realParent = this.instance.getStage().findOne(`#${parentNode.getAttrs().nodeId}`);
+				if (realParent) parentId = realParent.getAttrs().id;
+			}
+			if (!parentId) continue;
+			const serializedNode = nodeHandler.serialize(node);
+			const nodeBox = node.getClientRect({ relativeTo: stage });
+			copyClipboard.weave[serializedNode.key ?? ""] = {
+				element: serializedNode,
+				posRelativeToSelection: {
+					x: nodeBox.x - (box?.x ?? 0),
+					y: nodeBox.y - (box?.y ?? 0)
+				},
+				containerId: parentId
+			};
+		}
+		try {
+			await this.writeClipboardData(JSON.stringify(copyClipboard));
+			this.instance.emitEvent("onCopy");
+		} catch (ex) {
+			this.instance.emitEvent("onCopy", ex);
 		}
 	}
 	async copy() {
 		await this.performCopy();
 	}
-	async paste() {
+	async paste(position, relativePosition) {
+		const stage = this.instance.getStage();
 		try {
-			const continueToPaste = await this.readClipboardData();
-			if (continueToPaste) this.handlePaste();
+			const readText = await navigator.clipboard.readText();
+			const continueToPaste = this.isWeaveData(readText);
+			if (continueToPaste) {
+				this.handlePaste(position, relativePosition);
+				return;
+			}
 		} catch (ex) {
 			this.instance.emitEvent("onPaste", ex);
 		}
 		try {
 			const items = await navigator.clipboard.read();
-			const position = this.instance.getStage().getRelativePointerPosition();
-			if (position) this.instance.emitEvent("onPasteExternal", {
-				position,
+			let pastePosition = position;
+			if (typeof pastePosition === "undefined") {
+				const container = stage.container();
+				const scale = stage.scale();
+				const position$1 = stage.position();
+				const centerClientX = container.clientWidth / 2;
+				const centerClientY = container.clientHeight / 2;
+				const centerX = (centerClientX - position$1.x) / scale.x;
+				const centerY = (centerClientY - position$1.y) / scale.y;
+				pastePosition = {
+					x: centerX,
+					y: centerY
+				};
+			}
+			this.instance.emitEvent("onPasteExternal", {
+				position: pastePosition,
 				items
 			});
 		} catch (ex) {
@@ -17086,7 +17221,6 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	}
 	getNodesSelectionPlugin() {
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (!nodesSelectionPlugin) throw new Error("WeaveNodesSelectionPlugin plugin not found");
 		return nodesSelectionPlugin;
 	}
 	isClipboardApiEnabled() {
@@ -17095,7 +17229,8 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	async getAvailablePasteMode(canHandleExternal) {
 		if (!this.isClipboardApiEnabled()) return WEAVE_COPY_PASTE_PASTE_MODES.CLIPBOARD_API_NOT_SUPPORTED;
 		try {
-			const allowPaste = await this.readClipboardData();
+			const readText = await navigator.clipboard.readText();
+			const allowPaste = this.isWeaveData(readText);
 			if (allowPaste) return WEAVE_COPY_PASTE_PASTE_MODES.INTERNAL;
 			const items = await navigator.clipboard.read();
 			if (await canHandleExternal(items)) return WEAVE_COPY_PASTE_PASTE_MODES.EXTERNAL;
@@ -17314,7 +17449,7 @@ var WeaveNode = class {
 				if (this.isSelecting() && this.isNodeSelected(node) && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					clearContainerTargets(this.instance);
 					const layerToMove = containerOverCursor(this.instance, [node]);
-					if (layerToMove && !hasFrames(node)) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
+					if (layerToMove && !hasFrames(node) && node.isDragging()) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 				}
 			};
 			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
@@ -17334,12 +17469,10 @@ var WeaveNode = class {
 					if (nodesDistanceSnappingPlugin) nodesDistanceSnappingPlugin.cleanupGuidelines();
 					const layerToMove = containerOverCursor(this.instance, [node]);
 					let containerToMove = this.instance.getMainLayer();
-					if (layerToMove) {
-						containerToMove = layerToMove;
-						containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
-					}
+					if (layerToMove) containerToMove = layerToMove;
 					let moved = false;
 					if (containerToMove && !hasFrames(node)) moved = moveNodeToContainer(this.instance, e.target, containerToMove);
+					if (containerToMove) containerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
 					if (!moved) this.instance.updateNode(this.serialize(node));
 				}
 			});
@@ -17479,6 +17612,12 @@ var WeaveNode = class {
 		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY);
 		return snappingPlugin;
 	}
+	realOffset(instance) {
+		return {
+			x: 0,
+			y: 0
+		};
+	}
 };
 
 //#endregion
@@ -18192,30 +18331,10 @@ var WeaveTargetingManager = class {
 	}
 	isNodesBoundingBoxIntersecting(nodes, nodeB) {
 		const stage = this.instance.getStage();
-		const a = this.getBoundingBoxOfNodes(nodes);
+		const a = getBoundingBox(stage, nodes);
 		const b = nodeB.getClientRect({ relativeTo: stage });
 		return !(a.x + a.width < b.x || a.x > b.x + b.width || a.y + a.height < b.y || a.y > b.y + b.height);
 	}
-	getBoundingBoxOfNodes(nodes) {
-		const stage = this.instance.getStage();
-		if (!nodes || nodes.length === 0) return {
-			x: 0,
-			y: 0,
-			width: 0,
-			height: 0
-		};
-		const rects = nodes.map((node) => node.getClientRect({ relativeTo: stage }));
-		const minX = Math.min(...rects.map((r) => r.x));
-		const minY = Math.min(...rects.map((r) => r.y));
-		const maxX = Math.max(...rects.map((r) => r.x + r.width));
-		const maxY = Math.max(...rects.map((r) => r.y + r.height));
-		return {
-			x: minX,
-			y: minY,
-			width: maxX - minX,
-			height: maxY - minY
-		};
-	}
 	nodeIntersectsContainerElement(node, actualLayer) {
 		const stage = this.instance.getStage();
 		const containers = stage.find(".containerCapable");
@@ -18235,7 +18354,7 @@ var WeaveTargetingManager = class {
 			}
 		} else {
 			let nodeActualContainer = node.getParent();
-			if (nodeActualContainer.getAttrs().nodeId) {
+			if (nodeActualContainer?.getAttrs().nodeId) {
 				const realParent = stage.findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
 				if (realParent) nodeActualContainer = realParent;
 			}
@@ -18264,7 +18383,7 @@ var WeaveTargetingManager = class {
 		this.logger.debug({ point }, "getMousePointer");
 		const stage = this.instance.getStage();
 		const mainLayer = this.instance.getMainLayer();
-		let relativeMousePointer = point ? point : mainLayer?.getRelativePointerPosition() ?? {
+		let relativeMousePointer = typeof point !== "undefined" ? point : mainLayer?.getRelativePointerPosition() ?? {
 			x: 0,
 			y: 0
 		};
@@ -18287,8 +18406,8 @@ var WeaveTargetingManager = class {
 				measureContainer = containerOfNode;
 			}
 		}
-		if (container?.getAttrs().nodeType !== "layer") relativeMousePointer = measureContainer?.getRelativePointerPosition() ?? relativeMousePointer;
-		if (container?.getAttrs().nodeType === "layer") relativeMousePointer = measureContainer?.getRelativePointerPosition() ?? {
+		if (typeof point === "undefined" && container?.getAttrs().nodeType !== "layer") relativeMousePointer = measureContainer?.getRelativePointerPosition() ?? relativeMousePointer;
+		if (typeof point === "undefined" && container?.getAttrs().nodeType === "layer") relativeMousePointer = measureContainer?.getRelativePointerPosition() ?? {
 			x: 0,
 			y: 0
 		};
@@ -19046,7 +19165,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.51.0";
+var version = "0.52.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -20052,7 +20171,7 @@ var WeaveEllipseNode = class extends WeaveNode {
 		ellipse.allowedAnchors = () => {
 			const stage = this.instance.getStage();
 			const actualEllipse = stage.findOne(`#${ellipse.id()}`);
-			if (actualEllipse.getAttrs().keepAspectRatio) return [
+			if (actualEllipse?.getAttrs().keepAspectRatio) return [
 				"top-left",
 				"top-right",
 				"bottom-left",
@@ -20089,6 +20208,12 @@ var WeaveEllipseNode = class extends WeaveNode {
 			y: 1
 		});
 	}
+	realOffset(element) {
+		return {
+			x: element.props.radiusX,
+			y: element.props.radiusY
+		};
+	}
 };
 
 //#endregion
@@ -20631,6 +20756,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 	initialized = false;
 	initialCursor = null;
 	cursorPadding = 5;
+	forceMainContainer = false;
 	onPropsChange = void 0;
 	update = void 0;
 	constructor() {
@@ -20723,10 +20849,8 @@ var WeaveImageToolAction = class extends WeaveAction {
 			crossOrigin: "anonymous",
 			...options
 		};
-		if (!position) {
-			stage.container().style.cursor = "crosshair";
-			stage.container().focus();
-		}
+		stage.container().style.cursor = "crosshair";
+		stage.container().focus();
 		this.imageId = v4_default();
 		this.imageURL = imageURL;
 		this.preloadImgs[this.imageId] = new Image();
@@ -20753,10 +20877,8 @@ var WeaveImageToolAction = class extends WeaveAction {
 	}
 	addImageNode(position) {
 		const stage = this.instance.getStage();
-		if (!position) {
-			stage.container().style.cursor = "crosshair";
-			stage.container().focus();
-		}
+		stage.container().style.cursor = "crosshair";
+		stage.container().focus();
 		if (position) {
 			this.setState(IMAGE_TOOL_STATE.SELECTED_POSITION);
 			this.handleAdding(position);
@@ -20816,8 +20938,11 @@ var WeaveImageToolAction = class extends WeaveAction {
 						height: this.preloadImgs[this.imageId].height
 					}
 				});
-				this.instance.addNode(node, this.container?.getAttrs().id);
-				this.instance.emitEvent("onAddedImage", { imageURL: this.props.imageURL });
+				this.instance.addNode(node, this.forceMainContainer ? this.instance.getMainLayer()?.getAttrs().id : this.container?.getAttrs().id);
+				this.instance.emitEvent("onAddedImage", {
+					imageURL: this.props.imageURL,
+					nodeId: this.imageId
+				});
 			}
 			this.setState(IMAGE_TOOL_STATE.FINISHED);
 		}
@@ -20829,6 +20954,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.cancelAction = cancelAction;
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+		this.forceMainContainer = params?.forceMainContainer ?? false;
 		if (params?.imageURL) {
 			this.loadImage(params.imageURL, params?.options ?? void 0, params?.position ?? void 0);
 			return;
@@ -20850,6 +20976,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 		stage.container().style.cursor = "default";
 		this.initialCursor = null;
 		this.imageId = null;
+		this.forceMainContainer = false;
 		this.container = void 0;
 		this.imageURL = null;
 		this.clickPoint = null;
@@ -21686,6 +21813,12 @@ var WeaveStarNode = class extends WeaveNode {
 			y: 1
 		});
 	}
+	realOffset(element) {
+		return {
+			x: element.props.outerRadius,
+			y: element.props.outerRadius
+		};
+	}
 };
 
 //#endregion
@@ -21803,6 +21936,12 @@ var WeaveRegularPolygonNode = class extends WeaveNode {
 			y: 1
 		});
 	}
+	realOffset(element) {
+		return {
+			x: element.props.radius,
+			y: element.props.radius
+		};
+	}
 };
 
 //#endregion
@@ -22471,20 +22610,39 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		});
 		this.setZoom(scale, false);
 	}
-	fitToSelection() {
+	fitToSelection(smartZoom = false) {
 		if (!this.enabled) return;
 		const stage = this.instance.getStage();
 		const selectionPlugin = this.getNodesSelectionPlugin();
 		if (!selectionPlugin) return;
 		const nodes = selectionPlugin.getTransformer().getNodes();
 		if (nodes.length === 0) return;
+		const box = getBoundingBox(stage, selectionPlugin.getTransformer().getNodes());
+		if (box.width === 0 || box.height === 0) return;
+		const container = stage.container();
+		const scale = stage.scale();
+		const viewportWidth = container.clientWidth;
+		const viewportHeight = container.clientHeight;
+		const visibleStageWidth = viewportWidth / scale.x;
+		const visibleStageHeight = viewportHeight / scale.y;
+		const fitsInView = box.width + this.config.fitToSelection.padding * 2 <= visibleStageWidth && box.height + this.config.fitToSelection.padding * 2 <= visibleStageHeight;
+		const selectionCenter = {
+			x: box.x + box.width / 2,
+			y: box.y + box.height / 2
+		};
+		if (smartZoom && fitsInView) {
+			const newPosition = {
+				x: viewportWidth / 2 - selectionCenter.x * scale.x,
+				y: viewportHeight / 2 - selectionCenter.y * scale.y
+			};
+			stage.position(newPosition);
+			return;
+		}
 		this.setZoom(1, false);
 		stage.setAttrs({
 			x: 0,
 			y: 0
 		});
-		const box = getBoundingBox(stage, selectionPlugin.getTransformer().getNodes());
-		if (box.width === 0 || box.height === 0) return;
 		const stageBox = {
 			width: stage.width(),
 			height: stage.height()
@@ -22493,22 +22651,22 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		const availableScreenHeight = stageBox.height - 2 * this.config.fitToSelection.padding;
 		const scaleX = availableScreenWidth / box.width;
 		const scaleY = availableScreenHeight / box.height;
-		const scale = Math.min(scaleX, scaleY);
+		const finalScale = Math.min(scaleX, scaleY);
 		stage.scale({
-			x: scale,
-			y: scale
+			x: finalScale,
+			y: finalScale
 		});
 		const selectionCenterX = box.x + box.width / 2;
 		const selectionCenterY = box.y + box.height / 2;
-		const canvasCenterX = stage.width() / (2 * scale);
-		const canvasCenterY = stage.height() / (2 * scale);
-		const stageX = (canvasCenterX - selectionCenterX) * scale;
-		const stageY = (canvasCenterY - selectionCenterY) * scale;
+		const canvasCenterX = stage.width() / (2 * finalScale);
+		const canvasCenterY = stage.height() / (2 * finalScale);
+		const stageX = (canvasCenterX - selectionCenterX) * finalScale;
+		const stageY = (canvasCenterY - selectionCenterY) * finalScale;
 		stage.position({
 			x: stageX,
 			y: stageY
 		});
-		this.setZoom(scale, false);
+		this.setZoom(finalScale, false);
 	}
 	enable() {
 		this.enabled = true;
@@ -22603,20 +22761,21 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			lastCenter = null;
 		}, { passive: false });
 		const handleWheel = (e) => {
-			e.evt.preventDefault();
-			const stage$1 = this.instance.getStage();
-			const performZoom = this.isCtrlOrMetaPressed || !this.isCtrlOrMetaPressed && e.evt.ctrlKey && e.evt.deltaMode === 0;
-			if (!this.enabled || !stage$1.isFocused() || !performZoom) return;
-			const delta = e.evt.deltaY > 0 ? 1 : -1;
+			const performZoom = this.isCtrlOrMetaPressed || !this.isCtrlOrMetaPressed && e.ctrlKey && e.deltaMode === 0;
+			const mouseX = e.clientX;
+			const mouseY = e.clientY;
+			const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+			if (!this.enabled || !performZoom || getClosestParentWithId(elementUnderMouse) !== stage.container()) return;
+			const delta = e.deltaY > 0 ? 1 : -1;
 			this.zoomVelocity += delta;
-			this.isTrackpad = Math.abs(e.evt.deltaY) < 15 && e.evt.deltaMode === 0;
+			this.isTrackpad = Math.abs(e.deltaY) < 15 && e.deltaMode === 0;
 			if (!this.zooming) {
 				this.zooming = true;
 				this.zoomInertiaType = WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL;
 				requestAnimationFrame(this.zoomTick.bind(this));
 			}
 		};
-		stage.on("wheel", handleWheel);
+		window.addEventListener("wheel", handleWheel, { passive: false });
 	}
 	getInertiaScale() {
 		const stage = this.instance.getStage();
@@ -22789,7 +22948,7 @@ var WeaveFitToSelectionToolAction = class extends WeaveAction {
 	}
 	trigger(cancelAction, params) {
 		const stageZoomPlugin = this.getStageZoomPlugin();
-		stageZoomPlugin.fitToSelection();
+		stageZoomPlugin.fitToSelection(params?.smartZoom ?? false);
 		this.previousAction = params.previousAction;
 		this.cancelAction = cancelAction;
 		this.cancelAction();
@@ -25111,7 +25270,7 @@ const WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO = 4;
 const WEAVE_GRID_DEFAULT_RADIUS = 1;
 const WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO = 2;
 const WEAVE_GRID_DEFAULT_MAJOR_EVERY = 10;
-const WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS = 300;
+const WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS = 250;
 const WEAVE_GRID_LAYER_ID = "gridLayer";
 
 //#endregion
@@ -25486,16 +25645,17 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			this.panning = false;
 		});
 		const handleWheel = (e) => {
-			e.evt.preventDefault();
-			const stage$1 = this.instance.getStage();
-			const performPanning = !this.isCtrlOrMetaPressed && !e.evt.ctrlKey;
-			if (!this.enabled || !stage$1.isFocused() || this.isCtrlOrMetaPressed || e.evt.buttons === 4 || !performPanning) return;
+			const performPanning = !this.isCtrlOrMetaPressed && !e.ctrlKey;
+			const mouseX = e.clientX;
+			const mouseY = e.clientY;
+			const elementUnderMouse = document.elementFromPoint(mouseX, mouseY);
+			if (!this.enabled || this.isCtrlOrMetaPressed || e.buttons === 4 || !performPanning || getClosestParentWithId(elementUnderMouse) !== stage.container()) return;
 			this.getContextMenuPlugin()?.cancelLongPressTimer();
-			stage$1.x(stage$1.x() - e.evt.deltaX);
-			stage$1.y(stage$1.y() - e.evt.deltaY);
+			stage.x(stage.x() - e.deltaX);
+			stage.y(stage.y() - e.deltaY);
 			this.instance.emitEvent("onStageMove");
 		};
-		stage.on("wheel", handleWheel);
+		window.addEventListener("wheel", handleWheel, { passive: false });
 		stage.container().style.touchAction = "none";
 		stage.container().style.userSelect = "none";
 		stage.container().style.setProperty("-webkit-user-drag", "none");
@@ -26894,6 +27054,7 @@ exports.TEXT_TOOL_ACTION_NAME = TEXT_TOOL_ACTION_NAME
 exports.TEXT_TOOL_STATE = TEXT_TOOL_STATE
 exports.WEAVE_ARROW_NODE_TYPE = WEAVE_ARROW_NODE_TYPE
 exports.WEAVE_COPY_PASTE_NODES_KEY = WEAVE_COPY_PASTE_NODES_KEY
+exports.WEAVE_COPY_PASTE_PASTE_CATCHER_ID = WEAVE_COPY_PASTE_PASTE_CATCHER_ID
 exports.WEAVE_COPY_PASTE_PASTE_MODES = WEAVE_COPY_PASTE_PASTE_MODES
 exports.WEAVE_DEFAULT_USER_INFO_FUNCTION = WEAVE_DEFAULT_USER_INFO_FUNCTION
 exports.WEAVE_ELLIPSE_NODE_TYPE = WEAVE_ELLIPSE_NODE_TYPE
@@ -26989,6 +27150,7 @@ exports.clearContainerTargets = clearContainerTargets
 exports.containerOverCursor = containerOverCursor
 exports.containsNodeDeep = containsNodeDeep
 exports.getBoundingBox = getBoundingBox
+exports.getClosestParentWithId = getClosestParentWithId
 exports.getContrastTextColor = getContrastTextColor
 exports.getExportBoundingBox = getExportBoundingBox
 exports.getSelectedNodesMetadata = getSelectedNodesMetadata