@gradio/imageeditor 0.12.14 → 0.13.0

package/dist/shared/zoom/zoom.js

@@ -0,0 +1,548 @@
+import { Point } from "pixi.js";
+import {} from "../core/editor";
+import {} from "../Toolbar.svelte";
+import { get, writable } from "svelte/store";
+/**
+ * ZoomTool class for handling zoom and pan functionality in the image editor
+ * Implements the Tool interface
+ */
+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;
+    is_pointer_dragging = false;
+    last_touch_position = null;
+    last_pinch_distance = 0;
+    drag_start = new Point();
+    current_tool;
+    current_subtool;
+    local_scale = 1;
+    local_dimensions = {
+        width: 0,
+        height: 0
+    };
+    local_position = { x: 0, y: 0 };
+    /**
+     * Prevents default behavior for events
+     * @param {FederatedWheelEvent | FederatedPointerEvent} event - The event to prevent default behavior for
+     */
+    prevent_default(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    /**
+     * Sets the current tool and subtool
+     * @param {ToolbarTool} tool - The tool to set
+     * @param {Subtool} subtool - The subtool to set
+     */
+    set_tool(tool, subtool) {
+        this.current_tool = tool;
+        this.current_subtool = subtool;
+    }
+    /**
+     * Sets the zoom level to a specific percentage or fits the image to the screen
+     * @param {number | 'fit'} zoom_level - The zoom level to set (0-1) or 'fit' to use min_zoom
+     * @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);
+    }
+    /**
+     * Sets up the zoom 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;
+        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
+        this.image_editor_context.set_image_properties({
+            scale: min_zoom,
+            position: { x: initial_x, y: initial_y }
+        });
+        this.image_editor_context.dimensions.subscribe((dimensions) => {
+            this.local_dimensions = dimensions;
+        });
+        this.image_editor_context.scale.subscribe((scale) => {
+            this.local_scale = scale;
+        });
+        this.image_editor_context.position.subscribe((position) => {
+            this.local_position = position;
+        });
+    }
+    /**
+     * Sets up event listeners for zoom and pan functionality
+     * @private
+     */
+    setup_event_listeners() {
+        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));
+            stage.addEventListener("touchend", this.handle_touch_end.bind(this));
+        }
+        else {
+            stage.addEventListener("pointerdown", this.handle_pointer_down.bind(this));
+            stage.addEventListener("pointermove", this.handle_pointer_move.bind(this));
+            stage.addEventListener("pointerup", this.handle_pointer_up.bind(this));
+            stage.addEventListener("pointerupoutside", this.handle_pointer_up.bind(this));
+        }
+    }
+    /**
+     * Handles wheel events for zooming
+     * @param {FederatedWheelEvent} event - The wheel event
+     * @private
+     */
+    handle_wheel(event) {
+        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 = {
+                x: this.local_position.x - (delta_x / 100) * scroll_speed,
+                y: this.local_position.y - (delta_y / 100) * scroll_speed
+            };
+            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;
+            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;
+                final_position.x = Math.min(Math.max(raw_position.x, right_bound), left_bound);
+            }
+            if (scaled_height <= available_height) {
+                final_position.y =
+                    (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;
+                final_position.y = Math.min(Math.max(raw_position.y, bottom_bound), top_bound);
+            }
+            this.image_editor_context.set_image_properties({
+                scale: this.local_scale,
+                position: final_position
+            });
+        }
+    }
+    /**
+     * Cleans up resources and event listeners
+     */
+    cleanup() {
+        const stage = this?.image_editor_context?.app?.stage;
+        if (!stage)
+            return;
+        stage.removeEventListener("wheel", this.handle_wheel.bind(this));
+        if ("ontouchstart" in window) {
+            stage.removeEventListener("touchstart", this.handle_touch_start.bind(this));
+            stage.removeEventListener("touchmove", this.handle_touch_move.bind(this));
+            stage.removeEventListener("touchend", this.handle_touch_end.bind(this));
+        }
+        else {
+            stage.removeEventListener("pointerdown", this.handle_pointer_down.bind(this));
+            stage.removeEventListener("pointermove", this.handle_pointer_move.bind(this));
+            stage.removeEventListener("pointerup", this.handle_pointer_up.bind(this));
+            stage.removeEventListener("pointerupoutside", this.handle_pointer_up.bind(this));
+        }
+    }
+    /**
+     * Gets the dimensions of the container
+     * @returns {Promise<{width: number, height: number}>} The container dimensions
+     * @private
+     */
+    async get_container_dimensions() {
+        const bounds = this.image_editor_context.image_container.getLocalBounds();
+        return {
+            width: bounds.width,
+            height: bounds.height
+        };
+    }
+    /**
+     * Calculates the minimum zoom level to fit the image in the viewport
+     * @param {number} container_width - The width of the container
+     * @param {number} container_height - The height of the container
+     * @returns {number} The minimum zoom level
+     * @private
+     */
+    calculate_min_zoom(container_width, container_height) {
+        const canvas = this.image_editor_context.app.screen;
+        const viewport_width = canvas.width;
+        const viewport_height = canvas.height;
+        if (!container_width ||
+            !viewport_width ||
+            !container_height ||
+            !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);
+    }
+    /**
+     * Handles touch start events
+     * @param {TouchEvent} event - The touch event
+     * @private
+     */
+    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;
+            this.last_pinch_distance = Math.hypot(touchEvent.touches[0].pageX - touchEvent.touches[1].pageX, touchEvent.touches[0].pageY - touchEvent.touches[1].pageY);
+        }
+        else if (touchEvent.touches && touchEvent.touches.length === 1) {
+            this.is_dragging = true;
+            const rect = this.image_editor_context.app.view.getBoundingClientRect();
+            this.last_touch_position = new Point(touchEvent.touches[0].pageX - rect.left, touchEvent.touches[0].pageY - rect.top);
+        }
+    }
+    /**
+     * Handles touch move events
+     * @param {TouchEvent} event - The touch event
+     * @private
+     */
+    handle_touch_move(event) {
+        event.preventDefault();
+        // Cast to any to access TouchEvent properties
+        const touchEvent = event;
+        if (this.is_pinching &&
+            touchEvent.touches &&
+            touchEvent.touches.length === 2) {
+            const rect = this.image_editor_context.app.view.getBoundingClientRect();
+            const current_distance = Math.hypot(touchEvent.touches[0].pageX - touchEvent.touches[1].pageX, touchEvent.touches[0].pageY - touchEvent.touches[1].pageY);
+            const pinch_center = {
+                x: (touchEvent.touches[0].pageX + touchEvent.touches[1].pageX) / 2 -
+                    rect.left,
+                y: (touchEvent.touches[0].pageY + touchEvent.touches[1].pageY) / 2 -
+                    rect.top
+            };
+            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 &&
+            touchEvent.touches &&
+            touchEvent.touches.length === 1 &&
+            this.last_touch_position) {
+            const rect = this.image_editor_context.app.view.getBoundingClientRect();
+            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,
+                    y: this.local_position.y + dy
+                }
+            });
+            this.last_touch_position = current_position;
+        }
+    }
+    /**
+     * Handles touch end events
+     * @param {TouchEvent} event - The touch event
+     * @private
+     */
+    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;
+            if (touchEvent.touches && touchEvent.touches.length === 1) {
+                const rect = this.image_editor_context.app.view.getBoundingClientRect();
+                this.last_touch_position = new Point(touchEvent.touches[0].pageX - rect.left, touchEvent.touches[0].pageY - rect.top);
+                this.is_dragging = true;
+            }
+        }
+        if (touchEvent.touches && touchEvent.touches.length === 0) {
+            this.is_dragging = false;
+            this.last_touch_position = null;
+            this.last_pinch_distance = 0;
+        }
+    }
+    /**
+     * Gets the bounded position to keep the image within the viewport
+     * @param {Object} position - The position to bound
+     * @param {number} position.x - The x coordinate
+     * @param {number} position.y - The y coordinate
+     * @returns {Object} The bounded position
+     * @private
+     */
+    get_bounded_position(position) {
+        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
+        };
+        if (scaled_width <= canvas.width && scaled_height <= canvas.height) {
+            return center_position;
+        }
+        let x = position.x;
+        let y = position.y;
+        if (scaled_width <= canvas.width) {
+            x = center_position.x;
+        }
+        else {
+            const min_x = canvas.width - scaled_width;
+            const max_x = 0;
+            x = Math.max(min_x, Math.min(max_x, position.x));
+        }
+        if (scaled_height <= canvas.height - this.pad_bottom) {
+            y = center_position.y;
+        }
+        else {
+            const min_y = canvas.height - scaled_height - this.pad_bottom;
+            const max_y = 0;
+            y = Math.max(min_y, Math.min(max_y, position.y));
+        }
+        return { x, y };
+    }
+    /**
+     * Zooms to a specific point with a new zoom level
+     * @param {number} new_zoom - The new zoom level
+     * @param {Object} point - The point to zoom to
+     * @param {number} point.x - The x coordinate of the point
+     * @param {number} point.y - The y coordinate of the point
+     * @param {boolean} hard - Whether to apply a hard zoom (no animation)
+     * @param {boolean} is_fit_zoom - Whether this is a fit zoom operation
+     * @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
+            };
+        }
+        this.image_editor_context.set_image_properties({
+            scale: new_zoom,
+            position: new_position,
+            animate: typeof hard === "boolean" ? !hard : new_zoom === min_zoom
+        });
+        this.min_zoom.set(new_zoom === min_zoom);
+    }
+    /**
+     * Handles pointer down events
+     * @param {FederatedPointerEvent} event - The pointer event
+     * @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);
+            this.drag_start.x -= this.local_position.x;
+            this.drag_start.y -= this.local_position.y;
+        }
+    }
+    /**
+     * Handles pointer move events
+     * @param {FederatedPointerEvent} event - The pointer event
+     * @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,
+                y: event.global.y - this.drag_start.y
+            };
+            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;
+            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) {
+                final_position.y =
+                    (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({
+                scale: this.local_scale,
+                position: final_position
+            });
+        }
+    }
+    /**
+     * Handles pointer up events
+     * @param {FederatedPointerEvent} event - The pointer event
+     * @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 = {
+                x: event.global.x - this.drag_start.x,
+                y: event.global.y - this.drag_start.y
+            };
+            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;
+            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;
+                final_position.x = Math.min(Math.max(raw_position.x, right_bound), left_bound);
+            }
+            if (scaled_height <= available_height) {
+                final_position.y =
+                    (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;
+                final_position.y = Math.min(Math.max(raw_position.y, bottom_bound), top_bound);
+            }
+            this.image_editor_context.set_image_properties({
+                scale: this.local_scale,
+                position: final_position,
+                animate: true
+            });
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.12.14",
+  "version": "0.13.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,16 +8,17 @@
   "private": false,
   "dependencies": {
     "@types/tinycolor2": "^1.4.6",
-    "pixi.js": "^7.3.2",
+    "pixi-filters": "^6.1.0",
+    "pixi.js": "^8.7.3",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.14.1",
-    "@gradio/client": "^1.14.1",
-    "@gradio/icons": "^0.10.0",
-    "@gradio/statustracker": "^0.10.6",
-    "@gradio/upload": "^0.15.7",
-    "@gradio/image": "^0.21.7",
+    "@gradio/atoms": "^0.15.0",
+    "@gradio/icons": "^0.11.0",
+    "@gradio/image": "^0.22.0",
+    "@gradio/utils": "^0.10.1",
+    "@gradio/statustracker": "^0.10.7",
+    "@gradio/upload": "^0.16.0",
     "@gradio/wasm": "^0.18.1",
-    "@gradio/utils": "^0.10.1"
+    "@gradio/client": "^1.14.1"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"