@webiny/app-file-manager 5.43.3 → 6.0.0-alpha.1

package/components/ImageEditor/ImageEditor.js

@@ -0,0 +1,218 @@
+import React from "react";
+import { Button } from "@webiny/admin-ui";
+import { flip, filter, crop, rotate } from "./toolbar";
+/**
+ * Package load-script does not have types.
+ */
+// @ts-expect-error
+import loadScript from "load-script";
+const toolbar = {
+  flip,
+  filter,
+  crop,
+  rotate
+};
+const initScripts = () => {
+  return new Promise(resolve => {
+    // @ts-expect-error
+    if (window.Caman) {
+      return resolve();
+    }
+    return loadScript("https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js", resolve);
+  });
+};
+class ImageEditor extends React.Component {
+  static defaultProps = {
+    tools: ["crop", "flip", "rotate", "filter"]
+  };
+  state = {
+    tool: null,
+    src: ""
+  };
+  canvas = /*#__PURE__*/React.createRef();
+  componentDidMount() {
+    initScripts().then(() => {
+      this.updateCanvas();
+      setTimeout(() => {
+        const {
+          options
+        } = this.props;
+        if (!options || typeof options !== "object") {
+          return;
+        }
+        for (const key in options) {
+          const option = options[key];
+          if (option.autoEnable === true) {
+            const tool = toolbar[key];
+            tool && this.activateTool(tool);
+            break;
+          }
+        }
+      }, 250);
+    });
+  }
+  updateCanvas = () => {
+    const {
+      src
+    } = this.props;
+    this.image = new window.Image();
+    const canvas = this.canvas.current;
+    if (canvas) {
+      this.image.onload = () => {
+        if (this.image) {
+          canvas.width = this.image.width;
+          canvas.height = this.image.height;
+          const ctx = canvas.getContext("2d");
+          ctx.drawImage(this.image, 0, 0);
+        }
+      };
+      this.image.src = src;
+    }
+  };
+  activateTool = tool => {
+    if (typeof tool === "string") {
+      tool = toolbar[tool];
+    }
+    this.setState({
+      tool
+    }, () => {
+      const tt = tool;
+      typeof tt.onActivate === "function" && tt.onActivate({
+        canvas: this.canvas,
+        options: this.getToolOptions(tt)
+      });
+    });
+  };
+  deactivateTool = () => {
+    this.setState({
+      tool: null
+    });
+  };
+  getCanvasDataUrl = () => {
+    const canvas = this.canvas.current;
+    if (canvas) {
+      const {
+        src
+      } = this.props;
+      if (src.startsWith("data:image/jpeg;")) {
+        return canvas.toDataURL("image/jpeg", 1.0);
+      }
+      return canvas.toDataURL();
+    }
+    return "";
+  };
+  applyActiveTool = async () => {
+    const {
+      tool
+    } = this.state;
+    if (!tool) {
+      return;
+    }
+    if (tool.apply) {
+      await tool.apply({
+        canvas: this.canvas
+      });
+    }
+    this.deactivateTool();
+  };
+  cancelActiveTool = async () => {
+    const {
+      tool
+    } = this.state;
+    if (!tool) {
+      return;
+    }
+    if (tool.cancel) {
+      await tool.cancel({
+        canvas: this.canvas
+      });
+    }
+    this.deactivateTool();
+  };
+  getToolOptions = tool => {
+    const {
+      options
+    } = this.props;
+    if (!options || typeof options !== "object") {
+      return {};
+    }
+    return options[tool.name] || {};
+  };
+  render() {
+    const {
+      src,
+      tools,
+      children
+    } = this.props;
+    const {
+      tool
+    } = this.state;
+    const editor = /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full wby-h-full wby-flex wby-flex-col wby-gap-md wby-overflow-hidden"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-justify-center wby-items-center wby-w-full"
+    }, tools.map(key => {
+      const tool = toolbar[key];
+      if (!tool) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        key: key,
+        className: this.state.tool ? "wby-opacity-50 wby-cursor wby-pointer-events-none" : ""
+      }, tool.icon({
+        activateTool: () => this.activateTool(tool)
+      }));
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, tool ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof tool.renderForm === "function" && tool.renderForm({
+      options: this.getToolOptions(tool),
+      image: this.image,
+      canvas: this.canvas
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-justify-center wby-gap-sm wby-mt-sm"
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "secondary",
+      text: "Cancel",
+      "data-testid": "button-cancel",
+      onClick: () => {
+        this.cancelActiveTool();
+      }
+    }), /*#__PURE__*/React.createElement(Button, {
+      variant: "primary",
+      text: "Apply",
+      "data-testid": "button-apply",
+      onClick: () => {
+        this.applyActiveTool();
+      }
+    }))) : /*#__PURE__*/React.createElement("div", {
+      className: "wby-text-center"
+    }, "Select a tool to start working on your image.")), /*#__PURE__*/React.createElement("div", {
+      className: "wby-flex wby-justify-center wby-items-center wby-w-full wby-bg-neutral-dimmed wby-rounded-md wby-overflow-hidden",
+      style: {
+        height: "calc(100vh - 256px)"
+      }
+    }, /*#__PURE__*/React.createElement("canvas", {
+      key: src,
+      id: "canvas",
+      style: {
+        maxWidth: "100%",
+        maxHeight: "100%"
+      },
+      ref: this.canvas
+    })));
+    if (typeof children === "function") {
+      return children({
+        render: () => editor,
+        // canvas: this.canvas,
+        getCanvasDataUrl: this.getCanvasDataUrl,
+        activeTool: this.state.tool,
+        applyActiveTool: this.applyActiveTool,
+        cancelActiveTool: this.cancelActiveTool
+      });
+    }
+    return editor;
+  }
+}
+export { ImageEditor };
+
+//# sourceMappingURL=ImageEditor.js.map

