@gradio/image 0.22.4 → 0.22.6

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 (11) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/Image.stories.svelte +1 -1
  3. package/Index.svelte +11 -0
  4. package/dist/Index.svelte +11 -0
  5. package/dist/shared/ImagePreview.svelte +2 -1
  6. package/dist/shared/ImagePreview.svelte.d.ts +2 -0
  7. package/dist/shared/ImageUploader.svelte +26 -1
  8. package/dist/shared/ImageUploader.svelte.d.ts +2 -0
  9. package/package.json +7 -7
  10. package/shared/ImagePreview.svelte +3 -1
  11. package/shared/ImageUploader.svelte +32 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @gradio/image
2
2
 
3
+ ## 0.22.6
4
+
5
+ ### Features
6
+
7
+ - [#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!
8
+
9
+ ### Dependency updates
10
+
11
+ - @gradio/statustracker@0.10.11
12
+ - @gradio/atoms@0.16.1
13
+ - @gradio/client@1.15.0
14
+ - @gradio/upload@0.16.5
15
+
16
+ ## 0.22.5
17
+
18
+ ### Fixes
19
+
20
+ - [#11098](https://github.com/gradio-app/gradio/pull/11098) [`49ad594`](https://github.com/gradio-app/gradio/commit/49ad5943eeab96b153f0b56fe8d42d755fe1e0f8) - Fix #10281: Dragging image replaces existing instead of opening new tab. Thanks @Martim-Rito!
21
+
22
+ ### Dependency updates
23
+
24
+ - @gradio/upload@0.16.4
25
+
3
26
  ## 0.22.4
4
27
 
5
28
  ### Fixes
package/Image.stories.svelte CHANGED
@@ -51,7 +51,7 @@
51
51
  const canvas = within(canvasElement);
52
52
 
53
53
  const expand_btn = canvas.getByRole("button", {
54
- name: "View in full screen"
54
+ name: "Fullscreen"
55
55
  });
56
56
  await userEvent.click(expand_btn);
57
57
  }}
package/Index.svelte CHANGED
@@ -66,6 +66,7 @@
66
66
  export let show_fullscreen_button: boolean;
67
67
  export let input_ready: boolean;
68
68
  export let webcam_options: WebcamOptions;
69
+ let fullscreen = false;
69
70
 
70
71
  let uploading = false;
71
72
  $: input_ready = !uploading;
@@ -140,6 +141,7 @@
140
141
  {container}
141
142
  {scale}
142
143
  {min_width}
144
+ bind:fullscreen
143
145
  >
144
146
  <StatusTracker
145
147
  autoscroll={gradio.autoscroll}
@@ -150,6 +152,10 @@
150
152
  on:select={({ detail }) => gradio.dispatch("select", detail)}
151
153
  on:share={({ detail }) => gradio.dispatch("share", detail)}
152
154
  on:error={({ detail }) => gradio.dispatch("error", detail)}
155
+ on:fullscreen={({ detail }) => {
156
+ fullscreen = detail;
157
+ }}
158
+ {fullscreen}
153
159
  {value}
154
160
  {label}
155
161
  {show_label}
@@ -174,6 +180,7 @@
174
180
  {container}
175
181
  {scale}
176
182
  {min_width}
183
+ bind:fullscreen
177
184
  on:dragenter={handle_drag_event}
178
185
  on:dragleave={handle_drag_event}
179
186
  on:dragover={handle_drag_event}
@@ -195,6 +202,7 @@
195
202
  selectable={_selectable}
196
203
  {root}
197
204
  {sources}
205
+ {fullscreen}
198
206
  on:edit={() => gradio.dispatch("edit")}
