@gradio/imageeditor 0.12.14 → 0.13.0

package/shared/Layers.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+	import { click_outside } from "./utils/events";
+	import { Layers, Clear, ArrowUp, ArrowDown, Plus } from "@gradio/icons";
+	import { IconButton } from "@gradio/atoms";
+	import { createEventDispatcher } from "svelte";
+	import type { Writable } from "svelte/store";
+
+	const dispatch = createEventDispatcher<{
+		new_layer: void;
+		change_layer: string;
+		move_layer: { id: string; direction: "up" | "down" };
+		delete_layer: string;
+	}>();
+
+	export let layers: Writable<{
+		active_layer: string;
+		layers: { name: string; id: string; user_created: boolean }[];
+	}>;
+	export let enable_additional_layers = true;
+	export let enable_layers = true;
+	export let show_layers = false;
+
+	function new_layer(): void {
+		dispatch("new_layer");
+	}
+
+	function change_layer(id: string): void {
+		dispatch("change_layer", id);
+		show_layers = false;
+	}
+
+	function move_layer(id: string, direction: "up" | "down"): void {
+		dispatch("move_layer", { id, direction });
+	}
+
+	function delete_layer(id: string): void {
+		dispatch("delete_layer", id);
+	}
+</script>
+
+{#if enable_layers}
+	<div
+		class="layer-wrap"
+		class:closed={!show_layers}
+		use:click_outside={() => (show_layers = false)}
+	>
+		<button
+			class="layer-title-button"
+			aria-label="Show Layers"
+			on:click|stopPropagation={() => (show_layers = !show_layers)}
+		>
+			{show_layers
+				? "Layers"
+				: $layers.layers.find((l) => l.id === $layers.active_layer)?.name}
+			<span class="icon"><Layers /></span>
+		</button>
+		{#if show_layers}
+			<ul>
+				{#each $layers.layers as { id, name, user_created }, i (i)}
+					<li>
+						<button
+							class:selected_layer={$layers.active_layer === id}
+							aria-label={`layer-${i + 1}`}
+							on:click|stopPropagation={() => change_layer(id)}>{name}</button
+						>
+						{#if $layers.layers.length > 1}
+							<div>
+								{#if i > 0}
+									<IconButton
+										on:click={(e) => {
+											e.stopPropagation();
+											move_layer(id, "up");
+										}}
+										Icon={ArrowUp}
+										size="x-small"
+									/>
+								{/if}
+								{#if i < $layers.layers.length - 1}
+									<IconButton
+										on:click={(e) => {
+											e.stopPropagation();
+											move_layer(id, "down");
+										}}
+										Icon={ArrowDown}
+										size="x-small"
+									/>
+								{/if}
+								{#if $layers.layers.length > 1 && user_created}
+									<IconButton
+										on:click={(e) => {
+											e.stopPropagation();
+											delete_layer(id);
+										}}
+										Icon={Clear}
+										size="x-small"
+									/>
+								{/if}
+							</div>
+						{/if}
+					</li>
+				{/each}
+				{#if enable_additional_layers}
+					<li class="add-layer">
+						<IconButton
+							Icon={Plus}
+							label="Add Layer"
+							on:click={(e) => {
+								e.stopPropagation();
+								new_layer();
+							}}
+							size="x-small"
+						/>
+					</li>
+				{/if}
+			</ul>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.add-layer {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin: var(--spacing-sm) 0 0 0;
+	}
+
+	.add-layer :global(button) {
+		width: 100%;
+	}
+	.icon {
+		width: 14px;
+		color: var(--body-text-color);
+		transition: color 0.15s ease;
+	}
+
+	.layer-wrap {
+		/* position: absolute; */
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		/* border: 1px solid var(--border-color-primary); */
+		/* z-index: var(--layer-1); */
+		/* border-radius: var(--radius-sm); */
+		/* background-color: var(--block-background-fill); */
+		width: 100%;
+		flex-direction: column;
+		/* bottom: 5px; */
+		/* right: 5px; */
+		/* border-bottom: 0;
+		border-right: 0; */
+		/* box-shadow: var(--shadow-drop); */
+	}
+
+	.layer-wrap button {
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		display: flex;
+		font-size: var(--text-sm);
+		line-height: var(--line-sm);
+		transition: all 0.15s ease;
+		padding: var(--spacing-md) var(--spacing-lg);
+		/* padding-right: var(--spacing-lg); */
+		border-radius: var(--radius-sm);
+		/* padding-left: 30px; */
+	}
+
+	button.layer-title-button {
+		width: 100%;
+		/* padding-left: 30px; */
+	}
+
+	.layer-wrap button:hover .icon {
+		color: var(--color-accent);
+	}
+
+	.selected_layer {
+		color: var(--color-accent);
+		font-weight: var(--weight-semibold);
+	}
+
+	ul {
+		/* position: absolute; */
+		bottom: 0;
+		right: 0;
+		/* background: var(--block-background-fill); */
+		width: 100%;
+		/* min-width: 100%; */
+		list-style: none;
+		z-index: var(--layer-top);
+		/* border: 1px solid var(--border-color-primary); */
+		/* border-radius: var(--radius-sm); */
+		/* box-shadow: var(--shadow-drop-lg); */
+		padding: var(--spacing-sm);
+		/* transform: translate(-1px, 1px); */
+		border-top: 1px solid var(--border-color-primary);
+	}
+
+	/* .sep {
+		height: 12px;
+		background-color: var(--block-border-color);
+		width: 1px;
+		display: block;
+		margin-left: var(--spacing-xl);
+	} */
+
+	li {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		/* border-radius: var(--radius-sm); */
+		transition: background-color 0.15s ease;
+		border-bottom: 1px solid var(--border-color-primary);
+	}
+
+	.layer-wrap ul > li > button {
+		padding-left: calc(var(--spacing-md));
+	}
+
+	li:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
+	li:last-child {
+		border-bottom: none;
+	}
+	li:last-child:hover {
+		background-color: unset;
+	}
+
+	li div {
+		display: flex;
+		gap: var(--spacing-sm);
+		padding: var(--spacing-sm);
+	}
+	li > button {
+		padding: var(--spacing-sm) var(--spacing-md);
+	}
+
+	/* li > div > button {
+		opacity: 0.7;
+		transition: opacity 0.15s ease;
+	}
+
+	li > div > button:hover {
+		opacity: 1;
+	} */
+</style>

package/shared/Resize.svelte

@@ -0,0 +1,239 @@
+<script lang="ts" context="module">
+	export type Position =
+		| "top-left"
+		| "top"
+		| "top-right"
+		| "left"
+		| "center"
+		| "right"
+		| "bottom-left"
+		| "bottom"
+		| "bottom-right";
+</script>
+
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import type { Spring } from "svelte/motion";
+	import Anchor from "./Anchor.svelte";
+
+	export let dimensions: Spring<{ width: number; height: number }>;
+
+	const dispatch = createEventDispatcher<{
+		change: { anchor: Position; scale: boolean; width: number; height: number };
+	}>();
+
+	let selected_anchor: Position = "center";
+	let scale = false;
+
+	let new_width = $dimensions?.width;
+	let new_height = $dimensions?.height;
+
+	function handle_click(): void {
+		dispatch("change", {
+			anchor: selected_anchor,
+			scale,
+			width: new_width,
+			height: new_height
+		});
+	}
+
+	function set_anchor(position: Position): void {
+		selected_anchor = position;
+	}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="wrap" on:click|stopPropagation>
+	<div class="size-wrap">
+		<div class="size-input">
+			<label for="width">Width</label><input
+				type="number"
+				id="width"
+				bind:value={new_width}
+			/>
+		</div>
+		<div class="size-input">
+			<label for="height">Height </label><input
+				type="number"
+				id="height"
+				bind:value={new_height}
+			/>
+		</div>
+	</div>
+
+	<div class="scale-wrap">
+		<h2 class="image-will-label">Image will:</h2>
+		<div class="toggle-container">
+			<label class="radio-label">
+				<input
+					type="radio"
+					name="resize_mode"
+					value={true}
+					bind:group={scale}
+				/>
+				<span class="radio-button">rescale</span>
+			</label>
+			<label class="radio-label">
+				<input
+					type="radio"
+					name="resize_mode"
+					value={false}
+					bind:group={scale}
+				/>
+				<span class="radio-button">anchor</span>
+			</label>
+		</div>
+	</div>
+	<div class="anchor-wrap">
+		<Anchor on:position={(e) => set_anchor(e.detail)} />
+	</div>
+	<button class="apply-button" on:click={() => handle_click()}
+		>Resize Canvas</button
+	>
+</div>
+
+<!-- </div> -->
+
+<style>
+	.wrap {
+		padding: var(--spacing-xl) var(--spacing-lg);
+		color: var(--block-label-text-color);
+	}
+
+	.size-wrap {
+		display: flex;
+		flex-direction: row;
+		gap: 10px;
+	}
+
+	.size-input {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-xxs);
+	}
+
+	label,
+	h2 {
+		display: flex;
+		align-items: center;
+		gap: 15px;
+
+		cursor: pointer;
+		color: var(--checkbox-label-text-color);
+		font-weight: var(--checkbox-label-text-weight);
+		font-size: var(--text-sm);
+		line-height: var(--line-md);
+	}
+
+	.scale-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+		margin-top: var(--spacing-md);
+	}
+
+	input[type="number"] {
+		border: 1px solid var(--border-color-primary);
+		width: 60px;
+		border-radius: var(--radius-sm);
+		background-color: var(--checkbox-background-color-focus);
+		color: var(--body-text-color);
+		font-size: var(--text-sm);
+		transition: border-color 0.15s ease;
+		padding: var(--spacing-xs);
+		line-height: 1rem;
+	}
+
+	input[type="number"]:hover {
+		border-color: var(--color-accent-soft);
+	}
+
+	input[type="number"]:focus {
+		border-color: var(--color-accent);
+		outline: none;
+		box-shadow: 0 0 0 1px var(--color-accent-soft);
+	}
+
+	.image-will-label {
+		grid-column: 1;
+	}
+
+	.toggle-container {
+		display: flex;
+		grid-column: 2;
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--border-color-primary);
+		overflow: hidden;
+	}
+
+	.toggle-container {
+		display: flex;
+		grid-column: 2;
+		border-radius: var(--radius-sm);
+		border: 1px solid var(--border-color-primary);
+		overflow: hidden;
+	}
+
+	.radio-label {
+		flex: 1;
+		margin: 0;
+		padding: 0;
+		position: relative;
+		cursor: pointer;
+	}
+
+	.radio-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: var(--spacing-sm);
+		background: var(--checkbox-background-color);
+		color: var(--body-text-color);
+		font-size: var(--text-sm);
+		transition: background-color 0.15s ease;
+		width: 100%;
+		height: 100%;
+	}
+
+	input[type="radio"] {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	input[type="radio"]:not(:checked) + .radio-button:hover {
+		background: var(--checkbox-background-color-hover);
+	}
+
+	input[type="radio"]:checked + .radio-button {
+		background: var(--color-accent);
+		color: white;
+	}
+
+	.apply-button {
+		width: 100%;
+		margin-top: var(--spacing-md);
+		padding: var(--spacing-sm) var(--spacing-md);
+		background: var(--color-accent);
+		color: white;
+		border: none;
+		border-radius: var(--radius-sm);
+		font-size: var(--text-sm);
+		font-weight: var(--weight-semibold);
+		transition: all 0.15s ease;
+	}
+
+	.apply-button:hover {
+		background: var(--button-primary-background-fill-hover);
+	}
+
+	.anchor-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		gap: 10px;
+	}
+</style>

package/shared/SecondaryToolbar.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import Layers from "./Layers.svelte";
+	import type { Writable } from "svelte/store";
+
+	export let layers: Writable<{
+		active_layer: string;
+		layers: { name: string; id: string; user_created: boolean }[];
+	}>;
+
+	export let enable_additional_layers = true;
+	export let enable_layers = true;
+	export let show_layers = false;
+</script>
+
+<div class="toolbar-wrap-wrap">
+	<div class="toolbar-wrap">
+		{#if enable_layers}
+			<Layers
+				{layers}
+				{enable_additional_layers}
+				{enable_layers}
+				{show_layers}
+				on:new_layer
+				on:change_layer
+				on:move_layer
+				on:delete_layer
+			/>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.toolbar-wrap-wrap {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		width: fit-content;
+		max-height: 100%;
+		overflow-y: auto;
+		display: flex;
+		flex-direction: column-reverse;
+	}
+
+	.toolbar-wrap {
+		min-width: 110px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+		right: 0;
+		bottom: 0;
+		border: 1px solid var(--block-border-color);
+		border-radius: 0;
+		border-top-left-radius: var(--radius-md);
+		border-right: none;
+		border-bottom: none;
+		z-index: 1000;
+		background-color: var(--block-background-fill);
+	}
+</style>