@pie-element/hotspot 6.3.2-next.8 → 6.4.0

package/configure/lib/hotspot-drawable.js

@@ -37,6 +37,8 @@ var _hotspotRectangle = _interopRequireDefault(require("./hotspot-rectangle"));
 
 var _hotspotPolygon = _interopRequireDefault(require("./hotspot-polygon"));
 
+var _hotspotCircle = _interopRequireDefault(require("./hotspot-circle"));
+
 var _utils = require("./utils");
 
 var _rectagle = _interopRequireDefault(require("./shapes/rectagle"));
@@ -412,11 +414,34 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
         onContentMouseOut: this.handleOnMouseOutOrLeave,
         onContentMouseLeave: this.handleOnMouseOutOrLeave
       }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Layer, null, shapesToUse.map(function (shape, i) {
-        var Tag = shape.group === 'polygons' ? _hotspotPolygon["default"] : _hotspotRectangle["default"];
-        return /*#__PURE__*/_react["default"].createElement(Tag, {
+        var Tag;
+
+        switch (shape.group) {
+          case 'rectangles':
+            Tag = _hotspotRectangle["default"];
+            break;
+
+          case 'circles':
+            Tag = _hotspotCircle["default"];
+            break;
+
+          case 'polygons':
+            Tag = _hotspotPolygon["default"];
+            break;
+
+          default:
+            return null;
+        }
+
+        return /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({
           correct: shape.correct,
-          isDrawing: isDrawing,
+          isDrawing: isDrawing
+        }, shape.group === 'circles' ? {
+          radius: shape.radius
+        } : {
           height: shape.height,
+          width: shape.width
+        }, {
           hotspotColor: hotspotColor,
           id: shape.id,
           key: i,
@@ -428,29 +453,31 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
           outlineColor: outlineColor,
           width: shape.width,
           x: shape.x,
-          y: shape.y,
-          points: shape.points,
+          y: shape.y
+        }, shape.group === 'polygons' ? {
+          points: shape.points
+        } : {}, {
           strokeWidth: strokeWidth,
           imageHeight: heightFromState || height,
-          imageWidth: widthFromState || width,
+          imageWidth: widthFromState || width
+        }, shape.group === 'polygons' ? {
           addPolygonPoint: function addPolygonPoint(e) {
             return _this3.addPolygonPoint(e);
           }
-        });
+        } : {}));
       }))));
     }
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(nextProps, prevState) {
-      var dimensions = nextProps.dimensions;
-
-      if (prevState && prevState.resizing) {
-        dimensions = prevState.dimensions;
+      // Update the state only if the props have changed
+      if (nextProps.shapes !== prevState.shapes) {
+        return {
+          shapes: nextProps.shapes
+        };
       }
 
-      return _objectSpread(_objectSpread({}, prevState), {}, {
-        dimensions: dimensions
-      });
+      return null;
     }
   }]);
   return Drawable;

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","Polygon","Rectangle","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 { 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    let dimensions = nextProps.dimensions;\n\n    if (prevState && prevState.resizing) {\n      dimensions = prevState.dimensions;\n    }\n\n    return {\n      ...prevState,\n      dimensions: dimensions,\n    };\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 {\n          ...shape,\n          ...updatedProps,\n        };\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              const Tag = shape.group === 'polygons' ? Polygon : Rectangle;\n              return (\n                <Tag\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  height={shape.height}\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                  points={shape.points}\n                  strokeWidth={strokeWidth}\n                  imageHeight={heightFromState || height}\n                  imageWidth={widthFromState || width}\n                  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","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"}

package/configure/lib/hotspot-polygon.js

@@ -273,8 +273,7 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
         y: y,
         id: id,
         handleWidgetClick: this.handleDelete,
-        points: points,
-        outlineColor: outlineColor
+        points: points
       }));
     }
   }], [{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-polygon.jsx"],"names":["HOVERED_COLOR","PolComponent","points","xList","map","p","x","yList","y","Math","min","max","getOffset","xOffset","yOffset","reduce","acc","point","length","id","hovered","isDragging","getInitialState","props","e","width","height","isDrawing","onClick","addPolygonPoint","cancelBubble","setState","document","body","style","cursor","updateModel","onDragEnd","target","serialize","state","newPoints","currentPointCoordinate","index","changedIndex","onDeleteShape","classes","correct","hotspotColor","outlineColor","strokeWidth","showPoints","calculatedStrokeWidth","calculatedStroke","group","handleMouseLeave","handleMouseEnter","base","handleClick","onDragStart","handleOnDragEnd","circle","handleOnDragVertex","handleDelete","nextProps","prevState","imageHeight","imageWidth","React","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","arrayOf","shape","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Line, Circle } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DeleteWidget from './DeleteWidget';\n\nconst HOVERED_COLOR = '#00BFFF';\n\nclass PolComponent extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    const { id, points, imageHeight, imageWidth } = nextProps;\n    // we execute this code only if image dimensions changed or an hotspot was added/deleted\n    if (\n      prevState.imageHeight !== nextProps.imageHeight ||\n      prevState.imageWidth !== nextProps.imageWidth ||\n      prevState.id !== nextProps.id ||\n      prevState.points.length !== points.length\n    ) {\n      if (points.length) {\n        const xList = points.map((p) => p.x);\n        const yList = points.map((p) => p.y);\n\n        const x = Math.min(...xList);\n        const y = Math.max(...yList);\n\n        return {\n          id,\n          x,\n          y,\n          points,\n          imageHeight,\n          imageWidth,\n        };\n      }\n\n      return {\n        id: '',\n        x: 0,\n        y: 0,\n        points: [],\n        imageHeight,\n        imageWidth,\n      };\n    } else {\n      return null;\n    }\n  }\n\n  getOffset = (points) => {\n    const xList = points.map((p) => p.x);\n    const yList = points.map((p) => p.y);\n\n    return {\n      x: Math.min(...xList),\n      y: Math.max(...yList),\n    };\n  };\n\n  serialize = (points) => {\n    const { x: xOffset, y: yOffset } = this.getOffset(points);\n\n    return points.reduce((acc, point) => [...acc, point.x - xOffset, point.y - yOffset], []);\n  };\n\n  getInitialState = (points) => {\n    if (points.length) {\n      const { x, y } = this.getOffset(points);\n\n      return {\n        x,\n        y,\n        points,\n      };\n    }\n\n    return {\n      id: '',\n      x: 0,\n      y: 0,\n      points: [],\n    };\n  };\n\n  state = {\n    hovered: false,\n    isDragging: false,\n    ...this.getInitialState(this.props.points),\n  };\n\n  handleClick = (e) => {\n    const { points } = this.props;\n    const xList = points.map((p) => p.x);\n    const yList = points.map((p) => p.y);\n\n    const width = Math.max(...xList) - Math.min(...xList);\n    const height = Math.max(...yList) - Math.min(...yList);\n\n    const { isDrawing, onClick, id } = this.props;\n\n    if (width < 0 && height < 0 && isDrawing) {\n      return;\n    }\n\n    if (isDrawing && id === 'newPolygon') {\n      this.props.addPolygonPoint(e);\n      return;\n    }\n\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    this.setState({ hovered: true });\n    document.body.style.cursor = 'pointer';\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hovered: false });\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e, updateModel = false) => {\n    const { onDragEnd, id } = this.props;\n    const points = e.target.points() || this.serialize(this.state.points);\n\n    const newPoints = points.reduce((acc, currentPointCoordinate, index) => {\n      if (index % 2 === 0 && index + 1 < points.length) {\n        return [\n          ...acc,\n          {\n            x: currentPointCoordinate + e.target.x(),\n            y: points[index + 1] + e.target.y(),\n          },\n        ];\n      }\n\n      return acc;\n    }, []);\n\n    this.setState({\n      points: newPoints,\n      ...this.getOffset(newPoints),\n      isDragging: updateModel ? false : this.state.isDragging,\n    });\n  };\n\n  handleOnDragVertex = (e, changedIndex, updateModel) => {\n    const { onDragEnd, id } = this.props;\n    const { points } = this.state;\n\n    const newPoints = points.map((point, index) =>\n      index === changedIndex ? { x: e.target.x(), y: e.target.y() } : point,\n    );\n\n    this.setState({\n      points: newPoints,\n      ...this.getOffset(newPoints),\n      isDragging: updateModel ? false : this.state.isDragging,\n    });\n\n    if (updateModel) {\n      onDragEnd(id, { points: newPoints });\n    }\n  };\n\n  onDragStart = () => {\n    this.setState({ isDragging: true });\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const { classes, correct, id, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;\n    const { points, x, y, hovered } = this.state;\n    const showPoints = hovered || id === 'newPolygon';\n\n    const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n    const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Line\n          classes={classes.base}\n          points={this.serialize(points)}\n          closed={true}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={calculatedStroke}\n          strokeWidth={calculatedStrokeWidth}\n          onDragStart={this.onDragStart}\n          onDragMove={this.handleOnDragEnd}\n          onDragEnd={(e) => this.handleOnDragEnd(e, true)}\n          x={x}\n          y={y}\n        />\n\n        {showPoints &&\n          points.map((point, index) => (\n            <Circle\n              key={index}\n              className={classes.circle}\n              x={point.x}\n              y={point.y}\n              radius={5}\n              fill={'white'}\n              stroke={HOVERED_COLOR}\n              strokeWidth={1}\n              onClick={this.handleClick}\n              onDragStart={this.onDragStart}\n              onDragMove={(e) => {\n                this.handleOnDragVertex(e, index);\n              }}\n              onDragEnd={(e) => {\n                this.handleOnDragVertex(e, index, true);\n              }}\n              draggable\n            />\n          ))}\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget\n            x={x}\n            y={y}\n            id={id}\n            handleWidgetClick={this.handleDelete}\n            points={points}\n            outlineColor={outlineColor}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n  circle: {\n    opacity: 4,\n  },\n  group: {\n    padding: '12px',\n  },\n});\n\nPolComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  imageHeight: PropTypes.number,\n  imageWidth: PropTypes.number,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  addPolygonPoint: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.arrayOf(\n    PropTypes.shape({\n      x: PropTypes.number,\n      y: PropTypes.number,\n    }),\n  ).isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nPolComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(PolComponent);\n"],"file":"hotspot-polygon.js"}
+{"version":3,"sources":["../src/hotspot-polygon.jsx"],"names":["HOVERED_COLOR","PolComponent","points","xList","map","p","x","yList","y","Math","min","max","getOffset","xOffset","yOffset","reduce","acc","point","length","id","hovered","isDragging","getInitialState","props","e","width","height","isDrawing","onClick","addPolygonPoint","cancelBubble","setState","document","body","style","cursor","updateModel","onDragEnd","target","serialize","state","newPoints","currentPointCoordinate","index","changedIndex","onDeleteShape","classes","correct","hotspotColor","outlineColor","strokeWidth","showPoints","calculatedStrokeWidth","calculatedStroke","group","handleMouseLeave","handleMouseEnter","base","handleClick","onDragStart","handleOnDragEnd","circle","handleOnDragVertex","handleDelete","nextProps","prevState","imageHeight","imageWidth","React","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","arrayOf","shape","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Line, Circle } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DeleteWidget from './DeleteWidget';\n\nconst HOVERED_COLOR = '#00BFFF';\n\nclass PolComponent extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    const { id, points, imageHeight, imageWidth } = nextProps;\n    // we execute this code only if image dimensions changed or an hotspot was added/deleted\n    if (\n      prevState.imageHeight !== nextProps.imageHeight ||\n      prevState.imageWidth !== nextProps.imageWidth ||\n      prevState.id !== nextProps.id ||\n      prevState.points.length !== points.length\n    ) {\n      if (points.length) {\n        const xList = points.map((p) => p.x);\n        const yList = points.map((p) => p.y);\n\n        const x = Math.min(...xList);\n        const y = Math.max(...yList);\n\n        return {\n          id,\n          x,\n          y,\n          points,\n          imageHeight,\n          imageWidth,\n        };\n      }\n\n      return {\n        id: '',\n        x: 0,\n        y: 0,\n        points: [],\n        imageHeight,\n        imageWidth,\n      };\n    } else {\n      return null;\n    }\n  }\n\n  getOffset = (points) => {\n    const xList = points.map((p) => p.x);\n    const yList = points.map((p) => p.y);\n\n    return {\n      x: Math.min(...xList),\n      y: Math.max(...yList),\n    };\n  };\n\n  serialize = (points) => {\n    const { x: xOffset, y: yOffset } = this.getOffset(points);\n\n    return points.reduce((acc, point) => [...acc, point.x - xOffset, point.y - yOffset], []);\n  };\n\n  getInitialState = (points) => {\n    if (points.length) {\n      const { x, y } = this.getOffset(points);\n\n      return {\n        x,\n        y,\n        points,\n      };\n    }\n\n    return {\n      id: '',\n      x: 0,\n      y: 0,\n      points: [],\n    };\n  };\n\n  state = {\n    hovered: false,\n    isDragging: false,\n    ...this.getInitialState(this.props.points),\n  };\n\n  handleClick = (e) => {\n    const { points } = this.props;\n    const xList = points.map((p) => p.x);\n    const yList = points.map((p) => p.y);\n\n    const width = Math.max(...xList) - Math.min(...xList);\n    const height = Math.max(...yList) - Math.min(...yList);\n\n    const { isDrawing, onClick, id } = this.props;\n\n    if (width < 0 && height < 0 && isDrawing) {\n      return;\n    }\n\n    if (isDrawing && id === 'newPolygon') {\n      this.props.addPolygonPoint(e);\n      return;\n    }\n\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    this.setState({ hovered: true });\n    document.body.style.cursor = 'pointer';\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hovered: false });\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e, updateModel = false) => {\n    const { onDragEnd, id } = this.props;\n    const points = e.target.points() || this.serialize(this.state.points);\n\n    const newPoints = points.reduce((acc, currentPointCoordinate, index) => {\n      if (index % 2 === 0 && index + 1 < points.length) {\n        return [\n          ...acc,\n          {\n            x: currentPointCoordinate + e.target.x(),\n            y: points[index + 1] + e.target.y(),\n          },\n        ];\n      }\n\n      return acc;\n    }, []);\n\n    this.setState({\n      points: newPoints,\n      ...this.getOffset(newPoints),\n      isDragging: updateModel ? false : this.state.isDragging,\n    });\n  };\n\n  handleOnDragVertex = (e, changedIndex, updateModel) => {\n    const { onDragEnd, id } = this.props;\n    const { points } = this.state;\n\n    const newPoints = points.map((point, index) =>\n      index === changedIndex ? { x: e.target.x(), y: e.target.y() } : point,\n    );\n\n    this.setState({\n      points: newPoints,\n      ...this.getOffset(newPoints),\n      isDragging: updateModel ? false : this.state.isDragging,\n    });\n\n    if (updateModel) {\n      onDragEnd(id, { points: newPoints });\n    }\n  };\n\n  onDragStart = () => {\n    this.setState({ isDragging: true });\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const { classes, correct, id, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;\n    const { points, x, y, hovered } = this.state;\n    const showPoints = hovered || id === 'newPolygon';\n\n    const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n    const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Line\n          classes={classes.base}\n          points={this.serialize(points)}\n          closed={true}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={calculatedStroke}\n          strokeWidth={calculatedStrokeWidth}\n          onDragStart={this.onDragStart}\n          onDragMove={this.handleOnDragEnd}\n          onDragEnd={(e) => this.handleOnDragEnd(e, true)}\n          x={x}\n          y={y}\n        />\n\n        {showPoints &&\n          points.map((point, index) => (\n            <Circle\n              key={index}\n              className={classes.circle}\n              x={point.x}\n              y={point.y}\n              radius={5}\n              fill={'white'}\n              stroke={HOVERED_COLOR}\n              strokeWidth={1}\n              onClick={this.handleClick}\n              onDragStart={this.onDragStart}\n              onDragMove={(e) => {\n                this.handleOnDragVertex(e, index);\n              }}\n              onDragEnd={(e) => {\n                this.handleOnDragVertex(e, index, true);\n              }}\n              draggable\n            />\n          ))}\n        {!this.state.isDragging && this.state.hovered && (\n          <DeleteWidget x={x} y={y} id={id} handleWidgetClick={this.handleDelete} points={points} />\n        )}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n  circle: {\n    opacity: 4,\n  },\n  group: {\n    padding: '12px',\n  },\n});\n\nPolComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  imageHeight: PropTypes.number,\n  imageWidth: PropTypes.number,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  addPolygonPoint: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.arrayOf(\n    PropTypes.shape({\n      x: PropTypes.number,\n      y: PropTypes.number,\n    }),\n  ).isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nPolComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(PolComponent);\n"],"file":"hotspot-polygon.js"}

package/configure/lib/hotspot-rectangle.js

@@ -184,7 +184,6 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
         width: width,
         x: x,
         y: y,
-        outlineColor: outlineColor,
         handleWidgetClick: this.handleDelete
       }), this.state.hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Transformer, {
         ref: this.trRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-rectangle.jsx"],"names":["RectComponent","props","e","width","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","scaleX","scaleY","Math","max","onDeleteShape","state","React","createRef","classes","correct","hotspotColor","outlineColor","strokeWidth","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","onResizeEnd","handleDelete","oldBox","newBox","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 { Rect, Group, Transformer } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DeleteWidget from './DeleteWidget';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n      isDragging: false,\n    };\n    this.shapeRef = React.createRef();\n    this.trRef = React.createRef();\n  }\n\n  handleClick = (e) => {\n    const { width, height, isDrawing, onClick, id } = this.props;\n    if (width < 0 && height < 0 && isDrawing) {\n      return;\n    }\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    document.body.style.cursor = 'pointer';\n    this.setState({ hovered: true });\n    this.trRef.current.setNode(this.shapeRef.current);\n    this.trRef.current.getLayer().batchDraw();\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hovered: false });\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e) => {\n    const { onDragEnd, id } = this.props;\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: e.target.x(),\n      y: e.target.y(),\n    });\n  };\n\n  onResizeEnd = () => {\n    const { onDragEnd, id } = this.props;\n    // transformer is changing scale of the node\n    // and NOT its width or height\n    // but in the store we have only width and height\n    // to match the data better we will reset scale on transform end\n    const node = this.shapeRef.current;\n    const scaleX = node.scaleX();\n    const scaleY = node.scaleY();\n\n    // we will reset it back\n    node.scaleX(1);\n    node.scaleY(1);\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      // set minimal value\n      width: Math.max(5, node.width() * scaleX),\n      height: Math.max(node.height() * scaleY),\n    });\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const { classes, correct, height, hotspotColor, id, outlineColor, width, x, y, strokeWidth = 5 } = this.props;\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Rect\n          classes={classes.base}\n          ref={this.shapeRef}\n          width={width}\n          height={height}\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\n            id={id}\n            height={height}\n            width={width}\n            x={x}\n            y={y}\n            outlineColor={outlineColor}\n            handleWidgetClick={this.handleDelete}\n          />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            ref={this.trRef}\n            rotateEnabled={false}\n            boundBoxFunc={(oldBox, newBox) => {\n              // limit resize\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n\n  group: {\n    padding: '12px',\n  },\n});\n\nRectComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nRectComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"hotspot-rectangle.js"}
+{"version":3,"sources":["../src/hotspot-rectangle.jsx"],"names":["RectComponent","props","e","width","height","isDrawing","onClick","id","cancelBubble","document","body","style","cursor","setState","hovered","trRef","current","setNode","shapeRef","getLayer","batchDraw","onDragEnd","isDragging","x","target","y","node","scaleX","scaleY","Math","max","onDeleteShape","state","React","createRef","classes","correct","hotspotColor","outlineColor","strokeWidth","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","onResizeEnd","handleDelete","oldBox","newBox","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 { Rect, Group, Transformer } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport DeleteWidget from './DeleteWidget';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n      isDragging: false,\n    };\n    this.shapeRef = React.createRef();\n    this.trRef = React.createRef();\n  }\n\n  handleClick = (e) => {\n    const { width, height, isDrawing, onClick, id } = this.props;\n    if (width < 0 && height < 0 && isDrawing) {\n      return;\n    }\n    e.cancelBubble = true;\n    onClick(id);\n  };\n\n  handleMouseEnter = () => {\n    document.body.style.cursor = 'pointer';\n    this.setState({ hovered: true });\n    this.trRef.current.setNode(this.shapeRef.current);\n    this.trRef.current.getLayer().batchDraw();\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ hovered: false });\n    document.body.style.cursor = 'default';\n  };\n\n  handleOnDragEnd = (e) => {\n    const { onDragEnd, id } = this.props;\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: e.target.x(),\n      y: e.target.y(),\n    });\n  };\n\n  onResizeEnd = () => {\n    const { onDragEnd, id } = this.props;\n    // transformer is changing scale of the node\n    // and NOT its width or height\n    // but in the store we have only width and height\n    // to match the data better we will reset scale on transform end\n    const node = this.shapeRef.current;\n    const scaleX = node.scaleX();\n    const scaleY = node.scaleY();\n\n    // we will reset it back\n    node.scaleX(1);\n    node.scaleY(1);\n    this.setState({ isDragging: false });\n    onDragEnd(id, {\n      x: node.x(),\n      y: node.y(),\n      // set minimal value\n      width: Math.max(5, node.width() * scaleX),\n      height: Math.max(node.height() * scaleY),\n    });\n  };\n\n  handleDelete = (id) => {\n    const { onDeleteShape } = this.props;\n    onDeleteShape(id);\n  };\n\n  render() {\n    const { classes, correct, height, hotspotColor, id, outlineColor, width, x, y, strokeWidth = 5 } = this.props;\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Rect\n          classes={classes.base}\n          ref={this.shapeRef}\n          width={width}\n          height={height}\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} height={height} width={width} x={x} y={y} handleWidgetClick={this.handleDelete} />\n        )}\n        {this.state.hovered && (\n          <Transformer\n            ref={this.trRef}\n            rotateEnabled={false}\n            boundBoxFunc={(oldBox, newBox) => {\n              // limit resize\n              if (newBox.width < 10 || newBox.height < 10) {\n                return oldBox;\n              }\n              return newBox;\n            }}\n          />\n        )}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n  },\n\n  group: {\n    padding: '12px',\n  },\n});\n\nRectComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  correct: PropTypes.bool,\n  isDrawing: PropTypes.bool.isRequired,\n  id: PropTypes.string.isRequired,\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  strokeWidth: PropTypes.number,\n};\n\nRectComponent.defaultProps = {\n  correct: false,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"hotspot-rectangle.js"}

package/configure/lib/index.js

@@ -68,7 +68,9 @@ var HotspotConfigure = /*#__PURE__*/function (_HTMLElement) {
             _ref$rectangles = _ref.rectangles,
             rectangles = _ref$rectangles === void 0 ? [] : _ref$rectangles,
             _ref$polygons = _ref.polygons,
-            polygons = _ref$polygons === void 0 ? [] : _ref$polygons;
+            polygons = _ref$polygons === void 0 ? [] : _ref$polygons,
+            _ref$circles = _ref.circles,
+            circles = _ref$circles === void 0 ? [] : _ref$circles;
 
         _model.shapes.rectangles = rectangles.map(function (shape) {
           return _objectSpread(_objectSpread({}, shape), {}, {
@@ -80,6 +82,11 @@ var HotspotConfigure = /*#__PURE__*/function (_HTMLElement) {
             correct: false
           });
         });
+        _model.shapes.circles = circles.map(function (shape) {
+          return _objectSpread(_objectSpread({}, shape), {}, {
+            correct: false
+          });
+        });
       }
 
       _this.onModelChanged(_model);

package/configure/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","HotspotConfigure","c","_configuration","_render","m","propertyType","_model","shapes","rectangles","polygons","map","shape","correct","onModelChanged","colorType","color","prompt","rationale","teacherInstructions","dimensions","imageUrl","handler","dispatchEvent","InsertImageEvent","src","done","DeleteImageEvent","createDefaultModel","sensibleDefaults","configuration","bind","s","newConfiguration","language","enabled","languageChoices","options","length","value","settings","find","option","push","label","reset","resetValue","ModelUpdatedEvent","dispatchModelUpdated","InsertSoundEvent","DeleteSoundEvent","element","React","createElement","Root","model","onColorChanged","onImageUpload","onRationaleChanged","onConfigurationChanged","onPromptChanged","onUpdateImageDimension","imageSupport","add","insertImage","onDeleteImage","uploadSoundSupport","insertSound","onDeleteSound","onUpdateShapes","onModelChangedByConfig","onTeacherInstructionsChanged","ReactDOM","render","HTMLElement","hotspotList","hotspotColor","outlineList","outlineColor"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('hotspot:configure');\n\nexport default class HotspotConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n    hotspotList: model.hotspotList || [model.hotspotColor] || sensibleDefaults.model.hotspotList,\n    outlineList: model.outlineList || [model.outlineColor] || sensibleDefaults.model.outlineList,\n    shapes: model.shapes || sensibleDefaults.model.shapes || {},\n  });\n\n  constructor() {\n    super();\n    this._model = HotspotConfigure.createDefaultModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = HotspotConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    const newConfiguration = {\n      ...sensibleDefaults.configuration,\n      ...c,\n    };\n\n    this._configuration = newConfiguration;\n\n    // if language:enabled is true, then the corresponding default item model should include a language value;\n    // if it is false, then the language field should be omitted from the item model.\n    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,\n    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).\n    if (newConfiguration?.language?.enabled) {\n      if (newConfiguration?.languageChoices?.options?.length) {\n        this._model.language = newConfiguration?.languageChoices.options[0].value;\n      }\n    } else if (newConfiguration.language.settings && this._model.language) {\n      this._configuration.language.enabled = true;\n\n      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {\n        this._configuration.languageChoices.options = [];\n      }\n\n      // check if the language is already included in the languageChoices.options array\n      // and if not, then add it.\n      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {\n        this._configuration.languageChoices.options.push({\n          value: this._model.language,\n          label: this._model.language,\n        });\n      }\n    } else {\n      delete this._model.language;\n    }\n\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  }\n\n  onConfigurationChanged = (c) => {\n    this._configuration = c;\n    this._render();\n  };\n\n  onModelChangedByConfig = (m, propertyType) => {\n    const _model = m;\n\n    if (propertyType === 'multipleCorrect') {\n      const { rectangles = [], polygons = [] } = _model.shapes || {};\n\n      _model.shapes.rectangles = rectangles.map((shape) => ({ ...shape, correct: false }));\n      _model.shapes.polygons = polygons.map((shape) => ({ ...shape, correct: false }));\n    }\n\n    this.onModelChanged(_model);\n  };\n\n  onColorChanged = (colorType, color) => {\n    this.onModelChanged({\n      ...this._model,\n      [colorType]: color,\n    });\n  };\n\n  onPromptChanged = (prompt) => {\n    this.onModelChanged({\n      ...this._model,\n      prompt,\n    });\n  };\n\n  onRationaleChanged = (rationale) => {\n    this.onModelChanged({\n      ...this._model,\n      rationale,\n    });\n  };\n\n  onTeacherInstructionsChanged = (teacherInstructions) => {\n    this.onModelChanged({\n      ...this._model,\n      teacherInstructions,\n    });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    this.onModelChanged({\n      ...this._model,\n      dimensions,\n    });\n  };\n\n  onUpdateShapes = (shapes) => {\n    this.onModelChanged({\n      ...this._model,\n      shapes,\n    });\n  };\n\n  onImageUpload = (imageUrl) => {\n    this.onModelChanged({\n      ...this._model,\n      imageUrl,\n    });\n  };\n\n  insertImage = (handler) => {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  };\n\n  onDeleteImage = (src, done) => {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  };\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n    let element = React.createElement(Root, {\n      configuration: this._configuration,\n      model: this._model,\n      onColorChanged: this.onColorChanged,\n      onImageUpload: this.onImageUpload,\n      onRationaleChanged: this.onRationaleChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      onPromptChanged: this.onPromptChanged,\n      onUpdateImageDimension: this.onUpdateImageDimension,\n      imageSupport: {\n        add: this.insertImage,\n        delete: this.onDeleteImage,\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n      onUpdateShapes: this.onUpdateShapes,\n      onModelChangedByConfig: this.onModelChangedByConfig,\n      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged,\n    });\n\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","HotspotConfigure","c","_configuration","_render","m","propertyType","_model","shapes","rectangles","polygons","circles","map","shape","correct","onModelChanged","colorType","color","prompt","rationale","teacherInstructions","dimensions","imageUrl","handler","dispatchEvent","InsertImageEvent","src","done","DeleteImageEvent","createDefaultModel","sensibleDefaults","configuration","bind","s","newConfiguration","language","enabled","languageChoices","options","length","value","settings","find","option","push","label","reset","resetValue","ModelUpdatedEvent","dispatchModelUpdated","InsertSoundEvent","DeleteSoundEvent","element","React","createElement","Root","model","onColorChanged","onImageUpload","onRationaleChanged","onConfigurationChanged","onPromptChanged","onUpdateImageDimension","imageSupport","add","insertImage","onDeleteImage","uploadSoundSupport","insertSound","onDeleteSound","onUpdateShapes","onModelChangedByConfig","onTeacherInstructionsChanged","ReactDOM","render","HTMLElement","hotspotList","hotspotColor","outlineList","outlineColor"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('hotspot:configure');\n\nexport default class HotspotConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n    hotspotList: model.hotspotList || [model.hotspotColor] || sensibleDefaults.model.hotspotList,\n    outlineList: model.outlineList || [model.outlineColor] || sensibleDefaults.model.outlineList,\n    shapes: model.shapes || sensibleDefaults.model.shapes || {},\n  });\n\n  constructor() {\n    super();\n    this._model = HotspotConfigure.createDefaultModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = HotspotConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    const newConfiguration = {\n      ...sensibleDefaults.configuration,\n      ...c,\n    };\n\n    this._configuration = newConfiguration;\n\n    // if language:enabled is true, then the corresponding default item model should include a language value;\n    // if it is false, then the language field should be omitted from the item model.\n    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,\n    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).\n    if (newConfiguration?.language?.enabled) {\n      if (newConfiguration?.languageChoices?.options?.length) {\n        this._model.language = newConfiguration?.languageChoices.options[0].value;\n      }\n    } else if (newConfiguration.language.settings && this._model.language) {\n      this._configuration.language.enabled = true;\n\n      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {\n        this._configuration.languageChoices.options = [];\n      }\n\n      // check if the language is already included in the languageChoices.options array\n      // and if not, then add it.\n      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {\n        this._configuration.languageChoices.options.push({\n          value: this._model.language,\n          label: this._model.language,\n        });\n      }\n    } else {\n      delete this._model.language;\n    }\n\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  }\n\n  onConfigurationChanged = (c) => {\n    this._configuration = c;\n    this._render();\n  };\n\n  onModelChangedByConfig = (m, propertyType) => {\n    const _model = m;\n\n    if (propertyType === 'multipleCorrect') {\n      const { rectangles = [], polygons = [], circles = [] } = _model.shapes || {};\n\n      _model.shapes.rectangles = rectangles.map((shape) => ({ ...shape, correct: false }));\n      _model.shapes.polygons = polygons.map((shape) => ({ ...shape, correct: false }));\n      _model.shapes.circles = circles.map((shape) => ({ ...shape, correct: false }));\n    }\n\n    this.onModelChanged(_model);\n  };\n\n  onColorChanged = (colorType, color) => {\n    this.onModelChanged({\n      ...this._model,\n      [colorType]: color,\n    });\n  };\n\n  onPromptChanged = (prompt) => {\n    this.onModelChanged({\n      ...this._model,\n      prompt,\n    });\n  };\n\n  onRationaleChanged = (rationale) => {\n    this.onModelChanged({\n      ...this._model,\n      rationale,\n    });\n  };\n\n  onTeacherInstructionsChanged = (teacherInstructions) => {\n    this.onModelChanged({\n      ...this._model,\n      teacherInstructions,\n    });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    this.onModelChanged({\n      ...this._model,\n      dimensions,\n    });\n  };\n\n  onUpdateShapes = (shapes) => {\n    this.onModelChanged({\n      ...this._model,\n      shapes,\n    });\n  };\n\n  onImageUpload = (imageUrl) => {\n    this.onModelChanged({\n      ...this._model,\n      imageUrl,\n    });\n  };\n\n  insertImage = (handler) => {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  };\n\n  onDeleteImage = (src, done) => {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  };\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n    let element = React.createElement(Root, {\n      configuration: this._configuration,\n      model: this._model,\n      onColorChanged: this.onColorChanged,\n      onImageUpload: this.onImageUpload,\n      onRationaleChanged: this.onRationaleChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      onPromptChanged: this.onPromptChanged,\n      onUpdateImageDimension: this.onUpdateImageDimension,\n      imageSupport: {\n        add: this.insertImage,\n        delete: this.onDeleteImage,\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n      onUpdateShapes: this.onUpdateShapes,\n      onModelChangedByConfig: this.onModelChangedByConfig,\n      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged,\n    });\n\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}

package/configure/lib/shapes/circle.js

@@ -7,12 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var CircleShape = /*#__PURE__*/function () {
   function CircleShape() {
     (0, _classCallCheck2["default"])(this, CircleShape);
@@ -35,7 +41,7 @@ var CircleShape = /*#__PURE__*/function () {
       };
       newShapes.push(newCircle);
       return {
-        newShapes: newShapes,
+        shapes: newShapes,
         isDrawing: true,
         isDrawingShapeId: newCircle.id
       };
@@ -48,21 +54,31 @@ var CircleShape = /*#__PURE__*/function () {
       });
 
       if (currentShapeIndex !== -1) {
-        var currentShape = state.shapes[currentShapeIndex];
-        var updatedShapes = (0, _toConsumableArray2["default"])(props.shapes);
+        var currentShape = state.shapes[currentShapeIndex]; // Check if the shape is a valid circle (has more than 0 radius) before finalizing
 
         if (currentShape.radius > 0) {
-          updatedShapes.push(currentShape);
-          return {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            isDrawing: false,
+            stateShapes: false,
+            isDrawingShapeId: undefined
+          });
+        } else {
+          return _objectSpread(_objectSpread({}, state), {}, {
             isDrawing: false,
             stateShapes: false,
             isDrawingShapeId: undefined,
-            shapes: updatedShapes
-          };
+            shapes: state.shapes.filter(function (shape) {
+              return shape.id !== state.isDrawingShapeId;
+            })
+          });
         }
       }
 
-      return state;
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isDrawing: false,
+        stateShapes: false,
+        isDrawingShapeId: undefined
+      });
     }
   }, {
     key: "handleMouseMove",
@@ -78,8 +94,11 @@ var CircleShape = /*#__PURE__*/function () {
         });
 
         if (resizingShapeIndex !== -1) {
-          var resizingShape = tempShapes[resizingShapeIndex];
-          resizingShape.radius = Math.sqrt(Math.pow(e.evt.layerX - resizingShape.x, 2) + Math.pow(e.evt.layerY - resizingShape.y, 2));
+          var resizingShape = tempShapes[resizingShapeIndex]; // Calculate radius based on mouse position
+
+          var dx = e.evt.layerX - resizingShape.x;
+          var dy = e.evt.layerY - resizingShape.y;
+          resizingShape.radius = Math.sqrt(dx * dx + dy * dy);
           return {
             shapes: tempShapes
           };

package/configure/lib/shapes/circle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shapes/circle.js"],"names":["CircleShape","shapes","e","newShapes","highestId","Math","max","map","shape","parseInt","id","newCircle","radius","x","evt","layerX","y","layerY","group","index","length","push","isDrawing","isDrawingShapeId","state","props","currentShapeIndex","findIndex","currentShape","updatedShapes","stateShapes","undefined","tempShapes","resizingShapeIndex","resizingShape","sqrt","pow"],"mappings":"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","sourcesContent":["export default class CircleShape {\n  static create(shapes, e) {\n    const newShapes = [...shapes];\n    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0);\n    const newCircle = {\n      id: `${highestId + 1}`,\n      radius: 0,\n      x: e.evt.layerX,\n      y: e.evt.layerY,\n      group: 'circles',\n      index: newShapes.length,\n    };\n\n    newShapes.push(newCircle);\n\n    return {\n      newShapes,\n      isDrawing: true,\n      isDrawingShapeId: newCircle.id,\n    };\n  }\n\n  static finalizeCreation(state, props) {\n    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (currentShapeIndex !== -1) {\n      const currentShape = state.shapes[currentShapeIndex];\n      const updatedShapes = [...props.shapes];\n\n      if (currentShape.radius > 0) {\n        updatedShapes.push(currentShape);\n\n        return {\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n          shapes: updatedShapes,\n        };\n      }\n    }\n\n    return state;\n  }\n\n  static handleMouseMove(state, e) {\n    const { isDrawing, isDrawingShapeId, shapes } = state;\n\n    if (isDrawing) {\n      const tempShapes = [...shapes];\n      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);\n\n      if (resizingShapeIndex !== -1) {\n        const resizingShape = tempShapes[resizingShapeIndex];\n\n        resizingShape.radius = Math.sqrt(\n          Math.pow(e.evt.layerX - resizingShape.x, 2) + Math.pow(e.evt.layerY - resizingShape.y, 2),\n        );\n\n        return {\n          shapes: tempShapes,\n        };\n      }\n    }\n\n    return state;\n  }\n}\n"],"file":"circle.js"}
+{"version":3,"sources":["../../src/shapes/circle.js"],"names":["CircleShape","shapes","e","newShapes","highestId","Math","max","map","shape","parseInt","id","newCircle","radius","x","evt","layerX","y","layerY","group","index","length","push","isDrawing","isDrawingShapeId","state","props","currentShapeIndex","findIndex","currentShape","stateShapes","undefined","filter","tempShapes","resizingShapeIndex","resizingShape","dx","dy","sqrt"],"mappings":"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","sourcesContent":["export default class CircleShape {\n  static create(shapes, e) {\n    const newShapes = [...shapes];\n    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0);\n    const newCircle = {\n      id: `${highestId + 1}`,\n      radius: 0,\n      x: e.evt.layerX,\n      y: e.evt.layerY,\n      group: 'circles',\n      index: newShapes.length,\n    };\n\n    newShapes.push(newCircle);\n\n    return {\n      shapes: newShapes,\n      isDrawing: true,\n      isDrawingShapeId: newCircle.id,\n    };\n  }\n\n  static finalizeCreation(state, props) {\n    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (currentShapeIndex !== -1) {\n      const currentShape = state.shapes[currentShapeIndex];\n\n      // Check if the shape is a valid circle (has more than 0 radius) before finalizing\n      if (currentShape.radius > 0) {\n        return {\n          ...state,\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n        };\n      } else {\n        return {\n          ...state,\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n          shapes: state.shapes.filter((shape) => shape.id !== state.isDrawingShapeId),\n        };\n      }\n    }\n\n    return {\n      ...state,\n      isDrawing: false,\n      stateShapes: false,\n      isDrawingShapeId: undefined,\n    };\n  }\n\n  static handleMouseMove(state, e) {\n    const { isDrawing, isDrawingShapeId, shapes } = state;\n\n    if (isDrawing) {\n      const tempShapes = [...shapes];\n      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);\n\n      if (resizingShapeIndex !== -1) {\n        const resizingShape = tempShapes[resizingShapeIndex];\n\n        // Calculate radius based on mouse position\n        const dx = e.evt.layerX - resizingShape.x;\n        const dy = e.evt.layerY - resizingShape.y;\n        resizingShape.radius = Math.sqrt(dx * dx + dy * dy);\n\n        return {\n          shapes: tempShapes,\n        };\n      }\n    }\n\n    return state;\n  }\n}\n"],"file":"circle.js"}

