@gradio/imageeditor 0.12.13 → 0.13.0

package/shared/crop/crop.ts

@@ -0,0 +1,1027 @@
+import {
+	Container,
+	Graphics,
+	Point,
+	Rectangle,
+	FederatedPointerEvent,
+	Sprite
+} from "pixi.js";
+import { type ImageEditorContext, type Tool } from "../core/editor";
+
+import { type Tool as ToolbarTool, type Subtool } from "../Toolbar.svelte";
+import { get_canvas_blob } from "../utils/pixi";
+
+/**
+ * @interface CropBounds
+ * @description Defines the bounds of a crop area
+ * @property {number} x - The x-coordinate of the crop area
+ * @property {number} y - The y-coordinate of the crop area
+ * @property {number} width - The width of the crop area
+ * @property {number} height - The height of the crop area
+ */
+interface CropBounds {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+/**
+ * @interface EditorState
+ * @description Defines the state of the editor
+ * @property {ToolbarTool} current_tool - The currently selected tool
+ * @property {Subtool} current_subtool - The currently selected subtool
+ */
+interface EditorState {
+	current_tool: ToolbarTool;
+	current_subtool: Subtool;
+}
+
+/**
+ * @class CropTool
+ * @implements {Tool}
+ * @description Implements the crop tool functionality for the image editor
+ */
+export class CropTool implements Tool {
+	name = "crop" as const;
+	private image_editor_context!: ImageEditorContext;
+	current_tool: ToolbarTool = "image";
+	current_subtool: Subtool = "crop";
+
+	// Constants
+	private readonly CORNER_SIZE = 25;
+	private readonly LINE_THICKNESS = 5;
+	private readonly HANDLE_COLOR = 0x000000;
+	private readonly HIT_AREA_SIZE = 40;
+
+	// State
+	private is_dragging = false;
+	private selected_handle: Container | null = null;
+	private active_corner_index = -1;
+	private active_edge_index = -1;
+	private last_pointer_position: Point | null = null;
+	crop_bounds: CropBounds = { x: 0, y: 0, width: 0, height: 0 };
+	private crop_ui_container: Container | null = null;
+	private crop_mask: Graphics | null = null;
+	private dimensions: { width: number; height: number } = {
+		width: 0,
+		height: 0
+	};
+	private position: { x: number; y: number } = { x: 0, y: 0 };
+	private scale = 1;
+	private is_dragging_window = false;
+	private drag_start_position: Point | null = null;
+	private drag_start_bounds: CropBounds | null = null;
+	private background_image_watcher: (() => void) | null = null;
+	private has_been_manually_changed = false;
+	private event_callbacks: Map<string, (() => void)[]> = new Map();
+	/**
+	 * @method setup
+	 * @async
+	 * @description Sets up the crop tool with the given context and state
+	 * @param {ImageEditorContext} context - The image editor context
+	 * @param {ToolbarTool} tool - The current tool
+	 * @param {Subtool} subtool - The current subtool
+	 * @returns {Promise<void>}
+	 */
+	async setup(
+		context: ImageEditorContext,
+		tool: ToolbarTool,
+		subtool: Subtool
+	): Promise<void> {
+		this.image_editor_context = context;
+		this.current_tool = tool;
+		this.current_subtool = subtool;
+
+		context.dimensions.subscribe((dimensions) => {
+			this.dimensions = dimensions;
+
+			// Update crop bounds to match new dimensions
+			this.crop_bounds = {
+				x: 0,
+				y: 0,
+				width: dimensions.width,
+				height: dimensions.height
+			};
+
+			// Force UI update if it exists
+			if (this.crop_ui_container) {
+				this.update_crop_ui();
+			}
+
+			// Always update the mask when dimensions change
+			this.set_crop_mask();
+			this.update_crop_mask();
+		});
+
+		context.position.subscribe((position) => {
+			this.position = position;
+		});
+
+		context.scale.subscribe((scale) => {
+			this.scale = scale;
+		});
+
+		// Setup a background image watcher to ensure we always apply the mask to the current background image
+		this.background_image_watcher = () => {
+			// Only apply when crop tool is active and we have a mask
+			if (
+				this.crop_mask &&
+				this.current_tool === "image" &&
+				this.current_subtool === "crop"
+			) {
+				// Get a fresh reference to the background image and apply the mask
+				if (this.image_editor_context.background_image) {
+					this.image_editor_context.background_image.setMask(this.crop_mask);
+				}
+			}
+		};
+
+		// Add the watcher to the ticker to regularly check for background image changes
+		this.image_editor_context.app.ticker.add(this.background_image_watcher);
+
+		// Initialize crop UI
+		await this.init_crop_ui();
+
+		// Setup event listeners
+		this.setup_event_listeners();
+
+		// Ensure the crop UI visibility matches the current tool state
+		const isCropActive = tool === "image" && subtool === "crop";
+		if (this.crop_ui_container) {
+			this.crop_ui_container.visible = isCropActive;
+		}
+	}
+
+	/**
+	 * @method cleanup
+	 * @description Cleans up the crop tool resources and removes event listeners
+	 * @returns {void}
+	 */
+	cleanup(): void {
+		// Remove the crop UI container
+		if (this.crop_ui_container) {
+			this.image_editor_context.app.stage.removeChild(this.crop_ui_container);
+		}
+
+		// Remove the mask and reset the image container's mask property
+		if (this.crop_mask) {
+			if (this.crop_mask.parent) {
+				this.crop_mask.parent.removeChild(this.crop_mask);
+			}
+
+			// Clear mask from background_image if applied
+			if (
+				this.image_editor_context.background_image &&
+				this.image_editor_context.background_image.mask === this.crop_mask
+			) {
+				this.image_editor_context.background_image.mask = null;
+			}
+
+			// Clear mask from image_container if applied
+			if (this.image_editor_context.image_container.mask === this.crop_mask) {
+				this.image_editor_context.image_container.mask = null;
+			}
+		}
+
+		// Ensure all references to the crop mask are cleared
+		this.crop_mask = null;
+		this.crop_ui_container = null;
+
+		// Remove the background image watcher from the ticker
+		if (this.background_image_watcher) {
+			this.image_editor_context.app.ticker.remove(
+				this.background_image_watcher
+			);
+			this.background_image_watcher = null;
+		}
+
+		// Remove event listeners
+		this.cleanup_event_listeners();
+	}
+
+	/**
+	 * @method set_tool
+	 * @description Sets the current tool and subtool, updating UI visibility
+	 * @param {ToolbarTool} tool - The tool to set
+	 * @param {Subtool} subtool - The subtool to set
+	 * @returns {void}
+	 */
+	set_tool(tool: ToolbarTool, subtool: Subtool): void {
+		this.current_tool = tool;
+		this.current_subtool = subtool;
+
+		// Show/hide crop UI based on tool and subtool
+		const isCropActive = tool === "image" && subtool === "crop";
+
+		// Only update the UI visibility, not the mask
+		if (this.crop_ui_container) {
+			this.crop_ui_container.visible = isCropActive;
+		}
+
+		// If crop tool is active, ensure the mask is up to date
+		if (isCropActive && this.crop_mask) {
+			this.update_crop_mask();
+		}
+	}
+
+	/**
+	 * @method set_crop_mask
+	 * @private
+	 * @description Sets up the crop mask for the image
+	 * @returns {void}
+	 */
+	private set_crop_mask(): void {
+		// Remove any existing mask to avoid duplicates
+		if (this.crop_mask) {
+			if (this.crop_mask.parent) {
+				this.crop_mask.parent.removeChild(this.crop_mask);
+			}
+
+			// Clear mask from image_container if it was applied there
+			if (this.image_editor_context.image_container.mask === this.crop_mask) {
+				this.image_editor_context.image_container.mask = null;
+			}
+
+			// Clear mask from background_image if it was applied there
+			if (
+				this.image_editor_context.background_image &&
+				this.image_editor_context.background_image.mask === this.crop_mask
+			) {
+				this.image_editor_context.background_image.mask = null;
+			}
+		}
+
+		// Create a new mask that will actually be used as an overlay
+		this.crop_mask = new Graphics();
+
+		// Add the mask/overlay to the display list
+		// This time it should be visible since we want to see the semi-transparent overlay
+		this.image_editor_context.image_container.addChild(this.crop_mask);
+	}
+
+	/**
+	 * @method init_crop_ui
+	 * @private
+	 * @async
+	 * @description Initializes the crop UI elements and sets up the update loop
+	 * @returns {Promise<void>}
+	 */
+	private async init_crop_ui(): Promise<void> {
+		// Create crop UI with scaled dimensions
+		const { width, height } =
+			this.image_editor_context.background_image?.getLocalBounds() || {
+				width: false,
+				height: false
+			};
+
+		this.crop_ui_container = this.make_crop_ui(
+			this.dimensions.width * this.scale,
+			this.dimensions.height * this.scale
+		);
+
+		// Position the crop UI container at the image position
+		this.crop_ui_container.position.set(this.position.x, this.position.y);
+
+		// Initially hide the crop UI until explicitly enabled by set_tool
+		this.crop_ui_container.visible = false;
+
+		this.image_editor_context.app.stage.addChild(this.crop_ui_container);
+
+		// Create and apply mask to the image container
+		this.set_crop_mask();
+
+		// Start the update loop for the UI
+		this.image_editor_context.app.ticker.add(this.update_crop_ui.bind(this));
+
+		// Initialize the mask with the current crop bounds
+		this.update_crop_mask();
+	}
+
+	/**
+	 * @method make_crop_ui
+	 * @private
+	 * @description Creates the crop UI with the specified dimensions
+	 * @param {number} width - Width of the crop area
+	 * @param {number} height - Height of the crop area
+	 * @returns {Container} The created crop UI container
+	 */
+	private make_crop_ui(width: number, height: number): Container {
+		const crop_container = new Container();
+		crop_container.eventMode = "static";
+		crop_container.interactiveChildren = true;
+
+		// Create crop outline with hit area for dragging
+		const crop_outline = new Graphics()
+			.rect(0, 0, width, height)
+			.stroke({ width: 1, color: 0x000000, alignment: 0, alpha: 0.5 });
+
+		// Make the outline interactive
+		crop_outline.eventMode = "static";
+		crop_outline.cursor = "move";
+
+		// Set hit area to match the outline's dimensions
+		crop_outline.hitArea = new Rectangle(0, 0, width, height);
+
+		// Add drag handlers to the outline
+		crop_outline.on("pointerdown", this.handle_window_drag_start.bind(this));
+
+		crop_container.addChild(crop_outline);
+
+		// Create corner handles
+		this.create_corner_handles(crop_container, width, height);
+
+		// Create edge handles
+		this.create_edge_handles(crop_container, width, height);
+
+		return crop_container;
+	}
+
+	/**
+	 * @method create_handle
+	 * @private
+	 * @description Creates a handle for the crop UI
+	 * @param {boolean} [is_edge=false] - Whether the handle is an edge handle
+	 * @returns {Container} The created handle container
+	 */
+	private create_handle(is_edge = false): Container {
+		const handle = new Container();
+		handle.eventMode = "static";
+
+		const handle_graphics = new Graphics();
+
+		if (is_edge) {
+			// Create a shorter bar for edge handles (2x instead of 3x)
+			handle_graphics
+				.rect(0, 0, this.CORNER_SIZE * 1.5, this.LINE_THICKNESS)
+				.fill(this.HANDLE_COLOR);
+		} else {
+			// Create L-shaped corner handles
+			handle_graphics
+				.rect(0, 0, this.CORNER_SIZE, this.LINE_THICKNESS)
+				.rect(0, 0, this.LINE_THICKNESS, this.CORNER_SIZE)
+				.fill(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 + this.LINE_THICKNESS,
+			-hit_size / 2 + this.LINE_THICKNESS,
+			hit_size,
+			hit_size
+		);
+
+		return handle;
+	}
+
+	/**
+	 * @method create_edge_handles
+	 * @private
+	 * @description Creates edge handles for the crop UI
+	 * @param {Container} container - The container to add handles to
+	 * @param {number} width - Width of the crop area
+	 * @param {number} height - Height of the crop area
+	 * @returns {void}
+	 */
+	private create_edge_handles(
+		container: Container,
+		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
+			handle.rotation = 0;
+
+			handle.on("pointerdown", (event: FederatedPointerEvent) => {
+				this.handle_pointer_down(event, handle, -1, index); // 0 for top, 1 for bottom
+			});
+
+			// Center the handle
+			handle.x = width / 2 - (this.CORNER_SIZE * 3) / 2;
+			handle.y = i < 0 ? -this.LINE_THICKNESS : height;
+			handle.cursor = "ns-resize";
+
+			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 = Math.PI / 2; // Rotate 90 degrees
+
+			handle.on("pointerdown", (event: FederatedPointerEvent) => {
+				this.handle_pointer_down(event, handle, -1, index + 2); // 2 for left, 3 for right
+			});
+
+			// Center the handle
+			handle.x = i < 0 ? -this.LINE_THICKNESS : width;
+			handle.y = height / 2 - (this.CORNER_SIZE * 3) / 2;
+			handle.cursor = "ew-resize";
+
+			container.addChild(handle);
+		});
+	}
+
+	/**
+	 * @method create_corner_handles
+	 * @private
+	 * @description Creates corner handles for the crop UI
+	 * @param {Container} container - The container to add handles to
+	 * @param {number} width - Width of the crop area
+	 * @param {number} height - Height of the crop area
+	 * @returns {void}
+	 */
+	private create_corner_handles(
+		container: Container,
+		width: number,
+		height: number
+	): void {
+		const corners = [
+			{ x: 0, y: 0, xScale: 1, yScale: 1, cursor: "nwse-resize" }, // Top-left
+			{ x: width, y: 0, xScale: -1, yScale: 1, cursor: "nesw-resize" }, // Top-right
+			{ x: 0, y: height, xScale: 1, yScale: -1, cursor: "nesw-resize" }, // Bottom-left
+			{ x: width, y: height, xScale: -1, yScale: -1, cursor: "nwse-resize" } // Bottom-right
+		];
+
+		corners.forEach(({ x, y, xScale, yScale, cursor }, i) => {
+			const corner = this.create_handle(false); // false for corner handle
+			corner.x = x - (xScale < 0 ? -this.LINE_THICKNESS : this.LINE_THICKNESS);
+			corner.y = y - (yScale < 0 ? -this.LINE_THICKNESS : this.LINE_THICKNESS);
+			corner.scale.set(xScale, yScale);
+
+			corner.on("pointerdown", (event: FederatedPointerEvent) => {
+				this.handle_pointer_down(event, corner, i, -1);
+			});
+
+			corner.cursor = cursor;
+
+			container.addChild(corner);
+		});
+	}
+
+	/**
+	 * @method handle_pointer_down
+	 * @private
+	 * @description Handles pointer down events on handles
+	 * @param {FederatedPointerEvent} event - The pointer event
+	 * @param {Container} handle - The handle that was clicked
+	 * @param {number} corner_index - Index of the corner (-1 if not a corner)
+	 * @param {number} edge_index - Index of the edge (-1 if not an edge)
+	 * @returns {void}
+	 */
+	private handle_pointer_down(
+		event: FederatedPointerEvent,
+		handle: Container,
+		corner_index: number,
+		edge_index: number
+	): void {
+		// Only handle crop events if crop tool is active
+		if (this.current_subtool !== "crop") return;
+
+		event.stopPropagation();
+
+		this.is_dragging = true;
+		this.selected_handle = handle;
+		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);
+	}
+
+	/**
+	 * updates the crop bounds based on pointer movement
+	 * @param delta - the change in position
+	 */
+	private update_crop_bounds(delta: Point): void {
+		// Set flag indicating the crop has been manually changed
+		this.has_been_manually_changed = true;
+
+		// Scale the delta to match the image coordinates
+		const scaled_delta = new Point(delta.x, delta.y);
+
+		// Store original values to calculate actual changes
+		const original = {
+			x: this.crop_bounds.x,
+			y: this.crop_bounds.y,
+			width: this.crop_bounds.width,
+			height: this.crop_bounds.height
+		};
+
+		if (this.active_corner_index !== -1) {
+			// Handle corner dragging
+			switch (this.active_corner_index) {
+				case 0: // Top-left
+					// Update width and x position
+					const newWidth0 = Math.max(20, original.width - scaled_delta.x);
+					const widthDiff0 = original.width - newWidth0;
+					this.crop_bounds.width = newWidth0;
+					this.crop_bounds.x = original.x + widthDiff0;
+
+					// Update height and y position
+					const newHeight0 = Math.max(20, original.height - scaled_delta.y);
+					const heightDiff0 = original.height - newHeight0;
+					this.crop_bounds.height = newHeight0;
+					this.crop_bounds.y = original.y + heightDiff0;
+					break;
+
+				case 1: // Top-right
+					// Update width (right side)
+					this.crop_bounds.width = Math.max(
+						20,
+						original.width + scaled_delta.x
+					);
+
+					// Update height and y position (top side)
+					const newHeight1 = Math.max(20, original.height - scaled_delta.y);
+					const heightDiff1 = original.height - newHeight1;
+					this.crop_bounds.height = newHeight1;
+					this.crop_bounds.y = original.y + heightDiff1;
+					break;
+
+				case 2: // Bottom-left
+					// Update width and x position (left side)
+					const newWidth2 = Math.max(20, original.width - scaled_delta.x);
+					const widthDiff2 = original.width - newWidth2;
+					this.crop_bounds.width = newWidth2;
+					this.crop_bounds.x = original.x + widthDiff2;
+
+					// Update height (bottom side)
+					this.crop_bounds.height = Math.max(
+						20,
+						original.height + scaled_delta.y
+					);
+					break;
+
+				case 3: // Bottom-right
+					// Update width (right side)
+					this.crop_bounds.width = Math.max(
+						20,
+						original.width + scaled_delta.x
+					);
+
+					// Update height (bottom side)
+					this.crop_bounds.height = Math.max(
+						20,
+						original.height + scaled_delta.y
+					);
+					break;
+			}
+		} else if (this.active_edge_index !== -1) {
+			// Handle edge dragging
+			switch (this.active_edge_index) {
+				case 0: // Top
+					// Update height and y position
+					const newHeight = Math.max(20, original.height - scaled_delta.y);
+					const heightDiff = original.height - newHeight;
+					this.crop_bounds.height = newHeight;
+					this.crop_bounds.y = original.y + heightDiff;
+					break;
+
+				case 1: // Bottom
+					// Update height only
+					this.crop_bounds.height = Math.max(
+						20,
+						original.height + scaled_delta.y
+					);
+					break;
+
+				case 2: // Left
+					// Update width and x position
+					const newWidth = Math.max(20, original.width - scaled_delta.x);
+					const widthDiff = original.width - newWidth;
+					this.crop_bounds.width = newWidth;
+					this.crop_bounds.x = original.x + widthDiff;
+					break;
+
+				case 3: // Right
+					// Update width only
+					this.crop_bounds.width = Math.max(
+						20,
+						original.width + scaled_delta.x
+					);
+					break;
+			}
+		}
+
+		// Apply constraints
+		this.constrain_crop_bounds();
+
+		// Update the UI and mask
+		this.update_crop_ui();
+		this.update_crop_mask();
+
+		// Make sure to apply mask to the current background image
+		if (this.crop_mask && this.image_editor_context.background_image) {
+			this.image_editor_context.background_image.setMask(this.crop_mask);
+		}
+	}
+
+	/**
+	 * constrains the crop bounds to the image dimensions
+	 */
+	private constrain_crop_bounds(): void {
+		// Store original values
+		const original = {
+			x: this.crop_bounds.x,
+			y: this.crop_bounds.y,
+			width: this.crop_bounds.width,
+			height: this.crop_bounds.height
+		};
+
+		// First, constrain width and height to prevent exceeding image dimensions
+		// and ensure minimum size
+		this.crop_bounds.width = Math.max(
+			20,
+			Math.min(this.crop_bounds.width, this.dimensions.width)
+		);
+
+		this.crop_bounds.height = Math.max(
+			20,
+			Math.min(this.crop_bounds.height, this.dimensions.height)
+		);
+
+		// Then constrain x and y to keep the crop window within the image bounds
+		const oldX = this.crop_bounds.x;
+		this.crop_bounds.x = Math.max(
+			0,
+			Math.min(
+				this.crop_bounds.x,
+				this.dimensions.width - this.crop_bounds.width
+			)
+		);
+
+		// If x position was constrained, adjust width to prevent opposite handle drift
+		if (
+			(this.crop_bounds.x !== oldX && this.active_corner_index === 0) ||
+			this.active_edge_index === 2
+		) {
+			// Left side was constrained, adjust width to compensate
+			const xDiff = this.crop_bounds.x - oldX;
+			this.crop_bounds.width -= xDiff;
+		}
+
+		const oldY = this.crop_bounds.y;
+		this.crop_bounds.y = Math.max(
+			0,
+			Math.min(
+				this.crop_bounds.y,
+				this.dimensions.height - this.crop_bounds.height
+			)
+		);
+
+		// If y position was constrained, adjust height to prevent opposite handle drift
+		if (
+			this.crop_bounds.y !== oldY &&
+			(this.active_corner_index === 0 ||
+				this.active_corner_index === 1 ||
+				this.active_edge_index === 0)
+		) {
+			// Top side was constrained, adjust height to compensate
+			const yDiff = this.crop_bounds.y - oldY;
+			this.crop_bounds.height -= yDiff;
+		}
+
+		// Final check to ensure width and height don't exceed image dimensions from current position
+		this.crop_bounds.width = Math.max(
+			20,
+			Math.min(
+				this.crop_bounds.width,
+				this.dimensions.width - this.crop_bounds.x
+			)
+		);
+
+		this.crop_bounds.height = Math.max(
+			20,
+			Math.min(
+				this.crop_bounds.height,
+				this.dimensions.height - this.crop_bounds.y
+			)
+		);
+	}
+
+	/**
+	 * updates the crop mask graphics
+	 */
+	private update_crop_mask(): void {
+		if (!this.crop_mask) return;
+
+		// Clear the previous mask shape
+		this.crop_mask.clear();
+
+		const { width, height } =
+			this.image_editor_context.background_image?.getLocalBounds() ?? {
+				width: 0,
+				height: 0
+			};
+		this.crop_mask
+			.rect(0, 0, width, height)
+			.fill({ color: 0x000000, alpha: 0.4 })
+			.rect(
+				this.crop_bounds.x,
+				this.crop_bounds.y,
+				this.crop_bounds.width,
+				this.crop_bounds.height
+			)
+			.cut();
+
+		// Reset blend mode
+		// this.crop_mask.blendMode = "normal";
+
+		// Make the mask visible (previously we had alpha=0)
+		// this.crop_mask.alpha = 1;
+
+		// Since we're not using this as a mask anymore, but as an overlay,
+		// we should remove any existing mask assignment
+		if (this.image_editor_context.background_image) {
+			this.image_editor_context.background_image.mask = null;
+		}
+
+		// Make sure the mask is not applied to the image container
+		if (this.image_editor_context.image_container.mask === this.crop_mask) {
+			this.image_editor_context.image_container.mask = null;
+		}
+	}
+
+	/**
+	 * updates the crop ui position and dimensions
+	 */
+	private update_crop_ui(): void {
+		if (!this.crop_mask || !this.crop_ui_container) return;
+
+		// Move crop_ui_container so that (0,0) of its local space aligns with the crop_bounds on the stage
+		this.crop_ui_container.position.set(
+			this.position.x + this.crop_bounds.x * this.scale,
+			this.position.y + this.crop_bounds.y * this.scale
+		);
+
+		// Get the scaled dimensions
+		const scaled_width = this.crop_bounds.width * this.scale;
+		const scaled_height = this.crop_bounds.height * this.scale;
+
+		// Redraw the outline so it matches the crop_bounds size
+		const outline = this.crop_ui_container.getChildAt(0) as Graphics;
+		outline
+			.clear()
+			.rect(0, 0, scaled_width, scaled_height)
+			.stroke({ width: 1, color: 0x000000, alignment: 0, alpha: 0.5 });
+
+		// Update the hit area to match the new dimensions
+		outline.hitArea = new Rectangle(0, 0, scaled_width, scaled_height);
+
+		// Update handle positions to reflect the cropped area, not the full image
+		this.update_handle_positions(scaled_width, scaled_height);
+	}
+
+	/**
+	 * updates the positions of all handles
+	 * @param width - width of the crop area
+	 * @param height - height of the crop area
+	 */
+	private update_handle_positions(width: number, height: number): void {
+		if (!this.crop_ui_container) return;
+
+		// Skip the outline (index 0), get corner/edge handles
+		const handles = this.crop_ui_container.children.slice(1);
+
+		// 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
+		];
+
+		corners.forEach((handle, i) => {
+			const xScale = i % 2 === 0 ? 1 : -1;
+			const yScale = i < 2 ? 1 : -1;
+			handle.position.set(
+				cornerPositions[i].x -
+					(xScale < 0 ? -this.LINE_THICKNESS : this.LINE_THICKNESS),
+				cornerPositions[i].y -
+					(yScale < 0 ? -this.LINE_THICKNESS : this.LINE_THICKNESS)
+			);
+		});
+
+		// Remaining 4 are edges
+		const edges = handles.slice(4);
+		edges.forEach((handle, i) => {
+			if (i < 2) {
+				// Top/Bottom edges
+				handle.position.set(
+					width / 2 - (this.CORNER_SIZE * 1.5) / 2, // Changed from 3 to 2
+					i === 0 ? -this.LINE_THICKNESS : height
+				);
+			} else {
+				// Left/Right edges
+				handle.position.set(
+					i === 2 ? 0 : width + this.LINE_THICKNESS,
+					height / 2 - (this.CORNER_SIZE * 1.5) / 2 // Changed from 3 to 2
+				);
+			}
+		});
+	}
+
+	/**
+	 * sets up event listeners for the crop tool
+	 */
+	private setup_event_listeners(): void {
+		const stage = this.image_editor_context.app.stage;
+		stage.eventMode = "static";
+		stage.on("pointermove", this.handle_pointer_move.bind(this));
+		stage.on("pointerup", this.handle_pointer_up.bind(this));
+		stage.on("pointerupoutside", this.handle_pointer_up.bind(this));
+	}
+
+	/**
+	 * removes event listeners for the crop tool
+	 */
+	private cleanup_event_listeners(): void {
+		const stage = this.image_editor_context.app.stage;
+
+		stage.off("pointermove", this.handle_pointer_move.bind(this));
+		stage.off("pointerup", this.handle_pointer_up.bind(this));
+		stage.off("pointerupoutside", this.handle_pointer_up.bind(this));
+	}
+
+	/**
+	 * handles pointer move events
+	 * @param event - the pointer event
+	 */
+	private handle_pointer_move(event: FederatedPointerEvent): void {
+		if (this.current_subtool !== "crop") return;
+
+		if (
+			this.is_dragging_window &&
+			this.drag_start_position &&
+			this.drag_start_bounds
+		) {
+			// Handle window dragging
+			const local_pos = this.image_editor_context.image_container.toLocal(
+				event.global
+			);
+			const delta = new Point(
+				local_pos.x - this.drag_start_position.x,
+				local_pos.y - this.drag_start_position.y
+			);
+
+			// Update crop bounds based on drag
+			this.crop_bounds = {
+				x: this.drag_start_bounds.x + delta.x,
+				y: this.drag_start_bounds.y + delta.y,
+				width: this.drag_start_bounds.width,
+				height: this.drag_start_bounds.height
+			};
+
+			// Constrain the bounds
+			this.constrain_crop_bounds();
+
+			// Update the mask
+			this.update_crop_mask();
+
+			// Make sure to apply mask to the current background image
+			if (this.crop_mask && this.image_editor_context.background_image) {
+				this.image_editor_context.background_image.setMask(this.crop_mask);
+			}
+
+			return;
+		}
+
+		// Handle existing resize logic
+		if (
+			this.is_dragging &&
+			this.selected_handle &&
+			this.last_pointer_position
+		) {
+			// Convert from global to local, no extra divide
+			const local_pos = this.image_editor_context.image_container.toLocal(
+				event.global
+			);
+			const current_position = new Point(local_pos.x, local_pos.y);
+
+			const delta = new Point(
+				current_position.x - this.last_pointer_position.x,
+				current_position.y - this.last_pointer_position.y
+			);
+
+			this.update_crop_bounds(delta);
+			this.last_pointer_position = current_position;
+			this.update_crop_mask();
+		}
+	}
+
+	/**
+	 * handles pointer up events
+	 */
+	private handle_pointer_up(): void {
+		if (this.current_subtool !== "crop") return;
+
+		this.is_dragging = false;
+		this.is_dragging_window = false;
+		this.selected_handle = null;
+		this.last_pointer_position = null;
+		this.drag_start_position = null;
+		this.drag_start_bounds = null;
+		this.active_corner_index = -1;
+		this.active_edge_index = -1;
+
+		this.notify("change");
+	}
+
+	/**
+	 * handles the start of window dragging
+	 * @param event - the pointer event
+	 */
+	private handle_window_drag_start(event: FederatedPointerEvent): void {
+		if (this.current_subtool !== "crop") return;
+		event.stopPropagation();
+
+		this.is_dragging_window = true;
+		// Set flag indicating the crop has been manually changed
+		this.has_been_manually_changed = true;
+
+		// Store the initial position and bounds
+		const local_pos = this.image_editor_context.image_container.toLocal(
+			event.global
+		);
+		this.drag_start_position = new Point(local_pos.x, local_pos.y);
+		this.drag_start_bounds = { ...this.crop_bounds };
+	}
+
+	/**
+	 * @returns whether the crop has been manually changed by the user
+	 */
+	public get crop_manually_changed(): boolean {
+		return this.has_been_manually_changed;
+	}
+
+	on<T extends string>(event: T, callback: () => void): void {
+		this.event_callbacks.set(event, [
+			...(this.event_callbacks.get(event) || []),
+			callback
+		]);
+	}
+
+	off<T extends string>(event: T, callback: () => void): void {
+		this.event_callbacks.set(
+			event,
+			this.event_callbacks.get(event)?.filter((cb) => cb !== callback) || []
+		);
+	}
+
+	private notify<T extends string>(event: T): void {
+		for (const callback of this.event_callbacks.get(event) || []) {
+			callback();
+		}
+	}
+
+	public get_crop_bounds(): {
+		x: number;
+		y: number;
+		crop_dimensions: { width: number; height: number };
+		image_dimensions: { width: number; height: number };
+	} {
+		const { width, height } =
+			this.image_editor_context.background_image?.getLocalBounds() ?? {
+				width: 0,
+				height: 0
+			};
+		return {
+			x: this.crop_bounds.x,
+			y: this.crop_bounds.y,
+			crop_dimensions: {
+				width: this.crop_bounds.width,
+				height: this.crop_bounds.height
+			},
+			image_dimensions: {
+				width,
+				height
+			}
+		};
+	}
+
+	public get_image(): Promise<Blob | null> {
+		if (!this.image_editor_context.background_image)
+			return Promise.resolve(null);
+		const container = new Container();
+		const sprite = new Sprite(
+			this.image_editor_context.background_image.texture
+		);
+		container.addChild(sprite);
+
+		return get_canvas_blob(
+			this.image_editor_context.app.renderer,
+			container,
+			this.crop_bounds
+		);
+	}
+}