@gradio/imageeditor 0.1.0

package/shared/tools/brush.ts

@@ -0,0 +1,247 @@
+import {
+	Container,
+	Graphics,
+	Color,
+	type ColorSource,
+	type IRenderer,
+	RenderTexture,
+	Sprite
+} from "pixi.js";
+
+import type { LayerScene } from "../layers/utils";
+import { type Command } from "../utils/commands";
+import { make_graphics } from "../utils/pixi";
+
+export interface DrawCommand extends Command {
+	/**
+	 * sets the initial state to begin drawing
+	 * @param options the options for drawing
+	 * @returns
+	 */
+	start: (options: DrawOptions) => void;
+	/**
+	 * continues drawing, smoothly interpolating between points where necessary
+	 * @param options the options for drawing
+	 * @returns
+	 */
+	continue: (options: Points) => void;
+	/**
+	 * stops drawing
+	 * @returns
+	 */
+	stop: () => void;
+	/**
+	 * Whether or not the user is currently drawing.
+	 */
+	drawing: boolean;
+}
+
+/**
+ * Coordinates for a draw or erase path.
+ */
+interface Points {
+	/**
+	 * The x coordinate of the path.
+	 */
+	x: number;
+	/**
+	 * The y coordinate of the path.
+	 */
+	y: number;
+}
+
+/**
+ * Options for drawing a path.
+ */
+interface DrawOptions extends Points {
+	/**
+	 * The size of the brush.
+	 */
+	size: number;
+	/**
+	 * The color of the brush.
+	 */
+	color?: ColorSource;
+	/**
+	 * The opacity of the brush.
+	 */
+	opacity: number;
+	/**
+	 * Whether or not to set the initial texture.
+	 */
+	set_initial_texture?: boolean;
+}
+
+/**
+ * Draws a circle on the given graphics object.
+ * @param graphics the graphics object to draw on
+ * @param x the x coordinate of the circle
+ * @param y the y coordinate of the circle
+ * @param brush_color the color of the circle
+ * @param brush_size the radius of the circle
+ */
+function drawCircle(
+	graphics: Graphics,
+	x: number,
+	y: number,
+	brush_color: ColorSource = new Color("black"),
+	brush_size: number
+): void {
+	const color = new Color(brush_color);
+	graphics.beginFill(color);
+	graphics.drawCircle(x, y, brush_size);
+	graphics.endFill();
+}
+
+/**
+ * Interpolates between two points.
+ * @param point1 the first point
+ * @param point2 the second point
+ * @returns an array of points between the two points
+ */
+function interpolate(
+	point1: { x: number; y: number },
+	point2: { x: number; y: number }
+): Points[] {
+	let points: Points[] = [];
+	const dx = point2.x - point1.x;
+	const dy = point2.y - point1.y;
+	const distance = Math.sqrt(dx * dx + dy * dy);
+	const steps = Math.ceil(distance / 2);
+	const stepX = dx / steps;
+	const stepY = dy / steps;
+
+	for (let j = 0; j < steps; j++) {
+		const x = point1.x + j * stepX;
+		const y = point1.y + j * stepY;
+		points.push({ x, y });
+	}
+
+	return points;
+}
+
+export function draw_path(
+	renderer: IRenderer,
+	stage: Container,
+	layer: LayerScene,
+	mode: "draw" | "erase"
+): DrawCommand {
+	const paths: Points[] = [];
+	let initial_path: DrawOptions;
+	let graphics: Graphics;
+	let InitialTexture: RenderTexture;
+
+	let has_drawn = false;
+	let id = 0;
+
+	return {
+		drawing: false,
+		start: function ({
+			x,
+			y,
+			size,
+			color = new Color("black"),
+			opacity,
+			set_initial_texture = true
+		}: DrawOptions) {
+			if (set_initial_texture) {
+				InitialTexture = RenderTexture.create({
+					width: layer.draw_texture.width,
+					height: layer.draw_texture.height
+				});
+				renderer.render(layer.composite, {
+					renderTexture: InitialTexture
+				});
+			}
+			initial_path = { x, y, size, color, opacity };
+			paths.push({ x, y });
+			graphics = make_graphics(id++);
+
+			drawCircle(graphics, x, y, color, size);
+
+			renderer.render(graphics, {
+				renderTexture:
+					mode === "draw" ? layer.draw_texture : layer.erase_texture,
+				clear: false
+			});
+
+			this.drawing = true;
+		},
+		continue: function ({ x, y }: Points) {
+			const last_point = paths[paths.length - 1];
+			const new_points = interpolate(last_point, { x, y });
+
+			for (let i = 0; i < new_points.length; i++) {
+				const { x, y } = new_points[i];
+				drawCircle(graphics, x, y, initial_path.color, initial_path.size);
+				paths.push({ x, y });
+			}
+
+			renderer.render(graphics, {
+				renderTexture:
+					mode === "draw" ? layer.draw_texture : layer.erase_texture,
+				clear: false
+			});
+			graphics.clear();
+		},
+		stop: function () {
+			const current_sketch = RenderTexture.create({
+				width: layer.draw_texture.width,
+				height: layer.draw_texture.height
+			});
+
+			renderer.render(layer.composite, {
+				renderTexture: current_sketch
+			});
+
+			renderer.render(new Sprite(current_sketch), {
+				renderTexture: layer.draw_texture
+			});
+
+			const clear_graphics = new Graphics()
+				.beginFill(0x000000, 0) // Use a fill color with 0 alpha for transparency
+				.drawRect(0, 0, layer.erase_texture.width, layer.erase_texture.height)
+				.endFill();
+
+			renderer.render(clear_graphics, {
+				renderTexture: layer.erase_texture,
+				clear: true
+			});
+
+			has_drawn = true;
+			this.drawing = false;
+		},
+		execute: function () {
+			if (!has_drawn) {
+				for (let i = 1; i < paths.length; i++) {
+					const { x, y } = paths[i];
+					drawCircle(graphics, x, y, initial_path.color, initial_path.size);
+				}
+
+				renderer.render(graphics, {
+					renderTexture:
+						mode === "draw" ? layer.draw_texture : layer.erase_texture,
+					clear: false
+				});
+
+				this.stop!();
+			}
+		},
+		undo: function () {
+			const clear_graphics = new Graphics()
+				.beginFill(0x000000, 0)
+				.drawRect(0, 0, layer.erase_texture.width, layer.erase_texture.height)
+				.endFill();
+			renderer.render(new Sprite(InitialTexture), {
+				renderTexture: layer.draw_texture
+			});
+			renderer.render(clear_graphics, {
+				renderTexture: layer.erase_texture,
+				clear: true
+			});
+
+			this.stop!();
+			has_drawn = false;
+		}
+	};
+}

