@pie-element/hotspot 6.6.3-next.1 → 6.6.3-next.5

package/configure/lib/hotspot-circle.js

@@ -115,6 +115,12 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
       var onDeleteShape = _this.props.onDeleteShape;
       onDeleteShape(id);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTransform", function () {
+      var node = _this.shapeRef.current;
+      var avgScale = (node.scaleX() + node.scaleY()) / 2;
+      node.scaleX(avgScale);
+      node.scaleY(avgScale);
+    });
     _this.state = {
       hovered: false,
       isDragging: false
@@ -179,6 +185,7 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
         ref: this.trRef,
         rotateEnabled: false,
         keepRatio: true,
+        onTransform: this.onTransform,
         enabledAnchors: ['middle-left', 'middle-right', 'top-center', 'bottom-center'],
         boundBoxFunc: function boundBoxFunc(oldBox, newBox) {
           // Constraint to prevent resizing too small
@@ -186,6 +193,14 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
             return oldBox;
           }
 
+          var oldCenterX = oldBox.x + oldBox.width / 2;
+          var oldCenterY = oldBox.y + oldBox.height / 2;
+          var newCenterX = newBox.x + newBox.width / 2;
+          var newCenterY = newBox.y + newBox.height / 2;
+          var offsetX = oldCenterX - newCenterX;
+          var offsetY = oldCenterY - newCenterY;
+          newBox.x += offsetX;
+          newBox.y += offsetY;
           return newBox;
         }
       }));

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","state","React","createRef","classes","correct","hotspotColor","outlineColor","strokeWidth","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","onResizeEnd","handleDelete","oldBox","newBox","width","height","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  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            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              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","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"}

package/configure/lib/hotspot-drawable.js

@@ -309,6 +309,14 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
         stateShapes: false
       });
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "deleteShape", function (id) {
+      _this.setState({
+        isDrawing: false,
+        isDrawingShapeId: undefined
+      });
+
+      _this.props.onDeleteShape(id);
+    });
     _this.state = {
       isDrawing: false,
       stateShapes: false,
@@ -336,8 +344,6 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
         });
 
         _this2.props.onUpdateShapes(newShapes);
-
-        _this2.props.handleFinishDrawing();
       }),
           shapes = _PolygonShape$addPoin.shapes;
 
@@ -449,7 +455,7 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
             return _this3.handleOnSetAsCorrect(shape);
           },
           onDragEnd: _this3.handleOnDragEnd,
