@pie-element/hotspot 6.15.2-next.1 → 6.15.2-next.2

package/configure/lib/hotspot-container.js

@@ -0,0 +1,417 @@
+"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;
+
+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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _button = _interopRequireDefault(require("./button"));
+
+var _circle = require("./buttons/circle");
+
+var _polygon = require("./buttons/polygon");
+
+var _rectangle = require("./buttons/rectangle");
+
+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.*/;
+  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) {
+      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);
+        };
+
+        reader.readAsDataURL(file);
+
+        if (insertImage) {
+          insertImage(_objectSpread(_objectSpread({}, _this.fakeImageHandler), {}, {
+            getChosenFile: function getChosenFile() {
+              return 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;
+
+      if (files && isImage(files[0])) {
+        _this.handleFileRead(files[0]);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDrop", function (e) {
+      e.preventDefault();
+      var _e$dataTransfer = e.dataTransfer,
+          items = _e$dataTransfer.items,
+          files = _e$dataTransfer.files;
+
+      if (items && items[0].kind === 'file') {
+        var file = items[0].getAsFile();
+
+        if (isImage(file)) {
+          _this.handleFileRead(file);
+        }
+      } else if (isImage(files[0])) {
+        _this.handleFileRead(files[0]);
+      }
+
+      _this.disableDropzone();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragOver", function (e) {
+      e.preventDefault();
+      var dropzoneActive = _this.state.dropzoneActive;
+
+      if (!dropzoneActive) {
+        _this.enableDropzone();
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragExit", function (e) {
+      e.preventDefault();
+
+      _this.disableDropzone();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onUpdateShapes", function (newShapes) {
+      var onUpdateShapes = _this.props.onUpdateShapes;
+
+      _this.setState({
+        shapes: newShapes
+      }, // always transform shapes array back into shapes map when saving changes
+      function () {
+        return onUpdateShapes((0, _utils.groupShapes)(newShapes));
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDeleteShape", function (id) {
+      var shapes = _this.state.shapes;
+
+      if (shapes && shapes.length) {
+        // filter the deleted shape out
+        var newShapes = shapes.filter(function (shape) {
+          return 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;
+
+      if (insertImage) {
+        insertImage(_this.fakeImageHandler);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFinishDrawing", function () {
+      // Explicitly end the current shape drawing session
+      // This would cause the finalizeCreation method to be called in the HotspotDrawable component
+      _this.setState({
+        selectedShape: 'none'
+      });
+    });
+    _this.state = {
+      dragEnabled: true,
+      // always transform shapes map into shapes array at this level
+      shapes: (0, _utils.getAllShapes)(props.shapes),
+      selectedShape: 'none'
+    };
+    _this.fakeImageHandler = {
+      cancel: function cancel() {},
+      done: function done(a, url) {
+        return _this.props.onImageUpload(url);
+      },
+      fileChosen: function fileChosen() {},
+      progress: function 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;
+      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 === 'rectangle' ? 'none' : 'rectangle'
+          });
+        },
+        className: classes.buttonShape
+      }, /*#__PURE__*/_react["default"].createElement(_rectangle.RectangleButton, {
+        isActive: selectedShape === 'rectangle'
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        onClick: function onClick() {
+          return _this2.setState({
+            selectedShape: selectedShape === 'polygon' ? 'none' : 'polygon'
+          });
+        },
+        className: classes.buttonShape
+      }, /*#__PURE__*/_react["default"].createElement(_polygon.PolygonButton, {
+        isActive: selectedShape === 'polygon'
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        onClick: function onClick() {
+          return _this2.setState({
+            selectedShape: selectedShape === 'circle' ? 'none' : 'circle'
+          });
+        },
+        className: classes.buttonShape
+      }, /*#__PURE__*/_react["default"].createElement(_circle.CircleButton, {
+        isActive: selectedShape === '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,
+        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'
+      }
+    },
+    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
+    }
+  };
+};
+
+Container.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  dimensions: _propTypes["default"].object.isRequired,
+  imageUrl: _propTypes["default"].string.isRequired,
+  hotspotColor: _propTypes["default"].string.isRequired,
+  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
+};
+Container.defaultProps = {
+  strokeWidth: 5
+};
+
+var _default = (0, _index.withStyles)(styles)(Container);
+
+exports["default"] = _default;
+//# sourceMappingURL=hotspot-container.js.map

package/configure/lib/hotspot-container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","insertImage","reader","FileReader","onloadend","result","readAsDataURL","fakeImageHandler","getChosenFile","isPasted","setState","dropzoneActive","e","files","clipboardData","handleFileRead","preventDefault","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","id","length","filter","shape","dragEnabled","selectedShape","cancel","done","a","url","fileChosen","progress","classes","dimensions","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","buttonShape","replaceButton","replaceSection","handleInputClick","ref","input","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","handleFinishDrawing","onDeleteShape","centered","nextProps","prevState","Component","styles","theme","marginRight","cursor","marginTop","spacing","unit","marginBottom","border","borderRadius","palette","error","main","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","icon","color","marginLeft","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","propTypes","PropTypes","object","isRequired","string","bool","func","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import { withStyles } from '@material-ui/core/styles/index';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport Button from './button';\nimport { CircleButton } from './buttons/circle';\nimport { PolygonButton } from './buttons/polygon';\nimport { RectangleButton } from './buttons/rectangle';\n\nimport Drawable from './hotspot-drawable';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n      selectedShape: 'none',\n    };\n    this.fakeImageHandler = {\n      cancel: () => {},\n      done: (a, url) => this.props.onImageUpload(url),\n      fileChosen: () => {},\n      progress: () => {},\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload, insertImage } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n\n      if (insertImage) {\n        insertImage({\n          ...this.fakeImageHandler,\n          getChosenFile: () => file,\n          isPasted: true,\n        });\n      }\n    }\n  };\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes)),\n    );\n  };\n\n  onDeleteShape = (id) => {\n    const { shapes } = this.state;\n    if (shapes && shapes.length) {\n      // filter the deleted shape out\n      let newShapes = shapes.filter((shape) => shape.id !== id);\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n  handleInputClick = () => {\n    const { insertImage } = this.props;\n\n    if (insertImage) {\n      insertImage(this.fakeImageHandler);\n    }\n  };\n\n  handleFinishDrawing = () => {\n    // Explicitly end the current shape drawing session\n    // This would cause the finalizeCreation method to be called in the HotspotDrawable component\n    this.setState({ selectedShape: 'none' });\n  };\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hasErrors,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n    } = this.props;\n    const { dropzoneActive, dragEnabled } = this.state;\n    const { shapes, selectedShape } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={classNames(classes.box, {\n            [classes.boxError]: hasErrors && !dropzoneActive,\n            [classes.boxActive]: dropzoneActive,\n          })}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n                onPaste: this.handleOnPaste,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'rectangle' ? 'none' : 'rectangle' })}\n              className={classes.buttonShape}\n            >\n              <RectangleButton isActive={selectedShape === 'rectangle'} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'polygon' ? 'none' : 'polygon' })}\n              className={classes.buttonShape}\n            >\n              <PolygonButton isActive={selectedShape === 'polygon'} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'circle' ? 'none' : 'circle' })}\n              className={classes.buttonShape}\n            >\n              <CircleButton isActive={selectedShape === 'circle'} />\n            </div>\n\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\" />\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                shapeType={this.state.selectedShape}\n                handleFinishDrawing={this.handleFinishDrawing}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                onDeleteShape={this.onDeleteShape}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={classNames(classes.drawableHeight, classes.centered)}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  buttonShape: {\n    marginRight: '5px',\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n  base: {\n    marginTop: theme.spacing.unit * 1.5,\n    marginBottom: theme.spacing.unit * 2.5,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  boxError: {\n    border: `1px solid ${theme.palette.error.main}`,\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: theme.spacing.unit * 5,\n    paddingRight: theme.spacing.unit * 5,\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#FFF',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: theme.spacing.unit,\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  insertImage: PropTypes.func,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n  hasErrors: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}