@webiny/ui 0.0.0-mt-2 → 0.0.0-unstable.5e7233243f

package/ImageEditor/ImageEditor.js

@@ -1,18 +1,51 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import * as React from "react";
-import * as toolbar from "./toolbar";
-import styled from "@emotion/styled";
-import classNames from "classnames";
-import { ButtonSecondary, ButtonPrimary } from "../Button";
-import loadScript from "load-script";
-var Toolbar = /*#__PURE__*/styled("div", {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageEditor = 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 _toolbar = require("./toolbar");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = require("../Button");
+
+var _loadScript = _interopRequireDefault(require("load-script"));
+
+/**
+ * Package load-script does not have types.
+ */
+// @ts-ignore
+var toolbar = {
+  flip: _toolbar.flip,
+  filter: _toolbar.filter,
+  crop: _toolbar.crop,
+  rotate: _toolbar.rotate
+};
+var Toolbar = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eq22gs70",
   label: "Toolbar"
 })({
@@ -31,7 +64,7 @@ var Toolbar = /*#__PURE__*/styled("div", {
     pointerEvents: "none"
   }
 });
-var ToolOptions = /*#__PURE__*/styled("div", {
+var ToolOptions = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eq22gs71",
   label: "ToolOptions"
 })({
@@ -41,7 +74,7 @@ var ToolOptions = /*#__PURE__*/styled("div", {
   backgroundColor: "var(--mdc-theme-background)",
   borderTop: "1px solid var(--mdc-theme-on-background)"
 });
-var ApplyCancelActions = /*#__PURE__*/styled("div", {
+var ApplyCancelActions = /*#__PURE__*/(0, _styled.default)("div", {
   target: "eq22gs72",
   label: "ApplyCancelActions"
 })({
@@ -55,36 +88,32 @@ var initScripts = function initScripts() {
       return resolve();
     }
 
-    return loadScript("https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js", resolve);
+    return (0, _loadScript.default)("https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js", resolve);
   });
 };
 
 var ImageEditor = /*#__PURE__*/function (_React$Component) {
-  _inherits(ImageEditor, _React$Component);
+  (0, _inherits2.default)(ImageEditor, _React$Component);
 
-  var _super = _createSuper(ImageEditor);
+  var _super = (0, _createSuper2.default)(ImageEditor);
 
   function ImageEditor() {
     var _this;
 
-    _classCallCheck(this, ImageEditor);
+    (0, _classCallCheck2.default)(this, ImageEditor);
 
     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));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       tool: null,
       src: ""
     });
-
-    _defineProperty(_assertThisInitialized(_this), "canvas", /*#__PURE__*/React.createRef());
-
-    _defineProperty(_assertThisInitialized(_this), "image", null);
-
-    _defineProperty(_assertThisInitialized(_this), "updateCanvas", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "canvas", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "image", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateCanvas", function () {
       var src = _this.props.src;
       _this.image = new window.Image();
       var canvas = _this.canvas.current;
@@ -102,8 +131,7 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         _this.image.src = src;
       }
     });
-
-    _defineProperty(_assertThisInitialized(_this), "activateTool", function (tool) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "activateTool", function (tool) {
       if (typeof tool === "string") {
         tool = toolbar[tool];
       }
@@ -118,14 +146,12 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         });
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "deactivateTool", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "deactivateTool", function () {
       _this.setState({
         tool: null
       });
     });
-
-    _defineProperty(_assertThisInitialized(_this), "getCanvasDataUrl", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCanvasDataUrl", function () {
       var canvas = _this.canvas.current;
 
       if (canvas) {
@@ -140,10 +166,9 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
 
       return "";
     });
-
-    _defineProperty(_assertThisInitialized(_this), "applyActiveTool", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
       var tool;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
@@ -157,32 +182,29 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
               return _context.abrupt("return");
 
             case 3:
-              _context.t0 = tool.apply;
-
-              if (!_context.t0) {
-                _context.next = 7;
+              if (!tool.apply) {
+                _context.next = 6;
                 break;
               }
 
-              _context.next = 7;
+              _context.next = 6;
               return tool.apply({
                 canvas: _this.canvas
               });
 
-            case 7:
+            case 6:
               _this.deactivateTool();
 
-            case 8:
+            case 7:
             case "end":
               return _context.stop();
           }
         }
       }, _callee);
     })));
-
-    _defineProperty(_assertThisInitialized(_this), "cancelActiveTool", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelActiveTool", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
       var tool;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
@@ -196,30 +218,27 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
               return _context2.abrupt("return");
 
             case 3:
-              _context2.t0 = tool.cancel;
-
-              if (!_context2.t0) {
-                _context2.next = 7;
+              if (!tool.cancel) {
+                _context2.next = 6;
                 break;
               }
 
-              _context2.next = 7;
+              _context2.next = 6;
               return tool.cancel({
                 canvas: _this.canvas
               });
 
-            case 7:
+            case 6:
               _this.deactivateTool();
 
-            case 8:
+            case 7:
             case "end":
               return _context2.stop();
           }
         }
       }, _callee2);
     })));
