@gradio/annotatedimage 0.8.8 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/Index.svelte +7 -30
  3. package/dist/Index.svelte +7 -28
  4. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @gradio/annotatedimage
2
2
 
3
+ ## 0.9.0
4
+
5
+ ### Features
6
+
7
+ - [#10098](https://github.com/gradio-app/gradio/pull/10098) [`9a6ce6f`](https://github.com/gradio-app/gradio/commit/9a6ce6f6b089d94c06da0b8620f28967f39f8383) - Refactor full screen logic to be reusable. Thanks @hannahblair!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/statustracker@0.9.7
12
+ - @gradio/upload@0.14.3
13
+ - @gradio/atoms@0.12.0
14
+
15
+ ## 0.8.9
16
+
17
+ ### Dependency updates
18
+
19
+ - @gradio/atoms@0.11.2
20
+ - @gradio/utils@0.9.0
21
+ - @gradio/statustracker@0.9.6
22
+ - @gradio/upload@0.14.2
23
+
3
24
  ## 0.8.8
4
25
 
5
26
  ### Dependency updates
package/Index.svelte CHANGED
@@ -6,8 +6,8 @@
6
6
  Block,
7
7
  BlockLabel,
8
8
  Empty,
9
- IconButton,
10
- IconButtonWrapper
9
+ IconButtonWrapper,
10
+ FullscreenButton
11
11
  } from "@gradio/atoms";
12
12
  import { Image, Maximize, Minimize } from "@gradio/icons";
13
13
  import { StatusTracker } from "@gradio/statustracker";
@@ -47,22 +47,8 @@
47
47
  export let loading_status: LoadingStatus;
48
48
  export let show_fullscreen_button = true;
49
49
 
50
- let is_full_screen = false;
51
50
  let image_container: HTMLElement;
52
-
53
- onMount(() => {
54
- document.addEventListener("fullscreenchange", () => {
55
- is_full_screen = !!document.fullscreenElement;
56
- });
57
- });
58
-
59
- const toggle_full_screen = async (): Promise<void> => {
60
- if (!is_full_screen) {
61
- await image_container.requestFullscreen();
62
- } else {
63
- await document.exitFullscreen();
64
- }
65
- };
51
+ let is_full_screen = false;
66
52
 
67
53
  // `value` can be updated before the Promises from `resolve_wasm_src` are resolved.
68
54
  // In such a case, the resolved values for the old `value` have to be discarded,
@@ -166,19 +152,10 @@
166
152
  {:else}
167
153
  <div class="image-container" bind:this={image_container}>
168
154
  <IconButtonWrapper>
169
- {#if !is_full_screen && show_fullscreen_button}
170
- <IconButton
171
- Icon={Maximize}
172
- label="View in full screen"
173
- on:click={toggle_full_screen}
174
- />
175
- {/if}
176
-
177
- {#if is_full_screen}
178
- <IconButton
179
- Icon={Minimize}
180
- label="Exit full screen"
181
- on:click={toggle_full_screen}
155
+ {#if show_fullscreen_button}
156
+ <FullscreenButton
157
+ container={image_container}
158
+ on:fullscreenchange={(e) => (is_full_screen = e.detail)}
182
159
  />
183
160
  {/if}
184
161
  </IconButtonWrapper>
package/dist/Index.svelte CHANGED
@@ -3,8 +3,8 @@ import {
3
3
  Block,
4
4
  BlockLabel,
5
5
  Empty,
6
- IconButton,
7
- IconButtonWrapper
6
+ IconButtonWrapper,
7
+ FullscreenButton
8
8
  } from "@gradio/atoms";
9
9
  import { Image, Maximize, Minimize } from "@gradio/icons";
10
10
  import { StatusTracker } from "@gradio/statustracker";
@@ -29,20 +29,8 @@ export let min_width = void 0;
29
29
  let active = null;
30
30
  export let loading_status;
31
31
  export let show_fullscreen_button = true;
32
- let is_full_screen = false;
33
32
  let image_container;
34
- onMount(() => {
35
- document.addEventListener("fullscreenchange", () => {
36
- is_full_screen = !!document.fullscreenElement;
37
- });
38
- });
39
- const toggle_full_screen = async () => {
40
- if (!is_full_screen) {
41
- await image_container.requestFullscreen();
42
- } else {
43
- await document.exitFullscreen();
44
- }
45
- };
33
+ let is_full_screen = false;
46
34
  let latest_promise = null;
47
35
  $: {
48
36
  if (value !== old_value) {
@@ -135,19 +123,10 @@ function handle_click(i, value2) {
135
123
  {:else}
136
124
  <div class="image-container" bind:this={image_container}>
137
125
  <IconButtonWrapper>
138
- {#if !is_full_screen && show_fullscreen_button}
139
- <IconButton
140
- Icon={Maximize}
141
- label="View in full screen"
142
- on:click={toggle_full_screen}
143
- />
144
- {/if}
145
-
146
- {#if is_full_screen}
147
- <IconButton
148
- Icon={Minimize}
149
- label="Exit full screen"
150
- on:click={toggle_full_screen}
126
+ {#if show_fullscreen_button}
127
+ <FullscreenButton
128
+ container={image_container}
129
+ on:fullscreenchange={(e) => (is_full_screen = e.detail)}
151
130
  />
152
131
  {/if}
153
132
  </IconButtonWrapper>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/annotatedimage",
3
- "version": "0.8.8",
3
+ "version": "0.9.0",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -22,11 +22,11 @@
22
22
  "svelte": "^4.0.0"
23
23
  },
24
24
  "dependencies": {
25
+ "@gradio/atoms": "^0.12.0",
25
26
  "@gradio/icons": "^0.8.1",
26
- "@gradio/atoms": "^0.11.1",
27
- "@gradio/statustracker": "^0.9.5",
28
- "@gradio/upload": "^0.14.1",
29
- "@gradio/utils": "^0.8.0",
27
+ "@gradio/upload": "^0.14.3",
28
+ "@gradio/statustracker": "^0.9.7",
29
+ "@gradio/utils": "^0.9.0",
30
30
  "@gradio/client": "^1.8.0",
31
31
  "@gradio/wasm": "^0.15.0"
32
32
  },