package/components/ImageEditor/ImageEditor.js.map

@@ -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\";\nimport type { ImageEditorTool, ToolbarTool } from \"./toolbar/types\";\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\n                className={\n                    \"wby-w-full wby-h-full wby-flex wby-flex-col wby-gap-md wby-overflow-hidden\"\n                }\n            >\n                <div className={\"wby-flex wby-justify-center wby-items-center wby-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\n                                        ? \"wby-opacity-50 wby-cursor wby-pointer-events-none\"\n                                        : \"\"\n                                }\n                            >\n                                {tool.icon({\n                                    activateTool: () => this.activateTool(tool)\n                                })}\n                            </div>\n                        );\n                    })}\n                </div>\n                <div className={\"wby-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={\"wby-flex wby-justify-center wby-gap-sm wby-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={\"wby-text-center\"}>\n                            Select a tool to start working on your image.\n                        </div>\n                    )}\n                </div>\n                <div\n                    className={\n                        \"wby-flex wby-justify-center wby-items-center wby-w-full wby-bg-neutral-dimmed wby-rounded-md wby-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":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,IAAI,EAAEC,MAAM,EAAEC,IAAI,EAAEC,MAAM;AAEnC;AACA;AACA;AACA;AACA,OAAOC,UAAU,MAAM,aAAa;AAEpC,MAAMC,OAAO,GAAG;EACZL,IAAI;EACJC,MAAM;EACNC,IAAI;EACJC;AACJ,CAAC;AAED,MAAMG,WAAW,GAAGA,CAAA,KAAuB;EACvC,OAAO,IAAIC,OAAO,CAAEC,OAAY,IAAK;IACjC;IACA,IAAIC,MAAM,CAACC,KAAK,EAAE;MACd,OAAOF,OAAO,CAAC,CAAC;IACpB;IACA,OAAOJ,UAAU,CACb,wEAAwE,EACxEI,OACJ,CAAC;EACL,CAAC,CAAC;AACN,CAAC;AAiCD,MAAMG,WAAW,SAASb,KAAK,CAACc,SAAS,CAAqC;EAC1E,OAAOC,YAAY,GAA8B;IAC7CC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ;EAC9C,CAAC;EAEeC,KAAK,GAAqB;IACtCC,IAAI,EAAE,IAAI;IACVC,GAAG,EAAE;EACT,CAAC;EAEMC,MAAM,gBAAGpB,KAAK,CAACqB,SAAS,CAAoB,CAAC;EAGpCC,iBAAiBA,CAAA,EAAG;IAChCd,WAAW,CAAC,CAAC,CAACe,IAAI,CAAC,MAAM;MACrB,IAAI,CAACC,YAAY,CAAC,CAAC;MACnBC,UAAU,CAAC,MAAM;QACb,MAAM;UAAEC;QAAQ,CAAC,GAAG,IAAI,CAACC,KAAK;QAC9B,IAAI,CAACD,OAAO,IAAI,OAAOA,OAAO,KAAK,QAAQ,EAAE;UACzC;QACJ;QACA,KAAK,MAAME,GAAG,IAAIF,OAAO,EAAE;UACvB,MAAMG,MAAM,GAAGH,OAAO,CAACE,GAAG,CAAgB;UAC1C,IAAIC,MAAM,CAACC,UAAU,KAAK,IAAI,EAAE;YAC5B,MAAMZ,IAA4B,GAAGX,OAAO,CAACqB,GAAG,CAAgB;YAChEV,IAAI,IAAI,IAAI,CAACa,YAAY,CAACb,IAAI,CAAC;YAC/B;UACJ;QACJ;MACJ,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,CAAC;EACN;EAEiBM,YAAY,GAAGA,CAAA,KAAY;IACxC,MAAM;MAAEL;IAAI,CAAC,GAAG,IAAI,CAACQ,KAAK;IAC1B,IAAI,CAACK,KAAK,GAAG,IAAIrB,MAAM,CAACsB,KAAK,CAAC,CAAC;IAC/B,MAAMb,MAAM,GAAG,IAAI,CAACA,MAAM,CAACc,OAAO;IAClC,IAAId,MAAM,EAAE;MACR,IAAI,CAACY,KAAK,CAACG,MAAM,GAAG,MAAM;QACtB,IAAI,IAAI,CAACH,KAAK,EAAE;UACZZ,MAAM,CAACgB,KAAK,GAAG,IAAI,CAACJ,KAAK,CAACI,KAAK;UAC/BhB,MAAM,CAACiB,MAAM,GAAG,IAAI,CAACL,KAAK,CAACK,MAAM;UACjC,MAAMC,GAAG,GAAGlB,MAAM,CAACmB,UAAU,CAAC,IAAI,CAA6B;UAC/DD,GAAG,CAACE,SAAS,CAAC,IAAI,CAACR,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QACnC;MACJ,CAAC;MAED,IAAI,CAACA,KAAK,CAACb,GAAG,GAAGA,GAAG;IACxB;EACJ,CAAC;EAEgBY,YAAY,GAAIb,IAAmC,IAAW;IAC3E,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;MAC1BA,IAAI,GAAGX,OAAO,CAACW,IAAI,CAAC;IACxB;IAEA,IAAI,CAACuB,QAAQ,CAAC;MAAEvB;IAAK,CAAC,EAAE,MAAM;MAC1B,MAAMwB,EAAE,GAAGxB,IAAuB;MAClC,OAAOwB,EAAE,CAACC,UAAU,KAAK,UAAU,IAC/BD,EAAE,CAACC,UAAU,CAAC;QAAEvB,MAAM,EAAE,IAAI,CAACA,MAAM;QAAEM,OAAO,EAAE,IAAI,CAACkB,cAAc,CAACF,EAAE;MAAE,CAAC,CAAC;IAChF,CAAC,CAAC;EACN,CAAC;EAEgBG,cAAc,GAAGA,CAAA,KAAY;IAC1C,IAAI,CAACJ,QAAQ,CAAC;MACVvB,IAAI,EAAE;IACV,CAAC,CAAC;EACN,CAAC;EAEe4B,gBAAgB,GAAGA,CAAA,KAAc;IAC7C,MAAM1B,MAAM,GAAG,IAAI,CAACA,MAAM,CAACc,OAA4B;IACvD,IAAId,MAAM,EAAE;MACR,MAAM;QAAED;MAAI,CAAC,GAAG,IAAI,CAACQ,KAAK;MAC1B,IAAIR,GAAG,CAAC4B,UAAU,CAAC,kBAAkB,CAAC,EAAE;QACpC,OAAO3B,MAAM,CAAC4B,SAAS,CAAC,YAAY,EAAE,GAAG,CAAC;MAC9C;MAEA,OAAO5B,MAAM,CAAC4B,SAAS,CAAC,CAAC;IAC7B;IAEA,OAAO,EAAE;EACb,CAAC;EAEgBC,eAAe,GAAG,MAAAA,CAAA,KAA2B;IAC1D,MAAM;MAAE/B;IAAK,CAAC,GAAG,IAAI,CAACD,KAAK;IAC3B,IAAI,CAACC,IAAI,EAAE;MACP;IACJ;IAEA,IAAIA,IAAI,CAACgC,KAAK,EAAE;MACZ,MAAMhC,IAAI,CAACgC,KAAK,CAAC;QACb9B,MAAM,EAAE,IAAI,CAACA;MACjB,CAAC,CAAC;IACN;IACA,IAAI,CAACyB,cAAc,CAAC,CAAC;EACzB,CAAC;EAEgBM,gBAAgB,GAAG,MAAAA,CAAA,KAA2B;IAC3D,MAAM;MAAEjC;IAAK,CAAC,GAAG,IAAI,CAACD,KAAK;IAC3B,IAAI,CAACC,IAAI,EAAE;MACP;IACJ;IAEA,IAAIA,IAAI,CAACkC,MAAM,EAAE;MACb,MAAMlC,IAAI,CAACkC,MAAM,CAAC;QACdhC,MAAM,EAAE,IAAI,CAACA;MACjB,CAAC,CAAC;IACN;IACA,IAAI,CAACyB,cAAc,CAAC,CAAC;EACzB,CAAC;EAEgBD,cAAc,GAC3B1B,IAAqB,IACmB;IACxC,MAAM;MAAEQ;IAAQ,CAAC,GAAG,IAAI,CAACC,KAAK;IAC9B,IAAI,CAACD,OAAO,IAAI,OAAOA,OAAO,KAAK,QAAQ,EAAE;MACzC,OAAO,CAAC,CAAC;IACb;IAEA,OAAOA,OAAO,CAACR,IAAI,CAACmC,IAAI,CAAgB,IAAI,CAAC,CAAC;EAClD,CAAC;EAEeC,MAAMA,CAAA,EAAoB;IACtC,MAAM;MAAEnC,GAAG;MAAEH,KAAK;MAAEuC;IAAS,CAAC,GAAG,IAAI,CAAC5B,KAAK;IAC3C,MAAM;MAAET;IAAK,CAAC,GAAG,IAAI,CAACD,KAAK;IAC3B,MAAMuC,MAAM,gBACRxD,KAAA,CAAAyD,aAAA;MACIC,SAAS,EACL;IACH,gBAED1D,KAAA,CAAAyD,aAAA;MAAKC,SAAS,EAAE;IAA0D,GACrE1C,KAAK,CAAC2C,GAAG,CAAC/B,GAAG,IAAI;MACd,MAAMV,IAAqB,GAAGX,OAAO,CAACqB,GAAG,CAAC;MAC1C,IAAI,CAACV,IAAI,EAAE;QACP,OAAO,IAAI;MACf;MAEA,oBACIlB,KAAA,CAAAyD,aAAA;QACI7B,GAAG,EAAEA,GAAI;QACT8B,SAAS,EACL,IAAI,CAACzC,KAAK,CAACC,IAAI,GACT,mDAAmD,GACnD;MACT,GAEAA,IAAI,CAAC0C,IAAI,CAAC;QACP7B,YAAY,EAAEA,CAAA,KAAM,IAAI,CAACA,YAAY,CAACb,IAAI;MAC9C,CAAC,CACA,CAAC;IAEd,CAAC,CACA,CAAC,eACNlB,KAAA,CAAAyD,aAAA;MAAKC,SAAS,EAAE;IAAa,GACxBxC,IAAI,gBACDlB,KAAA,CAAAyD,aAAA,CAAAzD,KAAA,CAAA6D,QAAA,QACK,OAAO3C,IAAI,CAAC4C,UAAU,KAAK,UAAU,IAClC5C,IAAI,CAAC4C,UAAU,CAAC;MACZpC,OAAO,EAAE,IAAI,CAACkB,cAAc,CAAC1B,IAAuB,CAAC;MACrDc,KAAK,EAAE,IAAI,CAACA,KAAyB;MACrCZ,MAAM,EAAE,IAAI,CAACA;IACjB,CAAC,CAAC,eAENpB,KAAA,CAAAyD,aAAA;MAAKC,SAAS,EAAE;IAAmD,gBAC/D1D,KAAA,CAAAyD,aAAA,CAACxD,MAAM;MACH8D,OAAO,EAAE,WAAY;MACrBC,IAAI,EAAE,QAAS;MACf,eAAY,eAAe;MAC3BC,OAAO,EAAEA,CAAA,KAAM;QACX,IAAI,CAACd,gBAAgB,CAAC,CAAC;MAC3B;IAAE,CACL,CAAC,eACFnD,KAAA,CAAAyD,aAAA,CAACxD,MAAM;MACH8D,OAAO,EAAE,SAAU;MACnBC,IAAI,EAAE,OAAQ;MACd,eAAY,cAAc;MAC1BC,OAAO,EAAEA,CAAA,KAAM;QACX,IAAI,CAAChB,eAAe,CAAC,CAAC;MAC1B;IAAE,CACL,CACA,CACP,CAAC,gBAEHjD,KAAA,CAAAyD,aAAA;MAAKC,SAAS,EAAE;IAAkB,GAAC,+CAE9B,CAER,CAAC,eACN1D,KAAA,CAAAyD,aAAA;MACIC,SAAS,EACL,kHACH;MACDQ,KAAK,EAAE;QAAE7B,MAAM,EAAE;MAAsB;IAAE,gBAEzCrC,KAAA,CAAAyD,aAAA;MACI7B,GAAG,EAAET,GAAI;MACTgD,EAAE,EAAE,QAAS;MACbD,KAAK,EAAE;QAAEE,QAAQ,EAAE,MAAM;QAAEC,SAAS,EAAE;MAAO,CAAE;MAC/CC,GAAG,EAAE,IAAI,CAAClD;IAAyB,CACtC,CACA,CACJ,CACR;IAED,IAAI,OAAOmC,QAAQ,KAAK,UAAU,EAAE;MAChC,OAAOA,QAAQ,CAAC;QACZD,MAAM,EAAEA,CAAA,KAAME,MAAM;QACpB;QACAV,gBAAgB,EAAE,IAAI,CAACA,gBAAgB;QACvCyB,UAAU,EAAE,IAAI,CAACtD,KAAK,CAACC,IAAI;QAC3B+B,eAAe,EAAE,IAAI,CAACA,eAAe;QACrCE,gBAAgB,EAAE,IAAI,CAACA;MAC3B,CAAC,CAAC;IACN;IAEA,OAAOK,MAAM;EACjB;AACJ;AAEA,SAAS3C,WAAW","ignoreList":[]}

