@gradio/imageeditor 0.12.13 → 0.13.0

package/dist/{shared/InteractiveImageEditor.svelte → InteractiveImageEditor.svelte}

@@ -3,45 +3,40 @@
 <script>import { createEventDispatcher } from "svelte";
 import {} from "@gradio/utils";
 import { prepare_files } from "@gradio/client";
-import {} from "./utils/commands";
-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 {} from "./shared/utils/commands";
+import ImageEditor from "./shared/ImageEditor.svelte";
+import {} from "./shared/brush/types";
+import {} from "./shared/Toolbar.svelte";
 import { BlockLabel } from "@gradio/atoms";
 import { Image as ImageIcon } from "@gradio/icons";
-import { inject } from "./utils/parse_placeholder";
+import { inject } from "./shared/utils/parse_placeholder";
+import {
+} from "./shared/types";
 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 composite;
+export let background;
+export let layer_options;
+export let transforms;
 export let accept_blobs;
-export let status = "complete";
 export let canvas_size;
 export let fixed_canvas = false;
 export let realtime;
 export let upload;
-export let stream_handler;
-export let dragging;
+export let is_dragging;
 export let placeholder = void 0;
-export let dynamic_height = void 0;
-export let height;
+export let border_region;
 export let full_history = null;
 const dispatch = createEventDispatcher();
 let editor;
+let has_drawn = false;
 function is_not_null(o) {
   return !!o;
 }
@@ -49,7 +44,7 @@ function is_file_data(o) {
   return !!o;
 }
 $:
-  if (bg)
+  if (background_image)
     dispatch("upload");
 export async function get_data() {
   let blobs;
@@ -58,45 +53,41 @@ export async function get_data() {
   } catch (e) {
     return { background: null, layers: [], composite: null };
   }
-  const bg2 = blobs.background ? upload(
+  const bg = 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(
+  const composite2 = 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,
+  const [background2, composite_, ...layers_] = await Promise.all([
+    bg,
+    composite2,
     ...layers2
   ]);
   return {
-    background: Array.isArray(background) ? background[0] : background,
+    background: Array.isArray(background2) ? background2[0] : background2,
     layers: layers_.flatMap((layer) => Array.isArray(layer) ? layer : [layer]).filter(is_file_data),
     composite: Array.isArray(composite_) ? composite_[0] : composite_
   };
 }
-function handle_value(value2) {
+function handle_value(value) {
   if (!editor)
     return;
-  if (value2 == null) {
+  if (value == null) {
     editor.handle_remove();
     dispatch("receive_null");
   }
 }
 $:
-  handle_value(value);
-$:
-  crop_constraint = crop_size;
-let bg = false;
+  handle_value({ layers, composite, background });
+let background_image = 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));
 }
@@ -155,13 +146,9 @@ async function handle_change(e) {
     handle_change(e);
   }
 }
-let active_mode = null;
-let editor_height = height - 100;
-let _dynamic_height;
-$:
-  dynamic_height = _dynamic_height;
 $:
   [heading, paragraph] = placeholder ? inject(placeholder) : [false, false];
+let current_tool;
 </script>
 
 <BlockLabel
@@ -170,60 +157,34 @@ $:
 	label={label || i18n("image.image")}
 />
 <ImageEditor
+	{transforms}
+	{composite}
+	{layers}
+	{background}
 	on:history
 	{canvas_size}
-	crop_size={Array.isArray(crop_size) ? crop_size : undefined}
 	bind:this={editor}
-	bind:height={editor_height}
-	bind:canvas_height={_dynamic_height}
-	parent_height={height}
 	{changeable}
 	on:save
 	on:change={handle_change}
 	on:clear={() => dispatch("clear")}
-	bind:history
-	bind:bg
 	{sources}
-	crop_constraint={!!crop_constraint}
 	{full_history}
+	bind:background_image
+	bind:current_tool
+	brush_options={brush}
+	eraser_options={eraser}
+	{fixed_canvas}
+	{border_region}
+	{layer_options}
+	{i18n}
+	{root}
+	{upload}
+	bind:is_dragging
+	bind:has_drawn
 >
