gradio/js/imageeditor/shared/tools/Sources.svelte

<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 { IconButton } from "@gradio/atoms";

	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;



	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

			);

			$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="{$editor_box.child_height +

			($editor_box.child_top - $editor_box.parent_top)}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>