package/components/ImageEditor/ImageEditorDialog.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface ImageEditorDialogProps {
+    dialogZIndex?: number;
+    onClose?: () => void;
+    open?: boolean;
+    /**
+     * We would need to drill down a lot to give correct options.
+     * TODO: figure out some other way.
+     */
+    options?: any;
+    src?: string;
+    onAccept: (src: string) => void;
+    "data-testid"?: string;
+}
+export declare const ImageEditorDialog: (props: ImageEditorDialogProps) => React.JSX.Element;
+export {};

package/components/ImageEditor/ImageEditorDialog.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { ImageEditor } from "./ImageEditor";
+import { Dialog, OverlayLoader } from "@webiny/admin-ui";
+export const ImageEditorDialog = props => {
+  const {
+    src,
+    options,
+    onAccept,
+    onClose,
+    open,
+    dialogZIndex,
+    ...dialogProps
+  } = props;
+  const imageEditor = /*#__PURE__*/React.createRef();
+  const [isSaving, setIsSaving] = useState(false);
+  const onSave = async () => {
+    try {
+      setIsSaving(true);
+      const url = imageEditor.current ? imageEditor.current.getCanvasDataUrl() : "";
+      await onAccept(url);
+    } catch (e) {
+      console.log(e);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Dialog, Object.assign({
+    style: {
+      zIndex: dialogZIndex
+    },
+    title: "Edit Image",
+    size: "full",
+    open: open,
+    onClose: onClose
+  }, dialogProps, {
+    actions: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dialog.CancelButton, null), /*#__PURE__*/React.createElement(Dialog.ConfirmButton, {
+      text: "Save",
+      "data-testid": "dialog-accept",
+      onClick: onSave,
+      disabled: isSaving
+    }))
+  }), isSaving && /*#__PURE__*/React.createElement(OverlayLoader, {
+    text: "Creating a new version of the image"
+  }), /*#__PURE__*/React.createElement(ImageEditor, {
+    ref: imageEditor,
+    src: src,
+    options: options
+  }, ({
+    render
+  }) => render()));
+};
+
+//# sourceMappingURL=ImageEditorDialog.js.map

