@inditextech/weave-sdk 0.36.0 → 0.38.0

package/dist/sdk.cjs

@@ -15655,6 +15655,9 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	initLayer = void 0;
 	constructor(params) {
 		super();
+		this.onAction = void 0;
+		this.dragging = false;
+		this.transforming = false;
 		this.touchTimer = void 0;
 		this.tapHold = false;
 		this.contextMenuVisible = false;
@@ -15729,11 +15732,16 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
+		this.instance.addEventListener("onActiveActionChange", (activeAction) => {
+			this.onAction = activeAction;
+		});
 		this.instance.addEventListener("onDrag", (node) => {
+			this.actualNode = node;
 			if (node) this.dragging = true;
 			else this.dragging = false;
 		});
 		this.instance.addEventListener("onTransform", (node) => {
+			this.actualNode = node;
 			if (node) this.transforming = true;
 			else this.transforming = false;
 		});
@@ -15743,15 +15751,22 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
 			this.touchTimer = setTimeout(() => {
 				this.tapHold = true;
-				if (this.touchTimer && (this.dragging || this.transforming)) {
+				const actualActions = this.instance.getActiveAction();
+				if (actualActions !== "selectionTool") return;
+				const shouldKillLongPressTimer = this.touchTimer && (typeof this.onAction === "undefined" || typeof this.onAction !== "undefined" && ["selectionTool"].includes(this.onAction)) && (typeof this.dragging !== "undefined" && this.dragging || typeof this.transforming !== "undefined" && this.transforming);
+				if (shouldKillLongPressTimer) {
 					clearTimeout(this.touchTimer);
 					return;
 				}
+				this.actualNode?.stopDrag();
+				delete this.pointers[e.evt.pointerId];
 				this.triggerContextMenu(e.target);
 			}, this.tapHoldTimeout);
 		});
 		stage.on("pointermove", (e) => {
-			if (e.evt.pointerType === "mouse") return;
+			if (["mouse"].includes(e.evt.pointerType)) return;
+			if (["pen"].includes(e.evt.pointerType) && e.evt.pressure === 0) return;
+			if (["pen"].includes(e.evt.pointerType) && (e.evt.movementX >= -1 && e.evt.movementX <= 1 || e.evt.movementY >= -1 && e.evt.movementY >= 1)) return;
 			if (this.touchTimer) clearTimeout(this.touchTimer);
 		});
 		stage.on("pointerup", (e) => {
@@ -15822,8 +15837,11 @@ function checkIfOverContainer(instance, node) {
 	if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
 	return layerToMove;
 }
-function moveNodeToContainer(instance, node) {
+function moveNodeToContainer(instance, node, ignoreContainers = []) {
 	const nodeIntersected = instance.pointIntersectsContainerElement();
+	let realNodeIntersected = nodeIntersected;
+	if (realNodeIntersected && realNodeIntersected.getAttrs().nodeType === "frame" && !realNodeIntersected.getAttrs().nodeId) realNodeIntersected = instance.getStage().findOne(`#${realNodeIntersected.getAttrs().id}-selector-area`);
+	if (realNodeIntersected && ignoreContainers.includes(realNodeIntersected)) return void 0;
 	const isLocked = instance.allNodesLocked([node]);
 	if (isLocked) return;
 	let nodeActualContainer = node.getParent();
@@ -15980,6 +15998,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		];
 		this.active = false;
 		this.cameFromSelectingMultiple = false;
+		this.didMove = false;
+		this.selectionTriggered = false;
 		this.selecting = false;
 		this.dragging = false;
 		this.initialized = false;
@@ -16044,6 +16064,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		});
 		tr.on("dragstart", (e) => {
 			this.dragging = true;
+			this.didMove = false;
 			const stage$1 = this.instance.getStage();
 			if (stage$1.isMouseWheelPressed()) {
 				e.cancelBubble = true;
@@ -16053,7 +16074,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			const selectedNodes = tr.nodes();
 			for (let i = 0; i < selectedNodes.length; i++) {
 				const node = selectedNodes[i];
-				node.updatePosition(e.target.getAbsolutePosition());
+				node.updatePosition(node.getAbsolutePosition());
 			}
 			tr.forceUpdate();
 			e.cancelBubble = true;
@@ -16065,40 +16086,47 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				e.target.stopDrag();
 				return;
 			}
+			this.didMove = true;
+			e.cancelBubble = true;
 			const selectedNodes = tr.nodes();
+			let hasFrames = false;
 			for (let i = 0; i < selectedNodes.length; i++) {
 				const node = selectedNodes[i];
-				node.updatePosition(e.target.getAbsolutePosition());
+				if (node.getAttrs().nodeType === "frame") hasFrames = hasFrames || true;
+				node.updatePosition(node.getAbsolutePosition());
 			}
-			e.cancelBubble = true;
 			if (this.isSelecting() && selectedNodes.length > 1) {
 				clearContainerTargets(this.instance);
 				const layerToMove = checkIfOverContainer(this.instance, e.target);
-				if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
+				if (layerToMove && !hasFrames) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 			}
 			tr.forceUpdate();
 		};
-		tr.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 50));
+		tr.on("dragmove", handleDragMove);
 		tr.on("dragend", (e) => {
+			if (!this.didMove) return;
 			this.dragging = false;
 			e.cancelBubble = true;
 			const selectedNodes = tr.nodes();
+			let hasFrames = false;
 			for (let i = 0; i < selectedNodes.length; i++) {
 				const node = selectedNodes[i];
-				node.updatePosition(e.target.getAbsolutePosition());
+				if (node.getAttrs().nodeType === "frame") hasFrames = hasFrames || true;
+				node.updatePosition(node.getAbsolutePosition());
 			}
 			if (this.isSelecting() && tr.nodes().length > 1) {
 				const actualCursor = stage.container().style.cursor;
 				stage.container().style.cursor = "wait";
 				clearContainerTargets(this.instance);
+				const toSelect = [];
 				const toUpdate = [];
 				const nodeUpdatePromise = (node) => {
 					return new Promise((resolve) => {
 						setTimeout(() => {
-							const layerToMove = moveNodeToContainer(this.instance, node);
-							if (layerToMove) return resolve();
+							moveNodeToContainer(this.instance, node, selectedNodes);
 							const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
 							if (!nodeHandler) return resolve();
+							toSelect.push(node.getAttrs().id ?? "");
 							toUpdate.push(nodeHandler.serialize(node));
 							resolve();
 						}, 0);
@@ -16110,6 +16138,15 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 					if (results.length > 0) this.instance.updateNodes(toUpdate);
 					stage.container().style.cursor = actualCursor;
 				});
+				setTimeout(() => {
+					const finalSelectedNodes = [];
+					toSelect.forEach((nodeId) => {
+						const actNode = this.instance.getStage().findOne(`#${nodeId}`);
+						if (actNode) finalSelectedNodes.push(actNode);
+					});
+					tr.nodes(finalSelectedNodes);
+					tr.forceUpdate();
+				}, 0);
 			}
 			tr.forceUpdate();
 		});
@@ -16188,6 +16225,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (!this.initialized) return;
 			if (!this.active) return;
 			if (e.evt.pointerType === "mouse" && e.evt.button !== 0) return;
+			if (e.evt.pointerType === "pen" && e.evt.pressure <= .05) return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
 			const selectedGroup = this.instance.getInstanceRecursive(e.target);
 			if (!(e.target instanceof konva.default.Stage) && !(selectedGroup && selectedGroup.getAttrs().nodeType === "frame")) return;
@@ -16202,11 +16240,16 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.selectionRectangle.height(0);
 			this.selecting = true;
 			this.instance.emitEvent("onSelectionState", true);
-			if (!(e.target instanceof konva.default.Stage)) this.cameFromSelectingMultiple = true;
 		});
 		const handleMouseMove = (e) => {
+			if (this.selectionTriggered) {
+				this.selectionTriggered = false;
+				this.selectionRectangle.setAttrs({ visible: false });
+				return;
+			}
 			if (!this.initialized) return;
 			if (!this.active) return;
+			if (e.evt.pointerType === "pen" && e.evt.pressure <= .05) return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
 			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
 			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
@@ -16228,12 +16271,18 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				height: Math.abs(y2 - y1)
 			});
 		};
