@pie-element/hotspot 5.15.0 → 5.15.1-next.6

package/configure/lib/hotspot-polygon.js

@@ -31,10 +31,16 @@ var _reactKonva = require("react-konva");
 
 var _index = require("@material-ui/core/styles/index");
 
+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);
 
@@ -50,7 +56,49 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {});
+    (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 {
+        x: 0,
+        y: 0,
+        points: []
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", _objectSpread({
+      hovered: 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) {
@@ -74,32 +122,69 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
       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.state.points;
+      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) {
-          acc.push({
+          return [].concat((0, _toConsumableArray2["default"])(acc), [{
             x: currentPointCoordinate + e.target.x(),
             y: points[index + 1] + e.target.y()
-          });
-          return acc;
-        } else {
-          return acc;
+          }]);
         }
+
+        return acc;
       }, []);
-      onDragEnd(id, {
+
+      _this.setState(_objectSpread({
         points: newPoints
+      }, _this.getOffset(newPoints)));
+
+      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;
       });
+
+      _this.setState(_objectSpread({
+        points: newPoints
+      }, _this.getOffset(newPoints)));
+
+      if (updateModel) {
+        onDragEnd(id, {
+          points: newPoints
+        });
+      }
     });
     return _this;
   }
@@ -107,63 +192,62 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(PolComponent, [{
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          correct = _this$props3.correct,
-          hotspotColor = _this$props3.hotspotColor,
-          outlineColor = _this$props3.outlineColor,
-          _this$props3$strokeWi = _this$props3.strokeWidth,
-          strokeWidth = _this$props3$strokeWi === void 0 ? 5 : _this$props3$strokeWi;
+      var _this2 = this;
+
+      var _this$props4 = this.props,
+          classes = _this$props4.classes,
+          correct = _this$props4.correct,
+          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;
-      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, null, /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
+          y = _this$state.y,
+          hovered = _this$state.hovered;
+      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: points,
+        points: this.serialize(points),
         closed: true,
         fill: hotspotColor,
         onClick: this.handleClick,
         onTap: this.handleClick,
         draggable: true,
-        stroke: outlineColor,
-        strokeWidth: correct ? strokeWidth : 0,
-        onMouseLeave: this.handleMouseLeave,
-        onMouseEnter: this.handleMouseEnter,
-        onDragEnd: this.handleOnDragEnd,
+        stroke: calculatedStroke,
+        strokeWidth: calculatedStrokeWidth,
+        onDragMove: this.handleOnDragEnd,
+        onDragEnd: function onDragEnd(e) {
+          return _this2.handleOnDragEnd(e, true);
+        },
         x: x,
         y: y
+      }), hovered && 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,
+          draggable: true,
+          onDragMove: function onDragMove(e) {
+            _this2.handleOnDragVertex(e, index);
+          },
+          onDragEnd: function onDragEnd(e) {
+            _this2.handleOnDragVertex(e, index, true);
+          }
+        });
       }));
     }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps) {
-      var points = nextProps.points;
-      var xList = points.map(function (p) {
-        return p.x;
-      });
-      var yList = points.map(function (p) {
-        return p.y;
-      });
-      var xOffset = Math.min.apply(Math, (0, _toConsumableArray2["default"])(xList));
-      var yOffset = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yList));
-
-      if (points.length) {
-        return {
-          x: xOffset,
-          y: yOffset,
-          points: points.reduce(function (acc, point) {
-            return acc.concat([point.x - xOffset, point.y - yOffset]);
-          }, [])
-        };
-      }
-
-      return {
-        x: 0,
-        y: 0,
-        points: []
-      };
-    }
   }]);
   return PolComponent;
 }(_react["default"].Component);