package/components/ImageEditor/ImageEditorDialog.js.map

@@ -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","CancelButton","ConfirmButton","text","onClick","disabled","ref","render"],"sources":["ImageEditorDialog.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { ImageEditor } from \"./ImageEditor\";\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.CancelButton />\n                    <Dialog.ConfirmButton\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":[]}

package/components/ImageEditor/index.d.ts

@@ -0,0 +1 @@
+export * from "./ImageEditor";

package/components/ImageEditor/index.js

@@ -0,0 +1,3 @@
+export * from "./ImageEditor";
+
+//# sourceMappingURL=index.js.map

package/components/ImageEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ImageEditor\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/ImageEditor/toolbar/crop.d.ts

@@ -0,0 +1,4 @@
+import type { ImageEditorTool } from "./types";
+import "cropperjs/dist/cropper.css";
+declare const tool: ImageEditorTool;
+export default tool;

package/components/ImageEditor/toolbar/crop.js

@@ -0,0 +1,67 @@
+import React from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as CropIcon } from "@webiny/icons/crop.svg";
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+let cropper = undefined;
+const renderForm = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: "center"
+    }
+  }, "Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.");
+};
+const tool = {
+  name: "crop",
+  icon({
+    activateTool
+  }) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      side: "bottom",
+      content: "Crop",
+      trigger: /*#__PURE__*/React.createElement(IconButton, {
+        variant: "ghost",
+        icon: /*#__PURE__*/React.createElement(CropIcon, null),
+        onClick: () => activateTool("crop"),
+        "data-testid": "crop-item"
+      })
+    });
+  },
+  renderForm,
+  onActivate: ({
+    canvas,
+    options
+  }) => {
+    cropper = new Cropper(canvas.current, options);
+  },
+  cancel: () => cropper && cropper.destroy(),
+  apply: ({
+    canvas
+  }) => {
+    return new Promise(resolve => {
+      if (!cropper) {
+        resolve();
+        return;
+      }
+      const current = canvas.current;
+      const src = cropper.getCroppedCanvas().toDataURL();
+      if (current) {
+        const image = new window.Image();
+        const ctx = current.getContext("2d");
+        image.onload = () => {
+          ctx.drawImage(image, 0, 0);
+          current.width = image.width;
+          current.height = image.height;
+          ctx.drawImage(image, 0, 0);
+          resolve();
+        };
+        image.src = src;
+      }
+      cropper.destroy();
+      cropper = undefined;
+    });
+  }
+};
+export default tool;
+
+//# sourceMappingURL=crop.js.map

