@inditextech/weave-sdk 5.5.0 → 5.6.0

package/dist/types.js

@@ -5937,6 +5937,7 @@ const MOVE_TOOL_STATE = {
 };
 //#endregion
 //#region src/nodes/node.ts
+const nodeInstanceListeners = /* @__PURE__ */ new WeakMap();
 const augmentKonvaNodeClass = (config) => {
 	const { transform } = config ?? {};
 	Konva.Node.prototype.getTransformerProperties = function() {
@@ -5952,6 +5953,8 @@ const augmentKonvaNodeClass = (config) => {
 	Konva.Node.prototype.triggerCrop = function() {};
 	Konva.Node.prototype.closeCrop = function() {};
 	Konva.Node.prototype.resetCrop = function() {};
+	Konva.Node.prototype.flipHorizontal = function() {};
+	Konva.Node.prototype.flipVertical = function() {};
 	Konva.Node.prototype.dblClick = function() {};
 	Konva.Node.prototype.click = function() {};
 	Konva.Node.prototype.allowedAnchors = function() {
@@ -6037,6 +6040,8 @@ var WeaveNode = class {
 		};
 		node.updatePosition = function() {};
 		node.resetCrop = function() {};
+		node.flipHorizontal = function() {};
+		node.flipVertical = function() {};
 		node.handleMouseover = function() {};
 		node.handleMouseout = function() {};
 		node.handleSelectNode = function() {};
@@ -6207,7 +6212,7 @@ var WeaveNode = class {
 			node.draggable(false);
 		};
 		if (node.getAttrs().locked ?? false) {
-			this.instance.removeEventListener("onNodesChange", handleNodesChange);
+			this.removeNodeInstanceListeners(node, false);
 			node.off("transformstart");
 			node.off("transform");
 			node.off("transformend");
@@ -6217,7 +6222,7 @@ var WeaveNode = class {
 			node.off("pointerover");
 			node.off("pointerleave");
 		} else {
-			this.instance.addEventListener("onNodesChange", handleNodesChange);
+			this.setNodeInstanceListener(node, "onNodesChange", handleNodesChange);
 			node.off("transformstart");
 			node.on("transformstart", (e) => {
 				if (e.target.getAttrs().strokeScaleEnabled !== false) {
@@ -6276,7 +6281,7 @@ var WeaveNode = class {
 			});
 			const stage = this.instance.getStage();
 			let originalPosition = null;
-			this.instance.addEventListener("onSelectionState", (state) => {
+			this.setNodeInstanceListener(node, "onSelectionState", (state) => {
 				const selectedNodes = this.getSelectionPlugin()?.getSelectedNodes() ?? [];
 				if (!state && selectedNodes?.some((n) => n.getAttrs().id === node.getAttrs().id)) originalPosition = node.getAbsolutePosition();
 			});
@@ -6592,8 +6597,39 @@ var WeaveNode = class {
 	async onRegister() {}
 	onAdd(nodeInstance) {}
 	onDestroy(nodeInstance) {
+		this.removeNodeInstanceListeners(nodeInstance);
 		nodeInstance.destroy();
 	}
+	/**
+	* Registers a Weave instance listener on behalf of a node. Only one listener
+	* is kept per node and event: registering the same event again for the same
+	* node replaces the previous listener, including the ones registered by
+	* setupDefaultNodeEvents (onNodesChange, onSelectionState).
+	*/
+	setNodeInstanceListener(node, event, callback) {
+		let listeners = nodeInstanceListeners.get(node);
+		if (!listeners) {
+			listeners = /* @__PURE__ */ new Map();
+			nodeInstanceListeners.set(node, listeners);
+		}
+		const previous = listeners.get(event);
+		if (previous) this.instance.removeEventListener(event, previous);
+		listeners.set(event, callback);
+		this.instance.addEventListener(event, callback);
+	}
+	/**
+	* Removes the listeners registered with setNodeInstanceListener for the node
+	* and, unless disabled, for its descendants.
+	*/
+	removeNodeInstanceListeners(node, includeDescendants = true) {
+		const nodes = includeDescendants && node instanceof Konva.Container ? [node, ...node.find(() => true)] : [node];
+		for (const actNode of nodes) {
+			const listeners = nodeInstanceListeners.get(actNode);
+			if (!listeners) continue;
+			for (const [event, callback] of listeners) this.instance.removeEventListener(event, callback);
+			nodeInstanceListeners.delete(actNode);
+		}
+	}
 	onDestroyInstance() {}
 	serialize(instance) {
 		const attrs = instance.getAttrs();
@@ -9466,7 +9502,7 @@ var WeaveRegisterManager = class {
 };
 //#endregion
 //#region package.json
-var version = "5.5.0";
+var version = "5.6.0";
 //#endregion
 //#region src/managers/setup.ts
 var WeaveSetupManager = class {
@@ -11187,6 +11223,9 @@ var Weave = class {
 	getBoundingBox(nodes, config) {
 		return getBoundingBox(nodes, config);
 	}
+	flipImage(node, options) {
+		this.getNodeHandler("image")?.flipImage(node, options);
+	}
 	stateTransactional(callback, origin) {
 		this.stateManager.stateTransactional(callback, origin);
 	}
@@ -14487,24 +14526,64 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.onClose = () => {};
 		this.handleHide = this.hide.bind(this);
 	}
-	setupCropImage(imageAttrs, visible) {
-		this.cropGroup.destroyChildren();
+	/**
+	* Mirrors the start of a segment inside a container along one axis:
+	* the segment [start, start + length] inside [0, size] becomes
+	* [size - start - length, size - start]. Used to convert between visual
+	* space (what the user sees on a flipped image) and source space (where
+	* the crop information is stored). It is its own inverse.
+	*/
+	static mirrorOffset(start, length, size) {
+		return size - start - length;
+	}
+	/**
+	* Returns the offset (in uncropped display units) of the visible crop
+	* window inside the visually rendered uncropped image, along with the real
+	* scale. When the image is flipped the stored crop (source space) is
+	* mirrored to match what the user sees.
+	*/
+	getVisualCropOffset(imageAttrs) {
 		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
 		const realScale = actualScale / (imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale);
+		let x = 0;
+		let y = 0;
+		if (imageAttrs.cropInfo) {
+			x = imageAttrs.cropInfo.x * realScale;
+			y = imageAttrs.cropInfo.y * realScale;
+			if (imageAttrs.flipX === true) x = WeaveImageCrop.mirrorOffset(x, imageAttrs.cropInfo.width * realScale, imageAttrs.uncroppedImage.width);
+			if (imageAttrs.flipY === true) y = WeaveImageCrop.mirrorOffset(y, imageAttrs.cropInfo.height * realScale, imageAttrs.uncroppedImage.height);
+		}
+		return {
+			x,
+			y,
+			realScale
+		};
+	}
+	setupCropImage(imageAttrs, visible) {
+		this.cropGroup.destroyChildren();
+		const { x, y, realScale } = this.getVisualCropOffset(imageAttrs);
+		const flipX = imageAttrs.flipX === true;
+		const flipY = imageAttrs.flipY === true;
 		this.cropImage = new Konva.Image({
-			x: imageAttrs.cropInfo ? -imageAttrs.cropInfo.x * realScale : 0,
-			y: imageAttrs.cropInfo ? -imageAttrs.cropInfo.y * realScale : 0,
+			x: -x,
+			y: -y,
 			width: imageAttrs.uncroppedImage.width,
 			height: imageAttrs.uncroppedImage.height,
-			scaleX: 1,
-			scaleY: 1,
+			scaleX: flipX ? -1 : 1,
+			scaleY: flipY ? -1 : 1,
+			offsetX: flipX ? imageAttrs.uncroppedImage.width : 0,
+			offsetY: flipY ? imageAttrs.uncroppedImage.height : 0,
 			image: this.internalImage.image(),
 			crop: void 0,
 			visible,
 			listening: false,
 			draggable: false
 		});
-		return { realScale };
+		return {
+			realScale,
+			offsetX: x,
+			offsetY: y
+		};
 	}
 	show(onClose, options) {
 		this.onClose = onClose;
@@ -14515,9 +14594,9 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.image.listening(false);
 		const imageAttrs = this.image.getAttrs();
 		this.internalImage.hide();
-		const { realScale } = this.setupCropImage(imageAttrs, true);
-		this.imageOffsetX = imageAttrs.cropInfo ? imageAttrs.cropInfo.x * realScale : 0;
-		this.imageOffsetY = imageAttrs.cropInfo ? imageAttrs.cropInfo.y * realScale : 0;
+		const { realScale, offsetX, offsetY } = this.setupCropImage(imageAttrs, true);
+		this.imageOffsetX = offsetX;
+		this.imageOffsetY = offsetY;
 		const cropModeConfiguration = this.node.getConfiguration().cropMode;
 		this.cropRect = new Konva.Rect({
 			x: 0,
@@ -14565,7 +14644,10 @@ var WeaveImageCrop = class WeaveImageCrop {
 				const center = this.cropImage.getAbsolutePosition();
 				const width = this.cropImage.width() * stage.scaleX();
 				const height = this.cropImage.height() * stage.scaleY();
-				const offset = this.cropImage.offset();
+				const offset = {
+					x: this.cropImage.scaleX() < 0 ? 0 : this.cropImage.offsetX(),
+					y: this.cropImage.scaleY() < 0 ? 0 : this.cropImage.offsetY()
+				};
 				const corners = [
 					{
 						x: -offset.x,
@@ -14909,11 +14991,15 @@ var WeaveImageCrop = class WeaveImageCrop {
 		if (!intersectionRect) return;
 		const imageAttrs = this.image.getAttrs();
 		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
+		let sourceX = clipRectGroup.x + this.imageOffsetX;
+		let sourceY = clipRectGroup.y + this.imageOffsetY;
+		if (imageAttrs.flipX === true) sourceX = WeaveImageCrop.mirrorOffset(sourceX, clipRectGroup.width, imageAttrs.uncroppedImage.width);
+		if (imageAttrs.flipY === true) sourceY = WeaveImageCrop.mirrorOffset(sourceY, clipRectGroup.height, imageAttrs.uncroppedImage.height);
 		const realClipRect = {
 			scaleX: actualScale,
 			scaleY: actualScale,
-			x: WeaveImageCrop.roundTo6Decimals(clipRectGroup.x + this.imageOffsetX),
-			y: WeaveImageCrop.roundTo6Decimals(clipRectGroup.y + this.imageOffsetY),
+			x: WeaveImageCrop.roundTo6Decimals(sourceX),
+			y: WeaveImageCrop.roundTo6Decimals(sourceY),
 			width: WeaveImageCrop.roundTo6Decimals(clipRectGroup.width),
 			height: WeaveImageCrop.roundTo6Decimals(clipRectGroup.height)
 		};
@@ -14955,16 +15041,18 @@ var WeaveImageCrop = class WeaveImageCrop {
 		if (!intersectionRect || !intersectionRectAbs) return;
 		const imageAttrs = this.image.getAttrs();
 		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
-		const realScale = actualScale / (imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale);
-		const imageOffsetX = imageAttrs.cropInfo ? imageAttrs.cropInfo.x * realScale : 0;
-		const imageOffsetY = imageAttrs.cropInfo ? imageAttrs.cropInfo.y * realScale : 0;
+		const { x: imageOffsetX, y: imageOffsetY } = this.getVisualCropOffset(imageAttrs);
 		const diffX = intersectionRect.x - imageRect.x;
 		const diffY = intersectionRect.y - imageRect.y;
+		let sourceX = diffX + imageOffsetX;
+		let sourceY = diffY + imageOffsetY;
+		if (imageAttrs.flipX === true) sourceX = WeaveImageCrop.mirrorOffset(sourceX, intersectionRect.width, imageAttrs.uncroppedImage.width);
+		if (imageAttrs.flipY === true) sourceY = WeaveImageCrop.mirrorOffset(sourceY, intersectionRect.height, imageAttrs.uncroppedImage.height);
 		const realClipRect = {
 			scaleX: actualScale,
 			scaleY: actualScale,
-			x: WeaveImageCrop.roundTo6Decimals(diffX + imageOffsetX),
-			y: WeaveImageCrop.roundTo6Decimals(diffY + imageOffsetY),
+			x: WeaveImageCrop.roundTo6Decimals(sourceX),
+			y: WeaveImageCrop.roundTo6Decimals(sourceY),
 			width: WeaveImageCrop.roundTo6Decimals(intersectionRect.width),
 			height: WeaveImageCrop.roundTo6Decimals(intersectionRect.height)
 		};
@@ -15270,6 +15358,27 @@ var WeaveImageNode = class extends WeaveNode {
 		if (!internalImage || !cropGroup) return;
 		new WeaveImageCrop(this.instance, this, imageNode, internalImage, cropGroup).unCrop();
 	};
+	flipImage = (imageNode, options) => {
+		if (imageNode.getAttrs().cropping) return;
+		const prop = options.axis === "horizontal" ? "flipX" : "flipY";
+		this.instance.stateTransactional(() => {
+			imageNode.setAttrs({ [prop]: !(imageNode.getAttrs()[prop] ?? false) });
+			this.applyFlip(imageNode);
+			this.cacheNode(imageNode);
+			this.instance.updateNode(this.serialize(imageNode));
+		});
+	};
+	applyFlip(image) {
+		const attrs = image.getAttrs();
+		const internalImage = image.findOne(`#${attrs.id}-image`);
+		if (!internalImage) return;
+		const flipX = attrs.flipX === true;
+		const flipY = attrs.flipY === true;
+		internalImage.scaleX(flipX ? -1 : 1);
+		internalImage.scaleY(flipY ? -1 : 1);
+		internalImage.offsetX(flipX ? internalImage.width() : 0);
+		internalImage.offsetY(flipY ? internalImage.height() : 0);
+	}
 	loadAsyncElement(nodeId) {
 		this.instance.loadAsyncElement(nodeId, WEAVE_IMAGE_NODE_TYPE);
 	}
@@ -15317,6 +15426,12 @@ var WeaveImageNode = class extends WeaveNode {
 				new WeaveImageCrop(this.instance, this, image, internalImage, cropGroup).unCrop();
 			};
 		}
+		image.flipHorizontal = () => {
+			this.flipImage(image, { axis: "horizontal" });
+		};
+		image.flipVertical = () => {
+			this.flipImage(image, { axis: "vertical" });
+		};
 		const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
 		image.getTransformerProperties = function() {
 			return defaultTransformerProperties;
@@ -15932,6 +16047,10 @@ var WeaveImageNode = class extends WeaveNode {
 		if (!this.imageState[imageAttrs.id ?? ""]?.loaded) return;
 	}
 	updateImageCrop(image) {
+		this.updateImageCropGeometry(image);
+		this.applyFlip(image);
+	}
+	updateImageCropGeometry(image) {
 		const imageAttrs = image.getAttrs();
 		const internalImage = image?.findOne(`#${imageAttrs.id}-image`);
 		if (!this.imageState[imageAttrs.id ?? ""]?.loaded) return;
@@ -16009,8 +16128,12 @@ var WeaveImageNode = class extends WeaveNode {
 			});
 		}
 		if (internalImage) {
-			internalImage.width(Math.max(5, internalImage.width() * internalImage.scaleX()));
-			internalImage.height(Math.max(5, internalImage.height() * internalImage.scaleY()));
+			internalImage.offset({
+				x: 0,
+				y: 0
+			});
+			internalImage.width(Math.max(5, internalImage.width() * Math.abs(internalImage.scaleX())));
+			internalImage.height(Math.max(5, internalImage.height() * Math.abs(internalImage.scaleY())));
 			internalImage.scale({
 				x: 1,
 				y: 1
@@ -16065,7 +16188,7 @@ var WeaveImageNode = class extends WeaveNode {
 			clearTimeout(this.imageTryoutIds[nodeId]);
 			delete this.imageTryoutIds[nodeId];
 		}
-		nodeInstance.destroy();
+		super.onDestroy(nodeInstance);
 	}
 	loadImageTryout(imageId) {
 		this.imageTryoutIds[imageId] = setTimeout(() => {
@@ -16152,7 +16275,9 @@ var WeaveImageNode = class extends WeaveNode {
 				width: props.uncroppedImage.width,
 				height: props.uncroppedImage.height
 			},
-			cropping: props.cropping
+			cropping: props.cropping,
+			...props.flipX !== void 0 && { flipX: props.flipX },
+			...props.flipY !== void 0 && { flipY: props.flipY }
 		} });
 	}
 	static updateNodeState(prevNodeState, nextProps) {
@@ -16175,7 +16300,9 @@ var WeaveImageNode = class extends WeaveNode {
 				width: nextProps.uncroppedImage?.width,
 				height: nextProps.uncroppedImage?.height
 			} },
-			cropping: nextProps.cropping
+			cropping: nextProps.cropping,
+			...nextProps.flipX !== void 0 && { flipX: nextProps.flipX },
+			...nextProps.flipY !== void 0 && { flipY: nextProps.flipY }
 		} });
 	}
 	static getSchema() {
@@ -16199,7 +16326,9 @@ var WeaveImageNode = class extends WeaveNode {
 					width: z.number().describe("The width of the image before cropping, used for cropping calculations"),
 					height: z.number().describe("The height of the image before cropping, used for cropping calculations")
 				}),
-				cropping: z.boolean().default(false).describe("Whether the image is currently being cropped")
+				cropping: z.boolean().default(false).describe("Whether the image is currently being cropped"),
+				flipX: z.boolean().optional().describe("Whether the image is flipped horizontally"),
+				flipY: z.boolean().optional().describe("Whether the image is flipped vertically")
 			})
 		});
 	}
@@ -16716,14 +16845,26 @@ var WeaveRegularPolygonNode = class extends WeaveNode {
 //#region src/nodes/polygon/constants.ts
 const WEAVE_POLYGON_NODE_TYPE = "polygon";
 //#endregion
+//#region src/utils/native-backend.ts
+const MODULE_NOT_FOUND_CODES = ["ERR_MODULE_NOT_FOUND", "MODULE_NOT_FOUND"];
+const isMissingPackageError = (error, packageName) => error instanceof Error && MODULE_NOT_FOUND_CODES.includes(error.code ?? "") && error.message.includes(`'${packageName}'`);
+const loadNativeBackend = async (packageName, setupFunctionName, load) => {
+	try {
+		await load();
+	} catch (error) {
+		if (isMissingPackageError(error, packageName)) throw new Error(`${setupFunctionName}() requires the "${packageName}" package. Install it with \`npm install ${packageName}\`, using the version required by @inditextech/weave-sdk.`, { cause: error });
+		throw error;
+	}
+};
+//#endregion
 //#region src/backend.ts
 const setupSkiaBackend = async () => {
 	globalThis._weave_serverSideBackend = WEAVE_KONVA_BACKEND.SKIA;
-	await import("konva/skia-backend");
+	await loadNativeBackend("skia-canvas", "setupSkiaBackend", () => import("konva/skia-backend"));
 };
 const setupCanvasBackend = async () => {
 	globalThis._weave_serverSideBackend = WEAVE_KONVA_BACKEND.CANVAS;
-	await import("konva/canvas-backend");
+	await loadNativeBackend("canvas", "setupCanvasBackend", () => import("konva/canvas-backend"));
 };
 //#endregion
 //#region src/nodes/polygon/presets.ts
@@ -19638,7 +19779,7 @@ var WeaveCommentNode = class extends WeaveNode {
 		this.normalizeNodeSize(commentNode);
 	}
 	onDestroy(nodeInstance) {
-		nodeInstance.destroy();
+		super.onDestroy(nodeInstance);
 	}
 	expandNode(commentNode) {
 		const widthExpanded = this.config.style.expanded.width;
@@ -23292,6 +23433,70 @@ const RECTANGLE_TOOL_STATE = {
 	["ADDED"]: "added"
 };
 //#endregion
+//#region src/actions/shared/shape-geometry.ts
+/** Returns the normalized bounds described by a drag, including its modifiers. */
+function getShapeDragBounds(anchor, pointer, options = {}) {
+	const { centered = false, constrained = false, aspectRatio = 1 } = options;
+	const deltaX = Math.abs(pointer.x - anchor.x);
+	const deltaY = Math.abs(pointer.y - anchor.y);
+	let width = deltaX;
+	let height = deltaY;
+	if (constrained && aspectRatio > 0) {
+		if (width / (height || Number.EPSILON) > aspectRatio) height = width / aspectRatio;
+		else width = height * aspectRatio;
+	}
+	if (constrained && aspectRatio > 0 && width > 0 && height > 0) {
+		const minimumSizeScale = Math.max(1, 1 / width, 1 / height);
+		width *= minimumSizeScale;
+		height *= minimumSizeScale;
+	} else {
+		width = Math.max(1, width);
+		height = Math.max(1, height);
+	}
+	if (centered) {
+		width *= 2;
+		height *= 2;
+		return {
+			x: anchor.x - width / 2,
+			y: anchor.y - height / 2,
+			width,
+			height
+		};
+	}
+	const signedWidth = Math.sign(pointer.x - anchor.x || 1) * width;
+	const signedHeight = Math.sign(pointer.y - anchor.y || 1) * height;
+	return {
+		x: Math.min(anchor.x, anchor.x + signedWidth),
+		y: Math.min(anchor.y, anchor.y + signedHeight),
+		width,
+		height
+	};
+}
+//#endregion
+//#region src/actions/shared/shape-keyboard.ts
+/** Binds the common keyboard behavior for tools that create shapes by dragging. */
+function bindShapeDragKeyboardHandlers(signal, isActionActive, isDragInProgress, canUpdateModifiers, onCancel, onModifiersChange) {
+	const handleModifierKey = (event) => {
+		if (event.key !== "Shift" && event.key !== "Alt") return;
+		const actionActive = isActionActive();
+		const dragInProgress = isDragInProgress();
+		if (event.type === "keydown" && event.key === "Alt" && actionActive && dragInProgress) event.preventDefault();
+		if (!actionActive || !canUpdateModifiers()) return;
+		onModifiersChange({
+			shiftKey: event.shiftKey,
+			altKey: event.altKey
+		});
+	};
+	window.addEventListener("keydown", (event) => {
+		if (isActionActive() && (event.code === "Enter" || event.code === "Escape")) {
+			onCancel();
+			return;
+		}
+		handleModifierKey(event);
+	}, { signal });
+	window.addEventListener("keyup", handleModifierKey, { signal });
+}
+//#endregion
 //#region src/actions/rectangle-tool/rectangle-tool.ts
 var WeaveRectangleToolAction = class extends WeaveAction {
 	initialized = false;
@@ -23337,16 +23542,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		window.addEventListener("keydown", (e) => {
-			if (e.code === "Enter" && this.instance.getActiveAction() === "rectangleTool") {
-				this.cancelAction();
-				return;
-			}
-			if (e.code === "Escape" && this.instance.getActiveAction() === "rectangleTool") {
-				this.cancelAction();
-				return;
-			}
-		}, { signal: this.instance.getEventsController().signal });
+		bindShapeDragKeyboardHandlers(this.instance.getEventsController().signal, () => this.instance.getActiveAction() === RECTANGLE_TOOL_ACTION_NAME, () => this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE, () => this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE && this.moved, () => this.cancelAction(), (modifiers) => this.handleMovement(modifiers));
 		stage.on("pointermove", () => {
 			if (this.state === RECTANGLE_TOOL_STATE.IDLE) return;
 			this.setCursor();
@@ -23372,12 +23568,12 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 				this.state = RECTANGLE_TOOL_STATE.ADDING;
 				return;
 			}
-			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) this.handleMovement();
+			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) this.handleMovement(e.evt);
 		});
 		stage.on("pointerup", (e) => {
 			this.pointers.delete(e.evt.pointerId);
 			if (this.isTap(e)) this.moved = false;
-			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) this.handleSettingSize();
+			if (this.state === RECTANGLE_TOOL_STATE.DEFINING_SIZE) this.handleSettingSize(e.evt);
 		});
 		this.initialized = true;
 	}
@@ -23411,7 +23607,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		}
 		this.setState(RECTANGLE_TOOL_STATE.DEFINING_SIZE);
 	}
-	handleSettingSize() {
+	handleSettingSize(modifiers = {}) {
 		if (this.rectId && this.tempRectNode && this.clickPoint && this.container) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
 			const rectPos = {
@@ -23421,10 +23617,14 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 			let rectWidth = this.props.width;
 			let rectHeight = this.props.height;
 			if (this.moved) {
-				rectPos.x = Math.min(this.clickPoint.x, mousePoint.x);
-				rectPos.y = Math.min(this.clickPoint.y, mousePoint.y);
-				rectWidth = Math.abs(this.clickPoint.x - mousePoint.x);
-				rectHeight = Math.abs(this.clickPoint.y - mousePoint.y);
+				const bounds = getShapeDragBounds(this.clickPoint, mousePoint, {
+					centered: modifiers.altKey,
+					constrained: modifiers.shiftKey
+				});
+				rectPos.x = bounds.x;
+				rectPos.y = bounds.y;
+				rectWidth = bounds.width;
+				rectHeight = bounds.height;
 			}
 			this.tempRectNode.setAttrs({
 				...this.props,
@@ -23456,16 +23656,20 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		}
 		this.cancelAction();
 	}
-	handleMovement() {
+	handleMovement(modifiers = {}) {
 		if (this.state !== RECTANGLE_TOOL_STATE.DEFINING_SIZE) return;
 		if (this.rectId && this.tempRectNode && this.measureContainer && this.clickPoint) {
 			this.moved = true;
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.measureContainer);
-			const deltaX = mousePoint.x - this.clickPoint?.x;
-			const deltaY = mousePoint.y - this.clickPoint?.y;
+			const bounds = getShapeDragBounds(this.clickPoint, mousePoint, {
+				centered: modifiers.altKey,
+				constrained: modifiers.shiftKey
+			});
 			this.tempRectNode.setAttrs({
-				width: deltaX,
-				height: deltaY
+				x: bounds.x,
+				y: bounds.y,
+				width: bounds.width,
+				height: bounds.height
 			});
 		}
 	}
@@ -23564,16 +23768,7 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		window.addEventListener("keydown", (e) => {
-			if (e.code === "Enter" && this.instance.getActiveAction() === "ellipseTool") {
-				this.cancelAction();
-				return;
-			}
-			if (e.code === "Escape" && this.instance.getActiveAction() === "ellipseTool") {
-				this.cancelAction();
-				return;
-			}
-		}, { signal: this.instance.getEventsController().signal });
+		bindShapeDragKeyboardHandlers(this.instance.getEventsController().signal, () => this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME, () => this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE, () => this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE && this.moved, () => this.cancelAction(), (modifiers) => this.handleMovement(modifiers));
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -23600,7 +23795,7 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 			}
 			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
-				this.handleMovement();
+				this.handleMovement(e.evt);
 			}
 		});
 		stage.on("pointerup", (e) => {
@@ -23608,7 +23803,7 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 			if (this.isTap(e)) this.moved = false;
 			if (this.state === ELLIPSE_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
-				this.handleSettingSize();
+				this.handleSettingSize(e.evt);
 			}
 		});
 		this.initialized = true;
@@ -23632,8 +23827,8 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 		if (nodeHandler) {
 			const node = nodeHandler.create(this.ellipseId, {
 				...this.props,
-				x: this.clickPoint?.x ?? 0 + this.props.radiusX,
-				y: this.clickPoint?.y ?? 0 + this.props.radiusY,
+				x: this.clickPoint?.x ?? 0,
+				y: this.clickPoint?.y ?? 0,
 				radiusX: 1,
 				radiusY: 1
 			});
@@ -23641,22 +23836,28 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 		}
 		this.setState(ELLIPSE_TOOL_STATE.DEFINING_SIZE);
 	}
-	handleSettingSize() {
+	handleSettingSize(modifiers = {}) {
 		const ellipse = this.instance.getStage().findOne(`#${this.ellipseId}`);
 		if (this.ellipseId && this.clickPoint && this.container && ellipse) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
 			const nodeHandler = this.instance.getNodeHandler("ellipse");
-			const ellipsePos = {
+			let ellipsePos = {
 				x: this.clickPoint.x,
 				y: this.clickPoint.y
 			};
-			let ellipseRadiusX = this.props.radiusY;
+			let ellipseRadiusX = this.props.radiusX;
 			let ellipseRadiusY = this.props.radiusY;
 			if (this.moved) {
-				ellipsePos.x = Math.min(this.clickPoint.x, mousePoint.x);
-				ellipsePos.y = Math.min(this.clickPoint.y, mousePoint.y);
-				ellipseRadiusX = Math.abs(this.clickPoint.x - mousePoint.x);
-				ellipseRadiusY = Math.abs(this.clickPoint.y - mousePoint.y);
+				const bounds = getShapeDragBounds(this.clickPoint, mousePoint, {
+					centered: modifiers.altKey,
+					constrained: modifiers.shiftKey
+				});
+				ellipsePos = {
+					x: bounds.x,
+					y: bounds.y
+				};
+				ellipseRadiusX = bounds.width;
+				ellipseRadiusY = bounds.height;
 			}
 			ellipse.setAttrs({
 				...this.props,
@@ -23670,27 +23871,23 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 		}
 		this.cancelAction();
 	}
-	handleMovement() {
+	handleMovement(modifiers = {}) {
 		if (this.state !== ELLIPSE_TOOL_STATE.DEFINING_SIZE) return;
 		const ellipse = this.instance.getStage().findOne(`#${this.ellipseId}`);
 		if (this.ellipseId && this.container && this.clickPoint && ellipse) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
-			const deltaX = Math.abs(mousePoint.x - this.clickPoint?.x);
-			const deltaY = Math.abs(mousePoint.y - this.clickPoint?.y);
-			const ellipsePos = {
-				x: this.clickPoint.x,
-				y: this.clickPoint.y
-			};
-			if (this.moved) {
-				ellipsePos.x = Math.min(this.clickPoint.x, mousePoint.x);
-				ellipsePos.y = Math.min(this.clickPoint.y, mousePoint.y);
-			}
+			const bounds = getShapeDragBounds(this.clickPoint, mousePoint, {
+				centered: modifiers.altKey,
+				constrained: modifiers.shiftKey
+			});
 			const nodeHandler = this.instance.getNodeHandler("ellipse");
 			if (nodeHandler) nodeHandler.onUpdate(ellipse, {
 				...this.props,
 				id: this.ellipseId,
-				radiusX: deltaX / 2,
-				radiusY: deltaY / 2
+				x: bounds.x,
+				y: bounds.y,
+				radiusX: bounds.width / 2,
+				radiusY: bounds.height / 2
 			});
 		}
 	}
@@ -26661,16 +26858,7 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		window.addEventListener("keydown", (e) => {
-			if (e.code === "Enter" && this.instance.getActiveAction() === "regularPolygonTool") {
-				this.cancelAction();
-				return;
-			}
-			if (e.code === "Escape" && this.instance.getActiveAction() === "regularPolygonTool") {
-				this.cancelAction();
-				return;
-			}
-		}, { signal: this.instance.getEventsController().signal });
+		bindShapeDragKeyboardHandlers(this.instance.getEventsController().signal, () => this.instance.getActiveAction() === REGULAR_POLYGON_TOOL_ACTION_NAME, () => this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE, () => this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE && this.moved, () => this.cancelAction(), (modifiers) => this.handleMovement(modifiers));
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
 			this.pointers.set(e.evt.pointerId, {
@@ -26697,7 +26885,7 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 			}
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
 				this.moved = true;
-				this.handleMovement();
+				this.handleMovement(e.evt);
 			}
 		});
 		stage.on("pointerup", (e) => {
@@ -26705,7 +26893,7 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 			if (this.isTap(e)) this.moved = false;
 			if (this.state === REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) {
 				this.creating = false;
-				this.handleSettingSize();
+				this.handleSettingSize(e.evt);
 			}
 		});
 		this.initialized = true;
@@ -26737,20 +26925,26 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 		}
 		this.setState(REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE);
 	}
-	handleSettingSize() {
+	handleSettingSize(modifiers = {}) {
 		const regularPolygon = this.instance.getStage().findOne(`#${this.regularPolygonId}`);
 		if (this.regularPolygonId && this.clickPoint && this.container && regularPolygon) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
 			const nodeHandler = this.instance.getNodeHandler("regular-polygon");
-			const starPos = {
+			let starPos = {
 				x: this.clickPoint.x,
 				y: this.clickPoint.y
 			};
 			let newRadius = this.props.radius;
 			if (this.moved) {
-				starPos.x = Math.min(this.clickPoint.x, mousePoint.x);
-				starPos.y = Math.min(this.clickPoint.y, mousePoint.y);
-				newRadius = Math.abs(this.clickPoint.x - mousePoint.x);
+				const bounds = getShapeDragBounds(this.clickPoint, mousePoint, {
+					centered: modifiers.altKey,
+					constrained: true
+				});
+				starPos = {
+					x: bounds.x,
+					y: bounds.y
+				};
+				newRadius = bounds.width;
 			}
 			regularPolygon.setAttrs({
 				...this.props,
@@ -26763,25 +26957,22 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 		}
 		this.cancelAction();
 	}
-	handleMovement() {
+	handleMovement(modifiers = {}) {
 		if (this.state !== REGULAR_POLYGON_TOOL_STATE.DEFINING_SIZE) return;
 		const regularPolygon = this.instance.getStage().findOne(`#${this.regularPolygonId}`);
 		if (this.regularPolygonId && this.container && this.clickPoint && regularPolygon) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
-			const deltaX = Math.abs(mousePoint.x - this.clickPoint?.x);
-			const starPos = {
-				x: this.clickPoint.x,
-				y: this.clickPoint.y
-			};
-			if (this.moved) {
-				starPos.x = Math.min(this.clickPoint.x, mousePoint.x);
-				starPos.y = Math.min(this.clickPoint.y, mousePoint.y);
-			}
+			const bounds = getShapeDragBounds(this.clickPoint, mousePoint, {
+				centered: modifiers.altKey,
+				constrained: true
+			});
 			const nodeHandler = this.instance.getNodeHandler("regular-polygon");
 			if (nodeHandler) nodeHandler.onUpdate(regularPolygon, {
 				...this.props,
 				id: this.regularPolygonId,
-				radius: deltaX / 2
+				x: bounds.x,
+				y: bounds.y,
+				radius: bounds.width / 2
 			});
 		}
 	}
@@ -26830,14 +27021,22 @@ const POLYGON_TOOL_ACTION_NAME = "polygonTool";
 const POLYGON_TOOL_STATE = {
 	["IDLE"]: "idle",
 	["ADDING"]: "adding",
+	["DEFINING_SIZE"]: "defining-size",
 	["ADDED"]: "added"
 };
 //#endregion
 //#region src/actions/polygon-tool/polygon-tool.ts
+const MIN_POLYGON_DRAG_DISTANCE = 3;
 var WeavePolygonToolAction = class extends WeaveAction {
 	initialized = false;
 	state;
 	polygonId;
+	pointers;
+	clickPoint;
+	container;
+	moved;
+	placementCommitted;
+	polygonNode;
 	cancelAction;
 	preset;
 	onPropsChange = void 0;
@@ -26851,6 +27050,12 @@ var WeavePolygonToolAction = class extends WeaveAction {
 		this.initialized = false;
 		this.state = POLYGON_TOOL_STATE.IDLE;
 		this.polygonId = null;
+		this.pointers = /* @__PURE__ */ new Map();
+		this.clickPoint = null;
+		this.container = void 0;
+		this.moved = false;
+		this.placementCommitted = false;
+		this.polygonNode = null;
 		this.props = this.initProps();
 	}
 	getName() {
@@ -26875,18 +27080,41 @@ var WeavePolygonToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
-		window.addEventListener("keydown", (e) => {
-			if ((e.code === "Enter" || e.code === "Escape") && this.instance.getActiveAction() === "polygonTool") this.cancelAction();
-		}, { signal: this.instance.getEventsController().signal });
+		bindShapeDragKeyboardHandlers(this.instance.getEventsController().signal, () => this.instance.getActiveAction() === POLYGON_TOOL_ACTION_NAME, () => this.state === POLYGON_TOOL_STATE.DEFINING_SIZE, () => this.state === POLYGON_TOOL_STATE.DEFINING_SIZE && this.moved, () => this.cancelAction(), (modifiers) => this.handleMovement(modifiers));
 		stage.on("pointermove", () => {
 			if (this.state === POLYGON_TOOL_STATE.IDLE) return;
 			this.setCursor();
 		});
 		stage.on("pointerdown", (e) => {
 			this.setTapStart(e);
+			this.pointers.set(e.evt.pointerId, {
+				x: e.evt.clientX,
+				y: e.evt.clientY
+			});
 			if (this.state !== POLYGON_TOOL_STATE.ADDING) return;
 			this.handleAdding();
 		});
+		stage.on("pointermove", (e) => {
+			if (this.state === POLYGON_TOOL_STATE.IDLE) return;
+			this.setCursor();
+			if (!this.isPressed(e) || !this.pointers.has(e.evt.pointerId)) return;
+			if (this.state === POLYGON_TOOL_STATE.DEFINING_SIZE) {
+				const pointerStart = this.pointers.get(e.evt.pointerId);
+				if (!pointerStart || Math.hypot(e.evt.clientX - pointerStart.x, e.evt.clientY - pointerStart.y) < MIN_POLYGON_DRAG_DISTANCE) return;
+				this.moved = true;
+				this.handleMovement(e.evt);
+			}
+		});
+		stage.on("pointerup", (e) => {
+			this.pointers.delete(e.evt.pointerId);
+			if (this.isTap(e)) this.moved = false;
+			if (this.state === POLYGON_TOOL_STATE.DEFINING_SIZE) this.handleSettingSize(e.evt);
+		});
+		stage.on("pointercancel", (e) => {
+			if (!this.pointers.has(e.evt.pointerId)) return;
+			this.pointers.delete(e.evt.pointerId);
+			if (this.state === POLYGON_TOOL_STATE.DEFINING_SIZE) this.cancelAction();
+		});
 		this.initialized = true;
 	}
 	setState(state) {
@@ -26900,7 +27128,10 @@ var WeavePolygonToolAction = class extends WeaveAction {
 	}
 	handleAdding() {
 		const { mousePoint, container } = this.instance.getMousePointer();
+		this.clickPoint = mousePoint;
+		this.container = container;
 		this.polygonId = v4();
+		this.polygonNode = null;
 		const presetDef = WEAVE_POLYGON_PRESETS[this.preset];
 		const scaleFactor = this.props.scaleFactor ?? 1;
 		const { points, innerRect, width, height } = instantiatePreset(presetDef, presetDef.defaultWidth * scaleFactor, presetDef.defaultHeight * scaleFactor);
@@ -26916,15 +27147,49 @@ var WeavePolygonToolAction = class extends WeaveAction {
 				points,
 				innerRect
 			});
+			this.polygonNode = node;
 			this.instance.addNode(node, container?.getAttrs().id);
 		}
-		this.instance.emitEvent("onAddedPolygon");
+		this.setState(POLYGON_TOOL_STATE.DEFINING_SIZE);
+	}
+	handleMovement(modifiers = {}) {
+		if (this.state !== POLYGON_TOOL_STATE.DEFINING_SIZE || !this.polygonId || !this.clickPoint || !this.container) return;
+		const polygon = this.instance.getStage().findOne(`#${this.polygonId}`);
+		const nodeHandler = this.instance.getNodeHandler(WEAVE_POLYGON_NODE_TYPE);
+		const presetDef = WEAVE_POLYGON_PRESETS[this.preset];
+		if (!polygon || !nodeHandler) return;
+		const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
+		const defaultGeometry = instantiatePreset(presetDef, presetDef.defaultWidth, presetDef.defaultHeight);
+		const bounds = getShapeDragBounds(this.clickPoint, mousePoint, {
+			centered: modifiers.altKey,
+			constrained: modifiers.shiftKey,
+			aspectRatio: defaultGeometry.width / defaultGeometry.height
+		});
+		const geometry = instantiatePreset(presetDef, bounds.width * presetDef.defaultWidth / defaultGeometry.width, bounds.height * presetDef.defaultHeight / defaultGeometry.height);
+		nodeHandler.onUpdate(polygon, {
+			...this.props,
+			id: this.polygonId,
+			x: bounds.x,
+			y: bounds.y,
+			...geometry
+		});
+	}
+	handleSettingSize(modifiers = {}) {
+		if (this.moved) this.handleMovement(modifiers);
+		const polygon = this.polygonId && this.instance.getStage().findOne(`#${this.polygonId}`);
+		const nodeHandler = this.instance.getNodeHandler(WEAVE_POLYGON_NODE_TYPE);
+		if (polygon && nodeHandler) {
+			this.instance.updateNode(nodeHandler.serialize(polygon));
+			this.placementCommitted = true;
+			this.instance.emitEvent("onAddedPolygon");
+		}
 		this.cancelAction();
 	}
 	trigger(cancelAction, params) {
 		if (!this.instance) throw new Error("Instance not defined");
 		if (!this.initialized) this.setupEvents();
 		this.preset = params?.presetId ?? "pentagon";
+		this.placementCommitted = false;
 		const stage = this.instance.getStage();
 		stage.container().tabIndex = 1;
 		stage.container().focus();
@@ -26937,13 +27202,21 @@ var WeavePolygonToolAction = class extends WeaveAction {
 	cleanup() {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "default";
+		const isCancelledPlacement = this.state === POLYGON_TOOL_STATE.DEFINING_SIZE && this.polygonId !== null && !this.placementCommitted;
+		if (isCancelledPlacement && this.polygonNode) this.instance.removeNode(this.polygonNode);
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
-			const node = stage.findOne(`#${this.polygonId}`);
+			const node = isCancelledPlacement ? void 0 : stage.findOne(`#${this.polygonId}`);
 			if (node) selectionPlugin.setSelectedNodes([node]);
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
 		this.polygonId = null;
+		this.pointers.clear();
+		this.clickPoint = null;
+		this.container = void 0;
+		this.moved = false;
+		this.placementCommitted = false;
+		this.polygonNode = null;
 		this.setState(POLYGON_TOOL_STATE.IDLE);
 	}
 	setCursor() {