@inditextech/weave-sdk 0.41.0 → 0.42.1

package/dist/sdk.cjs

@@ -15879,6 +15879,7 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	initEvents() {
 		const stage = this.instance.getStage();
 		stage.on("pointerdown", (e) => {
+			e.evt.preventDefault();
 			this.setTapStart(e);
 			this.pointers[e.evt.pointerId] = e.evt;
 			if (e.evt.buttons === 0) return;
@@ -16961,11 +16962,7 @@ var WeaveNode = class {
 				const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
 				if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
 				if (nodesSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesSnappingPlugin.evaluateGuidelines(e);
-				if (this.isSelecting() && this.isNodeSelected(node$1)) {
-					this.scaleReset(node$1);
-					const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
-					if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
-				}
+				if (this.isSelecting() && this.isNodeSelected(node$1)) this.scaleReset(node$1);
 			};
 			node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
 			node.on("transformend", (e) => {
@@ -17041,14 +17038,15 @@ var WeaveNode = class {
 			node.on("pointerover", (e) => {
 				e.cancelBubble = true;
 				const stage = this.instance.getStage();
+				const isNodeSelectionEnabled = this.getSelectionPlugin()?.isEnabled();
 				const realNode = this.instance.getInstanceRecursive(node);
 				const isTargetable = e.target.getAttrs().isTargetable !== false;
 				const isLocked$1 = realNode.getAttrs().locked ?? false;
-				if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isLocked$1) {
+				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isLocked$1) {
 					const stage$1 = this.instance.getStage();
 					stage$1.container().style.cursor = "default";
 				}
-				if (this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
+				if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked$1 && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
 					const stage$1 = this.instance.getStage();
 					stage$1.container().style.cursor = "pointer";
 					this.setHoverState(realNode);
@@ -18426,7 +18424,6 @@ var WeaveStateManager = class {
 	}
 	addNode(node, parentId = "mainLayer", index = void 0) {
 		const state = this.instance.getStore().getState();
-		this.logger.info({ state: JSON.parse(JSON.stringify(state)) }, "State before addNode");
 		if ((0, import_lodash.isEmpty)(state.weave)) {
 			const msg = `State is empty, cannot add the node`;
 			this.logger.warn({
@@ -18453,33 +18450,57 @@ var WeaveStateManager = class {
 			}, msg);
 			return;
 		}
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "addNode: parent before init");
-		const newChildren = JSON.parse(JSON.stringify(parent.props.children ?? []));
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "addNode: parent before add");
-		if (index) {
-			newChildren?.splice(index, 0, node);
-			for (let i = 0; i < newChildren.length; i++) newChildren[i].props.zIndex = i;
-		}
-		if (!index) {
-			const childrenAmount = newChildren.length;
-			node.props.zIndex = childrenAmount;
-			const nodeToAdd = {
-				...node,
-				props: {
-					...node.props,
-					zIndex: childrenAmount
-				}
-			};
-			this.logger.info({ node: JSON.parse(JSON.stringify(nodeToAdd)) }, "addNode: node to add");
-			newChildren.push(nodeToAdd);
+		const doc = (0, __syncedstore_core.getYjsDoc)(state);
+		doc.transact(() => {
+			if (!parent.props.children) parent.props.children = [];
+			if (index) {
+				parent.props.children.splice(index, 0, node);
+				for (let i = 0; i < parent.props.children.length; i++) parent.props.children[i].props.zIndex = i;
+			}
+			if (!index) {
+				const childrenAmount = parent.props.children.length;
+				const nodeToAdd = {
+					...node,
+					props: {
+						...node.props,
+						zIndex: childrenAmount
+					}
+				};
+				parent.props.children.push(nodeToAdd);
+			}
+			this.instance.emitEvent("onNodeAdded", node);
+		});
+	}
+	deepSyncSyncedStore(target, source) {
+		for (const key in target) if (!(key in source)) delete target[key];
+		for (const key in source) {
+			const srcVal = source[key];
+			const tgtVal = target[key];
+			const bothAreObjects = this.isObject(srcVal) && this.isObject(tgtVal);
+			if (bothAreObjects && !Array.isArray(srcVal)) this.deepSyncSyncedStore(tgtVal, srcVal);
+			else if (Array.isArray(srcVal)) this.syncArray(target, key, srcVal);
+			else if (tgtVal !== srcVal) target[key] = srcVal;
+		}
+	}
+	syncArray(target, key, sourceArr) {
+		const tgtArr = target[key];
+		if (!Array.isArray(tgtArr)) {
+			target[key] = [...sourceArr];
+			return;
 		}
-		if (typeof newChildren !== "undefined") parent.props.children = newChildren;
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "addNode: parent after add");
-		this.instance.emitEvent("onNodeAdded", node);
+		while (tgtArr.length > sourceArr.length) tgtArr.pop();
+		for (let i = 0; i < sourceArr.length; i++) {
+			const srcItem = sourceArr[i];
+			const tgtItem = tgtArr[i];
+			if (this.isObject(srcItem) && this.isObject(tgtItem)) this.deepSyncSyncedStore(tgtItem, srcItem);
+			else if (tgtItem !== srcItem) tgtArr[i] = srcItem;
+		}
+	}
+	isObject(val) {
+		return typeof val === "object" && val !== null;
 	}
 	updateNode(node) {
 		const state = this.instance.getStore().getState();
-		this.logger.info({ state: JSON.parse(JSON.stringify(state)) }, "State before updateNode");
 		if ((0, import_lodash.isEmpty)(state.weave)) {
 			const msg = `State is empty, cannot update the node`;
 			this.logger.warn({ node }, msg);
@@ -18491,19 +18512,14 @@ var WeaveStateManager = class {
 			this.logger.warn({ node }, msg);
 			return;
 		}
-		this.logger.info({ node: JSON.parse(JSON.stringify(nodeState)) }, "updateNode: before update");
-		const newNode = JSON.parse(JSON.stringify(nodeState));
-		newNode.props = {
-			...newNode.props,
-			...node.props
-		};
-		if (typeof newNode.props !== "undefined") nodeState.props = newNode.props;
-		this.logger.info({ node: JSON.parse(JSON.stringify(nodeState)) }, "updateNode: after update");
+		const doc = (0, __syncedstore_core.getYjsDoc)(state);
+		doc.transact(() => {
+			this.deepSyncSyncedStore(nodeState.props, node.props);
+		});
 		this.instance.emitEvent("onNodeUpdated", node);
 	}
 	removeNode(node) {
 		const state = this.instance.getStore().getState();
-		this.logger.info({ stage: JSON.parse(JSON.stringify(state)) }, "State before removeNode");
 		if ((0, import_lodash.isEmpty)(state.weave)) {
 			const msg = `State is empty, cannot update the node`;
 			this.logger.warn({ node }, msg);
@@ -18520,24 +18536,23 @@ var WeaveStateManager = class {
 			this.logger.warn({ node }, msg);
 			return;
 		}
-		this.logger.info({ key: node.key }, "removeNode: node to remove");
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "removeNode: parent before remove");
-		const newChildren = JSON.parse(JSON.stringify(parent.props.children ?? []));
-		for (let i = newChildren.length - 1; i >= 0; i--) if (newChildren[i].key === node.key) {
-			newChildren.splice(i, 1);
-			break;
-		}
-		for (let i = 0; i < newChildren.length; i++) newChildren[i].props.zIndex = i;
-		if (typeof newChildren !== "undefined") parent.props.children = newChildren;
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "removeNode: parent after remove");
-		this.instance.emitEvent("onNodeRemoved", node);
+		const doc = (0, __syncedstore_core.getYjsDoc)(state);
+		doc.transact(() => {
+			if (parent.props.children) {
+				for (let i = parent.props.children.length - 1; i >= 0; i--) if (parent.props.children[i].key === node.key) {
+					parent.props.children.splice(i, 1);
+					break;
+				}
+				for (let i = 0; i < parent.props.children.length; i++) parent.props.children[i].props.zIndex = i;
+				this.instance.emitEvent("onNodeRemoved", node);
+			}
+		});
 	}
 	removeNodes(nodes) {
 		for (const node of nodes) this.removeNode(node);
 	}
 	moveNode(node, position) {
 		const state = this.instance.getStore().getState();
-		this.logger.info({ stage: JSON.parse(JSON.stringify(state)) }, "State before moveNode");
 		if ((0, import_lodash.isEmpty)(state.weave)) {
 			const msg = `State is empty, cannot update the node`;
 			this.logger.warn({ node }, msg);
@@ -18549,20 +18564,32 @@ var WeaveStateManager = class {
 			this.logger.warn({ node }, msg);
 			return;
 		}
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "moveNode: parent before move");
-		if (parent && parent.props.children) {
+		if (!parent) {
+			const msg = `Parent doesn't exists, cannot move it`;
+			this.logger.warn({ node }, msg);
+			return;
+		}
+		if (parent.props.children) {
 			const childrenAmount = parent.props.children.length;
 			const nodeIndex = parent.props.children.findIndex((child) => child.key === node.key);
-			const newChildren = JSON.parse(JSON.stringify(parent.props.children ?? []));
-			newChildren.splice(nodeIndex, 1);
-			if (position === __inditextech_weave_types.WEAVE_NODE_POSITION.UP) newChildren.splice(nodeIndex + 1, 0, { ...node });
-			if (position === __inditextech_weave_types.WEAVE_NODE_POSITION.DOWN) newChildren.splice(nodeIndex - 1, 0, { ...node });
-			if (position === __inditextech_weave_types.WEAVE_NODE_POSITION.FRONT) newChildren.splice(childrenAmount - 1, 0, { ...node });
-			if (position === __inditextech_weave_types.WEAVE_NODE_POSITION.BACK) newChildren.splice(0, 0, { ...node });
-			for (let i = 0; i < newChildren.length; i++) newChildren[i].props.zIndex = i;
-			if (typeof newChildren !== "undefined") parent.props.children = newChildren;
+			if (nodeIndex === -1) {
+				const msg = `Element doesn't exists on parent, cannot move it`;
+				this.logger.warn({ node }, msg);
+				return;
+			}
+			const doc = (0, __syncedstore_core.getYjsDoc)(state);
+			doc.transact(() => {
+				if (parent.props.children) {
+					const item = JSON.parse(JSON.stringify(parent.props.children[nodeIndex]));
+					parent.props.children.splice(nodeIndex, 1);
+					if (item && position === __inditextech_weave_types.WEAVE_NODE_POSITION.UP) parent.props.children.splice(nodeIndex + 1, 0, item);
+					if (item && position === __inditextech_weave_types.WEAVE_NODE_POSITION.DOWN) parent.props.children.splice(nodeIndex - 1, 0, item);
+					if (item && position === __inditextech_weave_types.WEAVE_NODE_POSITION.FRONT) parent.props.children.splice(childrenAmount - 1, 0, item);
+					if (item && position === __inditextech_weave_types.WEAVE_NODE_POSITION.BACK) parent.props.children.splice(0, 0, item);
+					for (let i = 0; i < parent.props.children.length; i++) parent.props.children[i].props.zIndex = i;
+				}
+			});
 		}
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "moveNode: parent after move");
 	}
 	getElementsTree() {
 		const state = this.instance.getStore().getState().weave;
@@ -18647,7 +18674,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.41.0";
+var version = "0.42.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18747,7 +18774,6 @@ var WeaveStageManager = class {
 			initialZIndex: void 0
 		};
 		const stage = new konva.default.Stage({ ...props });
-		stage.batchDraw();
 		this.setStage(stage);
 	}
 	getContainerNodes() {
@@ -19382,6 +19408,10 @@ var WeaveStageNode = class extends WeaveNode {
 		this.wheelMousePressed = false;
 		stage.isFocused = () => this.stageFocused;
 		stage.isMouseWheelPressed = () => this.wheelMousePressed;
+		stage.position({
+			x: 0,
+			y: 0
+		});
 		const container = stage.container();
 		container.setAttribute("tabindex", "0");
 		stage.container().addEventListener("focus", () => {
@@ -19430,7 +19460,6 @@ var WeaveStageNode = class extends WeaveNode {
 		stage.on("pointerup", (e) => {
 			if (e.evt.button === 1) this.wheelMousePressed = false;
 		});
-		stage.batchDraw();
 		return stage;
 	}
 	onUpdate() {}
@@ -19791,7 +19820,6 @@ var WeaveTextNode = class extends WeaveNode {
 				});
 				resetScale(text);
 				text.fontSize(text.fontSize() * text.scaleY());
-				this.instance.updateNode(this.serialize(text));
 				e.cancelBubble = true;
 			}
 		});
@@ -19815,7 +19843,6 @@ var WeaveTextNode = class extends WeaveNode {
 			width,
 			height
 		});
-		if (nextProps.width !== nodeInstance.getAttrs().width || nextProps.height !== nodeInstance.getAttrs().height) this.updateNode(nodeInstance);
 		if (this.editing) this.updateTextAreaDOM(nodeInstance);
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (nodesSelectionPlugin) {
@@ -20150,6 +20177,8 @@ const IMAGE_TOOL_ACTION_NAME = "imageTool";
 const IMAGE_TOOL_STATE = {
 	["IDLE"]: "idle",
 	["UPLOADING"]: "uploading",
+	["DEFINING_POSITION"]: "definingPosition",
+	["SELECTED_POSITION"]: "selectedPosition",
 	["ADDING"]: "adding",
 	["FINISHED"]: "finished"
 };
@@ -20159,14 +20188,17 @@ const IMAGE_TOOL_STATE = {
 var WeaveImageToolAction = class extends WeaveAction {
 	initialized = false;
 	initialCursor = null;
+	cursorPadding = 5;
 	onPropsChange = void 0;
 	update = void 0;
 	constructor() {
 		super();
+		this.pointers = new Map();
 		this.initialized = false;
 		this.state = IMAGE_TOOL_STATE.IDLE;
 		this.imageId = null;
 		this.tempImageId = null;
+		this.tempImageNode = null;
 		this.container = void 0;
 		this.imageURL = null;
 		this.preloadImgs = {};
@@ -20207,26 +20239,37 @@ var WeaveImageToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerclick", () => {
-			if (this.state === IMAGE_TOOL_STATE.IDLE) return;
-			if (this.state === IMAGE_TOOL_STATE.UPLOADING) return;
-			if (this.state === IMAGE_TOOL_STATE.ADDING) {
-				this.handleAdding();
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME) {
+				this.state = IMAGE_TOOL_STATE.DEFINING_POSITION;
 				return;
 			}
+			if (this.state === IMAGE_TOOL_STATE.DEFINING_POSITION) this.state = IMAGE_TOOL_STATE.SELECTED_POSITION;
 		});
-		stage.on("pointermove", () => {
-			const tempImage = this.instance.getStage().findOne(`#${this.tempImageId}`);
-			if (this.state === IMAGE_TOOL_STATE.ADDING && tempImage) {
+		stage.on("pointermove", (e) => {
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME) {
+				this.state = IMAGE_TOOL_STATE.DEFINING_POSITION;
+				return;
+			}
+			if ([IMAGE_TOOL_STATE.DEFINING_POSITION, IMAGE_TOOL_STATE.SELECTED_POSITION].includes(this.state) && this.tempImageNode && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME && e.evt.pointerType === "mouse") {
+				stage.container().style.cursor = "crosshair";
+				stage.container().focus();
 				const mousePos = stage.getRelativePointerPosition();
-				tempImage.setAttrs({
-					x: (mousePos?.x ?? 0) + 2,
-					y: (mousePos?.y ?? 0) + 2
+				this.tempImageNode.setAttrs({
+					x: (mousePos?.x ?? 0) + this.cursorPadding,
+					y: (mousePos?.y ?? 0) + this.cursorPadding
 				});
-				const nodeHandler = this.instance.getNodeHandler("rectangle");
-				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempImage));
 			}
 		});
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (this.state === IMAGE_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
+		});
 		this.initialized = true;
 	}
 	setState(state) {
@@ -20261,47 +20304,50 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.preloadImgs[this.imageId].src = imageURL;
 		this.instance.emitEvent("onImageLoadStart");
 	}
+	isTouchDevice() {
+		return window.matchMedia("(pointer: coarse)").matches;
+	}
 	addImageNode(position) {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "crosshair";
 		stage.container().focus();
 		if (position) {
-			this.setState(IMAGE_TOOL_STATE.ADDING);
+			this.setState(IMAGE_TOOL_STATE.SELECTED_POSITION);
 			this.handleAdding(position);
 			return;
 		}
 		if (this.imageId) {
 			const mousePos = stage.getRelativePointerPosition();
-			const nodeHandler = this.instance.getNodeHandler("image");
 			this.tempImageId = v4_default();
 			const aspectRatio = this.preloadImgs[this.imageId].width / this.preloadImgs[this.imageId].height;
-			if (nodeHandler) {
-				const node = nodeHandler.create(this.tempImageId, {
-					x: (mousePos?.x ?? 0) + 5,
-					y: (mousePos?.y ?? 0) + 5,
-					width: 100 * aspectRatio,
-					height: 100,
+			if (!this.tempImageNode && this.tempImageId && !this.isTouchDevice()) {
+				this.tempImageNode = new konva.default.Image({
+					id: this.tempImageId,
+					x: (mousePos?.x ?? 0) + this.cursorPadding,
+					y: (mousePos?.y ?? 0) + this.cursorPadding,
+					width: 240 * aspectRatio * (1 / stage.scaleX()),
+					height: 240 * (1 / stage.scaleY()),
 					opacity: 1,
 					adding: true,
-					imageURL: this.imageURL,
+					image: this.preloadImgs[this.imageId],
 					stroke: "#000000ff",
 					strokeWidth: 0,
 					strokeScaleEnabled: true,
 					listening: false
 				});
-				this.instance.addNode(node, this.container?.getAttrs().id);
+				this.instance.getMainLayer()?.add(this.tempImageNode);
 			}
+			this.instance.emitEvent("onAddingImage", { imageURL: this.props.imageURL });
 		}
 		this.clickPoint = null;
-		this.setState(IMAGE_TOOL_STATE.ADDING);
+		this.setState(IMAGE_TOOL_STATE.DEFINING_POSITION);
 	}
 	addImage(position) {
 		if (position) this.clickPoint = position;
 		this.setState(IMAGE_TOOL_STATE.UPLOADING);
 	}
 	handleAdding(position) {
-		const tempImage = this.instance.getStage().findOne(`#${this.tempImageId}`);
-		if (this.imageId && this.imageURL && this.preloadImgs[this.imageId] && (!position && tempImage || position)) {
+		if (this.imageId && this.imageURL && this.preloadImgs[this.imageId]) {
 			const { mousePoint, container } = this.instance.getMousePointer(position);
 			this.clickPoint = mousePoint;
 			this.container = container;
@@ -20325,10 +20371,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 					}
 				});
 				this.instance.addNode(node, this.container?.getAttrs().id);
-			}
-			if (!position) {
-				const imageNodeHandler = this.instance.getNodeHandler("image");
-				if (imageNodeHandler) this.instance.removeNode(imageNodeHandler.serialize(tempImage));
+				this.instance.emitEvent("onAddedImage", { imageURL: this.props.imageURL });
 			}
 			this.setState(IMAGE_TOOL_STATE.FINISHED);
 		}
@@ -20351,11 +20394,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 	cleanup() {
 		const stage = this.instance.getStage();
 		if (this.imageId) delete this.preloadImgs[this.imageId];
-		const tempImage = this.instance.getStage().findOne(`#${this.tempImageId}`);
-		if (tempImage) {
-			const nodeHandler = this.instance.getNodeHandler("rectangle");
-			if (nodeHandler) this.instance.removeNode(nodeHandler.serialize(tempImage));
-		}
+		if (this.tempImageNode) this.tempImageNode.destroy();
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
 			const node = stage.findOne(`#${this.imageId}`);
@@ -20833,8 +20872,8 @@ var WeaveImageNode = class extends WeaveNode {
 			scaleX: 1,
 			scaleY: 1,
 			rotation: 0,
-			width: imageProps.width ?? 0,
-			height: imageProps.height ?? 0,
+			width: imageProps.width || 0,
+			height: imageProps.height || 0,
 			fill: "#ccccccff",
 			strokeWidth: 0,
 			draggable: false,
@@ -23360,6 +23399,7 @@ var import_hammer = __toESM(require_hammer(), 1);
 var WeaveStageZoomPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	initLayer = void 0;
+	pinching = false;
 	zooming = false;
 	isTrackpad = false;
 	zoomVelocity = 0;
@@ -23376,6 +23416,8 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		const { config } = params ?? {};
 		this.config = (0, import_lodash.merge)(WEAVE_STAGE_ZOOM_DEFAULT_CONFIG, config);
 		if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
+		this.threshold = .2;
+		this.pinching = false;
 		this.isTrackpad = false;
 		this.isCtrlOrMetaPressed = false;
 		this.updatedMinimumZoom = false;
@@ -23515,10 +23557,6 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		const scale = Math.min(scaleX, scaleY);
 		return scale;
 	}
-	getSelectionPlugin() {
-		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		return selectionPlugin;
-	}
 	fitToScreen() {
 		if (!this.enabled) return;
 		const mainLayer = this.instance.getMainLayer();
@@ -23559,7 +23597,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	fitToSelection() {
 		if (!this.enabled) return;
 		const stage = this.instance.getStage();
-		const selectionPlugin = this.getSelectionPlugin();
+		const selectionPlugin = this.getNodesSelectionPlugin();
 		if (!selectionPlugin) return;
 		const nodes = selectionPlugin.getTransformer().getNodes();
 		if (nodes.length === 0) return;
@@ -23630,10 +23668,15 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		const stageContainer = this.instance.getStage().container();
 		const sc = new import_hammer.default.Manager(stageContainer);
 		sc.add(new import_hammer.default.Pinch({
-			threshold: 0,
+			threshold: this.threshold,
 			pointers: 2
 		}));
 		sc.on("pinchstart", (e) => {
+			if (this.getPanPlugin()?.isPanning()) {
+				this.pinching = false;
+				return;
+			}
+			this.getNodesSelectionPlugin()?.disable();
 			this.initialScale = this.instance.getStage().scaleX();
 			this.center = {
 				x: e.center.x,
@@ -23642,6 +23685,11 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			this.lastTime = performance.now();
 		});
 		sc.on("pinchmove", (e) => {
+			if (this.getPanPlugin()?.isPanning()) {
+				this.pinching = false;
+				return;
+			}
+			this.pinching = true;
 			const now = performance.now();
 			this.getContextMenuPlugin()?.cancelLongPressTimer();
 			const newScale = Math.max(this.config.zoomSteps[0], Math.min(this.config.zoomSteps[this.config.zoomSteps.length - 1], this.initialScale * e.scale));
@@ -23651,6 +23699,13 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			this.lastTime = now;
 		});
 		sc.on("pinchend", () => {
+			if (this.getPanPlugin()?.isPanning()) {
+				this.pinching = false;
+				this.zooming = false;
+				return;
+			}
+			this.getNodesSelectionPlugin()?.enable();
+			this.pinching = false;
 			this.zooming = true;
 			this.zoomInertiaType = WEAVE_STAGE_ZOOM_TYPE.PINCH_ZOOM;
 			requestAnimationFrame(this.zoomTick.bind(this));
@@ -23660,6 +23715,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			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;
+			this.getNodesSelectionPlugin()?.disable();
 			const delta = e.evt.deltaY > 0 ? 1 : -1;
 			this.zoomVelocity += delta;
 			this.isTrackpad = Math.abs(e.evt.deltaY) < 15 && e.evt.deltaMode === 0;
@@ -23692,10 +23748,27 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			pointer = stage.getPointerPosition();
 		}
 		if (!pointer) return;
+		this.getNodesSelectionPlugin()?.enable();
 		this.setZoom(this.getInertiaScale(), false, pointer);
 		this.zoomVelocity *= this.config.zoomInertia.friction;
+		this.getStageGridPlugin()?.onRender();
 		requestAnimationFrame(this.zoomTick.bind(this));
 	}
+	isPinching() {
+		return this.pinching;
+	}
+	getStageGridPlugin() {
+		const gridPlugin = this.instance.getPlugin("stageGrid");
+		return gridPlugin;
+	}
+	getNodesSelectionPlugin() {
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		return selectionPlugin;
+	}
+	getPanPlugin() {
+		const panPlugin = this.instance.getPlugin("stagePanning");
+		return panPlugin;
+	}
 	getContextMenuPlugin() {
 		const contextMenuPlugin = this.instance.getPlugin("contextMenu");
 		return contextMenuPlugin;
@@ -24061,6 +24134,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 	onInit = void 0;
 	constructor() {
 		super();
+		this.pointers = new Map();
 		this.initialized = false;
 		this.state = RECTANGLE_TOOL_STATE.IDLE;
 		this.rectId = null;
@@ -24097,6 +24171,14 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		});
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === RECTANGLE_TOOL_ACTION_NAME) {
+				this.state = RECTANGLE_TOOL_STATE.ADDING;
+				return;
+			}
 			if (this.state === RECTANGLE_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
@@ -24104,12 +24186,18 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		});
 		stage.on("pointermove", (e) => {
 			if (!this.isPressed(e)) return;
+			if (!this.pointers.has(e.evt.pointerId)) return;
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === RECTANGLE_TOOL_ACTION_NAME) {
+				this.state = RECTANGLE_TOOL_STATE.ADDING;
+				return;
+			}
 			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
 		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
 			const isTap = this.isTap(e);
 			if (isTap) this.moved = false;
 			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
@@ -24126,6 +24214,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "crosshair";
 		stage.container().focus();
+		this.instance.emitEvent("onAddingRectangle");
 		this.clickPoint = null;
 		this.setState(RECTANGLE_TOOL_STATE.ADDING);
 	}
@@ -24173,6 +24262,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				height: rectHeight
 			});
 			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(rectangle));
+			this.instance.emitEvent("onAddedRectangle");
 		}
 		this.cancelAction();
 	}
@@ -24239,6 +24329,7 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 	onInit = void 0;
 	constructor() {
 		super();
+		this.pointers = new Map();
 		this.initialized = false;
 		this.state = ELLIPSE_TOOL_STATE.IDLE;
 		this.ellipseId = null;
@@ -24276,6 +24367,14 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 		});
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME) {
+				this.state = ELLIPSE_TOOL_STATE.ADDING;
+				return;
+			}
 			if (this.state === ELLIPSE_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
@@ -24283,12 +24382,18 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 		});
 		stage.on("pointermove", (e) => {
 			if (!this.isPressed(e)) return;
+			if (!this.pointers.has(e.evt.pointerId)) return;
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME) {
+				this.state = ELLIPSE_TOOL_STATE.ADDING;
+				return;
+			}
 			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
 		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
 			const isTap = this.isTap(e);
 			if (isTap) this.moved = false;
 			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
@@ -24305,6 +24410,7 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "crosshair";
 		stage.container().focus();
+		this.instance.emitEvent("onAddingEllipse");
 		this.clickPoint = null;
 		this.setState(ELLIPSE_TOOL_STATE.ADDING);
 	}
@@ -24352,6 +24458,7 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 				radiusY: ellipseRadiusY
 			});
 			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(ellipse));