package/components/ImageEditor/toolbar/crop.js.map

@@ -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\";\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":[]}

package/components/ImageEditor/toolbar/filter.d.ts

@@ -0,0 +1,3 @@
+import type { ImageEditorTool } from "./types";
+declare const tool: ImageEditorTool;
+export default tool;

package/components/ImageEditor/toolbar/filter.js

@@ -0,0 +1,167 @@
+/**
+ * When using Caman, we added @ts-expect-error because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.
+ * TODO: use some other library to edit images
+ */
+import React from "react";
+import { ReactComponent as FilterIcon } from "@webiny/icons/tune.svg";
+import debounce from "lodash/debounce";
+import { Button, Grid, IconButton, Slider, Tooltip } from "@webiny/admin-ui";
+const sliders = [{
+  key: "brightness",
+  label: "Brightness",
+  min: -100
+}, {
+  key: "vibrance",
+  label: "Vibrance",
+  min: -100
+}, {
+  key: "hue",
+  label: "Hue",
+  min: -100
+}, {
+  key: "gamma",
+  label: "Gamma"
+}, {
+  key: "clip",
+  label: "Clip"
+}, {
+  key: "stackBlur",
+  label: "Blur"
+}, {
+  key: "contrast",
+  label: "Contrast",
+  min: -100
+}, {
+  key: "saturation",
+  label: "Saturation",
+  min: -100
+}, {
+  key: "exposure",
+  label: "Exposure",
+  min: -100
+}, {
+  key: "sepia",
+  label: "Sepia"
+}, {
+  key: "noise",
+  label: "Noise"
+}, {
+  key: "sharpen",
+  label: "Sharpen"
+}];
+class RenderForm extends React.Component {
+  state = {
+    processing: false,
+    values: {}
+  };
+  componentDidMount() {
+    this.resetFiltersValues();
+  }
+  applyFilters = debounce(() => {
+    const {
+      canvas
+    } = this.props;
+    const {
+      values
+    } = this.state;
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const component = this;
+
+    // @ts-expect-error
+    Caman(canvas.current, function () {
+      // @ts-expect-error
+      this.revert(false);
+      Object.keys(values).forEach(
+      // @ts-expect-error
+      key => values[key] !== 0 && this[key] && this[key](values[key]));
+      // @ts-expect-error
+      this.render();
+      component.setState({
+        processing: false
+      });
+    });
+  }, 200);
+  resetFiltersValues = () => {
+    this.setState(state => {
+      sliders.reduce((output, current) => {
+        state.values[current.key] = 0;
+        return output;
+      }, {});
+      return state;
+    });
+  };
+  render() {
+    return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(React.Fragment, null, sliders.map(props => /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 4,
+      key: props.key
+    }, /*#__PURE__*/React.createElement(Slider, Object.assign({
+      value: Number(this.state.values[props.key]),
+      min: 0,
+      max: 100,
+      disabled: this.state.processing,
+      onValueChange: value => {
+        this.setState(state => {
+          const values = {
+            ...state.values
+          };
+          values[props.key] = value;
+          return {
+            ...state,
+            processing: true,
+            values
+          };
+        }, this.applyFilters);
+      }
+    }, props))))), /*#__PURE__*/React.createElement(Grid.Column, {
+      span: 12,
+      className: "wby-text-center"
+    }, /*#__PURE__*/React.createElement(Button, {
+      text: "Reset filters",
+      variant: "secondary",
+      onClick: () => {
+        this.setState({
+          processing: true
+        }, () => {
+          this.resetFiltersValues();
+          this.applyFilters();
+          this.setState({
+            processing: false
+          });
+        });
+      }
+    })));
+  }
+}
+const tool = {
+  name: "filter",
+  icon({
+    activateTool
+  }) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement(IconButton, {
+        variant: "ghost",
+        icon: /*#__PURE__*/React.createElement(FilterIcon, null),
+        onClick: () => activateTool("filter"),
+        "data-testid": "filter-item"
+      }),
+      content: "Filter"
+    });
+  },
+  renderForm(props) {
+    return /*#__PURE__*/React.createElement(RenderForm, props);
+  },
+  cancel: ({
+    canvas
+  }) => {
+    // @ts-expect-error
+    Caman(canvas.current, function () {
+      // @ts-expect-error
+      this.revert(false);
+      // @ts-expect-error
+      this.render();
+    });
+  }
+};
+export default tool;
+
+//# sourceMappingURL=filter.js.map

