@webiny/app-file-manager 6.0.0 → 6.1.0-beta.1
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/components/BottomInfoBar/BottomInfoBar.js +0 -10
- package/components/BottomInfoBar/BottomInfoBar.js.map +1 -1
- package/components/BottomInfoBar/SupportedFileTypes.js +5 -2
- package/components/BottomInfoBar/SupportedFileTypes.js.map +1 -1
- package/components/BulkActions/ActionEdit/domain/Batch.d.ts +3 -24
- package/components/FileDetails/FileDetails.js +1 -2
- package/components/FileDetails/FileDetails.js.map +1 -1
- package/components/FileDetails/components/ActionButton.d.ts +1 -1
- package/components/FileDetails/components/ActionButton.js.map +1 -1
- package/components/Grid/ActionButton.d.ts +1 -1
- package/components/Grid/ActionButton.js.map +1 -1
- package/components/Grid/File.d.ts +1 -1
- package/components/Grid/File.js.map +1 -1
- package/modules/FileManagerRenderer/FileManagerView/FileManagerView.js +1 -2
- package/modules/FileManagerRenderer/FileManagerView/FileManagerView.js.map +1 -1
- package/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Grid/Thumbnail.d.ts +2 -2
- package/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Grid/Thumbnail.js.map +1 -1
- package/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Thumbnail.d.ts +2 -2
- package/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Thumbnail.js.map +1 -1
- package/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/Thumbnail.d.ts +2 -2
- package/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/Thumbnail.js.map +1 -1
- package/package.json +25 -29
- package/components/ImageEditor/ImageEditor.d.ts +0 -45
- package/components/ImageEditor/ImageEditor.js +0 -218
- package/components/ImageEditor/ImageEditor.js.map +0 -1
- package/components/ImageEditor/ImageEditorDialog.d.ts +0 -16
- package/components/ImageEditor/ImageEditorDialog.js +0 -53
- package/components/ImageEditor/ImageEditorDialog.js.map +0 -1
- package/components/ImageEditor/index.d.ts +0 -1
- package/components/ImageEditor/index.js +0 -3
- package/components/ImageEditor/index.js.map +0 -1
- package/components/ImageEditor/toolbar/crop.d.ts +0 -4
- package/components/ImageEditor/toolbar/crop.js +0 -67
- package/components/ImageEditor/toolbar/crop.js.map +0 -1
- package/components/ImageEditor/toolbar/filter.d.ts +0 -3
- package/components/ImageEditor/toolbar/filter.js +0 -167
- package/components/ImageEditor/toolbar/filter.js.map +0 -1
- package/components/ImageEditor/toolbar/flip.d.ts +0 -4
- package/components/ImageEditor/toolbar/flip.js +0 -94
- package/components/ImageEditor/toolbar/flip.js.map +0 -1
- package/components/ImageEditor/toolbar/index.d.ts +0 -4
- package/components/ImageEditor/toolbar/index.js +0 -6
- package/components/ImageEditor/toolbar/index.js.map +0 -1
- package/components/ImageEditor/toolbar/rotate.d.ts +0 -4
- package/components/ImageEditor/toolbar/rotate.js +0 -93
- package/components/ImageEditor/toolbar/rotate.js.map +0 -1
- package/components/ImageEditor/toolbar/types.d.ts +0 -32
- package/components/ImageEditor/toolbar/types.js +0 -3
- package/components/ImageEditor/toolbar/types.js.map +0 -1
- package/modules/FileManagerRenderer/FileActions/FileDetails/EditImage.d.ts +0 -2
- package/modules/FileManagerRenderer/FileActions/FileDetails/EditImage.js +0 -111
- package/modules/FileManagerRenderer/FileActions/FileDetails/EditImage.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/app-file-manager",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.1.0-beta.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"repository": {
|
|
@@ -14,57 +14,53 @@
|
|
|
14
14
|
"@apollo/react-components": "3.1.5",
|
|
15
15
|
"@apollo/react-hooks": "3.1.5",
|
|
16
16
|
"@types/react": "18.2.79",
|
|
17
|
-
"@webiny/admin-ui": "6.0.
|
|
18
|
-
"@webiny/app": "6.0.
|
|
19
|
-
"@webiny/app-aco": "6.0.
|
|
20
|
-
"@webiny/app-admin": "6.0.
|
|
21
|
-
"@webiny/app-headless-cms": "6.0.
|
|
22
|
-
"@webiny/app-headless-cms-common": "6.0.
|
|
23
|
-
"@webiny/app-websockets": "6.0.
|
|
24
|
-
"@webiny/error": "6.0.
|
|
25
|
-
"@webiny/form": "6.0.
|
|
26
|
-
"@webiny/icons": "6.0.
|
|
27
|
-
"@webiny/plugins": "6.0.
|
|
28
|
-
"@webiny/react-composition": "6.0.
|
|
29
|
-
"@webiny/react-properties": "6.0.
|
|
30
|
-
"@webiny/utils": "6.0.
|
|
31
|
-
"@webiny/validation": "6.0.
|
|
17
|
+
"@webiny/admin-ui": "6.1.0-beta.1",
|
|
18
|
+
"@webiny/app": "6.1.0-beta.1",
|
|
19
|
+
"@webiny/app-aco": "6.1.0-beta.1",
|
|
20
|
+
"@webiny/app-admin": "6.1.0-beta.1",
|
|
21
|
+
"@webiny/app-headless-cms": "6.1.0-beta.1",
|
|
22
|
+
"@webiny/app-headless-cms-common": "6.1.0-beta.1",
|
|
23
|
+
"@webiny/app-websockets": "6.1.0-beta.1",
|
|
24
|
+
"@webiny/error": "6.1.0-beta.1",
|
|
25
|
+
"@webiny/form": "6.1.0-beta.1",
|
|
26
|
+
"@webiny/icons": "6.1.0-beta.1",
|
|
27
|
+
"@webiny/plugins": "6.1.0-beta.1",
|
|
28
|
+
"@webiny/react-composition": "6.1.0-beta.1",
|
|
29
|
+
"@webiny/react-properties": "6.1.0-beta.1",
|
|
30
|
+
"@webiny/utils": "6.1.0-beta.1",
|
|
31
|
+
"@webiny/validation": "6.1.0-beta.1",
|
|
32
32
|
"apollo-cache": "1.3.5",
|
|
33
33
|
"apollo-client": "2.6.10",
|
|
34
34
|
"apollo-link": "1.2.14",
|
|
35
35
|
"apollo-utilities": "1.3.4",
|
|
36
36
|
"bytes": "3.1.2",
|
|
37
|
-
"
|
|
38
|
-
"dataurl-to-blob": "0.0.1",
|
|
39
|
-
"dayjs": "1.11.19",
|
|
37
|
+
"dayjs": "1.11.20",
|
|
40
38
|
"dot-prop-immutable": "2.1.1",
|
|
41
|
-
"graphql": "16.13.
|
|
39
|
+
"graphql": "16.13.2",
|
|
42
40
|
"graphql-tag": "2.12.6",
|
|
43
|
-
"load-script": "1.0.0",
|
|
44
41
|
"lodash": "4.17.23",
|
|
45
|
-
"mime": "
|
|
42
|
+
"mime": "4.1.0",
|
|
46
43
|
"minimatch": "10.2.4",
|
|
47
44
|
"mobx": "6.15.0",
|
|
48
|
-
"mobx-react-lite": "
|
|
45
|
+
"mobx-react-lite": "4.1.1",
|
|
49
46
|
"prop-types": "15.8.1",
|
|
50
47
|
"react": "18.2.0",
|
|
51
48
|
"react-butterfiles": "1.3.3",
|
|
52
49
|
"react-custom-scrollbars": "4.2.1",
|
|
53
50
|
"react-dom": "18.2.0",
|
|
54
|
-
"react-hotkeyz": "1.0.4",
|
|
55
51
|
"react-lazy-load": "4.0.1",
|
|
56
|
-
"zod": "3.
|
|
52
|
+
"zod": "4.3.6"
|
|
57
53
|
},
|
|
58
54
|
"devDependencies": {
|
|
59
|
-
"@svgr/webpack": "
|
|
60
|
-
"@webiny/build-tools": "6.0.
|
|
55
|
+
"@svgr/webpack": "8.1.0",
|
|
56
|
+
"@webiny/build-tools": "6.1.0-beta.1",
|
|
61
57
|
"rimraf": "6.1.3",
|
|
62
58
|
"typescript": "5.9.3",
|
|
63
|
-
"vitest": "4.
|
|
59
|
+
"vitest": "4.1.2"
|
|
64
60
|
},
|
|
65
61
|
"publishConfig": {
|
|
66
62
|
"access": "public",
|
|
67
63
|
"directory": "dist"
|
|
68
64
|
},
|
|
69
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "3c1293ba17a14f239fb1cbf5d80cd66846849309"
|
|
70
66
|
}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { ImageEditorTool, ToolbarTool } from "./toolbar/types.js";
|
|
3
|
-
interface RenderPropArgs {
|
|
4
|
-
render: () => React.ReactNode;
|
|
5
|
-
getCanvasDataUrl: () => string;
|
|
6
|
-
activeTool: ImageEditorTool | null;
|
|
7
|
-
applyActiveTool: () => Promise<void>;
|
|
8
|
-
cancelActiveTool: () => Promise<void>;
|
|
9
|
-
}
|
|
10
|
-
interface ImageEditorPropsPropsOptions {
|
|
11
|
-
autoEnable: boolean;
|
|
12
|
-
}
|
|
13
|
-
interface ImageEditorProps {
|
|
14
|
-
src: string;
|
|
15
|
-
tools: ToolbarTool[];
|
|
16
|
-
options?: {
|
|
17
|
-
flip: ImageEditorPropsPropsOptions;
|
|
18
|
-
filter: ImageEditorPropsPropsOptions;
|
|
19
|
-
crop: ImageEditorPropsPropsOptions;
|
|
20
|
-
rotate: ImageEditorPropsPropsOptions;
|
|
21
|
-
};
|
|
22
|
-
onToolActivate?: () => void;
|
|
23
|
-
onToolDeactivate?: () => void;
|
|
24
|
-
children?: (props: RenderPropArgs) => React.ReactNode;
|
|
25
|
-
}
|
|
26
|
-
interface ImageEditorState {
|
|
27
|
-
tool: ImageEditorTool | null;
|
|
28
|
-
src: string;
|
|
29
|
-
}
|
|
30
|
-
declare class ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {
|
|
31
|
-
static defaultProps: Partial<ImageEditorProps>;
|
|
32
|
-
state: ImageEditorState;
|
|
33
|
-
canvas: React.RefObject<HTMLCanvasElement>;
|
|
34
|
-
image?: HTMLImageElement;
|
|
35
|
-
componentDidMount(): void;
|
|
36
|
-
private readonly updateCanvas;
|
|
37
|
-
private readonly activateTool;
|
|
38
|
-
private readonly deactivateTool;
|
|
39
|
-
readonly getCanvasDataUrl: () => string;
|
|
40
|
-
private readonly applyActiveTool;
|
|
41
|
-
private readonly cancelActiveTool;
|
|
42
|
-
private readonly getToolOptions;
|
|
43
|
-
render(): React.ReactNode;
|
|
44
|
-
}
|
|
45
|
-
export { ImageEditor };
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Button } from "@webiny/admin-ui";
|
|
3
|
-
import { flip, filter, crop, rotate } from "./toolbar/index.js";
|
|
4
|
-
/**
|
|
5
|
-
* Package load-script does not have types.
|
|
6
|
-
*/
|
|
7
|
-
// @ts-expect-error
|
|
8
|
-
import loadScript from "load-script";
|
|
9
|
-
const toolbar = {
|
|
10
|
-
flip,
|
|
11
|
-
filter,
|
|
12
|
-
crop,
|
|
13
|
-
rotate
|
|
14
|
-
};
|
|
15
|
-
const initScripts = () => {
|
|
16
|
-
return new Promise(resolve => {
|
|
17
|
-
// @ts-expect-error
|
|
18
|
-
if (window.Caman) {
|
|
19
|
-
return resolve();
|
|
20
|
-
}
|
|
21
|
-
return loadScript("https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js", resolve);
|
|
22
|
-
});
|
|
23
|
-
};
|
|
24
|
-
class ImageEditor extends React.Component {
|
|
25
|
-
static defaultProps = {
|
|
26
|
-
tools: ["crop", "flip", "rotate", "filter"]
|
|
27
|
-
};
|
|
28
|
-
state = {
|
|
29
|
-
tool: null,
|
|
30
|
-
src: ""
|
|
31
|
-
};
|
|
32
|
-
canvas = /*#__PURE__*/React.createRef();
|
|
33
|
-
componentDidMount() {
|
|
34
|
-
initScripts().then(() => {
|
|
35
|
-
this.updateCanvas();
|
|
36
|
-
setTimeout(() => {
|
|
37
|
-
const {
|
|
38
|
-
options
|
|
39
|
-
} = this.props;
|
|
40
|
-
if (!options || typeof options !== "object") {
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
for (const key in options) {
|
|
44
|
-
const option = options[key];
|
|
45
|
-
if (option.autoEnable === true) {
|
|
46
|
-
const tool = toolbar[key];
|
|
47
|
-
tool && this.activateTool(tool);
|
|
48
|
-
break;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}, 250);
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
updateCanvas = () => {
|
|
55
|
-
const {
|
|
56
|
-
src
|
|
57
|
-
} = this.props;
|
|
58
|
-
this.image = new window.Image();
|
|
59
|
-
const canvas = this.canvas.current;
|
|
60
|
-
if (canvas) {
|
|
61
|
-
this.image.onload = () => {
|
|
62
|
-
if (this.image) {
|
|
63
|
-
canvas.width = this.image.width;
|
|
64
|
-
canvas.height = this.image.height;
|
|
65
|
-
const ctx = canvas.getContext("2d");
|
|
66
|
-
ctx.drawImage(this.image, 0, 0);
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
this.image.src = src;
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
activateTool = tool => {
|
|
73
|
-
if (typeof tool === "string") {
|
|
74
|
-
tool = toolbar[tool];
|
|
75
|
-
}
|
|
76
|
-
this.setState({
|
|
77
|
-
tool
|
|
78
|
-
}, () => {
|
|
79
|
-
const tt = tool;
|
|
80
|
-
typeof tt.onActivate === "function" && tt.onActivate({
|
|
81
|
-
canvas: this.canvas,
|
|
82
|
-
options: this.getToolOptions(tt)
|
|
83
|
-
});
|
|
84
|
-
});
|
|
85
|
-
};
|
|
86
|
-
deactivateTool = () => {
|
|
87
|
-
this.setState({
|
|
88
|
-
tool: null
|
|
89
|
-
});
|
|
90
|
-
};
|
|
91
|
-
getCanvasDataUrl = () => {
|
|
92
|
-
const canvas = this.canvas.current;
|
|
93
|
-
if (canvas) {
|
|
94
|
-
const {
|
|
95
|
-
src
|
|
96
|
-
} = this.props;
|
|
97
|
-
if (src.startsWith("data:image/jpeg;")) {
|
|
98
|
-
return canvas.toDataURL("image/jpeg", 1.0);
|
|
99
|
-
}
|
|
100
|
-
return canvas.toDataURL();
|
|
101
|
-
}
|
|
102
|
-
return "";
|
|
103
|
-
};
|
|
104
|
-
applyActiveTool = async () => {
|
|
105
|
-
const {
|
|
106
|
-
tool
|
|
107
|
-
} = this.state;
|
|
108
|
-
if (!tool) {
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
if (tool.apply) {
|
|
112
|
-
await tool.apply({
|
|
113
|
-
canvas: this.canvas
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
|
-
this.deactivateTool();
|
|
117
|
-
};
|
|
118
|
-
cancelActiveTool = async () => {
|
|
119
|
-
const {
|
|
120
|
-
tool
|
|
121
|
-
} = this.state;
|
|
122
|
-
if (!tool) {
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
if (tool.cancel) {
|
|
126
|
-
await tool.cancel({
|
|
127
|
-
canvas: this.canvas
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
this.deactivateTool();
|
|
131
|
-
};
|
|
132
|
-
getToolOptions = tool => {
|
|
133
|
-
const {
|
|
134
|
-
options
|
|
135
|
-
} = this.props;
|
|
136
|
-
if (!options || typeof options !== "object") {
|
|
137
|
-
return {};
|
|
138
|
-
}
|
|
139
|
-
return options[tool.name] || {};
|
|
140
|
-
};
|
|
141
|
-
render() {
|
|
142
|
-
const {
|
|
143
|
-
src,
|
|
144
|
-
tools,
|
|
145
|
-
children
|
|
146
|
-
} = this.props;
|
|
147
|
-
const {
|
|
148
|
-
tool
|
|
149
|
-
} = this.state;
|
|
150
|
-
const editor = /*#__PURE__*/React.createElement("div", {
|
|
151
|
-
className: "w-full h-full flex flex-col gap-md overflow-hidden"
|
|
152
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
153
|
-
className: "flex justify-center items-center w-full"
|
|
154
|
-
}, tools.map(key => {
|
|
155
|
-
const tool = toolbar[key];
|
|
156
|
-
if (!tool) {
|
|
157
|
-
return null;
|
|
158
|
-
}
|
|
159
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
160
|
-
key: key,
|
|
161
|
-
className: this.state.tool ? "opacity-50 cursor pointer-events-none" : ""
|
|
162
|
-
}, tool.icon({
|
|
163
|
-
activateTool: () => this.activateTool(tool)
|
|
164
|
-
}));
|
|
165
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
166
|
-
className: "w-full"
|
|
167
|
-
}, tool ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof tool.renderForm === "function" && tool.renderForm({
|
|
168
|
-
options: this.getToolOptions(tool),
|
|
169
|
-
image: this.image,
|
|
170
|
-
canvas: this.canvas
|
|
171
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
172
|
-
className: "flex justify-center gap-sm mt-sm"
|
|
173
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
174
|
-
variant: "secondary",
|
|
175
|
-
text: "Cancel",
|
|
176
|
-
"data-testid": "button-cancel",
|
|
177
|
-
onClick: () => {
|
|
178
|
-
this.cancelActiveTool();
|
|
179
|
-
}
|
|
180
|
-
}), /*#__PURE__*/React.createElement(Button, {
|
|
181
|
-
variant: "primary",
|
|
182
|
-
text: "Apply",
|
|
183
|
-
"data-testid": "button-apply",
|
|
184
|
-
onClick: () => {
|
|
185
|
-
this.applyActiveTool();
|
|
186
|
-
}
|
|
187
|
-
}))) : /*#__PURE__*/React.createElement("div", {
|
|
188
|
-
className: "text-center"
|
|
189
|
-
}, "Select a tool to start working on your image.")), /*#__PURE__*/React.createElement("div", {
|
|
190
|
-
className: "flex justify-center items-center w-full bg-neutral-dimmed rounded-md overflow-hidden",
|
|
191
|
-
style: {
|
|
192
|
-
height: "calc(100vh - 256px)"
|
|
193
|
-
}
|
|
194
|
-
}, /*#__PURE__*/React.createElement("canvas", {
|
|
195
|
-
key: src,
|
|
196
|
-
id: "canvas",
|
|
197
|
-
style: {
|
|
198
|
-
maxWidth: "100%",
|
|
199
|
-
maxHeight: "100%"
|
|
200
|
-
},
|
|
201
|
-
ref: this.canvas
|
|
202
|
-
})));
|
|
203
|
-
if (typeof children === "function") {
|
|
204
|
-
return children({
|
|
205
|
-
render: () => editor,
|
|
206
|
-
// canvas: this.canvas,
|
|
207
|
-
getCanvasDataUrl: this.getCanvasDataUrl,
|
|
208
|
-
activeTool: this.state.tool,
|
|
209
|
-
applyActiveTool: this.applyActiveTool,
|
|
210
|
-
cancelActiveTool: this.cancelActiveTool
|
|
211
|
-
});
|
|
212
|
-
}
|
|
213
|
-
return editor;
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
export { ImageEditor };
|
|
217
|
-
|
|
218
|
-
//# sourceMappingURL=ImageEditor.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","Button","flip","filter","crop","rotate","loadScript","toolbar","initScripts","Promise","resolve","window","Caman","ImageEditor","Component","defaultProps","tools","state","tool","src","canvas","createRef","componentDidMount","then","updateCanvas","setTimeout","options","props","key","option","autoEnable","activateTool","image","Image","current","onload","width","height","ctx","getContext","drawImage","setState","tt","onActivate","getToolOptions","deactivateTool","getCanvasDataUrl","startsWith","toDataURL","applyActiveTool","apply","cancelActiveTool","cancel","name","render","children","editor","createElement","className","map","icon","Fragment","renderForm","variant","text","onClick","style","id","maxWidth","maxHeight","ref","activeTool"],"sources":["ImageEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { flip, filter, crop, rotate } from \"./toolbar/index.js\";\nimport type { ImageEditorTool, ToolbarTool } from \"./toolbar/types.js\";\n/**\n * Package load-script does not have types.\n */\n// @ts-expect-error\nimport loadScript from \"load-script\";\n\nconst toolbar = {\n flip,\n filter,\n crop,\n rotate\n};\n\nconst initScripts = (): Promise<string> => {\n return new Promise((resolve: any) => {\n // @ts-expect-error\n if (window.Caman) {\n return resolve();\n }\n return loadScript(\n \"https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js\",\n resolve\n );\n });\n};\n\ninterface RenderPropArgs {\n render: () => React.ReactNode;\n getCanvasDataUrl: () => string;\n activeTool: ImageEditorTool | null;\n applyActiveTool: () => Promise<void>;\n cancelActiveTool: () => Promise<void>;\n}\n\ninterface ImageEditorPropsPropsOptions {\n autoEnable: boolean;\n}\n\ninterface ImageEditorProps {\n src: string;\n tools: ToolbarTool[];\n options?: {\n flip: ImageEditorPropsPropsOptions;\n filter: ImageEditorPropsPropsOptions;\n crop: ImageEditorPropsPropsOptions;\n rotate: ImageEditorPropsPropsOptions;\n };\n onToolActivate?: () => void;\n onToolDeactivate?: () => void;\n children?: (props: RenderPropArgs) => React.ReactNode;\n}\n\ninterface ImageEditorState {\n tool: ImageEditorTool | null;\n src: string;\n}\n\nclass ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {\n static defaultProps: Partial<ImageEditorProps> = {\n tools: [\"crop\", \"flip\", \"rotate\", \"filter\"]\n };\n\n public override state: ImageEditorState = {\n tool: null,\n src: \"\"\n };\n\n public canvas = React.createRef<HTMLCanvasElement>();\n public image?: HTMLImageElement;\n\n public override componentDidMount() {\n initScripts().then(() => {\n this.updateCanvas();\n setTimeout(() => {\n const { options } = this.props;\n if (!options || typeof options !== \"object\") {\n return;\n }\n for (const key in options) {\n const option = options[key as ToolbarTool];\n if (option.autoEnable === true) {\n const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];\n tool && this.activateTool(tool);\n break;\n }\n }\n }, 250);\n });\n }\n\n private readonly updateCanvas = (): void => {\n const { src } = this.props;\n this.image = new window.Image();\n const canvas = this.canvas.current;\n if (canvas) {\n this.image.onload = () => {\n if (this.image) {\n canvas.width = this.image.width;\n canvas.height = this.image.height;\n const ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D;\n ctx.drawImage(this.image, 0, 0);\n }\n };\n\n this.image.src = src;\n }\n };\n\n private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {\n if (typeof tool === \"string\") {\n tool = toolbar[tool];\n }\n\n this.setState({ tool }, () => {\n const tt = tool as ImageEditorTool;\n typeof tt.onActivate === \"function\" &&\n tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });\n });\n };\n\n private readonly deactivateTool = (): void => {\n this.setState({\n tool: null\n });\n };\n\n public readonly getCanvasDataUrl = (): string => {\n const canvas = this.canvas.current as HTMLCanvasElement;\n if (canvas) {\n const { src } = this.props;\n if (src.startsWith(\"data:image/jpeg;\")) {\n return canvas.toDataURL(\"image/jpeg\", 1.0);\n }\n\n return canvas.toDataURL();\n }\n\n return \"\";\n };\n\n private readonly applyActiveTool = async (): Promise<void> => {\n const { tool } = this.state;\n if (!tool) {\n return;\n }\n\n if (tool.apply) {\n await tool.apply({\n canvas: this.canvas\n });\n }\n this.deactivateTool();\n };\n\n private readonly cancelActiveTool = async (): Promise<void> => {\n const { tool } = this.state;\n if (!tool) {\n return;\n }\n\n if (tool.cancel) {\n await tool.cancel({\n canvas: this.canvas\n });\n }\n this.deactivateTool();\n };\n\n private readonly getToolOptions = (\n tool: ImageEditorTool\n ): Partial<ImageEditorPropsPropsOptions> => {\n const { options } = this.props;\n if (!options || typeof options !== \"object\") {\n return {};\n }\n\n return options[tool.name as ToolbarTool] || {};\n };\n\n public override render(): React.ReactNode {\n const { src, tools, children } = this.props;\n const { tool } = this.state;\n const editor = (\n <div className={\"w-full h-full flex flex-col gap-md overflow-hidden\"}>\n <div className={\"flex justify-center items-center w-full\"}>\n {tools.map(key => {\n const tool: ImageEditorTool = toolbar[key];\n if (!tool) {\n return null;\n }\n\n return (\n <div\n key={key}\n className={\n this.state.tool ? \"opacity-50 cursor pointer-events-none\" : \"\"\n }\n >\n {tool.icon({\n activateTool: () => this.activateTool(tool)\n })}\n </div>\n );\n })}\n </div>\n <div className={\"w-full\"}>\n {tool ? (\n <>\n {typeof tool.renderForm === \"function\" &&\n tool.renderForm({\n options: this.getToolOptions(tool as ImageEditorTool),\n image: this.image as HTMLImageElement,\n canvas: this.canvas\n })}\n\n <div className={\"flex justify-center gap-sm mt-sm\"}>\n <Button\n variant={\"secondary\"}\n text={\"Cancel\"}\n data-testid=\"button-cancel\"\n onClick={() => {\n this.cancelActiveTool();\n }}\n />\n <Button\n variant={\"primary\"}\n text={\"Apply\"}\n data-testid=\"button-apply\"\n onClick={() => {\n this.applyActiveTool();\n }}\n />\n </div>\n </>\n ) : (\n <div className={\"text-center\"}>\n Select a tool to start working on your image.\n </div>\n )}\n </div>\n <div\n className={\n \"flex justify-center items-center w-full bg-neutral-dimmed rounded-md overflow-hidden\"\n }\n style={{ height: \"calc(100vh - 256px)\" }}\n >\n <canvas\n key={src}\n id={\"canvas\"}\n style={{ maxWidth: \"100%\", maxHeight: \"100%\" }}\n ref={this.canvas as React.Ref<any>}\n />\n </div>\n </div>\n );\n\n if (typeof children === \"function\") {\n return children({\n render: () => editor,\n // canvas: this.canvas,\n getCanvasDataUrl: this.getCanvasDataUrl,\n activeTool: this.state.tool,\n applyActiveTool: this.applyActiveTool,\n cancelActiveTool: this.cancelActiveTool\n });\n }\n\n return editor;\n }\n}\n\nexport { ImageEditor };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
interface ImageEditorDialogProps {
|
|
3
|
-
dialogZIndex?: number;
|
|
4
|
-
onClose?: () => void;
|
|
5
|
-
open?: boolean;
|
|
6
|
-
/**
|
|
7
|
-
* We would need to drill down a lot to give correct options.
|
|
8
|
-
* TODO: figure out some other way.
|
|
9
|
-
*/
|
|
10
|
-
options?: any;
|
|
11
|
-
src?: string;
|
|
12
|
-
onAccept: (src: string) => void;
|
|
13
|
-
"data-testid"?: string;
|
|
14
|
-
}
|
|
15
|
-
export declare const ImageEditorDialog: (props: ImageEditorDialogProps) => React.JSX.Element;
|
|
16
|
-
export {};
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { ImageEditor } from "./ImageEditor.js";
|
|
3
|
-
import { Dialog, OverlayLoader } from "@webiny/admin-ui";
|
|
4
|
-
export const ImageEditorDialog = props => {
|
|
5
|
-
const {
|
|
6
|
-
src,
|
|
7
|
-
options,
|
|
8
|
-
onAccept,
|
|
9
|
-
onClose,
|
|
10
|
-
open,
|
|
11
|
-
dialogZIndex,
|
|
12
|
-
...dialogProps
|
|
13
|
-
} = props;
|
|
14
|
-
const imageEditor = /*#__PURE__*/React.createRef();
|
|
15
|
-
const [isSaving, setIsSaving] = useState(false);
|
|
16
|
-
const onSave = async () => {
|
|
17
|
-
try {
|
|
18
|
-
setIsSaving(true);
|
|
19
|
-
const url = imageEditor.current ? imageEditor.current.getCanvasDataUrl() : "";
|
|
20
|
-
await onAccept(url);
|
|
21
|
-
} catch (e) {
|
|
22
|
-
console.log(e);
|
|
23
|
-
} finally {
|
|
24
|
-
setIsSaving(false);
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
return /*#__PURE__*/React.createElement(Dialog, Object.assign({
|
|
28
|
-
style: {
|
|
29
|
-
zIndex: dialogZIndex
|
|
30
|
-
},
|
|
31
|
-
title: "Edit Image",
|
|
32
|
-
size: "full",
|
|
33
|
-
open: open,
|
|
34
|
-
onClose: onClose
|
|
35
|
-
}, dialogProps, {
|
|
36
|
-
actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelAction, null), /*#__PURE__*/React.createElement(Dialog.ConfirmAction, {
|
|
37
|
-
text: "Save",
|
|
38
|
-
"data-testid": "dialog-accept",
|
|
39
|
-
onClick: onSave,
|
|
40
|
-
disabled: isSaving
|
|
41
|
-
}))
|
|
42
|
-
}), isSaving && /*#__PURE__*/React.createElement(OverlayLoader, {
|
|
43
|
-
text: "Creating a new version of the image"
|
|
44
|
-
}), /*#__PURE__*/React.createElement(ImageEditor, {
|
|
45
|
-
ref: imageEditor,
|
|
46
|
-
src: src,
|
|
47
|
-
options: options
|
|
48
|
-
}, ({
|
|
49
|
-
render
|
|
50
|
-
}) => render()));
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
//# sourceMappingURL=ImageEditorDialog.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","ImageEditor","Dialog","OverlayLoader","ImageEditorDialog","props","src","options","onAccept","onClose","open","dialogZIndex","dialogProps","imageEditor","createRef","isSaving","setIsSaving","onSave","url","current","getCanvasDataUrl","e","console","log","createElement","Object","assign","style","zIndex","title","size","actions","Fragment","CancelAction","ConfirmAction","text","onClick","disabled","ref","render"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ImageEditor } from \"./ImageEditor.js\";\nimport { Dialog, OverlayLoader } from \"@webiny/admin-ui\";\n\ninterface ImageEditorDialogProps {\n dialogZIndex?: number;\n onClose?: () => void;\n open?: boolean;\n /**\n * We would need to drill down a lot to give correct options.\n * TODO: figure out some other way.\n */\n options?: any;\n src?: string;\n onAccept: (src: string) => void;\n \"data-testid\"?: string;\n}\n\nexport const ImageEditorDialog = (props: ImageEditorDialogProps) => {\n const { src, options, onAccept, onClose, open, dialogZIndex, ...dialogProps } = props;\n const imageEditor = React.createRef<ImageEditor>();\n const [isSaving, setIsSaving] = useState(false);\n\n const onSave = async () => {\n try {\n setIsSaving(true);\n const url = imageEditor.current ? imageEditor.current.getCanvasDataUrl() : \"\";\n await onAccept(url);\n } catch (e) {\n console.log(e);\n } finally {\n setIsSaving(false);\n }\n };\n\n return (\n <Dialog\n style={{ zIndex: dialogZIndex }}\n title={\"Edit Image\"}\n size={\"full\"}\n open={open}\n onClose={onClose}\n {...dialogProps}\n actions={\n <>\n <Dialog.CancelAction />\n <Dialog.ConfirmAction\n text={\"Save\"}\n data-testid=\"dialog-accept\"\n onClick={onSave}\n disabled={isSaving}\n />\n </>\n }\n >\n {isSaving && <OverlayLoader text={\"Creating a new version of the image\"} />}\n <ImageEditor ref={imageEditor} src={src} options={options}>\n {({ render }) => render()}\n </ImageEditor>\n </Dialog>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,WAAW;AACpB,SAASC,MAAM,EAAEC,aAAa,QAAQ,kBAAkB;AAgBxD,OAAO,MAAMC,iBAAiB,GAAIC,KAA6B,IAAK;EAChE,MAAM;IAAEC,GAAG;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,IAAI;IAAEC,YAAY;IAAE,GAAGC;EAAY,CAAC,GAAGP,KAAK;EACrF,MAAMQ,WAAW,gBAAGd,KAAK,CAACe,SAAS,CAAc,CAAC;EAClD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAE/C,MAAMiB,MAAM,GAAG,MAAAA,CAAA,KAAY;IACvB,IAAI;MACAD,WAAW,CAAC,IAAI,CAAC;MACjB,MAAME,GAAG,GAAGL,WAAW,CAACM,OAAO,GAAGN,WAAW,CAACM,OAAO,CAACC,gBAAgB,CAAC,CAAC,GAAG,EAAE;MAC7E,MAAMZ,QAAQ,CAACU,GAAG,CAAC;IACvB,CAAC,CAAC,OAAOG,CAAC,EAAE;MACRC,OAAO,CAACC,GAAG,CAACF,CAAC,CAAC;IAClB,CAAC,SAAS;MACNL,WAAW,CAAC,KAAK,CAAC;IACtB;EACJ,CAAC;EAED,oBACIjB,KAAA,CAAAyB,aAAA,CAACtB,MAAM,EAAAuB,MAAA,CAAAC,MAAA;IACHC,KAAK,EAAE;MAAEC,MAAM,EAAEjB;IAAa,CAAE;IAChCkB,KAAK,EAAE,YAAa;IACpBC,IAAI,EAAE,MAAO;IACbpB,IAAI,EAAEA,IAAK;IACXD,OAAO,EAAEA;EAAQ,GACbG,WAAW;IACfmB,OAAO,eACHhC,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAAiC,QAAA,qBACIjC,KAAA,CAAAyB,aAAA,CAACtB,MAAM,CAAC+B,YAAY,MAAE,CAAC,eACvBlC,KAAA,CAAAyB,aAAA,CAACtB,MAAM,CAACgC,aAAa;MACjBC,IAAI,EAAE,MAAO;MACb,eAAY,eAAe;MAC3BC,OAAO,EAAEnB,MAAO;MAChBoB,QAAQ,EAAEtB;IAAS,CACtB,CACH;EACL,IAEAA,QAAQ,iBAAIhB,KAAA,CAAAyB,aAAA,CAACrB,aAAa;IAACgC,IAAI,EAAE;EAAsC,CAAE,CAAC,eAC3EpC,KAAA,CAAAyB,aAAA,CAACvB,WAAW;IAACqC,GAAG,EAAEzB,WAAY;IAACP,GAAG,EAAEA,GAAI;IAACC,OAAO,EAAEA;EAAQ,GACrD,CAAC;IAAEgC;EAAO,CAAC,KAAKA,MAAM,CAAC,CACf,CACT,CAAC;AAEjB,CAAC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./ImageEditor.js";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ImageEditor.js\";\n"],"mappings":"AAAA","ignoreList":[]}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { IconButton, Tooltip } from "@webiny/admin-ui";
|
|
3
|
-
import { ReactComponent as CropIcon } from "@webiny/icons/crop.svg";
|
|
4
|
-
import Cropper from "cropperjs";
|
|
5
|
-
import "cropperjs/dist/cropper.css";
|
|
6
|
-
let cropper = undefined;
|
|
7
|
-
const renderForm = () => {
|
|
8
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
9
|
-
style: {
|
|
10
|
-
textAlign: "center"
|
|
11
|
-
}
|
|
12
|
-
}, "Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.");
|
|
13
|
-
};
|
|
14
|
-
const tool = {
|
|
15
|
-
name: "crop",
|
|
16
|
-
icon({
|
|
17
|
-
activateTool
|
|
18
|
-
}) {
|
|
19
|
-
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
20
|
-
side: "bottom",
|
|
21
|
-
content: "Crop",
|
|
22
|
-
trigger: /*#__PURE__*/React.createElement(IconButton, {
|
|
23
|
-
variant: "ghost",
|
|
24
|
-
icon: /*#__PURE__*/React.createElement(CropIcon, null),
|
|
25
|
-
onClick: () => activateTool("crop"),
|
|
26
|
-
"data-testid": "crop-item"
|
|
27
|
-
})
|
|
28
|
-
});
|
|
29
|
-
},
|
|
30
|
-
renderForm,
|
|
31
|
-
onActivate: ({
|
|
32
|
-
canvas,
|
|
33
|
-
options
|
|
34
|
-
}) => {
|
|
35
|
-
cropper = new Cropper(canvas.current, options);
|
|
36
|
-
},
|
|
37
|
-
cancel: () => cropper && cropper.destroy(),
|
|
38
|
-
apply: ({
|
|
39
|
-
canvas
|
|
40
|
-
}) => {
|
|
41
|
-
return new Promise(resolve => {
|
|
42
|
-
if (!cropper) {
|
|
43
|
-
resolve();
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
const current = canvas.current;
|
|
47
|
-
const src = cropper.getCroppedCanvas().toDataURL();
|
|
48
|
-
if (current) {
|
|
49
|
-
const image = new window.Image();
|
|
50
|
-
const ctx = current.getContext("2d");
|
|
51
|
-
image.onload = () => {
|
|
52
|
-
ctx.drawImage(image, 0, 0);
|
|
53
|
-
current.width = image.width;
|
|
54
|
-
current.height = image.height;
|
|
55
|
-
ctx.drawImage(image, 0, 0);
|
|
56
|
-
resolve();
|
|
57
|
-
};
|
|
58
|
-
image.src = src;
|
|
59
|
-
}
|
|
60
|
-
cropper.destroy();
|
|
61
|
-
cropper = undefined;
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
export default tool;
|
|
66
|
-
|
|
67
|
-
//# sourceMappingURL=crop.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["React","IconButton","Tooltip","ReactComponent","CropIcon","Cropper","cropper","undefined","renderForm","createElement","style","textAlign","tool","name","icon","activateTool","side","content","trigger","variant","onClick","onActivate","canvas","options","current","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["crop.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ImageEditorTool } from \"./types.js\";\nimport { IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as CropIcon } from \"@webiny/icons/crop.svg\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper | undefined = undefined;\n\nconst renderForm = () => {\n return (\n <div style={{ textAlign: \"center\" }}>\n Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.\n </div>\n );\n};\n\nconst tool: ImageEditorTool = {\n name: \"crop\",\n icon({ activateTool }) {\n return (\n <Tooltip\n side={\"bottom\"}\n content={\"Crop\"}\n trigger={\n <IconButton\n variant={\"ghost\"}\n icon={<CropIcon />}\n onClick={() => activateTool(\"crop\")}\n data-testid={\"crop-item\"}\n />\n }\n />\n );\n },\n renderForm,\n onActivate: ({ canvas, options }) => {\n cropper = new Cropper(canvas.current as HTMLCanvasElement, options);\n },\n cancel: () => cropper && cropper.destroy(),\n apply: ({ canvas }) => {\n return new Promise((resolve: any) => {\n if (!cropper) {\n resolve();\n return;\n }\n\n const current = canvas.current;\n const src = cropper.getCroppedCanvas().toDataURL();\n if (current) {\n const image = new window.Image();\n const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n image.onload = () => {\n ctx.drawImage(image, 0, 0);\n current.width = image.width;\n current.height = image.height;\n\n ctx.drawImage(image, 0, 0);\n resolve();\n };\n image.src = src;\n }\n\n cropper.destroy();\n cropper = undefined;\n });\n }\n};\n\nexport default tool;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,EAAEC,OAAO,QAAQ,kBAAkB;AACtD,SAASC,cAAc,IAAIC,QAAQ,QAAQ,wBAAwB;AACnE,OAAOC,OAAO,MAAM,WAAW;AAC/B,OAAO,4BAA4B;AAEnC,IAAIC,OAA4B,GAAGC,SAAS;AAE5C,MAAMC,UAAU,GAAGA,CAAA,KAAM;EACrB,oBACIR,KAAA,CAAAS,aAAA;IAAKC,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAS;EAAE,GAAC,oFAEhC,CAAC;AAEd,CAAC;AAED,MAAMC,IAAqB,GAAG;EAC1BC,IAAI,EAAE,MAAM;EACZC,IAAIA,CAAC;IAAEC;EAAa,CAAC,EAAE;IACnB,oBACIf,KAAA,CAAAS,aAAA,CAACP,OAAO;MACJc,IAAI,EAAE,QAAS;MACfC,OAAO,EAAE,MAAO;MAChBC,OAAO,eACHlB,KAAA,CAAAS,aAAA,CAACR,UAAU;QACPkB,OAAO,EAAE,OAAQ;QACjBL,IAAI,eAAEd,KAAA,CAAAS,aAAA,CAACL,QAAQ,MAAE,CAAE;QACnBgB,OAAO,EAAEA,CAAA,KAAML,YAAY,CAAC,MAAM,CAAE;QACpC,eAAa;MAAY,CAC5B;IACJ,CACJ,CAAC;EAEV,CAAC;EACDP,UAAU;EACVa,UAAU,EAAEA,CAAC;IAAEC,MAAM;IAAEC;EAAQ,CAAC,KAAK;IACjCjB,OAAO,GAAG,IAAID,OAAO,CAACiB,MAAM,CAACE,OAAO,EAAuBD,OAAO,CAAC;EACvE,CAAC;EACDE,MAAM,EAAEA,CAAA,KAAMnB,OAAO,IAAIA,OAAO,CAACoB,OAAO,CAAC,CAAC;EAC1CC,KAAK,EAAEA,CAAC;IAAEL;EAAO,CAAC,KAAK;IACnB,OAAO,IAAIM,OAAO,CAAEC,OAAY,IAAK;MACjC,IAAI,CAACvB,OAAO,EAAE;QACVuB,OAAO,CAAC,CAAC;QACT;MACJ;MAEA,MAAML,OAAO,GAAGF,MAAM,CAACE,OAAO;MAC9B,MAAMM,GAAG,GAAGxB,OAAO,CAACyB,gBAAgB,CAAC,CAAC,CAACC,SAAS,CAAC,CAAC;MAClD,IAAIR,OAAO,EAAE;QACT,MAAMS,KAAK,GAAG,IAAIC,MAAM,CAACC,KAAK,CAAC,CAAC;QAChC,MAAMC,GAAG,GAAGZ,OAAO,CAACa,UAAU,CAAC,IAAI,CAA6B;QAChEJ,KAAK,CAACK,MAAM,GAAG,MAAM;UACjBF,GAAG,CAACG,SAAS,CAACN,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;UAC1BT,OAAO,CAACgB,KAAK,GAAGP,KAAK,CAACO,KAAK;UAC3BhB,OAAO,CAACiB,MAAM,GAAGR,KAAK,CAACQ,MAAM;UAE7BL,GAAG,CAACG,SAAS,CAACN,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;UAC1BJ,OAAO,CAAC,CAAC;QACb,CAAC;QACDI,KAAK,CAACH,GAAG,GAAGA,GAAG;MACnB;MAEAxB,OAAO,CAACoB,OAAO,CAAC,CAAC;MACjBpB,OAAO,GAAGC,SAAS;IACvB,CAAC,CAAC;EACN;AACJ,CAAC;AAED,eAAeK,IAAI","ignoreList":[]}
|