@pie-element/hotspot 6.1.2-next.41 → 6.1.2-next.57

package/configure/lib/hotspot-drawable.js

@@ -29,8 +29,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactKonva = require("react-konva");
 
-var _max = _interopRequireDefault(require("lodash/max"));
-
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
 var _index = require("@material-ui/core/styles/index");
@@ -41,6 +39,12 @@ var _hotspotPolygon = _interopRequireDefault(require("./hotspot-polygon"));
 
 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; }
@@ -62,90 +66,123 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
     (0, _classCallCheck2["default"])(this, Drawable);
     _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnMouseDown", function (e) {
-      if (e.target === e.currentTarget) {
-        var _this$props = _this.props,
-            onUpdateShapes = _this$props.onUpdateShapes,
-            shapes = _this$props.shapes; // Add a new rectangle at the mouse position with 0 width and height
-
-        var newShapes = shapes.slice();
-        var value = (0, _max["default"])(newShapes.map(function (c) {
-          return parseInt(c.id);
-        }).filter(function (id) {
-          return !isNaN(id);
-        })) || 0;
-        newShapes.push({
-          id: "".concat(value + 1),
-          height: 0,
-          width: 0,
-          x: e.evt.layerX,
-          y: e.evt.layerY,
-          group: 'rectangles',
-          index: shapes.length
-        });
+      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;
+      }
 
-        _this.setState({
-          isDrawing: true,
-          isDrawingShapeId: "".concat(value + 1)
-        });
+      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;
 
