@webiny/ui 0.0.0-ee-vpcs.549378cf03

package/ImageEditor/toolbar/crop.js

@@ -0,0 +1,88 @@
+"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 _crop = require("./icons/crop.svg");
+
+var _Button = require("../../Button");
+
+var _Tooltip = require("../../Tooltip");
+
+var _cropperjs = _interopRequireDefault(require("cropperjs"));
+
+require("cropperjs/dist/cropper.css");
+
+var cropper = undefined;
+
+var renderForm = function renderForm() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: "center"
+    }
+  }, "Click and drag to crop a portion of the image. Hold Shift to persist aspect ratio.");
+};
+
+var tool = {
+  name: "crop",
+  icon: function icon(_ref) {
+    var activateTool = _ref.activateTool;
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      placement: "bottom",
+      content: "Crop"
+    }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_crop.ReactComponent, null),
+      onClick: function onClick() {
+        return activateTool("crop");
+      },
+      "data-testid": "crop-item"
+    }));
+  },
+  renderForm: renderForm,
+  onActivate: function onActivate(_ref2) {
+    var canvas = _ref2.canvas,
+        options = _ref2.options;
+    cropper = new _cropperjs.default(canvas.current, options);
+  },
+  cancel: function cancel() {
+    return cropper && cropper.destroy();
+  },
+  apply: function apply(_ref3) {
+    var canvas = _ref3.canvas;
+    return new Promise(function (resolve) {
+      if (!cropper) {
+        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);
+          resolve();
+        };
+
+        image.src = src;
+      }
+
+      cropper.destroy();
+      cropper = undefined;
+    });
+  }
+};
+var _default = tool;
+exports.default = _default;

package/ImageEditor/toolbar/crop.js.map

@@ -0,0 +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,wFADJ;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"}

package/ImageEditor/toolbar/filter.d.ts

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

package/ImageEditor/toolbar/filter.js

@@ -0,0 +1,238 @@
+"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"
+})({
+  ul: {
+    textAlign: "center",
+    li: {
+      display: "inline-block",
+      width: 180,
+      padding: 10
+    }
+  },
+  ".buttons": {
+    textAlign: "center"
+  }
+});
+var 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"
+}];
+
+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,
+      values: {}
+    });
+    (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
+
+      Caman(canvas.current, function () {
+        var _this2 = this;
+
+        // @ts-ignore
+        this.revert(false);
+        Object.keys(values).forEach( // @ts-ignore
+        function (key) {
+          return values[key] !== 0 && _this2[key] && _this2[key](values[key]);
+        }); // @ts-ignore
+
+        this.render();
+        component.setState({
+          processing: false
+        });
+      });
+    }, 200));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resetFiltersValues", function () {
+      _this.setState(function (state) {
+        sliders.reduce(function (output, current) {
+          state.values[current.key] = 0;
+          return output;
+        }, {});
+        return state;
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(RenderForm, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.resetFiltersValues();
+    }
+  }, {
+    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
+        }, /*#__PURE__*/_react.default.createElement(_Slider.Slider, Object.assign({
+          value: _this3.state.values[props.key],
+          min: 0,
+          max: 100,
+          disabled: _this3.state.processing,
+          onInput: function onInput(value) {
+            _this3.setState(function (state) {
+              var values = (0, _objectSpread2.default)({}, state.values);
+              values[props.key] = value;
+              return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+                processing: true,
+                values: values
+              });
+            }, _this3.applyFilters);
+          }
+        }, props)));
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          textAlign: "center"
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+        onClick: function onClick() {
+          _this3.setState({
+            processing: true
+          }, function () {
+            _this3.resetFiltersValues();
+
+            _this3.applyFilters();
+
+            _this3.setState({
+              processing: false
+            });
+          });
+        }
+      }, "Reset filters")));
+    }
+  }]);
+  return RenderForm;
+}(_react.default.Component);
+
+var tool = {
+  name: "filter",
+  icon: function icon(_ref) {
+    var activateTool = _ref.activateTool;
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      placement: "bottom",
+      content: "Filter"
+    }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_filter.ReactComponent, null),
+      onClick: function onClick() {
+        return activateTool("filter");
+      },
+      "data-testid": "filter-item"
+    }));
+  },
+  renderForm: function renderForm(props) {
+    return /*#__PURE__*/_react.default.createElement(RenderForm, props);
+  },
+  cancel: function cancel(_ref2) {
+    var canvas = _ref2.canvas;
+    // @ts-ignore
+    Caman(canvas.current, function () {
+      // @ts-ignore
+      this.revert(false); // @ts-ignore
+
+      this.render();
+    });
+  }
+};
+var _default = tool;
+exports.default = _default;

package/ImageEditor/toolbar/filter.js.map

@@ -0,0 +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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"}

package/ImageEditor/toolbar/flip.d.ts

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

package/ImageEditor/toolbar/flip.js

