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

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

@@ -1 +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","cancelBubble","setState","document","body","style","cursor","updateModel","onDragEnd","target","serialize","state","newPoints","currentPointCoordinate","index","changedIndex","onDeleteShape","classes","correct","hotspotColor","outlineColor","strokeWidth","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    ) {\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    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\n    const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n    const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\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        {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              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\n            x={x}\n            y={y}\n            id={id}\n            handleWidgetClick={this.handleDelete}\n            points={points}\n            outlineColor={outlineColor}\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  imageHeight: PropTypes.number,\n  imageWidth: PropTypes.number,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: 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"}
+{"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\n            x={x}\n            y={y}\n            id={id}\n            handleWidgetClick={this.handleDelete}\n            points={points}\n            outlineColor={outlineColor}\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  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"}

package/configure/lib/shapes/circle.js

@@ -0,0 +1,96 @@
+"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 CircleShape = /*#__PURE__*/function () {
+  function CircleShape() {
+    (0, _classCallCheck2["default"])(this, CircleShape);
+  }
+
+  (0, _createClass2["default"])(CircleShape, null, [{
+    key: "create",
+    value: function create(shapes, e) {
+      var newShapes = (0, _toConsumableArray2["default"])(shapes);
+      var highestId = Math.max.apply(Math, (0, _toConsumableArray2["default"])(newShapes.map(function (shape) {
+        return parseInt(shape.id);
+      })).concat([0]));
+      var newCircle = {
+        id: "".concat(highestId + 1),
+        radius: 0,
+        x: e.evt.layerX,
+        y: e.evt.layerY,
+        group: 'circles',
+        index: newShapes.length
+      };
+      newShapes.push(newCircle);
+      return {
+        newShapes: newShapes,
+        isDrawing: true,
+        isDrawingShapeId: newCircle.id
+      };
+    }
+  }, {
+    key: "finalizeCreation",
+    value: function finalizeCreation(state, props) {
+      var currentShapeIndex = state.shapes.findIndex(function (shape) {
+        return shape.id === state.isDrawingShapeId;
+      });
+
+      if (currentShapeIndex !== -1) {
+        var currentShape = state.shapes[currentShapeIndex];
+        var updatedShapes = (0, _toConsumableArray2["default"])(props.shapes);
+
+        if (currentShape.radius > 0) {
+          updatedShapes.push(currentShape);
+          return {
+            isDrawing: false,
+            stateShapes: false,
+            isDrawingShapeId: undefined,
+            shapes: updatedShapes
+          };
+        }
+      }
+
+      return state;
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(state, e) {
+      var isDrawing = state.isDrawing,
+          isDrawingShapeId = state.isDrawingShapeId,
+          shapes = state.shapes;
+
+      if (isDrawing) {
+        var tempShapes = (0, _toConsumableArray2["default"])(shapes);
+        var resizingShapeIndex = tempShapes.findIndex(function (shape) {
+          return shape.id === isDrawingShapeId;
+        });
+
+        if (resizingShapeIndex !== -1) {
+          var resizingShape = tempShapes[resizingShapeIndex];
+          resizingShape.radius = Math.sqrt(Math.pow(e.evt.layerX - resizingShape.x, 2) + Math.pow(e.evt.layerY - resizingShape.y, 2));
+          return {
+            shapes: tempShapes
+          };
+        }
+      }
+
+      return state;
+    }
+  }]);
+  return CircleShape;
+}();
+
+exports["default"] = CircleShape;
+//# sourceMappingURL=circle.js.map

package/configure/lib/shapes/circle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shapes/circle.js"],"names":["CircleShape","shapes","e","newShapes","highestId","Math","max","map","shape","parseInt","id","newCircle","radius","x","evt","layerX","y","layerY","group","index","length","push","isDrawing","isDrawingShapeId","state","props","currentShapeIndex","findIndex","currentShape","updatedShapes","stateShapes","undefined","tempShapes","resizingShapeIndex","resizingShape","sqrt","pow"],"mappings":"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","sourcesContent":["export default class CircleShape {\n  static create(shapes, e) {\n    const newShapes = [...shapes];\n    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0);\n    const newCircle = {\n      id: `${highestId + 1}`,\n      radius: 0,\n      x: e.evt.layerX,\n      y: e.evt.layerY,\n      group: 'circles',\n      index: newShapes.length,\n    };\n\n    newShapes.push(newCircle);\n\n    return {\n      newShapes,\n      isDrawing: true,\n      isDrawingShapeId: newCircle.id,\n    };\n  }\n\n  static finalizeCreation(state, props) {\n    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (currentShapeIndex !== -1) {\n      const currentShape = state.shapes[currentShapeIndex];\n      const updatedShapes = [...props.shapes];\n\n      if (currentShape.radius > 0) {\n        updatedShapes.push(currentShape);\n\n        return {\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n          shapes: updatedShapes,\n        };\n      }\n    }\n\n    return state;\n  }\n\n  static handleMouseMove(state, e) {\n    const { isDrawing, isDrawingShapeId, shapes } = state;\n\n    if (isDrawing) {\n      const tempShapes = [...shapes];\n      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);\n\n      if (resizingShapeIndex !== -1) {\n        const resizingShape = tempShapes[resizingShapeIndex];\n\n        resizingShape.radius = Math.sqrt(\n          Math.pow(e.evt.layerX - resizingShape.x, 2) + Math.pow(e.evt.layerY - resizingShape.y, 2),\n        );\n\n        return {\n          shapes: tempShapes,\n        };\n      }\n    }\n\n    return state;\n  }\n}\n"],"file":"circle.js"}

