@gradio/imageeditor 0.1.0

package/shared/layers/Layers.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+	import { createEventDispatcher, getContext, onMount, tick } from "svelte";
+	import { DropdownArrow } from "@gradio/icons";
+	import { click_outside } from "../utils/events";
+	import { layer_manager, type LayerScene } from "./utils";
+	import { EDITOR_KEY, type EditorContext } from "../ImageEditor.svelte";
+	import type { FileData } from "@gradio/client";
+
+	let show_layers = false;
+
+	export let layer_files: (FileData | null)[] | null = [];
+
+	const { pixi, current_layer, dimensions, register_context } =
+		getContext<EditorContext>(EDITOR_KEY);
+
+	const LayerManager = layer_manager();
+	let layers: LayerScene[] = [];
+
+	register_context("layers", {
+		init_fn: () => {
+			new_layer();
+		},
+		reset_fn: () => {
+			LayerManager.reset();
+		}
+	});
+
+	async function new_layer(): Promise<void> {
+		if (!$pixi) return;
+
+		const [active_layer, all_layers] = LayerManager.add_layer(
+			$pixi.layer_container,
+			$pixi.renderer,
+			...$dimensions
+		);
+
+		$current_layer = active_layer;
+		layers = all_layers;
+	}
+
+	$: render_layer_files(layer_files);
+
+	function is_not_null<T>(x: T | null): x is T {
+		return x !== null;
+	}
+
+	async function render_layer_files(
+		_layer_files: typeof layer_files
+	): Promise<void> {
+		await tick();
+		if (!_layer_files || _layer_files.length == 0) return;
+		if (!$pixi) return;
+
+		const fetch_promises = await Promise.all(
+			_layer_files.map((f) => {
+				if (!f || !f.url) return null;
+
+				return fetch(f.url);
+			})
+		);
+
+		const blobs = await Promise.all(
+			fetch_promises.map((p) => {
+				if (!p) return null;
+				return p.blob();
+			})
+		);
+
+		LayerManager.reset();
+
+		let last_layer: [LayerScene, LayerScene[]] | null = null;
+		for (const blob of blobs.filter(is_not_null)) {
+			last_layer = await LayerManager.add_layer_from_blob(
+				$pixi.layer_container,
+				$pixi.renderer,
+				blob
+			);
+		}
+
+		if (!last_layer) return;
+
+		$current_layer = last_layer[0];
+		layers = last_layer[1];
+	}
+
+	onMount(async () => {
+		await tick();
+		if (!$pixi) return;
+
+		$pixi = { ...$pixi!, get_layers: LayerManager.get_layers };
+	});
+</script>
+
+<div
+	class="layer-wrap"
+	class:closed={!show_layers}
+	use:click_outside={() => (show_layers = false)}
+>
+	<button aria-label="Show Layers" on:click={() => (show_layers = !show_layers)}
+		>Layers<span class="layer-toggle"><DropdownArrow /></span></button
+	>
+	{#if show_layers}
+		<ul>
+			{#each layers as layer, i (i)}
+				<li>
+					<button
+						class:selected_layer={$current_layer === layer}
+						on:click={() =>
+							($current_layer = LayerManager.change_active_layer(i))}
+						>Layer {i + 1}</button
+					>
+				</li>
+			{/each}
+			<li>
+				<button aria-label="Add Layer" on:click={new_layer}> +</button>
+			</li>
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.layer-toggle {
+		width: 20px;
+		transform: rotate(0deg);
+	}
+
+	.closed .layer-toggle {
+		transform: rotate(-90deg);
+	}
+
+	.layer-wrap {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		display: inline-block;
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--radius-md);
+
+		transition: var(--button-transition);
+		box-shadow: var(--button-shadow);
+
+		text-align: left;
+		border-bottom: none;
+		border-left: none;
+		border-bottom-right-radius: 0;
+		border-top-left-radius: 0;
+		background-color: var(--background-fill-primary);
+		overflow: hidden;
+	}
+
+	.layer-wrap button {
+		display: inline-flex;
+		justify-content: flex-start;
+		align-items: flex-start;
+		padding: var(--size-2) var(--size-4);
+		width: 100%;
+		border-bottom: 1px solid var(--block-border-color);
+	}
+
+	.layer-wrap li:last-child button {
+		border-bottom: none;
+		text-align: center;
+	}
+
+	.closed > button {
+		border-bottom: none;
+	}
+
+	.layer-wrap button:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.selected_layer {
+		background-color: var(--color-accent) !important;
+		color: white;
+		font-weight: bold;
+	}
+</style>

package/shared/layers/utils.ts

@@ -0,0 +1,223 @@
+import {
+	Container,
+	type IRenderer,
+	type DisplayObject,
+	RenderTexture,
+	Texture,
+	Sprite,
+	Filter
+} from "pixi.js";
+
+/**
+ * GLSL Shader that takes two textures and erases the second texture from the first.
+ */
+export const erase_shader = `
+precision highp float;
+
+uniform sampler2D uDrawingTexture;
+uniform sampler2D uEraserTexture;
+
+varying vec2 vTextureCoord;
+
+void main(void) {
+	vec4 drawingColor = texture2D(uDrawingTexture,vTextureCoord);
+	vec4 eraserColor = texture2D(uEraserTexture, vTextureCoord);
+
+	// Use the alpha of the eraser to determine how much to "erase" from the drawing
+	float alpha = 1.0 - eraserColor.a;
+	gl_FragColor = vec4(drawingColor.rgb * alpha, drawingColor.a * alpha);
+}`;
+
+/**
+ * Interface holding data for a layer
+ */
+export interface LayerScene {
+	/**
+	 * The texture used for tracking brush strokes.
+	 */
+	draw_texture: RenderTexture;
+	/**
+	 * The texture used for tracking eraser strokes.
+	 */
+	erase_texture: RenderTexture;
+	/**
+	 * The sprite used for displaying the composite of the draw and erase textures.
+	 */
+	composite: Sprite;
+	/**
+	 * The filter used for combining the draw and erase textures into a composite texture.
+	 */
+	filter?: Filter;
+}
+
+/**
+ * Interface for managing layers.
+ */
+interface LayerManager {
+	/**
+	 * Adds a layer to the container.
+	 * @param layer The container to add the layer to.
+	 * @param renderer The renderer to use for the layer.
+	 * @param width the width of the layer
+	 * @param height the height of the layer
+	 */
+	add_layer(
+		container: Container,
+		renderer: IRenderer,
+		width: number,
+		height: number
+	): [LayerScene, LayerScene[]];
+	/**
+	 * Swaps the layer with the layer above or below it.
+	 * @param layer The index layer to swap.
+	 * @param direction The direction to swap the layer.
+	 */
+	swap_layers(layer: number, direction: "up" | "down"): LayerScene;
+	/**
+	 * Changes the active layer.
+	 * @param layer The index of the layer to make active.
+	 */
+	change_active_layer(layer: number): LayerScene;
+	/**
+	 * Resizes the layers.
+	 * @param width The new width of the layers.
+	 * @param height The new height of the layers.
+	 */
+	reset(): void;
+	/**
+	 * Gets the layers.
+	 * @returns The layers.
+	 */
+	get_layers(): LayerScene[];
+
+	add_layer_from_blob(
+		container: Container,
+		renderer: IRenderer,
+		blob: Blob
+	): Promise<[LayerScene, LayerScene[]]>;
+}
+
+/**
+ * Swaps two adjacent elements in an array.
+ * @param array The array to swap elements in.
+ * @param index The index of the first element to swap.
+ */
+function swap_adjacent(array: any[], index: number): void {
+	if (index < 0 || index >= array.length - 1) {
+		throw new Error("Index out of bounds");
+	}
+
+	[array[index], array[index + 1]] = [array[index + 1], array[index]];
+}
+
+/**
+ * Creates a layer manager.
+ * @param canvas_resize a function to resize the canvas
+ * @returns a layer manager
+ */
+export function layer_manager(): LayerManager {
+	let _layers: LayerScene[] = [];
+	let current_layer = 0;
+	let position = 0;
+
+	return {
+		add_layer: function (
+			container: Container,
+			renderer: IRenderer,
+			width: number,
+			height: number
+		): [LayerScene, LayerScene[]] {
+			const layer_container = new Container() as Container & DisplayObject;
+			position++;
+			layer_container.zIndex = position;
+
+			const composite_texture = RenderTexture.create({
+				width,
+				height
+			});
+
+			const composite = new Sprite(composite_texture) as Sprite & DisplayObject;
+
+			layer_container.addChild(composite);
+
+			composite.zIndex = position;
+
+			const layer_scene: LayerScene = {
+				draw_texture: RenderTexture.create({
+					width,
+					height
+				}),
+				erase_texture: RenderTexture.create({
+					width,
+					height
+				}),
+				composite
+			};
+
+			const erase_filter = new Filter(undefined, erase_shader, {
+				uEraserTexture: layer_scene.erase_texture,
+				uDrawingTexture: layer_scene.draw_texture
+			});
+
+			composite.filters = [erase_filter];
+
+			container.addChild(layer_container);
+
+			_layers.push(layer_scene);
+
+			return [layer_scene, _layers];
+		},
+
+		swap_layers: function (
+			layer: number,
+			direction: "up" | "down"
+		): LayerScene {
+			if (direction === "up") {
+				swap_adjacent(_layers, layer);
+			} else {
+				swap_adjacent(_layers, layer - 1);
+			}
+			return _layers[layer];
+		},
+
+		change_active_layer: function (layer: number): LayerScene {
+			current_layer = layer;
+			return _layers[layer];
+		},
+		reset() {
+			_layers.forEach((layer) => {
+				layer.draw_texture.destroy(true);
+				layer.erase_texture.destroy(true);
+				layer.composite.destroy(true);
+			});
+			_layers = [];
+			current_layer = 0;
+			position = 0;
+		},
+		async add_layer_from_blob(
+			container: Container,
+			renderer: IRenderer,
+			blob: Blob
+		) {
+			const img = await createImageBitmap(blob);
+			const bitmap_texture = Texture.from(img);
+			const sprite = new Sprite(bitmap_texture) as Sprite & DisplayObject;
+			sprite.zIndex = 0;
+
+			const [layer, layers] = this.add_layer(
+				container,
+				renderer,
+				sprite.width,
+				sprite.height
+			);
+			renderer.render(sprite, {
+				renderTexture: layer.draw_texture
+			});
+
+			return [layer, layers];
+		},
+		get_layers() {
+			return _layers;
+		}
+	};
+}

package/shared/tools/Brush.svelte

@@ -0,0 +1,301 @@
+<script lang="ts" context="module">
+	import { type ColorInput } from "tinycolor2";
+
+	export interface Eraser {
+		/**
+		 * The default size of the eraser.
+		 */
+		default_size: number | "auto";
+		/**
+		 * The sizes to show in the size swatch
+		 */
+		sizes: number[] | "auto";
+		/**
+		 * Whether to show _only_ the sizes specified in `sizes`, or to show the sizes specified in `sizes` along with the size slider.
+		 */
+		size_mode: "fixed" | "defaults";
+		/**
+		 * Whether to use antialiasing when drawing the eraser.
+		 */
+		antialias: boolean;
+	}
+
+	export interface Brush extends Eraser {
+		/**
+		 * The default color of the brush.
+		 */
+		default_color: ColorInput;
+		/**
+		 * The colors to show in the color swatch
+		 */
+		colors: ColorInput[];
+		/**
+		 * Whether to show _only_ the color swatches specified in `colors`, or to show the color swatches specified in `colors` along with the colorpicker.
+		 */
+		color_mode: "fixed" | "defaults";
+	}
+
+	type brush_option_type = "color" | "size";
+</script>
+
+<script lang="ts">
+	import tinycolor from "tinycolor2";
+	import { clamp } from "../utils/pixi";
+
+	import { getContext, onMount, tick } from "svelte";
+	import { type ToolContext, TOOL_KEY } from "./Tools.svelte";
+	import { Palette, BrushSize as SizeIcon } from "@gradio/icons";
+	import { type EditorContext, EDITOR_KEY } from "../ImageEditor.svelte";
+	import { draw_path, type DrawCommand } from "./brush";
+	import BrushColor from "./BrushColor.svelte";
+	import BrushSize from "./BrushSize.svelte";
+	import type { FederatedPointerEvent } from "pixi.js";
+
+	export let default_size: Brush["default_size"];
+	export let default_color: Brush["default_color"] | undefined = undefined;
+	export let colors: Brush["colors"] | undefined = undefined;
+	export let color_mode: Brush["color_mode"] | undefined = undefined;
+	export let mode: "erase" | "draw";
+
+	const processed_colors = colors
+		? colors.map(process_color).filter((_, i) => i < 5)
+		: [];
+
+	let selected_color =
+		default_color === "auto"
+			? processed_colors[0]
+			: !default_color
+			? "black"
+			: process_color(default_color);
+
+	const paint_meta = {
+		color: {
+			icon: Palette,
+			label: "Color",
+			order: 0,
+			id: "brush_color",
+			cb() {
+				current_option = "color";
+			}
+		},
+		size: {
+			icon: SizeIcon,
+			label: "Size",
+			order: 1,
+			id: "brush_size",
+			cb() {
+				current_option = "size";
+			}
+		}
+	} as const;
+
+	let brush_options: (typeof paint_meta)[brush_option_type][];
+	$: brush_options =
+		mode === "draw" ? Object.values(paint_meta) : [paint_meta.size];
+
+	let current_option: brush_option_type | null = null;
+
+	const {
+		pixi,
+		dimensions,
+		current_layer,
+		command_manager,
+		register_context,
+		editor_box,
+		crop
+	} = getContext<EditorContext>(EDITOR_KEY);
+
+	const { active_tool, register_tool, current_color } =
+		getContext<ToolContext>(TOOL_KEY);
+
+	let drawing = false;
+	let draw: DrawCommand;
+
+	function generate_sizes(x: number, y: number): number {
+		const min = clamp(Math.min(x, y), 500, 1000);
+
+		return Math.round((min * 2) / 100);
+	}
+
+	$: mode === "draw" && current_color.set(selected_color);
+
+	let selected_size =
+		default_size === "auto" ? generate_sizes(...$dimensions) : default_size;
+
+	function pointer_down_handler(event: FederatedPointerEvent): void {
+		if ($active_tool !== mode) {
+			return;
+		}
+		drawing = true;
+
+		if (!$pixi || !$current_layer) {
+			return;
+		}
+
+		draw = draw_path(
+			$pixi.renderer!,
+			$pixi.layer_container,
+			$current_layer,
+			mode
+		);
+
+		draw.start({
+			x: event.screen.x,
+			y: event.screen.y,
+			color: selected_color || undefined,
+			size: selected_size,
+			opacity: 1
+		});
+	}
+
+	function pointer_up_handler(event: FederatedPointerEvent): void {
+		if (!$pixi || !$current_layer) {
+			return;
+		}
+		if ($active_tool !== mode) {
+			return;
+		}
+		draw.stop();
+		command_manager.execute(draw);
+		drawing = false;
+	}
+
+	function pointer_move_handler(event: FederatedPointerEvent): void {
+		if ($active_tool !== mode) {
+			return;
+		}
+		if (drawing) {
+			draw.continue({
+				x: event.screen.x,
+				y: event.screen.y
+			});
+		}
+
+		const x_bound = $crop[0] * $dimensions[0];
+		const y_bound = $crop[1] * $dimensions[1];
+
+		if (
+			x_bound > event.screen.x ||
+			y_bound > event.screen.y ||
+			event.screen.x > x_bound + $crop[2] * $dimensions[0] ||
+			event.screen.y > y_bound + $crop[3] * $dimensions[1]
+		) {
+			brush_cursor = false;
+			document.body.style.cursor = "auto";
+		} else {
+			brush_cursor = true;
+			document.body.style.cursor = "none";
+		}
+		if (brush_cursor) {
+			pos = {
+				x: event.clientX - $editor_box.child_left,
+				y: event.clientY - $editor_box.child_top
+			};
+		}
+	}
+
+	let brush_cursor = false;
+
+	async function toggle_listeners(on_off: "on" | "off"): Promise<void> {
+		$pixi?.layer_container[on_off]("pointerdown", pointer_down_handler);
+
+		$pixi?.layer_container[on_off]("pointerup", pointer_up_handler);
+
+		$pixi?.layer_container[on_off]("pointermove", pointer_move_handler);
+		$pixi?.layer_container[on_off](
+			"pointerenter",
+			(event: FederatedPointerEvent) => {
+				if ($active_tool === mode) {
+					brush_cursor = true;
+					document.body.style.cursor = "none";
+				}
+			}
+		);
+		$pixi?.layer_container[on_off](
+			"pointerleave",
+			() => ((brush_cursor = false), (document.body.style.cursor = "auto"))
+		);
+	}
+
+	register_context(mode, {
+		init_fn: () => {
+			toggle_listeners("on");
+		},
+		reset_fn: () => {
+			toggle_listeners("off");
+		}
+	});
+
+	onMount(() => {
+		const unregister = register_tool(mode, {
+			default: null,
+			options: brush_options
+		});
+
+		return () => {
+			unregister();
+			toggle_listeners("off");
+		};
+	});
+
+	let recent_colors: (string | null)[] = [null, null, null];
+
+	function process_color(color: ColorInput): string {
+		return tinycolor(color).toRgbString();
+	}
+
+	$: {
+		if ($active_tool !== mode) {
+			current_option = null;
+		}
+	}
+
+	let pos = { x: 0, y: 0 };
+	$: brush_size =
+		(selected_size / $dimensions[0]) * $editor_box.child_width * 2;
+</script>
+
+<svelte:window
+	on:keydown={({ key }) => key === "Escape" && (current_option = null)}
+/>
+
+<span
+	style:transform="translate({pos.x}px, {pos.y}px)"
+	style:top="{$editor_box.child_top -
+		$editor_box.parent_top -
+		brush_size / 2}px"
+	style:left="{$editor_box.child_left -
+		$editor_box.parent_left -
+		brush_size / 2}px"
+	style:width="{brush_size}px"
+	style:height="{brush_size}px"
+	style:opacity={brush_cursor ? 1 : 0}
+/>
+
+{#if current_option === "color" && colors}
+	<div>
+		<BrushColor
+			on:click_outside={() => (current_option = null)}
+			colors={processed_colors}
+			bind:selected_color
+			{color_mode}
+			bind:recent_colors
+		/>
+	</div>
+{:else if current_option === "size"}
+	<BrushSize
+		on:click_outside={() => (current_option = null)}
+		max={$dimensions[0] / 10}
+		min={1}
+		bind:selected_size
+	/>
+{/if}
+
+<style>
+	span {
+		position: absolute;
+		background: rgba(0, 0, 0, 0.5);
+		pointer-events: none;
+		border-radius: 50%;
+	}
+</style>