@gradio/imageeditor 0.10.0 → 0.10.1

package/dist/shared/ImageEditor.svelte

@@ -0,0 +1,329 @@
+<script context="module">import {} from "./utils/pixi";
+import {} from "./utils/commands";
+export const EDITOR_KEY = Symbol("editor");
+import {} from "./tools";
+</script>
+
+<script>import { onMount, setContext, createEventDispatcher, tick } from "svelte";
+import { writable } from "svelte/store";
+import { spring } from "svelte/motion";
+import { Rectangle } from "pixi.js";
+import { command_manager } from "./utils/commands";
+import {} from "./layers/utils";
+import { create_pixi_app } from "./utils/pixi";
+import Controls from "./Controls.svelte";
+export let antialias = true;
+export let crop_size;
+export let changeable = false;
+export let history;
+export let bg = false;
+export let sources;
+const dispatch = createEventDispatcher();
+export let crop_constraint = false;
+export let canvas_size;
+export let parent_height;
+$:
+  orig_canvas_size = canvas_size;
+const BASE_DIMENSIONS = canvas_size || [800, 600];
+let dimensions = writable(BASE_DIMENSIONS);
+export let height = 0;
+let editor_box = writable({
+  parent_width: 0,
+  parent_height,
+  parent_top: 0,
+  parent_left: 0,
+  parent_right: 0,
+  parent_bottom: 0,
+  child_width: 0,
+  child_height: parent_height,
+  child_top: 0,
+  child_left: 0,
+  child_right: 0,
+  child_bottom: 0
+});
+$:
+  height = $editor_box.child_height;
+const crop = writable([0, 0, 1, 1]);
+const position_spring = spring(
+  { x: 0, y: 0 },
+  {
+    stiffness: 0.1,
+    damping: 0.5
+  }
+);
+const pixi = writable(null);
+const CommandManager = command_manager();
+const { can_redo, can_undo, current_history } = CommandManager;
+$:
+  $current_history.previous, dispatch("change");
+$: {
+  history = !!$current_history.previous || $active_tool !== "bg";
+}
+const is_browser = typeof window !== "undefined";
+const active_tool = writable("bg");
+const reset_context = writable({});
+const init_context = writable({});
+const contexts = writable([]);
+const toolbar_box = writable(
+  is_browser ? new DOMRect() : {}
+);
+const sort_order = ["bg", "layers", "crop", "draw", "erase"];
+const editor_context = setContext(EDITOR_KEY, {
+  pixi,
+  current_layer: writable(null),
+  dimensions,
+  editor_box,
+  toolbar_box,
+  active_tool,
+  crop,
+  position_spring,
+  command_manager: CommandManager,
+  current_history,
+  register_context: (type, {
+    reset_fn,
+    init_fn
+  }) => {
+    contexts.update((c) => [...c, type]);
+    init_context.update((c) => ({ ...c, [type]: init_fn }));
+    reset_context.update((c) => ({ ...c, [type]: reset_fn }));
+  },
+  reset: (clear_image, dimensions2) => {
+    bg = false;
+    const _sorted_contexts = $contexts.sort((a, b) => {
+      return sort_order.indexOf(a) - sort_order.indexOf(b);
+    });
+    for (const k of _sorted_contexts) {
+      if (k in $reset_context && typeof $reset_context[k] === "function") {
+        $reset_context[k]?.();
+      }
+    }
+    for (const k of _sorted_contexts) {
+      if (k in $init_context && typeof $init_context[k] === "function") {
+        if (k === "bg" && !clear_image) {
+          continue;
+        } else {
+          $init_context[k]?.(dimensions2);
+        }
+      }
+      CommandManager.reset();
+      $pixi?.resize?.(...dimensions2);
+    }
+  }
+});
+let pixi_target;
+let canvas_wrap;
+function get_dimensions(parent, child) {
+  if (!parent || !child)
+    return;
+  const {
+    width: parent_width,
+    height: parent_height2,
+    top: parent_top,
+    left: parent_left,
+    right: parent_right,
+    bottom: parent_bottom
+  } = canvas_wrap.getBoundingClientRect();
+  const {
+    width: child_width,
+    height: child_height,
+    top: child_top,
+    left: child_left,
+    right: child_right,
+    bottom: child_bottom
+  } = child.getBoundingClientRect();
+  editor_box.set({
+    child_width,
+    child_height,
+    child_left,
+    child_right,
+    child_top,
+    child_bottom,
+    parent_width,
+    parent_height: parent_height2,
+    parent_left,
+    parent_right,
+    parent_top,
+    parent_bottom
+  });
+}
+$:
+  if (crop_constraint && bg && !history) {
+    set_crop();
+  }
+function set_crop() {
+  requestAnimationFrame(() => {
+    tick().then((v) => $active_tool = "crop");
+  });
+}
+function reposition_canvas() {
+  if (!$editor_box)
+    return;
+  const [l, t, w, h] = $crop;
+  const cx = l * $editor_box.child_width;
+  const cy = t * $editor_box.child_height;
+  const cw = w * $editor_box.child_width;
+  const ch = h * $editor_box.child_height;
+  const x = 0.5 * $editor_box.child_width - cx - cw / 2;
+  const y = 0.5 * $editor_box.child_height - cy - ch / 2;
+  position_spring.set({ x, y });
+}
+export async function get_blobs() {
+  if (!$pixi || !$pixi.get_layers)
+    return { background: null, layers: [], composite: null };
+  const [l, t, w, h] = $crop;
+  return $pixi?.get_blobs(
+    $pixi.get_layers(),
+    new Rectangle(
+      Math.round(l * $dimensions[0]),
+      Math.round(t * $dimensions[1]),
+      Math.round(w * $dimensions[0]),
+      Math.round(h * $dimensions[1])
+    ),
+    $dimensions
+  );
+}
+$:
+  $crop && reposition_canvas();
+$:
+  $position_spring && get_dimensions(canvas_wrap, pixi_target);
+export function handle_remove() {
+  editor_context.reset(
+    true,
+    orig_canvas_size ? orig_canvas_size : $dimensions
+  );
+  if (!sources.length) {
+    set_tool("draw");
+  } else {
+    set_tool("bg");
+  }
+  dispatch("clear");
+}
+onMount(() => {
+  const _size = (canvas_size ? canvas_size : crop_size) || [800, 600];
+  const app = create_pixi_app({
+    target: pixi_target,
+    dimensions: _size,
+    antialias
+  });
+  function resize(width, height2) {
+    app.resize(width, height2);
+    dimensions.set([width, height2]);
+  }
+  pixi.set({ ...app, resize });
+  const resizer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      get_dimensions(canvas_wrap, pixi_target);
+    }
+  });
+  resizer.observe(canvas_wrap);
+  resizer.observe(pixi_target);
+  for (const k of $contexts) {
+    if (k in $init_context && typeof $init_context[k] === "function") {
+      $init_context[k]?.($dimensions);
+    }
+  }
+  resize(...$dimensions);
+  return () => {
+    $pixi?.destroy();
+    resizer.disconnect();
+    for (const k of $contexts) {
+      if (k in $reset_context) {
+        $reset_context[k]?.();
+      }
+    }
+  };
+});
+let saved_history = $current_history;
+function handle_save() {
+  saved_history = $current_history;
+  dispatch("save");
+}
+export function set_tool(tool) {
+  $active_tool = tool;
+}
+</script>
+
+<svelte:window on:scroll={() => get_dimensions(canvas_wrap, pixi_target)} />
+
+<div data-testid="image" class="image-container">
+	<Controls
+		can_undo={$can_undo}
+		can_redo={$can_redo}
+		can_save={saved_history !== $current_history}
+		{changeable}
+		on:undo={CommandManager.undo}
+		on:redo={CommandManager.redo}
+		on:remove_image={handle_remove}
+		on:save={handle_save}
+	/>
+	<div class="wrap" bind:this={canvas_wrap}>
+		<div
+			bind:this={pixi_target}
+			class="stage-wrap"
+			class:bg={!bg}
+			style:transform="translate({$position_spring.x}px, {$position_spring.y}px)"
+		></div>
+	</div>
+	<div class="tools-wrap">
+		<slot />
+	</div>
+	<div
+		class="canvas"
+		class:no-border={!bg && $active_tool === "bg" && !history}
+		style:width="{$crop[2] * $editor_box.child_width + 1}px"
+		style:height="{$crop[3] * $editor_box.child_height + 1}px"
+		style:top="{$crop[1] * $editor_box.child_height +
+			($editor_box.child_top - $editor_box.parent_top) -
+			0.5}px"
+		style:left="{$crop[0] * $editor_box.child_width +
+			($editor_box.child_left - $editor_box.parent_left) -
+			0.5}px"
+	></div>
+</div>
+
+<style>
+	.wrap {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		position: relative;
+		justify-content: center;
+		align-items: flex-start;
+	}
+	.canvas {
+		position: absolute;
+		border: var(--block-border-color) 1px solid;
+		pointer-events: none;
+		border-radius: var(--radius-md);
+	}
+
+	.no-border {
+		border: none;
+	}
+
+	.stage-wrap {
+		margin: var(--size-8);
+		margin-bottom: var(--size-1);
+		border-radius: var(--radius-md);
+		overflow: hidden;
+	}
+
+	.tools-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0 var(--spacing-xl) 0 0;
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--radius-sm);
+		margin: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
+	}
+
+	.image-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		max-height: 100%;
+	}
+</style>

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

