@gradio/imageeditor 0.12.13 → 0.13.0

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

@@ -1,69 +1,56 @@
 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, type CommandNode } 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";
+import { type Tool as ToolbarTool } from "./Toolbar.svelte";
+import type { I18nFormatter } from "@gradio/utils";
+import type { Client, FileData } from "@gradio/client";
+import { type CommandNode } from "./utils/commands";
+import { type Brush, type Eraser } from "./brush/types";
+import type { LayerOptions, Source, Transform } from "./types";
+import { type ImageBlobs } from "./types";
 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;
+        antialias?: true | undefined;
         full_history?: (CommandNode | null) | undefined;
-        height?: number | undefined;
-        canvas_height?: number | undefined;
+        changeable?: boolean | undefined;
+        sources?: Source[] | undefined;
+        transforms?: Transform[] | undefined;
+        canvas_size: [number, number];
+        is_dragging?: boolean | undefined;
+        background_image?: boolean | undefined;
+        brush_options: Brush;
+        eraser_options: Eraser;
+        fixed_canvas?: boolean | undefined;
+        root: string;
+        mirror_webcam?: boolean | undefined;
+        i18n: I18nFormatter;
+        upload: Client["upload"];
+        composite: FileData | null;
+        layers: FileData[];
+        background: FileData | null;
+        border_region?: number | undefined;
+        layer_options: LayerOptions;
+        current_tool: ToolbarTool;
+        has_drawn?: boolean | undefined;
         get_blobs?: (() => Promise<ImageBlobs>) | undefined;
-        handle_remove?: (() => void) | undefined;
-        set_tool?: ((tool: tool) => void) | undefined;
+        add_image?: ((image: Blob | File) => void) | undefined;
+        add_image_from_url?: ((source: string | {
+            url: string;
+            meta: {
+                _type: string;
+            };
+        } | any) => Promise<void>) | undefined;
+        add_layers_from_url?: ((source: FileData[] | any) => Promise<void>) | undefined;
     };
     events: {
+        error: CustomEvent<string>;
+        drag: CustomEvent<any>;
         clear?: CustomEvent<undefined> | undefined;
         save: CustomEvent<void>;
         change: CustomEvent<void>;
-        history: CustomEvent<Writable<CommandNode>>;
+        history: CustomEvent<import("svelte/store").Writable<CommandNode>>;
+        upload: CustomEvent<void>;
+        input: CustomEvent<void>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -75,8 +62,16 @@ 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 antialias(): true;
+    get full_history(): CommandNode;
     get get_blobs(): () => Promise<ImageBlobs>;
-    get handle_remove(): () => void;
-    get set_tool(): (tool: tool) => void;
+    get add_image(): (image: Blob | File) => void;
+    get add_image_from_url(): (source: string | {
+        url: string;
+        meta: {
+            _type: string;
+        };
+    } | any) => Promise<void>;
+    get add_layers_from_url(): (source: FileData[] | any) => Promise<void>;
 }
 export {};

package/dist/shared/Layers.svelte

