@gradio/image 0.22.5 → 0.22.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @gradio/image
 
+## 0.22.6
+
+### Features
+
+- [#11177](https://github.com/gradio-app/gradio/pull/11177) [`3068196`](https://github.com/gradio-app/gradio/commit/3068196d47234fd1c1634f33b9ddfc089f5cbbe0) - Improved, smoother fullscreen mode for components.  Thanks @aliabid94!
+
+### Dependency updates
+
+- @gradio/statustracker@0.10.11
+- @gradio/atoms@0.16.1
+- @gradio/client@1.15.0
+- @gradio/upload@0.16.5
+
 ## 0.22.5
 
 ### Fixes

package/Image.stories.svelte

@@ -51,7 +51,7 @@
 		const canvas = within(canvasElement);
 
 		const expand_btn = canvas.getByRole("button", {
-			name: "View in full screen"
+			name: "Fullscreen"
 		});
 		await userEvent.click(expand_btn);
 	}}

package/Index.svelte

@@ -66,6 +66,7 @@
 	export let show_fullscreen_button: boolean;
 	export let input_ready: boolean;
 	export let webcam_options: WebcamOptions;
+	let fullscreen = false;
 
 	let uploading = false;
 	$: input_ready = !uploading;
@@ -140,6 +141,7 @@
 		{container}
 		{scale}
 		{min_width}
+		bind:fullscreen
 	>
 		<StatusTracker
 			autoscroll={gradio.autoscroll}
@@ -150,6 +152,10 @@
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			on:fullscreen={({ detail }) => {
+				fullscreen = detail;
+			}}
+			{fullscreen}
 			{value}
 			{label}
 			{show_label}
@@ -174,6 +180,7 @@
 		{container}
 		{scale}
 		{min_width}
+		bind:fullscreen
 		on:dragenter={handle_drag_event}
 		on:dragleave={handle_drag_event}
 		on:dragover={handle_drag_event}
@@ -195,6 +202,7 @@
 			selectable={_selectable}
 			{root}
 			{sources}
+			{fullscreen}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
 				gradio.dispatch("clear");
@@ -212,6 +220,9 @@
 			on:close_stream={() => {
 				gradio.dispatch("close_stream", "stream");
 			}}
+			on:fullscreen={({ detail }) => {
+				fullscreen = detail;
+			}}
 			{label}
 			{show_label}
 			{pending}

package/dist/Index.svelte

@@ -54,6 +54,7 @@ export let placeholder = void 0;
 export let show_fullscreen_button;
 export let input_ready;
 export let webcam_options;
+let fullscreen = false;
 let uploading = false;
 $:
   input_ready = !uploading;
