@gradio/imageeditor 0.1.0

package/shared/tools/BrushColor.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { click_outside } from "../utils/events";
+
+	import { type Brush } from "./Brush.svelte";
+	import ColorPicker from "./ColorPicker.svelte";
+	import ColorSwatch from "./ColorSwatch.svelte";
+	import ColorField from "./ColorField.svelte";
+
+	export let colors: string[];
+	export let selected_color: string;
+	export let color_mode: Brush["color_mode"] | undefined = undefined;
+	export let recent_colors: (string | null)[] = [];
+
+	let color_picker = false;
+	let current_mode: "hex" | "rgb" | "hsl" = "hex";
+	let editing_index: number | null = null;
+
+	const dispatch = createEventDispatcher<{
+		click_outside: void;
+	}>();
+
+	function handle_color_selection(
+		{
+			index,
+			color
+		}: {
+			index: number | null;
+			color: string | null;
+		},
+		type: "core" | "user"
+	): void {
+		if (type === "user" && !color) {
+			editing_index = index;
+			color_picker = true;
+		}
+
+		if (!color) return;
+		selected_color = color;
+
+		if (type === "core") {
+			color_picker = false;
+		}
+	}
+
+	function handle_color_change(color: string): void {
+		if (editing_index === null) return;
+		recent_colors[editing_index] = color;
+	}
+
+	$: handle_color_change(selected_color);
+	let width = 0;
+	let height = 0;
+	let c_width = 0;
+	let c_height = 0;
+	let wrap_el: HTMLDivElement;
+	let anchor_right = false;
+	let anchor_top = false;
+
+	$: {
+		if (wrap_el && (width || height || c_height || c_width)) {
+			const box = wrap_el.getBoundingClientRect();
+
+			anchor_right = box.width + 30 > width / 2;
+			anchor_top = box.y < 80;
+		}
+	}
+</script>
+
+<svelte:window bind:innerHeight={height} bind:innerWidth={width} />
+
+<div
+	class="wrap"
+	class:padded={!color_picker}
+	use:click_outside={() => dispatch("click_outside")}
+	class:right={anchor_right}
+	class:top={anchor_top}
+	class:bottom={!anchor_top}
+	bind:this={wrap_el}
+	bind:clientWidth={c_width}
+	bind:clientHeight={c_height}
+>
+	{#if color_mode === "defaults"}
+		{#if color_picker}
+			<ColorPicker bind:color={selected_color} />
+			<ColorField
+				bind:current_mode
+				color={selected_color}
+				on:close={() => (color_picker = false)}
+				on:selected={({ detail }) => (selected_color = detail)}
+			/>
+		{/if}
+	{/if}
+	<ColorSwatch
+		bind:color_picker
+		{colors}
+		on:select={({ detail }) => handle_color_selection(detail, "core")}
+		on:edit={({ detail }) => handle_color_selection(detail, "user")}
+		user_colors={color_mode === "defaults" ? recent_colors : null}
+		{selected_color}
+		{current_mode}
+	/>
+</div>
+
+<style>
+	.wrap {
+		width: 230px;
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		background: var(--background-fill-secondary);
+		border: 1px solid var(--block-border-color);
+
+		border-radius: var(--radius-md);
+		box-shadow:
+			0 0 5px rgba(0, 0, 0, 0.1),
+			0 5px 30px rgba(0, 0, 0, 0.2);
+		padding-bottom: var(--size-2);
+		pointer-events: all;
+		cursor: default;
+		z-index: var(--layer-top);
+	}
+
+	.bottom {
+		bottom: 85px;
+	}
+
+	.top {
+		top: 30px;
+	}
+
+	.right {
+		right: 10px;
+	}
+	.padded {
+		padding-top: var(--size-3);
+	}
+</style>

package/shared/tools/BrushSize.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { click_outside } from "../utils/events";
+	import { createEventDispatcher } from "svelte";
+
+	export let selected_size: number;
+	export let min: number;
+	export let max: number;
+
+	const dispatch = createEventDispatcher<{
+		click_outside: void;
+	}>();
+
+	let width = 0;
+	let height = 0;
+	let c_width = 0;
+	let c_height = 0;
+	let wrap_el: HTMLDivElement;
+	let anchor_right = false;
+	let anchor_top = false;
+
+	$: {
+		if (wrap_el && (width || height || c_height || c_width)) {
+			const box = wrap_el.getBoundingClientRect();
+
+			anchor_right = box.width + 30 > width / 2;
+			anchor_top = box.y < 80;
+		}
+	}
+</script>
+
+<svelte:window bind:innerHeight={height} bind:innerWidth={width} />
+
+<div
+	class="wrap"
+	use:click_outside={() => dispatch("click_outside")}
+	bind:this={wrap_el}
+	bind:clientWidth={c_width}
+	bind:clientHeight={c_height}
+	class:right={anchor_right}
+	class:top={anchor_top}
+	class:bottom={!anchor_top}
+>
+	<input type="range" bind:value={selected_size} {min} {max} step={1} />
+</div>
+
+<style>
+	.wrap {
+		width: 180px;
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		background: var(--background-fill-secondary);
+		border: 1px solid var(--block-border-color);
+
+		border-radius: var(--radius-md);
+		box-shadow:
+			0 0 5px rgba(0, 0, 0, 0.1),
+			0 5px 30px rgba(0, 0, 0, 0.2);
+		padding: var(--size-2);
+		cursor: default;
+	}
+
+	.bottom {
+		bottom: 85px;
+	}
+
+	.top {
+		top: 30px;
+	}
+
+	.right {
+		right: 10px;
+	}
+</style>

package/shared/tools/ColorField.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import { Eyedropper } from "@gradio/icons";
+	import { createEventDispatcher } from "svelte";
+
+	import tinycolor from "tinycolor2";
+	export let color: string;
+
+	export let current_mode: "hex" | "rgb" | "hsl" = "hex";
+
+	const dispatch = createEventDispatcher<{
+		selected: string;
+		close: void;
+	}>();
+	const modes = [
+		["Hex", "hex"],
+		["RGB", "rgb"],
+		["HSL", "hsl"]
+	] as const;
+
+	function format_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();
+	}
+
+	$: color_string = format_color(color, current_mode);
+	$: color_string && dispatch("selected", color_string);
+
+	function request_eyedropper(): void {
+		// @ts-ignore
+		const eyeDropper = new EyeDropper();
+
+		eyeDropper.open().then((result: { sRGBHex: string }) => {
+			color = result.sRGBHex;
+		});
+	}
+
+	//@ts-ignore
+	const eyedropper_supported = !!window.EyeDropper;
+
+	function handle_click(): void {
+		dispatch("selected", color_string);
+		dispatch("close");
+	}
+</script>
+
+<div class="input">
+	<button class="swatch" style:background={color} on:click={handle_click}
+	></button>
+	<div>
+		<div class="input-wrap">
+			<input
+				type="text"
+				value={color_string}
+				on:change={(e) => (color = e.currentTarget.value)}
+			/>
+
+			<button class="eyedropper" on:click={request_eyedropper}>
+				{#if eyedropper_supported}
+					<Eyedropper />
+				{/if}
+			</button>
+		</div>
+		<div class="buttons">
+			{#each modes as [label, value]}
+				<button
+					class="button"
+					class:active={current_mode === value}
+					on:click={() => (current_mode = value)}>{label}</button
+				>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.input {
+		display: flex;
+		align-items: center;
+		padding: 0 10px 15px;
+	}
+
+	.input input {
+		height: 30px;
+		width: 100%;
+		flex-shrink: 1;
+		border-bottom-left-radius: 0;
+		border: 1px solid var(--block-border-color);
+		letter-spacing: -0.05rem;
+		border-left: none;
+		border-right: none;
+		font-family: var(--font-mono);
+		font-size: var(--scale-000);
+		padding-left: 15px;
+		padding-right: 0;
+		background-color: var(--background-fill-secondary);
+		color: var(--block-label-text-color);
+	}
+
+	.swatch {
+		width: 50px;
+		height: 50px;
+		border-top-left-radius: 15px;
+		border-bottom-left-radius: 15px;
+		flex-shrink: 0;
+		border: 1px solid var(--block-border-color);
+	}
+
+	.buttons button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--block-border-color);
+		background: var(--background-fill-secondary);
+		padding: 3px 6px;
+		font-size: var(--scale-000);
+		cursor: pointer;
+		border-right: none;
+		width: 100%;
+		border-top: none;
+	}
+
+	.buttons button:first-child {
+		border-left: none;
+	}
+
+	.buttons button:last-child {
+		border-bottom-right-radius: 15px;
+		border-right: 1px solid var(--block-border-color);
+	}
+
+	.buttons button:hover {
+		background: var(--background-fill-secondary-hover);
+		font-weight: var(--weight-bold);
+	}
+
+	.buttons button.active {
+		background: var(--background-fill-secondary);
+		font-weight: var(--weight-bold);
+	}
+
+	.buttons {
+		height: 20px;
+
+		display: flex;
+		justify-content: stretch;
+		gap: 0px;
+		/* padding: 0 10px; */
+	}
+
+	.input-wrap {
+		display: flex;
+	}
+
+	.eyedropper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 25px;
+		height: 30px;
+		border-top-right-radius: 15px;
+		border: 1px solid var(--block-border-color);
+		border-left: none;
+		background: var(--background-fill-secondary);
+		height: 30px;
+		padding: 7px 7px 5px 0px;
+		cursor: pointer;
+	}
+</style>

