@pie-element/hotspot 9.3.4-next.0 → 10.0.0-beta.0

package/configure/lib/hotspot-container.js

@@ -1,425 +1,320 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Container = void 0;
-
+exports.default = exports.Container = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-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 _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _index = require("@material-ui/core/styles/index");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _shapes = require("./shapes");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
+var _styles = require("@mui/material/styles");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _button = _interopRequireDefault(require("./button"));
-
 var _circle = require("./buttons/circle");
-
 var _polygon = require("./buttons/polygon");
-
 var _rectangle = require("./buttons/rectangle");
-
+var _shapes = require("./shapes");
 var _hotspotDrawable = _interopRequireDefault(require("./hotspot-drawable"));
-
 var _uploadControl = _interopRequireDefault(require("./upload-control"));
-
 var _utils = require("./utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var isImage = function isImage(file) {
-  var imageType = /image.*/;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const BaseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(1.5),
+  marginBottom: theme.spacing(2.5)
+}));
+const BoxContainer = (0, _styles.styled)('div')(({
+  theme,
+  hasErrors,
+  dropzoneActive
+}) => ({
+  border: '1px solid #E0E1E6',
+  borderRadius: '5px',
+  ...(dropzoneActive && {
+    border: '1px solid #0032C2'
+  }),
+  ...(hasErrors && !dropzoneActive && {
+    border: `1px solid ${theme.palette.error.main}`
+  })
+}));
+const ButtonShape = (0, _styles.styled)('div')({
+  marginRight: '5px',
+  '&:hover': {
+    cursor: 'pointer'
+  }
+});
+const CenteredContainer = (0, _styles.styled)('div')({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+});
+const DrawableHeight = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  minHeight: 350,
+  paddingBottom: theme.spacing(5),
+  paddingRight: theme.spacing(5)
+}));
+const Toolbar = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  backgroundColor: '#FFF',
+  borderBottom: '1px solid #E0E1E6',
+  borderTopLeftRadius: '5px',
+  borderTopRightRadius: '5px',
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: theme.spacing(1)
+}));
+const ReplaceSection = (0, _styles.styled)('div')({
+  marginRight: 'auto'
+});
+const isImage = file => {
+  const imageType = /image.*/;
   return file.type.match(imageType);
 };
