@gradio/imageeditor 0.12.13 → 0.13.0

package/dist/shared/crop/crop.js

@@ -0,0 +1,727 @@
+import { Container, Graphics, Point, Rectangle, FederatedPointerEvent, Sprite } from "pixi.js";
+import {} from "../core/editor";
+import {} from "../Toolbar.svelte";
+import { get_canvas_blob } from "../utils/pixi";
+/**
+ * @class CropTool
+ * @implements {Tool}
+ * @description Implements the crop tool functionality for the image editor
+ */
+export class CropTool {
+    name = "crop";
+    image_editor_context;
+    current_tool = "image";
+    current_subtool = "crop";
+    // Constants
+    CORNER_SIZE = 25;
+    LINE_THICKNESS = 5;
+    HANDLE_COLOR = 0x000000;
+    HIT_AREA_SIZE = 40;
+    // State
+    is_dragging = false;
+    selected_handle = null;
+    active_corner_index = -1;
+    active_edge_index = -1;
+    last_pointer_position = null;
+    crop_bounds = { x: 0, y: 0, width: 0, height: 0 };
+    crop_ui_container = null;
+    crop_mask = null;
+    dimensions = {
+        width: 0,
+        height: 0
+    };
+    position = { x: 0, y: 0 };
+    scale = 1;
+    is_dragging_window = false;
+    drag_start_position = null;
+    drag_start_bounds = null;
+    background_image_watcher = null;
+    has_been_manually_changed = false;
+    event_callbacks = 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, tool, subtool) {
+        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() {
+        // 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, subtool) {
+        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}
+     */
+    set_crop_mask() {
+        // 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>}
+     */
+    async init_crop_ui() {
+        // 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
+     */
+    make_crop_ui(width, height) {
+        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
+     */
+    create_handle(is_edge = false) {
+        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}
+     */
+    create_edge_handles(container, width, height) {
+        // 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) => {
+                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) => {
+                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}
+     */
+    create_corner_handles(container, width, height) {
+        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) => {
+                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}
+     */
+    handle_pointer_down(event, handle, corner_index, edge_index) {
+        // 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
+     */
+    update_crop_bounds(delta) {
+        // 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
+     */
+    constrain_crop_bounds() {
+        // 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
+     */
+    update_crop_mask() {
+        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
+     */
+    update_crop_ui() {
+        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);
+        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
+     */
+    update_handle_positions(width, height) {
+        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
+     */
+    setup_event_listeners() {
+        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
+     */
+    cleanup_event_listeners() {
+        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
+     */
+    handle_pointer_move(event) {
+        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
+     */
+    handle_pointer_up() {
+        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
+     */
+    handle_window_drag_start(event) {
+        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
+     */
+    get crop_manually_changed() {
+        return this.has_been_manually_changed;
+    }
+    on(event, callback) {
+        this.event_callbacks.set(event, [
+            ...(this.event_callbacks.get(event) || []),
+            callback
+        ]);
+    }
+    off(event, callback) {
+        this.event_callbacks.set(event, this.event_callbacks.get(event)?.filter((cb) => cb !== callback) || []);
+    }
+    notify(event) {
+        for (const callback of this.event_callbacks.get(event) || []) {
+            callback();
+        }
+    }
+    get_crop_bounds() {
+        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
+            }
+        };
+    }
+    get_image() {
+        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);
+    }
+}