+			this.instance.emitEvent("onAddedEllipse");
 		}
 		this.cancelAction();
 	}
@@ -24429,6 +24536,7 @@ var WeavePenToolAction = class extends WeaveAction {
 	onInit = void 0;
 	constructor() {
 		super();
+		this.pointers = new Map();
 		this.initialized = false;
 		this.state = PEN_TOOL_STATE.IDLE;
 		this.lineId = null;
@@ -24462,19 +24570,30 @@ var WeavePenToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerclick", () => {
-			if (this.state === PEN_TOOL_STATE.IDLE) return;
-			if (this.state === PEN_TOOL_STATE.ADDING) {
-				this.handleAdding();
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === PEN_TOOL_ACTION_NAME) {
+				this.state = PEN_TOOL_STATE.ADDING;
 				return;
 			}
-			if (this.state === PEN_TOOL_STATE.DEFINING_SIZE) {
-				this.handleSettingSize();
+			if (this.state === PEN_TOOL_STATE.ADDING) this.handleAdding();
+		});
+		stage.on("pointermove", (e) => {
+			if (!this.isPressed(e)) return;
+			if (!this.pointers.has(e.evt.pointerId)) return;
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === PEN_TOOL_ACTION_NAME) {
+				this.state = PEN_TOOL_STATE.ADDING;
 				return;
 			}
+			if (this.state === PEN_TOOL_STATE.DEFINING_SIZE) this.handleMovement();
 		});
