@gradio/imageeditor 0.1.0

package/shared/utils/commands.ts

@@ -0,0 +1,162 @@
+import { writable, type Writable } from "svelte/store";
+
+/**
+ * Base command interface that is added to the command_managers history
+ */
+export interface Command {
+	/**
+	 * Optionally called when the command is first executed for multi-step commands
+	 * @param args arguments to pass to the command
+	 */
+	start?: (...args: any) => any | Promise<any>;
+	/**
+	 * Optionally called when the command is continued for multi-step commands
+	 * @param args arguments to pass to the command
+	 */
+	continue?: (...args: any) => any | Promise<any>;
+	/**
+	 * Optionally called when the command is stopped for multi-step commands
+	 * @param args arguments to pass to the command
+	 */
+	stop?: (...args: any) => any | Promise<any>;
+	/**
+	 * Called by the command manager to execute the command, can act as a no-op if the work has already been done
+	 * This function must be able to recreate the command if the command is undone and redone (`stop`/`start`/`continue` will not be called again)
+	 */
+	execute(): any | Promise<any>;
+	/**
+	 * Called by the command manager to undo the command
+	 * This function must be able to undo the work done by the execute function
+	 */
+	undo(): any | Promise<any>;
+}
+
+/**
+ * Command manager interface that handles the undo/redo history
+ */
+export interface CommandManager {
+	/**
+	 * Undo the last command
+	 */
+	undo(): void;
+	/**
+	 * Redo the last undone command
+	 */
+	redo(): void;
+	/**
+	 * Execute a command and add it to the history
+	 * @param command command to execute
+	 */
+	execute(command: Command): void;
+	/**
+	 * Whether or not there are commands that can be undone
+	 * Observable store that you can subscribe to for updates
+	 */
+	readonly can_undo: Writable<boolean>;
+	/**
+	 * Whether or not there are commands that can be redone
+	 * Observable store that you can subscribe to for updates
+	 */
+	readonly can_redo: Writable<boolean>;
+	/**
+	 * Resets the history
+	 */
+	reset(): void;
+	/**
+	 * The current history node
+	 * Observable store that you can subscribe to for updates
+	 */
+	readonly current_history: Writable<CommandNode>;
+}
+
+/**
+ * Command node interface that is used to create the undo/redo history
+ */
+interface CommandNode {
+	/**
+	 * Command that the node holds
+	 */
+	command: Command | null;
+	/**
+	 * Next command in the history
+	 */
+	next: CommandNode | null;
+	/**
+	 * Previous command in the history
+	 */
+	previous: CommandNode | null;
+	/**
+	 * Push a command onto the history
+	 * @param command command to push onto the history
+	 */
+	push(command: Command): void;
+}
+
+/**
+ * Creates a command node
+ * @param command command to add to the node
+ * @returns a command node
+ */
+function command_node(command?: Command): CommandNode {
+	return {
+		command: command || null,
+		next: null,
+		previous: null,
+		push: function (command: Command) {
+			const node = command_node(command);
+			node.previous = this;
+			this.next = node;
+		}
+	};
+}
+
+/**
+ * Creates a command manager
+ * @returns a command manager
+ */
+export function command_manager(): CommandManager {
+	let history: CommandNode = command_node();
+	const can_undo = writable(false);
+	const can_redo = writable(false);
+	const current_history = writable(history);
+	return {
+		undo: function () {
+			if (history.previous) {
+				history.command?.undo();
+				history = history.previous;
+			}
+			can_undo.set(!!history.previous);
+			can_redo.set(!!history.next);
+			current_history.set(history);
+		},
+		redo: function () {
+			if (history.next) {
+				history.next.command?.execute();
+				history = history.next;
+			}
+
+			can_undo.set(!!history.previous);
+			can_redo.set(!!history.next);
+			current_history.set(history);
+		},
+		execute: function (command: Command) {
+			command.execute();
+			history.push(command);
+			history = history.next!;
+			can_undo.set(!!history.previous);
+			can_redo.set(!!history.next);
+			current_history.set(history);
+		},
+
+		can_undo,
+		can_redo,
+		current_history,
+
+		reset: function () {
+			history = command_node();
+			can_undo.set(false);
+			can_redo.set(false);
+			current_history.set(history);
+		}
+	};
+}

package/shared/utils/events.ts

