@inditextech/weave-sdk 2.20.2 → 2.21.1

package/dist/sdk.js

@@ -17765,7 +17765,10 @@ function hasFrames(node) {
 	else return true;
 }
 function intersectArrays(arrays) {
-	return arrays.reduce((acc, arr) => acc.filter((val) => arr.includes(val)), arrays[0]);
+	if (arrays.length === 0) return [];
+	if (arrays.some((arr) => arr.length === 0)) return [];
+	const sorted = [...arrays].sort((a, b) => a.length - b.length);
+	return sorted[0].filter((item) => sorted.every((arr) => arr.includes(item)));
 }
 function isNodeInSelection(node, nodes) {
 	return nodes.some((selectedNode) => selectedNode.id() === node.id());
@@ -18606,6 +18609,7 @@ const DEFAULT_ADD_NODE_OPTIONS = { emitUserChangeEvent: true };
 const DEFAULT_UPDATE_NODE_OPTIONS = { emitUserChangeEvent: true };
 const DEFAULT_REMOVE_NODE_OPTIONS = { emitUserChangeEvent: true };
 const DEFAULT_MOVE_NODE_OPTIONS = { emitUserChangeEvent: true };
+const WEAVE_DEFAULT_CONFIG = { behaviors: { axisLockThreshold: 5 } };
 
 //#endregion
 //#region src/plugins/users-presence/constants.ts
@@ -18642,6 +18646,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			"bottom-right"
 		];
 		this.taps = 0;
