@gradio/imageeditor 0.12.13 → 0.13.0

package/dist/shared/tools/Handle.svelte

@@ -1,260 +0,0 @@
-<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

@@ -1,29 +0,0 @@
-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

@@ -1,257 +0,0 @@
-<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 { default as IconButton } from "./IconButton.svelte";
-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;
-export let canvas_size;
-export let fixed_canvas = false;
-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,
-      canvas_size,
-      fixed_canvas
-    );
-    $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="{Math.max(
-			$editor_box.child_height +
-				($editor_box.child_top - $editor_box.parent_top),
-			100
-		)}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

@@ -1,34 +0,0 @@
-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;
-        canvas_size: [number, number];
-        fixed_canvas?: boolean | undefined;
-        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

@@ -1,102 +0,0 @@
-<script context="module">export const TOOL_KEY = Symbol("tool");
-</script>
-
-<script>import { Toolbar } from "@gradio/atoms";
-import { default as IconButton } from "./IconButton.svelte";
-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>