@@ -173,6 +257,12 @@ var styles = function styles() {
     base: {
       cursor: 'pointer',
       opacity: 0.5
+    },
+    circle: {
+      opacity: 4
+    },
+    group: {
+      padding: '12px'
     }
   };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-polygon.jsx"],"names":["PolComponent","e","points","props","xList","map","p","x","yList","y","width","Math","max","min","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","onDragEnd","target","state","newPoints","reduce","acc","currentPointCoordinate","index","length","push","classes","correct","hotspotColor","outlineColor","strokeWidth","base","handleClick","handleMouseLeave","handleMouseEnter","handleOnDragEnd","nextProps","xOffset","yOffset","point","concat","React","Component","styles","opacity","propTypes","PropTypes","object","isRequired","bool","string","func","arrayOf","shape","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Line } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nclass PolComponent extends React.Component {\n  static getDerivedStateFromProps(nextProps) {\n    const { points } = nextProps;\n    const xList = points.map((p) => p.x);\n    const yList = points.map((p) => p.y);\n\n    const xOffset = Math.min(...xList);\n    const yOffset = Math.max(...yList);\n\n    if (points.length) {\n      return {\n        x: xOffset,\n        y: yOffset,\n        points: points.reduce((acc, point) => {\n          return acc.concat([point.x - xOffset, point.y - yOffset]);\n        }, []),\n      };\n    }\n\n    return {\n      x: 0,\n      y: 0,\n      points: [],\n    };\n  }\n\n  state = {};\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    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    document.body.style.cursor = 'pointer';\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e) => {\n    const { onDragEnd, id } = this.props;\n    const points = e.target.points() || this.state.points;\n\n    const newPoints = points.reduce((acc, currentPointCoordinate, index) => {\n      if (index % 2 === 0 && index + 1 < points.length) {\n        acc.push({\n          x: currentPointCoordinate + e.target.x(),\n          y: points[index + 1] + e.target.y(),\n        });\n\n        return acc;\n      } else {\n        return acc;\n      }\n    }, []);\n\n    onDragEnd(id, {\n      points: newPoints,\n    });\n  };\n\n  render() {\n    const { classes, correct, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;\n    const { points, x, y } = this.state;\n\n    return (\n      <Group>\n        <Line\n          classes={classes.base}\n          points={points}\n          closed={true}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={outlineColor}\n          strokeWidth={correct ? strokeWidth : 0}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          onDragEnd={this.handleOnDragEnd}\n          x={x}\n          y={y}\n        />\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\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  hotspotColor: PropTypes.string.isRequired,\n  onClick: 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"}
+{"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","hovered","getInitialState","props","e","width","height","isDrawing","onClick","id","cancelBubble","setState","document","body","style","cursor","updateModel","onDragEnd","target","serialize","state","newPoints","currentPointCoordinate","index","changedIndex","classes","correct","hotspotColor","outlineColor","strokeWidth","calculatedStrokeWidth","calculatedStroke","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","circle","handleOnDragVertex","React","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","func","arrayOf","shape","number","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';\n\nconst HOVERED_COLOR = '#00BFFF';\n\nclass PolComponent extends React.Component {\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      x: 0,\n      y: 0,\n      points: [],\n    };\n  };\n\n  state = {\n    hovered: 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    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({ points: newPoints, ...this.getOffset(newPoints) });\n\n    if (updateModel) {\n      onDragEnd(id, { points: newPoints });\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({ points: newPoints, ...this.getOffset(newPoints) });\n\n    if (updateModel) {\n      onDragEnd(id, { points: newPoints });\n    }\n  };\n\n  render() {\n    const { classes, correct, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;\n    const { points, x, y, hovered } = this.state;\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          onDragMove={this.handleOnDragEnd}\n          onDragEnd={(e) => this.handleOnDragEnd(e, true)}\n          x={x}\n          y={y}\n        />\n\n        {hovered &&\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              draggable\n              onDragMove={(e) => {\n                this.handleOnDragVertex(e, index);\n              }}\n              onDragEnd={(e) => {\n                this.handleOnDragVertex(e, index, true);\n              }}\n            />\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  hotspotColor: PropTypes.string.isRequired,\n  onClick: 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"}

package/configure/lib/hotspot-rectangle.js

@@ -38,16 +38,11 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(RectComponent);
 
-  function RectComponent() {
+  function RectComponent(props) {
     var _this;
 
     (0, _classCallCheck2["default"])(this, RectComponent);
-
-    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));
+    _this = _super.call(this, props);
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (e) {
       var _this$props = _this.props,
           width = _this$props.width,
@@ -65,8 +60,20 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
       document.body.style.cursor = 'pointer';
+
+      _this.setState({
+        hovered: true
+      });
+
+      _this.trRef.current.setNode(_this.shapeRef.current);
+
+      _this.trRef.current.getLayer().batchDraw();
     });
     (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) {
@@ -78,25 +85,57 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
         y: e.target.y()
       });
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResizeEnd", function () {
+      var _this$props3 = _this.props,
+          onDragEnd = _this$props3.onDragEnd,
+          id = _this$props3.id; // transformer is changing scale of the node
+      // and NOT its width or height
+      // but in the store we have only width and height
+      // to match the data better we will reset scale on transform end
+
+      var node = _this.shapeRef.current;
+      var scaleX = node.scaleX();
+      var scaleY = node.scaleY(); // we will reset it back
+
+      node.scaleX(1);
+      node.scaleY(1);
+      onDragEnd(id, {
+        x: node.x(),
+        y: node.y(),
+        // set minimal value
+        width: Math.max(5, node.width() * scaleX),
+        height: Math.max(node.height() * scaleY)
+      });
+    });
+    _this.state = {
+      hovered: false
+    };
+    _this.shapeRef = /*#__PURE__*/_react["default"].createRef();
+    _this.trRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
 
   (0, _createClass2["default"])(RectComponent, [{
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          correct = _this$props3.correct,
-          height = _this$props3.height,
-          hotspotColor = _this$props3.hotspotColor,
-          outlineColor = _this$props3.outlineColor,
-          width = _this$props3.width,
-          x = _this$props3.x,
-          y = _this$props3.y,
-          _this$props3$strokeWi = _this$props3.strokeWidth,
-          strokeWidth = _this$props3$strokeWi === void 0 ? 5 : _this$props3$strokeWi;
-      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, null, /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
+      var _this$props4 = this.props,
+          classes = _this$props4.classes,
+          correct = _this$props4.correct,
+          height = _this$props4.height,
+          hotspotColor = _this$props4.hotspotColor,
+          outlineColor = _this$props4.outlineColor,
+          width = _this$props4.width,
+          x = _this$props4.x,
+          y = _this$props4.y,
+          _this$props4$strokeWi = _this$props4.strokeWidth,
+          strokeWidth = _this$props4$strokeWi === void 0 ? 5 : _this$props4$strokeWi;
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
+        classes: classes.group,
+        onMouseLeave: this.handleMouseLeave,
+        onMouseEnter: this.handleMouseEnter
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
         classes: classes.base,
+        ref: this.shapeRef,
         width: width,
         height: height,
         fill: hotspotColor,
@@ -105,11 +144,21 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
         draggable: true,
         stroke: outlineColor,
         strokeWidth: correct ? strokeWidth : 0,
-        onMouseLeave: this.handleMouseLeave,
-        onMouseEnter: this.handleMouseEnter,
         onDragEnd: this.handleOnDragEnd,
+        onTransformEnd: this.onResizeEnd,
         x: x,
         y: y
+      }), this.state.hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Transformer, {
+        ref: this.trRef,
+        rotateEnabled: false,
+        boundBoxFunc: function boundBoxFunc(oldBox, newBox) {
+          // limit resize
+          if (newBox.width < 10 || newBox.height < 10) {
+            return oldBox;
+          }
+
+          return newBox;
+        }
       }));
     }
   }]);