-
-var Container = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(Container, _Component);
-
-  var _super = _createSuper(Container);
-
-  function Container(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Container);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFileRead", function (file) {
+class Container extends _react.Component {
+  static getDerivedStateFromProps(nextProps, prevState) {
+    // always transform shapes map into shapes array at this level
+    return {
+      ...prevState,
+      shapes: (0, _utils.getAllShapes)(nextProps.shapes)
+    };
+  }
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "handleFileRead", file => {
       if (file instanceof Blob) {
-        var _this$props = _this.props,
-            onImageUpload = _this$props.onImageUpload,
-            insertImage = _this$props.insertImage;
-        var reader = new FileReader();
-
-        reader.onloadend = function () {
-          return onImageUpload(reader.result);
-        };
-
+        const {
+          onImageUpload,
+          insertImage
+        } = this.props;
+        const reader = new FileReader();
+        reader.onloadend = () => onImageUpload(reader.result);
         reader.readAsDataURL(file);
-
         if (insertImage) {
-          insertImage(_objectSpread(_objectSpread({}, _this.fakeImageHandler), {}, {
-            getChosenFile: function getChosenFile() {
-              return file;
-            },
+          insertImage({
+            ...this.fakeImageHandler,
+            getChosenFile: () => file,
             isPasted: true
-          }));
+          });
         }
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "enableDropzone", function () {
-      return _this.setState({
-        dropzoneActive: true
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "disableDropzone", function () {
-      return _this.setState({
-        dropzoneActive: false
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnPaste", function (e) {
-      var files = e.clipboardData.files;
-
+    (0, _defineProperty2.default)(this, "enableDropzone", () => this.setState({
+      dropzoneActive: true
+    }));
+    (0, _defineProperty2.default)(this, "disableDropzone", () => this.setState({
+      dropzoneActive: false
+    }));
+    (0, _defineProperty2.default)(this, "handleOnPaste", e => {
+      const {
+        files
+      } = e.clipboardData;
       if (files && isImage(files[0])) {
-        _this.handleFileRead(files[0]);
+        this.handleFileRead(files[0]);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDrop", function (e) {
+    (0, _defineProperty2.default)(this, "handleOnDrop", e => {
       e.preventDefault();
-      var _e$dataTransfer = e.dataTransfer,
-          items = _e$dataTransfer.items,
-          files = _e$dataTransfer.files;
-
+      const {
+        items,
+        files
+      } = e.dataTransfer;
       if (items && items[0].kind === 'file') {
-        var file = items[0].getAsFile();
-
+        const file = items[0].getAsFile();
         if (isImage(file)) {
-          _this.handleFileRead(file);
+          this.handleFileRead(file);
         }
       } else if (isImage(files[0])) {
-        _this.handleFileRead(files[0]);
+        this.handleFileRead(files[0]);
       }
-
-      _this.disableDropzone();
+      this.disableDropzone();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragOver", function (e) {
+    (0, _defineProperty2.default)(this, "handleOnDragOver", e => {
       e.preventDefault();
-      var dropzoneActive = _this.state.dropzoneActive;
-
+      const {
+        dropzoneActive
+      } = this.state;
       if (!dropzoneActive) {
-        _this.enableDropzone();
+        this.enableDropzone();
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragExit", function (e) {
+    (0, _defineProperty2.default)(this, "handleOnDragExit", e => {
       e.preventDefault();
-
-      _this.disableDropzone();
+      this.disableDropzone();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onUpdateShapes", function (newShapes) {
-      var onUpdateShapes = _this.props.onUpdateShapes;
-
-      _this.setState({
+    (0, _defineProperty2.default)(this, "onUpdateShapes", newShapes => {
+      const {
+        onUpdateShapes
+      } = this.props;
+      this.setState({
         shapes: newShapes
-      }, // always transform shapes array back into shapes map when saving changes
-      function () {
-        return onUpdateShapes((0, _utils.groupShapes)(newShapes));
-      });
+      },
+      // always transform shapes array back into shapes map when saving changes
+      () => onUpdateShapes((0, _utils.groupShapes)(newShapes)));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDeleteShape", function (id) {
-      var shapes = _this.state.shapes;
-
+    (0, _defineProperty2.default)(this, "onDeleteShape", id => {
+      const {
+        shapes
+      } = this.state;
       if (shapes && shapes.length) {
         // filter the deleted shape out
-        var newShapes = shapes.filter(function (shape) {
-          return shape.id !== id;
-        });
-
-        _this.onUpdateShapes(newShapes);
+        let newShapes = shapes.filter(shape => shape.id !== id);
+        this.onUpdateShapes(newShapes);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClearAll", function () {
-      return _this.onUpdateShapes([]);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleEnableDrag", function () {
-      return _this.setState({
-        dragEnabled: true
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDisableDrag", function () {
-      return _this.setState({
-        dragEnabled: false
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleInputClick", function () {
-      var insertImage = _this.props.insertImage;
-
+    (0, _defineProperty2.default)(this, "handleClearAll", () => this.onUpdateShapes([]));
+    (0, _defineProperty2.default)(this, "handleEnableDrag", () => this.setState({
+      dragEnabled: true
+    }));
+    (0, _defineProperty2.default)(this, "handleDisableDrag", () => this.setState({
+      dragEnabled: false
+    }));
+    (0, _defineProperty2.default)(this, "handleInputClick", () => {
+      const {
+        insertImage
+      } = this.props;
       if (insertImage) {
-        insertImage(_this.fakeImageHandler);
+        insertImage(this.fakeImageHandler);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFinishDrawing", function () {
+    (0, _defineProperty2.default)(this, "handleFinishDrawing", () => {
       // Explicitly end the current shape drawing session
       // This would cause the finalizeCreation method to be called in the HotspotDrawable component
-      _this.setState({
+      this.setState({
         selectedShape: _shapes.SUPPORTED_SHAPES.NONE
       });
     });
-    _this.state = {
+    this.state = {
       dragEnabled: true,
       // always transform shapes map into shapes array at this level
       shapes: (0, _utils.getAllShapes)(props.shapes),
       selectedShape: _shapes.SUPPORTED_SHAPES.NONE
     };
-    _this.fakeImageHandler = {
-      cancel: function cancel() {},
-      done: function done(a, url) {
-        return _this.props.onImageUpload(url);
-      },
-      fileChosen: function fileChosen() {},
-      progress: function progress() {}
+    this.fakeImageHandler = {
+      cancel: () => {},
+      done: (a, url) => this.props.onImageUpload(url),
+      fileChosen: () => {},
+      progress: () => {}
     };
-    return _this;
   }
-
-  (0, _createClass2["default"])(Container, [{
-    key: "render",
-    value: function render() {
-      var _classNames,
-          _this2 = this;
-
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          dimensions = _this$props2.dimensions,
-          hasErrors = _this$props2.hasErrors,
-          hotspotColor = _this$props2.hotspotColor,
-          imageUrl = _this$props2.imageUrl,
-          multipleCorrect = _this$props2.multipleCorrect,
-          onUpdateImageDimension = _this$props2.onUpdateImageDimension,
-          outlineColor = _this$props2.outlineColor,
-          strokeWidth = _this$props2.strokeWidth,
-          preserveAspectRatioEnabled = _this$props2.preserveAspectRatioEnabled,
-          hoverOutlineColor = _this$props2.hoverOutlineColor,
-          selectedHotspotColor = _this$props2.selectedHotspotColor;
-      var _this$state = this.state,
-          dropzoneActive = _this$state.dropzoneActive,
-          dragEnabled = _this$state.dragEnabled;
-      var _this$state2 = this.state,
-          shapes = _this$state2.shapes,
-          selectedShape = _this$state2.selectedShape;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.base
-      }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-        className: (0, _classnames["default"])(classes.box, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.boxError, hasErrors && !dropzoneActive), (0, _defineProperty2["default"])(_classNames, classes.boxActive, dropzoneActive), _classNames))
-      }, dragEnabled ? {
-        onDragExit: this.handleOnDragExit,
-        onDragLeave: this.handleOnDragExit,
-        onDragOver: this.handleOnDragOver,
-        onDrop: this.handleOnDrop,
-        onPaste: this.handleOnPaste
-      } : {}), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.toolbar
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        onClick: function onClick() {
-          return _this2.setState({
-            selectedShape: selectedShape === _shapes.SUPPORTED_SHAPES.RECTANGLE ? _shapes.SUPPORTED_SHAPES.NONE : _shapes.SUPPORTED_SHAPES.RECTANGLE
-          });
-        },
-        className: classes.buttonShape
-      }, /*#__PURE__*/_react["default"].createElement(_rectangle.RectangleButton, {
-        isActive: selectedShape === _shapes.SUPPORTED_SHAPES.RECTANGLE
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        onClick: function onClick() {
-          return _this2.setState({
-            selectedShape: selectedShape === _shapes.SUPPORTED_SHAPES.POLYGON ? _shapes.SUPPORTED_SHAPES.NONE : _shapes.SUPPORTED_SHAPES.POLYGON
-          });
-        },
-        className: classes.buttonShape
-      }, /*#__PURE__*/_react["default"].createElement(_polygon.PolygonButton, {
-        isActive: selectedShape === _shapes.SUPPORTED_SHAPES.POLYGON
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        onClick: function onClick() {
-          return _this2.setState({
-            selectedShape: selectedShape === _shapes.SUPPORTED_SHAPES.CIRCLE ? _shapes.SUPPORTED_SHAPES.NONE : _shapes.SUPPORTED_SHAPES.CIRCLE
-          });
-        },
-        className: classes.buttonShape
-      }, /*#__PURE__*/_react["default"].createElement(_circle.CircleButton, {
-        isActive: selectedShape === _shapes.SUPPORTED_SHAPES.CIRCLE
-      })), imageUrl && /*#__PURE__*/_react["default"].createElement(_uploadControl["default"], {
-        classNameButton: classes.replaceButton,
-        classNameSection: classes.replaceSection,
-        label: "Replace Image",
-        onInputClick: this.handleInputClick,
-        setRef: function setRef(ref) {
-          _this2.input = ref;
-        }
-      }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
-        disabled: !(shapes && shapes.length),
-        onClick: this.handleClearAll,
-        label: "Clear all"
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(_ref) {
-          _this2.imageSection = _ref;
-        },
-        className: classes.drawableHeight
-      }, imageUrl ? /*#__PURE__*/_react["default"].createElement(_hotspotDrawable["default"], {
-        dimensions: dimensions,
-        disableDrag: this.handleDisableDrag,
-        enableDrag: this.handleEnableDrag,
-        shapeType: this.state.selectedShape,
-        handleFinishDrawing: this.handleFinishDrawing,
-        imageUrl: imageUrl,
-        hotspotColor: hotspotColor,
-        selectedHotspotColor: selectedHotspotColor,
-        hoverOutlineColor: hoverOutlineColor,
-        multipleCorrect: multipleCorrect,
-        onUpdateImageDimension: onUpdateImageDimension,
-        onUpdateShapes: this.onUpdateShapes,
-        onDeleteShape: this.onDeleteShape,
-        outlineColor: outlineColor,
-        shapes: shapes,
-        strokeWidth: strokeWidth,
-        preserveAspectRatioEnabled: preserveAspectRatioEnabled
-      }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.drawableHeight, classes.centered)
-      }, /*#__PURE__*/_react["default"].createElement("label", null, "Drag and drop or upload image from computer"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_uploadControl["default"], {
-        label: "Upload Image",
-        onInputClick: this.handleInputClick,
-        setRef: function setRef(ref) {
-          _this2.input = ref;
-        }
-      })))));
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      // always transform shapes map into shapes array at this level
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        shapes: (0, _utils.getAllShapes)(nextProps.shapes)
-      });
-    }
-  }]);
-  return Container;
-}(_react.Component);
-
-exports.Container = Container;
-
-var styles = function styles(theme) {
-  return {
-    buttonShape: {
-      marginRight: '5px',
-      '&:hover': {
-        cursor: 'pointer'
+  render() {
+    const {
+      dimensions,
+      hasErrors,
+      hotspotColor,
+      imageUrl,
+      multipleCorrect,
+      onUpdateImageDimension,
+      outlineColor,
+      strokeWidth,
+      preserveAspectRatioEnabled,
+      hoverOutlineColor,
+      selectedHotspotColor
+    } = this.props;
+    const {
+      dropzoneActive,
+      dragEnabled
+    } = this.state;
+    const {
+      shapes,
+      selectedShape
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(BaseContainer, null, /*#__PURE__*/_react.default.createElement(BoxContainer, (0, _extends2.default)({
+      hasErrors: hasErrors,
+      dropzoneActive: dropzoneActive
+    }, dragEnabled ? {
+      onDragExit: this.handleOnDragExit,
+      onDragLeave: this.handleOnDragExit,
+      onDragOver: this.handleOnDragOver,
+      onDrop: this.handleOnDrop,
+      onPaste: this.handleOnPaste
+    } : {}), /*#__PURE__*/_react.default.createElement(Toolbar, null, /*#__PURE__*/_react.default.createElement(ButtonShape, {
+      onClick: () => this.setState({
+        selectedShape: selectedShape === _shapes.SUPPORTED_SHAPES.RECTANGLE ? _shapes.SUPPORTED_SHAPES.NONE : _shapes.SUPPORTED_SHAPES.RECTANGLE
+      })
+    }, /*#__PURE__*/_react.default.createElement(_rectangle.RectangleButton, {
+      isActive: selectedShape === _shapes.SUPPORTED_SHAPES.RECTANGLE
+    })), /*#__PURE__*/_react.default.createElement(ButtonShape, {
+      onClick: () => this.setState({
+        selectedShape: selectedShape === _shapes.SUPPORTED_SHAPES.POLYGON ? _shapes.SUPPORTED_SHAPES.NONE : _shapes.SUPPORTED_SHAPES.POLYGON
+      })
+    }, /*#__PURE__*/_react.default.createElement(_polygon.PolygonButton, {
+      isActive: selectedShape === _shapes.SUPPORTED_SHAPES.POLYGON
+    })), /*#__PURE__*/_react.default.createElement(ButtonShape, {
+      onClick: () => this.setState({
+        selectedShape: selectedShape === _shapes.SUPPORTED_SHAPES.CIRCLE ? _shapes.SUPPORTED_SHAPES.NONE : _shapes.SUPPORTED_SHAPES.CIRCLE
+      })
+    }, /*#__PURE__*/_react.default.createElement(_circle.CircleButton, {
+      isActive: selectedShape === _shapes.SUPPORTED_SHAPES.CIRCLE
+    })), imageUrl && /*#__PURE__*/_react.default.createElement(ReplaceSection, null, /*#__PURE__*/_react.default.createElement(_uploadControl.default, {
+      label: "Replace Image",
+      onInputClick: this.handleInputClick,
+      setRef: ref => {
+        this.input = ref;
       }
-    },
-    base: {
-      marginTop: theme.spacing.unit * 1.5,
-      marginBottom: theme.spacing.unit * 2.5
-    },
-    box: {
-      border: '1px solid #E0E1E6',
-      borderRadius: '5px'
-    },
-    boxActive: {
-      border: '1px solid #0032C2'
-    },
-    boxError: {
-      border: "1px solid ".concat(theme.palette.error.main)
-    },
-    centered: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center'
-    },
-    drawableHeight: {
-      minHeight: 350,
-      paddingBottom: theme.spacing.unit * 5,
-      paddingRight: theme.spacing.unit * 5
-    },
-    icon: {
-      '&:hover': {
-        color: '#333131',
-        cursor: 'help'
-      },
-      color: '#C1C1C1'
-    },
-    replaceButton: {
-      marginLeft: 0
-    },
-    replaceSection: {
-      marginRight: 'auto'
-    },
-    toolbar: {
-      backgroundColor: '#FFF',
-      borderBottom: '1px solid #E0E1E6',
-      borderTopLeftRadius: '5px',
-      borderTopRightRadius: '5px',
-      display: 'flex',
-      justifyContent: 'flex-end',
-      padding: theme.spacing.unit
-    }
-  };
-};
-
+    })), /*#__PURE__*/_react.default.createElement(_button.default, {
+      disabled: !(shapes && shapes.length),
+      onClick: this.handleClearAll,
+      label: "Clear all"
+    })), /*#__PURE__*/_react.default.createElement(DrawableHeight, {
+      ref: ref => {
+        this.imageSection = ref;
+      }
+    }, imageUrl ? /*#__PURE__*/_react.default.createElement(_hotspotDrawable.default, {
+      dimensions: dimensions,
+      disableDrag: this.handleDisableDrag,
+      enableDrag: this.handleEnableDrag,
+      shapeType: this.state.selectedShape,
+      handleFinishDrawing: this.handleFinishDrawing,
+      imageUrl: imageUrl,
+      hotspotColor: hotspotColor,
+      selectedHotspotColor: selectedHotspotColor,
+      hoverOutlineColor: hoverOutlineColor,
+      multipleCorrect: multipleCorrect,
+      onUpdateImageDimension: onUpdateImageDimension,
+      onUpdateShapes: this.onUpdateShapes,
+      onDeleteShape: this.onDeleteShape,
+      outlineColor: outlineColor,
+      shapes: shapes,
+      strokeWidth: strokeWidth,
+      preserveAspectRatioEnabled: preserveAspectRatioEnabled
+    }) : /*#__PURE__*/_react.default.createElement(CenteredContainer, null, /*#__PURE__*/_react.default.createElement("label", null, "Drag and drop or upload image from computer"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_uploadControl.default, {
+      label: "Upload Image",
+      onInputClick: this.handleInputClick,
+      setRef: ref => {
+        this.input = ref;
+      }
+    })))));
+  }
+}
+exports.Container = Container;
 Container.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  dimensions: _propTypes["default"].object.isRequired,
-  imageUrl: _propTypes["default"].string.isRequired,
-  hotspotColor: _propTypes["default"].string.isRequired,
-  selectedHotspotColor: _propTypes["default"].string,
-  hoverOutlineColor: _propTypes["default"].string,
-  multipleCorrect: _propTypes["default"].bool.isRequired,
-  onImageUpload: _propTypes["default"].func.isRequired,
-  onUpdateImageDimension: _propTypes["default"].func.isRequired,
-  insertImage: _propTypes["default"].func,
-  onUpdateShapes: _propTypes["default"].func.isRequired,
-  outlineColor: _propTypes["default"].string.isRequired,
-  shapes: _propTypes["default"].shape({
-    rectangles: _propTypes["default"].array,
-    polygons: _propTypes["default"].array
+  dimensions: _propTypes.default.object.isRequired,
+  imageUrl: _propTypes.default.string.isRequired,
+  hotspotColor: _propTypes.default.string.isRequired,
+  selectedHotspotColor: _propTypes.default.string,
+  hoverOutlineColor: _propTypes.default.string,
+  multipleCorrect: _propTypes.default.bool.isRequired,
+  onImageUpload: _propTypes.default.func.isRequired,
+  onUpdateImageDimension: _propTypes.default.func.isRequired,
+  insertImage: _propTypes.default.func,
+  onUpdateShapes: _propTypes.default.func.isRequired,
+  outlineColor: _propTypes.default.string.isRequired,
+  shapes: _propTypes.default.shape({
+    rectangles: _propTypes.default.array,
+    polygons: _propTypes.default.array
   }).isRequired,
-  strokeWidth: _propTypes["default"].number,
-  preserveAspectRatioEnabled: _propTypes["default"].bool,
-  hasErrors: _propTypes["default"].bool
+  strokeWidth: _propTypes.default.number,
+  preserveAspectRatioEnabled: _propTypes.default.bool,
+  hasErrors: _propTypes.default.bool
 };
 Container.defaultProps = {
   strokeWidth: 5
 };
-
-var _default = (0, _index.withStyles)(styles)(Container);
-
-exports["default"] = _default;
+var _default = exports.default = Container;
 //# sourceMappingURL=hotspot-container.js.map