@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.
Files changed (52) hide show
  1. package/components/BottomInfoBar/BottomInfoBar.js +0 -10
  2. package/components/BottomInfoBar/BottomInfoBar.js.map +1 -1
  3. package/components/BottomInfoBar/SupportedFileTypes.js +5 -2
  4. package/components/BottomInfoBar/SupportedFileTypes.js.map +1 -1
  5. package/components/BulkActions/ActionEdit/domain/Batch.d.ts +3 -24
  6. package/components/FileDetails/FileDetails.js +1 -2
  7. package/components/FileDetails/FileDetails.js.map +1 -1
  8. package/components/FileDetails/components/ActionButton.d.ts +1 -1
  9. package/components/FileDetails/components/ActionButton.js.map +1 -1
  10. package/components/Grid/ActionButton.d.ts +1 -1
  11. package/components/Grid/ActionButton.js.map +1 -1
  12. package/components/Grid/File.d.ts +1 -1
  13. package/components/Grid/File.js.map +1 -1
  14. package/modules/FileManagerRenderer/FileManagerView/FileManagerView.js +1 -2
  15. package/modules/FileManagerRenderer/FileManagerView/FileManagerView.js.map +1 -1
  16. package/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Grid/Thumbnail.d.ts +2 -2
  17. package/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Grid/Thumbnail.js.map +1 -1
  18. package/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Thumbnail.d.ts +2 -2
  19. package/modules/FileManagerRenderer/FileManagerView/configComponents/Browser/Table/Thumbnail.js.map +1 -1
  20. package/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/Thumbnail.d.ts +2 -2
  21. package/modules/FileManagerRenderer/FileManagerView/configComponents/FileDetails/Thumbnail.js.map +1 -1
  22. package/package.json +25 -29
  23. package/components/ImageEditor/ImageEditor.d.ts +0 -45
  24. package/components/ImageEditor/ImageEditor.js +0 -218
  25. package/components/ImageEditor/ImageEditor.js.map +0 -1
  26. package/components/ImageEditor/ImageEditorDialog.d.ts +0 -16
  27. package/components/ImageEditor/ImageEditorDialog.js +0 -53
  28. package/components/ImageEditor/ImageEditorDialog.js.map +0 -1
  29. package/components/ImageEditor/index.d.ts +0 -1
  30. package/components/ImageEditor/index.js +0 -3
  31. package/components/ImageEditor/index.js.map +0 -1
  32. package/components/ImageEditor/toolbar/crop.d.ts +0 -4
  33. package/components/ImageEditor/toolbar/crop.js +0 -67
  34. package/components/ImageEditor/toolbar/crop.js.map +0 -1
  35. package/components/ImageEditor/toolbar/filter.d.ts +0 -3
  36. package/components/ImageEditor/toolbar/filter.js +0 -167
  37. package/components/ImageEditor/toolbar/filter.js.map +0 -1
  38. package/components/ImageEditor/toolbar/flip.d.ts +0 -4
  39. package/components/ImageEditor/toolbar/flip.js +0 -94
  40. package/components/ImageEditor/toolbar/flip.js.map +0 -1
  41. package/components/ImageEditor/toolbar/index.d.ts +0 -4
  42. package/components/ImageEditor/toolbar/index.js +0 -6
  43. package/components/ImageEditor/toolbar/index.js.map +0 -1
  44. package/components/ImageEditor/toolbar/rotate.d.ts +0 -4
  45. package/components/ImageEditor/toolbar/rotate.js +0 -93
  46. package/components/ImageEditor/toolbar/rotate.js.map +0 -1
  47. package/components/ImageEditor/toolbar/types.d.ts +0 -32
  48. package/components/ImageEditor/toolbar/types.js +0 -3
  49. package/components/ImageEditor/toolbar/types.js.map +0 -1
  50. package/modules/FileManagerRenderer/FileActions/FileDetails/EditImage.d.ts +0 -2
  51. package/modules/FileManagerRenderer/FileActions/FileDetails/EditImage.js +0 -111
  52. 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.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.0",
18
- "@webiny/app": "6.0.0",
19
- "@webiny/app-aco": "6.0.0",
20
- "@webiny/app-admin": "6.0.0",
21
- "@webiny/app-headless-cms": "6.0.0",
22
- "@webiny/app-headless-cms-common": "6.0.0",
23
- "@webiny/app-websockets": "6.0.0",
24
- "@webiny/error": "6.0.0",
25
- "@webiny/form": "6.0.0",
26
- "@webiny/icons": "6.0.0",
27
- "@webiny/plugins": "6.0.0",
28
- "@webiny/react-composition": "6.0.0",
29
- "@webiny/react-properties": "6.0.0",
30
- "@webiny/utils": "6.0.0",
31
- "@webiny/validation": "6.0.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
- "cropperjs": "1.6.2",
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.1",
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": "3.0.0",
42
+ "mime": "4.1.0",
46
43
  "minimatch": "10.2.4",
47
44
  "mobx": "6.15.0",
48
- "mobx-react-lite": "3.4.3",
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.25.76"
52
+ "zod": "4.3.6"
57
53
  },
58
54
  "devDependencies": {
59
- "@svgr/webpack": "6.5.1",
60
- "@webiny/build-tools": "6.0.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.0.18"
59
+ "vitest": "4.1.2"
64
60
  },
65
61
  "publishConfig": {
66
62
  "access": "public",
67
63
  "directory": "dist"
68
64
  },
69
- "gitHead": "9c6892640a45679ff521e25cd6587dff57393a2e"
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,3 +0,0 @@
1
- export * from "./ImageEditor.js";
2
-
3
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ImageEditor.js\";\n"],"mappings":"AAAA","ignoreList":[]}
@@ -1,4 +0,0 @@
1
- import type { ImageEditorTool } from "./types.js";
2
- import "cropperjs/dist/cropper.css";
3
- declare const tool: ImageEditorTool;
4
- export default tool;
@@ -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":[]}
@@ -1,3 +0,0 @@
1
- import type { ImageEditorTool } from "./types.js";
2
- declare const tool: ImageEditorTool;
3
- export default tool;