@inditextech/weave-sdk 0.52.1 → 0.52.3

package/dist/sdk.js

@@ -15494,6 +15494,7 @@ 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
@@ -15588,12 +15589,12 @@ var WeaveStore = class {
 					node: JSON.parse(JSON.stringify(nodeInfo.node))
 				});
 			}
-			if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
+			if (!this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) {
 				this.instance.setupRenderer();
 				this.isRoomLoaded = true;
 				this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 			}
-			if (this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) this.instance.render();
+			if (this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) this.instance.render();
 		});
 	}
 	canUndoStateStep() {
@@ -15913,6 +15914,18 @@ 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;
+}
 
 //#endregion
 //#region src/actions/selection-tool/constants.ts
@@ -16244,6 +16257,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			"bottom-right"
 		];
 		this.taps = 0;
+		this.isSpaceKeyPressed = false;
 		this.isDoubleTap = false;
 		this.tapStart = {
 			x: 0,
@@ -16345,7 +16359,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (moved) this.getContextMenuPlugin()?.cancelLongPressTimer();
 			this.triggerSelectedNodesEvent();
 		};
-		tr.on("transform", (0, import_lodash.throttle)(handleTransform, 50));
+		tr.on("transform", (0, import_lodash$1.throttle)(handleTransform, 50));
 		tr.on("transformend", () => {
 			this.triggerSelectedNodesEvent();
 		});
@@ -16574,11 +16588,15 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.selecting = false;
 		const stage = this.instance.getStage();
 		stage.container().addEventListener("keydown", (e) => {
+			if (e.code === "Space") this.isSpaceKeyPressed = true;
 			if ((e.key === "Backspace" || e.key === "Delete") && Object.keys(window.weaveTextEditing).length === 0) {
 				this.removeSelectedNodes();
 				return;
 			}
 		});
+		stage.container().addEventListener("keyup", (e) => {
+			if (e.key === "Space") this.isSpaceKeyPressed = false;
+		});
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers[e.evt.pointerId] = e.evt;
@@ -16631,6 +16649,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				this.selecting = false;
 				return;
 			}
+			if (this.isSpaceKeyPressed) return;
 			if (!this.selecting) return;
 			const intStage = this.instance.getStage();
 			x2 = intStage.getRelativePointerPosition()?.x ?? 0;
@@ -16673,7 +16692,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 					y: 0,
 					time: 0
 				};
-				this.isDoubleTap = true;
 				this.hideSelectorArea();
 				this.handleClickOrTap(e);
 				return;
@@ -16805,6 +16823,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		}
 		if (typeof nodeTargeted.getAttrs().isContainerPrincipal !== "undefined" && !nodeTargeted.getAttrs().isContainerPrincipal) return;
 		if (this.isDoubleTap && !metaPressed) {
+			this.isDoubleTap = false;
 			nodeTargeted.dblClick();
 			return;
 		}
@@ -16968,19 +16987,30 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			catcher.style.zIndex = "-1";
 			catcher.style.outline = "none";
 			catcher.style.opacity = "0";
+			catcher.onpaste = () => false;
+			catcher.oncontextmenu = () => false;
 			catcher.tabIndex = 0;
 			const stageContainer = stage.container();
 			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();
@@ -16992,47 +17022,47 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				if (!this.enabled) return;
 			}
 		});
-		if (catcher) catcher.addEventListener("paste", async (e) => {
-			e.preventDefault();
-			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()) {
-				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 (catcher) {
+			document.addEventListener("paste", (e) => {
+				e.preventDefault();
+				const dataList = e.clipboardData?.items;
+				if (!dataList) return;
+				if (dataList?.length > 0) {
+					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", {
+						positionCalculated: true,
+						position: pastePosition,
+						dataList,
+						items: void 0
+					});
 				}
-			}
-			if (hasWeaveData) {
-				this.handlePaste();
-				return;
-			}
-			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
 			});