-		stage.on("pointermove", () => {
-			this.handleMovement();
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (this.state === PEN_TOOL_STATE.DEFINING_SIZE) this.handleSettingSize();
 		});
 		this.initialized = true;
 	}
@@ -24986,6 +25105,7 @@ var WeaveStarToolAction = class extends WeaveAction {
 	onInit = void 0;
 	constructor() {
 		super();
+		this.pointers = new Map();
 		this.initialized = false;
 		this.state = STAR_TOOL_STATE.IDLE;
 		this.starId = null;
@@ -25024,6 +25144,14 @@ var WeaveStarToolAction = class extends WeaveAction {
 		});
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === STAR_TOOL_ACTION_NAME) {
+				this.state = STAR_TOOL_STATE.ADDING;
+				return;
+			}
 			if (this.state === STAR_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
@@ -25031,12 +25159,18 @@ var WeaveStarToolAction = class extends WeaveAction {
 		});
 		stage.on("pointermove", (e) => {
 			if (!this.isPressed(e)) return;
+			if (!this.pointers.has(e.evt.pointerId)) return;
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === STAR_TOOL_ACTION_NAME) {
+				this.state = STAR_TOOL_STATE.ADDING;
+				return;
+			}
 			if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
 		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
 			const isTap = this.isTap(e);
 			if (isTap) this.moved = false;
 			if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
@@ -25053,6 +25187,7 @@ var WeaveStarToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "crosshair";
 		stage.container().focus();
+		this.instance.emitEvent("onAddingStar");
 		this.clickPoint = null;
 		this.setState(STAR_TOOL_STATE.ADDING);
 	}
