@gradio/imageeditor 0.18.1 → 0.18.2-dev.2

package/dist/shared/Anchor.svelte

@@ -1,139 +1,213 @@
-<script>import { spring } from "svelte/motion";
-import { Image } from "@gradio/icons";
-import { onMount, createEventDispatcher } from "svelte";
-const positions = [
-  "top-left",
-  "top",
-  "top-right",
-  "left",
-  "center",
-  "right",
-  "bottom-left",
-  "bottom",
-  "bottom-right"
-];
-const dispatch = createEventDispatcher();
-const spring_opt = {
-  stiffness: 0.1,
-  precision: 0.5
-};
-const pos = spring([5, 5], spring_opt);
-const init = [(120 - 10) / 3, (120 - 10) / 3];
-const dimensions = spring(init, spring_opt);
-const arrow_spring = spring([], spring_opt);
-let last_i = 0;
-let expanded = true;
-const box_size = (120 - 5 * 2) / 3;
-async function handle_box_hover(i) {
-  expanded = false;
-  last_i = i;
-  const y = Math.floor(i / 3);
-  const x = i % 3;
-  pos.set([x * box_size + 5 * x + 5, y * box_size + 5 * y + 5]);
-  dimensions.set(init);
-}
-let last_pos = 0;
-async function handle_box_click(i, stagger = false) {
-  if (expanded && stagger) return;
-  const y = Math.floor(i / 3);
-  const x = i % 3;
-  const [initial_arrows, eventual_arrows] = get_valid_offsets({
-    x,
-    y
-  });
-  if (stagger && last_i !== i) {
-    await Promise.all([
-      pos.set([x * box_size + 5 * x + 5, y * box_size + 5 * y + 5]),
-      arrow_spring.set(initial_arrows, { hard: true }),
-      dimensions.set(init)
-    ]);
-  } else {
-    await arrow_spring.set(initial_arrows, { hard: true });
-  }
-  last_pos = i;
-  expanded = true;
-  pos.set([0, 0]);
-  dimensions.set([120 + 10, 120 + 10]);
-  arrow_spring.set(eventual_arrows);
-  dispatch("position", positions[i]);
-}
-function get_valid_offsets(anchorPoint) {
-  const destination_points = [
-    { x: 0, y: 0 },
-    { x: 1, y: 0 },
-    { x: 2, y: 0 },
-    { x: 0, y: 1 },
-    { x: 1, y: 1 },
-    { x: 2, y: 1 },
-    { x: 0, y: 2 },
-    { x: 1, y: 2 },
-    { x: 2, y: 2 }
-  ];
-  const offsets = destination_points.map((dest) => ({
-    x: dest.x - anchorPoint.x,
-    y: dest.y - anchorPoint.y,
-    dest
-  })).filter((offset) => !(offset.x === 0 && offset.y === 0));
-  const normalized_offsets = offsets.map((offset) => {
-    if (offset.x === 0 || offset.y === 0) {
-      const magnitude = Math.max(Math.abs(offset.x), Math.abs(offset.y));
-      return {
-        magnitude,
-        x: offset.x / magnitude,
-        y: offset.y / magnitude,
-        dest: offset.dest,
-        original: offset,
-        type: "cardinal"
-      };
-    }
-    if (Math.abs(offset.x) === Math.abs(offset.y)) {
-      const magnitude = Math.abs(offset.x);
-      return {
-        magnitude,
-        x: offset.x / magnitude,
-        y: offset.y / magnitude,
-        dest: offset.dest,
-        original: offset,
-        type: "ordinal"
-      };
-    }
-    return null;
-  }).filter((offset) => offset !== null);
-  const directions = /* @__PURE__ */ new Map();
-  normalized_offsets.forEach((offset) => {
-    if (directions.has(`${offset.x}-${offset.y}`)) {
-      directions.get(`${offset.x}-${offset.y}`)?.push(offset);
-    } else {
-      directions.set(`${offset.x}-${offset.y}`, [offset]);
-    }
-  });
-  const unique_directions = Array.from(directions.values()).map(
-    (direction) => {
-      return direction.sort((a, b) => b.magnitude - a.magnitude)[0];
-    }
-  );
-  const eventual_arrows = unique_directions.map((arrow) => ({
-    x: arrow.dest.x * box_size + 14 * arrow.dest.x + 14 + 10 + (arrow.type === "ordinal" ? 0 : 12 * arrow.x),
-    y: arrow.dest.y * box_size + 14 * arrow.dest.y + 14 + 10 + (arrow.type === "ordinal" ? 0 : 12 * arrow.y),
-    x_dir: arrow.x,
-    y_dir: arrow.y,
-    rotation: Math.atan2(arrow.original.y, arrow.original.x) * (180 / Math.PI) + 180,
-    type: arrow.type === "ordinal" ? 1 : 2
-  }));
-  const initial_arrows = eventual_arrows.map((arrow) => ({
-    ...arrow,
-    x: anchorPoint.x * box_size + 14 * anchorPoint.x + // gaps
-    14 + // padding
-    10 + // arrow head
-    arrow.x_dir * box_size / 2 + arrow.x_dir * (arrow.type === 1 ? 0 : 10),
-    // offset based on direction
-    y: anchorPoint.y * box_size + 14 * anchorPoint.y + 14 + 10 + arrow.y_dir * box_size / 2 + arrow.y_dir * (arrow.type === 1 ? 0 : 10)
-  }));
-  return [initial_arrows, eventual_arrows];
-}
-onMount(() => {
-  handle_box_click(0);
-});
+<script lang="ts">
+	import { spring } from "svelte/motion";
+	import { Image } from "@gradio/icons";
+	import { onMount, createEventDispatcher } from "svelte";
+
+	const positions = [
+		"top-left",
+		"top",
+		"top-right",
+		"left",
+		"center",
+		"right",
+		"bottom-left",
+		"bottom",
+		"bottom-right"
+	] as const;
+	const dispatch = createEventDispatcher<{
+		position: (typeof positions)[number];
+	}>();
+
+	const spring_opt = {
+		stiffness: 0.1,
+		precision: 0.5
+	};
+	const pos = spring([5, 5], spring_opt);
+	const init = [(120 - 10) / 3, (120 - 10) / 3];
+	const dimensions = spring(init, spring_opt);
+	type Arrow = {
+		x: number;
+		y: number;
+		x_dir: number;
+		y_dir: number;
+		rotation: number;
+		type: number;
+	};
+	const arrow_spring = spring<Arrow[]>([], spring_opt);
+
+	let last_i = 0;
+	let expanded = true;
+	const box_size = (120 - 5 * 2) / 3;
+
+	async function handle_box_hover(i: number): Promise<void> {
+		expanded = false;
+		last_i = i;
+		const y = Math.floor(i / 3);
+		const x = i % 3;
+		pos.set([x * box_size + 5 * x + 5, y * box_size + 5 * y + 5]);
+
+		dimensions.set(init);
+	}
+
+	let last_pos = 0;
+	async function handle_box_click(i: number, stagger = false): Promise<void> {
+		if (expanded && stagger) return;
+
+		const y = Math.floor(i / 3);
+		const x = i % 3;
+
+		const [initial_arrows, eventual_arrows] = get_valid_offsets({
+			x: x,
+			y: y
+		});
+
+		if (stagger && last_i !== i) {
+			await Promise.all([
+				pos.set([x * box_size + 5 * x + 5, y * box_size + 5 * y + 5]),
+				arrow_spring.set(initial_arrows, { hard: true }),
+				dimensions.set(init)
+			]);
+		} else {
+			await arrow_spring.set(initial_arrows, { hard: true });
+		}
+		last_pos = i;
+		expanded = true;
+
+		pos.set([0, 0]);
+		dimensions.set([120 + 10, 120 + 10]);
+		arrow_spring.set(eventual_arrows);
+
+		dispatch("position", positions[i]);
+	}
+
+	function get_valid_offsets(anchorPoint: {
+		x: number;
+		y: number;
+	}): [Arrow[], Arrow[]] {
+		const destination_points: { x: number; y: number }[] = [
+			{ x: 0, y: 0 },
+			{ x: 1, y: 0 },
+			{ x: 2, y: 0 },
+			{ x: 0, y: 1 },
+			{ x: 1, y: 1 },
+			{ x: 2, y: 1 },
+			{ x: 0, y: 2 },
+			{ x: 1, y: 2 },
+			{ x: 2, y: 2 }
+		];
+
+		const offsets = destination_points
+			.map((dest) => ({
+				x: dest.x - anchorPoint.x,
+				y: dest.y - anchorPoint.y,
+				dest
+			}))
+			.filter((offset) => !(offset.x === 0 && offset.y === 0));
+
+		const normalized_offsets = offsets
+			.map((offset) => {
+				// cardinal
+				if (offset.x === 0 || offset.y === 0) {
+					const magnitude = Math.max(Math.abs(offset.x), Math.abs(offset.y));
+					return {
+						magnitude,
+						x: offset.x / magnitude,
+						y: offset.y / magnitude,
+						dest: offset.dest,
+						original: offset,
+						type: "cardinal" as const
+					};
+				}
+
+				// ordinal
+				if (Math.abs(offset.x) === Math.abs(offset.y)) {
+					const magnitude = Math.abs(offset.x);
+					return {
+						magnitude,
+						x: offset.x / magnitude,
+						y: offset.y / magnitude,
+						dest: offset.dest,
+						original: offset,
+						type: "ordinal" as const
+					};
+				}
+
+				// skip the rest
+				return null;
+			})
+			.filter((offset) => offset !== null);
+
+		const directions = new Map<
+			string,
+			{
+				x: number;
+				y: number;
+				dest: { x: number; y: number };
+				original: { x: number; y: number };
+				magnitude: number;
+				type: "cardinal" | "ordinal";
+			}[]
+		>();
+
+		normalized_offsets.forEach((offset) => {
+			if (directions.has(`${offset.x}-${offset.y}`)) {
+				directions.get(`${offset.x}-${offset.y}`)?.push(offset);
+			} else {
+				directions.set(`${offset.x}-${offset.y}`, [offset]);
+			}
+		});
+
+		const unique_directions = Array.from(directions.values()).map(
+			(direction) => {
+				return direction.sort((a, b) => b.magnitude - a.magnitude)[0];
+			}
+		);
+
+		const eventual_arrows = unique_directions.map((arrow) => ({
+			x:
+				arrow.dest.x * box_size +
+				14 * arrow.dest.x +
+				14 +
+				10 +
+				(arrow.type === "ordinal" ? 0 : 12 * arrow.x),
+			y:
+				arrow.dest.y * box_size +
+				14 * arrow.dest.y +
+				14 +
+				10 +
+				(arrow.type === "ordinal" ? 0 : 12 * arrow.y),
+			x_dir: arrow.x,
+			y_dir: arrow.y,
+			rotation:
+				Math.atan2(arrow.original.y, arrow.original.x) * (180 / Math.PI) + 180,
+			type: arrow.type === "ordinal" ? 1 : 2
+		}));
+
+		const initial_arrows = eventual_arrows.map((arrow) => ({
+			...arrow,
+			x:
+				anchorPoint.x * box_size +
+				14 * anchorPoint.x + // gaps
+				14 + // padding
+				10 + // arrow head
+				(arrow.x_dir * box_size) / 2 +
+				arrow.x_dir * (arrow.type === 1 ? 0 : 10), // offset based on direction
+
+			y:
+				anchorPoint.y * box_size +
+				14 * anchorPoint.y +
+				14 +
+				10 +
+				(arrow.y_dir * box_size) / 2 +
+				arrow.y_dir * (arrow.type === 1 ? 0 : 10)
+		}));
+
+		return [initial_arrows, eventual_arrows];
+	}
+
+	onMount(() => {
+		handle_box_click(0);
+	});
 </script>
 
 <div class="wrap" class:expanded>

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

