@gradio/imageeditor 0.12.13 → 0.13.0

package/shared/tools/Sources.svelte

@@ -1,283 +0,0 @@
-<script lang="ts">
-	import { getContext, onMount, tick, createEventDispatcher } from "svelte";
-	import { type ToolContext, TOOL_KEY } from "./Tools.svelte";
-	import { type EditorContext, EDITOR_KEY } from "../ImageEditor.svelte";
-	import {
-		Image as ImageIcon,
-		Webcam as WebcamIcon,
-		ImagePaste
-	} from "@gradio/icons";
-	import { Upload } from "@gradio/upload";
-	import { Webcam } from "@gradio/image";
-	import { type I18nFormatter } from "@gradio/utils";
-	import { default as IconButton } from "./IconButton.svelte";
-	import { type Client } from "@gradio/client";
-
-	import { add_bg_color, add_bg_image } from "./sources";
-	import type { FileData } from "@gradio/client";
-
-	export let background_file: FileData | null;
-	export let root: string;
-	export let sources: ("upload" | "webcam" | "clipboard")[] = [
-		"upload",
-		"webcam",
-		"clipboard"
-	];
-	export let mirror_webcam = true;
-	export let i18n: I18nFormatter;
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let dragging: boolean;
-	export let canvas_size: [number, number];
-	export let fixed_canvas = false;
-
-	const { active_tool } = getContext<ToolContext>(TOOL_KEY);
-	const { pixi, dimensions, register_context, reset, editor_box } =
-		getContext<EditorContext>(EDITOR_KEY);
-
-	export let active_mode: "webcam" | "color" | null = null;
-	let background: Blob | File | null;
-
-	const dispatch = createEventDispatcher<{
-		upload: never;
-	}>();
-
-	const sources_meta = {
-		upload: {
-			icon: ImageIcon,
-			label: "Upload",
-			order: 0,
-			id: "bg_upload",
-			cb() {
-				upload_component.open_file_upload();
-
-				$active_tool = "bg";
-			}
-		},
-		webcam: {
-			icon: WebcamIcon,
-			label: "Webcam",
-			order: 1,
-			id: "bg_webcam",
-			cb() {
-				active_mode = "webcam";
-				$active_tool = "bg";
-			}
-		},
-		clipboard: {
-			icon: ImagePaste,
-			label: "Paste",
-			order: 2,
-			id: "bg_clipboard",
-			cb() {
-				process_clipboard();
-				$active_tool = null;
-			}
-		}
-	} as const;
-
-	$: sources_list = sources
-		.map((src) => sources_meta[src])
-		.sort((a, b) => a.order - b.order);
-
-	let upload_component: Upload;
-
-	async function process_clipboard(): Promise<void> {
-		const items = await navigator.clipboard.read();
-
-		for (let i = 0; i < items.length; i++) {
-			const type = items[i].types.find((t) => t.startsWith("image/"));
-			if (type) {
-				const blob = await items[i].getType(type);
-
-				background = blob || null;
-			}
-		}
-	}
-
-	function handle_upload(e: CustomEvent<Blob | any>): void {
-		const file_data = e.detail;
-		background = file_data;
-		active_mode = null;
-	}
-
-	let should_reset = true;
-
-	async function set_background(): Promise<void> {
-		if (!$pixi) return;
-		if (background) {
-			const add_image = add_bg_image(
-				$pixi.background_container,
-				$pixi.renderer,
-				background,
-				$pixi.resize,
-				canvas_size,
-				fixed_canvas
-			);
-			$dimensions = await add_image.start();
-
-			if (should_reset) {
-				reset(false, $dimensions);
-			}
-
-			add_image.execute();
-
-			should_reset = true;
-
-			await tick();
-			bg = true;
-		}
-	}
-
-	async function process_bg_file(file: FileData | null): Promise<void> {
-		if (!file || !file.url) return;
-		should_reset = false;
-
-		const blob_res = await fetch(file.url);
-		const blob = await blob_res.blob();
-		background = blob;
-	}
-
-	function handle_key(e: KeyboardEvent): void {
-		if (e.key === "Escape") {
-			active_mode = null;
-		}
-	}
-
-	$: background && set_background();
-	$: process_bg_file(background_file);
-
-	export let bg = false;
-
-	register_context("bg", {
-		init_fn: () => {
-			if (!$pixi) return;
-
-			const add_image = add_bg_color(
-				$pixi.background_container,
-				$pixi.renderer,
-				"black",
-				...$dimensions,
-				$pixi.resize
-			);
-			$dimensions = add_image.start();
-			add_image.execute();
-		},
-		reset_fn: () => {}
-	});
-</script>
-
-<svelte:window on:keydown={handle_key} />
-
-{#if sources.length}
-	<div class="source-wrap">
-		{#each sources_list as { icon, label, id, cb } (id)}
-			<IconButton
-				Icon={icon}
-				size="medium"
-				padded={false}
-				label={label + " button"}
-				hasPopup={true}
-				transparent={true}
-				on:click={cb}
-			/>
-		{/each}
-		<span class="sep"></span>
-	</div>
-	<div
-		class="upload-container"
-		class:click-disabled={!!bg ||
-			active_mode === "webcam" ||
-			$active_tool !== "bg"}
-		style:height="{Math.max(
-			$editor_box.child_height +
-				($editor_box.child_top - $editor_box.parent_top),
-			100
-		)}px"
-	>
-		<Upload
-			hidden={bg || active_mode === "webcam" || $active_tool !== "bg"}
-			bind:this={upload_component}
-			filetype="image/*"
-			on:load={handle_upload}
-			on:error
-			bind:dragging
-			{root}
-			disable_click={!sources.includes("upload")}
-			format="blob"
-			{upload}
-			{stream_handler}
-		></Upload>
-		{#if active_mode === "webcam"}
-			<div
-				class="modal"
-				style:max-width="{$editor_box.child_width}px"
-				style:max-height="{$editor_box.child_height}px"
-				style:top="{$editor_box.child_top - $editor_box.parent_top}px"
-			>
-				<div class="modal-inner">
-					<Webcam
-						{upload}
-						{root}
-						on:capture={handle_upload}
-						on:error
-						on:drag
-						{mirror_webcam}
-						streaming={false}
-						mode="image"
-						include_audio={false}
-						{i18n}
-					/>
-				</div>
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.modal {
-		position: absolute;
-		height: 100%;
-		width: 100%;
-		left: 0;
-		right: 0;
-		margin: auto;
-		z-index: var(--layer-top);
-		display: flex;
-		align-items: center;
-	}
-
-	.modal-inner {
-		width: 100%;
-	}
-
-	.sep {
-		height: 12px;
-		background-color: var(--block-border-color);
-		width: 1px;
-		display: block;
-		margin-left: var(--spacing-xl);
-	}
-
-	.source-wrap {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin-left: var(--spacing-lg);
-		height: 100%;
-	}
-
-	.upload-container {
-		position: absolute;
-		height: 100%;
-		flex-shrink: 1;
-		max-height: 100%;
-		width: 100%;
-		left: 0;
-		top: 0;
-	}
-
-	.upload-container.click-disabled {
-		pointer-events: none;
-	}
-</style>

package/shared/tools/Tools.svelte

@@ -1,162 +0,0 @@
-<script lang="ts" context="module">
-	import type {
-		Subscriber,
-		Invalidator,
-		Unsubscriber,
-		Writable
-	} from "svelte/store";
-	import type { tool } from "../tools/";
-
-	export const TOOL_KEY = Symbol("tool");
-
-	type upload_tool = "bg_webcam" | "bg_upload" | "bg_clipboard" | "bg_color";
-	type transform_tool = "crop" | "rotate";
-	type brush_tool = "brush_color" | "brush_size";
-	type eraser_tool = "eraser_size";
-
-	export interface ToolOptions {
-		order: number;
-		label: string;
-		icon: typeof Image;
-		cb: (...args: any[]) => void;
-		id: upload_tool | transform_tool | brush_tool | eraser_tool;
-	}
-
-	export interface ToolMeta {
-		default: upload_tool | transform_tool | brush_tool | eraser_tool | null;
-		options: ToolOptions[];
-	}
-
-	export interface ToolContext {
-		register_tool: (type: tool, opts?: { cb: () => void }) => () => void;
-		active_tool: {
-			set: (tool: tool) => void;
-			subscribe(
-				this: void,
-				run: Subscriber<tool | null>,
-				invalidate?: Invalidator<tool | null>
-			): Unsubscriber;
-		};
-
-		current_color: Writable<string>;
-	}
-</script>
-
-<script lang="ts">
-	import { Toolbar } from "@gradio/atoms";
-	import { default as IconButton } from "./IconButton.svelte";
-	import { getContext, setContext } from "svelte";
-	import { writable } from "svelte/store";
-	import { EDITOR_KEY, type EditorContext } from "../ImageEditor.svelte";
-	import { Image, Crop, Brush, Erase } from "@gradio/icons";
-	import { type I18nFormatter } from "@gradio/utils";
-
-	const { active_tool, toolbar_box, editor_box } =
-		getContext<EditorContext>(EDITOR_KEY);
-
-	export let i18n: I18nFormatter;
-
-	let tools: tool[] = [];
-
-	const cbs: Record<string, () => void> = {};
-	let current_color = writable("#000000");
-	const tool_context: ToolContext = {
-		current_color,
-		register_tool: (type: tool, opts?: { cb: () => void }) => {
-			tools = [...tools, type];
-			if (opts?.cb) {
-				cbs[type] = opts.cb;
-			}
-
-			return () => {
-				tools = tools.filter((tool) => tool !== type);
-			};
-		},
-
-		active_tool: {
-			subscribe: active_tool.subscribe,
-			set: active_tool.set
-		}
-	};
-
-	setContext<ToolContext>(TOOL_KEY, tool_context);
-
-	const tools_meta: Record<
-		tool,
-		{
-			order: number;
-			label: string;
-			icon: typeof Image;
-		}
-	> = {
-		crop: {
-			order: 1,
-			label: i18n("Transform"),
-			icon: Crop
-		},
-		draw: {
-			order: 2,
-			label: i18n("Draw"),
-			icon: Brush
-		},
-		erase: {
-			order: 2,
-			label: i18n("Erase"),
-			icon: Erase
-		},
-		bg: {
-			order: 0,
-			label: i18n("Background"),
-			icon: Image
-		}
-	} as const;
-
-	let toolbar_width: number;
-	let toolbar_wrap: HTMLDivElement;
-
-	$: toolbar_width, $editor_box, get_dimensions();
-
-	function get_dimensions(): void {
-		if (!toolbar_wrap) return;
-		$toolbar_box = toolbar_wrap.getBoundingClientRect();
-	}
-
-	function handle_click(e: Event, tool: tool): void {
-		e.stopPropagation();
-		$active_tool = tool;
-		cbs[tool] && cbs[tool]();
-	}
-</script>
-
-<slot />
-
-<div
-	class="toolbar-wrap"
-	bind:clientWidth={toolbar_width}
-	bind:this={toolbar_wrap}
->
-	<Toolbar show_border={false}>
-		{#each tools as tool (tool)}
-			<IconButton
-				highlight={$active_tool === tool}
-				on:click={(e) => handle_click(e, tool)}
-				Icon={tools_meta[tool].icon}
-				size="medium"
-				padded={false}
-				label={tools_meta[tool].label + " button"}
-				transparent={true}
-				offset={tool === "draw" ? -2 : tool === "erase" ? -6 : 0}
-			/>
-		{/each}
-	</Toolbar>
-</div>
-
-<style>
-	.toolbar-wrap {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin-left: var(--spacing-xl);
-		height: 100%;
-	}
-</style>

package/shared/tools/brush.ts

@@ -1,247 +0,0 @@
-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;
-		}
-	};
-}