-		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
+		stage.on("pointermove", handleMouseMove);
 		stage.on("pointerup", (e) => {
 			delete this.pointers[e.evt.pointerId];
+			if (this.selectionTriggered) {
+				this.selectionTriggered = false;
+				this.selectionRectangle.setAttrs({ visible: false });
+				return;
+			}
 			if (!this.initialized) return;
 			if (!this.active) return;
 			if (!this.selecting) return;
+			if (e.evt.pointerType === "pen" && e.evt.pressure > 0) return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) return;
 			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
 			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
@@ -16246,7 +16295,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				this.cameFromSelectingMultiple = false;
 				return;
 			}
-			this.tr.nodes([]);
 			this.selectionRectangle.visible(false);
 			const shapes = stage.find((node) => {
 				return ["Shape", "Group"].includes(node.getType()) && typeof node.getAttrs().id !== "undefined";
@@ -16266,9 +16314,9 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			});
 			const selectedNodes = new Set();
 			const framesNodes = selected.filter((shape) => {
-				return shape.getAttrs().nodeType === "frame";
+				return shape instanceof konva.default.Rect && shape.getAttrs().nodeType === "frame";
 			});
-			const framesNodesIds = framesNodes.map((shape) => {
+			let framesNodesIds = framesNodes.map((shape) => {
 				if (shape.getAttrs().nodeType === "frame" && shape.getAttrs().nodeId) return stage.findOne(`#${shape.getAttrs().nodeId}`);
 				return shape;
 			}).filter((shape) => {
@@ -16276,6 +16324,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			}).map((shape) => {
 				return shape.getAttrs().id;
 			});
+			const uniqueFramesNodesIds = new Set(framesNodesIds);
+			framesNodesIds = Array.from(uniqueFramesNodesIds);
 			const otherNodes = selected.filter((shape) => shape.getAttrs().nodeType !== "frame");
 			otherNodes.forEach((node) => {
 				let parent = this.instance.getInstanceRecursive(node.getParent());
@@ -16286,12 +16336,15 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				const frameNode = node;
 				if (!frameNode.getAttrs().locked) selectedNodes.add(frameNode);
 			});
+			this.selecting = false;
 			this.tr.nodes([...selectedNodes]);
 			this.triggerSelectedNodesEvent();
 			stage.container().tabIndex = 1;
 			stage.container().focus();
 		});
 		stage.on("pointerclick", (e) => {
+			e.cancelBubble = true;
+			this.selectionTriggered = false;
 			if (!this.enabled) return;
 			if (this.instance.getActiveAction() !== "selectionTool") return;
 			if (this.dragging) return;
@@ -16307,17 +16360,17 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			let selectedGroup = void 0;
 			const mousePos = stage.getPointerPosition();
 			if (mousePos) {
-				const inter = stage.getIntersection(mousePos);
-				if (inter) selectedGroup = this.instance.getInstanceRecursive(inter);
+				const allInter = stage.getAllIntersections(mousePos);
+				if (allInter && allInter.length === 1) selectedGroup = this.instance.getInstanceRecursive(allInter[0]);
 			}
 			if (!this.initialized) return;
-			if (e.evt.button && e.evt.button !== 0) return;
-			if (this.selectionRectangle.visible()) return;
+			if (e.evt.pointerType === "mouse" && e.evt.button && e.evt.button !== 0) return;
 			if (e.target instanceof konva.default.Stage && !selectedGroup) {
+				e.evt.preventDefault();
 				this.tr.nodes([]);
 				this.triggerSelectedNodesEvent();
 				if (contextMenuPlugin && !contextMenuPlugin.isTapHold()) this.instance.emitEvent("onStageSelection");
-				return;
+				return false;
 			}
 			let areNodesSelected = false;
 			let nodeTargeted = selectedGroup && !(selectedGroup.getAttrs().active ?? false) ? selectedGroup : e.target;
@@ -16364,6 +16417,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				stage.container().focus();
 				stage.container().style.cursor = "grab";
 			}
+			this.selectionTriggered = true;
 			this.triggerSelectedNodesEvent();
 		});
 	}
