@gradio/imageeditor 0.12.13 → 0.13.0

package/shared/tools/Cropper.svelte

@@ -1,346 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import Handle from "./Handle.svelte";
-	import { type EditorContext } from "../ImageEditor.svelte";
-	import { clamp } from "../utils/pixi";
-	import { resize_and_reposition } from "./crop";
-
-	export let editor_box: EditorContext["editor_box"];
-	export let crop_constraint: number | null;
-
-	const dispatch = createEventDispatcher<{
-		crop_start: {
-			x: number;
-			y: number;
-			width: number;
-			height: number;
-		};
-		crop_continue: {
-			x: number;
-			y: number;
-			width: number;
-			height: number;
-		};
-		crop_end: {
-			x: number;
-			y: number;
-			width: number;
-			height: number;
-		};
-	}>();
-
-	let _height = $editor_box.child_height;
-	let _width = $editor_box.child_width;
-	let _top = $editor_box.child_top - $editor_box.parent_top;
-	let _left = $editor_box.child_left - $editor_box.parent_left;
-	let _right = $editor_box.child_right - $editor_box.parent_left;
-	let _bottom = 0;
-
-	let dragging = false;
-
-	export let w_p: number;
-	export let h_p: number;
-	export let l_p: number;
-	export let t_p: number;
-
-	const positions = ["tl", "br", "tr", "bl", "t", "b", "l", "r"] as const;
-
-	let finished: boolean;
-
-	let timer: NodeJS.Timeout;
-	let triggered = false;
-
-	$: {
-		if (dragging || position_drag) {
-			clearTimeout(timer);
-
-			finished = false;
-		} else {
-			set_finished_with_timeout_and_delay();
-		}
-	}
-
-	function set_finished_with_timeout_and_delay(): void {
-		if (timer) {
-			clearTimeout(timer);
-		}
-		timer = setTimeout(() => {
-			if (triggered) {
-				dispatch("crop_end", {
-					x: l_p,
-					y: t_p,
-					width: w_p,
-					height: h_p
-				});
-				triggered = false;
-			}
-
-			finished = true;
-			position_drag = false;
-		}, 1000);
-	}
-
-	function handle_change(
-		{
-			top,
-			bottom,
-			left,
-			right
-		}: {
-			top: number | undefined;
-			bottom: number | undefined;
-			left: number | undefined;
-			right: number | undefined;
-		},
-		position: (typeof positions)[number]
-	): void {
-		_top = clamp(
-			top ? top - $editor_box.parent_top : _top,
-			$editor_box.child_top - $editor_box.parent_top,
-			$editor_box.child_bottom - $editor_box.parent_top
-		);
-
-		_left = clamp(
-			left ? left - $editor_box.parent_left : _left,
-			$editor_box.child_left - $editor_box.parent_left,
-			$editor_box.child_right - $editor_box.parent_left
-		);
-		_right = clamp(
-			right ? right - $editor_box.parent_left : _right,
-			$editor_box.child_left - $editor_box.parent_left,
-			$editor_box.child_right - $editor_box.parent_left
-		);
-		_bottom = clamp(
-			bottom ? bottom - $editor_box.parent_top : _bottom,
-			$editor_box.child_top - $editor_box.parent_top,
-			$editor_box.child_bottom - $editor_box.parent_top
-		);
-		_width = clamp(
-			right ? right - _left - $editor_box.parent_left : _width,
-			0,
-			_right - _left
-		);
-		_width = clamp(
-			left ? _right - left + $editor_box.parent_left : _width,
-			0,
-			_right - _left
-		);
-		_height = clamp(
-			bottom ? bottom - _top - $editor_box.parent_top : _height,
-			0,
-			_bottom - _top
-		);
-		_height = clamp(
-			top ? _bottom - top + $editor_box.parent_top : _height,
-			0,
-			_bottom - _top
-		);
-
-		const anchors_for_position = {
-			tl: "br",
-			tr: "bl",
-			bl: "tr",
-			br: "tl",
-			t: "b",
-			b: "t",
-			l: "r",
-			r: "l",
-			c: "c"
-		} as const;
-
-		if (crop_constraint) {
-			const max_w = ["t", "b"].includes(position)
-				? $editor_box.child_width
-				: _right - _left;
-			const max_h = ["l", "r"].includes(position)
-				? $editor_box.child_height
-				: _bottom - _top;
-			let result = resize_and_reposition(
-				_width,
-				_height,
-				anchors_for_position[position],
-				crop_constraint,
-				max_w,
-				max_h
-			);
-
-			_width = result.new_width;
-			_height = result.new_height;
-			_left = _left + result.x_offset;
-			_top = _top + result.y_offset;
-			_right = _left + _width;
-			_bottom = _top + _height;
-		}
-
-		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;
-
-		dispatch(triggered ? "crop_continue" : "crop_start", {
-			x: l_p,
-			y: t_p,
-			width: w_p,
-			height: h_p
-		});
-
-		triggered = true;
-	}
-
-	function resize(): void {
-		_width = w_p * $editor_box.child_width;
-		_height = h_p * $editor_box.child_height;
-		_left =
-			l_p * $editor_box.child_width +
-			($editor_box.child_left - $editor_box.parent_left);
-		_top =
-			t_p * $editor_box.child_height +
-			($editor_box.child_top - $editor_box.parent_top);
-		_right = _left + _width;
-		_bottom = _top + _height;
-	}
-
-	$: $editor_box && resize();
-
-	let start_x = 0;
-	let start_y = 0;
-	let position_drag = false;
-	function handle_drag_start(e: MouseEvent): void {
-		position_drag = true;
-
-		start_x = e.clientX;
-		start_y = e.clientY;
-
-		if (!finished) return;
-		finished = false;
-		dispatch("crop_start", {
-			x: l_p,
-			y: t_p,
-			width: w_p,
-			height: h_p
-		});
-	}
-
-	function handle_drag_end(e: MouseEvent): void {
-		if (!position_drag) return;
-
-		position_drag = false;
-	}
-
-	function handle_dragging(e: MouseEvent): void {
-		if (!position_drag) return;
-
-		const x_delta = e.clientX - start_x;
-		const y_delta = e.clientY - start_y;
-
-		_left = clamp(
-			_left + x_delta,
-			$editor_box.child_left - $editor_box.parent_left,
-			$editor_box.child_right - $editor_box.parent_left - _width
-		);
-
-		_top = clamp(
-			_top + y_delta,
-			$editor_box.child_top - $editor_box.parent_top,
-			$editor_box.child_bottom - $editor_box.parent_top - _height
-		);
-
-		_right = _left + _width;
-		_bottom = _top + _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;
-
-		start_x = e.clientX;
-		start_y = e.clientY;
-		dispatch("crop_continue", {
-			x: l_p,
-			y: t_p,
-			width: w_p,
-			height: h_p
-		});
-
-		triggered = true;
-	}
-</script>
-
-<svelte:window on:mousemove={handle_dragging} on:mouseup={handle_drag_end} />
-
-<div class="wrap">
-	<div
-		class="box"
-		style:width="{_width}px"
-		style:height="{_height}px"
-		style:top="{_top}px"
-		style:left="{_left}px"
-	>
-		{#each positions as position}
-			<Handle
-				on:change={({ detail }) => handle_change(detail, position)}
-				bind:dragging
-				location={position}
-			/>
-		{/each}
-
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div class="grid" class:finished on:mousedown={handle_drag_start}>
-			{#each { length: 25 } as _}
-				<div></div>
-			{/each}
-		</div>
-	</div>
-</div>
-
-<style>
-	.grid {
-		height: 100%;
-		width: 100%;
-		display: grid;
-		grid-template-rows: 1fr 1px 1fr 1px 1fr;
-		grid-template-columns: 1fr 1px 1fr 1px 1fr;
-		overflow: hidden;
-		transition: 0.2s;
-		opacity: 1;
-		/* pointer-events: none; */
-	}
-
-	.grid.finished {
-		opacity: 0;
-	}
-
-	.grid > div {
-		width: 100%;
-		height: 100%;
-	}
-
-	.grid > div:nth-of-type(even) {
-		background: black;
-		opacity: 0.5;
-	}
-
-	.wrap {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-
-		/* transform: translateY(-20px); */
-	}
-
-	.box {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		border: 1px solid black;
-		z-index: var(--layer-top);
-	}
-</style>

package/shared/tools/Handle.svelte

@@ -1,289 +0,0 @@
-<script lang="ts">
-	import { tick, createEventDispatcher } from "svelte";
-
-	export let type = "corner";
-	export let location: "tl" | "tr" | "bl" | "br" | "t" | "b" | "l" | "r";
-
-	export let x1 = 0;
-	export let y1 = 0;
-	export let x2 = 0;
-	export let y2 = 0;
-
-	let box: DOMRect;
-	let y_offset = 0;
-	let x_offset = 0;
-	const min = 100;
-
-	let active = false;
-
-	const dispatch = createEventDispatcher<{
-		change: {
-			top: number | undefined;
-			bottom: number | undefined;
-			left: number | undefined;
-			right: number | undefined;
-		};
-	}>();
-	export let dragging = false;
-
-	let el: HTMLDivElement;
-
-	function handle_mousedown(e: MouseEvent): void {
-		box = el.getBoundingClientRect();
-		active = true;
-		dragging = true;
-
-		if (["tl", "bl", "l"].includes(location)) x_offset = e.clientX - box.right;
-		if (["tl", "tr", "t"].includes(location)) y_offset = e.clientY - box.bottom;
-		if (["tr", "r", "br"].includes(location)) x_offset = e.clientX - box.left;
-		if (["br", "b", "bl"].includes(location)) y_offset = e.clientY - box.top;
-	}
-
-	function handle_mousemove(e: MouseEvent): void {
-		if (!active) return;
-		const top_pos = e.clientY - y_offset;
-		const bottom_pos = e.clientY - y_offset;
-		const left_pos = e.clientX - x_offset;
-		const right_pos = e.clientX - x_offset;
-
-		if (["tl", "bl", "l"].includes(location)) {
-			x1 = left_pos;
-		}
-
-		if (["tl", "tr", "t"].includes(location)) {
-			y1 = top_pos;
-		}
-
-		if (["tr", "r", "br"].includes(location)) {
-			x2 = right_pos;
-		}
-
-		if (["br", "b", "bl"].includes(location)) {
-			y2 = bottom_pos;
-		}
-	}
-
-	async function handle_mouseup(e: MouseEvent): Promise<void> {
-		await tick();
-		active = false;
-		dragging = false;
-	}
-
-	function make_transform(
-		_location: typeof location,
-		x1: number,
-		x2: number,
-		y1: number,
-		y2: number
-	): string {
-		let t = undefined;
-		let l = undefined;
-		let r = undefined;
-		let b = undefined;
-
-		if (box) {
-			if (["tl", "l", "bl"].includes(_location)) {
-				l = x1;
-			}
-
-			if (["tl", "t", "tr"].includes(_location)) {
-				t = y1;
-			}
-
-			if (["tr", "r", "br"].includes(_location)) {
-				r = x2;
-			}
-
-			if (["br", "b", "bl"].includes(_location)) {
-				b = y2;
-			}
-		}
-
-		dispatch("change", { top: t, bottom: b, left: l, right: r });
-		return "";
-	}
-
-	$: transform = make_transform(location, x1, x2, y1, y2);
-</script>
-
-<svelte:window on:mousemove={handle_mousemove} on:mouseup={handle_mouseup} />
-
-<!--	svelte-ignore a11y-no-static-element-interactions -->
-<div class="hitbox {location}" on:mousedown={handle_mousedown} style:transform>
-	<div class="handle {type} {location}" bind:this={el}></div>
-</div>
-
-<style>
-	.hitbox {
-		position: absolute;
-		width: 50px;
-		height: 50px;
-		--hitbox-mid-offset: calc(50% - 25px);
-		--hitbox-corner-offset: -25px;
-		--handle-corner-offset: calc(50% - 5px);
-		--handle-mid-offset: calc(50% - 2px);
-		z-index: var(--layer-top);
-	}
-
-	/* hitbox positions  */
-	.hitbox.tl,
-	.hitbox.bl,
-	.hitbox.l {
-		left: var(--hitbox-corner-offset);
-	}
-
-	.hitbox.tr,
-	.hitbox.br,
-	.hitbox.r {
-		right: var(--hitbox-corner-offset);
-	}
-
-	.hitbox.t,
-	.hitbox.tr,
-	.hitbox.tl {
-		top: var(--hitbox-corner-offset);
-	}
-
-	.hitbox.t,
-	.hitbox.b {
-		left: var(--hitbox-mid-offset);
-	}
-
-	.hitbox.l,
-	.hitbox.r {
-		top: var(--hitbox-mid-offset);
-	}
-
-	.hitbox.b,
-	.hitbox.br,
-	.hitbox.bl {
-		bottom: var(--hitbox-corner-offset);
-	}
-
-	/* hitbox cursors */
-
-	.hitbox.tl,
-	.hitbox.br {
-		cursor: nwse-resize;
-	}
-
-	.hitbox.bl,
-	.hitbox.tr {
-		cursor: nesw-resize;
-	}
-
-	.hitbox.l,
-	.hitbox.r {
-		cursor: ew-resize;
-	}
-
-	.hitbox.t,
-	.hitbox.b {
-		cursor: ns-resize;
-	}
-
-	/* Visual handles  */
-	.handle {
-		position: absolute;
-	}
-
-	/* square to fill in corners */
-	.corner {
-		width: 4px;
-		height: 4px;
-		background: black;
-	}
-
-	/* handle segment positions  */
-	.handle.tl,
-	.handle.bl,
-	.handle.l {
-		left: var(--handle-corner-offset);
-	}
-
-	.handle.tr,
-	.handle.r,
-	.handle.br {
-		right: var(--handle-corner-offset);
-	}
-
-	.handle.tr,
-	.handle.t,
-	.handle.tl {
-		top: var(--handle-corner-offset);
-	}
-
-	.handle.br,
-	.handle.b,
-	.handle.bl {
-		bottom: var(--handle-corner-offset);
-	}
-
-	.handle.l,
-	.handle.r {
-		bottom: var(--handle-mid-offset);
-	}
-
-	.handle.t,
-	.handle.b {
-		left: var(--handle-mid-offset);
-	}
-
-	.handle::before {
-		position: absolute;
-		content: "";
-		width: 20px;
-		height: 4px;
-		background: black;
-	}
-
-	.handle::after {
-		position: absolute;
-		content: "";
-		width: 4px;
-		height: 20px;
-		background: black;
-	}
-
-	.handle.t::before,
-	.handle.b::before {
-		width: 30px;
-		left: -14px;
-	}
-
-	.handle.r::after,
-	.handle.l::after {
-		height: 30px;
-		top: -13px;
-	}
-
-	.handle.l::before,
-	.handle.r::before {
-		content: none;
-	}
-
-	.handle.t::after,
-	.handle.b::after {
-		content: none;
-	}
-
-	.handle.tr::before,
-	.handle.br::before {
-		right: 4px;
-	}
-
-	.handle.tl::before,
-	.handle.bl::before {
-		left: 4px;
-	}
-
-	.handle.tl::after,
-	.handle.tr::after {
-		top: 4px;
-	}
-
-	.handle.bl::after,
-	.handle.br::after {
-		bottom: 4px;
-	}
-</style>