@@ -0,0 +1,115 @@
+"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: {
+      textAlign: "center"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+    onClick: function onClick() {
+      if (!cropper) {
+        return;
+      }
+
+      flipped.x = flipped.x === 1 ? -1 : 1;
+      cropper.scaleX(flipped.x);
+    }
+  }, "FlipX"), /*#__PURE__*/_react.default.createElement(_Button.ButtonDefault, {
+    onClick: function onClick() {
+      if (!cropper) {
+        return;
+      }
+
+      flipped.y = flipped.y === 1 ? -1 : 1;
+      cropper.scaleY(flipped.y);
+    }
+  }, "FlipY"));
+};
+
+var tool = {
+  name: "flip",
+  icon: function icon(_ref) {
+    var activateTool = _ref.activateTool;
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+      placement: "bottom",
+      content: "Flip"
+    }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_flip.ReactComponent, null),
+      onClick: function onClick() {
+        return activateTool("flip");
+      },
+      "data-testid": "flip-item"
+    }));
+  },
+  renderForm: renderForm,
+  cancel: function cancel() {
+    return cropper && cropper.destroy();
+  },
+  onActivate: function onActivate(_ref2) {
+    var canvas = _ref2.canvas;
+    cropper = new _cropperjs.default(canvas.current, {
+      background: false,
+      modal: false,
+      guides: false,
+      dragMode: "none",
+      highlight: false,
+      autoCrop: false
+    });
+  },
+  apply: function apply(_ref3) {
+    var canvas = _ref3.canvas;
+    return new Promise(function (resolve) {
+      if (!cropper) {
+        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);
+          resolve();
+        };
+
+        image.src = src;
+      }
+
+      cropper.destroy();
+    });
+  }
+};
+var _default = tool;
+exports.default = _default;

package/ImageEditor/toolbar/flip.js.map

@@ -0,0 +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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"}

package/ImageEditor/toolbar/icons/crop.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M17 15h2V7c0-1.1-.9-2-2-2H9v2h8v8zM7 17V1H5v4H1v2h4v10c0 1.1.9 2 2 2h10v4h2v-4h4v-2H7z"/>
+</svg>

package/ImageEditor/toolbar/icons/draw.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>

package/ImageEditor/toolbar/icons/filter.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/>
+</svg>

package/ImageEditor/toolbar/icons/flip.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M15 21h2v-2h-2v2zm4-12h2V7h-2v2zM3 5v14c0 1.1.9 2 2 2h4v-2H5V5h4V3H5c-1.1 0-2 .9-2 2zm16-2v2h2c0-1.1-.9-2-2-2zm-8 20h2V1h-2v22zm8-6h2v-2h-2v2zM15 5h2V3h-2v2zm4 8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2z"/>
+</svg>

package/ImageEditor/toolbar/icons/index.d.ts

@@ -0,0 +1,8 @@
+export { ReactComponent as CropIcon } from "./crop.svg";
+export { ReactComponent as DrawIcon } from "./draw.svg";
+export { ReactComponent as FilterIcon } from "./filter.svg";
+export { ReactComponent as FlipIcon } from "./flip.svg";
+export { ReactComponent as RedoIcon } from "./redo.svg";
+export { ReactComponent as RotateLeftIcon } from "./rotateLeft.svg";
+export { ReactComponent as RotateRightIcon } from "./rotateRight.svg";
+export { ReactComponent as UndoIcon } from "./undo.svg";

package/ImageEditor/toolbar/icons/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CropIcon", {
+  enumerable: true,
+  get: function get() {
+    return _crop.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "DrawIcon", {
+  enumerable: true,
+  get: function get() {
+    return _draw.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "FilterIcon", {
+  enumerable: true,
+  get: function get() {
+    return _filter.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "FlipIcon", {
+  enumerable: true,
+  get: function get() {
+    return _flip.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "RedoIcon", {
+  enumerable: true,
+  get: function get() {
+    return _redo.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "RotateLeftIcon", {
+  enumerable: true,
+  get: function get() {
+    return _rotateLeft.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "RotateRightIcon", {
+  enumerable: true,
+  get: function get() {
+    return _rotateRight.ReactComponent;
+  }
+});
+Object.defineProperty(exports, "UndoIcon", {
+  enumerable: true,
+  get: function get() {
+    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

@@ -0,0 +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"}

package/ImageEditor/toolbar/icons/redo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/>
+</svg>

package/ImageEditor/toolbar/icons/rotateLeft.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/>
+</svg>

package/ImageEditor/toolbar/icons/rotateRight.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z"/>
+</svg>

package/ImageEditor/toolbar/icons/undo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path fill="currentColor" d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
+</svg>

package/ImageEditor/toolbar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as crop } from "./crop";
+export { default as flip } from "./flip";
+export { default as filter } from "./filter";
+export { default as rotate } from "./rotate";