package/configure/lib/utils.js

@@ -68,6 +68,14 @@ var getUpdatedRectangle = function getUpdatedRectangle(initialDim, nextDim, shap
 
 exports.getUpdatedRectangle = getUpdatedRectangle;
 
+var getUpdatedCircles = function getUpdatedCircles(initialDim, nextDim, shape) {
+  return _objectSpread(_objectSpread({}, shape), {}, {
+    radius: getDelta(initialDim.radius, nextDim.radius, shape.radius),
+    x: getDelta(initialDim.width, nextDim.width, shape.x),
+    y: getDelta(initialDim.height, nextDim.height, shape.y)
+  });
+};
+
 var getUpdatedPlygon = function getUpdatedPlygon(initialDim, nextDim, shape) {
   return _objectSpread(_objectSpread({}, shape), {}, {
     points: shape.points.map(function (point) {
@@ -93,6 +101,10 @@ var getUpdatedShapes = function getUpdatedShapes(initialDim, nextDim, shapes) {
     if (shape.group === 'polygons') {
       return getUpdatedPlygon(initialDim, nextDim, shape);
     }
+
+    if (shape.group === 'circles') {
+      return getUpdatedCircles(initialDim, nextDim, shape);
+    }
   });
 }; // converts shapes map to shapes array
 // example:
@@ -129,7 +141,8 @@ var groupShapes = function groupShapes(shapesArray) {
   shapesArray = shapesArray || [];
   var shapesMap = {
     rectangles: [],
-    polygons: []
+    polygons: [],
+    circles: []
   };
 
   if (shapesArray.length) {