-          onDeleteShape: onDeleteShape,
+          onDeleteShape: _this3.deleteShape,
           outlineColor: outlineColor,
           width: shape.width,
           x: shape.x,

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","RectangleShape","create","CircleShape","state","isDrawingShapeId","addPolygonPoint","isDrawing","PolygonShape","console","error","setState","finalizeCreation","handleMouseMove","handleOnMouseUp","id","updatedProps","newShapes","map","shape","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","newHeight","parseFloat","height","newWidth","width","aspectWidth","dimensions","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","stateShapes","enableDrag","removeEventListener","temporaryPolygon","addPoint","undefined","handleFinishDrawing","x","y","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","onDeleteShape","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseOutOrLeave","i","Tag","group","Rectangle","Circle","Polygon","radius","handleOnSetAsCorrect","handleOnDragEnd","points","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","oneOf","string","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 { updateImageDimensions, getUpdatedShapes } from './utils';\nimport RectangleShape from './shapes/rectagle';\nimport CircleShape from './shapes/circle';\nimport PolygonShape from './shapes/polygon';\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    switch (shapeType) {\n      case 'rectangle':\n        newState = RectangleShape.create(shapes, e);\n        break;\n      case 'circle':\n        newState = CircleShape.create(shapes, e);\n        break;\n      case '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        console.error(`Unsupported shape type: ${shapeType}`);\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      this.props.handleFinishDrawing();\n    });\n\n    return shapes;\n  }\n\n  handleOnMouseUp = () => {\n    const { shapeType, onUpdateShapes } = this.props;\n    let newState;\n\n    if (shapeType === 'polygon') {\n      return;\n    }\n\n    switch (shapeType) {\n      case 'rectangle':\n        newState = RectangleShape.finalizeCreation(this.state, this.props);\n        break;\n      case 'circle':\n        newState = CircleShape.finalizeCreation(this.state, this.props);\n        break;\n      default:\n        console.error(`Unsupported shape type: ${shapeType}`);\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, shapes } = this.props;\n    let newState;\n\n    if (this.state.isDrawing) {\n      switch (shapeType) {\n        case 'rectangle':\n          newState = RectangleShape.handleMouseMove(this.state, e);\n          break;\n        case 'circle':\n          newState = CircleShape.handleMouseMove(this.state, e);\n          break;\n        case 'polygon':\n          newState = PolygonShape.handleMouseMove(this.state, e);\n          break;\n        default:\n          console.error(`Unsupported shape type: ${shapeType}`);\n          return;\n      }\n\n      this.setState(newState);\n      onUpdateShapes(newState.shapes);\n    }\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 } = this.props;\n    const newShapes = shapes.map((shape) => {\n      if (shape.id === id) {\n        return { ...shape, ...updatedProps };\n      }\n      return shape;\n    });\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    // todo previously we had state.dimensions, is it needed?\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  /// 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      onDeleteShape,\n    } = this.props;\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 'rectangles':\n                  Tag = Rectangle;\n                  break;\n                case 'circles':\n                  Tag = Circle;\n                  break;\n                case 'polygons':\n                  Tag = Polygon;\n                  break;\n                default:\n                  return null;\n              }\n\n              return (\n                <Tag\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  {...(shape.group === 'circles'\n                    ? { radius: shape.radius }\n                    : { height: shape.height, width: shape.width })}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={i}\n                  onClick={() => this.handleOnSetAsCorrect(shape)}\n                  onDragEnd={this.handleOnDragEnd}\n                  onDeleteShape={onDeleteShape}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  {...(shape.group === 'polygons' ? { points: shape.points } : {})}\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(['rectangle', 'circle', 'polygon']),\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","RectangleShape","create","CircleShape","state","isDrawingShapeId","addPolygonPoint","isDrawing","PolygonShape","console","error","setState","finalizeCreation","handleMouseMove","handleOnMouseUp","id","updatedProps","newShapes","map","shape","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","newHeight","parseFloat","height","newWidth","width","aspectWidth","dimensions","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","x","y","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseOutOrLeave","i","Tag","group","Rectangle","Circle","Polygon","radius","handleOnSetAsCorrect","handleOnDragEnd","deleteShape","points","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 { updateImageDimensions, getUpdatedShapes } from './utils';\nimport RectangleShape from './shapes/rectagle';\nimport CircleShape from './shapes/circle';\nimport PolygonShape from './shapes/polygon';\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    switch (shapeType) {\n      case 'rectangle':\n        newState = RectangleShape.create(shapes, e);\n        break;\n      case 'circle':\n        newState = CircleShape.create(shapes, e);\n        break;\n      case '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        console.error(`Unsupported shape type: ${shapeType}`);\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 === 'polygon') {\n      return;\n    }\n\n    switch (shapeType) {\n      case 'rectangle':\n        newState = RectangleShape.finalizeCreation(this.state, this.props);\n        break;\n      case 'circle':\n        newState = CircleShape.finalizeCreation(this.state, this.props);\n        break;\n      default:\n        console.error(`Unsupported shape type: ${shapeType}`);\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, shapes } = this.props;\n    let newState;\n\n    if (this.state.isDrawing) {\n      switch (shapeType) {\n        case 'rectangle':\n          newState = RectangleShape.handleMouseMove(this.state, e);\n          break;\n        case 'circle':\n          newState = CircleShape.handleMouseMove(this.state, e);\n          break;\n        case 'polygon':\n          newState = PolygonShape.handleMouseMove(this.state, e);\n          break;\n        default:\n          console.error(`Unsupported shape type: ${shapeType}`);\n          return;\n      }\n\n      this.setState(newState);\n      onUpdateShapes(newState.shapes);\n    }\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 } = this.props;\n    const newShapes = shapes.map((shape) => {\n      if (shape.id === id) {\n        return { ...shape, ...updatedProps };\n      }\n      return shape;\n    });\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    // todo previously we had state.dimensions, is it needed?\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      onDeleteShape,\n    } = this.props;\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 'rectangles':\n                  Tag = Rectangle;\n                  break;\n                case 'circles':\n                  Tag = Circle;\n                  break;\n                case 'polygons':\n                  Tag = Polygon;\n                  break;\n                default:\n                  return null;\n              }\n\n              return (\n                <Tag\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  {...(shape.group === 'circles'\n                    ? { radius: shape.radius }\n                    : { height: shape.height, width: shape.width })}\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                  {...(shape.group === 'polygons' ? { points: shape.points } : {})}\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(['rectangle', 'circle', 'polygon']),\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"}

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

