@inditextech/weave-sdk 2.3.2 → 2.4.0

package/dist/sdk.js

@@ -17806,6 +17806,10 @@ function getTargetAndSkipNodes(instance, e, forceTransformer = false) {
 	if (e.type === "dragmove" && nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length === 1) {
 		node = nodesSelectionPlugin.getTransformer().nodes()[0];
 		skipNodes.push(node.getAttrs().id ?? "");
+		if (node.getAttr("eventTarget")) {
+			node = e.target;
+			skipNodes.push(e.target.getAttrs().id ?? "");
+		}
 	}
 	if (e.type === "dragmove" && nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length > 1) {
 		const { nodes } = getSelectedNodesMetadata(nodesSelectionPlugin.getTransformer());
@@ -18704,27 +18708,27 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (shape) {
 				const targetNode = this.instance.getInstanceRecursive(shape);
 				if (targetNode && targetNode !== nodeHovered) {
-					this.instance.getStage().handleMouseover();
-					nodeHovered?.handleMouseout();
-					targetNode?.handleMouseover();
+					this.instance.getStage().handleMouseover?.();
+					nodeHovered?.handleMouseout?.();
+					targetNode?.handleMouseover?.();
 					nodeHovered = targetNode;
 				}
-				targetNode?.handleMouseover();
-			} else nodeHovered?.handleMouseout();
+				targetNode?.handleMouseover?.();
+			} else nodeHovered?.handleMouseout?.();
 		});
 		tr.on("mouseover", () => {
 			stage.container().style.cursor = "grab";
 		});
 		tr.on("mouseout", () => {
-			this.instance.getStage().handleMouseover();
+			this.instance.getStage().handleMouseover?.();
 			nodeHovered = void 0;
 		});
 		window.addEventListener("mouseout", () => {
 			if (nodeHovered) {
-				nodeHovered.handleMouseout();
+				nodeHovered?.handleMouseout?.();
 				nodeHovered = void 0;
 			}
-			this.instance.getStage().handleMouseover();
+			this.instance.getStage().handleMouseover?.();
 		});
 		const handleTransform = (e) => {
 			const moved = this.checkMoved(e);
@@ -19047,7 +19051,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		if (!this.tapStart) return false;
 		const dx = actual.x - init.x;
 		const dy = actual.y - init.y;
-		const dist = Math.sqrt(dx * dx + dy * dy);
+		const dist = Math.hypot(dx, dy);
 		const MOVED_DISTANCE = 5;
 		if (dist <= MOVED_DISTANCE) return false;
 		return true;
@@ -19056,7 +19060,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		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 dist = Math.hypot(dx, dy);
 		const MOVED_DISTANCE = 5;
 		if (dist <= MOVED_DISTANCE) return false;
 		return true;
@@ -19066,7 +19070,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		const now$2 = performance.now();
 		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 dist = Math.hypot(dx, dy);
 		const DOUBLE_TAP_DISTANCE = 10;
 		const DOUBLE_TAP_TIME = 300;
 		this.isDoubleTap = false;
@@ -20049,6 +20053,7 @@ var WeaveNode = class {
 			node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
 			node.on("transformend", (e) => {
 				const node$1 = e.target;
+				e.target.setAttr("strokeScaleEnabled", true);
 				this.instance.emitEvent("onTransform", null);
 				transforming = false;
 				const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -20095,7 +20100,7 @@ var WeaveNode = class {
 				}
 				const realNodeTarget = this.getRealSelectedNode(nodeTarget);
 				if (realNodeTarget.getAttrs().isCloned) return;
-				if (this.getNodesSelectionPlugin()?.getSelectedNodes().length === 1) {
+				if (this.getNodesSelectionPlugin()?.getSelectedNodes().length === 1 && realNodeTarget.getAttr("dragStartOpacity") === void 0) {
 					realNodeTarget.setAttr("dragStartOpacity", realNodeTarget.opacity());
 					realNodeTarget.opacity(this.getNodesSelectionPlugin()?.getDragOpacity());
 				}
@@ -20168,7 +20173,7 @@ var WeaveNode = class {
 				}
 				this.instance.emitEvent("onDrag", null);
 				const realNodeTarget = this.getRealSelectedNode(nodeTarget);
-				if (this.getNodesSelectionPlugin()?.getSelectedNodes().length === 1) {
+				if (this.getNodesSelectionPlugin()?.getSelectedNodes().length === 1 && realNodeTarget.getAttr("dragStartOpacity") !== void 0) {
 					const originalNodeOpacity = realNodeTarget.getAttr("dragStartOpacity") ?? 1;
 					realNodeTarget.setAttrs({ opacity: originalNodeOpacity });
 					realNodeTarget.setAttr("dragStartOpacity", void 0);
@@ -20453,7 +20458,7 @@ var WeaveAction = class {
 		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 dist = Math.hypot(dx, dy);
 		const dt = performance.now() - this.tapStart.time;
 		const TAP_DISTANCE = 10;
 		const TAP_TIME = 300;
@@ -21137,15 +21142,75 @@ var WeaveEllipseNode = class extends WeaveNode {
 //#endregion
 //#region src/nodes/line/constants.ts
 const WEAVE_LINE_NODE_TYPE = "line";
+const WEAVE_LINE_NODE_DEFAULT_CONFIG = { snapAngles: {
+	angles: [
+		0,
+		45,
+		90,
+		135,
+		180,
+		225,
+		270,
+		315
+	],
+	activateThreshold: 5,
+	releaseThreshold: 10
+} };
+
+//#endregion
+//#region src/utils/greedy-snapper.ts
+var GreedySnapper = class {
+	snappedAngle = null;
+	constructor(config) {
+		this.config = config;
+	}
+	reset() {
+		this.snappedAngle = null;
+	}
+	apply(angleDeg) {
+		const { snapAngles, activateThreshold, releaseThreshold } = this.config;
+		const normalized = (angleDeg % 360 + 360) % 360;
+		if (this.snappedAngle !== null) {
+			const diff = Math.abs(normalized - this.snappedAngle);
+			if (diff > releaseThreshold) {
+				this.snappedAngle = null;
+				return normalized;
+			}
+			return this.snappedAngle;
+		}
+		let closest = snapAngles[0];
+		let minDiff = Math.abs(normalized - closest);
+		for (const a of snapAngles) {
+			const d = Math.abs(normalized - a);
+			if (d < minDiff) {
+				minDiff = d;
+				closest = a;
+			}
+		}
+		if (minDiff <= activateThreshold) {
+			this.snappedAngle = closest;
+			return closest;
+		}
+		return normalized;
+	}
+};
 
 //#endregion
 //#region src/nodes/line/line.ts
 var WeaveLineNode = class extends WeaveNode {
+	startHandle = null;
+	endHandle = null;
 	nodeType = WEAVE_LINE_NODE_TYPE;
 	constructor(params) {
 		super();
-		const { config } = params ?? {};
-		this.config = { transform: { ...config?.transform } };
+		this.config = mergeExceptArrays(WEAVE_LINE_NODE_DEFAULT_CONFIG, params?.config ?? {});
+		this.handleNodeChanges = null;
+		this.handleZoomChanges = null;
+		this.snapper = new GreedySnapper({
+			snapAngles: this.config.snapAngles.angles,
+			activateThreshold: this.config.snapAngles.activateThreshold,
+			releaseThreshold: this.config.snapAngles.releaseThreshold
+		});
 	}
 	onRender(props) {
 		const line = new Konva.Line({
@@ -21156,11 +21221,240 @@ var WeaveLineNode = class extends WeaveNode {
 		this.setupDefaultNodeAugmentation(line);
 		const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
 		line.getTransformerProperties = function() {
-			return defaultTransformerProperties;
+			return {
+				...defaultTransformerProperties,
+				ignoreStroke: true,
+				rotateEnabled: this.points().length !== 4,
+				keepRatio: this.points().length !== 4,
+				flipEnabled: this.points().length === 4,
+				shiftBehavior: this.points().length === 4 ? "none" : "default"
+			};
+		};
+		let originalStartHandleVisibility = null;
+		let originalEndHandleVisibility = null;
+		line.on("dragstart", () => {
+			originalStartHandleVisibility = this.startHandle?.visible() ?? false;
+			originalEndHandleVisibility = this.endHandle?.visible() ?? false;
+			this.startHandle?.visible(false);
+			this.endHandle?.visible(false);
+		});
+		line.on("dragend", () => {
+			this.startHandle?.visible(originalStartHandleVisibility);
+			this.endHandle?.visible(originalEndHandleVisibility);
+			originalStartHandleVisibility = null;
+			originalEndHandleVisibility = null;
+		});
+		line.allowedAnchors = function() {
+			if (this.points().length !== 4) return [
+				"top-left",
+				"top-center",
+				"top-right",
+				"middle-right",
+				"middle-left",
+				"bottom-left",
+				"bottom-center",
+				"bottom-right"
+			];
+			return [];
 		};
 		this.setupDefaultNodeEvents(line);
+		if (!this.handleZoomChanges) {
+			this.handleZoomChanges = () => {
+				if (this.startHandle) this.startHandle.scale({
+					x: 1 / this.instance.getStage().scaleX(),
+					y: 1 / this.instance.getStage().scaleY()
+				});
+				if (this.endHandle) this.endHandle.scale({
+					x: 1 / this.instance.getStage().scaleX(),
+					y: 1 / this.instance.getStage().scaleY()
+				});
+			};
+			this.instance.addEventListener("onZoomChange", this.handleZoomChanges);
+		}
+		if (!this.handleNodeChanges) {
+			this.handleNodeChanges = (nodes) => {
+				if (nodes.length === 1 && nodes[0].instance.getAttrs().nodeType === "line" && nodes[0].instance.points().length === 4) {
+					const lineSelected = this.instance.getStage().findOne(`#${nodes[0].instance.getAttrs().id}`);
+					if (!lineSelected) return;
+					this.setupHandles();
+					this.showHandles(lineSelected);
+				} else {
+					this.startHandle?.setAttr("lineId", void 0);
+					this.startHandle?.visible(false);
+					this.endHandle?.setAttr("lineId", void 0);
+					this.endHandle?.visible(false);
+				}
+			};
+			this.instance.addEventListener("onNodesChange", this.handleNodeChanges);
+		}
 		return line;
 	}
+	defineFinalPoint(handle, origin, e) {
+		let pos = {
+			x: 0,
+			y: 0
+		};
+		if (e.evt.shiftKey) {
+			const handlePosition = handle.position();
+			let dx = handlePosition.x - origin.x;
+			let dy = handlePosition.y - origin.y;
+			const angle = Math.atan2(dy, dx);
+			const angleDeg = angle * 180 / Math.PI;
+			const snapped = this.snapper.apply(angleDeg);
+			const dist = Math.hypot(dx, dy);
+			const rad = snapped * Math.PI / 180;
+			dx = Math.cos(rad) * dist;
+			dy = Math.sin(rad) * dist;
+			pos.x = origin.x + dx;
+			pos.y = origin.y + dy;
+		} else pos = handle.position();
+		return pos;
+	}
+	setupHandles() {
+		if (!this.startHandle) {
+			const startHandle = new Konva.Circle({
+				id: "line-start-handle",
+				radius: 5,
+				fill: "#ffffff",
+				stroke: "#000000",
+				strokeWidth: 1,
+				edgeDistanceDisableOnDrag: true,
+				scaleX: 1 / this.instance.getStage().scaleX(),
+				scaleY: 1 / this.instance.getStage().scaleY(),
+				draggable: true
+			});
+			startHandle.on("pointerover", () => {
+				this.instance.getStage().container().style.cursor = "move";
+			});
+			startHandle.on("pointerout", () => {
+				this.instance.getStage().container().style.cursor = "default";
+			});
+			startHandle.on("dragstart", (e) => {
+				const lineId = e.target.getAttr("lineId");
+				const line = this.instance.getStage().findOne(`#${lineId}`);
+				if (!line) return;
+				if (line.points().length === 4) line.setAttr("eventTarget", true);
+				this.instance.emitEvent("onDrag", e.target);
+			});
+			startHandle.on("dragmove", (e) => {
+				const draggedTarget = e.target;
+				const lineId = draggedTarget.getAttr("lineId");
+				const draggedLine = this.instance.getStage().findOne(`#${lineId}`);
+				if (!draggedLine) return;
+				const pos = this.defineFinalPoint(startHandle, {
+					x: draggedLine.x() + draggedLine.points()[2],
+					y: draggedLine.y() + draggedLine.points()[3]
+				}, e);
+				const [, , x2, y2] = draggedLine.points();
+				startHandle.position(pos);
+				draggedLine.points([
+					pos.x - draggedLine.x(),
+					pos.y - draggedLine.y(),
+					x2,
+					y2
+				]);
+			});
+			startHandle.on("dragend", (e) => {
+				const draggedTarget = e.target;
+				const lineId = draggedTarget.getAttr("lineId");
+				const draggedLine = this.instance.getStage().findOne(`#${lineId}`);
+				if (!draggedLine) return;
+				const { x, y } = startHandle.position();
+				const [, , x2, y2] = draggedLine.points();
+				draggedLine.points([
+					x - draggedLine.x(),
+					y - draggedLine.y(),
+					x2,
+					y2
+				]);
+				this.instance.updateNode(this.serialize(draggedLine));
+				this.instance.emitEvent("onDrag", null);
+			});
+			this.startHandle = startHandle;
+			this.startHandle.visible(false);
+			this.instance.getSelectionLayer()?.add(this.startHandle);
+		}
+		if (!this.endHandle) {
+			const endHandle = new Konva.Circle({
+				id: "line-end-handle",
+				radius: 5,
+				fill: "#ffffff",
+				stroke: "#000000",
+				strokeWidth: 1,
+				edgeDistanceDisableOnDrag: true,
+				scaleX: 1 / this.instance.getStage().scaleX(),
+				scaleY: 1 / this.instance.getStage().scaleY(),
+				draggable: true
+			});
+			endHandle.on("pointerover", () => {
+				this.instance.getStage().container().style.cursor = "move";
+			});
+			endHandle.on("pointerout", () => {
+				this.instance.getStage().container().style.cursor = "default";
+			});
+			endHandle.on("dragstart", (e) => {
+				const lineId = e.target.getAttr("lineId");
+				const line = this.instance.getStage().findOne(`#${lineId}`);
+				if (!line) return;
+				if (line.points().length === 4) line.setAttr("eventTarget", true);
+				this.instance.emitEvent("onDrag", e.target);
+			});
+			endHandle.on("dragmove", (e) => {
+				const draggedTarget = e.target;
+				const lineId = draggedTarget.getAttr("lineId");
+				const draggedLine = this.instance.getStage().findOne(`#${lineId}`);
+				if (!draggedLine) return;
+				const pos = this.defineFinalPoint(endHandle, {
+					x: draggedLine.x() + draggedLine.points()[0],
+					y: draggedLine.y() + draggedLine.points()[1]
+				}, e);
+				const [x1, y1] = draggedLine.points();
+				endHandle.position(pos);
+				draggedLine.points([
+					x1,
+					y1,
+					pos.x - draggedLine.x(),
+					pos.y - draggedLine.y()
+				]);
+			});
+			endHandle.on("dragend", (e) => {
+				const draggedTarget = e.target;
+				const lineId = draggedTarget.getAttr("lineId");
+				const draggedLine = this.instance.getStage().findOne(`#${lineId}`);
+				if (!draggedLine) return;
+				const { x, y } = endHandle.position();
+				const [x1, y1] = draggedLine.points();
+				draggedLine.points([
+					x1,
+					y1,
+					x - draggedLine.x(),
+					y - draggedLine.y()
+				]);
+				this.instance.updateNode(this.serialize(draggedLine));
+				this.instance.emitEvent("onDrag", null);
+			});
+			this.endHandle = endHandle;
+			this.endHandle.visible(false);
+			this.instance.getSelectionLayer()?.add(this.endHandle);
+		}
+	}
+	showHandles(line) {
+		const [x1, y1, x2, y2] = line.points();
+		if (this.startHandle === null || this.endHandle === null) return;
+		const lineId = line.getAttrs().id;
+		this.startHandle.setAttr("lineId", lineId);
+		this.startHandle.setAttr("targetNode", lineId);
+		this.startHandle.x(line.x() + x1);
+		this.startHandle.y(line.y() + y1);
+		this.startHandle.visible(true);
+		this.startHandle.moveToTop();
+		this.endHandle.setAttr("lineId", lineId);
+		this.endHandle.setAttr("targetNode", lineId);
+		this.endHandle.x(line.x() + x2);
+		this.endHandle.y(line.y() + y2);
+		this.endHandle.visible(true);
+		this.endHandle.moveToTop();
+	}
 	onUpdate(nodeInstance, nextProps) {
 		nodeInstance.setAttrs({ ...nextProps });
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -23125,7 +23419,7 @@ var WeaveStrokeNode = class extends WeaveNode {
 			const p1 = centerline[i + 1];
 			const dx = p1.x - p0.x;
 			const dy = p1.y - p0.y;
-			const segLen = Math.sqrt(dx * dx + dy * dy) || 1;
+			const segLen = Math.hypot(dx, dy) || 1;
 			const nx = -dy / segLen;
 			const ny = dx / segLen;
 			const w0 = baseW * p0.pressure / 2;
@@ -24822,7 +25116,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		this.enabled = false;
 	}
 	getDistance(p1, p2) {
-		return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+		return Math.hypot(p2.x - p1.x, p2.y - p1.y);
 	}
 	getCenter(p1, p2) {
 		return {
@@ -29708,7 +30002,11 @@ var WeaveNodesEdgeSnappingPlugin = class extends WeavePlugin {
 		if (nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length > 1) {
 			if (nodesSelectionPlugin) nodeParent = this.instance.getNodeContainer(nodesSelectionPlugin.getTransformer().nodes()[0]);
 		}
-		if (nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length === 1) nodeParent = this.instance.getNodeContainer(node);
+		if (nodesSelectionPlugin && nodesSelectionPlugin.getTransformer().nodes().length === 1) if (node.getAttrs().targetNode) {
+			const targetNodeId = node.getAttrs().targetNode;
+			const targetNode = this.instance.getStage().findOne(`#${targetNodeId}`);
+			if (targetNode) nodeParent = this.instance.getNodeContainer(targetNode);
+		} else nodeParent = this.instance.getNodeContainer(node);
 		return nodeParent;
 	}
 	cleanupGuidelines() {
@@ -29996,6 +30294,7 @@ var WeaveNodesDistanceSnappingPlugin = class extends WeavePlugin {
 		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
 		if (!utilityLayer) return;
+		if (e.target.getAttr("edgeDistanceDisableOnDrag")) return;
 		const { targetNode: node, skipNodes } = getTargetAndSkipNodes(this.instance, e, true);
 		if (typeof node === "undefined") return;
 		const nodeParent = this.getSelectionParentNode();
@@ -30911,8 +31210,8 @@ var WeaveGroupsManager = class {
 	}
 	extractTransformFromMatrix(m) {
 		const a = m[0], b = m[1], c = m[2], d = m[3], e = m[4], f = m[5];
-		const scaleX = Math.sqrt(a * a + b * b);
-		const scaleY = Math.sqrt(c * c + d * d);
+		const scaleX = Math.hypot(a, b);
+		const scaleY = Math.hypot(c, d);
 		const rotation = Math.atan2(b, a) * (180 / Math.PI);
 		return {
 			x: e,
@@ -31738,7 +32037,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "2.3.2";
+var version = "2.4.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -32788,11 +33087,290 @@ var Weave = class {
 	}
 };
 
+//#endregion
+//#region src/actions/line-tool/constants.ts
+const LINE_TOOL_ACTION_NAME = "lineTool";
+const LINE_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["ADDING"]: "adding",
+	["DEFINING_SIZE"]: "definingSize",
+	["ADDED"]: "added"
+};
+const LINE_TOOL_DEFAULT_CONFIG = { snapAngles: {
+	angles: [
+		0,
+		45,
+		90,
+		135,
+		180,
+		225,
+		270,
+		315
+	],
+	activateThreshold: 5,
+	releaseThreshold: 10
+} };
+
+//#endregion
+//#region src/actions/line-tool/line-tool.ts
+var WeaveLineToolAction = class extends WeaveAction {
+	initialized = false;
+	initialCursor = null;
+	snappedAngle = null;
+	shiftPressed = false;
+	onPropsChange = void 0;
+	onInit = void 0;
+	constructor(params) {
+		super();
+		this.config = mergeExceptArrays(LINE_TOOL_DEFAULT_CONFIG, params?.config ?? {});
+		this.pointers = new Map();
+		this.initialized = false;
+		this.state = LINE_TOOL_STATE.IDLE;
+		this.lineId = null;
+		this.shiftPressed = false;
+		this.tempLineId = null;
+		this.tempMainLineNode = null;
+		this.tempLineNode = null;
+		this.container = void 0;
+		this.snappedAngle = null;
+		this.measureContainer = void 0;
+		this.clickPoint = null;
+		this.snapper = new GreedySnapper({
+			snapAngles: this.config.snapAngles.angles,
+			activateThreshold: this.config.snapAngles.activateThreshold,
+			releaseThreshold: this.config.snapAngles.releaseThreshold
+		});
+		this.props = this.initProps();
+	}
+	getName() {
+		return LINE_TOOL_ACTION_NAME;
+	}
+	initProps() {
+		return {
+			stroke: "#000000ff",
+			strokeWidth: 1,
+			opacity: 1
+		};
+	}
+	setupEvents() {
+		const stage = this.instance.getStage();
+		window.addEventListener("keydown", (e) => {
+			if (e.code === "Enter" && this.instance.getActiveAction() === LINE_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+			if (e.code === "Escape" && this.instance.getActiveAction() === LINE_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+			if (e.key === "Shift" && this.instance.getActiveAction() === LINE_TOOL_ACTION_NAME) {
+				this.snappedAngle = null;
+				this.shiftPressed = true;
+			}
+		});
+		window.addEventListener("keyup", (e) => {
+			if (e.key === "Shift" && this.instance.getActiveAction() === LINE_TOOL_ACTION_NAME) {
+				this.snappedAngle = null;
+				this.shiftPressed = false;
+			}
+		});
+		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() === LINE_TOOL_ACTION_NAME) {
+				this.state = LINE_TOOL_STATE.ADDING;
+				return;
+			}
+			if (!this.tempMainLineNode && this.state === LINE_TOOL_STATE.ADDING) this.handleAdding();
+			if (this.tempMainLineNode && this.state === LINE_TOOL_STATE.ADDING) this.state = LINE_TOOL_STATE.DEFINING_SIZE;
+		});
+		stage.on("pointermove", () => {
+			if (this.state === LINE_TOOL_STATE.IDLE) return;
+			this.setCursor();
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === LINE_TOOL_ACTION_NAME) {
+				this.state = LINE_TOOL_STATE.ADDING;
+				return;
+			}
+			if (this.state === LINE_TOOL_STATE.DEFINING_SIZE) this.handleMovement();
+		});
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (this.state === LINE_TOOL_STATE.DEFINING_SIZE) this.handleSettingSize();
+		});
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	addLine() {
+		this.setCursor();
+		this.setFocusStage();
+		this.instance.emitEvent("onAddingLine");
+		this.shiftPressed = false;
+		this.clickPoint = null;
+		this.setState(LINE_TOOL_STATE.ADDING);
+	}
+	handleAdding() {
+		const { mousePoint, container, measureContainer } = this.instance.getMousePointer();
+		this.clickPoint = mousePoint;
+		this.container = container;
+		this.measureContainer = measureContainer;
+		this.lineId = v4_default();
+		this.tempLineId = v4_default();
+		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.measureContainer?.add(this.tempMainLineNode);
+			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.measureContainer?.add(this.tempLineNode);
+			this.setState(LINE_TOOL_STATE.DEFINING_SIZE);
+		}
+	}
+	defineFinalPoint() {
+		if (!this.tempLineNode || !this.measureContainer) return {
+			x: 0,
+			y: 0
+		};
+		const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
+		const pos = {
+			x: 0,
+			y: 0
+		};
+		if (this.shiftPressed) {
+			let dx = mousePoint.x - (this.tempLineNode.x() + this.tempLineNode.points()[0]);
+			let dy = mousePoint.y - (this.tempLineNode.y() + this.tempLineNode.points()[1]);
+			const angle = Math.atan2(dy, dx);
+			const angleDeg = angle * 180 / Math.PI;
+			const snapped = this.snapper.apply(angleDeg);
+			const dist = Math.hypot(dx, dy);
+			const rad = snapped * Math.PI / 180;
+			dx = Math.cos(rad) * dist;
+			dy = Math.sin(rad) * dist;
+			pos.x = this.tempLineNode.points()[0] + dx;
+			pos.y = this.tempLineNode.points()[1] + dy;
+		} else {
+			pos.x = mousePoint.x - this.tempLineNode.x();
+			pos.y = mousePoint.y - this.tempLineNode.y();
+		}
+		return pos;
+	}
+	handleSettingSize() {
+		if (this.lineId && this.tempLineNode && this.tempMainLineNode && this.measureContainer) {
+			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
+			const pos = this.defineFinalPoint();
+			const newPoints = [
+				...this.tempMainLineNode.points(),
+				pos.x,
+				pos.y
+			];
+			this.tempMainLineNode.setAttrs({
+				...this.props,
+				points: newPoints
+			});
+			this.tempLineNode.setAttrs({
+				...this.props,
+				x: mousePoint.x,
+				y: mousePoint.y,
+				points: [0, 0]
+			});
+			this.cancelAction();
+		}
+	}
+	handleMovement() {
+		if (this.state !== LINE_TOOL_STATE.DEFINING_SIZE) return;
+		if (this.tempLineNode && this.measureContainer) {
+			const pos = this.defineFinalPoint();
+			this.tempLineNode.setAttrs({
+				...this.props,
+				points: [
+					this.tempLineNode.points()[0],
+					this.tempLineNode.points()[1],
+					pos.x,
+					pos.y
+				]
+			});
+		}
+	}
+	trigger(cancelAction) {
+		if (!this.instance) throw new Error("Instance not defined");
+		if (!this.initialized) this.setupEvents();
+		const stage = this.instance.getStage();
+		stage.container().tabIndex = 1;
+		stage.container().focus();
+		this.cancelAction = cancelAction;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+		this.props = this.initProps();
+		this.addLine();
+	}
+	cleanup() {
+		const stage = this.instance.getStage();
+		this.tempLineNode?.destroy();
+		if (this.lineId && this.tempMainLineNode?.points().length === 4) {
+			const nodeHandler = this.instance.getNodeHandler("line");
+			if (nodeHandler) {
+				const clonedLine = this.tempMainLineNode.clone();
+				nodeHandler.scaleReset(clonedLine);
+				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("onAddedLine");
+			}
+		}
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const node = stage.findOne(`#${this.lineId}`);
+			if (node) selectionPlugin.setSelectedNodes([node]);
+			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		}
+		stage.container().style.cursor = "default";
+		this.initialCursor = null;
+		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(LINE_TOOL_STATE.IDLE);
+	}
+	setCursor() {
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "crosshair";
+	}
+	setFocusStage() {
+		const stage = this.instance.getStage();
+		stage.container().tabIndex = 1;
+		stage.container().blur();
+		stage.container().focus();
+	}
+};
+
 //#endregion
 //#region src/index.ts
 window._weave_isServerSide = false;
 window._weave_serverSideBackend = void 0;
 
 //#endregion
-export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_TYPE, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isIOS, isInShadowDOM, isNodeInSelection, isServer, memoize, mergeExceptArrays, moveNodeToContainer, resetScale };
+export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, LINE_TOOL_ACTION_NAME, LINE_TOOL_DEFAULT_CONFIG, LINE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_DEFAULT_CONFIG, WEAVE_LINE_NODE_TYPE, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveLineToolAction, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isIOS, isInShadowDOM, isNodeInSelection, isServer, memoize, mergeExceptArrays, moveNodeToContainer, resetScale };
 //# sourceMappingURL=sdk.js.map