@@ -110,6 +111,7 @@ const handle_drop = (event) => {
 		{container}
 		{scale}
 		{min_width}
+		bind:fullscreen
 	>
 		<StatusTracker
 			autoscroll={gradio.autoscroll}
@@ -120,6 +122,10 @@ const handle_drop = (event) => {
 			on:select={({ detail }) => gradio.dispatch("select", detail)}
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			on:fullscreen={({ detail }) => {
+				fullscreen = detail;
+			}}
+			{fullscreen}
 			{value}
 			{label}
 			{show_label}
@@ -144,6 +150,7 @@ const handle_drop = (event) => {
 		{container}
 		{scale}
 		{min_width}
+		bind:fullscreen
 		on:dragenter={handle_drag_event}
 		on:dragleave={handle_drag_event}
 		on:dragover={handle_drag_event}
@@ -165,6 +172,7 @@ const handle_drop = (event) => {
 			selectable={_selectable}
 			{root}
 			{sources}
+			{fullscreen}
 			on:edit={() => gradio.dispatch("edit")}
 			on:clear={() => {
 				gradio.dispatch("clear");
@@ -182,6 +190,9 @@ const handle_drop = (event) => {
 			on:close_stream={() => {
 				gradio.dispatch("close_stream", "stream");
 			}}
+			on:fullscreen={({ detail }) => {
+				fullscreen = detail;
+			}}
 			{label}
 			{show_label}
 			{pending}

package/dist/shared/ImagePreview.svelte

@@ -21,6 +21,7 @@ export let show_share_button = false;
 export let i18n;
 export let show_fullscreen_button = true;
 export let display_icon_button_wrapper_top_corner = false;
+export let fullscreen = false;
 const dispatch = createEventDispatcher();
 const handle_click = (evt) => {
   let coordinates = get_coordinates_of_clicked_image(evt);
@@ -44,7 +45,7 @@ let image_container;
 			display_top_corner={display_icon_button_wrapper_top_corner}
 		>
 			{#if show_fullscreen_button}
-				<FullscreenButton container={image_container} />
+				<FullscreenButton {fullscreen} on:fullscreen />
 			{/if}
 
 			{#if show_download_button}

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

@@ -13,8 +13,10 @@ declare const __propDef: {
         i18n: I18nFormatter;
         show_fullscreen_button?: boolean | undefined;
         display_icon_button_wrapper_top_corner?: boolean | undefined;
+        fullscreen?: boolean | undefined;
     };
     events: {
+        fullscreen: CustomEvent<any>;
         share: CustomEvent<import("@gradio/utils").ShareData>;
         error: CustomEvent<string>;
         load: Event;

package/dist/shared/ImageUploader.svelte

@@ -30,6 +30,7 @@ export let show_fullscreen_button = true;
 let upload_input;
 export let uploading = false;
 export let active_source = null;
+export let fullscreen = false;
 async function handle_upload({
   detail
 }) {
@@ -129,7 +130,7 @@ async function on_drop(evt) {
 	<IconButtonWrapper>
 		{#if value?.url && !active_streaming}
 			{#if show_fullscreen_button}
-				<FullscreenButton container={image_container} />
+				<FullscreenButton {fullscreen} on:fullscreen />
 			{/if}
 			<IconButton
 				Icon={Clear}

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

@@ -23,9 +23,11 @@ declare const __propDef: {
         show_fullscreen_button?: boolean | undefined;
         uploading?: boolean | undefined;
         active_source?: ("clipboard" | "upload" | "microphone" | "webcam" | null) | undefined;
+        fullscreen?: boolean | undefined;
         dragging?: boolean | undefined;
     };
     events: {
+        fullscreen: CustomEvent<boolean>;
         error: CustomEvent<string> | CustomEvent<any>;
         drag: CustomEvent<any>;
         close_stream: CustomEvent<undefined>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.22.5",
+  "version": "0.22.6",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,13 +10,13 @@
     "cropperjs": "^1.5.12",
     "lazy-brush": "^1.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "@gradio/client": "^1.14.2",
-    "@gradio/icons": "^0.12.0",
-    "@gradio/statustracker": "^0.10.10",
-    "@gradio/upload": "^0.16.4",
-    "@gradio/atoms": "^0.16.0",
+    "@gradio/atoms": "^0.16.1",
+    "@gradio/statustracker": "^0.10.11",
+    "@gradio/upload": "^0.16.5",
     "@gradio/utils": "^0.10.2",
-    "@gradio/wasm": "^0.18.1"
+    "@gradio/wasm": "^0.18.1",
+    "@gradio/icons": "^0.12.0",
+    "@gradio/client": "^1.15.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.13.0"

package/shared/ImagePreview.svelte

@@ -27,10 +27,12 @@
 	export let i18n: I18nFormatter;
 	export let show_fullscreen_button = true;
 	export let display_icon_button_wrapper_top_corner = false;
+	export let fullscreen = false;
 
 	const dispatch = createEventDispatcher<{
 		change: string;
 		select: SelectData;
+		fullscreen: boolean;
 	}>();
 
 	const handle_click = (evt: MouseEvent): void => {
@@ -56,7 +58,7 @@
 			display_top_corner={display_icon_button_wrapper_top_corner}
 		>
 			{#if show_fullscreen_button}
-				<FullscreenButton container={image_container} />
+				<FullscreenButton {fullscreen} on:fullscreen />
 			{/if}
 
 			{#if show_download_button}

package/shared/ImageUploader.svelte

@@ -42,6 +42,7 @@
 	let upload_input: Upload;
 	export let uploading = false;
 	export let active_source: source_type = null;
+	export let fullscreen = false;
 
 	async function handle_upload({
 		detail
@@ -167,7 +168,7 @@
 	<IconButtonWrapper>
 		{#if value?.url && !active_streaming}
 			{#if show_fullscreen_button}
-				<FullscreenButton container={image_container} />
+				<FullscreenButton {fullscreen} on:fullscreen />
 			{/if}
 			<IconButton
 				Icon={Clear}