@gradio/imageeditor 0.12.13 → 0.13.0

package/shared/layers/Layers.svelte

@@ -1,250 +0,0 @@
-<script lang="ts">
-	import { getContext, onMount, tick } from "svelte";
-
-	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";
-	import { Layers } from "@gradio/icons";
-
-	let show_layers = false;
-
-	export let layer_files: (FileData | null)[] | null = [];
-	export let enable_layers = true;
-
-	const {
-		pixi,
-		current_layer,
-		dimensions,
-		register_context,
-		command_manager,
-		current_history
-	} = getContext<EditorContext>(EDITOR_KEY);
-
-	const { can_undo } = command_manager;
-
-	const LayerManager = layer_manager();
-	const manager_current_layer = LayerManager.active_layer;
-	const layers = LayerManager.layers;
-
-	$: current_layer.set($manager_current_layer);
-
-	register_context("layers", {
-		init_fn: () => {
-			new_layer();
-		},
-		reset_fn: () => {
-			LayerManager.reset();
-		}
-	});
-
-	async function validate_layers(): Promise<void> {
-		let invalid = $layers.some(
-			(layer) =>
-				layer.composite.texture?.width != $dimensions[0] ||
-				layer.composite.texture?.height != $dimensions[1]
-		);
-		if (invalid) {
-			LayerManager.reset();
-			if (!layer_files || layer_files.length == 0) new_layer();
-			else render_layer_files(layer_files);
-		}
-	}
-	$: $dimensions, validate_layers();
-
-	async function new_layer(): Promise<void> {
-		if (!$pixi) return;
-
-		const new_layer = LayerManager.add_layer(
-			$pixi.layer_container,
-			$pixi.renderer,
-			...$dimensions
-		);
-
-		if ($can_undo || $layers.length > 0) {
-			command_manager.execute(new_layer);
-		} else {
-			new_layer.execute();
-		}
-	}
-
-	$: 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) {
-			LayerManager.reset();
-			new_layer();
-			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();
-
-		for (const blob of blobs.filter(is_not_null)) {
-			const new_layer = await LayerManager.add_layer_from_blob(
-				$pixi.layer_container,
-				$pixi.renderer,
-				blob,
-				$pixi.view
-			);
-
-			if ($can_undo && $layers.length === 0) {
-				command_manager.execute(new_layer);
-			} else {
-				new_layer.execute();
-			}
-		}
-	}
-
-	onMount(async () => {
-		await tick();
-		if (!$pixi) return;
-
-		$pixi = { ...$pixi!, get_layers: LayerManager.get_layers };
-	});
-</script>
-
-{#if enable_layers}
-	<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)}
-			><span class="icon"><Layers /></span> Layer {$layers.findIndex(
-				(l) => l === $current_layer
-			) + 1}
-		</button>
-		{#if show_layers}
-			<ul>
-				{#each $layers as layer, i (i)}
-					<li>
-						<button
-							class:selected_layer={$current_layer === layer}
-							aria-label={`layer-${i + 1}`}
-							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}
-
-		<span class="sep"></span>
-	</div>
-{/if}
-
-<style>
-	.icon {
-		width: 14px;
-		margin-right: var(--spacing-md);
-		color: var(--block-label-text-color);
-		margin-right: var(--spacing-lg);
-		margin-top: 1px;
-	}
-
-	.layer-wrap {
-		position: relative;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.layer-wrap button {
-		justify-content: flex-start;
-		align-items: flex-start;
-		width: 100%;
-		border-bottom: 1px solid var(--block-border-color);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: var(--scale-000);
-		line-height: var(--line-sm);
-		padding-bottom: 1px;
-		margin-left: var(--spacing-xl);
-		padding: var(--spacing-sm) 0;
-	}
-
-	.layer-wrap li:last-child button {
-		border-bottom: none;
-		text-align: center;
-		font-size: var(--scale-0);
-		line-height: 1;
-		font-weight: var(--weight-bold);
-		padding: 5px 0 1px 0;
-	}
-
-	.closed > button {
-		border-bottom: none;
-	}
-
-	.layer-wrap button:hover {
-		background-color: none;
-	}
-
-	.layer-wrap button:hover .icon {
-		color: var(--color-accent);
-	}
-
-	.selected_layer {
-		background-color: var(--block-background-fill);
-		color: var(--color-accent);
-		font-weight: bold;
-	}
-
-	ul {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		background: var(--block-background-fill);
-		width: calc(100% + 1px);
-		list-style: none;
-		z-index: var(--layer-top);
-		border: 1px solid var(--block-border-color);
-		padding: var(--spacing-sm) 0;
-		text-wrap: none;
-		transform: translate(-1px, 1px);
-		border-radius: var(--radius-sm);
-		border-bottom-right-radius: 0;
-	}
-
-	.layer-wrap ul > li > button {
-		margin-left: 0;
-	}
-
-	.sep {
-		height: 12px;
-		background-color: var(--block-border-color);
-		width: 1px;
-		display: block;
-		margin-left: var(--spacing-xl);
-	}
-</style>

package/shared/layers/utils.ts

@@ -1,294 +0,0 @@
-import {
-	Container,
-	type IRenderer,
-	type DisplayObject,
-	RenderTexture,
-	Texture,
-	Sprite,
-	Filter
-} from "pixi.js";
-
-import { type Command } from "../utils/commands";
-import { get, writable, type Writable } from "svelte/store";
-
-/**
- * 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,
-		sprite?: Sprite
-	): Command;
-	/**
-	 * 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[];
-	layers: Writable<LayerScene[]>;
-	active_layer: Writable<LayerScene | null>;
-
-	add_layer_from_blob(
-		container: Container,
-		renderer: IRenderer,
-		blob: Blob,
-		view: HTMLCanvasElement
-	): Promise<Command>;
-}
-
-/**
- * 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,
-			sprite?: Sprite
-		): Command {
-			let layer_container: Container & DisplayObject;
-			let layer_number: number;
-			let that = this;
-			return {
-				execute: function () {
-					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);
-					that.layers.update((s) => [...s, layer_scene]);
-					that.active_layer.set(layer_scene);
-
-					layer_number = get(that.layers).length - 1;
-
-					if (sprite) {
-						renderer.render(sprite, {
-							renderTexture: layer_scene.draw_texture
-						});
-					}
-				},
-				undo: function () {
-					container.removeChild(layer_container);
-
-					_layers = get(that.layers);
-					_layers = _layers.filter((_, i) => i !== layer_number);
-					that.layers.set(_layers);
-					const new_layer = _layers[layer_number - 1] || _layers[0] || null;
-					that.active_layer.set(new_layer);
-				}
-			};
-		},
-
-		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;
-			this.active_layer.set(get(this.layers)[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;
-			this.active_layer.set(null);
-			this.layers.set([]);
-		},
-		async add_layer_from_blob(
-			container: Container,
-			renderer: IRenderer,
-			blob: Blob,
-			view: HTMLCanvasElement
-		): Promise<Command> {
-			const img = await createImageBitmap(blob);
-			const bitmap_texture = Texture.from(img);
-
-			const [w, h] = resize_to_fit(
-				bitmap_texture.width,
-				bitmap_texture.height,
-				view.width,
-				view.height
-			);
-
-			const sprite = new Sprite(bitmap_texture) as Sprite & DisplayObject;
-			sprite.zIndex = 0;
-
-			sprite.width = w;
-			sprite.height = h;
-
-			return this.add_layer(
-				container,
-				renderer,
-				view.width,
-				view.height,
-				sprite
-			);
-		},
-		get_layers() {
-			return _layers;
-		},
-		layers: writable([]),
-		active_layer: writable(null)
-	};
-}
-
-function resize_to_fit(
-	inner_width: number,
-	inner_height: number,
-	outer_width: number,
-	outer_height: number
-): [number, number] {
-	if (inner_width <= outer_width && inner_height <= outer_height) {
-		return [inner_width, inner_height];
-	}
-
-	const inner_aspect = inner_width / inner_height;
-	const outer_aspect = outer_width / outer_height;
-
-	let new_width, new_height;
-
-	if (inner_aspect > outer_aspect) {
-		new_width = outer_width;
-		new_height = outer_width / inner_aspect;
-	} else {
-		new_height = outer_height;
-		new_width = outer_height * inner_aspect;
-	}
-
-	return [new_width, new_height];
-}