@gradio/imageeditor 0.11.0-beta.1 → 0.11.0-beta.3

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @gradio/imageeditor
 
+## 0.11.0-beta.3
+
+### Dependency updates
+
+- @gradio/upload@0.13.0-beta.3
+- @gradio/client@1.6.0-beta.3
+- @gradio/image@0.16.0-beta.3
+
+## 0.11.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+- [#9371](https://github.com/gradio-app/gradio/pull/9371) [`7bf3e99`](https://github.com/gradio-app/gradio/commit/7bf3e9989392b7edcdc18c1d840fb8130b15040e) - Fix `gr.ImageEditor` toolbar cutoff.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/wasm@0.14.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/image@0.16.0-beta.2
+
 ## 0.11.0-beta.1
 
 ### Features
@@ -18,7 +45,11 @@
 - @gradio/upload@0.12.4-beta.1
 - @gradio/wasm@0.13.1-beta.1
 
-## 0.10.1-beta.0
+## 0.10.1
+
+### Features
+
+- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
 
 ### Fixes
 
@@ -26,14 +57,14 @@
 
 ### Dependency updates
 
-- @gradio/utils@0.7.0-beta.0
-- @gradio/statustracker@0.8.0-beta.0
-- @gradio/atoms@0.8.1-beta.0
-- @gradio/client@1.6.0-beta.0
-- @gradio/icons@0.8.0-beta.0
-- @gradio/upload@0.12.4-beta.0
-- @gradio/wasm@0.13.1-beta.0
-- @gradio/image@0.16.0-beta.0
+- @gradio/utils@0.6.1
+- @gradio/statustracker@0.7.6
+- @gradio/atoms@0.8.1
+- @gradio/icons@0.7.2
+- @gradio/wasm@0.13.1
+- @gradio/client@1.5.2
+- @gradio/upload@0.12.4
+- @gradio/image@0.15.1
 
 ## 0.10.0
 

package/Index.svelte

@@ -91,7 +91,9 @@
 
 	$: value && handle_change();
 	const is_browser = typeof window !== "undefined";