@@ -0,0 +1,79 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { Spring } from "svelte/motion";
+import { type PixiApp } from "./utils/pixi";
+import { type CommandManager } from "./utils/commands";
+export declare const EDITOR_KEY: unique symbol;
+export type context_type = "bg" | "layers" | "crop" | "draw" | "erase";
+import { type tool } from "./tools";
+export interface EditorContext {
+    pixi: Writable<PixiApp | null>;
+    current_layer: Writable<LayerScene | null>;
+    dimensions: Writable<[number, number]>;
+    editor_box: Writable<{
+        parent_width: number;
+        parent_height: number;
+        parent_left: number;
+        parent_top: number;
+        parent_right: number;
+        parent_bottom: number;
+        child_width: number;
+        child_height: number;
+        child_left: number;
+        child_top: number;
+        child_right: number;
+        child_bottom: number;
+    }>;
+    active_tool: Writable<tool>;
+    toolbar_box: Writable<DOMRect | Record<string, never>>;
+    crop: Writable<[number, number, number, number]>;
+    position_spring: Spring<{
+        x: number;
+        y: number;
+    }>;
+    command_manager: CommandManager;
+    current_history: CommandManager["current_history"];
+    register_context: (type: context_type, { reset_fn, init_fn }: {
+        reset_fn?: () => void;
+        init_fn?: (dimensions?: [number, number]) => void;
+    }) => void;
+    reset: (clear_image: boolean, dimensions: [number, number]) => void;
+}
+import { type LayerScene } from "./layers/utils";
+import { type ImageBlobs } from "./utils/pixi";
+declare const __propDef: {
+    props: {
+        antialias?: boolean | undefined;
+        crop_size: [number, number] | undefined;
+        changeable?: boolean | undefined;
+        history: boolean;
+        bg?: boolean | undefined;
+        sources: ("clipboard" | "webcam" | "upload")[];
+        crop_constraint?: boolean | undefined;
+        canvas_size: [number, number] | undefined;
+        parent_height: number;
+        height?: number | undefined;
+        get_blobs?: (() => Promise<ImageBlobs>) | undefined;
+        handle_remove?: (() => void) | undefined;
+        set_tool?: ((tool: tool) => void) | undefined;
+    };
+    events: {
+        clear?: CustomEvent<undefined> | undefined;
+        save: CustomEvent<void>;
+        change: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ImageEditorProps = typeof __propDef.props;
+export type ImageEditorEvents = typeof __propDef.events;
+export type ImageEditorSlots = typeof __propDef.slots;
+export default class ImageEditor extends SvelteComponent<ImageEditorProps, ImageEditorEvents, ImageEditorSlots> {
+    get get_blobs(): () => Promise<ImageBlobs>;
+    get handle_remove(): () => void;
+    get set_tool(): (tool: tool) => void;
+}
+export {};

package/dist/shared/InteractiveImageEditor.svelte

@@ -0,0 +1,273 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher } from "svelte";
+import {} from "@gradio/utils";
+import { prepare_files } from "@gradio/client";
+import ImageEditor from "./ImageEditor.svelte";
+import Layers from "./layers/Layers.svelte";
+import {} from "./tools/Brush.svelte";
+import {} from "./tools/Brush.svelte";
+import { Tools, Crop, Brush, Sources } from "./tools";
+import { BlockLabel } from "@gradio/atoms";
+import { Image as ImageIcon } from "@gradio/icons";
+import { inject } from "./utils/parse_placeholder";
+export let brush;
+export let eraser;
+export let sources;
+export let crop_size = null;
+export let i18n;
+export let root;
+export let label = void 0;
+export let show_label;
+export let changeable = false;
+export let value = {
+  background: null,
+  layers: [],
+  composite: null
+};
+export let transforms = ["crop"];
+export let layers;
+export let accept_blobs;
+export let status = "complete";
+export let canvas_size;
+export let realtime;
+export let upload;
+export let stream_handler;
+export let dragging;
+export let placeholder = void 0;
+export let height = 400;
+const dispatch = createEventDispatcher();
+let editor;
+function is_not_null(o) {
+  return !!o;
+}
+function is_file_data(o) {
+  return !!o;
+}
+$:
+  if (bg)
+    dispatch("upload");
+export async function get_data() {
+  const blobs = await editor.get_blobs();
+  const bg2 = blobs.background ? upload(
+    await prepare_files([new File([blobs.background], "background.png")]),
+    root
+  ) : Promise.resolve(null);
+  const layers2 = blobs.layers.filter(is_not_null).map(
+    async (blob, i) => upload(await prepare_files([new File([blob], `layer_${i}.png`)]), root)
+  );
+  const composite = blobs.composite ? upload(
+    await prepare_files([new File([blobs.composite], "composite.png")]),
+    root
+  ) : Promise.resolve(null);
+  const [background, composite_, ...layers_] = await Promise.all([
+    bg2,
+    composite,
+    ...layers2
+  ]);
+  return {
+    background: Array.isArray(background) ? background[0] : background,
+    layers: layers_.flatMap((layer) => Array.isArray(layer) ? layer : [layer]).filter(is_file_data),
+    composite: Array.isArray(composite_) ? composite_[0] : composite_
+  };
+}
+function handle_value(value2) {
+  if (!editor)
+    return;
+  if (value2 == null) {
+    editor.handle_remove();
+  }
+}
+$:
+  handle_value(value);
+$:
+  crop_constraint = crop_size;
+let bg = false;
+let history = false;
+export let image_id = null;
+$:
+  editor && editor.set_tool && (sources && sources.length ? editor.set_tool("bg") : editor.set_tool("draw"));
+function nextframe() {
+  return new Promise((resolve) => setTimeout(() => resolve(), 30));
+}
+let uploading = false;
+let pending = false;
+async function handle_change(e) {
+  if (!realtime)
+    return;
+  if (uploading) {
+    pending = true;
+    return;
+  }
+  uploading = true;
+  await nextframe();
+  const blobs = await editor.get_blobs();
+  const images = [];
+  let id = Math.random().toString(36).substring(2);
+  if (blobs.background)
+    images.push([
+      id,
+      "background",
+      new File([blobs.background], "background.png"),
+      null
+    ]);
+  if (blobs.composite)
+    images.push([
+      id,
+      "composite",
+      new File([blobs.composite], "composite.png"),
+      null
+    ]);
+  blobs.layers.forEach((layer, i) => {
+    if (layer)
+      images.push([
+        id,
+        `layer`,
+        new File([layer], `layer_${i}.png`),
+        i
+      ]);
+  });
+  await Promise.all(
+    images.map(async ([image_id2, type, data, index]) => {
+      return accept_blobs({
+        binary: true,
+        data: { file: data, id: image_id2, type, index }
+      });
+    })
+  );
+  image_id = id;
+  dispatch("change");
+  await nextframe();
+  uploading = false;
+  if (pending) {
+    pending = false;
+    uploading = false;
+    handle_change(e);
+  }
+}
+let active_mode = null;
+let editor_height = height - 100;
+$:
+  [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
+</script>
+
+<BlockLabel
+	{show_label}
+	Icon={ImageIcon}
+	label={label || i18n("image.image")}
+/>
+<ImageEditor
+	{canvas_size}
+	crop_size={Array.isArray(crop_size) ? crop_size : undefined}
+	bind:this={editor}
+	bind:height={editor_height}
+	parent_height={height}
+	{changeable}
+	on:save
+	on:change={handle_change}
+	on:clear={() => dispatch("clear")}
+	bind:history
+	bind:bg
+	{sources}
+	crop_constraint={!!crop_constraint}
+>
+	<Tools {i18n}>
+		<Layers layer_files={value?.layers || null} enable_layers={layers} />
+
+		<Sources
+			bind:dragging
+			{i18n}
+			{root}
+			{sources}
+			{upload}
+			{stream_handler}
+			bind:bg
+			bind:active_mode
+			background_file={value?.background || value?.composite || null}
+		></Sources>
+
+		{#if transforms.includes("crop")}
+			<Crop {crop_constraint} />
+		{/if}
+		{#if brush}
+			<Brush
+				color_mode={brush.color_mode}
+				default_color={brush.default_color}
+				default_size={brush.default_size}
+				colors={brush.colors}
+				mode="draw"
+			/>
+		{/if}
+
+		{#if brush && eraser}
+			<Brush default_size={eraser.default_size} mode="erase" />
+		{/if}
+	</Tools>
+
+	{#if !bg && !history && active_mode !== "webcam" && status !== "error"}
+		<div class="empty wrap" style:height={`${editor_height}px`}>
+			{#if sources && sources.length}
+				{#if heading || paragraph}
+					{#if heading}
+						<h2>{heading}</h2>
+					{/if}
+					{#if paragraph}
+						<p>{paragraph}</p>
+					{/if}
+				{:else}
+					<div>Upload an image</div>
+				{/if}
+			{/if}
+
+			{#if sources && sources.length && brush && !placeholder}
+				<div class="or">or</div>
+			{/if}
+			{#if brush && !placeholder}
+				<div>select the draw tool to start</div>
+			{/if}
+		</div>
+	{/if}
+</ImageEditor>
+
+<style>
+	h2 {
+		font-size: var(--text-xl);
+	}
+
+	p,
+	h2 {
+		white-space: pre-line;
+	}
+
+	.empty {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		left: 0;
+		right: 0;
+		margin: auto;
+		z-index: var(--layer-top);
+		text-align: center;
+		color: var(--body-text-color);
+		top: var(--size-8);
+	}
+
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		color: var(--block-label-text-color);
+		line-height: var(--line-md);
+		font-size: var(--text-md);
+		pointer-events: none;
+	}
+
+	.or {
+		color: var(--body-text-color-subdued);
+	}
+</style>