@@ -16747,7 +16801,13 @@ var WeaveNode = class {
 				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
 			});
 			node.on("dragstart", (e) => {
+				this.didMove = false;
 				const stage = this.instance.getStage();
+				const isErasing = this.instance.getActiveAction() === "eraseTool";
+				if (isErasing) {
+					e.target.stopDrag();
+					return;
+				}
 				this.instance.emitEvent("onDrag", e.target);
 				if (stage.isMouseWheelPressed()) {
 					e.cancelBubble = true;
@@ -16755,7 +16815,13 @@ var WeaveNode = class {
 				}
 			});
 			const handleDragMove = (e) => {
+				this.didMove = true;
 				const stage = this.instance.getStage();
+				const isErasing = this.instance.getActiveAction() === "eraseTool";
+				if (isErasing) {
+					e.target.stopDrag();
+					return;
+				}
 				if (stage.isMouseWheelPressed()) {
 					e.cancelBubble = true;
 					e.target.stopDrag();
@@ -16765,12 +16831,16 @@ var WeaveNode = class {
 					clearContainerTargets(this.instance);
 					const layerToMove = checkIfOverContainer(this.instance, e.target);
 					if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
-					const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
-					if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
 				}
 			};
 			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
 			node.on("dragend", (e) => {
+				if (!this.didMove) return;
+				const isErasing = this.instance.getActiveAction() === "eraseTool";
+				if (isErasing) {
+					e.target.stopDrag();
+					return;
+				}
 				this.instance.emitEvent("onDrag", null);
 				if (this.isSelecting() && this.isNodeSelected(node)) {
 					clearContainerTargets(this.instance);
@@ -16874,14 +16944,19 @@ var WeaveNode = class {
 	}
 	unlock(instance) {
 		if (instance.getAttrs().nodeType !== this.getNodeType()) return;
-		instance.setAttrs({ locked: false });
-		this.instance.updateNode(this.serialize(instance));
-		this.setupDefaultNodeEvents(instance);
+		let realInstance = instance;
+		if (instance.getAttrs().nodeId) realInstance = this.instance.getStage().findOne(`#${instance.getAttrs().nodeId}`);
+		if (!realInstance) return;
+		realInstance.setAttrs({ locked: false });
+		this.instance.updateNode(this.serialize(realInstance));
+		this.setupDefaultNodeEvents(realInstance);
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "default";
 	}
 	isLocked(instance) {
-		return instance.getAttrs().locked ?? false;
+		let realInstance = instance;
+		if (instance.getAttrs().nodeId === false) realInstance = this.instance.getInstanceRecursive(instance);
+		return realInstance.getAttrs().locked ?? false;
 	}
 };
 
@@ -16889,6 +16964,11 @@ var WeaveNode = class {
 //#region src/actions/action.ts
 var WeaveAction = class {
 	constructor() {
+		this.tapStart = {
+			x: 0,
+			y: 0,
+			time: 0
+		};
 		return new Proxy(this, { set: (target, key, value) => {
 			Reflect.set(target, key, value);
 			this.onPropsChange?.();
@@ -16920,6 +17000,26 @@ var WeaveAction = class {
 	getProps() {
 		return this.props;
 	}
+	isPressed(e) {
+		return e.evt.buttons > 0;
+	}
+	setTapStart(e) {
+		this.tapStart = {
+			x: e.evt.clientX,
+			y: e.evt.clientY,
+			time: performance.now()
+		};
+	}
+	isTap(e) {
+		if (!this.tapStart) return false;
+		const dx = e.evt.clientX - this.tapStart.x;
+		const dy = e.evt.clientY - this.tapStart.y;
+		const dist = Math.sqrt(dx * dx + dy * dy);
+		const dt = performance.now() - this.tapStart.time;
+		const TAP_DISTANCE = 10;
+		const TAP_TIME = 300;
+		return (e.evt.pointerType === "pen" || e.evt.pointerType === "touch") && dist < TAP_DISTANCE && dt < TAP_TIME;
+	}
 };
 
 //#endregion
@@ -17975,23 +18075,30 @@ var WeaveZIndexManager = class {
 			this.instance.moveNode(node, __inditextech_weave_types.WEAVE_NODE_POSITION.DOWN);
 		}
 	}
-	sendToBack(instance) {
-		this.logger.debug(`Moving instance with id [${instance.getAttrs().id}], to bottom of z-index`);
-		instance.moveToBottom();
-		const handler = this.instance.getNodeHandler(instance.getAttrs().nodeType);
-		if (handler) {
-			const node = handler.serialize(instance);
-			this.instance.moveNode(node, __inditextech_weave_types.WEAVE_NODE_POSITION.BACK);
+	sendToBack(instances) {
+		const nodes = Array.isArray(instances) ? instances : [instances];
+		const nodesDescending = nodes.toSorted((a, b) => b.zIndex() - a.zIndex());
+		for (const node of nodesDescending) {
+			node.moveToBottom();
+			const handler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+			if (handler) {
+				const nodeState = handler.serialize(node);
+				this.instance.updateNode(nodeState);
+				this.instance.moveNode(nodeState, __inditextech_weave_types.WEAVE_NODE_POSITION.BACK);
+			}
 		}
 	}
-	bringToFront(instance) {
-		this.logger.debug(`Moving instance with id [${instance.getAttrs().id}], to top of z-index`);
-		instance.moveToTop();
-		const handler = this.instance.getNodeHandler(instance.getAttrs().nodeType);
-		if (handler) {
-			const node = handler.serialize(instance);
-			this.instance.updateNode(node);
-			this.instance.moveNode(node, __inditextech_weave_types.WEAVE_NODE_POSITION.FRONT);
+	bringToFront(instances) {
+		const nodes = Array.isArray(instances) ? instances : [instances];
+		const nodesAscending = nodes.toSorted((a, b) => a.zIndex() - b.zIndex());
+		for (const node of nodesAscending) {
+			node.moveToTop();
+			const handler = this.instance.getNodeHandler(node.getAttrs().nodeType);
+			if (handler) {
+				const nodeState = handler.serialize(node);
+				this.instance.updateNode(nodeState);
+				this.instance.moveNode(nodeState, __inditextech_weave_types.WEAVE_NODE_POSITION.FRONT);
+			}
 		}
 	}
 };
@@ -18063,7 +18170,7 @@ var WeaveStateManager = class {
 		};
 		return this.findNodeById(state, nodeKey);
 	}
-	addNode(node, parentId = "mainLayer", index = void 0, doRender = true) {
+	addNode(node, parentId = "mainLayer", index = void 0) {
 		const userName = this.instance.getStore().getUser().name;
 		this.instance.getStore().getDocument().transact(() => {
 			const state = this.instance.getStore().getState();
@@ -18071,8 +18178,7 @@ var WeaveStateManager = class {
 				const msg = `State is empty, cannot add the node`;
 				this.logger.warn({
 					node,
-					parentId,
-					doRender
+					parentId
 				}, msg);
 				return;
 			}
@@ -18081,8 +18187,7 @@ var WeaveStateManager = class {
 				const msg = `Node with key [${node.key}] already exists, cannot add it`;
 				this.logger.warn({
 					node,
-					parentId,
-					doRender
+					parentId
 				}, msg);
 				return;
 			}
@@ -18091,8 +18196,7 @@ var WeaveStateManager = class {
 				const msg = `Parent container with key [${node.key}] doesn't exists, cannot add it`;
 				this.logger.warn({
 					node,
-					parentId,
-					doRender
+					parentId
 				}, msg);
 				return;
 			}
@@ -18122,28 +18226,21 @@ var WeaveStateManager = class {
 				parent.props.children.push(finalNode);
 			}
 			this.instance.emitEvent("onNodeAdded", node);
-			if (doRender) this.instance.render();
 		}, userName);
 	}
-	updateNode(node, doRender = true) {
+	updateNode(node) {
 		const userName = this.instance.getStore().getUser().name;
 		this.instance.getStore().getDocument().transact(() => {
 			const state = this.instance.getStore().getState();
 			if ((0, import_lodash.isEmpty)(state.weave)) {
 				const msg = `State is empty, cannot update the node`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			const { node: nodeState } = this.findNodeById(state.weave, node.key);
 			if (!nodeState) {
 				const msg = `Node with key [${node.key}] doesn't exists, cannot update it`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			const nodeNew = JSON.parse(JSON.stringify({
@@ -18152,28 +18249,21 @@ var WeaveStateManager = class {
 			}));
 			nodeState.props = { ...nodeNew };
 			this.instance.emitEvent("onNodeUpdated", node);
-			if (doRender) this.instance.render();
 		}, userName);
 	}
-	removeNode(node, doRender = true) {
+	removeNode(node) {
 		const userName = this.instance.getStore().getUser().name;
 		this.instance.getStore().getDocument().transact(() => {
 			const state = this.instance.getStore().getState();
 			if ((0, import_lodash.isEmpty)(state.weave)) {
 				const msg = `State is empty, cannot update the node`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			const { node: nodeState, parent: parentState } = this.findNodeById(state.weave, node.key);
 			if (!nodeState) {
 				const msg = `Node with key [${node.key}] doesn't exists, cannot remove it`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			if (parentState) {
@@ -18182,32 +18272,24 @@ var WeaveStateManager = class {
 				parentState.props.children = filteredChildren;
 			}
 			this.instance.emitEvent("onNodeRemoved", node);
-			if (doRender) this.instance.render();
 		}, userName);
 	}
-	removeNodes(nodes, doRender = true) {
-		for (const node of nodes) this.removeNode(node, false);
-		if (doRender) this.instance.render();
+	removeNodes(nodes) {
+		for (const node of nodes) this.removeNode(node);
 	}
-	moveNode(node, position, doRender = true) {
+	moveNode(node, position) {
 		const userName = this.instance.getStore().getUser().name;
 		this.instance.getStore().getDocument().transact(() => {
 			const state = this.instance.getStore().getState();
 			if ((0, import_lodash.isEmpty)(state.weave)) {
 				const msg = `State is empty, cannot update the node`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			const { node: nodeState, parent: nodeParent } = this.findNodeById(state.weave, node.key);
 			if (!nodeState) {
 				const msg = `Node with key [${node.key}] doesn't exists, cannot update it`;
-				this.logger.warn({
-					node,
-					doRender
-				}, msg);
+				this.logger.warn({ node }, msg);
 				return;
 			}
 			if (nodeParent) {
@@ -18231,7 +18313,6 @@ var WeaveStateManager = class {
 				});
 				if (!nodeParent.props.children) nodeParent.props.children = [];
 				nodeParent.props.children = nodeParentNewChildren;
-				if (doRender) this.instance.render();
 			}
 		}, userName);
 	}
@@ -18317,7 +18398,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.36.0";
+var version = "0.38.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18859,31 +18940,27 @@ var Weave = class {
 	getNode(nodeKey) {
 		return this.stateManager.getNode(nodeKey);
 	}
-	addNode(node, parentId = "mainLayer", index = void 0, doRender = true) {
-		this.stateManager.addNode(node, parentId, index, doRender);
+	addNode(node, parentId = "mainLayer", index = void 0) {
+		this.stateManager.addNode(node, parentId, index);
 	}
-	updateNode(node, doRender = true) {
-		this.stateManager.updateNode(node, doRender);
+	updateNode(node) {
+		this.stateManager.updateNode(node);
 	}
-	updateNodes(nodes, doRender = true) {
-		for (const node of nodes) this.updateNode(node, false);
-		const selectionPlugin = this.getPlugin("nodesSelection");
-		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
-		if (doRender) this.render();
+	updateNodes(nodes) {
+		for (const node of nodes) this.updateNode(node);
 	}
-	removeNode(node, doRender = true) {
-		this.stateManager.removeNode(node, doRender);
+	removeNode(node) {
+		this.stateManager.removeNode(node);
 		const selectionPlugin = this.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 	}
-	removeNodes(nodes, doRender = true) {
-		for (const node of nodes) this.removeNode(node, false);
+	removeNodes(nodes) {
+		for (const node of nodes) this.removeNode(node);
 		const selectionPlugin = this.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
-		if (doRender) this.render();
 	}
-	moveNode(node, position, doRender = true) {
-		this.stateManager.moveNode(node, position, doRender);
+	moveNode(node, position) {
+		this.stateManager.moveNode(node, position);
 	}
 	getElementsTree() {
 		return this.stateManager.getElementsTree();
@@ -18897,11 +18974,11 @@ var Weave = class {
 	moveDown(node) {
 		this.zIndexManager.moveDown(node);
 	}
-	sendToBack(node) {
-		this.zIndexManager.sendToBack(node);
+	sendToBack(nodes) {
+		this.zIndexManager.sendToBack(nodes);
 	}
-	bringToFront(node) {
-		this.zIndexManager.bringToFront(node);
+	bringToFront(nodes) {
+		this.zIndexManager.bringToFront(nodes);
 	}
 	group(nodes) {
 		this.groupsManager.group(nodes);
@@ -19660,7 +19737,7 @@ var WeaveTextNode = class extends WeaveNode {
 		}
 		const measures = textNode.measureSize(textNode.text());
 		const px = 0 * stage.scaleX();
-		const py = 2 * (measures.fontBoundingBoxAscent - measures.hangingBaseline - measures.fontBoundingBoxDescent) * stage.scaleY();
+		const py = measures.actualBoundingBoxDescent * stage.scaleY();
 		let transform = "";
 		transform += "translateX(" + px + "px)";
 		transform += "translateY(" + py + "px)";
@@ -20612,7 +20689,6 @@ var WeaveImageNode = class extends WeaveNode {
 		const imageProps = params;
 		const imagePlaceholder = image.findOne(`#${imageProps.id}-placeholder`);
 		const internalImage = image.findOne(`#${imageProps.id}-image`);
-		console.log("crossOrigin", this.config.crossOrigin);
 		const imageObj = new Image();
 		imageObj.crossOrigin = this.config.crossOrigin;
 		imageObj.onerror = (error) => {
@@ -21047,7 +21123,28 @@ var WeaveFrameNode = class extends WeaveNode {
 			width: props.frameWidth,
 			height: props.frameHeight,
 			fill: "transparent",
-			draggable: false
+			draggable: true
+		});
+		selectorArea.on("dragmove", () => {
+			if (this.isSelecting() && this.isNodeSelected(selectorArea)) {
+				clearContainerTargets(this.instance);
+				frame.setAbsolutePosition(selectorArea.getAbsolutePosition());
+				selectorArea.setAttrs({
+					x: 0,
+					y: 0
+				});
+			}
+		});
+		selectorArea.on("dragend", () => {
+			if (this.isSelecting() && this.isNodeSelected(selectorArea)) {
+				clearContainerTargets(this.instance);
+				frame.setAbsolutePosition(selectorArea.getAbsolutePosition());
+				selectorArea.setAttrs({
+					x: 0,
+					y: 0
+				});
+				this.instance.updateNode(this.serialize(selectorArea));
+			}
 		});
 		selectorArea.getTransformerProperties = () => {
 			return this.config.transform;
@@ -21058,7 +21155,6 @@ var WeaveFrameNode = class extends WeaveNode {
 				x: 0,
 				y: 0
 			});
-			this.instance.updateNode(this.serialize(selectorArea));
 		};
 		const updateFrame = (e) => {
 			const selectorArea$1 = e.target;
@@ -21129,17 +21225,18 @@ var WeaveFrameNode = class extends WeaveNode {
 			width: props.frameWidth - borderWidth * 2,
 			height: props.frameHeight - borderWidth * 2,
 			strokeScaleEnabled: true,
+			clipFunc: (ctx) => {
+				const width = (frameInternal.width() + borderWidth) * frameInternal.scaleX();
+				const height = (frameInternal.height() + borderWidth) * frameInternal.scaleY();
+				ctx.rect(-(borderWidth / 2) * frameInternal.scaleX(), -(borderWidth / 2) * frameInternal.scaleY(), width, height);
+			},
 			draggable: false
 		});
-		frameInternal.clipFunc((ctx) => {
-			const width = (frameInternal.width() + borderWidth) * frameInternal.scaleX();
-			const height = (frameInternal.height() + borderWidth) * frameInternal.scaleY();
-			ctx.rect(-(borderWidth / 2) * frameInternal.scaleX(), -(borderWidth / 2) * frameInternal.scaleY(), width, height);
-		});
 		frameInternalGroup.add(frameInternal);
 		this.setupDefaultNodeEvents(frame);
-		frame.on("dragmove", () => {});
-		frame.on("dragend", () => {});
+		frame.off("dragstart");
+		frame.off("dragmove");
+		frame.off("dragend");
 		frame.on(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, () => {
 			background.setAttrs({
 				stroke: onTargetLeaveBorderColor,
@@ -21247,10 +21344,125 @@ var WeaveFrameNode = class extends WeaveNode {
 	}
 };
 
+//#endregion
+//#region src/nodes/stroke/constants.ts
+const WEAVE_STROKE_NODE_TYPE = "stroke";
+
+//#endregion
+//#region src/nodes/stroke/stroke.ts
+var WeaveStrokeNode = class extends WeaveNode {
+	nodeType = WEAVE_STROKE_NODE_TYPE;
+	constructor(params) {
+		super();
+		const { config } = params ?? {};
+		this.config = { transform: {
+			...__inditextech_weave_types.WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+			...config?.transform
+		} };
+	}
+	drawStroke(strokeElements, context, shape) {
+		context.strokeStyle = shape.getAttrs().stroke ?? "black";
+		context.lineCap = "round";
+		context.lineJoin = "round";
+		const l = strokeElements.length - 1;
+		if (strokeElements.length >= 3) {
+			const xc = (strokeElements[l].x + strokeElements[l - 1].x) / 2;
+			const yc = (strokeElements[l].y + strokeElements[l - 1].y) / 2;
+			context.lineWidth = strokeElements[l - 1].lineWidth;
+			context.quadraticCurveTo(strokeElements[l - 1].x, strokeElements[l - 1].y, xc, yc);
+			context.stroke();
+			context.beginPath();
+			context.moveTo(xc, yc);
+		} else {
+			const point = strokeElements[l];
+			context.lineWidth = point.lineWidth;
+			context.beginPath();
+			context.moveTo(point.x, point.y);
+			context.stroke();
+		}
+	}
+	onRender(props) {
+		const stroke = new konva.default.Shape({
+			...props,
+			name: "node",
+			sceneFunc: (context, shape) => {
+				context.beginPath();
+				const strokeElements = shape.getAttrs().strokeElements;
+				const strokePath = [];
+				strokeElements.forEach((point) => {
+					strokePath.push(point);
+					this.drawStroke(strokePath, context, shape);
+				});
+			},
+			hitFunc: (context, shape) => {
+				context.beginPath();
+				context.rect(0, 0, shape.width(), shape.height());
+				context.closePath();
+				context.fillStrokeShape(shape);
+			}
+		});
+		this.setupDefaultNodeAugmentation(stroke);
+		stroke.getTransformerProperties = () => {
+			return this.config.transform;
+		};
+		this.setupDefaultNodeEvents(stroke);
+		return stroke;
+	}
+	onUpdate(nodeInstance, nextProps) {
+		nodeInstance.setAttrs({ ...nextProps });
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
+	}
+	scaleReset(node) {
+		const strokeNode = node;
+		const oldPoints = [...strokeNode.getAttrs().strokeElements];
+		const newPoints = [];
+		for (const actPoint of oldPoints) {
+			const point = {
+				...actPoint,
+				x: actPoint.x * strokeNode.scaleX(),
+				y: actPoint.y * strokeNode.scaleY()
+			};
+			newPoints.push(point);
+		}
+		strokeNode.setAttrs({ strokeElements: newPoints });
+		node.width(Math.max(5, node.width() * node.scaleX()));
+		node.height(Math.max(5, node.height() * node.scaleY()));
+		node.scaleX(1);
+		node.scaleY(1);
+	}
+	serialize(instance) {
+		const attrs = instance.getAttrs();
+		const cleanedAttrs = { ...attrs };
+		delete cleanedAttrs.draggable;
+		delete cleanedAttrs.sceneFunc;
+		delete cleanedAttrs.hitFunc;
+		return {
+			key: attrs.id ?? "",
+			type: attrs.nodeType,
+			props: {
+				...cleanedAttrs,
+				id: attrs.id ?? "",
+				nodeType: attrs.nodeType,
+				children: []
+			}
+		};
+	}
+};
+
 //#endregion
 //#region src/plugins/stage-zoom/constants.ts
+const WEAVE_STAGE_ZOOM_TYPE = {
+	MOUSE_WHEEL: "mouseWheel",
+	PINCH_ZOOM: "pinchZoom"
+};
 const WEAVE_STAGE_ZOOM_KEY = "stageZoom";
 const WEAVE_STAGE_ZOOM_DEFAULT_CONFIG = {
+	zoomInertia: {
+		friction: .9,
+		mouseWheelStep: .01,
+		trackpadStep: .005
+	},
 	zoomSteps: [
 		.01,
 		.05,
@@ -22954,15 +23166,23 @@ var import_hammer = __toESM(require_hammer(), 1);
 var WeaveStageZoomPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	initLayer = void 0;
+	zooming = false;
+	isTrackpad = false;
+	zoomVelocity = 0;
+	zoomInertiaType = WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL;
+	initialScale = 0;
+	lastTime = 0;
+	center = {
+		x: 0,
+		y: 0
+	};
 	defaultStep = 3;
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
-		this.config = {
-			...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.isTrackpad = false;
 		this.isCtrlOrMetaPressed = false;
 		this.updatedMinimumZoom = false;
 		this.actualStep = this.config.zoomSteps.findIndex((step) => step === this.config.defaultZoom);
@@ -23215,38 +23435,68 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			threshold: 0,
 			pointers: 2
 		}));
-		let initialScale = null;
-		let center = {
-			x: 0,
-			y: 0
-		};
-		sc.on("pinchstart", (ev) => {
-			initialScale = stage.scaleX();
-			center = {
-				x: ev.center.x,
-				y: ev.center.y
+		sc.on("pinchstart", (e) => {
+			this.initialScale = this.instance.getStage().scaleX();
+			this.center = {
+				x: e.center.x,
+				y: e.center.y
 			};
+			this.lastTime = performance.now();
 		});
-		sc.on("pinchmove", (ev) => {
-			if (!initialScale) return;
-			const newScale = initialScale * ev.scale;
-			this.setZoom(newScale, false, center);
+		sc.on("pinchmove", (e) => {
+			const now = performance.now();
+			const newScale = Math.max(this.config.zoomSteps[0], Math.min(this.config.zoomSteps[this.config.zoomSteps.length - 1], this.initialScale * e.scale));
+			this.setZoom(newScale, false, this.center);
+			const dt = now - this.lastTime;
+			this.zoomVelocity = (newScale - 1) / (dt * 16.6);
+			this.lastTime = now;
+		});
+		sc.on("pinchend", () => {
+			this.zooming = true;
+			this.zoomInertiaType = WEAVE_STAGE_ZOOM_TYPE.PINCH_ZOOM;
+			requestAnimationFrame(this.zoomTick.bind(this));
 		});
 		const handleWheel = (e) => {
 			e.evt.preventDefault();
 			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;
-			const oldScale = stage$1.scaleX();
-			const pointer = stage$1.getPointerPosition();
-			if (!pointer) return;
-			const scaleBy = 1.025;
-			const direction = e.evt.deltaY > 0 ? 1 : -1;
-			const newScale = direction > 0 ? oldScale / scaleBy : oldScale * scaleBy;
-			this.setZoom(newScale, false, pointer);
+			const delta = e.evt.deltaY > 0 ? 1 : -1;
+			this.zoomVelocity += delta;
+			this.isTrackpad = Math.abs(e.evt.deltaY) < 15 && e.evt.deltaMode === 0;
+			if (!this.zooming) {
+				this.zooming = true;
+				this.zoomInertiaType = WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL;
+				requestAnimationFrame(this.zoomTick.bind(this));
+			}
 		};
 		stage.on("wheel", handleWheel);
 	}
+	getInertiaScale() {
+		const stage = this.instance.getStage();
+		let step = 1;
+		if (this.zoomInertiaType === WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL && !this.isTrackpad) step = this.config.zoomInertia.mouseWheelStep;
+		if (this.zoomInertiaType === WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL && this.isTrackpad) step = this.config.zoomInertia.trackpadStep;
+		const oldScale = stage.scaleX();
+		let newScale = oldScale * (1 - this.zoomVelocity * step);
+		newScale = Math.max(this.config.zoomSteps[0], Math.min(this.config.zoomSteps[this.config.zoomSteps.length - 1], newScale));
+		return newScale;
+	}
+	zoomTick() {
+		if (Math.abs(this.zoomVelocity) < .001) {
+			this.zooming = false;
+			return;
+		}
+		let pointer = this.center;
+		if (this.zoomInertiaType === WEAVE_STAGE_ZOOM_TYPE.MOUSE_WHEEL) {
+			const stage = this.instance.getStage();
+			pointer = stage.getPointerPosition();
+		}
+		if (!pointer) return;
+		this.setZoom(this.getInertiaScale(), false, pointer);
+		this.zoomVelocity *= this.config.zoomInertia.friction;
+		requestAnimationFrame(this.zoomTick.bind(this));
+	}
 };
 
 //#endregion
@@ -23571,7 +23821,10 @@ var WeaveEraserToolAction = class extends WeaveAction {
 		stage.container().focus();
 		this.cancelAction = cancelAction;
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (selectionPlugin) selectionPlugin.disable();
+		if (selectionPlugin) {
+			selectionPlugin.setSelectedNodes([]);
+			selectionPlugin.disable();
+		}
 		this.setEraser();
 	}
 	cleanup() {
@@ -23639,19 +23892,23 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdown", () => {
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
 			if (this.state === RECTANGLE_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("pointermove", () => {
+		stage.on("pointermove", (e) => {
+			if (!this.isPressed(e)) return;
 			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("pointerup", () => {
+		stage.on("pointerup", (e) => {
+			const isTap = this.isTap(e);
+			if (isTap) this.moved = false;
 			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -23814,19 +24071,23 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdown", () => {
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
 			if (this.state === ELLIPSE_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("pointermove", () => {
+		stage.on("pointermove", (e) => {
+			if (!this.isPressed(e)) return;
 			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("pointerup", () => {
+		stage.on("pointerup", (e) => {
+			const isTap = this.isTap(e);
+			if (isTap) this.moved = false;
 			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -24196,11 +24457,13 @@ const BRUSH_TOOL_STATE = {
 //#region src/actions/brush-tool/brush-tool.ts
 var WeaveBrushToolAction = class extends WeaveAction {
 	initialized = false;
+	lineWidth = 0;
 	onPropsChange = void 0;
 	onInit = void 0;
 	constructor() {
 		super();
 		this.initialized = false;
+		this.lineWidth = 0;
 		this.state = BRUSH_TOOL_STATE.INACTIVE;
 		this.strokeId = null;
 		this.clickPoint = null;
@@ -24218,6 +24481,11 @@ var WeaveBrushToolAction = class extends WeaveAction {
 			opacity: 1
 		};
 	}
+	getPointPressure(e) {
+		let pressure = 1;
+		if (e.evt instanceof PointerEvent && e.evt.pointerType === "pen") pressure = e.evt.pressure;
+		return pressure;
+	}
 	setupEvents() {
 		const stage = this.instance.getStage();
 		stage.container().tabIndex = 1;
@@ -24232,75 +24500,132 @@ var WeaveBrushToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdown", (e) => {
+		const handlePointerDown = (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.IDLE) return;
+			const pointPressure = this.getPointPressure(e);
+			this.lineWidth = Math.log(pointPressure + 1) * this.props.strokeWidth;
 			this.handleStartStroke();
 			e.evt.stopPropagation();
-		});
-		stage.on("pointermove", (e) => {
+		};
+		stage.on("pointerdown touchstart", handlePointerDown);
+		const handlePointerMove = (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
+			const pointPressure = this.getPointPressure(e);
+			this.lineWidth = Math.log(pointPressure + 1) * this.props.strokeWidth * .2 + this.lineWidth * .8;
 			this.handleMovement();
 			e.evt.stopPropagation();
-		});
-		stage.on("pointerup", (e) => {
+		};
+		stage.on("pointermove touchmove", handlePointerMove);
+		const handlePointerUp = (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
 			this.handleEndStroke();
 			e.evt.stopPropagation();
-		});
+		};
+		stage.on("pointerup touchend", handlePointerUp);
 		this.initialized = true;
 	}
 	setState(state) {
 		this.state = state;
 	}
+	getBoundingBox(strokeElements) {
+		if (strokeElements.length === 0) return {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		};
+		let minX = strokeElements[0].x;
+		let maxX = strokeElements[0].x;
+		let minY = strokeElements[0].y;
+		let maxY = strokeElements[0].y;
+		strokeElements.forEach((point) => {
+			minX = Math.min(minX, point.x);
+			maxX = Math.max(maxX, point.x);
+			minY = Math.min(minY, point.y);
+			maxY = Math.max(maxY, point.y);
+		});
+		return {
+			x: minX,
+			y: minY,
+			width: maxX - minX,
+			height: maxY - minY
+		};
+	}
 	handleStartStroke() {
 		const { mousePoint, container, measureContainer } = this.instance.getMousePointer();
 		this.clickPoint = mousePoint;
 		this.container = container;
 		this.measureContainer = measureContainer;
 		this.strokeId = v4_default();
-		const nodeHandler = this.instance.getNodeHandler("line");
+		const nodeHandler = this.instance.getNodeHandler("stroke");
 		if (nodeHandler) {
 			const node = nodeHandler.create(this.strokeId, {
 				...this.props,
 				strokeScaleEnabled: true,
-				x: this.clickPoint?.x ?? 0,
-				y: this.clickPoint?.y ?? 0,
-				points: [0, 0]
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0,
+				strokeElements: []
 			});
-			this.instance.addNode(node, this.container?.getAttrs().id);
+			const nodeInstance = nodeHandler.onRender(node.props);
+			this.container?.add(nodeInstance);
 		}
 		this.setState(BRUSH_TOOL_STATE.DEFINE_STROKE);
 	}
+	handleMovement() {
+		if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
+		const tempStroke = this.instance.getStage().findOne(`#${this.strokeId}`);
+		if (this.measureContainer && tempStroke) {
+			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
+			const newStrokeElements = [...tempStroke.getAttrs().strokeElements];
+			newStrokeElements.push({
+				x: mousePoint.x - tempStroke.x(),
+				y: mousePoint.y - tempStroke.y(),
+				lineWidth: this.lineWidth
+			});
+			const box = this.getBoundingBox(newStrokeElements);
+			tempStroke.setAttrs({
+				width: box.width,
+				height: box.height,
+				x: 0,
+				y: 0,
+				strokeElements: newStrokeElements
+			});
+			const nodeHandler = this.instance.getNodeHandler("stroke");
+			if (nodeHandler) nodeHandler.onUpdate(tempStroke, tempStroke.getAttrs());
+		}
+	}
 	handleEndStroke() {
 		const stage = this.instance.getStage();
 		const tempStroke = this.instance.getStage().findOne(`#${this.strokeId}`);
 		if (tempStroke) {
-			const nodeHandler = this.instance.getNodeHandler("line");
-			tempStroke.setAttrs({
-				...this.props,
-				hitStrokeWidth: 10
-			});
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempStroke));
+			const nodeHandler = this.instance.getNodeHandler("stroke");
+			if (nodeHandler) {
+				const box = this.getBoundingBox(tempStroke.getAttrs().strokeElements);
+				let newStrokeElements = [...tempStroke.getAttrs().strokeElements];
+				newStrokeElements = newStrokeElements.map((point) => ({
+					...point,
+					x: point.x - box.x,
+					y: point.y - box.y
+				}));
+				tempStroke.setAttrs({
+					width: box.width,
+					height: box.height,
+					x: box.x,
+					y: box.y,
+					strokeElements: newStrokeElements
+				});
+				const realNode = this.instance.getStage().findOne(`#${tempStroke.getAttrs().id}`);
+				if (realNode) realNode.destroy();
+				this.instance.addNode(nodeHandler.serialize(tempStroke), this.container?.getAttrs().id);
+			}
 			this.clickPoint = null;
 			stage.container().tabIndex = 1;
 			stage.container().focus();
 			this.setState(BRUSH_TOOL_STATE.IDLE);
 		}
 	}
-	handleMovement() {
-		if (this.state !== BRUSH_TOOL_STATE.DEFINE_STROKE) return;
-		const tempStroke = this.instance.getStage().findOne(`#${this.strokeId}`);
-		if (this.measureContainer && tempStroke) {
-			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
-			tempStroke.points([
-				...tempStroke.points(),
-				mousePoint.x - tempStroke.x(),
-				mousePoint.y - tempStroke.y()
-			]);
-			const nodeHandler = this.instance.getNodeHandler("line");
-			if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(tempStroke));
-		}
-	}
 	trigger(cancel) {
 		if (!this.instance) throw new Error("Instance not defined");
 		if (!this.initialized) this.setupEvents();
@@ -24494,19 +24819,23 @@ var WeaveStarToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdown", () => {
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
 			if (this.state === STAR_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("pointermove", () => {
+		stage.on("pointermove", (e) => {
+			if (!this.isPressed(e)) return;
 			if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("pointerup", () => {
+		stage.on("pointerup", (e) => {
+			const isTap = this.isTap(e);
+			if (isTap) this.moved = false;
 			if (this.state === STAR_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -24932,19 +25261,23 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 				return;
 			}
 		});
-		stage.on("pointerdown", () => {
+		stage.on("pointerdown", (e) => {
+			this.setTapStart(e);
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.ADDING) {
 				this.creating = true;
 				this.handleAdding();
 			}
 		});
-		stage.on("pointermove", () => {
+		stage.on("pointermove", (e) => {
+			if (!this.isPressed(e)) return;
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
 				this.handleMovement();
 			}
 		});
-		stage.on("pointerup", () => {
+		stage.on("pointerup", (e) => {
+			const isTap = this.isTap(e);
+			if (isTap) this.moved = false;
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
 				this.handleSettingSize();
@@ -26361,6 +26694,7 @@ var WeaveStageDropAreaPlugin = class extends WeavePlugin {
 	initEvents() {
 		const stage = this.instance.getStage();
 		stage.container().addEventListener("dragover", (e) => {
+			e.preventDefault();
 			e.stopPropagation();
 		});
 		stage.container().addEventListener("drop", (e) => {
@@ -26809,6 +27143,7 @@ exports.WEAVE_REGULAR_POLYGON_NODE_TYPE = WEAVE_REGULAR_POLYGON_NODE_TYPE
 exports.WEAVE_STAGE_GRID_KEY = WEAVE_STAGE_GRID_KEY
 exports.WEAVE_STAGE_NODE_TYPE = WEAVE_STAGE_NODE_TYPE
 exports.WEAVE_STAR_NODE_TYPE = WEAVE_STAR_NODE_TYPE
+exports.WEAVE_STROKE_NODE_TYPE = WEAVE_STROKE_NODE_TYPE
 exports.WEAVE_TEXT_NODE_TYPE = WEAVE_TEXT_NODE_TYPE
 exports.WEAVE_USERS_POINTERS_KEY = WEAVE_USERS_POINTERS_KEY
 exports.WEAVE_USERS_SELECTION_KEY = WEAVE_USERS_SELECTION_KEY
@@ -26858,6 +27193,7 @@ exports.WeaveStageZoomPlugin = WeaveStageZoomPlugin
 exports.WeaveStarNode = WeaveStarNode
 exports.WeaveStarToolAction = WeaveStarToolAction
 exports.WeaveStore = WeaveStore
+exports.WeaveStrokeNode = WeaveStrokeNode
 exports.WeaveTextNode = WeaveTextNode
 exports.WeaveTextToolAction = WeaveTextToolAction
 exports.WeaveUsersPointersPlugin = WeaveUsersPointersPlugin