@gradio/imageeditor 0.12.14 → 0.13.0

package/dist/shared/Controls.svelte

@@ -1,14 +1,90 @@
 <script>import { createEventDispatcher } from "svelte";
 import { IconButton, IconButtonWrapper } from "@gradio/atoms";
-import { Undo, Redo, Check, Trash } from "@gradio/icons";
-export let can_undo = false;
-export let can_redo = false;
+import { Check, Trash, ZoomIn, ZoomOut, Pan } from "@gradio/icons";
 export let can_save = false;
 export let changeable = false;
+export let current_zoom = 1;
+export let tool;
+export let min_zoom = true;
 const dispatch = createEventDispatcher();
+let show_zoom_popup = false;
+function handle_zoom_click(e) {
+  e.stopPropagation();
+  show_zoom_popup = !show_zoom_popup;
+}
+function handle_zoom_change(zoom) {
+  dispatch("set_zoom", zoom);
+  show_zoom_popup = false;
+}
+function handle_zoom_keydown(e) {
+  if (e.key === "Enter") {
+    handle_zoom_change(current_zoom);
+  }
+}
+$:
+  formatted_zoom = Math.round(current_zoom * 100);
 </script>
 
 <IconButtonWrapper>
+	<IconButton
+		Icon={Pan}
+		label="Pan"
+		on:click={(e) => {
+			e.stopPropagation();
+			dispatch("pan");
+		}}
+		highlight={tool === "pan"}
+		size="small"
+		padded={false}
+		transparent={true}
+		disabled={min_zoom}
+	/>
+
+	<IconButton
+		Icon={ZoomOut}
+		label="Zoom out"
+		on:click={(event) => {
+			dispatch("zoom_out");
+			event.stopPropagation();
+		}}
+	/>
+	<IconButton
+		Icon={ZoomIn}
+		label="Zoom in"
+		on:click={(event) => {
+			dispatch("zoom_in");
+			event.stopPropagation();
+		}}
+	/>
+
+	<div class="zoom-number">
+		<span
+			role="button"
+			tabindex="0"
+			on:click={handle_zoom_click}
+			on:keydown={handle_zoom_keydown}>{formatted_zoom}%</span
+		>
+		{#if show_zoom_popup}
+			<div class="zoom-controls">
+				<ul>
+					<li>
+						<button on:click|stopPropagation={() => handle_zoom_change("fit")}>
+							Fit to screen
+						</button>
+					</li>
+					{#each [0.25, 0.5, 1, 2, 4] as zoom}
+						<li>
+							<button on:click|stopPropagation={() => handle_zoom_change(zoom)}>
+								{zoom * 100}%
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+	</div>
+	<div class="separator"></div>
+
 	{#if changeable}
 		<IconButton
 			disabled={!can_save}
@@ -18,28 +94,10 @@ const dispatch = createEventDispatcher();
 				dispatch("save");
 				event.stopPropagation();
 			}}
-			background={"var(--color-green-500)"}
-			color={"#fff"}
+			color="var(--color-accent)"
 		/>
 	{/if}
-	<IconButton
-		disabled={!can_undo}
-		Icon={Undo}
-		label="Undo"
-		on:click={(event) => {
-			dispatch("undo");
-			event.stopPropagation();
-		}}
-	/>
-	<IconButton
-		disabled={!can_redo}
-		Icon={Redo}
-		label="Redo"
-		on:click={(event) => {
-			dispatch("redo");
-			event.stopPropagation();
-		}}
-	/>
+
 	<IconButton
 		Icon={Trash}
 		label="Clear canvas"
@@ -49,3 +107,84 @@ const dispatch = createEventDispatcher();
 		}}
 	/>
 </IconButtonWrapper>