@@ -25101,6 +25236,7 @@ var WeaveStarToolAction = class extends WeaveAction {
 				innerRadius: starInnerRadius
 			});
 			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(star));
+			this.instance.emitEvent("onAddedStar");
 		}
 		this.cancelAction();
 	}
@@ -25430,6 +25566,7 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 	onInit = void 0;
 	constructor() {
 		super();
+		this.pointers = new Map();
 		this.initialized = false;
 		this.state = REGULAR_POLYGON_TOOL_STATE.IDLE;
 		this.regularPolygonId = null;
@@ -25466,6 +25603,14 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 		});
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === REGULAR_POLYGON_TOOL_ACTION_NAME) {
+				this.state = REGULAR_POLYGON_TOOL_STATE.ADDING;
+				return;
+			}
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
@@ -25473,12 +25618,18 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 		});
 		stage.on("pointermove", (e) => {
 			if (!this.isPressed(e)) return;
+			if (!this.pointers.has(e.evt.pointerId)) return;
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === REGULAR_POLYGON_TOOL_ACTION_NAME) {
+				this.state = REGULAR_POLYGON_TOOL_STATE.ADDING;
+				return;
+			}
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
 		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
 			const isTap = this.isTap(e);
 			if (isTap) this.moved = false;
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
@@ -25495,6 +25646,7 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "crosshair";
 		stage.container().focus();
+		this.instance.emitEvent("onAddingRegularPolygon");
 		this.clickPoint = null;
 		this.setState(REGULAR_POLYGON_TOOL_STATE.ADDING);
 	}
