@gradio/imageeditor 0.9.0 → 0.10.1

package/dist/shared/tools/Handle.svelte

@@ -0,0 +1,260 @@
+<script>import { tick, createEventDispatcher } from "svelte";
+export let type = "corner";
+export let location;
+export let x1 = 0;
+export let y1 = 0;
+export let x2 = 0;
+export let y2 = 0;
+let box;
+let y_offset = 0;
+let x_offset = 0;
+const min = 100;
+let active = false;
+const dispatch = createEventDispatcher();
+export let dragging = false;
+let el;
+function handle_mousedown(e) {
+  box = el.getBoundingClientRect();
+  active = true;
+  dragging = true;
+  if (["tl", "bl", "l"].includes(location))
+    x_offset = e.clientX - box.right;
+  if (["tl", "tr", "t"].includes(location))
+    y_offset = e.clientY - box.bottom;
+  if (["tr", "r", "br"].includes(location))
+    x_offset = e.clientX - box.left;
+  if (["br", "b", "bl"].includes(location))
+    y_offset = e.clientY - box.top;
+}
+function handle_mousemove(e) {
+  if (!active)
+    return;
+  const top_pos = e.clientY - y_offset;
+  const bottom_pos = e.clientY - y_offset;
+  const left_pos = e.clientX - x_offset;
+  const right_pos = e.clientX - x_offset;
+  if (["tl", "bl", "l"].includes(location)) {
+    x1 = left_pos;
+  }
+  if (["tl", "tr", "t"].includes(location)) {
+    y1 = top_pos;
+  }
+  if (["tr", "r", "br"].includes(location)) {
+    x2 = right_pos;
+  }
+  if (["br", "b", "bl"].includes(location)) {
+    y2 = bottom_pos;
+  }
+}
+async function handle_mouseup(e) {
+  await tick();
+  active = false;
+  dragging = false;
+}
+function make_transform(_location, x12, x22, y12, y22) {
+  let t = void 0;
+  let l = void 0;
+  let r = void 0;
+  let b = void 0;
+  if (box) {
+    if (["tl", "l", "bl"].includes(_location)) {
+      l = x12;
+    }
+    if (["tl", "t", "tr"].includes(_location)) {
+      t = y12;
+    }
+    if (["tr", "r", "br"].includes(_location)) {
+      r = x22;
+    }
+    if (["br", "b", "bl"].includes(_location)) {
+      b = y22;
+    }
+  }
+  dispatch("change", { top: t, bottom: b, left: l, right: r });
+  return "";
+}
+$:
+  transform = make_transform(location, x1, x2, y1, y2);
+</script>
+
+<svelte:window on:mousemove={handle_mousemove} on:mouseup={handle_mouseup} />
+
+<!--	svelte-ignore a11y-no-static-element-interactions -->
+<div class="hitbox {location}" on:mousedown={handle_mousedown} style:transform>
+	<div class="handle {type} {location}" bind:this={el}></div>
+</div>
+
+<style>
+	.hitbox {
+		position: absolute;
+		width: 50px;
+		height: 50px;
+		--hitbox-mid-offset: calc(50% - 25px);
+		--hitbox-corner-offset: -25px;
+		--handle-corner-offset: calc(50% - 5px);
+		--handle-mid-offset: calc(50% - 2px);
+		z-index: var(--layer-top);
+	}
+
+	/* hitbox positions  */
+	.hitbox.tl,
+	.hitbox.bl,
+	.hitbox.l {
+		left: var(--hitbox-corner-offset);
+	}
+
+	.hitbox.tr,
+	.hitbox.br,
+	.hitbox.r {
+		right: var(--hitbox-corner-offset);
+	}
+
+	.hitbox.t,
+	.hitbox.tr,
+	.hitbox.tl {
+		top: var(--hitbox-corner-offset);
+	}
+
+	.hitbox.t,
+	.hitbox.b {
+		left: var(--hitbox-mid-offset);
+	}
+
+	.hitbox.l,
+	.hitbox.r {
+		top: var(--hitbox-mid-offset);
+	}
+
+	.hitbox.b,
+	.hitbox.br,
+	.hitbox.bl {
+		bottom: var(--hitbox-corner-offset);
+	}
+
+	/* hitbox cursors */
+
+	.hitbox.tl,
+	.hitbox.br {
+		cursor: nwse-resize;
+	}
+
+	.hitbox.bl,
+	.hitbox.tr {
+		cursor: nesw-resize;
+	}
+
+	.hitbox.l,
+	.hitbox.r {
+		cursor: ew-resize;
+	}
+
+	.hitbox.t,
+	.hitbox.b {
+		cursor: ns-resize;
+	}
+
+	/* Visual handles  */
+	.handle {
+		position: absolute;
+	}
+
+	/* square to fill in corners */
+	.corner {
+		width: 4px;
+		height: 4px;
+		background: black;
+	}
+
+	/* handle segment positions  */
+	.handle.tl,
+	.handle.bl,
+	.handle.l {
+		left: var(--handle-corner-offset);
+	}
+
+	.handle.tr,
+	.handle.r,
+	.handle.br {
+		right: var(--handle-corner-offset);
+	}
+
+	.handle.tr,
+	.handle.t,
+	.handle.tl {
+		top: var(--handle-corner-offset);
+	}
+
+	.handle.br,
+	.handle.b,
+	.handle.bl {
+		bottom: var(--handle-corner-offset);
+	}
+
+	.handle.l,
+	.handle.r {
+		bottom: var(--handle-mid-offset);
+	}
+
+	.handle.t,
+	.handle.b {
+		left: var(--handle-mid-offset);
+	}
+
+	.handle::before {
+		position: absolute;
+		content: "";
+		width: 20px;
+		height: 4px;
+		background: black;
+	}
+
+	.handle::after {
+		position: absolute;
+		content: "";
+		width: 4px;
+		height: 20px;
+		background: black;
+	}
+
+	.handle.t::before,
+	.handle.b::before {
+		width: 30px;
+		left: -14px;
+	}
+
+	.handle.r::after,
+	.handle.l::after {
+		height: 30px;
+		top: -13px;
+	}
+
+	.handle.l::before,
+	.handle.r::before {
+		content: none;
+	}
+
+	.handle.t::after,
+	.handle.b::after {
+		content: none;
+	}
+
+	.handle.tr::before,
+	.handle.br::before {
+		right: 4px;
+	}
+
+	.handle.tl::before,
+	.handle.bl::before {
+		left: 4px;
+	}
+
+	.handle.tl::after,
+	.handle.tr::after {
+		top: 4px;
+	}
+
+	.handle.bl::after,
+	.handle.br::after {
+		bottom: 4px;
+	}
+</style>