package/configure/lib/shapes/polygon.js

@@ -0,0 +1,111 @@
+"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 PolygonShape = /*#__PURE__*/function () {
+  function PolygonShape() {
+    (0, _classCallCheck2["default"])(this, PolygonShape);
+  }
+
+  (0, _createClass2["default"])(PolygonShape, null, [{
+    key: "create",
+    value: function create(shapes, e) {
+      var newShapes = (0, _toConsumableArray2["default"])(shapes);
+      var newPolygon = {
+        id: 'newPolygon',
+        points: [{
+          x: e.evt.layerX,
+          y: e.evt.layerY
+        }],
+        group: 'polygons',
+        index: newShapes.length
+      };
+      newShapes.push(newPolygon);
+      return {
+        shapes: newShapes,
+        isDrawing: true,
+        isDrawingShapeId: newPolygon.id
+      };
+    }
+  }, {
+    key: "addPoint",
+    value: function addPoint(state, e, onPolygonComplete) {
+      // Number of pixels allowed to determine if the first point was clicked
+      var clickDelta = 5;
+      var shapesCopy = JSON.parse(JSON.stringify(state.shapes));
+      var currentShapeIndex = shapesCopy.findIndex(function (shape) {
+        return shape.id === state.isDrawingShapeId;
+      });
+
+      if (currentShapeIndex !== -1) {
+        var currentShape = shapesCopy[currentShapeIndex];
+
+        if (currentShape.points && Array.isArray(currentShape.points)) {
+          var firstPoint = currentShape.points[0]; // If click is close enough to the first point (within clickDelta pixels), close the polygon
+
+          if (Math.abs(firstPoint.x - e.evt.layerX) <= clickDelta && Math.abs(firstPoint.y - e.evt.layerY) <= clickDelta) {
+            return PolygonShape.finalizeCreation(state, onPolygonComplete);
+          }
+
+          currentShape.points.push({
+            x: e.evt.layerX,
+            y: e.evt.layerY
+          });
+          shapesCopy[currentShapeIndex] = currentShape;
+          return {
+            shapes: shapesCopy
+          };
+        }
+      }
+
+      return state;
+    }
+  }, {
+    key: "finalizeCreation",
+    value: function finalizeCreation(state, onPolygonComplete) {
+      var shapes = state.shapes;
+      var tempShapes = (0, _toConsumableArray2["default"])(shapes);
+      var highestId = Math.max.apply(Math, (0, _toConsumableArray2["default"])(state.shapes.map(function (shape) {
+        return parseInt(shape.id) || 0;
+      })).concat([0]));
+      var polygonIndex = tempShapes.findIndex(function (shape) {
+        return shape.id === state.isDrawingShapeId;
+      });
+
+      if (polygonIndex !== -1 && tempShapes[polygonIndex].points.length > 2) {
+        var completedPolygon = tempShapes[polygonIndex];
+        completedPolygon.id = "".concat(highestId + 1);
+        onPolygonComplete(tempShapes);
+        return {
+          isDrawing: false,
+          shapes: tempShapes,
+          isDrawingShapeId: undefined
+        };
+      }
+
+      return state;
+    } // No need to update anything on mouse move,
+    // but it's here if we need to add any logic later.
+
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(state, e) {
+      return state;
+    }
+  }]);
+  return PolygonShape;
+}();
+
+exports["default"] = PolygonShape;
+//# sourceMappingURL=polygon.js.map