@@ -25538,6 +25690,7 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 				radius: newRadius
 			});
 			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(regularPolygon));
+			this.instance.emitEvent("onAddedRegularPolygon");
 		}
 		this.cancelAction();
 	}
@@ -26114,6 +26267,9 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		window.addEventListener("keyup", (e) => {
 			if (e.code === "Space") this.isSpaceKeyPressed = false;
 		});
+		this.instance.addEventListener("onStageMove", () => {
+			this.onRender();
+		});
 		stage.on("pointerdown", (e) => {
 			const activeAction = this.instance.getActiveAction();
 			if (e && e.evt.button === 0 && activeAction === "moveTool") this.moveToolActive = true;
@@ -26306,7 +26462,9 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		}
 	}
 	onRender() {
-		this.renderGrid();
+		requestAnimationFrame(() => {
+			this.renderGrid();
+		});
 	}
 	enable() {
 		this.enabled = true;
@@ -26334,11 +26492,18 @@ const WEAVE_STAGE_PANNING_KEY = "stagePanning";
 //#endregion
 //#region src/plugins/stage-panning/stage-panning.ts
 var WeaveStagePanningPlugin = class extends WeavePlugin {
+	pinching = false;
+	panning = false;
 	getLayerName = void 0;
 	initLayer = void 0;
 	constructor() {
 		super();
-		this.activePointers = new Set();
+		this.pointers = new Map();
+		this.lastCenter = null;
+		this.pinching = false;
+		this.panning = false;
+		this.threshold = 5;
+		this.pointersDistanceDiffThreshold = 10;
 		this.enabled = true;
 		this.moveToolActive = false;
 		this.isMouseMiddleButtonPressed = false;
@@ -26382,6 +26547,8 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.disableMove();
 			}
 		});
+		let startPointersDistance = null;
+		let startCenter = null;
 		let lastPos = null;
 		let isDragging = false;
 		let velocity = {
@@ -26390,7 +26557,10 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		};
 		let lastTime = 0;
 		stage.on("pointerdown", (e) => {
-			this.activePointers.add(e.evt.pointerId);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
 			const activeAction = this.instance.getActiveAction();
 			let enableMove = false;
 			if (e && (e.evt.pointerType !== "mouse" || e.evt.pointerType === "mouse" && e.evt.buttons === 1) && activeAction === "moveTool") {
@@ -26401,6 +26571,27 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.isMouseMiddleButtonPressed = true;
 				enableMove = true;
 			}
+			if (e.evt.pointerType !== "mouse" && this.pointers.size === 2 && !this.pinching && !this.panning) {
+				const center = this.getTouchCenter();
+				const [p1, p2] = Array.from(this.pointers.values());
+				const pointersDistance = this.getDistance(p1, p2);
+				if (!startCenter) {
+					startPointersDistance = pointersDistance;
+					startCenter = center;
+					this.lastCenter = center;
+					this.pinching = false;
+					this.panning = false;
+					velocity = {
+						x: 0,
+						y: 0
+					};
+				}
+				isDragging = true;
+				lastPos = stage.getPointerPosition();
+				lastTime = performance.now();
+				this.enableMove();
+				return;
+			}
 			if (enableMove) {
 				isDragging = true;
 				lastPos = stage.getPointerPosition();
@@ -26412,28 +26603,65 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.enableMove();
 			}
 		});
