@gradio/imageeditor 0.1.0

package/shared/tools/Handle.svelte

@@ -0,0 +1,289 @@
+<script lang="ts">
+	import { tick, createEventDispatcher } from "svelte";
+
+	export let type = "corner";
+	export let location: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
+
+	export let x1 = 0;
+	export let y1 = 0;
+	export let x2 = 0;
+	export let y2 = 0;
+
+	let box: DOMRect;
+	let y_offset = 0;
+	let x_offset = 0;
+	const min = 100;
+
+	let active = false;
+
+	const dispatch = createEventDispatcher<{
+		change: {
+			top: number | undefined;
+			bottom: number | undefined;
+			left: number | undefined;
+			right: number | undefined;
+		};
+	}>();
+	export let dragging = false;
+
+	let el: HTMLDivElement;
+
+	function handle_mousedown(e: MouseEvent): void {
+		box = el.getBoundingClientRect();
+		active = true;
+		dragging = true;
+
+		if (["tl", "bl", "l"].includes(location)) x_offset = e.clientX - box.right;
+		if (["tl", "tr", "t"].includes(location)) y_offset = e.clientY - box.bottom;
+		if (["tr", "r", "br"].includes(location)) x_offset = e.clientX - box.left;
+		if (["br", "b", "bl"].includes(location)) y_offset = e.clientY - box.top;
+	}
+
+	function handle_mousemove(e: MouseEvent): void {
+		if (!active) return;
+		const top_pos = e.clientY - y_offset;
+		const bottom_pos = e.clientY - y_offset;
+		const left_pos = e.clientX - x_offset;
+		const right_pos = e.clientX - x_offset;
+
+		if (["tl", "bl", "l"].includes(location)) {
+			x1 = left_pos;
+		}
+
+		if (["tl", "tr", "t"].includes(location)) {
+			y1 = top_pos;
+		}
+
+		if (["tr", "r", "br"].includes(location)) {
+			x2 = right_pos;
+		}
+
+		if (["br", "b", "bl"].includes(location)) {
+			y2 = bottom_pos;
+		}
+	}
+
+	async function handle_mouseup(e: MouseEvent): Promise<void> {
+		await tick();
+		active = false;
+		dragging = false;
+	}
+
+	function make_transform(
+		_location: typeof location,
+		x1: number,
+		x2: number,
+		y1: number,
+		y2: number
+	): string {
+		let t = undefined;
+		let l = undefined;
+		let r = undefined;
+		let b = undefined;
+
+		if (box) {
+			if (["tl", "l", "bl"].includes(_location)) {
+				l = x1;
+			}
+
+			if (["tl", "t", "tr"].includes(_location)) {
+				t = y1;
+			}
+
+			if (["tr", "r", "br"].includes(_location)) {
+				r = x2;
+			}
+
+			if (["br", "b", "bl"].includes(_location)) {
+				b = y2;
+			}
+		}
+
+		dispatch("change", { top: t, bottom: b, left: l, right: r });
+		return "";
+	}
+
+	$: transform = make_transform(location, x1, x2, y1, y2);
+</script>
+
+<svelte:window on:mousemove={handle_mousemove} on:mouseup={handle_mouseup} />
+
+<!--	svelte-ignore a11y-no-static-element-interactions -->
+<div class="hitbox {location}" on:mousedown={handle_mousedown} style:transform>
+	<div class="handle {type} {location}" bind:this={el}></div>
+</div>
+
+<style>
+	.hitbox {
+		position: absolute;
+		width: 50px;
+		height: 50px;
+		--hitbox-mid-offset: calc(50% - 25px);
+		--hitbox-corner-offset: -25px;
+		--handle-corner-offset: calc(50% - 5px);
+		--handle-mid-offset: calc(50% - 2px);
+		z-index: 1;
+	}
+
+	/* hitbox positions  */
+	.hitbox.tl,
+	.hitbox.bl,
+	.hitbox.l {
+		left: var(--hitbox-corner-offset);
+	}
+
+	.hitbox.tr,
+	.hitbox.br,
+	.hitbox.r {
+		right: var(--hitbox-corner-offset);
+	}
+
+	.hitbox.t,
+	.hitbox.tr,
+	.hitbox.tl {
+		top: var(--hitbox-corner-offset);
+	}
+
+	.hitbox.t,
+	.hitbox.b {
+		left: var(--hitbox-mid-offset);
+	}
+
+	.hitbox.l,
+	.hitbox.r {
+		top: var(--hitbox-mid-offset);
+	}
+
+	.hitbox.b,
+	.hitbox.br,
+	.hitbox.bl {
+		bottom: var(--hitbox-corner-offset);
+	}
+
+	/* hitbox cursors */
+
+	.hitbox.tl,
+	.hitbox.br {
+		cursor: nwse-resize;
+	}
+
+	.hitbox.bl,
+	.hitbox.tr {
+		cursor: nesw-resize;
+	}
+
+	.hitbox.l,
+	.hitbox.r {
+		cursor: ew-resize;
+	}
+
+	.hitbox.t,
+	.hitbox.b {
+		cursor: ns-resize;
+	}
+
+	/* Visual handles  */
+	.handle {
+		position: absolute;
+	}
+
+	/* square to fill in corners */
+	.corner {
+		width: 4px;
+		height: 4px;
+		background: black;
+	}
+
+	/* handle segment positions  */
+	.handle.tl,
+	.handle.bl,
+	.handle.l {
+		left: var(--handle-corner-offset);
+	}
+
+	.handle.tr,
+	.handle.r,
+	.handle.br {
+		right: var(--handle-corner-offset);
+	}
+
+	.handle.tr,
+	.handle.t,
+	.handle.tl {
+		top: var(--handle-corner-offset);
+	}
+
+	.handle.br,
+	.handle.b,
+	.handle.bl {
+		bottom: var(--handle-corner-offset);
+	}
+
+	.handle.l,
+	.handle.r {
+		bottom: var(--handle-mid-offset);
+	}
+
+	.handle.t,
+	.handle.b {
+		left: var(--handle-mid-offset);
+	}
+
+	.handle::before {
+		position: absolute;
+		content: "";
+		width: 20px;
+		height: 4px;
+		background: black;
+	}
+
+	.handle::after {
+		position: absolute;
+		content: "";
+		width: 4px;
+		height: 20px;
+		background: black;
+	}
+
+	.handle.t::before,
+	.handle.b::before {
+		width: 30px;
+		left: -14px;
+	}
+
+	.handle.r::after,
+	.handle.l::after {
+		height: 30px;
+		top: -13px;
+	}
+
+	.handle.l::before,
+	.handle.r::before {
+		content: none;
+	}
+
+	.handle.t::after,
+	.handle.b::after {
+		content: none;
+	}
+
+	.handle.tr::before,
+	.handle.br::before {
+		right: 4px;
+	}
+
+	.handle.tl::before,
+	.handle.bl::before {
+		left: 4px;
+	}
+
+	.handle.tl::after,
+	.handle.tr::after {
+		top: 4px;
+	}
+
+	.handle.bl::after,
+	.handle.br::after {
+		bottom: 4px;
+	}
+</style>