-        onUpdateShapes(newShapes);
+        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 () {
-      // !IMPORTANT: currently, only 'rectangles' are drawable
-      var _this$state = _this.state,
-          isDrawing = _this$state.isDrawing,
-          stateShapes = _this$state.stateShapes;
-      var onUpdateShapes = _this.props.onUpdateShapes; // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC
+      var _this$props2 = _this.props,
+          shapeType = _this$props2.shapeType,
+          onUpdateShapes = _this$props2.onUpdateShapes;
+      var newState;
 
-      if (isDrawing) {
-        _this.setState({
-          isDrawing: !isDrawing,
-          stateShapes: false,
-          isDrawingShapeId: undefined
-        });
+      if (shapeType === 'polygon') {
+        return;
+      }
 
-        if (stateShapes) {
-          onUpdateShapes(stateShapes);
-        }
+      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) {
-      // !IMPORTANT: currently, only 'rectangles' are drawable
-      var _this$state2 = _this.state,
-          isDrawing = _this$state2.isDrawing,
-          isDrawingShapeId = _this$state2.isDrawingShapeId;
-      var shapes = _this.props.shapes;
-
-      if (isDrawing && isDrawingShapeId) {
-        var mouseX = e.evt.layerX;
-        var mouseY = e.evt.layerY;
-        var currShapeIndex = shapes.findIndex(function (shape) {
-          return shape.id === isDrawingShapeId;
-        });
-        var currShape = shapes[currShapeIndex];
-
-        if (currShape) {
-          var newWidth = mouseX - currShape.x;
-          var newHeight = mouseY - currShape.y;
-          var newShapesList = shapes.slice();
-          newShapesList[currShapeIndex] = _objectSpread(_objectSpread({}, newShapesList[currShapeIndex]), {}, {
-            height: newHeight,
-            width: newWidth,
-            x: currShape.x,
-            y: currShape.y
-          }); // On mouse move don't trigger any event. Put the shapes on this state instead.
-
-          _this.setState({
-            stateShapes: newShapesList
-          });
+      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$props2 = _this.props,
-          shapes = _this$props2.shapes,
-          onUpdateShapes = _this$props2.onUpdateShapes;
+      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);
@@ -157,10 +194,10 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnSetAsCorrect", function (shape) {
       var id = shape.id;
-      var _this$props3 = _this.props,
-          multipleCorrect = _this$props3.multipleCorrect,
-          shapes = _this$props3.shapes,
-          onUpdateShapes = _this$props3.onUpdateShapes;
+      var _this$props5 = _this.props,
+          multipleCorrect = _this$props5.multipleCorrect,
+          shapes = _this$props5.shapes,
+          onUpdateShapes = _this$props5.onUpdateShapes;
       var newShapes = [];
 
       if (multipleCorrect) {
@@ -211,11 +248,11 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startResizing", function (e) {
       var bounds = e.target.getBoundingClientRect();
       var box = _this.image;
-      var _this$props4 = _this.props,
-          disableDrag = _this$props4.disableDrag,
-          preserveAspectRatioEnabled = _this$props4.preserveAspectRatioEnabled,
-          dimensions = _this$props4.dimensions,
-          shapes = _this$props4.shapes; // todo previously we had state.dimensions, is it needed?
+      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,
@@ -248,13 +285,13 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
       disableDrag();
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stopResizing", function () {
-      var _this$props5 = _this.props,
-          enableDrag = _this$props5.enableDrag,
-          onUpdateImageDimension = _this$props5.onUpdateImageDimension,
-          onUpdateShapes = _this$props5.onUpdateShapes;
-      var _this$state3 = _this.state,
-          dimensions = _this$state3.dimensions,
-          stateShapes = _this$state3.stateShapes;
+      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) {
@@ -274,16 +311,37 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
       isDrawing: false,
       stateShapes: false,
       resizing: false,
+      temporaryPolygon: null,
+      shapes: [],
       dimensions: {
         height: 0,
         width: 0
       }
     };
     return _this;
-  } /// start of handling HotSpots section
-
+  }
 
   (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);
+
+        _this2.props.handleFinishDrawing();
+      }),
+          shapes = _PolygonShape$addPoin.shapes;
+
+      return shapes;
+    }
+  }, {
     key: "checkIfResizeValid",
     value: function checkIfResizeValid(x, y) {
       var shapes = this.state.shapes;
@@ -303,25 +361,25 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: /// end of handling Image section
     function render() {
-      var _this2 = this;
-
-      var _this$props6 = this.props,
-          classes = _this$props6.classes,
-          imageUrl = _this$props6.imageUrl,
-          _this$props6$dimensio = _this$props6.dimensions,
-          height = _this$props6$dimensio.height,
-          width = _this$props6$dimensio.width,
-          hotspotColor = _this$props6.hotspotColor,
-          outlineColor = _this$props6.outlineColor,
-          shapes = _this$props6.shapes,
-          strokeWidth = _this$props6.strokeWidth,
-          onDeleteShape = _this$props6.onDeleteShape;
-      var _this$state4 = this.state,
-          stateShapes = _this$state4.stateShapes,
-          isDrawing = _this$state4.isDrawing,
-          _this$state4$dimensio = _this$state4.dimensions,
-          heightFromState = _this$state4$dimensio.height,
-          widthFromState = _this$state4$dimensio.width;
+      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
@@ -331,7 +389,7 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
         className: classes.image,
         onLoad: this.handleOnImageLoad,
         ref: function ref(_ref2) {
-          _this2.image = _ref2;
+          _this3.image = _ref2;
         },
         src: imageUrl
       }, height && width ? {
@@ -341,7 +399,7 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
         }
       } : {})), /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(_ref3) {
-          _this2.resize = _ref3;
+          _this3.resize = _ref3;
         },
         className: classes.resize
       })), /*#__PURE__*/_react["default"].createElement(_reactKonva.Stage, {
@@ -350,7 +408,9 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
         width: widthFromState || width,
         onMouseDown: this.handleOnMouseDown,
         onMouseUp: this.handleOnMouseUp,
-        onMouseMove: this.handleMouseMove
+        onMouseMove: this.handleMouseMove,
+        onContentMouseOut: this.handleOnMouseOutOrLeave,
+        onContentMouseLeave: this.handleOnMouseOutOrLeave
       }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Layer, null, shapesToUse.map(function (shape, i) {
         var Tag = shape.group === 'polygons' ? _hotspotPolygon["default"] : _hotspotRectangle["default"];
         return /*#__PURE__*/_react["default"].createElement(Tag, {
@@ -361,9 +421,9 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           id: shape.id,
           key: i,
           onClick: function onClick() {
-            return _this2.handleOnSetAsCorrect(shape);
+            return _this3.handleOnSetAsCorrect(shape);
           },
-          onDragEnd: _this2.handleOnDragEnd,
+          onDragEnd: _this3.handleOnDragEnd,
           onDeleteShape: onDeleteShape,
           outlineColor: outlineColor,
           width: shape.width,
@@ -372,7 +432,10 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           points: shape.points,
           strokeWidth: strokeWidth,
           imageHeight: heightFromState || height,
-          imageWidth: widthFromState || width
+          imageWidth: widthFromState || width,
+          addPolygonPoint: function addPolygonPoint(e) {
+            return _this3.addPolygonPoint(e);
+          }
         });
       }))));
     }
