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

package/configure/lib/hotspot-drawable.js

@@ -1,400 +1,365 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Drawable = void 0;
-
+exports.default = exports.Drawable = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-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 _styles = require("@mui/material/styles");
 var _hotspotRectangle = _interopRequireDefault(require("./hotspot-rectangle"));
-
 var _hotspotPolygon = _interopRequireDefault(require("./hotspot-polygon"));
-
 var _hotspotCircle = _interopRequireDefault(require("./hotspot-circle"));
-
 var _utils = require("./utils");
-
-var _shapes2 = require("./shapes");
-
-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
-
+var _shapes = require("./shapes");
+const BaseContainer = (0, _styles.styled)('div')({
+  position: 'relative'
+});
+const ImageContainer = (0, _styles.styled)('div')({
+  position: 'relative',
+  width: 'fit-content'
+});
+const Image = (0, _styles.styled)('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center'
+});
+const ResizeHandle = (0, _styles.styled)('div')({
+  borderBottom: '1px solid #727272',
+  borderRight: '1px solid #727272',
+  bottom: '-10px',
+  cursor: 'se-resize',
+  height: '10px',
+  position: 'absolute',
+  right: '-10px',
+  width: '10px'
+});
+const StyledStage = (0, _styles.styled)(_reactKonva.Stage)({
+  left: 0,
+  top: 0,
+  position: 'absolute'
+});
+const IMAGE_MAX_WIDTH = 800;
+class Drawable extends _react.default.Component {
+  static getDerivedStateFromProps(nextProps, prevState) {
+    // Update the state only if the props have changed
+    if (nextProps.shapes !== prevState.shapes) {
+      return {
+        shapes: nextProps.shapes
+      };
+    }
+    return null;
+  }
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "handleOnMouseDown", e => {
+      const {
+        shapeType,
+        onUpdateShapes,
+        shapes
+      } = this.props;
+      let newState, newShapeId;
+
+      // Ensure that the click originated from the expected element
       if (e.target !== e.currentTarget) {
         return;
       }
-
-      if (!Object.values(_shapes2.SUPPORTED_SHAPES).includes(shapeType)) {
+      if (!Object.values(_shapes.SUPPORTED_SHAPES).includes(shapeType)) {
         return;
       }
-
       switch (shapeType) {
-        case _shapes2.SUPPORTED_SHAPES.RECTANGLE:
-          newState = _shapes2.RectangleShape.create(shapes, e);
+        case _shapes.SUPPORTED_SHAPES.RECTANGLE:
+          newState = _shapes.RectangleShape.create(shapes, e);
           break;
-
-        case _shapes2.SUPPORTED_SHAPES.CIRCLE:
-          newState = _shapes2.CircleShape.create(shapes, e);
+        case _shapes.SUPPORTED_SHAPES.CIRCLE:
+          newState = _shapes.CircleShape.create(shapes, e);
           break;
-
-        case _shapes2.SUPPORTED_SHAPES.POLYGON:
-          newShapeId = _this.state.isDrawingShapeId;
-
+        case _shapes.SUPPORTED_SHAPES.POLYGON:
+          newShapeId = this.state.isDrawingShapeId;
           if (newShapeId) {
             // If a polygon is in progress, add a new point
-            var _shapes = _this.addPolygonPoint(e);
-
+            const shapes = this.addPolygonPoint(e);
             newState = {
               isDrawing: true,
               isDrawingShapeId: newShapeId,
-              shapes: _shapes
+              shapes: shapes
             };
           } else {
             // Else start a new one
-            newState = _shapes2.PolygonShape.create(shapes, e);
+            newState = _shapes.PolygonShape.create(shapes, e);
           }
-
           break;
-
         default:
           return;
       }
-
-      _this.setState(_objectSpread({}, newState));
-
+      this.setState({
+        ...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 === _shapes2.SUPPORTED_SHAPES.POLYGON) {
+    (0, _defineProperty2.default)(this, "handleOnMouseUp", () => {
+      const {
+        shapeType,
+        onUpdateShapes
+      } = this.props;
+      let newState;
+      if (shapeType === _shapes.SUPPORTED_SHAPES.POLYGON) {
         return;
       }
-
       switch (shapeType) {
-        case _shapes2.SUPPORTED_SHAPES.RECTANGLE:
-          newState = _shapes2.RectangleShape.finalizeCreation(_this.state, _this.props);
+        case _shapes.SUPPORTED_SHAPES.RECTANGLE:
+          newState = _shapes.RectangleShape.finalizeCreation(this.state, this.props);
           break;
-
-        case _shapes2.SUPPORTED_SHAPES.CIRCLE:
-          newState = _shapes2.CircleShape.finalizeCreation(_this.state, _this.props);
+        case _shapes.SUPPORTED_SHAPES.CIRCLE:
+          newState = _shapes.CircleShape.finalizeCreation(this.state, this.props);
           break;
-
         default:
           return;
       }
-
-      _this.setState(_objectSpread(_objectSpread({}, newState), {}, {
+      this.setState({
+        ...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;
-      var newState;
-
-      if (!_this.state.isDrawing || !Object.values(_shapes2.SUPPORTED_SHAPES).includes(shapeType)) {
+    (0, _defineProperty2.default)(this, "handleMouseMove", e => {
+      const {
+        shapeType,
+        onUpdateShapes
+      } = this.props;
+      let newState;
+      if (!this.state.isDrawing || !Object.values(_shapes.SUPPORTED_SHAPES).includes(shapeType)) {
         return;
       }
-
       switch (shapeType) {
-        case _shapes2.SUPPORTED_SHAPES.RECTANGLE:
-          newState = _shapes2.RectangleShape.handleMouseMove(_this.state, e);
+        case _shapes.SUPPORTED_SHAPES.RECTANGLE:
+          newState = _shapes.RectangleShape.handleMouseMove(this.state, e);
           break;
-
-        case _shapes2.SUPPORTED_SHAPES.CIRCLE:
-          newState = _shapes2.CircleShape.handleMouseMove(_this.state, e);
+        case _shapes.SUPPORTED_SHAPES.CIRCLE:
+          newState = _shapes.CircleShape.handleMouseMove(this.state, e);
           break;
-
-        case _shapes2.SUPPORTED_SHAPES.POLYGON:
-          newState = _shapes2.PolygonShape.handleMouseMove(_this.state, e);
+        case _shapes.SUPPORTED_SHAPES.POLYGON:
+          newState = _shapes.PolygonShape.handleMouseMove(this.state, e);
           break;
-
         default:
           return;
       }
-
-      _this.setState(newState);
-
+      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)(this, "handleOnMouseOutOrLeave", 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,
-          dimensions = _this$props4.dimensions;
-      var canvasWidth = dimensions.width,
-          canvasHeight = dimensions.height; // when a shape is moved completely outside the canvas
+    (0, _defineProperty2.default)(this, "handleOnDragEnd", (id, updatedProps) => {
+      const {
+        shapes,
+        onUpdateShapes,
+        dimensions
+      } = this.props;
+      const {
+        width: canvasWidth,
+        height: canvasHeight
+      } = dimensions;
+
+      // when a shape is moved completely outside the canvas
       // remove that shape
-
-      var newShapes = shapes.map(function (shape) {
+      const newShapes = shapes.map(shape => {
         if (shape.id !== id) {
           return shape;
         }
-
-        var newX = updatedProps.x;
-        var newY = updatedProps.y;
-
+        let newX = updatedProps.x;
+        let newY = updatedProps.y;
         if (shape.group === 'rectangles') {
           if (newX + shape.width < 0 || newX > canvasWidth || newY + shape.height < 0 || newY > canvasHeight) {
             return null;
           }
-
-          return _objectSpread(_objectSpread({}, shape), updatedProps);
+          return {
+            ...shape,
+            ...updatedProps
+          };
         }
-
         if (shape.group === 'circles') {
-          var radius = shape.radius;
-
+          const radius = shape.radius;
           if (newX + radius < 0 || newX - radius > canvasWidth || newY + radius < 0 || newY - radius > canvasHeight) {
             return null;
           }
-
-          return _objectSpread(_objectSpread({}, shape), updatedProps);
+          return {
+            ...shape,
+            ...updatedProps
+          };
         }
-
         if (shape.group === 'polygons') {
-          var points = shape.points;
-          var xValues = points.map(function (point) {
-            return point.x;
-          });
-          var yValues = points.map(function (point) {
-            return point.y;
-          });
-          var minX = Math.min.apply(Math, (0, _toConsumableArray2["default"])(xValues));
-          var minY = Math.min.apply(Math, (0, _toConsumableArray2["default"])(yValues));
-          var maxX = Math.max.apply(Math, (0, _toConsumableArray2["default"])(xValues));
-          var maxY = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yValues)); // Calculate deltas based on the first point as a reference
-
-          var deltaX = updatedProps['points'][0].x - points[0].x;
-          var deltaY = updatedProps['points'][0].y - points[0].y;
+          const points = shape.points;
+          const xValues = points.map(point => point.x);
+          const yValues = points.map(point => point.y);
+          let minX = Math.min(...xValues);
+          let minY = Math.min(...yValues);
+          let maxX = Math.max(...xValues);
+          let maxY = Math.max(...yValues);
+
+          // Calculate deltas based on the first point as a reference
+          const deltaX = updatedProps['points'][0].x - points[0].x;
+          const deltaY = updatedProps['points'][0].y - points[0].y;
           minX = minX + deltaX;
           maxX = maxX + deltaX;
           minY = minY + deltaY;
           maxY = maxY + deltaY;
-
           if (maxX < 0 || minX > canvasWidth || maxY < 0 || minY > canvasHeight) {
             return null;
           }
-
-          return _objectSpread(_objectSpread({}, shape), updatedProps);
+          return {
+            ...shape,
+            ...updatedProps
+          };
         }
-
         return shape;
-      }).filter(function (shape) {
-        return shape !== null;
-      });
-      onUpdateShapes((0, _cloneDeep["default"])(newShapes));
+      }).filter(shape => shape !== null);
+      onUpdateShapes((0, _cloneDeep.default)(newShapes));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closeInProgressPolygons", function (id) {
-      var _this$props5 = _this.props,
-          shapes = _this$props5.shapes,
-          onUpdateShapes = _this$props5.onUpdateShapes;
-      var inProgressPolygon = (shapes || []).find(function (shape) {
-        return shape.id === 'newPolygon';
-      });
-
-      if (id === 'newPolygon' || inProgressPolygon && _this.state.isDrawing) {
-        _shapes2.PolygonShape.finalizeCreation(_this.state, function (newShapes) {
-          _this.setState({
+    (0, _defineProperty2.default)(this, "closeInProgressPolygons", id => {
+      const {
+        shapes,
+        onUpdateShapes
+      } = this.props;
+      const inProgressPolygon = (shapes || []).find(shape => shape.id === 'newPolygon');
+      if (id === 'newPolygon' || inProgressPolygon && this.state.isDrawing) {
+        _shapes.PolygonShape.finalizeCreation(this.state, newShapes => {
+          this.setState({
             isDrawing: false,
             shapes: newShapes,
             isDrawingShapeId: undefined
           });
-
-          onUpdateShapes((0, _cloneDeep["default"])(newShapes));
+          onUpdateShapes((0, _cloneDeep.default)(newShapes));
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnSetAsCorrect", function (shape) {
-      var id = shape.id;
-      var _this$props6 = _this.props,
-          multipleCorrect = _this$props6.multipleCorrect,
-          shapes = _this$props6.shapes,
-          onUpdateShapes = _this$props6.onUpdateShapes;
-      var newShapes;
-
+    (0, _defineProperty2.default)(this, "handleOnSetAsCorrect", shape => {
+      const {
+        id
+      } = shape;
+      const {
+        multipleCorrect,
+        shapes,
+        onUpdateShapes
+      } = this.props;
+      let newShapes;
       if (multipleCorrect) {
-        newShapes = shapes.map(function (shape) {
+        newShapes = shapes.map(shape => {
           if (shape.id === id) {
             shape.correct = !shape.correct;
           }
-
           return shape;
         });
       } else {
-        newShapes = shapes.map(function (shape) {
+        newShapes = shapes.map(shape => {
           shape.correct = shape.id === id;
           return shape;
         });
       }
-
-      onUpdateShapes((0, _cloneDeep["default"])(newShapes));
-
-      _this.closeInProgressPolygons(id);
+      onUpdateShapes((0, _cloneDeep.default)(newShapes));
+      this.closeInProgressPolygons(id);
     });
-    (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 ? {
+    /// end of handling HotSpots section
+    /// start of handling Image section
+    (0, _defineProperty2.default)(this, "handleOnImageLoad", ({
+      target
+    }) => {
+      const {
+        onUpdateImageDimension
+      } = this.props;
+      const resizeHandle = this.resize;
+      const elementStyle = getComputedStyle(target);
+      const newHeight = parseFloat(elementStyle.height);
+      const newWidth = parseFloat(elementStyle.width);
+      const aspectWidth = newWidth / IMAGE_MAX_WIDTH;
+      const 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);
+      this.setState({
+        dimensions
+      }, () => 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)(this, "initialiseResize", () => {
+      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$props7 = _this.props,
-          disableDrag = _this$props7.disableDrag,
-          preserveAspectRatioEnabled = _this$props7.preserveAspectRatioEnabled,
-          dimensions = _this$props7.dimensions,
-          shapes = _this$props7.shapes;
-
-      var _updateImageDimension = (0, _utils.updateImageDimensions)(dimensions, {
+    (0, _defineProperty2.default)(this, "startResizing", e => {
+      const bounds = e.target.getBoundingClientRect();
+      const box = this.image;
+      const {
+        disableDrag,
+        preserveAspectRatioEnabled,
+        dimensions,
+        shapes
+      } = this.props;
+      const {
+        width,
+        height
+      } = (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;
-
+      }, preserveAspectRatioEnabled);
+      const resizeValid = this.checkIfResizeValid(width, height);
+      const hasMinimumWidth = width > 150 && height > 150;
       if (resizeValid && hasMinimumWidth && box) {
-        box.style.width = "".concat(width, "px");
-        box.style.height = "".concat(height, "px");
-
-        _this.setState({
+        box.style.width = `${width}px`;
+        box.style.height = `${height}px`;
+        this.setState({
           resizing: true,
           dimensions: {
             height: height,
             width: width
           },
           stateShapes: (0, _utils.getUpdatedShapes)(dimensions, {
-            width: width,
-            height: height
+            width,
+            height
           }, shapes)
         });
       }
-
       disableDrag();
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stopResizing", function () {
-      var _this$props8 = _this.props,
-          enableDrag = _this$props8.enableDrag,
-          onUpdateImageDimension = _this$props8.onUpdateImageDimension,
-          onUpdateShapes = _this$props8.onUpdateShapes;
-      var _this$state = _this.state,
-          dimensions = _this$state.dimensions,
-          stateShapes = _this$state.stateShapes;
+    (0, _defineProperty2.default)(this, "stopResizing", () => {
+      const {
+        enableDrag,
+        onUpdateImageDimension,
+        onUpdateShapes
+      } = this.props;
+      const {
+        dimensions,
+        stateShapes
+      } = this.state;
       enableDrag();
-
       if (stateShapes) {
-        onUpdateShapes((0, _cloneDeep["default"])(stateShapes));
+        onUpdateShapes((0, _cloneDeep.default)(stateShapes));
       }
-
       onUpdateImageDimension(dimensions);
-      window.removeEventListener('mousemove', _this.startResizing, false);
-      window.removeEventListener('mouseup', _this.stopResizing, false);
-
-      _this.setState({
+      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({
+    (0, _defineProperty2.default)(this, "deleteShape", id => {
+      this.setState({
         isDrawing: false,
         isDrawingShapeId: undefined
       });
-
-      _this.props.onDeleteShape(id);
+      this.props.onDeleteShape(id);
     });
-    _this.state = {
+    this.state = {
       isDrawing: false,
       stateShapes: false,
       resizing: false,
@@ -405,227 +370,150 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
         width: 0
       }
     };
-    return _this;
   }
-
-  (0, _createClass2["default"])(Drawable, [{
-    key: "addPolygonPoint",
-    value: function addPolygonPoint(e) {
-      var _this2 = this;
-
-      var _PolygonShape$addPoin = _shapes2.PolygonShape.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;
-        }
+  addPolygonPoint(e) {
+    const {
+      shapes
+    } = _shapes.PolygonShape.addPoint(this.state, e, newShapes => {
+      this.setState({
+        isDrawing: false,
+        shapes: newShapes,
+        isDrawingShapeId: undefined
       });
-      return drawable;
-    }
-  }, {
-    key: "render",
-    value: /// end of handling Image section
-    function render() {
-      var _this3 = this;
-
-      var _this$props9 = this.props,
-          classes = _this$props9.classes,
-          imageUrl = _this$props9.imageUrl,
-          _this$props9$dimensio = _this$props9.dimensions,
-          height = _this$props9$dimensio.height,
-          width = _this$props9$dimensio.width,
-          hotspotColor = _this$props9.hotspotColor,
-          outlineColor = _this$props9.outlineColor,
-          shapes = _this$props9.shapes,
-          strokeWidth = _this$props9.strokeWidth,
-          hoverOutlineColor = _this$props9.hoverOutlineColor,
-          selectedHotspotColor = _this$props9.selectedHotspotColor;
-      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 _shapes2.SHAPE_GROUPS.RECTANGLES:
-            Tag = _hotspotRectangle["default"];
-            break;
-
-          case _shapes2.SHAPE_GROUPS.CIRCLES:
-            Tag = _hotspotCircle["default"];
-            break;
-
-          case _shapes2.SHAPE_GROUPS.POLYGONS:
-            Tag = _hotspotPolygon["default"];
-            break;
-
-          default:
-            return null;
-        }
-
-        return /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({}, shape.group === _shapes2.SHAPE_GROUPS.CIRCLES ? {
-          radius: shape.radius
-        } : {}, shape.group === _shapes2.SHAPE_GROUPS.RECTANGLES ? {
-          height: shape.height,
-          width: shape.width
-        } : {}, shape.group === _shapes2.SHAPE_GROUPS.POLYGONS ? {
-          points: shape.points,
-          addPolygonPoint: function addPolygonPoint(e) {
-            return _this3.addPolygonPoint(e);
-          }
-        } : {}, {
-          correct: shape.correct,
-          isDrawing: isDrawing,
-          hotspotColor: hotspotColor,
-          hoverOutlineColor: hoverOutlineColor,
-          selectedHotspotColor: selectedHotspotColor,
-          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,
-          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
-        };
+      this.props.onUpdateShapes(newShapes);
+    });
+    return shapes;
+  }
+  checkIfResizeValid(x, y) {
+    const {
+      shapes
+    } = this.state;
+    let drawable = true;
+
+    // Do not allow resizing over the hotspots
+    shapes && shapes.forEach(shape => {
+      const right = shape.x + shape.width + 5;
+      const bottom = shape.y + shape.height + 5;
+      if (x <= right || y <= bottom) {
+        drawable = false;
       }
+    });
+    return drawable;
+  }
+  /// end of handling Image section
 
-      return null;
-    }
-  }]);
-  return Drawable;
-}(_react["default"].Component);
-
+  render() {
+    const {
+      imageUrl,
+      dimensions: {
+        height,
+        width
+      },
+      hotspotColor,
+      outlineColor,
+      shapes,
+      strokeWidth,
+      hoverOutlineColor,
+      selectedHotspotColor
+    } = this.props;
+    const {
+      stateShapes,
+      isDrawing,
+      dimensions: {
+        height: heightFromState,
+        width: widthFromState
+      }
+    } = this.state;
+    const shapesToUse = stateShapes || shapes;
+    return /*#__PURE__*/_react.default.createElement(BaseContainer, null, imageUrl && /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(Image, (0, _extends2.default)({
+      onLoad: this.handleOnImageLoad,
+      ref: ref => {
+        this.image = ref;
+      },
+      src: imageUrl
+    }, height && width ? {
+      style: {
+        height,
+        width
+      }
+    } : {})), /*#__PURE__*/_react.default.createElement(ResizeHandle, {
+      ref: ref => {
+        this.resize = ref;
+      }
+    })), /*#__PURE__*/_react.default.createElement(StyledStage, {
+      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((shape, i) => {
+      let Tag;
+      switch (shape.group) {
+        case _shapes.SHAPE_GROUPS.RECTANGLES:
+          Tag = _hotspotRectangle.default;
+          break;
+        case _shapes.SHAPE_GROUPS.CIRCLES:
+          Tag = _hotspotCircle.default;
+          break;
+        case _shapes.SHAPE_GROUPS.POLYGONS:
+          Tag = _hotspotPolygon.default;
+          break;
+        default:
+          return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({}, shape.group === _shapes.SHAPE_GROUPS.CIRCLES ? {
+        radius: shape.radius
+      } : {}, shape.group === _shapes.SHAPE_GROUPS.RECTANGLES ? {
+        height: shape.height,
+        width: shape.width
+      } : {}, shape.group === _shapes.SHAPE_GROUPS.POLYGONS ? {
+        points: shape.points,
+        addPolygonPoint: e => this.addPolygonPoint(e)
+      } : {}, {
+        correct: shape.correct,
+        isDrawing: isDrawing,
+        hotspotColor: hotspotColor,
+        hoverOutlineColor: hoverOutlineColor,
+        selectedHotspotColor: selectedHotspotColor,
+        id: shape.id,
+        key: i,
+        onClick: () => this.handleOnSetAsCorrect(shape),
+        onDragEnd: this.handleOnDragEnd,
+        onDeleteShape: this.deleteShape,
+        outlineColor: outlineColor,
+        width: shape.width,
+        x: shape.x,
+        y: shape.y,
+        strokeWidth: strokeWidth,
+        imageHeight: heightFromState || height,
+        imageWidth: widthFromState || width
+      }, shape.group === 'polygons' ? {
+        addPolygonPoint: e => this.addPolygonPoint(e)
+      } : {}));
+    }))));
+  }
+}
 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(Object.values(_shapes2.SUPPORTED_SHAPES)),
-  imageUrl: _propTypes["default"].string.isRequired,
-  handleFinishDrawing: _propTypes["default"].func.isRequired,
-  hotspotColor: _propTypes["default"].string.isRequired,
-  selectedHotspotColor: _propTypes["default"].string,
-  hoverOutlineColor: _propTypes["default"].string,
-  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
+  disableDrag: _propTypes.default.func.isRequired,
+  dimensions: _propTypes.default.object.isRequired,
+  enableDrag: _propTypes.default.func.isRequired,
+  shapeType: _propTypes.default.oneOf(Object.values(_shapes.SUPPORTED_SHAPES)),
+  imageUrl: _propTypes.default.string.isRequired,
+  handleFinishDrawing: _propTypes.default.func.isRequired,
+  hotspotColor: _propTypes.default.string.isRequired,
+  selectedHotspotColor: _propTypes.default.string,
+  hoverOutlineColor: _propTypes.default.string,
+  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;
+var _default = exports.default = Drawable;
 //# sourceMappingURL=hotspot-drawable.js.map