@pie-element/hotspot 6.24.1-next.9 → 6.25.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.25.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@6.24.0...@pie-element/hotspot@6.25.0) (2024-08-06)
+
+
+### Features
+
+* **hotspot:** Add selectedHotspotColor and hoverOutlineColor support PD-3852 ([e6f8ed8](https://github.com/pie-framework/pie-elements/commit/e6f8ed887a0ceaaaaf11d78d5a736c723f19600c))
+* **hotspot:** Add selectedHotspotColor and hoverOutlineColor support PD-3852 ([422a426](https://github.com/pie-framework/pie-elements/commit/422a426e0189e7b4110216a8ef3599bbf74db17f))
+* update pie-lib PD-3996, PD-3792, Pd-3791, PD-3841, PD-3956, PD-3569, PD-3855 ([6343d1b](https://github.com/pie-framework/pie-elements/commit/6343d1b00c5a4a3d88de70ed13a8aa5c1a43002d))
+* **hotspot:** Add selectedHotspotColor and hoverOutlineColor support PD-3852 ([fd148d4](https://github.com/pie-framework/pie-elements/commit/fd148d423dfca651b8c420d2e2913c7df4dda0b7))
+
+
+
+
+
 # [6.24.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@6.23.6...@pie-element/hotspot@6.24.0) (2024-07-26)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.24.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@6.23.0...@pie-element/hotspot-configure@6.24.0) (2024-08-06)
+
+
+### Features
+
+* **hotspot:** Add selectedHotspotColor and hoverOutlineColor support PD-3852 ([e6f8ed8](https://github.com/pie-framework/pie-elements/commit/e6f8ed887a0ceaaaaf11d78d5a736c723f19600c))
+* **hotspot:** Add selectedHotspotColor and hoverOutlineColor support PD-3852 ([422a426](https://github.com/pie-framework/pie-elements/commit/422a426e0189e7b4110216a8ef3599bbf74db17f))
+* update pie-lib PD-3996, PD-3792, Pd-3791, PD-3841, PD-3956, PD-3569, PD-3855 ([6343d1b](https://github.com/pie-framework/pie-elements/commit/6343d1b00c5a4a3d88de70ed13a8aa5c1a43002d))
+* **hotspot:** Add selectedHotspotColor and hoverOutlineColor support PD-3852 ([fd148d4](https://github.com/pie-framework/pie-elements/commit/fd148d423dfca651b8c420d2e2913c7df4dda0b7))
+
+
+
+
+
 # [6.23.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@6.22.6...@pie-element/hotspot-configure@6.23.0) (2024-07-26)
 
 

package/configure/lib/hotspot-circle.js

@@ -145,7 +145,12 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
           x = _this$props4.x,
           y = _this$props4.y,
           _this$props4$strokeWi = _this$props4.strokeWidth,
-          strokeWidth = _this$props4$strokeWi === void 0 ? 5 : _this$props4$strokeWi; // Ensure radius is valid
+          strokeWidth = _this$props4$strokeWi === void 0 ? 5 : _this$props4$strokeWi,
+          selectedHotspotColor = _this$props4.selectedHotspotColor,
+          hoverOutlineColor = _this$props4.hoverOutlineColor;
+      var _this$state = this.state,
+          hovered = _this$state.hovered,
+          isDragging = _this$state.isDragging; // Ensure radius is valid
 
       var validRadius = isNaN(radius) || radius <= 0 ? 5 : radius;
       return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
@@ -156,7 +161,7 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
         classes: classes.base,
         ref: this.shapeRef,
         radius: validRadius,
-        fill: hotspotColor,
+        fill: correct ? selectedHotspotColor : hotspotColor,
         onClick: this.handleClick,
         onTap: this.handleClick,
         draggable: true,
@@ -176,7 +181,7 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
         onTransformEnd: this.onResizeEnd,
         x: x,
         y: y
-      }), !this.state.isDragging && this.state.hovered && /*#__PURE__*/_react["default"].createElement(_DeleteWidget["default"], {
+      }), !isDragging && hovered && /*#__PURE__*/_react["default"].createElement(_DeleteWidget["default"], {
         id: id,
         radius: validRadius,
         x: x,
@@ -184,6 +189,7 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
         handleWidgetClick: this.handleDelete,
         isCircle: true
       }), this.state.hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Transformer, {
+        borderStroke: hoverOutlineColor || null,
         ref: this.trRef,
         rotateEnabled: false,
         keepRatio: true,
@@ -230,6 +236,8 @@ CircleComponent.propTypes = {
   id: _propTypes["default"].string.isRequired,
   radius: _propTypes["default"].number.isRequired,
   hotspotColor: _propTypes["default"].string.isRequired,
+  selectedHotspotColor: _propTypes["default"].string,
+  hoverOutlineColor: _propTypes["default"].string,
   onClick: _propTypes["default"].func.isRequired,
   onDeleteShape: _propTypes["default"].func.isRequired,
   onDragEnd: _propTypes["default"].func.isRequired,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-circle.jsx"],"names":["CircleComponent","props","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","React","createRef","classes","correct","hotspotColor","outlineColor","strokeWidth","validRadius","isNaN","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","onResizeEnd","handleDelete","onTransform","oldBox","newBox","width","height","oldCenterX","oldCenterY","newCenterX","newCenterY","offsetX","offsetY","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Transformer } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\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 { classes, correct, radius, hotspotColor, id, outlineColor, x, y, strokeWidth = 5 } = this.props;\n\n    // Ensure radius is valid\n    const validRadius = isNaN(radius) || radius <= 0 ? 5 : radius;\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Circle\n          classes={classes.base}\n          ref={this.shapeRef}\n          radius={validRadius}\n          fill={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        />\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget id={id} radius={validRadius} x={x} y={y} handleWidgetClick={this.handleDelete} isCircle={true} />\n        )}\n        {this.state.hovered && (\n          <Transformer\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\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n\n  group: {\n    padding: '12px',\n  },\n});\n\nCircleComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\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  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 withStyles(styles)(CircleComponent);\n"],"file":"hotspot-circle.js"}
+{"version":3,"sources":["../src/hotspot-circle.jsx"],"names":["CircleComponent","props","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","React","createRef","classes","correct","hotspotColor","outlineColor","strokeWidth","selectedHotspotColor","hoverOutlineColor","validRadius","isNaN","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","onResizeEnd","handleDelete","onTransform","oldBox","newBox","width","height","oldCenterX","oldCenterY","newCenterX","newCenterY","offsetX","offsetY","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Rect, Transformer } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\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      classes,\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 classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Circle\n          classes={classes.base}\n          ref={this.shapeRef}\n          radius={validRadius}\n          fill={correct ? 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        />\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\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n\n  group: {\n    padding: '12px',\n  },\n});\n\nCircleComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\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 withStyles(styles)(CircleComponent);\n"],"file":"hotspot-circle.js"}

package/configure/lib/hotspot-container.js

@@ -229,7 +229,9 @@ var Container = /*#__PURE__*/function (_Component) {
           onUpdateImageDimension = _this$props2.onUpdateImageDimension,
           outlineColor = _this$props2.outlineColor,
           strokeWidth = _this$props2.strokeWidth,
-          preserveAspectRatioEnabled = _this$props2.preserveAspectRatioEnabled;
+          preserveAspectRatioEnabled = _this$props2.preserveAspectRatioEnabled,
+          hoverOutlineColor = _this$props2.hoverOutlineColor,
+          selectedHotspotColor = _this$props2.selectedHotspotColor;
       var _this$state = this.state,
           dropzoneActive = _this$state.dropzoneActive,
           dragEnabled = _this$state.dragEnabled;
@@ -300,6 +302,8 @@ var Container = /*#__PURE__*/function (_Component) {
         handleFinishDrawing: this.handleFinishDrawing,
         imageUrl: imageUrl,
         hotspotColor: hotspotColor,
+        selectedHotspotColor: selectedHotspotColor,
+        hoverOutlineColor: hoverOutlineColor,
         multipleCorrect: multipleCorrect,
         onUpdateImageDimension: onUpdateImageDimension,
         onUpdateShapes: this.onUpdateShapes,
@@ -395,6 +399,8 @@ Container.propTypes = {
   dimensions: _propTypes["default"].object.isRequired,
   imageUrl: _propTypes["default"].string.isRequired,
   hotspotColor: _propTypes["default"].string.isRequired,
+  selectedHotspotColor: _propTypes["default"].string,
+  hoverOutlineColor: _propTypes["default"].string,
   multipleCorrect: _propTypes["default"].bool.isRequired,
   onImageUpload: _propTypes["default"].func.isRequired,
   onUpdateImageDimension: _propTypes["default"].func.isRequired,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","insertImage","reader","FileReader","onloadend","result","readAsDataURL","fakeImageHandler","getChosenFile","isPasted","setState","dropzoneActive","e","files","clipboardData","handleFileRead","preventDefault","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","id","length","filter","shape","dragEnabled","selectedShape","SUPPORTED_SHAPES","NONE","cancel","done","a","url","fileChosen","progress","classes","dimensions","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","RECTANGLE","buttonShape","POLYGON","CIRCLE","replaceButton","replaceSection","handleInputClick","ref","input","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","handleFinishDrawing","onDeleteShape","centered","nextProps","prevState","Component","styles","theme","marginRight","cursor","marginTop","spacing","unit","marginBottom","border","borderRadius","palette","error","main","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","icon","color","marginLeft","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","propTypes","PropTypes","object","isRequired","string","bool","func","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import { withStyles } from '@material-ui/core/styles/index';\nimport classNames from 'classnames';\nimport { SUPPORTED_SHAPES } from './shapes';\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport Button from './button';\nimport { CircleButton } from './buttons/circle';\nimport { PolygonButton } from './buttons/polygon';\nimport { RectangleButton } from './buttons/rectangle';\n\nimport Drawable from './hotspot-drawable';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n      selectedShape: SUPPORTED_SHAPES.NONE,\n    };\n    this.fakeImageHandler = {\n      cancel: () => {},\n      done: (a, url) => this.props.onImageUpload(url),\n      fileChosen: () => {},\n      progress: () => {},\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload, insertImage } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n\n      if (insertImage) {\n        insertImage({\n          ...this.fakeImageHandler,\n          getChosenFile: () => file,\n          isPasted: true,\n        });\n      }\n    }\n  };\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes)),\n    );\n  };\n\n  onDeleteShape = (id) => {\n    const { shapes } = this.state;\n    if (shapes && shapes.length) {\n      // filter the deleted shape out\n      let newShapes = shapes.filter((shape) => shape.id !== id);\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n  handleInputClick = () => {\n    const { insertImage } = this.props;\n\n    if (insertImage) {\n      insertImage(this.fakeImageHandler);\n    }\n  };\n\n  handleFinishDrawing = () => {\n    // Explicitly end the current shape drawing session\n    // This would cause the finalizeCreation method to be called in the HotspotDrawable component\n    this.setState({ selectedShape: SUPPORTED_SHAPES.NONE });\n  };\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hasErrors,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n    } = this.props;\n    const { dropzoneActive, dragEnabled } = this.state;\n    const { shapes, selectedShape } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={classNames(classes.box, {\n            [classes.boxError]: hasErrors && !dropzoneActive,\n            [classes.boxActive]: dropzoneActive,\n          })}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n                onPaste: this.handleOnPaste,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.RECTANGLE ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.RECTANGLE })}\n              className={classes.buttonShape}\n            >\n              <RectangleButton isActive={selectedShape === SUPPORTED_SHAPES.RECTANGLE} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.POLYGON ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.POLYGON })}\n              className={classes.buttonShape}\n            >\n              <PolygonButton isActive={selectedShape === SUPPORTED_SHAPES.POLYGON} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.CIRCLE ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.CIRCLE })}\n              className={classes.buttonShape}\n            >\n              <CircleButton isActive={selectedShape === SUPPORTED_SHAPES.CIRCLE} />\n            </div>\n\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\" />\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                shapeType={this.state.selectedShape}\n                handleFinishDrawing={this.handleFinishDrawing}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                onDeleteShape={this.onDeleteShape}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={classNames(classes.drawableHeight, classes.centered)}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  buttonShape: {\n    marginRight: '5px',\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n  base: {\n    marginTop: theme.spacing.unit * 1.5,\n    marginBottom: theme.spacing.unit * 2.5,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  boxError: {\n    border: `1px solid ${theme.palette.error.main}`,\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: theme.spacing.unit * 5,\n    paddingRight: theme.spacing.unit * 5,\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#FFF',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: theme.spacing.unit,\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  insertImage: PropTypes.func,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n  hasErrors: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}
+{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","insertImage","reader","FileReader","onloadend","result","readAsDataURL","fakeImageHandler","getChosenFile","isPasted","setState","dropzoneActive","e","files","clipboardData","handleFileRead","preventDefault","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","id","length","filter","shape","dragEnabled","selectedShape","SUPPORTED_SHAPES","NONE","cancel","done","a","url","fileChosen","progress","classes","dimensions","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","hoverOutlineColor","selectedHotspotColor","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","RECTANGLE","buttonShape","POLYGON","CIRCLE","replaceButton","replaceSection","handleInputClick","ref","input","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","handleFinishDrawing","onDeleteShape","centered","nextProps","prevState","Component","styles","theme","marginRight","cursor","marginTop","spacing","unit","marginBottom","border","borderRadius","palette","error","main","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","icon","color","marginLeft","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","propTypes","PropTypes","object","isRequired","string","bool","func","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import { withStyles } from '@material-ui/core/styles/index';\nimport classNames from 'classnames';\nimport { SUPPORTED_SHAPES } from './shapes';\nimport PropTypes from 'prop-types';\nimport React, { Component } from 'react';\nimport Button from './button';\nimport { CircleButton } from './buttons/circle';\nimport { PolygonButton } from './buttons/polygon';\nimport { RectangleButton } from './buttons/rectangle';\n\nimport Drawable from './hotspot-drawable';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n      selectedShape: SUPPORTED_SHAPES.NONE,\n    };\n    this.fakeImageHandler = {\n      cancel: () => {},\n      done: (a, url) => this.props.onImageUpload(url),\n      fileChosen: () => {},\n      progress: () => {},\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload, insertImage } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n\n      if (insertImage) {\n        insertImage({\n          ...this.fakeImageHandler,\n          getChosenFile: () => file,\n          isPasted: true,\n        });\n      }\n    }\n  };\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes)),\n    );\n  };\n\n  onDeleteShape = (id) => {\n    const { shapes } = this.state;\n    if (shapes && shapes.length) {\n      // filter the deleted shape out\n      let newShapes = shapes.filter((shape) => shape.id !== id);\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n  handleInputClick = () => {\n    const { insertImage } = this.props;\n\n    if (insertImage) {\n      insertImage(this.fakeImageHandler);\n    }\n  };\n\n  handleFinishDrawing = () => {\n    // Explicitly end the current shape drawing session\n    // This would cause the finalizeCreation method to be called in the HotspotDrawable component\n    this.setState({ selectedShape: SUPPORTED_SHAPES.NONE });\n  };\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hasErrors,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n      hoverOutlineColor,\n      selectedHotspotColor,\n    } = this.props;\n    \n    const { dropzoneActive, dragEnabled } = this.state;\n    const { shapes, selectedShape } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={classNames(classes.box, {\n            [classes.boxError]: hasErrors && !dropzoneActive,\n            [classes.boxActive]: dropzoneActive,\n          })}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n                onPaste: this.handleOnPaste,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.RECTANGLE ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.RECTANGLE })}\n              className={classes.buttonShape}\n            >\n              <RectangleButton isActive={selectedShape === SUPPORTED_SHAPES.RECTANGLE} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.POLYGON ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.POLYGON })}\n              className={classes.buttonShape}\n            >\n              <PolygonButton isActive={selectedShape === SUPPORTED_SHAPES.POLYGON} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === SUPPORTED_SHAPES.CIRCLE ? SUPPORTED_SHAPES.NONE : SUPPORTED_SHAPES.CIRCLE })}\n              className={classes.buttonShape}\n            >\n              <CircleButton isActive={selectedShape === SUPPORTED_SHAPES.CIRCLE} />\n            </div>\n\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\" />\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                shapeType={this.state.selectedShape}\n                handleFinishDrawing={this.handleFinishDrawing}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                selectedHotspotColor={selectedHotspotColor}\n                hoverOutlineColor={hoverOutlineColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                onDeleteShape={this.onDeleteShape}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={classNames(classes.drawableHeight, classes.centered)}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  buttonShape: {\n    marginRight: '5px',\n    '&:hover': {\n      cursor: 'pointer',\n    },\n  },\n  base: {\n    marginTop: theme.spacing.unit * 1.5,\n    marginBottom: theme.spacing.unit * 2.5,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  boxError: {\n    border: `1px solid ${theme.palette.error.main}`,\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: theme.spacing.unit * 5,\n    paddingRight: theme.spacing.unit * 5,\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#FFF',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: theme.spacing.unit,\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  insertImage: PropTypes.func,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n  hasErrors: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}

package/configure/lib/hotspot-drawable.js

@@ -435,7 +435,9 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           hotspotColor = _this$props8.hotspotColor,
           outlineColor = _this$props8.outlineColor,
           shapes = _this$props8.shapes,
-          strokeWidth = _this$props8.strokeWidth;
+          strokeWidth = _this$props8.strokeWidth,
+          hoverOutlineColor = _this$props8.hoverOutlineColor,
+          selectedHotspotColor = _this$props8.selectedHotspotColor;
       var _this$state2 = this.state,
           stateShapes = _this$state2.stateShapes,
           isDrawing = _this$state2.isDrawing,
@@ -507,6 +509,8 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           correct: shape.correct,
           isDrawing: isDrawing,
           hotspotColor: hotspotColor,
+          hoverOutlineColor: hoverOutlineColor,
+          selectedHotspotColor: selectedHotspotColor,
           id: shape.id,
           key: i,
           onClick: function onClick() {
@@ -587,6 +591,8 @@ Drawable.propTypes = {
   imageUrl: _propTypes["default"].string.isRequired,
   handleFinishDrawing: _propTypes["default"].func.isRequired,
   hotspotColor: _propTypes["default"].string.isRequired,
+  selectedHotspotColor: _propTypes["default"].string,
+  hoverOutlineColor: _propTypes["default"].string,
   multipleCorrect: _propTypes["default"].bool.isRequired,
   onUpdateImageDimension: _propTypes["default"].func.isRequired,
   onUpdateShapes: _propTypes["default"].func.isRequired,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","shapeType","onUpdateShapes","shapes","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","width","canvasHeight","height","newShapes","map","shape","newX","x","newY","y","group","radius","points","xValues","point","yValues","minX","Math","min","minY","maxX","max","maxY","deltaX","deltaY","filter","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","newHeight","parseFloat","newWidth","aspectWidth","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","stateShapes","enableDrag","removeEventListener","undefined","onDeleteShape","temporaryPolygon","addPoint","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseOutOrLeave","i","Tag","SHAPE_GROUPS","RECTANGLES","Rectangle","CIRCLES","Circle","POLYGONS","Polygon","handleOnSetAsCorrect","handleOnDragEnd","deleteShape","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","oneOf","string","handleFinishDrawing","bool","array","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { withStyles } from '@material-ui/core/styles/index';\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';\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.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\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    }).filter(shape => shape !== null);\n\n    onUpdateShapes(cloneDeep(newShapes));\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  /// 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  /// end of handling Image section\n\n  render() {\n    const {\n      classes,\n      imageUrl,\n      dimensions: { height, width },\n      hotspotColor,\n      outlineColor,\n      shapes,\n      strokeWidth,\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      <div className={classes.base}>\n        {imageUrl && (\n          <div className={classes.imageContainer}>\n            <img\n              className={classes.image}\n              onLoad={this.handleOnImageLoad}\n              ref={(ref) => {\n                this.image = ref;\n              }}\n              src={imageUrl}\n              {...(height && width ? { style: { height, width } } : {})}\n            />\n            <div\n              ref={(ref) => {\n                this.resize = ref;\n              }}\n              className={classes.resize}\n            />\n          </div>\n        )}\n\n        <Stage\n          className={classes.stage}\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 ? { points: shape.points, addPolygonPoint: (e) => this.addPolygonPoint(e) } : {})}\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  hotspotColor={hotspotColor}\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        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\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  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n});\n\nDrawable.propTypes = {\n  classes: PropTypes.object.isRequired,\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  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 withStyles(styles)(Drawable);\n"],"file":"hotspot-drawable.js"}
+{"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","shapeType","onUpdateShapes","shapes","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","width","canvasHeight","height","newShapes","map","shape","newX","x","newY","y","group","radius","points","xValues","point","yValues","minX","Math","min","minY","maxX","max","maxY","deltaX","deltaY","filter","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","newHeight","parseFloat","newWidth","aspectWidth","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","stateShapes","enableDrag","removeEventListener","undefined","onDeleteShape","temporaryPolygon","addPoint","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","hoverOutlineColor","selectedHotspotColor","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseOutOrLeave","i","Tag","SHAPE_GROUPS","RECTANGLES","Rectangle","CIRCLES","Circle","POLYGONS","Polygon","handleOnSetAsCorrect","handleOnDragEnd","deleteShape","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","oneOf","string","handleFinishDrawing","bool","array","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { withStyles } from '@material-ui/core/styles/index';\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';\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  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  /// 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      classes,\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      <div className={classes.base}>\n        {imageUrl && (\n          <div className={classes.imageContainer}>\n            <img\n              className={classes.image}\n              onLoad={this.handleOnImageLoad}\n              ref={(ref) => {\n                this.image = ref;\n              }}\n              src={imageUrl}\n              {...(height && width ? { style: { height, width } } : {})}\n            />\n            <div\n              ref={(ref) => {\n                this.resize = ref;\n              }}\n              className={classes.resize}\n            />\n          </div>\n        )}\n\n        <Stage\n          className={classes.stage}\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        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\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  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n});\n\nDrawable.propTypes = {\n  classes: PropTypes.object.isRequired,\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 withStyles(styles)(Drawable);\n"],"file":"hotspot-drawable.js"}

package/configure/lib/hotspot-polygon.js

@@ -31,6 +31,8 @@ var _reactKonva = require("react-konva");
 
 var _index = require("@material-ui/core/styles/index");
 
+var _ReactKonvaCore = require("react-konva/lib/ReactKonvaCore");
+
 var _DeleteWidget = _interopRequireDefault(require("./DeleteWidget"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -213,6 +215,29 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
   }
 
   (0, _createClass2["default"])(PolComponent, [{
+    key: "getBoundingBox",
+    value: // serialize(points) {
+    //   return points.reduce((acc, point) => [...acc, point.x, point.y], []);
+    // }
+    function getBoundingBox(points) {
+      var xValues = points.map(function (point) {
+        return point.x;
+      });
+      var yValues = points.map(function (point) {
+        return point.y;
+      });
+      var minX = Math.min.apply(Math, (0, _toConsumableArray2["default"])(xValues));
+      var maxX = Math.max.apply(Math, (0, _toConsumableArray2["default"])(xValues));
+      var minY = Math.min.apply(Math, (0, _toConsumableArray2["default"])(yValues));
+      var maxY = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yValues));
+      return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+      };
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -223,6 +248,8 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
           id = _this$props4.id,
           hotspotColor = _this$props4.hotspotColor,
           outlineColor = _this$props4.outlineColor,
+          selectedHotspotColor = _this$props4.selectedHotspotColor,
+          hoverOutlineColor = _this$props4.hoverOutlineColor,
           _this$props4$strokeWi = _this$props4.strokeWidth,
           strokeWidth = _this$props4$strokeWi === void 0 ? 5 : _this$props4$strokeWi;
       var _this$state = this.state,
@@ -231,17 +258,28 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
           y = _this$state.y,
           hovered = _this$state.hovered;
       var showPoints = hovered || id === 'newPolygon';
+      var hoverColor = hoverOutlineColor || HOVERED_COLOR;
       var calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;
-      var calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';
+      var calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : ''; // const calculatedStroke = correct ? outlineColor : hovered ? hoverColor : '';
+
+      var boundingBox = this.getBoundingBox(points);
       return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
         classes: classes.group,
         onMouseLeave: this.handleMouseLeave,
         onMouseEnter: this.handleMouseEnter
-      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
+      }, hoverOutlineColor && hovered && /*#__PURE__*/_react["default"].createElement(_ReactKonvaCore.Rect, {
+        x: boundingBox.x,
+        y: boundingBox.y,
+        width: boundingBox.width,
+        height: boundingBox.height,
+        stroke: hoverOutlineColor,
+        strokeWidth: 2,
+        listening: false
+      }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
         classes: classes.base,
         points: this.serialize(points),
         closed: true,
-        fill: hotspotColor,
+        fill: correct ? selectedHotspotColor : hotspotColor,
         onClick: this.handleClick,
         onTap: this.handleClick,
         draggable: true,
@@ -338,6 +376,8 @@ PolComponent.propTypes = {
   imageHeight: _propTypes["default"].number,
   imageWidth: _propTypes["default"].number,
   hotspotColor: _propTypes["default"].string.isRequired,
+  selectedHotspotColor: _propTypes["default"].string,
+  hoverOutlineColor: _propTypes["default"].string,
   onClick: _propTypes["default"].func.isRequired,
   addPolygonPoint: _propTypes["default"].func.isRequired,
   onDeleteShape: _propTypes["default"].func.isRequired,