@webiny/ui 5.34.8 → 5.35.0-beta.0

package/ImageEditor/toolbar/crop.js.map

@@ -1 +1 @@
-{"version":3,"names":["cropper","undefined","renderForm","textAlign","tool","name","icon","activateTool","onActivate","canvas","options","Cropper","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 { ImageEditorTool } from \"./types\";\nimport { ReactComponent as CropIcon } from \"./icons/crop.svg\";\nimport { IconButton } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\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 placement={\"bottom\"} content={\"Crop\"}>\n                <IconButton\n                    icon={<CropIcon />}\n                    onClick={() => activateTool(\"crop\")}\n                    data-testid={\"crop-item\"}\n                />\n            </Tooltip>\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;;AAEA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAIA,OAA4B,GAAGC,SAAnC;;AAEA,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;EACrB,oBACI;IAAK,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAb;EAAZ,GAAqC,oFAArC,CADJ;AAKH,CAND;;AAQA,IAAMC,IAAqB,GAAG;EAC1BC,IAAI,EAAE,MADoB;EAE1BC,IAF0B,sBAEH;IAAA,IAAhBC,YAAgB,QAAhBA,YAAgB;IACnB,oBACI,6BAAC,gBAAD;MAAS,SAAS,EAAE,QAApB;MAA8B,OAAO,EAAE;IAAvC,gBACI,6BAAC,kBAAD;MACI,IAAI,eAAE,6BAAC,oBAAD,OADV;MAEI,OAAO,EAAE;QAAA,OAAMA,YAAY,CAAC,MAAD,CAAlB;MAAA,CAFb;MAGI,eAAa;IAHjB,EADJ,CADJ;EASH,CAZyB;EAa1BL,UAAU,EAAVA,UAb0B;EAc1BM,UAAU,EAAE,2BAAyB;IAAA,IAAtBC,MAAsB,SAAtBA,MAAsB;IAAA,IAAdC,OAAc,SAAdA,OAAc;IACjCV,OAAO,GAAG,IAAIW,kBAAJ,CAAYF,MAAM,CAACG,OAAnB,EAAiDF,OAAjD,CAAV;EACH,CAhByB;EAiB1BG,MAAM,EAAE;IAAA,OAAMb,OAAO,IAAIA,OAAO,CAACc,OAAR,EAAjB;EAAA,CAjBkB;EAkB1BC,KAAK,EAAE,sBAAgB;IAAA,IAAbN,MAAa,SAAbA,MAAa;IACnB,OAAO,IAAIO,OAAJ,CAAY,UAACC,OAAD,EAAkB;MACjC,IAAI,CAACjB,OAAL,EAAc;QACViB,OAAO;QACP;MACH;;MAED,IAAML,OAAO,GAAGH,MAAM,CAACG,OAAvB;MACA,IAAMM,GAAG,GAAGlB,OAAO,CAACmB,gBAAR,GAA2BC,SAA3B,EAAZ;;MACA,IAAIR,OAAJ,EAAa;QACT,IAAMS,KAAK,GAAG,IAAIC,MAAM,CAACC,KAAX,EAAd;QACA,IAAMC,GAAG,GAAGZ,OAAO,CAACa,UAAR,CAAmB,IAAnB,CAAZ;;QACAJ,KAAK,CAACK,MAAN,GAAe,YAAM;UACjBF,GAAG,CAACG,SAAJ,CAAcN,KAAd,EAAqB,CAArB,EAAwB,CAAxB;UACAT,OAAO,CAACgB,KAAR,GAAgBP,KAAK,CAACO,KAAtB;UACAhB,OAAO,CAACiB,MAAR,GAAiBR,KAAK,CAACQ,MAAvB;UAEAL,GAAG,CAACG,SAAJ,CAAcN,KAAd,EAAqB,CAArB,EAAwB,CAAxB;UACAJ,OAAO;QACV,CAPD;;QAQAI,KAAK,CAACH,GAAN,GAAYA,GAAZ;MACH;;MAEDlB,OAAO,CAACc,OAAR;MACAd,OAAO,GAAGC,SAAV;IACH,CAxBM,CAAP;EAyBH;AA5CyB,CAA9B;eA+CeG,I"}
+{"version":3,"names":["cropper","undefined","renderForm","textAlign","tool","name","icon","activateTool","onActivate","canvas","options","Cropper","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 { ImageEditorTool } from \"./types\";\nimport { ReactComponent as CropIcon } from \"./icons/crop.svg\";\nimport { IconButton } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\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 placement={\"bottom\"} content={\"Crop\"}>\n                <IconButton\n                    icon={<CropIcon />}\n                    onClick={() => activateTool(\"crop\")}\n                    data-testid={\"crop-item\"}\n                />\n            </Tooltip>\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;AAEA;AACA;AACA;AACA;AACA;AAEA,IAAIA,OAA4B,GAAGC,SAAS;AAE5C,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;EACrB,oBACI;IAAK,KAAK,EAAE;MAAEC,SAAS,EAAE;IAAS;EAAE,GAAC,oFAErC,CAAM;AAEd,CAAC;AAED,IAAMC,IAAqB,GAAG;EAC1BC,IAAI,EAAE,MAAM;EACZC,IAAI,sBAAmB;IAAA,IAAhBC,YAAY,QAAZA,YAAY;IACf,oBACI,6BAAC,gBAAO;MAAC,SAAS,EAAE,QAAS;MAAC,OAAO,EAAE;IAAO,gBAC1C,6BAAC,kBAAU;MACP,IAAI,eAAE,6BAAC,oBAAQ,OAAI;MACnB,OAAO,EAAE;QAAA,OAAMA,YAAY,CAAC,MAAM,CAAC;MAAA,CAAC;MACpC,eAAa;IAAY,EAC3B,CACI;EAElB,CAAC;EACDL,UAAU,EAAVA,UAAU;EACVM,UAAU,EAAE,2BAAyB;IAAA,IAAtBC,MAAM,SAANA,MAAM;MAAEC,OAAO,SAAPA,OAAO;IAC1BV,OAAO,GAAG,IAAIW,kBAAO,CAACF,MAAM,CAACG,OAAO,EAAuBF,OAAO,CAAC;EACvE,CAAC;EACDG,MAAM,EAAE;IAAA,OAAMb,OAAO,IAAIA,OAAO,CAACc,OAAO,EAAE;EAAA;EAC1CC,KAAK,EAAE,sBAAgB;IAAA,IAAbN,MAAM,SAANA,MAAM;IACZ,OAAO,IAAIO,OAAO,CAAC,UAACC,OAAY,EAAK;MACjC,IAAI,CAACjB,OAAO,EAAE;QACViB,OAAO,EAAE;QACT;MACJ;MAEA,IAAML,OAAO,GAAGH,MAAM,CAACG,OAAO;MAC9B,IAAMM,GAAG,GAAGlB,OAAO,CAACmB,gBAAgB,EAAE,CAACC,SAAS,EAAE;MAClD,IAAIR,OAAO,EAAE;QACT,IAAMS,KAAK,GAAG,IAAIC,MAAM,CAACC,KAAK,EAAE;QAChC,IAAMC,GAAG,GAAGZ,OAAO,CAACa,UAAU,CAAC,IAAI,CAA6B;QAChEJ,KAAK,CAACK,MAAM,GAAG,YAAM;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,EAAE;QACb,CAAC;QACDI,KAAK,CAACH,GAAG,GAAGA,GAAG;MACnB;MAEAlB,OAAO,CAACc,OAAO,EAAE;MACjBd,OAAO,GAAGC,SAAS;IACvB,CAAC,CAAC;EACN;AACJ,CAAC;AAAC,eAEaG,IAAI;AAAA"}

package/ImageEditor/toolbar/filter.js

@@ -1,44 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _filter = require("./icons/filter.svg");
-
 var _Slider = require("../../Slider");
-
 var _Button = require("../../Button");
-
 var _Tooltip = require("../../Tooltip");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 /**
  * When using Caman, we added @ts-ignore 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
  */
+
 var Wrapper = /*#__PURE__*/(0, _styled.default)("div", {
   target: "e1cnct9n0",
   label: "Wrapper"
@@ -98,21 +83,15 @@ var sliders = [{
   key: "sharpen",
   label: "Sharpen"
 }];
-
 var RenderForm = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(RenderForm, _React$Component);
-
   var _super = (0, _createSuper2.default)(RenderForm);
-
   function RenderForm() {
     var _this;
-
     (0, _classCallCheck2.default)(this, RenderForm);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       processing: false,
@@ -120,20 +99,21 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyFilters", (0, _debounce2.default)(function () {
       var canvas = _this.props.canvas;
-      var values = _this.state.values; // eslint-disable-next-line @typescript-eslint/no-this-alias
-
-      var component = (0, _assertThisInitialized2.default)(_this); // @ts-ignore
+      var values = _this.state.values;
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      var component = (0, _assertThisInitialized2.default)(_this);
 
+      // @ts-ignore
       Caman(canvas.current, function () {
         var _this2 = this;
-
         // @ts-ignore
         this.revert(false);
-        Object.keys(values).forEach( // @ts-ignore
+        Object.keys(values).forEach(
+        // @ts-ignore
         function (key) {
           return values[key] !== 0 && _this2[key] && _this2[key](values[key]);
-        }); // @ts-ignore
-
+        });
+        // @ts-ignore
         this.render();
         component.setState({
           processing: false
@@ -151,7 +131,6 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(RenderForm, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -161,7 +140,6 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this3 = this;
-
       return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement("ul", null, sliders.map(function (props) {
         return /*#__PURE__*/_react.default.createElement("li", {
           key: props.key
@@ -191,9 +169,7 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
             processing: true
           }, function () {
             _this3.resetFiltersValues();
-
             _this3.applyFilters();
-
             _this3.setState({
               processing: false
             });
@@ -204,7 +180,6 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
   }]);
   return RenderForm;
 }(_react.default.Component);
-
 var tool = {
   name: "filter",
   icon: function icon(_ref) {
@@ -228,8 +203,8 @@ var tool = {
     // @ts-ignore
     Caman(canvas.current, function () {
       // @ts-ignore
-      this.revert(false); // @ts-ignore
-
+      this.revert(false);
+      // @ts-ignore
       this.render();
     });
   }

package/ImageEditor/toolbar/filter.js.map

@@ -1 +1 @@
-{"version":3,"names":["Wrapper","styled","ul","textAlign","li","display","width","padding","sliders","key","label","min","RenderForm","processing","values","canvas","props","state","component","Caman","current","revert","Object","keys","forEach","render","setState","reduce","output","resetFiltersValues","map","value","applyFilters","React","Component","tool","name","icon","activateTool","renderForm","cancel"],"sources":["filter.tsx"],"sourcesContent":["/**\n * When using Caman, we added @ts-ignore 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 \"./icons/filter.svg\";\nimport { Slider } from \"~/Slider\";\nimport { ImageEditorTool } from \"./types\";\nimport { IconButton, ButtonDefault } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { debounce } from \"lodash\";\nimport styled from \"@emotion/styled\";\n\ninterface RenderFormState {\n    values: Record<string, any>;\n    processing: boolean;\n}\n\ninterface RenderFormProps {\n    canvas: any;\n    renderApplyCancel?: Function;\n}\n\nconst Wrapper = styled(\"div\")({\n    ul: {\n        textAlign: \"center\",\n        li: {\n            display: \"inline-block\",\n            width: 180,\n            padding: 10\n        }\n    },\n    \".buttons\": {\n        textAlign: \"center\"\n    }\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-ignore\n        Caman(canvas.current, function () {\n            // @ts-ignore\n            this.revert(false);\n            Object.keys(values).forEach(\n                // @ts-ignore\n                key => values[key] !== 0 && this[key] && this[key](values[key])\n            );\n            // @ts-ignore\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            <Wrapper>\n                <ul>\n                    {sliders.map(props => (\n                        <li key={props.key}>\n                            <Slider\n                                value={this.state.values[props.key]}\n                                min={0}\n                                max={100}\n                                disabled={this.state.processing}\n                                onInput={(value: string) => {\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                        </li>\n                    ))}\n                </ul>\n\n                <div style={{ textAlign: \"center\" }}>\n                    <ButtonDefault\n                        onClick={() => {\n                            this.setState({ processing: true }, () => {\n                                this.resetFiltersValues();\n                                this.applyFilters();\n                                this.setState({ processing: false });\n                            });\n                        }}\n                    >\n                        Reset filters\n                    </ButtonDefault>\n                </div>\n            </Wrapper>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"filter\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Filter\"}>\n                <IconButton\n                    icon={<FilterIcon />}\n                    onClick={() => activateTool(\"filter\")}\n                    data-testid={\"filter-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    cancel: ({ canvas }) => {\n        // @ts-ignore\n        Caman(canvas.current, function () {\n            // @ts-ignore\n            this.revert(false);\n            // @ts-ignore\n            this.render();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}
+{"version":3,"names":["Wrapper","styled","ul","textAlign","li","display","width","padding","sliders","key","label","min","RenderForm","processing","values","canvas","props","state","component","Caman","current","revert","Object","keys","forEach","render","setState","reduce","output","resetFiltersValues","map","value","applyFilters","React","Component","tool","name","icon","activateTool","renderForm","cancel"],"sources":["filter.tsx"],"sourcesContent":["/**\n * When using Caman, we added @ts-ignore 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 \"./icons/filter.svg\";\nimport { Slider } from \"~/Slider\";\nimport { ImageEditorTool } from \"./types\";\nimport { IconButton, ButtonDefault } from \"~/Button\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { debounce } from \"lodash\";\nimport styled from \"@emotion/styled\";\n\ninterface RenderFormState {\n    values: Record<string, any>;\n    processing: boolean;\n}\n\ninterface RenderFormProps {\n    canvas: any;\n    renderApplyCancel?: Function;\n}\n\nconst Wrapper = styled(\"div\")({\n    ul: {\n        textAlign: \"center\",\n        li: {\n            display: \"inline-block\",\n            width: 180,\n            padding: 10\n        }\n    },\n    \".buttons\": {\n        textAlign: \"center\"\n    }\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-ignore\n        Caman(canvas.current, function () {\n            // @ts-ignore\n            this.revert(false);\n            Object.keys(values).forEach(\n                // @ts-ignore\n                key => values[key] !== 0 && this[key] && this[key](values[key])\n            );\n            // @ts-ignore\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            <Wrapper>\n                <ul>\n                    {sliders.map(props => (\n                        <li key={props.key}>\n                            <Slider\n                                value={this.state.values[props.key]}\n                                min={0}\n                                max={100}\n                                disabled={this.state.processing}\n                                onInput={(value: string) => {\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                        </li>\n                    ))}\n                </ul>\n\n                <div style={{ textAlign: \"center\" }}>\n                    <ButtonDefault\n                        onClick={() => {\n                            this.setState({ processing: true }, () => {\n                                this.resetFiltersValues();\n                                this.applyFilters();\n                                this.setState({ processing: false });\n                            });\n                        }}\n                    >\n                        Reset filters\n                    </ButtonDefault>\n                </div>\n            </Wrapper>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"filter\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Filter\"}>\n                <IconButton\n                    icon={<FilterIcon />}\n                    onClick={() => activateTool(\"filter\")}\n                    data-testid={\"filter-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    cancel: ({ canvas }) => {\n        // @ts-ignore\n        Caman(canvas.current, function () {\n            // @ts-ignore\n            this.revert(false);\n            // @ts-ignore\n            this.render();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageEditor/toolbar/flip.js

@@ -1,30 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _flip = require("./icons/flip.svg");
-
 var _cropperjs = _interopRequireDefault(require("cropperjs"));
-
 require("cropperjs/dist/cropper.css");
-
 var _Button = require("../../Button");
-
 var _Tooltip = require("../../Tooltip");
-
 var cropper;
 var flipped = {
   x: 1,
   y: 1
 };
-
 var renderForm = function renderForm() {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -35,7 +26,6 @@ var renderForm = function renderForm() {
       if (!cropper) {
         return;
       }
-
       flipped.x = flipped.x === 1 ? -1 : 1;
       cropper.scaleX(flipped.x);
     }
@@ -44,13 +34,11 @@ var renderForm = function renderForm() {
       if (!cropper) {
         return;
       }
-
       flipped.y = flipped.y === 1 ? -1 : 1;
       cropper.scaleY(flipped.y);
     }
   }, "FlipY"));
 };
-
 var tool = {
   name: "flip",
   icon: function icon(_ref) {
@@ -88,14 +76,11 @@ var tool = {
         resolve();
         return;
       }
-
       var current = canvas.current;
       var src = cropper.getCroppedCanvas().toDataURL();
-
       if (current) {
         var image = new window.Image();
         var ctx = current.getContext("2d");
-
         image.onload = function () {
           ctx.drawImage(image, 0, 0);
           current.width = image.width;
@@ -103,10 +88,8 @@ var tool = {
           ctx.drawImage(image, 0, 0);
           resolve();
         };
-
         image.src = src;
       }
-
       cropper.destroy();
     });
   }

package/ImageEditor/toolbar/flip.js.map

@@ -1 +1 @@
-{"version":3,"names":["cropper","flipped","x","y","renderForm","textAlign","scaleX","scaleY","tool","name","icon","activateTool","cancel","destroy","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["flip.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditorTool } from \"./types\";\nimport { ReactComponent as FlipIcon } from \"./icons/flip.svg\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nimport { IconButton, ButtonDefault } from \"../../Button\";\nimport { Tooltip } from \"~/Tooltip\";\n\nlet cropper: Cropper;\n\nconst flipped = { x: 1, y: 1 };\n\nconst renderForm = () => {\n    return (\n        <div style={{ textAlign: \"center\" }}>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.x = flipped.x === 1 ? -1 : 1;\n                    cropper.scaleX(flipped.x);\n                }}\n            >\n                FlipX\n            </ButtonDefault>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.y = flipped.y === 1 ? -1 : 1;\n                    cropper.scaleY(flipped.y);\n                }}\n            >\n                FlipY\n            </ButtonDefault>\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"flip\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Flip\"}>\n                <IconButton\n                    icon={<FlipIcon />}\n                    onClick={() => activateTool(\"flip\")}\n                    data-testid={\"flip-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm,\n    cancel: () => cropper && cropper.destroy(),\n    onActivate: ({ canvas }) => {\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\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        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}
+{"version":3,"names":["cropper","flipped","x","y","renderForm","textAlign","scaleX","scaleY","tool","name","icon","activateTool","cancel","destroy","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["flip.tsx"],"sourcesContent":["import React from \"react\";\nimport { ImageEditorTool } from \"./types\";\nimport { ReactComponent as FlipIcon } from \"./icons/flip.svg\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nimport { IconButton, ButtonDefault } from \"../../Button\";\nimport { Tooltip } from \"~/Tooltip\";\n\nlet cropper: Cropper;\n\nconst flipped = { x: 1, y: 1 };\n\nconst renderForm = () => {\n    return (\n        <div style={{ textAlign: \"center\" }}>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.x = flipped.x === 1 ? -1 : 1;\n                    cropper.scaleX(flipped.x);\n                }}\n            >\n                FlipX\n            </ButtonDefault>\n            <ButtonDefault\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.y = flipped.y === 1 ? -1 : 1;\n                    cropper.scaleY(flipped.y);\n                }}\n            >\n                FlipY\n            </ButtonDefault>\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"flip\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Flip\"}>\n                <IconButton\n                    icon={<FlipIcon />}\n                    onClick={() => activateTool(\"flip\")}\n                    data-testid={\"flip-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm,\n    cancel: () => cropper && cropper.destroy(),\n    onActivate: ({ canvas }) => {\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\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        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}

package/ImageEditor/toolbar/icons/index.js

@@ -51,19 +51,11 @@ Object.defineProperty(exports, "UndoIcon", {
     return _undo.ReactComponent;
   }
 });
-
 var _crop = require("./crop.svg");
-
 var _draw = require("./draw.svg");
-
 var _filter = require("./filter.svg");
-
 var _flip = require("./flip.svg");
-
 var _redo = require("./redo.svg");
-
 var _rotateLeft = require("./rotateLeft.svg");
-
 var _rotateRight = require("./rotateRight.svg");
-
 var _undo = require("./undo.svg");

package/ImageEditor/toolbar/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { ReactComponent as CropIcon } from \"./crop.svg\";\nexport { ReactComponent as DrawIcon } from \"./draw.svg\";\nexport { ReactComponent as FilterIcon } from \"./filter.svg\";\nexport { ReactComponent as FlipIcon } from \"./flip.svg\";\nexport { ReactComponent as RedoIcon } from \"./redo.svg\";\nexport { ReactComponent as RotateLeftIcon } from \"./rotateLeft.svg\";\nexport { ReactComponent as RotateRightIcon } from \"./rotateRight.svg\";\nexport { ReactComponent as UndoIcon } from \"./undo.svg\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { ReactComponent as CropIcon } from \"./crop.svg\";\nexport { ReactComponent as DrawIcon } from \"./draw.svg\";\nexport { ReactComponent as FilterIcon } from \"./filter.svg\";\nexport { ReactComponent as FlipIcon } from \"./flip.svg\";\nexport { ReactComponent as RedoIcon } from \"./redo.svg\";\nexport { ReactComponent as RotateLeftIcon } from \"./rotateLeft.svg\";\nexport { ReactComponent as RotateRightIcon } from \"./rotateRight.svg\";\nexport { ReactComponent as UndoIcon } from \"./undo.svg\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/ImageEditor/toolbar/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,11 +28,7 @@ Object.defineProperty(exports, "rotate", {
     return _rotate.default;
   }
 });
-
 var _crop = _interopRequireDefault(require("./crop"));
-
 var _flip = _interopRequireDefault(require("./flip"));
-
 var _filter = _interopRequireDefault(require("./filter"));
-
 var _rotate = _interopRequireDefault(require("./rotate"));

package/ImageEditor/toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as crop } from \"./crop\";\nexport { default as flip } from \"./flip\";\nexport { default as filter } from \"./filter\";\nexport { default as rotate } from \"./rotate\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export { default as crop } from \"./crop\";\nexport { default as flip } from \"./flip\";\nexport { default as filter } from \"./filter\";\nexport { default as rotate } from \"./rotate\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA"}

package/ImageEditor/toolbar/rotate.js

@@ -1,70 +1,45 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _rotateRight = require("./icons/rotateRight.svg");
-
 var _Slider = require("../../Slider");
-
 var _Tooltip = require("../../Tooltip");
-
 var _Button = require("../../Button");
-
 var _cropperjs = _interopRequireDefault(require("cropperjs"));
-
 require("cropperjs/dist/cropper.css");
-
 var cropper;
-
 var RenderForm = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(RenderForm, _React$Component);
-
   var _super = (0, _createSuper2.default)(RenderForm);
-
   function RenderForm() {
     var _this;
-
     (0, _classCallCheck2.default)(this, RenderForm);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       rangeInput: 0
     });
     return _this;
   }
-
   (0, _createClass2.default)(RenderForm, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       return /*#__PURE__*/_react.default.createElement("div", {
         style: {
           width: "500px",
@@ -83,17 +58,14 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
             rangeInput: value
           }, /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
             return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-              while (1) {
-                switch (_context.prev = _context.next) {
-                  case 0:
-                    if (cropper) {
-                      cropper.rotateTo(parseInt(value, 10));
-                    }
-
-                  case 1:
-                  case "end":
-                    return _context.stop();
-                }
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  if (cropper) {
+                    cropper.rotateTo(parseInt(value, 10));
+                  }
+                case 1:
+                case "end":
+                  return _context.stop();
               }
             }, _callee);
           })));
@@ -103,7 +75,6 @@ var RenderForm = /*#__PURE__*/function (_React$Component) {
   }]);
   return RenderForm;
 }(_react.default.Component);
-
 var tool = {
   name: "rotate",
   icon: function icon(_ref2) {
@@ -124,7 +95,6 @@ var tool = {
   },
   onActivate: function onActivate(_ref3) {
     var canvas = _ref3.canvas;
-
     /**
      * We can safely cast canvas.current as HTMLCanvasElement
      */
@@ -147,25 +117,20 @@ var tool = {
         resolve();
         return;
       }
-
       var current = canvas.current;
       var src = cropper.getCroppedCanvas().toDataURL();
-
       if (current) {
         var image = new window.Image();
         var ctx = current.getContext("2d");
-
         image.onload = function () {
           ctx.drawImage(image, 0, 0);
           current.width = image.width;
           current.height = image.height;
           ctx.drawImage(image, 0, 0);
         };
-
         image.src = src;
         resolve();
       }
-
       cropper.destroy();
     });
   }

package/ImageEditor/toolbar/rotate.js.map

@@ -1 +1 @@
-{"version":3,"names":["cropper","RenderForm","rangeInput","width","margin","state","value","setState","rotateTo","parseInt","React","Component","tool","name","icon","activateTool","renderForm","props","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton\n                    icon={<RotateRight />}\n                    onClick={() => activateTool(\"rotate\")}\n                    data-testid={\"rotate-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\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                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}
+{"version":3,"names":["cropper","RenderForm","rangeInput","width","margin","state","value","setState","rotateTo","parseInt","React","Component","tool","name","icon","activateTool","renderForm","props","onActivate","canvas","Cropper","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","height"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as RotateRight } from \"./icons/rotateRight.svg\";\nimport { ImageEditorTool } from \"./types\";\nimport { Slider } from \"../../Slider\";\nimport { Tooltip } from \"~/Tooltip\";\nimport { IconButton } from \"~/Button\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div style={{ width: \"500px\", margin: \"0 auto\" }}>\n                <Slider\n                    label={\"Range Input\"}\n                    value={this.state.rangeInput}\n                    min={0}\n                    max={360}\n                    step={10}\n                    discrete={true}\n                    displayMarkers={true}\n                    onInput={(value: string) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(value, 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip placement={\"bottom\"} content={\"Rotate\"}>\n                <IconButton\n                    icon={<RotateRight />}\n                    onClick={() => activateTool(\"rotate\")}\n                    data-testid={\"rotate-item\"}\n                />\n            </Tooltip>\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\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                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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"}