@gradio/imageeditor 0.18.3 → 0.18.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.
Files changed (16) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/ImageEditor.stories.svelte +64 -34
  3. package/dist/shared/Controls.svelte +8 -8
  4. package/dist/shared/IconButton.svelte +2 -1
  5. package/dist/shared/IconButton.svelte.d.ts +1 -2
  6. package/dist/shared/ImageEditor.svelte +1 -1
  7. package/dist/shared/Layers.svelte +6 -6
  8. package/dist/shared/Toolbar.svelte +11 -11
  9. package/dist/shared/brush/ColorSwatch.svelte +1 -1
  10. package/package.json +10 -10
  11. package/shared/Controls.svelte +8 -8
  12. package/shared/IconButton.svelte +2 -1
  13. package/shared/ImageEditor.svelte +1 -1
  14. package/shared/Layers.svelte +6 -6
  15. package/shared/Toolbar.svelte +11 -11
  16. package/shared/brush/ColorSwatch.svelte +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,39 @@
1
1
  # @gradio/imageeditor
2
2
 
3
+ ## 0.18.5
4
+
5
+ ### Dependency updates
6
+
7
+ - @gradio/atoms@0.21.0
8
+ - @gradio/client@2.0.4
9
+ - @gradio/statustracker@0.12.3
10
+ - @gradio/image@0.25.2
11
+ - @gradio/upload@0.17.5
12
+
13
+ ## 0.18.4
14
+
15
+ ### Fixes
16
+
17
+ - [#12800](https://github.com/gradio-app/gradio/pull/12800) [`7a1c321`](https://github.com/gradio-app/gradio/commit/7a1c321b6546ba05a353488f5133e8262c4a8a39) - Bump svelte/kit for security reasons. Thanks @freddyaboulton!
18
+ - [#12779](https://github.com/gradio-app/gradio/pull/12779) [`ea2d3e9`](https://github.com/gradio-app/gradio/commit/ea2d3e985a8b42d188e551f517c5825c00790628) - Migrate Audio + Upload + Atoms to Svelte 5. Thanks @dawoodkhan82!
19
+
20
+ ### Dependency updates
21
+
22
+ - @gradio/statustracker@0.12.2
23
+ - @gradio/atoms@0.20.1
24
+ - @gradio/utils@0.11.2
25
+ - @gradio/icons@0.15.1
26
+ - @gradio/upload@0.17.4
27
+ - @gradio/client@2.0.3
28
+ - @gradio/image@0.25.1
29
+
30
+ ## 0.18.3
31
+
32
+ ### Dependency updates
33
+
34
+ - @gradio/utils@0.11.1
35
+ - @gradio/client@2.0.2
36
+
3
37
  ## 0.18.3
4
38
 
5
39
  ### Dependency updates
package/ImageEditor.stories.svelte CHANGED
@@ -1,11 +1,13 @@
1
- <script context="module">
2
- import { Template, Story } from "@storybook/addon-svelte-csf";
1
+ <script module>
2
+ import { defineMeta } from "@storybook/addon-svelte-csf";
3
+ import { userEvent, within } from "storybook/test";
3
4
  import ImageEditor from "./Index.svelte";
4
- import { format } from "svelte-i18n";
5
- import { get } from "svelte/store";
6
5
  import { allModes } from "../storybook/modes";
6
+ import { wrapProps } from "../storybook/wrapProps";
7
7
 
8
- export const meta = {
8
+ const cheetah = "/cheetah.jpg";
9
+
10
+ const { Story } = defineMeta({
9
11
  title: "Components/Image Editor",
10
12
  component: ImageEditor,
11
13
  parameters: {
@@ -17,31 +19,21 @@
17
19
  }
18
20
  }
19
21
  }
20
- };
22
+ });
21
23
  </script>
22
24
 
23
- <Template let:args>
24
- <div
25
- class="image-container"
26
- style="width: 500px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
27
- >
28
- <ImageEditor
29
- i18n={get(format)}
30
- {...args}
31
- server={{ accept_blobs: () => {} }}
32
- />
33
- </div>
34
- </Template>
35
-
36
25
  <Story
37
26
  name="Default Image Editor"
