@gradio/imageeditor 0.18.2-dev.0 → 0.18.2-dev.2

package/dist/shared/brush/ColorPicker.svelte

@@ -1,110 +1,153 @@
-<script>import { onMount, tick } from "svelte";
-import tinycolor from "tinycolor2";
-import { clamp } from "../utils/pixi";
-export let color = "rgb(255, 255, 255)";
-let sl_marker_pos = [0, 0];
-let sl_rect = null;
-let sl_moving = false;
-let sl = [0, 0];
-let hue = 0;
-let hue_marker_pos = 0;
-let hue_rect = null;
-let hue_moving = false;
-let opacity_moving = false;
-function handle_hue_down(event) {
-  hue_rect = event.currentTarget.getBoundingClientRect();
-  hue_moving = true;
-  update_hue_from_mouse(event.clientX);
-}
-function update_hue_from_mouse(x) {
-  if (!hue_rect) return;
-  const _x = clamp(x - hue_rect.left, 0, hue_rect.width);
-  hue_marker_pos = _x;
-  const _hue = _x / hue_rect.width * 360;
-  hue = _hue;
-  color = hsva_to_rgba({ h: _hue, s: sl[0], v: sl[1], a: 1 });
-}
-function hsva_to_rgba(hsva) {
-  const saturation = hsva.s;
-  const value = hsva.v;
-  let chroma = saturation * value;
-  const hue_by_60 = hsva.h / 60;
-  let x = chroma * (1 - Math.abs(hue_by_60 % 2 - 1));
-  const m = value - chroma;
-  chroma = chroma + m;
-  x = x + m;
-  const index = Math.floor(hue_by_60) % 6;
-  const red = [chroma, x, m, m, x, chroma][index];
-  const green = [x, chroma, chroma, x, m, m][index];
-  const blue = [m, m, x, chroma, chroma, x][index];
-  return `rgba(${red * 255}, ${green * 255}, ${blue * 255}, ${hsva.a})`;
-}
-function update_color_from_mouse(x, y) {
-  if (!sl_rect) return;
-  const _x = clamp(x - sl_rect.left, 0, sl_rect.width);
-  const _y = clamp(y - sl_rect.top, 0, sl_rect.height);
-  sl_marker_pos = [_x, _y];
-  const _hsva = {
-    h: hue * 1,
-    s: _x / sl_rect.width,
-    v: 1 - _y / sl_rect.height,
-    a: 1
-  };
-  sl = [_hsva.s, _hsva.v];
-  color = hsva_to_rgba(_hsva);
-}
-function handle_sl_down(event) {
-  sl_moving = true;
-  sl_rect = event.currentTarget.getBoundingClientRect();
-  update_color_from_mouse(event.clientX, event.clientY);
-}
-function handle_move(event) {
-  if (sl_moving) update_color_from_mouse(event.clientX, event.clientY);
-  if (hue_moving) update_hue_from_mouse(event.clientX);
-  if (opacity_moving) update_opacity_from_mouse(event.clientX);
-}
-function handle_end() {
-  if (sl_moving) sl_moving = false;
-  if (hue_moving) hue_moving = false;
-  if (opacity_moving) opacity_moving = false;
-}
-async function update_mouse_from_color(color2) {
-  if (sl_moving || hue_moving) return;
-  await tick();
-  if (!color2) return;
-  if (!sl_rect) {
-    sl_rect = sl_wrap.getBoundingClientRect();
-  }
-  if (!hue_rect) {
-    hue_rect = hue_wrap.getBoundingClientRect();
-  }
-  const hsva = tinycolor(color2).toHsv();
-  const _x = hsva.s * sl_rect.width;
-  const _y = (1 - hsva.v) * sl_rect.height;
-  sl_marker_pos = [_x, _y];
-  sl = [hsva.s, hsva.v];
-  hue = hsva.h;
-  hue_marker_pos = hsva.h / 360 * hue_rect.width;
-}
-$: update_mouse_from_color(color);
-let sl_wrap;
-let hue_wrap;
-export let opacity = 1;
-let opacity_wrap;
-function handle_opacity_down(event) {
-  opacity_rect = event.currentTarget.getBoundingClientRect();
-  opacity_moving = true;
-  update_opacity_from_mouse(event.clientX);
-}
-let opacity_rect = null;
-function update_opacity_from_mouse(x) {
-  if (!opacity_rect) return;
-  const _x = clamp(x - opacity_rect.left, 0, opacity_rect.width);
-  opacity = _x / opacity_rect.width;
-}
-onMount(() => {
-  opacity_rect = opacity_wrap.getBoundingClientRect();
-});
+<script lang="ts">
+	import { onMount, tick } from "svelte";
+	import tinycolor from "tinycolor2";
+	import { clamp } from "../utils/pixi";
+
+	export let color = "rgb(255, 255, 255)";
+
+	let sl_marker_pos = [0, 0];
+	let sl_rect: DOMRect | null = null;
+	let sl_moving = false;
+	let sl = [0, 0];
+
+	let hue = 0;
+	let hue_marker_pos = 0;
+	let hue_rect: DOMRect | null = null;
+	let hue_moving = false;
+
+	let opacity_moving = false;
+
+	function handle_hue_down(
+		event: MouseEvent & { currentTarget: HTMLDivElement }
+	): void {
+		hue_rect = event.currentTarget.getBoundingClientRect();
+
+		hue_moving = true;
+		update_hue_from_mouse(event.clientX);
+	}
+
+	function update_hue_from_mouse(x: number): void {
+		if (!hue_rect) return;
+		const _x = clamp(x - hue_rect.left, 0, hue_rect.width); // get the x-coordinate relative to the box
+		hue_marker_pos = _x;
+		const _hue = (_x / hue_rect.width) * 360; // scale the x position to a hue value (0-360)
+
+		hue = _hue;
+
+		color = hsva_to_rgba({ h: _hue, s: sl[0], v: sl[1], a: 1 });
+	}
+
+	function hsva_to_rgba(hsva: {
+		h: number;
+		s: number;
+		v: number;
+		a: number;
+	}): string {
+		const saturation = hsva.s;
+		const value = hsva.v;
+		let chroma = saturation * value;
+		const hue_by_60 = hsva.h / 60;
+		let x = chroma * (1 - Math.abs((hue_by_60 % 2) - 1));
+		const m = value - chroma;
+
+		chroma = chroma + m;
+		x = x + m;
+
+		const index = Math.floor(hue_by_60) % 6;
+		const red = [chroma, x, m, m, x, chroma][index];
+		const green = [x, chroma, chroma, x, m, m][index];
+		const blue = [m, m, x, chroma, chroma, x][index];
+
+		return `rgba(${red * 255}, ${green * 255}, ${blue * 255}, ${hsva.a})`;
+	}
+
+	function update_color_from_mouse(x: number, y: number): void {
+		if (!sl_rect) return;
+		const _x = clamp(x - sl_rect.left, 0, sl_rect.width);
+		const _y = clamp(y - sl_rect.top, 0, sl_rect.height);
+		sl_marker_pos = [_x, _y];
+		const _hsva = {
+			h: hue * 1,
+			s: _x / sl_rect.width,
+			v: 1 - _y / sl_rect.height,
+			a: 1
+		};
+
+		sl = [_hsva.s, _hsva.v];
+
+		color = hsva_to_rgba(_hsva);
+	}
+
+	function handle_sl_down(
+		event: MouseEvent & { currentTarget: HTMLDivElement }
+	): void {
+		sl_moving = true;
+		sl_rect = event.currentTarget.getBoundingClientRect();
+		update_color_from_mouse(event.clientX, event.clientY);
+	}
+
+	function handle_move(
+		event: MouseEvent & { currentTarget: EventTarget & Window }
+	): void {
+		if (sl_moving) update_color_from_mouse(event.clientX, event.clientY);
+		if (hue_moving) update_hue_from_mouse(event.clientX);
+		if (opacity_moving) update_opacity_from_mouse(event.clientX);
+	}
+
+	function handle_end(): void {
+		if (sl_moving) sl_moving = false;
+		if (hue_moving) hue_moving = false;
+		if (opacity_moving) opacity_moving = false;
+	}
+
+	async function update_mouse_from_color(color: string): Promise<void> {
+		if (sl_moving || hue_moving) return;
+		await tick();
+		if (!color) return;
+		if (!sl_rect) {
+			sl_rect = sl_wrap.getBoundingClientRect();
+		}
+
+		if (!hue_rect) {
+			hue_rect = hue_wrap.getBoundingClientRect();
+		}
+
+		const hsva = tinycolor(color).toHsv();
+		const _x = hsva.s * sl_rect!.width;
+		const _y = (1 - hsva.v) * sl_rect!.height;
+		sl_marker_pos = [_x, _y];
+		sl = [hsva.s, hsva.v];
+		hue = hsva.h;
+		hue_marker_pos = (hsva.h / 360) * hue_rect!.width;
+	}
+
+	$: update_mouse_from_color(color);
+
+	let sl_wrap: HTMLDivElement;
+	let hue_wrap: HTMLDivElement;
+
+	export let opacity = 1;
+
+	let opacity_wrap: HTMLDivElement;
+
+	function handle_opacity_down(
+		event: MouseEvent & { currentTarget: HTMLDivElement }
+	): void {
+		opacity_rect = event.currentTarget.getBoundingClientRect();
+		opacity_moving = true;
+		update_opacity_from_mouse(event.clientX);
+	}
+	let opacity_rect: DOMRect | null = null;
+
+	function update_opacity_from_mouse(x: number): void {
+		if (!opacity_rect) return;
+		const _x = clamp(x - opacity_rect.left, 0, opacity_rect.width);
+		opacity = _x / opacity_rect.width;
+	}
+
+	onMount(() => {
+		opacity_rect = opacity_wrap.getBoundingClientRect();
+	});
 </script>
 
 <svelte:window on:mousemove={handle_move} on:mouseup={handle_end} />
