@gradio/imageeditor 0.12.13 → 0.13.0

package/shared/tools/Brush.svelte

@@ -1,280 +0,0 @@
-<script lang="ts" context="module">
-	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";
-	}
-
-	type brush_option_type = boolean;
-</script>
-
-<script lang="ts">
-	import tinycolor from "tinycolor2";
-	import { clamp } from "../utils/pixi";
-
-	import { getContext, onMount, tick } from "svelte";
-	import { type ToolContext, TOOL_KEY } from "./Tools.svelte";
-	import { type EditorContext, EDITOR_KEY } from "../ImageEditor.svelte";
-	import { draw_path, type DrawCommand } from "./brush";
-	import BrushOptions from "./BrushOptions.svelte";
-	import type { FederatedPointerEvent } from "pixi.js";
-
-	export let default_size: Brush["default_size"];
-	export let default_color: Brush["default_color"] | undefined = undefined;
-	export let colors: Brush["colors"] | undefined = undefined;
-	export let color_mode: Brush["color_mode"] | undefined = undefined;
-	export let mode: "erase" | "draw";
-
-	let processed_colors: string[] = [];
-	let old_colors: string[] = [];
-	if (colors && JSON.stringify(old_colors) !== JSON.stringify(colors)) {
-		processed_colors = colors.map(process_color).filter((_, i) => i < 4);
-		old_colors = processed_colors;
-	}
-
-	let selected_color = process_color(default_color || "#000000");
-
-	$: if (mode === "draw") {
-		current_color.set(selected_color);
-	}
-
-	let brush_options: brush_option_type = false;
-
-	const {
-		pixi,
-		dimensions,
-		current_layer,
-		command_manager,
-		register_context,
-		editor_box,
-		crop,
-		toolbar_box
-	} = getContext<EditorContext>(EDITOR_KEY);
-
-	const { active_tool, register_tool, current_color } =
-		getContext<ToolContext>(TOOL_KEY);
-
-	let drawing = false;
-	let draw: DrawCommand;
-
-	function generate_sizes(x: number, y: number): number {
-		const min = clamp(Math.min(x, y), 500, 1000);
-
-		return Math.round((min * 2) / 100);
-	}
-
-	$: mode === "draw" && current_color.set(selected_color);
-
-	let selected_size =
-		default_size === "auto" ? generate_sizes(...$dimensions) : default_size;
-
-	function pointer_down_handler(event: FederatedPointerEvent): void {
-		if ($active_tool !== mode) {
-			return;
-		}
-		drawing = true;
-
-		if (!$pixi || !$current_layer) {
-			return;
-		}
-
-		draw = draw_path(
-			$pixi.renderer!,
-			$pixi.layer_container,
-			$current_layer,
-			mode
-		);
-
-		draw.start({
-			x: event.screen.x,
-			y: event.screen.y,
-			color: selected_color || undefined,
-			size: selected_size,
-			opacity: 1
-		});
-	}
-
-	function pointer_up_handler(event: FederatedPointerEvent): void {
-		if (!$pixi || !$current_layer) {
-			return;
-		}
-		if ($active_tool !== mode) {
-			return;
-		}
-		draw.stop();
-		command_manager.execute(draw);
-		drawing = false;
-	}
-
-	function pointer_move_handler(event: FederatedPointerEvent): void {
-		if ($active_tool !== mode) {
-			return;
-		}
-		if (drawing) {
-			draw.continue({
-				x: event.screen.x,
-				y: event.screen.y
-			});
-		}
-
-		const x_bound = $crop[0] * $dimensions[0];
-		const y_bound = $crop[1] * $dimensions[1];
-
-		if (
-			x_bound > event.screen.x ||
-			y_bound > event.screen.y ||
-			event.screen.x > x_bound + $crop[2] * $dimensions[0] ||
-			event.screen.y > y_bound + $crop[3] * $dimensions[1]
-		) {
-			brush_cursor = false;
-			document.body.style.cursor = "auto";
-		} else {
-			brush_cursor = true;
-			document.body.style.cursor = "none";
-		}
-		if (brush_cursor) {
-			pos = {
-				x: event.clientX - $editor_box.child_left,
-				y: event.clientY - $editor_box.child_top
-			};
-		}
-	}
-
-	let brush_cursor = false;
-
-	async function toggle_listeners(on_off: "on" | "off"): Promise<void> {
-		$pixi?.layer_container[on_off]("pointerdown", pointer_down_handler);
-
-		$pixi?.layer_container[on_off]("pointerup", pointer_up_handler);
-
-		$pixi?.layer_container[on_off]("pointermove", pointer_move_handler);
-		$pixi?.layer_container[on_off](
-			"pointerenter",
-			(event: FederatedPointerEvent) => {
-				if ($active_tool === mode) {
-					brush_cursor = true;
-					document.body.style.cursor = "none";
-				}
-			}
-		);
-		$pixi?.layer_container[on_off](
-			"pointerleave",
-			() => ((brush_cursor = false), (document.body.style.cursor = "auto"))
-		);
-	}
-
-	register_context(mode, {
-		init_fn: () => {
-			toggle_listeners("on");
-		},
-		reset_fn: () => {
-			toggle_listeners("off");
-		}
-	});
-	const toggle_options = debounce_toggle();
-
-	const unregister = register_tool(mode, {
-		cb: toggle_options
-	});
-	onMount(() => {
-		return () => {
-			unregister();
-			toggle_listeners("off");
-		};
-	});
-
-	let recent_colors: (string | null)[] = [null, null, null];
-
-	function process_color(color: ColorInput): string {
-		return tinycolor(color).toRgbString();
-	}
-
-	let pos = { x: 0, y: 0 };
-	$: brush_size =
-		(selected_size / $dimensions[0]) * $editor_box.child_width * 2;
-
-	function debounce_toggle(): (should_close?: boolean) => void {
-		let timeout: NodeJS.Timeout | null = null;
-
-		return function executedFunction(should_close?: boolean) {
-			const later = (): void => {
-				if (timeout) {
-					clearTimeout(timeout);
-				}
-				if (should_close !== undefined) {
-					brush_options = should_close;
-					return;
-				}
-				brush_options = !brush_options;
-			};
-
-			if (timeout) {
-				clearTimeout(timeout);
-			}
-			timeout = setTimeout(later, 100);
-		};
-	}
-</script>
-
-<svelte:window
-	on:keydown={({ key }) => key === "Escape" && toggle_options(false)}
-/>
-
-<span
-	style:transform="translate({pos.x}px, {pos.y}px)"
-	style:top="{$editor_box.child_top -
-		$editor_box.parent_top -
-		brush_size / 2}px"
-	style:left="{$editor_box.child_left -
-		$editor_box.parent_left -
-		brush_size / 2}px"
-	style:width="{brush_size}px"
-	style:height="{brush_size}px"
-	style:opacity={brush_cursor ? 1 : 0}
-/>
-
-{#if brush_options}
-	<div>
-		<BrushOptions
-			show_swatch={mode === "draw"}
-			on:click_outside={() => toggle_options()}
-			colors={processed_colors}
-			bind:selected_color
-			{color_mode}
-			bind:recent_colors
-			bind:selected_size
-			dimensions={$dimensions}
-			parent_width={$editor_box.parent_width}
-			parent_height={$editor_box.parent_height}
-			parent_left={$editor_box.parent_left}
-			toolbar_box={$toolbar_box}
-		/>
-	</div>
-{/if}
-
-<style>
-	span {
-		position: absolute;
-		background: rgba(0, 0, 0, 0.5);
-		pointer-events: none;
-		border-radius: 50%;
-	}
-</style>

package/shared/tools/BrushOptions.svelte

@@ -1,180 +0,0 @@
-<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";
-	import BrushSize from "./BrushSize.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)[] = [];
-	export let selected_size: number;
-	export let dimensions: [number, number];
-	export let parent_width: number;
-	export let parent_height: number;
-	export let parent_left: number;
-	export let toolbar_box: DOMRect | Record<string, never>;
-	export let show_swatch: boolean;
-
-	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 full_screen = false;
-	let anchor: "default" | "center" | "top" = "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/shared/tools/Crop.svelte

@@ -1,189 +0,0 @@
-<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!.background_container, crop, 0.2);
-		c.start(...$dimensions, current_crop, false);
-
-		c.continue(
-			[
-				l_p * $dimensions[0],
-				t_p * $dimensions[1],
-				w_p * $dimensions[0],
-				h_p * $dimensions[1]
-			],
-			false
-		);
-		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.background_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();
-
-	const unregister = register_tool("crop");
-	onDestroy(unregister);
-</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}