@gradio/imageeditor 0.1.4 → 0.2.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.
- package/CHANGELOG.md +13 -1
- package/Example.svelte +8 -2
- package/ImageEditor.stories.svelte +11 -17
- package/package.json +6 -6
- package/shared/tools/Brush.svelte +0 -12
- package/shared/tools/ColorSwatch.svelte +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @gradio/imageeditor
|
|
2
2
|
|
|
3
|
+
## 0.2.0
|
|
4
|
+
|
|
5
|
+
### Features
|
|
6
|
+
|
|
7
|
+
- [#6809](https://github.com/gradio-app/gradio/pull/6809) [`1401d99`](https://github.com/gradio-app/gradio/commit/1401d99ade46d87da75b5f5808a3354c49f1d1ea) - Fix `ImageEditor` interaction story. Thanks [@hannahblair](https://github.com/hannahblair)!
|
|
8
|
+
|
|
9
|
+
## 0.1.5
|
|
10
|
+
|
|
11
|
+
### Fixes
|
|
12
|
+
|
|
13
|
+
- [#6799](https://github.com/gradio-app/gradio/pull/6799) [`c352811`](https://github.com/gradio-app/gradio/commit/c352811f76d4126613ece0a584f8c552fdd8d1f6) - Adds docstrings for `gr.WaveformOptions`, `gr.Brush`, and `gr.Eraser`, fixes examples for `ImageEditor`, and allows individual images to be used as the initial `value` for `ImageEditor`. Thanks [@abidlabs](https://github.com/abidlabs)!
|
|
14
|
+
|
|
3
15
|
## 0.1.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -96,4 +108,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
|
|
|
96
108
|
|
|
97
109
|
- [#6502](https://github.com/gradio-app/gradio/pull/6502) [`070f71c93`](https://github.com/gradio-app/gradio/commit/070f71c933d846ce8e2fe11cdd9bc0f3f897f29f) - Ensure image editor crop and draw cursor works as expected when the scroll position changes. Thanks [@pngwn](https://github.com/pngwn)!
|
|
98
110
|
|
|
99
|
-
# @gradio/image
|
|
111
|
+
# @gradio/image
|
package/Example.svelte
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { BaseImage as Image } from "@gradio/image";
|
|
3
|
+
import type { EditorData } from "./shared/InteractiveImageEditor.svelte";
|
|
3
4
|
|
|
4
|
-
export let value:
|
|
5
|
+
export let value: EditorData;
|
|
5
6
|
export let samples_dir: string;
|
|
6
7
|
export let type: "gallery" | "table";
|
|
7
8
|
export let selected = false;
|
|
@@ -13,10 +14,15 @@
|
|
|
13
14
|
class:gallery={type === "gallery"}
|
|
14
15
|
class:selected
|
|
15
16
|
>
|
|
16
|
-
<Image src={samples_dir + value} alt="" />
|
|
17
|
+
<Image src={samples_dir + (value.composite || value.background)} alt="" />
|
|
17
18
|
</div>
|
|
18
19
|
|
|
19
20
|
<style>
|
|
21
|
+
.container :global(img) {
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: 100%;
|
|
24
|
+
}
|
|
25
|
+
|
|
20
26
|
.container.selected {
|
|
21
27
|
border-color: var(--border-color-accent);
|
|
22
28
|
}
|
|
@@ -25,17 +25,12 @@
|
|
|
25
25
|
interactive: "true",
|
|
26
26
|
brush: {
|
|
27
27
|
default_size: "auto",
|
|
28
|
-
sizes: "auto",
|
|
29
|
-
size_mode: "fixed",
|
|
30
|
-
antialias: true,
|
|
31
28
|
colors: ["#ff0000", "#00ff00", "#0000ff"],
|
|
32
|
-
default_color: "#ff0000"
|
|
29
|
+
default_color: "#ff0000",
|
|
30
|
+
color_mode: "defaults"
|
|
33
31
|
},
|
|
34
32
|
eraser: {
|
|
35
|
-
default_size: "auto"
|
|
36
|
-
sizes: "auto",
|
|
37
|
-
size_mode: "fixed",
|
|
38
|
-
antialias: true
|
|
33
|
+
default_size: "auto"
|
|
39
34
|
}
|
|
40
35
|
}}
|
|
41
36
|
/>
|
|
@@ -53,17 +48,12 @@
|
|
|
53
48
|
interactive: "true",
|
|
54
49
|
brush: {
|
|
55
50
|
default_size: "auto",
|
|
56
|
-
sizes: "auto",
|
|
57
|
-
size_mode: "fixed",
|
|
58
|
-
antialias: true,
|
|
59
51
|
colors: ["#ff0000", "#00ff00", "#0000ff"],
|
|
60
|
-
default_color: "#ff0000"
|
|
52
|
+
default_color: "#ff0000",
|
|
53
|
+
color_mode: "defaults"
|
|
61
54
|
},
|
|
62
55
|
eraser: {
|
|
63
|
-
default_size: "auto"
|
|
64
|
-
sizes: "auto",
|
|
65
|
-
size_mode: "fixed",
|
|
66
|
-
antialias: true
|
|
56
|
+
default_size: "auto"
|
|
67
57
|
}
|
|
68
58
|
}}
|
|
69
59
|
play={async ({ canvasElement }) => {
|
|
@@ -115,7 +105,11 @@
|
|
|
115
105
|
|
|
116
106
|
await userEvent.click(canvas.getByLabelText("Color button"));
|
|
117
107
|
|
|
118
|
-
|
|
108
|
+
var availableColors = document.querySelectorAll(
|
|
109
|
+
"button.color:not(.empty):not(.selected):not(.hidden)"
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
await userEvent.click(availableColors[0]);
|
|
119
113
|
|
|
120
114
|
await userEvent.keyboard("{Escape}");
|
|
121
115
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/imageeditor",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -10,12 +10,12 @@
|
|
|
10
10
|
"@types/tinycolor2": "^1.4.6",
|
|
11
11
|
"pixi.js": "^7.3.2",
|
|
12
12
|
"tinycolor2": "^1.6.0",
|
|
13
|
-
"@gradio/atoms": "^0.4.
|
|
14
|
-
"@gradio/client": "^0.9.
|
|
13
|
+
"@gradio/atoms": "^0.4.1",
|
|
14
|
+
"@gradio/client": "^0.9.3",
|
|
15
15
|
"@gradio/icons": "^0.3.2",
|
|
16
|
-
"@gradio/statustracker": "^0.4.
|
|
17
|
-
"@gradio/image": "^0.5.
|
|
18
|
-
"@gradio/upload": "^0.5.
|
|
16
|
+
"@gradio/statustracker": "^0.4.3",
|
|
17
|
+
"@gradio/image": "^0.5.3",
|
|
18
|
+
"@gradio/upload": "^0.5.6",
|
|
19
19
|
"@gradio/utils": "^0.2.0",
|
|
20
20
|
"@gradio/wasm": "^0.4.0"
|
|
21
21
|
},
|
|
@@ -6,18 +6,6 @@
|
|
|
6
6
|
* The default size of the eraser.
|
|
7
7
|
*/
|
|
8
8
|
default_size: number | "auto";
|
|
9
|
-
/**
|
|
10
|
-
* The sizes to show in the size swatch
|
|
11
|
-
*/
|
|
12
|
-
sizes: number[] | "auto";
|
|
13
|
-
/**
|
|
14
|
-
* Whether to show _only_ the sizes specified in `sizes`, or to show the sizes specified in `sizes` along with the size slider.
|
|
15
|
-
*/
|
|
16
|
-
size_mode: "fixed" | "defaults";
|
|
17
|
-
/**
|
|
18
|
-
* Whether to use antialiasing when drawing the eraser.
|
|
19
|
-
*/
|
|
20
|
-
antialias: boolean;
|
|
21
9
|
}
|
|
22
10
|
|
|
23
11
|
export interface Brush extends Eraser {
|