+
+<style>
+	.separator {
+		width: 1px;
+		height: 10px;
+		background-color: var(--border-color-primary);
+	}
+
+	.zoom-number {
+		position: relative;
+		width: 30px;
+		padding-left: 4px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.zoom-number span {
+		cursor: pointer;
+		font-size: var(--text-sm);
+		transition: color 0.15s ease;
+	}
+
+	.zoom-number span:hover {
+		color: var(--color-accent);
+	}
+
+	.zoom-controls {
+		position: absolute;
+		top: calc(100% + var(--spacing-xxs) + 3px);
+		left: -2px;
+		background: var(--block-background-fill);
+		border: 1px solid var(--color-gray-200);
+		border-radius: var(--radius-sm);
+		padding: var(--spacing-xxs);
+		box-shadow: var(--shadow-drop);
+		font-size: 12px;
+		z-index: var(--layer-2);
+		width: max-content;
+		color: var(--block-label-text-color);
+		border: 1px solid var(--block-border-color);
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	.zoom-controls ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.zoom-controls li {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		transition: background-color 0.15s ease;
+		border-bottom: 1px solid var(--border-color-primary);
+	}
+
+	.zoom-controls li:last-child {
+		border-bottom: none;
+	}
+
+	.zoom-controls li:hover {
+		background-color: var(--background-fill-secondary);
+	}
+
+	.zoom-controls button {
+		width: 100%;
+		text-align: left;
+		padding: var(--spacing-sm) var(--spacing-md);
+		font-size: var(--text-sm);
+		line-height: var(--line-sm);
+		transition: all 0.15s ease;
+		border-radius: var(--radius-sm);
+	}
+
+	.zoom-controls button:hover {
+		color: var(--color-accent);
+	}
+</style>

package/dist/shared/Controls.svelte.d.ts

@@ -1,16 +1,21 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        can_undo?: boolean | undefined;
-        can_redo?: boolean | undefined;
         can_save?: boolean | undefined;
         changeable?: boolean | undefined;
+        current_zoom?: number | undefined;
+        tool: string;
+        min_zoom?: boolean | undefined;
     };
     events: {
         remove_image: CustomEvent<void>;
         undo: CustomEvent<void>;
         redo: CustomEvent<void>;
         save: CustomEvent<void>;
+        zoom_in: CustomEvent<void>;
+        zoom_out: CustomEvent<void>;
+        set_zoom: CustomEvent<number | "fit">;
+        pan: CustomEvent<void>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/shared/{tools/IconButton.svelte → IconButton.svelte}

@@ -12,8 +12,10 @@ export let color = "var(--block-label-text-color)";
 export let transparent = false;
 export let background = "var(--background-fill-primary)";
 export let offset = 0;
+export let label_position = "left";
+export let roundedness = "quite";
 $:
-  _color = highlight ? "var(--color-accent)" : color;
+  _color = highlight ? "var(--color-accent)" : color.toString();
 </script>
 
 <button
@@ -29,8 +31,11 @@ $:
 	style:color={!disabled && _color ? _color : "var(--block-label-text-color)"}
 	style:--bg-color={!disabled ? background : "auto"}
 	style:margin-left={offset + "px"}
+	class="{roundedness}-round"
 >
-	{#if show_label}<span>{label}</span>{/if}
+	{#if show_label && label_position === "left"}
+		<span style="margin-left: 4px;">{label}</span>
+	{/if}
 	<div
 		class:small={size === "small"}
 		class:large={size === "large"}
@@ -38,6 +43,9 @@ $:
 	>
 		<Icon />
 	</div>
+	{#if show_label && label_position === "right"}
+		<span style="margin-right: 4px;">{label}</span>
+	{/if}
 </button>
 
 <style>
@@ -48,11 +56,19 @@ $:
 		gap: 1px;
 		z-index: var(--layer-2);
 		/* background: var(--background-fill-primary); */
-		border-radius: var(--radius-sm);
+		/* border-radius: var(--radius-sm); */
 		color: var(--block-label-text-color);
 		border: 1px solid transparent;
 	}
 
+	.quite-round {
+		border-radius: var(--radius-sm);
+	}
+
+	.very-round {
+		border-radius: var(--radius-md);
+	}
+
 	button[disabled] {
 		opacity: 0.5;
 		box-shadow: none;

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

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { type ComponentType } from "svelte";
+import type { ColorInput } from "tinycolor2";
 declare const __propDef: {
     props: {
         Icon: ComponentType;
@@ -11,10 +12,12 @@ declare const __propDef: {
         highlight?: boolean | undefined;
         disabled?: boolean | undefined;
         hasPopup?: boolean | undefined;
-        color?: string | undefined;
+        color?: (string | ColorInput) | undefined;
         transparent?: boolean | undefined;
         background?: string | undefined;
         offset?: number | undefined;
+        label_position?: ("left" | "right") | undefined;
+        roundedness?: ("quite" | "very") | undefined;
     };
     events: {
         click: MouseEvent;