package/components/ImageEditor/toolbar/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","FilterIcon","debounce","Button","Grid","IconButton","Slider","Tooltip","sliders","key","label","min","RenderForm","Component","state","processing","values","componentDidMount","resetFiltersValues","applyFilters","canvas","props","component","Caman","current","revert","Object","keys","forEach","render","setState","reduce","output","createElement","Fragment","map","Column","span","assign","value","Number","max","disabled","onValueChange","className","text","variant","onClick","tool","name","icon","activateTool","trigger","content","renderForm","cancel"],"sources":["filter.tsx"],"sourcesContent":["/**\n * When using Caman, we added @ts-expect-error because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.\n * TODO: use some other library to edit images\n */\nimport React from \"react\";\nimport { ReactComponent as FilterIcon } from \"@webiny/icons/tune.svg\";\nimport debounce from \"lodash/debounce\";\nimport { Button, Grid, IconButton, Slider, Tooltip } from \"@webiny/admin-ui\";\nimport type { ImageEditorTool } from \"./types\";\n\ninterface RenderFormState {\n    values: Record<string, any>;\n    processing: boolean;\n}\n\ninterface RenderFormProps {\n    canvas: any;\n    renderApplyCancel?: () => void;\n}\n\nconst sliders = [\n    {\n        key: \"brightness\",\n        label: \"Brightness\",\n        min: -100\n    },\n    {\n        key: \"vibrance\",\n        label: \"Vibrance\",\n        min: -100\n    },\n    {\n        key: \"hue\",\n        label: \"Hue\",\n        min: -100\n    },\n    {\n        key: \"gamma\",\n        label: \"Gamma\"\n    },\n    {\n        key: \"clip\",\n        label: \"Clip\"\n    },\n    {\n        key: \"stackBlur\",\n        label: \"Blur\"\n    },\n    {\n        key: \"contrast\",\n        label: \"Contrast\",\n        min: -100\n    },\n    {\n        key: \"saturation\",\n        label: \"Saturation\",\n        min: -100\n    },\n    {\n        key: \"exposure\",\n        label: \"Exposure\",\n        min: -100\n    },\n    {\n        key: \"sepia\",\n        label: \"Sepia\"\n    },\n    {\n        key: \"noise\",\n        label: \"Noise\"\n    },\n    {\n        key: \"sharpen\",\n        label: \"Sharpen\"\n    }\n];\n\nclass RenderForm extends React.Component<RenderFormProps, RenderFormState> {\n    public override state: RenderFormState = {\n        processing: false,\n        values: {}\n    };\n\n    public override componentDidMount() {\n        this.resetFiltersValues();\n    }\n\n    private readonly applyFilters = debounce(() => {\n        const { canvas } = this.props;\n        const { values } = this.state;\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const component = this;\n\n        // @ts-expect-error\n        Caman(canvas.current, function () {\n            // @ts-expect-error\n            this.revert(false);\n            Object.keys(values).forEach(\n                // @ts-expect-error\n                key => values[key] !== 0 && this[key] && this[key](values[key])\n            );\n            // @ts-expect-error\n            this.render();\n            component.setState({ processing: false });\n        });\n    }, 200);\n\n    private readonly resetFiltersValues = () => {\n        this.setState(state => {\n            sliders.reduce((output, current) => {\n                state.values[current.key] = 0;\n                return output;\n            }, {});\n\n            return state;\n        });\n    };\n\n    public override render() {\n        return (\n            <Grid>\n                <>\n                    {sliders.map(props => (\n                        <Grid.Column span={4} key={props.key}>\n                            <Slider\n                                value={Number(this.state.values[props.key])}\n                                min={0}\n                                max={100}\n                                disabled={this.state.processing}\n                                onValueChange={(value: number) => {\n                                    this.setState(state => {\n                                        const values = { ...state.values };\n                                        values[props.key] = value;\n\n                                        return { ...state, processing: true, values };\n                                    }, this.applyFilters);\n                                }}\n                                {...props}\n                            />\n                        </Grid.Column>\n                    ))}\n                </>\n                <Grid.Column span={12} className={\"wby-text-center\"}>\n                    <Button\n                        text={\"Reset filters\"}\n                        variant={\"secondary\"}\n                        onClick={() => {\n                            this.setState({ processing: true }, () => {\n                                this.resetFiltersValues();\n                                this.applyFilters();\n                                this.setState({ processing: false });\n                            });\n                        }}\n                    />\n                </Grid.Column>\n            </Grid>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"filter\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip\n                trigger={\n                    <IconButton\n                        variant={\"ghost\"}\n                        icon={<FilterIcon />}\n                        onClick={() => activateTool(\"filter\")}\n                        data-testid={\"filter-item\"}\n                    />\n                }\n                content={\"Filter\"}\n            />\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    cancel: ({ canvas }) => {\n        // @ts-expect-error\n        Caman(canvas.current, function () {\n            // @ts-expect-error\n            this.revert(false);\n            // @ts-expect-error\n            this.render();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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","ignoreList":[]}

package/components/ImageEditor/toolbar/flip.d.ts

@@ -0,0 +1,4 @@
+import "cropperjs/dist/cropper.css";
+import type { ImageEditorTool } from "./types";
+declare const tool: ImageEditorTool;
+export default tool;