@gradio/imageeditor 0.18.1 → 0.18.2-dev.2

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

@@ -1,44 +1,46 @@
-import { SvelteComponent } from "svelte";
 export type Tool = "image" | "draw" | "erase" | "pan";
 export type Subtool = "upload" | "paste" | "webcam" | "color" | "size" | "crop" | "remove_background" | null;
 import type { Source, Transform } from "./types";
 import { type Brush as BrushType, type Eraser as EraserType } from "./brush/types";
-declare const __propDef: {
-    props: {
-        tool?: Tool;
-        subtool?: Subtool;
-        background?: boolean;
-        brush_options: BrushType | false;
-        selected_size?: number;
-        eraser_options: EraserType;
-        selected_eraser_size?: number;
-        selected_color?: any;
-        selected_opacity?: any;
-        preview?: boolean;
-        show_brush_color?: boolean;
-        show_brush_size?: boolean;
-        show_eraser_size?: boolean;
-        sources: Source[];
-        transforms: Transform[];
+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: {
-        tool_change: CustomEvent<{
-            tool: Tool;
-        }>;
-        subtool_change: CustomEvent<{
-            tool: Tool;
-            subtool: Subtool;
-        }>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ToolbarProps = typeof __propDef.props;
-export type ToolbarEvents = typeof __propDef.events;
-export type ToolbarSlots = typeof __propDef.slots;
-export default class Toolbar extends SvelteComponent<ToolbarProps, ToolbarEvents, ToolbarSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Toolbar: $$__sveltets_2_IsomorphicComponent<{
+    tool?: Tool;
+    subtool?: Subtool;
+    background?: boolean;
+    brush_options: BrushType | false;
+    selected_size?: number;
+    eraser_options: EraserType;
+    selected_eraser_size?: number;
+    selected_color?: any;
+    selected_opacity?: any;
+    preview?: boolean;
+    show_brush_color?: boolean;
+    show_brush_size?: boolean;
+    show_eraser_size?: boolean;
+    sources: Source[];
+    transforms: Transform[];
+}, {
+    tool_change: CustomEvent<{
+        tool: Tool;
+    }>;
+    subtool_change: CustomEvent<{
+        tool: Tool;
+        subtool: Subtool;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toolbar = InstanceType<typeof Toolbar>;
+export default Toolbar;

package/dist/shared/brush/BrushOptions.svelte

@@ -1,87 +1,122 @@
-<script>import { createEventDispatcher, tick } from "svelte";
-import { click_outside } from "../utils/events";
-import {} from "./types";
-import ColorPicker from "./ColorPicker.svelte";
-import ColorSwatch from "./ColorSwatch.svelte";
-import ColorField from "./ColorField.svelte";
-import BrushSize from "./BrushSize.svelte";
-export let colors;
-export let selected_color;
-export let color_mode = void 0;
-export let recent_colors = [];
-export let selected_size;
-export let selected_opacity;
-export let show_swatch;
-export let show_size;
-export let mode = "brush";
-let color_picker = false;
-let current_mode = "hex";
-let editing_index = null;
-const dispatch = createEventDispatcher();
-function handle_color_selection({
-  index,
-  color,
-  opacity
-}, type) {
-  if (type === "user" && !color) {
-    editing_index = index;
-    color_picker = true;
-  }
-  if (!color) return;
-  selected_color = color;
-  if (opacity !== void 0) {
-    selected_opacity = opacity;
-  }
-  if (type === "core") {
-    color_picker = false;
-  }
-}
-function handle_color_change(color) {
-  if (editing_index === null) return;
-  recent_colors[editing_index] = color;
-}
-$: handle_color_change(selected_color);
-let width = 0;
-let height = 0;
-function debounce(func, delay) {
-  let timeout;
-  return function(...args) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func(...args), delay);
-  };
-}
-export let preview = false;
-function handle_preview() {
-  if (!preview) {
-    preview = true;
-    debounced_close_preview();
-  } else {
-    debounced_close_preview();
-  }
-}
-function handle_close_preview() {
-  preview = false;
-}
-const debounced_close_preview = debounce(handle_close_preview, 1e3);
-$: selected_size, selected_color, handle_preview();
-function handle_select(color) {
-  selected_color = color;
-}
-function handle_add_color() {
-  if (recent_colors.length >= 5) {
-    recent_colors.pop();
-  }
-  if (recent_colors.some((color) => {
-    if (Array.isArray(color)) {
-      return color[0] === selected_color && color[1] === selected_opacity;
-    }
-    return color === selected_color;
-  })) {
-    return;
-  }
-  recent_colors.push([selected_color, selected_opacity]);
-  recent_colors = recent_colors;
-}
+<script lang="ts">
+	import { createEventDispatcher, tick } from "svelte";
+	import { click_outside } from "../utils/events";
+
+	import { type Brush, type ColorTuple } from "./types";
+	import ColorPicker from "./ColorPicker.svelte";
+	import ColorSwatch from "./ColorSwatch.svelte";
+	import ColorField from "./ColorField.svelte";
+	import BrushSize from "./BrushSize.svelte";
+	import type { ColorInput } from "tinycolor2";
+
+	export let colors: (ColorInput | ColorTuple)[];
+	export let selected_color: any;
+	export let color_mode: Brush["color_mode"] | undefined = undefined;
+	export let recent_colors: (ColorInput | ColorTuple)[] = [];
+	export let selected_size: number;
+	export let selected_opacity: number;
+	export let show_swatch: boolean;
+	export let show_size: boolean;
+	export let mode: "brush" | "eraser" = "brush";
+
+	let color_picker = false;
+	let current_mode: "hex" | "rgb" | "hsl" = "hex";
+	let editing_index: number | null = null;
+
+	const dispatch = createEventDispatcher<{
+		click_outside: void;
+	}>();
+
+	function handle_color_selection(
+		{
+			index,
+			color,
+			opacity
+		}: {
+			index: number | null;
+			color: string | null;
+			opacity?: number;
+		},
+		type: "core" | "user"
+	): void {
+		if (type === "user" && !color) {
+			editing_index = index;
+			color_picker = true;
+		}
+
+		if (!color) return;
+		selected_color = color;
+
+		if (opacity !== undefined) {
+			selected_opacity = opacity;
+		}
+
+		if (type === "core") {
+			color_picker = false;
+		}
+	}
+
+	function handle_color_change(color: string): void {
+		if (editing_index === null) return;
+		recent_colors[editing_index] = color;
+	}
+
+	$: handle_color_change(selected_color);
+	let width = 0;
+	let height = 0;
+
+	function debounce(
+		func: (...args: any[]) => void,
+		delay: number
+	): (...args: any[]) => void {
+		let timeout: NodeJS.Timeout;
+		return function (...args: any[]): void {
+			clearTimeout(timeout);
+			timeout = setTimeout(() => func(...args), delay);
+		};
+	}
+
+	export let preview = false;
+	function handle_preview(): void {
+		if (!preview) {
+			preview = true;
+			debounced_close_preview();
+		} else {
+			debounced_close_preview();
+		}
+	}
+
+	function handle_close_preview(): void {
+		preview = false;
+	}
+
+	const debounced_close_preview = debounce(handle_close_preview, 1000);
+
+	$: (selected_size, selected_color, handle_preview());
+
+	function handle_select(color: string): void {
+		selected_color = color;
+	}
+
+	function handle_add_color(): void {
+		// limit to 5
+		if (recent_colors.length >= 5) {
+			recent_colors.pop();
+		}
+		// check if the color is already in the array
+		if (
+			recent_colors.some((color) => {
+				if (Array.isArray(color)) {
+					return color[0] === selected_color && color[1] === selected_opacity;
+				}
+				return color === selected_color;
+			})
+		) {
+			return;
+		}
+		recent_colors.push([selected_color, selected_opacity]);
+		recent_colors = recent_colors;
+	}
 </script>
 
 <svelte:window bind:innerHeight={height} bind:innerWidth={width} />

package/dist/shared/brush/BrushOptions.svelte.d.ts

@@ -1,31 +1,33 @@
-import { SvelteComponent } from "svelte";
 import { type Brush, type ColorTuple } from "./types";
 import type { ColorInput } from "tinycolor2";
-declare const __propDef: {
-    props: {
-        colors: (ColorInput | ColorTuple)[];
-        selected_color: any;
-        color_mode?: Brush["color_mode"] | undefined;
-        recent_colors?: (ColorInput | ColorTuple)[];
-        selected_size: number;
-        selected_opacity: number;
-        show_swatch: boolean;
-        show_size: boolean;
-        mode?: "brush" | "eraser";
-        preview?: 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: {
-        click_outside: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BrushOptionsProps = typeof __propDef.props;
-export type BrushOptionsEvents = typeof __propDef.events;
-export type BrushOptionsSlots = typeof __propDef.slots;
-export default class BrushOptions extends SvelteComponent<BrushOptionsProps, BrushOptionsEvents, BrushOptionsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const BrushOptions: $$__sveltets_2_IsomorphicComponent<{
+    colors: (ColorInput | ColorTuple)[];
+    selected_color: any;
+    color_mode?: Brush["color_mode"] | undefined;
+    recent_colors?: (ColorInput | ColorTuple)[];
+    selected_size: number;
+    selected_opacity: number;
+    show_swatch: boolean;
+    show_size: boolean;
+    mode?: "brush" | "eraser";
+    preview?: boolean;
+}, {
+    click_outside: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BrushOptions = InstanceType<typeof BrushOptions>;
+export default BrushOptions;

package/dist/shared/brush/BrushSize.svelte

@@ -1,10 +1,15 @@
-<script>import { click_outside } from "../utils/events";
-import { createEventDispatcher } from "svelte";
-import { BrushSize } from "@gradio/icons";
-export let selected_size;
-export let min;
-export let max;
-const dispatch = createEventDispatcher();
+<script lang="ts">
+	import { click_outside } from "../utils/events";
+	import { createEventDispatcher } from "svelte";
+	import { BrushSize } from "@gradio/icons";
+
+	export let selected_size: number;
+	export let min: number;
+	export let max: number;
+
+	const dispatch = createEventDispatcher<{
+		click_outside: void;
+	}>();
 </script>
 
 <div class="wrap" use:click_outside={() => dispatch("click_outside")}>

package/dist/shared/brush/BrushSize.svelte.d.ts

@@ -1,22 +1,25 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        selected_size: number;
-        min: number;
-        max: number;
+import { BrushSize } from "@gradio/icons";
+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_outside: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BrushSizeProps = typeof __propDef.props;
-export type BrushSizeEvents = typeof __propDef.events;
-export type BrushSizeSlots = typeof __propDef.slots;
-export default class BrushSize extends SvelteComponent<BrushSizeProps, BrushSizeEvents, BrushSizeSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const BrushSize: $$__sveltets_2_IsomorphicComponent<{
+    selected_size: number;
+    min: number;
+    max: number;
+}, {
+    click_outside: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BrushSize = InstanceType<typeof BrushSize>;
+export default BrushSize;

package/dist/shared/brush/ColorField.svelte

@@ -1,36 +1,52 @@
-<script>import { Eyedropper, Plus } from "@gradio/icons";
-import { createEventDispatcher } from "svelte";
-import tinycolor from "tinycolor2";
-import IconButton from "../IconButton.svelte";
-export let color;
-export let current_mode = "hex";
-const dispatch = createEventDispatcher();
-const modes = [
-  ["Hex", "hex"],
-  ["RGB", "rgb"],
-  ["HSL", "hsl"]
-];
-function format_color(color2, mode) {
-  if (mode === "hex") {
-    return tinycolor(color2).toHexString();
-  } else if (mode === "rgb") {
-    return tinycolor(color2).toRgbString();
-  }
-  return tinycolor(color2).toHslString();
-}
-$: color_string = format_color(color, current_mode);
-$: color_string && dispatch("selected", color_string);
-function request_eyedropper() {
-  const eyeDropper = new EyeDropper();
-  eyeDropper.open().then((result) => {
-    color = result.sRGBHex;
-  });
-}
-const eyedropper_supported = !!window.EyeDropper;
-function handle_click() {
-  dispatch("selected", color_string);
-  dispatch("close");
-}
+<script lang="ts">
+	import { Eyedropper, Plus } from "@gradio/icons";
+	import { createEventDispatcher } from "svelte";
+
+	import tinycolor from "tinycolor2";
+	import IconButton from "../IconButton.svelte";
+	export let color: string;
+
+	export let current_mode: "hex" | "rgb" | "hsl" = "hex";
+
+	const dispatch = createEventDispatcher<{
+		selected: string;
+		close: void;
+		add_color: void;
+	}>();
+	const modes = [
+		["Hex", "hex"],
+		["RGB", "rgb"],
+		["HSL", "hsl"]
+	] as const;
+
+	function format_color(color: string, mode: "hex" | "rgb" | "hsl"): string {
+		if (mode === "hex") {
+			return tinycolor(color).toHexString();
+		} else if (mode === "rgb") {
+			return tinycolor(color).toRgbString();
+		}
+		return tinycolor(color).toHslString();
+	}
+
+	$: color_string = format_color(color, current_mode);
+	$: color_string && dispatch("selected", color_string);
+
+	function request_eyedropper(): void {
+		// @ts-ignore
+		const eyeDropper = new EyeDropper();
+
+		eyeDropper.open().then((result: { sRGBHex: string }) => {
+			color = result.sRGBHex;
+		});
+	}
+
+	//@ts-ignore
+	const eyedropper_supported = !!window.EyeDropper;
+
+	function handle_click(): void {
+		dispatch("selected", color_string);
+		dispatch("close");
+	}
 </script>
 
 <div class="input">

package/dist/shared/brush/ColorField.svelte.d.ts

@@ -1,23 +1,25 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        color: string;
-        current_mode?: "hex" | "rgb" | "hsl";
+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: {
-        selected: CustomEvent<string>;
-        close: CustomEvent<void>;
-        add_color: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ColorFieldProps = typeof __propDef.props;
-export type ColorFieldEvents = typeof __propDef.events;
-export type ColorFieldSlots = typeof __propDef.slots;
-export default class ColorField extends SvelteComponent<ColorFieldProps, ColorFieldEvents, ColorFieldSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ColorField: $$__sveltets_2_IsomorphicComponent<{
+    color: string;
+    current_mode?: "hex" | "rgb" | "hsl";
+}, {
+    selected: CustomEvent<string>;
+    close: CustomEvent<void>;
+    add_color: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ColorField = InstanceType<typeof ColorField>;
+export default ColorField;