-		});
+			catcher.addEventListener("paste", async (e) => {
+				e.preventDefault();
+				let items = void 0;
+				let hasWeaveData = false;
+				if (!items) {
+					if (this.isClipboardAPIAvailable()) items = await navigator.clipboard.read();
+				}
+				if (!items || items.length === 0) return;
+				if (this.isClipboardAPIAvailable()) {
+					const readText = await navigator.clipboard.readText();
+					const continueToPaste = this.isWeaveData(readText);
+					if (continueToPaste) hasWeaveData = true;
+				}
+				if (hasWeaveData) this.handlePaste();
+			});
+		}
 	}
 	isWeaveData(text) {
 		try {
@@ -17047,13 +17077,6 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			return false;
 		}
 	}
-	getTextFromClipboard(item) {
-		return new Promise((resolve) => {
-			item.getAsString((text) => {
-				resolve(text);
-			});
-		});
-	}
 	mapToPasteNodes() {
 		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
 		const selectedNodes = nodesSelectionPlugin?.getSelectedNodes();
@@ -17184,8 +17207,10 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		}
 		try {
 			const items = await navigator.clipboard.read();
-			let pastePosition = position;
+			let positionCalculated = false;
+			let pastePosition = relativePosition;
 			if (typeof pastePosition === "undefined") {
+				positionCalculated = true;
 				const container = stage.container();
 				const scale = stage.scale();
 				const position$1 = stage.position();
@@ -17199,6 +17224,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				};
 			}
 			this.instance.emitEvent("onPasteExternal", {
+				positionCalculated,
 				position: pastePosition,
 				items
 			});