+		this.isCtrlMetaPressed = false;
 		this.isSpaceKeyPressed = false;
 		this.isDoubleTap = false;
 		this.tapStart = {
@@ -18664,6 +18669,9 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	getLayerName() {
 		return WEAVE_NODES_SELECTION_LAYER_ID;
 	}
+	getConfiguration() {
+		return this.config;
+	}
 	initLayer() {
 		const stage = this.instance.getStage();
 		const layer = new Konva.Layer({ id: this.getLayerName() });
@@ -18760,18 +18768,18 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				const targetNode = this.instance.getInstanceRecursive(shape);
 				if (targetNode && targetNode !== nodeHovered) {
 					this.instance.getStage().handleMouseover();
-					nodeHovered?.handleMouseout();
-					targetNode?.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", () => {
@@ -18779,7 +18787,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				nodeHovered.handleMouseout();
 				nodeHovered = void 0;
 			}
-			this.instance.getStage().handleMouseover();
+			this.instance.getStage().handleMouseover?.();
 		});
 		const handleTransform = (e) => {
 			const moved = this.checkMoved(e);
@@ -19184,6 +19192,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.selecting = false;
 		const stage = this.instance.getStage();
 		stage.container().addEventListener("keydown", (e) => {
+			if (e.ctrlKey || e.metaKey) this.isCtrlMetaPressed = true;
 			if (e.code === "Space") this.isSpaceKeyPressed = true;
 			if ((e.code === "Backspace" || e.code === "Delete") && Object.keys(window.weaveTextEditing).length === 0) {
 				Promise.resolve().then(() => {
@@ -19193,6 +19202,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			}
 		});
 		stage.container().addEventListener("keyup", (e) => {
+			if (e.ctrlKey || e.metaKey) this.isCtrlMetaPressed = false;
 			if (e.code === "Space") this.isSpaceKeyPressed = false;
 		});
 		stage.on("pointerdown", (e) => {
@@ -19244,6 +19254,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.selectionRectangle.width(0);
 			this.selectionRectangle.height(0);
 			this.selecting = true;
+			if (this.isCtrlMetaPressed) {
+				const nodesSelected = this.tr.nodes();
+				for (const node of nodesSelected) node.fire("onSelectionCleared", { bubbles: true });
+			}
 			this.tr.nodes([]);
 			this.instance.emitEvent("onSelectionState", true);
 			this.panLoopId = requestAnimationFrame(() => this.panLoop());
@@ -19386,6 +19400,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		if (this.tr.nodes().length > 1 && this.config.behaviors?.onMultipleSelection) {
 			const selectionBehavior = this.config.behaviors?.onMultipleSelection?.(this.tr.nodes());
 			this.tr.setAttrs(selectionBehavior);
+			this.tr.forceUpdate();
 		}
 	}
 	syncSelection() {
@@ -19458,6 +19473,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			nodeTargeted.dblClick();
 			return;
 		}
+		if (stage.isCmdCtrlPressed()) return;
 		if (!metaPressed) {
 			this.tr.nodes([nodeTargeted]);
 			this.tr.show();
@@ -19509,7 +19525,9 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		if (nodesSelected > 1) {
 			const anchorsArrays = [];
 			for (const node of nodes) anchorsArrays.push(node.allowedAnchors());
-			transformerAttrs.enabledAnchors = intersectArrays(anchorsArrays);
+			const enabledAnchors = intersectArrays(anchorsArrays);
+			transformerAttrs.enabledAnchors = enabledAnchors;
+			this.tr.enabledAnchors(transformerAttrs.enabledAnchors);
 		}
 		if (this.tr && this.tr.nodes().length > 0) {
 			this.tr.setAttrs(transformerAttrs);
@@ -20247,7 +20265,7 @@ var WeaveNode = class {
 			this.hideHoverState();
 			return;
 		}
-		if (node.canBeHovered()) selectionPlugin.getHoverTransformer().nodes([node]);
+		if (node?.canBeHovered?.()) selectionPlugin.getHoverTransformer().nodes([node]);
 		else selectionPlugin.getHoverTransformer().nodes([]);
 		selectionPlugin.getHoverTransformer().moveToTop();
 	}
@@ -20257,25 +20275,27 @@ var WeaveNode = class {
 		selectionPlugin.getHoverTransformer().nodes([]);
 	}
 	setupDefaultNodeEvents(node) {
-		this.instance.addEventListener("onNodesChange", () => {
+		const handleNodesChange = () => {
 			if (!this.isLocked(node) && this.isSelecting() && this.isNodeSelected(node)) {
 				node.draggable(true);
 				return;
 			}
 			node.draggable(false);
-		});
+		};
 		const isLocked = node.getAttrs().locked ?? false;
 		if (isLocked) {
+			this.instance.removeEventListener("onNodesChange", handleNodesChange);
 			node.off("transformstart");
 			node.off("transform");
 			node.off("transformend");
 			node.off("dragstart");
 			node.off("dragmove");
 			node.off("dragend");
-			node.off("pointerenter");
+			node.off("pointerover");
 			node.off("pointerleave");
 		} else {
 			let transforming = false;
+			this.instance.addEventListener("onNodesChange", handleNodesChange);
 			node.on("transformstart", (e) => {
 				transforming = true;
 				if (e.target.getAttrs().strokeScaleEnabled !== false) {
@@ -20341,6 +20361,9 @@ var WeaveNode = class {
 			});
 			let originalNode = void 0;
 			let originalContainer = void 0;
+			let startPosition = null;
+			let lockedAxis = null;
+			let isShiftPressed = false;
 			node.on("dragstart", (e) => {
 				const nodeTarget = e.target;
 				this.getNodesSelectionFeedbackPlugin()?.hideSelectionHalo(nodeTarget);
@@ -20366,6 +20389,14 @@ var WeaveNode = class {
 				}
 				const realNodeTarget = this.getRealSelectedNode(nodeTarget);
 				if (realNodeTarget.getAttrs().isCloned) return;
+				lockedAxis = null;
+				if (e.evt.shiftKey && !startPosition) startPosition = realNodeTarget.absolutePosition();
+				if (e.evt.shiftKey) isShiftPressed = true;
+				else {
+					lockedAxis = null;
+					startPosition = null;
+					isShiftPressed = false;
+				}
 				if (this.getNodesSelectionPlugin()?.getSelectedNodes().length === 1 && realNodeTarget.getAttr("dragStartOpacity") === void 0) {
 					realNodeTarget.setAttr("dragStartOpacity", realNodeTarget.opacity());
 					realNodeTarget.opacity(this.getNodesSelectionPlugin()?.getDragOpacity());
@@ -20422,6 +20453,13 @@ var WeaveNode = class {
 					return;
 				}
 				const realNodeTarget = this.getRealSelectedNode(nodeTarget);
+				if (e.evt.shiftKey && !startPosition) startPosition = realNodeTarget.absolutePosition();
+				if (e.evt.shiftKey) isShiftPressed = true;
+				else {
+					lockedAxis = null;
+					startPosition = null;
+					isShiftPressed = false;
+				}
 				if (this.isSelecting() && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					clearContainerTargets(this.instance);
 					this.getUsersPresencePlugin()?.setPresence(realNodeTarget.id(), {
@@ -20433,8 +20471,30 @@ var WeaveNode = class {
 				}
 			};
 			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, DEFAULT_THROTTLE_MS));
+			node.dragBoundFunc((pos) => {
+				if (!startPosition) return pos;
+				if (!isShiftPressed) return pos;
+				const dx = pos.x - startPosition.x;
+				const dy = pos.y - startPosition.y;
+				if (!lockedAxis) {
+					const axisLockThreshold = this.instance.getConfiguration().behaviors.axisLockThreshold;
+					if (Math.abs(dx) < axisLockThreshold && Math.abs(dy) < axisLockThreshold) return pos;
+					lockedAxis = Math.abs(dx) > Math.abs(dy) ? "x" : "y";
+				}
+				if (lockedAxis === "x") return {
+					x: pos.x,
+					y: startPosition.y
+				};
+				else return {
+					x: startPosition.x,
+					y: pos.y
+				};
+			});
 			node.on("dragend", (e) => {
 				const nodeTarget = e.target;
+				startPosition = null;
+				lockedAxis = null;
+				isShiftPressed = false;
 				if (this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					this.instance.releaseMutexLock();
 					this.getNodesSelectionFeedbackPlugin()?.showSelectionHalo(nodeTarget);
@@ -20498,12 +20558,14 @@ var WeaveNode = class {
 				realNodeTarget.setAttrs({ isCloneOrigin: void 0 });
 				originalPosition = realNodeTarget.getAbsolutePosition();
 			});
-			node.handleMouseover = () => {
-				this.handleMouseOver(node);
-			};
-			node.handleMouseout = () => {
-				this.handleMouseout(node);
-			};
+			if (!node.getAttrs().overridesMouseControl) {
+				node.handleMouseover = () => {
+					this.handleMouseOver(node);
+				};
+				node.handleMouseout = () => {
+					this.handleMouseout(node);
+				};
+			}
 			node.handleSelectNode = () => {
 				this.getNodesSelectionFeedbackPlugin()?.createSelectionHalo(node);
 			};
@@ -20525,6 +20587,7 @@ var WeaveNode = class {
 	}
 	handleMouseOver(node) {
 		const stage = this.instance.getStage();
+		if (stage?.isCmdCtrlPressed?.()) return false;
 		const user = this.instance.getStore().getUser();
 		const activeAction = this.instance.getActiveAction();
 		const isNodeSelectionEnabled = this.getSelectionPlugin()?.isEnabled();
@@ -20559,6 +20622,8 @@ var WeaveNode = class {
 		return cancelBubble;
 	}
 	handleMouseout(node) {
+		const stage = this.instance.getStage();
+		if (stage?.isCmdCtrlPressed?.()) return;
 		const realNode = this.instance.getInstanceRecursive(node);
 		if (realNode) this.hideHoverState();
 	}
@@ -20583,9 +20648,12 @@ var WeaveNode = class {
 	serialize(instance) {
 		const attrs = instance.getAttrs();
 		const cleanedAttrs = { ...attrs };
+		delete cleanedAttrs.isSelected;
 		delete cleanedAttrs.mutexLocked;
 		delete cleanedAttrs.mutexUserId;
 		delete cleanedAttrs.draggable;
+		delete cleanedAttrs.overridesMouseControl;
+		delete cleanedAttrs.dragBoundFunc;
 		return {
 			key: attrs.id ?? "",
 			type: attrs.nodeType,
@@ -20736,6 +20804,12 @@ var WeaveAction = class {
 	getName() {
 		return this.name;
 	}
+	hasAliases() {
+		return false;
+	}
+	getAliases() {
+		return [];
+	}
 	getLogger() {
 		return this.logger;
 	}
@@ -22081,12 +22155,23 @@ var WeaveRegisterManager = class {
 		}
 		action.register(this.instance);
 		this.actionsHandlers[actionName] = action;
+		if (action.hasAliases()) {
+			const aliases = action.getAliases();
+			for (const alias of aliases) {
+				if (this.actionsHandlers[alias]) {
+					const msg = `Action handler with name [${alias}] already exists`;
+					this.logger.error(msg);
+					throw new Error(msg);
+				}
+				this.actionsHandlers[alias] = action;
+			}
+		}
 	}
 };
 
 //#endregion
 //#region package.json
-var version = "2.20.2";
+var version = "2.21.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22944,7 +23029,7 @@ var Weave = class {
 		Konva.showWarnings = false;
 		this.id = v4_default();
 		this.initialized = false;
-		this.config = mergeExceptArrays({}, weaveConfig);
+		this.config = mergeExceptArrays(WEAVE_DEFAULT_CONFIG, weaveConfig);
 		this.logger = new WeaveLogger(this, this.config?.logger ?? {
 			disabled: false,
 			level: "error"
@@ -23682,6 +23767,8 @@ var WeaveStageNode = class extends WeaveNode {
 	nodeType = WEAVE_STAGE_NODE_TYPE;
 	stageFocused = false;
 	wheelMousePressed = false;
+	isCmdCtrlPressed = false;
+	globalEventsInitialized = false;
 	onRender(props) {
 		const stage = new Konva.Stage({ ...props });
 		setupUpscaleStage(this.instance, stage);
@@ -23752,9 +23839,38 @@ var WeaveStageNode = class extends WeaveNode {
 			this.hideHoverState();
 			if (!this.instance.isServerSide()) stage.container().style.cursor = "default";
 		});
+		stage.isCmdCtrlPressed = () => this.isCmdCtrlPressed;
+		this.setupEvents();
 		return stage;
 	}
 	onUpdate() {}
+	setupEvents() {
+		if (this.globalEventsInitialized) return;
+		if (this.instance.isServerSide()) return;
+		window.addEventListener("keydown", (e) => {
+			if (e.ctrlKey || e.metaKey) {
+				this.isCmdCtrlPressed = true;
+				this.instance.getStage().container().style.cursor = "default";
+				const transformer = this.getSelectionPlugin()?.getTransformer();
+				if (!transformer) return;
+				if (transformer.nodes().length === 0 || transformer.nodes().length > 1) return;
+				const selectedNode = transformer.nodes()[0];
+				selectedNode.fire("onCmdCtrlPressed");
+			}
+		});
+		window.addEventListener("keyup", (e) => {
+			if (!e.ctrlKey && !e.metaKey) {
+				this.isCmdCtrlPressed = false;
+				this.instance.getStage().container().style.cursor = "default";
+				const transformer = this.getSelectionPlugin()?.getTransformer();
+				if (!transformer) return;
+				if (transformer.nodes().length === 0 || transformer.nodes().length > 1) return;
+				const selectedNode = transformer.nodes()[0];
+				selectedNode.fire("onCmdCtrlReleased");
+			}
+		});
+		this.globalEventsInitialized = true;
+	}
 };
 
 //#endregion
@@ -23788,6 +23904,8 @@ var WeaveLayerNode = class extends WeaveNode {
 		delete cleanedAttrs.mutexLocked;
 		delete cleanedAttrs.mutexUserId;
 		delete cleanedAttrs.draggable;
+		delete cleanedAttrs.overridesMouseControl;
+		delete cleanedAttrs.dragBoundFunc;
 		return {
 			key: attrs.id ?? "",
 			type: attrs.nodeType,
@@ -23869,6 +23987,8 @@ var WeaveGroupNode = class extends WeaveNode {
 		delete cleanedAttrs.mutexLocked;
 		delete cleanedAttrs.mutexUserId;
 		delete cleanedAttrs.draggable;
+		delete cleanedAttrs.overridesMouseControl;
+		delete cleanedAttrs.dragBoundFunc;
 		return {
 			key: attrs.id ?? "",
 			type: attrs.nodeType,
@@ -24124,17 +24244,12 @@ var WeaveLineNode = class extends WeaveNode {
 			originalEndHandleVisibility = null;
 		});
 		line.allowedAnchors = function() {
-			if (this.points().length !== 4) return [
+			return [
 				"top-left",
-				"top-center",
 				"top-right",
-				"middle-right",
-				"middle-left",
 				"bottom-left",
-				"bottom-center",
 				"bottom-right"
 			];
-			return [];
 		};
 		this.setupDefaultNodeEvents(line);
 		if (!this.handleZoomChanges) {
@@ -24564,6 +24679,8 @@ var WeaveTextNode = class extends WeaveNode {
 		delete cleanedAttrs.triggerEditMode;
 		delete cleanedAttrs.cancelEditMode;
 		delete cleanedAttrs.measureMultilineText;
+		delete cleanedAttrs.overridesMouseControl;
+		delete cleanedAttrs.dragBoundFunc;
 		return {
 			key: attrs.id ?? "",
 			type: attrs.nodeType,
@@ -24922,8 +25039,59 @@ var WeaveTextNode = class extends WeaveNode {
 	}
 };
 
+//#endregion
+//#region src/nodes/image/constants.ts
+const WEAVE_IMAGE_NODE_TYPE = "image";
+const WEAVE_IMAGE_CROP_END_TYPE = {
+	["ACCEPT"]: "accept",
+	["CANCEL"]: "cancel"
+};
+const WEAVE_IMAGE_CROP_ANCHOR_POSITION = {
+	["TOP_LEFT"]: "top-left",
+	["TOP_RIGHT"]: "top-right",
+	["BOTTOM_LEFT"]: "bottom-left",
+	["BOTTOM_RIGHT"]: "bottom-right",
+	["TOP_CENTER"]: "top-center",
+	["MIDDLE_LEFT"]: "middle-left",
+	["MIDDLE_RIGHT"]: "middle-right",
+	["BOTTOM_CENTER"]: "bottom-center"
+};
+const WEAVE_IMAGE_DEFAULT_CONFIG = {
+	performance: { cache: { enabled: false } },
+	crossOrigin: "anonymous",
+	cropMode: {
+		gridLines: { enabled: true },
+		overlay: { fill: "rgba(0,0,0,0.2)" },
+		selection: {
+			enabledAnchors: [
+				"top-left",
+				"top-center",
+				"top-right",
+				"middle-right",
+				"middle-left",
+				"bottom-left",
+				"bottom-center",
+				"bottom-right"
+			],
+			borderStroke: "#1a1aff",
+			borderStrokeWidth: 2,
+			anchorStyleFunc: (anchor) => {
+				anchor.width(12);
+				anchor.height(12);
+				anchor.offsetX(6);
+				anchor.offsetY(6);
+				anchor.fill("white");
+				anchor.stroke("black");
+				anchor.strokeWidth(1);
+				anchor.cornerRadius(0);
+			}
+		}
+	}
+};
+
 //#endregion
 //#region src/nodes/image/crop.ts
+const SNAP = 8;
 var WeaveImageCrop = class WeaveImageCrop {
 	constructor(instance, node, image, internalImage, clipGroup) {
 		this.instance = instance;
@@ -24931,13 +25099,11 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.image = image;
 		this.internalImage = internalImage;
 		this.cropGroup = clipGroup;
-		this.cropping = false;
 		this.onClose = () => {};
 		this.handleHide = this.hide.bind(this);
 	}
-	show(onClose) {
+	show(onClose, options) {
 		this.onClose = onClose;
-		this.cropping = true;
 		const nodeEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
 		if (nodeEdgeSnappingPlugin) nodeEdgeSnappingPlugin.disable();
 		const nodeDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
@@ -24946,6 +25112,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 		if (nodesSelectionPlugin) nodesSelectionPlugin.disable();
 		this.node.clearCache(this.image);
 		this.image.setAttrs({ cropping: true });
+		this.image.listening(false);
 		const imageAttrs = this.image.getAttrs();
 		this.internalImage.hide();
 		this.cropGroup.destroyChildren();
@@ -24967,16 +25134,17 @@ var WeaveImageCrop = class WeaveImageCrop {
 		});
 		this.imageOffsetX = imageAttrs.cropInfo ? imageAttrs.cropInfo.x * realScale : 0;
 		this.imageOffsetY = imageAttrs.cropInfo ? imageAttrs.cropInfo.y * realScale : 0;
+		const cropModeConfiguration = this.node.getConfiguration().cropMode;
 		this.cropRect = new Konva.Rect({
 			x: 0,
 			y: 0,
 			width: imageAttrs.cropInfo ? imageAttrs.cropInfo.width * realScale : imageAttrs.uncroppedImage.width,
 			height: imageAttrs.cropInfo ? imageAttrs.cropInfo.height * realScale : imageAttrs.uncroppedImage.height,
-			fill: "rgba(0,0,0,0.2)",
-			stroke: "#ff0000ff",
+			fill: cropModeConfiguration.overlay.fill,
+			stroke: "transparent",
 			strokeWidth: 0,
-			strokeScaleEnabled: true,
-			draggable: true,
+			strokeScaleEnabled: false,
+			draggable: !(options?.cmdCtrl?.triggered ?? false),
 			rotation: 0
 		});
 		this.transformer = new Konva.Transformer({
@@ -24987,6 +25155,14 @@ var WeaveImageCrop = class WeaveImageCrop {
 			keepRatio: false,
 			ignoreStroke: false,
 			rotateEnabled: false,
+			borderStroke: cropModeConfiguration.selection.borderStroke,
+			borderStrokeWidth: cropModeConfiguration.selection.borderStrokeWidth,
+			anchorStyleFunc: (anchor) => {
+				const tokens = anchor.name().split(" ");
+				const position = tokens[0];
+				cropModeConfiguration.selection.anchorStyleFunc(anchor, position);
+			},
+			anchorStroke: "black",
 			enabledAnchors: [
 				"top-left",
 				"top-center",
@@ -25050,39 +25226,40 @@ var WeaveImageCrop = class WeaveImageCrop {
 			},
 			rotation: 0
 		});
-		this.grid = new Konva.Group();
+		this.grid = new Konva.Group({
+			listening: false,
+			draggable: false
+		});
 		const cropRect = this.cropRect.getClientRect({
 			relativeTo: this.cropGroup,
 			skipStroke: true
 		});
-		this.drawGridLines(0, 0, cropRect.width, cropRect.height);
-		const handleGridLines = () => {
+		this.drawGrid(0, 0, cropRect.width, cropRect.height);
+		const handleGrid = () => {
 			const cropRect$1 = this.cropRect.getClientRect({
 				relativeTo: this.cropGroup,
 				skipStroke: true
 			});
-			this.drawGridLines(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
+			this.drawGrid(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
 		};
-		this.instance.getStage().on("pointerdown", (e) => {
-			if (!this.cropping) return;
-			const isStage = e.target instanceof Konva.Stage;
-			const isContainerEmptyArea = typeof e.target.getAttrs().isContainerPrincipal !== "undefined" && !e.target.getAttrs().isContainerPrincipal;
-			if (isStage || isContainerEmptyArea) this.cancel();
-		});
 		this.instance.addEventListener("onActiveActionChange", (activeAction) => {
 			if (typeof activeAction !== "undefined") this.cancel();
 		});
 		this.cropRect.on("dragstart", (e) => {
 			this.instance.emitEvent("onDrag", e.target);
 		});
-		this.cropRect.on("dragmove", handleGridLines);
+		this.cropRect.on("dragmove", () => {
+			handleGrid();
+		});
 		this.cropRect.on("dragend", () => {
 			this.instance.emitEvent("onDrag", null);
 		});
 		this.cropRect.on("transformstart", (e) => {
 			this.instance.emitEvent("onTransform", e.target);
 		});
-		this.cropRect.on("transform", handleGridLines);
+		this.cropRect.on("transform", () => {
+			handleGrid();
+		});
 		this.cropRect.on("transformend", () => {
 			this.instance.emitEvent("onTransform", null);
 		});
@@ -25092,9 +25269,156 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.cropGroup.add(this.grid);
 		const utilityLayer = this.instance.getUtilityLayer();
 		utilityLayer?.add(this.transformer);
-		this.transformer.forceUpdate();
+		this.transformer?.forceUpdate();
 		this.cropGroup.show();
-		this.instance.getStage().container().addEventListener("keydown", this.handleHide);
+		window.addEventListener("keydown", this.handleHide);
+		if (options.cmdCtrl.triggered) {
+			utilityLayer?.hide();
+			const stage = this.instance.getStage();
+			let resizing = false;
+			let fixedCorner = {
+				x: 0,
+				y: 0
+			};
+			const limits = {
+				top: this.cropImage.y(),
+				right: this.cropImage.x() + this.cropImage.width(),
+				bottom: this.cropImage.y() + this.cropImage.height(),
+				left: this.cropImage.x()
+			};
+			if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_LEFT) fixedCorner = {
+				x: this.cropRect.x() + this.cropRect.width(),
+				y: this.cropRect.y() + this.cropRect.height()
+			};
+			if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_RIGHT) fixedCorner = {
+				x: this.cropRect.x(),
+				y: this.cropRect.y() + this.cropRect.height()
+			};
+			if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_LEFT) fixedCorner = {
+				x: this.cropRect.x() + this.cropRect.width(),
+				y: this.cropRect.y()
+			};
+			if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_RIGHT) fixedCorner = {
+				x: this.cropRect.x(),
+				y: this.cropRect.y()
+			};
+			if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_CENTER) fixedCorner = {
+				x: this.cropRect.x() + this.cropRect.width(),
+				y: this.cropRect.y() + this.cropRect.height()
+			};
+			if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_RIGHT) fixedCorner = {
+				x: this.cropRect.x(),
+				y: this.cropRect.y() + this.cropRect.height() / 2
+			};
+			if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_CENTER) fixedCorner = {
+				x: this.cropRect.x(),
+				y: this.cropRect.y()
+			};
+			if (options.cmdCtrl.corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_LEFT) fixedCorner = {
+				x: this.cropRect.x() + this.cropRect.width(),
+				y: this.cropRect.y() + this.cropRect.height() / 2
+			};
+			this.drawSquarePointer(options.cmdCtrl.corner, fixedCorner, limits);
+			resizing = true;
+			stage.on("pointermove", () => {
+				if (!resizing) return;
+				if (options.cmdCtrl.triggered) {
+					this.drawSquarePointer(options.cmdCtrl.corner, fixedCorner, limits);
+					handleGrid();
+				}
+			});
+			stage.on("pointerup", () => {
+				if (!resizing) return;
+				resizing = false;
+				this.hide({ code: "Enter" });
+			});
+		} else utilityLayer?.show();
+	}
+	createSoftSnap(snapTo, snapDistance = 8) {
+		let snapped = false;
+		return function(value) {
+			const dist = Math.abs(value - snapTo);
+			if (!snapped && dist < snapDistance) {
+				snapped = true;
+				return snapTo;
+			}
+			if (snapped && dist > snapDistance * 1.5) snapped = false;
+			return snapped ? snapTo : value;
+		};
+	}
+	drawSquarePointer(corner, fixedCorner, limits) {
+		const stage = this.instance.getStage();
+		const pointer = stage.getPointerPosition();
+		if (!pointer) return;
+		const local = this.cropGroup.getAbsoluteTransform().copy().invert().point(pointer);
+		const newPos = {
+			x: local.x,
+			y: local.y
+		};
+		let newWidth = this.cropRect.width();
+		let newHeight = this.cropRect.height();
+		if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_LEFT) {
+			newWidth = fixedCorner.x - local.x;
+			newHeight = fixedCorner.y - local.y;
+			newPos.x = local.x;
+			newPos.y = local.y;
+		}
+		if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_RIGHT) {
+			newWidth = local.x - fixedCorner.x;
+			newHeight = fixedCorner.y - local.y;
+			newPos.x = fixedCorner.x;
+			newPos.y = local.y;
+		}
+		if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_LEFT) {
+			newWidth = fixedCorner.x - local.x;
+			newHeight = local.y - fixedCorner.y;
+			newPos.x = local.x;
+			newPos.y = fixedCorner.y;
+		}
+		if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_RIGHT) {
+			newWidth = local.x - fixedCorner.x;
+			newHeight = local.y - fixedCorner.y;
+			newPos.x = fixedCorner.x;
+			newPos.y = fixedCorner.y;
+		}
+		if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_CENTER) {
+			newWidth = this.cropRect.width();
+			newHeight = fixedCorner.y - local.y;
+			newPos.x = this.cropRect.x();
+			newPos.y = local.y;
+		}
+		if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_RIGHT) {
+			newWidth = local.x - fixedCorner.x;
+			newHeight = this.cropRect.height();
+			newPos.x = this.cropRect.x();
+			newPos.y = this.cropRect.y();
+		}
+		if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_CENTER) {
+			newWidth = this.cropRect.width();
+			newHeight = local.y - fixedCorner.y;
+			newPos.x = this.cropRect.x();
+			newPos.y = this.cropRect.y();
+		}
+		if (corner === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_LEFT) {
+			newWidth = fixedCorner.x - local.x;
+			newHeight = this.cropRect.height();
+			newPos.x = local.x;
+			newPos.y = this.cropRect.y();
+		}
+		newPos.x = this.createSoftSnap(limits.left, SNAP)(newPos.x);
+		newPos.x = this.createSoftSnap(limits.right, SNAP)(newPos.x);
+		newPos.y = this.createSoftSnap(limits.top, SNAP)(newPos.y);
+		newPos.y = this.createSoftSnap(limits.bottom, SNAP)(newPos.y);
+		newWidth = this.createSoftSnap(limits.left, SNAP)(newWidth);
+		newWidth = this.createSoftSnap(limits.right, SNAP)(newWidth);
+		newHeight = this.createSoftSnap(limits.top, SNAP)(newHeight);
+		newHeight = this.createSoftSnap(limits.bottom, SNAP)(newHeight);
+		this.cropRect.setAttrs({
+			x: newPos.x,
+			y: newPos.y,
+			width: newWidth,
+			height: newHeight
+		});
 	}
 	accept() {
 		this.hide({ code: "Enter" });
@@ -25104,14 +25428,18 @@ var WeaveImageCrop = class WeaveImageCrop {
 	}
 	hide(e) {
 		if (!["Enter", "Escape"].includes(e.code)) return;
-		this.cropping = false;
 		this.image.setAttrs({ cropping: false });
+		this.image.listening(true);
 		if (e.code === "Enter") this.handleClipEnd();
 		const stage = this.instance.getStage();
 		this.onClose();
 		const utilityLayer = this.instance.getUtilityLayer();
 		utilityLayer?.destroyChildren();
-		this.instance.getStage().container().removeEventListener("keydown", this.handleHide);
+		if (stage.isCmdCtrlPressed() && utilityLayer) {
+			this.node.renderCropMode(utilityLayer, this.image);
+			utilityLayer.show();
+		}
+		window.removeEventListener("keydown", this.handleHide);
 		this.cropGroup.destroyChildren();
 		this.cropGroup.hide();
 		const nodesEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
@@ -25126,36 +25454,56 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.node.cacheNode(this.image);
 		this.instance.emitEvent("onImageCropEnd", { instance: this.image });
 	}
-	drawGridLines(x, y, width, height) {
+	drawGrid(x, y, width, height) {
 		if (!this.image.getAttrs().cropping) return;
 		this.grid.destroyChildren();
-		const stepX = width / 3;
-		const stepY = height / 3;
-		for (let i = 1; i <= 2; i++) {
-			const vLine = new Konva.Line({
-				points: [
-					x + stepX * i,
-					y,
-					x + stepX * i,
-					y + height
-				],
-				stroke: "#0074ffcc",
-				strokeWidth: 1,
-				strokeScaleEnabled: false
-			});
-			const hLine = new Konva.Line({
-				points: [
-					x,
-					y + stepY * i,
-					x + width,
-					y + stepY * i
-				],
-				stroke: "#0074ffcc",
-				strokeWidth: 1,
-				strokeScaleEnabled: false
-			});
-			this.grid.add(vLine, hLine);
+		const cropModeConfiguration = this.node.getConfiguration().cropMode;
+		if (cropModeConfiguration.gridLines.enabled) {
+			const stepX = width / 3;
+			const stepY = height / 3;
+			for (let i = 1; i <= 2; i++) {
+				const vLine = new Konva.Line({
+					points: [
+						x + stepX * i,
+						y,
+						x + stepX * i,
+						y + height
+					],
+					stroke: "#1a1aff",
+					strokeWidth: 1,
+					strokeScaleEnabled: false,
+					listening: false,
+					draggable: false
+				});
+				const hLine = new Konva.Line({
+					points: [
+						x,
+						y + stepY * i,
+						x + width,
+						y + stepY * i
+					],
+					stroke: "#1a1aff",
+					strokeWidth: 1,
+					strokeScaleEnabled: false,
+					listening: false,
+					draggable: false
+				});
+				this.grid.add(vLine, hLine);
+			}
 		}
+		const border = new Konva.Rect({
+			x,
+			y,
+			width,
+			height,
+			stroke: cropModeConfiguration.selection.borderStroke,
+			strokeWidth: cropModeConfiguration.selection.borderStrokeWidth,
+			strokeScaleEnabled: false,
+			listening: false,
+			draggable: false
+		});
+		this.grid.add(border);
+		this.transformer?.forceUpdate();
 	}
 	unCrop() {
 		const imageAttrs = this.image.getAttrs();
@@ -25275,18 +25623,6 @@ var WeaveImageCrop = class WeaveImageCrop {
 	}
 };
 
-//#endregion
-//#region src/nodes/image/constants.ts
-const WEAVE_IMAGE_NODE_TYPE = "image";
-const WEAVE_IMAGE_CROP_END_TYPE = {
-	["ACCEPT"]: "accept",
-	["CANCEL"]: "cancel"
-};
-const WEAVE_IMAGE_DEFAULT_CONFIG = {
-	performance: { cache: { enabled: false } },
-	crossOrigin: "anonymous"
-};
-
 //#endregion
 //#region src/nodes/image/image.ts
 var WeaveImageNode = class extends WeaveNode {
@@ -25306,13 +25642,16 @@ var WeaveImageNode = class extends WeaveNode {
 		this.config = mergeExceptArrays(WEAVE_IMAGE_DEFAULT_CONFIG, config);
 		this.imageCrop = null;
 	}
+	getConfiguration() {
+		return this.config;
+	}
 	onRegister() {
 		this.logger.info(`image caching enabled: ${this.config.performance.cache.enabled}`);
 	}
-	triggerCrop(imageNode) {
+	triggerCrop(imageNode, options) {
 		const stage = this.instance.getStage();
 		if (imageNode.getAttrs().cropping ?? false) return;
-		if (!(this.isSelecting() && this.isNodeSelected(imageNode))) return;
+		if (!(this.isSelecting() && this.isNodeSelected(imageNode)) && !options.cmdCtrl.triggered) return;
 		const lockAcquired = this.instance.setMutexLock({
 			nodeIds: [imageNode.id()],
 			operation: "image-crop"
@@ -25328,8 +25667,11 @@ var WeaveImageNode = class extends WeaveNode {
 			stage.mode(WEAVE_STAGE_DEFAULT_MODE);
 			this.instance.emitEvent("onImageCropEnd", { instance: image });
 			this.imageCrop = null;
+		}, options);
+		this.instance.emitEvent("onImageCropStart", {
+			instance: image,
+			cmdCtrlTriggered: options.cmdCtrl.triggered
 		});
-		this.instance.emitEvent("onImageCropStart", { instance: image });
 	}
 	closeCrop = (imageNode, type) => {
 		if (!this.imageCrop) return;
@@ -25375,7 +25717,8 @@ var WeaveImageNode = class extends WeaveNode {
 			id,
 			name: "node",
 			loadedImage: false,
-			loadedImageError: false
+			loadedImageError: false,
+			cropping: false
 		});
 		this.setupDefaultNodeAugmentation(image);
 		image.movedToContainer = () => {
@@ -25384,7 +25727,7 @@ var WeaveImageNode = class extends WeaveNode {
 			if (!image$1) return;
 		};
 		image.triggerCrop = () => {
-			this.triggerCrop(image);
+			this.triggerCrop(image, { cmdCtrl: { triggered: false } });
 		};
 		image.closeCrop = (type) => {
 			this.closeCrop(image, type);
@@ -25493,6 +25836,32 @@ var WeaveImageNode = class extends WeaveNode {
 				if (this.imageCrop) this.closeCrop(image, WEAVE_IMAGE_CROP_END_TYPE.CANCEL);
 			}
 		});
+		image.on("onCmdCtrlPressed", () => {
+			const transformer = this.getSelectionPlugin()?.getTransformer();
+			if (!transformer) return;
+			transformer.hide();
+			const utilityLayer = this.instance.getUtilityLayer();
+			if (!utilityLayer) return;
+			utilityLayer?.destroyChildren();
+			this.renderCropMode(utilityLayer, image);
+			utilityLayer?.show();
+		});
+		image.on("onCmdCtrlReleased", () => {
+			const transformer = this.getSelectionPlugin()?.getTransformer();
+			if (!transformer) return;
+			transformer.show();
+			const utilityLayer = this.instance.getUtilityLayer();
+			if (!utilityLayer) return;
+			utilityLayer?.destroyChildren();
+		});
+		image.on("onSelectionCleared", () => {
+			const transformer = this.getSelectionPlugin()?.getTransformer();
+			if (!transformer) return;
+			transformer.show();
+			const utilityLayer = this.instance.getUtilityLayer();
+			if (!utilityLayer) return;
+			utilityLayer?.destroyChildren();
+		});
 		return image;
 	}
 	clearCache(nodeInstance) {
@@ -25504,6 +25873,164 @@ var WeaveImageNode = class extends WeaveNode {
 			nodeInstance.cache({ pixelRatio: this.config.performance.cache.pixelRatio });
 		}
 	}
+	renderCropBorder(layer, node) {
+		const stage = this.instance.getStage();
+		const stageScale = stage.scaleX();
+		const transform = node.getAbsoluteTransform().copy();
+		const w = node.width();
+		const h = node.height();
+		const offsetX = node.offsetX();
+		const offsetY = node.offsetY();
+		const localCorners = [
+			{
+				x: 0,
+				y: 0
+			},
+			{
+				x: w,
+				y: 0
+			},
+			{
+				x: w,
+				y: h
+			},
+			{
+				x: 0,
+				y: h
+			}
+		];
+		const absoluteCorners = localCorners.map((p) => transform.point({
+			x: p.x - offsetX,
+			y: p.y - offsetY
+		}));
+		const rect = new Konva.Rect({
+			width: absoluteCorners[1].x - absoluteCorners[0].x,
+			height: absoluteCorners[2].y - absoluteCorners[0].y,
+			fill: "transparent",
+			strokeWidth: 2,
+			stroke: "#1a1aff",
+			draggable: false,
+			listening: false,
+			rotation: node.rotation()
+		});
+		layer.add(rect);
+		rect.setAbsolutePosition(absoluteCorners[0]);
+		rect.scale({
+			x: 1 / stageScale,
+			y: 1 / stageScale
+		});
+		stage.on("scaleXChange scaleYChange", () => {
+			const scale = stage.scaleX();
+			rect.scale({
+				x: 1 / scale,
+				y: 1 / scale
+			});
+		});
+	}
+	renderCropAnchor(position, node, layer, onClick) {
+		const transform = node.getAbsoluteTransform().copy();
+		const stage = this.instance.getStage();
+		const stageScale = stage.scaleX();
+		const w = node.width();
+		const h = node.height();
+		const offsetX = node.offsetX();
+		const offsetY = node.offsetY();
+		const localCorners = [
+			{
+				x: 0,
+				y: 0
+			},
+			{
+				x: w,
+				y: 0
+			},
+			{
+				x: w,
+				y: h
+			},
+			{
+				x: 0,
+				y: h
+			},
+			{
+				x: w / 2,
+				y: 0
+			},
+			{
+				x: w,
+				y: h / 2
+			},
+			{
+				x: 0,
+				y: h / 2
+			},
+			{
+				x: w / 2,
+				y: h
+			}
+		];
+		const absoluteCorners = localCorners.map((p) => transform.point({
+			x: p.x - offsetX,
+			y: p.y - offsetY
+		}));
+		const anchor = new Konva.Rect({
+			draggable: false,
+			rotation: node.rotation()
+		});
+		this.config.cropMode.selection.anchorStyleFunc(anchor, position);
+		layer.add(anchor);
+		anchor.scale({
+			x: 1 / stageScale,
+			y: 1 / stageScale
+		});
+		stage.on("scaleXChange scaleYChange", () => {
+			const scale = stage.scaleX();
+			anchor.scale({
+				x: 1 / scale,
+				y: 1 / scale
+			});
+		});
+		if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_LEFT) anchor.setAbsolutePosition(absoluteCorners[0]);
+		if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_RIGHT) anchor.setAbsolutePosition(absoluteCorners[1]);
+		if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_RIGHT) anchor.setAbsolutePosition(absoluteCorners[2]);
+		if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_LEFT) anchor.setAbsolutePosition(absoluteCorners[3]);
+		if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_CENTER) anchor.setAbsolutePosition(absoluteCorners[4]);
+		if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_RIGHT) anchor.setAbsolutePosition(absoluteCorners[5]);
+		if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_LEFT) anchor.setAbsolutePosition(absoluteCorners[6]);
+		if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_CENTER) anchor.setAbsolutePosition(absoluteCorners[7]);
+		anchor.on("pointerover", () => {
+			if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_LEFT || position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_RIGHT) this.instance.getStage().container().style.cursor = "nesw-resize";
+			if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_LEFT || position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_RIGHT) this.instance.getStage().container().style.cursor = "nwse-resize";
+			if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_RIGHT || position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_LEFT) this.instance.getStage().container().style.cursor = "ew-resize";
+			if (position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_CENTER || position === WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_CENTER) this.instance.getStage().container().style.cursor = "ns-resize";
+		});
+		anchor.on("pointerdown", () => {
+			onClick();
+		});
+		return anchor;
+	}
+	renderCropAnchors(layer, node) {
+		const anchors = [
+			WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_LEFT,
+			WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_RIGHT,
+			WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_RIGHT,
+			WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_LEFT,
+			WEAVE_IMAGE_CROP_ANCHOR_POSITION.TOP_CENTER,
+			WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_RIGHT,
+			WEAVE_IMAGE_CROP_ANCHOR_POSITION.BOTTOM_CENTER,
+			WEAVE_IMAGE_CROP_ANCHOR_POSITION.MIDDLE_LEFT
+		];
+		for (const anchor of anchors) if (this.config.cropMode.selection.enabledAnchors.includes(anchor)) this.renderCropAnchor(anchor, node, layer, () => {
+			this.triggerCrop(node, { cmdCtrl: {
+				triggered: true,
+				corner: anchor
+			} });
+		});
+	}
+	renderCropMode(layer, node) {
+		this.renderCropBorder(layer, node);
+		this.renderCropAnchors(layer, node);
+	}
 	onUpdate(nodeInstance, nextProps) {
 		const id = nodeInstance.getAttrs().id;
 		const node = nodeInstance;
@@ -25605,8 +26132,8 @@ var WeaveImageNode = class extends WeaveNode {
 		}
 		this.cacheNode(nodeInstance);
 	}
-	preloadImage(imageId, imageURL, { onLoad, onError }) {
-		const realImageURL = this.config.urlTransformer?.(imageURL ?? "") ?? imageURL;
+	preloadImage(imageId, imageURL, { node, onLoad, onError }) {
+		const realImageURL = this.config.urlTransformer?.(imageURL ?? "", node) ?? imageURL;
 		this.imageSource[imageId] = Konva.Util.createImageElement();
 		this.imageSource[imageId].crossOrigin = this.config.crossOrigin;
 		this.imageSource[imageId].onerror = (error) => {
@@ -25640,9 +26167,10 @@ var WeaveImageNode = class extends WeaveNode {
 		const { id } = imageProps;
 		const imagePlaceholder = image.findOne(`#${id}-placeholder`);
 		const internalImage = image.findOne(`#${id}-image`);
-		const realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "") ?? imageProps.imageURL;
+		const realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "", image) ?? imageProps.imageURL;
 		this.loadAsyncElement(id);
 		this.preloadImage(id, realImageURL ?? "", {
+			node: image,
 			onLoad: () => {
 				if (image && imagePlaceholder && internalImage) {
 					image.setAttrs({
@@ -26325,6 +26853,8 @@ var WeaveFrameNode = class extends WeaveNode {
 		delete cleanedAttrs.mutexUserId;
 		delete cleanedAttrs.draggable;
 		delete cleanedAttrs.onTargetEnter;
+		delete cleanedAttrs.overridesMouseControl;
+		delete cleanedAttrs.dragBoundFunc;
 		return {
 			key: realAttrs?.id ?? "",
 			type: realAttrs?.nodeType,
@@ -26560,6 +27090,8 @@ var WeaveStrokeNode = class extends WeaveNode {
 		delete cleanedAttrs.draggable;
 		delete cleanedAttrs.sceneFunc;
 		delete cleanedAttrs.hitFunc;
+		delete cleanedAttrs.overridesMouseControl;
+		delete cleanedAttrs.dragBoundFunc;
 		return {
 			key: attrs.id ?? "",
 			type: attrs.nodeType,
@@ -26576,23 +27108,793 @@ var WeaveStrokeNode = class extends WeaveNode {
 };
 
 //#endregion
-//#region src/nodes/comment/constants.ts
-const WEAVE_COMMENT_STATUS = {
-	PENDING: "pending",
-	RESOLVED: "resolved"
+//#region src/nodes/stroke-single/constants.ts
+const WEAVE_STROKE_SINGLE_NODE_TYPE = "stroke-single";
+const WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG = { snapAngles: {
+	angles: [
+		0,
+		45,
+		90,
+		135,
+		180,
+		225,
+		270,
+		315
+	],
+	activateThreshold: 5,
+	releaseThreshold: 10
+} };
+const WEAVE_STROKE_SINGLE_NODE_TIP_TYPE = {
+	NONE: "none",
+	ARROW: "arrow",
+	CIRCLE: "circle",
+	SQUARE: "square"
 };
-const WEAVE_COMMENT_CREATE_ACTION = {
-	CREATE: "create",
-	CLOSE: "close"
+const WEAVE_STROKE_SINGLE_NODE_TIP_SIDE = {
+	START: "start",
+	END: "end"
 };
-const WEAVE_COMMENT_VIEW_ACTION = {
-	REPLY: "reply",
-	MARK_RESOLVED: "markResolved",
-	EDIT: "edit",
-	DELETE: "delete",
-	CLOSE: "close"
+
+//#endregion
+//#region src/nodes/stroke-single/base.line-tip-manager.ts
+var WeaveBaseLineTipManager = class {
+	constructor() {}
+	capitalizeFirst(str) {
+		if (typeof str !== "string" || str.length === 0) return str;
+		return str[0].toUpperCase() + str.slice(1);
+	}
+	destroy(instance, point) {}
+	render(instance, point) {}
+	update(instance, point) {}
+	getTip(instance, point) {
+		const actualTip = instance.findOne(`#${instance.getAttrs().id}-tip-${point}`);
+		if (!actualTip) return;
+		return actualTip;
+	}
+	getInternalLine(instance) {
+		const actualLine = instance.findOne(`#${instance.getAttrs().id}-line`);
+		if (!actualLine) return;
+		return actualLine;
+	}
+	getLinePoints(instance) {
+		const points = instance.getAttrs().linePoints;
+		const lineStartPoint = {
+			x: points[0],
+			y: points[1]
+		};
+		const lineEndPoint = {
+			x: points[2],
+			y: points[3]
+		};
+		return {
+			lineStartPoint,
+			lineEndPoint
+		};
+	}
 };
-const WEAVE_COMMENT_NODE_ACTION = {
+
+//#endregion
+//#region src/nodes/stroke-single/utils.ts
+const movePointParallelToLine$1 = (fromPoint, toPoint, point, distance) => {
+	const dx = toPoint.x - fromPoint.x;
+	const dy = toPoint.y - fromPoint.y;
+	const len = Math.hypot(dx, dy);
+	if (len === 0) throw new Error("Defined line length is zero");
+	const ux = dx / len;
+	const uy = dy / len;
+	return {
+		x: point.x + ux * distance,
+		y: point.y + uy * distance
+	};
+};
+
+//#endregion
+//#region src/nodes/stroke-single/line-tip-managers/arrow.line-tip-manager.ts
+var WeaveArrowLineTipManager = class extends WeaveBaseLineTipManager {
+	constructor() {
+		super();
+	}
+	destroy(instance, point) {
+		const actualTip = this.getTip(instance, point);
+		if (!actualTip) return;
+		actualTip.destroy();
+	}
+	updateTip(instance, point, internalLine, tip, base, height) {
+		const { lineStartPoint, lineEndPoint } = this.getLinePoints(instance);
+		const trianglePoint = movePointParallelToLine$1(lineStartPoint, lineEndPoint, point === "start" ? lineStartPoint : lineEndPoint, point === "start" ? height / 2 : -height / 2);
+		tip.setAttrs({
+			points: [
+				-base / 2,
+				height / 2,
+				base / 2,
+				height / 2,
+				0,
+				-height / 2
+			],
+			x: trianglePoint.x,
+			y: trianglePoint.y
+		});
+		const angleRad = Math.atan2(lineEndPoint.y - lineStartPoint.y, lineEndPoint.x - lineStartPoint.x);
+		const angleDeg = angleRad * (180 / Math.PI);
+		tip.rotation(angleDeg + (point === "start" ? -90 : 90));
+		if (point === "start") {
+			const internalPoints = internalLine.points();
+			internalLine.points([
+				trianglePoint.x,
+				trianglePoint.y,
+				internalPoints[2],
+				internalPoints[3]
+			]);
+		} else {
+			const internalPoints = internalLine.points();
+			internalLine.points([
+				internalPoints[0],
+				internalPoints[1],
+				trianglePoint.x,
+				trianglePoint.y
+			]);
+		}
+	}
+	render(instance, point) {
+		this.destroy(instance, point);
+		const internalLine = this.getInternalLine(instance);
+		if (!internalLine) return;
+		const stroke = instance.getAttrs().stroke ?? "black";
+		const base = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Base`] ?? 3;
+		const height = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Height`] ?? Math.sqrt(3) / 2 * 3;
+		const triangle = new Konva.Line({
+			id: `${instance.getAttrs().id}-tip-${point}`,
+			name: "lineTip",
+			nodeId: instance.getAttrs().id,
+			closed: true,
+			stroke,
+			strokeWidth: 0,
+			strokeScaleEnabled: false,
+			fill: stroke
+		});
+		instance.add(triangle);
+		this.updateTip(instance, point, internalLine, triangle, base, height);
+	}
+	update(instance, point) {
+		const actualTip = this.getTip(instance, point);
+		if (!actualTip) return;
+		const internalLine = this.getInternalLine(instance);
+		if (!internalLine) return;
+		const stroke = instance.getAttrs().stroke ?? "black";
+		const base = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Base`] ?? 3;
+		const height = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Height`] ?? Math.sqrt(3) / 2 * 3;
+		actualTip.setAttrs({ fill: stroke });
+		this.updateTip(instance, point, internalLine, actualTip, base, height);
+	}
+};
+
+//#endregion
+//#region src/nodes/stroke-single/line-tip-managers/circle.line-tip-manager.ts
+var WeaveCircleLineTipManager = class extends WeaveBaseLineTipManager {
+	constructor() {
+		super();
+	}
+	moveTipAlongLine(instance, point, internalLine, tip, distance) {
+		const { lineStartPoint, lineEndPoint } = this.getLinePoints(instance);
+		const circlePoint = movePointParallelToLine$1(lineStartPoint, lineEndPoint, point === "start" ? lineStartPoint : lineEndPoint, point === "start" ? distance : -distance);
+		if (point === "start") {
+			const internalPoints = internalLine.points();
+			internalLine.points([
+				circlePoint.x,
+				circlePoint.y,
+				internalPoints[2],
+				internalPoints[3]
+			]);
+		} else {
+			const internalPoints = internalLine.points();
+			internalLine.points([
+				internalPoints[0],
+				internalPoints[1],
+				circlePoint.x,
+				circlePoint.y
+			]);
+		}
+		tip.x(circlePoint.x);
+		tip.y(circlePoint.y);
+	}
+	destroy(instance, point) {
+		const actualTip = this.getTip(instance, point);
+		if (!actualTip) return;
+		actualTip.destroy();
+	}
+	render(instance, point) {
+		this.destroy(instance, point);
+		const actualLine = this.getInternalLine(instance);
+		if (!actualLine) return;
+		const stroke = instance.getAttrs().stroke ?? "black";
+		const radius = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Radius`] ?? 1.5;
+		const circle = new Konva.Circle({
+			id: `${instance.getAttrs().id}-tip-${point}`,
+			name: "lineTip",
+			nodeId: instance.getAttrs().id,
+			radius,
+			stroke: "black",
+			strokeWidth: 0,
+			strokeScaleEnabled: false,
+			fill: stroke
+		});
+		instance.add(circle);
+		this.moveTipAlongLine(instance, point, actualLine, circle, radius);
+	}
+	update(instance, point) {
+		const actualTip = this.getTip(instance, point);
+		if (!actualTip) return;
+		const actualLine = this.getInternalLine(instance);
+		if (!actualLine) return;
+		const stroke = instance.getAttrs().stroke ?? "black";
+		const radius = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Radius`] ?? 1.5;
+		actualTip.setAttrs({
+			fill: stroke,
+			radius
+		});
+		this.moveTipAlongLine(instance, point, actualLine, actualTip, radius);
+	}
+};
+
+//#endregion
+//#region src/nodes/stroke-single/line-tip-managers/none.line-tip-manager.ts
+var WeaveNoneLineTipManager = class extends WeaveBaseLineTipManager {
+	constructor() {
+		super();
+	}
+	destroy(instance, point) {
+		const actualTip = this.getTip(instance, point);
+		if (!actualTip) return;
+		actualTip.destroy();
+	}
+	render(instance, point) {
+		this.destroy(instance, point);
+		this.update(instance, point);
+	}
+	update(instance, point) {
+		const internalLine = this.getInternalLine(instance);
+		if (!internalLine) return;
+		const { lineStartPoint, lineEndPoint } = this.getLinePoints(instance);
+		const distance = instance.getAttrs().strokeWidth ?? 1;
+		const linePoint = movePointParallelToLine$1(lineStartPoint, lineEndPoint, point === "start" ? lineStartPoint : lineEndPoint, point === "start" ? distance / 2 : -(distance / 2));
+		if (point === "start") {
+			const internalPoints = internalLine.points();
+			internalLine.points([
+				linePoint.x,
+				linePoint.y,
+				internalPoints[2],
+				internalPoints[3]
+			]);
+		} else {
+			const internalPoints = internalLine.points();
+			internalLine.points([
+				internalPoints[0],
+				internalPoints[1],
+				linePoint.x,
+				linePoint.y
+			]);
+		}
+	}
+};
+
+//#endregion
+//#region src/nodes/stroke-single/line-tip-managers/square.line-tip-manager.ts
+var WeaveSquareLineTipManager = class extends WeaveBaseLineTipManager {
+	constructor() {
+		super();
+	}
+	moveTipAlongLine(instance, point, internalLine, tip, distance) {
+		const { lineStartPoint, lineEndPoint } = this.getLinePoints(instance);
+		const points = instance.getAttrs().linePoints;
+		const circlePoint = movePointParallelToLine$1(lineStartPoint, lineEndPoint, point === "start" ? lineStartPoint : lineEndPoint, point === "start" ? distance : -distance);
+		if (point === "start") {
+			const internalPoints = internalLine.points();
+			internalLine.points([
+				circlePoint.x,
+				circlePoint.y,
+				internalPoints[2],
+				internalPoints[3]
+			]);
+		} else {
+			const internalPoints = internalLine.points();
+			internalLine.points([
+				internalPoints[0],
+				internalPoints[1],
+				circlePoint.x,
+				circlePoint.y
+			]);
+		}
+		tip.x(circlePoint.x);
+		tip.y(circlePoint.y);
+		const angle = Math.atan2(points[3] - points[1], points[2] - points[0]);
+		const deg = angle * 180 / Math.PI;
+		tip.rotation(deg);
+	}
+	destroy(instance, point) {
+		const actualTip = this.getTip(instance, point);
+		if (!actualTip) return;
+		actualTip.destroy();
+	}
+	render(instance, point) {
+		this.destroy(instance, point);
+		const actualLine = this.getInternalLine(instance);
+		if (!actualLine) return;
+		const points = instance.getAttrs().linePoints;
+		const stroke = instance.getAttrs().stroke ?? "black";
+		const width = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Width`] ?? 3;
+		const square = new Konva.Rect({
+			id: `${instance.getAttrs().id}-tip-${point}`,
+			name: "lineTip",
+			nodeId: instance.getAttrs().id,
+			width,
+			height: width,
+			stroke: "black",
+			strokeWidth: 0,
+			strokeScaleEnabled: false,
+			fill: stroke,
+			offsetX: width / 2,
+			offsetY: width / 2
+		});
+		const angle = Math.atan2(points[3] - points[1], points[2] - points[0]);
+		const deg = angle * 180 / Math.PI;
+		square.rotation(deg);
+		instance.add(square);
+		this.moveTipAlongLine(instance, point, actualLine, square, width / 2);
+	}
+	update(instance, point) {
+		const actualTip = this.getTip(instance, point);
+		if (!actualTip) return;
+		const actualLine = this.getInternalLine(instance);
+		if (!actualLine) return;
+		const stroke = instance.getAttrs().stroke ?? "black";
+		const radius = instance.getAttrs()[`tip${this.capitalizeFirst(point)}Radius`] ?? 1.5;
+		actualTip.setAttrs({
+			fill: stroke,
+			radius
+		});
+		this.moveTipAlongLine(instance, point, actualLine, actualTip, radius);
+	}
+};
+
+//#endregion
+//#region src/nodes/stroke-single/stroke-single.ts
+var WeaveStrokeSingleNode = class extends WeaveNode {
+	startHandle = null;
+	endHandle = null;
+	nodeType = WEAVE_STROKE_SINGLE_NODE_TYPE;
+	tipManagers = {
+		[WEAVE_STROKE_SINGLE_NODE_TIP_TYPE.ARROW]: new WeaveArrowLineTipManager(),
+		[WEAVE_STROKE_SINGLE_NODE_TIP_TYPE.CIRCLE]: new WeaveCircleLineTipManager(),
+		[WEAVE_STROKE_SINGLE_NODE_TIP_TYPE.SQUARE]: new WeaveSquareLineTipManager(),
+		[WEAVE_STROKE_SINGLE_NODE_TIP_TYPE.NONE]: new WeaveNoneLineTipManager()
+	};
+	constructor(params) {
+		super();
+		this.config = mergeExceptArrays(WEAVE_STROKE_SINGLE_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 stroke = new Konva.Group({
+			...props,
+			name: `node ${WEAVE_STROKE_SINGLE_NODE_TYPE}`,
+			linePoints: props.linePoints,
+			strokeScaleEnabled: true,
+			overridesMouseControl: true
+		});
+		const internalLine = new Konva.Line({
+			...props,
+			id: `${stroke.getAttrs().id}-line`,
+			nodeId: stroke.getAttrs().id,
+			name: void 0,
+			x: 0,
+			y: 0,
+			strokeScaleEnabled: true,
+			lineJoin: "miter",
+			lineCap: "round"
+		});
+		stroke.add(internalLine);
+		this.setupDefaultNodeAugmentation(stroke);
+		const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
+		stroke.getTransformerProperties = function() {
+			const points = this.getAttrs().linePoints;
+			return {
+				...defaultTransformerProperties,
+				ignoreStroke: true,
+				rotateEnabled: points.length !== 4,
+				keepRatio: points.length !== 4,
+				flipEnabled: points.length === 4,
+				shiftBehavior: points.length === 4 ? "none" : "default",
+				shouldOverdrawWholeArea: points.length !== 4
+			};
+		};
+		let originalStartHandleVisibility = null;
+		let originalEndHandleVisibility = null;
+		stroke.on("dragstart", () => {
+			originalStartHandleVisibility = this.startHandle?.visible() ?? false;
+			originalEndHandleVisibility = this.endHandle?.visible() ?? false;
+			this.startHandle?.visible(false);
+			this.endHandle?.visible(false);
+		});
+		stroke.on("dragend", () => {
+			this.startHandle?.visible(originalStartHandleVisibility);
+			this.endHandle?.visible(originalEndHandleVisibility);
+			originalStartHandleVisibility = null;
+			originalEndHandleVisibility = null;
+		});
+		this.setupDefaultNodeEvents(stroke);
+		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) => {
+				this.teardownSelection();
+				if (nodes.length === 1 && nodes[0].instance.getAttrs().nodeType === WEAVE_STROKE_SINGLE_NODE_TYPE) {
+					const strokeSelected = this.instance.getStage().findOne(`#${nodes[0].instance.getAttrs().id}`);
+					if (!strokeSelected) return;
+					this.setupHandles();
+					this.showHandles(strokeSelected);
+					this.setupSelection(strokeSelected, true);
+				} else {
+					this.startHandle?.setAttr("strokeId", void 0);
+					this.startHandle?.visible(false);
+					this.endHandle?.setAttr("strokeId", void 0);
+					this.endHandle?.visible(false);
+				}
+			};
+			this.instance.addEventListener("onNodesChange", this.handleNodeChanges);
+		}
+		const tipStartStyle = stroke.getAttrs().tipStartStyle ?? "none";
+		const tipEndStyle = stroke.getAttrs().tipEndStyle ?? "none";
+		this.tipManagers[tipStartStyle]?.render(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+		this.tipManagers[tipEndStyle]?.render(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+		stroke.handleMouseover = () => {
+			this.setupSelection(stroke);
+		};
+		stroke.handleMouseout = () => {
+			const attrs = stroke.getAttrs();
+			if (attrs.isSelected) return;
+			const nodes = stroke.find(".hoverClone");
+			nodes.forEach((node) => node.destroy());
+		};
+		stroke.getTransformerProperties = () => {
+			return this.defaultGetTransformerProperties({
+				...this.config.transform,
+				rotateEnabled: false,
+				shouldOverdrawWholeArea: false,
+				borderStroke: "transparent"
+			});
+		};
+		stroke.allowedAnchors = function() {
+			return [];
+		};
+		stroke.canBeHovered = function() {
+			return false;
+		};
+		stroke.getNodeAnchors = function() {
+			return [];
+		};
+		return stroke;
+	}
+	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 tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
+				if (tr) tr.hide();
+				const strokeId = e.target.getAttr("strokeId");
+				const stroke = this.instance.getStage().findOne(`#${strokeId}`);
+				if (!stroke) return;
+				const points = stroke.getAttrs().linePoints;
+				if (points.length === 4) stroke.setAttr("eventTarget", true);
+				this.instance.emitEvent("onDrag", e.target);
+			});
+			startHandle.on("dragmove", (e) => {
+				const draggedTarget = e.target;
+				const strokeId = draggedTarget.getAttr("strokeId");
+				const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
+				if (!draggedStroke) return;
+				const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
+				if (!internalLine) return;
+				const points = draggedStroke.getAttrs().linePoints;
+				if (points.length !== 4) return;
+				this.teardownSelection();
+				const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
+				draggedStroke.setAttrs({ linePoints: [
+					newLinePoint.x,
+					newLinePoint.y,
+					points[2],
+					points[3]
+				] });
+				this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+				const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
+				this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+				const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
+				this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+				this.setupSelection(draggedStroke);
+			});
+			startHandle.on("dragend", (e) => {
+				const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
+				if (tr) tr.show();
+				const draggedTarget = e.target;
+				const strokeId = draggedTarget.getAttr("strokeId");
+				const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
+				if (!draggedStroke) return;
+				const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
+				if (!internalLine) return;
+				const points = draggedStroke.getAttrs().linePoints;
+				if (points.length !== 4) return;
+				this.teardownSelection();
+				const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
+				draggedStroke.setAttrs({ linePoints: [
+					newLinePoint.x,
+					newLinePoint.y,
+					points[2],
+					points[3]
+				] });
+				this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+				const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
+				this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+				const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
+				this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+				this.setupSelection(draggedStroke);
+				this.instance.updateNode(this.serialize(draggedStroke));
+				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 tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
+				if (tr) tr.hide();
+				const strokeId = e.target.getAttr("strokeId");
+				const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
+				if (!draggedStroke) return;
+				const points = draggedStroke.getAttrs().linePoints;
+				if (points.length !== 4) return;
+				if (points.length === 4) draggedStroke.setAttr("eventTarget", true);
+				this.instance.emitEvent("onDrag", e.target);
+			});
+			endHandle.on("dragmove", (e) => {
+				const draggedTarget = e.target;
+				const strokeId = draggedTarget.getAttr("strokeId");
+				const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
+				if (!draggedStroke) return;
+				const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
+				if (!internalLine) return;
+				const points = draggedStroke.getAttrs().linePoints;
+				if (points.length !== 4) return;
+				this.teardownSelection();
+				const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
+				draggedStroke.setAttrs({ linePoints: [
+					points[0],
+					points[1],
+					newLinePoint.x,
+					newLinePoint.y
+				] });
+				this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+				const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
+				this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+				const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
+				this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+				this.setupSelection(draggedStroke);
+			});
+			endHandle.on("dragend", (e) => {
+				const tr = this.instance.getPlugin("nodesSelection")?.getTransformer();
+				if (tr) tr.show();
+				const draggedTarget = e.target;
+				const strokeId = draggedTarget.getAttr("strokeId");
+				const draggedStroke = this.instance.getStage().findOne(`#${strokeId}`);
+				if (!draggedStroke) return;
+				const internalLine = draggedStroke.findOne(`#${draggedStroke.getAttrs().id}-line`);
+				if (!internalLine) return;
+				const points = draggedStroke.getAttrs().linePoints;
+				if (points.length !== 4) return;
+				this.teardownSelection();
+				const newLinePoint = this.getLinePointFromHandle(draggedStroke, e);
+				draggedStroke.setAttrs({ linePoints: [
+					points[0],
+					points[1],
+					newLinePoint.x,
+					newLinePoint.y
+				] });
+				this.positionHandle(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+				const tipStartStyle = draggedStroke.getAttrs().tipStartStyle ?? "none";
+				this.tipManagers[tipStartStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+				const tipEndStyle = draggedStroke.getAttrs().tipEndStyle ?? "none";
+				this.tipManagers[tipEndStyle]?.update(draggedStroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+				this.setupSelection(draggedStroke);
+				this.instance.updateNode(this.serialize(draggedStroke));
+				this.instance.emitEvent("onDrag", null);
+			});
+			this.endHandle = endHandle;
+			this.endHandle.visible(false);
+			this.instance.getSelectionLayer()?.add(this.endHandle);
+		}
+	}
+	showHandles(stroke) {
+		if (this.startHandle === null || this.endHandle === null) return;
+		this.startHandle.setAttr("strokeId", stroke.getAttrs().id);
+		this.startHandle.setAttr("targetNode", stroke.getAttrs().id);
+		this.startHandle.visible(true);
+		this.startHandle.moveToTop();
+		this.positionHandle(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+		this.endHandle.setAttr("strokeId", stroke.getAttrs().id);
+		this.endHandle.setAttr("targetNode", stroke.getAttrs().id);
+		this.endHandle.visible(true);
+		this.endHandle.moveToTop();
+		this.positionHandle(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+	}
+	onUpdate(nodeInstance, nextProps) {
+		nodeInstance.setAttrs({ ...nextProps });
+		const stroke = nodeInstance;
+		const tipStartStyle = nextProps.tipStartStyle ?? "none";
+		const tipEndStyle = nextProps.tipEndStyle ?? "none";
+		this.tipManagers[tipStartStyle]?.render(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+		this.tipManagers[tipEndStyle]?.render(stroke, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+		const internalLine = stroke.findOne(`#${stroke.getAttrs().id}-line`);
+		if (internalLine) internalLine.setAttrs({
+			name: void 0,
+			dash: nextProps.dash,
+			fill: nextProps.fill,
+			stroke: nextProps.stroke,
+			strokeWidth: nextProps.strokeWidth,
+			lineJoin: "miter",
+			lineCap: "round"
+		});
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
+	}
+	scaleReset(node) {
+		const scale = node.scale();
+		const oldPoints = node.getAttrs().linePoints;
+		const newPoints = [];
+		for (let i = 0; i < oldPoints.length; i += 2) {
+			const x = oldPoints[i] * scale.x;
+			const y = oldPoints[i + 1] * scale.y;
+			newPoints.push(x, y);
+		}
+		node.setAttrs({ linePoints: newPoints });
+		node.scale({
+			x: 1,
+			y: 1
+		});
+	}
+	positionHandle(instance, point) {
+		const stage = this.instance.getStage();
+		const points = instance.getAttrs().linePoints;
+		const internalLine = instance.findOne(`#${instance.getAttrs().id}-line`);
+		if (!internalLine) return;
+		if (point === "start" && this.startHandle) {
+			const stagePoint = internalLine.getAbsoluteTransform().point({
+				x: points[0],
+				y: points[1]
+			});
+			const localPoint = stage.getAbsoluteTransform().copy().invert().point(stagePoint);
+			this.startHandle.x(localPoint.x);
+			this.startHandle.y(localPoint.y);
+		}
+		if (point === "end" && this.endHandle) {
+			const stagePoint = internalLine.getAbsoluteTransform().point({
+				x: points[2],
+				y: points[3]
+			});
+			const localPoint = stage.getAbsoluteTransform().copy().invert().point(stagePoint);
+			this.endHandle.x(localPoint.x);
+			this.endHandle.y(localPoint.y);
+		}
+	}
+	getLinePointFromHandle(instance, e) {
+		const stage = this.instance.getStage();
+		const stagePoint = stage.getAbsoluteTransform().point(e.target.position());
+		const localPoint = instance.getAbsoluteTransform().copy().invert().point(stagePoint);
+		return localPoint;
+	}
+	setupSelection(instance, markSelected = false) {
+		if (markSelected) instance.setAttrs({ isSelected: true });
+		const hoverClone = instance.findOne(".hoverClone");
+		if (hoverClone) return;
+		const internalLine = instance.findOne(`#${instance.getAttrs().id}-line`);
+		if (!internalLine) return;
+		const internalLineHover = internalLine.clone();
+		internalLineHover.setAttrs({
+			name: "hoverClone",
+			stroke: "#1a1aff",
+			listening: false,
+			draggable: false,
+			strokeWidth: 1,
+			points: instance.getAttrs().linePoints,
+			strokeScaleEnabled: false
+		});
+		instance.add(internalLineHover);
+		internalLineHover.moveToTop();
+	}
+	teardownSelection() {
+		const stage = this.instance.getStage();
+		const arrows = stage.find(`.${WEAVE_STROKE_SINGLE_NODE_TYPE}`);
+		for (let i = 0; i < arrows.length; i++) {
+			const arrow = arrows[i];
+			arrow.setAttrs({ isSelected: false });
+			const nodes = arrow.find(".hoverClone");
+			if (nodes.length > 0) nodes.forEach((node) => node.destroy());
+		}
+	}
+	updateLine(instance) {
+		const tipStartStyle = instance.getAttrs().tipStartStyle ?? "none";
+		this.tipManagers[tipStartStyle]?.update(instance, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.START);
+		const tipEndStyle = instance.getAttrs().tipEndStyle ?? "none";
+		this.tipManagers[tipEndStyle]?.update(instance, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE.END);
+	}
+};
+
+//#endregion
+//#region src/nodes/comment/constants.ts
+const WEAVE_COMMENT_STATUS = {
+	PENDING: "pending",
+	RESOLVED: "resolved"
+};
+const WEAVE_COMMENT_CREATE_ACTION = {
+	CREATE: "create",
+	CLOSE: "close"
+};
+const WEAVE_COMMENT_VIEW_ACTION = {
+	REPLY: "reply",
+	MARK_RESOLVED: "markResolved",
+	EDIT: "edit",
+	DELETE: "delete",
+	CLOSE: "close"
+};
+const WEAVE_COMMENT_NODE_ACTION = {
 	IDLE: "idle",
 	CREATING: "creating",
 	VIEWING: "viewing"
@@ -27365,7 +28667,7 @@ var WeaveVideoNode = class extends WeaveNode {
 		const videoPlaceholder = video.findOne(`#${id}-video-placeholder`);
 		const videoIconGroup = video.findOne(`#${id}-video-icon-group`);
 		if (!videoPlaceholder || !videoIconGroup) return;
-		const realVideoPlaceholderURL = this.config.urlTransformer?.(videoProps.videoPlaceholderURL ?? "") ?? videoProps.videoPlaceholderURL;
+		const realVideoPlaceholderURL = this.config.urlTransformer?.(videoProps.videoPlaceholderURL ?? "", video) ?? videoProps.videoPlaceholderURL;
 		this.videoPlaceholder[id] = Konva.Util.createImageElement();
 		this.videoPlaceholder[id].crossOrigin = this.config.crossOrigin;
 		this.videoPlaceholder[id].src = realVideoPlaceholderURL;
@@ -27398,7 +28700,7 @@ var WeaveVideoNode = class extends WeaveNode {
 		const videoPlaceholder = video.findOne(`#${id}-video-placeholder`);
 		const videoPlayer = video.findOne(`#${id}-video`);
 		if (!bg || !videoIconGroup || !videoProgress || !videoPlayer || !videoPlaceholder) return;
-		const realVideoURL = this.config.urlTransformer?.(videoProps.videoURL ?? "") ?? videoProps.videoURL;
+		const realVideoURL = this.config.urlTransformer?.(videoProps.videoURL ?? "", video) ?? videoProps.videoURL;
 		if (realVideoURL) videoSource.src = realVideoURL;
 		videoSource.addEventListener("loadeddata", () => {
 			videoSource.currentTime = 0;
@@ -27681,7 +28983,7 @@ var WeaveVideoNode = class extends WeaveNode {
 				playing: true,
 				paused: false
 			};
-			this.videoSource[videoId].play();
+			this.videoSource[videoId]?.play?.();
 			this.anim.start();
 			this.instance.emitEvent("onVideoPlay", { nodeId: videoId });
 		}
@@ -29258,7 +30560,8 @@ var WeaveConnectorNode = class extends WeaveNode {
 			name: "node",
 			startInfoLoaded: false,
 			endInfoLoaded: false,
-			draggable: false
+			draggable: false,
+			overridesMouseControl: true
 		});
 		if (!connector.getAttrs().lineType) connector.setAttrs({
 			lineType: WEAVE_CONNECTOR_NODE_LINE_TYPE.STRAIGHT,
@@ -29749,6 +31052,8 @@ var WeaveConnectorNode = class extends WeaveNode {
 		delete cleanedAttrs.initialized;
 		delete cleanedAttrs.startInfoLoaded;
 		delete cleanedAttrs.endInfoLoaded;
+		delete cleanedAttrs.overridesMouseControl;
+		delete cleanedAttrs.dragBoundFunc;
 		return {
 			key: attrs.id ?? "",
 			type: attrs.nodeType,
@@ -29980,6 +31285,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 				canZoomIn: this.canZoomIn(),
 				canZoomOut: this.canZoomOut()
 			};
+			stage.fire("onZoomChange", {}, true);
 			this.instance.emitEvent("onZoomChange", callbackParams);
 		}
 	}
@@ -32781,6 +34087,7 @@ var WeaveArrowToolAction = class extends WeaveAction {
 					...clonedLine.getAttrs(),
 					hitStrokeWidth: 16
 				});
+				delete finalArrow.props.dragBoundFunc;
 				this.instance.addNode(finalArrow, this.container?.getAttrs().id);
 				this.instance.emitEvent("onAddedArrow");
 			}
@@ -32816,6 +34123,276 @@ var WeaveArrowToolAction = class extends WeaveAction {
 	}
 };
 
+//#endregion
+//#region src/actions/stroke-tool/constants.ts
+const WEAVE_STROKE_TOOL_ACTION_NAME = "strokeTool";
+const WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES = ["arrowTool"];
+const WEAVE_STROKE_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["ADDING"]: "adding",
+	["DEFINING_SIZE"]: "definingSize",
+	["ADDED"]: "added"
+};
+const WEAVE_STROKE_TOOL_DEFAULT_CONFIG = { snapAngles: {
+	angles: [
+		0,
+		45,
+		90,
+		135,
+		180,
+		225,
+		270,
+		315
+	],
+	activateThreshold: 5,
+	releaseThreshold: 10
+} };
+
+//#endregion
+//#region src/actions/stroke-tool/stroke-tool.ts
+var WeaveStrokeToolAction = class extends WeaveAction {
+	initialized = false;
+	initialCursor = null;
+	snappedAngle = null;
+	shiftPressed = false;
+	onPropsChange = void 0;
+	onInit = void 0;
+	constructor(params) {
+		super();
+		this.config = mergeExceptArrays(WEAVE_STROKE_TOOL_DEFAULT_CONFIG, params?.config ?? {});
+		this.pointers = new Map();
+		this.initialized = false;
+		this.state = WEAVE_STROKE_TOOL_STATE.IDLE;
+		this.arrowId = null;
+		this.shiftPressed = false;
+		this.tempLineId = 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 WEAVE_STROKE_TOOL_ACTION_NAME;
+	}
+	hasAliases() {
+		return true;
+	}
+	getAliases() {
+		return WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES;
+	}
+	initProps() {
+		return {
+			stroke: "#000000ff",
+			strokeWidth: 1,
+			opacity: 1,
+			tipStartStyle: "none",
+			tipEndStyle: "none"
+		};
+	}
+	setupEvents() {
+		const stage = this.instance.getStage();
+		window.addEventListener("keydown", (e) => {
+			if (e.code === "Enter" && this.instance.getActiveAction() === WEAVE_STROKE_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+			if (e.code === "Escape" && this.instance.getActiveAction() === WEAVE_STROKE_TOOL_ACTION_NAME) {
+				this.cancelAction();
+				return;
+			}
+			if (e.key === "Shift" && this.instance.getActiveAction() === WEAVE_STROKE_TOOL_ACTION_NAME) {
+				this.snappedAngle = null;
+				this.shiftPressed = true;
+			}
+		});
+		window.addEventListener("keyup", (e) => {
+			if (e.key === "Shift" && this.instance.getActiveAction() === WEAVE_STROKE_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() === WEAVE_STROKE_TOOL_ACTION_NAME) {
+				this.state = WEAVE_STROKE_TOOL_STATE.ADDING;
+				return;
+			}
+			if (!this.tempLineNode && this.state === WEAVE_STROKE_TOOL_STATE.ADDING) this.handleAdding();
+			if (this.tempLineNode && this.state === WEAVE_STROKE_TOOL_STATE.ADDING) this.state = WEAVE_STROKE_TOOL_STATE.DEFINING_SIZE;
+		});
+		stage.on("pointermove", () => {
+			if (this.state === WEAVE_STROKE_TOOL_STATE.IDLE) return;
+			this.setCursor();
+			if (this.pointers.size === 2 && this.instance.getActiveAction() === WEAVE_STROKE_TOOL_ACTION_NAME) {
+				this.state = WEAVE_STROKE_TOOL_STATE.ADDING;
+				return;
+			}
+			if (this.state === WEAVE_STROKE_TOOL_STATE.DEFINING_SIZE) this.handleMovement();
+		});
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (this.state === WEAVE_STROKE_TOOL_STATE.DEFINING_SIZE) this.handleSettingSize();
+		});
+		this.initialized = true;
+	}
+	setState(state) {
+		this.state = state;
+	}
+	addLine() {
+		this.setCursor();
+		this.setFocusStage();
+		this.instance.emitEvent("onAddingStroke", { actionName: this.instance.getActiveAction() ?? WEAVE_STROKE_TOOL_ACTION_NAME });
+		this.shiftPressed = false;
+		this.clickPoint = null;
+		this.setState(WEAVE_STROKE_TOOL_STATE.ADDING);
+	}
+	handleAdding() {
+		const { mousePoint, container, measureContainer } = this.instance.getMousePointer();
+		this.clickPoint = mousePoint;
+		this.container = container;
+		this.measureContainer = measureContainer;
+		this.arrowId = v4_default();
+		this.tempLineId = v4_default();
+		const nodeHandler = this.instance.getNodeHandler(WEAVE_STROKE_SINGLE_NODE_TYPE);
+		if (!this.tempLineNode && nodeHandler) {
+			this.tempLineNode = nodeHandler.onRender({
+				...this.props,
+				x: this.clickPoint?.x ?? 0,
+				y: this.clickPoint?.y ?? 0,
+				strokeScaleEnabled: true,
+				linePoints: [
+					0,
+					0,
+					1,
+					1
+				]
+			});
+			this.measureContainer?.add(this.tempLineNode);
+			this.setState(WEAVE_STROKE_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) {
+			const linePoints = this.tempLineNode.getAttrs().linePoints;
+			let dx = mousePoint.x - (this.tempLineNode.x() + linePoints[0]);
+			let dy = mousePoint.y - (this.tempLineNode.y() + linePoints[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 = linePoints[0] + dx;
+			pos.y = linePoints[1] + dy;
+		} else {
+			pos.x = mousePoint.x - this.tempLineNode.x();
+			pos.y = mousePoint.y - this.tempLineNode.y();
+		}
+		return pos;
+	}
+	handleSettingSize() {
+		if (this.arrowId && this.tempLineNode && this.measureContainer) this.cancelAction();
+	}
+	handleMovement() {
+		if (this.state !== WEAVE_STROKE_TOOL_STATE.DEFINING_SIZE) return;
+		const nodeHandler = this.instance.getNodeHandler(WEAVE_STROKE_SINGLE_NODE_TYPE);
+		if (this.tempLineNode && this.measureContainer && nodeHandler) {
+			const pos = this.defineFinalPoint();
+			const linePoints = this.tempLineNode.getAttrs().linePoints;
+			this.tempLineNode.setAttrs({
+				...this.props,
+				linePoints: [
+					linePoints[0],
+					linePoints[1],
+					pos.x,
+					pos.y
+				]
+			});
+			nodeHandler.updateLine(this.tempLineNode);
+		}
+	}
+	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();
+		let nodeCreated = false;
+		if (this.arrowId && this.tempLineNode?.getAttrs().linePoints.length === 4 && !this.tempLineNode?.getAttrs().linePoints.every((coord) => coord === 0)) {
+			const nodeHandler = this.instance.getNodeHandler(WEAVE_STROKE_SINGLE_NODE_TYPE);
+			if (nodeHandler) {
+				const clonedLine = this.tempLineNode.clone();
+				this.tempLineNode.destroy();
+				const finalLine = nodeHandler.create(this.arrowId, {
+					...this.props,
+					...clonedLine.getAttrs(),
+					hitStrokeWidth: 16
+				});
+				delete finalLine.props.dragBoundFunc;
+				console.log("node", finalLine);
+				this.instance.addNode(finalLine, this.container?.getAttrs().id);
+				this.instance.emitEvent("onAddedStroke", { actionName: this.instance.getActiveAction() ?? WEAVE_STROKE_TOOL_ACTION_NAME });
+				nodeCreated = true;
+			}
+		}
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodeCreated && selectionPlugin) {
+			const node = stage.findOne(`#${this.arrowId}`);
+			if (node) selectionPlugin.setSelectedNodes([node]);
+			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		}
+		stage.container().style.cursor = "default";
+		this.initialCursor = null;
+		this.arrowId = null;
+		this.tempLineId = null;
+		this.tempLineNode = null;
+		this.container = void 0;
+		this.measureContainer = void 0;
+		this.clickPoint = null;
+		this.setState(WEAVE_STROKE_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/actions/regular-polygon-tool/constants.ts
 const REGULAR_POLYGON_TOOL_ACTION_NAME = "regularPolygonTool";
@@ -37241,5 +38818,5 @@ function getJSONFromYjsBinary(actualState) {
 }
 
 //#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, CONNECTOR_TOOL_ACTION_NAME, CONNECTOR_TOOL_DEFAULT_CONFIG, CONNECTOR_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, MEASURE_TOOL_ACTION_NAME, MEASURE_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_CONNECTOR_NODE_ANCHOR_ORIGIN, WEAVE_CONNECTOR_NODE_DECORATOR_TYPE, WEAVE_CONNECTOR_NODE_DEFAULT_CONFIG, WEAVE_CONNECTOR_NODE_LINE_ORIGIN, WEAVE_CONNECTOR_NODE_LINE_TYPE, WEAVE_CONNECTOR_NODE_TYPE, 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_MEASURE_NODE_DEFAULT_CONFIG, WEAVE_MEASURE_NODE_TYPE, WEAVE_MEASURE_TOOL_DEFAULT_CONFIG, 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_STAGE_PANNING_THROTTLE_MS, 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_PRESENCE_CONFIG_DEFAULT_PROPS, WEAVE_USERS_PRESENCE_PLUGIN_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_PRESENCE_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveConnectorNode, WeaveConnectorToolAction, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveLineToolAction, WeaveMeasureNode, WeaveMeasureToolAction, 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, WeaveUsersPresencePlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getJSONFromYjsBinary, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isArray, isIOS, isInShadowDOM, isNodeInSelection, isObject, isServer, mapJsonToYjsArray, mapJsonToYjsElements, mapJsonToYjsMap, memoize, mergeExceptArrays, moveNodeToContainer, resetScale, weavejsToYjsBinary };
+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, CONNECTOR_TOOL_ACTION_NAME, CONNECTOR_TOOL_DEFAULT_CONFIG, CONNECTOR_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, MEASURE_TOOL_ACTION_NAME, MEASURE_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_CONNECTOR_NODE_ANCHOR_ORIGIN, WEAVE_CONNECTOR_NODE_DECORATOR_TYPE, WEAVE_CONNECTOR_NODE_DEFAULT_CONFIG, WEAVE_CONNECTOR_NODE_LINE_ORIGIN, WEAVE_CONNECTOR_NODE_LINE_TYPE, WEAVE_CONNECTOR_NODE_TYPE, 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_ANCHOR_POSITION, 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_MEASURE_NODE_DEFAULT_CONFIG, WEAVE_MEASURE_NODE_TYPE, WEAVE_MEASURE_TOOL_DEFAULT_CONFIG, 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_STAGE_PANNING_THROTTLE_MS, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE, WEAVE_STROKE_SINGLE_NODE_TIP_TYPE, WEAVE_STROKE_SINGLE_NODE_TYPE, WEAVE_STROKE_TOOL_ACTION_NAME, WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES, WEAVE_STROKE_TOOL_DEFAULT_CONFIG, WEAVE_STROKE_TOOL_STATE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_PRESENCE_CONFIG_DEFAULT_PROPS, WEAVE_USERS_PRESENCE_PLUGIN_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_PRESENCE_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveConnectorNode, WeaveConnectorToolAction, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveLineToolAction, WeaveMeasureNode, WeaveMeasureToolAction, 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, WeaveStrokeSingleNode, WeaveStrokeToolAction, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersPresencePlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getJSONFromYjsBinary, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isArray, isIOS, isInShadowDOM, isNodeInSelection, isObject, isServer, mapJsonToYjsArray, mapJsonToYjsElements, mapJsonToYjsMap, memoize, mergeExceptArrays, moveNodeToContainer, resetScale, weavejsToYjsBinary };
 //# sourceMappingURL=sdk.js.map