package/configure/lib/shapes/polygon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shapes/polygon.js"],"names":["PolygonShape","shapes","e","newShapes","newPolygon","id","points","x","evt","layerX","y","layerY","group","index","length","push","isDrawing","isDrawingShapeId","state","onPolygonComplete","clickDelta","shapesCopy","JSON","parse","stringify","currentShapeIndex","findIndex","shape","currentShape","Array","isArray","firstPoint","Math","abs","finalizeCreation","tempShapes","highestId","max","map","parseInt","polygonIndex","completedPolygon","undefined"],"mappings":"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","sourcesContent":["export default class PolygonShape {\n  static create(shapes, e) {\n    const newShapes = [...shapes];\n    const newPolygon = {\n      id: 'newPolygon',\n      points: [{ x: e.evt.layerX, y: e.evt.layerY }],\n      group: 'polygons',\n      index: newShapes.length,\n    };\n\n    newShapes.push(newPolygon);\n\n    return {\n      shapes: newShapes,\n      isDrawing: true,\n      isDrawingShapeId: newPolygon.id,\n    };\n  }\n\n  static addPoint(state, e, onPolygonComplete) {\n    // Number of pixels allowed to determine if the first point was clicked\n    const clickDelta = 5;\n\n    const shapesCopy = JSON.parse(JSON.stringify(state.shapes));\n    const currentShapeIndex = shapesCopy.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (currentShapeIndex !== -1) {\n      const currentShape = shapesCopy[currentShapeIndex];\n      if (currentShape.points && Array.isArray(currentShape.points)) {\n        const firstPoint = currentShape.points[0];\n\n        // If click is close enough to the first point (within clickDelta pixels), close the polygon\n        if (\n          Math.abs(firstPoint.x - e.evt.layerX) <= clickDelta &&\n          Math.abs(firstPoint.y - e.evt.layerY) <= clickDelta\n        ) {\n          return PolygonShape.finalizeCreation(state, onPolygonComplete);\n        }\n\n        currentShape.points.push({ x: e.evt.layerX, y: e.evt.layerY });\n        shapesCopy[currentShapeIndex] = currentShape;\n\n        return {\n          shapes: shapesCopy,\n        };\n      }\n    }\n    return state;\n  }\n\n  static finalizeCreation(state, onPolygonComplete) {\n    const { shapes } = state;\n    const tempShapes = [...shapes];\n    const highestId = Math.max(...state.shapes.map((shape) => parseInt(shape.id) || 0), 0);\n\n    const polygonIndex = tempShapes.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (polygonIndex !== -1 && tempShapes[polygonIndex].points.length > 2) {\n      const completedPolygon = tempShapes[polygonIndex];\n\n      completedPolygon.id = `${highestId + 1}`;\n      onPolygonComplete(tempShapes);\n\n      return {\n        isDrawing: false,\n        shapes: tempShapes,\n        isDrawingShapeId: undefined,\n      };\n    }\n\n    return state;\n  }\n\n  // No need to update anything on mouse move,\n  // but it's here if we need to add any logic later.\n  static handleMouseMove(state, e) {\n    return state;\n  }\n}\n"],"file":"polygon.js"}

package/configure/lib/shapes/rectagle.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+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; }
+
+var RectangleShape = /*#__PURE__*/function () {
+  function RectangleShape() {
+    (0, _classCallCheck2["default"])(this, RectangleShape);
+  }
+
+  (0, _createClass2["default"])(RectangleShape, null, [{
+    key: "create",
+    value: function create(shapes, e) {
+      var newShapes = (0, _toConsumableArray2["default"])(shapes);
+      var highestId = Math.max.apply(Math, (0, _toConsumableArray2["default"])(newShapes.map(function (shape) {
+        return parseInt(shape.id);
+      })).concat([0])) || 0;
+      var newRectangle = {
+        id: "".concat(highestId + 1),
+        height: 0,
+        width: 0,
+        x: e.evt.layerX,
+        y: e.evt.layerY,
+        group: 'rectangles',
+        index: newShapes.length
+      };
+      newShapes.push(newRectangle);
+      return {
+        shapes: newShapes,
+        isDrawing: true,
+        isDrawingShapeId: newRectangle.id
+      };
+    }
+  }, {
+    key: "finalizeCreation",
+    value: function finalizeCreation(state, props) {
+      var currentShapeIndex = state.shapes.findIndex(function (shape) {
+        return shape.id === state.isDrawingShapeId;
+      });
+
+      if (currentShapeIndex !== -1) {
+        var currentShape = state.shapes[currentShapeIndex]; // Check if the shape is a valid rectangle (has more than 0 width and height) before finalizing
+
+        if (currentShape.width > 0 && currentShape.height > 0) {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            isDrawing: false,
+            stateShapes: false,
+            isDrawingShapeId: undefined
+          });
+        } else {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            isDrawing: false,
+            stateShapes: false,
+            isDrawingShapeId: undefined,
+            shapes: state.shapes.filter(function (shape) {
+              return shape.id !== state.isDrawingShapeId;
+            })
+          });
+        }
+      } // Return current state if not drawing a rectangle
+
+
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isDrawing: false,
+        stateShapes: false,
+        isDrawingShapeId: undefined
+      });
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(state, e) {
+      var isDrawing = state.isDrawing,
+          isDrawingShapeId = state.isDrawingShapeId,
+          shapes = state.shapes;
+
+      if (isDrawing) {
+        var tempShapes = (0, _toConsumableArray2["default"])(shapes);
+        var resizingShapeIndex = tempShapes.findIndex(function (shape) {
+          return shape.id === isDrawingShapeId;
+        });
+
+        if (resizingShapeIndex !== -1) {
+          var resizingShape = tempShapes[resizingShapeIndex];
+          resizingShape.width = e.evt.layerX - resizingShape.x;
+          resizingShape.height = e.evt.layerY - resizingShape.y;
+          return {
+            shapes: tempShapes
+          };
+        }
+      }
+
+      return state;
+    }
+  }]);
+  return RectangleShape;
+}();
+
+exports["default"] = RectangleShape;
+//# sourceMappingURL=rectagle.js.map