package/shared/tools/crop.ts

@@ -0,0 +1,210 @@
+import {
+	Graphics,
+	type IRenderer,
+	type Container,
+	Sprite,
+	RenderTexture
+} from "pixi.js";
+import { type Command } from "../utils/commands";
+import { spring } from "svelte/motion";
+import type { Writable } from "svelte/store";
+
+export interface CropCommand extends Command {
+	start: (
+		width: number,
+		height: number,
+		previous_crop: [number, number, number, number],
+		set_previous?: boolean
+	) => void;
+	stop: () => number;
+	continue: (crop_size: [number, number, number, number]) => void;
+}
+
+export function crop_canvas(
+	renderer: IRenderer,
+	mask_container: Container,
+	crop: Writable<[number, number, number, number]>,
+	current_opacity = 0
+): CropCommand {
+	let text: RenderTexture;
+	let sprite: Sprite;
+	const mask_graphics = new Graphics();
+	let previous_crop: [number, number, number, number];
+	let final_crop: [number, number, number, number];
+	let width: number;
+	let height: number;
+	let alpha_spring = spring(current_opacity, {
+		stiffness: 0.1,
+		damping: 0.5
+	});
+
+	let spring_value = current_opacity;
+	alpha_spring.subscribe((value) => {
+		if (!final_crop) return;
+		spring_value = value;
+		crop_mask(width, height, final_crop, true);
+	});
+
+	function crop_mask(
+		width: number,
+		height: number,
+		crop_size: [number, number, number, number],
+		preview: boolean
+	): void {
+		mask_graphics.clear();
+		if (preview) {
+			mask_graphics.beginFill(0xffffff, spring_value);
+			mask_graphics.drawRect(0, 0, width, height);
+			mask_graphics.endFill();
+		}
+		mask_graphics.beginFill(0xffffff, 1);
+		mask_graphics.drawRect(...crop_size);
+		mask_graphics.endFill();
+
+		renderer.render(mask_graphics, {
+			renderTexture: text
+		});
+	}
+
+	let clean = true;
+	let stopped = false;
+
+	return {
+		start: (
+			_width: number,
+			_height: number,
+			_previous_crop: [number, number, number, number],
+			set_previous = true
+		) => {
+			clean = false;
+			text = RenderTexture.create({
+				width: _width,
+				height: _height
+			});
+
+			crop_mask(_width, _height, _previous_crop, true);
+			sprite = new Sprite(text);
+			mask_container.mask = sprite;
+			width = _width;
+			height = _height;
+			if (set_previous)
+				previous_crop = JSON.parse(JSON.stringify(_previous_crop));
+		},
+		continue: (crop_size: [number, number, number, number]) => {
+			final_crop = JSON.parse(JSON.stringify(crop_size));
+			if (spring_value === 0.2) {
+				crop_mask(width, height, final_crop, true);
+			} else {
+				alpha_spring.set(0.2);
+			}
+		},
+
+		undo() {
+			this.start(width, height, previous_crop, false);
+			crop.set([
+				previous_crop[0] / width,
+				previous_crop[1] / height,
+				previous_crop[2] / width,
+				previous_crop[3] / height
+			]);
+			clean = true;
+		},
+		stop() {
+			stopped = true;
+			return spring_value;
+		},
+		execute() {
+			if (clean) {
+				this.start(width, height, final_crop, false);
+
+				crop.set([
+					final_crop[0] / width,
+					final_crop[1] / height,
+					final_crop[2] / width,
+					final_crop[3] / height
+				]);
+				clean = true;
+			} else {
+				if (!stopped) {
+					alpha_spring.set(0);
+				}
+
+				crop.set([
+					final_crop[0] / width,
+					final_crop[1] / height,
+					final_crop[2] / width,
+					final_crop[3] / height
+				]);
+
+				clean = true;
+			}
+		}
+	};
+}
+
+export function resize_and_reposition(
+	original_width: number,
+	original_height: number,
+	anchor: "t" | "r" | "l" | "b" | "tl" | "tr" | "bl" | "br" | "c",
+	aspect_ratio: number,
+	max_width: number,
+	max_height: number
+): {
+	new_width: number;
+	new_height: number;
+	x_offset: number;
+	y_offset: number;
+} {
+	let new_width = original_width;
+	let new_height = original_height;
+
+	// Calculate new dimensions based on aspect ratio
+	if (anchor.includes("t") || anchor.includes("b") || anchor == "c") {
+		new_width = original_height * aspect_ratio;
+	}
+	if (anchor.includes("l") || anchor.includes("r") || anchor == "c") {
+		new_height = original_width / aspect_ratio;
+	}
+
+	// Ensure aspect ratio is maintained
+	new_height = new_height || new_width / aspect_ratio;
+	new_width = new_width || new_height * aspect_ratio;
+
+	// Apply max width/height constraints and adjust dimensions
+	if (new_width > max_width) {
+		new_width = max_width;
+		new_height = new_width / aspect_ratio;
+	}
+	if (new_height > max_height) {
+		new_height = max_height;
+		new_width = new_height * aspect_ratio;
+	}
+
+	// Calculate offsets to ensure anchor position is maintained
+	let x_offset = 0;
+	let y_offset = 0;
+	if (anchor.includes("r")) {
+		x_offset = original_width - new_width;
+	} else if (anchor.includes("l")) {
+		x_offset = 0;
+	} else {
+		// Center or top/bottom center
+		x_offset = (original_width - new_width) / 2;
+	}
+
+	if (anchor.includes("b")) {
+		y_offset = original_height - new_height;
+	} else if (anchor.includes("t")) {
+		y_offset = 0;
+	} else {
+		// Center or left/right center
+		y_offset = (original_height - new_height) / 2;
+	}
+
+	return {
+		new_width: new_width,
+		new_height: new_height,
+		x_offset: x_offset,
+		y_offset: y_offset
+	};
+}

