@inditextech/weave-sdk 0.42.2 → 0.43.0

package/dist/sdk.js

@@ -15494,7 +15494,6 @@ 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
@@ -15589,12 +15588,12 @@ var WeaveStore = class {
 					node: JSON.parse(JSON.stringify(nodeInfo.node))
 				});
 			}
-			if (!this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) {
+			if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
 				this.instance.setupRenderer();
 				this.isRoomLoaded = true;
 				this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 			}
-			if (this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) this.instance.render();
+			if (this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) this.instance.render();
 		});
 	}
 	canUndoStateStep() {
@@ -16092,7 +16091,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (moved) this.getContextMenuPlugin()?.cancelLongPressTimer();
 			this.triggerSelectedNodesEvent();
 		};
-		tr.on("transform", (0, import_lodash$1.throttle)(handleTransform, 50));
+		tr.on("transform", (0, import_lodash.throttle)(handleTransform, 50));
 		tr.on("transformend", () => {
 			this.triggerSelectedNodesEvent();
 		});
@@ -16964,7 +16963,7 @@ var WeaveNode = class {
 				if (nodesSnappingPlugin && transforming && this.isSelecting() && this.isNodeSelected(node$1)) nodesSnappingPlugin.evaluateGuidelines(e);
 				if (this.isSelecting() && this.isNodeSelected(node$1)) this.scaleReset(node$1);
 			};
-			node.on("transform", (0, import_lodash$1.throttle)(handleTransform, 100));
+			node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
 			node.on("transformend", (e) => {
 				const node$1 = e.target;
 				this.instance.emitEvent("onTransform", null);
@@ -17017,7 +17016,7 @@ var WeaveNode = class {
 					if (layerToMove) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 				}
 			};
-			node.on("dragmove", (0, import_lodash$1.throttle)(handleDragMove, 100));
+			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
 			node.on("dragend", (e) => {
 				if (!this.didMove) return;
 				const isErasing = this.instance.getActiveAction() === "eraseTool";
@@ -18451,6 +18450,7 @@ var WeaveStateManager = class {
 			return;
 		}
 		const doc = getYjsDoc(state);
+		const userId = this.instance.getStore().getUser().id;
 		doc.transact(() => {
 			if (!parent.props.children) parent.props.children = [];
 			if (index) {
@@ -18469,7 +18469,7 @@ var WeaveStateManager = class {
 				parent.props.children.push(nodeToAdd);
 			}
 			this.instance.emitEvent("onNodeAdded", node);
-		});
+		}, userId);
 	}
 	deepSyncSyncedStore(target, source) {
 		for (const key in target) if (!(key in source)) delete target[key];
@@ -18513,9 +18513,10 @@ var WeaveStateManager = class {
 			return;
 		}
 		const doc = getYjsDoc(state);
+		const userId = this.instance.getStore().getUser().id;
 		doc.transact(() => {
 			this.deepSyncSyncedStore(nodeState.props, node.props);
-		});
+		}, userId);
 		this.instance.emitEvent("onNodeUpdated", node);
 	}
 	removeNode(node) {
@@ -18537,6 +18538,7 @@ var WeaveStateManager = class {
 			return;
 		}
 		const doc = getYjsDoc(state);
+		const userId = this.instance.getStore().getUser().id;
 		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) {
@@ -18546,7 +18548,7 @@ var WeaveStateManager = class {
 				for (let i = 0; i < parent.props.children.length; i++) parent.props.children[i].props.zIndex = i;
 				this.instance.emitEvent("onNodeRemoved", node);
 			}
-		});
+		}, userId);
 	}
 	removeNodes(nodes) {
 		for (const node of nodes) this.removeNode(node);
@@ -18578,6 +18580,7 @@ var WeaveStateManager = class {
 				return;
 			}
 			const doc = getYjsDoc(state);
+			const userId = this.instance.getStore().getUser().id;
 			doc.transact(() => {
 				if (parent.props.children) {
 					const item = JSON.parse(JSON.stringify(parent.props.children[nodeIndex]));
@@ -18588,7 +18591,7 @@ var WeaveStateManager = class {
 					if (item && position === 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;
 				}
-			});
+			}, userId);
 		}
 	}
 	getElementsTree() {
@@ -18674,7 +18677,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.42.2";
+var version = "0.43.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -19788,7 +19791,7 @@ var WeaveTextNode = class extends WeaveNode {
 		text.on("transformstart", (e) => {
 			this.instance.emitEvent("onTransform", e.target);
 		});
-		text.on("transform", (0, import_lodash$1.throttle)(handleTextTransform, 50));
+		text.on("transform", (0, import_lodash.throttle)(handleTextTransform, 50));
 		text.on("transformend", () => {
 			this.instance.emitEvent("onTransform", null);
 		});
@@ -21076,7 +21079,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$1.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+		if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash.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);
@@ -21093,7 +21096,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$1.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+		if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
 			internalImage.width(imageAttrs.uncroppedImage.width);
 			internalImage.height(imageAttrs.uncroppedImage.height);
 			internalImage.rotation(0);
