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

package/configure/lib/defaults.js

@@ -33,6 +33,9 @@ var _default = exports.default = {
   },
   configuration: {
     baseInputConfiguration: {
+      h3: {
+        disabled: true
+      },
       audio: {
         disabled: false
       },

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","names":["model","dimensions","height","width","hotspotColor","hotspotList","imageUrl","multipleCorrect","outlineColor","outlineList","partialScoring","prompt","promptEnabled","rationaleEnabled","shapes","rectangles","polygons","circles","strokeWidth","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","toolbarEditorPosition","configuration","baseInputConfiguration","audio","disabled","video","image","textAlign","showParagraphs","separateParagraphs","settings","label","rationale","inputConfiguration","required","settingsPanelDisabled","spellCheck","enabled","preserveAspectRatio","minShapes","maxImageWidth","maxImageHeight","withRubric","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options"],"sources":["../src/defaults.js"],"sourcesContent":["export default {\n  model: {\n    dimensions: { height: 0, width: 0 },\n    hotspotColor: 'rgba(137, 183, 244, 0.25)',\n    hotspotList: ['rgba(137, 183, 244, 0.25)'],\n    imageUrl: '',\n    multipleCorrect: true,\n    outlineColor: 'blue',\n    outlineList: ['blue'],\n    partialScoring: false,\n    prompt: '',\n    promptEnabled: true,\n    rationaleEnabled: true,\n    shapes: { rectangles: [], polygons: [], circles: [] },\n    strokeWidth: 5,\n    studentInstructionsEnabled: true,\n    teacherInstructions: '',\n    teacherInstructionsEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    baseInputConfiguration: {\n      audio: { disabled: false },\n      video: { disabled: false },\n      image: { disabled: false },\n      textAlign: { disabled: true },\n      showParagraphs: { disabled: false },\n      separateParagraphs: { disabled: true },\n    },\n    multipleCorrect: {\n      settings: true,\n      label: 'Multiple Correct Responses',\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring',\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    settingsPanelDisabled: false,\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    preserveAspectRatio: {\n      settings: false,\n      enabled: true,\n      label: 'Preserve aspect ratio',\n    },\n    minShapes: 2,\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n    mathMlOptions: {\n      mmlOutput: false,\n      mmlEditing: false,\n    },\n    language: {\n      settings: false,\n      label: 'Specify Language',\n      enabled: false,\n    },\n    languageChoices: {\n      label: 'Language Choices',\n      options: [],\n    },\n  },\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"defaults.js","names":["model","dimensions","height","width","hotspotColor","hotspotList","imageUrl","multipleCorrect","outlineColor","outlineList","partialScoring","prompt","promptEnabled","rationaleEnabled","shapes","rectangles","polygons","circles","strokeWidth","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","toolbarEditorPosition","configuration","baseInputConfiguration","h3","disabled","audio","video","image","textAlign","showParagraphs","separateParagraphs","settings","label","rationale","inputConfiguration","required","settingsPanelDisabled","spellCheck","enabled","preserveAspectRatio","minShapes","maxImageWidth","maxImageHeight","withRubric","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options"],"sources":["../src/defaults.js"],"sourcesContent":["export default {\n  model: {\n    dimensions: { height: 0, width: 0 },\n    hotspotColor: 'rgba(137, 183, 244, 0.25)',\n    hotspotList: ['rgba(137, 183, 244, 0.25)'],\n    imageUrl: '',\n    multipleCorrect: true,\n    outlineColor: 'blue',\n    outlineList: ['blue'],\n    partialScoring: false,\n    prompt: '',\n    promptEnabled: true,\n    rationaleEnabled: true,\n    shapes: { rectangles: [], polygons: [], circles: [] },\n    strokeWidth: 5,\n    studentInstructionsEnabled: true,\n    teacherInstructions: '',\n    teacherInstructionsEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    baseInputConfiguration: {\n      h3: { disabled: true },\n      audio: { disabled: false },\n      video: { disabled: false },\n      image: { disabled: false },\n      textAlign: { disabled: true },\n      showParagraphs: { disabled: false },\n      separateParagraphs: { disabled: true },\n    },\n    multipleCorrect: {\n      settings: true,\n      label: 'Multiple Correct Responses',\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring',\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    settingsPanelDisabled: false,\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    preserveAspectRatio: {\n      settings: false,\n      enabled: true,\n      label: 'Preserve aspect ratio',\n    },\n    minShapes: 2,\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n    mathMlOptions: {\n      mmlOutput: false,\n      mmlEditing: false,\n    },\n    language: {\n      settings: false,\n      label: 'Specify Language',\n      enabled: false,\n    },\n    languageChoices: {\n      label: 'Language Choices',\n      options: [],\n    },\n  },\n};\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/hotspot-circle.js

@@ -133,7 +133,6 @@ class CircleComponent extends _react.default.Component {
       onTransformEnd: this.onResizeEnd,
       x: x,
       y: y,
-      opacity: 0.5,
       cursor: "pointer"
     }), !isDragging && hovered && /*#__PURE__*/_react.default.createElement(_DeleteWidget.default, {
       id: id,

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

@@ -1 +1 @@
-{"version":3,"file":"hotspot-circle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_DeleteWidget","CircleComponent","React","Component","constructor","props","_defineProperty2","default","e","radius","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","scale","scaleX","scaleY","newRadius","Math","max","onDeleteShape","avgScale","state","createRef","render","correct","hotspotColor","outlineColor","strokeWidth","selectedHotspotColor","hoverOutlineColor","validRadius","isNaN","createElement","Group","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","padding","Circle","ref","fill","handleClick","onTap","draggable","stroke","onDragStart","handleOnDragEnd","onTransformStart","onTransformEnd","onResizeEnd","opacity","handleWidgetClick","handleDelete","isCircle","Transformer","borderStroke","rotateEnabled","keepRatio","onTransform","enabledAnchors","boundBoxFunc","oldBox","newBox","width","height","oldCenterX","oldCenterY","newCenterX","newCenterY","offsetX","offsetY","propTypes","PropTypes","bool","isRequired","string","number","func","defaultProps","_default","exports"],"sources":["../src/hotspot-circle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Transformer } from 'react-konva';\nimport DeleteWidget from './DeleteWidget';\n\nclass CircleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n      isDragging: false,\n    };\n    this.shapeRef = React.createRef();\n    this.trRef = React.createRef();\n  }\n\n  handleClick = (e) => {\n    const { radius, isDrawing, onClick, id } = this.props;\n    if (radius <= 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    this.setState({ isDragging: false });\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    const node = this.shapeRef.current;\n\n    const scale = node.scaleX() !== 1 ? node.scaleX() : node.scaleY();\n    const newRadius = Math.max(node.radius() * scale, 5);\n\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      radius: newRadius,\n    });\n\n    node.scaleX(1);\n    node.scaleY(1);\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  onTransform = () => {\n    const node = this.shapeRef.current;\n    const avgScale = (node.scaleX() + node.scaleY()) / 2;\n    node.scaleX(avgScale);\n    node.scaleY(avgScale);\n  };\n\n  render() {\n    const {\n      correct,\n      radius,\n      hotspotColor,\n      id,\n      outlineColor,\n      x,\n      y,\n      strokeWidth = 5,\n      selectedHotspotColor,\n      hoverOutlineColor,\n    } = this.props;\n\n    const { hovered, isDragging } = this.state;\n    // Ensure radius is valid\n    const validRadius = isNaN(radius) || radius <= 0 ? 5 : radius;\n\n    return (\n      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter} padding={12}>\n        <Circle\n          ref={this.shapeRef}\n          radius={validRadius}\n          fill={correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={outlineColor}\n          strokeWidth={correct ? strokeWidth : 0}\n          onDragStart={() => this.setState({ isDragging: true })}\n          onDragEnd={this.handleOnDragEnd}\n          onTransformStart={() => this.setState({ isDragging: true })}\n          onTransformEnd={this.onResizeEnd}\n          x={x}\n          y={y}\n          opacity={0.5}\n          cursor=\"pointer\"\n        />\n\n        {!isDragging && hovered && (\n          <DeleteWidget\n            id={id}\n            radius={validRadius}\n            x={x}\n            y={y}\n            handleWidgetClick={this.handleDelete}\n            isCircle={true}\n          />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            borderStroke={hoverOutlineColor || null}\n            ref={this.trRef}\n            rotateEnabled={false}\n            keepRatio={true}\n            onTransform={this.onTransform}\n            enabledAnchors={['middle-left', 'middle-right', 'top-center', 'bottom-center']}\n            boundBoxFunc={(oldBox, newBox) => {\n              // Constraint to prevent resizing too small\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n\n              const oldCenterX = oldBox.x + oldBox.width / 2;\n              const oldCenterY = oldBox.y + oldBox.height / 2;\n              const newCenterX = newBox.x + newBox.width / 2;\n              const newCenterY = newBox.y + newBox.height / 2;\n\n              const offsetX = oldCenterX - newCenterX;\n              const offsetY = oldCenterY - newCenterY;\n\n              newBox.x += offsetX;\n              newBox.y += offsetY;\n\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nCircleComponent.propTypes = {\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  radius: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nCircleComponent.defaultProps = {\n  correct: false,\n};\n\nexport default CircleComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"hotspot-circle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_DeleteWidget","CircleComponent","React","Component","constructor","props","_defineProperty2","default","e","radius","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","scale","scaleX","scaleY","newRadius","Math","max","onDeleteShape","avgScale","state","createRef","render","correct","hotspotColor","outlineColor","strokeWidth","selectedHotspotColor","hoverOutlineColor","validRadius","isNaN","createElement","Group","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","padding","Circle","ref","fill","handleClick","onTap","draggable","stroke","onDragStart","handleOnDragEnd","onTransformStart","onTransformEnd","onResizeEnd","handleWidgetClick","handleDelete","isCircle","Transformer","borderStroke","rotateEnabled","keepRatio","onTransform","enabledAnchors","boundBoxFunc","oldBox","newBox","width","height","oldCenterX","oldCenterY","newCenterX","newCenterY","offsetX","offsetY","propTypes","PropTypes","bool","isRequired","string","number","func","defaultProps","_default","exports"],"sources":["../src/hotspot-circle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Transformer } from 'react-konva';\nimport DeleteWidget from './DeleteWidget';\n\nclass CircleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n      isDragging: false,\n    };\n    this.shapeRef = React.createRef();\n    this.trRef = React.createRef();\n  }\n\n  handleClick = (e) => {\n    const { radius, isDrawing, onClick, id } = this.props;\n    if (radius <= 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    this.setState({ isDragging: false });\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    const node = this.shapeRef.current;\n\n    const scale = node.scaleX() !== 1 ? node.scaleX() : node.scaleY();\n    const newRadius = Math.max(node.radius() * scale, 5);\n\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      radius: newRadius,\n    });\n\n    node.scaleX(1);\n    node.scaleY(1);\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  onTransform = () => {\n    const node = this.shapeRef.current;\n    const avgScale = (node.scaleX() + node.scaleY()) / 2;\n    node.scaleX(avgScale);\n    node.scaleY(avgScale);\n  };\n\n  render() {\n    const {\n      correct,\n      radius,\n      hotspotColor,\n      id,\n      outlineColor,\n      x,\n      y,\n      strokeWidth = 5,\n      selectedHotspotColor,\n      hoverOutlineColor,\n    } = this.props;\n\n    const { hovered, isDragging } = this.state;\n    // Ensure radius is valid\n    const validRadius = isNaN(radius) || radius <= 0 ? 5 : radius;\n\n    return (\n      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter} padding={12}>\n        <Circle\n          ref={this.shapeRef}\n          radius={validRadius}\n          fill={correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={outlineColor}\n          strokeWidth={correct ? strokeWidth : 0}\n          onDragStart={() => this.setState({ isDragging: true })}\n          onDragEnd={this.handleOnDragEnd}\n          onTransformStart={() => this.setState({ isDragging: true })}\n          onTransformEnd={this.onResizeEnd}\n          x={x}\n          y={y}\n          cursor=\"pointer\"\n        />\n\n        {!isDragging && hovered && (\n          <DeleteWidget\n            id={id}\n            radius={validRadius}\n            x={x}\n            y={y}\n            handleWidgetClick={this.handleDelete}\n            isCircle={true}\n          />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            borderStroke={hoverOutlineColor || null}\n            ref={this.trRef}\n            rotateEnabled={false}\n            keepRatio={true}\n            onTransform={this.onTransform}\n            enabledAnchors={['middle-left', 'middle-right', 'top-center', 'bottom-center']}\n            boundBoxFunc={(oldBox, newBox) => {\n              // Constraint to prevent resizing too small\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n\n              const oldCenterX = oldBox.x + oldBox.width / 2;\n              const oldCenterY = oldBox.y + oldBox.height / 2;\n              const newCenterX = newBox.x + newBox.width / 2;\n              const newCenterY = newBox.y + newBox.height / 2;\n\n              const offsetX = oldCenterX - newCenterX;\n              const offsetY = oldCenterY - newCenterY;\n\n              newBox.x += offsetX;\n              newBox.y += offsetY;\n\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nCircleComponent.propTypes = {\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  radius: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nCircleComponent.defaultProps = {\n  correct: false,\n};\n\nexport default CircleComponent;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/hotspot-drawable.js

@@ -10,7 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactKonva = require("react-konva");
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _lodashEs = require("lodash-es");
 var _styles = require("@mui/material/styles");
 var _hotspotRectangle = _interopRequireDefault(require("./hotspot-rectangle"));
 var _hotspotPolygon = _interopRequireDefault(require("./hotspot-polygon"));
@@ -221,7 +221,7 @@ class Drawable extends _react.default.Component {
         }
         return shape;
       }).filter(shape => shape !== null);
-      onUpdateShapes((0, _cloneDeep.default)(newShapes));
+      onUpdateShapes((0, _lodashEs.cloneDeep)(newShapes));
     });
     (0, _defineProperty2.default)(this, "closeInProgressPolygons", id => {
       const {
@@ -236,7 +236,7 @@ class Drawable extends _react.default.Component {
             shapes: newShapes,
             isDrawingShapeId: undefined
           });
-          onUpdateShapes((0, _cloneDeep.default)(newShapes));
+          onUpdateShapes((0, _lodashEs.cloneDeep)(newShapes));
         });
       }
     });