-
-    _defineProperty(_assertThisInitialized(_this), "getToolOptions", function (tool) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getToolOptions", function (tool) {
       var options = _this.props.options;
 
       if (!options || typeof options !== "object") {
@@ -228,11 +247,10 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
 
       return options[tool.name] || {};
     });
-
     return _this;
   }
 
-  _createClass(ImageEditor, [{
+  (0, _createClass2.default)(ImageEditor, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
@@ -243,13 +261,17 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         setTimeout(function () {
           var options = _this2.props.options;
 
-          if (typeof options === "object" && options) {
-            for (var _key2 in options) {
-              if (options[_key2].autoEnable === true) {
-                var tool = toolbar[_key2];
-                tool && _this2.activateTool(tool);
-                break;
-              }
+          if (!options || typeof options !== "object") {
+            return;
+          }
+
+          for (var key in options) {
+            var option = options[key];
+
+            if (option.autoEnable === true) {
+              var tool = toolbar[key];
+              tool && _this2.activateTool(tool);
+              break;
             }
           }
         }, 250);
@@ -265,16 +287,17 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
           tools = _this$props.tools,
           children = _this$props.children;
       var tool = this.state.tool;
-      var editor = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Toolbar, null, tools.map(function (key) {
+
+      var editor = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Toolbar, null, tools.map(function (key) {
         var tool = toolbar[key];
 
         if (!tool) {
           return null;
         }
 
-        return /*#__PURE__*/React.createElement("div", {
+        return /*#__PURE__*/_react.default.createElement("div", {
           key: key,
-          className: classNames({
+          className: (0, _classnames.default)({
             disabled: _this3.state.tool
           })
         }, tool.icon({
@@ -282,24 +305,30 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
             return _this3.activateTool(tool);
           }
         }));
-      })), /*#__PURE__*/React.createElement(ToolOptions, null, tool ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof tool.renderForm === "function" && tool.renderForm({
+      })), /*#__PURE__*/_react.default.createElement(ToolOptions, null, tool ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof tool.renderForm === "function" && tool.renderForm({
         options: this.getToolOptions(tool),
         image: this.image,
         canvas: this.canvas
-      }), /*#__PURE__*/React.createElement(ApplyCancelActions, null, /*#__PURE__*/React.createElement(ButtonSecondary, {
-        onClick: this.cancelActiveTool
-      }, "Cancel"), "\xA0", /*#__PURE__*/React.createElement(ButtonPrimary, {
-        onClick: this.applyActiveTool
-      }, "Apply"))) : /*#__PURE__*/React.createElement("div", {
+      }), /*#__PURE__*/_react.default.createElement(ApplyCancelActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
+        "data-testid": "button-cancel",
+        onClick: function onClick() {
+          _this3.cancelActiveTool();
+        }
+      }, "Cancel"), "\xA0", /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+        "data-testid": "button-apply",
+        onClick: function onClick() {
+          _this3.applyActiveTool();
+        }
+      }, "Apply"))) : /*#__PURE__*/_react.default.createElement("div", {
         style: {
           textAlign: "center"
         }
-      }, "Select a tool to start working on your image.")), /*#__PURE__*/React.createElement("div", {
+      }, "Select a tool to start working on your image.")), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           margin: "0 auto",
           textAlign: "center"
         }
-      }, /*#__PURE__*/React.createElement("canvas", {
+      }, /*#__PURE__*/_react.default.createElement("canvas", {
         key: src,
         id: "canvas",
         style: {
@@ -324,12 +353,10 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
       return editor;
     }
   }]);
-
   return ImageEditor;
-}(React.Component);
+}(_react.default.Component);
 
-_defineProperty(ImageEditor, "defaultProps", {
+exports.ImageEditor = ImageEditor;
+(0, _defineProperty2.default)(ImageEditor, "defaultProps", {
   tools: ["crop", "flip", "rotate", "filter"]
-});
-
-export { ImageEditor };
+});