-	<Tools {i18n}>
-		<Layers layer_files={value?.layers || null} enable_layers={layers} />
-
-		<Sources
-			bind:dragging
-			{i18n}
-			{root}
-			{sources}
-			{upload}
-			{stream_handler}
-			{canvas_size}
-			bind:bg
-			bind:active_mode
-			background_file={value?.background || value?.composite || null}
-			{fixed_canvas}
-		></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 !background_image && current_tool === "image" && !has_drawn}
+		<div class="empty wrap">
 			{#if sources && sources.length}
 				{#if heading || paragraph}
 					{#if heading}
@@ -268,10 +229,10 @@ $:
 		left: 0;
 		right: 0;
 		margin: auto;
-		z-index: var(--layer-top);
+		z-index: var(--layer-1);
 		text-align: center;
-		color: var(--body-text-color);
-		top: var(--size-8);
+		color: var(--color-grey-500) !important;
+		cursor: pointer;
 	}
 
 	.wrap {
@@ -279,10 +240,8 @@ $:
 		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 {

package/dist/{shared/InteractiveImageEditor.svelte.d.ts → InteractiveImageEditor.svelte.d.ts}

@@ -11,34 +11,32 @@ export interface ImageBlobs {
 }
 import { type I18nFormatter } from "@gradio/utils";
 import { type FileData, type Client } from "@gradio/client";
-import { type CommandNode } from "./utils/commands";
-import { type Brush as IBrush } from "./tools/Brush.svelte";
-import { type Eraser } from "./tools/Brush.svelte";
+import { type CommandNode } from "./shared/utils/commands";
+import { type Brush as IBrush, type Eraser } from "./shared/brush/types";
+import { type LayerOptions, type Transform, type Source } from "./shared/types";
 declare const __propDef: {
     props: {
-        brush: IBrush | null;
-        eraser: Eraser | null;
-        sources: ("clipboard" | "webcam" | "upload")[];
-        crop_size?: ([number, number] | `${string}:${string}` | null) | undefined;
+        brush: IBrush;
+        eraser: Eraser;
+        sources: Source[];
         i18n: I18nFormatter;
         root: string;
         label?: string | undefined;
         show_label: boolean;
         changeable?: boolean | undefined;
-        value?: (EditorData | null) | undefined;
-        transforms?: "crop"[] | undefined;
-        layers: boolean;
+        layers: FileData[];
+        composite: FileData | null;
+        background: FileData | null;
+        layer_options: LayerOptions;
+        transforms: Transform[];
         accept_blobs: (a: any) => void;
-        status?: ("pending" | "complete" | "error" | "generating" | "streaming") | undefined;
         canvas_size: [number, number];
         fixed_canvas?: boolean | undefined;
         realtime: boolean;
         upload: Client["upload"];
-        stream_handler: Client["stream"];
-        dragging: boolean;
+        is_dragging: boolean;
         placeholder?: string | undefined;
-        dynamic_height?: number | undefined;
-        height: any;
+        border_region: number;
         full_history?: (CommandNode | null) | undefined;
         get_data?: (() => Promise<ImageBlobs>) | undefined;
         image_id?: (null | string) | undefined;

package/dist/shared/Anchor.svelte

@@ -0,0 +1,311 @@
+<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>
+
+<div class="wrap" class:expanded>
+	<div
+		class="box-wrap"
+		role="grid"
+		tabindex="0"
+		on:mouseleave={() => handle_box_click(last_pos, true)}
+	>
+		{#each { length: 9 } as _, i}
+			<button
+				class="box"
+				class:active-box={last_pos === i}
+				on:mouseenter={() => handle_box_hover(i)}
+				on:click={() => handle_box_click(i)}
+			>
+				<span class:active={last_pos === i} class="icon-wrap">
+					<Image />
+				</span>
+			</button>
+		{/each}
+	</div>
+	<div
+		class="expanding-box"
+		style:width="{$dimensions[0]}px"
+		style:height="{$dimensions[1]}px"
+		style:transform="translate({$pos[0]}px, {$pos[1]}px)"
+	></div>
+	<svg viewBox="0 0 150 150">
+		{#each $arrow_spring as arrow}
+			<line
+				x1={(last_pos % 3) * box_size +
+					14 * (last_pos % 3) +
+					14 +
+					10 +
+					(arrow.x_dir * box_size) / 2 +
+					arrow.x_dir * (arrow.type === 1 ? 0 : 10)}
+				x2={arrow.x}
+				y1={Math.floor(last_pos / 3) * box_size +
+					14 * Math.floor(last_pos / 3) +
+					14 +
+					10 +
+					(arrow.y_dir * box_size) / 2 +
+					arrow.y_dir * (arrow.type === 1 ? 0 : 10)}
+				y2={arrow.y}
+			/>
+		{/each}
+		{#each $arrow_spring as arrow}
+			<g style:transform="translate(-75px, -75px)">
+				<g style:transform="translate({arrow.x}px, {arrow.y}px)">
+					<path
+						d="M 70,75 80,69 80,81 Z"
+						style:transform="rotate({arrow.rotation}deg)"
+						style:transform-origin="75 75"
+					/>
+				</g>
+			</g>
+		{/each}
+	</svg>
+</div>
+
+<style>
+	.wrap {
+		position: relative;
+		margin: 10px 0;
+		height: 130px;
+		width: 130px;
+		padding: 5px;
+	}
+
+	.box-wrap {
+		width: 100%;
+		height: 100%;
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		grid-template-rows: repeat(3, 1fr);
+		gap: 5px;
+
+		background-color: var(--block-background-fill);
+	}
+
+	.box {
+		cursor: pointer;
+		border: none;
+		border: #ccc dashed 1px;
+		border-radius: 4px;
+		transition: 0.1s;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.box::after {
+		background: none !important;
+	}
+
+	.expanding-box {
+		--mod: 3;
+		--border: 2;
+		border: orange solid 2px;
+		border-radius: 4px;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+
+		width: calc(100% / var(--mod));
+		height: calc(100% / var(--mod));
+		transform-origin: 50% 0;
+		box-sizing: border-box;
+	}
+
+	svg {
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+
+		pointer-events: none;
+	}
+
+	.icon-wrap {
+		opacity: 0.2;
+		height: 50%;
+		width: 50%;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-color: #ccc;
+		transition: 0.1s;
+		padding-top: 1px;
+	}
+
+	.wrap.expanded .icon-wrap {
+		opacity: 0;
+	}
+
+	.wrap.expanded .box {
+		border-color: #fff;
+	}
+
+	.icon-wrap.active {
+		opacity: 1 !important;
+	}
+
+	svg {
+		opacity: 0;
+		padding: 5px;
+		transition: 0.1s;
+	}
+	.expanded svg {
+		opacity: 1;
+	}
+
+	svg line {
+		stroke: #999;
+		stroke-width: 3px;
+		stroke-linecap: round;
+	}
+
+	svg path {
+		stroke-width: 3;
+		stroke: #999;
+		stroke-linejoin: round;
+		stroke-linecap: round;
+		fill: #999;
+		/* transition: 0.5s; */
+		transform-origin: 75px 75px;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        position: CustomEvent<"center" | "left" | "right" | "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right">;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};