@gradio/imageeditor 0.9.0 → 0.10.1

package/dist/shared/tools/Brush.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import { type ColorInput } from "tinycolor2";
+export interface Eraser {
+    /**
+     * The default size of the eraser.
+     */
+    default_size: number | "auto";
+}
+export interface Brush extends Eraser {
+    /**
+     * The default color of the brush.
+     */
+    default_color: ColorInput;
+    /**
+     * The colors to show in the color swatch
+     */
+    colors: ColorInput[];
+    /**
+     * Whether to show _only_ the color swatches specified in `colors`, or to show the color swatches specified in `colors` along with the colorpicker.
+     */
+    color_mode: "fixed" | "defaults";
+}
+declare const __propDef: any;
+export type BrushProps = typeof __propDef.props;
+export type BrushEvents = typeof __propDef.events;
+export type BrushSlots = typeof __propDef.slots;
+export default class Brush extends SvelteComponent<BrushProps, BrushEvents, BrushSlots> {
+}
+export {};

package/dist/shared/tools/BrushOptions.svelte

@@ -0,0 +1,162 @@
+<script>import { createEventDispatcher } from "svelte";
+import { click_outside } from "../utils/events";
+import {} from "./Brush.svelte";
+import ColorPicker from "./ColorPicker.svelte";
+import ColorSwatch from "./ColorSwatch.svelte";
+import ColorField from "./ColorField.svelte";
+import BrushSize from "./BrushSize.svelte";
+export let colors;
+export let selected_color;
+export let color_mode = void 0;
+export let recent_colors = [];
+export let selected_size;
+export let dimensions;
+export let parent_width;
+export let parent_height;
+export let parent_left;
+export let toolbar_box;
+export let show_swatch;
+let color_picker = false;
+let current_mode = "hex";
+let editing_index = null;
+const dispatch = createEventDispatcher();
+function handle_color_selection({
+  index,
+  color
+}, type) {
+  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) {
+  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;
+let full_screen = false;
+let anchor = "default";
+let left_anchor = 0;
+let top_anchor = null;
+$: {
+  if (wrap_el && (width || height || c_height || c_width)) {
+    const box = wrap_el.getBoundingClientRect();
+    color_picker;
+    if (box.width > parent_width) {
+      full_screen = true;
+    } else if (parent_width > box.width + 230 * 2 + 25) {
+      anchor = "default";
+      left_anchor = toolbar_box.right - parent_left + 24;
+    } else {
+      anchor = "center";
+    }
+    if (box.height + 50 > parent_height) {
+      anchor = "top";
+      top_anchor = true;
+    }
+  }
+}
+</script>
+
+<svelte:window bind:innerHeight={height} bind:innerWidth={width} />
+
+<div
+	class="wrap"
+	class:padded={!color_picker}
+	use:click_outside={() => dispatch("click_outside")}
+	class:anchor_default={anchor === "default"}
+	class:anchor_center={anchor === "center"}
+	class:anchor_top={anchor === "top"}
+	bind:this={wrap_el}
+	bind:clientWidth={c_width}
+	bind:clientHeight={c_height}
+	class:anchor={`${left_anchor}px`}
+>
+	{#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}
+	{#if show_swatch}
+		<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}
+		/>
+	{/if}
+
+	{#if color_picker || show_swatch}
+		<div class="sep"></div>
+	{/if}
+
+	<BrushSize max={dimensions[0] / 10} min={1} bind:selected_size />
+</div>
+
+<style>
+	.wrap {
+		max-width: 230px;
+		width: 90%;
+		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: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+		padding-bottom: var(--size-2);
+		pointer-events: all;
+		cursor: default;
+		z-index: var(--layer-top);
+		overflow: hidden;
+	}
+
+	.anchor_default {
+		position: absolute;
+		left: var(--left-anchor);
+		bottom: 8px;
+	}
+	.anchor_center {
+		position: absolute;
+		bottom: 50px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.anchor_top {
+		position: absolute;
+		top: 1px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.sep {
+		height: 1px;
+		background-color: var(--block-border-color);
+		margin: 0 var(--size-3);
+		margin-top: var(--size-1);
+	}
+</style>

package/dist/shared/tools/BrushOptions.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import { type Brush } from "./Brush.svelte";
+declare const __propDef: {
+    props: {
+        colors: string[];
+        selected_color: string;
+        color_mode?: Brush["color_mode"] | undefined;
+        recent_colors?: (string | null)[] | undefined;
+        selected_size: number;
+        dimensions: [number, number];
+        parent_width: number;
+        parent_height: number;
+        parent_left: number;
+        toolbar_box: DOMRect | Record<string, never>;
+        show_swatch: boolean;
+    };
+    events: {
+        click_outside: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BrushOptionsProps = typeof __propDef.props;
+export type BrushOptionsEvents = typeof __propDef.events;
+export type BrushOptionsSlots = typeof __propDef.slots;
+export default class BrushOptions extends SvelteComponent<BrushOptionsProps, BrushOptionsEvents, BrushOptionsSlots> {
+}
+export {};

package/dist/shared/tools/BrushSize.svelte

@@ -0,0 +1,60 @@
+<script>import { click_outside } from "../utils/events";
+import { createEventDispatcher } from "svelte";
+import { BrushSize } from "@gradio/icons";
+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}
+>
+	<span>
+		<BrushSize />
+	</span>
+	<input type="range" bind:value={selected_size} {min} {max} step={1} />
+</div>
+
+<style>
+	.wrap {
+		width: 100%;
+		display: flex;
+		gap: var(--size-4);
+		background: var(--background-fill-secondary);
+		padding: 0 var(--size-4);
+		cursor: default;
+		padding-top: var(--size-2-5);
+	}
+
+	input {
+		width: 100%;
+	}
+	span {
+		width: 26px;
+		color: var(--body-text-color);
+	}
+</style>

package/dist/shared/tools/BrushSize.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        selected_size: number;
+        min: number;
+        max: number;
+    };
+    events: {
+        click_outside: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BrushSizeProps = typeof __propDef.props;
+export type BrushSizeEvents = typeof __propDef.events;
+export type BrushSizeSlots = typeof __propDef.slots;
+export default class BrushSize extends SvelteComponent<BrushSizeProps, BrushSizeEvents, BrushSizeSlots> {
+}
+export {};

package/dist/shared/tools/ColorField.svelte

@@ -0,0 +1,159 @@
+<script>import { Eyedropper } from "@gradio/icons";
+import { createEventDispatcher } from "svelte";
+import tinycolor from "tinycolor2";
+export let color;
+export let current_mode = "hex";
+const dispatch = createEventDispatcher();
+const modes = [
+  ["Hex", "hex"],
+  ["RGB", "rgb"],
+  ["HSL", "hsl"]
+];
+function format_color(color2, mode) {
+  if (mode === "hex") {
+    return tinycolor(color2).toHexString();
+  } else if (mode === "rgb") {
+    return tinycolor(color2).toRgbString();
+  }
+  return tinycolor(color2).toHslString();
+}
+$:
+  color_string = format_color(color, current_mode);
+$:
+  color_string && dispatch("selected", color_string);
+function request_eyedropper() {
+  const eyeDropper = new EyeDropper();
+  eyeDropper.open().then((result) => {
+    color = result.sRGBHex;
+  });
+}
+const eyedropper_supported = !!window.EyeDropper;
+function handle_click() {
+  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/dist/shared/tools/ColorField.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color: string;
+        current_mode?: ("hex" | "rgb" | "hsl") | undefined;
+    };
+    events: {
+        selected: CustomEvent<string>;
+        close: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorFieldProps = typeof __propDef.props;
+export type ColorFieldEvents = typeof __propDef.events;
+export type ColorFieldSlots = typeof __propDef.slots;
+export default class ColorField extends SvelteComponent<ColorFieldProps, ColorFieldEvents, ColorFieldSlots> {
+}
+export {};

package/dist/shared/tools/ColorPicker.svelte

@@ -0,0 +1,179 @@
+<script>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 = null;
+let sl_moving = false;
+let sl = [0, 0];
+let hue = 0;
+let hue_marker_pos = 0;
+let hue_rect = null;
+let hue_moving = false;
+function handle_hue_down(event) {
+  hue_rect = event.currentTarget.getBoundingClientRect();
+  hue_moving = true;
+  update_hue_from_mouse(event.clientX);
+}
+function update_hue_from_mouse(x) {
+  if (!hue_rect)
+    return;
+  const _x = clamp(x - hue_rect.left, 0, hue_rect.width);
+  hue_marker_pos = _x;
+  const _hue = _x / hue_rect.width * 360;
+  hue = _hue;
+  color = hsva_to_rgba({ h: _hue, s: sl[0], v: sl[1], a: 1 });
+}
+function hsva_to_rgba(hsva) {
+  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, y) {
+  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) {
+  sl_moving = true;
+  sl_rect = event.currentTarget.getBoundingClientRect();
+  update_color_from_mouse(event.clientX, event.clientY);
+}
+function handle_move(event) {
+  if (sl_moving)
+    update_color_from_mouse(event.clientX, event.clientY);
+  if (hue_moving)
+    update_hue_from_mouse(event.clientX);
+}
+function handle_end() {
+  if (sl_moving)
+    sl_moving = false;
+  if (hue_moving)
+    hue_moving = false;
+}
+async function update_mouse_from_color(color2) {
+  if (sl_moving || hue_moving)
+    return;
+  await tick();
+  if (!color2)
+    return;
+  if (!sl_rect) {
+    sl_rect = sl_wrap.getBoundingClientRect();
+  }
+  if (!hue_rect) {
+    hue_rect = hue_wrap.getBoundingClientRect();
+  }
+  const hsva = tinycolor(color2).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;
+let hue_wrap;
+</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>

package/dist/shared/tools/ColorPicker.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorPickerProps = typeof __propDef.props;
+export type ColorPickerEvents = typeof __propDef.events;
+export type ColorPickerSlots = typeof __propDef.slots;
+export default class ColorPicker extends SvelteComponent<ColorPickerProps, ColorPickerEvents, ColorPickerSlots> {
+}
+export {};