@gradio/imageeditor 0.12.6 → 0.12.8

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 (5) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/ImageEditor.stories.svelte +27 -151
  3. package/dist/shared/layers/Layers.svelte +1 -0
  4. package/package.json +8 -8
  5. package/shared/layers/Layers.svelte +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @gradio/imageeditor
2
2
 
3
+ ## 0.12.8
4
+
5
+ ### Dependency updates
6
+
7
+ - @gradio/statustracker@0.10.3
8
+ - @gradio/atoms@0.13.2
9
+ - @gradio/utils@0.10.1
10
+ - @gradio/client@1.12.0
11
+ - @gradio/upload@0.15.1
12
+ - @gradio/wasm@0.17.3
13
+ - @gradio/image@0.21.1
14
+
15
+ ## 0.12.7
16
+
17
+ ### Features
18
+
19
+ - [#10446](https://github.com/gradio-app/gradio/pull/10446) [`2cf449a`](https://github.com/gradio-app/gradio/commit/2cf449abb38815bb3414ac9bee1535f5f0f834ae) - Add more ImageEditor js tests. Thanks @freddyaboulton!
20
+
21
+ ### Dependency updates
22
+
23
+ - @gradio/client@1.11.0
24
+ - @gradio/upload@0.15.0
25
+ - @gradio/image@0.21.0
26
+
3
27
  ## 0.12.6
4
28
 
5
29
  ### Dependency updates
package/ImageEditor.stories.svelte CHANGED
@@ -55,157 +55,6 @@
55
55
  }}
56
56
  />
57
57
 
58
- <!-- <Story
59
- name="Image Editor Drawing Interactions"
60
- args={{
61
- value: {
62
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
63
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
64
- orig_name: "cheetah.jpg"
65
- },
66
- type: "pil",
67
- sources: ["upload", "webcam"],
68
- interactive: "true",
69
- brush: {
70
- default_size: "auto",
71
- colors: ["#ff0000", "#00ff00", "#0000ff"],
72
- default_color: "#ff0000",
73
- color_mode: "defaults"
74
- },
75
- eraser: {
76
- default_size: "auto"
77
- }
78
- }}
79
- play={async ({ canvasElement }) => {
80
- const canvas = within(canvasElement);
81
-
82
- const drawButton = canvas.getAllByLabelText("Draw button")[0];
83
-
84
- userEvent.click(drawButton);
85
-
86
- const drawCanvas = document.getElementsByTagName("canvas")[0];
87
- if (!drawCanvas) {
88
- throw new Error("Could not find canvas");
89
- }
90
-
91
- await new Promise((r) => setTimeout(r, 1000));
92
-
93
- await userEvent.pointer({
94
- keys: "[MouseLeft>]",
95
- target: drawCanvas,
96
- coords: { clientX: 300, clientY: 100 }
97
- });
98
-
99
- await userEvent.pointer({
100
- keys: "[MouseLeft>]",
101
- target: drawCanvas,
102
- coords: { clientX: 300, clientY: 100 }
103
- });
104
-
105
- await userEvent.pointer({
106
- keys: "[MouseLeft>]",
107
- target: drawCanvas,
108
- coords: { clientX: 300, clientY: 100 }
109
- });
110
-
111
- await userEvent.pointer({
112
- target: drawCanvas,
113
- coords: { clientX: 300, clientY: 300 }
114
- });
115
-
116
- await userEvent.pointer({
117
- target: drawCanvas,
118
- coords: { clientX: 300, clientY: 300 }
119
- });
120
-
121
- await userEvent.pointer({
122
- target: drawCanvas,
123
- coords: { clientX: 100, clientY: 100 }
124
- });
125
-
126
- await userEvent.click(canvas.getByLabelText("Draw button"));
127
-
128
- var availableColors = document.querySelectorAll(
129
- "button.color:not(.empty):not(.selected):not(.hidden)"
130
- );
131
-
132
- await userEvent.click(availableColors[0]);
133
-
134
- await userEvent.keyboard("{Escape}");
135
-
136
- await userEvent.pointer({
137
- keys: "[MouseLeft>]",
138
- target: drawCanvas,
139
- coords: { clientX: 50, clientY: 50 }
140
- });
141
-
142
- await userEvent.pointer({
143
- keys: "[MouseLeft>]",
144
- target: drawCanvas,
145
- coords: { clientX: 100, clientY: 100 }
146
- });
147
-
148
- await userEvent.pointer({
149
- target: drawCanvas,
150
- coords: { clientX: 100, clientY: 300 }
151
- });
152
-
153
- await userEvent.pointer({
154
- target: drawCanvas,
155
- coords: { clientX: 300, clientY: 300 }
156
- });
157
-
158
- await userEvent.pointer({
159
- target: drawCanvas,
160
- coords: { clientX: 100, clientY: 100 }
161
- });
162
-
163
- await userEvent.click(canvas.getByLabelText("Transform button"));
164
-
165
- const bottomCropHandle =
166
- document.getElementsByClassName("handle corner b")[0];
167
-
168
- await userEvent.pointer({
169
- keys: "[MouseLeft>]",
170
- target: bottomCropHandle,
171
- coords: { clientX: 1000, clientY: 200 }
172
- });
173
-
174
- await userEvent.pointer({
175
- target: bottomCropHandle,
176
- coords: { clientX: 500, clientY: 0 }
177
- });
178
-
179
- await userEvent.pointer({
180
- keys: "[MouseLeft>]",
181
- target: bottomCropHandle,
182
- coords: { clientX: 500, clientY: 0 }
183
- });
184
-
185
- await userEvent.pointer({
186
- keys: "[MouseLeft>]",
187
- coords: { clientX: 500, clientY: 0 }
188
- });
189
-
190
- await userEvent.pointer({
191
- target: drawCanvas,
192
- coords: { clientX: 100, clientY: 300 }
193
- });
194
-
195
- userEvent.tripleClick(drawCanvas);
196
-
197
- await new Promise((r) => setTimeout(r, 1000));
198
-
199
- userEvent.click(canvas.getByLabelText("Show Layers"));
200
-
201
- await new Promise((r) => setTimeout(r, 1000));
202
-
203
- userEvent.click(canvas.getByLabelText("Add Layer"));
204
-
205
- await userEvent.click(canvas.getByLabelText("Clear canvas"));
206
- }}
207
- /> -->
208
-
209
58
  <Story
