@gradio/imageeditor 0.14.4 → 0.15.0

package/shared/resize/resize.ts

@@ -8,6 +8,66 @@ import {
 } from "pixi.js";
 import { type ImageEditorContext, type Tool } from "../core/editor";
 import { type Tool as ToolbarTool, type Subtool } from "../Toolbar.svelte";
+import { type Command } from "../core/commands";
+
+/**
+ * Command that handles resizing the image and supports undo/redo
+ */
+export class ResizeCommand implements Command {
+	private original_width: number;
+	private original_height: number;
+	private original_x: number;
+	private original_y: number;
+
+	private new_width: number;
+	private new_height: number;
+	private new_x: number;
+	private new_y: number;
+	private reset_ui: () => void;
+	name: string;
+
+	constructor(
+		private context: ImageEditorContext,
+		original_state: { width: number; height: number; x: number; y: number },
+		new_state: { width: number; height: number; x: number; y: number },
+		reset_ui: () => void
+	) {
+		this.name = "Resize";
+		this.original_width = original_state.width;
+		this.original_height = original_state.height;
+		this.original_x = original_state.x;
+		this.original_y = original_state.y;
+
+		this.new_width = new_state.width;
+		this.new_height = new_state.height;
+		this.new_x = new_state.x;
+		this.new_y = new_state.y;
+		this.reset_ui = reset_ui;
+	}
+
+	async execute(): Promise<void> {
+		if (!this.context.background_image) return;
+
+		this.context.background_image.width = this.new_width;
+		this.context.background_image.height = this.new_height;
+		this.context.background_image.position.set(this.new_x, this.new_y);
+
+		this.reset_ui();
+	}
+
+	async undo(): Promise<void> {
+		if (!this.context.background_image) return;
+
+		this.context.background_image.width = this.original_width;
+		this.context.background_image.height = this.original_height;
+		this.context.background_image.position.set(
+			this.original_x,
+			this.original_y
+		);
+
+		this.reset_ui();
+	}
+}
 
 /**
  * @class ResizeTool
@@ -20,15 +80,12 @@ export class ResizeTool implements Tool {
 	current_tool: ToolbarTool = "image";
 	current_subtool: Subtool = "size";
 	private current_cursor: FederatedOptions["cursor"] = "unset";
-	// Constants
 	private readonly CORNER_SIZE = 25;
 	private readonly LINE_THICKNESS = 5;
 	private readonly HANDLE_COLOR = 0x000000;
 	private readonly HIT_AREA_SIZE = 40;
-	// Border region for outpainting
 	private borderRegion = 0;
 
-	// State
 	private is_dragging = false;
 	private selected_handle: Container | null = null;
 	private active_corner_index = -1;
@@ -48,6 +105,13 @@ export class ResizeTool implements Tool {
 	private event_callbacks: Map<string, (() => void)[]> = new Map();
 	private last_scale = 1;
 
+	private original_state: {
+		width: number;
+		height: number;
+		x: number;
+		y: number;
+	} | null = null;
+
 	/**
 	 * @method setup
 	 * @async
@@ -66,29 +130,21 @@ export class ResizeTool implements Tool {
 		this.current_tool = tool;
 		this.current_subtool = subtool;
 
-		// Get the border region from context if it exists
 		if (context.background_image) {
-			// First try to read from a custom property on the background image
-			// This is important as the position might have been adjusted
 			if ((context.background_image as any).borderRegion !== undefined) {
 				this.borderRegion = (context.background_image as any).borderRegion;
 			} else {
-				// Fall back to the position-based detection as before
-				// But add additional checks to make sure it's not just centering
 				const bg = context.background_image;
 				const container = context.image_container;
 
-				// Check if the image position seems intentional (not just centered)
 				const isHorizontallyCentered =
 					Math.abs(bg.position.x - (container.width - bg.width) / 2) < 2;
 				const isVerticallyCentered =
 					Math.abs(bg.position.y - (container.height - bg.height) / 2) < 2;
 
 				if (!isHorizontallyCentered || !isVerticallyCentered) {
-					// If not centered, this is likely an intentional border
 					this.borderRegion = Math.max(bg.position.x, bg.position.y);
 
-					// Store it for future reference
 					(context.background_image as any).borderRegion = this.borderRegion;
 				}
 			}
@@ -96,7 +152,6 @@ export class ResizeTool implements Tool {
 
 		context.dimensions.subscribe((dimensions) => {
 			this.dimensions = dimensions;
-			// Force UI update if it exists
 			if (this.resize_ui_container) {
 				this.update_resize_ui();
 			}
@@ -104,7 +159,6 @@ export class ResizeTool implements Tool {
 
 		context.position.subscribe((position) => {
 			this.position = position;
-			// Update resize UI immediately when position changes to avoid lag
 			if (
 				this.resize_ui_container &&
 				this.current_tool === "image" &&
@@ -116,7 +170,6 @@ export class ResizeTool implements Tool {
 
 		context.scale.subscribe((scale) => {
 			this.scale = scale;
-			// Update resize UI immediately when scale changes to avoid lag
 			if (
 				this.resize_ui_container &&
 				this.current_tool === "image" &&
@@ -126,11 +179,9 @@ export class ResizeTool implements Tool {
 			}
 		});
 
-		// Initialize resize UI
 		await this.init_resize_ui();
 		this.setup_event_listeners();
 
-		// Apply boundary constraints only if the image is outside the container boundaries
 		if (
 			this.current_subtool === "size" &&
 			this.image_editor_context.background_image
@@ -144,7 +195,6 @@ export class ResizeTool implements Tool {
 			const container_width = container_bounds.width;
 			const container_height = container_bounds.height;
 
-			// Check if the image exceeds the container boundaries
 			const min_x = -(bg_width - container_width);
 			const min_y = -(bg_height - container_height);
 			const max_x = 0;
@@ -157,7 +207,6 @@ export class ResizeTool implements Tool {
 				bg_height > container_height &&
 				(bg.position.y < min_y || bg.position.y > max_y);
 
-			// Only apply constraints if the image is out of bounds
 			if (x_out_of_bounds || y_out_of_bounds) {
 				this.apply_boundary_constraints();
 			}
@@ -173,7 +222,6 @@ export class ResizeTool implements Tool {
 		if (this.resize_ui_container) {
 			this.image_editor_context.app.stage.removeChild(this.resize_ui_container);
 		}
-		// Remove event listeners
 		this.cleanup_event_listeners();
 	}
 
@@ -189,21 +237,17 @@ export class ResizeTool implements Tool {
 		this.current_subtool = subtool;
 
 		if (tool === "image" && subtool === "size") {
-			// Check if there's a stored border region on the background image
 			if (this.image_editor_context.background_image) {
 				const storedBorderRegion = (
 					this.image_editor_context.background_image as any
 				).borderRegion;
 				if (typeof storedBorderRegion === "number" && storedBorderRegion > 0) {
-					// Use the stored border region
 					this.borderRegion = storedBorderRegion;
 				}
 			}
 
 			this.show_resize_ui();
 
-			// Apply boundary constraints when switching to the resize tool
-			// but only if the image is outside the container boundaries
 			if (this.image_editor_context.background_image) {
 				const bg = this.image_editor_context.background_image;
 				const container = this.image_editor_context.image_container;
@@ -214,11 +258,9 @@ export class ResizeTool implements Tool {
 				const container_width = container_bounds.width;
 				const container_height = container_bounds.height;
 
-				// Apply effective width/height calculations with border region
 				const effectiveWidth = container_width - this.borderRegion * 2;
 				const effectiveHeight = container_height - this.borderRegion * 2;
 
-				// Check if the image exceeds the effective container area or intrudes on border
 				const min_x =
 					bg_width > effectiveWidth
 						? -(bg_width - effectiveWidth) + this.borderRegion
@@ -237,11 +279,9 @@ export class ResizeTool implements Tool {
 						? this.borderRegion
 						: container_height - bg_height - this.borderRegion;
 
-				// Check if any constraints are violated
 				const x_out_of_bounds = bg.position.x < min_x || bg.position.x > max_x;
 				const y_out_of_bounds = bg.position.y < min_y || bg.position.y > max_y;
 
-				// Only apply constraints if the image is out of bounds
 				if (x_out_of_bounds || y_out_of_bounds) {
 					this.apply_boundary_constraints();
 				}
@@ -259,23 +299,16 @@ export class ResizeTool implements Tool {
 	 * @returns {Promise<void>}
 	 */
 	private async init_resize_ui(): Promise<void> {
-		// Create resize UI with scaled dimensions
 		this.resize_ui_container = this.make_resize_ui(
 			this.dimensions.width * this.scale,
 			this.dimensions.height * this.scale
 		);
 
-		// Position the resize UI container at the image position
 		this.resize_ui_container.position.set(this.position.x, this.position.y);
 
-		// Initially hide the resize UI until explicitly enabled by set_tool
 		this.resize_ui_container.visible = false;
 
 		this.image_editor_context.app.stage.addChild(this.resize_ui_container);
-
-		// Instead of using the ticker for continuous updates, we'll use immediate updates
-		// on scale and position changes, which we've added in the setup method
-		// This will eliminate lag during zoom operations
 	}
 
 	/**
@@ -291,7 +324,6 @@ export class ResizeTool implements Tool {
 		resize_container.eventMode = "static";
 		resize_container.interactiveChildren = true;
 
-		// Create solid outline (will be mostly hidden by the dotted outline)
 		const outline = new Graphics().rect(0, 0, width, height).stroke({
 			width: 1,
 			color: 0x000000,
@@ -299,10 +331,8 @@ export class ResizeTool implements Tool {
 			alpha: 0.3
 		});
 
-		// Add a second graphics object for the dotted effect
 		const dotted_outline = new Graphics();
 
-		// Use pixelLine for crisp rendering
 		dotted_outline.rect(0, 0, width, height).stroke({
 			width: 1,
 			color: 0x000000,
@@ -310,34 +340,25 @@ export class ResizeTool implements Tool {
 			pixelLine: true
 		});
 
-		// Create dashed line effect by drawing small rectangles along the border
 		const dash_length = 5;
 		const gap_length = 5;
 		const total_length = dash_length + gap_length;
 
-		// Draw dashed horizontal lines (top and bottom) - draw fewer dashes for performance
 		for (let x = 0; x < width; x += total_length * 2) {
-			// Skip every other dash
-			// Top dash
 			dotted_outline
 				.rect(x, 0, Math.min(dash_length, width - x), 1)
 				.fill(0x000000);
 
-			// Bottom dash
 			dotted_outline
 				.rect(x, height - 1, Math.min(dash_length, width - x), 1)
 				.fill(0x000000);
 		}
 
-		// Draw dashed vertical lines (left and right) - draw fewer dashes for performance
 		for (let y = 0; y < height; y += total_length * 2) {
-			// Skip every other dash
-			// Left dash
 			dotted_outline
 				.rect(0, y, 1, Math.min(dash_length, height - y))
 				.fill(0x000000);
 
-			// Right dash
 			dotted_outline
 				.rect(width - 1, y, 1, Math.min(dash_length, height - y))
 				.fill(0x000000);
@@ -346,18 +367,13 @@ export class ResizeTool implements Tool {
 		resize_container.addChild(outline);
 		resize_container.addChild(dotted_outline);
 
-		// Create a transparent interactive area for the move cursor
 		const move_area = new Graphics()
 			.rect(0, 0, width, height)
-			.fill(0xffffff, 0); // Transparent fill
-
+			.fill(0xffffff, 0);
 		move_area.eventMode = "static";
-		move_area.cursor = "move"; // Set cursor to move
-
-		// Add the move area before the handles so it doesn't interfere with handle interactions
+		move_area.cursor = "move";
 		resize_container.addChild(move_area);
 
-		// Create handles
 		this.create_corner_handles(resize_container, width, height);
 		this.create_edge_handles(resize_container, width, height);
 
@@ -377,17 +393,13 @@ export class ResizeTool implements Tool {
 		handle.cursor = "pointer";
 
 		const handle_graphics = new Graphics();
-		const handle_size = is_edge ? 8 : 10; // Smaller for edge handles
-
-		// Create square handles
+		const handle_size = is_edge ? 8 : 10;
 		handle_graphics
 			.rect(-handle_size / 2, -handle_size / 2, handle_size, handle_size)
-			.fill(0xffffff) // White fill
-			.stroke({ width: 1, color: this.HANDLE_COLOR }); // Black border
-
+			.fill(0xffffff)
+			.stroke({ width: 1, color: this.HANDLE_COLOR });
 		handle.addChild(handle_graphics);
 
-		// Adjust hit area based on handle type
 		const hit_size = is_edge ? this.HIT_AREA_SIZE * 1.5 : this.HIT_AREA_SIZE;
 		handle.hitArea = new Rectangle(
 			-hit_size / 2,
@@ -413,16 +425,14 @@ export class ResizeTool implements Tool {
 		width: number,
 		height: number
 	): void {
-		// Horizontal handles at top and bottom
 		[-1, 1].forEach((i, index) => {
-			const handle = this.create_handle(true); // true for edge handle
+			const handle = this.create_handle(true);
 			handle.rotation = 0;
 
 			handle.on("pointerdown", (event: FederatedPointerEvent) => {
-				this.handle_pointer_down(event, handle, -1, index); // 0 for top, 1 for bottom
+				this.handle_pointer_down(event, handle, -1, index);
 			});
 
-			// Center the handle
 			handle.x = width / 2;
 			handle.y = i < 0 ? 0 : height;
 			handle.cursor = "ns-resize";
@@ -430,16 +440,13 @@ export class ResizeTool implements Tool {
 			container.addChild(handle);
 		});
 
-		// Vertical handles at left and right
 		[-1, 1].forEach((i, index) => {
-			const handle = this.create_handle(true); // true for edge handle
-			handle.rotation = 0; // No rotation needed for square handles
-
+			const handle = this.create_handle(true);
+			handle.rotation = 0;
 			handle.on("pointerdown", (event: FederatedPointerEvent) => {
-				this.handle_pointer_down(event, handle, -1, index + 2); // 2 for left, 3 for right
+				this.handle_pointer_down(event, handle, -1, index + 2);
 			});
 
-			// Center the handle
 			handle.x = i < 0 ? 0 : width;
 			handle.y = height / 2;
 			handle.cursor = "ew-resize";
@@ -462,14 +469,14 @@ export class ResizeTool implements Tool {
 		height: number
 	): void {
 		const corners = [
-			{ x: 0, y: 0, cursor: "nwse-resize" }, // Top-left
-			{ x: width, y: 0, cursor: "nesw-resize" }, // Top-right
-			{ x: 0, y: height, cursor: "nesw-resize" }, // Bottom-left
-			{ x: width, y: height, cursor: "nwse-resize" } // Bottom-right
+			{ x: 0, y: 0, cursor: "nwse-resize" },
+			{ x: width, y: 0, cursor: "nesw-resize" },
+			{ x: 0, y: height, cursor: "nesw-resize" },
+			{ x: width, y: height, cursor: "nwse-resize" }
 		];
 
 		corners.forEach(({ x, y, cursor }, i) => {
-			const corner = this.create_handle(false); // false for corner handle
+			const corner = this.create_handle(false);
 			corner.x = x;
 			corner.y = y;
 
@@ -499,7 +506,6 @@ export class ResizeTool implements Tool {
 		corner_index: number,
 		edge_index: number
 	): void {
-		// Only handle resize events if resize tool is active
 		if (this.current_subtool !== "size") return;
 
 		event.stopPropagation();
@@ -509,11 +515,20 @@ export class ResizeTool implements Tool {
 		this.active_corner_index = corner_index;
 		this.active_edge_index = edge_index;
 
-		// Convert global position to the container's local coordinates.
 		const local_pos = this.image_editor_context.image_container.toLocal(
 			event.global
 		);
 		this.last_pointer_position = new Point(local_pos.x, local_pos.y);
+
+		if (this.image_editor_context.background_image) {
+			const bg = this.image_editor_context.background_image;
+			this.original_state = {
+				width: bg.width,
+				height: bg.height,
+				x: bg.position.x,
+				y: bg.position.y
+			};
+		}
 	}
 
 	/**
@@ -530,23 +545,14 @@ export class ResizeTool implements Tool {
 		original_aspect_ratio: number,
 		delta: Point
 	): { width: number; height: number } {
-		// For corner resizing, use the dimension that the user is actively changing
-		// This makes the resize follow the mouse cursor more naturally
-
-		// Determine which dimension changed more significantly
 		const abs_delta_x = Math.abs(delta.x);
 		const abs_delta_y = Math.abs(delta.y);
 
-		// Use a more responsive approach to determine which dimension to prioritize
-		// This makes the resize follow the mouse cursor more closely
 		if (abs_delta_x > abs_delta_y * 1.2) {
-			// User is moving more horizontally, so prioritize width
 			new_height = new_width / original_aspect_ratio;
 		} else if (abs_delta_y > abs_delta_x * 1.2) {
-			// User is moving more vertically, so prioritize height
 			new_width = new_height * original_aspect_ratio;
 		} else {
-			// User is moving diagonally, use the larger delta for better control
 			if (new_width / original_aspect_ratio > new_height) {
 				new_height = new_width / original_aspect_ratio;
 			} else {
@@ -569,7 +575,6 @@ export class ResizeTool implements Tool {
 		height: number,
 		maintain_aspect_ratio: boolean
 	): { width: number; height: number } {
-		// Get container dimensions - restrict to container size
 		const max_width = this.dimensions.width;
 		const max_height = this.dimensions.height;
 
@@ -577,7 +582,6 @@ export class ResizeTool implements Tool {
 		let new_height = height;
 
 		if (new_width > max_width) {
-			// If maintaining aspect ratio, adjust height proportionally
 			if (maintain_aspect_ratio && this.active_corner_index !== -1) {
 				new_height = (max_width / new_width) * new_height;
 			}
@@ -585,14 +589,12 @@ export class ResizeTool implements Tool {
 		}
 
 		if (new_height > max_height) {
-			// If maintaining aspect ratio, adjust width proportionally
 			if (maintain_aspect_ratio && this.active_corner_index !== -1) {
 				new_width = (max_height / new_height) * new_width;
 			}
 			new_height = max_height;
 		}
 
-		// Ensure minimum size
 		new_width = Math.max(20, new_width);
 		new_height = Math.max(20, new_height);
 
@@ -616,15 +618,11 @@ export class ResizeTool implements Tool {
 		let delta_x = 0;
 		let delta_y = 0;
 
-		// Calculate position deltas based on which handle is being dragged
 		if (this.active_corner_index === 0 || this.active_edge_index === 2) {
-			// Left side (top-left corner or left edge)
 			delta_x = old_width - new_width;
 		} else if (this.active_corner_index === 2) {
-			// Bottom-left corner should anchor to top-right
-			// So we need to adjust both x and y
 			delta_x = old_width - new_width;
-			delta_y = 0; // No y adjustment to keep it anchored to the top
+			delta_y = 0;
 		}
 
 		if (
@@ -632,7 +630,6 @@ export class ResizeTool implements Tool {
 			this.active_corner_index === 1 ||
 			this.active_edge_index === 0
 		) {
-			// Top side (top-left, top-right corners or top edge)
 			delta_y = old_height - new_height;
 		}
 
@@ -649,55 +646,43 @@ export class ResizeTool implements Tool {
 		const bg = this.image_editor_context.background_image;
 		const image_container = this.image_editor_context.image_container;
 
-		// Get current position
 		let new_x = bg.position.x;
 		let new_y = bg.position.y;
 
-		// Apply boundary constraints to keep the image within the container
 		const container_width = image_container.width;
 		const container_height = image_container.height;
 		const bg_width = bg.width;
 		const bg_height = bg.height;
 
-		// For images larger than the effective container area (container minus border),
-		// constrain them to maintain the border region
 		const effectiveWidth = container_width - this.borderRegion * 2;
 		const effectiveHeight = container_height - this.borderRegion * 2;
 
 		if (bg_width > effectiveWidth) {
-			// Calculate the minimum and maximum allowed positions
 			const min_x = -(bg_width - effectiveWidth) + this.borderRegion;
 			const max_x = this.borderRegion;
 			new_x = Math.max(min_x, Math.min(max_x, new_x));
 		} else {
-			// If image is smaller than effective container, enforce at least the border region on each side
 			const min_x = this.borderRegion;
 			const max_x = container_width - bg_width - this.borderRegion;
-			// Only constrain if the image would intrude on the border region
 			if (new_x < min_x || new_x > max_x) {
 				new_x = Math.max(min_x, Math.min(max_x, new_x));
 			}
 		}
 
 		if (bg_height > effectiveHeight) {
-			// Calculate the minimum and maximum allowed positions
 			const min_y = -(bg_height - effectiveHeight) + this.borderRegion;
 			const max_y = this.borderRegion;
 			new_y = Math.max(min_y, Math.min(max_y, new_y));
 		} else {
-			// If image is smaller than effective container, enforce at least the border region on each side
 			const min_y = this.borderRegion;
 			const max_y = container_height - bg_height - this.borderRegion;
-			// Only constrain if the image would intrude on the border region
 			if (new_y < min_y || new_y > max_y) {
 				new_y = Math.max(min_y, Math.min(max_y, new_y));
 			}
 		}
 
-		// Apply the constrained position
 		bg.position.set(new_x, new_y);
 
-		// Update resize UI with container position and scaled sprite position
 		if (this.resize_ui_container) {
 			const total_x = image_container.position.x + new_x * this.scale;
 			const total_y = image_container.position.y + new_y * this.scale;
@@ -714,43 +699,39 @@ export class ResizeTool implements Tool {
 		delta: Point,
 		maintain_aspect_ratio = false
 	): void {
-		// The delta is already in local coordinates, no need to scale it further
 		const background_image = this.image_editor_context.background_image;
 
 		if (!background_image) return;
 
-		// Store original dimensions and position
 		const original_width = background_image.width;
 		const original_height = background_image.height;
 		const original_x = background_image.position.x;
 		const original_y = background_image.position.y;
 		const original_aspect_ratio = original_width / original_height;
 
-		// Calculate current position based on the delta and the active handle
 		let current_position: Point;
 
 		if (this.active_corner_index !== -1) {
-			// For corners, calculate the current position based on the corner and delta
 			switch (this.active_corner_index) {
-				case 0: // Top-left
+				case 0:
 					current_position = new Point(
 						original_x - delta.x,
 						original_y - delta.y
 					);
 					break;
-				case 1: // Top-right
+				case 1:
 					current_position = new Point(
 						original_x + original_width + delta.x,
 						original_y - delta.y
 					);
 					break;
-				case 2: // Bottom-left
+				case 2:
 					current_position = new Point(
 						original_x - delta.x,
 						original_y + original_height + delta.y
 					);
 					break;
-				case 3: // Bottom-right
+				case 3:
 					current_position = new Point(
 						original_x + original_width + delta.x,
 						original_y + original_height + delta.y
@@ -760,7 +741,6 @@ export class ResizeTool implements Tool {
 					return;
 			}
 
-			// Use the existing corner resize logic
 			const dimensions = this.handle_direct_corner_resize(
 				current_position,
 				original_width,
@@ -771,32 +751,30 @@ export class ResizeTool implements Tool {
 				maintain_aspect_ratio
 			);
 
-			// Apply the new dimensions and position
 			background_image.width = dimensions.width;
 			background_image.height = dimensions.height;
 			background_image.position.set(dimensions.x, dimensions.y);
 		} else if (this.active_edge_index !== -1) {
-			// For edges, calculate the current position based on the edge and delta
 			switch (this.active_edge_index) {
-				case 0: // Top
+				case 0:
 					current_position = new Point(
 						original_x + original_width / 2,
 						original_y - delta.y
 					);
 					break;
-				case 1: // Bottom
+				case 1:
 					current_position = new Point(
 						original_x + original_width / 2,
 						original_y + original_height + delta.y
 					);
 					break;
-				case 2: // Left
+				case 2:
 					current_position = new Point(
 						original_x - delta.x,
 						original_y + original_height / 2
 					);
 					break;
-				case 3: // Right
+				case 3:
 					current_position = new Point(
 						original_x + original_width + delta.x,
 						original_y + original_height / 2
@@ -806,7 +784,6 @@ export class ResizeTool implements Tool {
 					return;
 			}
 
-			// Use the existing edge resize logic
 			const dimensions = this.handle_direct_edge_resize(
 				current_position,
 				original_width,
@@ -815,16 +792,11 @@ export class ResizeTool implements Tool {
 				original_y
 			);
 
-			// Apply the new dimensions and position
 			background_image.width = dimensions.width;
 			background_image.height = dimensions.height;
 			background_image.position.set(dimensions.x, dimensions.y);
 		}
 
-		// We don't apply boundary constraints during resizing
-		// This will be done when the user releases the mouse in handle_pointer_up
-
-		// Update the resize UI to match the new position and dimensions
 		this.update_resize_ui();
 	}
 
@@ -842,36 +814,28 @@ export class ResizeTool implements Tool {
 		const background_image = this.image_editor_context.background_image;
 		const image_container = this.image_editor_context.image_container;
 
-		// Get current image container global position
 		const container_global_pos = image_container.getGlobalPosition();
 
-		// Calculate background image position in global coordinates
 		const bg_pos_x = background_image.position.x * this.scale;
 		const bg_pos_y = background_image.position.y * this.scale;
 
-		// Position resize UI precisely to match the image position in global space
 		this.resize_ui_container.position.set(
 			container_global_pos.x + bg_pos_x,
 			container_global_pos.y + bg_pos_y
 		);
 
-		// Get the scaled dimensions
 		const scaled_width = background_image.width * this.scale;
 		const scaled_height = background_image.height * this.scale;
 
-		// Redraw the outline so it matches the resize_bounds size
 		const outline = this.resize_ui_container.getChildAt(0) as Graphics;
 		outline
 			.clear()
 			.rect(0, 0, scaled_width, scaled_height)
 			.stroke({ width: 1, color: 0x000000, alignment: 0, alpha: 0.3 });
 
-		// Redraw the dotted outline
 		const dotted_outline = this.resize_ui_container.getChildAt(1) as Graphics;
 		dotted_outline.clear();
 
-		// Use simpler more performant approach for the dotted outline
-		// Just draw the solid outline with pixelLine for crisp rendering
 		dotted_outline.rect(0, 0, scaled_width, scaled_height).stroke({
 			width: 1,
 			color: 0x000000,
@@ -879,27 +843,20 @@ export class ResizeTool implements Tool {
 			pixelLine: true
 		});
 
-		// Only draw dashes when not actively resizing or moving to improve performance
-		// And disable dashes during zoom operations to prevent lag
 		if (
 			!this.is_dragging &&
 			!this.is_moving &&
 			Math.abs(this.scale - this.last_scale) < 0.001
 		) {
-			// Create dashed line effect by drawing small rectangles along the border
 			const dash_length = 5;
 			const gap_length = 5;
 			const total_length = dash_length + gap_length;
 
-			// Draw dashed horizontal lines (top and bottom) - draw fewer dashes for performance
 			for (let x = 0; x < scaled_width; x += total_length * 2) {
-				// Skip every other dash
-				// Top dash
 				dotted_outline
 					.rect(x, 0, Math.min(dash_length, scaled_width - x), 1)
 					.fill(0x000000);
 
-				// Bottom dash
 				dotted_outline
 					.rect(
 						x,
@@ -910,15 +867,11 @@ export class ResizeTool implements Tool {
 					.fill(0x000000);
 			}
 
-			// Draw dashed vertical lines (left and right) - draw fewer dashes for performance
 			for (let y = 0; y < scaled_height; y += total_length * 2) {
-				// Skip every other dash
-				// Left dash
 				dotted_outline
 					.rect(0, y, 1, Math.min(dash_length, scaled_height - y))
 					.fill(0x000000);
 
-				// Right dash
 				dotted_outline
 					.rect(
 						scaled_width - 1,
@@ -930,14 +883,11 @@ export class ResizeTool implements Tool {
 			}
 		}
 
-		// Store the current scale for comparison on next update
 		this.last_scale = this.scale;
 
-		// Update the move area
 		const move_area = this.resize_ui_container.getChildAt(2) as Graphics;
 		move_area.clear().rect(0, 0, scaled_width, scaled_height).fill(0xffffff, 0);
 
-		// Update handle positions to reflect the resized area
 		this.update_handle_positions(scaled_width, scaled_height);
 	}
 
@@ -949,34 +899,28 @@ export class ResizeTool implements Tool {
 	private update_handle_positions(width: number, height: number): void {
 		if (!this.resize_ui_container) return;
 
-		// Skip the outline, dotted outline, and move area (index 0, 1, and 2), get corner/edge handles
 		const handles = this.resize_ui_container.children.slice(3);
 
-		// Update the move area size
 		const move_area = this.resize_ui_container.getChildAt(2) as Graphics;
 		move_area.clear().rect(0, 0, width, height).fill(0xffffff, 0);
 
-		// First 4 are corners
 		const corners = handles.slice(0, 4);
 		const cornerPositions = [
-			{ x: 0, y: 0 }, // Top-left
-			{ x: width, y: 0 }, // Top-right
-			{ x: 0, y: height }, // Bottom-left
-			{ x: width, y: height } // Bottom-right
+			{ x: 0, y: 0 },
+			{ x: width, y: 0 },
+			{ x: 0, y: height },
+			{ x: width, y: height }
 		];
 
 		corners.forEach((handle, i) => {
 			handle.position.set(cornerPositions[i].x, cornerPositions[i].y);
 		});
 
-		// Remaining 4 are edges
 		const edges = handles.slice(4);
 		edges.forEach((handle, i) => {
 			if (i < 2) {
-				// Top/Bottom edges
 				handle.position.set(width / 2, i === 0 ? 0 : height);
 			} else {
-				// Left/Right edges
 				handle.position.set(i === 2 ? 0 : width, height / 2);
 			}
 		});
@@ -992,7 +936,6 @@ export class ResizeTool implements Tool {
 		stage.on("pointerup", this.handle_pointer_up.bind(this));
 		stage.on("pointerupoutside", this.handle_pointer_up.bind(this));
 
-		// Set up direct DOM event listeners for dragging the background image
 		this.setup_dom_event_listeners();
 	}
 
@@ -1000,113 +943,120 @@ export class ResizeTool implements Tool {
 	 * Sets up direct DOM event listeners for dragging the background image
 	 */
 	private setup_dom_event_listeners(): void {
-		// Clean up any existing DOM event listeners
 		this.cleanup_dom_event_listeners();
 
 		const canvas = this.image_editor_context.app.canvas;
 
-		// Define the mousedown handler
 		this.dom_mousedown_handler = (e: MouseEvent) => {
-			// Only process if we're in the size subtool
 			if (this.current_subtool !== "size") return;
 
-			// Check if we're already dragging a handle (resize operation)
 			if (this.is_dragging || this.selected_handle) return;
 
-			// Check if we have a background image
 			if (!this.image_editor_context.background_image) return;
 
 			const bg = this.image_editor_context.background_image;
 
-			// Get container and background image bounds
 			const container = this.image_editor_context.image_container;
 			const containerBounds = container.getBounds();
 
-			// Get mouse position relative to the canvas
 			const rect = canvas.getBoundingClientRect();
 			const x = e.clientX - rect.left;
 			const y = e.clientY - rect.top;
 
-			// Convert to local coordinates within the container
 			const localX = (x - containerBounds.x) / this.scale;
 			const localY = (y - containerBounds.y) / this.scale;
 
-			// Check if the click is within the background image bounds using local coordinates
 			if (
 				localX >= bg.position.x &&
 				localX <= bg.position.x + bg.width &&
 				localY >= bg.position.y &&
 				localY <= bg.position.y + bg.height
 			) {
-				// Set the moving flag to true to indicate we're dragging the image
 				this.is_moving = true;
 
-				// Store the initial pointer position in local coordinates
 				this.last_pointer_position = new Point(localX, localY);
 
-				// Prevent default behavior and stop propagation
+				this.original_state = {
+					width: bg.width,
+					height: bg.height,
+					x: bg.position.x,
+					y: bg.position.y
+				};
+
 				e.preventDefault();
 				e.stopPropagation();
 			}
 		};
 
-		// Define the mousemove handler
 		this.dom_mousemove_handler = (e: MouseEvent) => {
-			// Only process if we're in the size subtool and we're moving the image
 			if (this.current_subtool !== "size" || !this.is_moving) return;
 
-			// Check if we have the necessary state
 			if (
 				!this.last_pointer_position ||
 				!this.image_editor_context.background_image
 			)
 				return;
 
-			// Get container bounds
 			const container = this.image_editor_context.image_container;
 			const containerBounds = container.getBounds();
 
-			// Get mouse position relative to the canvas
 			const rect = canvas.getBoundingClientRect();
 			const x = e.clientX - rect.left;
 			const y = e.clientY - rect.top;
 
-			// Convert to local coordinates within the container
 			const localX = (x - containerBounds.x) / this.scale;
 			const localY = (y - containerBounds.y) / this.scale;
 
-			// Create a current position point
 			const current_position = new Point(localX, localY);
 
-			// Handle image dragging
 			this.handle_image_dragging(current_position);
 
-			// Update the last pointer position for continuous dragging
 			this.last_pointer_position = current_position;
 
-			// Prevent default behavior and stop propagation
 			e.preventDefault();
 			e.stopPropagation();
 		};
 
-		// Define the mouseup handler
 		this.dom_mouseup_handler = (e: MouseEvent) => {
-			// Only process if we're in the size subtool and we're moving the image
-			if (this.current_subtool !== "size" || !this.is_moving) return;
+			if (this.current_subtool !== "size") return;
+
+			if (this.original_state && this.image_editor_context.background_image) {
+				const bg = this.image_editor_context.background_image;
+				const new_state = {
+					width: bg.width,
+					height: bg.height,
+					x: bg.position.x,
+					y: bg.position.y
+				};
+
+				if (
+					this.original_state.width !== new_state.width ||
+					this.original_state.height !== new_state.height ||
+					this.original_state.x !== new_state.x ||
+					this.original_state.y !== new_state.y
+				) {
+					const resize_command = new ResizeCommand(
+						this.image_editor_context,
+						this.original_state,
+						new_state,
+						this.update_resize_ui.bind(this)
+					);
+
+					this.image_editor_context.execute_command(resize_command);
+				}
+
+				this.original_state = null;
+			}
 
-			// Reset all state variables
 			this.is_moving = false;
 			this.last_pointer_position = null;
 
-			// Update the resize UI without applying constraints
 			this.update_resize_ui();
 
-			// Prevent default behavior and stop propagation
 			e.preventDefault();
 			e.stopPropagation();
 		};
 
-		// Add the event listeners
 		canvas.addEventListener("mousedown", this.dom_mousedown_handler);
 		window.addEventListener("mousemove", this.dom_mousemove_handler);
 		window.addEventListener("mouseup", this.dom_mouseup_handler);
@@ -1144,7 +1094,6 @@ export class ResizeTool implements Tool {
 		stage.off("pointerup", this.handle_pointer_up.bind(this));
 		stage.off("pointerupoutside", this.handle_pointer_up.bind(this));
 
-		// Clean up DOM event listeners
 		this.cleanup_dom_event_listeners();
 	}
 
@@ -1154,38 +1103,31 @@ export class ResizeTool implements Tool {
 	private handle_pointer_move(event: FederatedPointerEvent): void {
 		if (this.current_subtool !== "size") return;
 
-		// Get the current pointer position in local coordinates
 		const local_pos = this.image_editor_context.image_container.toLocal(
 			event.global
 		);
 		const current_position = new Point(local_pos.x, local_pos.y);
 
 		if (this.is_moving && this.last_pointer_position) {
-			// Handle image dragging
 			this.handle_image_dragging(current_position);
 
-			// Update the last pointer position for continuous dragging
 			this.last_pointer_position = current_position;
 		} else if (this.is_dragging && this.selected_handle) {
-			// Handle resizing
 			if (!this.image_editor_context.background_image) return;
 
 			const bg = this.image_editor_context.background_image;
 			const maintain_aspect_ratio =
 				this.active_corner_index !== -1 && !event.shiftKey;
 
-			// Get the original dimensions and position
 			const original_width = bg.width;
 			const original_height = bg.height;
 			const original_x = bg.position.x;
 			const original_y = bg.position.y;
 			const original_aspect_ratio = original_width / original_height;
 
-			// Calculate new dimensions and position based on the active handle
 			let dimensions: { width: number; height: number; x: number; y: number };
 
 			if (this.active_corner_index !== -1) {
-				// Handle corner resizing
 				dimensions = this.handle_direct_corner_resize(
 					current_position,
 					original_width,
@@ -1196,7 +1138,6 @@ export class ResizeTool implements Tool {
 					maintain_aspect_ratio
 				);
 			} else if (this.active_edge_index !== -1) {
-				// Handle edge resizing
 				dimensions = this.handle_direct_edge_resize(
 					current_position,
 					original_width,
@@ -1205,10 +1146,9 @@ export class ResizeTool implements Tool {
 					original_y
 				);
 			} else {
-				return; // No active handle
+				return;
 			}
 
-			// Limit dimensions to container size
 			dimensions = this.limit_dimensions_to_container(
 				dimensions,
 				original_x,
@@ -1218,26 +1158,21 @@ export class ResizeTool implements Tool {
 				maintain_aspect_ratio
 			);
 
-			// Apply the new dimensions and position
 			bg.width = dimensions.width;
 			bg.height = dimensions.height;
 			bg.position.set(dimensions.x, dimensions.y);
 
-			// Update the resize UI
 			this.update_resize_ui();
 
-			// Update the last pointer position
 			this.last_pointer_position = current_position;
 		}
 	}
-
 	/**
 	 * handles pointer up events
 	 */
 	private handle_pointer_up(): void {
 		if (this.current_subtool !== "size") return;
 
-		// Reset all state variables
 		this.is_dragging = false;
 		this.is_moving = false;
 		this.selected_handle = null;
@@ -1245,7 +1180,6 @@ export class ResizeTool implements Tool {
 		this.active_corner_index = -1;
 		this.active_edge_index = -1;
 
-		// Update the resize UI without applying constraints
 		this.update_resize_ui();
 		this.notify("change");
 	}
@@ -1263,58 +1197,46 @@ export class ResizeTool implements Tool {
 			return;
 		}
 
-		// Get the background image and container
 		const bg = this.image_editor_context.background_image;
 		const image_container =
 			this.image_editor_context.image_container.getLocalBounds();
 
-		// Calculate the delta in local coordinates
 		const dx = current_position.x - this.last_pointer_position.x;
 		const dy = current_position.y - this.last_pointer_position.y;
 
-		// Update the position directly based on the current position of the background image
 		let new_x = bg.position.x + dx;
 		let new_y = bg.position.y + dy;
 
-		// Apply boundary constraints directly during dragging
 		const container_width = image_container.width;
 		const container_height = image_container.height;
 		const bg_width = bg.width;
 		const bg_height = bg.height;
 
-		// Calculate effective dimensions accounting for border region
 		const effectiveWidth = container_width - this.borderRegion * 2;
 		const effectiveHeight = container_height - this.borderRegion * 2;
 
-		// For images larger than the effective container area, constrain to maintain border
 		if (bg_width > effectiveWidth) {
-			// Calculate the minimum and maximum allowed positions
 			const min_x = -(bg_width - effectiveWidth) + this.borderRegion;
 			const max_x = this.borderRegion;
 			new_x = Math.max(min_x, Math.min(max_x, new_x));
 		} else {
-			// For smaller images, ensure they maintain the border region
 			const min_x = this.borderRegion;
 			const max_x = container_width - bg_width - this.borderRegion;
 			new_x = Math.max(min_x, Math.min(max_x, new_x));
 		}
 
 		if (bg_height > effectiveHeight) {
-			// Calculate the minimum and maximum allowed positions
 			const min_y = -(bg_height - effectiveHeight) + this.borderRegion;
 			const max_y = this.borderRegion;
 			new_y = Math.max(min_y, Math.min(max_y, new_y));
 		} else {
-			// For smaller images, ensure they maintain the border region
 			const min_y = this.borderRegion;
 			const max_y = container_height - bg_height - this.borderRegion;
 			new_y = Math.max(min_y, Math.min(max_y, new_y));
 		}
 
-		// Apply the new position
 		bg.position.set(new_x, new_y);
 
-		// Update the resize UI to match the new position
 		this.update_resize_ui();
 	}
 
@@ -1339,76 +1261,63 @@ export class ResizeTool implements Tool {
 		original_aspect_ratio: number,
 		maintain_aspect_ratio: boolean
 	): { width: number; height: number; x: number; y: number } {
-		// Calculate the raw dimensions based on mouse position
 		let raw_width = 0;
 		let raw_height = 0;
 		let new_x = original_x;
 		let new_y = original_y;
 
-		// Calculate raw dimensions based on the active corner
 		switch (this.active_corner_index) {
-			case 0: // Top-left
+			case 0:
 				raw_width = original_x + original_width - current_position.x;
 				raw_height = original_y + original_height - current_position.y;
 				break;
-			case 1: // Top-right
+			case 1:
 				raw_width = current_position.x - original_x;
 				raw_height = original_y + original_height - current_position.y;
 				break;
-			case 2: // Bottom-left
+			case 2:
 				raw_width = original_x + original_width - current_position.x;
 				raw_height = current_position.y - original_y;
 				break;
-			case 3: // Bottom-right
+			case 3:
 				raw_width = current_position.x - original_x;
 				raw_height = current_position.y - original_y;
 				break;
 		}
 
-		// Ensure minimum size
 		raw_width = Math.max(20, raw_width);
 		raw_height = Math.max(20, raw_height);
 
-		// Calculate final dimensions
 		let new_width = raw_width;
 		let new_height = raw_height;
 
-		// Apply aspect ratio if needed
 		if (maintain_aspect_ratio) {
-			// Use a consistent approach to determine which dimension to prioritize
-			// This prevents jumping between different calculations
 			const diagonal_vector = {
 				x: current_position.x - (original_x + original_width / 2),
 				y: current_position.y - (original_y + original_height / 2)
 			};
 
-			// Calculate the angle of movement relative to horizontal
 			const angle = Math.abs(Math.atan2(diagonal_vector.y, diagonal_vector.x));
 
-			// If moving more horizontally, prioritize width; otherwise, prioritize height
 			if (angle < Math.PI / 4 || angle > (3 * Math.PI) / 4) {
-				// Prioritize width (horizontal movement)
 				new_height = new_width / original_aspect_ratio;
 			} else {
-				// Prioritize height (vertical movement)
 				new_width = new_height * original_aspect_ratio;
 			}
 		}
 
-		// Calculate the new position based on the active corner
 		switch (this.active_corner_index) {
-			case 0: // Top-left
+			case 0:
 				new_x = original_x + original_width - new_width;
 				new_y = original_y + original_height - new_height;
 				break;
-			case 1: // Top-right
+			case 1:
 				new_y = original_y + original_height - new_height;
 				break;
-			case 2: // Bottom-left
+			case 2:
 				new_x = original_x + original_width - new_width;
 				break;
-			case 3: // Bottom-right
-				// Position stays the same
+			case 3:
 				break;
 		}
 
@@ -1432,41 +1341,31 @@ export class ResizeTool implements Tool {
 		original_x: number,
 		original_y: number
 	): { width: number; height: number; x: number; y: number } {
-		// Calculate raw dimensions based on mouse position
 		let new_width = original_width;
 		let new_height = original_height;
 		let new_x = original_x;
 		let new_y = original_y;
 
-		// Handle edge dragging - directly use mouse position for more intuitive control
 		switch (this.active_edge_index) {
-			case 0: // Top
-				// Calculate height based on distance from bottom edge
+			case 0:
 				new_height = Math.max(
 					20,
 					original_y + original_height - current_position.y
 				);
-				// Set y position to mouse position
 				new_y = current_position.y;
 				break;
-			case 1: // Bottom
-				// Calculate height based on distance from top edge
+			case 1:
 				new_height = Math.max(20, current_position.y - original_y);
-				// y position stays the same
 				break;
-			case 2: // Left
-				// Calculate width based on distance from right edge
+			case 2:
 				new_width = Math.max(
 					20,
 					original_x + original_width - current_position.x
 				);
-				// Set x position to mouse position
 				new_x = current_position.x;
 				break;
-			case 3: // Right
-				// Calculate width based on distance from left edge
+			case 3:
 				new_width = Math.max(20, current_position.x - original_x);
-				// x position stays the same
 				break;
 		}
 
@@ -1499,17 +1398,14 @@ export class ResizeTool implements Tool {
 			y: new_y
 		} = dimensions;
 
-		// Account for border region when determining maximum dimensions
 		const effective_container_width =
 			this.dimensions.width - this.borderRegion * 2;
 		const effective_container_height =
 			this.dimensions.height - this.borderRegion * 2;
 
-		// Store the original dimensions before limiting
 		const pre_limit_width = new_width;
 		const pre_limit_height = new_height;
 
-		// Step 1: Apply container size limits
 		const size_limited = this.apply_size_limits(
 			new_width,
 			new_height,
@@ -1522,7 +1418,6 @@ export class ResizeTool implements Tool {
 		new_width = size_limited.width;
 		new_height = size_limited.height;
 
-		// Step 2: Recalculate position based on active handles
 		const position_adjusted = this.adjust_position_for_resizing(
 			new_width,
 			new_height,
@@ -1535,7 +1430,6 @@ export class ResizeTool implements Tool {
 		new_x = position_adjusted.x;
 		new_y = position_adjusted.y;
 
-		// Step 3: Apply border region constraints
 		const border_constrained = this.apply_border_constraints(
 			new_width,
 			new_height,
@@ -1563,36 +1457,30 @@ export class ResizeTool implements Tool {
 		let new_width = width;
 		let new_height = height;
 
-		// Check if we need to limit dimensions
 		const needs_width_limit = new_width > max_width;
 		const needs_height_limit = new_height > max_height;
 
-		// If both dimensions need limiting, choose the more restrictive one
 		if (needs_width_limit && needs_height_limit) {
 			const width_scale = max_width / new_width;
 			const height_scale = max_height / new_height;
 
 			if (width_scale < height_scale) {
-				// Width is more restrictive
 				new_width = max_width;
 				if (maintain_aspect_ratio) {
 					new_height = new_width / aspect_ratio;
 				}
 			} else {
-				// Height is more restrictive
 				new_height = max_height;
 				if (maintain_aspect_ratio) {
 					new_width = new_height * aspect_ratio;
 				}
 			}
 		} else if (needs_width_limit) {
-			// Only width needs limiting
 			new_width = max_width;
 			if (maintain_aspect_ratio) {
 				new_height = new_width / aspect_ratio;
 			}
 		} else if (needs_height_limit) {
-			// Only height needs limiting
 			new_height = max_height;
 			if (maintain_aspect_ratio) {
 				new_width = new_height * aspect_ratio;
@@ -1617,30 +1505,27 @@ export class ResizeTool implements Tool {
 		let new_x = original_x;
 		let new_y = original_y;
 
-		// Recalculate position based on the active handle and the new dimensions
 		switch (this.active_corner_index) {
-			case 0: // Top-left
+			case 0:
 				new_x = original_x + original_width - new_width;
 				new_y = original_y + original_height - new_height;
 				break;
-			case 1: // Top-right
+			case 1:
 				new_y = original_y + original_height - new_height;
 				break;
-			case 2: // Bottom-left
+			case 2:
 				new_x = original_x + original_width - new_width;
 				break;
-			case 3: // Bottom-right
-				// Position stays the same
+			case 3:
 				break;
 		}
 
-		// Handle edge cases
 		if (this.active_edge_index !== -1) {
 			switch (this.active_edge_index) {
-				case 0: // Top
+				case 0:
 					new_y = original_y + original_height - new_height;
 					break;
-				case 2: // Left
+				case 2:
 					new_x = original_x + original_width - new_width;
 					break;
 			}
@@ -1661,7 +1546,6 @@ export class ResizeTool implements Tool {
 		maintain_aspect_ratio: boolean,
 		aspect_ratio: number
 	): { width: number; height: number; x: number; y: number } {
-		// First apply left and top constraints
 		const top_left_constrained = this.apply_top_left_constraints(
 			width,
 			height,
@@ -1671,7 +1555,6 @@ export class ResizeTool implements Tool {
 			aspect_ratio
 		);
 
-		// Then apply right and bottom constraints
 		const all_constrained = this.apply_bottom_right_constraints(
 			top_left_constrained.width,
 			top_left_constrained.height,
@@ -1681,7 +1564,6 @@ export class ResizeTool implements Tool {
 			aspect_ratio
 		);
 
-		// Ensure minimum dimensions
 		all_constrained.width = Math.max(20, all_constrained.width);
 		all_constrained.height = Math.max(20, all_constrained.height);
 
@@ -1705,36 +1587,28 @@ export class ResizeTool implements Tool {
 		let new_x = x;
 		let new_y = y;
 
-		// Apply left border constraint
 		if (new_x < this.borderRegion) {
-			// Adjust width if needed when left edge hits border
 			if (
 				this.active_corner_index === 0 ||
 				this.active_corner_index === 2 ||
 				this.active_edge_index === 2
 			) {
-				// If resizing from left side, adjust width to maintain the adjusted position
 				new_width -= this.borderRegion - new_x;
 				if (maintain_aspect_ratio) {
-					// Recalculate height based on new width
 					new_height = new_width / aspect_ratio;
 				}
 			}
 			new_x = this.borderRegion;
 		}
 
-		// Apply top border constraint
 		if (new_y < this.borderRegion) {
-			// Adjust height if needed when top edge hits border
 			if (
 				this.active_corner_index === 0 ||
 				this.active_corner_index === 1 ||
 				this.active_edge_index === 0
 			) {
-				// If resizing from top side, adjust height to maintain the adjusted position
 				new_height -= this.borderRegion - new_y;
 				if (maintain_aspect_ratio) {
-					// Recalculate width based on new height
 					new_width = new_height * aspect_ratio;
 				}
 			}
@@ -1761,9 +1635,7 @@ export class ResizeTool implements Tool {
 		let new_x = x;
 		let new_y = y;
 
-		// Apply right border constraint
 		if (new_x + new_width > this.dimensions.width - this.borderRegion) {
-			// If resizing from right side, adjust width
 			if (
 				this.active_corner_index === 1 ||
 				this.active_corner_index === 3 ||
@@ -1774,16 +1646,13 @@ export class ResizeTool implements Tool {
 					new_height = new_width / aspect_ratio;
 				}
 			} else {
-				// If resizing from left side, adjust position and preserve width if possible
 				const right_edge = new_x + new_width;
 				const excess = right_edge - (this.dimensions.width - this.borderRegion);
 				new_x = Math.max(this.borderRegion, new_x - excess);
 			}
 		}
 
-		// Apply bottom border constraint
 		if (new_y + new_height > this.dimensions.height - this.borderRegion) {
-			// If resizing from bottom side, adjust height
 			if (
 				this.active_corner_index === 2 ||
 				this.active_corner_index === 3 ||
@@ -1794,7 +1663,6 @@ export class ResizeTool implements Tool {
 					new_width = new_height * aspect_ratio;
 				}
 			} else {
-				// If resizing from top side, adjust position and preserve height if possible
 				const bottom_edge = new_y + new_height;
 				const excess =
 					bottom_edge - (this.dimensions.height - this.borderRegion);
@@ -1815,14 +1683,12 @@ export class ResizeTool implements Tool {
 			this.update_resize_ui();
 		}
 
-		// Make sure the background image has a cursor indicating it can be moved
 		if (this.image_editor_context.background_image) {
 			const bg = this.image_editor_context.background_image;
 			this.current_cursor = bg.cursor;
 			bg.cursor = "move";
 		}
 
-		// Set up DOM event listeners
 		this.setup_dom_event_listeners();
 	}
 
@@ -1835,13 +1701,11 @@ export class ResizeTool implements Tool {
 			this.resize_ui_container.visible = false;
 		}
 
-		// Reset cursor on background image
 		if (this.image_editor_context.background_image) {
 			const bg = this.image_editor_context.background_image;
 			bg.cursor = this.current_cursor;
 		}
 
-		// Clean up DOM event listeners
 		this.cleanup_dom_event_listeners();
 	}
 
@@ -1872,18 +1736,15 @@ export class ResizeTool implements Tool {
 	public set_border_region(borderRegion: number): void {
 		this.borderRegion = borderRegion;
 
-		// Store it on the background image if it exists
 		if (this.image_editor_context?.background_image) {
 			(this.image_editor_context.background_image as any).borderRegion =
 				borderRegion;
 		}
 
-		// Update UI if needed
 		if (this.resize_ui_container) {
 			this.update_resize_ui();
 		}
 
-		// Apply constraints if needed (only if we're in resize mode)
 		if (
 			this.current_subtool === "size" &&
 			this.image_editor_context?.background_image