pixedi 1.6.1 → 1.8.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.widget.md +105 -0
  3. package/dist/lib/index.js +477 -338
  4. package/dist/lib/index.umd.js +4 -4
  5. package/dist/widget/pixedi-widget.js +4 -4
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,15 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file.
4
4
 
5
+ ## 1.8.0
6
+
7
+ - Make SurfaceTool component draggible.
8
+
9
+ ## 1.7.0
10
+
11
+ - Add method `setTheme` in widget.
12
+ - Bugfix: the image resize with scroll up/down did not work in widget.
13
+
5
14
  ## 1.6.1
6
15
 
7
16
  - Bugfix, the Sidebar pop-left when change the crop resolution.
package/README.widget.md ADDED
@@ -0,0 +1,105 @@
1
+ # pixedi widget
2
+
3
+ A standalone UMD build of the Pixedi image editor for non-React environments. It mounts into a Shadow DOM, so its styles are fully isolated from the host page.
4
+
5
+ ## Installation
6
+
7
+ Pin to a specific version in production:
8
+
9
+ ```html
10
+ <script src="https://cdn.jsdelivr.net/npm/pixedi@1.3.0/dist/widget/pixedi-widget.js"></script>
11
+ ```
12
+
13
+ For the latest version (use only for testing):
14
+
15
+ ```html
16
+ <script src="https://cdn.jsdelivr.net/npm/pixedi/dist/widget/pixedi-widget.js"></script>
17
+ ```
18
+
19
+ The script exposes `window.PixediWidget`.
20
+
21
+ ## Usage
22
+
23
+ ```html
24
+ <div id="editor" style="width: 100%; height: 600px"></div>
25
+
26
+ <script>
27
+ const widget = PixediWidget.init({
28
+ containerId: "editor",
29
+ image: "https://example.com/photo.jpg",
30
+ theme: "light",
31
+ onSave: async (image) => {
32
+ // image is a Blob by default, or a base64 data URI when
33
+ // settings.exportAs is "base64"
34
+ console.log(image);
35
+ },
36
+ onBack: () => {
37
+ console.log("User cancelled editing");
38
+ },
39
+ });
40
+ </script>
41
+ ```
42
+
43
+ ## `PixediWidget.init(options)`
44
+
45
+ Creates the editor inside the element with the given `containerId`. Only one widget can be active at a time — calling `init` again destroys the previous instance. Returns a widget instance, or `undefined` if the container is not found or a shadow root cannot be attached.
46
+
47
+ ### Options
48
+
49
+ | Option | Type | Description |
50
+ | ------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------------- |
51
+ | `containerId` | `string` | ID of the element to mount the editor into. Required. |
52
+ | `image` | `string \| Blob` | URL, base64 data URI, or `Blob` of the image to edit. Required. |
53
+ | `onSave` | `(image: Blob \| string) => void \| Promise<void>` | Called when the user clicks Save. Receives the edited image as a `Blob` or a base64 data URI. |
54
+ | `onBack` | `() => void` | Called when the user clicks Back/Cancel. |
55
+ | `theme` | `"light" \| "dark"` | UI color theme. Defaults to `"light"`. |
56
+ | `settings` | `Settings` | Optional editor settings — same shape as the React component's `settings` prop. |
57
+
58
+ ### `Settings`
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` | `false` | 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
+
68
+ ## Widget instance
69
+
70
+ `init` returns an object with two methods:
71
+
72
+ | Method | Description |
73
+ | ---------------------- | ---------------------------------------------------------------------- |
74
+ | `setTheme(theme)` | Switches the UI theme (`"light"` or `"dark"`) without losing edits. |
75
+ | `destroy()` | Unmounts the editor and removes its styles. |
76
+
77
+ ### `setTheme(theme)`
78
+
79
+ Re-renders the editor with a new theme. Because the widget lives in a Shadow DOM, it does not inherit `data-theme` or classes from the host page — call `setTheme` to keep it in sync with your app's theme.
80
+
81
+ Example — follow a `data-theme` attribute on `<html>`:
82
+
83
+ ```js
84
+ const widget = PixediWidget.init({
85
+ containerId: "editor",
86
+ image: photo,
87
+ onSave,
88
+ onBack,
89
+ });
90
+
91
+ new MutationObserver(() => {
92
+ widget.setTheme(
93
+ document.documentElement.dataset.theme === "dark" ? "dark" : "light",
94
+ );
95
+ }).observe(document.documentElement, {
96
+ attributes: true,
97
+ attributeFilter: ["data-theme"],
98
+ });
99
+ ```
100
+
101
+ `setTheme` preserves the current editing state (crop, filters, undo history). Calling it after `destroy()` or after a newer `init()` is a safe no-op.
102
+
103
+ ## License
104
+
105
+ MIT