210
59
  name="Image Editor Undo/Redo Interactions"
211
60
  args={{
@@ -260,3 +109,30 @@
260
109
  await userEvent.click(canvas.getByLabelText("Redo"));
261
110
  }}
262
111
  />
112
+
113
+ <Story
114
+ name="Static Image Display"
115
+ args={{
116
+ value: {
117
+ composite: {
118
+ path: "",
119
+ url: "/output-image.png",
120
+ size: null,
121
+ orig_name: null,
122
+ mime_type: null,
123
+ is_stream: false,
124
+ meta: {
125
+ _type: "gradio.FileData"
126
+ }
127
+ },
128
+ layers: [],
129
+ background: null,
130
+ id: null
131
+ },
132
+ type: "pil",
133
+ interactive: false,
134
+ label: "Image Editor",
135
+ show_label: true,
136
+ canvas_size: [800, 600]
137
+ }}
138
+ />
package/dist/shared/layers/Layers.svelte CHANGED
@@ -126,6 +126,7 @@ onMount(async () => {
126
126
  <li>
127
127
  <button
128
128
  class:selected_layer={$current_layer === layer}
129
+ aria-label={`layer-${i + 1}`}
129
130
  on:click={() =>
130
131
  ($current_layer = LayerManager.change_active_layer(i))}
131
132
  >Layer {i + 1}</button
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/imageeditor",
3
- "version": "0.12.6",
3
+ "version": "0.12.8",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -10,14 +10,14 @@
10
10
  "@types/tinycolor2": "^1.4.6",
11
11
  "pixi.js": "^7.3.2",
12
12
  "tinycolor2": "^1.6.0",
13
- "@gradio/atoms": "^0.13.1",
14
- "@gradio/client": "^1.10.0",
15
- "@gradio/image": "^0.20.4",
13
+ "@gradio/client": "^1.12.0",
16
14
  "@gradio/icons": "^0.10.0",
17
- "@gradio/upload": "^0.14.8",
18
- "@gradio/statustracker": "^0.10.2",
19
- "@gradio/utils": "^0.10.0",
20
- "@gradio/wasm": "^0.17.2"
15
+ "@gradio/atoms": "^0.13.2",
16
+ "@gradio/statustracker": "^0.10.3",
17
+ "@gradio/upload": "^0.15.1",
18
+ "@gradio/utils": "^0.10.1",
19
+ "@gradio/image": "^0.21.1",
20
+ "@gradio/wasm": "^0.17.3"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@gradio/preview": "^0.13.0"
package/shared/layers/Layers.svelte CHANGED
@@ -145,6 +145,7 @@
145
145
  <li>
146
146
  <button
147
147
  class:selected_layer={$current_layer === layer}
148
+ aria-label={`layer-${i + 1}`}
148
149
  on:click={() =>
149
150
  ($current_layer = LayerManager.change_active_layer(i))}
150
151
  >Layer {i + 1}</button