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

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","JSON","stringify","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 !== imageHeight ||\n      prevState.imageWidth !== imageWidth ||\n      prevState.id !== nextProps.id ||\n      JSON.stringify(prevState.points) !== JSON.stringify(points)\n    ) {\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 null;\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    if (updateModel) {\n      onDragEnd(id, { points: newPoints });\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"}
+{"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","xValues","yValues","minX","maxX","minY","maxY","classes","correct","hotspotColor","outlineColor","selectedHotspotColor","hoverOutlineColor","strokeWidth","showPoints","hoverColor","calculatedStrokeWidth","calculatedStroke","boundingBox","getBoundingBox","group","handleMouseLeave","handleMouseEnter","base","handleClick","onDragStart","handleOnDragEnd","circle","handleOnDragVertex","handleDelete","nextProps","prevState","imageHeight","imageWidth","JSON","stringify","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 { Rect } from 'react-konva/lib/ReactKonvaCore';\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 !== imageHeight ||\n      prevState.imageWidth !== imageWidth ||\n      prevState.id !== nextProps.id ||\n      JSON.stringify(prevState.points) !== JSON.stringify(points)\n    ) {\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 null;\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    if (updateModel) {\n      onDragEnd(id, { points: newPoints });\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  // serialize(points) {\n  //   return points.reduce((acc, point) => [...acc, point.x, point.y], []);\n  // }\n\n  getBoundingBox(points) {\n    const xValues = points.map((point) => point.x);\n    const yValues = points.map((point) => point.y);\n    const minX = Math.min(...xValues);\n    const maxX = Math.max(...xValues);\n    const minY = Math.min(...yValues);\n    const maxY = Math.max(...yValues);\n    return {\n      x: minX,\n      y: minY,\n      width: maxX - minX,\n      height: maxY - minY,\n    };\n  }\n\n  render() {\n    const {\n      classes,\n      correct,\n      id,\n      hotspotColor,\n      outlineColor,\n      selectedHotspotColor,\n      hoverOutlineColor,\n      strokeWidth = 5,\n    } = this.props;\n\n    const { points, x, y, hovered } = this.state;\n    const showPoints = hovered || id === 'newPolygon';\n\n    const hoverColor = hoverOutlineColor || HOVERED_COLOR;\n\n    const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n    const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\n    // const calculatedStroke = correct ? outlineColor : hovered ? hoverColor : '';\n    const boundingBox = this.getBoundingBox(points);\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        {hoverOutlineColor && hovered && (\n          <Rect\n            x={boundingBox.x}\n            y={boundingBox.y}\n            width={boundingBox.width}\n            height={boundingBox.height}\n            stroke={hoverOutlineColor}\n            strokeWidth={2}\n            listening={false}\n          />\n        )}\n\n        <Line\n          classes={classes.base}\n          points={this.serialize(points)}\n          closed={true}\n          fill={correct ? selectedHotspotColor : 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  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\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

@@ -148,22 +148,33 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
           x = _this$props4.x,
           y = _this$props4.y,
           _this$props4$strokeWi = _this$props4.strokeWidth,
-          strokeWidth = _this$props4$strokeWi === void 0 ? 5 : _this$props4$strokeWi;
+          strokeWidth = _this$props4$strokeWi === void 0 ? 5 : _this$props4$strokeWi,
+          selectedHotspotColor = _this$props4.selectedHotspotColor,
+          hoverOutlineColor = _this$props4.hoverOutlineColor;
+      var hovered = this.state.hovered;
       return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
         classes: classes.group,
         onMouseLeave: this.handleMouseLeave,
         onMouseEnter: this.handleMouseEnter
-      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
+      }, hoverOutlineColor && hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        stroke: hoverOutlineColor,
+        strokeWidth: 2,
+        listening: false
+      }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
         classes: classes.base,
         ref: this.shapeRef,
         width: width,
         height: height,
-        fill: hotspotColor,
+        fill: correct ? selectedHotspotColor : hotspotColor,
         onClick: this.handleClick,
         onTap: this.handleClick,
         draggable: true,
-        stroke: outlineColor,
-        strokeWidth: correct ? strokeWidth : 0,
+        stroke: hovered ? 'transparent' : outlineColor,
+        strokeWidth: correct && !hovered ? strokeWidth : 0,
         onDragStart: function onDragStart() {
           return _this2.setState({
             isDragging: true
@@ -221,6 +232,8 @@ RectComponent.propTypes = {
   id: _propTypes["default"].string.isRequired,
   height: _propTypes["default"].number.isRequired,
   hotspotColor: _propTypes["default"].string.isRequired,
+  selectedHotspotColor: _propTypes["default"].string,
+  hoverOutlineColor: _propTypes["default"].string,
   onClick: _propTypes["default"].func.isRequired,
   onDeleteShape: _propTypes["default"].func.isRequired,
   onDragEnd: _propTypes["default"].func.isRequired,

package/configure/lib/hotspot-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 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"}
+{"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","selectedHotspotColor","hoverOutlineColor","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 {\n      classes,\n      correct,\n      height,\n      hotspotColor,\n      id,\n      outlineColor,\n      width,\n      x,\n      y,\n      strokeWidth = 5,\n      selectedHotspotColor,\n      hoverOutlineColor,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    return (\n      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        {hoverOutlineColor && hovered && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={hoverOutlineColor}\n            strokeWidth={2}\n            listening={false}\n          />\n        )}\n\n        <Rect\n          classes={classes.base}\n          ref={this.shapeRef}\n          width={width}\n          height={height}\n          fill={correct ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable\n          stroke={hovered ? 'transparent' : outlineColor}\n          strokeWidth={correct && !hovered ? 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  selectedHotspotColor: PropTypes.string,\n  hoverOutlineColor: PropTypes.string,\n  onClick: PropTypes.func.isRequired,\n  onDeleteShape: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  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/root.js

@@ -289,6 +289,8 @@ var Root = /*#__PURE__*/function (_React$Component) {
         hasErrors: !!shapesError || !!selectionsError,
         hotspotColor: model.hotspotColor,
         outlineColor: model.outlineColor,
+        selectedHotspotColor: model.selectedHotspotColor,
+        hoverOutlineColor: model.hoverOutlineColor,
         onUpdateImageDimension: onUpdateImageDimension,
         onUpdateShapes: onUpdateShapes,
         onImageUpload: onImageUpload,

package/configure/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","dropdown","Root","fieldType","color","onColorChanged","props","cType","value","resizeType","model","dimensions","shapes","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","enabled","shapesArray","updatedShapes","classes","imageSupport","uploadSoundSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","baseInputConfiguration","contentDimensions","maxImageWidth","maxImageHeight","multipleCorrect","partialScoring","prompt","rationale","settingsPanelDisabled","spellCheck","teacherInstructions","withRubric","mathMlOptions","language","languageChoices","errors","promptEnabled","rationaleEnabled","spellCheckEnabled","teacherInstructionsEnabled","toolbarEditorPosition","promptError","rationaleError","shapesError","selectionsError","selections","teacherInstructionsError","validationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","options","panelProperties","rubricEnabled","getPluginProps","Settings","Properties","promptContainer","inputConfiguration","errorText","flexContainer","subheading","tooltip","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","strokeWidth","add","width","e","handleOnUpdateImageDimensions","field","height","React","Component","styles","theme","display","marginBottom","spacing","unit","flex","paddingTop","marginRight","alignItems","fontSize","typography","whiteSpace","maxWidth","palette","error","main","propTypes","PropTypes","object","isRequired","shape","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer, NumberTextField } from '@pie-lib/pie-toolbox/config-ui';\nimport PropTypes from 'prop-types';\nimport { EditableHtml } from '@pie-lib/pie-toolbox/editable-html';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Info from '@material-ui/icons/Info';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport HotspotPalette from './hotspot-palette';\nimport HotspotContainer from './hotspot-container';\nimport { updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes } from './utils';\n\nconst { Panel, toggle, dropdown } = settings;\n\nexport class Root extends React.Component {\n  handleColorChange = (fieldType, color) => {\n    const { onColorChanged } = this.props;\n    const cType = `${fieldType}Color`;\n\n    onColorChanged(cType, color);\n  };\n\n  handleOnUpdateImageDimensions = (value, resizeType) => {\n    const {\n      model: { dimensions, shapes },\n      configuration: { preserveAspectRatio = {} },\n      onUpdateImageDimension,\n      onUpdateShapes,\n    } = this.props;\n\n    const nextImageDimensions = { ...dimensions, [resizeType]: value };\n\n    // if preserveAspectRatio.enabled, updateImageDimensions function makes sure aspect ratio is kept\n    const updatedDimensions = updateImageDimensions(\n      dimensions,\n      nextImageDimensions,\n      preserveAspectRatio.enabled,\n      resizeType,\n    );\n    // transform shapes map into shapes array\n    const shapesArray = getAllShapes(shapes);\n    // transform all the shapes to fit the re-sized image\n    const updatedShapes = getUpdatedShapes(dimensions, updatedDimensions, shapesArray);\n    // transform shapes array back into shapes map\n\n    onUpdateShapes(groupShapes(updatedShapes));\n    onUpdateImageDimension(updatedDimensions);\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      uploadSoundSupport,\n      onConfigurationChanged,\n      onImageUpload,\n      onModelChangedByConfig,\n      onPromptChanged,\n      onRationaleChanged,\n      onUpdateImageDimension,\n      onTeacherInstructionsChanged,\n      onUpdateShapes,\n    } = this.props;\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      multipleCorrect = {},\n      partialScoring = {},\n      preserveAspectRatio = {},\n      prompt = {},\n      rationale = {},\n      settingsPanelDisabled,\n      spellCheck = {},\n      teacherInstructions = {},\n      withRubric = {},\n      mathMlOptions = {},\n      language = {},\n      languageChoices = {},\n    } = configuration || {};\n    const {\n      errors,\n      promptEnabled,\n      rationaleEnabled,\n      spellCheckEnabled,\n      teacherInstructionsEnabled,\n      toolbarEditorPosition,\n    } = model || {};\n    const {\n      prompt: promptError,\n      rationale: rationaleError,\n      shapes: shapesError,\n      selections: selectionsError,\n      teacherInstructions: teacherInstructionsError,\n    } = errors || {};\n    const validationMessage = generateValidationMessage(configuration);\n\n    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n    const toolbarOpts = {\n      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',\n    };\n\n    const panelSettings = {\n      multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),\n      partialScoring: partialScoring.settings && toggle(partialScoring.label),\n      promptEnabled: prompt.settings && toggle(prompt.label),\n      'language.enabled': language.settings && toggle(language.label, true),\n      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),\n    };\n    const panelProperties = {\n      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),\n      rationaleEnabled: rationale.settings && toggle(rationale.label),\n      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),\n      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),\n    };\n\n    const getPluginProps = (props = {}) => ({\n      ...baseInputConfiguration,\n      ...props,\n    });\n\n    return (\n      <layout.ConfigLayout\n        dimensions={contentDimensions}\n        hideSettings={settingsPanelDisabled}\n        settings={\n          <Panel\n            model={model}\n            onChangeModel={onModelChangedByConfig}\n            configuration={configuration}\n            onChangeConfiguration={onConfigurationChanged}\n            groups={{\n              Settings: panelSettings,\n              Properties: panelProperties,\n            }}\n          />\n        }\n      >\n        {teacherInstructionsEnabled && (\n          <InputContainer label={teacherInstructions.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.teacherInstructions || ''}\n              onChange={onTeacherInstructionsChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              error={teacherInstructionsError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {teacherInstructionsError && <div className={classes.errorText}>{teacherInstructionsError}</div>}\n          </InputContainer>\n        )}\n\n        {promptEnabled && (\n          <InputContainer label={prompt.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.prompt || ''}\n              onChange={onPromptChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              error={promptError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(prompt?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={defaultImageMaxWidth}\n              maxImageHeight={defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {promptError && <div className={classes.errorText}>{promptError}</div>}\n          </InputContainer>\n        )}\n\n        <div className={classes.flexContainer}>\n          <Typography className={classes.subheading} variant=\"subheading\">\n            Define Hotspot\n          </Typography>\n          <Tooltip\n            classes={{ tooltip: classes.tooltip }}\n            disableFocusListener\n            disableTouchListener\n            placement={'left'}\n            title={validationMessage}\n          >\n            <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />\n          </Tooltip>\n        </div>\n\n        <HotspotPalette\n          hotspotColor={model.hotspotColor}\n          hotspotList={model.hotspotList}\n          outlineColor={model.outlineColor}\n          outlineList={model.outlineList}\n          onHotspotColorChange={(color) => this.handleColorChange('hotspot', color)}\n          onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n        />\n\n        <HotspotContainer\n          dimensions={model.dimensions}\n          imageUrl={model.imageUrl}\n          multipleCorrect={model.multipleCorrect}\n          hasErrors={!!shapesError || !!selectionsError}\n          hotspotColor={model.hotspotColor}\n          outlineColor={model.outlineColor}\n          onUpdateImageDimension={onUpdateImageDimension}\n          onUpdateShapes={onUpdateShapes}\n          onImageUpload={onImageUpload}\n          shapes={model.shapes}\n          strokeWidth={model.strokeWidth}\n          preserveAspectRatioEnabled={preserveAspectRatio.enabled}\n          insertImage={imageSupport && imageSupport.add}\n        />\n        {shapesError && <div className={classes.errorText}>{shapesError}</div>}\n        {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}\n\n        {model.imageUrl && (\n          <React.Fragment>\n            <Typography variant=\"subheading\">Image Dimensions</Typography>\n\n            <div className={classes.dimensions}>\n              <NumberTextField\n                key=\"hotspot-manual-width\"\n                label=\"Width\"\n                value={model.dimensions.width}\n                min={0}\n                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}\n                showErrorWhenOutsideRange\n                className={classes.field}\n              />\n\n              <NumberTextField\n                key=\"hotspot-manual-height\"\n                label=\"Height\"\n                value={model.dimensions.height}\n                min={0}\n                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}\n                showErrorWhenOutsideRange\n                className={classes.field}\n              />\n            </div>\n          </React.Fragment>\n        )}\n\n        {rationaleEnabled && (\n          <InputContainer label={rationale.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.rationale || ''}\n              onChange={onRationaleChanged}\n              imageSupport={imageSupport}\n              error={rationaleError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(rationale?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {rationaleError && <div className={classes.errorText}>{rationaleError}</div>}\n          </InputContainer>\n        )}\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  dimensions: {\n    display: 'flex',\n    marginBottom: theme.spacing.unit * 1.5,\n  },\n  field: {\n    flex: 1,\n    width: '90%',\n  },\n  promptContainer: {\n    paddingTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    width: '100%',\n  },\n  subheading: {\n    marginRight: theme.spacing.unit,\n  },\n  flexContainer: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  tooltip: {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\n  },\n});\n\nRoot.propTypes = {\n  classes: PropTypes.object.isRequired,\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  uploadSoundSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  onImageUpload: PropTypes.func.isRequired,\n  onColorChanged: PropTypes.func.isRequired,\n  onPromptChanged: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onModelChangedByConfig: PropTypes.func.isRequired,\n  onRationaleChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n  onTeacherInstructionsChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}
+{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","dropdown","Root","fieldType","color","onColorChanged","props","cType","value","resizeType","model","dimensions","shapes","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","enabled","shapesArray","updatedShapes","classes","imageSupport","uploadSoundSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","baseInputConfiguration","contentDimensions","maxImageWidth","maxImageHeight","multipleCorrect","partialScoring","prompt","rationale","settingsPanelDisabled","spellCheck","teacherInstructions","withRubric","mathMlOptions","language","languageChoices","errors","promptEnabled","rationaleEnabled","spellCheckEnabled","teacherInstructionsEnabled","toolbarEditorPosition","promptError","rationaleError","shapesError","selectionsError","selections","teacherInstructionsError","validationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","options","panelProperties","rubricEnabled","getPluginProps","Settings","Properties","promptContainer","inputConfiguration","errorText","flexContainer","subheading","tooltip","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","selectedHotspotColor","hoverOutlineColor","strokeWidth","add","width","e","handleOnUpdateImageDimensions","field","height","React","Component","styles","theme","display","marginBottom","spacing","unit","flex","paddingTop","marginRight","alignItems","fontSize","typography","whiteSpace","maxWidth","palette","error","main","propTypes","PropTypes","object","isRequired","shape","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer, NumberTextField } from '@pie-lib/pie-toolbox/config-ui';\nimport PropTypes from 'prop-types';\nimport { EditableHtml } from '@pie-lib/pie-toolbox/editable-html';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Info from '@material-ui/icons/Info';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport HotspotPalette from './hotspot-palette';\nimport HotspotContainer from './hotspot-container';\nimport { updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes } from './utils';\n\nconst { Panel, toggle, dropdown } = settings;\n\nexport class Root extends React.Component {\n  handleColorChange = (fieldType, color) => {\n    const { onColorChanged } = this.props;\n    const cType = `${fieldType}Color`;\n\n    onColorChanged(cType, color);\n  };\n\n  handleOnUpdateImageDimensions = (value, resizeType) => {\n    const {\n      model: { dimensions, shapes },\n      configuration: { preserveAspectRatio = {} },\n      onUpdateImageDimension,\n      onUpdateShapes,\n    } = this.props;\n\n    const nextImageDimensions = { ...dimensions, [resizeType]: value };\n\n    // if preserveAspectRatio.enabled, updateImageDimensions function makes sure aspect ratio is kept\n    const updatedDimensions = updateImageDimensions(\n      dimensions,\n      nextImageDimensions,\n      preserveAspectRatio.enabled,\n      resizeType,\n    );\n    // transform shapes map into shapes array\n    const shapesArray = getAllShapes(shapes);\n    // transform all the shapes to fit the re-sized image\n    const updatedShapes = getUpdatedShapes(dimensions, updatedDimensions, shapesArray);\n    // transform shapes array back into shapes map\n\n    onUpdateShapes(groupShapes(updatedShapes));\n    onUpdateImageDimension(updatedDimensions);\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      uploadSoundSupport,\n      onConfigurationChanged,\n      onImageUpload,\n      onModelChangedByConfig,\n      onPromptChanged,\n      onRationaleChanged,\n      onUpdateImageDimension,\n      onTeacherInstructionsChanged,\n      onUpdateShapes,\n    } = this.props;\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      multipleCorrect = {},\n      partialScoring = {},\n      preserveAspectRatio = {},\n      prompt = {},\n      rationale = {},\n      settingsPanelDisabled,\n      spellCheck = {},\n      teacherInstructions = {},\n      withRubric = {},\n      mathMlOptions = {},\n      language = {},\n      languageChoices = {},\n    } = configuration || {};\n    const {\n      errors,\n      promptEnabled,\n      rationaleEnabled,\n      spellCheckEnabled,\n      teacherInstructionsEnabled,\n      toolbarEditorPosition,\n    } = model || {};\n    const {\n      prompt: promptError,\n      rationale: rationaleError,\n      shapes: shapesError,\n      selections: selectionsError,\n      teacherInstructions: teacherInstructionsError,\n    } = errors || {};\n    const validationMessage = generateValidationMessage(configuration);\n\n    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n    const toolbarOpts = {\n      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',\n    };\n\n    const panelSettings = {\n      multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),\n      partialScoring: partialScoring.settings && toggle(partialScoring.label),\n      promptEnabled: prompt.settings && toggle(prompt.label),\n      'language.enabled': language.settings && toggle(language.label, true),\n      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),\n    };\n    const panelProperties = {\n      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),\n      rationaleEnabled: rationale.settings && toggle(rationale.label),\n      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),\n      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),\n    };\n\n    const getPluginProps = (props = {}) => ({\n      ...baseInputConfiguration,\n      ...props,\n    });\n\n    return (\n      <layout.ConfigLayout\n        dimensions={contentDimensions}\n        hideSettings={settingsPanelDisabled}\n        settings={\n          <Panel\n            model={model}\n            onChangeModel={onModelChangedByConfig}\n            configuration={configuration}\n            onChangeConfiguration={onConfigurationChanged}\n            groups={{\n              Settings: panelSettings,\n              Properties: panelProperties,\n            }}\n          />\n        }\n      >\n        {teacherInstructionsEnabled && (\n          <InputContainer label={teacherInstructions.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.teacherInstructions || ''}\n              onChange={onTeacherInstructionsChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              error={teacherInstructionsError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {teacherInstructionsError && <div className={classes.errorText}>{teacherInstructionsError}</div>}\n          </InputContainer>\n        )}\n\n        {promptEnabled && (\n          <InputContainer label={prompt.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.prompt || ''}\n              onChange={onPromptChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              error={promptError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(prompt?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={defaultImageMaxWidth}\n              maxImageHeight={defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {promptError && <div className={classes.errorText}>{promptError}</div>}\n          </InputContainer>\n        )}\n\n        <div className={classes.flexContainer}>\n          <Typography className={classes.subheading} variant=\"subheading\">\n            Define Hotspot\n          </Typography>\n          <Tooltip\n            classes={{ tooltip: classes.tooltip }}\n            disableFocusListener\n            disableTouchListener\n            placement={'left'}\n            title={validationMessage}\n          >\n            <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />\n          </Tooltip>\n        </div>\n\n        <HotspotPalette\n          hotspotColor={model.hotspotColor}\n          hotspotList={model.hotspotList}\n          outlineColor={model.outlineColor}\n          outlineList={model.outlineList}\n          onHotspotColorChange={(color) => this.handleColorChange('hotspot', color)}\n          onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n        />\n\n        <HotspotContainer\n          dimensions={model.dimensions}\n          imageUrl={model.imageUrl}\n          multipleCorrect={model.multipleCorrect}\n          hasErrors={!!shapesError || !!selectionsError}\n          hotspotColor={model.hotspotColor}\n          outlineColor={model.outlineColor}\n          selectedHotspotColor={model.selectedHotspotColor}\n          hoverOutlineColor={model.hoverOutlineColor}\n          onUpdateImageDimension={onUpdateImageDimension}\n          onUpdateShapes={onUpdateShapes}\n          onImageUpload={onImageUpload}\n          shapes={model.shapes}\n          strokeWidth={model.strokeWidth}\n          preserveAspectRatioEnabled={preserveAspectRatio.enabled}\n          insertImage={imageSupport && imageSupport.add}\n        />\n        {shapesError && <div className={classes.errorText}>{shapesError}</div>}\n        {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}\n\n        {model.imageUrl && (\n          <React.Fragment>\n            <Typography variant=\"subheading\">Image Dimensions</Typography>\n\n            <div className={classes.dimensions}>\n              <NumberTextField\n                key=\"hotspot-manual-width\"\n                label=\"Width\"\n                value={model.dimensions.width}\n                min={0}\n                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}\n                showErrorWhenOutsideRange\n                className={classes.field}\n              />\n\n              <NumberTextField\n                key=\"hotspot-manual-height\"\n                label=\"Height\"\n                value={model.dimensions.height}\n                min={0}\n                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}\n                showErrorWhenOutsideRange\n                className={classes.field}\n              />\n            </div>\n          </React.Fragment>\n        )}\n\n        {rationaleEnabled && (\n          <InputContainer label={rationale.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.rationale || ''}\n              onChange={onRationaleChanged}\n              imageSupport={imageSupport}\n              error={rationaleError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(rationale?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {rationaleError && <div className={classes.errorText}>{rationaleError}</div>}\n          </InputContainer>\n        )}\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  dimensions: {\n    display: 'flex',\n    marginBottom: theme.spacing.unit * 1.5,\n  },\n  field: {\n    flex: 1,\n    width: '90%',\n  },\n  promptContainer: {\n    paddingTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    width: '100%',\n  },\n  subheading: {\n    marginRight: theme.spacing.unit,\n  },\n  flexContainer: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  tooltip: {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\n  },\n});\n\nRoot.propTypes = {\n  classes: PropTypes.object.isRequired,\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  uploadSoundSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  onImageUpload: PropTypes.func.isRequired,\n  onColorChanged: PropTypes.func.isRequired,\n  onPromptChanged: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onModelChangedByConfig: PropTypes.func.isRequired,\n  onRationaleChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n  onTeacherInstructionsChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "6.23.0",
+  "version": "6.24.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,7 +10,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "1.28.0",
+    "@pie-lib/pie-toolbox": "1.29.0",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/hotspot-circle.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Circle, Group, Transformer } from 'react-konva';
+import { Circle, Group, Rect, Transformer } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles';
 import DeleteWidget from './DeleteWidget';
 
@@ -76,8 +76,21 @@ class CircleComponent extends React.Component {
   };
 
   render() {
-    const { classes, correct, radius, hotspotColor, id, outlineColor, x, y, strokeWidth = 5 } = this.props;
-
+    const {
+      classes,
+      correct,
+      radius,
+      hotspotColor,
+      id,
+      outlineColor,
+      x,
+      y,
+      strokeWidth = 5,
+      selectedHotspotColor,
+      hoverOutlineColor,
+    } = this.props;
+
+    const { hovered, isDragging } = this.state;
     // Ensure radius is valid
     const validRadius = isNaN(radius) || radius <= 0 ? 5 : radius;
 
@@ -87,7 +100,7 @@ class CircleComponent extends React.Component {
           classes={classes.base}
           ref={this.shapeRef}
           radius={validRadius}
-          fill={hotspotColor}
+          fill={correct ? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable
@@ -100,11 +113,20 @@ class CircleComponent extends React.Component {
           x={x}
           y={y}
         />
-        {!this.state.isDragging && this.state.hovered && (
-          <DeleteWidget id={id} radius={validRadius} x={x} y={y} handleWidgetClick={this.handleDelete} isCircle={true} />
+
+        {!isDragging && hovered && (
+          <DeleteWidget
+            id={id}
+            radius={validRadius}
+            x={x}
+            y={y}
+            handleWidgetClick={this.handleDelete}
+            isCircle={true}
+          />
         )}
         {this.state.hovered && (
           <Transformer
+            borderStroke={hoverOutlineColor || null}
             ref={this.trRef}
             rotateEnabled={false}
             keepRatio={true}
@@ -154,6 +176,8 @@ CircleComponent.propTypes = {
   id: PropTypes.string.isRequired,
   radius: PropTypes.number.isRequired,
   hotspotColor: PropTypes.string.isRequired,
+  selectedHotspotColor: PropTypes.string,
+  hoverOutlineColor: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   onDeleteShape: PropTypes.func.isRequired,
   onDragEnd: PropTypes.func.isRequired,

package/configure/src/hotspot-container.jsx

@@ -157,7 +157,10 @@ export class Container extends Component {
       outlineColor,
       strokeWidth,
       preserveAspectRatioEnabled,
+      hoverOutlineColor,
+      selectedHotspotColor,
     } = this.props;
+    
     const { dropzoneActive, dragEnabled } = this.state;
     const { shapes, selectedShape } = this.state;
 
@@ -227,6 +230,8 @@ export class Container extends Component {
                 handleFinishDrawing={this.handleFinishDrawing}
                 imageUrl={imageUrl}
                 hotspotColor={hotspotColor}
+                selectedHotspotColor={selectedHotspotColor}
+                hoverOutlineColor={hoverOutlineColor}
                 multipleCorrect={multipleCorrect}
                 onUpdateImageDimension={onUpdateImageDimension}
                 onUpdateShapes={this.onUpdateShapes}
@@ -317,6 +322,8 @@ Container.propTypes = {
   dimensions: PropTypes.object.isRequired,
   imageUrl: PropTypes.string.isRequired,
   hotspotColor: PropTypes.string.isRequired,
+  selectedHotspotColor: PropTypes.string,
+  hoverOutlineColor: PropTypes.string,
   multipleCorrect: PropTypes.bool.isRequired,
   onImageUpload: PropTypes.func.isRequired,
   onUpdateImageDimension: PropTypes.func.isRequired,

package/configure/src/hotspot-drawable.jsx

@@ -164,60 +164,61 @@ export class Drawable extends React.Component {
 
     // when a shape is moved completely outside the canvas
     // remove that shape
-    const newShapes = shapes.map((shape) => {
-      if (shape.id !== id) {
-        return shape;
-      }
+    const newShapes = shapes
+      .map((shape) => {
+        if (shape.id !== id) {
+          return shape;
+        }
 
-      let newX = updatedProps.x;
-      let newY = updatedProps.y;
+        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;
-        }
+        if (shape.group === 'rectangles') {
+          if (newX + shape.width < 0 || newX > canvasWidth || newY + shape.height < 0 || newY > canvasHeight) {
+            return null;
+          }
 
-        return { ...shape, ...updatedProps };
-      }
+          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;
+          }
 
-      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 };
         }
 
-        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);
 
-      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);
 
-        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;
 
-        // 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;
 
-        minX = minX + deltaX;
-        maxX = maxX + deltaX;
-        minY = minY + deltaY;
-        maxY = maxY + deltaY;
+          if (maxX < 0 || minX > canvasWidth || maxY < 0 || minY > canvasHeight) {
+            return null;
+          }
 
-        if (maxX < 0 || minX > canvasWidth || maxY < 0 || minY > canvasHeight) {
-          return null;
+          return { ...shape, ...updatedProps };
         }
 
-        return { ...shape, ...updatedProps };
-      }
-
-      return shape;
-    }).filter(shape => shape !== null);
+        return shape;
+      })
+      .filter((shape) => shape !== null);
 
     onUpdateShapes(cloneDeep(newShapes));
   };
@@ -347,7 +348,8 @@ export class Drawable extends React.Component {
       isDrawingShapeId: undefined,
     });
     this.props.onDeleteShape(id);
-  }
+  };
+
   /// end of handling Image section
 
   render() {
@@ -359,6 +361,8 @@ export class Drawable extends React.Component {
       outlineColor,
       shapes,
       strokeWidth,
+      hoverOutlineColor,
+      selectedHotspotColor,
     } = this.props;
 
     const {
@@ -421,10 +425,14 @@ export class Drawable extends React.Component {
                 <Tag
                   {...(shape.group === SHAPE_GROUPS.CIRCLES ? { radius: shape.radius } : {})}
                   {...(shape.group === SHAPE_GROUPS.RECTANGLES ? { height: shape.height, width: shape.width } : {})}
-                  {...(shape.group === SHAPE_GROUPS.POLYGONS ? { points: shape.points, addPolygonPoint: (e) => this.addPolygonPoint(e) } : {})}
+                  {...(shape.group === 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)}
@@ -487,6 +495,8 @@ Drawable.propTypes = {
   imageUrl: PropTypes.string.isRequired,
   handleFinishDrawing: PropTypes.func.isRequired,
   hotspotColor: PropTypes.string.isRequired,
+  selectedHotspotColor: PropTypes.string,
+  hoverOutlineColor: PropTypes.string,
   multipleCorrect: PropTypes.bool.isRequired,
   onUpdateImageDimension: PropTypes.func.isRequired,
   onUpdateShapes: PropTypes.func.isRequired,