-		stage.on("pointercancel", () => {
+		stage.on("pointercancel", (e) => {
+			this.pointers.delete(e.evt.pointerId);
 			lastPos = null;
+			this.lastCenter = null;
 		});
-		stage.on("pointerup", (e) => {
-			this.activePointers.delete(e.evt.pointerId);
-			isDragging = false;
-			const decay = .95;
-			function animateInertia() {
-				velocity.x *= decay;
-				velocity.y *= decay;
-				if (Math.abs(velocity.x) < .01 && Math.abs(velocity.y) < .01) return;
-				stage.x(stage.x() + velocity.x * 16);
-				stage.y(stage.y() + velocity.y * 16);
-				stage.batchDraw();
-				requestAnimationFrame(animateInertia);
-			}
-			requestAnimationFrame(animateInertia);
-		});
-		const handleMouseMove = () => {
-			if (this.activePointers.size !== 1) return;
+		const handleMouseMove = (e) => {
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
 			if (!isDragging) return;
+			const center = this.getTouchCenter();
+			if (e.evt.pointerType !== "mouse" && this.pointers.size !== 2) {
+				startCenter = null;
+				startPointersDistance = null;
+				this.pinching = false;
+				this.panning = false;
+			}
+			if (e.evt.pointerType !== "mouse" && this.pointers.size === 2) {
+				this.getContextMenuPlugin()?.cancelLongPressTimer();
+				const [p1, p2] = Array.from(this.pointers.values());
+				const pointersDistance = this.getDistance(p1, p2);
+				if (!startCenter) {
+					startPointersDistance = pointersDistance;
+					startCenter = center;
+					this.lastCenter = center;
+					this.pinching = false;
+					this.panning = false;
+				}
+				if (center && startCenter && startPointersDistance && this.lastCenter) {
+					const now$1 = performance.now();
+					const dt$1 = now$1 - lastTime;
+					const dx = center.x - startCenter.x;
+					const dy = center.y - startCenter.y;
+					const distanceCenters = Math.hypot(dx, dy);
+					const distanceChange = Math.abs(pointersDistance - startPointersDistance);
+					if (!this.pinching && distanceCenters > this.threshold && distanceChange <= this.pointersDistanceDiffThreshold) this.panning = true;
+					if (!this.panning && distanceCenters <= this.threshold && distanceChange > this.pointersDistanceDiffThreshold) this.pinching = true;
+					if (this.panning) {
+						this.getNodesSelectionPlugin()?.disable();
+						const dx$1 = center.x - this.lastCenter.x;
+						const dy$1 = center.y - this.lastCenter.y;
+						velocity = {
+							x: dx$1 / dt$1,
+							y: dy$1 / dt$1
+						};
+						stage.x(stage.x() + dx$1);
+						stage.y(stage.y() + dy$1);
+						this.instance.emitEvent("onStageMove");
+					}
+					this.lastCenter = center;
+					lastTime = now$1;
+					return;
+				}
+			}
+			this.lastCenter = center;
 			if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
+			this.getContextMenuPlugin()?.cancelLongPressTimer();
+			this.getNodesSelectionPlugin()?.disable();
 			const pos = stage.getPointerPosition();
 			const now = performance.now();
 			const dt = now - lastTime;
@@ -26446,20 +26674,50 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				};
 				stage.x(stage.x() + dx);
 				stage.y(stage.y() + dy);
-				stage.batchDraw();
 			}
 			lastPos = pos;
 			lastTime = now;
 			this.instance.emitEvent("onStageMove");
 		};
 		stage.on("pointermove", handleMouseMove);
+		const decay = .95;
+		const animateInertia = () => {
+			velocity.x *= decay;
+			velocity.y *= decay;
+			if (Math.abs(velocity.x) < .01 && Math.abs(velocity.y) < .01) return;
+			stage.x(stage.x() + velocity.x);
+			stage.y(stage.y() + velocity.y);
+			this.instance.emitEvent("onStageMove");
+			requestAnimationFrame(animateInertia);
+		};
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (e.evt.pointerType !== "mouse" && this.pointers.size < 2) {
+				this.getNodesSelectionPlugin()?.enable();
+				isDragging = false;
+				startCenter = null;
+				startPointersDistance = null;
+				this.lastCenter = null;
+				this.pinching = false;
+				this.panning = false;
+				requestAnimationFrame(animateInertia);
+				return;
+			}
+			isDragging = false;
+			this.pinching = false;
+			this.panning = false;
+			requestAnimationFrame(animateInertia);
+		});
 		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;
