@gradio/imageeditor 0.12.13 → 0.13.0

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

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        layers: Writable<{
+            active_layer: string;
+            layers: {
+                name: string;
+                id: string;
+                user_created: boolean;
+            }[];
+        }>;
+        enable_additional_layers?: boolean | undefined;
+        enable_layers?: boolean | undefined;
+        show_layers?: boolean | undefined;
+    };
+    events: {
+        new_layer: CustomEvent<void>;
+        change_layer: CustomEvent<string>;
+        move_layer: CustomEvent<{
+            id: string;
+            direction: "up" | "down";
+        }>;
+        delete_layer: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SecondaryToolbarProps = typeof __propDef.props;
+export type SecondaryToolbarEvents = typeof __propDef.events;
+export type SecondaryToolbarSlots = typeof __propDef.slots;
+export default class SecondaryToolbar extends SvelteComponent<SecondaryToolbarProps, SecondaryToolbarEvents, SecondaryToolbarSlots> {
+}
+export {};

package/dist/shared/Toolbar.svelte

@@ -0,0 +1,337 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher } from "svelte";
+import IconButton from "./IconButton.svelte";
+import {
+  Image,
+  Brush,
+  Erase,
+  Crop,
+  Upload,
+  ImagePaste,
+  Webcam,
+  Circle,
+  Resize,
+  ColorPickerSolid
+} from "@gradio/icons";
+import BrushOptions from "./brush/BrushOptions.svelte";
+import {
+} from "./brush/types";
+import tinycolor from "tinycolor2";
+export let tool = "image";
+export let subtool = null;
+export let background = false;
+export let brush_options;
+export let selected_size = brush_options && typeof brush_options.default_size === "number" ? brush_options.default_size : 25;
+export let eraser_options;
+export let selected_eraser_size = eraser_options && typeof eraser_options.default_size === "number" ? eraser_options.default_size : 25;
+export let selected_color = brush_options && (() => {
+  const default_color = brush_options.default_color;
+  if (Array.isArray(default_color)) {
+    return default_color[0];
+  }
+  return default_color;
+})();
+export let selected_opacity = brush_options && (() => {
+  const default_color = brush_options.default_color;
+  if (Array.isArray(default_color)) {
+    return default_color[1];
+  }
+  const color = tinycolor(default_color);
+  if (color.getAlpha() < 1) {
+    return color.getAlpha();
+  }
+  return 1;
+})();
+export let preview = false;
+export let show_brush_color = false;
+export let show_brush_size = false;
+export let show_eraser_size = false;
+export let sources;
+export let transforms;
+let recent_colors = [];
+let enable_layers = true;
+const dispatch = createEventDispatcher();
+function handle_tool_click(e, _tool) {
+  e.stopPropagation();
+  dispatch("tool_change", { tool: _tool });
+}
+function handle_subtool_click(e, _subtool) {
+  e.stopPropagation();
+  dispatch("subtool_change", { tool, subtool: _subtool });
+}
+$:
+  show_brush_size = tool === "draw" && subtool === "size";
+$:
+  show_brush_color = tool === "draw" && subtool === "color";
+$:
+  show_eraser_size = tool === "erase" && subtool === "size";
+$:
+  can_crop = transforms.includes("crop");
+$:
+  can_resize = transforms.includes("resize");
+$:
+  can_upload = sources.includes("upload");
+$:
+  can_webcam = sources.includes("webcam");
+$:
+  can_paste = sources.includes("clipboard");
+</script>
+
+<div class="toolbar-wrap">
+	<div class="half-container">
+		{#if sources.length > 0}
+			<IconButton
+				Icon={Image}
+				label="Image"
+				highlight={tool === "image"}
+				on:click={(e) => handle_tool_click(e, "image")}
+				size="medium"
+				padded={false}
+				transparent={true}
+			/>
+		{/if}
+		{#if brush_options}
+			<IconButton
+				Icon={Brush}
+				label="Brush"
+				on:click={(e) => handle_tool_click(e, "draw")}
+				highlight={tool === "draw"}
+				size="medium"
+				padded={false}
+				transparent={true}
+			/>
+		{/if}
+		{#if eraser_options}
+			<IconButton
+				Icon={Erase}
+				label="Erase"
+				on:click={(e) => handle_tool_click(e, "erase")}
+				highlight={tool === "erase"}
+				size="medium"
+				padded={false}
+				transparent={true}
+			/>
+		{/if}
+	</div>
+	<div
+		class="half-container right"
+		class:hide={tool === "pan" ||
+			(tool === "image" && !background && sources.length === 0) ||
+			(tool === "image" && background && transforms.length === 0)}
+	>
+		{#if tool === "image"}
+			{#if background}
+				{#if can_crop}
+					<IconButton
+						Icon={Crop}
+						label="Crop"
+						on:click={(e) => handle_subtool_click(e, "crop")}
+						highlight={subtool === "crop"}
+						size="medium"
+						padded={false}
+						transparent={true}
+						offset={0}
+					/>
+				{/if}
+				{#if can_resize}
+					<IconButton
+						Icon={Resize}
+						label="Resize"
+						on:click={(e) => handle_subtool_click(e, "size")}
+						highlight={subtool === "size"}
+						size="medium"
+						padded={false}
+						transparent={true}
+						offset={0}
+					/>
+				{/if}
+			{:else}
+				{#if can_upload}
+					<IconButton
+						Icon={Upload}
+						label="Upload"
+						on:click={(e) => handle_subtool_click(e, "upload")}
+						highlight={subtool === "upload"}
+						size="medium"
+						padded={false}
+						transparent={true}
+						offset={0}
+					/>
+				{/if}
+				{#if can_paste}
+					<IconButton
+						Icon={ImagePaste}
+						label="Paste"
+						on:click={(e) => handle_subtool_click(e, "paste")}
+						highlight={subtool === "paste"}
+						size="large"
+						padded={false}
+						transparent={true}
+						offset={0}
+					/>
+				{/if}
+				{#if can_webcam}
+					<IconButton
+						Icon={Webcam}
+						label="Webcam"
+						on:click={(e) => handle_subtool_click(e, "webcam")}
+						highlight={subtool === "webcam"}
+						size="medium"
+						padded={false}
+						transparent={true}
+						offset={0}
+					/>
+				{/if}
+			{/if}
+		{/if}
+
+		{#if tool === "draw" && brush_options}
+			<IconButton
+				Icon={ColorPickerSolid}
+				label="Color"
+				color={selected_color}
+				on:click={(e) => handle_subtool_click(e, "color")}
+				size="medium"
+				padded={false}
+				transparent={true}
+				offset={0}
+			/>
+			<IconButton
+				Icon={Circle}
+				label="Brush Size"
+				on:click={(e) => handle_subtool_click(e, "size")}
+				highlight={subtool === "size"}
+				size="medium"
+				padded={false}
+				transparent={true}
+				offset={0}
+			/>
+
+			{#if show_brush_color || show_brush_size}
+				<BrushOptions
+					colors={brush_options.colors}
+					color_mode={brush_options.color_mode}
+					{recent_colors}
+					show_swatch={show_brush_color}
+					show_size={show_brush_size}
+					bind:selected_size
+					bind:selected_color
+					bind:selected_opacity
+					bind:preview
+					on:click_outside={(e) => {
+						e.stopPropagation();
+						preview = false;
+						show_brush_color = false;
+						show_brush_size = false;
+						handle_subtool_click(e, null);
+					}}
+					mode="brush"
+				/>
+			{/if}
+		{/if}
+
+		{#if tool === "erase" && eraser_options}
+			<IconButton
+				Icon={Circle}
+				label="Eraser Size"
+				on:click={(e) => handle_subtool_click(e, "size")}
+				highlight={subtool === "size"}
+				size="medium"
+				padded={false}
+				transparent={true}
+				offset={0}
+			/>
+		{/if}
+		{#if show_eraser_size}
+			<BrushOptions
+				colors={[]}
+				show_swatch={false}
+				show_size={true}
+				bind:selected_size={selected_eraser_size}
+				bind:selected_color
+				bind:selected_opacity
+				bind:preview
+				on:click_outside={(e) => {
+					e.stopPropagation();
+					preview = false;
+					show_eraser_size = false;
+					handle_subtool_click(e, null);
+				}}
+				mode="eraser"
+			/>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.toolbar-wrap {
+		display: inline-flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		left: 15px;
+		right: 0;
+		top: 30%;
+		/* transform: translateY(-50%); */
+		width: 30px;
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--radius-md);
+
+		gap: var(--spacing-sm);
+		z-index: 1000;
+		background-color: var(--block-background-fill);
+	}
+
+	.half-container {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+		position: relative;
+	}
+
+	.half-container {
+		width: 100%;
+		padding: var(--spacing-sm) 0;
+	}
+
+	.half-container:last-child {
+		border-top: 1px solid var(--block-border-color);
+	}
+
+	.hide {
+		display: none;
+	}
+
+	/* .toolbar-left,
+	.toolbar-right {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: var(--spacing-sm);
+		display: flex;
+		z-index: 1000;
+		border-radius: var(--radius-sm);
+		background-color: #fff;
+		padding: var(--spacing-sm) 0.3rem;
+		width: auto;
+	}
+
+	.toolbar-right {
+		border-left: 0;
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	.toolbar-left {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	.toolbar-layers {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	} */
+</style>

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

@@ -0,0 +1,42 @@
+import { SvelteComponent } from "svelte";
+export type Tool = "image" | "draw" | "erase" | "pan";
+export type Subtool = "upload" | "paste" | "webcam" | "color" | "size" | "crop" | "remove_background" | null;
+import type { Source, Transform } from "./types";
+import { type Brush as BrushType, type Eraser as EraserType } from "./brush/types";
+declare const __propDef: {
+    props: {
+        tool?: Tool | undefined;
+        subtool?: Subtool | undefined;
+        background?: boolean | undefined;
+        brush_options: BrushType | false;
+        selected_size?: number | undefined;
+        eraser_options: EraserType;
+        selected_eraser_size?: number | undefined;
+        selected_color?: any;
+        selected_opacity?: any;
+        preview?: boolean | undefined;
+        show_brush_color?: boolean | undefined;
+        show_brush_size?: boolean | undefined;
+        show_eraser_size?: boolean | undefined;
+        sources: Source[];
+        transforms: Transform[];
+    };
+    events: {
+        tool_change: CustomEvent<{
+            tool: Tool;
+        }>;
+        subtool_change: CustomEvent<{
+            tool: Tool;
+            subtool: Subtool;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToolbarProps = typeof __propDef.props;
+export type ToolbarEvents = typeof __propDef.events;
+export type ToolbarSlots = typeof __propDef.slots;
+export default class Toolbar extends SvelteComponent<ToolbarProps, ToolbarEvents, ToolbarSlots> {
+}
+export {};

package/dist/shared/{tools → brush}/BrushOptions.svelte

@@ -1,6 +1,6 @@
-<script>import { createEventDispatcher } from "svelte";
+<script>import { createEventDispatcher, tick } from "svelte";
 import { click_outside } from "../utils/events";
-import {} from "./Brush.svelte";
+import {} from "./types";
 import ColorPicker from "./ColorPicker.svelte";
 import ColorSwatch from "./ColorSwatch.svelte";
 import ColorField from "./ColorField.svelte";
@@ -10,19 +10,18 @@ export let selected_color;
 export let color_mode = void 0;
 export let recent_colors = [];
 export let selected_size;
-export let dimensions;
-export let parent_width;
-export let parent_height;
-export let parent_left;
-export let toolbar_box;
+export let selected_opacity;
 export let show_swatch;
+export let show_size;
+export let mode = "brush";
 let color_picker = false;
 let current_mode = "hex";
 let editing_index = null;
 const dispatch = createEventDispatcher();
 function handle_color_selection({
   index,
-  color
+  color,
+  opacity
 }, type) {
   if (type === "user" && !color) {
     editing_index = index;
@@ -31,6 +30,9 @@ function handle_color_selection({
   if (!color)
     return;
   selected_color = color;
+  if (opacity !== void 0) {
+    selected_opacity = opacity;
+  }
   if (type === "core") {
     color_picker = false;
   }
@@ -44,30 +46,45 @@ $:
   handle_color_change(selected_color);
 let width = 0;
 let height = 0;
-let c_width = 0;
-let c_height = 0;
-let wrap_el;
-let full_screen = false;
-let anchor = "default";
-let left_anchor = 0;
-let top_anchor = null;
-$: {
-  if (wrap_el && (width || height || c_height || c_width)) {
-    const box = wrap_el.getBoundingClientRect();
-    color_picker;
-    if (box.width > parent_width) {
-      full_screen = true;
-    } else if (parent_width > box.width + 230 * 2 + 25) {
-      anchor = "default";
-      left_anchor = toolbar_box.right - parent_left + 24;
-    } else {
-      anchor = "center";
-    }
-    if (box.height + 50 > parent_height) {
-      anchor = "top";
-      top_anchor = true;
+function debounce(func, delay) {
+  let timeout;
+  return function(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), delay);
+  };
+}
+export let preview = false;
+function handle_preview() {
+  if (!preview) {
+    preview = true;
+    debounced_close_preview();
+  } else {
+    debounced_close_preview();
+  }
+}
+function handle_close_preview() {
+  preview = false;
+}
+const debounced_close_preview = debounce(handle_close_preview, 1e3);
+$:
+  selected_size, selected_color, handle_preview();
+function handle_select(color) {
+  selected_color = color;
+}
+function handle_add_color() {
+  if (recent_colors.length >= 5) {
+    recent_colors.pop();
+  }
+  if (recent_colors.some((color) => {
+    if (Array.isArray(color)) {
+      return color[0] === selected_color && color[1] === selected_opacity;
     }
+    return color === selected_color;
+  })) {
+    return;
   }
+  recent_colors.push([selected_color, selected_opacity]);
+  recent_colors = recent_colors;
 }
 </script>
 
@@ -77,22 +94,21 @@ $: {
 	class="wrap"
 	class:padded={!color_picker}
 	use:click_outside={() => dispatch("click_outside")}
-	class:anchor_default={anchor === "default"}
-	class:anchor_center={anchor === "center"}
-	class:anchor_top={anchor === "top"}
-	bind:this={wrap_el}
-	bind:clientWidth={c_width}
-	bind:clientHeight={c_height}
-	class:anchor={`${left_anchor}px`}
+	class:color_picker
+	class:size_picker={show_size && mode === "brush"}
+	class:eraser_picker={mode === "eraser"}
 >
 	{#if color_mode === "defaults"}
 		{#if color_picker}
-			<ColorPicker bind:color={selected_color} />
+			<ColorPicker
+				bind:color={selected_color}
+				bind:opacity={selected_opacity}
+			/>
 			<ColorField
 				bind:current_mode
 				color={selected_color}
 				on:close={() => (color_picker = false)}
-				on:selected={({ detail }) => (selected_color = detail)}
+				on:selected={({ detail }) => handle_select(detail)}
 			/>
 		{/if}
 	{/if}
@@ -105,20 +121,19 @@ $: {
 			user_colors={color_mode === "defaults" ? recent_colors : null}
 			{selected_color}
 			{current_mode}
+			on:add_color={handle_add_color}
 		/>
 	{/if}
 
-	{#if color_picker || show_swatch}
-		<div class="sep"></div>
+	{#if show_size}
+		<BrushSize max={100} min={1} bind:selected_size />
 	{/if}
-
-	<BrushSize max={dimensions[0] / 10} min={1} bind:selected_size />
 </div>
 
 <style>
 	.wrap {
 		max-width: 230px;
-		width: 90%;
+		/* width: 90%; */
 		position: absolute;
 		display: flex;
 		flex-direction: column;
@@ -132,31 +147,20 @@ $: {
 		cursor: default;
 		z-index: var(--layer-top);
 		overflow: hidden;
-	}
+		top: 0;
 
-	.anchor_default {
-		position: absolute;
-		left: var(--left-anchor);
-		bottom: 8px;
+		transform: translate(35px, -12px);
 	}
-	.anchor_center {
-		position: absolute;
-		bottom: 50px;
-		left: 50%;
-		transform: translateX(-50%);
+
+	.color_picker {
+		transform: translate(35px, -50%);
 	}
 
-	.anchor_top {
-		position: absolute;
-		top: 1px;
-		left: 50%;
-		transform: translateX(-50%);
+	.size_picker {
+		transform: translate(35px, 18px);
 	}
 
-	.sep {
-		height: 1px;
-		background-color: var(--block-border-color);
-		margin: 0 var(--size-3);
-		margin-top: var(--size-1);
+	.eraser_picker {
+		transform: translate(35px, -7px);
 	}
 </style>

package/dist/shared/{tools → brush}/BrushOptions.svelte.d.ts

@@ -1,18 +1,18 @@
 import { SvelteComponent } from "svelte";
-import { type Brush } from "./Brush.svelte";
+import { type Brush, type ColorTuple } from "./types";
+import type { ColorInput } from "tinycolor2";
 declare const __propDef: {
     props: {
-        colors: string[];
-        selected_color: string;
+        colors: (ColorInput | ColorTuple)[];
+        selected_color: any;
         color_mode?: Brush["color_mode"] | undefined;
-        recent_colors?: (string | null)[] | undefined;
+        recent_colors?: (ColorInput | ColorTuple)[] | undefined;
         selected_size: number;
-        dimensions: [number, number];
-        parent_width: number;
-        parent_height: number;
-        parent_left: number;
-        toolbar_box: DOMRect | Record<string, never>;
+        selected_opacity: number;
         show_swatch: boolean;
+        show_size: boolean;
+        mode?: ("brush" | "eraser") | undefined;
+        preview?: boolean | undefined;
     };
     events: {
         click_outside: CustomEvent<void>;

package/dist/shared/{tools → brush}/BrushSize.svelte

@@ -5,34 +5,9 @@ export let selected_size;
 export let min;
 export let max;
 const dispatch = createEventDispatcher();
-let width = 0;
-let height = 0;
-let c_width = 0;
-let c_height = 0;
-let wrap_el;
-let anchor_right = false;
-let anchor_top = false;
-$: {
-  if (wrap_el && (width || height || c_height || c_width)) {
-    const box = wrap_el.getBoundingClientRect();
-    anchor_right = box.width + 30 > width / 2;
-    anchor_top = box.y < 80;
-  }
-}
 </script>
 
-<svelte:window bind:innerHeight={height} bind:innerWidth={width} />
-
-<div
-	class="wrap"
-	use:click_outside={() => dispatch("click_outside")}
-	bind:this={wrap_el}
-	bind:clientWidth={c_width}
-	bind:clientHeight={c_height}
-	class:right={anchor_right}
-	class:top={anchor_top}
-	class:bottom={!anchor_top}
->
+<div class="wrap" use:click_outside={() => dispatch("click_outside")}>
 	<span>
 		<BrushSize />
 	</span>
@@ -41,7 +16,7 @@ $: {
 
 <style>
 	.wrap {
-		width: 100%;
+		width: 230px;
 		display: flex;
 		gap: var(--size-4);
 		background: var(--background-fill-secondary);

package/dist/shared/{tools → brush}/ColorField.svelte

@@ -1,6 +1,7 @@
-<script>import { Eyedropper } from "@gradio/icons";
+<script>import { Eyedropper, Plus } from "@gradio/icons";
 import { createEventDispatcher } from "svelte";
 import tinycolor from "tinycolor2";
+import IconButton from "../IconButton.svelte";
 export let color;
 export let current_mode = "hex";
 const dispatch = createEventDispatcher();