@gradio/imageeditor 0.12.13 → 0.13.0

package/shared/{tools → brush}/BrushSize.svelte

@@ -10,37 +10,9 @@
 	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}
->
+<div class="wrap" use:click_outside={() => dispatch("click_outside")}>
 	<span>
 		<BrushSize />
 	</span>
@@ -49,7 +21,7 @@
 
 <style>
 	.wrap {
-		width: 100%;
+		width: 230px;
 		display: flex;
 		gap: var(--size-4);
 		background: var(--background-fill-secondary);

package/shared/{tools → brush}/ColorField.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { Eyedropper } from "@gradio/icons";
+	import { Eyedropper, Plus } from "@gradio/icons";
 	import { createEventDispatcher } from "svelte";
 
 	import tinycolor from "tinycolor2";
+	import IconButton from "../IconButton.svelte";
 	export let color: string;
 
 	export let current_mode: "hex" | "rgb" | "hsl" = "hex";
@@ -10,6 +11,7 @@
 	const dispatch = createEventDispatcher<{
 		selected: string;
 		close: void;
+		add_color: void;
 	}>();
 	const modes = [
 		["Hex", "hex"],

package/shared/{tools → brush}/ColorPicker.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { tick } from "svelte";
+	import { onMount, 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;
@@ -16,6 +15,8 @@
 	let hue_rect: DOMRect | null = null;
 	let hue_moving = false;
 
+	let opacity_moving = false;
+
 	function handle_hue_down(
 		event: MouseEvent & { currentTarget: HTMLDivElement }
 	): void {
@@ -90,11 +91,13 @@
 	): void {
 		if (sl_moving) update_color_from_mouse(event.clientX, event.clientY);
 		if (hue_moving) update_hue_from_mouse(event.clientX);
+		if (opacity_moving) update_opacity_from_mouse(event.clientX);
 	}
 
 	function handle_end(): void {
 		if (sl_moving) sl_moving = false;
 		if (hue_moving) hue_moving = false;
+		if (opacity_moving) opacity_moving = false;
 	}
 
 	async function update_mouse_from_color(color: string): Promise<void> {
@@ -122,6 +125,29 @@
 
 	let sl_wrap: HTMLDivElement;
 	let hue_wrap: HTMLDivElement;
+
+	export let opacity = 1;
+
+	let opacity_wrap: HTMLDivElement;
+
+	function handle_opacity_down(
+		event: MouseEvent & { currentTarget: HTMLDivElement }
+	): void {
+		opacity_rect = event.currentTarget.getBoundingClientRect();
+		opacity_moving = true;
+		update_opacity_from_mouse(event.clientX);
+	}
+	let opacity_rect: DOMRect | null = null;
+
+	function update_opacity_from_mouse(x: number): void {
+		if (!opacity_rect) return;
+		const _x = clamp(x - opacity_rect.left, 0, opacity_rect.width);
+		opacity = _x / opacity_rect.width;
+	}
+
+	onMount(() => {
+		opacity_rect = opacity_wrap.getBoundingClientRect();
+	});
 </script>
 
 <svelte:window on:mousemove={handle_move} on:mouseup={handle_end} />
@@ -140,6 +166,19 @@
 	/>
 </div>
 <!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class="opacity-slider"
+	on:mousedown={handle_opacity_down}
+	style="--color:{color === 'auto' ? 'transparent' : color}"
+	bind:this={opacity_wrap}
+>
+	<div
+		class="opacity-marker"
+		style:background="white"
+		style:transform="translateX({opacity * (opacity_rect?.width ?? 1)}px)"
+	/>
+</div>
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="hue-slider" on:mousedown={handle_hue_down} bind:this={hue_wrap}>
 	<div
 		class="marker"
@@ -152,9 +191,10 @@
 	.hue-slider {
 		position: relative;
 		width: 90%;
-		margin: 10px auto;
-		height: 10px;
-		border-radius: 5px;
+		margin: 0px auto 10px auto;
+		height: 12px;
+		border-radius: 2px;
+		border: 1px solid var(--block-border-color);
 		background: linear-gradient(
 			to right,
 			hsl(0, 100%, 50%) 0%,
@@ -168,6 +208,41 @@
 		border-top: none;
 	}
 
+	.opacity-slider {
+		position: relative;
+		width: 90%;
+		margin: 10px auto 5px auto;
+		height: 12px;
+		border-radius: 2px;
+		border: 1px solid var(--block-border-color);
+		/* background: linear-gradient(45deg, #808080 25%, transparent 25%),
+			linear-gradient(-45deg, #808080 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, #808080 75%),
+			linear-gradient(-45deg, transparent 75%, #808080 75%); */
+		background:
+			linear-gradient(to right, transparent, var(--color)),
+			repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 0 0 / 10px
+				10px;
+	}
+
+	.opacity-marker {
+		position: absolute;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+	}
+
+	.opacity-slider > .opacity-marker {
+		box-shadow: 0 0 1px #888;
+		top: -4px;
+		margin: auto;
+		height: 18px;
+		width: 18px;
+		left: -9px;
+		margin: auto;
+		border: 1px solid var(--block-border-color);
+	}
+
 	.color-gradient {
 		position: relative;
 		--hue: white;
@@ -191,15 +266,17 @@
 		left: -7px;
 		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
 		pointer-events: none;
+		border: 1px solid var(--block-border-color);
 	}
 
 	.hue-slider > .marker {
 		box-shadow: 0 0 1px #888;
 		top: -3px;
 		margin: auto;
-		height: 16px;
-		width: 16px;
-		left: -8px;
-		border: 2px solid white;
+		height: 18px;
+		width: 18px;
+		left: -9px;
+
+		border: 1px solid var(--block-border-color);
 	}
 </style>

package/shared/{tools → brush}/ColorSwatch.svelte

@@ -1,31 +1,58 @@
 <script lang="ts">
 	import tinycolor from "tinycolor2";
 	import { createEventDispatcher } from "svelte";
+	import type { ColorTuple } from "./types";
+	import type { ColorInput } from "tinycolor2";
+	import IconButton from "../IconButton.svelte";
+	import { Plus } from "@gradio/icons";
+
 	export let selected_color: string;
-	export let colors: string[];
-	export let user_colors: (string | null)[] | null = [];
-	import { Palette } from "@gradio/icons";
+	export let colors: (ColorInput | ColorTuple)[];
+	export let user_colors: (ColorInput | ColorTuple)[] | 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 };
+		select: { index: number | null; color: string | null; opacity?: number };
 		edit: { index: number; color: string | null };
+		add_color: void;
 	}>();
 
 	$: _colors = show_empty ? colors : colors.filter((c) => c);
 
+	// Helper function to extract color from either a color input or a tuple
+	function get_color(color_input: ColorInput | ColorTuple): string {
+		if (Array.isArray(color_input)) {
+			return color_input[0] as string;
+		}
+		return color_input as string;
+	}
+
+	// Helper function to extract opacity from a tuple or return undefined
+	function get_opacity(
+		color_input: ColorInput | ColorTuple
+	): number | undefined {
+		if (Array.isArray(color_input)) {
+			return color_input[1];
+		}
+
+		// For string colors, check if there's opacity in the color itself
+		const color = tinycolor(color_input);
+		return color.getAlpha();
+	}
+
 	function get_formatted_color(
-		color: string,
+		color: ColorInput | ColorTuple,
 		mode: "hex" | "rgb" | "hsl"
 	): string {
+		const color_value = get_color(color);
 		if (mode === "hex") {
-			return tinycolor(color).toHexString();
+			return tinycolor(color_value).toHexString();
 		} else if (mode === "rgb") {
-			return tinycolor(color).toRgbString();
+			return tinycolor(color_value).toRgbString();
 		}
-		return tinycolor(color).toHslString();
+		return tinycolor(color_value).toHslString();
 	}
 
 	let current_index = `select-${colors.findIndex(
@@ -34,11 +61,14 @@
 			get_formatted_color(selected_color, current_mode)
 	)}`;
 
+	$: selected_opacity = get_opacity(selected_color);
+
 	function handle_select(
 		type: "edit" | "select",
 		detail: {
 			index: number;
 			color: string | null;
+			opacity?: number;
 		}
 	): void {
 		current_index = `${type}-${detail.index}`;
@@ -56,19 +86,34 @@
 {/if}
 
 <div class="swatch-wrap">
-	<span class="icon-wrap">
-		<Palette />
-	</span>
-	<div>
+	<div class="swatch-container">
 		{#if user_colors}
 			<div class="swatch">
+				{#if color_picker}
+					<IconButton
+						Icon={Plus}
+						on:click={() => dispatch("add_color")}
+						roundedness="very"
+						background={get_color(selected_color)}
+						color="white"
+					/>
+				{/if}
 				{#each user_colors as color, i}
+					{@const color_string = get_color(color)}
+					{@const opacity = get_opacity(color)}
 					<button
-						on:click={() => handle_select("edit", { index: i, color })}
+						on:click={() =>
+							handle_select("edit", {
+								index: i,
+								color: color_string,
+								opacity: opacity
+							})}
 						class="color"
 						class:empty={color === null}
-						style="background-color: {color}"
-						class:selected={`edit-${i}` === current_index}
+						style="background-color: {color_string}"
+						style:opacity
+						class:selected={`${color_string}-${opacity}` ===
+							`${selected_color}-${selected_opacity}`}
 					></button>
 				{/each}
 
@@ -80,13 +125,22 @@
 			</div>
 		{/if}
 		<menu class="swatch">
-			{#each _colors as color, i}
+			{#each _colors as color_item, i}
+				{@const color_string = get_color(color_item)}
+				{@const opacity = get_opacity(color_item)}
 				<button
-					on:click={() => handle_select("select", { index: i, color })}
+					on:click={() =>
+						handle_select("select", {
+							index: i,
+							color: color_string,
+							opacity: opacity
+						})}
 					class="color"
-					class:empty={color === null}
-					style="background-color: {color}"
-					class:selected={`select-${i}` === current_index}
+					class:empty={color_item === null}
+					style="background-color: {color_string}"
+					style:opacity
+					class:selected={`${color_string}-${opacity}` ===
+						`${selected_color}-${selected_opacity}`}
 				></button>
 			{/each}
 		</menu>
@@ -94,32 +148,31 @@
 </div>
 
 <style>
-	.icon-wrap {
-		width: 18px;
-		margin-top: 6px;
-
-		margin-left: var(--size-4);
-	}
-
 	.swatch-wrap {
 		display: flex;
 		justify-content: space-between;
 		align-items: flex-start;
-	}
-	span {
-		margin-top: 0px;
+		/* max-width: 200px; */
+		width: 205px;
 	}
 
 	span.lg {
-		margin-top: var(--spacing-xl);
+		margin-top: var(--spacing-sm);
 	}
-	.swatch {
+	.swatch-container {
 		display: flex;
-		gap: var(--size-2-5);
-		justify-content: space-around;
-		margin-bottom: var(--size-2);
-		margin-right: var(--size-6);
-		padding-left: var(--size-2);
+		flex-direction: column;
+		gap: 10px;
+		width: 100%;
+	}
+	.swatch {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, 25px);
+		gap: 8px;
+		justify-content: flex-start;
+
+		overflow: hidden;
+		justify-content: center;
 	}
 
 	.empty {
@@ -140,9 +193,9 @@
 	}
 
 	.color {
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
+		width: 25px;
+		height: 25px;
+		border-radius: var(--radius-md);
 	}
 
 	.empty.selected,
@@ -183,14 +236,14 @@
 	.colorpicker::after {
 		display: flex;
 		justify-content: center;
-		align-content: center;
+		align-items: center;
 		content: "⨯";
 		color: white;
 		font-size: var(--scale-5);
 		position: absolute;
 		width: 100%;
 		height: 100%;
-		transform: translateY(-17px);
+		transform: translateY(-7px);
 		opacity: 1;
 		transition: 0.1s;
 		top: 0;