199
207
  on:clear={() => {
200
208
  gradio.dispatch("clear");
@@ -212,6 +220,9 @@
212
220
  on:close_stream={() => {
213
221
  gradio.dispatch("close_stream", "stream");
214
222
  }}
223
+ on:fullscreen={({ detail }) => {
224
+ fullscreen = detail;
225
+ }}
215
226
  {label}
216
227
  {show_label}
217
228
  {pending}
package/dist/Index.svelte CHANGED
@@ -54,6 +54,7 @@ export let placeholder = void 0;
54
54
  export let show_fullscreen_button;
55
55
  export let input_ready;
56
56
  export let webcam_options;
57
+ let fullscreen = false;
57
58
  let uploading = false;
58
59
  $:
59
60
  input_ready = !uploading;
@@ -110,6 +111,7 @@ const handle_drop = (event) => {
110
111
  {container}
111
112
  {scale}
112
113
  {min_width}
114
+ bind:fullscreen
113
115
  >
114
116
  <StatusTracker
115
117
  autoscroll={gradio.autoscroll}
@@ -120,6 +122,10 @@ const handle_drop = (event) => {
120
122
  on:select={({ detail }) => gradio.dispatch("select", detail)}
121
123
  on:share={({ detail }) => gradio.dispatch("share", detail)}
122
124
  on:error={({ detail }) => gradio.dispatch("error", detail)}
125
+ on:fullscreen={({ detail }) => {
126
+ fullscreen = detail;
127
+ }}
128
+ {fullscreen}
123
129
  {value}
124
130
  {label}
125
131
  {show_label}
@@ -144,6 +150,7 @@ const handle_drop = (event) => {
144
150
  {container}
145
151
  {scale}
146
152
  {min_width}
153
+ bind:fullscreen
147
154
  on:dragenter={handle_drag_event}
148
155
  on:dragleave={handle_drag_event}
149
156
  on:dragover={handle_drag_event}
@@ -165,6 +172,7 @@ const handle_drop = (event) => {
165
172
  selectable={_selectable}
166
173
  {root}
167
174
  {sources}
175
+ {fullscreen}
168
176
  on:edit={() => gradio.dispatch("edit")}
169
177
  on:clear={() => {
170
178
  gradio.dispatch("clear");
@@ -182,6 +190,9 @@ const handle_drop = (event) => {
182
190
  on:close_stream={() => {
183
191
  gradio.dispatch("close_stream", "stream");
184
192
  }}
193
+ on:fullscreen={({ detail }) => {
194
+ fullscreen = detail;
195
+ }}
185
196
  {label}
186
197
  {show_label}
187
198
  {pending}
package/dist/shared/ImagePreview.svelte CHANGED
@@ -21,6 +21,7 @@ export let show_share_button = false;
21
21
  export let i18n;
22
22
  export let show_fullscreen_button = true;
23
23
  export let display_icon_button_wrapper_top_corner = false;
24
+ export let fullscreen = false;
24
25
  const dispatch = createEventDispatcher();
25
26
  const handle_click = (evt) => {
26
27
  let coordinates = get_coordinates_of_clicked_image(evt);
@@ -44,7 +45,7 @@ let image_container;
44
45
  display_top_corner={display_icon_button_wrapper_top_corner}
45
46
  >
46
47
  {#if show_fullscreen_button}
47
- <FullscreenButton container={image_container} />
48
+ <FullscreenButton {fullscreen} on:fullscreen />
48
49
  {/if}
49
50
 
50
51
  {#if show_download_button}
package/dist/shared/ImagePreview.svelte.d.ts CHANGED
@@ -13,8 +13,10 @@ declare const __propDef: {
13
13
  i18n: I18nFormatter;
14
14
  show_fullscreen_button?: boolean | undefined;
15
15
  display_icon_button_wrapper_top_corner?: boolean | undefined;
16
+ fullscreen?: boolean | undefined;
16
17
  };
17
18
  events: {
19
+ fullscreen: CustomEvent<any>;
18
20
  share: CustomEvent<import("@gradio/utils").ShareData>;
19
21
  error: CustomEvent<string>;
20
22
  load: Event;
package/dist/shared/ImageUploader.svelte CHANGED
@@ -30,6 +30,7 @@ export let show_fullscreen_button = true;
30
30
  let upload_input;
31
31
  export let uploading = false;
32
32
  export let active_source = null;
33
+ export let fullscreen = false;
33
34
  async function handle_upload({
34
35
  detail
35
36
  }) {
@@ -44,6 +45,7 @@ async function handle_upload({
44
45
  } else {
45
46
  value = detail;
46
47
  }
48
+ await tick();
47
49
  dispatch("upload");
48
50
  }
49
51
  }
@@ -100,6 +102,26 @@ async function handle_select_source(source) {
100
102
  }
101
103
  }
102
104
  let image_container;
105
+ function on_drag_over(evt) {
106
+ evt.preventDefault();
107
+ evt.stopPropagation();
108
+ if (evt.dataTransfer) {
109
+ evt.dataTransfer.dropEffect = "copy";
110
+ }
111
+ dragging = true;
112
+ }
113
+ async function on_drop(evt) {
114
+ evt.preventDefault();
115
+ evt.stopPropagation();
116
+ dragging = false;
117
+ if (value) {
118
+ handle_clear();
119
+ await tick();
120
+ }
121
+ active_source = "upload";
122
+ await tick();
123
+ upload_input.load_files_from_drop(evt);
124
+ }
103
125
  </script>
104
126
 
105
127
  <BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
@@ -108,7 +130,7 @@ let image_container;
108
130
  <IconButtonWrapper>
109
131
  {#if value?.url && !active_streaming}
110
132
  {#if show_fullscreen_button}
111
- <FullscreenButton container={image_container} />
133
+ <FullscreenButton {fullscreen} on:fullscreen />
112
134
  {/if}
113
135
  <IconButton
114
136
  Icon={Clear}
@@ -121,10 +143,13 @@ let image_container;
121
143
  />
122
144
  {/if}
123
145
  </IconButtonWrapper>
146
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
124
147
  <div
125
148
  class="upload-container"
126
149
  class:reduced-height={sources.length > 1}
127
150
  style:width={value ? "auto" : "100%"}
151
+ on:dragover={on_drag_over}
152
+ on:drop={on_drop}
128
153
  >
129
154
  <Upload
130
155
  hidden={value !== null || active_source === "webcam"}
package/dist/shared/ImageUploader.svelte.d.ts CHANGED
@@ -23,9 +23,11 @@ declare const __propDef: {
23
23
  show_fullscreen_button?: boolean | undefined;
24
24
  uploading?: boolean | undefined;
25
25
  active_source?: ("clipboard" | "upload" | "microphone" | "webcam" | null) | undefined;
26
+ fullscreen?: boolean | undefined;
26
27
  dragging?: boolean | undefined;
27
28
  };
28
29
  events: {
30
+ fullscreen: CustomEvent<boolean>;
29
31
  error: CustomEvent<string> | CustomEvent<any>;
30
32
  drag: CustomEvent<any>;
31
33
  close_stream: CustomEvent<undefined>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/image",
3
- "version": "0.22.4",
3
+ "version": "0.22.6",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -10,13 +10,13 @@
10
10
  "cropperjs": "^1.5.12",
11
11
  "lazy-brush": "^1.0.1",
12
12
  "resize-observer-polyfill": "^1.5.1",
13
- "@gradio/atoms": "^0.16.0",
14
- "@gradio/client": "^1.14.2",
15
- "@gradio/icons": "^0.12.0",
16
- "@gradio/statustracker": "^0.10.10",
17
- "@gradio/upload": "^0.16.3",
13
+ "@gradio/atoms": "^0.16.1",
14
+ "@gradio/statustracker": "^0.10.11",
15
+ "@gradio/upload": "^0.16.5",
18
16
  "@gradio/utils": "^0.10.2",
19
- "@gradio/wasm": "^0.18.1"
17
+ "@gradio/wasm": "^0.18.1",
18
+ "@gradio/icons": "^0.12.0",
19
+ "@gradio/client": "^1.15.0"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@gradio/preview": "^0.13.0"
package/shared/ImagePreview.svelte CHANGED
@@ -27,10 +27,12 @@
27
27
  export let i18n: I18nFormatter;
28
28
  export let show_fullscreen_button = true;
29
29
  export let display_icon_button_wrapper_top_corner = false;
30
+ export let fullscreen = false;
30
31
 
31
32
  const dispatch = createEventDispatcher<{
32
33
  change: string;
33
34
  select: SelectData;
35
+ fullscreen: boolean;
34
36
  }>();
35
37
 
36
38
  const handle_click = (evt: MouseEvent): void => {
@@ -56,7 +58,7 @@
56
58
  display_top_corner={display_icon_button_wrapper_top_corner}
57
59
  >
58
60
  {#if show_fullscreen_button}
59
- <FullscreenButton container={image_container} />
61
+ <FullscreenButton {fullscreen} on:fullscreen />
60
62
  {/if}
61
63
 
62
64
  {#if show_download_button}
package/shared/ImageUploader.svelte CHANGED
@@ -42,6 +42,7 @@
42
42
  let upload_input: Upload;
43
43
  export let uploading = false;
44
44
  export let active_source: source_type = null;
45
+ export let fullscreen = false;
45
46
 
46
47
  async function handle_upload({
47
48
  detail
@@ -57,6 +58,8 @@
57
58
  } else {
58
59
  value = detail;
59
60
  }
61
+
62
+ await tick();
60
63
  dispatch("upload");
61
64
  }
62
65
  }
@@ -132,6 +135,31 @@
132
135
  }
133
136
 
134
137
  let image_container: HTMLElement;
138
+
139
+ function on_drag_over(evt: DragEvent): void {
140
+ evt.preventDefault();
141
+ evt.stopPropagation();
142
+ if (evt.dataTransfer) {
143
+ evt.dataTransfer.dropEffect = "copy";
144
+ }
145
+
146
+ dragging = true;
147
+ }
148
+
149
+ async function on_drop(evt: DragEvent): Promise<void> {
150
+ evt.preventDefault();
151
+ evt.stopPropagation();
152
+ dragging = false;
153
+
154
+ if (value) {
155
+ handle_clear();
156
+ await tick();
157
+ }
158
+
159
+ active_source = "upload";
160
+ await tick();
161
+ upload_input.load_files_from_drop(evt);
162
+ }
135
163
  </script>
136
164
 
137
165
  <BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
@@ -140,7 +168,7 @@
140
168
  <IconButtonWrapper>
141
169
  {#if value?.url && !active_streaming}
142
170
  {#if show_fullscreen_button}
143
- <FullscreenButton container={image_container} />
171
+ <FullscreenButton {fullscreen} on:fullscreen />
144
172
  {/if}
145
173
  <IconButton
146
174
  Icon={Clear}
@@ -153,10 +181,13 @@
153
181
  />
154
182
  {/if}
155
183
  </IconButtonWrapper>
184
+ <!-- svelte-ignore a11y-no-static-element-interactions -->
156
185
  <div
157
186
  class="upload-container"
158
187
  class:reduced-height={sources.length > 1}
159
188
  style:width={value ? "auto" : "100%"}
189
+ on:dragover={on_drag_over}
190
+ on:drop={on_drop}
160
191
  >
161
192
  <Upload
162
193
  hidden={value !== null || active_source === "webcam"}