@@ -121,6 +170,9 @@ var styles = function styles() {
     base: {
       cursor: 'pointer',
       opacity: 0.5
+    },
+    group: {
+      padding: '12px'
     }
   };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-rectangle.jsx"],"names":["RectComponent","e","props","width","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","onDragEnd","x","target","y","classes","correct","hotspotColor","outlineColor","strokeWidth","base","handleClick","handleMouseLeave","handleMouseEnter","handleOnDragEnd","React","Component","styles","opacity","propTypes","PropTypes","object","isRequired","bool","string","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nclass RectComponent extends React.Component {\n  handleClick = (e) => {\n    const { width, height, isDrawing, onClick, id } = this.props;\n    if (width < 0 && height < 0 && isDrawing) {\n      return;\n    }\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    document.body.style.cursor = 'pointer';\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e) => {\n    const { onDragEnd, id } = this.props;\n\n    onDragEnd(id, {\n      x: e.target.x(),\n      y: e.target.y(),\n    });\n  };\n\n  render() {\n    const { classes, correct, height, hotspotColor, outlineColor, width, x, y, strokeWidth = 5 } = this.props;\n\n    return (\n      <Group>\n        <Rect\n          classes={classes.base}\n          width={width}\n          height={height}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={outlineColor}\n          strokeWidth={correct ? strokeWidth : 0}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          onDragEnd={this.handleOnDragEnd}\n          x={x}\n          y={y}\n        />\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n});\n\nRectComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nRectComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"hotspot-rectangle.js"}