@@ -35,7 +35,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="0"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -52,7 +52,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="1"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -69,7 +69,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="2"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -87,7 +87,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="3"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -122,7 +122,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="4"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -157,7 +157,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="5"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -222,7 +222,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="0"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -239,7 +239,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="1"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -256,7 +256,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="2"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -274,7 +274,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="3"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -309,7 +309,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="4"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -344,7 +344,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="5"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -409,7 +409,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="0"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={10}
@@ -426,7 +426,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="1"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={10}
@@ -443,7 +443,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="2"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={10}
@@ -461,7 +461,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="3"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -496,7 +496,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="4"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -531,7 +531,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="5"
         onClick={[Function]}
-        onDeleteShape={[MockFunction]}
+        onDeleteShape={[Function]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={

package/configure/src/hotspot-circle.jsx

@@ -68,6 +68,13 @@ class CircleComponent extends React.Component {
     onDeleteShape(id);
   };
 
+  onTransform = () => {
+    const node = this.shapeRef.current;
+    const avgScale = (node.scaleX() + node.scaleY()) / 2;
+    node.scaleX(avgScale);
+    node.scaleY(avgScale);
+  };
+
   render() {
     const { classes, correct, radius, hotspotColor, id, outlineColor, x, y, strokeWidth = 5 } = this.props;
 
@@ -98,12 +105,25 @@ class CircleComponent extends React.Component {
             ref={this.trRef}
             rotateEnabled={false}
             keepRatio={true}
+            onTransform={this.onTransform}
             enabledAnchors={['middle-left', 'middle-right', 'top-center', 'bottom-center']}
             boundBoxFunc={(oldBox, newBox) => {
               // Constraint to prevent resizing too small
               if (newBox.width < 10 || newBox.height < 10) {
                 return oldBox;
               }
+
+              const oldCenterX = oldBox.x + oldBox.width / 2;
+              const oldCenterY = oldBox.y + oldBox.height / 2;
+              const newCenterX = newBox.x + newBox.width / 2;
+              const newCenterY = newBox.y + newBox.height / 2;
+
+              const offsetX = oldCenterX - newCenterX;
+              const offsetY = oldCenterY - newCenterY;
+
+              newBox.x += offsetX;
+              newBox.y += offsetY;
+
               return newBox;
             }}
           />

package/configure/src/hotspot-drawable.jsx

@@ -93,7 +93,6 @@ export class Drawable extends React.Component {
       });
 
       this.props.onUpdateShapes(newShapes);
-      this.props.handleFinishDrawing();
     });
 
     return shapes;
@@ -289,6 +288,14 @@ export class Drawable extends React.Component {
 
     this.setState({ resizing: false, stateShapes: false });
   };
+
+  deleteShape = (id) => {
+    this.setState({
+      isDrawing: false,
+      isDrawingShapeId: undefined,
+    });
+    this.props.onDeleteShape(id);
+  }
   /// end of handling Image section
 
   render() {
@@ -370,7 +377,7 @@ export class Drawable extends React.Component {
                   key={i}
                   onClick={() => this.handleOnSetAsCorrect(shape)}
                   onDragEnd={this.handleOnDragEnd}
-                  onDeleteShape={onDeleteShape}
+                  onDeleteShape={this.deleteShape}
                   outlineColor={outlineColor}
                   width={shape.width}
                   x={shape.x}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "6.6.3-next.1+4ff9971e6",
+  "version": "6.6.3-next.5+da102cc68",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "4ff9971e65b680aea180c94f9e85cab7249af2fb",
+  "gitHead": "da102cc68a838a61afc02e4f5db93df4a1897e5b",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },