@gradio/imageslider 0.2.1 → 0.2.3
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
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @gradio/imageslider
|
|
2
2
|
|
|
3
|
+
## 0.2.3
|
|
4
|
+
|
|
5
|
+
### Dependency updates
|
|
6
|
+
|
|
7
|
+
- @gradio/statustracker@0.10.12
|
|
8
|
+
- @gradio/client@1.15.1
|
|
9
|
+
- @gradio/upload@0.16.6
|
|
10
|
+
|
|
11
|
+
## 0.2.2
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
- [#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!
|
|
16
|
+
|
|
17
|
+
### Dependency updates
|
|
18
|
+
|
|
19
|
+
- @gradio/statustracker@0.10.11
|
|
20
|
+
- @gradio/atoms@0.16.1
|
|
21
|
+
- @gradio/client@1.15.0
|
|
22
|
+
- @gradio/upload@0.16.5
|
|
23
|
+
|
|
3
24
|
## 0.2.1
|
|
4
25
|
|
|
5
26
|
### Dependency updates
|
package/Index.svelte
CHANGED
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
export let interactive: boolean;
|
|
34
34
|
export let placeholder: string | undefined = undefined;
|
|
35
35
|
export let show_fullscreen_button: boolean;
|
|
36
|
+
let fullscreen = false;
|
|
36
37
|
export let input_ready: boolean;
|
|
37
38
|
export let slider_position: number;
|
|
38
39
|
export let upload_count = 1;
|
|
@@ -117,6 +118,7 @@
|
|
|
117
118
|
{container}
|
|
118
119
|
{scale}
|
|
119
120
|
{min_width}
|
|
121
|
+
bind:fullscreen
|
|
120
122
|
>
|
|
121
123
|
<StatusTracker
|
|
122
124
|
autoscroll={gradio.autoscroll}
|
|
@@ -128,6 +130,10 @@
|
|
|
128
130
|
on:share={({ detail }) => gradio.dispatch("share", detail)}
|
|
129
131
|
on:error={({ detail }) => gradio.dispatch("error", detail)}
|
|
130
132
|
on:clear={() => gradio.dispatch("clear")}
|
|
133
|
+
on:fullscreen={({ detail }) => {
|
|
134
|
+
fullscreen = detail;
|
|
135
|
+
}}
|
|
136
|
+
{fullscreen}
|
|
131
137
|
{interactive}
|
|
132
138
|
bind:value
|
|
133
139
|
{label}
|
package/dist/Index.svelte
CHANGED
|
@@ -26,6 +26,7 @@ export let loading_status;
|
|
|
26
26
|
export let interactive;
|
|
27
27
|
export let placeholder = void 0;
|
|
28
28
|
export let show_fullscreen_button;
|
|
29
|
+
let fullscreen = false;
|
|
29
30
|
export let input_ready;
|
|
30
31
|
export let slider_position;
|
|
31
32
|
export let upload_count = 1;
|
|
@@ -89,6 +90,7 @@ const handle_drop = (event) => {
|
|
|
89
90
|
{container}
|
|
90
91
|
{scale}
|
|
91
92
|
{min_width}
|
|
93
|
+
bind:fullscreen
|
|
92
94
|
>
|
|
93
95
|
<StatusTracker
|
|
94
96
|
autoscroll={gradio.autoscroll}
|
|
@@ -100,6 +102,10 @@ const handle_drop = (event) => {
|
|
|
100
102
|
on:share={({ detail }) => gradio.dispatch("share", detail)}
|
|
101
103
|
on:error={({ detail }) => gradio.dispatch("error", detail)}
|
|
102
104
|
on:clear={() => gradio.dispatch("clear")}
|
|
105
|
+
on:fullscreen={({ detail }) => {
|
|
106
|
+
fullscreen = detail;
|
|
107
|
+
}}
|
|
108
|
+
{fullscreen}
|
|
103
109
|
{interactive}
|
|
104
110
|
bind:value
|
|
105
111
|
{label}
|
|
@@ -24,6 +24,7 @@ export let layer_images = true;
|
|
|
24
24
|
export let show_single = false;
|
|
25
25
|
export let slider_color;
|
|
26
26
|
export let show_fullscreen_button = true;
|
|
27
|
+
export let fullscreen = false;
|
|
27
28
|
export let el_width = 0;
|
|
28
29
|
export let max_height;
|
|
29
30
|
export let interactive = true;
|
|
@@ -92,7 +93,6 @@ onMount(() => {
|
|
|
92
93
|
observer?.disconnect();
|
|
93
94
|
};
|
|
94
95
|
});
|
|
95
|
-
let is_full_screen = false;
|
|
96
96
|
let slider_wrap_parent;
|
|
97
97
|
let image_size = { top: 0, left: 0, width: 0, height: 0 };
|
|
98
98
|
function handle_image_load(event) {
|
|
@@ -113,7 +113,7 @@ function handle_image_load(event) {
|
|
|
113
113
|
on:click={() => zoomable_image?.reset_zoom()}
|
|
114
114
|
/>
|
|
115
115
|
{#if show_fullscreen_button}
|
|
116
|
-
<FullscreenButton
|
|
116
|
+
<FullscreenButton {fullscreen} on:fullscreen />
|
|
117
117
|
{/if}
|
|
118
118
|
|
|
119
119
|
{#if show_download_button}
|
|
@@ -140,7 +140,7 @@ function handle_image_load(event) {
|
|
|
140
140
|
class="slider-wrap"
|
|
141
141
|
bind:this={slider_wrap_parent}
|
|
142
142
|
bind:clientWidth={el_width}
|
|
143
|
-
class:limit_height={!
|
|
143
|
+
class:limit_height={!fullscreen}
|
|
144
144
|
>
|
|
145
145
|
<Slider
|
|
146
146
|
bind:position
|
|
@@ -156,7 +156,7 @@ function handle_image_load(event) {
|
|
|
156
156
|
bind:img_el={img}
|
|
157
157
|
variant="preview"
|
|
158
158
|
transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
|
|
159
|
-
fullscreen
|
|
159
|
+
{fullscreen}
|
|
160
160
|
{max_height}
|
|
161
161
|
on:load={handle_image_load}
|
|
162
162
|
/>
|
|
@@ -169,7 +169,7 @@ function handle_image_load(event) {
|
|
|
169
169
|
loading="lazy"
|
|
170
170
|
{style}
|
|
171
171
|
transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
|
|
172
|
-
fullscreen
|
|
172
|
+
{fullscreen}
|
|
173
173
|
{max_height}
|
|
174
174
|
on:load={handle_image_load}
|
|
175
175
|
/>
|
|
@@ -13,11 +13,13 @@ declare const __propDef: {
|
|
|
13
13
|
show_single?: boolean | undefined;
|
|
14
14
|
slider_color: string;
|
|
15
15
|
show_fullscreen_button?: boolean | undefined;
|
|
16
|
+
fullscreen?: boolean | undefined;
|
|
16
17
|
el_width?: number | undefined;
|
|
17
18
|
max_height: number;
|
|
18
19
|
interactive?: boolean | undefined;
|
|
19
20
|
};
|
|
20
21
|
events: {
|
|
22
|
+
fullscreen: CustomEvent<boolean>;
|
|
21
23
|
clear: CustomEvent<void>;
|
|
22
24
|
} & {
|
|
23
25
|
[evt: string]: CustomEvent<any>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/imageslider",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -11,12 +11,12 @@
|
|
|
11
11
|
"@types/d3-selection": "^3.0.11",
|
|
12
12
|
"d3-drag": "^3.0.0",
|
|
13
13
|
"d3-selection": "^3.0.0",
|
|
14
|
-
"@gradio/atoms": "^0.16.
|
|
14
|
+
"@gradio/atoms": "^0.16.1",
|
|
15
15
|
"@gradio/icons": "^0.12.0",
|
|
16
|
-
"@gradio/
|
|
17
|
-
"@gradio/
|
|
16
|
+
"@gradio/statustracker": "^0.10.12",
|
|
17
|
+
"@gradio/client": "^1.15.1",
|
|
18
|
+
"@gradio/upload": "^0.16.6",
|
|
18
19
|
"@gradio/utils": "^0.10.2",
|
|
19
|
-
"@gradio/upload": "^0.16.4",
|
|
20
20
|
"@gradio/wasm": "^0.18.1"
|
|
21
21
|
},
|
|
22
22
|
"exports": {
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
export let show_single = false;
|
|
28
28
|
export let slider_color: string;
|
|
29
29
|
export let show_fullscreen_button = true;
|
|
30
|
+
export let fullscreen = false;
|
|
30
31
|
export let el_width = 0;
|
|
31
32
|
export let max_height: number;
|
|
32
33
|
export let interactive = true;
|
|
@@ -117,7 +118,6 @@
|
|
|
117
118
|
};
|
|
118
119
|
});
|
|
119
120
|
|
|
120
|
-
let is_full_screen = false;
|
|
121
121
|
let slider_wrap_parent: HTMLDivElement;
|
|
122
122
|
|
|
123
123
|
let image_size: { top: number; left: number; width: number; height: number } =
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
on:click={() => zoomable_image?.reset_zoom()}
|
|
142
142
|
/>
|
|
143
143
|
{#if show_fullscreen_button}
|
|
144
|
-
<FullscreenButton
|
|
144
|
+
<FullscreenButton {fullscreen} on:fullscreen />
|
|
145
145
|
{/if}
|
|
146
146
|
|
|
147
147
|
{#if show_download_button}
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
class="slider-wrap"
|
|
169
169
|
bind:this={slider_wrap_parent}
|
|
170
170
|
bind:clientWidth={el_width}
|
|
171
|
-
class:limit_height={!
|
|
171
|
+
class:limit_height={!fullscreen}
|
|
172
172
|
>
|
|
173
173
|
<Slider
|
|
174
174
|
bind:position
|
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
bind:img_el={img}
|
|
185
185
|
variant="preview"
|
|
186
186
|
transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
|
|
187
|
-
fullscreen
|
|
187
|
+
{fullscreen}
|
|
188
188
|
{max_height}
|
|
189
189
|
on:load={handle_image_load}
|
|
190
190
|
/>
|
|
@@ -197,7 +197,7 @@
|
|
|
197
197
|
loading="lazy"
|
|
198
198
|
{style}
|
|
199
199
|
transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
|
|
200
|
-
fullscreen
|
|
200
|
+
{fullscreen}
|
|
201
201
|
{max_height}
|
|
202
202
|
on:load={handle_image_load}
|
|
203
203
|
/>
|