@gradio/imageeditor 0.12.14 → 0.13.0

package/shared/tools/crop.ts

@@ -1,213 +0,0 @@
-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],
-		preview?: boolean,
-		set_previous?: boolean
-	) => void;
-	stop: () => number;
-	continue: (
-		crop_size: [number, number, number, number],
-		preview?: boolean
-	) => void;
-}
-
-export function crop_canvas(
-	renderer: IRenderer,
-	background_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],
-			_preview = true,
-			set_previous = true
-		) => {
-			clean = false;
-			text = RenderTexture.create({
-				width: _width,
-				height: _height
-			});
-
-			crop_mask(_width, _height, _previous_crop, _preview);
-			sprite = new Sprite(text);
-			background_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], preview = true) => {
-			final_crop = JSON.parse(JSON.stringify(crop_size));
-			if (spring_value === 0.2) {
-				crop_mask(width, height, final_crop, preview);
-			} 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, { hard: true });
-				}
-				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

@@ -1,5 +0,0 @@
-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

@@ -1,195 +0,0 @@
-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]>;
-}
-
-/**
- * Calculates new dimensions and position for an image to fit within a canvas while maintaining aspect ratio
- * @param image_width Original width of the image
- * @param image_height Original height of the image
- * @param canvas_width Width of the canvas
- * @param canvas_height Height of the canvas
- * @returns Object containing new dimensions and position
- */
-export function fit_image_to_canvas(
-	image_width: number,
-	image_height: number,
-	canvas_width: number,
-	canvas_height: number
-): {
-	width: number;
-	height: number;
-	x: number;
-	y: number;
-} {
-	const image_aspect_ratio = image_width / image_height;
-	const canvas_aspect_ratio = canvas_width / canvas_height;
-
-	let new_width: number;
-	let new_height: number;
-
-	if (image_width <= canvas_width && image_height <= canvas_height) {
-		new_width = image_width;
-		new_height = image_height;
-	} else {
-		if (image_aspect_ratio > canvas_aspect_ratio) {
-			// Width is the limiting factor
-			new_width = canvas_width;
-			new_height = canvas_width / image_aspect_ratio;
-		} else {
-			// Height is the limiting factor
-			new_height = canvas_height;
-			new_width = canvas_height * image_aspect_ratio;
-		}
-	}
-
-	// Calculate position to center the image
-	const x = Math.round((canvas_width - new_width) / 2);
-	const y = Math.round((canvas_height - new_height) / 2);
-
-	return {
-		width: Math.round(new_width),
-		height: Math.round(new_height),
-		x,
-		y
-	};
-}
-
-export function add_bg_image(
-	container: Container,
-	renderer: IRenderer,
-	background: Blob | File,
-	resize: (width: number, height: number) => void,
-	canvas_size: [number, number],
-	fixed_canvas: boolean
-): 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;
-			if (!fixed_canvas) {
-				canvas_size = [sprite.width, sprite.height];
-			}
-
-			if (fixed_canvas) {
-				const [canvas_width, canvas_height] = canvas_size;
-				const { width, height, x, y } = fit_image_to_canvas(
-					sprite.width,
-					sprite.height,
-					canvas_width,
-					canvas_height
-				);
-
-				sprite.width = width;
-				sprite.height = height;
-				sprite.x = x;
-				sprite.y = y;
-
-				return canvas_size;
-			}
-			// Use existing max_height based scaling if no canvas_size
-			const x = fit_image_to_canvas(
-				sprite.width,
-				sprite.height,
-				canvas_size[0],
-				canvas_size[1]
-			);
-			sprite.width = x.width;
-			sprite.height = x.height;
-			sprite.x = 0;
-			sprite.y = 0;
-			return [x.width, x.height];
-		},
-		async execute() {
-			resize(
-				// @ts-ignore
-				fixed_canvas ? canvas_size[0] : sprite.width,
-				// @ts-ignore
-				fixed_canvas ? canvas_size[1] : 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

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