38
27
  args={{
39
28
  sources: ["webcam", "upload"],
40
29
  type: "pil",
41
- interactive: "true",
30
+ interactive: true,
42
31
  label: "Image Editor",
43
32
  show_label: true,
33
+ value: null,
44
34
  canvas_size: [800, 600],
35
+ transforms: ["crop"],
36
+ layers: { allow_additional_layers: true, layers: [] },
45
37
  brush: {
46
38
  default_size: "auto",
47
39
  colors: ["#ff0000", "#00ff00", "#0000ff"],
@@ -56,21 +48,36 @@
56
48
  constraints: null
57
49
  }
58
50
  }}
59
- />
51
+ >
52
+ {#snippet template(args)}
53
+ <div
54
+ class="image-container"
55
+ style="width: 500px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
56
+ >
57
+ <ImageEditor {...wrapProps(args)} />
58
+ </div>
59
+ {/snippet}
60
+ </Story>
60
61
 
61
- <!-- <Story
62
+ <Story
62
63
  name="Image Editor Undo/Redo Interactions"
63
64
  args={{
64
65
  value: {
65
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
66
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
67
- orig_name: "cheetah.jpg"
66
+ background: {
67
+ path: cheetah,
68
+ url: cheetah,
69
+ orig_name: "cheetah.jpg"
70
+ },
71
+ layers: [],
72
+ composite: null
68
73
  },
69
74
  type: "pil",
70
75
  placeholder: "Upload an image of a cat",
71
76
  sources: ["upload", "webcam"],
72
77
  canvas_size: [800, 800],
73
- interactive: "true",
78
+ interactive: true,
79
+ transforms: ["crop"],
80
+ layers: { allow_additional_layers: true, layers: [] },
74
81
  brush: {
75
82
  default_size: "auto",
76
83
  colors: ["#ff0000", "#00ff00", "#0000ff"],
@@ -79,14 +86,18 @@
79
86
  },
80
87
  eraser: {
81
88
  default_size: "auto"
89
+ },
90
+ webcam_options: {
91
+ mirror: true,
92
+ constraints: null
82
93
  }
83
94
  }}
95
+ parameters={{ chromatic: { disableSnapshot: true } }}
84
96
  play={async ({ canvasElement }) => {
85
97
  const canvas = within(canvasElement);
86
98
 
87
- const drawButton = canvas.getAllByLabelText("Draw button")[0];
88
-
89
- userEvent.click(drawButton);
99
+ const drawButton = canvas.getAllByLabelText("Brush")[0];
100
+ await userEvent.click(drawButton);
90
101
 
91
102
  const drawCanvas = document.getElementsByTagName("canvas")[0];
92
103
  if (!drawCanvas) {
@@ -108,18 +119,26 @@
108
119
  });
109
120
 
110
121
  await userEvent.click(canvas.getByLabelText("Undo"));
111
-
112
122
  await userEvent.click(canvas.getByLabelText("Redo"));
113
123
  }}