@@ -17398,7 +17424,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.throttle)(handleTransform, 100));
+			node.on("transform", (0, import_lodash$1.throttle)(handleTransform, 100));
 			node.on("transformend", (e) => {
 				const node$1 = e.target;
 				this.instance.emitEvent("onTransform", null);
@@ -17452,7 +17478,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.throttle)(handleDragMove, 100));
+			node.on("dragmove", (0, import_lodash$1.throttle)(handleDragMove, 100));
 			node.on("dragend", (e) => {
 				if (!this.didMove) return;
 				const isErasing = this.instance.getActiveAction() === "eraseTool";
@@ -19165,7 +19191,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.52.1";
+var version = "0.52.3";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -19747,6 +19773,15 @@ var Weave = class {
 	isEmpty() {
 		return this.getElementsTree().length === 0;
 	}
+	getNodeContainerId(node) {
+		const stage = this.getStage();
+		let nodeContainer = node.getParent()?.getAttrs().id ?? "";
+		if (typeof node.getParent()?.getAttrs().nodeId !== "undefined") {
+			const realContainer = stage.findOne(`#${node.getParent()?.getAttrs().nodeId}`);
+			if (realContainer) nodeContainer = realContainer.getAttrs().id ?? "";
+		}
+		return nodeContainer;
+	}
 	moveUp(node) {
 		this.zIndexManager.moveUp(node);
 	}
@@ -20171,7 +20206,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",
@@ -20355,7 +20390,7 @@ var WeaveTextNode = class extends WeaveNode {
 		text.on("transformstart", (e) => {
 			this.instance.emitEvent("onTransform", e.target);
 		});
-		text.on("transform", (0, import_lodash.throttle)(handleTextTransform, 50));
+		text.on("transform", (0, import_lodash$1.throttle)(handleTextTransform, 50));
 		text.on("transformend", () => {
 			this.instance.emitEvent("onTransform", null);
 		});
@@ -20618,7 +20653,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;
 			}
 		};
@@ -20642,20 +20677,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;
@@ -20978,6 +21020,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.imageId = null;
 		this.forceMainContainer = false;
 		this.container = void 0;
+		this.tempImageNode = null;
 		this.imageURL = null;
 		this.clickPoint = null;
 		this.setState(IMAGE_TOOL_STATE.IDLE);
@@ -20993,19 +21036,19 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.image = image;
 		this.internalImage = internalImage;
 		this.cropGroup = clipGroup;
+		this.cropping = false;
 		this.onClose = () => {};
 		this.handleHide = this.hide.bind(this);
 	}
 	show(onClose) {
 		this.onClose = onClose;
-		const nodeSnappingPlugin = this.instance.getPlugin("nodesSnapping");
-		if (nodeSnappingPlugin) this.instance.disablePlugin("nodesSnapping");
-		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (selectionPlugin) {
-			this.instance.disablePlugin("nodesSelection");
-			selectionPlugin.getTransformer().nodes([]);
-			selectionPlugin.getTransformer().hide();
-		}
+		this.cropping = true;
+		const nodeEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
+		if (nodeEdgeSnappingPlugin) nodeEdgeSnappingPlugin.disable();
+		const nodeDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
+		if (nodeDistanceSnappingPlugin) nodeDistanceSnappingPlugin.disable();
+		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
+		if (nodesSelectionPlugin) nodesSelectionPlugin.disable();
 		this.image.setAttrs({ cropping: true });
 		const imageAttrs = this.image.getAttrs();
 		this.internalImage.hide();
@@ -21125,6 +21168,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 			this.drawGridLines(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
 		};
 		this.instance.getStage().on("pointerdown", (e) => {
+			if (!this.cropping) return;
 			const isStage = e.target instanceof Konva.Stage;
 			const isContainerEmptyArea = typeof e.target.getAttrs().isContainerPrincipal !== "undefined" && !e.target.getAttrs().isContainerPrincipal;
 			if (isStage || isContainerEmptyArea) this.cancel();
@@ -21164,6 +21208,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 	}
 	hide(e) {
 		if (!["Enter", "Escape"].includes(e.key)) return;
+		this.cropping = false;
 		this.image.setAttrs({ cropping: false });
 		if (e.key === "Enter") this.handleClipEnd();
 		const stage = this.instance.getStage();
@@ -21173,20 +21218,13 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.instance.getStage().container().removeEventListener("keydown", this.handleHide);
 		this.cropGroup.destroyChildren();
 		this.cropGroup.hide();
-		const nodeSnappingPlugin = this.instance.getPlugin("nodesSnapping");
-		if (nodeSnappingPlugin) this.instance.enablePlugin("nodesSnapping");
+		const nodesEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
+		if (nodesEdgeSnappingPlugin) nodesEdgeSnappingPlugin.enable();
+		const nodesDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
+		if (nodesDistanceSnappingPlugin) nodesDistanceSnappingPlugin.enable();
 		this.internalImage.show();
-		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (selectionPlugin) {
-			this.instance.enablePlugin("nodesSelection");
-			const selectionTransformer = selectionPlugin.getTransformer();
-			selectionTransformer.nodes([this.image]);
-			selectionTransformer.show();
-			setTimeout(() => {
-				selectionPlugin.triggerSelectedNodesEvent();
-				selectionTransformer.forceUpdate();
-			}, 0);
-		}
+		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
+		if (nodesSelectionPlugin) nodesSelectionPlugin.enable();
 		stage.mode(WEAVE_STAGE_DEFAULT_MODE);
 		this.instance.emitEvent("onImageCropEnd", { instance: this.image });
 	}
@@ -21324,6 +21362,18 @@ var WeaveImageCrop = class WeaveImageCrop {
 			y: a.y + t * ab.y
 		};
 	}
+	getNodesEdgeSnappingPlugin() {
+		const snappingEdgesPlugin = this.instance.getPlugin(WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY);
+		return snappingEdgesPlugin;
+	}
+	getNodesDistanceSnappingPlugin() {
+		const snappingDistancePlugin = this.instance.getPlugin(WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY);
+		return snappingDistancePlugin;
+	}
+	getNodesSelectionPlugin() {
+		const nodesSelectionPlugin = this.instance.getPlugin(WEAVE_NODES_SELECTION_KEY);
+		return nodesSelectionPlugin;
+	}
 };
 
 //#endregion
@@ -21587,12 +21637,6 @@ var WeaveImageNode = class extends WeaveNode {
 			});
 			this.updateImageCrop(nextProps);
 		}
-		try {
-			const selectionPlugin = this.instance.getPlugin("nodesSelection");
-			if (selectionPlugin) selectionPlugin.getTransformer().forceUpdate();
-		} catch (error) {
-			console.error("Error updating transformer", error);
-		}
 	}
 	loadImage(params, image) {
 		const imageProps = params;
@@ -21654,7 +21698,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.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+		if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash$1.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);
@@ -21671,7 +21715,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.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+		if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash$1.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
 			internalImage.width(imageAttrs.uncroppedImage.width);
 			internalImage.height(imageAttrs.uncroppedImage.height);
 			internalImage.rotation(0);
