@gradio/imageeditor 0.1.0

package/shared/tools/ColorSwatch.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import tinycolor from "tinycolor2";
+	import { createEventDispatcher } from "svelte";
+	export let selected_color: string;
+	export let colors: string[];
+	export let user_colors: (string | null)[] | null = [];
+
+	export let show_empty = false;
+	export let current_mode: "hex" | "rgb" | "hsl" = "hex";
+	export let color_picker = false;
+	const dispatch = createEventDispatcher<{
+		select: { index: number | null; color: string | null };
+		edit: { index: number; color: string | null };
+	}>();
+
+	$: _colors = show_empty ? colors : colors.filter((c) => c);
+
+	function get_formatted_color(
+		color: string,
+		mode: "hex" | "rgb" | "hsl"
+	): string {
+		if (mode === "hex") {
+			return tinycolor(color).toHexString();
+		} else if (mode === "rgb") {
+			return tinycolor(color).toRgbString();
+		}
+		return tinycolor(color).toHslString();
+	}
+
+	let current_index = `select-${colors.findIndex(
+		(c) =>
+			get_formatted_color(c, current_mode) ===
+			get_formatted_color(selected_color, current_mode)
+	)}`;
+
+	function handle_select(
+		type: "edit" | "select",
+		detail: {
+			index: number;
+			color: string | null;
+		}
+	): void {
+		current_index = `${type}-${detail.index}`;
+		dispatch(type, detail);
+	}
+
+	function handle_picker_click(): void {
+		dispatch("select", { index: null, color: selected_color });
+		color_picker = !color_picker;
+	}
+</script>
+
+{#if user_colors}
+	<div class="swatch">
+		{#each user_colors as color, i}
+			<button
+				on:click={() => handle_select("edit", { index: i, color })}
+				class="color"
+				class:empty={color === null}
+				style="background-color: {color}"
+				class:selected={`edit-${i}` === current_index}
+			></button>
+		{/each}
+
+		<button
+			on:click={handle_picker_click}
+			class="color colorpicker"
+			class:hidden={!color_picker}
+		></button>
+	</div>
+{/if}
+<menu class="swatch">
+	{#each _colors as color, i}
+		<button
+			on:click={() => handle_select("select", { index: i, color })}
+			class="color"
+			class:empty={color === null}
+			style="background-color: {color}"
+			class:selected={`select-${i}` === current_index}
+		></button>
+	{/each}
+</menu>
+
+<style>
+	.swatch {
+		display: flex;
+		width: 100%;
+		gap: var(--size-2);
+		justify-content: center;
+		margin-bottom: var(--size-1);
+	}
+
+	.empty {
+		border: 1px solid var(--block-border-color);
+		font-weight: var(--weight-bold);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding-top: 1px;
+		text-align: center;
+		font-size: var(--scale-0);
+		cursor: pointer;
+	}
+
+	.empty::after {
+		content: "+";
+	}
+
+	.color {
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+	}
+
+	.empty.selected,
+	.color.selected {
+		border: 2px solid var(--color-accent);
+	}
+
+	.colorpicker {
+		border: 1px solid var(--block-border-color);
+
+		background: conic-gradient(
+			red,
+			#ff0 60deg,
+			lime 120deg,
+			cyan 180deg,
+			blue 240deg,
+			magenta 300deg,
+			red 360deg
+		);
+		overflow: hidden;
+		position: relative;
+		color: white;
+		cursor: pointer;
+	}
+
+	.colorpicker::before {
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.6);
+		opacity: 1;
+		transition: 0.1s;
+		top: 0;
+		left: 0;
+	}
+
+	.colorpicker::after {
+		display: flex;
+		justify-content: center;
+		align-content: center;
+		content: "⨯";
+		color: white;
+		font-size: var(--scale-5);
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		transform: translateY(-17px);
+		opacity: 1;
+		transition: 0.1s;
+		top: 0;
+	}
+
+	.colorpicker.hidden::after,
+	.colorpicker.hidden::before {
+		opacity: 0;
+	}
+</style>

package/shared/tools/Crop.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import { getContext, onDestroy, onMount, tick } from "svelte";
+
+	import { type ToolContext, TOOL_KEY } from "./Tools.svelte";
+	import { type EditorContext, EDITOR_KEY } from "../ImageEditor.svelte";
+	import { crop_canvas, resize_and_reposition, type CropCommand } from "./crop";
+
+	import Cropper from "./Cropper.svelte";
+
+	const { active_tool, register_tool } = getContext<ToolContext>(TOOL_KEY);
+	const {
+		dimensions,
+		editor_box,
+		pixi,
+		crop,
+		command_manager,
+		current_history
+	} = getContext<EditorContext>(EDITOR_KEY);
+
+	let cropper: CropCommand | null;
+
+	export let crop_constraint: [number, number] | `${string}:${string}` | null;
+
+	let _crop_constraint: number | null = null;
+	$: {
+		if (typeof crop_constraint === "string") {
+			const [w, h] = crop_constraint.split(":");
+			_crop_constraint = parseInt(w) / parseInt(h);
+		} else if (Array.isArray(crop_constraint)) {
+			_crop_constraint = crop_constraint[0] / crop_constraint[1];
+		}
+	}
+
+	let w_p = 1;
+	let h_p = 1;
+	let l_p = 0;
+	let t_p = 0;
+
+	let current_opacity = 0;
+
+	let manually_cropped = false;
+
+	$: {
+		if (!manually_cropped && _crop_constraint && $pixi && $active_tool) {
+			requestAnimationFrame(() => {
+				initial_crop();
+			});
+		}
+	}
+
+	let c: CropCommand | null = null;
+
+	async function initial_crop(): Promise<void> {
+		if (c || $current_history.previous) return;
+		const { new_height, new_width, x_offset, y_offset } = resize_and_reposition(
+			$editor_box.child_width,
+			$editor_box.child_height,
+			"c",
+			_crop_constraint!,
+
+			$editor_box.child_width,
+			$editor_box.child_height
+		);
+
+		w_p = new_width / $editor_box.child_width;
+		h_p = new_height / $editor_box.child_height;
+		l_p = x_offset / $editor_box.child_width;
+		t_p = y_offset / $editor_box.child_height;
+
+		c = crop_canvas($pixi!.renderer, $pixi!.mask_container, crop, 0.2);
+		c.start(...$dimensions, current_crop);
+
+		c.continue([
+			l_p * $dimensions[0],
+			t_p * $dimensions[1],
+			w_p * $dimensions[0],
+			h_p * $dimensions[1]
+		]);
+		c.stop();
+
+		c.execute();
+		c = null;
+		current_opacity = 0;
+	}
+
+	function handle_crop(
+		type: "start" | "stop" | "continue",
+
+		{
+			x,
+			y,
+			width,
+			height
+		}: {
+			x: number;
+			y: number;
+			width: number;
+			height: number;
+		}
+	): void {
+		if (!$pixi) return;
+
+		if (type === "start") {
+			if (cropper) {
+				current_opacity = cropper.stop();
+				cropper = null;
+			}
+
+			cropper = crop_canvas(
+				$pixi?.renderer,
+				$pixi.mask_container,
+				crop,
+				current_opacity
+			);
+			cropper.start(...$dimensions, current_crop);
+		} else if (type === "continue") {
+			if (!cropper) return;
+			cropper.continue([
+				x * $dimensions[0],
+				y * $dimensions[1],
+				width * $dimensions[0],
+				height * $dimensions[1]
+			]);
+		} else if (type === "stop") {
+			if (!cropper) return;
+			command_manager.execute(cropper);
+		}
+		manually_cropped = true;
+	}
+
+	let measured = false;
+
+	function get_measurements(): void {
+		if (measured) return;
+		if (!$editor_box.child_height) return;
+		const _height = $editor_box.child_height;
+		const _width = $editor_box.child_width;
+		const _top = $editor_box.child_top - $editor_box.parent_top;
+		const _left = $editor_box.child_left - $editor_box.parent_left;
+
+		w_p = _width / $editor_box.child_width;
+		h_p = _height / $editor_box.child_height;
+		l_p =
+			(_left - $editor_box.child_left + $editor_box.parent_left) /
+			$editor_box.child_width;
+		t_p =
+			(_top - $editor_box.child_top + $editor_box.parent_top) /
+			$editor_box.child_height;
+
+		measured = true;
+	}
+
+	let current_crop: [number, number, number, number];
+	$: current_crop = [
+		l_p * $dimensions[0],
+		t_p * $dimensions[1],
+		w_p * $dimensions[0],
+		h_p * $dimensions[1]
+	];
+
+	$: {
+		l_p = $crop[0];
+		t_p = $crop[1];
+		w_p = $crop[2];
+		h_p = $crop[3];
+	}
+
+	$: $editor_box && get_measurements();
+
+	onMount(() =>
+		register_tool("crop", {
+			default: "crop",
+			options: []
+		})
+	);
+</script>
+
+{#if $active_tool === "crop" && measured}
+	<Cropper
+		crop_constraint={_crop_constraint}
+		{w_p}
+		{h_p}
+		{l_p}
+		{t_p}
+		{editor_box}
+		on:crop_start={({ detail }) => handle_crop("start", detail)}
+		on:crop_continue={({ detail }) => handle_crop("continue", detail)}
+		on:crop_end={({ detail }) => handle_crop("stop", detail)}
+	/>
+{/if}
+
+<style>
+</style>

package/shared/tools/Cropper.svelte

@@ -0,0 +1,344 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import Handle from "./Handle.svelte";
+	import { type EditorContext } from "../ImageEditor.svelte";
+	import { clamp } from "../utils/pixi";
+	import { resize_and_reposition } from "./crop";
+
+	export let editor_box: EditorContext["editor_box"];
+	export let crop_constraint: number | null;
+
+	const dispatch = createEventDispatcher<{
+		crop_start: {
+			x: number;
+			y: number;
+			width: number;
+			height: number;
+		};
+		crop_continue: {
+			x: number;
+			y: number;
+			width: number;
+			height: number;
+		};
+		crop_end: {
+			x: number;
+			y: number;
+			width: number;
+			height: number;
+		};
+	}>();
+
+	let _height = $editor_box.child_height;
+	let _width = $editor_box.child_width;
+	let _top = $editor_box.child_top - $editor_box.parent_top;
+	let _left = $editor_box.child_left - $editor_box.parent_left;
+	let _right = $editor_box.child_right - $editor_box.parent_left;
+	let _bottom = 0;
+
+	let dragging = false;
+
+	export let w_p: number;
+	export let h_p: number;
+	export let l_p: number;
+	export let t_p: number;
+
+	const positions = ["tl", "br", "tr", "bl", "t", "b", "l", "r"] as const;
+
+	let finished: boolean;
+
+	let timer: NodeJS.Timeout;
+	let triggered = false;
+
+	$: {
+		if (dragging || position_drag) {
+			clearTimeout(timer);
+
+			finished = false;
+		} else {
+			set_finished_with_timeout_and_delay();
+		}
+	}
+
+	function set_finished_with_timeout_and_delay(): void {
+		if (timer) {
+			clearTimeout(timer);
+		}
+		timer = setTimeout(() => {
+			if (triggered) {
+				dispatch("crop_end", {
+					x: l_p,
+					y: t_p,
+					width: w_p,
+					height: h_p
+				});
+				triggered = false;
+			}
+
+			finished = true;
+			position_drag = false;
+		}, 1000);
+	}
+
+	function handle_change(
+		{
+			top,
+			bottom,
+			left,
+			right
+		}: {
+			top: number | undefined;
+			bottom: number | undefined;
+			left: number | undefined;
+			right: number | undefined;
+		},
+		position: (typeof positions)[number]
+	): void {
+		_top = clamp(
+			top ? top - $editor_box.parent_top : _top,
+			$editor_box.child_top - $editor_box.parent_top,
+			$editor_box.child_bottom - $editor_box.parent_top
+		);
+
+		_left = clamp(
+			left ? left - $editor_box.parent_left : _left,
+			$editor_box.child_left - $editor_box.parent_left,
+			$editor_box.child_right - $editor_box.parent_left
+		);
+		_right = clamp(
+			right ? right - $editor_box.parent_left : _right,
+			$editor_box.child_left - $editor_box.parent_left,
+			$editor_box.child_right - $editor_box.parent_left
+		);
+		_bottom = clamp(
+			bottom ? bottom - $editor_box.parent_top : _bottom,
+			$editor_box.child_top - $editor_box.parent_top,
+			$editor_box.child_bottom - $editor_box.parent_top
+		);
+		_width = clamp(
+			right ? right - _left - $editor_box.parent_left : _width,
+			0,
+			_right - _left
+		);
+		_width = clamp(
+			left ? _right - left + $editor_box.parent_left : _width,
+			0,
+			_right - _left
+		);
+		_height = clamp(
+			bottom ? bottom - _top - $editor_box.parent_top : _height,
+			0,
+			_bottom - _top
+		);
+		_height = clamp(
+			top ? _bottom - top + $editor_box.parent_top : _height,
+			0,
+			_bottom - _top
+		);
+
+		const anchors_for_position = {
+			tl: "br",
+			tr: "bl",
+			bl: "tr",
+			br: "tl",
+			t: "b",
+			b: "t",
+			l: "r",
+			r: "l",
+			c: "c"
+		} as const;
+
+		if (crop_constraint) {
+			const max_w = ["t", "b"].includes(position)
+				? $editor_box.child_width
+				: _right - _left;
+			const max_h = ["l", "r"].includes(position)
+				? $editor_box.child_height
+				: _bottom - _top;
+			let result = resize_and_reposition(
+				_width,
+				_height,
+				anchors_for_position[position],
+				crop_constraint,
+				max_w,
+				max_h
+			);
+
+			_width = result.new_width;
+			_height = result.new_height;
+			_left = _left + result.x_offset;
+			_top = _top + result.y_offset;
+			_right = _left + _width;
+			_bottom = _top + _height;
+		}
+
+		w_p = _width / $editor_box.child_width;
+		h_p = _height / $editor_box.child_height;
+		l_p =
+			(_left - $editor_box.child_left + $editor_box.parent_left) /
+			$editor_box.child_width;
+		t_p =
+			(_top - $editor_box.child_top + $editor_box.parent_top) /
+			$editor_box.child_height;
+
+		dispatch(triggered ? "crop_continue" : "crop_start", {
+			x: l_p,
+			y: t_p,
+			width: w_p,
+			height: h_p
+		});
+
+		triggered = true;
+	}
+
+	function resize(): void {
+		_width = w_p * $editor_box.child_width;
+		_height = h_p * $editor_box.child_height;
+		_left =
+			l_p * $editor_box.child_width +
+			($editor_box.child_left - $editor_box.parent_left);
+		_top =
+			t_p * $editor_box.child_height +
+			($editor_box.child_top - $editor_box.parent_top);
+		_right = _left + _width;
+		_bottom = _top + _height;
+	}
+
+	$: $editor_box && resize();
+
+	let start_x = 0;
+	let start_y = 0;
+	let position_drag = false;
+	function handle_drag_start(e: MouseEvent): void {
+		position_drag = true;
+
+		start_x = e.clientX;
+		start_y = e.clientY;
+
+		if (!finished) return;
+		finished = false;
+		dispatch("crop_start", {
+			x: l_p,
+			y: t_p,
+			width: w_p,
+			height: h_p
+		});
+	}
+
+	function handle_drag_end(e: MouseEvent): void {
+		if (!position_drag) return;
+
+		position_drag = false;
+	}
+
+	function handle_dragging(e: MouseEvent): void {
+		if (!position_drag) return;
+
+		const x_delta = e.clientX - start_x;
+		const y_delta = e.clientY - start_y;
+
+		_left = clamp(
+			_left + x_delta,
+			$editor_box.child_left - $editor_box.parent_left,
+			$editor_box.child_right - $editor_box.parent_left - _width
+		);
+
+		_top = clamp(
+			_top + y_delta,
+			$editor_box.child_top - $editor_box.parent_top,
+			$editor_box.child_bottom - $editor_box.parent_top - _height
+		);
+
+		_right = _left + _width;
+		_bottom = _top + _height;
+
+		l_p =
+			(_left - $editor_box.child_left + $editor_box.parent_left) /
+			$editor_box.child_width;
+		t_p =
+			(_top - $editor_box.child_top + $editor_box.parent_top) /
+			$editor_box.child_height;
+
+		start_x = e.clientX;
+		start_y = e.clientY;
+		dispatch("crop_continue", {
+			x: l_p,
+			y: t_p,
+			width: w_p,
+			height: h_p
+		});
+
+		triggered = true;
+	}
+</script>
+
+<svelte:window on:mousemove={handle_dragging} on:mouseup={handle_drag_end} />
+
+<div class="wrap">
+	<div
+		class="box"
+		style:width="{_width}px"
+		style:height="{_height}px"
+		style:top="{_top}px"
+		style:left="{_left}px"
+	>
+		{#each positions as position}
+			<Handle
+				on:change={({ detail }) => handle_change(detail, position)}
+				bind:dragging
+				location={position}
+			/>
+		{/each}
+
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class="grid" class:finished on:mousedown={handle_drag_start}>
+			{#each { length: 25 } as _}
+				<div></div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.grid {
+		height: 100%;
+		width: 100%;
+		display: grid;
+		grid-template-rows: 1fr 1px 1fr 1px 1fr;
+		grid-template-columns: 1fr 1px 1fr 1px 1fr;
+		overflow: hidden;
+		transition: 0.2s;
+		opacity: 1;
+		/* pointer-events: none; */
+	}
+
+	.grid.finished {
+		opacity: 0;
+	}
+
+	.grid > div {
+		width: 100%;
+		height: 100%;
+	}
+
+	.grid > div:nth-of-type(even) {
+		background: black;
+		opacity: 0.5;
+	}
+
+	.wrap {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		/* transform: translateY(-20px); */
+	}
+
+	.box {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		border: 1px solid black;
+	}
+</style>