@@ -23392,7 +23395,7 @@ var require_hammer = __commonJS({ "../../node_modules/hammerjs/hammer.js"(export
 		else window$1[exportName] = Hammer;
 	})(window, document, "Hammer");
 } });
-var import_hammer = __toESM(require_hammer());
+var import_hammer = __toESM(require_hammer(), 1);
 
 //#endregion
 //#region src/plugins/stage-zoom/stage-zoom.ts
@@ -23414,7 +23417,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
-		this.config = (0, import_lodash$1.merge)(WEAVE_STAGE_ZOOM_DEFAULT_CONFIG, config);
+		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;
@@ -23443,7 +23446,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 				this.config.zoomSteps = [minimumZoom, ...this.config.zoomSteps];
 			}
 		};
-		mainLayer?.on("draw", (0, import_lodash$1.throttle)(handleDraw, 50));
+		mainLayer?.on("draw", (0, import_lodash.throttle)(handleDraw, 50));
 		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
 	setZoom(scale, centered = true, pointer) {
@@ -24138,9 +24141,10 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		this.initialized = false;
 		this.state = RECTANGLE_TOOL_STATE.IDLE;
 		this.rectId = null;
-		this.creating = false;
+		this.tempRectNode = null;
 		this.moved = false;
 		this.container = void 0;
+		this.measureContainer = void 0;
 		this.clickPoint = null;
 		this.props = this.initProps();
 	}
@@ -24179,10 +24183,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				this.state = RECTANGLE_TOOL_STATE.ADDING;
 				return;
 			}
-			if (this.state === RECTANGLE_TOOL_STATE.ADDING) {
-				this.creating = true;
-				this.handleAdding();
-			}
+			if (this.state === RECTANGLE_TOOL_STATE.ADDING) this.handleAdding();
 		});
 		stage.on("pointermove", (e) => {
 			if (!this.isPressed(e)) return;
@@ -24191,19 +24192,13 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				this.state = RECTANGLE_TOOL_STATE.ADDING;
 				return;
 			}
-			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
-				this.moved = true;
-				this.handleMovement();
-			}
+			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) 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) {
-				this.creating = false;
-				this.handleSettingSize();
-			}
+			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) this.handleSettingSize();
 		});
 		this.initialized = true;
 	}