package/shared/tools/ColorPicker.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { tick } from "svelte";
+	import tinycolor from "tinycolor2";
+	import { clamp } from "../utils/pixi";
+
+	export let color = "rgb(255, 255, 255)";
+
+	let name = "world";
+	let sl_marker_pos = [0, 0];
+	let sl_rect: DOMRect | null = null;
+	let sl_moving = false;
+	let sl = [0, 0];
+
+	let hue = 0;
+	let hue_marker_pos = 0;
+	let hue_rect: DOMRect | null = null;
+	let hue_moving = false;
+
+	function handle_hue_down(
+		event: MouseEvent & { currentTarget: HTMLDivElement }
+	): void {
+		hue_rect = event.currentTarget.getBoundingClientRect();
+
+		hue_moving = true;
+		update_hue_from_mouse(event.clientX);
+	}
+
+	function update_hue_from_mouse(x: number): void {
+		if (!hue_rect) return;
+		const _x = clamp(x - hue_rect.left, 0, hue_rect.width); // Get the x-coordinate relative to the box
+		hue_marker_pos = _x;
+		const _hue = (_x / hue_rect.width) * 360; // Scale the x position to a hue value (0-360)
+
+		hue = _hue;
+
+		color = hsva_to_rgba({ h: _hue, s: sl[0], v: sl[1], a: 1 });
+	}
+
+	function hsva_to_rgba(hsva: {
+		h: number;
+		s: number;
+		v: number;
+		a: number;
+	}): string {
+		const saturation = hsva.s;
+		const value = hsva.v;
+		let chroma = saturation * value;
+		const hue_by_60 = hsva.h / 60;
+		let x = chroma * (1 - Math.abs((hue_by_60 % 2) - 1));
+		const m = value - chroma;
+
+		chroma = chroma + m;
+		x = x + m;
+
+		const index = Math.floor(hue_by_60) % 6;
+		const red = [chroma, x, m, m, x, chroma][index];
+		const green = [x, chroma, chroma, x, m, m][index];
+		const blue = [m, m, x, chroma, chroma, x][index];
+
+		return `rgba(${red * 255}, ${green * 255}, ${blue * 255}, ${hsva.a})`;
+	}
+
+	function update_color_from_mouse(x: number, y: number): void {
+		if (!sl_rect) return;
+		const _x = clamp(x - sl_rect.left, 0, sl_rect.width);
+		const _y = clamp(y - sl_rect.top, 0, sl_rect.height);
+		sl_marker_pos = [_x, _y];
+		const _hsva = {
+			h: hue * 1,
+			s: _x / sl_rect.width,
+			v: 1 - _y / sl_rect.height,
+			a: 1
+		};
+
+		sl = [_hsva.s, _hsva.v];
+
+		color = hsva_to_rgba(_hsva);
+	}
+
+	function handle_sl_down(
+		event: MouseEvent & { currentTarget: HTMLDivElement }
+	): void {
+		sl_moving = true;
+		sl_rect = event.currentTarget.getBoundingClientRect();
+		update_color_from_mouse(event.clientX, event.clientY);
+	}
+
+	function handle_move(
+		event: MouseEvent & { currentTarget: EventTarget & Window }
+	): void {
+		if (sl_moving) update_color_from_mouse(event.clientX, event.clientY);
+		if (hue_moving) update_hue_from_mouse(event.clientX);
+	}
+
+	function handle_end(): void {
+		if (sl_moving) sl_moving = false;
+		if (hue_moving) hue_moving = false;
+	}
+
+	async function update_mouse_from_color(color: string): Promise<void> {
+		if (sl_moving || hue_moving) return;
+		await tick();
+		if (!color) return;
+		if (!sl_rect) {
+			sl_rect = sl_wrap.getBoundingClientRect();
+		}
+
+		if (!hue_rect) {
+			hue_rect = hue_wrap.getBoundingClientRect();
+		}
+
+		const hsva = tinycolor(color).toHsv();
+		const _x = hsva.s * sl_rect!.width;
+		const _y = (1 - hsva.v) * sl_rect!.height;
+		sl_marker_pos = [_x, _y];
+		sl = [hsva.s, hsva.v];
+		hue = hsva.h;
+		hue_marker_pos = (hsva.h / 360) * hue_rect!.width;
+	}
+
+	$: update_mouse_from_color(color);
+
+	let sl_wrap: HTMLDivElement;
+	let hue_wrap: HTMLDivElement;
+</script>
+
+<svelte:window on:mousemove={handle_move} on:mouseup={handle_end} />
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class="color-gradient"
+	on:mousedown={handle_sl_down}
+	style="--hue:{hue}"
+	bind:this={sl_wrap}
+>
+	<div
+		class="marker"
+		style:transform="translate({sl_marker_pos[0]}px,{sl_marker_pos[1]}px)"
+		style:background={color}
+	/>
+</div>
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="hue-slider" on:mousedown={handle_hue_down} bind:this={hue_wrap}>
+	<div
+		class="marker"
+		style:background={"hsl(" + hue + ", 100%, 50%)"}
+		style:transform="translateX({hue_marker_pos}px)"
+	/>
+</div>
+
+<style>
+	.hue-slider {
+		position: relative;
+		width: 90%;
+		margin: 10px auto;
+		height: 10px;
+		border-radius: 5px;
+		background: linear-gradient(
+			to right,
+			hsl(0, 100%, 50%) 0%,
+			#ff0 17%,
+			lime 33%,
+			cyan 50%,
+			blue 67%,
+			magenta 83%,
+			red 100%
+		);
+		border-top: none;
+	}
+
+	.color-gradient {
+		position: relative;
+		--hue: white;
+
+		background: linear-gradient(rgba(0, 0, 0, 0), #000),
+			linear-gradient(90deg, #fff, hsl(var(--hue), 100%, 50%));
+		width: 100%;
+		height: 150px;
+		border-top-left-radius: 4px;
+		border-top-right-radius: 4px;
+	}
+
+	.marker {
+		position: absolute;
+		width: 14px;
+		height: 14px;
+		border-radius: 50%;
+		border: 2px solid white;
+
+		top: -7px;
+		left: -7px;
+		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
+		pointer-events: none;
+	}
+
+	.hue-slider > .marker {
+		box-shadow: 0 0 1px #888;
+		top: -3px;
+		margin: auto;
+		height: 16px;
+		width: 16px;
+		left: -8px;
+		border: 2px solid white;
+	}
+</style>