pixedi 1.8.0 → 1.10.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 +8 -0
- package/README.md +29 -7
- package/README.npm.md +29 -7
- package/README.widget.md +33 -11
- package/dist/lib/index.js +1268 -1193
- package/dist/lib/index.umd.js +7 -4
- package/dist/widget/pixedi-widget.js +16 -13
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## 1.10.1
|
|
6
|
+
|
|
7
|
+
- Add `background` option to settings.
|
|
8
|
+
|
|
9
|
+
## 1.9.0
|
|
10
|
+
|
|
11
|
+
- Add single-tool mode: with one tool in `settings.tools` the editor renders only that tool, its Close button calls `onBack` and its Save button produces the image, calls `onSave` and shows a spinner while saving.
|
|
12
|
+
|
|
5
13
|
## 1.8.0
|
|
6
14
|
|
|
7
15
|
- Make SurfaceTool component draggible.
|
package/README.md
CHANGED
|
@@ -13,6 +13,7 @@ A lightweight, embeddable React image editor component.
|
|
|
13
13
|
- **Image filters** — two modes (see [Filters](#filters) below)
|
|
14
14
|
- Undo/redo history
|
|
15
15
|
- Social-media size presets (Facebook, Instagram, LinkedIn)
|
|
16
|
+
- Single-tool mode — a minimal editor when only one tool is enabled (see [Single-tool mode](#single-tool-mode))
|
|
16
17
|
- React component and standalone UMD widget
|
|
17
18
|
- TypeScript declarations included
|
|
18
19
|
|
|
@@ -97,13 +98,34 @@ function AppBase64() {
|
|
|
97
98
|
|
|
98
99
|
### Settings
|
|
99
100
|
|
|
100
|
-
| Setting | Type | Default | Description
|
|
101
|
-
| ------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------- |
|
|
102
|
-
| `tools` | `Array<"resize" \| "crop" \| "presetCrop" \| "flip" \| "rotate" \| "filters">` | `["resize","crop","presetCrop","flip","rotate","filters"]` | Tools to show in the sidebar. Use an empty array to disable editing.
|
|
103
|
-
| `infobar` | `boolean` | `
|
|
104
|
-
| `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP.
|
|
105
|
-
| `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP.
|
|
106
|
-
| `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`).
|
|
101
|
+
| Setting | Type | Default | Description |
|
|
102
|
+
| ------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
|
103
|
+
| `tools` | `Array<"resize" \| "crop" \| "presetCrop" \| "flip" \| "rotate" \| "filters">` | `["resize","crop","presetCrop","flip","rotate","filters"]` | Tools to show in the sidebar. A single tool switches to [single-tool mode](#single-tool-mode). Use an empty array to disable editing. |
|
|
104
|
+
| `infobar` | `boolean` | `true` | Show the image info panel below the canvas. |
|
|
105
|
+
| `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP. |
|
|
106
|
+
| `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP. |
|
|
107
|
+
| `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
|
|
108
|
+
| `background` | `"circled" \| "diagonals" \| "rhombus"` | — | Apply a decorative pattern to the editor frame background. |
|
|
109
|
+
|
|
110
|
+
## Single-tool mode
|
|
111
|
+
|
|
112
|
+
Passing exactly one entry in `settings.tools` renders a minimal editor: no header, sidebar or infobar — just the image with that tool already open.
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
<Pixedi
|
|
116
|
+
image="https://example.com/photo.jpg"
|
|
117
|
+
onSave={async (image) => console.log(image)}
|
|
118
|
+
onBack={() => console.log("User cancelled editing")}
|
|
119
|
+
settings={{ tools: ["crop"] }}
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
In this mode the tool's own buttons drive the flow:
|
|
124
|
+
|
|
125
|
+
- **Close** (red ✕) calls `onBack` immediately.
|
|
126
|
+
- **Save** (green ✓) applies the change, encodes the image and calls `onSave` with the result. While saving, the check icon is replaced by a spinner and both buttons are disabled.
|
|
127
|
+
|
|
128
|
+
After a successful save the editor stays mounted and reopens the tool on the newly produced image, so the user can keep editing or close.
|
|
107
129
|
|
|
108
130
|
## Filters
|
|
109
131
|
|
package/README.npm.md
CHANGED
|
@@ -13,6 +13,7 @@ A lightweight, embeddable React image editor component.
|
|
|
13
13
|
- **Image filters** — two modes (see [Filters](#filters) below)
|
|
14
14
|
- Undo/redo history
|
|
15
15
|
- Social-media size presets (Facebook, Instagram, LinkedIn)
|
|
16
|
+
- Single-tool mode — a minimal editor when only one tool is enabled (see [Single-tool mode](#single-tool-mode))
|
|
16
17
|
- React component and standalone UMD widget
|
|
17
18
|
- TypeScript declarations included
|
|
18
19
|
|
|
@@ -97,13 +98,34 @@ function AppBase64() {
|
|
|
97
98
|
|
|
98
99
|
### Settings
|
|
99
100
|
|
|
100
|
-
| Setting | Type | Default | Description
|
|
101
|
-
| ------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------- |
|
|
102
|
-
| `tools` | `Array<"resize" \| "crop" \| "presetCrop" \| "flip" \| "rotate" \| "filters">` | `["resize","crop","presetCrop","flip","rotate","filters"]` | Tools to show in the sidebar. Use an empty array to disable editing.
|
|
103
|
-
| `infobar` | `boolean` | `
|
|
104
|
-
| `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP.
|
|
105
|
-
| `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP.
|
|
106
|
-
| `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`).
|
|
101
|
+
| Setting | Type | Default | Description |
|
|
102
|
+
| ------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
|
103
|
+
| `tools` | `Array<"resize" \| "crop" \| "presetCrop" \| "flip" \| "rotate" \| "filters">` | `["resize","crop","presetCrop","flip","rotate","filters"]` | Tools to show in the sidebar. A single tool switches to [single-tool mode](#single-tool-mode). Use an empty array to disable editing. |
|
|
104
|
+
| `infobar` | `boolean` | `true` | Show the image info panel below the canvas. |
|
|
105
|
+
| `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP. |
|
|
106
|
+
| `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP. |
|
|
107
|
+
| `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
|
|
108
|
+
| `background` | `"circled" \| "diagonals" \| "rhombus"` | — | Apply a decorative pattern to the editor frame background. |
|
|
109
|
+
|
|
110
|
+
## Single-tool mode
|
|
111
|
+
|
|
112
|
+
Passing exactly one entry in `settings.tools` renders a minimal editor: no header, sidebar or infobar — just the image with that tool already open.
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
<Pixedi
|
|
116
|
+
image="https://example.com/photo.jpg"
|
|
117
|
+
onSave={async (image) => console.log(image)}
|
|
118
|
+
onBack={() => console.log("User cancelled editing")}
|
|
119
|
+
settings={{ tools: ["crop"] }}
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
In this mode the tool's own buttons drive the flow:
|
|
124
|
+
|
|
125
|
+
- **Close** (red ✕) calls `onBack` immediately.
|
|
126
|
+
- **Save** (green ✓) applies the change, encodes the image and calls `onSave` with the result. While saving, the check icon is replaced by a spinner and both buttons are disabled.
|
|
127
|
+
|
|
128
|
+
After a successful save the editor stays mounted and reopens the tool on the newly produced image, so the user can keep editing or close.
|
|
107
129
|
|
|
108
130
|
## Filters
|
|
109
131
|
|
package/README.widget.md
CHANGED
|
@@ -57,22 +57,44 @@ Creates the editor inside the element with the given `containerId`. Only one wid
|
|
|
57
57
|
|
|
58
58
|
### `Settings`
|
|
59
59
|
|
|
60
|
-
| Setting | Type | Default | Description
|
|
61
|
-
| ------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------- |
|
|
62
|
-
| `tools` | `Array<"resize" \| "crop" \| "presetCrop" \| "flip" \| "rotate" \| "filters">` | `["resize","crop","presetCrop","flip","rotate","filters"]` | Tools to show in the sidebar. Use an empty array to disable editing.
|
|
63
|
-
| `infobar` | `boolean` | `
|
|
64
|
-
| `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP.
|
|
65
|
-
| `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP.
|
|
66
|
-
| `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`).
|
|
60
|
+
| Setting | Type | Default | Description |
|
|
61
|
+
| ------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
|
62
|
+
| `tools` | `Array<"resize" \| "crop" \| "presetCrop" \| "flip" \| "rotate" \| "filters">` | `["resize","crop","presetCrop","flip","rotate","filters"]` | Tools to show in the sidebar. A single tool switches to [single-tool mode](#single-tool-mode). Use an empty array to disable editing. |
|
|
63
|
+
| `infobar` | `boolean` | `true` | Show the image info panel below the canvas. |
|
|
64
|
+
| `quality` | `number` | `0.85` | Output compression quality (`0`–`1`) for JPEG/WebP. |
|
|
65
|
+
| `saveAsWEBP` | `boolean` | `false` | Encode the final image as WebP. |
|
|
66
|
+
| `exportAs` | `"blob" \| "base64"` | `"blob"` | Pass the result to `onSave` as a `Blob` or as a base64 data URI (`data:<mimeType>;base64,...`). |
|
|
67
|
+
| `background` | `"circled" \| "diagonals" \| "rhombus"` | — | Apply a decorative pattern to the editor frame background. |
|
|
68
|
+
|
|
69
|
+
## Single-tool mode
|
|
70
|
+
|
|
71
|
+
Passing exactly one entry in `settings.tools` renders a minimal editor: no header, sidebar or infobar — just the image with that tool already open.
|
|
72
|
+
|
|
73
|
+
```js
|
|
74
|
+
PixediWidget.init({
|
|
75
|
+
containerId: "editor",
|
|
76
|
+
image: "https://example.com/photo.jpg",
|
|
77
|
+
onSave: async (image) => console.log(image),
|
|
78
|
+
onBack: () => console.log("User cancelled editing"),
|
|
79
|
+
settings: { tools: ["crop"] },
|
|
80
|
+
});
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
In this mode the tool's own buttons drive the flow:
|
|
84
|
+
|
|
85
|
+
- **Close** (red ✕) calls `onBack` immediately.
|
|
86
|
+
- **Save** (green ✓) applies the change, encodes the image and calls `onSave` with the result. While saving, the check icon is replaced by a spinner and both buttons are disabled.
|
|
87
|
+
|
|
88
|
+
After a successful save the editor stays mounted and reopens the tool on the newly produced image.
|
|
67
89
|
|
|
68
90
|
## Widget instance
|
|
69
91
|
|
|
70
92
|
`init` returns an object with two methods:
|
|
71
93
|
|
|
72
|
-
| Method
|
|
73
|
-
|
|
|
74
|
-
| `setTheme(theme)`
|
|
75
|
-
| `destroy()`
|
|
94
|
+
| Method | Description |
|
|
95
|
+
| ----------------- | ------------------------------------------------------------------- |
|
|
96
|
+
| `setTheme(theme)` | Switches the UI theme (`"light"` or `"dark"`) without losing edits. |
|
|
97
|
+
| `destroy()` | Unmounts the editor and removes its styles. |
|
|
76
98
|
|
|
77
99
|
### `setTheme(theme)`
|
|
78
100
|
|