@@ -0,0 +1,28 @@
+/**
+ * Svelte action to handle clicks outside of a DOM node
+ * @param node DOM node to check the click is outside of
+ * @param callback callback function to call if click is outside
+ * @returns svelte action return object with destroy method to remove event listener
+ */
+export function click_outside(
+	node: Node,
+	callback: (arg: MouseEvent) => void
+): any {
+	const handle_click = (event: MouseEvent): void => {
+		if (
+			node &&
+			!node.contains(event.target as Node) &&
+			!event.defaultPrevented
+		) {
+			callback(event);
+		}
+	};
+
+	document.addEventListener("mousedown", handle_click, true);
+
+	return {
+		destroy() {
+			document.removeEventListener("mousedown", handle_click, true);
+		}
+	};
+}

package/shared/utils/pixi.ts

@@ -0,0 +1,296 @@
+import {
+	Application,
+	Container,
+	Graphics,
+	Sprite,
+	Rectangle,
+	RenderTexture,
+	type IRenderer,
+	type DisplayObject,
+	type ICanvas
+} from "pixi.js";
+
+import { type LayerScene } from "../layers/utils";
+import { background } from "@storybook/theming";
+
+/**
+ * interface holding references to pixi app components
+ */
+export interface PixiApp {
+	/**
+	 * The pixi container for layers
+	 */
+	layer_container: Container;
+	/**
+	 * The pixi container for background images and colors
+	 */
+	background_container: Container;
+	/**
+	 * The pixi renderer
+	 */
+	renderer: IRenderer;
+	/**
+	 * The pixi canvas
+	 */
+	view: HTMLCanvasElement & ICanvas;
+	/**
+	 * The pixi container for masking
+	 */
+	mask_container: Container;
+	destroy(): void;
+	/**
+	 * Resizes the pixi app
+	 * @param width the new width
+	 * @param height the new height
+	 */
+	resize(width: number, height: number): void;
+	/**
+	 * Gets the blobs for the background, layers, and composite
+	 * @param bounds the bounds of the canvas
+	 * @returns a promise with the blobs
+	 */
+	get_blobs(
+		layers: LayerScene[],
+		bounds: Rectangle,
+		dimensions: [number, number]
+	): Promise<ImageBlobs>;
+	// /**
+	//  * Resets the mask
+	//  */
+	// reset?: () => void;
+
+	/**
+	 * Gets the layers
+	 */
+	get_layers?: () => LayerScene[];
+}
+
+/**
+ * Creates a PIXI app and attaches it to a DOM element
+ * @param target DOM element to attach PIXI app to
+ * @param width Width of the PIXI app
+ * @param height Height of the PIXI app
+ * @param antialias Whether to use antialiasing
+ * @returns object with pixi container and renderer
+ */
+export function create_pixi_app(
+	target: HTMLElement,
+	width: number,
+	height: number,
+	antialias: boolean
+): PixiApp {
+	const ratio = window.devicePixelRatio || 1;
+	const app = new Application({
+		width,
+		height,
+		antialias: antialias,
+		backgroundAlpha: 0,
+		eventMode: "static"
+	});
+	const view = app.view as HTMLCanvasElement;
+	// ensure that we can sort the background and layer containers
+	app.stage.sortableChildren = true;
+	view.style.maxWidth = `${width / ratio}px`;
+	view.style.maxHeight = `${height / ratio}px`;
+	view.style.width = "100%";
+	view.style.height = "100%";
+
+	target.appendChild(app.view as HTMLCanvasElement);
+
+	// we need a separate container for the background so that we can
+	// clear its content without knowing too much about its children
+	const background_container = new Container() as Container & DisplayObject;
+	background_container.zIndex = 0;
+	const layer_container = new Container() as Container & DisplayObject;
+	layer_container.zIndex = 1;
+
+	// ensure we can reorder  layers via zIndex
+	layer_container.sortableChildren = true;
+
+	const mask_container = new Container() as Container & DisplayObject;
+	mask_container.zIndex = 1;
+	const composite_container = new Container() as Container & DisplayObject;
+	composite_container.zIndex = 0;
+
+	mask_container.addChild(background_container);
+	mask_container.addChild(layer_container);
+
+	app.stage.addChild(mask_container);
+	app.stage.addChild(composite_container);
+	const mask = new Graphics();
+	let text = RenderTexture.create({
+		width,
+		height
+	});
+	const sprite = new Sprite(text);
+
+	mask_container.mask = sprite;
+
+	app.render();
+
+	function reset_mask(width: number, height: number): void {
+		background_container.removeChildren();
+		mask.beginFill(0xffffff, 1);
+		mask.drawRect(0, 0, width, height);
+		mask.endFill();
+		text = RenderTexture.create({
+			width,
+			height
+		});
+		app.renderer.render(mask, {
+			renderTexture: text
+		});
+
+		const sprite = new Sprite(text);
+
+		mask_container.mask = sprite;
+	}
+
+	function resize(width: number, height: number): void {
+		app.renderer.resize(width, height);
+		view.style.maxWidth = `${width / ratio}px`;
+		view.style.maxHeight = `${height / ratio}px`;
+		reset_mask(width, height);
+	}
+
+	async function get_blobs(
+		_layers: LayerScene[],
+		bounds: Rectangle,
+		[w, h]: [number, number]
+	): Promise<ImageBlobs> {
+		const background = await get_canvas_blob(
+			app.renderer,
+			background_container,
+			bounds,
+			w,
+			h
+		);
+
+		const layers = await Promise.all(
+			_layers.map((layer) =>
+				get_canvas_blob(
+					app.renderer,
+					layer.composite as DisplayObject,
+					bounds,
+					w,
+					h
+				)
+			)
+		);
+
+		const composite = await get_canvas_blob(
+			app.renderer,
+			mask_container,
+			bounds,
+			w,
+			h
+		);
+
+		return {
+			background,
+			layers,
+			composite
+		};
+	}
+
+	return {
+		layer_container,
+		renderer: app.renderer,
+		destroy: () => app.destroy(true),
+		view: app.view as HTMLCanvasElement & ICanvas,
+		background_container,
+		mask_container,
+		resize,
+		get_blobs
+	};
+}
+
+/**
+ * Creates a pixi graphics object.
+ * @param z_index the z index of the graphics object
+ * @returns a graphics object
+ */
+export function make_graphics(z_index: number): Graphics {
+	const graphics = new Graphics();
+	graphics.eventMode = "none";
+	graphics.zIndex = z_index;
+
+	return graphics;
+}
+
+/**
+ * Clamps a number between a min and max value.
+ * @param n The number to clamp.
+ * @param min The minimum value.
+ * @param max The maximum value.
+ * @returns The clamped number.
+ */
+export function clamp(n: number, min: number, max: number): number {
+	return n < min ? min : n > max ? max : n;
+}
+
+/**
+ * Generates a blob from a pixi object.
+ * @param renderer The pixi renderer.
+ * @param obj The pixi object to generate a blob from.
+ * @param bounds The bounds of the canvas that we wish to extract
+ * @param width The full width of the canvas
+ * @param height The full height of the canvas
+ * @returns A promise with the blob.
+ */
+function get_canvas_blob(
+	renderer: IRenderer,
+	obj: DisplayObject,
+	bounds: Rectangle,
+	width: number,
+	height: number
+): Promise<Blob | null> {
+	return new Promise((resolve) => {
+		// for some reason pixi won't extract a cropped canvas without distorting it
+		// so we have to extract the whole canvas and crop it manually
+		const src_canvas = renderer.extract.canvas(
+			obj,
+			new Rectangle(0, 0, width, height)
+		);
+
+		// Create a new canvas for the cropped area with the appropriate size
+		let dest_canvas = document.createElement("canvas");
+		dest_canvas.width = bounds.width;
+		dest_canvas.height = bounds.height;
+		let dest_ctx = dest_canvas.getContext("2d");
+
+		if (!dest_ctx) {
+			resolve(null);
+			throw new Error("Could not create canvas context");
+		}
+
+		// Draw the cropped area onto the destination canvas
+		dest_ctx.drawImage(
+			src_canvas as HTMLCanvasElement,
+			// this is the area of the source that we want to copy (the crop box)
+			bounds.x,
+			bounds.y,
+			bounds.width,
+			bounds.height,
+			// this is where we want to draw the crop box on the destination canvas
+			0,
+			0,
+			bounds.width,
+			bounds.height
+		);
+
+		// we grab a blob here so we can upload it
+		dest_canvas.toBlob?.((blob) => {
+			if (!blob) {
+				resolve(null);
+			}
+			resolve(blob);
+		});
+	});
+}
+
+export interface ImageBlobs {
+	background: Blob | null;
+	layers: (Blob | null)[];
+	composite: Blob | null;
+}