@inditextech/weave-sdk 0.42.2 → 0.44.0

package/dist/sdk.cjs

@@ -15958,7 +15958,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		super();
 		const { config } = params ?? {};
 		this.config = {
-			transformer: {
+			selection: {
 				rotationSnaps: [
 					0,
 					45,
@@ -15993,16 +15993,27 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 					}
 				},
 				borderStroke: "#0074ffcc",
-				borderStrokeWidth: 3,
-				...config?.transformer
+				borderStrokeWidth: 1,
+				...config?.selection
 			},
-			transformations: {
+			hover: {
+				borderStrokeWidth: 1,
+				...config?.hover
+			},
+			selectionArea: {
+				fill: "#93c5fd40",
+				stroke: "#1e40afff",
+				strokeWidth: 1,
+				dash: [12, 4],
+				...config?.selectionArea
+			},
+			behaviors: {
 				singleSelection: { enabled: true },
 				multipleSelection: { enabled: false },
-				...config?.transformations
+				...config?.behaviors
 			}
 		};
-		this.defaultEnabledAnchors = this.config.transformer?.enabledAnchors ?? [
+		this.defaultEnabledAnchors = this.config.selection?.enabledAnchors ?? [
 			"top-left",
 			"top-center",
 			"top-right",
@@ -16060,23 +16071,21 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		stage.container().tabIndex = 1;
 		stage.container().focus();
 		const selectionRectangle = new konva.default.Rect({
-			fill: "rgba(147, 197, 253, 0.25)",
-			stroke: "#1e40afff",
-			strokeWidth: 1 * stage.scaleX(),
-			dash: [12 * stage.scaleX(), 4 * stage.scaleX()],
+			...this.config.selectionArea,
+			...this.config.selectionArea.strokeWidth && { strokeWidth: this.config.selectionArea.strokeWidth / stage.scaleX() },
+			...this.config.selectionArea.dash && { dash: this.config.selectionArea.dash.map((d) => d / stage.scaleX()) },
 			visible: false,
 			listening: false
 		});
 		selectionLayer?.add(selectionRectangle);
 		const tr = new konva.default.Transformer({
 			id: "selectionTransformer",
-			...this.config.transformer
+			...this.config.selection
 		});
 		selectionLayer?.add(tr);
 		const trHover = new konva.default.Transformer({
 			id: "hoverTransformer",
-			...this.config.transformer,
-			borderStrokeWidth: 3,
+			...this.config.hover,
 			rotateEnabled: false,
 			resizeEnabled: false,
 			enabledAnchors: [],
@@ -16347,8 +16356,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			y1 = intStage.getRelativePointerPosition()?.y ?? 0;
 			x2 = intStage.getRelativePointerPosition()?.x ?? 0;
 			y2 = intStage.getRelativePointerPosition()?.y ?? 0;
-			this.selectionRectangle.strokeWidth(1 / stage.scaleX());
-			this.selectionRectangle.dash([12 / stage.scaleX(), 4 / stage.scaleX()]);
+			this.selectionRectangle.strokeWidth(this.config.selectionArea.strokeWidth / stage.scaleX());
+			this.selectionRectangle.dash(this.config.selectionArea.dash?.map((d) => d / stage.scaleX()) ?? []);
 			this.selectionRectangle.width(0);
 			this.selectionRectangle.height(0);
 			this.selecting = true;
@@ -16468,16 +16477,16 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				if (!frameNode.getAttrs().locked) selectedNodes.add(node);
 			});
 			const nodesArray = [...selectedNodes];
-			if (nodesArray.length > 1 && !this.config.transformations.multipleSelection.enabled || nodesArray.length === 1 && !this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors([]);
-			if (nodesArray.length > 1 && this.config.transformations.multipleSelection.enabled || nodesArray.length === 1 && this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
+			if (nodesArray.length > 1 && !this.config.behaviors.multipleSelection.enabled || nodesArray.length === 1 && !this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors([]);
+			if (nodesArray.length > 1 && this.config.behaviors.multipleSelection.enabled || nodesArray.length === 1 && this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
 			if (nodesArray.length === 1) {
 				this.tr.setAttrs({
-					...this.config.transformer,
+					...this.config.selection,
 					...nodesArray[0].getTransformerProperties()
 				});
 				this.tr.forceUpdate();
 			} else {
-				this.tr.setAttrs({ ...this.config.transformer });
+				this.tr.setAttrs({ ...this.config.selection });
 				this.tr.forceUpdate();
 			}
 			this.selecting = false;
@@ -16521,7 +16530,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (targetNode && targetNode.getAttrs().nodeType) nodeTargeted = targetNode;
 		}
 		if (!nodeTargeted.getAttrs().nodeType) return;
-		let nodesSelected = 0;
 		const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
 		const nodeSelectedIndex = this.tr.nodes().findIndex((node) => {
 			return node.getAttrs().id === nodeTargeted.getAttrs().id;
@@ -16539,7 +16547,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		}
 		if (!metaPressed) {
 			this.tr.nodes([nodeTargeted]);
-			nodesSelected = this.tr.nodes().length;
 			this.tr.show();
 			areNodesSelected = true;
 		}
@@ -16547,24 +16554,14 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			const nodes = this.tr.nodes().slice();
 			nodes.splice(nodes.indexOf(nodeTargeted), 1);
 			this.tr.nodes(nodes);
-			nodesSelected = this.tr.nodes().length;
 			areNodesSelected = true;
 		}
 		if (metaPressed && !isSelected) {
 			const nodes = this.tr.nodes().concat([nodeTargeted]);
 			this.tr.nodes(nodes);
-			nodesSelected = this.tr.nodes().length;
 			areNodesSelected = true;
 		}
-		if (nodesSelected > 1 && !this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && !this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors([]);
-		if (nodesSelected > 1 && this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
-		if (nodesSelected === 1) {
-			this.tr.setAttrs({
-				...this.config.transformer,
-				...nodeTargeted.getTransformerProperties()
-			});
-			this.tr.forceUpdate();
-		}
+		this.handleBehaviors();
 		if (areNodesSelected) {
 			stage.container().tabIndex = 1;
 			stage.container().focus();
@@ -16578,21 +16575,25 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	getHoverTransformer() {
 		return this.trHover;
 	}
-	setSelectedNodes(nodes) {
-		this.tr.setNodes(nodes);
-		const nodesSelected = nodes.length;
-		if (nodesSelected > 1 && !this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && !this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors([]);
-		if (nodesSelected > 1 && this.config.transformations.multipleSelection.enabled || nodesSelected === 1 && this.config.transformations.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
+	handleBehaviors() {
+		const nodes = this.getSelectedNodes();
+		const nodesSelected = this.getSelectedNodes().length;
+		if (nodesSelected > 1 && !this.config.behaviors.multipleSelection.enabled || nodesSelected === 1 && !this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors([]);
+		if (nodesSelected > 1 && this.config.behaviors.multipleSelection.enabled || nodesSelected === 1 && this.config.behaviors.singleSelection.enabled) this.tr.enabledAnchors(this.defaultEnabledAnchors);
 		if (nodesSelected === 1) {
 			this.tr.setAttrs({
-				...this.config.transformer,
+				...this.config.selection,
 				...nodes[0].getTransformerProperties()
 			});
 			this.tr.forceUpdate();
 		} else if (nodesSelected > 1) {
-			this.tr.setAttrs({ ...this.config.transformer });
+			this.tr.setAttrs({ ...this.config.selection });
 			this.tr.forceUpdate();
 		}
+	}
+	setSelectedNodes(nodes) {
+		this.tr.setNodes(nodes);
+		this.handleBehaviors();
 		this.triggerSelectedNodesEvent();
 	}
 	getSelectedNodes() {
@@ -18450,6 +18451,7 @@ var WeaveStateManager = class {
 			return;
 		}
 		const doc = (0, __syncedstore_core.getYjsDoc)(state);
+		const userId = this.instance.getStore().getUser().id;
 		doc.transact(() => {
 			if (!parent.props.children) parent.props.children = [];
 			if (index) {
@@ -18468,7 +18470,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];
@@ -18512,9 +18514,10 @@ var WeaveStateManager = class {
 			return;
 		}
 		const doc = (0, __syncedstore_core.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) {
@@ -18536,6 +18539,7 @@ var WeaveStateManager = class {
 			return;
 		}
 		const doc = (0, __syncedstore_core.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) {
@@ -18545,7 +18549,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);
@@ -18577,6 +18581,7 @@ var WeaveStateManager = class {
 				return;
 			}
 			const doc = (0, __syncedstore_core.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]));
@@ -18587,7 +18592,7 @@ var WeaveStateManager = class {
 					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;
 				}
-			});
+			}, userId);
 		}
 	}
 	getElementsTree() {
@@ -18673,7 +18678,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.42.2";
+var version = "0.44.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -21323,7 +21328,7 @@ const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
 		rotateEnabled: false,
 		resizeEnabled: false,
 		enabledAnchors: [],
-		borderStrokeWidth: 3,
+		borderStrokeWidth: 1,
 		padding: 0
 	}
 };
@@ -21408,13 +21413,15 @@ var WeaveFrameNode = class extends WeaveNode {
 			draggable: false
 		});
 		frameInternalGroup.add(background);
+		const stage = this.instance.getStage();
 		const text = new konva.default.Text({
 			id: `${id}-title`,
 			x: 0,
-			width: props.frameWidth,
-			fontSize,
+			width: props.frameWidth / stage.scaleX(),
+			fontSize: fontSize / stage.scaleX(),
 			fontFamily,
 			fontStyle,
+			verticalAlign: "middle",
 			align: "left",
 			text: props.title,
 			fill: fontColor,
@@ -21424,10 +21431,8 @@ var WeaveFrameNode = class extends WeaveNode {
 			draggable: false
 		});
 		const textMeasures = text.measureSize(text.getAttrs().text ?? "");
-		const textWidth = textMeasures.width;
-		const textHeight = textMeasures.height;
-		text.y(-textHeight - titleMargin);
-		text.width(textWidth);
+		const textHeight = textMeasures.height + 2 * titleMargin / stage.scaleX();
+		text.y(-textHeight);
 		text.height(textHeight);
 		frameInternalGroup.add(text);
 		frame.getTransformerProperties = () => {
@@ -21459,7 +21464,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			height: props.frameHeight,
 			hitFunc: function(ctx, shape) {
 				ctx.beginPath();
-				ctx.rect(0, -textHeight - titleMargin, textWidth, textHeight);
+				ctx.rect(0, -textHeight, props.frameWidth, textHeight);
 				ctx.fillStrokeShape(shape);
 			},
 			fill: "transparent",
@@ -21499,6 +21504,20 @@ var WeaveFrameNode = class extends WeaveNode {
 		selectionArea.off("dragmove");
 		selectionArea.off("dragend");
 		this.setupDefaultNodeEvents(frame);
+		this.instance.addEventListener("onZoomChange", () => {
+			const stage$1 = this.instance.getStage();
+			text.fontSize(fontSize / stage$1.scaleX());
+			text.width(props.frameWidth / stage$1.scaleX());
+			const textMeasures$1 = text.measureSize(text.getAttrs().text ?? "");
+			const textHeight$1 = textMeasures$1.height + 2 * titleMargin / stage$1.scaleX();
+			text.y(-textHeight$1);
+			text.height(textHeight$1);
+			selectionArea.hitFunc(function(ctx, shape) {
+				ctx.beginPath();
+				ctx.rect(0, -textHeight$1, props.frameWidth, textHeight$1);
+				ctx.fillStrokeShape(shape);
+			});
+		});
 		frame.off("pointerover");
 		frame.on(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
 			background.setAttrs({
@@ -21532,14 +21551,12 @@ var WeaveFrameNode = class extends WeaveNode {
 		if (title && selectionArea) {
 			title.text(newProps.title);
 			const textMeasures = title.measureSize(title.getAttrs().text ?? "");
-			const textWidth = textMeasures.width;
-			const textHeight = textMeasures.height;
-			title.y(-textHeight - titleMargin);
-			title.width(textWidth);
+			const textHeight = textMeasures.height + 2 * titleMargin / stage.scaleX();
+			title.y(-textHeight);
 			title.height(textHeight);
 			selectionArea.hitFunc(function(ctx, shape) {
 				ctx.beginPath();
-				ctx.rect(0, -textHeight - titleMargin, textWidth, textHeight);
+				ctx.rect(0, -textHeight, nextProps.frameWidth, textHeight);
 				ctx.fillStrokeShape(shape);
 			});
 		}
@@ -24137,9 +24154,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();
 	}
@@ -24178,10 +24196,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;
@@ -24190,19 +24205,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;
 	}
@@ -24218,29 +24227,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.default.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
@@ -24253,31 +24261,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) {
@@ -24302,9 +24317,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);
 	}
@@ -24540,6 +24556,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;
@@ -24579,11 +24597,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;
@@ -24602,6 +24619,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;
@@ -24615,63 +24634,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.default.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.default.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.default.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.default.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.default.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.default.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
@@ -24680,32 +24694,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
@@ -24728,24 +24738,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) {
-			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) {
+		this.tempLineNode?.destroy();
+		if (this.lineId && this.tempMainLineNode && this.tempMainLineNode.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) {
@@ -24758,8 +24764,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);
 	}
@@ -24962,11 +24971,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}`);
@@ -25037,6 +25048,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);
 	}
@@ -25054,6 +25067,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();
@@ -25313,10 +25327,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;
@@ -25351,22 +25368,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;
 	}
@@ -25376,6 +25400,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;
@@ -25389,65 +25415,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.default.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.default.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.default.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.default.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.default.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.default.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
@@ -25456,32 +25475,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
@@ -25504,29 +25519,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");
@@ -25541,7 +25546,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);
 	}
@@ -25803,6 +25811,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);
@@ -25824,6 +25833,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
 				y: this.clickPoint.y
 			});
 			this.instance.addNode(node, this.container?.getAttrs().id);
+			this.instance.emitEvent("onAddedFrame");
 		}
 		this.cancelAction?.();
 	}