package/shared/tools/Sources.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+	import { getContext, onMount, tick } from "svelte";
+	import { type ToolContext, TOOL_KEY } from "./Tools.svelte";
+	import { type EditorContext, EDITOR_KEY } from "../ImageEditor.svelte";
+	import {
+		Upload as UploadIcon,
+		Webcam as WebcamIcon,
+		ImagePaste
+	} from "@gradio/icons";
+	import { Upload } from "@gradio/upload";
+	import { Webcam } from "@gradio/image";
+	import { type I18nFormatter } from "@gradio/utils";
+
+	import { add_bg_color, add_bg_image } from "./sources";
+	import type { FileData, normalise_file } 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;
+
+	const { active_tool, register_tool } = getContext<ToolContext>(TOOL_KEY);
+	const { pixi, dimensions, register_context, reset, editor_box } =
+		getContext<EditorContext>(EDITOR_KEY);
+
+	let active_mode: "webcam" | "color" | null = null;
+	let background: Blob | File | null;
+
+	const sources_meta = {
+		upload: {
+			icon: UploadIcon,
+			label: "Upload",
+			order: 0,
+			id: "bg_upload",
+			cb() {
+				upload.open_file_upload();
+			}
+		},
+		webcam: {
+			icon: WebcamIcon,
+			label: "Webcam",
+			order: 1,
+			id: "bg_webcam",
+			cb() {
+				active_mode = "webcam";
+			}
+		},
+		clipboard: {
+			icon: ImagePaste,
+			label: "Paste",
+			order: 2,
+			id: "bg_clipboard",
+			cb() {
+				process_clipboard();
+			}
+		}
+	} as const;
+
+	$: sources_list = sources
+		.map((src) => sources_meta[src])
+		.sort((a, b) => a.order - b.order);
+
+	let upload: 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>): 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
+			);
+			$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: () => {}
+	});
+
+	onMount(() => {
+		return register_tool("bg", {
+			default: "bg_upload",
+			options: sources_list || []
+		});
+	});
+</script>
+
+<svelte:window on:keydown={handle_key} />
+
+{#if $active_tool === "bg"}
+	<div class="upload-container">
+		<Upload
+			hidden={true}
+			bind:this={upload}
+			filetype="image/*"
+			on:load={handle_upload}
+			on:error
+			{root}
+			disable_click={!sources.includes("upload")}
+			format="blob"
+		></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
+						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;
+		background-color: rgba(0, 0, 0, 0.9);
+		margin: auto;
+		z-index: var(--layer-top);
+		display: flex;
+		align-items: center;
+	}
+
+	.modal-inner {
+		width: 100%;
+	}
+</style>