@@ -263,7 +263,7 @@ class Drawable extends _react.default.Component {
           return shape;
         });
       }
-      onUpdateShapes((0, _cloneDeep.default)(newShapes));
+      onUpdateShapes((0, _lodashEs.cloneDeep)(newShapes));
       this.closeInProgressPolygons(id);
     });
     /// end of handling HotSpots section
@@ -342,7 +342,7 @@ class Drawable extends _react.default.Component {
       } = this.state;
       enableDrag();
       if (stateShapes) {
-        onUpdateShapes((0, _cloneDeep.default)(stateShapes));
+        onUpdateShapes((0, _lodashEs.cloneDeep)(stateShapes));
       }
       onUpdateImageDimension(dimensions);
       window.removeEventListener('mousemove', this.startResizing, false);

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

@@ -1 +1 @@
-{"version":3,"file":"hotspot-drawable.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_cloneDeep","_styles","_hotspotRectangle","_hotspotPolygon","_hotspotCircle","_utils","_shapes","BaseContainer","styled","position","ImageContainer","width","Image","alignItems","display","justifyContent","ResizeHandle","borderBottom","borderRight","bottom","cursor","height","right","StyledStage","Stage","left","top","IMAGE_MAX_WIDTH","Drawable","React","Component","getDerivedStateFromProps","nextProps","prevState","shapes","constructor","props","_defineProperty2","default","e","shapeType","onUpdateShapes","newState","newShapeId","target","currentTarget","Object","values","SUPPORTED_SHAPES","includes","RECTANGLE","RectangleShape","create","CIRCLE","CircleShape","POLYGON","state","isDrawingShapeId","addPolygonPoint","isDrawing","PolygonShape","setState","finalizeCreation","handleMouseMove","handleOnMouseUp","id","updatedProps","dimensions","canvasWidth","canvasHeight","newShapes","map","shape","newX","x","newY","y","group","radius","points","xValues","point","yValues","minX","Math","min","minY","maxX","max","maxY","deltaX","deltaY","filter","cloneDeep","inProgressPolygon","find","undefined","multipleCorrect","correct","closeInProgressPolygons","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","newHeight","parseFloat","newWidth","aspectWidth","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","updateImageDimensions","clientX","clientY","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","stateShapes","getUpdatedShapes","enableDrag","removeEventListener","onDeleteShape","temporaryPolygon","addPoint","drawable","forEach","render","imageUrl","hotspotColor","outlineColor","strokeWidth","hoverOutlineColor","selectedHotspotColor","heightFromState","widthFromState","shapesToUse","createElement","_extends2","onLoad","handleOnImageLoad","ref","src","onMouseDown","handleOnMouseDown","onMouseUp","onMouseMove","onContentMouseOut","handleOnMouseOutOrLeave","onContentMouseLeave","Layer","i","Tag","SHAPE_GROUPS","RECTANGLES","Rectangle","CIRCLES","Circle","POLYGONS","Polygon","key","onClick","handleOnSetAsCorrect","onDragEnd","handleOnDragEnd","deleteShape","imageHeight","imageWidth","exports","propTypes","PropTypes","func","isRequired","object","oneOf","string","handleFinishDrawing","bool","array","number","_default"],"sources":["../src/hotspot-drawable.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { styled } from '@mui/material/styles';\n\nimport Rectangle from './hotspot-rectangle';\nimport Polygon from './hotspot-polygon';\nimport Circle from './hotspot-circle';\nimport { getUpdatedShapes, updateImageDimensions } from './utils';\nimport { RectangleShape, CircleShape, PolygonShape, SUPPORTED_SHAPES, SHAPE_GROUPS } from './shapes';\n\nconst BaseContainer = styled('div')({\n  position: 'relative',\n});\n\nconst ImageContainer = styled('div')({\n  position: 'relative',\n  width: 'fit-content',\n});\n\nconst Image = styled('img')({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nconst ResizeHandle = styled('div')({\n  borderBottom: '1px solid #727272',\n  borderRight: '1px solid #727272',\n  bottom: '-10px',\n  cursor: 'se-resize',\n  height: '10px',\n  position: 'absolute',\n  right: '-10px',\n  width: '10px',\n});\n\nconst StyledStage = styled(Stage)({\n  left: 0,\n  top: 0,\n  position: 'absolute',\n});\n\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // Update the state only if the props have changed\n    if (nextProps.shapes !== prevState.shapes) {\n      return { shapes: nextProps.shapes };\n    }\n\n    return null;\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      isDrawing: false,\n      stateShapes: false,\n      resizing: false,\n      temporaryPolygon: null,\n      shapes: [],\n      dimensions: {\n        height: 0,\n        width: 0,\n      },\n    };\n  }\n\n  handleOnMouseDown = (e) => {\n    const { shapeType, onUpdateShapes, shapes } = this.props;\n    let newState, newShapeId;\n\n    // Ensure that the click originated from the expected element\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (!Object.values(SUPPORTED_SHAPES).includes(shapeType)) {\n      return;\n    }\n\n    switch (shapeType) {\n      case SUPPORTED_SHAPES.RECTANGLE:\n        newState = RectangleShape.create(shapes, e);\n        break;\n      case SUPPORTED_SHAPES.CIRCLE:\n        newState = CircleShape.create(shapes, e);\n        break;\n      case SUPPORTED_SHAPES.POLYGON:\n        newShapeId = this.state.isDrawingShapeId;\n\n        if (newShapeId) {\n          // If a polygon is in progress, add a new point\n          const shapes = this.addPolygonPoint(e);\n\n          newState = {\n            isDrawing: true,\n            isDrawingShapeId: newShapeId,\n            shapes: shapes,\n          };\n        } else {\n          // Else start a new one\n          newState = PolygonShape.create(shapes, e);\n        }\n        break;\n      default:\n        return;\n    }\n\n    this.setState({\n      ...newState,\n    });\n\n    onUpdateShapes(newState.shapes);\n  };\n\n  addPolygonPoint(e) {\n    const { shapes } = PolygonShape.addPoint(this.state, e, (newShapes) => {\n      this.setState({\n        isDrawing: false,\n        shapes: newShapes,\n        isDrawingShapeId: undefined,\n      });\n\n      this.props.onUpdateShapes(newShapes);\n    });\n\n    return shapes;\n  }\n\n  handleOnMouseUp = () => {\n    const { shapeType, onUpdateShapes } = this.props;\n    let newState;\n\n    if (shapeType === SUPPORTED_SHAPES.POLYGON) {\n      return;\n    }\n\n    switch (shapeType) {\n      case SUPPORTED_SHAPES.RECTANGLE:\n        newState = RectangleShape.finalizeCreation(this.state, this.props);\n        break;\n      case SUPPORTED_SHAPES.CIRCLE:\n        newState = CircleShape.finalizeCreation(this.state, this.props);\n        break;\n      default:\n        return;\n    }\n\n    this.setState({\n      ...newState,\n      isDrawing: false,\n    });\n\n    onUpdateShapes(newState.shapes);\n  };\n\n  handleMouseMove = (e) => {\n    const { shapeType, onUpdateShapes } = this.props;\n    let newState;\n\n    if (!this.state.isDrawing || !Object.values(SUPPORTED_SHAPES).includes(shapeType)) {\n      return;\n    }\n\n    switch (shapeType) {\n      case SUPPORTED_SHAPES.RECTANGLE:\n        newState = RectangleShape.handleMouseMove(this.state, e);\n        break;\n      case SUPPORTED_SHAPES.CIRCLE:\n        newState = CircleShape.handleMouseMove(this.state, e);\n        break;\n      case SUPPORTED_SHAPES.POLYGON:\n        newState = PolygonShape.handleMouseMove(this.state, e);\n        break;\n      default:\n        return;\n    }\n\n    this.setState(newState);\n    onUpdateShapes(newState.shapes);\n  };\n\n  handleOnMouseOutOrLeave = (e) => {\n    if (this.state.isDrawing) {\n      this.handleOnMouseUp(e);\n    }\n  };\n\n  handleOnDragEnd = (id, updatedProps) => {\n    const { shapes, onUpdateShapes, dimensions } = this.props;\n    const { width: canvasWidth, height: canvasHeight } = dimensions;\n\n    // when a shape is moved completely outside the canvas\n    // remove that shape\n    const newShapes = shapes\n      .map((shape) => {\n        if (shape.id !== id) {\n          return shape;\n        }\n\n        let newX = updatedProps.x;\n        let newY = updatedProps.y;\n\n        if (shape.group === 'rectangles') {\n          if (newX + shape.width < 0 || newX > canvasWidth || newY + shape.height < 0 || newY > canvasHeight) {\n            return null;\n          }\n\n          return { ...shape, ...updatedProps };\n        }\n\n        if (shape.group === 'circles') {\n          const radius = shape.radius;\n          if (newX + radius < 0 || newX - radius > canvasWidth || newY + radius < 0 || newY - radius > canvasHeight) {\n            return null;\n          }\n\n          return { ...shape, ...updatedProps };\n        }\n\n        if (shape.group === 'polygons') {\n          const points = shape.points;\n          const xValues = points.map((point) => point.x);\n          const yValues = points.map((point) => point.y);\n\n          let minX = Math.min(...xValues);\n          let minY = Math.min(...yValues);\n          let maxX = Math.max(...xValues);\n          let maxY = Math.max(...yValues);\n\n          // Calculate deltas based on the first point as a reference\n          const deltaX = updatedProps['points'][0].x - points[0].x;\n          const deltaY = updatedProps['points'][0].y - points[0].y;\n\n          minX = minX + deltaX;\n          maxX = maxX + deltaX;\n          minY = minY + deltaY;\n          maxY = maxY + deltaY;\n\n          if (maxX < 0 || minX > canvasWidth || maxY < 0 || minY > canvasHeight) {\n            return null;\n          }\n\n          return { ...shape, ...updatedProps };\n        }\n\n        return shape;\n      })\n      .filter((shape) => shape !== null);\n\n    onUpdateShapes(cloneDeep(newShapes));\n  };\n\n  closeInProgressPolygons = (id) => {\n    const { shapes, onUpdateShapes } = this.props;\n\n    const inProgressPolygon = (shapes || []).find((shape) => shape.id === 'newPolygon');\n    if (id === 'newPolygon' || (inProgressPolygon && this.state.isDrawing)) {\n      PolygonShape.finalizeCreation(this.state, (newShapes) => {\n        this.setState({\n          isDrawing: false,\n          shapes: newShapes,\n          isDrawingShapeId: undefined,\n        });\n\n        onUpdateShapes(cloneDeep(newShapes));\n      });\n    }\n  }\n\n  handleOnSetAsCorrect = (shape) => {\n    const { id } = shape;\n    const { multipleCorrect, shapes, onUpdateShapes } = this.props;\n\n    let newShapes;\n\n    if (multipleCorrect) {\n      newShapes = shapes.map((shape) => {\n        if (shape.id === id) {\n          shape.correct = !shape.correct;\n        }\n        return shape;\n      });\n    } else {\n      newShapes = shapes.map((shape) => {\n        shape.correct = shape.id === id;\n        return shape;\n      });\n    }\n\n    onUpdateShapes(cloneDeep(newShapes));\n\n    this.closeInProgressPolygons(id);\n  };\n  /// end of handling HotSpots section\n\n  /// start of handling Image section\n  handleOnImageLoad = ({ target }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n    const elementStyle = getComputedStyle(target);\n    const newHeight = parseFloat(elementStyle.height);\n    const newWidth = parseFloat(elementStyle.width);\n    const aspectWidth = newWidth / IMAGE_MAX_WIDTH;\n\n    const dimensions =\n      newWidth > IMAGE_MAX_WIDTH\n        ? {\n            height: newHeight / aspectWidth,\n            width: IMAGE_MAX_WIDTH,\n          }\n        : {\n            height: newHeight,\n            width: newWidth,\n          };\n\n    this.setState({ dimensions }, () => onUpdateImageDimension(dimensions));\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  checkIfResizeValid(x, y) {\n    const { shapes } = this.state;\n    let drawable = true;\n\n    // Do not allow resizing over the hotspots\n    shapes &&\n      shapes.forEach((shape) => {\n        const right = shape.x + shape.width + 5;\n        const bottom = shape.y + shape.height + 5;\n        if (x <= right || y <= bottom) {\n          drawable = false;\n        }\n      });\n    return drawable;\n  }\n\n  startResizing = (e) => {\n    const bounds = e.target.getBoundingClientRect();\n    const box = this.image;\n    const { disableDrag, preserveAspectRatioEnabled, dimensions, shapes } = this.props;\n\n    const { width, height } = updateImageDimensions(\n      dimensions,\n      {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      },\n      preserveAspectRatioEnabled,\n    );\n\n    const resizeValid = this.checkIfResizeValid(width, height);\n    const hasMinimumWidth = width > 150 && height > 150;\n\n    if (resizeValid && hasMinimumWidth && box) {\n      box.style.width = `${width}px`;\n      box.style.height = `${height}px`;\n\n      this.setState({\n        resizing: true,\n        dimensions: { height: height, width: width },\n        stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes),\n      });\n    }\n\n    disableDrag();\n  };\n\n  stopResizing = () => {\n    const { enableDrag, onUpdateImageDimension, onUpdateShapes } = this.props;\n    const { dimensions, stateShapes } = this.state;\n\n    enableDrag();\n\n    if (stateShapes) {\n      onUpdateShapes(cloneDeep(stateShapes));\n    }\n\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n\n    this.setState({ resizing: false, stateShapes: false });\n  };\n\n  deleteShape = (id) => {\n    this.setState({\n      isDrawing: false,\n      isDrawingShapeId: undefined,\n    });\n    this.props.onDeleteShape(id);\n  };\n\n  /// end of handling Image section\n\n  render() {\n    const {\n      imageUrl,\n      dimensions: { height, width },\n      hotspotColor,\n      outlineColor,\n      shapes,\n      strokeWidth,\n      hoverOutlineColor,\n      selectedHotspotColor,\n    } = this.props;\n\n    const {\n      stateShapes,\n      isDrawing,\n      dimensions: { height: heightFromState, width: widthFromState },\n    } = this.state;\n    const shapesToUse = stateShapes || shapes;\n\n    return (\n      <BaseContainer>\n        {imageUrl && (\n          <ImageContainer>\n            <Image\n              onLoad={this.handleOnImageLoad}\n              ref={(ref) => {\n                this.image = ref;\n              }}\n              src={imageUrl}\n              {...(height && width ? { style: { height, width } } : {})}\n            />\n            <ResizeHandle\n              ref={(ref) => {\n                this.resize = ref;\n              }}\n            />\n          </ImageContainer>\n        )}\n\n        <StyledStage\n          height={heightFromState || height}\n          width={widthFromState || width}\n          onMouseDown={this.handleOnMouseDown}\n          onMouseUp={this.handleOnMouseUp}\n          onMouseMove={this.handleMouseMove}\n          onContentMouseOut={this.handleOnMouseOutOrLeave}\n          onContentMouseLeave={this.handleOnMouseOutOrLeave}\n        >\n          <Layer>\n            {shapesToUse.map((shape, i) => {\n              let Tag;\n              switch (shape.group) {\n                case SHAPE_GROUPS.RECTANGLES:\n                  Tag = Rectangle;\n                  break;\n                case SHAPE_GROUPS.CIRCLES:\n                  Tag = Circle;\n                  break;\n                case SHAPE_GROUPS.POLYGONS:\n                  Tag = Polygon;\n                  break;\n                default:\n                  return null;\n              }\n\n              return (\n                <Tag\n                  {...(shape.group === SHAPE_GROUPS.CIRCLES ? { radius: shape.radius } : {})}\n                  {...(shape.group === SHAPE_GROUPS.RECTANGLES ? { height: shape.height, width: shape.width } : {})}\n                  {...(shape.group === SHAPE_GROUPS.POLYGONS\n                    ? { points: shape.points, addPolygonPoint: (e) => this.addPolygonPoint(e) }\n                    : {})}\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  hotspotColor={hotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  selectedHotspotColor={selectedHotspotColor}\n                  id={shape.id}\n                  key={i}\n                  onClick={() => this.handleOnSetAsCorrect(shape)}\n                  onDragEnd={this.handleOnDragEnd}\n                  onDeleteShape={this.deleteShape}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  imageHeight={heightFromState || height}\n                  imageWidth={widthFromState || width}\n                  {...(shape.group === 'polygons' ? { addPolygonPoint: (e) => this.addPolygonPoint(e) } : {})}\n                />\n              );\n            })}\n          </Layer>\n        </StyledStage>\n      </BaseContainer>\n    );\n  }\n}\n\nDrawable.propTypes = {\n  disableDrag: PropTypes.func.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  enableDrag: PropTypes.func.isRequired,\n  shapeType: PropTypes.oneOf(Object.values(SUPPORTED_SHAPES)),\n  imageUrl: PropTypes.string.isRequired,\n  handleFinishDrawing: PropTypes.func.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.array.isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n};\n\nexport default Drawable;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"hotspot-drawable.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_lodashEs","_styles","_hotspotRectangle","_hotspotPolygon","_hotspotCircle","_utils","_shapes","BaseContainer","styled","position","ImageContainer","width","Image","alignItems","display","justifyContent","ResizeHandle","borderBottom","borderRight","bottom","cursor","height","right","StyledStage","Stage","left","top","IMAGE_MAX_WIDTH","Drawable","React","Component","getDerivedStateFromProps","nextProps","prevState","shapes","constructor","props","_defineProperty2","default","e","shapeType","onUpdateShapes","newState","newShapeId","target","currentTarget","Object","values","SUPPORTED_SHAPES","includes","RECTANGLE","RectangleShape","create","CIRCLE","CircleShape","POLYGON","state","isDrawingShapeId","addPolygonPoint","isDrawing","PolygonShape","setState","finalizeCreation","handleMouseMove","handleOnMouseUp","id","updatedProps","dimensions","canvasWidth","canvasHeight","newShapes","map","shape","newX","x","newY","y","group","radius","points","xValues","point","yValues","minX","Math","min","minY","maxX","max","maxY","deltaX","deltaY","filter","cloneDeep","inProgressPolygon","find","undefined","multipleCorrect","correct","closeInProgressPolygons","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","newHeight","parseFloat","newWidth","aspectWidth","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","updateImageDimensions","clientX","clientY","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","stateShapes","getUpdatedShapes","enableDrag","removeEventListener","onDeleteShape","temporaryPolygon","addPoint","drawable","forEach","render","imageUrl","hotspotColor","outlineColor","strokeWidth","hoverOutlineColor","selectedHotspotColor","heightFromState","widthFromState","shapesToUse","createElement","_extends2","onLoad","handleOnImageLoad","ref","src","onMouseDown","handleOnMouseDown","onMouseUp","onMouseMove","onContentMouseOut","handleOnMouseOutOrLeave","onContentMouseLeave","Layer","i","Tag","SHAPE_GROUPS","RECTANGLES","Rectangle","CIRCLES","Circle","POLYGONS","Polygon","key","onClick","handleOnSetAsCorrect","onDragEnd","handleOnDragEnd","deleteShape","imageHeight","imageWidth","exports","propTypes","PropTypes","func","isRequired","object","oneOf","string","handleFinishDrawing","bool","array","number","_default"],"sources":["../src/hotspot-drawable.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { cloneDeep } from 'lodash-es';\nimport { styled } from '@mui/material/styles';\n\nimport Rectangle from './hotspot-rectangle';\nimport Polygon from './hotspot-polygon';\nimport Circle from './hotspot-circle';\nimport { getUpdatedShapes, updateImageDimensions } from './utils';\nimport { RectangleShape, CircleShape, PolygonShape, SUPPORTED_SHAPES, SHAPE_GROUPS } from './shapes';\n\nconst BaseContainer = styled('div')({\n  position: 'relative',\n});\n\nconst ImageContainer = styled('div')({\n  position: 'relative',\n  width: 'fit-content',\n});\n\nconst Image = styled('img')({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nconst ResizeHandle = styled('div')({\n  borderBottom: '1px solid #727272',\n  borderRight: '1px solid #727272',\n  bottom: '-10px',\n  cursor: 'se-resize',\n  height: '10px',\n  position: 'absolute',\n  right: '-10px',\n  width: '10px',\n});\n\nconst StyledStage = styled(Stage)({\n  left: 0,\n  top: 0,\n  position: 'absolute',\n});\n\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // Update the state only if the props have changed\n    if (nextProps.shapes !== prevState.shapes) {\n      return { shapes: nextProps.shapes };\n    }\n\n    return null;\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      isDrawing: false,\n      stateShapes: false,\n      resizing: false,\n      temporaryPolygon: null,\n      shapes: [],\n      dimensions: {\n        height: 0,\n        width: 0,\n      },\n    };\n  }\n\n  handleOnMouseDown = (e) => {\n    const { shapeType, onUpdateShapes, shapes } = this.props;\n    let newState, newShapeId;\n\n    // Ensure that the click originated from the expected element\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (!Object.values(SUPPORTED_SHAPES).includes(shapeType)) {\n      return;\n    }\n\n    switch (shapeType) {\n      case SUPPORTED_SHAPES.RECTANGLE:\n        newState = RectangleShape.create(shapes, e);\n        break;\n      case SUPPORTED_SHAPES.CIRCLE:\n        newState = CircleShape.create(shapes, e);\n        break;\n      case SUPPORTED_SHAPES.POLYGON:\n        newShapeId = this.state.isDrawingShapeId;\n\n        if (newShapeId) {\n          // If a polygon is in progress, add a new point\n          const shapes = this.addPolygonPoint(e);\n\n          newState = {\n            isDrawing: true,\n            isDrawingShapeId: newShapeId,\n            shapes: shapes,\n          };\n        } else {\n          // Else start a new one\n          newState = PolygonShape.create(shapes, e);\n        }\n        break;\n      default:\n        return;\n    }\n\n    this.setState({\n      ...newState,\n    });\n\n    onUpdateShapes(newState.shapes);\n  };\n\n  addPolygonPoint(e) {\n    const { shapes } = PolygonShape.addPoint(this.state, e, (newShapes) => {\n      this.setState({\n        isDrawing: false,\n        shapes: newShapes,\n        isDrawingShapeId: undefined,\n      });\n\n      this.props.onUpdateShapes(newShapes);\n    });\n\n    return shapes;\n  }\n\n  handleOnMouseUp = () => {\n    const { shapeType, onUpdateShapes } = this.props;\n    let newState;\n\n    if (shapeType === SUPPORTED_SHAPES.POLYGON) {\n      return;\n    }\n\n    switch (shapeType) {\n      case SUPPORTED_SHAPES.RECTANGLE:\n        newState = RectangleShape.finalizeCreation(this.state, this.props);\n        break;\n      case SUPPORTED_SHAPES.CIRCLE:\n        newState = CircleShape.finalizeCreation(this.state, this.props);\n        break;\n      default:\n        return;\n    }\n\n    this.setState({\n      ...newState,\n      isDrawing: false,\n    });\n\n    onUpdateShapes(newState.shapes);\n  };\n\n  handleMouseMove = (e) => {\n    const { shapeType, onUpdateShapes } = this.props;\n    let newState;\n\n    if (!this.state.isDrawing || !Object.values(SUPPORTED_SHAPES).includes(shapeType)) {\n      return;\n    }\n\n    switch (shapeType) {\n      case SUPPORTED_SHAPES.RECTANGLE:\n        newState = RectangleShape.handleMouseMove(this.state, e);\n        break;\n      case SUPPORTED_SHAPES.CIRCLE:\n        newState = CircleShape.handleMouseMove(this.state, e);\n        break;\n      case SUPPORTED_SHAPES.POLYGON:\n        newState = PolygonShape.handleMouseMove(this.state, e);\n        break;\n      default:\n        return;\n    }\n\n    this.setState(newState);\n    onUpdateShapes(newState.shapes);\n  };\n\n  handleOnMouseOutOrLeave = (e) => {\n    if (this.state.isDrawing) {\n      this.handleOnMouseUp(e);\n    }\n  };\n\n  handleOnDragEnd = (id, updatedProps) => {\n    const { shapes, onUpdateShapes, dimensions } = this.props;\n    const { width: canvasWidth, height: canvasHeight } = dimensions;\n\n    // when a shape is moved completely outside the canvas\n    // remove that shape\n    const newShapes = shapes\n      .map((shape) => {\n        if (shape.id !== id) {\n          return shape;\n        }\n\n        let newX = updatedProps.x;\n        let newY = updatedProps.y;\n\n        if (shape.group === 'rectangles') {\n          if (newX + shape.width < 0 || newX > canvasWidth || newY + shape.height < 0 || newY > canvasHeight) {\n            return null;\n          }\n\n          return { ...shape, ...updatedProps };\n        }\n\n        if (shape.group === 'circles') {\n          const radius = shape.radius;\n          if (newX + radius < 0 || newX - radius > canvasWidth || newY + radius < 0 || newY - radius > canvasHeight) {\n            return null;\n          }\n\n          return { ...shape, ...updatedProps };\n        }\n\n        if (shape.group === 'polygons') {\n          const points = shape.points;\n          const xValues = points.map((point) => point.x);\n          const yValues = points.map((point) => point.y);\n\n          let minX = Math.min(...xValues);\n          let minY = Math.min(...yValues);\n          let maxX = Math.max(...xValues);\n          let maxY = Math.max(...yValues);\n\n          // Calculate deltas based on the first point as a reference\n          const deltaX = updatedProps['points'][0].x - points[0].x;\n          const deltaY = updatedProps['points'][0].y - points[0].y;\n\n          minX = minX + deltaX;\n          maxX = maxX + deltaX;\n          minY = minY + deltaY;\n          maxY = maxY + deltaY;\n\n          if (maxX < 0 || minX > canvasWidth || maxY < 0 || minY > canvasHeight) {\n            return null;\n          }\n\n          return { ...shape, ...updatedProps };\n        }\n\n        return shape;\n      })\n      .filter((shape) => shape !== null);\n\n    onUpdateShapes(cloneDeep(newShapes));\n  };\n\n  closeInProgressPolygons = (id) => {\n    const { shapes, onUpdateShapes } = this.props;\n\n    const inProgressPolygon = (shapes || []).find((shape) => shape.id === 'newPolygon');\n    if (id === 'newPolygon' || (inProgressPolygon && this.state.isDrawing)) {\n      PolygonShape.finalizeCreation(this.state, (newShapes) => {\n        this.setState({\n          isDrawing: false,\n          shapes: newShapes,\n          isDrawingShapeId: undefined,\n        });\n\n        onUpdateShapes(cloneDeep(newShapes));\n      });\n    }\n  }\n\n  handleOnSetAsCorrect = (shape) => {\n    const { id } = shape;\n    const { multipleCorrect, shapes, onUpdateShapes } = this.props;\n\n    let newShapes;\n\n    if (multipleCorrect) {\n      newShapes = shapes.map((shape) => {\n        if (shape.id === id) {\n          shape.correct = !shape.correct;\n        }\n        return shape;\n      });\n    } else {\n      newShapes = shapes.map((shape) => {\n        shape.correct = shape.id === id;\n        return shape;\n      });\n    }\n\n    onUpdateShapes(cloneDeep(newShapes));\n\n    this.closeInProgressPolygons(id);\n  };\n  /// end of handling HotSpots section\n\n  /// start of handling Image section\n  handleOnImageLoad = ({ target }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n    const elementStyle = getComputedStyle(target);\n    const newHeight = parseFloat(elementStyle.height);\n    const newWidth = parseFloat(elementStyle.width);\n    const aspectWidth = newWidth / IMAGE_MAX_WIDTH;\n\n    const dimensions =\n      newWidth > IMAGE_MAX_WIDTH\n        ? {\n            height: newHeight / aspectWidth,\n            width: IMAGE_MAX_WIDTH,\n          }\n        : {\n            height: newHeight,\n            width: newWidth,\n          };\n\n    this.setState({ dimensions }, () => onUpdateImageDimension(dimensions));\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  checkIfResizeValid(x, y) {\n    const { shapes } = this.state;\n    let drawable = true;\n\n    // Do not allow resizing over the hotspots\n    shapes &&\n      shapes.forEach((shape) => {\n        const right = shape.x + shape.width + 5;\n        const bottom = shape.y + shape.height + 5;\n        if (x <= right || y <= bottom) {\n          drawable = false;\n        }\n      });\n    return drawable;\n  }\n\n  startResizing = (e) => {\n    const bounds = e.target.getBoundingClientRect();\n    const box = this.image;\n    const { disableDrag, preserveAspectRatioEnabled, dimensions, shapes } = this.props;\n\n    const { width, height } = updateImageDimensions(\n      dimensions,\n      {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      },\n      preserveAspectRatioEnabled,\n    );\n\n    const resizeValid = this.checkIfResizeValid(width, height);\n    const hasMinimumWidth = width > 150 && height > 150;\n\n    if (resizeValid && hasMinimumWidth && box) {\n      box.style.width = `${width}px`;\n      box.style.height = `${height}px`;\n\n      this.setState({\n        resizing: true,\n        dimensions: { height: height, width: width },\n        stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes),\n      });\n    }\n\n    disableDrag();\n  };\n\n  stopResizing = () => {\n    const { enableDrag, onUpdateImageDimension, onUpdateShapes } = this.props;\n    const { dimensions, stateShapes } = this.state;\n\n    enableDrag();\n\n    if (stateShapes) {\n      onUpdateShapes(cloneDeep(stateShapes));\n    }\n\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n\n    this.setState({ resizing: false, stateShapes: false });\n  };\n\n  deleteShape = (id) => {\n    this.setState({\n      isDrawing: false,\n      isDrawingShapeId: undefined,\n    });\n    this.props.onDeleteShape(id);\n  };\n\n  /// end of handling Image section\n\n  render() {\n    const {\n      imageUrl,\n      dimensions: { height, width },\n      hotspotColor,\n      outlineColor,\n      shapes,\n      strokeWidth,\n      hoverOutlineColor,\n      selectedHotspotColor,\n    } = this.props;\n\n    const {\n      stateShapes,\n      isDrawing,\n      dimensions: { height: heightFromState, width: widthFromState },\n    } = this.state;\n    const shapesToUse = stateShapes || shapes;\n\n    return (\n      <BaseContainer>\n        {imageUrl && (\n          <ImageContainer>\n            <Image\n              onLoad={this.handleOnImageLoad}\n              ref={(ref) => {\n                this.image = ref;\n              }}\n              src={imageUrl}\n              {...(height && width ? { style: { height, width } } : {})}\n            />\n            <ResizeHandle\n              ref={(ref) => {\n                this.resize = ref;\n              }}\n            />\n          </ImageContainer>\n        )}\n\n        <StyledStage\n          height={heightFromState || height}\n          width={widthFromState || width}\n          onMouseDown={this.handleOnMouseDown}\n          onMouseUp={this.handleOnMouseUp}\n          onMouseMove={this.handleMouseMove}\n          onContentMouseOut={this.handleOnMouseOutOrLeave}\n          onContentMouseLeave={this.handleOnMouseOutOrLeave}\n        >\n          <Layer>\n            {shapesToUse.map((shape, i) => {\n              let Tag;\n              switch (shape.group) {\n                case SHAPE_GROUPS.RECTANGLES:\n                  Tag = Rectangle;\n                  break;\n                case SHAPE_GROUPS.CIRCLES:\n                  Tag = Circle;\n                  break;\n                case SHAPE_GROUPS.POLYGONS:\n                  Tag = Polygon;\n                  break;\n                default:\n                  return null;\n              }\n\n              return (\n                <Tag\n                  {...(shape.group === SHAPE_GROUPS.CIRCLES ? { radius: shape.radius } : {})}\n                  {...(shape.group === SHAPE_GROUPS.RECTANGLES ? { height: shape.height, width: shape.width } : {})}\n                  {...(shape.group === SHAPE_GROUPS.POLYGONS\n                    ? { points: shape.points, addPolygonPoint: (e) => this.addPolygonPoint(e) }\n                    : {})}\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  hotspotColor={hotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  selectedHotspotColor={selectedHotspotColor}\n                  id={shape.id}\n                  key={i}\n                  onClick={() => this.handleOnSetAsCorrect(shape)}\n                  onDragEnd={this.handleOnDragEnd}\n                  onDeleteShape={this.deleteShape}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  imageHeight={heightFromState || height}\n                  imageWidth={widthFromState || width}\n                  {...(shape.group === 'polygons' ? { addPolygonPoint: (e) => this.addPolygonPoint(e) } : {})}\n                />\n              );\n            })}\n          </Layer>\n        </StyledStage>\n      </BaseContainer>\n    );\n  }\n}\n\nDrawable.propTypes = {\n  disableDrag: PropTypes.func.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  enableDrag: PropTypes.func.isRequired,\n  shapeType: PropTypes.oneOf(Object.values(SUPPORTED_SHAPES)),\n  imageUrl: PropTypes.string.isRequired,\n  handleFinishDrawing: PropTypes.func.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.array.isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n};\n\nexport default Drawable;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/hotspot-polygon.js

@@ -238,8 +238,7 @@ class PolComponent extends _react.default.Component {
       onDragMove: this.handleOnDragEnd,
       onDragEnd: e => this.handleOnDragEnd(e, true),
       x: x,
-      y: y,
-      opacity: 0.5
+      y: y
     }), showPoints && points.map((point, index) => /*#__PURE__*/_react.default.createElement(_reactKonva.Circle, {
       key: index,
       x: point.x,

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

@@ -1 +1 @@
-{"version":3,"file":"hotspot-polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_ReactKonvaCore","_DeleteWidget","HOVERED_COLOR","PolComponent","React","Component","constructor","args","_defineProperty2","default","points","xList","map","p","x","yList","y","Math","min","max","xOffset","yOffset","getOffset","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","getDerivedStateFromProps","nextProps","prevState","imageHeight","imageWidth","JSON","stringify","getBoundingBox","xValues","yValues","minX","maxX","minY","maxY","render","correct","hotspotColor","outlineColor","selectedHotspotColor","hoverOutlineColor","strokeWidth","isInProgress","showPoints","calculatedStrokeWidth","calculatedStroke","boundingBox","calculatedFill","createElement","Group","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Rect","stroke","listening","Line","closed","fill","handleClick","onTap","draggable","onDragStart","onDragMove","handleOnDragEnd","opacity","Circle","key","radius","handleOnDragVertex","handleWidgetClick","handleDelete","propTypes","PropTypes","bool","isRequired","string","number","func","arrayOf","shape","defaultProps","_default","exports"],"sources":["../src/hotspot-polygon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Line, Circle } from 'react-konva';\nimport { Rect } from 'react-konva/lib/ReactKonvaCore';\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 !== imageHeight ||\n      prevState.imageWidth !== imageWidth ||\n      prevState.id !== nextProps.id ||\n      JSON.stringify(prevState.points) !== JSON.stringify(points)\n    ) {\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 null;\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    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({\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  // serialize(points) {\n  //   return points.reduce((acc, point) => [...acc, point.x, point.y], []);\n  // }\n\n  getBoundingBox(points) {\n    const xValues = points.map((point) => point.x);\n    const yValues = points.map((point) => point.y);\n    const minX = Math.min(...xValues);\n    const maxX = Math.max(...xValues);\n    const minY = Math.min(...yValues);\n    const maxY = Math.max(...yValues);\n    return {\n      x: minX,\n      y: minY,\n      width: maxX - minX,\n      height: maxY - minY,\n    };\n  }\n\n  render() {\n    const {\n      correct,\n      id,\n      hotspotColor,\n      outlineColor,\n      selectedHotspotColor,\n      hoverOutlineColor,\n      strokeWidth = 5,\n    } = this.props;\n\n    const { points, x, y, hovered } = this.state;\n    const isInProgress = id === 'newPolygon';\n    const showPoints = hovered || id === 'newPolygon';\n\n    const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n    const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\n    const boundingBox = this.getBoundingBox(points);\n    const calculatedFill = correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor;\n\n    return (\n      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        {hoverOutlineColor && hovered && (\n          <Rect\n            x={boundingBox.x}\n            y={boundingBox.y}\n            width={boundingBox.width}\n            height={boundingBox.height}\n            stroke={hoverOutlineColor}\n            strokeWidth={2}\n            listening={false}\n          />\n        )}\n        <Line\n          points={this.serialize(points)}\n          closed={!isInProgress}\n          fill={isInProgress ? 'transparent' : calculatedFill}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={isInProgress ? outlineColor : calculatedStroke}\n          strokeWidth={isInProgress ? 1 : calculatedStrokeWidth}\n          onDragStart={this.onDragStart}\n          onDragMove={this.handleOnDragEnd}\n          onDragEnd={(e) => this.handleOnDragEnd(e, true)}\n          x={x}\n          y={y}\n          opacity={0.5}\n        />\n\n        {showPoints &&\n          points.map((point, index) => (\n            <Circle\n              key={index}\n              x={point.x}\n              y={point.y}\n              radius={5}\n              fill={index === 0 && id === 'newPolygon' ? 'blue' : '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              opacity={4}\n            />\n          ))}\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget x={x} y={y} id={id} handleWidgetClick={this.handleDelete} points={points} />\n        )}\n      </Group>\n    );\n  }\n}\n\nPolComponent.propTypes = {\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  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\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 PolComponent;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEA,MAAMK,aAAa,GAAG,SAAS;AAE/B,MAAMC,YAAY,SAASC,cAAK,CAACC,SAAS,CAAC;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,qBA6B5BC,MAAM,IAAK;MACtB,MAAMC,KAAK,GAAGD,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,CAAC,CAAC;MACpC,MAAMC,KAAK,GAAGL,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACG,CAAC,CAAC;MAEpC,OAAO;QACLF,CAAC,EAAEG,IAAI,CAACC,GAAG,CAAC,GAAGP,KAAK,CAAC;QACrBK,CAAC,EAAEC,IAAI,CAACE,GAAG,CAAC,GAAGJ,KAAK;MACtB,CAAC;IACH,CAAC;IAAA,IAAAP,gBAAA,CAAAC,OAAA,qBAEYC,MAAM,IAAK;MACtB,MAAM;QAAEI,CAAC,EAAEM,OAAO;QAAEJ,CAAC,EAAEK;MAAQ,CAAC,GAAG,IAAI,CAACC,SAAS,CAACZ,MAAM,CAAC;MAEzD,OAAOA,MAAM,CAACa,MAAM,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK,CAAC,GAAGD,GAAG,EAAEC,KAAK,CAACX,CAAC,GAAGM,OAAO,EAAEK,KAAK,CAACT,CAAC,GAAGK,OAAO,CAAC,EAAE,EAAE,CAAC;IAC1F,CAAC;IAAA,IAAAb,gBAAA,CAAAC,OAAA,2BAEkBC,MAAM,IAAK;MAC5B,IAAIA,MAAM,CAACgB,MAAM,EAAE;QACjB,MAAM;UAAEZ,CAAC;UAAEE;QAAE,CAAC,GAAG,IAAI,CAACM,SAAS,CAACZ,MAAM,CAAC;QAEvC,OAAO;UACLI,CAAC;UACDE,CAAC;UACDN;QACF,CAAC;MACH;MAEA,OAAO;QACLiB,EAAE,EAAE,EAAE;QACNb,CAAC,EAAE,CAAC;QACJE,CAAC,EAAE,CAAC;QACJN,MAAM,EAAE;MACV,CAAC;IACH,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA,iBAEO;MACNmB,OAAO,EAAE,KAAK;MACdC,UAAU,EAAE,KAAK;MACjB,GAAG,IAAI,CAACC,eAAe,CAAC,IAAI,CAACC,KAAK,CAACrB,MAAM;IAC3C,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA,uBAEcuB,CAAC,IAAK;MACnB,MAAM;QAAEtB;MAAO,CAAC,GAAG,IAAI,CAACqB,KAAK;MAC7B,MAAMpB,KAAK,GAAGD,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,CAAC,CAAC;MACpC,MAAMC,KAAK,GAAGL,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACG,CAAC,CAAC;MAEpC,MAAMiB,KAAK,GAAGhB,IAAI,CAACE,GAAG,CAAC,GAAGR,KAAK,CAAC,GAAGM,IAAI,CAACC,GAAG,CAAC,GAAGP,KAAK,CAAC;MACrD,MAAMuB,MAAM,GAAGjB,IAAI,CAACE,GAAG,CAAC,GAAGJ,KAAK,CAAC,GAAGE,IAAI,CAACC,GAAG,CAAC,GAAGH,KAAK,CAAC;MAEtD,MAAM;QAAEoB,SAAS;QAAEC,OAAO;QAAET;MAAG,CAAC,GAAG,IAAI,CAACI,KAAK;MAE7C,IAAIE,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,IAAIC,SAAS,EAAE;QACxC;MACF;MAEA,IAAIA,SAAS,IAAIR,EAAE,KAAK,YAAY,EAAE;QACpC,IAAI,CAACI,KAAK,CAACM,eAAe,CAACL,CAAC,CAAC;QAC7B;MACF;MAEAA,CAAC,CAACM,YAAY,GAAG,IAAI;MACrBF,OAAO,CAACT,EAAE,CAAC;IACb,CAAC;IAAA,IAAAnB,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,IAAI,CAAC8B,QAAQ,CAAC;QAAEX,OAAO,EAAE;MAAK,CAAC,CAAC;MAChCY,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;IACxC,CAAC;IAAA,IAAAnC,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,IAAI,CAAC8B,QAAQ,CAAC;QAAEX,OAAO,EAAE;MAAM,CAAC,CAAC;MACjCY,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;IACxC,CAAC;IAAA,IAAAnC,gBAAA,CAAAC,OAAA,2BAEiB,CAACuB,CAAC,EAAEY,WAAW,GAAG,KAAK,KAAK;MAC5C,MAAM;QAAEC,SAAS;QAAElB;MAAG,CAAC,GAAG,IAAI,CAACI,KAAK;MACpC,MAAMrB,MAAM,GAAGsB,CAAC,CAACc,MAAM,CAACpC,MAAM,CAAC,CAAC,IAAI,IAAI,CAACqC,SAAS,CAAC,IAAI,CAACC,KAAK,CAACtC,MAAM,CAAC;MAErE,MAAMuC,SAAS,GAAGvC,MAAM,CAACa,MAAM,CAAC,CAACC,GAAG,EAAE0B,sBAAsB,EAAEC,KAAK,KAAK;QACtE,IAAIA,KAAK,GAAG,CAAC,KAAK,CAAC,IAAIA,KAAK,GAAG,CAAC,GAAGzC,MAAM,CAACgB,MAAM,EAAE;UAChD,OAAO,CACL,GAAGF,GAAG,EACN;YACEV,CAAC,EAAEoC,sBAAsB,GAAGlB,CAAC,CAACc,MAAM,CAAChC,CAAC,CAAC,CAAC;YACxCE,CAAC,EAAEN,MAAM,CAACyC,KAAK,GAAG,CAAC,CAAC,GAAGnB,CAAC,CAACc,MAAM,CAAC9B,CAAC,CAAC;UACpC,CAAC,CACF;QACH;QAEA,OAAOQ,GAAG;MACZ,CAAC,EAAE,EAAE,CAAC;MAEN,IAAI,CAACe,QAAQ,CAAC;QACZ7B,MAAM,EAAEuC,SAAS;QACjB,GAAG,IAAI,CAAC3B,SAAS,CAAC2B,SAAS,CAAC;QAC5BpB,UAAU,EAAEe,WAAW,GAAG,KAAK,GAAG,IAAI,CAACI,KAAK,CAACnB;MAC/C,CAAC,CAAC;MAEF,IAAIe,WAAW,EAAE;QACfC,SAAS,CAAClB,EAAE,EAAE;UAAEjB,MAAM,EAAEuC;QAAU,CAAC,CAAC;MACtC;IACF,CAAC;IAAA,IAAAzC,gBAAA,CAAAC,OAAA,8BAEoB,CAACuB,CAAC,EAAEoB,YAAY,EAAER,WAAW,KAAK;MACrD,MAAM;QAAEC,SAAS;QAAElB;MAAG,CAAC,GAAG,IAAI,CAACI,KAAK;MACpC,MAAM;QAAErB;MAAO,CAAC,GAAG,IAAI,CAACsC,KAAK;MAE7B,MAAMC,SAAS,GAAGvC,MAAM,CAACE,GAAG,CAAC,CAACa,KAAK,EAAE0B,KAAK,KACxCA,KAAK,KAAKC,YAAY,GAAG;QAAEtC,CAAC,EAAEkB,CAAC,CAACc,MAAM,CAAChC,CAAC,CAAC,CAAC;QAAEE,CAAC,EAAEgB,CAAC,CAACc,MAAM,CAAC9B,CAAC,CAAC;MAAE,CAAC,GAAGS,KAClE,CAAC;MAED,IAAI,CAACc,QAAQ,CAAC;QACZ7B,MAAM,EAAEuC,SAAS;QACjB,GAAG,IAAI,CAAC3B,SAAS,CAAC2B,SAAS,CAAC;QAC5BpB,UAAU,EAAEe,WAAW,GAAG,KAAK,GAAG,IAAI,CAACI,KAAK,CAACnB;MAC/C,CAAC,CAAC;MAEF,IAAIe,WAAW,EAAE;QACfC,SAAS,CAAClB,EAAE,EAAE;UAAEjB,MAAM,EAAEuC;QAAU,CAAC,CAAC;MACtC;IACF,CAAC;IAAA,IAAAzC,gBAAA,CAAAC,OAAA,uBAEa,MAAM;MAClB,IAAI,CAAC8B,QAAQ,CAAC;QAAEV,UAAU,EAAE;MAAK,CAAC,CAAC;IACrC,CAAC;IAAA,IAAArB,gBAAA,CAAAC,OAAA,wBAEekB,EAAE,IAAK;MACrB,MAAM;QAAE0B;MAAc,CAAC,GAAG,IAAI,CAACtB,KAAK;MACpCsB,aAAa,CAAC1B,EAAE,CAAC;IACnB,CAAC;EAAA;EA7JD,OAAO2B,wBAAwBA,CAACC,SAAS,EAAEC,SAAS,EAAE;IACpD,MAAM;MAAE7B,EAAE;MAAEjB,MAAM;MAAE+C,WAAW;MAAEC;IAAW,CAAC,GAAGH,SAAS;IACzD;IACA,IACEC,SAAS,CAACC,WAAW,KAAKA,WAAW,IACrCD,SAAS,CAACE,UAAU,KAAKA,UAAU,IACnCF,SAAS,CAAC7B,EAAE,KAAK4B,SAAS,CAAC5B,EAAE,IAC7BgC,IAAI,CAACC,SAAS,CAACJ,SAAS,CAAC9C,MAAM,CAAC,KAAKiD,IAAI,CAACC,SAAS,CAAClD,MAAM,CAAC,EAC3D;MACA,MAAMC,KAAK,GAAGD,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,CAAC,CAAC;MACpC,MAAMC,KAAK,GAAGL,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACG,CAAC,CAAC;MAEpC,MAAMF,CAAC,GAAGG,IAAI,CAACC,GAAG,CAAC,GAAGP,KAAK,CAAC;MAC5B,MAAMK,CAAC,GAAGC,IAAI,CAACE,GAAG,CAAC,GAAGJ,KAAK,CAAC;MAE5B,OAAO;QACLY,EAAE;QACFb,CAAC;QACDE,CAAC;QACDN,MAAM;QACN+C,WAAW;QACXC;MACF,CAAC;IACH;IAEA,OAAO,IAAI;EACb;EAqIA;EACA;EACA;;EAEAG,cAAcA,CAACnD,MAAM,EAAE;IACrB,MAAMoD,OAAO,GAAGpD,MAAM,CAACE,GAAG,CAAEa,KAAK,IAAKA,KAAK,CAACX,CAAC,CAAC;IAC9C,MAAMiD,OAAO,GAAGrD,MAAM,CAACE,GAAG,CAAEa,KAAK,IAAKA,KAAK,CAACT,CAAC,CAAC;IAC9C,MAAMgD,IAAI,GAAG/C,IAAI,CAACC,GAAG,CAAC,GAAG4C,OAAO,CAAC;IACjC,MAAMG,IAAI,GAAGhD,IAAI,CAACE,GAAG,CAAC,GAAG2C,OAAO,CAAC;IACjC,MAAMI,IAAI,GAAGjD,IAAI,CAACC,GAAG,CAAC,GAAG6C,OAAO,CAAC;IACjC,MAAMI,IAAI,GAAGlD,IAAI,CAACE,GAAG,CAAC,GAAG4C,OAAO,CAAC;IACjC,OAAO;MACLjD,CAAC,EAAEkD,IAAI;MACPhD,CAAC,EAAEkD,IAAI;MACPjC,KAAK,EAAEgC,IAAI,GAAGD,IAAI;MAClB9B,MAAM,EAAEiC,IAAI,GAAGD;IACjB,CAAC;EACH;EAEAE,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,OAAO;MACP1C,EAAE;MACF2C,YAAY;MACZC,YAAY;MACZC,oBAAoB;MACpBC,iBAAiB;MACjBC,WAAW,GAAG;IAChB,CAAC,GAAG,IAAI,CAAC3C,KAAK;IAEd,MAAM;MAAErB,MAAM;MAAEI,CAAC;MAAEE,CAAC;MAAEY;IAAQ,CAAC,GAAG,IAAI,CAACoB,KAAK;IAC5C,MAAM2B,YAAY,GAAGhD,EAAE,KAAK,YAAY;IACxC,MAAMiD,UAAU,GAAGhD,OAAO,IAAID,EAAE,KAAK,YAAY;IAEjD,MAAMkD,qBAAqB,GAAGR,OAAO,GAAGK,WAAW,GAAG9C,OAAO,GAAG,CAAC,GAAG,CAAC;IACrE,MAAMkD,gBAAgB,GAAGT,OAAO,GAAGE,YAAY,GAAG3C,OAAO,GAAG1B,aAAa,GAAG,EAAE;IAC9E,MAAM6E,WAAW,GAAG,IAAI,CAAClB,cAAc,CAACnD,MAAM,CAAC;IAC/C,MAAMsE,cAAc,GAAGX,OAAO,IAAIG,oBAAoB,GAAGA,oBAAoB,GAAGF,YAAY;IAE5F,oBACE3E,MAAA,CAAAc,OAAA,CAAAwE,aAAA,CAAClF,WAAA,CAAAmF,KAAK;MAACC,YAAY,EAAE,IAAI,CAACC,gBAAiB;MAACC,YAAY,EAAE,IAAI,CAACC;IAAiB,GAC7Eb,iBAAiB,IAAI7C,OAAO,iBAC3BjC,MAAA,CAAAc,OAAA,CAAAwE,aAAA,CAACjF,eAAA,CAAAuF,IAAI;MACHzE,CAAC,EAAEiE,WAAW,CAACjE,CAAE;MACjBE,CAAC,EAAE+D,WAAW,CAAC/D,CAAE;MACjBiB,KAAK,EAAE8C,WAAW,CAAC9C,KAAM;MACzBC,MAAM,EAAE6C,WAAW,CAAC7C,MAAO;MAC3BsD,MAAM,EAAEf,iBAAkB;MAC1BC,WAAW,EAAE,CAAE;MACfe,SAAS,EAAE;IAAM,CAClB,CACF,eACD9F,MAAA,CAAAc,OAAA,CAAAwE,aAAA,CAAClF,WAAA,CAAA2F,IAAI;MACHhF,MAAM,EAAE,IAAI,CAACqC,SAAS,CAACrC,MAAM,CAAE;MAC/BiF,MAAM,EAAE,CAAChB,YAAa;MACtBiB,IAAI,EAAEjB,YAAY,GAAG,aAAa,GAAGK,cAAe;MACpD5C,OAAO,EAAE,IAAI,CAACyD,WAAY;MAC1BC,KAAK,EAAE,IAAI,CAACD,WAAY;MACxBE,SAAS;MACTP,MAAM,EAAEb,YAAY,GAAGJ,YAAY,GAAGO,gBAAiB;MACvDJ,WAAW,EAAEC,YAAY,GAAG,CAAC,GAAGE,qBAAsB;MACtDmB,WAAW,EAAE,IAAI,CAACA,WAAY;MAC9BC,UAAU,EAAE,IAAI,CAACC,eAAgB;MACjCrD,SAAS,EAAGb,CAAC,IAAK,IAAI,CAACkE,eAAe,CAAClE,CAAC,EAAE,IAAI,CAAE;MAChDlB,CAAC,EAAEA,CAAE;MACLE,CAAC,EAAEA,CAAE;MACLmF,OAAO,EAAE;IAAI,CACd,CAAC,EAEDvB,UAAU,IACTlE,MAAM,CAACE,GAAG,CAAC,CAACa,KAAK,EAAE0B,KAAK,kBACtBxD,MAAA,CAAAc,OAAA,CAAAwE,aAAA,CAAClF,WAAA,CAAAqG,MAAM;MACLC,GAAG,EAAElD,KAAM;MACXrC,CAAC,EAAEW,KAAK,CAACX,CAAE;MACXE,CAAC,EAAES,KAAK,CAACT,CAAE;MACXsF,MAAM,EAAE,CAAE;MACVV,IAAI,EAAEzC,KAAK,KAAK,CAAC,IAAIxB,EAAE,KAAK,YAAY,GAAG,MAAM,GAAG,OAAQ;MAC5D6D,MAAM,EAAEtF,aAAc;MACtBwE,WAAW,EAAE,CAAE;MACftC,OAAO,EAAE,IAAI,CAACyD,WAAY;MAC1BG,WAAW,EAAE,IAAI,CAACA,WAAY;MAC9BC,UAAU,EAAGjE,CAAC,IAAK;QACjB,IAAI,CAACuE,kBAAkB,CAACvE,CAAC,EAAEmB,KAAK,CAAC;MACnC,CAAE;MACFN,SAAS,EAAGb,CAAC,IAAK;QAChB,IAAI,CAACuE,kBAAkB,CAACvE,CAAC,EAAEmB,KAAK,EAAE,IAAI,CAAC;MACzC,CAAE;MACF4C,SAAS;MACTI,OAAO,EAAE;IAAE,CACZ,CACF,CAAC,EACH,CAAC,IAAI,CAACnD,KAAK,CAACnB,UAAU,IAAI,IAAI,CAACmB,KAAK,CAACpB,OAAO,iBAC3CjC,MAAA,CAAAc,OAAA,CAAAwE,aAAA,CAAChF,aAAA,CAAAQ,OAAY;MAACK,CAAC,EAAEA,CAAE;MAACE,CAAC,EAAEA,CAAE;MAACW,EAAE,EAAEA,EAAG;MAAC6E,iBAAiB,EAAE,IAAI,CAACC,YAAa;MAAC/F,MAAM,EAAEA;IAAO,CAAE,CAEtF,CAAC;EAEZ;AACF;AAEAP,YAAY,CAACuG,SAAS,GAAG;EACvBrC,OAAO,EAAEsC,kBAAS,CAACC,IAAI;EACvBzE,SAAS,EAAEwE,kBAAS,CAACC,IAAI,CAACC,UAAU;EACpClF,EAAE,EAAEgF,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC/BpD,WAAW,EAAEkD,kBAAS,CAACI,MAAM;EAC7BrD,UAAU,EAAEiD,kBAAS,CAACI,MAAM;EAC5BzC,YAAY,EAAEqC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzCrC,oBAAoB,EAAEmC,kBAAS,CAACG,MAAM;EACtCrC,iBAAiB,EAAEkC,kBAAS,CAACG,MAAM;EACnC1E,OAAO,EAAEuE,kBAAS,CAACK,IAAI,CAACH,UAAU;EAClCxE,eAAe,EAAEsE,kBAAS,CAACK,IAAI,CAACH,UAAU;EAC1CxD,aAAa,EAAEsD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACxChE,SAAS,EAAE8D,kBAAS,CAACK,IAAI,CAACH,UAAU;EACpCtC,YAAY,EAAEoC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzCnG,MAAM,EAAEiG,kBAAS,CAACM,OAAO,CACvBN,kBAAS,CAACO,KAAK,CAAC;IACdpG,CAAC,EAAE6F,kBAAS,CAACI,MAAM;IACnB/F,CAAC,EAAE2F,kBAAS,CAACI;EACf,CAAC,CACH,CAAC,CAACF,UAAU;EACZnC,WAAW,EAAEiC,kBAAS,CAACI;AACzB,CAAC;AAED5G,YAAY,CAACgH,YAAY,GAAG;EAC1B9C,OAAO,EAAE;AACX,CAAC;AAAC,IAAA+C,QAAA,GAAAC,OAAA,CAAA5G,OAAA,GAEaN,YAAY","ignoreList":[]}
+{"version":3,"file":"hotspot-polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_ReactKonvaCore","_DeleteWidget","HOVERED_COLOR","PolComponent","React","Component","constructor","args","_defineProperty2","default","points","xList","map","p","x","yList","y","Math","min","max","xOffset","yOffset","getOffset","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","getDerivedStateFromProps","nextProps","prevState","imageHeight","imageWidth","JSON","stringify","getBoundingBox","xValues","yValues","minX","maxX","minY","maxY","render","correct","hotspotColor","outlineColor","selectedHotspotColor","hoverOutlineColor","strokeWidth","isInProgress","showPoints","calculatedStrokeWidth","calculatedStroke","boundingBox","calculatedFill","createElement","Group","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Rect","stroke","listening","Line","closed","fill","handleClick","onTap","draggable","onDragStart","onDragMove","handleOnDragEnd","Circle","key","radius","handleOnDragVertex","opacity","handleWidgetClick","handleDelete","propTypes","PropTypes","bool","isRequired","string","number","func","arrayOf","shape","defaultProps","_default","exports"],"sources":["../src/hotspot-polygon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Line, Circle } from 'react-konva';\nimport { Rect } from 'react-konva/lib/ReactKonvaCore';\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 !== imageHeight ||\n      prevState.imageWidth !== imageWidth ||\n      prevState.id !== nextProps.id ||\n      JSON.stringify(prevState.points) !== JSON.stringify(points)\n    ) {\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 null;\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    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({\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  // serialize(points) {\n  //   return points.reduce((acc, point) => [...acc, point.x, point.y], []);\n  // }\n\n  getBoundingBox(points) {\n    const xValues = points.map((point) => point.x);\n    const yValues = points.map((point) => point.y);\n    const minX = Math.min(...xValues);\n    const maxX = Math.max(...xValues);\n    const minY = Math.min(...yValues);\n    const maxY = Math.max(...yValues);\n    return {\n      x: minX,\n      y: minY,\n      width: maxX - minX,\n      height: maxY - minY,\n    };\n  }\n\n  render() {\n    const {\n      correct,\n      id,\n      hotspotColor,\n      outlineColor,\n      selectedHotspotColor,\n      hoverOutlineColor,\n      strokeWidth = 5,\n    } = this.props;\n\n    const { points, x, y, hovered } = this.state;\n    const isInProgress = id === 'newPolygon';\n    const showPoints = hovered || id === 'newPolygon';\n\n    const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n    const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\n    const boundingBox = this.getBoundingBox(points);\n    const calculatedFill = correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor;\n\n    return (\n      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        {hoverOutlineColor && hovered && (\n          <Rect\n            x={boundingBox.x}\n            y={boundingBox.y}\n            width={boundingBox.width}\n            height={boundingBox.height}\n            stroke={hoverOutlineColor}\n            strokeWidth={2}\n            listening={false}\n          />\n        )}\n        <Line\n          points={this.serialize(points)}\n          closed={!isInProgress}\n          fill={isInProgress ? 'transparent' : calculatedFill}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={isInProgress ? outlineColor : calculatedStroke}\n          strokeWidth={isInProgress ? 1 : 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              x={point.x}\n              y={point.y}\n              radius={5}\n              fill={index === 0 && id === 'newPolygon' ? 'blue' : '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              opacity={4}\n            />\n          ))}\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget x={x} y={y} id={id} handleWidgetClick={this.handleDelete} points={points} />\n        )}\n      </Group>\n    );\n  }\n}\n\nPolComponent.propTypes = {\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  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\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 PolComponent;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEA,MAAMK,aAAa,GAAG,SAAS;AAE/B,MAAMC,YAAY,SAASC,cAAK,CAACC,SAAS,CAAC;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,qBA6B5BC,MAAM,IAAK;MACtB,MAAMC,KAAK,GAAGD,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,CAAC,CAAC;MACpC,MAAMC,KAAK,GAAGL,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACG,CAAC,CAAC;MAEpC,OAAO;QACLF,CAAC,EAAEG,IAAI,CAACC,GAAG,CAAC,GAAGP,KAAK,CAAC;QACrBK,CAAC,EAAEC,IAAI,CAACE,GAAG,CAAC,GAAGJ,KAAK;MACtB,CAAC;IACH,CAAC;IAAA,IAAAP,gBAAA,CAAAC,OAAA,qBAEYC,MAAM,IAAK;MACtB,MAAM;QAAEI,CAAC,EAAEM,OAAO;QAAEJ,CAAC,EAAEK;MAAQ,CAAC,GAAG,IAAI,CAACC,SAAS,CAACZ,MAAM,CAAC;MAEzD,OAAOA,MAAM,CAACa,MAAM,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK,CAAC,GAAGD,GAAG,EAAEC,KAAK,CAACX,CAAC,GAAGM,OAAO,EAAEK,KAAK,CAACT,CAAC,GAAGK,OAAO,CAAC,EAAE,EAAE,CAAC;IAC1F,CAAC;IAAA,IAAAb,gBAAA,CAAAC,OAAA,2BAEkBC,MAAM,IAAK;MAC5B,IAAIA,MAAM,CAACgB,MAAM,EAAE;QACjB,MAAM;UAAEZ,CAAC;UAAEE;QAAE,CAAC,GAAG,IAAI,CAACM,SAAS,CAACZ,MAAM,CAAC;QAEvC,OAAO;UACLI,CAAC;UACDE,CAAC;UACDN;QACF,CAAC;MACH;MAEA,OAAO;QACLiB,EAAE,EAAE,EAAE;QACNb,CAAC,EAAE,CAAC;QACJE,CAAC,EAAE,CAAC;QACJN,MAAM,EAAE;MACV,CAAC;IACH,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA,iBAEO;MACNmB,OAAO,EAAE,KAAK;MACdC,UAAU,EAAE,KAAK;MACjB,GAAG,IAAI,CAACC,eAAe,CAAC,IAAI,CAACC,KAAK,CAACrB,MAAM;IAC3C,CAAC;IAAA,IAAAF,gBAAA,CAAAC,OAAA,uBAEcuB,CAAC,IAAK;MACnB,MAAM;QAAEtB;MAAO,CAAC,GAAG,IAAI,CAACqB,KAAK;MAC7B,MAAMpB,KAAK,GAAGD,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,CAAC,CAAC;MACpC,MAAMC,KAAK,GAAGL,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACG,CAAC,CAAC;MAEpC,MAAMiB,KAAK,GAAGhB,IAAI,CAACE,GAAG,CAAC,GAAGR,KAAK,CAAC,GAAGM,IAAI,CAACC,GAAG,CAAC,GAAGP,KAAK,CAAC;MACrD,MAAMuB,MAAM,GAAGjB,IAAI,CAACE,GAAG,CAAC,GAAGJ,KAAK,CAAC,GAAGE,IAAI,CAACC,GAAG,CAAC,GAAGH,KAAK,CAAC;MAEtD,MAAM;QAAEoB,SAAS;QAAEC,OAAO;QAAET;MAAG,CAAC,GAAG,IAAI,CAACI,KAAK;MAE7C,IAAIE,KAAK,GAAG,CAAC,IAAIC,MAAM,GAAG,CAAC,IAAIC,SAAS,EAAE;QACxC;MACF;MAEA,IAAIA,SAAS,IAAIR,EAAE,KAAK,YAAY,EAAE;QACpC,IAAI,CAACI,KAAK,CAACM,eAAe,CAACL,CAAC,CAAC;QAC7B;MACF;MAEAA,CAAC,CAACM,YAAY,GAAG,IAAI;MACrBF,OAAO,CAACT,EAAE,CAAC;IACb,CAAC;IAAA,IAAAnB,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,IAAI,CAAC8B,QAAQ,CAAC;QAAEX,OAAO,EAAE;MAAK,CAAC,CAAC;MAChCY,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;IACxC,CAAC;IAAA,IAAAnC,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,IAAI,CAAC8B,QAAQ,CAAC;QAAEX,OAAO,EAAE;MAAM,CAAC,CAAC;MACjCY,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;IACxC,CAAC;IAAA,IAAAnC,gBAAA,CAAAC,OAAA,2BAEiB,CAACuB,CAAC,EAAEY,WAAW,GAAG,KAAK,KAAK;MAC5C,MAAM;QAAEC,SAAS;QAAElB;MAAG,CAAC,GAAG,IAAI,CAACI,KAAK;MACpC,MAAMrB,MAAM,GAAGsB,CAAC,CAACc,MAAM,CAACpC,MAAM,CAAC,CAAC,IAAI,IAAI,CAACqC,SAAS,CAAC,IAAI,CAACC,KAAK,CAACtC,MAAM,CAAC;MAErE,MAAMuC,SAAS,GAAGvC,MAAM,CAACa,MAAM,CAAC,CAACC,GAAG,EAAE0B,sBAAsB,EAAEC,KAAK,KAAK;QACtE,IAAIA,KAAK,GAAG,CAAC,KAAK,CAAC,IAAIA,KAAK,GAAG,CAAC,GAAGzC,MAAM,CAACgB,MAAM,EAAE;UAChD,OAAO,CACL,GAAGF,GAAG,EACN;YACEV,CAAC,EAAEoC,sBAAsB,GAAGlB,CAAC,CAACc,MAAM,CAAChC,CAAC,CAAC,CAAC;YACxCE,CAAC,EAAEN,MAAM,CAACyC,KAAK,GAAG,CAAC,CAAC,GAAGnB,CAAC,CAACc,MAAM,CAAC9B,CAAC,CAAC;UACpC,CAAC,CACF;QACH;QAEA,OAAOQ,GAAG;MACZ,CAAC,EAAE,EAAE,CAAC;MAEN,IAAI,CAACe,QAAQ,CAAC;QACZ7B,MAAM,EAAEuC,SAAS;QACjB,GAAG,IAAI,CAAC3B,SAAS,CAAC2B,SAAS,CAAC;QAC5BpB,UAAU,EAAEe,WAAW,GAAG,KAAK,GAAG,IAAI,CAACI,KAAK,CAACnB;MAC/C,CAAC,CAAC;MAEF,IAAIe,WAAW,EAAE;QACfC,SAAS,CAAClB,EAAE,EAAE;UAAEjB,MAAM,EAAEuC;QAAU,CAAC,CAAC;MACtC;IACF,CAAC;IAAA,IAAAzC,gBAAA,CAAAC,OAAA,8BAEoB,CAACuB,CAAC,EAAEoB,YAAY,EAAER,WAAW,KAAK;MACrD,MAAM;QAAEC,SAAS;QAAElB;MAAG,CAAC,GAAG,IAAI,CAACI,KAAK;MACpC,MAAM;QAAErB;MAAO,CAAC,GAAG,IAAI,CAACsC,KAAK;MAE7B,MAAMC,SAAS,GAAGvC,MAAM,CAACE,GAAG,CAAC,CAACa,KAAK,EAAE0B,KAAK,KACxCA,KAAK,KAAKC,YAAY,GAAG;QAAEtC,CAAC,EAAEkB,CAAC,CAACc,MAAM,CAAChC,CAAC,CAAC,CAAC;QAAEE,CAAC,EAAEgB,CAAC,CAACc,MAAM,CAAC9B,CAAC,CAAC;MAAE,CAAC,GAAGS,KAClE,CAAC;MAED,IAAI,CAACc,QAAQ,CAAC;QACZ7B,MAAM,EAAEuC,SAAS;QACjB,GAAG,IAAI,CAAC3B,SAAS,CAAC2B,SAAS,CAAC;QAC5BpB,UAAU,EAAEe,WAAW,GAAG,KAAK,GAAG,IAAI,CAACI,KAAK,CAACnB;MAC/C,CAAC,CAAC;MAEF,IAAIe,WAAW,EAAE;QACfC,SAAS,CAAClB,EAAE,EAAE;UAAEjB,MAAM,EAAEuC;QAAU,CAAC,CAAC;MACtC;IACF,CAAC;IAAA,IAAAzC,gBAAA,CAAAC,OAAA,uBAEa,MAAM;MAClB,IAAI,CAAC8B,QAAQ,CAAC;QAAEV,UAAU,EAAE;MAAK,CAAC,CAAC;IACrC,CAAC;IAAA,IAAArB,gBAAA,CAAAC,OAAA,wBAEekB,EAAE,IAAK;MACrB,MAAM;QAAE0B;MAAc,CAAC,GAAG,IAAI,CAACtB,KAAK;MACpCsB,aAAa,CAAC1B,EAAE,CAAC;IACnB,CAAC;EAAA;EA7JD,OAAO2B,wBAAwBA,CAACC,SAAS,EAAEC,SAAS,EAAE;IACpD,MAAM;MAAE7B,EAAE;MAAEjB,MAAM;MAAE+C,WAAW;MAAEC;IAAW,CAAC,GAAGH,SAAS;IACzD;IACA,IACEC,SAAS,CAACC,WAAW,KAAKA,WAAW,IACrCD,SAAS,CAACE,UAAU,KAAKA,UAAU,IACnCF,SAAS,CAAC7B,EAAE,KAAK4B,SAAS,CAAC5B,EAAE,IAC7BgC,IAAI,CAACC,SAAS,CAACJ,SAAS,CAAC9C,MAAM,CAAC,KAAKiD,IAAI,CAACC,SAAS,CAAClD,MAAM,CAAC,EAC3D;MACA,MAAMC,KAAK,GAAGD,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,CAAC,CAAC;MACpC,MAAMC,KAAK,GAAGL,MAAM,CAACE,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACG,CAAC,CAAC;MAEpC,MAAMF,CAAC,GAAGG,IAAI,CAACC,GAAG,CAAC,GAAGP,KAAK,CAAC;MAC5B,MAAMK,CAAC,GAAGC,IAAI,CAACE,GAAG,CAAC,GAAGJ,KAAK,CAAC;MAE5B,OAAO;QACLY,EAAE;QACFb,CAAC;QACDE,CAAC;QACDN,MAAM;QACN+C,WAAW;QACXC;MACF,CAAC;IACH;IAEA,OAAO,IAAI;EACb;EAqIA;EACA;EACA;;EAEAG,cAAcA,CAACnD,MAAM,EAAE;IACrB,MAAMoD,OAAO,GAAGpD,MAAM,CAACE,GAAG,CAAEa,KAAK,IAAKA,KAAK,CAACX,CAAC,CAAC;IAC9C,MAAMiD,OAAO,GAAGrD,MAAM,CAACE,GAAG,CAAEa,KAAK,IAAKA,KAAK,CAACT,CAAC,CAAC;IAC9C,MAAMgD,IAAI,GAAG/C,IAAI,CAACC,GAAG,CAAC,GAAG4C,OAAO,CAAC;IACjC,MAAMG,IAAI,GAAGhD,IAAI,CAACE,GAAG,CAAC,GAAG2C,OAAO,CAAC;IACjC,MAAMI,IAAI,GAAGjD,IAAI,CAACC,GAAG,CAAC,GAAG6C,OAAO,CAAC;IACjC,MAAMI,IAAI,GAAGlD,IAAI,CAACE,GAAG,CAAC,GAAG4C,OAAO,CAAC;IACjC,OAAO;MACLjD,CAAC,EAAEkD,IAAI;MACPhD,CAAC,EAAEkD,IAAI;MACPjC,KAAK,EAAEgC,IAAI,GAAGD,IAAI;MAClB9B,MAAM,EAAEiC,IAAI,GAAGD;IACjB,CAAC;EACH;EAEAE,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,OAAO;MACP1C,EAAE;MACF2C,YAAY;MACZC,YAAY;MACZC,oBAAoB;MACpBC,iBAAiB;MACjBC,WAAW,GAAG;IAChB,CAAC,GAAG,IAAI,CAAC3C,KAAK;IAEd,MAAM;MAAErB,MAAM;MAAEI,CAAC;MAAEE,CAAC;MAAEY;IAAQ,CAAC,GAAG,IAAI,CAACoB,KAAK;IAC5C,MAAM2B,YAAY,GAAGhD,EAAE,KAAK,YAAY;IACxC,MAAMiD,UAAU,GAAGhD,OAAO,IAAID,EAAE,KAAK,YAAY;IAEjD,MAAMkD,qBAAqB,GAAGR,OAAO,GAAGK,WAAW,GAAG9C,OAAO,GAAG,CAAC,GAAG,CAAC;IACrE,MAAMkD,gBAAgB,GAAGT,OAAO,GAAGE,YAAY,GAAG3C,OAAO,GAAG1B,aAAa,GAAG,EAAE;IAC9E,MAAM6E,WAAW,GAAG,IAAI,CAAClB,cAAc,CAACnD,MAAM,CAAC;IAC/C,MAAMsE,cAAc,GAAGX,OAAO,IAAIG,oBAAoB,GAAGA,oBAAoB,GAAGF,YAAY;IAE5F,oBACE3E,MAAA,CAAAc,OAAA,CAAAwE,aAAA,CAAClF,WAAA,CAAAmF,KAAK;MAACC,YAAY,EAAE,IAAI,CAACC,gBAAiB;MAACC,YAAY,EAAE,IAAI,CAACC;IAAiB,GAC7Eb,iBAAiB,IAAI7C,OAAO,iBAC3BjC,MAAA,CAAAc,OAAA,CAAAwE,aAAA,CAACjF,eAAA,CAAAuF,IAAI;MACHzE,CAAC,EAAEiE,WAAW,CAACjE,CAAE;MACjBE,CAAC,EAAE+D,WAAW,CAAC/D,CAAE;MACjBiB,KAAK,EAAE8C,WAAW,CAAC9C,KAAM;MACzBC,MAAM,EAAE6C,WAAW,CAAC7C,MAAO;MAC3BsD,MAAM,EAAEf,iBAAkB;MAC1BC,WAAW,EAAE,CAAE;MACfe,SAAS,EAAE;IAAM,CAClB,CACF,eACD9F,MAAA,CAAAc,OAAA,CAAAwE,aAAA,CAAClF,WAAA,CAAA2F,IAAI;MACHhF,MAAM,EAAE,IAAI,CAACqC,SAAS,CAACrC,MAAM,CAAE;MAC/BiF,MAAM,EAAE,CAAChB,YAAa;MACtBiB,IAAI,EAAEjB,YAAY,GAAG,aAAa,GAAGK,cAAe;MACpD5C,OAAO,EAAE,IAAI,CAACyD,WAAY;MAC1BC,KAAK,EAAE,IAAI,CAACD,WAAY;MACxBE,SAAS;MACTP,MAAM,EAAEb,YAAY,GAAGJ,YAAY,GAAGO,gBAAiB;MACvDJ,WAAW,EAAEC,YAAY,GAAG,CAAC,GAAGE,qBAAsB;MACtDmB,WAAW,EAAE,IAAI,CAACA,WAAY;MAC9BC,UAAU,EAAE,IAAI,CAACC,eAAgB;MACjCrD,SAAS,EAAGb,CAAC,IAAK,IAAI,CAACkE,eAAe,CAAClE,CAAC,EAAE,IAAI,CAAE;MAChDlB,CAAC,EAAEA,CAAE;MACLE,CAAC,EAAEA;IAAE,CACN,CAAC,EAED4D,UAAU,IACTlE,MAAM,CAACE,GAAG,CAAC,CAACa,KAAK,EAAE0B,KAAK,kBACtBxD,MAAA,CAAAc,OAAA,CAAAwE,aAAA,CAAClF,WAAA,CAAAoG,MAAM;MACLC,GAAG,EAAEjD,KAAM;MACXrC,CAAC,EAAEW,KAAK,CAACX,CAAE;MACXE,CAAC,EAAES,KAAK,CAACT,CAAE;MACXqF,MAAM,EAAE,CAAE;MACVT,IAAI,EAAEzC,KAAK,KAAK,CAAC,IAAIxB,EAAE,KAAK,YAAY,GAAG,MAAM,GAAG,OAAQ;MAC5D6D,MAAM,EAAEtF,aAAc;MACtBwE,WAAW,EAAE,CAAE;MACftC,OAAO,EAAE,IAAI,CAACyD,WAAY;MAC1BG,WAAW,EAAE,IAAI,CAACA,WAAY;MAC9BC,UAAU,EAAGjE,CAAC,IAAK;QACjB,IAAI,CAACsE,kBAAkB,CAACtE,CAAC,EAAEmB,KAAK,CAAC;MACnC,CAAE;MACFN,SAAS,EAAGb,CAAC,IAAK;QAChB,IAAI,CAACsE,kBAAkB,CAACtE,CAAC,EAAEmB,KAAK,EAAE,IAAI,CAAC;MACzC,CAAE;MACF4C,SAAS;MACTQ,OAAO,EAAE;IAAE,CACZ,CACF,CAAC,EACH,CAAC,IAAI,CAACvD,KAAK,CAACnB,UAAU,IAAI,IAAI,CAACmB,KAAK,CAACpB,OAAO,iBAC3CjC,MAAA,CAAAc,OAAA,CAAAwE,aAAA,CAAChF,aAAA,CAAAQ,OAAY;MAACK,CAAC,EAAEA,CAAE;MAACE,CAAC,EAAEA,CAAE;MAACW,EAAE,EAAEA,EAAG;MAAC6E,iBAAiB,EAAE,IAAI,CAACC,YAAa;MAAC/F,MAAM,EAAEA;IAAO,CAAE,CAEtF,CAAC;EAEZ;AACF;AAEAP,YAAY,CAACuG,SAAS,GAAG;EACvBrC,OAAO,EAAEsC,kBAAS,CAACC,IAAI;EACvBzE,SAAS,EAAEwE,kBAAS,CAACC,IAAI,CAACC,UAAU;EACpClF,EAAE,EAAEgF,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC/BpD,WAAW,EAAEkD,kBAAS,CAACI,MAAM;EAC7BrD,UAAU,EAAEiD,kBAAS,CAACI,MAAM;EAC5BzC,YAAY,EAAEqC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzCrC,oBAAoB,EAAEmC,kBAAS,CAACG,MAAM;EACtCrC,iBAAiB,EAAEkC,kBAAS,CAACG,MAAM;EACnC1E,OAAO,EAAEuE,kBAAS,CAACK,IAAI,CAACH,UAAU;EAClCxE,eAAe,EAAEsE,kBAAS,CAACK,IAAI,CAACH,UAAU;EAC1CxD,aAAa,EAAEsD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACxChE,SAAS,EAAE8D,kBAAS,CAACK,IAAI,CAACH,UAAU;EACpCtC,YAAY,EAAEoC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzCnG,MAAM,EAAEiG,kBAAS,CAACM,OAAO,CACvBN,kBAAS,CAACO,KAAK,CAAC;IACdpG,CAAC,EAAE6F,kBAAS,CAACI,MAAM;IACnB/F,CAAC,EAAE2F,kBAAS,CAACI;EACf,CAAC,CACH,CAAC,CAACF,UAAU;EACZnC,WAAW,EAAEiC,kBAAS,CAACI;AACzB,CAAC;AAED5G,YAAY,CAACgH,YAAY,GAAG;EAC1B9C,OAAO,EAAE;AACX,CAAC;AAAC,IAAA+C,QAAA,GAAAC,OAAA,CAAA5G,OAAA,GAEaN,YAAY","ignoreList":[]}

package/configure/lib/hotspot-rectangle.js

@@ -143,7 +143,6 @@ class RectComponent extends _react.default.Component {
       onTransformEnd: this.onResizeEnd,
       x: x,
       y: y,
-      opacity: 0.5,
       cursor: "pointer"
     }), !this.state.isDragging && this.state.hovered && /*#__PURE__*/_react.default.createElement(_DeleteWidget.default, {
       id: id,

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

@@ -1 +1 @@
-{"version":3,"file":"hotspot-rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_DeleteWidget","RectComponent","React","Component","constructor","props","_defineProperty2","default","e","width","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","scaleX","scaleY","Math","max","onDeleteShape","state","createRef","render","correct","hotspotColor","outlineColor","strokeWidth","selectedHotspotColor","hoverOutlineColor","createElement","Group","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","padding","Rect","stroke","listening","ref","fill","handleClick","onTap","draggable","onDragStart","handleOnDragEnd","onTransformStart","onTransformEnd","onResizeEnd","opacity","handleWidgetClick","handleDelete","Transformer","rotateEnabled","boundBoxFunc","oldBox","newBox","propTypes","PropTypes","bool","isRequired","string","number","func","defaultProps","_default","exports"],"sources":["../src/hotspot-rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group, Transformer } from 'react-konva';\nimport DeleteWidget from './DeleteWidget';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n      isDragging: 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    this.setState({ isDragging: false });\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    this.setState({ isDragging: false });\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  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const {\n      correct,\n      height,\n      hotspotColor,\n      id,\n      outlineColor,\n      width,\n      x,\n      y,\n      strokeWidth = 5,\n      selectedHotspotColor,\n      hoverOutlineColor,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    return (\n      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter} padding={12}>\n        {hoverOutlineColor && hovered && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={hoverOutlineColor}\n            strokeWidth={2}\n            listening={false}\n          />\n        )}\n\n        <Rect\n          ref={this.shapeRef}\n          width={width}\n          height={height}\n          fill={correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={hovered ? 'transparent' : outlineColor}\n          strokeWidth={correct && !hovered ? strokeWidth : 0}\n          onDragStart={() => this.setState({ isDragging: true })}\n          onDragEnd={this.handleOnDragEnd}\n          onTransformStart={() => this.setState({ isDragging: true })}\n          onTransformEnd={this.onResizeEnd}\n          x={x}\n          y={y}\n          opacity={0.5}\n          cursor=\"pointer\"\n        />\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget id={id} height={height} width={width} x={x} y={y} handleWidgetClick={this.handleDelete} />\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\nRectComponent.propTypes = {\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  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: 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 RectComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"hotspot-rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_DeleteWidget","RectComponent","React","Component","constructor","props","_defineProperty2","default","e","width","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","scaleX","scaleY","Math","max","onDeleteShape","state","createRef","render","correct","hotspotColor","outlineColor","strokeWidth","selectedHotspotColor","hoverOutlineColor","createElement","Group","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","padding","Rect","stroke","listening","ref","fill","handleClick","onTap","draggable","onDragStart","handleOnDragEnd","onTransformStart","onTransformEnd","onResizeEnd","handleWidgetClick","handleDelete","Transformer","rotateEnabled","boundBoxFunc","oldBox","newBox","propTypes","PropTypes","bool","isRequired","string","number","func","defaultProps","_default","exports"],"sources":["../src/hotspot-rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group, Transformer } from 'react-konva';\nimport DeleteWidget from './DeleteWidget';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n      isDragging: 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    this.setState({ isDragging: false });\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    this.setState({ isDragging: false });\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  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const {\n      correct,\n      height,\n      hotspotColor,\n      id,\n      outlineColor,\n      width,\n      x,\n      y,\n      strokeWidth = 5,\n      selectedHotspotColor,\n      hoverOutlineColor,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    return (\n      <Group onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter} padding={12}>\n        {hoverOutlineColor && hovered && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={hoverOutlineColor}\n            strokeWidth={2}\n            listening={false}\n          />\n        )}\n\n        <Rect\n          ref={this.shapeRef}\n          width={width}\n          height={height}\n          fill={correct && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={hovered ? 'transparent' : outlineColor}\n          strokeWidth={correct && !hovered ? strokeWidth : 0}\n          onDragStart={() => this.setState({ isDragging: true })}\n          onDragEnd={this.handleOnDragEnd}\n          onTransformStart={() => this.setState({ isDragging: true })}\n          onTransformEnd={this.onResizeEnd}\n          x={x}\n          y={y}\n          cursor=\"pointer\"\n        />\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget id={id} height={height} width={width} x={x} y={y} handleWidgetClick={this.handleDelete} />\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\nRectComponent.propTypes = {\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  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: 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 RectComponent;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/utils.js

@@ -1,11 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.updateImageDimensions = exports.isPointInsidePolygon = exports.groupShapes = exports.getUpdatedShapes = exports.getUpdatedRectangle = exports.getUpdatedPolygon = exports.getAllShapes = exports.generateValidationMessage = exports.calculate = void 0;
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _lodashEs = require("lodash-es");
 var _shapes = require("./shapes");
 const updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {
   // if we want to keep image aspect ratio
@@ -118,7 +117,7 @@ const groupShapes = shapesArray => {
       return acc;
     }, shapesMap);
   }
-  return (0, _cloneDeep.default)(shapesMap);
+  return (0, _lodashEs.cloneDeep)(shapesMap);
 };
 exports.groupShapes = groupShapes;
 const isPointInsidePolygon = (polygon, x, y) => {