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

package/configure/lib/hotspot-drawable.js

@@ -0,0 +1,548 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Drawable = 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 _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactKonva = require("react-konva");
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _index = require("@material-ui/core/styles/index");
+
+var _hotspotRectangle = _interopRequireDefault(require("./hotspot-rectangle"));
+
+var _hotspotPolygon = _interopRequireDefault(require("./hotspot-polygon"));
+
+var _hotspotCircle = _interopRequireDefault(require("./hotspot-circle"));
+
+var _utils = require("./utils");
+
+var _rectagle = _interopRequireDefault(require("./shapes/rectagle"));
+
+var _circle = _interopRequireDefault(require("./shapes/circle"));
+
+var _polygon = _interopRequireDefault(require("./shapes/polygon"));
+
+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 IMAGE_MAX_WIDTH = 800;
+
+var Drawable = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Drawable, _React$Component);
+
+  var _super = _createSuper(Drawable);
+
+  function Drawable(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Drawable);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnMouseDown", function (e) {
+      var _this$props = _this.props,
+          shapeType = _this$props.shapeType,
+          onUpdateShapes = _this$props.onUpdateShapes,
+          shapes = _this$props.shapes;
+      var newState, newShapeId; // Ensure that the click originated from the expected element
+
+      if (e.target !== e.currentTarget) {
+        return;
+      }
+
+      switch (shapeType) {
+        case 'rectangle':
+          newState = _rectagle["default"].create(shapes, e);
+          break;
+
+        case 'circle':
+          newState = _circle["default"].create(shapes, e);
+          break;
+
+        case 'polygon':
+          newShapeId = _this.state.isDrawingShapeId;
+
+          if (newShapeId) {
+            // If a polygon is in progress, add a new point
+            var _shapes = _this.addPolygonPoint(e);
+
+            newState = {
+              isDrawing: true,
+              isDrawingShapeId: newShapeId,
+              shapes: _shapes
+            };
+          } else {
+            // Else start a new one
+            newState = _polygon["default"].create(shapes, e);
+          }
+
+          break;
+
+        default:
+          console.error("Unsupported shape type: ".concat(shapeType));
+          return;
+      }
+
+      _this.setState(_objectSpread({}, newState));
+
+      onUpdateShapes(newState.shapes);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnMouseUp", function () {
+      var _this$props2 = _this.props,
+          shapeType = _this$props2.shapeType,
+          onUpdateShapes = _this$props2.onUpdateShapes;
+      var newState;
+
+      if (shapeType === 'polygon') {
+        return;
+      }
+
+      switch (shapeType) {
+        case 'rectangle':
+          newState = _rectagle["default"].finalizeCreation(_this.state, _this.props);
+          break;
+
+        case 'circle':
+          newState = _circle["default"].finalizeCreation(_this.state, _this.props);
+          break;
+
+        default:
+          console.error("Unsupported shape type: ".concat(shapeType));
+          return;
+      }
+
+      _this.setState(_objectSpread(_objectSpread({}, newState), {}, {
+        isDrawing: false
+      }));
+
+      onUpdateShapes(newState.shapes);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseMove", function (e) {
+      var _this$props3 = _this.props,
+          shapeType = _this$props3.shapeType,
+          onUpdateShapes = _this$props3.onUpdateShapes,
+          shapes = _this$props3.shapes;
+      var newState;
+
+      if (_this.state.isDrawing) {
+        switch (shapeType) {
+          case 'rectangle':
+            newState = _rectagle["default"].handleMouseMove(_this.state, e);
+            break;
+
+          case 'circle':
+            newState = _circle["default"].handleMouseMove(_this.state, e);
+            break;
+
+          case 'polygon':
+            newState = _polygon["default"].handleMouseMove(_this.state, e);
+            break;
+
+          default:
+            console.error("Unsupported shape type: ".concat(shapeType));
+            return;
+        }
+
+        _this.setState(newState);
+
+        onUpdateShapes(newState.shapes);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnMouseOutOrLeave", function (e) {
+      if (_this.state.isDrawing) {
+        _this.handleOnMouseUp(e);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragEnd", function (id, updatedProps) {
+      var _this$props4 = _this.props,
+          shapes = _this$props4.shapes,
+          onUpdateShapes = _this$props4.onUpdateShapes;
+      var newShapes = shapes.map(function (shape) {
+        if (shape.id === id) {
+          return _objectSpread(_objectSpread({}, shape), updatedProps);
+        }
+
+        return shape;
+      });
+      onUpdateShapes((0, _cloneDeep["default"])(newShapes));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnSetAsCorrect", function (shape) {
+      var id = shape.id;
+      var _this$props5 = _this.props,
+          multipleCorrect = _this$props5.multipleCorrect,
+          shapes = _this$props5.shapes,
+          onUpdateShapes = _this$props5.onUpdateShapes;
+      var newShapes = [];
+
+      if (multipleCorrect) {
+        newShapes = shapes.map(function (shape) {
+          if (shape.id === id) {
+            shape.correct = !shape.correct;
+          }
+
+          return shape;
+        });
+      } else {
+        newShapes = shapes.map(function (shape) {
+          shape.correct = shape.id === id;
+          return shape;
+        });
+      }
+
+      onUpdateShapes((0, _cloneDeep["default"])(newShapes));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnImageLoad", function (_ref) {
+      var target = _ref.target;
+      var onUpdateImageDimension = _this.props.onUpdateImageDimension;
+      var resizeHandle = _this.resize;
+      var elementStyle = getComputedStyle(target);
+      var newHeight = parseFloat(elementStyle.height);
+      var newWidth = parseFloat(elementStyle.width);
+      var aspectWidth = newWidth / IMAGE_MAX_WIDTH;
+      var dimensions = newWidth > IMAGE_MAX_WIDTH ? {
+        height: newHeight / aspectWidth,
+        width: IMAGE_MAX_WIDTH
+      } : {
+        height: newHeight,
+        width: newWidth
+      };
+
+      _this.setState({
+        dimensions: dimensions
+      }, function () {
+        return onUpdateImageDimension(dimensions);
+      });
+
+      resizeHandle.addEventListener('mousedown', _this.initialiseResize, false);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "initialiseResize", function () {
+      window.addEventListener('mousemove', _this.startResizing, false);
+      window.addEventListener('mouseup', _this.stopResizing, false);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startResizing", function (e) {
+      var bounds = e.target.getBoundingClientRect();
+      var box = _this.image;
+      var _this$props6 = _this.props,
+          disableDrag = _this$props6.disableDrag,
+          preserveAspectRatioEnabled = _this$props6.preserveAspectRatioEnabled,
+          dimensions = _this$props6.dimensions,
+          shapes = _this$props6.shapes; // todo previously we had state.dimensions, is it needed?
+
+      var _updateImageDimension = (0, _utils.updateImageDimensions)(dimensions, {
+        width: e.clientX - bounds.left,
+        height: e.clientY - bounds.top
+      }, preserveAspectRatioEnabled),
+          width = _updateImageDimension.width,
+          height = _updateImageDimension.height;
+
+      var resizeValid = _this.checkIfResizeValid(width, height);
+
+      var hasMinimumWidth = width > 150 && height > 150;
+
+      if (resizeValid && hasMinimumWidth && box) {
+        box.style.width = "".concat(width, "px");
+        box.style.height = "".concat(height, "px");
+
+        _this.setState({
+          resizing: true,
+          dimensions: {
+            height: height,
+            width: width
+          },
+          stateShapes: (0, _utils.getUpdatedShapes)(dimensions, {
+            width: width,
+            height: height
+          }, shapes)
+        });
+      }
+
+      disableDrag();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stopResizing", function () {
+      var _this$props7 = _this.props,
+          enableDrag = _this$props7.enableDrag,
+          onUpdateImageDimension = _this$props7.onUpdateImageDimension,
+          onUpdateShapes = _this$props7.onUpdateShapes;
+      var _this$state = _this.state,
+          dimensions = _this$state.dimensions,
+          stateShapes = _this$state.stateShapes;
+      enableDrag();
+
+      if (stateShapes) {
+        onUpdateShapes((0, _cloneDeep["default"])(stateShapes));
+      }
+
+      onUpdateImageDimension(dimensions);
+      window.removeEventListener('mousemove', _this.startResizing, false);
+      window.removeEventListener('mouseup', _this.stopResizing, false);
+
+      _this.setState({
+        resizing: false,
+        stateShapes: false
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteShape", function (id) {
+      _this.setState({
+        isDrawing: false,
+        isDrawingShapeId: undefined
+      });
+
+      _this.props.onDeleteShape(id);
+    });
+    _this.state = {
+      isDrawing: false,
+      stateShapes: false,
+      resizing: false,
+      temporaryPolygon: null,
+      shapes: [],
+      dimensions: {
+        height: 0,
+        width: 0
+      }
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Drawable, [{
+    key: "addPolygonPoint",
+    value: function addPolygonPoint(e) {
+      var _this2 = this;
+
+      var _PolygonShape$addPoin = _polygon["default"].addPoint(this.state, e, function (newShapes) {
+        _this2.setState({
+          isDrawing: false,
+          shapes: newShapes,
+          isDrawingShapeId: undefined
+        });
+
+        _this2.props.onUpdateShapes(newShapes);
+      }),
+          shapes = _PolygonShape$addPoin.shapes;
+
+      return shapes;
+    }
+  }, {
+    key: "checkIfResizeValid",
+    value: function checkIfResizeValid(x, y) {
+      var shapes = this.state.shapes;
+      var drawable = true; // Do not allow resizing over the hotspots
+
+      shapes && shapes.forEach(function (shape) {
+        var right = shape.x + shape.width + 5;
+        var bottom = shape.y + shape.height + 5;
+
+        if (x <= right || y <= bottom) {
+          drawable = false;
+        }
+      });
+      return drawable;
+    }
+  }, {
+    key: "render",
+    value: /// end of handling Image section
+    function render() {
+      var _this3 = this;
+
+      var _this$props8 = this.props,
+          classes = _this$props8.classes,
+          imageUrl = _this$props8.imageUrl,
+          _this$props8$dimensio = _this$props8.dimensions,
+          height = _this$props8$dimensio.height,
+          width = _this$props8$dimensio.width,
+          hotspotColor = _this$props8.hotspotColor,
+          outlineColor = _this$props8.outlineColor,
+          shapes = _this$props8.shapes,
+          strokeWidth = _this$props8.strokeWidth,
+          onDeleteShape = _this$props8.onDeleteShape;
+      var _this$state2 = this.state,
+          stateShapes = _this$state2.stateShapes,
+          isDrawing = _this$state2.isDrawing,
+          _this$state2$dimensio = _this$state2.dimensions,
+          heightFromState = _this$state2$dimensio.height,
+          widthFromState = _this$state2$dimensio.width;
+      var shapesToUse = stateShapes || shapes;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.base
+      }, imageUrl && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.imageContainer
+      }, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({
+        className: classes.image,
+        onLoad: this.handleOnImageLoad,
+        ref: function ref(_ref2) {
+          _this3.image = _ref2;
+        },
+        src: imageUrl
+      }, height && width ? {
+        style: {
+          height: height,
+          width: width
+        }
+      } : {})), /*#__PURE__*/_react["default"].createElement("div", {
+        ref: function ref(_ref3) {
+          _this3.resize = _ref3;
+        },
+        className: classes.resize
+      })), /*#__PURE__*/_react["default"].createElement(_reactKonva.Stage, {
+        className: classes.stage,
+        height: heightFromState || height,
+        width: widthFromState || width,
+        onMouseDown: this.handleOnMouseDown,
+        onMouseUp: this.handleOnMouseUp,
+        onMouseMove: this.handleMouseMove,
+        onContentMouseOut: this.handleOnMouseOutOrLeave,
+        onContentMouseLeave: this.handleOnMouseOutOrLeave
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Layer, null, shapesToUse.map(function (shape, i) {
+        var Tag;
+
+        switch (shape.group) {
+          case 'rectangles':
+            Tag = _hotspotRectangle["default"];
+            break;
+
+          case 'circles':
+            Tag = _hotspotCircle["default"];
+            break;
+
+          case 'polygons':
+            Tag = _hotspotPolygon["default"];
+            break;
+
+          default:
+            return null;
+        }
+
+        return /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({
+          correct: shape.correct,
+          isDrawing: isDrawing
+        }, shape.group === 'circles' ? {
+          radius: shape.radius
+        } : {
+          height: shape.height,
+          width: shape.width
+        }, {
+          hotspotColor: hotspotColor,
+          id: shape.id,
+          key: i,
+          onClick: function onClick() {
+            return _this3.handleOnSetAsCorrect(shape);
+          },
+          onDragEnd: _this3.handleOnDragEnd,
+          onDeleteShape: _this3.deleteShape,
+          outlineColor: outlineColor,
+          width: shape.width,
+          x: shape.x,
+          y: shape.y
+        }, shape.group === 'polygons' ? {
+          points: shape.points
+        } : {}, {
+          strokeWidth: strokeWidth,
+          imageHeight: heightFromState || height,
+          imageWidth: widthFromState || width
+        }, shape.group === 'polygons' ? {
+          addPolygonPoint: function addPolygonPoint(e) {
+            return _this3.addPolygonPoint(e);
+          }
+        } : {}));
+      }))));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      // Update the state only if the props have changed
+      if (nextProps.shapes !== prevState.shapes) {
+        return {
+          shapes: nextProps.shapes
+        };
+      }
+
+      return null;
+    }
+  }]);
+  return Drawable;
+}(_react["default"].Component);
+
+exports.Drawable = Drawable;
+
+var styles = function styles() {
+  return {
+    base: {
+      position: 'relative'
+    },
+    image: {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    imageContainer: {
+      position: 'relative',
+      width: 'fit-content'
+    },
+    resize: {
+      borderBottom: '1px solid #727272',
+      borderRight: '1px solid #727272',
+      bottom: '-10px',
+      cursor: 'se-resize',
+      height: '10px',
+      position: 'absolute',
+      right: '-10px',
+      width: '10px'
+    },
+    stage: {
+      left: 0,
+      top: 0,
+      position: 'absolute'
+    }
+  };
+};
+
+Drawable.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  disableDrag: _propTypes["default"].func.isRequired,
+  dimensions: _propTypes["default"].object.isRequired,
+  enableDrag: _propTypes["default"].func.isRequired,
+  shapeType: _propTypes["default"].oneOf(['rectangle', 'circle', 'polygon']),
+  imageUrl: _propTypes["default"].string.isRequired,
+  handleFinishDrawing: _propTypes["default"].func.isRequired,
+  hotspotColor: _propTypes["default"].string.isRequired,
+  multipleCorrect: _propTypes["default"].bool.isRequired,
+  onUpdateImageDimension: _propTypes["default"].func.isRequired,
+  onUpdateShapes: _propTypes["default"].func.isRequired,
+  onDeleteShape: _propTypes["default"].func.isRequired,
+  outlineColor: _propTypes["default"].string.isRequired,
+  shapes: _propTypes["default"].array.isRequired,
+  strokeWidth: _propTypes["default"].number,
+  preserveAspectRatioEnabled: _propTypes["default"].bool
+};
+
+var _default = (0, _index.withStyles)(styles)(Drawable);
+
+exports["default"] = _default;
+//# sourceMappingURL=hotspot-drawable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","shapeType","onUpdateShapes","shapes","newState","newShapeId","target","currentTarget","RectangleShape","create","CircleShape","state","isDrawingShapeId","addPolygonPoint","isDrawing","PolygonShape","console","error","setState","finalizeCreation","handleMouseMove","handleOnMouseUp","id","updatedProps","newShapes","map","shape","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","newHeight","parseFloat","height","newWidth","width","aspectWidth","dimensions","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","stateShapes","enableDrag","removeEventListener","undefined","onDeleteShape","temporaryPolygon","addPoint","x","y","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseOutOrLeave","i","Tag","group","Rectangle","Circle","Polygon","radius","handleOnSetAsCorrect","handleOnDragEnd","deleteShape","points","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","oneOf","string","handleFinishDrawing","bool","array","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nimport Rectangle from './hotspot-rectangle';\nimport Polygon from './hotspot-polygon';\nimport Circle from './hotspot-circle';\nimport { updateImageDimensions, getUpdatedShapes } from './utils';\nimport RectangleShape from './shapes/rectagle';\nimport CircleShape from './shapes/circle';\nimport PolygonShape from './shapes/polygon';\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // Update the state only if the props have changed\n    if (nextProps.shapes !== prevState.shapes) {\n      return { shapes: nextProps.shapes };\n    }\n\n    return null;\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      isDrawing: false,\n      stateShapes: false,\n      resizing: false,\n      temporaryPolygon: null,\n      shapes: [],\n      dimensions: {\n        height: 0,\n        width: 0,\n      },\n    };\n  }\n\n  handleOnMouseDown = (e) => {\n    const { shapeType, onUpdateShapes, shapes } = this.props;\n    let newState, newShapeId;\n\n    // Ensure that the click originated from the expected element\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    switch (shapeType) {\n      case 'rectangle':\n        newState = RectangleShape.create(shapes, e);\n        break;\n      case 'circle':\n        newState = CircleShape.create(shapes, e);\n        break;\n      case 'polygon':\n        newShapeId = this.state.isDrawingShapeId;\n\n        if (newShapeId) {\n          // If a polygon is in progress, add a new point\n          const shapes = this.addPolygonPoint(e);\n\n          newState = {\n            isDrawing: true,\n            isDrawingShapeId: newShapeId,\n            shapes: shapes,\n          };\n        } else {\n          // Else start a new one\n          newState = PolygonShape.create(shapes, e);\n        }\n        break;\n      default:\n        console.error(`Unsupported shape type: ${shapeType}`);\n        return;\n    }\n\n    this.setState({\n      ...newState,\n    });\n\n    onUpdateShapes(newState.shapes);\n  };\n\n  addPolygonPoint(e) {\n    const { shapes } = PolygonShape.addPoint(this.state, e, (newShapes) => {\n      this.setState({\n        isDrawing: false,\n        shapes: newShapes,\n        isDrawingShapeId: undefined,\n      });\n\n      this.props.onUpdateShapes(newShapes);\n    });\n\n    return shapes;\n  }\n\n  handleOnMouseUp = () => {\n    const { shapeType, onUpdateShapes } = this.props;\n    let newState;\n\n    if (shapeType === 'polygon') {\n      return;\n    }\n\n    switch (shapeType) {\n      case 'rectangle':\n        newState = RectangleShape.finalizeCreation(this.state, this.props);\n        break;\n      case 'circle':\n        newState = CircleShape.finalizeCreation(this.state, this.props);\n        break;\n      default:\n        console.error(`Unsupported shape type: ${shapeType}`);\n        return;\n    }\n\n    this.setState({\n      ...newState,\n      isDrawing: false,\n    });\n\n    onUpdateShapes(newState.shapes);\n  };\n\n  handleMouseMove = (e) => {\n    const { shapeType, onUpdateShapes, shapes } = this.props;\n    let newState;\n\n    if (this.state.isDrawing) {\n      switch (shapeType) {\n        case 'rectangle':\n          newState = RectangleShape.handleMouseMove(this.state, e);\n          break;\n        case 'circle':\n          newState = CircleShape.handleMouseMove(this.state, e);\n          break;\n        case 'polygon':\n          newState = PolygonShape.handleMouseMove(this.state, e);\n          break;\n        default:\n          console.error(`Unsupported shape type: ${shapeType}`);\n          return;\n      }\n\n      this.setState(newState);\n      onUpdateShapes(newState.shapes);\n    }\n  };\n\n  handleOnMouseOutOrLeave = (e) => {\n    if (this.state.isDrawing) {\n      this.handleOnMouseUp(e);\n    }\n  };\n\n  handleOnDragEnd = (id, updatedProps) => {\n    const { shapes, onUpdateShapes } = this.props;\n    const newShapes = shapes.map((shape) => {\n      if (shape.id === id) {\n        return { ...shape, ...updatedProps };\n      }\n      return shape;\n    });\n\n    onUpdateShapes(cloneDeep(newShapes));\n  };\n\n  handleOnSetAsCorrect = (shape) => {\n    const { id } = shape;\n    const { multipleCorrect, shapes, onUpdateShapes } = this.props;\n\n    let newShapes = [];\n\n    if (multipleCorrect) {\n      newShapes = shapes.map((shape) => {\n        if (shape.id === id) {\n          shape.correct = !shape.correct;\n        }\n        return shape;\n      });\n    } else {\n      newShapes = shapes.map((shape) => {\n        shape.correct = shape.id === id;\n        return shape;\n      });\n    }\n\n    onUpdateShapes(cloneDeep(newShapes));\n  };\n  /// end of handling HotSpots section\n\n  /// start of handling Image section\n  handleOnImageLoad = ({ target }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n    const elementStyle = getComputedStyle(target);\n    const newHeight = parseFloat(elementStyle.height);\n    const newWidth = parseFloat(elementStyle.width);\n    const aspectWidth = newWidth / IMAGE_MAX_WIDTH;\n\n    const dimensions =\n      newWidth > IMAGE_MAX_WIDTH\n        ? {\n            height: newHeight / aspectWidth,\n            width: IMAGE_MAX_WIDTH,\n          }\n        : {\n            height: newHeight,\n            width: newWidth,\n          };\n\n    this.setState({ dimensions }, () => onUpdateImageDimension(dimensions));\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  checkIfResizeValid(x, y) {\n    const { shapes } = this.state;\n    let drawable = true;\n\n    // Do not allow resizing over the hotspots\n    shapes &&\n      shapes.forEach((shape) => {\n        const right = shape.x + shape.width + 5;\n        const bottom = shape.y + shape.height + 5;\n        if (x <= right || y <= bottom) {\n          drawable = false;\n        }\n      });\n    return drawable;\n  }\n\n  startResizing = (e) => {\n    const bounds = e.target.getBoundingClientRect();\n    const box = this.image;\n    const { disableDrag, preserveAspectRatioEnabled, dimensions, shapes } = this.props;\n\n    // todo previously we had state.dimensions, is it needed?\n    const { width, height } = updateImageDimensions(\n      dimensions,\n      {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      },\n      preserveAspectRatioEnabled,\n    );\n\n    const resizeValid = this.checkIfResizeValid(width, height);\n    const hasMinimumWidth = width > 150 && height > 150;\n\n    if (resizeValid && hasMinimumWidth && box) {\n      box.style.width = `${width}px`;\n      box.style.height = `${height}px`;\n\n      this.setState({\n        resizing: true,\n        dimensions: { height: height, width: width },\n        stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes),\n      });\n    }\n\n    disableDrag();\n  };\n\n  stopResizing = () => {\n    const { enableDrag, onUpdateImageDimension, onUpdateShapes } = this.props;\n    const { dimensions, stateShapes } = this.state;\n\n    enableDrag();\n\n    if (stateShapes) {\n      onUpdateShapes(cloneDeep(stateShapes));\n    }\n\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n\n    this.setState({ resizing: false, stateShapes: false });\n  };\n\n  deleteShape = (id) => {\n    this.setState({\n      isDrawing: false,\n      isDrawingShapeId: undefined,\n    });\n    this.props.onDeleteShape(id);\n  }\n  /// end of handling Image section\n\n  render() {\n    const {\n      classes,\n      imageUrl,\n      dimensions: { height, width },\n      hotspotColor,\n      outlineColor,\n      shapes,\n      strokeWidth,\n      onDeleteShape,\n    } = this.props;\n    const {\n      stateShapes,\n      isDrawing,\n      dimensions: { height: heightFromState, width: widthFromState },\n    } = this.state;\n    const shapesToUse = stateShapes || shapes;\n\n    return (\n      <div className={classes.base}>\n        {imageUrl && (\n          <div className={classes.imageContainer}>\n            <img\n              className={classes.image}\n              onLoad={this.handleOnImageLoad}\n              ref={(ref) => {\n                this.image = ref;\n              }}\n              src={imageUrl}\n              {...(height && width ? { style: { height, width } } : {})}\n            />\n            <div\n              ref={(ref) => {\n                this.resize = ref;\n              }}\n              className={classes.resize}\n            />\n          </div>\n        )}\n\n        <Stage\n          className={classes.stage}\n          height={heightFromState || height}\n          width={widthFromState || width}\n          onMouseDown={this.handleOnMouseDown}\n          onMouseUp={this.handleOnMouseUp}\n          onMouseMove={this.handleMouseMove}\n          onContentMouseOut={this.handleOnMouseOutOrLeave}\n          onContentMouseLeave={this.handleOnMouseOutOrLeave}\n        >\n          <Layer>\n            {shapesToUse.map((shape, i) => {\n              let Tag;\n              switch (shape.group) {\n                case 'rectangles':\n                  Tag = Rectangle;\n                  break;\n                case 'circles':\n                  Tag = Circle;\n                  break;\n                case 'polygons':\n                  Tag = Polygon;\n                  break;\n                default:\n                  return null;\n              }\n\n              return (\n                <Tag\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  {...(shape.group === 'circles'\n                    ? { radius: shape.radius }\n                    : { height: shape.height, width: shape.width })}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={i}\n                  onClick={() => this.handleOnSetAsCorrect(shape)}\n                  onDragEnd={this.handleOnDragEnd}\n                  onDeleteShape={this.deleteShape}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  {...(shape.group === 'polygons' ? { points: shape.points } : {})}\n                  strokeWidth={strokeWidth}\n                  imageHeight={heightFromState || height}\n                  imageWidth={widthFromState || width}\n                  {...(shape.group === 'polygons' ? { addPolygonPoint: (e) => this.addPolygonPoint(e) } : {})}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n});\n\nDrawable.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disableDrag: PropTypes.func.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  enableDrag: PropTypes.func.isRequired,\n  shapeType: PropTypes.oneOf(['rectangle', 'circle', 'polygon']),\n  imageUrl: PropTypes.string.isRequired,\n  handleFinishDrawing: PropTypes.func.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.array.isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n};\n\nexport default withStyles(styles)(Drawable);\n"],"file":"hotspot-drawable.js"}