+			this.getContextMenuPlugin()?.cancelLongPressTimer();
+			this.getNodesSelectionPlugin()?.disable();
 			stage$1.x(stage$1.x() - e.evt.deltaX);
 			stage$1.y(stage$1.y() - e.evt.deltaY);
+			this.getNodesSelectionPlugin()?.enable();
 			this.instance.emitEvent("onStageMove");
 		};
 		stage.on("wheel", handleWheel);
@@ -26470,6 +26728,35 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			e.preventDefault();
 		}, { passive: false });
 	}
+	isPanning() {
+		return this.panning;
+	}
+	getDistance(p1, p2) {
+		const dx = p2.x - p1.x;
+		const dy = p2.y - p1.y;
+		return Math.hypot(dx, dy);
+	}
+	getTouchCenter() {
+		const points = Array.from(this.pointers.values());
+		if (points.length !== 2) return null;
+		const [p1, p2] = points;
+		return {
+			x: (p1.x + p2.x) / 2,
+			y: (p1.y + p2.y) / 2
+		};
+	}
+	getNodesSelectionPlugin() {
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		return selectionPlugin;
+	}
+	getZoomPlugin() {
+		const zoomPlugin = this.instance.getPlugin("stageZoom");
+		return zoomPlugin;
+	}
+	getContextMenuPlugin() {
+		const contextMenuPlugin = this.instance.getPlugin("contextMenu");
+		return contextMenuPlugin;
+	}
 	enable() {
 		this.enabled = true;
 	}