@@ -432,7 +495,9 @@ Drawable.propTypes = {
   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,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","target","currentTarget","onUpdateShapes","shapes","newShapes","slice","value","map","c","parseInt","id","filter","isNaN","push","height","width","x","evt","layerX","y","layerY","group","index","length","setState","isDrawing","isDrawingShapeId","state","stateShapes","undefined","mouseX","mouseY","currShapeIndex","findIndex","shape","currShape","newWidth","newHeight","newShapesList","updatedProps","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","parseFloat","aspectWidth","dimensions","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","enableDrag","removeEventListener","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","onDeleteShape","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseUp","handleMouseMove","i","Tag","Polygon","Rectangle","handleOnSetAsCorrect","handleOnDragEnd","points","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","string","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 max from 'lodash/max';\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 { updateImageDimensions, getUpdatedShapes } from './utils';\n\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    let dimensions = nextProps.dimensions;\n\n    if (prevState && prevState.resizing) {\n      dimensions = prevState.dimensions;\n    }\n\n    return {\n      ...prevState,\n      dimensions: dimensions,\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      isDrawing: false,\n      stateShapes: false,\n      resizing: false,\n      dimensions: {\n        height: 0,\n        width: 0,\n      },\n    };\n  }\n\n  /// start of handling HotSpots section\n  handleOnMouseDown = (e) => {\n    if (e.target === e.currentTarget) {\n      const { onUpdateShapes, shapes } = this.props;\n      // Add a new rectangle at the mouse position with 0 width and height\n      const newShapes = shapes.slice();\n      const value = max(newShapes.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) || 0;\n\n      newShapes.push({\n        id: `${value + 1}`,\n        height: 0,\n        width: 0,\n        x: e.evt.layerX,\n        y: e.evt.layerY,\n        group: 'rectangles',\n        index: shapes.length,\n      });\n\n      this.setState({ isDrawing: true, isDrawingShapeId: `${value + 1}` });\n      onUpdateShapes(newShapes);\n    }\n  };\n\n  handleOnMouseUp = () => {\n    // !IMPORTANT: currently, only 'rectangles' are drawable\n    const { isDrawing, stateShapes } = this.state;\n    const { onUpdateShapes } = this.props;\n\n    // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC\n    if (isDrawing) {\n      this.setState({ isDrawing: !isDrawing, stateShapes: false, isDrawingShapeId: undefined });\n\n      if (stateShapes) {\n        onUpdateShapes(stateShapes);\n      }\n    }\n  };\n\n  handleMouseMove = (e) => {\n    // !IMPORTANT: currently, only 'rectangles' are drawable\n    const { isDrawing, isDrawingShapeId } = this.state;\n    const { shapes } = this.props;\n\n    if (isDrawing && isDrawingShapeId) {\n      const mouseX = e.evt.layerX;\n      const mouseY = e.evt.layerY;\n\n      const currShapeIndex = shapes.findIndex((shape) => shape.id === isDrawingShapeId);\n      const currShape = shapes[currShapeIndex];\n\n      if (currShape) {\n        const newWidth = mouseX - currShape.x;\n        const newHeight = mouseY - currShape.y;\n\n        const newShapesList = shapes.slice();\n\n        newShapesList[currShapeIndex] = {\n          ...newShapesList[currShapeIndex],\n          height: newHeight,\n          width: newWidth,\n          x: currShape.x,\n          y: currShape.y,\n        };\n        // On mouse move don't trigger any event. Put the shapes on this state instead.\n        this.setState({ stateShapes: newShapesList });\n      }\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 {\n          ...shape,\n          ...updatedProps,\n        };\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  /// 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        >\n          <Layer>\n            {shapesToUse.map((shape, i) => {\n              const Tag = shape.group === 'polygons' ? Polygon : Rectangle;\n              return (\n                <Tag\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={i}\n                  onClick={() => this.handleOnSetAsCorrect(shape)}\n                  onDragEnd={this.handleOnDragEnd}\n                  onDeleteShape={onDeleteShape}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  points={shape.points}\n                  strokeWidth={strokeWidth}\n                  imageHeight={heightFromState || height}\n                  imageWidth={widthFromState || width}\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  imageUrl: PropTypes.string.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"}