@@ -1,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        position: CustomEvent<"center" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom">;
-    } & {
-        [evt: string]: CustomEvent<any>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type AnchorProps = typeof __propDef.props;
-export type AnchorEvents = typeof __propDef.events;
-export type AnchorSlots = typeof __propDef.slots;
-export default class Anchor extends SvelteComponent<AnchorProps, AnchorEvents, AnchorSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Anchor: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    position: CustomEvent<"center" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top" | "bottom">;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Anchor = InstanceType<typeof Anchor>;
+export default Anchor;

package/dist/shared/Controls.svelte

@@ -1,39 +1,58 @@
-<script>import { createEventDispatcher } from "svelte";
-import { IconButton, IconButtonWrapper } from "@gradio/atoms";
-import {
-  Check,
-  Trash,
-  ZoomIn,
-  ZoomOut,
-  Pan,
-  Download,
-  Undo,
-  Redo
-} from "@gradio/icons";
-export let can_save = false;
-export let changeable = false;
-export let current_zoom = 1;
-export let tool;
-export let min_zoom = true;
-export let enable_download = false;
-export let can_undo;
-export let can_redo;
-const dispatch = createEventDispatcher();
-let show_zoom_popup = false;
-function handle_zoom_click(e) {
-  e.stopPropagation();
-  show_zoom_popup = !show_zoom_popup;
-}
-function handle_zoom_change(zoom) {
-  dispatch("set_zoom", zoom);
-  show_zoom_popup = false;
-}
-function handle_zoom_keydown(e) {
-  if (e.key === "Enter") {
-    handle_zoom_change(current_zoom);
-  }
-}
-$: formatted_zoom = Math.round(current_zoom * 100);
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
+	import {
+		Check,
+		Trash,
+		ZoomIn,
+		ZoomOut,
+		Pan,
+		Download,
+		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;
+
+	function handle_zoom_click(e: MouseEvent): void {
+		e.stopPropagation();
+		show_zoom_popup = !show_zoom_popup;
+	}
+
+	function handle_zoom_change(zoom: number | "fit"): void {
+		dispatch("set_zoom", zoom);
+		show_zoom_popup = false;
+	}
+
+	function handle_zoom_keydown(e: KeyboardEvent): void {
+		if (e.key === "Enter") {
+			handle_zoom_change(current_zoom);
+		}
+	}
+
+	$: formatted_zoom = Math.round(current_zoom * 100);
 </script>
 
 <IconButtonWrapper>

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

@@ -1,35 +1,37 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        can_save?: boolean;
-        changeable?: boolean;
-        current_zoom?: number;
-        tool: string;
-        min_zoom?: boolean;
-        enable_download?: boolean;
-        can_undo: boolean;
-        can_redo: 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: {
-        remove_image: CustomEvent<void>;
-        undo: CustomEvent<void>;
-        redo: CustomEvent<void>;
-        save: CustomEvent<void>;
-        zoom_in: CustomEvent<void>;
-        zoom_out: CustomEvent<void>;
-        set_zoom: CustomEvent<number | "fit">;
-        pan: CustomEvent<void>;
-        download: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ControlsProps = typeof __propDef.props;
-export type ControlsEvents = typeof __propDef.events;
-export type ControlsSlots = typeof __propDef.slots;
-export default class Controls extends SvelteComponent<ControlsProps, ControlsEvents, ControlsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Controls: $$__sveltets_2_IsomorphicComponent<{
+    can_save?: boolean;
+    changeable?: boolean;
+    current_zoom?: number;
+    tool: string;
+    min_zoom?: boolean;
+    enable_download?: boolean;
+    can_undo: boolean;
+    can_redo: boolean;
+}, {
+    remove_image: CustomEvent<void>;
+    undo: CustomEvent<void>;
+    redo: CustomEvent<void>;
+    save: CustomEvent<void>;
+    zoom_in: CustomEvent<void>;
+    zoom_out: CustomEvent<void>;
+    set_zoom: CustomEvent<number | "fit">;
+    pan: CustomEvent<void>;
+    download: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Controls = InstanceType<typeof Controls>;
+export default Controls;

package/dist/shared/IconButton.svelte

@@ -1,20 +1,22 @@
-<script>import {} from "svelte";
-export let Icon;
-export let label = "";
-export let show_label = false;
-export let pending = false;
-export let size = "small";
-export let padded = true;
-export let highlight = false;
-export let disabled = false;
-export let hasPopup = false;
-export let color = "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";
-export let roundedness = "quite";
-$: _color = highlight ? "var(--color-accent)" : color.toString();
+<script lang="ts">
+	import { type ComponentType } from "svelte";
+	import type { ColorInput } from "tinycolor2";
+	export let Icon: ComponentType;
+	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";
+	$: _color = highlight ? "var(--color-accent)" : color.toString();
 </script>
 
 <button