package/configure/lib/shapes/rectagle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shapes/rectagle.js"],"names":["RectangleShape","shapes","e","newShapes","highestId","Math","max","map","shape","parseInt","id","newRectangle","height","width","x","evt","layerX","y","layerY","group","index","length","push","isDrawing","isDrawingShapeId","state","props","currentShapeIndex","findIndex","currentShape","stateShapes","undefined","filter","tempShapes","resizingShapeIndex","resizingShape"],"mappings":"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","sourcesContent":["export default class RectangleShape {\n  static create(shapes, e) {\n    const newShapes = [...shapes];\n    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0) || 0;\n\n    const newRectangle = {\n      id: `${highestId + 1}`,\n      height: 0,\n      width: 0,\n      x: e.evt.layerX,\n      y: e.evt.layerY,\n      group: 'rectangles',\n      index: newShapes.length,\n    };\n\n    newShapes.push(newRectangle);\n\n    return {\n      shapes: newShapes,\n      isDrawing: true,\n      isDrawingShapeId: newRectangle.id,\n    };\n  }\n\n  static finalizeCreation(state, props) {\n    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (currentShapeIndex !== -1) {\n      const currentShape = state.shapes[currentShapeIndex];\n\n      // Check if the shape is a valid rectangle (has more than 0 width and height) before finalizing\n      if (currentShape.width > 0 && currentShape.height > 0) {\n        return {\n          ...state,\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n        };\n      } else {\n        return {\n          ...state,\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n          shapes: state.shapes.filter((shape) => shape.id !== state.isDrawingShapeId),\n        };\n      }\n    }\n\n    // Return current state if not drawing a rectangle\n    return {\n      ...state,\n      isDrawing: false,\n      stateShapes: false,\n      isDrawingShapeId: undefined,\n    };\n  }\n\n  static handleMouseMove(state, e) {\n    const { isDrawing, isDrawingShapeId, shapes } = state;\n\n    if (isDrawing) {\n      const tempShapes = [...shapes];\n      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);\n\n      if (resizingShapeIndex !== -1) {\n        const resizingShape = tempShapes[resizingShapeIndex];\n\n        resizingShape.width = e.evt.layerX - resizingShape.x;\n        resizingShape.height = e.evt.layerY - resizingShape.y;\n\n        return {\n          shapes: tempShapes,\n        };\n      }\n    }\n\n    return state;\n  }\n}\n"],"file":"rectagle.js"}

package/configure/package.json

@@ -10,7 +10,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "1.2.3",
+    "@pie-lib/pie-toolbox": "1.3.0",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap

@@ -11,6 +11,20 @@ exports[`HotspotContainer render renders 1`] = `
     onPaste={[Function]}
   >
     <div>
+      <div
+        onClick={[Function]}
+      >
+        <RectangleButton
+          isActive={false}
+        />
+      </div>
+      <div
+        onClick={[Function]}
+      >
+        <PolygonButton
+          isActive={false}
+        />
+      </div>
       <WithStyles(UploadControl)
         label="Replace Image"
         onInputClick={[Function]}
@@ -32,6 +46,7 @@ exports[`HotspotContainer render renders 1`] = `
         }
         disableDrag={[Function]}
         enableDrag={[Function]}
+        handleFinishDrawing={[Function]}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         imageUrl="https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W"
         multipleCorrect={true}
@@ -39,6 +54,7 @@ exports[`HotspotContainer render renders 1`] = `
         onUpdateImageDimension={[MockFunction]}
         onUpdateShapes={[Function]}
         outlineColor="blue"
+        shapeType="none"
         shapes={
           Array [
             Object {