@pie-element/hotspot 6.23.3-next.4 → 6.23.3

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.23.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@6.23.2...@pie-element/hotspot@6.23.3) (2024-07-10)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-3799, PD-3924, PD-3878 ([2f276fb](https://github.com/pie-framework/pie-elements/commit/2f276fb29f121005cecd81459469ff9f5a06740d))
+* **hostspot:** refactor supported shapes and groups PD-3628 ([e50f19f](https://github.com/pie-framework/pie-elements/commit/e50f19fe8a6868d8c8899b3b7dde557db73638bd))
+* **hostspot:** refactor supported shapes and groups PD-3628 ([26ecc0b](https://github.com/pie-framework/pie-elements/commit/26ecc0bab42b25561812fb0a4e6325efc323f82f))
+* **hostspot:** refactor supported shapes and groups PD-3628 ([b4f3d29](https://github.com/pie-framework/pie-elements/commit/b4f3d296a047ff3e4efc8cf1faa5ff8893b9fb2f))
+* **hostspot:** remove shapes outside of canvas fix/PD-3892 ([0cf1c75](https://github.com/pie-framework/pie-elements/commit/0cf1c75eb5b158a3425718d15cad5c7e04c2f97d))
+* **hostspot:** update canvas resize and polygon move PD-3628 ([03d6069](https://github.com/pie-framework/pie-elements/commit/03d6069b712a083dfdb3217f87d51f3ec4fb3a28))
+* **hotspot:** remove shapes moved outside the canvas PD-3892 ([0aa05d6](https://github.com/pie-framework/pie-elements/commit/0aa05d657714ae7bbd0758497656fd20c62073bf))
+
+
+
+
+
 ## [6.23.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@6.23.1...@pie-element/hotspot@6.23.2) (2024-07-04)
 
 **Note:** Version bump only for package @pie-element/hotspot

package/configure/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.22.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@6.22.2...@pie-element/hotspot-configure@6.22.3) (2024-07-10)
+
+
+### Bug Fixes
+
+* update pie-lib/pie-toolbox PD-3799, PD-3924, PD-3878 ([2f276fb](https://github.com/pie-framework/pie-elements/commit/2f276fb29f121005cecd81459469ff9f5a06740d))
+* **hostspot:** refactor supported shapes and groups PD-3628 ([e50f19f](https://github.com/pie-framework/pie-elements/commit/e50f19fe8a6868d8c8899b3b7dde557db73638bd))
+* **hostspot:** refactor supported shapes and groups PD-3628 ([26ecc0b](https://github.com/pie-framework/pie-elements/commit/26ecc0bab42b25561812fb0a4e6325efc323f82f))
+* **hostspot:** refactor supported shapes and groups PD-3628 ([b4f3d29](https://github.com/pie-framework/pie-elements/commit/b4f3d296a047ff3e4efc8cf1faa5ff8893b9fb2f))
+* **hostspot:** remove shapes outside of canvas fix/PD-3892 ([0cf1c75](https://github.com/pie-framework/pie-elements/commit/0cf1c75eb5b158a3425718d15cad5c7e04c2f97d))
+* **hostspot:** update canvas resize and polygon move PD-3628 ([03d6069](https://github.com/pie-framework/pie-elements/commit/03d6069b712a083dfdb3217f87d51f3ec4fb3a28))
+* **hotspot:** remove shapes moved outside the canvas PD-3892 ([0aa05d6](https://github.com/pie-framework/pie-elements/commit/0aa05d657714ae7bbd0758497656fd20c62073bf))
+
+
+
+
+
 ## [6.22.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@6.22.1...@pie-element/hotspot-configure@6.22.2) (2024-07-04)
 
 **Note:** Version bump only for package @pie-element/hotspot-configure

package/configure/lib/hotspot-circle.js

@@ -145,7 +145,9 @@ 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;
+          strokeWidth = _this$props4$strokeWi === void 0 ? 5 : _this$props4$strokeWi; // Ensure radius is valid
+
+      var validRadius = isNaN(radius) || radius <= 0 ? 5 : radius;
       return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
         classes: classes.group,
         onMouseLeave: this.handleMouseLeave,
@@ -153,7 +155,7 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
         classes: classes.base,
         ref: this.shapeRef,
-        radius: radius,
+        radius: validRadius,
         fill: hotspotColor,
         onClick: this.handleClick,
         onTap: this.handleClick,
@@ -176,7 +178,7 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
         y: y
       }), !this.state.isDragging && this.state.hovered && /*#__PURE__*/_react["default"].createElement(_DeleteWidget["default"], {
         id: id,
-        radius: radius,
+        radius: validRadius,
         x: x,
         y: y,
         handleWidgetClick: this.handleDelete,

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","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    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Circle\n          classes={classes.base}\n          ref={this.shapeRef}\n          radius={radius}\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={radius} 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","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"}

package/configure/lib/hotspot-container.js

@@ -29,6 +29,8 @@ var _index = require("@material-ui/core/styles/index");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _shapes = require("./shapes");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -191,14 +193,14 @@ var Container = /*#__PURE__*/function (_Component) {
       // Explicitly end the current shape drawing session
       // This would cause the finalizeCreation method to be called in the HotspotDrawable component
       _this.setState({
-        selectedShape: 'none'
+        selectedShape: _shapes.SUPPORTED_SHAPES.NONE
       });
     });
     _this.state = {
       dragEnabled: true,
       // always transform shapes map into shapes array at this level
       shapes: (0, _utils.getAllShapes)(props.shapes),
-      selectedShape: 'none'
+      selectedShape: _shapes.SUPPORTED_SHAPES.NONE
     };
     _this.fakeImageHandler = {
       cancel: function cancel() {},
@@ -249,30 +251,30 @@ var Container = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick() {
           return _this2.setState({
-            selectedShape: selectedShape === 'rectangle' ? 'none' : 'rectangle'
+            selectedShape: selectedShape === _shapes.SUPPORTED_SHAPES.RECTANGLE ? _shapes.SUPPORTED_SHAPES.NONE : _shapes.SUPPORTED_SHAPES.RECTANGLE
           });
         },
         className: classes.buttonShape
       }, /*#__PURE__*/_react["default"].createElement(_rectangle.RectangleButton, {
-        isActive: selectedShape === 'rectangle'
+        isActive: selectedShape === _shapes.SUPPORTED_SHAPES.RECTANGLE
       })), /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick() {
           return _this2.setState({
-            selectedShape: selectedShape === 'polygon' ? 'none' : 'polygon'
+            selectedShape: selectedShape === _shapes.SUPPORTED_SHAPES.POLYGON ? _shapes.SUPPORTED_SHAPES.NONE : _shapes.SUPPORTED_SHAPES.POLYGON
           });
         },
         className: classes.buttonShape
       }, /*#__PURE__*/_react["default"].createElement(_polygon.PolygonButton, {
-        isActive: selectedShape === 'polygon'
+        isActive: selectedShape === _shapes.SUPPORTED_SHAPES.POLYGON
       })), /*#__PURE__*/_react["default"].createElement("div", {
         onClick: function onClick() {
           return _this2.setState({
-            selectedShape: selectedShape === 'circle' ? 'none' : 'circle'
+            selectedShape: selectedShape === _shapes.SUPPORTED_SHAPES.CIRCLE ? _shapes.SUPPORTED_SHAPES.NONE : _shapes.SUPPORTED_SHAPES.CIRCLE
           });
         },
         className: classes.buttonShape
       }, /*#__PURE__*/_react["default"].createElement(_circle.CircleButton, {
-        isActive: selectedShape === 'circle'
+        isActive: selectedShape === _shapes.SUPPORTED_SHAPES.CIRCLE
       })), imageUrl && /*#__PURE__*/_react["default"].createElement(_uploadControl["default"], {
         classNameButton: classes.replaceButton,
         classNameSection: classes.replaceSection,

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","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","buttonShape","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 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: '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: '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 === 'rectangle' ? 'none' : 'rectangle' })}\n              className={classes.buttonShape}\n            >\n              <RectangleButton isActive={selectedShape === 'rectangle'} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'polygon' ? 'none' : 'polygon' })}\n              className={classes.buttonShape}\n            >\n              <PolygonButton isActive={selectedShape === 'polygon'} />\n            </div>\n            <div\n              onClick={() => this.setState({ selectedShape: selectedShape === 'circle' ? 'none' : 'circle' })}\n              className={classes.buttonShape}\n            >\n              <CircleButton isActive={selectedShape === '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","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"}

package/configure/lib/hotspot-drawable.js

@@ -9,6 +9,8 @@ exports["default"] = exports.Drawable = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -41,11 +43,7 @@ var _hotspotCircle = _interopRequireDefault(require("./hotspot-circle"));
 
 var _utils = require("./utils");
 
-var _rectagle = _interopRequireDefault(require("./shapes/rectagle"));
-
-var _circle = _interopRequireDefault(require("./shapes/circle"));
-
-var _polygon = _interopRequireDefault(require("./shapes/polygon"));
+var _shapes2 = require("./shapes");
 
 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; }
 
@@ -78,16 +76,20 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
+      if (!Object.values(_shapes2.SUPPORTED_SHAPES).includes(shapeType)) {
+        return;
+      }
+
       switch (shapeType) {
-        case 'rectangle':
-          newState = _rectagle["default"].create(shapes, e);
+        case _shapes2.SUPPORTED_SHAPES.RECTANGLE:
+          newState = _shapes2.RectangleShape.create(shapes, e);
           break;
 
-        case 'circle':
-          newState = _circle["default"].create(shapes, e);
+        case _shapes2.SUPPORTED_SHAPES.CIRCLE:
+          newState = _shapes2.CircleShape.create(shapes, e);
           break;
 
-        case 'polygon':
+        case _shapes2.SUPPORTED_SHAPES.POLYGON:
           newShapeId = _this.state.isDrawingShapeId;
 
           if (newShapeId) {
@@ -101,13 +103,12 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
             };
           } else {
             // Else start a new one
-            newState = _polygon["default"].create(shapes, e);
+            newState = _shapes2.PolygonShape.create(shapes, e);
           }
 
           break;
 
         default:
-          console.error("Unsupported shape type: ".concat(shapeType));
           return;
       }
 
@@ -121,21 +122,20 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           onUpdateShapes = _this$props2.onUpdateShapes;
       var newState;
 
-      if (shapeType === 'polygon') {
+      if (shapeType === _shapes2.SUPPORTED_SHAPES.POLYGON) {
         return;
       }
 
       switch (shapeType) {
-        case 'rectangle':
-          newState = _rectagle["default"].finalizeCreation(_this.state, _this.props);
+        case _shapes2.SUPPORTED_SHAPES.RECTANGLE:
+          newState = _shapes2.RectangleShape.finalizeCreation(_this.state, _this.props);
           break;
 
-        case 'circle':
-          newState = _circle["default"].finalizeCreation(_this.state, _this.props);
+        case _shapes2.SUPPORTED_SHAPES.CIRCLE:
+          newState = _shapes2.CircleShape.finalizeCreation(_this.state, _this.props);
           break;
 
         default:
-          console.error("Unsupported shape type: ".concat(shapeType));
           return;
       }
 
@@ -148,33 +148,33 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseMove", function (e) {
       var _this$props3 = _this.props,
           shapeType = _this$props3.shapeType,
-          onUpdateShapes = _this$props3.onUpdateShapes,
-          shapes = _this$props3.shapes;
+          onUpdateShapes = _this$props3.onUpdateShapes;
       var newState;
 
-      if (_this.state.isDrawing) {
-        switch (shapeType) {
-          case 'rectangle':
-            newState = _rectagle["default"].handleMouseMove(_this.state, e);
-            break;
-
-          case 'circle':
-            newState = _circle["default"].handleMouseMove(_this.state, e);
-            break;
+      if (!_this.state.isDrawing || !Object.values(_shapes2.SUPPORTED_SHAPES).includes(shapeType)) {
+        return;
+      }
 
-          case 'polygon':
-            newState = _polygon["default"].handleMouseMove(_this.state, e);
-            break;
+      switch (shapeType) {
+        case _shapes2.SUPPORTED_SHAPES.RECTANGLE:
+          newState = _shapes2.RectangleShape.handleMouseMove(_this.state, e);
+          break;
 
-          default:
-            console.error("Unsupported shape type: ".concat(shapeType));
-            return;
-        }
+        case _shapes2.SUPPORTED_SHAPES.CIRCLE:
+          newState = _shapes2.CircleShape.handleMouseMove(_this.state, e);
+          break;
 
-        _this.setState(newState);
+        case _shapes2.SUPPORTED_SHAPES.POLYGON:
+          newState = _shapes2.PolygonShape.handleMouseMove(_this.state, e);
+          break;
 
-        onUpdateShapes(newState.shapes);
+        default:
+          return;
       }
+
+      _this.setState(newState);
+
+      onUpdateShapes(newState.shapes);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnMouseOutOrLeave", function (e) {
       if (_this.state.isDrawing) {
@@ -184,13 +184,68 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragEnd", function (id, updatedProps) {
       var _this$props4 = _this.props,
           shapes = _this$props4.shapes,
-          onUpdateShapes = _this$props4.onUpdateShapes;
+          onUpdateShapes = _this$props4.onUpdateShapes,
+          dimensions = _this$props4.dimensions;
+      var canvasWidth = dimensions.width,
+          canvasHeight = dimensions.height; // when a shape is moved completely outside the canvas
+      // remove that shape
+
       var newShapes = shapes.map(function (shape) {
-        if (shape.id === id) {
+        if (shape.id !== id) {
+          return shape;
+        }
+
+        var newX = updatedProps.x;
+        var newY = updatedProps.y;
+
+        if (shape.group === 'rectangles') {
+          if (newX + shape.width < 0 || newX > canvasWidth || newY + shape.height < 0 || newY > canvasHeight) {
+            return null;
+          }
+
+          return _objectSpread(_objectSpread({}, shape), updatedProps);
+        }
+
+        if (shape.group === 'circles') {
+          var radius = shape.radius;
+
+          if (newX + radius < 0 || newX - radius > canvasWidth || newY + radius < 0 || newY - radius > canvasHeight) {
+            return null;
+          }
+
+          return _objectSpread(_objectSpread({}, shape), updatedProps);
+        }
+
+        if (shape.group === 'polygons') {
+          var points = shape.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 minY = Math.min.apply(Math, (0, _toConsumableArray2["default"])(yValues));
+          var maxX = Math.max.apply(Math, (0, _toConsumableArray2["default"])(xValues));
+          var maxY = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yValues)); // Calculate deltas based on the first point as a reference
+
+          var deltaX = updatedProps['points'][0].x - points[0].x;
+          var deltaY = updatedProps['points'][0].y - points[0].y;
+          minX = minX + deltaX;
+          maxX = maxX + deltaX;
+          minY = minY + deltaY;
+          maxY = maxY + deltaY;
+
+          if (maxX < 0 || minX > canvasWidth || maxY < 0 || minY > canvasHeight) {
+            return null;
+          }
+
           return _objectSpread(_objectSpread({}, shape), updatedProps);
         }
 
         return shape;
+      }).filter(function (shape) {
+        return shape !== null;
       });
       onUpdateShapes((0, _cloneDeep["default"])(newShapes));
     });
@@ -200,7 +255,7 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           multipleCorrect = _this$props5.multipleCorrect,
           shapes = _this$props5.shapes,
           onUpdateShapes = _this$props5.onUpdateShapes;
-      var newShapes = [];
+      var newShapes;
 
       if (multipleCorrect) {
         newShapes = shapes.map(function (shape) {
@@ -254,7 +309,7 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           disableDrag = _this$props6.disableDrag,
           preserveAspectRatioEnabled = _this$props6.preserveAspectRatioEnabled,
           dimensions = _this$props6.dimensions,
-          shapes = _this$props6.shapes; // todo previously we had state.dimensions, is it needed?
+          shapes = _this$props6.shapes;
 
       var _updateImageDimension = (0, _utils.updateImageDimensions)(dimensions, {
         width: e.clientX - bounds.left,
@@ -336,7 +391,7 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
     value: function addPolygonPoint(e) {
       var _this2 = this;
 
-      var _PolygonShape$addPoin = _polygon["default"].addPoint(this.state, e, function (newShapes) {
+      var _PolygonShape$addPoin = _shapes2.PolygonShape.addPoint(this.state, e, function (newShapes) {
         _this2.setState({
           isDrawing: false,
           shapes: newShapes,
@@ -380,8 +435,7 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           hotspotColor = _this$props8.hotspotColor,
           outlineColor = _this$props8.outlineColor,
           shapes = _this$props8.shapes,
-          strokeWidth = _this$props8.strokeWidth,
-          onDeleteShape = _this$props8.onDeleteShape;
+          strokeWidth = _this$props8.strokeWidth;
       var _this$state2 = this.state,
           stateShapes = _this$state2.stateShapes,
           isDrawing = _this$state2.isDrawing,
@@ -423,15 +477,15 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
         var Tag;
 
         switch (shape.group) {
-          case 'rectangles':
+          case _shapes2.SHAPE_GROUPS.RECTANGLES:
             Tag = _hotspotRectangle["default"];
             break;
 
-          case 'circles':
+          case _shapes2.SHAPE_GROUPS.CIRCLES:
             Tag = _hotspotCircle["default"];
             break;
 
-          case 'polygons':
+          case _shapes2.SHAPE_GROUPS.POLYGONS:
             Tag = _hotspotPolygon["default"];
             break;
 
@@ -439,15 +493,19 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
             return null;
         }
 
-        return /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({
-          correct: shape.correct,
-          isDrawing: isDrawing
-        }, shape.group === 'circles' ? {
+        return /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({}, shape.group === _shapes2.SHAPE_GROUPS.CIRCLES ? {
           radius: shape.radius
-        } : {
+        } : {}, shape.group === _shapes2.SHAPE_GROUPS.RECTANGLES ? {
           height: shape.height,
           width: shape.width
-        }, {
+        } : {}, shape.group === _shapes2.SHAPE_GROUPS.POLYGONS ? {
+          points: shape.points,
+          addPolygonPoint: function addPolygonPoint(e) {
+            return _this3.addPolygonPoint(e);
+          }
+        } : {}, {
+          correct: shape.correct,
+          isDrawing: isDrawing,
           hotspotColor: hotspotColor,
           id: shape.id,
           key: i,
@@ -459,10 +517,7 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           outlineColor: outlineColor,
           width: shape.width,
           x: shape.x,
-          y: shape.y
-        }, shape.group === 'polygons' ? {
-          points: shape.points
-        } : {}, {
+          y: shape.y,
           strokeWidth: strokeWidth,
           imageHeight: heightFromState || height,
           imageWidth: widthFromState || width
@@ -528,7 +583,7 @@ Drawable.propTypes = {
   disableDrag: _propTypes["default"].func.isRequired,
   dimensions: _propTypes["default"].object.isRequired,
   enableDrag: _propTypes["default"].func.isRequired,
-  shapeType: _propTypes["default"].oneOf(['rectangle', 'circle', 'polygon']),
+  shapeType: _propTypes["default"].oneOf(Object.values(_shapes2.SUPPORTED_SHAPES)),
   imageUrl: _propTypes["default"].string.isRequired,
   handleFinishDrawing: _propTypes["default"].func.isRequired,
   hotspotColor: _propTypes["default"].string.isRequired,