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

package/configure/lib/hotspot-palette.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+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 _configUi = require("@pie-lib/pie-toolbox/config-ui");
+
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _styles = require("@material-ui/core/styles");
+
+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 Palette = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Palette, _React$Component);
+
+  var _super = _createSuper(Palette);
+
+  function Palette() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Palette);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (name) {
+      return function (event) {
+        var value = event.target.value;
+        var _this$props = _this.props,
+            onHotspotColorChange = _this$props.onHotspotColorChange,
+            onOutlineColorChange = _this$props.onOutlineColorChange;
+
+        if (name === 'hotspot') {
+          onHotspotColorChange(value);
+        } else {
+          onOutlineColorChange(value);
+        }
+      };
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Palette, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          hotspotColor = _this$props2.hotspotColor,
+          outlineColor = _this$props2.outlineColor,
+          hotspotList = _this$props2.hotspotList,
+          outlineList = _this$props2.outlineList;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.base
+      }, /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: "Hot Spot",
+        className: classes.input
+      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        className: classes.select,
+        onChange: this.onChange('hotspot'),
+        value: hotspotColor
+      }, hotspotList.map(function (hotspot) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: hotspot,
+          value: hotspot,
+          className: classes.item,
+          style: {
+            backgroundColor: hotspot
+          }
+        }, hotspot);
+      }))), /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: "Response Outline",
+        className: classes.input
+      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        className: classes.select,
+        onChange: this.onChange('outline'),
+        value: outlineColor
+      }, outlineList.map(function (outline) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: outline,
+          value: outline,
+          className: classes.item,
+          style: {
+            border: "2px solid ".concat(outline)
+          }
+        }, outline);
+      }))));
+    }
+  }]);
+  return Palette;
+}(_react["default"].Component);
+
+var styles = function styles(theme) {
+  return {
+    base: {
+      marginTop: theme.spacing.unit * 2,
+      display: 'flex'
+    },
+    input: {
+      flex: 1,
+      width: '90%'
+    },
+    item: {
+      borderRadius: '2px',
+      height: '22px',
+      marginLeft: theme.spacing.unit * 2,
+      marginRight: theme.spacing.unit * 2,
+      marginTop: theme.spacing.unit * 2
+    }
+  };
+};
+
+Palette.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  hotspotColor: _propTypes["default"].string.isRequired,
+  hotspotList: _propTypes["default"].array.isRequired,
+  onHotspotColorChange: _propTypes["default"].func.isRequired,
+  onOutlineColorChange: _propTypes["default"].func.isRequired,
+  outlineColor: _propTypes["default"].string.isRequired,
+  outlineList: _propTypes["default"].array.isRequired
+};
+
+var _default = (0, _styles.withStyles)(styles)(Palette);
+
+exports["default"] = _default;
+//# sourceMappingURL=hotspot-palette.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hotspot-palette.jsx"],"names":["Palette","name","event","value","target","props","onHotspotColorChange","onOutlineColorChange","classes","hotspotColor","outlineColor","hotspotList","outlineList","base","input","select","onChange","map","hotspot","item","backgroundColor","outline","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","width","borderRadius","height","marginLeft","marginRight","propTypes","PropTypes","object","isRequired","string","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { InputContainer } from '@pie-lib/pie-toolbox/config-ui';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { withStyles } from '@material-ui/core/styles';\n\nclass Palette extends React.Component {\n  onChange = (name) => (event) => {\n    const { value } = event.target;\n    const { onHotspotColorChange, onOutlineColorChange } = this.props;\n\n    if (name === 'hotspot') {\n      onHotspotColorChange(value);\n    } else {\n      onOutlineColorChange(value);\n    }\n  };\n\n  render() {\n    const { classes, hotspotColor, outlineColor, hotspotList, outlineList } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <InputContainer label=\"Hot Spot\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('hotspot')} value={hotspotColor}>\n            {hotspotList.map((hotspot) => (\n              <MenuItem key={hotspot} value={hotspot} className={classes.item} style={{ backgroundColor: hotspot }}>\n                {hotspot}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n\n        <InputContainer label=\"Response Outline\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>\n            {outlineList.map((outline) => (\n              <MenuItem\n                key={outline}\n                value={outline}\n                className={classes.item}\n                style={{ border: `2px solid ${outline}` }}\n              >\n                {outline}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex',\n  },\n  input: {\n    flex: 1,\n    width: '90%',\n  },\n  item: {\n    borderRadius: '2px',\n    height: '22px',\n    marginLeft: theme.spacing.unit * 2,\n    marginRight: theme.spacing.unit * 2,\n    marginTop: theme.spacing.unit * 2,\n  },\n});\n\nPalette.propTypes = {\n  classes: PropTypes.object.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  hotspotList: PropTypes.array.isRequired,\n  onHotspotColorChange: PropTypes.func.isRequired,\n  onOutlineColorChange: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  outlineList: PropTypes.array.isRequired,\n};\n\nexport default withStyles(styles)(Palette);\n"],"file":"hotspot-palette.js"}

package/configure/lib/hotspot-polygon.js

@@ -0,0 +1,364 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+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 _index = require("@material-ui/core/styles/index");
+
+var _DeleteWidget = _interopRequireDefault(require("./DeleteWidget"));
+
+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 HOVERED_COLOR = '#00BFFF';
+
+var PolComponent = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(PolComponent, _React$Component);
+
+  var _super = _createSuper(PolComponent);
+
+  function PolComponent() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, PolComponent);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOffset", function (points) {
+      var xList = points.map(function (p) {
+        return p.x;
+      });
+      var yList = points.map(function (p) {
+        return p.y;
+      });
+      return {
+        x: Math.min.apply(Math, (0, _toConsumableArray2["default"])(xList)),
+        y: Math.max.apply(Math, (0, _toConsumableArray2["default"])(yList))
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "serialize", function (points) {
+      var _this$getOffset = _this.getOffset(points),
+          xOffset = _this$getOffset.x,
+          yOffset = _this$getOffset.y;
+
+      return points.reduce(function (acc, point) {
+        return [].concat((0, _toConsumableArray2["default"])(acc), [point.x - xOffset, point.y - yOffset]);
+      }, []);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getInitialState", function (points) {
+      if (points.length) {
+        var _this$getOffset2 = _this.getOffset(points),
+            x = _this$getOffset2.x,
+            y = _this$getOffset2.y;
+
+        return {
+          x: x,
+          y: y,
+          points: points
+        };
+      }
+
+      return {
+        id: '',
+        x: 0,
+        y: 0,
+        points: []
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", _objectSpread({
+      hovered: false,
+      isDragging: false
+    }, _this.getInitialState(_this.props.points)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (e) {
+      var points = _this.props.points;
+      var xList = points.map(function (p) {
+        return p.x;
+      });
+      var yList = points.map(function (p) {
+        return p.y;
+      });
+      var width = Math.max.apply(Math, (0, _toConsumableArray2["default"])(xList)) - Math.min.apply(Math, (0, _toConsumableArray2["default"])(xList));
+      var height = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yList)) - Math.min.apply(Math, (0, _toConsumableArray2["default"])(yList));
+      var _this$props = _this.props,
+          isDrawing = _this$props.isDrawing,
+          onClick = _this$props.onClick,
+          id = _this$props.id;
+
+      if (width < 0 && height < 0 && isDrawing) {
+        return;
+      }
+
+      if (isDrawing && id === 'newPolygon') {
+        _this.props.addPolygonPoint(e);
+
+        return;
+      }
+
+      e.cancelBubble = true;
+      onClick(id);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
+      _this.setState({
+        hovered: true
+      });
+
+      document.body.style.cursor = 'pointer';
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
+      _this.setState({
+        hovered: false
+      });
+
+      document.body.style.cursor = 'default';
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragEnd", function (e) {
+      var updateModel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var _this$props2 = _this.props,
+          onDragEnd = _this$props2.onDragEnd,
+          id = _this$props2.id;
+
+      var points = e.target.points() || _this.serialize(_this.state.points);
+
+      var newPoints = points.reduce(function (acc, currentPointCoordinate, index) {
+        if (index % 2 === 0 && index + 1 < points.length) {
+          return [].concat((0, _toConsumableArray2["default"])(acc), [{
+            x: currentPointCoordinate + e.target.x(),
+            y: points[index + 1] + e.target.y()
+          }]);
+        }
+
+        return acc;
+      }, []);
+
+      _this.setState(_objectSpread(_objectSpread({
+        points: newPoints
+      }, _this.getOffset(newPoints)), {}, {
+        isDragging: updateModel ? false : _this.state.isDragging
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragVertex", function (e, changedIndex, updateModel) {
+      var _this$props3 = _this.props,
+          onDragEnd = _this$props3.onDragEnd,
+          id = _this$props3.id;
+      var points = _this.state.points;
+      var newPoints = points.map(function (point, index) {
+        return index === changedIndex ? {
+          x: e.target.x(),
+          y: e.target.y()
+        } : point;
+      });
+
+      _this.setState(_objectSpread(_objectSpread({
+        points: newPoints
+      }, _this.getOffset(newPoints)), {}, {
+        isDragging: updateModel ? false : _this.state.isDragging
+      }));
+
+      if (updateModel) {
+        onDragEnd(id, {
+          points: newPoints
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDragStart", function () {
+      _this.setState({
+        isDragging: true
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDelete", function (id) {
+      var onDeleteShape = _this.props.onDeleteShape;
+      onDeleteShape(id);
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(PolComponent, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props4 = this.props,
+          classes = _this$props4.classes,
+          correct = _this$props4.correct,
+          id = _this$props4.id,
+          hotspotColor = _this$props4.hotspotColor,
+          outlineColor = _this$props4.outlineColor,
+          _this$props4$strokeWi = _this$props4.strokeWidth,
+          strokeWidth = _this$props4$strokeWi === void 0 ? 5 : _this$props4$strokeWi;
+      var _this$state = this.state,
+          points = _this$state.points,
+          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, {
+        classes: classes.group,
+        onMouseLeave: this.handleMouseLeave,
+        onMouseEnter: this.handleMouseEnter
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
+        classes: classes.base,
+        points: this.serialize(points),
+        closed: true,
+        fill: hotspotColor,
+        onClick: this.handleClick,
+        onTap: this.handleClick,
+        draggable: true,
+        stroke: calculatedStroke,
+        strokeWidth: calculatedStrokeWidth,
+        onDragStart: this.onDragStart,
+        onDragMove: this.handleOnDragEnd,
+        onDragEnd: function onDragEnd(e) {
+          return _this2.handleOnDragEnd(e, true);
+        },
+        x: x,
+        y: y
+      }), showPoints && points.map(function (point, index) {
+        return /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
+          key: index,
+          className: classes.circle,
+          x: point.x,
+          y: point.y,
+          radius: 5,
+          fill: 'white',
+          stroke: HOVERED_COLOR,
+          strokeWidth: 1,
+          onClick: _this2.handleClick,
+          onDragStart: _this2.onDragStart,
+          onDragMove: function onDragMove(e) {
+            _this2.handleOnDragVertex(e, index);
+          },
+          onDragEnd: function onDragEnd(e) {
+            _this2.handleOnDragVertex(e, index, true);
+          },
+          draggable: true
+        });
+      }), !this.state.isDragging && this.state.hovered && /*#__PURE__*/_react["default"].createElement(_DeleteWidget["default"], {
+        x: x,
+        y: y,
+        id: id,
+        handleWidgetClick: this.handleDelete,
+        points: points
+      }));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var id = nextProps.id,
+          points = nextProps.points,
+          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 || prevState.points.length !== points.length) {
+        if (points.length) {
+          var xList = points.map(function (p) {
+            return p.x;
+          });
+          var yList = points.map(function (p) {
+            return p.y;
+          });
+          var x = Math.min.apply(Math, (0, _toConsumableArray2["default"])(xList));
+          var y = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yList));
+          return {
+            id: id,
+            x: x,
+            y: y,
+            points: points,
+            imageHeight: imageHeight,
+            imageWidth: imageWidth
+          };
+        }
+
+        return {
+          id: '',
+          x: 0,
+          y: 0,
+          points: [],
+          imageHeight: imageHeight,
+          imageWidth: imageWidth
+        };
+      } else {
+        return null;
+      }
+    }
+  }]);
+  return PolComponent;
+}(_react["default"].Component);
+
+var styles = function styles() {
+  return {
+    base: {
+      cursor: 'pointer',
+      opacity: 0.5
+    },
+    circle: {
+      opacity: 4
+    },
+    group: {
+      padding: '12px'
+    }
+  };
+};
+
+PolComponent.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  correct: _propTypes["default"].bool,
+  isDrawing: _propTypes["default"].bool.isRequired,
+  id: _propTypes["default"].string.isRequired,
+  imageHeight: _propTypes["default"].number,
+  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,
+  points: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    x: _propTypes["default"].number,
+    y: _propTypes["default"].number
+  })).isRequired,
+  strokeWidth: _propTypes["default"].number
+};
+PolComponent.defaultProps = {
+  correct: false
+};
+
+var _default = (0, _index.withStyles)(styles)(PolComponent);
+
+exports["default"] = _default;
+//# sourceMappingURL=hotspot-polygon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hotspot-polygon.jsx"],"names":["HOVERED_COLOR","PolComponent","points","xList","map","p","x","yList","y","Math","min","max","getOffset","xOffset","yOffset","reduce","acc","point","length","id","hovered","isDragging","getInitialState","props","e","width","height","isDrawing","onClick","addPolygonPoint","cancelBubble","setState","document","body","style","cursor","updateModel","onDragEnd","target","serialize","state","newPoints","currentPointCoordinate","index","changedIndex","onDeleteShape","classes","correct","hotspotColor","outlineColor","strokeWidth","showPoints","calculatedStrokeWidth","calculatedStroke","group","handleMouseLeave","handleMouseEnter","base","handleClick","onDragStart","handleOnDragEnd","circle","handleOnDragVertex","handleDelete","nextProps","prevState","imageHeight","imageWidth","React","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","arrayOf","shape","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Line, Circle } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DeleteWidget from './DeleteWidget';\n\nconst HOVERED_COLOR = '#00BFFF';\n\nclass PolComponent extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    const { id, points, imageHeight, imageWidth } = nextProps;\n    // we execute this code only if image dimensions changed or an hotspot was added/deleted\n    if (\n      prevState.imageHeight !== nextProps.imageHeight ||\n      prevState.imageWidth !== nextProps.imageWidth ||\n      prevState.id !== nextProps.id ||\n      prevState.points.length !== points.length\n    ) {\n      if (points.length) {\n        const xList = points.map((p) => p.x);\n        const yList = points.map((p) => p.y);\n\n        const x = Math.min(...xList);\n        const y = Math.max(...yList);\n\n        return {\n          id,\n          x,\n          y,\n          points,\n          imageHeight,\n          imageWidth,\n        };\n      }\n\n      return {\n        id: '',\n        x: 0,\n        y: 0,\n        points: [],\n        imageHeight,\n        imageWidth,\n      };\n    } else {\n      return null;\n    }\n  }\n\n  getOffset = (points) => {\n    const xList = points.map((p) => p.x);\n    const yList = points.map((p) => p.y);\n\n    return {\n      x: Math.min(...xList),\n      y: Math.max(...yList),\n    };\n  };\n\n  serialize = (points) => {\n    const { x: xOffset, y: yOffset } = this.getOffset(points);\n\n    return points.reduce((acc, point) => [...acc, point.x - xOffset, point.y - yOffset], []);\n  };\n\n  getInitialState = (points) => {\n    if (points.length) {\n      const { x, y } = this.getOffset(points);\n\n      return {\n        x,\n        y,\n        points,\n      };\n    }\n\n    return {\n      id: '',\n      x: 0,\n      y: 0,\n      points: [],\n    };\n  };\n\n  state = {\n    hovered: false,\n    isDragging: false,\n    ...this.getInitialState(this.props.points),\n  };\n\n  handleClick = (e) => {\n    const { points } = this.props;\n    const xList = points.map((p) => p.x);\n    const yList = points.map((p) => p.y);\n\n    const width = Math.max(...xList) - Math.min(...xList);\n    const height = Math.max(...yList) - Math.min(...yList);\n\n    const { isDrawing, onClick, id } = this.props;\n\n    if (width < 0 && height < 0 && isDrawing) {\n      return;\n    }\n\n    if (isDrawing && id === 'newPolygon') {\n      this.props.addPolygonPoint(e);\n      return;\n    }\n\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    this.setState({ hovered: true });\n    document.body.style.cursor = 'pointer';\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hovered: false });\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e, updateModel = false) => {\n    const { onDragEnd, id } = this.props;\n    const points = e.target.points() || this.serialize(this.state.points);\n\n    const newPoints = points.reduce((acc, currentPointCoordinate, index) => {\n      if (index % 2 === 0 && index + 1 < points.length) {\n        return [\n          ...acc,\n          {\n            x: currentPointCoordinate + e.target.x(),\n            y: points[index + 1] + e.target.y(),\n          },\n        ];\n      }\n\n      return acc;\n    }, []);\n\n    this.setState({\n      points: newPoints,\n      ...this.getOffset(newPoints),\n      isDragging: updateModel ? false : this.state.isDragging,\n    });\n  };\n\n  handleOnDragVertex = (e, changedIndex, updateModel) => {\n    const { onDragEnd, id } = this.props;\n    const { points } = this.state;\n\n    const newPoints = points.map((point, index) =>\n      index === changedIndex ? { x: e.target.x(), y: e.target.y() } : point,\n    );\n\n    this.setState({\n      points: newPoints,\n      ...this.getOffset(newPoints),\n      isDragging: updateModel ? false : this.state.isDragging,\n    });\n\n    if (updateModel) {\n      onDragEnd(id, { points: newPoints });\n    }\n  };\n\n  onDragStart = () => {\n    this.setState({ isDragging: true });\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const { classes, correct, id, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;\n    const { points, x, y, hovered } = this.state;\n    const showPoints = hovered || id === 'newPolygon';\n\n    const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n    const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Line\n          classes={classes.base}\n          points={this.serialize(points)}\n          closed={true}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={calculatedStroke}\n          strokeWidth={calculatedStrokeWidth}\n          onDragStart={this.onDragStart}\n          onDragMove={this.handleOnDragEnd}\n          onDragEnd={(e) => this.handleOnDragEnd(e, true)}\n          x={x}\n          y={y}\n        />\n\n        {showPoints &&\n          points.map((point, index) => (\n            <Circle\n              key={index}\n              className={classes.circle}\n              x={point.x}\n              y={point.y}\n              radius={5}\n              fill={'white'}\n              stroke={HOVERED_COLOR}\n              strokeWidth={1}\n              onClick={this.handleClick}\n              onDragStart={this.onDragStart}\n              onDragMove={(e) => {\n                this.handleOnDragVertex(e, index);\n              }}\n              onDragEnd={(e) => {\n                this.handleOnDragVertex(e, index, true);\n              }}\n              draggable\n            />\n          ))}\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget x={x} y={y} id={id} handleWidgetClick={this.handleDelete} points={points} />\n        )}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n  circle: {\n    opacity: 4,\n  },\n  group: {\n    padding: '12px',\n  },\n});\n\nPolComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  imageHeight: PropTypes.number,\n  imageWidth: PropTypes.number,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  addPolygonPoint: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.arrayOf(\n    PropTypes.shape({\n      x: PropTypes.number,\n      y: PropTypes.number,\n    }),\n  ).isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nPolComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(PolComponent);\n"],"file":"hotspot-polygon.js"}