@gradio/imageeditor 0.18.2-dev.0 → 0.18.2

package/dist/shared/ImageEditor.svelte.d.ts

@@ -1,81 +1,6 @@
-import { SvelteComponent } from "svelte";
 export declare const EDITOR_KEY: unique symbol;
 export type context_type = "bg" | "layers" | "crop" | "draw" | "erase";
-import { type Tool as ToolbarTool } from "./Toolbar.svelte";
-import type { I18nFormatter } from "@gradio/utils";
-import type { Client, FileData } from "@gradio/client";
-import { type CommandNode } from "./core/commands";
-import { type Brush, type Eraser } from "./brush/types";
-import type { LayerOptions, Source, Transform, WebcamOptions } from "./types";
-import { type ImageBlobs } from "./types";
-declare const __propDef: {
-    props: {
-        antialias?: true;
-        changeable?: boolean;
-        sources?: Source[];
-        transforms?: Transform[];
-        canvas_size: [number, number];
-        is_dragging?: boolean;
-        background_image?: boolean;
-        brush_options: Brush;
-        eraser_options: Eraser;
-        fixed_canvas?: boolean;
-        root: string;
-        i18n: I18nFormatter;
-        upload: Client["upload"];
-        composite: FileData | null;
-        layers: FileData[];
-        background: FileData | null;
-        border_region?: number;
-        layer_options: LayerOptions;
-        current_tool: ToolbarTool;
-        webcam_options: WebcamOptions;
-        show_download_button?: boolean;
-        theme_mode: "dark" | "light";
-        full_history?: CommandNode | null;
-        has_drawn?: boolean;
-        get_blobs?: () => Promise<ImageBlobs>;
-        add_image?: (image: Blob | File) => void;
-        add_image_from_url?: (source: string | {
-            url: string;
-            meta: {
-                _type: string;
-            };
-        } | any) => Promise<void>;
-        add_layers_from_url?: (source: FileData[] | any) => Promise<void>;
-        can_undo?: boolean;
-    };
-    events: {
-        error: CustomEvent<string>;
-        drag: CustomEvent<any>;
-        clear?: CustomEvent<undefined> | undefined;
-        save: CustomEvent<void>;
-        change: CustomEvent<void>;
-        upload: CustomEvent<void>;
-        input: CustomEvent<void>;
-        download_error: CustomEvent<string>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ImageEditorProps = typeof __propDef.props;
-export type ImageEditorEvents = typeof __propDef.events;
-export type ImageEditorSlots = typeof __propDef.slots;
-export default class ImageEditor extends SvelteComponent<ImageEditorProps, ImageEditorEvents, ImageEditorSlots> {
-    get antialias(): true;
-    get get_blobs(): () => Promise<ImageBlobs>;
-    get add_image(): (image: Blob | File) => void;
-    get add_image_from_url(): (source: string | {
-        url: string;
-        meta: {
-            _type: string;
-        };
-    } | any) => Promise<void>;
-    get add_layers_from_url(): (source: FileData[] | any) => Promise<void>;
-}
-export {};
+import { ImageEditor } from "./core/editor";
+declare const ImageEditor: any;
+type ImageEditor = InstanceType<typeof ImageEditor>;
+export default ImageEditor;

package/dist/shared/Layers.svelte

@@ -1,33 +1,55 @@
-<script>import { click_outside } from "./utils/events";
-import {
-  Layers,
-  Clear,
-  ArrowUp,
-  ArrowDown,
-  Plus,
-  Visibility,
-  VisibilityOff
-} from "@gradio/icons";
-import { IconButton } from "@gradio/atoms";
-import { createEventDispatcher } from "svelte";
-const dispatch = createEventDispatcher();
-export let layers;
-export let enable_additional_layers = true;
-export let enable_layers = true;
-export let show_layers = false;
-function new_layer() {
-  dispatch("new_layer");
-}
-function change_layer(id) {
-  dispatch("change_layer", id);
-  show_layers = false;
-}
-function move_layer(id, direction) {
-  dispatch("move_layer", { id, direction });
-}
-function delete_layer(id) {
-  dispatch("delete_layer", id);
-}
+<script lang="ts">
+	import { click_outside } from "./utils/events";
+	import {
+		Layers,
+		Clear,
+		ArrowUp,
+		ArrowDown,
+		Plus,
+		Visibility,
+		VisibilityOff
+	} from "@gradio/icons";
+	import { IconButton } from "@gradio/atoms";
+	import { createEventDispatcher } from "svelte";
+	import type { Writable } from "svelte/store";
+
+	const dispatch = createEventDispatcher<{
+		new_layer: void;
+		change_layer: string;
+		move_layer: { id: string; direction: "up" | "down" };
+		delete_layer: string;
+		toggle_layer_visibility: string;
+	}>();
+
+	export let layers: Writable<{
+		active_layer: string;
+		layers: {
+			name: string;
+			id: string;
+			user_created: boolean;
+			visible: boolean;
+		}[];
+	}>;
+	export let enable_additional_layers = true;
+	export let enable_layers = true;
+	export let show_layers = false;
+
+	function new_layer(): void {
+		dispatch("new_layer");
+	}
+
+	function change_layer(id: string): void {
+		dispatch("change_layer", id);
+		show_layers = false;
+	}
+
+	function move_layer(id: string, direction: "up" | "down"): void {
+		dispatch("move_layer", { id, direction });
+	}
+
+	function delete_layer(id: string): void {
+		dispatch("delete_layer", id);
+	}
 </script>
 
 {#if enable_layers}

package/dist/shared/Layers.svelte.d.ts

@@ -1,39 +1,42 @@
-import { SvelteComponent } from "svelte";
+import { Layers } from "@gradio/icons";
 import type { Writable } from "svelte/store";
-declare const __propDef: {
-    props: {
-        layers: Writable<{
-            active_layer: string;
-            layers: {
-                name: string;
-                id: string;
-                user_created: boolean;
-                visible: boolean;
-            }[];
-        }>;
-        enable_additional_layers?: boolean;
-        enable_layers?: boolean;
-        show_layers?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        new_layer: CustomEvent<void>;
-        change_layer: CustomEvent<string>;
-        move_layer: CustomEvent<{
-            id: string;
-            direction: "up" | "down";
-        }>;
-        delete_layer: CustomEvent<string>;
-        toggle_layer_visibility: CustomEvent<string>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type LayersProps = typeof __propDef.props;
-export type LayersEvents = typeof __propDef.events;
-export type LayersSlots = typeof __propDef.slots;
-export default class Layers extends SvelteComponent<LayersProps, LayersEvents, LayersSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Layers: $$__sveltets_2_IsomorphicComponent<{
+    layers: Writable<{
+        active_layer: string;
+        layers: {
+            name: string;
+            id: string;
+            user_created: boolean;
+            visible: boolean;
+        }[];
+    }>;
+    enable_additional_layers?: boolean;
+    enable_layers?: boolean;
+    show_layers?: boolean;
+}, {
+    new_layer: CustomEvent<void>;
+    change_layer: CustomEvent<string>;
+    move_layer: CustomEvent<{
+        id: string;
+        direction: "up" | "down";
+    }>;
+    delete_layer: CustomEvent<string>;
+    toggle_layer_visibility: CustomEvent<string>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Layers = InstanceType<typeof Layers>;
+export default Layers;

package/dist/shared/Resize.svelte

@@ -1,24 +1,45 @@
-<script context="module"></script>
-
-<script>import { createEventDispatcher } from "svelte";
-import Anchor from "./Anchor.svelte";
-export let dimensions;
-const dispatch = createEventDispatcher();
-let selected_anchor = "center";
-let scale = false;
-let new_width = $dimensions?.width;
-let new_height = $dimensions?.height;
-function handle_click() {
-  dispatch("change", {
-    anchor: selected_anchor,
-    scale,
-    width: new_width,
-    height: new_height
-  });
-}
-function set_anchor(position) {
-  selected_anchor = position;
-}
+<script lang="ts" context="module">
+	export type Position =
+		| "top-left"
+		| "top"
+		| "top-right"
+		| "left"
+		| "center"
+		| "right"
+		| "bottom-left"
+		| "bottom"
+		| "bottom-right";
+</script>
+
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import type { Spring } from "svelte/motion";
+	import Anchor from "./Anchor.svelte";
+
+	export let dimensions: Spring<{ width: number; height: number }>;
+
+	const dispatch = createEventDispatcher<{
+		change: { anchor: Position; scale: boolean; width: number; height: number };
+	}>();
+
+	let selected_anchor: Position = "center";
+	let scale = false;
+
+	let new_width = $dimensions?.width;
+	let new_height = $dimensions?.height;
+
+	function handle_click(): void {
+		dispatch("change", {
+			anchor: selected_anchor,
+			scale,
+			width: new_width,
+			height: new_height
+		});
+	}
+
+	function set_anchor(position: Position): void {
+		selected_anchor = position;
+	}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->

package/dist/shared/Resize.svelte.d.ts

@@ -1,31 +1,33 @@
-import { SvelteComponent } from "svelte";
 export type Position = "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right";
 import type { Spring } from "svelte/motion";
-declare const __propDef: {
-    props: {
-        dimensions: Spring<{
-            width: number;
-            height: number;
-        }>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        click: MouseEvent;
-        change: CustomEvent<{
-            anchor: Position;
-            scale: boolean;
-            width: number;
-            height: number;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ResizeProps = typeof __propDef.props;
-export type ResizeEvents = typeof __propDef.events;
-export type ResizeSlots = typeof __propDef.slots;
-export default class Resize extends SvelteComponent<ResizeProps, ResizeEvents, ResizeSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Resize: $$__sveltets_2_IsomorphicComponent<{
+    dimensions: Spring<{
+        width: number;
+        height: number;
+    }>;
+}, {
+    click: PointerEvent;
+    change: CustomEvent<{
+        anchor: Position;
+        scale: boolean;
+        width: number;
+        height: number;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Resize = InstanceType<typeof Resize>;
+export default Resize;

package/dist/shared/SecondaryToolbar.svelte

@@ -1,8 +1,20 @@
-<script>import Layers from "./Layers.svelte";
-export let layers;
-export let enable_additional_layers = true;
-export let enable_layers = true;
-export let show_layers = false;
+<script lang="ts">
+	import Layers from "./Layers.svelte";
+	import type { Writable } from "svelte/store";
+
+	export let layers: Writable<{
+		active_layer: string;
+		layers: {
+			name: string;
+			id: string;
+			user_created: boolean;
+			visible: boolean;
+		}[];
+	}>;
+
+	export let enable_additional_layers = true;
+	export let enable_layers = true;
+	export let show_layers = false;
 </script>
 
 <div class="toolbar-wrap-wrap">

package/dist/shared/SecondaryToolbar.svelte.d.ts

@@ -1,39 +1,41 @@
-import { SvelteComponent } from "svelte";
 import type { Writable } from "svelte/store";
-declare const __propDef: {
-    props: {
-        layers: Writable<{
-            active_layer: string;
-            layers: {
-                name: string;
-                id: string;
-                user_created: boolean;
-                visible: boolean;
-            }[];
-        }>;
-        enable_additional_layers?: boolean;
-        enable_layers?: boolean;
-        show_layers?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        new_layer: CustomEvent<void>;
-        change_layer: CustomEvent<string>;
-        move_layer: CustomEvent<{
-            id: string;
-            direction: "up" | "down";
-        }>;
-        delete_layer: CustomEvent<string>;
-        toggle_layer_visibility: CustomEvent<string>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SecondaryToolbarProps = typeof __propDef.props;
-export type SecondaryToolbarEvents = typeof __propDef.events;
-export type SecondaryToolbarSlots = typeof __propDef.slots;
-export default class SecondaryToolbar extends SvelteComponent<SecondaryToolbarProps, SecondaryToolbarEvents, SecondaryToolbarSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SecondaryToolbar: $$__sveltets_2_IsomorphicComponent<{
+    layers: Writable<{
+        active_layer: string;
+        layers: {
+            name: string;
+            id: string;
+            user_created: boolean;
+            visible: boolean;
+        }[];
+    }>;
+    enable_additional_layers?: boolean;
+    enable_layers?: boolean;
+    show_layers?: boolean;
+}, {
+    new_layer: CustomEvent<void>;
+    change_layer: CustomEvent<string>;
+    move_layer: CustomEvent<{
+        id: string;
+        direction: "up" | "down";
+    }>;
+    delete_layer: CustomEvent<string>;
+    toggle_layer_visibility: CustomEvent<string>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SecondaryToolbar = InstanceType<typeof SecondaryToolbar>;
+export default SecondaryToolbar;

package/dist/shared/Toolbar.svelte

@@ -1,73 +1,127 @@
-<script context="module"></script>
+<script lang="ts" context="module">
+	export type Tool = "image" | "draw" | "erase" | "pan";
+	export type Subtool =
+		| "upload"
+		| "paste"
+		| "webcam"
+		| "color"
+		| "size"
+		| "crop"
+		| "remove_background"
+		| null;
+</script>
+
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import IconButton from "./IconButton.svelte";
+	import {
+		Image,
+		Brush,
+		Erase,
+		Crop,
+		Upload,
+		ImagePaste,
+		Webcam,
+		Circle,
+		Resize,
+		ColorPickerSolid
+	} from "@gradio/icons";
+	import BrushOptions from "./brush/BrushOptions.svelte";
+	import type { Source, Transform } from "./types";
+	import {
+		type Brush as BrushType,
+		type Eraser as EraserType
+	} from "./brush/types";
+	import tinycolor from "tinycolor2";
+
+	export let tool: Tool = "image";
+	export let subtool: Subtool = null;
+
+	export let background = false;
+	export let brush_options: BrushType | false;
+	export let selected_size =
+		brush_options && typeof brush_options.default_size === "number"
+			? brush_options.default_size
+			: 25;
+	export let eraser_options: EraserType;
+	export let selected_eraser_size =
+		eraser_options && typeof eraser_options.default_size === "number"
+			? eraser_options.default_size
+			: 25;
+
+	// Handle default_color including potential color-opacity tuple
+	export let selected_color =
+		brush_options &&
+		(() => {
+			const default_color = brush_options.default_color;
+			if (Array.isArray(default_color)) {
+				return default_color[0];
+			}
+			return default_color;
+		})();
+
+	// Set default opacity based on default_color if it's a tuple
+	export let selected_opacity =
+		brush_options &&
+		(() => {
+			const default_color = brush_options.default_color;
+			if (Array.isArray(default_color)) {
+				return default_color[1];
+			}
+			// Check if color string has opacity
+			const color = tinycolor(default_color);
+			if (color.getAlpha() < 1) {
+				return color.getAlpha();
+			}
+			return 1;
+		})();
+
+	export let preview = false;
+	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[];
+	let recent_colors: string[] = [];
+
+	let enable_layers = true;
+	const dispatch = createEventDispatcher<{
+		tool_change: { tool: Tool };
+		subtool_change: {
+			tool: Tool;
+			subtool: Subtool;
+		};
+	}>();
+
+	/**
+	 * Handles tool click events
+	 * @param {Tool} _tool - The selected tool
+	 */
+	function handle_tool_click(e: Event, _tool: Tool): void {
+		e.stopPropagation();
+		dispatch("tool_change", { tool: _tool });
+	}
+
+	/**
+	 * Handles subtool click events
+	 * @param {Event} e - The click event
+	 * @param {Subtool} _subtool - The selected subtool
+	 */
+	function handle_subtool_click(e: Event, _subtool: typeof subtool): void {
+		e.stopPropagation();
+
+		dispatch("subtool_change", { tool, subtool: _subtool });
+	}
+
+	$: show_brush_size = tool === "draw" && subtool === "size";
+	$: show_brush_color = tool === "draw" && subtool === "color";
+	$: show_eraser_size = tool === "erase" && subtool === "size";
 
-<script>import { createEventDispatcher } from "svelte";
-import IconButton from "./IconButton.svelte";
-import {
-  Image,
-  Brush,
-  Erase,
-  Crop,
-  Upload,
-  ImagePaste,
-  Webcam,
-  Circle,
-  Resize,
-  ColorPickerSolid
-} from "@gradio/icons";
-import BrushOptions from "./brush/BrushOptions.svelte";
-import {
-} from "./brush/types";
-import tinycolor from "tinycolor2";
-export let tool = "image";
-export let subtool = null;
-export let background = false;
-export let brush_options;
-export let selected_size = brush_options && typeof brush_options.default_size === "number" ? brush_options.default_size : 25;
-export let eraser_options;
-export let selected_eraser_size = eraser_options && typeof eraser_options.default_size === "number" ? eraser_options.default_size : 25;
-export let selected_color = brush_options && (() => {
-  const default_color = brush_options.default_color;
-  if (Array.isArray(default_color)) {
-    return default_color[0];
-  }
-  return default_color;
-})();
-export let selected_opacity = brush_options && (() => {
-  const default_color = brush_options.default_color;
-  if (Array.isArray(default_color)) {
-    return default_color[1];
-  }
-  const color = tinycolor(default_color);
-  if (color.getAlpha() < 1) {
-    return color.getAlpha();
-  }
-  return 1;
-})();
-export let preview = false;
-export let show_brush_color = false;
-export let show_brush_size = false;
-export let show_eraser_size = false;
-export let sources;
-export let transforms;
-let recent_colors = [];
-let enable_layers = true;
-const dispatch = createEventDispatcher();
-function handle_tool_click(e, _tool) {
-  e.stopPropagation();
-  dispatch("tool_change", { tool: _tool });
-}
-function handle_subtool_click(e, _subtool) {
-  e.stopPropagation();
-  dispatch("subtool_change", { tool, subtool: _subtool });
-}
-$: show_brush_size = tool === "draw" && subtool === "size";
-$: show_brush_color = tool === "draw" && subtool === "color";
-$: show_eraser_size = tool === "erase" && subtool === "size";
-$: can_crop = transforms.includes("crop");
-$: can_resize = transforms.includes("resize");
-$: can_upload = sources.includes("upload");
-$: can_webcam = sources.includes("webcam");
-$: can_paste = sources.includes("clipboard");
+	$: can_crop = transforms.includes("crop");
+	$: can_resize = transforms.includes("resize");
+	$: can_upload = sources.includes("upload");
+	$: can_webcam = sources.includes("webcam");
+	$: can_paste = sources.includes("clipboard");
 </script>
 
 <div class="toolbar-wrap">