@@ -0,0 +1,233 @@
+<script>import { click_outside } from "./utils/events";
+import { Layers, Clear, ArrowUp, ArrowDown, Plus } from "@gradio/icons";
+import { IconButton } from "@gradio/atoms";
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let layers;
+export let enable_additional_layers = true;
+export let enable_layers = true;
+export let show_layers = false;
+function new_layer() {
+  dispatch("new_layer");
+}
+function change_layer(id) {
+  dispatch("change_layer", id);
+  show_layers = false;
+}
+function move_layer(id, direction) {
+  dispatch("move_layer", { id, direction });
+}
+function delete_layer(id) {
+  dispatch("delete_layer", id);
+}
+</script>
+
+{#if enable_layers}
+	<div
+		class="layer-wrap"
+		class:closed={!show_layers}
+		use:click_outside={() => (show_layers = false)}
+	>
+		<button
+			class="layer-title-button"
+			aria-label="Show Layers"
+			on:click|stopPropagation={() => (show_layers = !show_layers)}
+		>
+			{show_layers
+				? "Layers"
+				: $layers.layers.find((l) => l.id === $layers.active_layer)?.name}
+			<span class="icon"><Layers /></span>
+		</button>
+		{#if show_layers}
+			<ul>
+				{#each $layers.layers as { id, name, user_created }, i (i)}
+					<li>
+						<button
+							class:selected_layer={$layers.active_layer === id}
+							aria-label={`layer-${i + 1}`}
+							on:click|stopPropagation={() => change_layer(id)}>{name}</button
+						>
+						{#if $layers.layers.length > 1}
+							<div>
+								{#if i > 0}
+									<IconButton
+										on:click={(e) => {
+											e.stopPropagation();
+											move_layer(id, "up");
+										}}
+										Icon={ArrowUp}
+										size="x-small"
+									/>
+								{/if}
+								{#if i < $layers.layers.length - 1}
+									<IconButton
+										on:click={(e) => {
+											e.stopPropagation();
+											move_layer(id, "down");
+										}}
+										Icon={ArrowDown}
+										size="x-small"
+									/>
+								{/if}
+								{#if $layers.layers.length > 1 && user_created}
+									<IconButton
+										on:click={(e) => {
+											e.stopPropagation();
+											delete_layer(id);
+										}}
+										Icon={Clear}
+										size="x-small"
+									/>
+								{/if}
+							</div>
+						{/if}
+					</li>
+				{/each}
+				{#if enable_additional_layers}
+					<li class="add-layer">
+						<IconButton
+							Icon={Plus}
+							label="Add Layer"
+							on:click={(e) => {
+								e.stopPropagation();
+								new_layer();
+							}}
+							size="x-small"
+						/>
+					</li>
+				{/if}
+			</ul>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.add-layer {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin: var(--spacing-sm) 0 0 0;
+	}
+
+	.add-layer :global(button) {
+		width: 100%;
+	}
+	.icon {
+		width: 14px;
+		color: var(--body-text-color);
+		transition: color 0.15s ease;
+	}
+
+	.layer-wrap {
+		/* position: absolute; */
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		/* border: 1px solid var(--border-color-primary); */
+		/* z-index: var(--layer-1); */
+		/* border-radius: var(--radius-sm); */
+		/* background-color: var(--block-background-fill); */
+		width: 100%;
+		flex-direction: column;
+		/* bottom: 5px; */
+		/* right: 5px; */
+		/* border-bottom: 0;
+		border-right: 0; */
+		/* box-shadow: var(--shadow-drop); */
+	}
+
+	.layer-wrap button {
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		display: flex;
+		font-size: var(--text-sm);
+		line-height: var(--line-sm);
+		transition: all 0.15s ease;
+		padding: var(--spacing-md) var(--spacing-lg);
+		/* padding-right: var(--spacing-lg); */
+		border-radius: var(--radius-sm);
+		/* padding-left: 30px; */
+	}
+
+	button.layer-title-button {
+		width: 100%;
+		/* padding-left: 30px; */
+	}
+
+	.layer-wrap button:hover .icon {
+		color: var(--color-accent);
+	}
+
+	.selected_layer {
+		color: var(--color-accent);
+		font-weight: var(--weight-semibold);
+	}
+
+	ul {
+		/* position: absolute; */
+		bottom: 0;
+		right: 0;
+		/* background: var(--block-background-fill); */
+		width: 100%;
+		/* min-width: 100%; */
+		list-style: none;
+		z-index: var(--layer-top);
+		/* border: 1px solid var(--border-color-primary); */
+		/* border-radius: var(--radius-sm); */
+		/* box-shadow: var(--shadow-drop-lg); */
+		padding: var(--spacing-sm);
+		/* transform: translate(-1px, 1px); */
+		border-top: 1px solid var(--border-color-primary);
+	}
+
+	/* .sep {
+		height: 12px;
+		background-color: var(--block-border-color);
+		width: 1px;
+		display: block;
+		margin-left: var(--spacing-xl);
+	} */
+
+	li {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		/* border-radius: var(--radius-sm); */
+		transition: background-color 0.15s ease;
+		border-bottom: 1px solid var(--border-color-primary);
+	}
+
+	.layer-wrap ul > li > button {
+		padding-left: calc(var(--spacing-md));
+	}
+
+	li:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
+	li:last-child {
+		border-bottom: none;
+	}
+	li:last-child:hover {
+		background-color: unset;
+	}
+
+	li div {
+		display: flex;
+		gap: var(--spacing-sm);
+		padding: var(--spacing-sm);
+	}
+	li > button {
+		padding: var(--spacing-sm) var(--spacing-md);
+	}
+
+	/* li > div > button {
+		opacity: 0.7;
+		transition: opacity 0.15s ease;
+	}
+
+	li > div > button:hover {
+		opacity: 1;
+	} */
+</style>

package/dist/shared/Layers.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 LayersProps = typeof __propDef.props;
+export type LayersEvents = typeof __propDef.events;
+export type LayersSlots = typeof __propDef.slots;
+export default class Layers extends SvelteComponent<LayersProps, LayersEvents, LayersSlots> {
+}
+export {};

package/dist/shared/Resize.svelte

@@ -0,0 +1,218 @@
+<script context="module"></script>
+
+<script>import { createEventDispatcher } from "svelte";
+import Anchor from "./Anchor.svelte";
+export let dimensions;
+const dispatch = createEventDispatcher();
+let selected_anchor = "center";
+let scale = false;
+let new_width = $dimensions?.width;
+let new_height = $dimensions?.height;
+function handle_click() {
+  dispatch("change", {
+    anchor: selected_anchor,
+    scale,
+    width: new_width,
+    height: new_height
+  });
+}
+function set_anchor(position) {
+  selected_anchor = position;
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="wrap" on:click|stopPropagation>
+	<div class="size-wrap">
+		<div class="size-input">
+			<label for="width">Width</label><input
+				type="number"
+				id="width"
+				bind:value={new_width}
+			/>
+		</div>
+		<div class="size-input">
+			<label for="height">Height </label><input
+				type="number"
+				id="height"
+				bind:value={new_height}
+			/>
+		</div>
+	</div>
+
+	<div class="scale-wrap">
+		<h2 class="image-will-label">Image will:</h2>
+		<div class="toggle-container">
+			<label class="radio-label">
+				<input
+					type="radio"
+					name="resize_mode"
+					value={true}
+					bind:group={scale}
+				/>
+				<span class="radio-button">rescale</span>
+			</label>
+			<label class="radio-label">
+				<input
+					type="radio"
+					name="resize_mode"
+					value={false}
+					bind:group={scale}
+				/>
+				<span class="radio-button">anchor</span>
+			</label>
+		</div>
+	</div>
+	<div class="anchor-wrap">
+		<Anchor on:position={(e) => set_anchor(e.detail)} />
+	</div>
+	<button class="apply-button" on:click={() => handle_click()}
+		>Resize Canvas</button
+	>
+</div>
+
+<!-- </div> -->
+
+<style>
+	.wrap {
+		padding: var(--spacing-xl) var(--spacing-lg);
+		color: var(--block-label-text-color);
+	}
+
+	.size-wrap {
+		display: flex;
+		flex-direction: row;
+		gap: 10px;
+	}
+
+	.size-input {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-xxs);
+	}
+
+	label,
+	h2 {
+		display: flex;
+		align-items: center;
+		gap: 15px;
+
+		cursor: pointer;
+		color: var(--checkbox-label-text-color);
+		font-weight: var(--checkbox-label-text-weight);
+		font-size: var(--text-sm);
+		line-height: var(--line-md);
+	}
+
+	.scale-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+		margin-top: var(--spacing-md);
+	}
+
+	input[type="number"] {
+		border: 1px solid var(--border-color-primary);
+		width: 60px;
+		border-radius: var(--radius-sm);
+		background-color: var(--checkbox-background-color-focus);
+		color: var(--body-text-color);
+		font-size: var(--text-sm);
+		transition: border-color 0.15s ease;
+		padding: var(--spacing-xs);
+		line-height: 1rem;
+	}
+
+	input[type="number"]:hover {
+		border-color: var(--color-accent-soft);
+	}
+
+	input[type="number"]:focus {
+		border-color: var(--color-accent);
+		outline: none;
+		box-shadow: 0 0 0 1px var(--color-accent-soft);
+	}
+
+	.image-will-label {
+		grid-column: 1;
+	}
+
+	.toggle-container {
+		display: flex;
+		grid-column: 2;
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--border-color-primary);
+		overflow: hidden;
+	}
+
+	.toggle-container {
+		display: flex;
+		grid-column: 2;
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--border-color-primary);
+		overflow: hidden;
+	}
+
+	.radio-label {
+		flex: 1;
+		margin: 0;
+		padding: 0;
+		position: relative;
+		cursor: pointer;
+	}
+
+	.radio-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: var(--spacing-sm);
+		background: var(--checkbox-background-color);
+		color: var(--body-text-color);
+		font-size: var(--text-sm);
+		transition: background-color 0.15s ease;
+		width: 100%;
+		height: 100%;
+	}
+
+	input[type="radio"] {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	input[type="radio"]:not(:checked) + .radio-button:hover {
+		background: var(--checkbox-background-color-hover);
+	}
+
+	input[type="radio"]:checked + .radio-button {
+		background: var(--color-accent);
+		color: white;
+	}
+
+	.apply-button {
+		width: 100%;
+		margin-top: var(--spacing-md);
+		padding: var(--spacing-sm) var(--spacing-md);
+		background: var(--color-accent);
+		color: white;
+		border: none;
+		border-radius: var(--radius-sm);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		transition: all 0.15s ease;
+	}
+
+	.apply-button:hover {
+		background: var(--button-primary-background-fill-hover);
+	}
+
+	.anchor-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		gap: 10px;
+	}
+</style>

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+export type Position = "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right";
+import type { Spring } from "svelte/motion";
+declare const __propDef: {
+    props: {
+        dimensions: Spring<{
+            width: number;
+            height: number;
+        }>;
+    };
+    events: {
+        click: MouseEvent;
+        change: CustomEvent<{
+            anchor: Position;
+            scale: boolean;
+            width: number;
+            height: number;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ResizeProps = typeof __propDef.props;
+export type ResizeEvents = typeof __propDef.events;
+export type ResizeSlots = typeof __propDef.slots;
+export default class Resize extends SvelteComponent<ResizeProps, ResizeEvents, ResizeSlots> {
+}
+export {};

package/dist/shared/SecondaryToolbar.svelte

@@ -0,0 +1,54 @@
+<script>import Layers from "./Layers.svelte";
+export let layers;
+export let enable_additional_layers = true;
+export let enable_layers = true;
+export let show_layers = false;
+</script>
+
+<div class="toolbar-wrap-wrap">
+	<div class="toolbar-wrap">
+		{#if enable_layers}
+			<Layers
+				{layers}
+				{enable_additional_layers}
+				{enable_layers}
+				{show_layers}
+				on:new_layer
+				on:change_layer
+				on:move_layer
+				on:delete_layer
+			/>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.toolbar-wrap-wrap {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		width: fit-content;
+		max-height: 100%;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column-reverse;
+	}
+
+	.toolbar-wrap {
+		min-width: 110px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		right: 0;
+		bottom: 0;
+		border: 1px solid var(--block-border-color);
+		border-radius: 0;
+		border-top-left-radius: var(--radius-md);
+		border-right: none;
+		border-bottom: none;
+		z-index: 1000;
+		background-color: var(--block-background-fill);
+	}
+</style>