+{"version":3,"sources":["../src/hotspot-rectangle.jsx"],"names":["RectComponent","props","e","width","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","x","target","y","node","scaleX","scaleY","Math","max","state","React","createRef","classes","correct","hotspotColor","outlineColor","strokeWidth","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","onResizeEnd","oldBox","newBox","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group, Transformer } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n    this.shapeRef = React.createRef();\n    this.trRef = React.createRef();\n  }\n\n  handleClick = (e) => {\n    const { width, height, isDrawing, onClick, id } = this.props;\n    if (width < 0 && height < 0 && isDrawing) {\n      return;\n    }\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    document.body.style.cursor = 'pointer';\n    this.setState({ hovered: true });\n    this.trRef.current.setNode(this.shapeRef.current);\n    this.trRef.current.getLayer().batchDraw();\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hovered: false });\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e) => {\n    const { onDragEnd, id } = this.props;\n\n    onDragEnd(id, {\n      x: e.target.x(),\n      y: e.target.y(),\n    });\n  };\n\n  onResizeEnd = () => {\n    const { onDragEnd, id } = this.props;\n    // transformer is changing scale of the node\n    // and NOT its width or height\n    // but in the store we have only width and height\n    // to match the data better we will reset scale on transform end\n    const node = this.shapeRef.current;\n    const scaleX = node.scaleX();\n    const scaleY = node.scaleY();\n\n    // we will reset it back\n    node.scaleX(1);\n    node.scaleY(1);\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      // set minimal value\n      width: Math.max(5, node.width() * scaleX),\n      height: Math.max(node.height() * scaleY),\n    });\n  };\n\n  render() {\n    const { classes, correct, height, hotspotColor, outlineColor, width, x, y, strokeWidth = 5 } = this.props;\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Rect\n          classes={classes.base}\n          ref={this.shapeRef}\n          width={width}\n          height={height}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={outlineColor}\n          strokeWidth={correct ? strokeWidth : 0}\n          onDragEnd={this.handleOnDragEnd}\n          onTransformEnd={this.onResizeEnd}\n          x={x}\n          y={y}\n        />\n        {this.state.hovered && (\n          <Transformer\n            ref={this.trRef}\n            rotateEnabled={false}\n            boundBoxFunc={(oldBox, newBox) => {\n              // limit resize\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n\n  group: {\n    padding: '12px',\n  },\n});\n\nRectComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nRectComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"hotspot-rectangle.js"}

package/configure/package.json

@@ -10,8 +10,8 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "^11.9.7",
-    "@pie-lib/editable-html": "^10.0.2",
+    "@pie-lib/config-ui": "^11.9.8",
+    "@pie-lib/editable-html": "^10.0.3",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/hotspot-polygon.jsx

@@ -1,24 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Group, Line } from 'react-konva';
+import { Group, Line, Circle } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles/index';
 
+const HOVERED_COLOR = '#00BFFF';
+
 class PolComponent extends React.Component {
-  static getDerivedStateFromProps(nextProps) {
-    const { points } = nextProps;
+  getOffset = (points) => {
     const xList = points.map((p) => p.x);
     const yList = points.map((p) => p.y);
 
-    const xOffset = Math.min(...xList);
-    const yOffset = Math.max(...yList);
+    return {
+      x: Math.min(...xList),
+      y: Math.max(...yList),
+    };
+  };
+
+  serialize = (points) => {
+    const { x: xOffset, y: yOffset } = this.getOffset(points);
+
+    return points.reduce((acc, point) => [...acc, point.x - xOffset, point.y - yOffset], []);
+  };
 
+  getInitialState = (points) => {
     if (points.length) {
+      const { x, y } = this.getOffset(points);
+
       return {
-        x: xOffset,
-        y: yOffset,
-        points: points.reduce((acc, point) => {
-          return acc.concat([point.x - xOffset, point.y - yOffset]);
-        }, []),
+        x,
+        y,
+        points,
       };
     }
 
@@ -27,9 +38,12 @@ class PolComponent extends React.Component {
       y: 0,
       points: [],
     };
-  }
+  };
 
-  state = {};
+  state = {
+    hovered: false,
+    ...this.getInitialState(this.props.points),
+  };
 
   handleClick = (e) => {
     const { points } = this.props;
@@ -50,57 +64,100 @@ class PolComponent extends React.Component {
   };
 
   handleMouseEnter = () => {
+    this.setState({ hovered: true });
     document.body.style.cursor = 'pointer';
   };
 
   handleMouseLeave = () => {
+    this.setState({ hovered: false });
     document.body.style.cursor = 'default';
   };
 
-  handleOnDragEnd = (e) => {
+  handleOnDragEnd = (e, updateModel = false) => {
     const { onDragEnd, id } = this.props;
-    const points = e.target.points() || this.state.points;
+    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) {
-        acc.push({
-          x: currentPointCoordinate + e.target.x(),
-          y: points[index + 1] + e.target.y(),
-        });
-
-        return acc;
-      } else {
-        return acc;
+        return [
+          ...acc,
+          {
+            x: currentPointCoordinate + e.target.x(),
+            y: points[index + 1] + e.target.y(),
+          },
+        ];
       }
+
+      return acc;
     }, []);
 
-    onDragEnd(id, {
-      points: newPoints,
-    });
+    this.setState({ points: newPoints, ...this.getOffset(newPoints) });
+
+    if (updateModel) {
+      onDragEnd(id, { points: newPoints });
+    }
+  };
+
+  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) });
+
+    if (updateModel) {
+      onDragEnd(id, { points: newPoints });
+    }
   };
 
   render() {
     const { classes, correct, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;
-    const { points, x, y } = this.state;
+    const { points, x, y, hovered } = this.state;
+
+    const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;
+    const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';
 
     return (
-      <Group>
+      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
         <Line
           classes={classes.base}
-          points={points}
+          points={this.serialize(points)}
           closed={true}
           fill={hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable
-          stroke={outlineColor}
-          strokeWidth={correct ? strokeWidth : 0}
-          onMouseLeave={this.handleMouseLeave}
-          onMouseEnter={this.handleMouseEnter}
-          onDragEnd={this.handleOnDragEnd}
+          stroke={calculatedStroke}
+          strokeWidth={calculatedStrokeWidth}
+          onDragMove={this.handleOnDragEnd}
+          onDragEnd={(e) => this.handleOnDragEnd(e, true)}
           x={x}
           y={y}
         />
+
+        {hovered &&
+          points.map((point, index) => (
+            <Circle
+              key={index}
+              className={classes.circle}
+              x={point.x}
+              y={point.y}
+              radius={5}
+              fill={'white'}
+              stroke={HOVERED_COLOR}
+              strokeWidth={1}
+              draggable
+              onDragMove={(e) => {
+                this.handleOnDragVertex(e, index);
+              }}
+              onDragEnd={(e) => {
+                this.handleOnDragVertex(e, index, true);
+              }}
+            />
+          ))}
       </Group>
     );
   }
@@ -111,6 +168,12 @@ const styles = () => ({
     cursor: 'pointer',
     opacity: 0.5,
   },
+  circle: {
+    opacity: 4,
+  },
+  group: {
+    padding: '12px',
+  },
 });
 
 PolComponent.propTypes = {

package/configure/src/hotspot-rectangle.jsx

@@ -1,9 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Rect, Group } from 'react-konva';
+import { Rect, Group, Transformer } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles/index';
 
 class RectComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hovered: false,
+    };
+    this.shapeRef = React.createRef();
+    this.trRef = React.createRef();
+  }
+
   handleClick = (e) => {
     const { width, height, isDrawing, onClick, id } = this.props;
     if (width < 0 && height < 0 && isDrawing) {
@@ -15,9 +24,13 @@ class RectComponent extends React.Component {
 
   handleMouseEnter = () => {
     document.body.style.cursor = 'pointer';
+    this.setState({ hovered: true });
+    this.trRef.current.setNode(this.shapeRef.current);
+    this.trRef.current.getLayer().batchDraw();
   };
 
   handleMouseLeave = () => {
+    this.setState({ hovered: false });
     document.body.style.cursor = 'default';
   };
 
@@ -30,13 +43,36 @@ class RectComponent extends React.Component {
     });
   };
 
+  onResizeEnd = () => {
+    const { onDragEnd, id } = this.props;
+    // transformer is changing scale of the node
+    // and NOT its width or height
+    // but in the store we have only width and height
+    // to match the data better we will reset scale on transform end
+    const node = this.shapeRef.current;
+    const scaleX = node.scaleX();
+    const scaleY = node.scaleY();
+
+    // we will reset it back
+    node.scaleX(1);
+    node.scaleY(1);
+    onDragEnd(id, {
+      x: node.x(),
+      y: node.y(),
+      // set minimal value
+      width: Math.max(5, node.width() * scaleX),
+      height: Math.max(node.height() * scaleY),
+    });
+  };
+
   render() {
     const { classes, correct, height, hotspotColor, outlineColor, width, x, y, strokeWidth = 5 } = this.props;
 
     return (
-      <Group>
+      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
         <Rect
           classes={classes.base}
+          ref={this.shapeRef}
           width={width}
           height={height}
           fill={hotspotColor}
@@ -45,12 +81,24 @@ class RectComponent extends React.Component {
           draggable
           stroke={outlineColor}
           strokeWidth={correct ? strokeWidth : 0}
-          onMouseLeave={this.handleMouseLeave}
-          onMouseEnter={this.handleMouseEnter}
           onDragEnd={this.handleOnDragEnd}
+          onTransformEnd={this.onResizeEnd}
           x={x}
           y={y}
         />
+        {this.state.hovered && (
+          <Transformer
+            ref={this.trRef}
+            rotateEnabled={false}
+            boundBoxFunc={(oldBox, newBox) => {
+              // limit resize
+              if (newBox.width < 10 || newBox.height < 10) {
+                return oldBox;
+              }
+              return newBox;
+            }}
+          />
+        )}
       </Group>
     );
   }
@@ -61,6 +109,10 @@ const styles = () => ({
     cursor: 'pointer',
     opacity: 0.5,
   },
+
+  group: {
+    padding: '12px',
+  },
 });
 
 RectComponent.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "5.15.0",
+  "version": "5.15.1-next.6+516922dd4",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -22,7 +22,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "601ddbccecfff533d0670698fe99ce91759165fe",
+  "gitHead": "516922dd4bda626da213aaa2c2ea0fde17acedc0",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },