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

package/configure/lib/hotspot-polygon.js

@@ -1,99 +1,47 @@
 "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"));
-
+exports.default = void 0;
 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 _ReactKonvaCore = require("react-konva/lib/ReactKonvaCore");
-
 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;
-      });
+const HOVERED_COLOR = '#00BFFF';
+class PolComponent extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "getOffset", points => {
+      const xList = points.map(p => p.x);
+      const yList = points.map(p => p.y);
       return {
-        x: Math.min.apply(Math, (0, _toConsumableArray2["default"])(xList)),
-        y: Math.max.apply(Math, (0, _toConsumableArray2["default"])(yList))
+        x: Math.min(...xList),
+        y: Math.max(...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)(this, "serialize", points => {
+      const {
+        x: xOffset,
+        y: yOffset
+      } = this.getOffset(points);
+      return points.reduce((acc, point) => [...acc, point.x - xOffset, point.y - yOffset], []);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getInitialState", function (points) {
+    (0, _defineProperty2.default)(this, "getInitialState", points => {
       if (points.length) {
-        var _this$getOffset2 = _this.getOffset(points),
-            x = _this$getOffset2.x,
-            y = _this$getOffset2.y;
-
+        const {
+          x,
+          y
+        } = this.getOffset(points);
         return {
-          x: x,
-          y: y,
-          points: points
+          x,
+          y,
+          points
         };
       }
-
       return {
         id: '',
         x: 0,
@@ -101,299 +49,246 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
         points: []
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", _objectSpread({
+    (0, _defineProperty2.default)(this, "state", {
       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;
-
+      isDragging: false,
+      ...this.getInitialState(this.props.points)
+    });
+    (0, _defineProperty2.default)(this, "handleClick", e => {
+      const {
+        points
+      } = this.props;
+      const xList = points.map(p => p.x);
+      const yList = points.map(p => p.y);
+      const width = Math.max(...xList) - Math.min(...xList);
+      const height = Math.max(...yList) - Math.min(...yList);
+      const {
+        isDrawing,
+        onClick,
+        id
+      } = this.props;
       if (width < 0 && height < 0 && isDrawing) {
         return;
       }
-
       if (isDrawing && id === 'newPolygon') {
-        _this.props.addPolygonPoint(e);
-
+        this.props.addPolygonPoint(e);
         return;
       }
-
       e.cancelBubble = true;
       onClick(id);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
-      _this.setState({
+    (0, _defineProperty2.default)(this, "handleMouseEnter", () => {
+      this.setState({
         hovered: true
       });
-
       document.body.style.cursor = 'pointer';
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
-      _this.setState({
+    (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
+      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) {
+    (0, _defineProperty2.default)(this, "handleOnDragEnd", (e, updateModel = false) => {
+      const {
+        onDragEnd,
+        id
+      } = this.props;
+      const points = e.target.points() || this.serialize(this.state.points);
+      const newPoints = points.reduce((acc, currentPointCoordinate, index) => {
         if (index % 2 === 0 && index + 1 < points.length) {
-          return [].concat((0, _toConsumableArray2["default"])(acc), [{
+          return [...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
-      }));
-
+      this.setState({
+        points: newPoints,
+        ...this.getOffset(newPoints),
+        isDragging: updateModel ? false : this.state.isDragging
+      });
       if (updateModel) {
         onDragEnd(id, {
           points: newPoints
         });
       }
     });
-    (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;
+    (0, _defineProperty2.default)(this, "handleOnDragVertex", (e, changedIndex, updateModel) => {
+      const {
+        onDragEnd,
+        id
+      } = this.props;
+      const {
+        points
+      } = this.state;
+      const newPoints = points.map((point, index) => index === changedIndex ? {
+        x: e.target.x(),
+        y: e.target.y()
+      } : point);
+      this.setState({
+        points: newPoints,
+        ...this.getOffset(newPoints),
+        isDragging: updateModel ? false : this.state.isDragging
       });
-
-      _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({
+    (0, _defineProperty2.default)(this, "onDragStart", () => {
+      this.setState({
         isDragging: true
       });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDelete", function (id) {
-      var onDeleteShape = _this.props.onDeleteShape;
+    (0, _defineProperty2.default)(this, "handleDelete", id => {
+      const {
+        onDeleteShape
+      } = this.props;
       onDeleteShape(id);
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(PolComponent, [{
-    key: "getBoundingBox",
-    value: // serialize(points) {
-    //   return points.reduce((acc, point) => [...acc, point.x, point.y], []);
-    // }
-    function getBoundingBox(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 maxX = Math.max.apply(Math, (0, _toConsumableArray2["default"])(xValues));
-      var minY = Math.min.apply(Math, (0, _toConsumableArray2["default"])(yValues));
-      var maxY = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yValues));
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      id,
+      points,
+      imageHeight,
+      imageWidth
+    } = nextProps;
+    // we execute this code only if image dimensions changed or an hotspot was added/deleted
+    if (prevState.imageHeight !== imageHeight || prevState.imageWidth !== imageWidth || prevState.id !== nextProps.id || JSON.stringify(prevState.points) !== JSON.stringify(points)) {
+      const xList = points.map(p => p.x);
+      const yList = points.map(p => p.y);
+      const x = Math.min(...xList);
+      const y = Math.max(...yList);
       return {
-        x: minX,
-        y: minY,
-        width: maxX - minX,
-        height: maxY - minY
+        id,
+        x,
+        y,
+        points,
+        imageHeight,
+        imageWidth
       };
     }
-  }, {
-    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,
-          selectedHotspotColor = _this$props4.selectedHotspotColor,
-          hoverOutlineColor = _this$props4.hoverOutlineColor,
-          _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 isInProgress = id === 'newPolygon';
-      var showPoints = hovered || id === 'newPolygon';
-      var calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;
-      var calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';
-      var boundingBox = this.getBoundingBox(points);
-      var calculatedFill = correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor;
-      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
-        classes: classes.group,
-        onMouseLeave: this.handleMouseLeave,
-        onMouseEnter: this.handleMouseEnter
-      }, hoverOutlineColor && hovered && /*#__PURE__*/_react["default"].createElement(_ReactKonvaCore.Rect, {
-        x: boundingBox.x,
-        y: boundingBox.y,
-        width: boundingBox.width,
-        height: boundingBox.height,
-        stroke: hoverOutlineColor,
-        strokeWidth: 2,
-        listening: false
-      }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
-        classes: classes.base,
-        points: this.serialize(points),
-        closed: !isInProgress,
-        fill: isInProgress ? 'transparent' : calculatedFill,
-        onClick: this.handleClick,
-        onTap: this.handleClick,
-        draggable: true,
-        stroke: isInProgress ? outlineColor : calculatedStroke,
-        strokeWidth: isInProgress ? 1 : 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: index === 0 && id === 'newPolygon' ? 'blue' : '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 !== imageHeight || prevState.imageWidth !== imageWidth || prevState.id !== nextProps.id || JSON.stringify(prevState.points) !== JSON.stringify(points)) {
-        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 null;
-    }
-  }]);
-  return PolComponent;
-}(_react["default"].Component);
-
-var styles = function styles() {
-  return {
-    base: {
-      cursor: 'pointer',
+    return null;
+  }
+  // serialize(points) {
+  //   return points.reduce((acc, point) => [...acc, point.x, point.y], []);
+  // }
+
+  getBoundingBox(points) {
+    const xValues = points.map(point => point.x);
+    const yValues = points.map(point => point.y);
+    const minX = Math.min(...xValues);
+    const maxX = Math.max(...xValues);
+    const minY = Math.min(...yValues);
+    const maxY = Math.max(...yValues);
+    return {
+      x: minX,
+      y: minY,
+      width: maxX - minX,
+      height: maxY - minY
+    };
+  }
+  render() {
+    const {
+      correct,
+      id,
+      hotspotColor,
+      outlineColor,
+      selectedHotspotColor,
+      hoverOutlineColor,
+      strokeWidth = 5
+    } = this.props;
+    const {
+      points,
+      x,
+      y,
+      hovered
+    } = this.state;
+    const isInProgress = id === 'newPolygon';
+    const showPoints = hovered || id === 'newPolygon';
+    const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;
+    const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';
+    const boundingBox = this.getBoundingBox(points);
+    const calculatedFill = correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor;
+    return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
+      onMouseLeave: this.handleMouseLeave,
+      onMouseEnter: this.handleMouseEnter
+    }, hoverOutlineColor && hovered && /*#__PURE__*/_react.default.createElement(_ReactKonvaCore.Rect, {
+      x: boundingBox.x,
+      y: boundingBox.y,
+      width: boundingBox.width,
+      height: boundingBox.height,
+      stroke: hoverOutlineColor,
+      strokeWidth: 2,
+      listening: false
+    }), /*#__PURE__*/_react.default.createElement(_reactKonva.Line, {
+      points: this.serialize(points),
+      closed: !isInProgress,
+      fill: isInProgress ? 'transparent' : calculatedFill,
+      onClick: this.handleClick,
+      onTap: this.handleClick,
+      draggable: true,
+      stroke: isInProgress ? outlineColor : calculatedStroke,
+      strokeWidth: isInProgress ? 1 : calculatedStrokeWidth,
+      onDragStart: this.onDragStart,
+      onDragMove: this.handleOnDragEnd,
+      onDragEnd: e => this.handleOnDragEnd(e, true),
+      x: x,
+      y: y,
       opacity: 0.5
-    },
-    circle: {
+    }), showPoints && points.map((point, index) => /*#__PURE__*/_react.default.createElement(_reactKonva.Circle, {
+      key: index,
+      x: point.x,
+      y: point.y,
+      radius: 5,
+      fill: index === 0 && id === 'newPolygon' ? 'blue' : 'white',
+      stroke: HOVERED_COLOR,
+      strokeWidth: 1,
+      onClick: this.handleClick,
+      onDragStart: this.onDragStart,
+      onDragMove: e => {
+        this.handleOnDragVertex(e, index);
+      },
+      onDragEnd: e => {
+        this.handleOnDragVertex(e, index, true);
+      },
+      draggable: true,
       opacity: 4
-    },
-    group: {
-      padding: '12px'
-    }
-  };
-};
-
+    })), !this.state.isDragging && this.state.hovered && /*#__PURE__*/_react.default.createElement(_DeleteWidget.default, {
+      x: x,
+      y: y,
+      id: id,
+      handleWidgetClick: this.handleDelete,
+      points: points
+    }));
+  }
+}
 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,
-  selectedHotspotColor: _propTypes["default"].string,
-  hoverOutlineColor: _propTypes["default"].string,
-  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
+  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,
+  selectedHotspotColor: _propTypes.default.string,
+  hoverOutlineColor: _propTypes.default.string,
+  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
+  strokeWidth: _propTypes.default.number
 };
 PolComponent.defaultProps = {
   correct: false
 };
-
-var _default = (0, _index.withStyles)(styles)(PolComponent);
-
-exports["default"] = _default;
+var _default = exports.default = PolComponent;
 //# sourceMappingURL=hotspot-polygon.js.map