-	const raf = is_browser ? window.requestAnimationFrame : () => {};
+	const raf = is_browser
+		? window.requestAnimationFrame
+		: (cb: (...args: any[]) => void) => cb();
 
 	function wait_for_next_frame(): Promise<void> {
 		return new Promise((resolve) => {
@@ -216,8 +218,8 @@
 			accept_blobs={server.accept_blobs}
 			{layers}
 			status={loading_status?.status}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 			{placeholder}
 		></InteractiveImageEditor>
 	</Block>

package/dist/Index.svelte

@@ -58,8 +58,7 @@ let dragging;
 $:
   value && handle_change();
 const is_browser = typeof window !== "undefined";
-const raf = is_browser ? window.requestAnimationFrame : () => {
-};
+const raf = is_browser ? window.requestAnimationFrame : (cb) => cb();
 function wait_for_next_frame() {
   return new Promise((resolve) => {
     raf(() => raf(() => resolve()));
@@ -176,8 +175,8 @@ $:
 			accept_blobs={server.accept_blobs}
 			{layers}
 			status={loading_status?.status}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 			{placeholder}
 		></InteractiveImageEditor>
 	</Block>

package/dist/shared/Controls.svelte

@@ -1,6 +1,6 @@
 <script>import { createEventDispatcher } from "svelte";
-import { IconButton } from "@gradio/atoms";
-import { Clear, Undo, Redo, Check, Trash } from "@gradio/icons";
+import { IconButton, IconButtonWrapper } from "@gradio/atoms";
+import { Undo, Redo, Check, Trash } from "@gradio/icons";
 export let can_undo = false;
 export let can_redo = false;
 export let can_save = false;
@@ -8,66 +8,44 @@ export let changeable = false;
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="controls-wrap">
-	<div class="row-wrap">
-		<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();
-			}}
-		/>
+<IconButtonWrapper>
+	{#if changeable}
 		<IconButton
-			Icon={Trash}
-			label="Clear canvas"
+			disabled={!can_save}
+			Icon={Check}
+			label="Save changes"
 			on:click={(event) => {
-				dispatch("remove_image");
+				dispatch("save");
 				event.stopPropagation();
 			}}
+			background={"var(--color-green-500)"}
+			color={"#fff"}
 		/>
-	</div>
-	{#if changeable}
-		<div class="row-wrap save">
-			<IconButton
-				disabled={!can_save}
-				Icon={Check}
-				label="Save changes"
-				on:click={(event) => {
-					dispatch("save");
-					event.stopPropagation();
-				}}
-				background={"var(--color-green-500)"}
-				color={"#fff"}
-			/>
-		</div>
 	{/if}
-</div>
-
-<style>
-	.controls-wrap {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-lg);
-		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-	}
-	.row-wrap {
-		display: flex;
-
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-5);
-	}
-</style>
+	<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"
+		on:click={(event) => {
+			dispatch("remove_image");
+			event.stopPropagation();
+		}}
+	/>
+</IconButtonWrapper>

package/dist/shared/ImageEditor.svelte

@@ -285,10 +285,9 @@ export function set_tool(tool) {
 	.wrap {
 		display: flex;
 		width: 100%;
-		height: 100%;
+		height: 90%;
 		position: relative;
 		justify-content: center;
-		align-items: flex-start;
 	}
 	.canvas {
 		position: absolute;

package/dist/shared/tools/IconButton.svelte

@@ -0,0 +1,133 @@
+<script>import {} from "svelte";
+export let Icon;
+export let label = "";
+export let show_label = false;
+export let pending = false;
+export let size = "small";
+export let padded = true;
+export let highlight = false;
+export let disabled = false;
+export let hasPopup = false;
+export let color = "var(--block-label-text-color)";
+export let transparent = false;
+export let background = "var(--background-fill-primary)";
+export let offset = 0;
+$:
+  _color = highlight ? "var(--color-accent)" : color;
+</script>
+
+<button
+	{disabled}
+	on:click
+	aria-label={label}
+	aria-haspopup={hasPopup}
+	title={label}
+	class:pending
+	class:padded
+	class:highlight
+	class:transparent
+	style:color={!disabled && _color ? _color : "var(--block-label-text-color)"}
+	style:--bg-color={!disabled ? background : "auto"}
+	style:margin-left={offset + "px"}
+>
+	{#if show_label}<span>{label}</span>{/if}
+	<div
+		class:small={size === "small"}
+		class:large={size === "large"}
+		class:medium={size === "medium"}
+	>
+		<Icon />
+	</div>
+</button>
+
+<style>
+	button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 1px;
+		z-index: var(--layer-2);
+		/* background: var(--background-fill-primary); */
+		border-radius: var(--radius-sm);
+		color: var(--block-label-text-color);
+		border: 1px solid transparent;
+	}
+
+	button[disabled] {
+		opacity: 0.5;
+		box-shadow: none;
+	}
+
+	button[disabled]:hover {
+		cursor: not-allowed;
+		/* border: 1px solid var(--button-secondary-border-color); */
+		/* padding: 2px; */
+	}
+
+	.padded {
+		padding: 2px;
+		background: var(--bg-color);
+		box-shadow: var(--shadow-drop);
+		border: 1px solid var(--button-secondary-border-color);
+	}
+
+	button:hover,
+	button.highlight {
+		cursor: pointer;
+		color: var(--color-accent);
+	}
+
+	.padded:hover {
+		border: 2px solid var(--button-secondary-border-color-hover);
+		padding: 1px;
+		color: var(--block-label-text-color);
+	}
+
+	span {
+		padding: 0px 1px;
+		font-size: 10px;
+	}
+
+	div {
+		padding: 2px;
+		display: flex;
+		align-items: flex-end;
+	}
+
+	.small {
+		width: 14px;
+		height: 14px;
+	}
+
+	.medium {
+		width: 20px;
+		height: 20px;
+	}
+
+	.large {
+		width: 22px;
+		height: 22px;
+	}
+
+	.pending {
+		animation: flash 0.5s infinite;
+	}
+
+	@keyframes flash {
+		0% {
+			opacity: 0.5;
+		}
+		50% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0.5;
+		}
+	}
+
+	.transparent {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+	}
+</style>

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

@@ -0,0 +1,31 @@
+import { SvelteComponent } from "svelte";
+import { type ComponentType } from "svelte";
+declare const __propDef: {
+    props: {
+        Icon: ComponentType;
+        label?: string | undefined;
+        show_label?: boolean | undefined;
+        pending?: boolean | undefined;
+        size?: ("small" | "large" | "medium") | undefined;
+        padded?: boolean | undefined;
+        highlight?: boolean | undefined;
+        disabled?: boolean | undefined;
+        hasPopup?: boolean | undefined;
+        color?: string | undefined;
+        transparent?: boolean | undefined;
+        background?: string | undefined;
+        offset?: number | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconButtonProps = typeof __propDef.props;
+export type IconButtonEvents = typeof __propDef.events;
+export type IconButtonSlots = typeof __propDef.slots;
+export default class IconButton extends SvelteComponent<IconButtonProps, IconButtonEvents, IconButtonSlots> {
+}
+export {};

package/dist/shared/tools/Sources.svelte

@@ -9,7 +9,7 @@ import {
 import { Upload } from "@gradio/upload";
 import { Webcam } from "@gradio/image";
 import {} from "@gradio/utils";
-import { IconButton } from "@gradio/atoms";
+import { default as IconButton } from "./IconButton.svelte";
 import {} from "@gradio/client";
 import { add_bg_color, add_bg_image } from "./sources";
 export let background_file;

package/dist/shared/tools/Tools.svelte

@@ -1,7 +1,8 @@
 <script context="module">export const TOOL_KEY = Symbol("tool");
 </script>
 
-<script>import { Toolbar, IconButton } from "@gradio/atoms";
+<script>import { Toolbar } from "@gradio/atoms";
+import { default as IconButton } from "./IconButton.svelte";
 import { getContext, setContext } from "svelte";
 import { writable } from "svelte/store";
 import { EDITOR_KEY } from "../ImageEditor.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/imageeditor",
-  "version": "0.11.0-beta.1",
+  "version": "0.11.0-beta.3",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,17 +10,17 @@
     "@types/tinycolor2": "^1.4.6",
     "pixi.js": "^7.3.2",
     "tinycolor2": "^1.6.0",
-    "@gradio/atoms": "^0.8.1-beta.1",
-    "@gradio/client": "^1.6.0-beta.1",
-    "@gradio/image": "^0.16.0-beta.1",
-    "@gradio/icons": "^0.8.0-beta.1",
-    "@gradio/statustracker": "^0.8.0-beta.1",
-    "@gradio/upload": "^0.12.4-beta.1",
-    "@gradio/utils": "^0.7.0-beta.1",
-    "@gradio/wasm": "^0.13.1-beta.1"
+    "@gradio/atoms": "^0.9.0-beta.2",
+    "@gradio/client": "^1.6.0-beta.3",
+    "@gradio/icons": "^0.8.0-beta.2",
+    "@gradio/statustracker": "^0.8.0-beta.2",
+    "@gradio/utils": "^0.7.0-beta.2",
+    "@gradio/wasm": "^0.14.0-beta.2",
+    "@gradio/upload": "^0.13.0-beta.3",
+    "@gradio/image": "^0.16.0-beta.3"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.1-beta.0"
+    "@gradio/preview": "^0.11.1"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/Controls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import { IconButton } from "@gradio/atoms";
-	import { Clear, Undo, Redo, Check, Trash } from "@gradio/icons";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
+	import { Undo, Redo, Check, Trash } from "@gradio/icons";
 
 	/**
 	 * Can the current image be undone?
@@ -35,66 +35,44 @@
 	}>();
 </script>
 
-<div class="controls-wrap">
-	<div class="row-wrap">
-		<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();
-			}}
-		/>
+<IconButtonWrapper>
+	{#if changeable}
 		<IconButton
-			Icon={Trash}
-			label="Clear canvas"
+			disabled={!can_save}
+			Icon={Check}
+			label="Save changes"
 			on:click={(event) => {
-				dispatch("remove_image");
+				dispatch("save");
 				event.stopPropagation();
 			}}
+			background={"var(--color-green-500)"}
+			color={"#fff"}
 		/>
-	</div>
-	{#if changeable}
-		<div class="row-wrap save">
-			<IconButton
-				disabled={!can_save}
-				Icon={Check}
-				label="Save changes"
-				on:click={(event) => {
-					dispatch("save");
-					event.stopPropagation();
-				}}
-				background={"var(--color-green-500)"}
-				color={"#fff"}
-			/>
-		</div>
 	{/if}
-</div>
-
-<style>
-	.controls-wrap {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-lg);
-		position: absolute;
-		top: var(--size-2);
-		right: var(--size-2);
-	}
-	.row-wrap {
-		display: flex;
-
-		justify-content: flex-end;
-		gap: var(--spacing-sm);
-		z-index: var(--layer-5);
-	}
-</style>
+	<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"
+		on:click={(event) => {
+			dispatch("remove_image");
+			event.stopPropagation();
+		}}
+	/>
+</IconButtonWrapper>

package/shared/ImageEditor.svelte

@@ -378,10 +378,9 @@
 	.wrap {
 		display: flex;
 		width: 100%;
-		height: 100%;
+		height: 90%;
 		position: relative;
 		justify-content: center;
-		align-items: flex-start;
 	}
 	.canvas {
 		position: absolute;

package/shared/tools/IconButton.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { type ComponentType } from "svelte";
+	export let Icon: ComponentType;
+	export let label = "";
+	export let show_label = false;
+	export let pending = false;
+	export let size: "small" | "large" | "medium" = "small";
+	export let padded = true;
+	export let highlight = false;
+	export let disabled = false;
+	export let hasPopup = false;
+	export let color = "var(--block-label-text-color)";
+	export let transparent = false;
+	export let background = "var(--background-fill-primary)";
+	export let offset = 0;
+	$: _color = highlight ? "var(--color-accent)" : color;
+</script>
+
+<button
+	{disabled}
+	on:click
+	aria-label={label}
+	aria-haspopup={hasPopup}
+	title={label}
+	class:pending
+	class:padded
+	class:highlight
+	class:transparent
+	style:color={!disabled && _color ? _color : "var(--block-label-text-color)"}
+	style:--bg-color={!disabled ? background : "auto"}
+	style:margin-left={offset + "px"}
+>
+	{#if show_label}<span>{label}</span>{/if}
+	<div
+		class:small={size === "small"}
+		class:large={size === "large"}
+		class:medium={size === "medium"}
+	>
+		<Icon />
+	</div>
+</button>
+
+<style>
+	button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 1px;
+		z-index: var(--layer-2);
+		/* background: var(--background-fill-primary); */
+		border-radius: var(--radius-sm);
+		color: var(--block-label-text-color);
+		border: 1px solid transparent;
+	}
+
+	button[disabled] {
+		opacity: 0.5;
+		box-shadow: none;
+	}
+
+	button[disabled]:hover {
+		cursor: not-allowed;
+		/* border: 1px solid var(--button-secondary-border-color); */
+		/* padding: 2px; */
+	}
+
+	.padded {
+		padding: 2px;
+		background: var(--bg-color);
+		box-shadow: var(--shadow-drop);
+		border: 1px solid var(--button-secondary-border-color);
+	}
+
+	button:hover,
+	button.highlight {
+		cursor: pointer;
+		color: var(--color-accent);
+	}
+
+	.padded:hover {
+		border: 2px solid var(--button-secondary-border-color-hover);
+		padding: 1px;
+		color: var(--block-label-text-color);
+	}
+
+	span {
+		padding: 0px 1px;
+		font-size: 10px;
+	}
+
+	div {
+		padding: 2px;
+		display: flex;
+		align-items: flex-end;
+	}
+
+	.small {
+		width: 14px;
+		height: 14px;
+	}
+
+	.medium {
+		width: 20px;
+		height: 20px;
+	}
+
+	.large {
+		width: 22px;
+		height: 22px;
+	}
+
+	.pending {
+		animation: flash 0.5s infinite;
+	}
+
+	@keyframes flash {
+		0% {
+			opacity: 0.5;
+		}
+		50% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0.5;
+		}
+	}
+
+	.transparent {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+	}
+</style>

package/shared/tools/Sources.svelte

@@ -10,7 +10,7 @@
 	import { Upload } from "@gradio/upload";
 	import { Webcam } from "@gradio/image";
 	import { type I18nFormatter } from "@gradio/utils";
-	import { IconButton } from "@gradio/atoms";
+	import { default as IconButton } from "./IconButton.svelte";
 	import { type Client } from "@gradio/client";
 
 	import { add_bg_color, add_bg_image } from "./sources";

package/shared/tools/Tools.svelte

@@ -43,7 +43,8 @@
 </script>
 
 <script lang="ts">
-	import { Toolbar, IconButton } from "@gradio/atoms";
+	import { Toolbar } from "@gradio/atoms";
+	import { default as IconButton } from "./IconButton.svelte";
 	import { getContext, setContext } from "svelte";
 	import { writable } from "svelte/store";
 	import { EDITOR_KEY, type EditorContext } from "../ImageEditor.svelte";