@gradio/imageeditor 0.14.5 → 0.15.0

package/dist/shared/zoom/zoom.js

@@ -10,10 +10,8 @@ export class ZoomTool {
     name = "zoom";
     min_zoom = writable(true);
     image_editor_context;
-    // Constants
     max_zoom = 10;
     border_padding = 30;
-    // State
     pad_bottom = 0;
     is_pinching = false;
     is_dragging = false;
@@ -52,30 +50,23 @@ export class ZoomTool {
      * @returns {void}
      */
     set_zoom(zoom_level) {
-        // Calculate the min zoom level
         const fit_zoom = this.calculate_min_zoom(this.local_dimensions.width, this.local_dimensions.height);
-        // Determine the target zoom level
         let target_zoom;
         const is_fit_zoom = zoom_level === "fit";
         if (is_fit_zoom) {
             target_zoom = fit_zoom;
         }
         else {
-            // Ensure zoom_level is between 0 and 1, then scale it to the range [min_zoom, max_zoom]
             target_zoom = Math.max(0, Math.min(this.max_zoom, zoom_level));
         }
-        // Get the canvas dimensions
         const canvas = this.image_editor_context.app.screen;
         const canvas_width = canvas.width;
         const canvas_height = canvas.height;
-        // Determine the center point for zooming
         let center_point;
-        // Always use the center of the screen
         center_point = {
             x: canvas_width / 2,
             y: canvas_height / 2
         };
-        // Apply the zoom using the existing zoom_to_point method
         this.zoom_to_point(target_zoom, center_point, true, is_fit_zoom);
     }
     /**
@@ -90,26 +81,19 @@ export class ZoomTool {
         this.current_tool = tool;
         this.current_subtool = subtool;
         this.pad_bottom = context.pad_bottom;
-        // Initialize zoom and position
         const { width, height } = await this.get_container_dimensions();
         const fit_zoom = this.calculate_min_zoom(width, height);
-        // Use fit zoom or 1, whichever is smaller
         const min_zoom = Math.min(fit_zoom, 1);
-        // Set initial zoom
         this.local_scale = min_zoom;
-        // Use simple center positioning
         const canvas = this.image_editor_context.app.screen;
         const center_x = canvas.width / 2;
         const center_y = canvas.height / 2;
-        // Calculate initial position to center the scaled image
         const scaled_width = width * min_zoom;
         const scaled_height = height * min_zoom;
         const initial_x = center_x - scaled_width / 2;
         const initial_y = center_y - scaled_height / 2;
         this.local_position = { x: initial_x, y: initial_y };
-        // Setup event listeners
         this.setup_event_listeners();
-        // Update context with initial values
         await this.image_editor_context.set_image_properties({
             scale: min_zoom,
             position: { x: initial_x, y: initial_y }
@@ -132,13 +116,10 @@ export class ZoomTool {
         const stage = this.image_editor_context.app.stage;
         const canvas = this.image_editor_context.app.canvas;
         canvas.addEventListener("wheel", this.prevent_default, { passive: false });
-        // Configure stage for interaction
         stage.eventMode = "static";
         stage.hitArea = this.image_editor_context.app.screen;
-        // Add wheel event with options
         const wheel_listener = this.handle_wheel.bind(this);
         stage.addEventListener("wheel", wheel_listener, { passive: false });
-        // Setup touch/pointer events based on device
         if ("ontouchstart" in window) {
             stage.addEventListener("touchstart", this.handle_touch_start.bind(this));
             stage.addEventListener("touchmove", this.handle_touch_move.bind(this));
@@ -160,14 +141,12 @@ export class ZoomTool {
         const is_trackpad = event.deltaMode === 0 && Math.abs(event.deltaY) < 50;
         const scroll_speed = is_trackpad ? 30 : 10;
         if (event.altKey || event.metaKey) {
-            // Handle zooming with our new simplified logic
             const local_point = this.image_editor_context.app.stage.toLocal(event.global);
             const zoom_delta = -event.deltaY * (is_trackpad ? 0.001 : 0.0005);
             const new_scale = this.local_scale * (1 + zoom_delta);
             this.zoom_to_point(new_scale, local_point, true);
         }
         else {
-            // Handle panning with bounds
             const delta_x = event.deltaX;
             const delta_y = event.deltaY;
             const raw_position = {
@@ -180,12 +159,10 @@ export class ZoomTool {
             const available_width = canvas.width - this.border_padding * 2;
             const available_height = canvas.height - this.border_padding * 2 - this.pad_bottom;
             let final_position = { ...raw_position };
-            // If image is smaller than available space, center it
             if (scaled_width <= available_width) {
                 final_position.x = (canvas.width - scaled_width) / 2;
             }
             else {
-                // Apply 50% rule for horizontal bounds
                 const max_offset = canvas.width / 2;
                 const left_bound = max_offset;
                 const right_bound = canvas.width - max_offset - scaled_width;
@@ -196,7 +173,6 @@ export class ZoomTool {
                     (canvas.height - this.pad_bottom - scaled_height) / 2;
             }
             else {
-                // Apply 50% rule for vertical bounds, accounting for pad_bottom
                 const max_offset = (canvas.height - this.pad_bottom) / 2;
                 const top_bound = max_offset;
                 const bottom_bound = canvas.height - this.pad_bottom - max_offset - scaled_height;
@@ -257,14 +233,10 @@ export class ZoomTool {
             !viewport_height) {
             return 1;
         }
-        // Calculate available space accounting for padding
         const available_width = viewport_width - this.border_padding * 2;
         const available_height = viewport_height - this.border_padding * 2 - this.pad_bottom;
-        // Calculate zoom ratios for both dimensions
         const width_ratio = available_width / container_width;
         const height_ratio = available_height / container_height;
-        // Use the smaller ratio to ensure the image fits in both dimensions
-        // Note: we no longer cap at 1, as 'fit' can be above 1
         return Math.min(width_ratio, height_ratio);
     }
     /**
@@ -274,7 +246,6 @@ export class ZoomTool {
      */
     handle_touch_start(event) {
         event.preventDefault();
-        // Cast to any to access TouchEvent properties
         const touchEvent = event;
         if (touchEvent.touches && touchEvent.touches.length === 2) {
             this.is_pinching = true;
@@ -293,7 +264,6 @@ export class ZoomTool {
      */
     handle_touch_move(event) {
         event.preventDefault();
-        // Cast to any to access TouchEvent properties
         const touchEvent = event;
         if (this.is_pinching &&
             touchEvent.touches &&
@@ -308,7 +278,6 @@ export class ZoomTool {
             };
             const scale_val = current_distance / this.last_pinch_distance;
             this.last_pinch_distance = current_distance;
-            // Update zoom based on pinch
             this.zoom_to_point(this.local_scale * scale_val, pinch_center);
         }
         else if (this.is_dragging &&
@@ -319,7 +288,6 @@ export class ZoomTool {
             const current_position = new Point(touchEvent.touches[0].pageX - rect.left, touchEvent.touches[0].pageY - rect.top);
             const dx = current_position.x - this.last_touch_position.x;
             const dy = current_position.y - this.last_touch_position.y;
-            // Update position based on drag
             this.image_editor_context.set_image_properties({
                 position: {
                     x: this.local_position.x + dx,
@@ -336,7 +304,6 @@ export class ZoomTool {
      */
     handle_touch_end(event) {
         event.preventDefault();
-        // Cast to any to access TouchEvent properties
         const touchEvent = event;
         if (touchEvent.touches && touchEvent.touches.length < 2) {
             this.is_pinching = false;
@@ -364,7 +331,6 @@ export class ZoomTool {
         const canvas = this.image_editor_context.app.screen;
         const scaled_width = this.local_dimensions.width * this.local_scale;
         const scaled_height = this.local_dimensions.height * this.local_scale;
-        // Calculate center position, accounting for pad_bottom
         const center_position = {
             x: (canvas.width - scaled_width) / 2,
             y: (canvas.height - scaled_height - this.pad_bottom) / 2
@@ -403,34 +369,26 @@ export class ZoomTool {
      * @private
      */
     zoom_to_point(new_zoom, point, hard, is_fit_zoom) {
-        // Get the cursor position relative to the image's top-left corner
         const cursor_relative_to_image = {
             x: (point.x - this.local_position.x) / this.local_scale,
             y: (point.y - this.local_position.y) / this.local_scale
         };
-        // Calculate what percentage of the image width/height this represents
         const image_percentages = {
             x: cursor_relative_to_image.x / this.local_dimensions.width,
             y: cursor_relative_to_image.y / this.local_dimensions.height
         };
-        // Apply zoom limits
         const fit_zoom = this.calculate_min_zoom(this.local_dimensions.width, this.local_dimensions.height);
-        // Use the fit zoom or 1, whichever is smaller as the minimum zoom
         const min_zoom = Math.min(fit_zoom, 1);
         new_zoom = Math.min(Math.max(new_zoom, min_zoom), this.max_zoom);
-        // Calculate new dimensions
         const new_scaled_width = this.local_dimensions.width * new_zoom;
         const new_scaled_height = this.local_dimensions.height * new_zoom;
-        // Calculate new position maintaining the same relative cursor position
         let new_position = {
             x: point.x - new_scaled_width * image_percentages.x,
             y: point.y - new_scaled_height * image_percentages.y
         };
-        // Center the image if we're at minimum zoom or if this is a fit zoom operation
         if (new_zoom === min_zoom || is_fit_zoom) {
             const canvas_width = this.image_editor_context.app.screen.width;
             const canvas_height = this.image_editor_context.app.screen.height;
-            // Center the image, accounting for pad_bottom
             new_position = {
                 x: (canvas_width - new_scaled_width) / 2,
                 y: (canvas_height - this.pad_bottom - new_scaled_height) / 2
@@ -449,7 +407,6 @@ export class ZoomTool {
      * @private
      */
     handle_pointer_down(event) {
-        // Only allow dragging if the current tool is 'pan'
         if (event.button === 0 && this.current_tool === "pan") {
             this.is_pointer_dragging = true;
             this.drag_start.copyFrom(event.global);
@@ -463,7 +420,6 @@ export class ZoomTool {
      * @private
      */
     handle_pointer_move(event) {
-        // Only handle move if we're dragging and the tool is 'pan'
         if (this.is_pointer_dragging && this.current_tool === "pan") {
             const raw_position = {
                 x: event.global.x - this.drag_start.x,
@@ -475,12 +431,10 @@ export class ZoomTool {
             const available_width = canvas.width - this.border_padding * 2;
             const available_height = canvas.height - this.border_padding * 2 - this.pad_bottom;
             let final_position = { ...raw_position };
-            // If image is smaller than available space, center it
             if (scaled_width <= available_width) {
                 final_position.x = (canvas.width - scaled_width) / 2;
             }
             else {
-                // Allow free movement during drag, bounds will be applied on pointer up
                 final_position.x = raw_position.x;
             }
             if (scaled_height <= available_height) {
@@ -488,7 +442,6 @@ export class ZoomTool {
                     (canvas.height - this.pad_bottom - scaled_height) / 2;
             }
             else {
-                // Allow free movement during drag, bounds will be applied on pointer up
                 final_position.y = raw_position.y;
             }
             this.image_editor_context.set_image_properties({
@@ -503,7 +456,6 @@ export class ZoomTool {
      * @private
      */
     handle_pointer_up(event) {
-        // Only handle up if we're dragging and the tool is 'pan'
         if (this.is_pointer_dragging && this.current_tool === "pan") {
             this.is_pointer_dragging = false;
             const raw_position = {
@@ -516,12 +468,10 @@ export class ZoomTool {
             const available_width = canvas.width - this.border_padding * 2;
             const available_height = canvas.height - this.border_padding * 2 - this.pad_bottom;
             let final_position = { ...raw_position };
-            // If image is smaller than available space, center it
             if (scaled_width <= available_width) {
                 final_position.x = (canvas.width - scaled_width) / 2;
             }
             else {
-                // Apply 50% rule for horizontal snapping
                 const max_offset = canvas.width / 2;
                 const left_bound = max_offset;
                 const right_bound = canvas.width - max_offset - scaled_width;
@@ -532,7 +482,6 @@ export class ZoomTool {
                     (canvas.height - this.pad_bottom - scaled_height) / 2;
             }
             else {
-                // Apply 50% rule for vertical snapping, accounting for pad_bottom
                 const max_offset = (canvas.height - this.pad_bottom) / 2;
                 const top_bound = max_offset;
                 const bottom_bound = canvas.height - this.pad_bottom - max_offset - scaled_height;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.14.5",
+  "version": "0.15.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,14 +11,14 @@
     "pixi-filters": "^6.1.0",
     "pixi.js": "^8.7.3",
     "tinycolor2": "^1.6.0",
-    "@gradio/client": "^1.14.2",
-    "@gradio/atoms": "^0.16.0",
+    "@gradio/atoms": "^0.16.1",
+    "@gradio/image": "^0.22.6",
+    "@gradio/client": "^1.15.0",
     "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.5",
-    "@gradio/statustracker": "^0.10.10",
-    "@gradio/wasm": "^0.18.1",
+    "@gradio/upload": "^0.16.5",
     "@gradio/utils": "^0.10.2",
-    "@gradio/upload": "^0.16.4"
+    "@gradio/wasm": "^0.18.1",
+    "@gradio/statustracker": "^0.10.11"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/Controls.svelte

@@ -1,7 +1,17 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
-	import { Check, Trash, ZoomIn, ZoomOut, Pan, Download } from "@gradio/icons";
+	import {
+		Check,
+		Trash,
+		ZoomIn,
+		ZoomOut,
+		Pan,
+		Download,
+		Undo,
+		Redo
+	} from "@gradio/icons";
+	import type { Writable } from "svelte/store";
 
 	export let can_save = false;
 	export let changeable = false;
@@ -9,6 +19,8 @@
 	export let tool: string;
 	export let min_zoom = true;
 	export let enable_download = false;
+	export let can_undo: boolean;
+	export let can_redo: boolean;
 
 	const dispatch = createEventDispatcher<{
 		remove_image: void;
@@ -114,6 +126,26 @@
 	</div>
 	<div class="separator"></div>
 
+	<IconButton
+		Icon={Undo}
+		label="Undo"
+		on:click={(event) => {
+			dispatch("undo");
+			event.stopPropagation();
+		}}
+		disabled={!can_undo}
+	/>
+
+	<IconButton
+		Icon={Redo}
+		label="Redo"
+		on:click={(event) => {
+			dispatch("redo");
+			event.stopPropagation();
+		}}
+		disabled={!can_redo}
+	/>
+
 	{#if changeable}
 		<IconButton
 			disabled={!can_save}

package/shared/ImageEditor.svelte

@@ -15,7 +15,7 @@
 	import type { Client, FileData } from "@gradio/client";
 	import tinycolor, { type ColorInput } from "tinycolor2";
 	import { ZoomTool } from "./zoom/zoom";
-	import { type CommandManager, type CommandNode } from "./utils/commands";
+	import { type CommandManager, type CommandNode } from "./core/commands";
 	import { ImageEditor } from "./core/editor";
 	import { type Brush, type Eraser } from "./brush/types";
 	import { BrushTool } from "./brush/brush";
@@ -249,6 +249,8 @@
 
 	let crop: ImageEditor;
 	let crop_zoom: ZoomTool;
+	export let can_undo = false;
+	let can_redo = false;
 	async function init_image_editor(): Promise<void> {
 		brush = new BrushTool();
 		zoom = new ZoomTool();
@@ -306,6 +308,8 @@
 
 		editor.on("change", () => {
 			dispatch("change");
+			can_undo = editor.command_manager.history.previous !== null;
+			can_redo = editor.command_manager.history.next !== null;
 		});
 
 		if (background || layers.length > 0) {
@@ -339,13 +343,6 @@
 		current_subtool === "crop" &&
 		crop_zoom.set_zoom("fit");
 
-	// function resize_canvas(width: number, height: number): void {
-	// 	if (!editor) return;
-	// 	if (mounted && ready) {
-	// 		editor.resize(width, height);
-	// 	}
-	// }
-
 	/**
 	 * Handles file uploads
 	 * @param {File[]} files - The uploaded files
@@ -364,8 +361,12 @@
 		dispatch("upload");
 		dispatch("input");
 		dispatch("change");
+		can_undo = editor.command_manager.history.previous !== null;
+		can_redo = editor.command_manager.history.next !== null;
 	}
 
+	$: background_image = can_undo && editor.command_manager.contains("AddImage");
+
 	/**
 	 * Handles tool change events
 	 * @param {{ tool: ToolbarTool }} param0 - Object containing the selected tool
@@ -496,7 +497,6 @@
 		})()
 	);
 
-	// Type-safe brush size handling
 	$: brush?.set_brush_size(
 		typeof selected_size === "number" ? selected_size : 25
 	);
@@ -583,6 +583,18 @@
 		link.click();
 		URL.revokeObjectURL(url);
 	}
+
+	function handle_undo(): void {
+		editor.undo();
+		can_undo = editor.command_manager.history.previous !== null;
+		can_redo = editor.command_manager.history.next !== null;
+	}
+
+	function handle_redo(): void {
+		editor.redo();
+		can_undo = editor.command_manager.history.previous !== null;
+		can_redo = editor.command_manager.history.next !== null;
+	}
 </script>
 
 <div
@@ -622,6 +634,10 @@
 				}}
 				enable_download={show_download_button}
 				on:download={() => handle_download()}
+				{can_undo}
+				{can_redo}
+				on:undo={handle_undo}
+				on:redo={handle_redo}
 			/>
 		{/if}
 

package/shared/Toolbar.svelte

@@ -30,8 +30,7 @@
 	import type { Source, Transform } from "./types";
 	import {
 		type Brush as BrushType,
-		type Eraser as EraserType,
-		type ColorTuple
+		type Eraser as EraserType
 	} from "./brush/types";
 	import tinycolor from "tinycolor2";
 
@@ -78,13 +77,11 @@
 		})();
 
 	export let preview = false;
-	// export let opacity = 1;
 	export let show_brush_color = false;
 	export let show_brush_size = false;
 	export let show_eraser_size = false;
 	export let sources: Source[];
 	export let transforms: Transform[];
-	// Required by the component interface
 	let recent_colors: string[] = [];
 
 	let enable_layers = true;

package/shared/brush/ColorSwatch.svelte

@@ -21,7 +21,6 @@
 
 	$: _colors = show_empty ? colors : colors.filter((c) => c);
 
-	// Helper function to extract color from either a color input or a tuple
 	function get_color(color_input: ColorInput | ColorTuple): string {
 		if (Array.isArray(color_input)) {
 			return color_input[0] as string;
@@ -29,7 +28,6 @@
 		return color_input as string;
 	}
 
-	// Helper function to extract opacity from a tuple or return undefined
 	function get_opacity(
 		color_input: ColorInput | ColorTuple
 	): number | undefined {
@@ -37,7 +35,6 @@
 			return color_input[1];
 		}
 
-		// For string colors, check if there's opacity in the color itself
 		const color = tinycolor(color_input);
 		return color.getAlpha();
 	}