+{"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","temporaryPolygon","addPoint","undefined","handleFinishDrawing","x","y","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","onDeleteShape","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseOutOrLeave","i","Tag","group","Polygon","Rectangle","handleOnSetAsCorrect","handleOnDragEnd","points","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","oneOf","string","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 { 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    let dimensions = nextProps.dimensions;\n\n    if (prevState && prevState.resizing) {\n      dimensions = prevState.dimensions;\n    }\n\n    return {\n      ...prevState,\n      dimensions: dimensions,\n    };\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      this.props.handleFinishDrawing();\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 {\n          ...shape,\n          ...updatedProps,\n        };\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  /// 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              const Tag = shape.group === 'polygons' ? Polygon : Rectangle;\n              return (\n                <Tag\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={i}\n                  onClick={() => this.handleOnSetAsCorrect(shape)}\n                  onDragEnd={this.handleOnDragEnd}\n                  onDeleteShape={onDeleteShape}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  points={shape.points}\n                  strokeWidth={strokeWidth}\n                  imageHeight={heightFromState || height}\n                  imageWidth={widthFromState || width}\n                  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"}

package/configure/lib/hotspot-polygon.js

@@ -122,6 +122,12 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
+      if (isDrawing && id === 'newPolygon') {
+        _this.props.addPolygonPoint(e);
+
+        return;
+      }
+
       e.cancelBubble = true;
       onClick(id);
     });
@@ -218,6 +224,7 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
           x = _this$state.x,
           y = _this$state.y,
           hovered = _this$state.hovered;
+      var showPoints = hovered || id === 'newPolygon';
       var calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;
       var calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';
       return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
@@ -241,7 +248,7 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
         },
         x: x,
         y: y
-      }), hovered && points.map(function (point, index) {
+      }), showPoints && points.map(function (point, index) {
         return /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
           key: index,
           className: classes.circle,
@@ -251,6 +258,7 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
           fill: 'white',
           stroke: HOVERED_COLOR,
           strokeWidth: 1,
+          onClick: _this2.handleClick,
           onDragStart: _this2.onDragStart,
           onDragMove: function onDragMove(e) {
             _this2.handleOnDragVertex(e, index);
@@ -277,7 +285,7 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
           imageHeight = nextProps.imageHeight,
           imageWidth = nextProps.imageWidth; // we execute this code only if image dimensions changed or an hotspot was added/deleted
 
-      if (prevState.imageHeight !== nextProps.imageHeight || prevState.imageWidth !== nextProps.imageWidth || prevState.id !== nextProps.id) {
+      if (prevState.imageHeight !== nextProps.imageHeight || prevState.imageWidth !== nextProps.imageWidth || prevState.id !== nextProps.id || prevState.points.length !== points.length) {
         if (points.length) {
           var xList = points.map(function (p) {
             return p.x;
@@ -337,6 +345,7 @@ PolComponent.propTypes = {
   imageWidth: _propTypes["default"].number,
   hotspotColor: _propTypes["default"].string.isRequired,
   onClick: _propTypes["default"].func.isRequired,
+  addPolygonPoint: _propTypes["default"].func.isRequired,
   onDeleteShape: _propTypes["default"].func.isRequired,
   onDragEnd: _propTypes["default"].func.isRequired,
   outlineColor: _propTypes["default"].string.isRequired,