@@ -204,7 +247,8 @@ onMount(() => {
 		position: relative;
 		--hue: white;
 
-		background: linear-gradient(rgba(0, 0, 0, 0), #000),
+		background:
+			linear-gradient(rgba(0, 0, 0, 0), #000),
 			linear-gradient(90deg, #fff, hsl(var(--hue), 100%, 50%));
 		width: 100%;
 		height: 150px;

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

@@ -1,19 +1,21 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        color?: string;
-        opacity?: 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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ColorPickerProps = typeof __propDef.props;
-export type ColorPickerEvents = typeof __propDef.events;
-export type ColorPickerSlots = typeof __propDef.slots;
-export default class ColorPicker extends SvelteComponent<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<{
+    color?: string;
+    opacity?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ColorPicker = InstanceType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/shared/brush/ColorSwatch.svelte

@@ -1,49 +1,81 @@
-<script>import tinycolor from "tinycolor2";
-import { createEventDispatcher } from "svelte";
-import IconButton from "../IconButton.svelte";
-import { Plus } from "@gradio/icons";
-export let selected_color;
-export let colors;
-export let user_colors = [];
-export let show_empty = false;
-export let current_mode = "hex";
-export let color_picker = false;
-const dispatch = createEventDispatcher();
-$: _colors = show_empty ? colors : colors.filter((c) => c);
-function get_color(color_input) {
-  if (Array.isArray(color_input)) {
-    return color_input[0];
-  }
-  return color_input;
-}
-function get_opacity(color_input) {
-  if (Array.isArray(color_input)) {
-    return color_input[1];
-  }
-  const color = tinycolor(color_input);
-  return color.getAlpha();
-}
-function get_formatted_color(color, mode) {
-  const color_value = get_color(color);
-  if (mode === "hex") {
-    return tinycolor(color_value).toHexString();
-  } else if (mode === "rgb") {
-    return tinycolor(color_value).toRgbString();
-  }
-  return tinycolor(color_value).toHslString();
-}
-let current_index = `select-${colors.findIndex(
-  (c) => get_formatted_color(c, current_mode) === get_formatted_color(selected_color, current_mode)
-)}`;
-$: selected_opacity = get_opacity(selected_color);
-function handle_select(type, detail) {
-  current_index = `${type}-${detail.index}`;
-  dispatch(type, detail);
-}
-function handle_picker_click() {
-  dispatch("select", { index: null, color: selected_color });
-  color_picker = !color_picker;
-}
+<script lang="ts">
+	import tinycolor from "tinycolor2";
+	import { createEventDispatcher } from "svelte";
+	import type { ColorTuple } from "./types";
+	import type { ColorInput } from "tinycolor2";
+	import IconButton from "../IconButton.svelte";
+	import { Plus } from "@gradio/icons";
+
+	export let selected_color: string;
+	export let colors: (ColorInput | ColorTuple)[];
+	export let user_colors: (ColorInput | ColorTuple)[] | null = [];
+
+	export let show_empty = false;
+	export let current_mode: "hex" | "rgb" | "hsl" = "hex";
+	export let color_picker = false;
+	const dispatch = createEventDispatcher<{
+		select: { index: number | null; color: string | null; opacity?: number };
+		edit: { index: number; color: string | null };
+		add_color: void;
+	}>();
+
+	$: _colors = show_empty ? colors : colors.filter((c) => c);
+
+	function get_color(color_input: ColorInput | ColorTuple): string {
+		if (Array.isArray(color_input)) {
+			return color_input[0] as string;
+		}
+		return color_input as string;
+	}
+
+	function get_opacity(
+		color_input: ColorInput | ColorTuple
+	): number | undefined {
+		if (Array.isArray(color_input)) {
+			return color_input[1];
+		}
+
+		const color = tinycolor(color_input);
+		return color.getAlpha();
+	}
+
+	function get_formatted_color(
+		color: ColorInput | ColorTuple,
+		mode: "hex" | "rgb" | "hsl"
+	): string {
+		const color_value = get_color(color);
+		if (mode === "hex") {
+			return tinycolor(color_value).toHexString();
+		} else if (mode === "rgb") {
+			return tinycolor(color_value).toRgbString();
+		}
+		return tinycolor(color_value).toHslString();
+	}
+
+	let current_index = `select-${colors.findIndex(
+		(c) =>
+			get_formatted_color(c, current_mode) ===
+			get_formatted_color(selected_color, current_mode)
+	)}`;
+
+	$: selected_opacity = get_opacity(selected_color);
+
+	function handle_select(
+		type: "edit" | "select",
+		detail: {
+			index: number;
+			color: string | null;
+			opacity?: number;
+		}
+	): void {
+		current_index = `${type}-${detail.index}`;
+		dispatch(type, detail);
+	}
+
+	function handle_picker_click(): void {
+		dispatch("select", { index: null, color: selected_color });
+		color_picker = !color_picker;
+	}
 </script>
 
 {#if !color_picker}

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

@@ -1,36 +1,38 @@
-import { SvelteComponent } from "svelte";
 import type { ColorTuple } from "./types";
 import type { ColorInput } from "tinycolor2";
-declare const __propDef: {
-    props: {
-        selected_color: string;
-        colors: (ColorInput | ColorTuple)[];
-        user_colors?: (ColorInput | ColorTuple)[] | null;
-        show_empty?: boolean;
-        current_mode?: "hex" | "rgb" | "hsl";
-        color_picker?: 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: {
-        select: CustomEvent<{
-            index: number | null;
-            color: string | null;
-            opacity?: number;
-        }>;
-        edit: CustomEvent<{
-            index: number;
-            color: string | null;
-        }>;
-        add_color: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ColorSwatchProps = typeof __propDef.props;
-export type ColorSwatchEvents = typeof __propDef.events;
-export type ColorSwatchSlots = typeof __propDef.slots;
-export default class ColorSwatch extends SvelteComponent<ColorSwatchProps, ColorSwatchEvents, ColorSwatchSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ColorSwatch: $$__sveltets_2_IsomorphicComponent<{
+    selected_color: string;
+    colors: (ColorInput | ColorTuple)[];
+    user_colors?: (ColorInput | ColorTuple)[] | null;
+    show_empty?: boolean;
+    current_mode?: "hex" | "rgb" | "hsl";
+    color_picker?: boolean;
+}, {
+    select: CustomEvent<{
+        index: number | null;
+        color: string | null;
+        opacity?: number;
+    }>;
+    edit: CustomEvent<{
+        index: number;
+        color: string | null;
+    }>;
+    add_color: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ColorSwatch = InstanceType<typeof ColorSwatch>;
+export default ColorSwatch;

package/dist/types.d.ts

@@ -0,0 +1,40 @@
+import type { SelectData, ShareData } from "@gradio/utils";
+import type { LoadingStatus } from "@gradio/statustracker";
+import type { CommandNode } from "./shared/core/commands";
+import type { LayerOptions, Source, Transform, WebcamOptions } from "./shared/types";
+import type { Brush, Eraser } from "./shared/brush/types";
+import type { EditorData } from "./InteractiveImageEditor.svelte";
+export interface ImageEditorEvents {
+    change: never;
+    error: string;
+    input: never;
+    edit: never;
+    drag: never;
+    apply: never;
+    upload: never;
+    clear: never;
+    select: SelectData;
+    share: ShareData;
+    clear_status: LoadingStatus;
+}
+export interface ImageEditorProps {
+    border_region?: number;
+    webcam_options?: WebcamOptions;
+    value?: EditorData | null;
+    buttons?: string[] | null;
+    height?: number;
+    width?: number;
+    _selectable?: boolean;
+    sources?: Source[];
+    placeholder?: string | undefined;
+    brush?: Brush;
+    eraser?: Eraser;
+    transforms?: Transform[];
+    layers?: LayerOptions;
+    server?: {
+        accept_blobs: (a: any) => void;
+    };
+    canvas_size?: [number, number];
+    fixed_canvas?: boolean;
+    full_history?: CommandNode | null;
+}

package/dist/types.js

@@ -0,0 +1,25 @@
+export {};
+// export let border_region = 0;
+// 	export let webcam_options: WebcamOptions;
+// 	export let value: EditorData | null = {
+// 		background: null,
+// 		layers: [],
+// 		composite: null,
+// 	};
+// 	export let buttons: string[] | null = null;
+// 	export let height = 350;
+// 	export let width: number | undefined;
+// 	export let _selectable = false;
+// 	export let sources: Source[] = [];
+// 	export let placeholder: string | undefined;
+// 	export let brush: Brush;
+// 	export let eraser: Eraser;
+// 	export let transforms: Transform[] = [];
+// 	export let layers: LayerOptions;
+// 	export let attached_events: string[] = [];
+// 	export let server: {
+// 		accept_blobs: (a: any) => void;
+// 	};
+// 	export let canvas_size: [number, number];
+// 	export let fixed_canvas = false;
+// 	export let full_history: CommandNode | null = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.18.2-dev.0",
+  "version": "0.18.2-dev.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,19 +8,19 @@
   "private": false,
   "dependencies": {
     "@types/tinycolor2": "^1.4.6",
-    "pixi-filters": "^6.1.0",
-    "pixi.js": "^8.7.3",
+    "pixi-filters": "^6.1.4",
+    "pixi.js": "^8.14.0",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.18.1",
-    "@gradio/client": "^2.0.0-dev.0",
-    "@gradio/icons": "^0.14.0",
-    "@gradio/upload": "^0.17.2-dev.0",
-    "@gradio/image": "^0.23.2-dev.0",
-    "@gradio/statustracker": "^0.11.1",
-    "@gradio/utils": "^0.10.2"
+    "@gradio/atoms": "^0.19.0-dev.1",
+    "@gradio/icons": "^0.15.0-dev.0",
+    "@gradio/client": "^2.0.0-dev.2",
+    "@gradio/image": "^0.24.0-dev.2",
+    "@gradio/statustracker": "^0.12.0-dev.1",
+    "@gradio/upload": "^0.17.2-dev.2",
+    "@gradio/utils": "^0.10.3-dev.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.14.0"
+    "@gradio/preview": "^0.15.0-dev.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
@@ -38,7 +38,7 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.43.4"
   },
   "repository": {
     "type": "git",

package/shared/ImageEditor.svelte

@@ -199,7 +199,6 @@
 		) {
 			try {
 				await pending_bg;
-
 				await editor.add_layers_from_url(source.map((item) => item.url));
 				dispatch("change");
 				dispatch("input");
@@ -380,6 +379,7 @@
 
 		editor.on("change", () => {
 			dispatch("change");
+			dispatch("input");
 			full_history = editor.command_manager.history;
 		});
 
@@ -436,8 +436,6 @@
 		zoom.set_zoom("fit");
 		handle_tool_change({ tool: "draw" });
 		dispatch("upload");
-		dispatch("input");
-		dispatch("change");
 	}
 
 	$: background_image = can_undo && editor.command_manager.contains("AddImage");

package/shared/brush/BrushOptions.svelte

@@ -92,7 +92,7 @@
 
 	const debounced_close_preview = debounce(handle_close_preview, 1000);
 
-	$: selected_size, selected_color, handle_preview();
+	$: (selected_size, selected_color, handle_preview());
 
 	function handle_select(color: string): void {
 		selected_color = color;