@gradio/imageeditor 0.19.0 → 0.20.1

package/dist/shared/core/editor.d.ts

@@ -56,6 +56,7 @@ export interface ImageEditorContext {
     resize_canvas: (width: number, height: number) => void;
     reset: () => void;
     set_background_image: (image: Sprite) => void;
+    request_render: () => void;
     pad_bottom: number;
 }
 export declare class ImageEditor {
@@ -107,9 +108,13 @@ export declare class ImageEditor {
     private overlay_graphics;
     private pad_bottom;
     private theme_mode;
+    private render_idle_remaining;
+    private static readonly WAKE_EVENTS;
+    private wake_render_loop_bound;
     constructor(options: ImageEditorOptions);
     get context(): ImageEditorContext;
     init(): Promise<void>;
+    private wake_render_loop;
     private setup_containers;
     resize_canvas(width: number, height: number): void;
     reset(): void;

package/dist/shared/core/editor.js

@@ -16,6 +16,7 @@ const spring_config = {
     stiffness: 0.45,
     damping: 0.8
 };
+const RENDER_IDLE_TIMEOUT_MS = 500;
 class EditorState {
     state;
     scale;
@@ -114,6 +115,15 @@ export class ImageEditor {
     overlay_graphics;
     pad_bottom;
     theme_mode;
+    render_idle_remaining = RENDER_IDLE_TIMEOUT_MS;
+    static WAKE_EVENTS = [
+        "pointerdown",
+        "pointermove",
+        "pointerup",
+        "pointerenter",
+        "wheel"
+    ];
+    wake_render_loop_bound = this.wake_render_loop.bind(this);
     constructor(options) {
         this.pad_bottom = options.pad_bottom || 0;
         this.dark = options.dark || false;
@@ -178,7 +188,8 @@ export class ImageEditor {
             execute_command: this.execute_command.bind(this),
             resize_canvas: this.resize_canvas.bind(this),
             reset: this.reset.bind(this),
-            set_background_image: this.set_background_image.bind(this)
+            set_background_image: this.set_background_image.bind(this),
+            request_render: this.wake_render_loop.bind(this)
         };
     }
     async init() {
@@ -222,14 +233,17 @@ export class ImageEditor {
             this.dimensions_value = dimensions;
             this.image_container.width = dimensions.width;
             this.image_container.height = dimensions.height;
+            this.wake_render_loop();
         });
         this.scale.subscribe((scale) => {
             this.scale_value = scale;
+            this.wake_render_loop();
         });
         this.position.subscribe((position) => {
             this.position_value = position;
+            this.wake_render_loop();
         });
-        this.app.ticker.add(() => {
+        this.app.ticker.add((ticker) => {
             this.image_container.scale.set(this.scale_value);
             this.image_container.position.set(this.position_value.x, this.position_value.y);
             const effective_width = this.dimensions_value.width * this.scale_value;
@@ -283,9 +297,23 @@ export class ImageEditor {
             else {
                 this.overlay_graphics.clear();
             }
+            this.render_idle_remaining -= ticker.deltaMS;
+            if (this.render_idle_remaining <= 0) {
+                ticker.stop();
+            }
         });
+        for (const event_name of ImageEditor.WAKE_EVENTS) {
+            canvas.addEventListener(event_name, this.wake_render_loop_bound);
+        }
+        this.wake_render_loop();
         this.ready_resolve();
     }
+    wake_render_loop() {
+        this.render_idle_remaining = RENDER_IDLE_TIMEOUT_MS;
+        if (this.app?.ticker && !this.app.ticker.started) {
+            this.app.ticker.start();
+        }
+    }
     setup_containers() {
         this.image_container = new Container({
             eventMode: "static",
@@ -355,6 +383,7 @@ export class ImageEditor {
         if (this.outline_container) {
             this.outline_container.position.set(app_center_x, app_center_y);
         }
+        this.wake_render_loop();
     }
     reset() {
         const zoom = this.tools.get("zoom");
@@ -366,6 +395,7 @@ export class ImageEditor {
         if (brush) {
             this.set_tool("draw");
         }
+        this.wake_render_loop();
     }
     async set_image_properties(properties) {
         let hard = typeof properties.animate !== "undefined" ? !properties.animate : true;
@@ -431,12 +461,14 @@ export class ImageEditor {
         for (const tool of this.tools.values()) {
             tool.set_tool(this.current_tool, this.current_subtool);
         }
+        this.wake_render_loop();
     }
     set_subtool(subtool) {
         this.current_subtool = subtool;
         for (const tool of this.tools.values()) {
             tool.set_tool(this.current_tool, this.current_subtool);
         }
+        this.wake_render_loop();
     }
     set_background_image(image) {
         this.background_image = image;
@@ -556,6 +588,7 @@ export class ImageEditor {
         this.event_callbacks.set(event, this.event_callbacks.get(event)?.filter((cb) => cb !== callback) || []);
     }
     notify(event) {
+        this.wake_render_loop();
         for (const callback of this.event_callbacks.get(event) || []) {
             callback();
         }
@@ -563,6 +596,12 @@ export class ImageEditor {
     destroy() {
         if (!this.app)
             return;
+        const canvas = this.app.canvas;
+        if (canvas) {
+            for (const event_name of ImageEditor.WAKE_EVENTS) {
+                canvas.removeEventListener(event_name, this.wake_render_loop_bound);
+            }
+        }
         this.app?.destroy();
     }
     resize(width, height) {
@@ -587,8 +626,10 @@ export class ImageEditor {
     set_layer_options(layer_options) {
         this.layer_options = layer_options;
         this.layer_manager.set_layer_options(layer_options, this.width, this.height);
+        this.wake_render_loop();
     }
     toggle_layer_visibility(id) {
         this.layer_manager.toggle_layer_visibility(id);
+        this.wake_render_loop();
     }
 }

package/dist/shared/resize/resize.d.ts

@@ -61,6 +61,8 @@ export declare class ResizeTool implements Tool {
     private dom_mouseup_handler;
     private event_callbacks;
     private last_scale;
+    private readonly handle_pointer_move_bound;
+    private readonly handle_pointer_up_bound;
     private original_state;
     /**
      * @method setup

package/dist/shared/resize/resize.js

@@ -84,6 +84,8 @@ export class ResizeTool {
     dom_mouseup_handler = null;
     event_callbacks = new Map();
     last_scale = 1;
+    handle_pointer_move_bound = this.handle_pointer_move.bind(this);
+    handle_pointer_up_bound = this.handle_pointer_up.bind(this);
     original_state = null;
     /**
      * @method setup
@@ -165,7 +167,7 @@ export class ResizeTool {
      * @returns {void}
      */
     cleanup() {
-        if (this.resize_ui_container) {
+        if (this.resize_ui_container && this.image_editor_context?.app) {
             this.image_editor_context.app.stage.removeChild(this.resize_ui_container);
         }
         this.cleanup_event_listeners();
@@ -181,16 +183,20 @@ export class ResizeTool {
         this.current_tool = tool;
         this.current_subtool = subtool;
         if (tool === "image" && subtool === "size") {
-            if (this.image_editor_context.background_image) {
-                const storedBorderRegion = this.image_editor_context.background_image.borderRegion;
+            const context = this.image_editor_context;
+            if (!context)
+                return;
+            if (context.background_image) {
+                const storedBorderRegion = context.background_image
+                    .borderRegion;
                 if (typeof storedBorderRegion === "number" && storedBorderRegion > 0) {
                     this.borderRegion = storedBorderRegion;
                 }
             }
             this.show_resize_ui();
-            if (this.image_editor_context.background_image) {
-                const bg = this.image_editor_context.background_image;
-                const container = this.image_editor_context.image_container;
+            if (context.background_image) {
+                const bg = context.background_image;
+                const container = context.image_container;
                 const bg_width = bg.width;
                 const bg_height = bg.height;
                 const container_bounds = container.getLocalBounds();
@@ -685,9 +691,9 @@ export class ResizeTool {
     setup_event_listeners() {
         const stage = this.image_editor_context.app.stage;
         stage.eventMode = "static";
-        stage.on("pointermove", this.handle_pointer_move.bind(this));
-        stage.on("pointerup", this.handle_pointer_up.bind(this));
-        stage.on("pointerupoutside", this.handle_pointer_up.bind(this));
+        stage.on("pointermove", this.handle_pointer_move_bound);
+        stage.on("pointerup", this.handle_pointer_up_bound);
+        stage.on("pointerupoutside", this.handle_pointer_up_bound);
         this.setup_dom_event_listeners();
     }
     /**
@@ -695,7 +701,10 @@ export class ResizeTool {
      */
     setup_dom_event_listeners() {
         this.cleanup_dom_event_listeners();
-        const canvas = this.image_editor_context.app.canvas;
+        const context = this.image_editor_context;
+        if (!context?.app?.canvas)
+            return;
+        const canvas = context.app.canvas;
         this.dom_mousedown_handler = (e) => {
             if (this.current_subtool !== "size")
                 return;
@@ -780,9 +789,9 @@ export class ResizeTool {
      * Cleans up DOM event listeners
      */
     cleanup_dom_event_listeners() {
-        const canvas = this.image_editor_context.app.canvas;
+        const canvas = this.image_editor_context?.app?.canvas;
         if (this.dom_mousedown_handler) {
-            canvas.removeEventListener("mousedown", this.dom_mousedown_handler);
+            canvas?.removeEventListener("mousedown", this.dom_mousedown_handler);
             this.dom_mousedown_handler = null;
         }
         if (this.dom_mousemove_handler) {
@@ -798,10 +807,10 @@ export class ResizeTool {
      * removes event listeners for the resize tool
      */
     cleanup_event_listeners() {
-        const stage = this.image_editor_context.app.stage;
-        stage.off("pointermove", this.handle_pointer_move.bind(this));
-        stage.off("pointerup", this.handle_pointer_up.bind(this));
-        stage.off("pointerupoutside", this.handle_pointer_up.bind(this));
+        const stage = this.image_editor_context?.app?.stage;
+        stage?.off("pointermove", this.handle_pointer_move_bound);
+        stage?.off("pointerup", this.handle_pointer_up_bound);
+        stage?.off("pointerupoutside", this.handle_pointer_up_bound);
         this.cleanup_dom_event_listeners();
     }
     /**
@@ -1197,7 +1206,7 @@ export class ResizeTool {
             this.resize_ui_container.visible = true;
             this.update_resize_ui();
         }
-        if (this.image_editor_context.background_image) {
+        if (this.image_editor_context?.background_image) {
             const bg = this.image_editor_context.background_image;
             this.current_cursor = bg.cursor;
             bg.cursor = "move";
@@ -1212,7 +1221,7 @@ export class ResizeTool {
         if (this.resize_ui_container) {
             this.resize_ui_container.visible = false;
         }
-        if (this.image_editor_context.background_image) {
+        if (this.image_editor_context?.background_image) {
             const bg = this.image_editor_context.background_image;
             bg.cursor = this.current_cursor;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.19.0",
+  "version": "0.20.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,16 +11,16 @@
     "pixi-filters": "^6.1.4",
     "pixi.js": "^8.14.0",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.25.0",
-    "@gradio/icons": "^0.15.1",
-    "@gradio/image": "^0.27.0",
-    "@gradio/statustracker": "^0.15.0",
-    "@gradio/upload": "^0.18.0",
-    "@gradio/utils": "^0.13.0",
-    "@gradio/client": "^2.3.0"
+    "@gradio/atoms": "^0.26.1",
+    "@gradio/client": "^2.4.0",
+    "@gradio/image": "^0.28.1",
+    "@gradio/icons": "^0.16.0",
+    "@gradio/statustracker": "^0.15.2",
+    "@gradio/utils": "^0.14.0",
+    "@gradio/upload": "^0.18.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.2"
+    "@gradio/preview": "^0.17.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Anchor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { spring } from "svelte/motion";
 	import { Image } from "@gradio/icons";
-	import { onMount, createEventDispatcher } from "svelte";
+	import { onMount } from "svelte";
 
 	const positions = [
 		"top-left",
@@ -14,9 +14,11 @@
 		"bottom",
 		"bottom-right"
 	] as const;
-	const dispatch = createEventDispatcher<{
-		position: (typeof positions)[number];
-	}>();
+	let {
+		onposition
+	}: {
+		onposition?: (position: (typeof positions)[number]) => void;
+	} = $props();
 
 	const spring_opt = {
 		stiffness: 0.1,
@@ -35,8 +37,8 @@
 	};
 	const arrow_spring = spring<Arrow[]>([], spring_opt);
 
-	let last_i = 0;
-	let expanded = true;
+	let last_i = $state(0);
+	let expanded = $state(true);
 	const box_size = (120 - 5 * 2) / 3;
 
 	async function handle_box_hover(i: number): Promise<void> {
@@ -49,7 +51,7 @@
 		dimensions.set(init);
 	}
 
-	let last_pos = 0;
+	let last_pos = $state(0);
 	async function handle_box_click(i: number, stagger = false): Promise<void> {
 		if (expanded && stagger) return;
 
@@ -77,7 +79,7 @@
 		dimensions.set([120 + 10, 120 + 10]);
 		arrow_spring.set(eventual_arrows);
 
-		dispatch("position", positions[i]);
+		onposition?.(positions[i]);
 	}
 
 	function get_valid_offsets(anchorPoint: {
@@ -215,14 +217,14 @@
 		class="box-wrap"
 		role="grid"
 		tabindex="0"
-		on:mouseleave={() => handle_box_click(last_pos, true)}
+		onmouseleave={() => handle_box_click(last_pos, true)}
 	>
 		{#each { length: 9 } as _, i}
 			<button
 				class="box"
 				class:active-box={last_pos === i}
-				on:mouseenter={() => handle_box_hover(i)}
-				on:click={() => handle_box_click(i)}
+				onmouseenter={() => handle_box_hover(i)}
+				onclick={() => handle_box_click(i)}
 			>
 				<span class:active={last_pos === i} class="icon-wrap">
 					<Image />

package/shared/Controls.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 	import {
 		Check,
@@ -11,30 +10,45 @@
 		Undo,
 		Redo
 	} from "@gradio/icons";
-	import type { Writable } from "svelte/store";
-
-	export let can_save = false;
-	export let changeable = false;
-	export let current_zoom = 1;
-	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;
-		undo: void;
-		redo: void;
-		save: void;
-		zoom_in: void;
-		zoom_out: void;
-		set_zoom: number | "fit";
-		pan: void;
-		download: void;
-	}>();
-
-	let show_zoom_popup = false;
+	let {
+		can_save = false,
+		changeable = false,
+		current_zoom = 1,
+		tool,
+		min_zoom = true,
+		enable_download = false,
+		can_undo,
+		can_redo,
+		onremove_image,
+		onundo,
+		onredo,
+		onsave,
+		onzoom_in,
+		onzoom_out,
+		onset_zoom,
+		onpan,
+		ondownload
+	}: {
+		can_save?: boolean;
+		changeable?: boolean;
+		current_zoom?: number;
+		tool: string;
+		min_zoom?: boolean;
+		enable_download?: boolean;
+		can_undo: boolean;
+		can_redo: boolean;
+		onremove_image?: () => void;
+		onundo?: () => void;
+		onredo?: () => void;
+		onsave?: () => void;
+		onzoom_in?: () => void;
+		onzoom_out?: () => void;
+		onset_zoom?: (zoom: number | "fit") => void;
+		onpan?: () => void;
+		ondownload?: () => void;
+	} = $props();
+
+	let show_zoom_popup = $state(false);
 
 	function handle_zoom_click(e: MouseEvent): void {
 		e.stopPropagation();
@@ -42,7 +56,7 @@
 	}
 
 	function handle_zoom_change(zoom: number | "fit"): void {
-		dispatch("set_zoom", zoom);
+		onset_zoom?.(zoom);
 		show_zoom_popup = false;
 	}
 
@@ -52,7 +66,7 @@
 		}
 	}
 
-	$: formatted_zoom = Math.round(current_zoom * 100);
+	let formatted_zoom = $derived(Math.round(current_zoom * 100));
 </script>
 
 <IconButtonWrapper>
@@ -61,7 +75,7 @@
 			Icon={Download}
 			label="Download"
 			onclick={(event) => {
-				dispatch("download");
+				ondownload?.();
 				event.stopPropagation();
 			}}
 		/>
@@ -72,7 +86,7 @@
 		label="Pan"
 		onclick={(e) => {
 			e.stopPropagation();
-			dispatch("pan");
+			onpan?.();
 		}}
 		highlight={tool === "pan"}
 		size="small"
@@ -85,7 +99,7 @@
 		Icon={ZoomOut}
 		label="Zoom out"
 		onclick={(event) => {
-			dispatch("zoom_out");
+			onzoom_out?.();
 			event.stopPropagation();
 		}}
 	/>
@@ -93,7 +107,7 @@
 		Icon={ZoomIn}
 		label="Zoom in"
 		onclick={(event) => {
-			dispatch("zoom_in");
+			onzoom_in?.();
 			event.stopPropagation();
 		}}
 	/>
@@ -102,20 +116,30 @@
 		<span
 			role="button"
 			tabindex="0"
-			on:click={handle_zoom_click}
-			on:keydown={handle_zoom_keydown}>{formatted_zoom}%</span
+			onclick={handle_zoom_click}
+			onkeydown={handle_zoom_keydown}>{formatted_zoom}%</span
 		>
 		{#if show_zoom_popup}
 			<div class="zoom-controls">
 				<ul>
 					<li>
-						<button on:click|stopPropagation={() => handle_zoom_change("fit")}>
+						<button
+							onclick={(event) => {
+								event.stopPropagation();
+								handle_zoom_change("fit");
+							}}
+						>
 							Fit to screen
 						</button>
 					</li>
 					{#each [0.25, 0.5, 1, 2, 4] as zoom}
 						<li>
-							<button on:click|stopPropagation={() => handle_zoom_change(zoom)}>
+							<button
+								onclick={(event) => {
+									event.stopPropagation();
+									handle_zoom_change(zoom);
+								}}
+							>
 								{zoom * 100}%
 							</button>
 						</li>
@@ -130,7 +154,7 @@
 		Icon={Undo}
 		label="Undo"
 		onclick={(event) => {
-			dispatch("undo");
+			onundo?.();
 			event.stopPropagation();
 		}}
 		disabled={!can_undo}
@@ -140,7 +164,7 @@
 		Icon={Redo}
 		label="Redo"
 		onclick={(event) => {
-			dispatch("redo");
+			onredo?.();
 			event.stopPropagation();
 		}}
 		disabled={!can_redo}
@@ -152,7 +176,7 @@
 			Icon={Check}
 			label="Save changes"
 			onclick={(event) => {
-				dispatch("save");
+				onsave?.();
 				event.stopPropagation();
 			}}
 			color="var(--color-accent)"
@@ -163,7 +187,7 @@
 		Icon={Trash}
 		label="Clear canvas"
 		onclick={(event) => {
-			dispatch("remove_image");
+			onremove_image?.();
 			event.stopPropagation();
 		}}
 	/>

package/shared/IconButton.svelte

@@ -1,23 +1,44 @@
 <script lang="ts">
 	import { type Component } from "svelte";
 	import type { ColorInput } from "tinycolor2";
-	export let Icon: Component<any>;
-	export let label = "";
-	export let show_label = false;
-	export let pending = false;
-	export let size: "small" | "large" | "medium" = "small";
-	export let padded = true;
-	export let highlight = false;
-	export let disabled = false;
-	export let hasPopup = false;
-	export let color: string | ColorInput = "var(--block-label-text-color)";
-	export let transparent = false;
-	export let background = "var(--background-fill-primary)";
-	export let offset = 0;
-	export let label_position: "left" | "right" = "left";
-	export let roundedness: "quite" | "very" = "quite";
-	export let onclick: ((event: MouseEvent) => void) | undefined = undefined;
-	$: _color = highlight ? "var(--color-accent)" : color.toString();
+
+	let {
+		Icon,
+		label = "",
+		show_label = false,
+		pending = false,
+		size = "small",
+		padded = true,
+		highlight = false,
+		disabled = false,
+		hasPopup = false,
+		color = "var(--block-label-text-color)",
+		transparent = false,
+		background = "var(--background-fill-primary)",
+		offset = 0,
+		label_position = "left",
+		roundedness = "quite",
+		onclick = undefined
+	}: {
+		Icon: Component<any>;
+		label?: string;
+		show_label?: boolean;
+		pending?: boolean;
+		size?: "small" | "large" | "medium";
+		padded?: boolean;
+		highlight?: boolean;
+		disabled?: boolean;
+		hasPopup?: boolean;
+		color?: string | ColorInput;
+		transparent?: boolean;
+		background?: string;
+		offset?: number;
+		label_position?: "left" | "right";
+		roundedness?: "quite" | "very";
+		onclick?: (event: MouseEvent) => void;
+	} = $props();
+
+	let _color = $derived(highlight ? "var(--color-accent)" : color.toString());
 </script>
 
 <button