@pie-element/hotspot 11.1.2-next.5 → 11.1.3

package/configure/lib/hotspot-drawable.js

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

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

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