@gradio/imageeditor 0.3.1 → 0.3.2

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 (6) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/ImageEditor.stories.svelte +21 -4
  3. package/Index.svelte +2 -0
  4. package/package.json +8 -8
  5. package/shared/Controls.svelte +0 -4
  6. package/shared/InteractiveImageEditor.svelte +9 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @gradio/imageeditor
2
2
 
3
+ ## 0.3.2
4
+
5
+ ### Fixes
6
+
7
+ - [#7219](https://github.com/gradio-app/gradio/pull/7219) [`faead14`](https://github.com/gradio-app/gradio/commit/faead1403cdba6415912a6ad512291ac63b04173) - Show label in interactive image editor. Thanks [@hannahblair](https://github.com/hannahblair)!
8
+
3
9
  ## 0.3.1
4
10
 
5
11
  ### Patch Changes
@@ -151,4 +157,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
151
157
 
152
158
  - [#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)!
153
159
 
154
- # @gradio/image
160
+ # @gradio/image
package/ImageEditor.stories.svelte CHANGED
@@ -1,13 +1,25 @@
1
- <script lang="ts">
2
- import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
1
+ <script context="module">
2
+ import { Template, Story } from "@storybook/addon-svelte-csf";
3
3
  import ImageEditor from "./Index.svelte";
4
4
  import { format } from "svelte-i18n";
5
5
  import { get } from "svelte/store";
6
6
  import { userEvent, within } from "@storybook/testing-library";
7
+ import { allModes } from "../storybook/modes";
8
+
9
+ export const meta = {
10
+ title: "Components/Image Editor",
11
+ component: ImageEditor,
12
+ parameters: {
13
+ chromatic: {
14
+ modes: {
15
+ desktop: allModes["desktop"],
16
+ mobile: allModes["mobile"]
17
+ }
18
+ }
19
+ }
20
+ };
7
21
  </script>
8
22
 
9
- <Meta title="Components/Image Editor" component={ImageEditor} />
10
-
11
23
  <Template let:args>
12
24
  <div
13
25
  class="image-container"
@@ -23,6 +35,8 @@
23
35
  sources: ["webcam", "upload"],
24
36
  type: "pil",
25
37
  interactive: "true",
38
+ label: "Image Editor",
39
+ show_label: true,
26
40
  brush: {
27
41
  default_size: "auto",
28
42
  colors: ["#ff0000", "#00ff00", "#0000ff"],
@@ -37,6 +51,9 @@
37
51
 
38
52
  <Story
39
53
  name="Image Editor Interactions"
54
+ parameters={{
55
+ diffThreshold: 0.1
56
+ }}
40
57
  args={{
41
58
  value: {
42
59
  path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
package/Index.svelte CHANGED
@@ -156,6 +156,8 @@
156
156
  bind:this={editor_instance}
157
157
  {root}
158
158
  {sources}
159
+ {label}
160
+ {show_label}
159
161
  on:save={(e) => handle_save()}
160
162
  on:edit={() => gradio.dispatch("edit")}
161
163
  on:clear={() => gradio.dispatch("clear")}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gradio/imageeditor",
3
- "version": "0.3.1",
3
+ "version": "0.3.2",
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.5.0",
14
- "@gradio/client": "^0.10.1",
13
+ "@gradio/atoms": "^0.5.1",
14
+ "@gradio/client": "^0.11.0",
15
+ "@gradio/image": "^0.8.0",
15
16
  "@gradio/icons": "^0.3.2",
16
- "@gradio/image": "^0.7.1",
17
- "@gradio/statustracker": "^0.4.4",
18
- "@gradio/upload": "^0.7.0",
19
- "@gradio/utils": "^0.2.1",
20
- "@gradio/wasm": "^0.5.1"
17
+ "@gradio/statustracker": "^0.4.5",
18
+ "@gradio/upload": "^0.7.1",
19
+ "@gradio/utils": "^0.2.2",
20
+ "@gradio/wasm": "^0.6.0"
21
21
  },
22
22
  "main_changeset": true,
23
23
  "main": "./Index.svelte",
package/shared/Controls.svelte CHANGED
@@ -97,8 +97,4 @@
97
97
  gap: var(--spacing-sm);
98
98
  z-index: var(--layer-5);
99
99
  }
100
-
101
- .save :global(svg) {
102
- transform: translateY(1px);
103
- }
104
100
  </style>
package/shared/InteractiveImageEditor.svelte CHANGED
@@ -29,12 +29,16 @@
29
29
  export let brush: IBrush | null;
30
30
  export let eraser: Eraser | null;
31
31
  import { Tools, Crop, Brush, Sources } from "./tools";
32
+ import { BlockLabel } from "@gradio/atoms";
33
+ import { Image as ImageIcon } from "@gradio/icons";
32
34
 
33
35
  export let sources: ("clipboard" | "webcam" | "upload")[];
34
36
  export let crop_size: [number, number] | `${string}:${string}` | null = null;
35
37
  export let i18n: I18nFormatter;
36
38
  export let root: string;
37
39
  export let proxy_url: string;
40
+ export let label: string | undefined = undefined;
41
+ export let show_label: boolean;
38
42
  export let changeable = false;
39
43
  export let value: EditorData | null = {
40
44
  background: null,
@@ -111,6 +115,11 @@
111
115
  : editor.set_tool("draw"));
112
116
  </script>
113
117
 
118
+ <BlockLabel
119
+ {show_label}
120
+ Icon={ImageIcon}
121
+ label={label || i18n("image.image")}
122
+ />
114
123
  <ImageEditor
115
124
  bind:this={editor}
116
125
  {changeable}