@inditextech/weave-sdk 0.42.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;
@@ -17037,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);
@@ -18422,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({
@@ -18449,8 +18450,6 @@ var WeaveStateManager = class {
 			}, msg);
 			return;
 		}
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "addNode: parent before init");
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "addNode: parent before add");
 		const doc = (0, __syncedstore_core.getYjsDoc)(state);
 		doc.transact(() => {
 			if (!parent.props.children) parent.props.children = [];
@@ -18467,10 +18466,8 @@ var WeaveStateManager = class {
 						zIndex: childrenAmount
 					}
 				};
-				this.logger.info({ node: JSON.parse(JSON.stringify(nodeToAdd)) }, "addNode: node to add");
 				parent.props.children.push(nodeToAdd);
 			}
-			this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "addNode: parent after add");
 			this.instance.emitEvent("onNodeAdded", node);
 		});
 	}
@@ -18504,7 +18501,6 @@ var WeaveStateManager = class {
 	}
 	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);
@@ -18516,20 +18512,14 @@ var WeaveStateManager = class {
 			this.logger.warn({ node }, msg);
 			return;
 		}
-		this.logger.info({
-			node: JSON.parse(JSON.stringify(nodeState)),
-			toUpdate: node
-		}, "updateNode: before update");
 		const doc = (0, __syncedstore_core.getYjsDoc)(state);
 		doc.transact(() => {
 			this.deepSyncSyncedStore(nodeState.props, node.props);
 		});
-		this.logger.info({ node: JSON.parse(JSON.stringify(nodeState)) }, "updateNode: after update");
 		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);
@@ -18546,8 +18536,6 @@ 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 doc = (0, __syncedstore_core.getYjsDoc)(state);
 		doc.transact(() => {
 			if (parent.props.children) {
@@ -18556,7 +18544,6 @@ var WeaveStateManager = class {
 					break;
 				}
 				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)) }, "removeNode: parent after remove");
 				this.instance.emitEvent("onNodeRemoved", node);
 			}
 		});
@@ -18566,7 +18553,6 @@ var WeaveStateManager = class {
 	}
 	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);
@@ -18583,7 +18569,6 @@ var WeaveStateManager = class {
 			this.logger.warn({ node }, msg);
 			return;
 		}
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "moveNode: parent before move");
 		if (parent.props.children) {
 			const childrenAmount = parent.props.children.length;
 			const nodeIndex = parent.props.children.findIndex((child) => child.key === node.key);
@@ -18605,7 +18590,6 @@ var WeaveStateManager = class {
 				}
 			});
 		}
-		this.logger.info({ parent: JSON.parse(JSON.stringify(parent)) }, "moveNode: parent after move");
 	}
 	getElementsTree() {
 		const state = this.instance.getStore().getState().weave;
@@ -18690,7 +18674,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.42.0";
+var version = "0.42.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18790,7 +18774,6 @@ var WeaveStageManager = class {
 			initialZIndex: void 0
 		};
 		const stage = new konva.default.Stage({ ...props });
-		stage.batchDraw();
 		this.setStage(stage);
 	}
 	getContainerNodes() {
@@ -19425,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", () => {
@@ -19473,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() {}
@@ -19857,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) {
@@ -20192,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"
 };
@@ -20201,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 = {};
@@ -20249,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) {
@@ -20303,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;
@@ -20367,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);
 		}
@@ -20393,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}`);
@@ -20875,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,
@@ -23402,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;
@@ -23418,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;
@@ -23557,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();
@@ -23601,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;
@@ -23672,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,
@@ -23684,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));
@@ -23693,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));
@@ -23702,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;
@@ -23734,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;
@@ -24103,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;
@@ -24139,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();
@@ -24146,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) {
@@ -24168,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);
 	}
@@ -24215,6 +24262,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				height: rectHeight
 			});
 			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(rectangle));
+			this.instance.emitEvent("onAddedRectangle");
 		}
 		this.cancelAction();
 	}
@@ -24281,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;
@@ -24318,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();
@@ -24325,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) {
@@ -24347,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);
 	}
@@ -24394,6 +24458,7 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 				radiusY: ellipseRadiusY
 			});
 			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(ellipse));
+			this.instance.emitEvent("onAddedEllipse");
 		}
 		this.cancelAction();
 	}
@@ -24471,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;
@@ -24504,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;
 	}
@@ -25028,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;
@@ -25066,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();
@@ -25073,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) {
@@ -25095,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);
 	}
@@ -25143,6 +25236,7 @@ var WeaveStarToolAction = class extends WeaveAction {
 				innerRadius: starInnerRadius
 			});
 			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(star));
+			this.instance.emitEvent("onAddedStar");
 		}
 		this.cancelAction();
 	}
@@ -25472,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;
@@ -25508,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();
@@ -25515,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) {
@@ -25537,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);
 	}
@@ -25580,6 +25690,7 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 				radius: newRadius
 			});
 			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(regularPolygon));
+			this.instance.emitEvent("onAddedRegularPolygon");
 		}
 		this.cancelAction();
 	}
@@ -26156,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;
@@ -26348,7 +26462,9 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		}
 	}
 	onRender() {
-		this.renderGrid();
+		requestAnimationFrame(() => {
+			this.renderGrid();
+		});
 	}
 	enable() {
 		this.enabled = true;
@@ -26376,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;
@@ -26424,6 +26547,8 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.disableMove();
 			}
 		});
+		let startPointersDistance = null;
+		let startCenter = null;
 		let lastPos = null;
 		let isDragging = false;
 		let velocity = {
@@ -26432,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") {
@@ -26443,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();
@@ -26454,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;
@@ -26488,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);
@@ -26512,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;
 	}