package/shared/tools/index.ts

@@ -0,0 +1,5 @@
+export { default as Tools } from "./Tools.svelte";
+export { default as Brush } from "./Brush.svelte";
+export { default as Crop } from "./Crop.svelte";
+export { default as Sources } from "./Sources.svelte";
+export * from "./types";

package/shared/tools/sources.ts

@@ -0,0 +1,114 @@
+import {
+	type Container,
+	type IRenderer,
+	Sprite,
+	Texture,
+	DisplayObject,
+	type ColorSource,
+	Color,
+	RenderTexture
+} from "pixi.js";
+
+import { type Command } from "../utils/commands";
+import { make_graphics } from "../utils/pixi";
+
+interface BgImageCommand extends Command {
+	/**
+	 * Initial setup for the bg command
+	 * @returns
+	 */
+	start: () => Promise<[number, number]>;
+}
+
+/**
+ * Adds a background image to the canvas.
+ * @param container The container to add the image to.
+ * @param renderer The renderer to use for the image.
+ * @param background The background image to add.
+ * @param resize The function to resize the canvas.
+ * @returns A command that can be used to undo the action.
+ */
+
+export function add_bg_image(
+	container: Container,
+	renderer: IRenderer,
+	background: Blob | File,
+	resize: (width: number, height: number) => void
+): BgImageCommand {
+	let sprite: Sprite & DisplayObject;
+	return {
+		async start() {
+			container.removeChildren();
+			const img = await createImageBitmap(background);
+			const bitmap_texture = Texture.from(img);
+			sprite = new Sprite(bitmap_texture) as Sprite & DisplayObject;
+			return [sprite.width, sprite.height];
+		},
+		async execute() {
+			// renderer.resize(sprite.width, sprite.height);
+			resize(sprite.width, sprite.height);
+
+			sprite.zIndex = 0;
+			container.addChild(sprite);
+		},
+		undo() {
+			container.removeChildAt(0);
+		}
+	};
+}
+
+/**
+ * Command that sets a background
+ */
+interface BgColorCommand extends Command {
+	/**
+	 * Initial setup for the bg command
+	 * @returns
+	 */
+	start: () => [number, number];
+}
+
+/**
+ * Adds a background color to the canvas.
+ * @param container The container to add the image to.
+ * @param renderer The renderer to use for the image.
+ * @param color The background color to add.
+ * @param width The width of the background.
+ * @param height The height of the background.
+ * @param resize The function to resize the canvas.
+ * @returns A command that can be used to undo the action.
+ */
+export function add_bg_color(
+	container: Container,
+	renderer: IRenderer,
+	color: ColorSource,
+	width: number,
+	height: number,
+	resize: (width: number, height: number) => void
+): BgColorCommand {
+	let sprite: Sprite & DisplayObject;
+	return {
+		start() {
+			container.removeChildren();
+			const graphics = make_graphics(1);
+			const texture = RenderTexture.create({
+				width,
+				height
+			});
+			graphics.beginFill(new Color(color));
+			graphics.drawRect(0, 0, width, height);
+			graphics.endFill();
+			renderer.render(graphics, { renderTexture: texture });
+			sprite = new Sprite(texture) as Sprite & DisplayObject;
+			return [sprite.width, sprite.height];
+		},
+		async execute() {
+			resize(sprite.width, sprite.height);
+			sprite.zIndex = 1;
+			container.addChild(sprite);
+		},
+		undo() {
+			container.removeChildren();
+		}
+	};
+}

package/shared/tools/types.ts

@@ -0,0 +1 @@
+export type tool = "draw" | "erase" | "crop" | "bg";