@gradio/imageeditor 0.12.14 → 0.14.0

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

@@ -5,34 +5,9 @@ export let selected_size;
 export let min;
 export let max;
 const dispatch = createEventDispatcher();
-let width = 0;
-let height = 0;
-let c_width = 0;
-let c_height = 0;
-let wrap_el;
-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>
@@ -41,7 +16,7 @@ $: {
 
 <style>
 	.wrap {
-		width: 100%;
+		width: 230px;
 		display: flex;
 		gap: var(--size-4);
 		background: var(--background-fill-secondary);

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

@@ -1,6 +1,7 @@
-<script>import { Eyedropper } from "@gradio/icons";
+<script>import { Eyedropper, Plus } from "@gradio/icons";
 import { createEventDispatcher } from "svelte";
 import tinycolor from "tinycolor2";
+import IconButton from "../IconButton.svelte";
 export let color;
 export let current_mode = "hex";
 const dispatch = createEventDispatcher();

package/dist/shared/{tools → brush}/ColorField.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
     events: {
         selected: CustomEvent<string>;
         close: CustomEvent<void>;
+        add_color: CustomEvent<void>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -1,8 +1,7 @@
-<script>import { tick } from "svelte";
+<script>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 = null;
 let sl_moving = false;
@@ -11,6 +10,7 @@ let hue = 0;
 let hue_marker_pos = 0;
 let hue_rect = null;
 let hue_moving = false;
+let opacity_moving = false;
 function handle_hue_down(event) {
   hue_rect = event.currentTarget.getBoundingClientRect();
   hue_moving = true;
@@ -65,12 +65,16 @@ function handle_move(event) {
     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() {
   if (sl_moving)
     sl_moving = false;
   if (hue_moving)
     hue_moving = false;
+  if (opacity_moving)
+    opacity_moving = false;
 }
 async function update_mouse_from_color(color2) {
   if (sl_moving || hue_moving)
@@ -96,6 +100,23 @@ $:
   update_mouse_from_color(color);
 let sl_wrap;
 let hue_wrap;
+export let opacity = 1;
+let opacity_wrap;
+function handle_opacity_down(event) {
+  opacity_rect = event.currentTarget.getBoundingClientRect();
+  opacity_moving = true;
+  update_opacity_from_mouse(event.clientX);
+}
+let opacity_rect = null;
+function update_opacity_from_mouse(x) {
+  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} />
@@ -114,6 +135,19 @@ let hue_wrap;
 	/>
 </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"
@@ -126,9 +160,10 @@ let hue_wrap;
 	.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%,
@@ -142,6 +177,41 @@ let hue_wrap;
 		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;
@@ -165,15 +235,17 @@ let hue_wrap;
 		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/dist/shared/{tools → brush}/ColorPicker.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         color?: string | undefined;
+        opacity?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,26 +1,43 @@
 <script>import tinycolor from "tinycolor2";
 import { createEventDispatcher } from "svelte";
+import IconButton from "../IconButton.svelte";
+import { Plus } from "@gradio/icons";
 export let selected_color;
 export let colors;
 export let user_colors = [];
-import { Palette } from "@gradio/icons";
 export let show_empty = false;
 export let current_mode = "hex";
 export let color_picker = false;
 const dispatch = createEventDispatcher();
 $:
   _colors = show_empty ? colors : colors.filter((c) => c);
+function get_color(color_input) {
+  if (Array.isArray(color_input)) {
+    return color_input[0];
+  }
+  return color_input;
+}
+function get_opacity(color_input) {
+  if (Array.isArray(color_input)) {
+    return color_input[1];
+  }
+  const color = tinycolor(color_input);
+  return color.getAlpha();
+}
 function get_formatted_color(color, mode) {
+  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(
   (c) => get_formatted_color(c, current_mode) === get_formatted_color(selected_color, current_mode)
 )}`;
+$:
+  selected_opacity = get_opacity(selected_color);
 function handle_select(type, detail) {
   current_index = `${type}-${detail.index}`;
   dispatch(type, detail);
@@ -36,19 +53,34 @@ function handle_picker_click() {
 {/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}
 
@@ -60,13 +92,22 @@ function handle_picker_click() {
 			</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>
@@ -74,32 +115,31 @@ function handle_picker_click() {
 </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 {
@@ -120,9 +160,9 @@ function handle_picker_click() {
 	}
 
 	.color {
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
+		width: 25px;
+		height: 25px;
+		border-radius: var(--radius-md);
 	}
 
 	.empty.selected,
@@ -163,14 +203,14 @@ function handle_picker_click() {
 	.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;

package/dist/shared/{tools → brush}/ColorSwatch.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponent } from "svelte";
+import type { ColorTuple } from "./types";
+import type { ColorInput } from "tinycolor2";
 declare const __propDef: {
     props: {
         selected_color: string;
-        colors: string[];
-        user_colors?: ((string | null)[] | null) | undefined;
+        colors: (ColorInput | ColorTuple)[];
+        user_colors?: ((ColorInput | ColorTuple)[] | null) | undefined;
         show_empty?: boolean | undefined;
         current_mode?: ("hex" | "rgb" | "hsl") | undefined;
         color_picker?: boolean | undefined;
@@ -12,11 +14,13 @@ declare const __propDef: {
         select: CustomEvent<{
             index: number | null;
             color: string | null;
+            opacity?: number;
         }>;
         edit: CustomEvent<{
             index: number;
             color: string | null;
         }>;
+        add_color: CustomEvent<void>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/brush/brush-cursor.d.ts

@@ -0,0 +1,101 @@
+import { type FederatedPointerEvent } from "pixi.js";
+import { type ImageEditorContext } from "../core/editor";
+import { type BrushState } from "./types";
+/**
+ * Class to handle all cursor preview-related functionality for the brush tool.
+ */
+export declare class BrushCursor {
+    private image_editor_context;
+    private state;
+    private scale;
+    private cursor_graphics;
+    private cursor_container;
+    private brush_preview_container;
+    private brush_preview_graphics;
+    private is_preview_visible;
+    private is_cursor_over_image;
+    private cursor_position_check_timeout;
+    private is_brush_or_erase_active;
+    private _bound_update_cursor;
+    private _bound_check_cursor_over_image;
+    constructor(image_editor_context: ImageEditorContext, state: BrushState, scale: number);
+    /**
+     * Returns whether the cursor is currently over the image.
+     */
+    is_over_image(): boolean;
+    /**
+     * Sets up cursor-related event listeners.
+     */
+    setup_event_listeners(): void;
+    /**
+     * Removes all cursor-related event listeners.
+     */
+    cleanup_event_listeners(): void;
+    /**
+     * initializes the cursor for the brush tool.
+     */
+    initialize_cursor(): void;
+    /**
+     * updates the appearance of the cursor.
+     */
+    update_cursor_appearance(): void;
+    /**
+     * updates the position of the cursor.
+     * @param {FederatedPointerEvent} event - The pointer event.
+     */
+    update_cursor_position(event: FederatedPointerEvent): void;
+    /**
+     * checks if the cursor is over the image container.
+     * @param {FederatedPointerEvent} event - The pointer event.
+     */
+    check_cursor_over_image(event: FederatedPointerEvent): void;
+    /**
+     * updates the size of the cursor.
+     */
+    update_cursor_size(): void;
+    /**
+     * Updates whether brush or erase tool is active
+     */
+    set_active(is_active: boolean): void;
+    /**
+     * updates the visibility of the cursor.
+     */
+    update_cursor_visibility(): void;
+    /**
+     * Shows or hides the brush preview.
+     * @param {boolean} show - Whether to show the preview.
+     */
+    preview_brush(show: boolean): void;
+    /**
+     * initializes the brush preview.
+     */
+    initialize_brush_preview(): void;
+    /**
+     * updates the brush preview appearance.
+     */
+    update_brush_preview(): void;
+    /**
+     * updates the position of the brush preview to center of canvas.
+     */
+    update_brush_preview_position(): void;
+    /**
+     * Called when the pointer enters the image container.
+     */
+    on_image_container_pointer_enter(): void;
+    /**
+     * Called when the pointer leaves the image container.
+     */
+    on_image_container_pointer_leave(): void;
+    /**
+     * Updates both cursor and preview visibility based on cursor position.
+     */
+    update_cursor_and_preview_visibility(): void;
+    /**
+     * Cleans up all cursor resources.
+     */
+    cleanup(): void;
+    /**
+     * Updates the brush state.
+     */
+    update_state(state: BrushState, scale: number): void;
+}