@@ -24219,29 +24214,28 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		this.setState(RECTANGLE_TOOL_STATE.ADDING);
 	}
 	handleAdding() {
-		const { mousePoint, container } = this.instance.getMousePointer();
+		const { mousePoint, container, measureContainer } = this.instance.getMousePointer();
 		this.clickPoint = mousePoint;
 		this.container = container;
+		this.measureContainer = measureContainer;
 		this.rectId = v4_default();
-		const nodeHandler = this.instance.getNodeHandler("rectangle");
-		if (nodeHandler) {
-			const node = nodeHandler.create(this.rectId, {
+		if (!this.tempRectNode) {
+			this.tempRectNode = new Konva.Rect({
 				...this.props,
+				id: this.rectId,
 				strokeScaleEnabled: true,
 				x: this.clickPoint?.x ?? 0,
 				y: this.clickPoint?.y ?? 0,
 				width: 0,
 				height: 0
 			});
-			this.instance.addNode(node, this.container?.getAttrs().id);
+			this.measureContainer?.add(this.tempRectNode);
 		}
 		this.setState(RECTANGLE_TOOL_STATE.DEFINING_SIZE);
 	}
 	handleSettingSize() {
-		const rectangle = this.instance.getStage().findOne(`#${this.rectId}`);
-		if (this.rectId && this.clickPoint && this.container && rectangle) {
+		if (this.rectId && this.tempRectNode && this.clickPoint && this.container) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
-			const nodeHandler = this.instance.getNodeHandler("rectangle");
 			const rectPos = {
 				x: this.clickPoint.x,
 				y: this.clickPoint.y
@@ -24254,31 +24248,38 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				rectWidth = Math.abs(this.clickPoint.x - mousePoint.x);
 				rectHeight = Math.abs(this.clickPoint.y - mousePoint.y);
 			}
-			rectangle.setAttrs({
+			this.tempRectNode.setAttrs({
 				...this.props,
 				x: rectPos.x,
 				y: rectPos.y,
 				width: rectWidth,
 				height: rectHeight
 			});
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(rectangle));
+			const nodeHandler = this.instance.getNodeHandler("rectangle");
+			if (nodeHandler) {
+				const clonedRectNode = this.tempRectNode.clone();
+				this.tempRectNode.destroy();
+				const node = nodeHandler.create(this.rectId, {
+					...this.props,
+					...clonedRectNode.getAttrs()
+				});
+				this.instance.addNode(node, this.container?.getAttrs().id);
+			}
 			this.instance.emitEvent("onAddedRectangle");
 		}
 		this.cancelAction();
 	}
 	handleMovement() {
 		if (this.state !== RECTANGLE_TOOL_STATE.DEFINING_SIZE) return;
-		const rectangle = this.instance.getStage().findOne(`#${this.rectId}`);
-		if (this.rectId && this.container && this.clickPoint && rectangle) {
-			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
+		if (this.rectId && this.tempRectNode && this.measureContainer && this.clickPoint) {
+			this.moved = true;
+			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
 			const deltaX = mousePoint.x - this.clickPoint?.x;
 			const deltaY = mousePoint.y - this.clickPoint?.y;
-			const nodeHandler = this.instance.getNodeHandler("rectangle");
-			rectangle.setAttrs({
+			this.tempRectNode.setAttrs({
 				width: deltaX,
 				height: deltaY
 			});
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(rectangle));
 		}
 	}
 	trigger(cancelAction) {
@@ -24303,9 +24304,10 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
 		this.rectId = null;
-		this.creating = false;
+		this.tempRectNode = null;
 		this.moved = false;
 		this.container = void 0;
+		this.measureContainer = void 0;
 		this.clickPoint = null;
 		this.setState(RECTANGLE_TOOL_STATE.IDLE);
 	}
@@ -24541,6 +24543,8 @@ var WeavePenToolAction = class extends WeaveAction {
 		this.state = PEN_TOOL_STATE.IDLE;
 		this.lineId = null;
 		this.tempLineId = null;
+		this.tempMainLineNode = null;
+		this.tempLineNode = null;
 		this.container = void 0;
 		this.measureContainer = void 0;
 		this.clickPoint = null;
@@ -24580,11 +24584,10 @@ var WeavePenToolAction = class extends WeaveAction {
 				this.state = PEN_TOOL_STATE.ADDING;
 				return;
 			}
-			if (this.state === PEN_TOOL_STATE.ADDING) this.handleAdding();
+			if (!this.tempMainLineNode && this.state === PEN_TOOL_STATE.ADDING) this.handleAdding();
+			if (this.tempMainLineNode && this.state === PEN_TOOL_STATE.ADDING) this.state = PEN_TOOL_STATE.DEFINING_SIZE;
 		});
-		stage.on("pointermove", (e) => {
-			if (!this.isPressed(e)) return;
-			if (!this.pointers.has(e.evt.pointerId)) return;
+		stage.on("pointermove", () => {
 			if (this.pointers.size === 2 && this.instance.getActiveAction() === PEN_TOOL_ACTION_NAME) {
 				this.state = PEN_TOOL_STATE.ADDING;
 				return;
@@ -24603,6 +24606,8 @@ var WeavePenToolAction = class extends WeaveAction {
 	addLine() {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "crosshair";
+		stage.container().focus();
+		this.instance.emitEvent("onAddingPen");
 		this.tempPoint = void 0;
 		this.tempNextPoint = void 0;
 		this.clickPoint = null;
@@ -24616,63 +24621,58 @@ var WeavePenToolAction = class extends WeaveAction {
 		this.measureContainer = measureContainer;
 		this.lineId = v4_default();
 		this.tempLineId = v4_default();
-		const nodeHandler = this.instance.getNodeHandler("line");
-		if (nodeHandler) {
-			const node = nodeHandler.create(this.lineId, {
+		if (!this.tempLineNode) {
+			this.tempMainLineNode = new Konva.Line({
 				...this.props,
+				id: this.lineId,
 				strokeScaleEnabled: true,
 				x: this.clickPoint?.x ?? 0,
 				y: this.clickPoint?.y ?? 0,
 				points: [0, 0]
 			});
-			this.instance.addNode(node, this.container?.getAttrs().id);
-		}
-		this.tempPoint = new Konva.Circle({
-			x: this.clickPoint?.x ?? 0,
-			y: this.clickPoint?.y ?? 0,
-			radius: 5 / stage.scaleX(),
-			strokeScaleEnabled: true,
-			stroke: "#cccccc",
-			strokeWidth: 0,
-			fill: "#cccccc"
-		});
-		this.measureContainer?.add(this.tempPoint);
-		if (nodeHandler) {
-			const tempLine = nodeHandler.create(this.tempLineId, {
+			this.measureContainer?.add(this.tempMainLineNode);
+			this.tempPoint = new Konva.Circle({
+				x: this.clickPoint?.x ?? 0,
+				y: this.clickPoint?.y ?? 0,
+				radius: 5 / stage.scaleX(),
+				strokeScaleEnabled: true,
+				stroke: "#cccccc",
+				strokeWidth: 0,
+				fill: "#cccccc"
+			});
+			this.measureContainer?.add(this.tempPoint);
+			this.tempLineNode = new Konva.Line({
 				...this.props,
+				id: this.tempLineId,
 				x: this.clickPoint?.x ?? 0,
 				y: this.clickPoint?.y ?? 0,
 				strokeScaleEnabled: true,
 				points: [0, 0]
 			});
-			this.instance.addNode(tempLine, this.container?.getAttrs().id);
+			this.measureContainer?.add(this.tempLineNode);
+			this.tempNextPoint = new Konva.Circle({
+				x: this.clickPoint?.x ?? 0,
+				y: this.clickPoint?.y ?? 0,
+				radius: 5 / stage.scaleX(),
+				strokeScaleEnabled: true,
+				stroke: "#cccccc",
+				strokeWidth: 0,
+				fill: "#cccccc"
+			});
+			this.measureContainer?.add(this.tempNextPoint);
+			this.setState(PEN_TOOL_STATE.DEFINING_SIZE);
 		}
-		this.tempNextPoint = new Konva.Circle({
-			x: this.clickPoint?.x ?? 0,
-			y: this.clickPoint?.y ?? 0,
-			radius: 5 / stage.scaleX(),
-			strokeScaleEnabled: true,
-			stroke: "#cccccc",
-			strokeWidth: 0,
-			fill: "#cccccc"
-		});
-		this.measureContainer?.add(this.tempNextPoint);
-		this.setState(PEN_TOOL_STATE.DEFINING_SIZE);
 	}
 	handleSettingSize() {
-		const tempLine = this.instance.getStage().findOne(`#${this.tempLineId}`);
-		const tempMainLine = this.instance.getStage().findOne(`#${this.lineId}`);
-		if (this.lineId && this.tempPoint && this.tempNextPoint && this.measureContainer && tempMainLine && tempLine) {
+		if (this.lineId && this.tempLineNode && this.tempMainLineNode && this.tempPoint && this.tempNextPoint && this.measureContainer) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
-			const newPoints = [...tempMainLine.points()];
-			newPoints.push(mousePoint.x - tempMainLine.x());
-			newPoints.push(mousePoint.y - tempMainLine.y());
-			tempMainLine.setAttrs({
+			const newPoints = [...this.tempMainLineNode.points()];
+			newPoints.push(mousePoint.x - this.tempMainLineNode.x());
+			newPoints.push(mousePoint.y - this.tempMainLineNode.y());
+			this.tempMainLineNode.setAttrs({
 				...this.props,
 				points: newPoints
 			});
-			const nodeHandler = this.instance.getNodeHandler("line");
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempMainLine));
 			this.tempPoint.setAttrs({
 				x: mousePoint.x,
 				y: mousePoint.y
@@ -24681,32 +24681,28 @@ var WeavePenToolAction = class extends WeaveAction {
 				x: mousePoint.x,
 				y: mousePoint.y
 			});
-			tempLine.setAttrs({
+			this.tempLineNode.setAttrs({
 				...this.props,
 				x: mousePoint.x,
 				y: mousePoint.y,
 				points: [0, 0]
 			});
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempLine));
+			this.setState(PEN_TOOL_STATE.DEFINING_SIZE);
 		}
-		this.setState(PEN_TOOL_STATE.DEFINING_SIZE);
 	}
 	handleMovement() {
 		if (this.state !== PEN_TOOL_STATE.DEFINING_SIZE) return;
-		const tempLine = this.instance.getStage().findOne(`#${this.tempLineId}`);
-		if (this.lineId && this.measureContainer && this.tempNextPoint && tempLine) {
+		if (this.tempLineNode && this.measureContainer && this.tempNextPoint) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
-			tempLine.setAttrs({
+			this.tempLineNode.setAttrs({
 				...this.props,
 				points: [
-					tempLine.points()[0],
-					tempLine.points()[1],
-					mousePoint.x - tempLine.x(),
-					mousePoint.y - tempLine.y()
+					this.tempLineNode.points()[0],
+					this.tempLineNode.points()[1],
+					mousePoint.x - this.tempLineNode.x(),
+					mousePoint.y - this.tempLineNode.y()
 				]
 			});
-			const nodeHandler = this.instance.getNodeHandler("line");
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempLine));
 			this.tempNextPoint.setAttrs({
 				x: mousePoint.x,
 				y: mousePoint.y
@@ -24729,24 +24725,20 @@ var WeavePenToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		this.tempPoint?.destroy();
 		this.tempNextPoint?.destroy();
-		const tempLine = this.instance.getStage().findOne(`#${this.tempLineId}`);
-		const tempMainLine = this.instance.getStage().findOne(`#${this.lineId}`);
-		if (tempLine) {
+		this.tempLineNode?.destroy();
+		if (this.lineId && this.tempMainLineNode && this.tempMainLineNode.points().length >= 4) {
 			const nodeHandler = this.instance.getNodeHandler("line");
-			if (nodeHandler) this.instance.removeNode(nodeHandler.serialize(tempLine));
-		}
-		if (this.lineId && tempMainLine && tempMainLine.points().length < 4) {
-			const nodeHandler = this.instance.getNodeHandler("line");
-			if (nodeHandler) this.instance.removeNode(nodeHandler.serialize(tempMainLine));
-		}
-		if (this.lineId && tempMainLine && tempMainLine.points().length >= 4) {
-			const nodeHandler = this.instance.getNodeHandler("line");
-			tempMainLine.setAttrs({
-				...this.props,
-				strokeWidth: 1,
-				hitStrokeWidth: 16
-			});
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempMainLine));
+			if (nodeHandler) {
+				const clonedLine = this.tempMainLineNode.clone();
+				this.tempMainLineNode.destroy();
+				const node = nodeHandler.create(this.lineId, {
+					...this.props,
+					...clonedLine.getAttrs(),
+					hitStrokeWidth: 16
+				});
+				this.instance.addNode(node, this.container?.getAttrs().id);
+				this.instance.emitEvent("onAddedPen");
+			}
 		}
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
@@ -24759,8 +24751,11 @@ var WeavePenToolAction = class extends WeaveAction {
 		this.tempPoint = void 0;
 		this.tempNextPoint = void 0;
 		this.lineId = null;
+		this.tempMainLineNode = null;
 		this.tempLineId = null;
+		this.tempLineNode = null;
 		this.container = void 0;
+		this.measureContainer = void 0;
 		this.clickPoint = null;
 		this.setState(PEN_TOOL_STATE.IDLE);
 	}
@@ -24963,11 +24958,13 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 		this.props = this.initProps();
 		this.setState(BRUSH_TOOL_STATE.IDLE);
+		this.instance.emitEvent("onAddingBrush");
 		stage.container().style.cursor = "crosshair";
 	}
 	cleanup() {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "default";
+		this.instance.emitEvent("onAddedBrush");
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
 			const node = stage.findOne(`#${this.strokeId}`);
@@ -25038,6 +25035,8 @@ var WeaveTextToolAction = class extends WeaveAction {
 			tr.hide();
 		}
 		stage.container().style.cursor = "crosshair";
+		stage.container().focus();
+		this.instance.emitEvent("onAddingText");
 		this.clickPoint = null;
 		this.setState(TEXT_TOOL_STATE.ADDING);
 	}
@@ -25055,6 +25054,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 				draggable: true
 			});
 			this.instance.addNode(node, this.container?.getAttrs().id);
+			this.instance.emitEvent("onAddedArrow");
 		}
 		this.setState(TEXT_TOOL_STATE.FINISHED);
 		this.cancelAction();
@@ -25314,10 +25314,13 @@ var WeaveArrowToolAction = class extends WeaveAction {
 	onInit = void 0;
 	constructor() {
 		super();
+		this.pointers = new Map();
 		this.initialized = false;
 		this.state = ARROW_TOOL_STATE.IDLE;
 		this.arrowId = null;
 		this.tempArrowId = null;
+		this.tempMainArrowNode = null;
+		this.tempArrowNode = null;
 		this.container = void 0;
 		this.measureContainer = void 0;
 		this.clickPoint = null;
@@ -25352,22 +25355,29 @@ var WeaveArrowToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdblclick", () => {
-			this.cancelAction();
-		});
-		stage.on("pointerclick", () => {
-			if (this.state === ARROW_TOOL_STATE.IDLE) return;
-			if (this.state === ARROW_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() === ARROW_TOOL_ACTION_NAME) {
+				this.state = ARROW_TOOL_STATE.ADDING;
 				return;
 			}
-			if (this.state === ARROW_TOOL_STATE.DEFINING_SIZE) {
-				this.handleSettingSize();
+			if (!this.tempMainArrowNode && this.state === ARROW_TOOL_STATE.ADDING) this.handleAdding();
+			if (this.tempMainArrowNode && this.state === ARROW_TOOL_STATE.ADDING) this.state = ARROW_TOOL_STATE.DEFINING_SIZE;
+		});
+		stage.on("pointermove", () => {
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === ARROW_TOOL_ACTION_NAME) {
+				this.state = ARROW_TOOL_STATE.ADDING;
 				return;
 			}
+			if (this.state === ARROW_TOOL_STATE.DEFINING_SIZE) this.handleMovement();
 		});
-		stage.on("pointermove", () => {
-			this.handleMovement();
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (this.state === ARROW_TOOL_STATE.DEFINING_SIZE) this.handleSettingSize();
 		});
 		this.initialized = true;
 	}
@@ -25377,6 +25387,8 @@ var WeaveArrowToolAction = class extends WeaveAction {
 	addArrow() {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "crosshair";
+		stage.container().focus();
+		this.instance.emitEvent("onAddingArrow");
 		this.tempPoint = void 0;
 		this.tempNextPoint = void 0;
 		this.clickPoint = null;
@@ -25390,65 +25402,58 @@ var WeaveArrowToolAction = class extends WeaveAction {
 		this.measureContainer = measureContainer;
 		this.arrowId = v4_default();
 		this.tempArrowId = v4_default();
-		const nodeHandler = this.instance.getNodeHandler("arrow");
-		const lineNodeHandler = this.instance.getNodeHandler("line");
-		if (lineNodeHandler) {
-			const node = lineNodeHandler.create(this.arrowId, {
+		if (!this.tempMainArrowNode) {
+			this.tempMainArrowNode = new Konva.Line({
 				...this.props,
+				id: this.arrowId,
 				strokeScaleEnabled: true,
 				x: this.clickPoint?.x ?? 0,
 				y: this.clickPoint?.y ?? 0,
 				points: [0, 0]
 			});
-			this.instance.addNode(node, this.container?.getAttrs().id);
-		}
-		this.tempPoint = new Konva.Circle({
-			x: this.clickPoint?.x ?? 0,
-			y: this.clickPoint?.y ?? 0,
-			radius: 5 / stage.scaleX(),
-			strokeScaleEnabled: true,
-			stroke: "#cccccc",
-			strokeWidth: 0,
-			fill: "#cccccc"
-		});
-		this.measureContainer?.add(this.tempPoint);
-		if (nodeHandler) {
-			const tempArrow = nodeHandler.create(this.tempArrowId, {
-				...this.props,
+			this.measureContainer?.add(this.tempMainArrowNode);
+			this.tempPoint = new Konva.Circle({
 				x: this.clickPoint?.x ?? 0,
 				y: this.clickPoint?.y ?? 0,
+				radius: 5 / stage.scaleX(),
 				strokeScaleEnabled: true,
+				stroke: "#cccccc",
+				strokeWidth: 0,
+				fill: "#cccccc"
+			});
+			this.measureContainer?.add(this.tempPoint);
+			this.tempArrowNode = new Konva.Arrow({
+				...this.props,
+				id: this.tempArrowId,
+				strokeScaleEnabled: true,
+				x: this.clickPoint?.x ?? 0,
+				y: this.clickPoint?.y ?? 0,
 				points: [0, 0]
 			});
-			this.instance.addNode(tempArrow, this.container?.getAttrs().id);
+			this.measureContainer?.add(this.tempArrowNode);
+			this.tempNextPoint = new Konva.Circle({
+				x: this.clickPoint?.x ?? 0,
+				y: this.clickPoint?.y ?? 0,
+				radius: 5 / stage.scaleX(),
+				strokeScaleEnabled: true,
+				stroke: "#cccccc",
+				strokeWidth: 0,
+				fill: "#cccccc"
+			});
+			this.measureContainer?.add(this.tempNextPoint);
+			this.setState(ARROW_TOOL_STATE.DEFINING_SIZE);
 		}
-		this.tempNextPoint = new Konva.Circle({
-			x: this.clickPoint?.x ?? 0,
-			y: this.clickPoint?.y ?? 0,
-			radius: 5 / stage.scaleX(),
-			strokeScaleEnabled: true,
-			stroke: "#cccccc",
-			strokeWidth: 0,
-			fill: "#cccccc"
-		});
-		this.measureContainer?.add(this.tempNextPoint);
-		this.setState(ARROW_TOOL_STATE.DEFINING_SIZE);
 	}
 	handleSettingSize() {
-		const tempArrow = this.instance.getStage().findOne(`#${this.tempArrowId}`);
-		const tempMainArrow = this.instance.getStage().findOne(`#${this.arrowId}`);
-		if (this.arrowId && this.tempPoint && this.tempNextPoint && this.measureContainer && tempMainArrow && tempArrow) {
+		if (this.arrowId && this.tempMainArrowNode && this.tempArrowNode && this.tempPoint && this.tempNextPoint && this.measureContainer) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
-			const newPoints = [...tempMainArrow.points()];
-			newPoints.push(mousePoint.x - tempMainArrow.x());
-			newPoints.push(mousePoint.y - tempMainArrow.y());
-			tempMainArrow.setAttrs({
+			const newPoints = [...this.tempMainArrowNode.points()];
+			newPoints.push(mousePoint.x - this.tempMainArrowNode.x());
+			newPoints.push(mousePoint.y - this.tempMainArrowNode.y());
+			this.tempMainArrowNode.setAttrs({
 				...this.props,
 				points: newPoints
 			});
-			const nodeHandler = this.instance.getNodeHandler("arrow");
-			const lineNodeHandler = this.instance.getNodeHandler("line");
-			if (lineNodeHandler) this.instance.updateNode(lineNodeHandler.serialize(tempMainArrow));
 			this.tempPoint.setAttrs({
 				x: mousePoint.x,
 				y: mousePoint.y
@@ -25457,32 +25462,28 @@ var WeaveArrowToolAction = class extends WeaveAction {
 				x: mousePoint.x,
 				y: mousePoint.y
 			});
-			tempArrow.setAttrs({
+			this.tempArrowNode.setAttrs({
 				...this.props,
 				x: mousePoint.x,
 				y: mousePoint.y,
 				points: [0, 0]
 			});
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempArrow));
+			this.setState(ARROW_TOOL_STATE.DEFINING_SIZE);
 		}
-		this.setState(ARROW_TOOL_STATE.DEFINING_SIZE);
 	}
 	handleMovement() {
 		if (this.state !== ARROW_TOOL_STATE.DEFINING_SIZE) return;
-		const tempArrow = this.instance.getStage().findOne(`#${this.tempArrowId}`);
-		if (this.arrowId && this.measureContainer && this.tempNextPoint && tempArrow) {
+		if (this.arrowId && this.tempArrowNode && this.measureContainer && this.tempNextPoint) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
-			tempArrow.setAttrs({
+			this.tempArrowNode.setAttrs({
 				...this.props,
 				points: [
-					tempArrow.points()[0],
-					tempArrow.points()[1],
-					mousePoint.x - tempArrow.x(),
-					mousePoint.y - tempArrow.y()
+					this.tempArrowNode.points()[0],
+					this.tempArrowNode.points()[1],
+					mousePoint.x - this.tempArrowNode.x(),
+					mousePoint.y - this.tempArrowNode.y()
 				]
 			});
-			const nodeHandler = this.instance.getNodeHandler("arrow");
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempArrow));
 			this.tempNextPoint.setAttrs({
 				x: mousePoint.x,
 				y: mousePoint.y
@@ -25505,29 +25506,19 @@ var WeaveArrowToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		this.tempPoint?.destroy();
 		this.tempNextPoint?.destroy();
-		const tempArrow = this.instance.getStage().findOne(`#${this.tempArrowId}`);
-		const tempMainArrow = this.instance.getStage().findOne(`#${this.arrowId}`);
-		if (tempArrow) {
+		this.tempArrowNode?.destroy();
+		if (this.arrowId && this.tempMainArrowNode && this.tempMainArrowNode.points().length >= 4) {
 			const nodeHandler = this.instance.getNodeHandler("arrow");
-			if (nodeHandler) this.instance.removeNode(nodeHandler.serialize(tempArrow));
-		}
-		if (this.arrowId && tempMainArrow && tempMainArrow.points().length < 4) {
-			const nodeHandler = this.instance.getNodeHandler("line");
-			if (nodeHandler) this.instance.removeNode(nodeHandler.serialize(tempMainArrow));
-		}
-		if (this.arrowId && tempMainArrow && tempMainArrow.points().length >= 4) {
-			const nodeHandler = this.instance.getNodeHandler("arrow");
-			const lineNodeHandler = this.instance.getNodeHandler("line");
-			if (nodeHandler && lineNodeHandler) {
+			if (nodeHandler) {
+				const clonedLine = this.tempMainArrowNode.clone();
+				this.tempMainArrowNode.destroy();
 				const finalArrow = nodeHandler.create(this.arrowId, {
-					...tempMainArrow.getAttrs(),
 					...this.props,
-					strokeScaleEnabled: true,
-					strokeWidth: 1,
+					...clonedLine.getAttrs(),
 					hitStrokeWidth: 16
 				});
-				this.instance.removeNode(lineNodeHandler.serialize(tempMainArrow));
 				this.instance.addNode(finalArrow, this.container?.getAttrs().id);
+				this.instance.emitEvent("onAddedArrow");
 			}
 		}
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -25542,7 +25533,10 @@ var WeaveArrowToolAction = class extends WeaveAction {
 		this.tempNextPoint = void 0;
 		this.arrowId = null;
 		this.tempArrowId = null;
+		this.tempMainArrowNode = null;
+		this.tempArrowNode = null;
 		this.container = void 0;
+		this.measureContainer = void 0;
 		this.clickPoint = null;
 		this.setState(ARROW_TOOL_STATE.IDLE);
 	}
@@ -25804,6 +25798,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "crosshair";
 		stage.container().focus();
+		this.instance.emitEvent("onAddingFrame");
 		this.frameId = null;
 		this.clickPoint = null;
 		this.setState(FRAME_TOOL_STATE.ADDING);
@@ -25825,6 +25820,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
 				y: this.clickPoint.y
 			});
 			this.instance.addNode(node, this.container?.getAttrs().id);
+			this.instance.emitEvent("onAddedFrame");
 		}
 		this.cancelAction?.();
 	}
@@ -26284,7 +26280,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 			if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
 			this.onRender();
 		};
-		stage.on("pointermove", (0, import_lodash$1.throttle)(handleMouseMove, 50));
+		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
 		stage.on("pointermove", () => {
 			if (this.enabled) this.onRender();
 		});
@@ -26856,7 +26852,7 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 					newConnectedUsers[userInformation.id] = userInformation;
 				}
 			}
-			if (!(0, import_lodash$1.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
+			if (!(0, import_lodash.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
 			this.connectedUsers = newConnectedUsers;
 		});
 	}