@gradio/image 0.22.4 → 0.22.5
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.
- package/CHANGELOG.md +10 -0
- package/dist/shared/ImageUploader.svelte +24 -0
- package/package.json +3 -3
- package/shared/ImageUploader.svelte +30 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @gradio/image
|
|
2
2
|
|
|
3
|
+
## 0.22.5
|
|
4
|
+
|
|
5
|
+
### Fixes
|
|
6
|
+
|
|
7
|
+
- [#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!
|
|
8
|
+
|
|
9
|
+
### Dependency updates
|
|
10
|
+
|
|
11
|
+
- @gradio/upload@0.16.4
|
|
12
|
+
|
|
3
13
|
## 0.22.4
|
|
4
14
|
|
|
5
15
|
### Fixes
|
|
@@ -44,6 +44,7 @@ async function handle_upload({
|
|
|
44
44
|
} else {
|
|
45
45
|
value = detail;
|
|
46
46
|
}
|
|
47
|
+
await tick();
|
|
47
48
|
dispatch("upload");
|
|
48
49
|
}
|
|
49
50
|
}
|
|
@@ -100,6 +101,26 @@ async function handle_select_source(source) {
|
|
|
100
101
|
}
|
|
101
102
|
}
|
|
102
103
|
let image_container;
|
|
104
|
+
function on_drag_over(evt) {
|
|
105
|
+
evt.preventDefault();
|
|
106
|
+
evt.stopPropagation();
|
|
107
|
+
if (evt.dataTransfer) {
|
|
108
|
+
evt.dataTransfer.dropEffect = "copy";
|
|
109
|
+
}
|
|
110
|
+
dragging = true;
|
|
111
|
+
}
|
|
112
|
+
async function on_drop(evt) {
|
|
113
|
+
evt.preventDefault();
|
|
114
|
+
evt.stopPropagation();
|
|
115
|
+
dragging = false;
|
|
116
|
+
if (value) {
|
|
117
|
+
handle_clear();
|
|
118
|
+
await tick();
|
|
119
|
+
}
|
|
120
|
+
active_source = "upload";
|
|
121
|
+
await tick();
|
|
122
|
+
upload_input.load_files_from_drop(evt);
|
|
123
|
+
}
|
|
103
124
|
</script>
|
|
104
125
|
|
|
105
126
|
<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
|
|
@@ -121,10 +142,13 @@ let image_container;
|
|
|
121
142
|
/>
|
|
122
143
|
{/if}
|
|
123
144
|
</IconButtonWrapper>
|
|
145
|
+
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
124
146
|
<div
|
|
125
147
|
class="upload-container"
|
|
126
148
|
class:reduced-height={sources.length > 1}
|
|
127
149
|
style:width={value ? "auto" : "100%"}
|
|
150
|
+
on:dragover={on_drag_over}
|
|
151
|
+
on:drop={on_drop}
|
|
128
152
|
>
|
|
129
153
|
<Upload
|
|
130
154
|
hidden={value !== null || active_source === "webcam"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/image",
|
|
3
|
-
"version": "0.22.
|
|
3
|
+
"version": "0.22.5",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -10,11 +10,11 @@
|
|
|
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
13
|
"@gradio/client": "^1.14.2",
|
|
15
14
|
"@gradio/icons": "^0.12.0",
|
|
16
15
|
"@gradio/statustracker": "^0.10.10",
|
|
17
|
-
"@gradio/upload": "^0.16.
|
|
16
|
+
"@gradio/upload": "^0.16.4",
|
|
17
|
+
"@gradio/atoms": "^0.16.0",
|
|
18
18
|
"@gradio/utils": "^0.10.2",
|
|
19
19
|
"@gradio/wasm": "^0.18.1"
|
|
20
20
|
},
|
|
@@ -57,6 +57,8 @@
|
|
|
57
57
|
} else {
|
|
58
58
|
value = detail;
|
|
59
59
|
}
|
|
60
|
+
|
|
61
|
+
await tick();
|
|
60
62
|
dispatch("upload");
|
|
61
63
|
}
|
|
62
64
|
}
|
|
@@ -132,6 +134,31 @@
|
|
|
132
134
|
}
|
|
133
135
|
|
|
134
136
|
let image_container: HTMLElement;
|
|
137
|
+
|
|
138
|
+
function on_drag_over(evt: DragEvent): void {
|
|
139
|
+
evt.preventDefault();
|
|
140
|
+
evt.stopPropagation();
|
|
141
|
+
if (evt.dataTransfer) {
|
|
142
|
+
evt.dataTransfer.dropEffect = "copy";
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
dragging = true;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
async function on_drop(evt: DragEvent): Promise<void> {
|
|
149
|
+
evt.preventDefault();
|
|
150
|
+
evt.stopPropagation();
|
|
151
|
+
dragging = false;
|
|
152
|
+
|
|
153
|
+
if (value) {
|
|
154
|
+
handle_clear();
|
|
155
|
+
await tick();
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
active_source = "upload";
|
|
159
|
+
await tick();
|
|
160
|
+
upload_input.load_files_from_drop(evt);
|
|
161
|
+
}
|
|
135
162
|
</script>
|
|
136
163
|
|
|
137
164
|
<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
|
|
@@ -153,10 +180,13 @@
|
|
|
153
180
|
/>
|
|
154
181
|
{/if}
|
|
155
182
|
</IconButtonWrapper>
|
|
183
|
+
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
156
184
|
<div
|
|
157
185
|
class="upload-container"
|
|
158
186
|
class:reduced-height={sources.length > 1}
|
|
159
187
|
style:width={value ? "auto" : "100%"}
|
|
188
|
+
on:dragover={on_drag_over}
|
|
189
|
+
on:drop={on_drop}
|
|
160
190
|
>
|
|
161
191
|
<Upload
|
|
162
192
|
hidden={value !== null || active_source === "webcam"}
|