114
- /> -->
124
+ >
125
+ {#snippet template(args)}
126
+ <div
127
+ class="image-container"
128
+ style="width: 500px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
129
+ >
130
+ <ImageEditor {...wrapProps(args)} />
131
+ </div>
132
+ {/snippet}
133
+ </Story>
115
134
 
116
135
  <Story
117
136
  name="Static Image Display"
118
137
  args={{
119
138
  value: {
120
139
  composite: {
121
- path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
122
- url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
140
+ path: cheetah,
141
+ url: cheetah,
123
142
  size: null,
124
143
  orig_name: null,
125
144
  mime_type: null,
@@ -137,9 +156,20 @@
137
156
  label: "Image Editor",
138
157
  show_label: true,
139
158
  canvas_size: [800, 600],
159
+ transforms: [],
160
+ layers: { allow_additional_layers: false, layers: [] },
140
161
  webcam_options: {
141
162
  mirror: true,
142
163
  constraints: null
143
164
  }
144
165
  }}
145
- />
166
+ >
167
+ {#snippet template(args)}
168
+ <div
169
+ class="image-container"
170
+ style="width: 500px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
171
+ >
172
+ <ImageEditor {...wrapProps(args)} />
173
+ </div>
174
+ {/snippet}
175
+ </Story>
package/dist/shared/Controls.svelte CHANGED
@@ -60,7 +60,7 @@
60
60
  <IconButton
61
61
  Icon={Download}
62
62
  label="Download"
63
- on:click={(event) => {
63
+ onclick={(event) => {
64
64
  dispatch("download");
65
65
  event.stopPropagation();
66
66
  }}
@@ -70,7 +70,7 @@
70
70
  <IconButton
71
71
  Icon={Pan}
72
72
  label="Pan"
73
- on:click={(e) => {
73
+ onclick={(e) => {
74
74
  e.stopPropagation();
75
75
  dispatch("pan");
76
76
  }}
@@ -84,7 +84,7 @@
84
84
  <IconButton
85
85
  Icon={ZoomOut}
86
86
  label="Zoom out"
87
- on:click={(event) => {
87
+ onclick={(event) => {
88
88
  dispatch("zoom_out");
89
89
  event.stopPropagation();
90
90
  }}
@@ -92,7 +92,7 @@
92
92
  <IconButton
93
93
  Icon={ZoomIn}
94
94
  label="Zoom in"
95
- on:click={(event) => {
95
+ onclick={(event) => {
96
96
  dispatch("zoom_in");
97
97
  event.stopPropagation();
98
98
  }}
@@ -129,7 +129,7 @@
129
129
  <IconButton
130
130
  Icon={Undo}
131
131
  label="Undo"
132
- on:click={(event) => {
132
+ onclick={(event) => {
133
133
  dispatch("undo");
134
134
  event.stopPropagation();
135
135
  }}
@@ -139,7 +139,7 @@
139
139
  <IconButton
140
140
  Icon={Redo}
141
141
  label="Redo"
142
- on:click={(event) => {
142
+ onclick={(event) => {
143
143
  dispatch("redo");
144
144
  event.stopPropagation();
145
145
  }}
@@ -151,7 +151,7 @@
151
151
  disabled={!can_save}
152
152
  Icon={Check}
153
153
  label="Save changes"
154
- on:click={(event) => {
154
+ onclick={(event) => {
155
155
  dispatch("save");
156
156
  event.stopPropagation();
157
157
  }}
@@ -162,7 +162,7 @@
162
162
  <IconButton
163
163
  Icon={Trash}
164
164
  label="Clear canvas"
165
- on:click={(event) => {
165
+ onclick={(event) => {
166
166
  dispatch("remove_image");
167
167
  event.stopPropagation();
168
168
  }}
package/dist/shared/IconButton.svelte CHANGED
@@ -16,12 +16,13 @@
16
16
  export let offset = 0;
17
17
  export let label_position: "left" | "right" = "left";
18
18
  export let roundedness: "quite" | "very" = "quite";
19
+ export let onclick: ((event: MouseEvent) => void) | undefined = undefined;
19
20
  $: _color = highlight ? "var(--color-accent)" : color.toString();
20
21
  </script>
21
22
 
22
23
  <button
23
24
  {disabled}
24
- on:click
25
+ {onclick}
25
26
  aria-label={label}
26
27
  aria-haspopup={hasPopup}
27
28
  title={label}
package/dist/shared/IconButton.svelte.d.ts CHANGED
@@ -29,9 +29,8 @@ declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
29
29
  offset?: number;
30
30
  label_position?: "left" | "right";
31
31
  roundedness?: "quite" | "very";
32
+ onclick?: ((event: MouseEvent) => void) | undefined;
32
33
  }, {
33
- click: PointerEvent;
34
- } & {
35
34
  [evt: string]: CustomEvent<any>;
36
35
  }, {}, {}, string>;
37
36
  type IconButton = InstanceType<typeof IconButton>;
package/dist/shared/ImageEditor.svelte CHANGED
@@ -808,7 +808,7 @@
808
808
  color="white"
809
809
  background="var(--color-green-500)"
810
810
  label_position="right"
811
- on:click={handle_crop_confirm}
811
+ onclick={handle_crop_confirm}
812
812
  />
813
813
  </div>
814
814
  {/if}
package/dist/shared/Layers.svelte CHANGED
@@ -76,7 +76,7 @@
76
76
  <IconButton
77
77
  Icon={VisibilityOff}
78
78
  size="small"
79
- on:click={(e) => {
79
+ onclick={(e) => {
80
80
  e.stopPropagation();
81
81
  dispatch("toggle_layer_visibility", id);
82
82
  }}
@@ -85,7 +85,7 @@
85
85
  <IconButton
86
86
  Icon={Visibility}
87
87
  size="small"
88
- on:click={(e) => {
88
+ onclick={(e) => {
89
89
  e.stopPropagation();
90
90
  dispatch("toggle_layer_visibility", id);
91
91
  }}
@@ -100,7 +100,7 @@
100
100
  <div>
101
101
  {#if i > 0}
102
102
  <IconButton
103
- on:click={(e) => {
103
+ onclick={(e) => {
104
104
  e.stopPropagation();
105
105
  move_layer(id, "up");
106
106
  }}
@@ -110,7 +110,7 @@
110
110
  {/if}
111
111
  {#if i < $layers.layers.length - 1}
112
112
  <IconButton
113
- on:click={(e) => {
113
+ onclick={(e) => {
114
114
  e.stopPropagation();
115
115
  move_layer(id, "down");
116
116
  }}
@@ -120,7 +120,7 @@
120
120
  {/if}
121
121
  {#if $layers.layers.length > 1 && user_created}
122
122
  <IconButton
123
- on:click={(e) => {
123
+ onclick={(e) => {
124
124
  e.stopPropagation();
125
125
  delete_layer(id);
126
126
  }}
@@ -137,7 +137,7 @@
137
137
  <IconButton
138
138
  Icon={Plus}
139
139
  label="Add Layer"
140
- on:click={(e) => {
140
+ onclick={(e) => {
141
141
  e.stopPropagation();
142
142
  new_layer();
143
143
  }}
package/dist/shared/Toolbar.svelte CHANGED
@@ -131,7 +131,7 @@
131
131
  Icon={Image}
132
132
  label="Image"
133
133
  highlight={tool === "image"}
134
- on:click={(e) => handle_tool_click(e, "image")}
134
+ onclick={(e) => handle_tool_click(e, "image")}
135
135
  size="medium"
136
136
  padded={false}
137
137
  transparent={true}
@@ -141,7 +141,7 @@
141
141
  <IconButton
142
142
  Icon={Brush}
143
143
  label="Brush"
144
- on:click={(e) => handle_tool_click(e, "draw")}
144
+ onclick={(e) => handle_tool_click(e, "draw")}
145
145
  highlight={tool === "draw"}
146
146
  size="medium"
147
147
  padded={false}
@@ -152,7 +152,7 @@
152
152
  <IconButton
153
153
  Icon={Erase}
154
154
  label="Erase"
155
- on:click={(e) => handle_tool_click(e, "erase")}
155
+ onclick={(e) => handle_tool_click(e, "erase")}
156
156
  highlight={tool === "erase"}
157
157
  size="medium"
158
158
  padded={false}
@@ -172,7 +172,7 @@
172
172
  <IconButton
173
173
  Icon={Crop}
174
174
  label="Crop"
175
- on:click={(e) => handle_subtool_click(e, "crop")}
175
+ onclick={(e) => handle_subtool_click(e, "crop")}
176
176
  highlight={subtool === "crop"}
177
177
  size="medium"
178
178
  padded={false}
@@ -184,7 +184,7 @@
184
184
  <IconButton
185
185
  Icon={Resize}
186
186
  label="Resize"
187
- on:click={(e) => handle_subtool_click(e, "size")}
187
+ onclick={(e) => handle_subtool_click(e, "size")}
188
188
  highlight={subtool === "size"}
189
189
  size="medium"
190
190
  padded={false}
@@ -197,7 +197,7 @@
197
197
  <IconButton
198
198
  Icon={Upload}
199
199
  label="Upload"
200
- on:click={(e) => handle_subtool_click(e, "upload")}
200
+ onclick={(e) => handle_subtool_click(e, "upload")}
201
201
  highlight={subtool === "upload"}
202
202
  size="medium"
203
203
  padded={false}
@@ -209,7 +209,7 @@
209
209
  <IconButton
210
210
  Icon={ImagePaste}
211
211
  label="Paste"
212
- on:click={(e) => handle_subtool_click(e, "paste")}
212
+ onclick={(e) => handle_subtool_click(e, "paste")}
213
213
  highlight={subtool === "paste"}
214
214
  size="large"
215
215
  padded={false}
@@ -221,7 +221,7 @@
221
221
  <IconButton
222
222
  Icon={Webcam}
223
223
  label="Webcam"
224
- on:click={(e) => handle_subtool_click(e, "webcam")}
224
+ onclick={(e) => handle_subtool_click(e, "webcam")}
225
225
  highlight={subtool === "webcam"}
226
226
  size="medium"
227
227
  padded={false}
@@ -237,7 +237,7 @@
237
237
  Icon={ColorPickerSolid}
238
238
  label="Color"
239
239
  color={selected_color}
240
- on:click={(e) => handle_subtool_click(e, "color")}
240
+ onclick={(e) => handle_subtool_click(e, "color")}
241
241
  size="medium"
242
242
  padded={false}
243
243
  transparent={true}
@@ -246,7 +246,7 @@
246
246
  <IconButton
247
247
  Icon={Circle}
248
248
  label="Brush Size"
249
- on:click={(e) => handle_subtool_click(e, "size")}
249
+ onclick={(e) => handle_subtool_click(e, "size")}
250
250
  highlight={subtool === "size"}
251
251
  size="medium"
252
252
  padded={false}
@@ -281,7 +281,7 @@
281
281
  <IconButton
282
282
  Icon={Circle}
283
283
  label="Eraser Size"
284
- on:click={(e) => handle_subtool_click(e, "size")}
284
+ onclick={(e) => handle_subtool_click(e, "size")}
285
285
  highlight={subtool === "size"}
286
286
  size="medium"
287
287
  padded={false}
package/dist/shared/brush/ColorSwatch.svelte CHANGED
@@ -89,7 +89,7 @@
89
89
  {#if color_picker}
90
90
  <IconButton
91
91
  Icon={Plus}
92
- on:click={() => dispatch("add_color")}
92
+ onclick={() => dispatch("add_color")}
93
93
  roundedness="very"
94
94
  background={get_color(selected_color)}
95
95
  color="white"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/imageeditor",
3
- "version": "0.18.3",
3
+ "version": "0.18.5",
4
4
  "description": "Gradio UI packages",
5
5
  "type": "module",
6
6
  "author": "",
@@ -11,16 +11,16 @@
11
11
  "pixi-filters": "^6.1.4",
12
12
  "pixi.js": "^8.14.0",
13
13
  "tinycolor2": "^1.6.0",
14
- "@gradio/atoms": "^0.20.0",
15
- "@gradio/client": "^2.0.1",
16
- "@gradio/icons": "^0.15.0",
17
- "@gradio/image": "^0.25.0",
18
- "@gradio/statustracker": "^0.12.1",
19
- "@gradio/upload": "^0.17.3",
20
- "@gradio/utils": "^0.11.0"
14
+ "@gradio/atoms": "^0.21.0",
15
+ "@gradio/client": "^2.0.4",
16
+ "@gradio/icons": "^0.15.1",
17
+ "@gradio/image": "^0.25.2",
18
+ "@gradio/statustracker": "^0.12.3",
19
+ "@gradio/utils": "^0.11.2",
20
+ "@gradio/upload": "^0.17.5"
21
21
  },
22
22
  "devDependencies": {
23
- "@gradio/preview": "^0.15.1"
23
+ "@gradio/preview": "^0.15.2"
24
24
  },
25
25
  "main_changeset": true,
26
26
  "main": "./Index.svelte",
@@ -38,7 +38,7 @@
38
38
  "./package.json": "./package.json"
39
39
  },
40
40
  "peerDependencies": {
41
- "svelte": "^5.43.4"
41
+ "svelte": "^5.48.0"
42
42
  },
43
43
  "repository": {
44
44
  "type": "git",
package/shared/Controls.svelte CHANGED
@@ -60,7 +60,7 @@
60
60
  <IconButton
61
61
  Icon={Download}
62
62
  label="Download"
63
- on:click={(event) => {
63
+ onclick={(event) => {
64
64
  dispatch("download");
65
65
  event.stopPropagation();
66
66
  }}
@@ -70,7 +70,7 @@
70
70
  <IconButton
71
71
  Icon={Pan}
72
72
  label="Pan"
73
- on:click={(e) => {
73
+ onclick={(e) => {
74
74
  e.stopPropagation();
75
75
  dispatch("pan");
76
76
  }}
@@ -84,7 +84,7 @@
84
84
  <IconButton
85
85
  Icon={ZoomOut}
86
86
  label="Zoom out"
87
- on:click={(event) => {
87
+ onclick={(event) => {
88
88
  dispatch("zoom_out");
89
89
  event.stopPropagation();
90
90
  }}
@@ -92,7 +92,7 @@
92
92
  <IconButton
93
93
  Icon={ZoomIn}
94
94
  label="Zoom in"
95
- on:click={(event) => {
95
+ onclick={(event) => {
96
96
  dispatch("zoom_in");
97
97
  event.stopPropagation();
98
98
  }}
@@ -129,7 +129,7 @@
129
129
  <IconButton
130
130
  Icon={Undo}
131
131
  label="Undo"
132
- on:click={(event) => {
132
+ onclick={(event) => {
133
133
  dispatch("undo");
134
134
  event.stopPropagation();
135
135
  }}
@@ -139,7 +139,7 @@
139
139
  <IconButton
140
140
  Icon={Redo}
141
141
  label="Redo"
142
- on:click={(event) => {
142
+ onclick={(event) => {
143
143
  dispatch("redo");
144
144
  event.stopPropagation();
145
145
  }}
@@ -151,7 +151,7 @@
151
151
  disabled={!can_save}
152
152
  Icon={Check}
153
153
  label="Save changes"
154
- on:click={(event) => {
154
+ onclick={(event) => {
155
155
  dispatch("save");
156
156
  event.stopPropagation();
157
157
  }}
@@ -162,7 +162,7 @@
162
162
  <IconButton
163
163
  Icon={Trash}
164
164
  label="Clear canvas"
165
- on:click={(event) => {
165
+ onclick={(event) => {
166
166
  dispatch("remove_image");
167
167
  event.stopPropagation();
168
168
  }}
package/shared/IconButton.svelte CHANGED
@@ -16,12 +16,13 @@
16
16
  export let offset = 0;
17
17
  export let label_position: "left" | "right" = "left";
18
18
  export let roundedness: "quite" | "very" = "quite";
19
+ export let onclick: ((event: MouseEvent) => void) | undefined = undefined;
19
20
  $: _color = highlight ? "var(--color-accent)" : color.toString();
20
21
  </script>
21
22
 
22
23
  <button
23
24
  {disabled}
24
- on:click
25
+ {onclick}
25
26
  aria-label={label}
26
27
  aria-haspopup={hasPopup}
27
28
  title={label}
package/shared/ImageEditor.svelte CHANGED
@@ -808,7 +808,7 @@
808
808
  color="white"
809
809
  background="var(--color-green-500)"
810
810
  label_position="right"
811
- on:click={handle_crop_confirm}
811
+ onclick={handle_crop_confirm}
812
812
  />
813
813
  </div>
814
814
  {/if}
package/shared/Layers.svelte CHANGED
@@ -76,7 +76,7 @@
76
76
  <IconButton
77
77
  Icon={VisibilityOff}
78
78
  size="small"
79
- on:click={(e) => {
79
+ onclick={(e) => {
80
80
  e.stopPropagation();
81
81
  dispatch("toggle_layer_visibility", id);
82
82
  }}
@@ -85,7 +85,7 @@
85
85
  <IconButton
86
86
  Icon={Visibility}
87
87
  size="small"
88
- on:click={(e) => {
88
+ onclick={(e) => {
89
89
  e.stopPropagation();
90
90
  dispatch("toggle_layer_visibility", id);
91
91
  }}
@@ -100,7 +100,7 @@
100
100
  <div>
101
101
  {#if i > 0}
102
102
  <IconButton
103
- on:click={(e) => {
103
+ onclick={(e) => {
104
104
  e.stopPropagation();
105
105
  move_layer(id, "up");
106
106
  }}
@@ -110,7 +110,7 @@
110
110
  {/if}
111
111
  {#if i < $layers.layers.length - 1}
112
112
  <IconButton
113
- on:click={(e) => {
113
+ onclick={(e) => {
114
114
  e.stopPropagation();
115
115
  move_layer(id, "down");
116
116
  }}
@@ -120,7 +120,7 @@
120
120
  {/if}
121
121
  {#if $layers.layers.length > 1 && user_created}
122
122
  <IconButton
123
- on:click={(e) => {
123
+ onclick={(e) => {
124
124
  e.stopPropagation();
125
125
  delete_layer(id);
126
126
  }}
@@ -137,7 +137,7 @@
137
137
  <IconButton
138
138
  Icon={Plus}
139
139
  label="Add Layer"
140
- on:click={(e) => {
140
+ onclick={(e) => {
141
141
  e.stopPropagation();
142
142
  new_layer();
143
143
  }}
package/shared/Toolbar.svelte CHANGED
@@ -131,7 +131,7 @@
131
131
  Icon={Image}
132
132
  label="Image"
133
133
  highlight={tool === "image"}
134
- on:click={(e) => handle_tool_click(e, "image")}
134
+ onclick={(e) => handle_tool_click(e, "image")}
135
135
  size="medium"
136
136
  padded={false}
137
137
  transparent={true}
@@ -141,7 +141,7 @@
141
141
  <IconButton
142
142
  Icon={Brush}
143
143
  label="Brush"
144
- on:click={(e) => handle_tool_click(e, "draw")}
144
+ onclick={(e) => handle_tool_click(e, "draw")}
145
145
  highlight={tool === "draw"}
146
146
  size="medium"
147
147
  padded={false}
@@ -152,7 +152,7 @@
152
152
  <IconButton
153
153
  Icon={Erase}
154
154
  label="Erase"
155
- on:click={(e) => handle_tool_click(e, "erase")}
155
+ onclick={(e) => handle_tool_click(e, "erase")}
156
156
  highlight={tool === "erase"}
157
157
  size="medium"
158
158
  padded={false}
@@ -172,7 +172,7 @@
172
172
  <IconButton
173
173
  Icon={Crop}
174
174
  label="Crop"
175
- on:click={(e) => handle_subtool_click(e, "crop")}
175
+ onclick={(e) => handle_subtool_click(e, "crop")}
176
176
  highlight={subtool === "crop"}
177
177
  size="medium"
178
178
  padded={false}
@@ -184,7 +184,7 @@
184
184
  <IconButton
185
185
  Icon={Resize}
186
186
  label="Resize"
187
- on:click={(e) => handle_subtool_click(e, "size")}
187
+ onclick={(e) => handle_subtool_click(e, "size")}
188
188
  highlight={subtool === "size"}
189
189
  size="medium"
190
190
  padded={false}
@@ -197,7 +197,7 @@
197
197
  <IconButton
198
198
  Icon={Upload}
199
199
  label="Upload"
200
- on:click={(e) => handle_subtool_click(e, "upload")}
200
+ onclick={(e) => handle_subtool_click(e, "upload")}
201
201
  highlight={subtool === "upload"}
202
202
  size="medium"
203
203
  padded={false}
@@ -209,7 +209,7 @@
209
209
  <IconButton
210
210
  Icon={ImagePaste}
211
211
  label="Paste"
212
- on:click={(e) => handle_subtool_click(e, "paste")}
212
+ onclick={(e) => handle_subtool_click(e, "paste")}
213
213
  highlight={subtool === "paste"}
214
214
  size="large"
215
215
  padded={false}
@@ -221,7 +221,7 @@
221
221
  <IconButton
222
222
  Icon={Webcam}
223
223
  label="Webcam"
224
- on:click={(e) => handle_subtool_click(e, "webcam")}
224
+ onclick={(e) => handle_subtool_click(e, "webcam")}
225
225
  highlight={subtool === "webcam"}
226
226
  size="medium"
227
227
  padded={false}
@@ -237,7 +237,7 @@
237
237
  Icon={ColorPickerSolid}
238
238
  label="Color"
239
239
  color={selected_color}
240
- on:click={(e) => handle_subtool_click(e, "color")}
240
+ onclick={(e) => handle_subtool_click(e, "color")}
241
241
  size="medium"
242
242
  padded={false}
243
243
  transparent={true}
@@ -246,7 +246,7 @@
246
246
  <IconButton
247
247
  Icon={Circle}
248
248
  label="Brush Size"
249
- on:click={(e) => handle_subtool_click(e, "size")}
249
+ onclick={(e) => handle_subtool_click(e, "size")}
250
250
  highlight={subtool === "size"}
251
251
  size="medium"
252
252
  padded={false}
@@ -281,7 +281,7 @@
281
281
  <IconButton
282
282
  Icon={Circle}
283
283
  label="Eraser Size"
284
- on:click={(e) => handle_subtool_click(e, "size")}
284
+ onclick={(e) => handle_subtool_click(e, "size")}
285
285
  highlight={subtool === "size"}
286
286
  size="medium"
287
287
  padded={false}
package/shared/brush/ColorSwatch.svelte CHANGED
@@ -89,7 +89,7 @@
89
89
  {#if color_picker}
90
90
  <IconButton
91
91
  Icon={Plus}
92
- on:click={() => dispatch("add_color")}
92
+ onclick={() => dispatch("add_color")}
93
93
  roundedness="very"
94
94
  background={get_color(selected_color)}
95
95
  color="white"