package/dist/shared/tools/Handle.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: string | undefined;
+        location: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+        x1?: number | undefined;
+        y1?: number | undefined;
+        x2?: number | undefined;
+        y2?: number | undefined;
+        dragging?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<{
+            top: number | undefined;
+            bottom: number | undefined;
+            left: number | undefined;
+            right: number | undefined;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HandleProps = typeof __propDef.props;
+export type HandleEvents = typeof __propDef.events;
+export type HandleSlots = typeof __propDef.slots;
+export default class Handle extends SvelteComponent<HandleProps, HandleEvents, HandleSlots> {
+}
+export {};

package/dist/shared/tools/Sources.svelte

@@ -0,0 +1,250 @@
+<script>import { getContext, onMount, tick, createEventDispatcher } from "svelte";
+import { TOOL_KEY } from "./Tools.svelte";
+import { EDITOR_KEY } from "../ImageEditor.svelte";
+import {
+  Image as ImageIcon,
+  Webcam as WebcamIcon,
+  ImagePaste
+} from "@gradio/icons";
+import { Upload } from "@gradio/upload";
+import { Webcam } from "@gradio/image";
+import {} from "@gradio/utils";
+import { IconButton } from "@gradio/atoms";
+import {} from "@gradio/client";
+import { add_bg_color, add_bg_image } from "./sources";
+export let background_file;
+export let root;
+export let sources = [
+  "upload",
+  "webcam",
+  "clipboard"
+];
+export let mirror_webcam = true;
+export let i18n;
+export let upload;
+export let stream_handler;
+export let dragging;
+const { active_tool } = getContext(TOOL_KEY);
+const { pixi, dimensions, register_context, reset, editor_box } = getContext(EDITOR_KEY);
+export let active_mode = null;
+let background;
+const dispatch = createEventDispatcher();
+const sources_meta = {
+  upload: {
+    icon: ImageIcon,
+    label: "Upload",
+    order: 0,
+    id: "bg_upload",
+    cb() {
+      upload_component.open_file_upload();
+      $active_tool = "bg";
+    }
+  },
+  webcam: {
+    icon: WebcamIcon,
+    label: "Webcam",
+    order: 1,
+    id: "bg_webcam",
+    cb() {
+      active_mode = "webcam";
+      $active_tool = "bg";
+    }
+  },
+  clipboard: {
+    icon: ImagePaste,
+    label: "Paste",
+    order: 2,
+    id: "bg_clipboard",
+    cb() {
+      process_clipboard();
+      $active_tool = null;
+    }
+  }
+};
+$:
+  sources_list = sources.map((src) => sources_meta[src]).sort((a, b) => a.order - b.order);
+let upload_component;
+async function process_clipboard() {
+  const items = await navigator.clipboard.read();
+  for (let i = 0; i < items.length; i++) {
+    const type = items[i].types.find((t) => t.startsWith("image/"));
+    if (type) {
+      const blob = await items[i].getType(type);
+      background = blob || null;
+    }
+  }
+}
+function handle_upload(e) {
+  const file_data = e.detail;
+  background = file_data;
+  active_mode = null;
+}
+let should_reset = true;
+async function set_background() {
+  if (!$pixi)
+    return;
+  if (background) {
+    const add_image = add_bg_image(
+      $pixi.background_container,
+      $pixi.renderer,
+      background,
+      $pixi.resize
+    );
+    $dimensions = await add_image.start();
+    if (should_reset) {
+      reset(false, $dimensions);
+    }
+    add_image.execute();
+    should_reset = true;
+    await tick();
+    bg = true;
+  }
+}
+async function process_bg_file(file) {
+  if (!file || !file.url)
+    return;
+  should_reset = false;
+  const blob_res = await fetch(file.url);
+  const blob = await blob_res.blob();
+  background = blob;
+}
+function handle_key(e) {
+  if (e.key === "Escape") {
+    active_mode = null;
+  }
+}
+$:
+  background && set_background();
+$:
+  process_bg_file(background_file);
+export let bg = false;
+register_context("bg", {
+  init_fn: () => {
+    if (!$pixi)
+      return;
+    const add_image = add_bg_color(
+      $pixi.background_container,
+      $pixi.renderer,
+      "black",
+      ...$dimensions,
+      $pixi.resize
+    );
+    $dimensions = add_image.start();
+    add_image.execute();
+  },
+  reset_fn: () => {
+  }
+});
+</script>
+
+<svelte:window on:keydown={handle_key} />
+
+{#if sources.length}
+	<div class="source-wrap">
+		{#each sources_list as { icon, label, id, cb } (id)}
+			<IconButton
+				Icon={icon}
+				size="medium"
+				padded={false}
+				label={label + " button"}
+				hasPopup={true}
+				transparent={true}
+				on:click={cb}
+			/>
+		{/each}
+		<span class="sep"></span>
+	</div>
+	<div
+		class="upload-container"
+		class:click-disabled={!!bg ||
+			active_mode === "webcam" ||
+			$active_tool !== "bg"}
+		style:height="{$editor_box.child_height +
+			($editor_box.child_top - $editor_box.parent_top)}px"
+	>
+		<Upload
+			hidden={bg || active_mode === "webcam" || $active_tool !== "bg"}
+			bind:this={upload_component}
+			filetype="image/*"
+			on:load={handle_upload}
+			on:error
+			bind:dragging
+			{root}
+			disable_click={!sources.includes("upload")}
+			format="blob"
+			{upload}
+			{stream_handler}
+		></Upload>
+		{#if active_mode === "webcam"}
+			<div
+				class="modal"
+				style:max-width="{$editor_box.child_width}px"
+				style:max-height="{$editor_box.child_height}px"
+				style:top="{$editor_box.child_top - $editor_box.parent_top}px"
+			>
+				<div class="modal-inner">
+					<Webcam
+						{upload}
+						{root}
+						on:capture={handle_upload}
+						on:error
+						on:drag
+						{mirror_webcam}
+						streaming={false}
+						mode="image"
+						include_audio={false}
+						{i18n}
+					/>
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.modal {
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		left: 0;
+		right: 0;
+		margin: auto;
+		z-index: var(--layer-top);
+		display: flex;
+		align-items: center;
+	}
+
+	.modal-inner {
+		width: 100%;
+	}
+
+	.sep {
+		height: 12px;
+		background-color: var(--block-border-color);
+		width: 1px;
+		display: block;
+		margin-left: var(--spacing-xl);
+	}
+
+	.source-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-left: var(--spacing-lg);
+		height: 100%;
+	}
+
+	.upload-container {
+		position: absolute;
+		height: 100%;
+		flex-shrink: 1;
+		max-height: 100%;
+		width: 100%;
+		left: 0;
+		top: 0;
+	}
+
+	.upload-container.click-disabled {
+		pointer-events: none;
+	}
+</style>

package/dist/shared/tools/Sources.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+import { type I18nFormatter } from "@gradio/utils";
+import { type Client } from "@gradio/client";
+import type { FileData } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        background_file: FileData | null;
+        root: string;
+        sources?: ("upload" | "webcam" | "clipboard")[] | undefined;
+        mirror_webcam?: boolean | undefined;
+        i18n: I18nFormatter;
+        upload: Client["upload"];
+        stream_handler: Client["stream"];
+        dragging: boolean;
+        active_mode?: ("webcam" | "color" | null) | undefined;
+        bg?: boolean | undefined;
+    };
+    events: {
+        error: CustomEvent<any> | CustomEvent<string>;
+        drag: CustomEvent<any>;
+        upload: CustomEvent<never>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SourcesProps = typeof __propDef.props;
+export type SourcesEvents = typeof __propDef.events;
+export type SourcesSlots = typeof __propDef.slots;
+export default class Sources extends SvelteComponent<SourcesProps, SourcesEvents, SourcesSlots> {
+}
+export {};

package/dist/shared/tools/Tools.svelte

@@ -0,0 +1,101 @@
+<script context="module">export const TOOL_KEY = Symbol("tool");
+</script>
+
+<script>import { Toolbar, IconButton } from "@gradio/atoms";
+import { getContext, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { EDITOR_KEY } from "../ImageEditor.svelte";
+import { Image, Crop, Brush, Erase } from "@gradio/icons";
+import {} from "@gradio/utils";
+const { active_tool, toolbar_box, editor_box } = getContext(EDITOR_KEY);
+export let i18n;
+let tools = [];
+const cbs = {};
+let current_color = writable("#000000");
+const tool_context = {
+  current_color,
+  register_tool: (type, opts) => {
+    tools = [...tools, type];
+    if (opts?.cb) {
+      cbs[type] = opts.cb;
+    }
+    return () => {
+      tools = tools.filter((tool) => tool !== type);
+    };
+  },
+  active_tool: {
+    subscribe: active_tool.subscribe,
+    set: active_tool.set
+  }
+};
+setContext(TOOL_KEY, tool_context);
+const tools_meta = {
+  crop: {
+    order: 1,
+    label: i18n("Transform"),
+    icon: Crop
+  },
+  draw: {
+    order: 2,
+    label: i18n("Draw"),
+    icon: Brush
+  },
+  erase: {
+    order: 2,
+    label: i18n("Erase"),
+    icon: Erase
+  },
+  bg: {
+    order: 0,
+    label: i18n("Background"),
+    icon: Image
+  }
+};
+let toolbar_width;
+let toolbar_wrap;
+$:
+  toolbar_width, $editor_box, get_dimensions();
+function get_dimensions() {
+  if (!toolbar_wrap)
+    return;
+  $toolbar_box = toolbar_wrap.getBoundingClientRect();
+}
+function handle_click(e, tool) {
+  e.stopPropagation();
+  $active_tool = tool;
+  cbs[tool] && cbs[tool]();
+}
+</script>
+
+<slot />
+
+<div
+	class="toolbar-wrap"
+	bind:clientWidth={toolbar_width}
+	bind:this={toolbar_wrap}
+>
+	<Toolbar show_border={false}>
+		{#each tools as tool (tool)}
+			<IconButton
+				highlight={$active_tool === tool}
+				on:click={(e) => handle_click(e, tool)}
+				Icon={tools_meta[tool].icon}
+				size="medium"
+				padded={false}
+				label={tools_meta[tool].label + " button"}
+				transparent={true}
+				offset={tool === "draw" ? -2 : tool === "erase" ? -6 : 0}
+			/>
+		{/each}
+	</Toolbar>
+</div>
+
+<style>
+	.toolbar-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-left: var(--spacing-xl);
+		height: 100%;
+	}
+</style>

package/dist/shared/tools/Tools.svelte.d.ts

@@ -0,0 +1,48 @@
+import { SvelteComponent } from "svelte";
+import type { Subscriber, Invalidator, Unsubscriber, Writable } from "svelte/store";
+import type { tool } from "../tools/";
+export declare const TOOL_KEY: unique symbol;
+type upload_tool = "bg_webcam" | "bg_upload" | "bg_clipboard" | "bg_color";
+type transform_tool = "crop" | "rotate";
+type brush_tool = "brush_color" | "brush_size";
+type eraser_tool = "eraser_size";
+export interface ToolOptions {
+    order: number;
+    label: string;
+    icon: typeof Image;
+    cb: (...args: any[]) => void;
+    id: upload_tool | transform_tool | brush_tool | eraser_tool;
+}
+export interface ToolMeta {
+    default: upload_tool | transform_tool | brush_tool | eraser_tool | null;
+    options: ToolOptions[];
+}
+export interface ToolContext {
+    register_tool: (type: tool, opts?: {
+        cb: () => void;
+    }) => () => void;
+    active_tool: {
+        set: (tool: tool) => void;
+        subscribe(this: void, run: Subscriber<tool | null>, invalidate?: Invalidator<tool | null>): Unsubscriber;
+    };
+    current_color: Writable<string>;
+}
+import { Image } from "@gradio/icons";
+import { type I18nFormatter } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        i18n: I18nFormatter;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ToolsProps = typeof __propDef.props;
+export type ToolsEvents = typeof __propDef.events;
+export type ToolsSlots = typeof __propDef.slots;
+export default class Tools extends SvelteComponent<ToolsProps, ToolsEvents, ToolsSlots> {
+}
+export {};