@@ -22417,7 +22461,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
-		this.config = (0, import_lodash.merge)(WEAVE_STAGE_ZOOM_DEFAULT_CONFIG, config);
+		this.config = (0, import_lodash$1.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;
@@ -22445,7 +22489,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 				this.config.zoomSteps = [minimumZoom, ...this.config.zoomSteps];
 			}
 		};
-		mainLayer?.on("draw", (0, import_lodash.throttle)(handleDraw, 50));
+		mainLayer?.on("draw", (0, import_lodash$1.throttle)(handleDraw, 50));
 		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
 	setZoom(scale, centered = true, pointer) {
@@ -22764,8 +22808,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;
@@ -25334,7 +25383,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 			if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
 			this.onRender();
 		};
-		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
+		stage.on("pointermove", (0, import_lodash$1.throttle)(handleMouseMove, 50));
 		stage.on("pointermove", () => {
 			if (this.enabled) this.onRender();
 		});
@@ -25580,6 +25629,10 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		window.addEventListener("keydown", (e) => {
 			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
 			if (e.code === "Space") {
+				this.getContextMenuPlugin()?.disable();
+				this.getNodesSelectionPlugin()?.disable();
+				this.getNodesEdgeSnappingPlugin()?.disable();
+				this.getNodesDistanceSnappingPlugin()?.disable();
 				this.isSpaceKeyPressed = true;
 				this.enableMove();
 			}
@@ -25587,6 +25640,10 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		window.addEventListener("keyup", (e) => {
 			if (e.key === "Meta" || e.key === "Control") this.isCtrlOrMetaPressed = false;
 			if (e.code === "Space") {
+				this.getContextMenuPlugin()?.enable();
+				this.getNodesSelectionPlugin()?.enable();
+				this.getNodesEdgeSnappingPlugin()?.enable();
+				this.getNodesDistanceSnappingPlugin()?.enable();
 				this.isSpaceKeyPressed = false;
 				this.disableMove();
 			}
@@ -25601,14 +25658,9 @@ 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;
-				enableMove = true;
-			}
-			if (!enableMove && e.evt.pointerType === "mouse" && e.evt.buttons === 4) {
-				this.isMouseMiddleButtonPressed = true;
-				enableMove = true;
-			}
+			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;
 				lastPos = stage.getPointerPosition();
@@ -25625,8 +25677,8 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				y: e.evt.clientY
 			});
 			if (this.pointers.size > 1) return;
+			if (this.isSpaceKeyPressed) stage.container().style.cursor = "grabbing";
 			if (!isDragging) return;
-			if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
 			this.getContextMenuPlugin()?.cancelLongPressTimer();
 			const pos = stage.getPointerPosition();
 			if (pos && lastPos) {
@@ -25648,14 +25700,18 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			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");
@@ -25685,9 +25741,21 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		return zoomPlugin;
 	}
 	getContextMenuPlugin() {
-		const contextMenuPlugin = this.instance.getPlugin("contextMenu");
+		const contextMenuPlugin = this.instance.getPlugin(WEAVE_CONTEXT_MENU_PLUGIN_KEY);
 		return contextMenuPlugin;
 	}
+	getNodesSelectionPlugin() {
+		const selectionPlugin = this.instance.getPlugin(WEAVE_NODES_SELECTION_KEY);
+		return selectionPlugin;
+	}
+	getNodesEdgeSnappingPlugin() {
+		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY);
+		return snappingPlugin;
+	}
+	getNodesDistanceSnappingPlugin() {
+		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY);
+		return snappingPlugin;
+	}
 	enable() {
 		this.enabled = true;
 	}
@@ -25787,7 +25855,7 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 					newConnectedUsers[userInformation.id] = userInformation;
 				}
 			}
-			if (!(0, import_lodash.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
+			if (!(0, import_lodash$1.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
 			this.connectedUsers = newConnectedUsers;
 		});
 	}
@@ -27009,5 +27077,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, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, 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_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 };
 //# sourceMappingURL=sdk.js.map