package/ImageEditor/ImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toolbar","flip","filter","crop","rotate","Toolbar","styled","display","justifyContent","alignItems","backgroundColor","margin","padding","position","width","boxSizing","zIndex","opacity","pointerEvents","ToolOptions","borderTop","ApplyCancelActions","textAlign","initScripts","Promise","resolve","window","Caman","loadScript","ImageEditor","tool","src","React","createRef","props","image","Image","canvas","current","onload","height","ctx","getContext","drawImage","setState","tt","onActivate","options","getToolOptions","startsWith","toDataURL","state","apply","deactivateTool","cancel","name","then","updateCanvas","setTimeout","key","option","autoEnable","activateTool","tools","children","editor","map","classNames","disabled","icon","renderForm","cancelActiveTool","applyActiveTool","maxWidth","render","getCanvasDataUrl","activeTool","Component"],"sources":["ImageEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { flip, filter, crop, rotate } from \"./toolbar\";\nimport { ImageEditorTool, ToolbarTool } from \"./toolbar/types\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport { ButtonSecondary, ButtonPrimary } from \"../Button\";\n/**\n * Package load-script does not have types.\n */\n// @ts-ignore\nimport loadScript from \"load-script\";\n\nconst toolbar = {\n    flip,\n    filter,\n    crop,\n    rotate\n};\n\nconst Toolbar = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"var(--mdc-theme-secondary)\",\n    margin: \"-24px -24px 0px -24px\",\n    padding: 2,\n    position: \"absolute\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    zIndex: 10,\n    \"> div.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst ToolOptions = styled(\"div\")({\n    margin: \"50px -24px 10px -24px\",\n    boxSizing: \"border-box\",\n    padding: 10,\n    backgroundColor: \"var(--mdc-theme-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\"\n});\n\nconst ApplyCancelActions = styled(\"div\")({\n    textAlign: \"center\"\n});\n\nconst initScripts = (): Promise<string> => {\n    return new Promise((resolve: any) => {\n        // @ts-ignore\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: Function;\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?: Function;\n    onToolDeactivate?: Function;\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            <React.Fragment>\n                <Toolbar>\n                    {tools.map(key => {\n                        const tool: ImageEditorTool = toolbar[key];\n                        if (!tool) {\n                            return null;\n                        }\n\n                        return (\n                            <div key={key} className={classNames({ disabled: this.state.tool })}>\n                                {tool.icon({\n                                    activateTool: () => this.activateTool(tool)\n                                })}\n                            </div>\n                        );\n                    })}\n                </Toolbar>\n\n                <ToolOptions>\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                            <ApplyCancelActions>\n                                <ButtonSecondary\n                                    data-testid=\"button-cancel\"\n                                    onClick={() => {\n                                        this.cancelActiveTool();\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                                &nbsp;\n                                <ButtonPrimary\n                                    data-testid=\"button-apply\"\n                                    onClick={() => {\n                                        this.applyActiveTool();\n                                    }}\n                                >\n                                    Apply\n                                </ButtonPrimary>\n                            </ApplyCancelActions>\n                        </>\n                    ) : (\n                        <div style={{ textAlign: \"center\" }}>\n                            Select a tool to start working on your image.\n                        </div>\n                    )}\n                </ToolOptions>\n\n                <div style={{ margin: \"0 auto\", textAlign: \"center\" }}>\n                    <canvas\n                        key={src}\n                        id={\"canvas\"}\n                        style={{ maxWidth: 700 }}\n                        ref={this.canvas as React.Ref<any>}\n                    />\n                </div>\n            </React.Fragment>\n        );\n\n        if (typeof children === \"function\") {\n            return children({\n                render: () => editor,\n                // canvas: this.canvas,\n                getCanvasDataUrl: this.getCanvasDataUrl,\n                activeTool: this.state.tool,\n                applyActiveTool: this.applyActiveTool,\n                cancelActiveTool: this.cancelActiveTool\n            });\n        }\n\n        return editor;\n    }\n}\n\nexport { ImageEditor };\n"],"mappings":"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"}

package/ImageEditor/index.js

@@ -1 +1,18 @@
-export * from "./ImageEditor";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ImageEditor = require("./ImageEditor");
+
+Object.keys(_ImageEditor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ImageEditor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ImageEditor[key];
+    }
+  });
+});

package/ImageEditor/index.js.map

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

package/ImageEditor/toolbar/crop.js

@@ -1,13 +1,28 @@
-import React from "react";
-import { ReactComponent as CropIcon } from "@svgr/webpack!./icons/crop.svg";
-import { IconButton } from "../../Button";
-import { Tooltip } from "../../Tooltip";
-import Cropper from "cropperjs";
-import "cropperjs/dist/cropper.css";
-var cropper = null;
+"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.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       textAlign: "center"
     }
@@ -18,19 +33,22 @@ var tool = {
   name: "crop",
   icon: function icon(_ref) {
     var activateTool = _ref.activateTool;
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
       placement: "bottom",
       content: "Crop"
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      icon: /*#__PURE__*/React.createElement(CropIcon, null),
-      onClick: activateTool
+    }, /*#__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 Cropper(canvas.current, options);
+    cropper = new _cropperjs.default(canvas.current, options);
   },
   cancel: function cancel() {
     return cropper && cropper.destroy();
@@ -62,8 +80,9 @@ var tool = {
       }
 
       cropper.destroy();
-      cropper = null;
+      cropper = undefined;
     });
   }
 };
-export default tool;
+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"}