package/shared/tools/Tools.svelte

@@ -0,0 +1,176 @@
+<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, meta: ToolMeta) => () => void;
+		active_tool: {
+			subscribe(
+				this: void,
+				run: Subscriber<tool | null>,
+				invalidate?: Invalidator<tool | null>
+			): Unsubscriber;
+		};
+		activate_subtool: (
+			sub_tool: upload_tool | transform_tool | brush_tool | eraser_tool | null,
+			cb?: (...args: any[]) => void
+		) => void;
+		current_color: Writable<string>;
+	}
+</script>
+
+<script lang="ts">
+	import { Toolbar, IconButton } from "@gradio/atoms";
+	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 { current_history, active_tool } =
+		getContext<EditorContext>(EDITOR_KEY);
+
+	export let i18n: I18nFormatter;
+
+	let tools: tool[] = [];
+
+	const metas: Record<tool, ToolMeta | null> = {
+		draw: null,
+		erase: null,
+		crop: null,
+		bg: null
+	};
+
+	$: sub_menu = $active_tool && metas[$active_tool];
+	let current_color = writable("#000000");
+	let sub_tool: upload_tool | transform_tool | brush_tool | eraser_tool | null;
+	const tool_context: ToolContext = {
+		current_color,
+		register_tool: (type: tool, meta: ToolMeta) => {
+			tools = [...tools, type];
+			metas[type] = meta;
+
+			return () => {
+				tools = tools.filter((tool) => tool !== type);
+			};
+		},
+
+		active_tool: {
+			subscribe: active_tool.subscribe
+		},
+
+		activate_subtool: (
+			_sub_tool: upload_tool | transform_tool | brush_tool | eraser_tool | null,
+			cb?: (...args: any[]) => void
+		) => {
+			sub_tool = _sub_tool;
+			if (cb) cb();
+		}
+	};
+
+	setContext<ToolContext>(TOOL_KEY, tool_context);
+
+	const tools_meta: Record<
+		tool,
+		{
+			order: number;
+			label: string;
+			icon: typeof Image;
+		}
+	> = {
+		bg: {
+			order: 0,
+			label: i18n("Image"),
+			icon: 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
+		}
+	} as const;
+</script>
+
+<slot />
+
+<div class="toolbar-wrap">
+	<Toolbar show_border={false}>
+		{#if sub_menu}
+			{#each sub_menu.options as meta (meta.id)}
+				<IconButton
+					highlight={sub_tool === meta.id && meta.id !== "brush_size"}
+					color={$active_tool === "draw" && meta.id === "brush_size"
+						? $current_color
+						: undefined}
+					on:click={() => tool_context.activate_subtool(meta.id, meta.cb)}
+					Icon={meta.icon}
+					size="large"
+					padded={false}
+					label={meta.label + " button"}
+					hasPopup={true}
+					transparent={true}
+				/>
+			{/each}
+		{/if}
+	</Toolbar>
+
+	<Toolbar show_border={false}>
+		{#each tools as tool (tool)}
+			<IconButton
+				disabled={tool === "bg" && !!$current_history.previous}
+				highlight={$active_tool === tool}
+				on:click={() => ($active_tool = tool)}
+				Icon={tools_meta[tool].icon}
+				size="large"
+				padded={false}
+				label={tools_meta[tool].label + " button"}
+				transparent={true}
+			/>
+		{/each}
+	</Toolbar>
+</div>
+
+<style>
+	.toolbar-wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+	}
+</style>