@gradio/imageeditor 0.14.5 → 0.15.0

package/dist/shared/resize/resize.js

@@ -1,6 +1,52 @@
 import { Container, Graphics, Point, Rectangle, FederatedPointerEvent } from "pixi.js";
 import {} from "../core/editor";
 import {} from "../Toolbar.svelte";
+import {} from "../core/commands";
+/**
+ * Command that handles resizing the image and supports undo/redo
+ */
+export class ResizeCommand {
+    context;
+    original_width;
+    original_height;
+    original_x;
+    original_y;
+    new_width;
+    new_height;
+    new_x;
+    new_y;
+    reset_ui;
+    name;
+    constructor(context, original_state, new_state, reset_ui) {
+        this.context = context;
+        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() {
+        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() {
+        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
  * @implements {Tool}
@@ -12,14 +58,11 @@ export class ResizeTool {
     current_tool = "image";
     current_subtool = "size";
     current_cursor = "unset";
-    // Constants
     CORNER_SIZE = 25;
     LINE_THICKNESS = 5;
     HANDLE_COLOR = 0x000000;
     HIT_AREA_SIZE = 40;
-    // Border region for outpainting
     borderRegion = 0;
-    // State
     is_dragging = false;
     selected_handle = null;
     active_corner_index = -1;
@@ -38,6 +81,7 @@ export class ResizeTool {
     dom_mouseup_handler = null;
     event_callbacks = new Map();
     last_scale = 1;
+    original_state = null;
     /**
      * @method setup
      * @async
@@ -51,39 +95,29 @@ export class ResizeTool {
         this.image_editor_context = context;
         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.borderRegion !== undefined) {
                 this.borderRegion = context.background_image.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.borderRegion = this.borderRegion;
                 }
             }
         }
         context.dimensions.subscribe((dimensions) => {
             this.dimensions = dimensions;
-            // Force UI update if it exists
             if (this.resize_ui_container) {
                 this.update_resize_ui();
             }
         });
         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" &&
                 this.current_subtool === "size") {
@@ -92,17 +126,14 @@ export class ResizeTool {
         });
         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" &&
                 this.current_subtool === "size") {
                 this.update_resize_ui();
             }
         });
-        // 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) {
             const bg = this.image_editor_context.background_image;
@@ -112,7 +143,6 @@ export class ResizeTool {
             const container_bounds = container.getLocalBounds();
             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;
@@ -121,7 +151,6 @@ export class ResizeTool {
                 (bg.position.x < min_x || bg.position.x > max_x);
             const y_out_of_bounds = 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();
             }
@@ -136,7 +165,6 @@ export class ResizeTool {
         if (this.resize_ui_container) {
             this.image_editor_context.app.stage.removeChild(this.resize_ui_container);
         }
-        // Remove event listeners
         this.cleanup_event_listeners();
     }
     /**
@@ -150,17 +178,13 @@ export class ResizeTool {
         this.current_tool = 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.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;
@@ -169,10 +193,8 @@ export class ResizeTool {
                 const container_bounds = container.getLocalBounds();
                 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
                     : this.borderRegion;
@@ -185,10 +207,8 @@ export class ResizeTool {
                 const max_y = bg_height > effectiveHeight
                     ? 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();
                 }
@@ -206,16 +226,10 @@ export class ResizeTool {
      * @returns {Promise<void>}
      */
     async init_resize_ui() {
-        // 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
     }
     /**
      * @method make_resize_ui
@@ -229,61 +243,46 @@ export class ResizeTool {
         const resize_container = new Container();
         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,
             alignment: 0,
             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,
             alpha: 0.7,
             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);
         }
         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);
         return resize_container;
@@ -300,14 +299,12 @@ export class ResizeTool {
         handle.eventMode = "static";
         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, -hit_size / 2, hit_size, hit_size);
         return handle;
@@ -322,27 +319,23 @@ export class ResizeTool {
      * @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
+            const handle = this.create_handle(true);
             handle.rotation = 0;
             handle.on("pointerdown", (event) => {
-                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";
             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) => {
-                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";
@@ -360,13 +353,13 @@ export class ResizeTool {
      */
     create_corner_handles(container, width, height) {
         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;
             corner.on("pointerdown", (event) => {
@@ -387,7 +380,6 @@ export class ResizeTool {
      * @returns {void}
      */
     handle_pointer_down(event, handle, corner_index, edge_index) {
-        // Only handle resize events if resize tool is active
         if (this.current_subtool !== "size")
             return;
         event.stopPropagation();
@@ -395,9 +387,17 @@ export class ResizeTool {
         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);
+        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
+            };
+        }
     }
     /**
      * Maintains aspect ratio during resizing
@@ -408,23 +408,15 @@ export class ResizeTool {
      * @returns The adjusted dimensions
      */
     maintain_aspect_ratio(new_width, new_height, original_aspect_ratio, delta) {
-        // 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;
             }
@@ -442,26 +434,22 @@ export class ResizeTool {
      * @returns The limited dimensions
      */
     limit_dimensions(width, height, maintain_aspect_ratio) {
-        // Get container dimensions - restrict to container size
         const max_width = this.dimensions.width;
         const max_height = this.dimensions.height;
         let new_width = width;
         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;
             }
             new_width = max_width;
         }
         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);
         return { width: new_width, height: new_height };
@@ -477,21 +465,16 @@ export class ResizeTool {
     calculate_position_deltas(old_width, old_height, new_width, new_height) {
         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 (this.active_corner_index === 0 ||
             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;
         }
         return { x: delta_x, y: delta_y };
@@ -505,51 +488,39 @@ export class ResizeTool {
             return;
         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;
@@ -562,71 +533,59 @@ export class ResizeTool {
      * @param maintain_aspect_ratio - Whether to maintain the aspect ratio
      */
     update_resize_bounds(delta, maintain_aspect_ratio = false) {
-        // 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;
         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);
                     break;
                 default:
                     return;
             }
-            // Use the existing corner resize logic
             const dimensions = this.handle_direct_corner_resize(current_position, original_width, original_height, original_x, original_y, original_aspect_ratio, 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);
                     break;
                 default:
                     return;
             }
-            // Use the existing edge resize logic
             const dimensions = this.handle_direct_edge_resize(current_position, original_width, original_height, original_x, 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();
     }
     /**
@@ -639,73 +598,51 @@ export class ResizeTool {
             return;
         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);
         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);
         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,
             alpha: 0.7,
             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, scaled_height - 1, Math.min(dash_length, scaled_width - x), 1)
                     .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, y, 1, Math.min(dash_length, scaled_height - y))
                     .fill(0x000000);
             }
         }
-        // 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);
         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);
     }
     /**
@@ -716,31 +653,25 @@ export class ResizeTool {
     update_handle_positions(width, height) {
         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);
         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);
             }
         });
@@ -754,96 +685,90 @@ export class ResizeTool {
         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));
-        // Set up direct DOM event listeners for dragging the background image
         this.setup_dom_event_listeners();
     }
     /**
      * Sets up direct DOM event listeners for dragging the background image
      */
     setup_dom_event_listeners() {
-        // 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) => {
-            // 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) => {
-            // 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) => {
-            // Only process if we're in the size subtool and we're moving the image
-            if (this.current_subtool !== "size" || !this.is_moving)
+            if (this.current_subtool !== "size")
                 return;
-            // Reset all state variables
+            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;
+            }
             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);
@@ -874,7 +799,6 @@ export class ResizeTool {
         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));
-        // Clean up DOM event listeners
         this.cleanup_dom_event_listeners();
     }
     /**
@@ -883,49 +807,37 @@ export class ResizeTool {
     handle_pointer_move(event) {
         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;
             if (this.active_corner_index !== -1) {
-                // Handle corner resizing
                 dimensions = this.handle_direct_corner_resize(current_position, original_width, original_height, original_x, original_y, original_aspect_ratio, maintain_aspect_ratio);
             }
             else if (this.active_edge_index !== -1) {
-                // Handle edge resizing
                 dimensions = this.handle_direct_edge_resize(current_position, original_width, original_height, original_x, original_y);
             }
             else {
-                return; // No active handle
+                return;
             }
-            // Limit dimensions to container size
             dimensions = this.limit_dimensions_to_container(dimensions, original_x, original_y, original_width, original_height, 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;
         }
     }
@@ -935,14 +847,12 @@ export class ResizeTool {
     handle_pointer_up() {
         if (this.current_subtool !== "size")
             return;
-        // Reset all state variables
         this.is_dragging = false;
         this.is_moving = false;
         this.selected_handle = null;
         this.last_pointer_position = null;
         this.active_corner_index = -1;
         this.active_edge_index = -1;
-        // Update the resize UI without applying constraints
         this.update_resize_ui();
         this.notify("change");
     }
@@ -956,51 +866,39 @@ export class ResizeTool {
             !this.image_editor_context.background_image) {
             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();
     }
     /**
@@ -1016,70 +914,57 @@ export class ResizeTool {
      * @private
      */
     handle_direct_corner_resize(current_position, original_width, original_height, original_x, original_y, original_aspect_ratio, maintain_aspect_ratio) {
-        // 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;
         }
         return { width: new_width, height: new_height, x: new_x, y: new_y };
@@ -1095,34 +980,24 @@ export class ResizeTool {
      * @private
      */
     handle_direct_edge_resize(current_position, original_width, original_height, original_x, original_y) {
-        // 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;
         }
         return { width: new_width, height: new_height, x: new_x, y: new_y };
@@ -1140,21 +1015,16 @@ export class ResizeTool {
      */
     limit_dimensions_to_container(dimensions, original_x, original_y, original_width, original_height, maintain_aspect_ratio) {
         let { width: new_width, height: new_height, x: new_x, 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, effective_container_width, effective_container_height, maintain_aspect_ratio, pre_limit_width / pre_limit_height);
         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, original_x, original_y, original_width, original_height);
         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, new_x, new_y, maintain_aspect_ratio, pre_limit_width / pre_limit_height);
         return border_constrained;
     }
@@ -1165,22 +1035,18 @@ export class ResizeTool {
     apply_size_limits(width, height, max_width, max_height, maintain_aspect_ratio, aspect_ratio) {
         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;
@@ -1188,14 +1054,12 @@ export class ResizeTool {
             }
         }
         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;
@@ -1210,29 +1074,26 @@ export class ResizeTool {
     adjust_position_for_resizing(new_width, new_height, original_x, original_y, original_width, original_height) {
         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;
             }
@@ -1244,11 +1105,8 @@ export class ResizeTool {
      * @private
      */
     apply_border_constraints(width, height, x, y, maintain_aspect_ratio, aspect_ratio) {
-        // First apply left and top constraints
         const top_left_constrained = this.apply_top_left_constraints(width, height, x, y, maintain_aspect_ratio, aspect_ratio);
-        // Then apply right and bottom constraints
         const all_constrained = this.apply_bottom_right_constraints(top_left_constrained.width, top_left_constrained.height, top_left_constrained.x, top_left_constrained.y, maintain_aspect_ratio, aspect_ratio);
-        // Ensure minimum dimensions
         all_constrained.width = Math.max(20, all_constrained.width);
         all_constrained.height = Math.max(20, all_constrained.height);
         return all_constrained;
@@ -1262,31 +1120,23 @@ export class ResizeTool {
         let new_height = height;
         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;
                 }
             }
@@ -1303,9 +1153,7 @@ export class ResizeTool {
         let new_height = height;
         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 ||
                 this.active_edge_index === 3) {
@@ -1315,15 +1163,12 @@ export class ResizeTool {
                 }
             }
             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 ||
                 this.active_edge_index === 1) {
@@ -1333,7 +1178,6 @@ export class ResizeTool {
                 }
             }
             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);
                 new_y = Math.max(this.borderRegion, new_y - excess);
@@ -1350,13 +1194,11 @@ export class ResizeTool {
             this.resize_ui_container.visible = true;
             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();
     }
     /**
@@ -1367,12 +1209,10 @@ export class ResizeTool {
         if (this.resize_ui_container) {
             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();
     }
     on(event, callback) {
@@ -1395,16 +1235,13 @@ export class ResizeTool {
      */
     set_border_region(borderRegion) {
         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.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) {
             this.apply_boundary_constraints();