@pie-element/hotspot 7.0.2-next.14 → 7.0.2-next.19

package/controller/lib/index.js

@@ -48,6 +48,8 @@ function model(question, session, env) {
   var imageUrl = normalizedQuestion.imageUrl,
       dimensions = normalizedQuestion.dimensions,
       hotspotColor = normalizedQuestion.hotspotColor,
+      hoverOutlineColor = normalizedQuestion.hoverOutlineColor,
+      selectedHotspotColor = normalizedQuestion.selectedHotspotColor,
       multipleCorrect = normalizedQuestion.multipleCorrect,
       outlineColor = normalizedQuestion.outlineColor,
       partialScoring = normalizedQuestion.partialScoring,
@@ -68,6 +70,8 @@ function model(question, session, env) {
       imageUrl: imageUrl,
       outlineColor: outlineColor,
       hotspotColor: hotspotColor,
+      hoverOutlineColor: hoverOutlineColor,
+      selectedHotspotColor: selectedHotspotColor,
       multipleCorrect: multipleCorrect,
       partialScoring: partialScoring,
       language: language,

package/controller/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","defaults","model","session","env","normalizedQuestion","imageUrl","dimensions","hotspotColor","multipleCorrect","outlineColor","partialScoring","prompt","shapes","language","rectangles","polygons","circles","Promise","resolve","out","disabled","mode","map","index","rectProps","polyProps","circleProps","responseCorrect","undefined","role","rationale","rationaleEnabled","teacherInstructions","teacherInstructionsEnabled","promptEnabled","strokeWidth","createDefaultModel","getScore","config","answers","partialScoringEnabled","enabled","correctAnswers","selectedChoices","choices","correctChoices","filter","choice","correct","forEach","shape","selected","answer","id","correctlySelected","extraAnswers","length","total","str","toFixed","parseFloat","outcome","score","empty","returnShapesCorrect","i","push","createCorrectResponseSession","rectangleCorrect","polygonsCorrect","circlesCorrect","getInnerText","html","replaceAll","getContent","replace","validate","minShapes","maxShapes","maxSelections","errors","field","required","allShapes","Object","values","reduce","acc","nbOfSelections","nbOfShapes","selections"],"mappings":"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","sourcesContent":["import debug from 'debug';\nimport isEmpty from 'lodash/isEmpty';\nimport { partialScoring } from '@pie-lib/pie-toolbox/controller-utils';\n\nimport { isResponseCorrect } from './utils';\n\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:hotspot:controller');\n\nexport const normalize = (question) => ({\n  ...defaults,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    dimensions,\n    hotspotColor,\n    multipleCorrect,\n    outlineColor,\n    partialScoring,\n    prompt,\n    shapes,\n    language,\n  } = normalizedQuestion;\n  const { rectangles, polygons, circles } = shapes || {};\n\n  return new Promise((resolve) => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      dimensions,\n      imageUrl,\n      outlineColor,\n      hotspotColor,\n      multipleCorrect,\n      partialScoring,\n      language,\n      shapes: {\n        ...shapes,\n        // eslint-disable-next-line no-unused-vars\n        rectangles: (rectangles || []).map(({ index, ...rectProps }) => ({ ...rectProps })),\n        // eslint-disable-next-line no-unused-vars\n        polygons: (polygons || []).map(({ index, ...polyProps }) => ({ ...polyProps })),\n        // eslint-disable-next-line no-unused-vars\n        circles: (circles || []).map(({ index, ...circleProps }) => ({ ...circleProps })),\n      },\n      responseCorrect: env.mode === 'evaluate' ? isResponseCorrect(normalizedQuestion, session) : undefined,\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.rationale = normalizedQuestion.rationaleEnabled ? normalizedQuestion.rationale : null;\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled\n        ? normalizedQuestion.teacherInstructions\n        : null;\n    } else {\n      out.rationale = null;\n      out.teacherInstructions = null;\n    }\n\n    out.prompt = normalizedQuestion.promptEnabled ? prompt : null;\n    out.strokeWidth = normalizedQuestion.strokeWidth;\n\n    // console.log(out);\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise((resolve) => {\n    resolve({\n      ...defaults,\n      ...model,\n    });\n  });\n\nconst getScore = (config, session, env = {}) => {\n  const { answers } = session || {};\n\n  if (!config.shapes || (!config.shapes.rectangles && !config.shapes.polygons && !config.shapes.circles)) {\n    return 0;\n  }\n\n  const { shapes: { rectangles = [], polygons = [], circles = [] } = {} } = config;\n  const partialScoringEnabled = partialScoring.enabled(config, env);\n\n  if (!partialScoringEnabled) {\n    return isResponseCorrect(config, session) ? 1 : 0;\n  }\n\n  let correctAnswers = 0;\n  let selectedChoices = 0;\n\n  const choices = [...rectangles, ...polygons, ...circles];\n\n  const correctChoices = choices.filter((choice) => choice.correct);\n\n  choices.forEach((shape) => {\n    const selected = answers && answers.filter((answer) => answer.id === shape.id)[0];\n    const correctlySelected = shape.correct && selected;\n\n    if (selected) {\n      selectedChoices += 1;\n    }\n\n    if (correctlySelected) {\n      correctAnswers += 1;\n    }\n  });\n\n  const extraAnswers = selectedChoices > correctChoices.length ? selectedChoices - correctChoices.length : 0;\n\n  const total = correctChoices.length === 0 ? 1 : correctChoices.length;\n  const str = ((correctAnswers - extraAnswers) / total).toFixed(2);\n\n  return str < 0 ? 0 : parseFloat(str);\n};\n\nexport function outcome(config, session, env = {}) {\n  return new Promise((resolve) => {\n    log('outcome...');\n\n    if (!session || isEmpty(session)) {\n      resolve({ score: 0, empty: true });\n    }\n\n    if (session.answers) {\n      const score = getScore(config, session, env);\n      resolve({ score });\n    } else {\n      resolve({ score: 0, empty: true });\n    }\n  });\n}\n\nconst returnShapesCorrect = (shapes) => {\n  let answers = [];\n\n  shapes.forEach((i) => {\n    const { correct, id } = i;\n    if (correct) {\n      answers.push({ id });\n    }\n  });\n  return answers;\n};\n\nexport const createCorrectResponseSession = (question, env) => {\n  return new Promise((resolve) => {\n    if (env.mode !== 'evaluate' && env.role === 'instructor') {\n      const { shapes: { rectangles = [], circles = [], polygons = {} } = {} } = question;\n\n      const rectangleCorrect = returnShapesCorrect(rectangles);\n      const polygonsCorrect = returnShapesCorrect(polygons);\n      const circlesCorrect = returnShapesCorrect(circles);\n\n      resolve({\n        answers: [...rectangleCorrect, ...polygonsCorrect, ...circlesCorrect],\n        id: '1',\n      });\n    } else {\n      resolve(null);\n    }\n  });\n};\n\n// remove all html tags\nconst getInnerText = (html) => (html || '').replaceAll(/<[^>]*>/g, '');\n\n// remove all html tags except img and iframe\nconst getContent = (html) => (html || '').replace(/(<(?!img|iframe)([^>]+)>)/gi, '');\n\nexport const validate = (model = {}, config = {}) => {\n  const { shapes } = model;\n  const { minShapes = 2, maxShapes, maxSelections } = config;\n  const errors = {};\n\n  ['teacherInstructions', 'prompt', 'rationale'].forEach((field) => {\n    if (config[field]?.required && !getContent(model[field])) {\n      errors[field] = 'This field is required.';\n    }\n  });\n\n  const allShapes = Object.values(shapes || {}).reduce((acc, shape) => [...acc, ...shape], []);\n\n  const nbOfSelections = (allShapes || []).reduce((acc, shape) => (shape.correct ? acc + 1 : acc), 0);\n\n  const nbOfShapes = (allShapes || []).length;\n\n  if (nbOfShapes < minShapes) {\n    errors.shapes = `There should be at least ${minShapes} shapes defined.`;\n  } else if (nbOfShapes > maxShapes) {\n    errors.shapes = `No more than ${maxShapes} shapes should be defined.`;\n  }\n\n  if (nbOfSelections < 1) {\n    errors.selections = 'There should be at least 1 shape selected.';\n  } else if (nbOfSelections > maxSelections) {\n    errors.selections = `No more than ${maxSelections} shapes should be selected.`;\n  }\n\n  return errors;\n};\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","defaults","model","session","env","normalizedQuestion","imageUrl","dimensions","hotspotColor","hoverOutlineColor","selectedHotspotColor","multipleCorrect","outlineColor","partialScoring","prompt","shapes","language","rectangles","polygons","circles","Promise","resolve","out","disabled","mode","map","index","rectProps","polyProps","circleProps","responseCorrect","undefined","role","rationale","rationaleEnabled","teacherInstructions","teacherInstructionsEnabled","promptEnabled","strokeWidth","createDefaultModel","getScore","config","answers","partialScoringEnabled","enabled","correctAnswers","selectedChoices","choices","correctChoices","filter","choice","correct","forEach","shape","selected","answer","id","correctlySelected","extraAnswers","length","total","str","toFixed","parseFloat","outcome","score","empty","returnShapesCorrect","i","push","createCorrectResponseSession","rectangleCorrect","polygonsCorrect","circlesCorrect","getInnerText","html","replaceAll","getContent","replace","validate","minShapes","maxShapes","maxSelections","errors","field","required","allShapes","Object","values","reduce","acc","nbOfSelections","nbOfShapes","selections"],"mappings":"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","sourcesContent":["import debug from 'debug';\nimport isEmpty from 'lodash/isEmpty';\nimport { partialScoring } from '@pie-lib/pie-toolbox/controller-utils';\n\nimport { isResponseCorrect } from './utils';\n\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:hotspot:controller');\n\nexport const normalize = (question) => ({\n  ...defaults,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    dimensions,\n    hotspotColor,\n    hoverOutlineColor,\n    selectedHotspotColor,\n    multipleCorrect,\n    outlineColor,\n    partialScoring,\n    prompt,\n    shapes,\n    language,\n  } = normalizedQuestion;\n  const { rectangles, polygons, circles } = shapes || {};\n\n  return new Promise((resolve) => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      dimensions,\n      imageUrl,\n      outlineColor,\n      hotspotColor,\n      hoverOutlineColor,\n      selectedHotspotColor,\n      multipleCorrect,\n      partialScoring,\n      language,\n      shapes: {\n        ...shapes,\n        // eslint-disable-next-line no-unused-vars\n        rectangles: (rectangles || []).map(({ index, ...rectProps }) => ({ ...rectProps })),\n        // eslint-disable-next-line no-unused-vars\n        polygons: (polygons || []).map(({ index, ...polyProps }) => ({ ...polyProps })),\n        // eslint-disable-next-line no-unused-vars\n        circles: (circles || []).map(({ index, ...circleProps }) => ({ ...circleProps })),\n      },\n      responseCorrect: env.mode === 'evaluate' ? isResponseCorrect(normalizedQuestion, session) : undefined,\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.rationale = normalizedQuestion.rationaleEnabled ? normalizedQuestion.rationale : null;\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled\n        ? normalizedQuestion.teacherInstructions\n        : null;\n    } else {\n      out.rationale = null;\n      out.teacherInstructions = null;\n    }\n\n    out.prompt = normalizedQuestion.promptEnabled ? prompt : null;\n    out.strokeWidth = normalizedQuestion.strokeWidth;\n\n    // console.log(out);\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise((resolve) => {\n    resolve({\n      ...defaults,\n      ...model,\n    });\n  });\n\nconst getScore = (config, session, env = {}) => {\n  const { answers } = session || {};\n\n  if (!config.shapes || (!config.shapes.rectangles && !config.shapes.polygons && !config.shapes.circles)) {\n    return 0;\n  }\n\n  const { shapes: { rectangles = [], polygons = [], circles = [] } = {} } = config;\n  const partialScoringEnabled = partialScoring.enabled(config, env);\n\n  if (!partialScoringEnabled) {\n    return isResponseCorrect(config, session) ? 1 : 0;\n  }\n\n  let correctAnswers = 0;\n  let selectedChoices = 0;\n\n  const choices = [...rectangles, ...polygons, ...circles];\n\n  const correctChoices = choices.filter((choice) => choice.correct);\n\n  choices.forEach((shape) => {\n    const selected = answers && answers.filter((answer) => answer.id === shape.id)[0];\n    const correctlySelected = shape.correct && selected;\n\n    if (selected) {\n      selectedChoices += 1;\n    }\n\n    if (correctlySelected) {\n      correctAnswers += 1;\n    }\n  });\n\n  const extraAnswers = selectedChoices > correctChoices.length ? selectedChoices - correctChoices.length : 0;\n\n  const total = correctChoices.length === 0 ? 1 : correctChoices.length;\n  const str = ((correctAnswers - extraAnswers) / total).toFixed(2);\n\n  return str < 0 ? 0 : parseFloat(str);\n};\n\nexport function outcome(config, session, env = {}) {\n  return new Promise((resolve) => {\n    log('outcome...');\n\n    if (!session || isEmpty(session)) {\n      resolve({ score: 0, empty: true });\n    }\n\n    if (session.answers) {\n      const score = getScore(config, session, env);\n      resolve({ score });\n    } else {\n      resolve({ score: 0, empty: true });\n    }\n  });\n}\n\nconst returnShapesCorrect = (shapes) => {\n  let answers = [];\n\n  shapes.forEach((i) => {\n    const { correct, id } = i;\n    if (correct) {\n      answers.push({ id });\n    }\n  });\n  return answers;\n};\n\nexport const createCorrectResponseSession = (question, env) => {\n  return new Promise((resolve) => {\n    if (env.mode !== 'evaluate' && env.role === 'instructor') {\n      const { shapes: { rectangles = [], circles = [], polygons = {} } = {} } = question;\n\n      const rectangleCorrect = returnShapesCorrect(rectangles);\n      const polygonsCorrect = returnShapesCorrect(polygons);\n      const circlesCorrect = returnShapesCorrect(circles);\n\n      resolve({\n        answers: [...rectangleCorrect, ...polygonsCorrect, ...circlesCorrect],\n        id: '1',\n      });\n    } else {\n      resolve(null);\n    }\n  });\n};\n\n// remove all html tags\nconst getInnerText = (html) => (html || '').replaceAll(/<[^>]*>/g, '');\n\n// remove all html tags except img and iframe\nconst getContent = (html) => (html || '').replace(/(<(?!img|iframe)([^>]+)>)/gi, '');\n\nexport const validate = (model = {}, config = {}) => {\n  const { shapes } = model;\n  const { minShapes = 2, maxShapes, maxSelections } = config;\n  const errors = {};\n\n  ['teacherInstructions', 'prompt', 'rationale'].forEach((field) => {\n    if (config[field]?.required && !getContent(model[field])) {\n      errors[field] = 'This field is required.';\n    }\n  });\n\n  const allShapes = Object.values(shapes || {}).reduce((acc, shape) => [...acc, ...shape], []);\n\n  const nbOfSelections = (allShapes || []).reduce((acc, shape) => (shape.correct ? acc + 1 : acc), 0);\n\n  const nbOfShapes = (allShapes || []).length;\n\n  if (nbOfShapes < minShapes) {\n    errors.shapes = `There should be at least ${minShapes} shapes defined.`;\n  } else if (nbOfShapes > maxShapes) {\n    errors.shapes = `No more than ${maxShapes} shapes should be defined.`;\n  }\n\n  if (nbOfSelections < 1) {\n    errors.selections = 'There should be at least 1 shape selected.';\n  } else if (nbOfSelections > maxSelections) {\n    errors.selections = `No more than ${maxSelections} shapes should be selected.`;\n  }\n\n  return errors;\n};\n"],"file":"index.js"}

package/controller/src/index.js

@@ -19,6 +19,8 @@ export function model(question, session, env) {
     imageUrl,
     dimensions,
     hotspotColor,
+    hoverOutlineColor,
+    selectedHotspotColor,
     multipleCorrect,
     outlineColor,
     partialScoring,
@@ -36,6 +38,8 @@ export function model(question, session, env) {
       imageUrl,
       outlineColor,
       hotspotColor,
+      hoverOutlineColor,
+      selectedHotspotColor,
       multipleCorrect,
       partialScoring,
       language,

package/lib/hotspot/circle.js

@@ -68,9 +68,17 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
       if (!disabled) {
         document.body.style.cursor = 'pointer';
       }
+
+      _this.setState({
+        hovered: true
+      });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
       document.body.style.cursor = 'default';
+
+      _this.setState({
+        hovered: false
+      });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateOutlineColor", function (isCorrect, markAsCorrect, outlineColor) {
       return markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';
@@ -78,6 +86,9 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOutlineWidth", function (showCorrectEnabled, selected, markAsCorrect, strokeWidth) {
       return markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0;
     });
+    _this.state = {
+      hovered: false
+    };
     return _this;
   }
 
@@ -90,6 +101,7 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
           hotspotColor = _this$props2.hotspotColor,
           isCorrect = _this$props2.isCorrect,
           isEvaluateMode = _this$props2.isEvaluateMode,
+          hoverOutlineColor = _this$props2.hoverOutlineColor,
           outlineColor = _this$props2.outlineColor,
           selected = _this$props2.selected,
           x = _this$props2.x,
@@ -98,7 +110,9 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
           strokeWidth = _this$props2.strokeWidth,
           scale = _this$props2.scale,
           markAsCorrect = _this$props2.markAsCorrect,
+          selectedHotspotColor = _this$props2.selectedHotspotColor,
           showCorrectEnabled = _this$props2.showCorrectEnabled;
+      var hovered = this.state.hovered;
       var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor) : outlineColor;
       var outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
       var iconX = x - 10;
@@ -125,15 +139,22 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
         scaleX: scale,
         scaleY: scale
-      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
+      }, hoverOutlineColor && hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
+        radius: radius,
+        x: x,
+        y: y,
+        stroke: hoverOutlineColor,
+        strokeWidth: 2,
+        listening: false
+      }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
         classes: classes.base,
         radius: radius,
-        fill: hotspotColor,
+        fill: selected ? selectedHotspotColor : hotspotColor,
         onClick: this.handleClick,
         onTap: this.handleClick,
         draggable: false,
-        stroke: outlineColorParsed,
-        strokeWidth: outlineWidth,
+        stroke: hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed,
+        strokeWidth: !(hovered && hoverOutlineColor) ? outlineWidth : 0,
         onMouseLeave: this.handleMouseLeave,
         onMouseEnter: this.handleMouseEnter,
         x: x,
@@ -167,6 +188,7 @@ CircleComponent.propTypes = {
   isCorrect: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
   isEvaluateMode: _propTypes["default"].bool.isRequired,
   disabled: _propTypes["default"].bool.isRequired,
+  hoverOutlineColor: _propTypes["default"].string,
   onClick: _propTypes["default"].func.isRequired,
   outlineColor: _propTypes["default"].string.isRequired,
   selected: _propTypes["default"].bool.isRequired,
@@ -175,6 +197,7 @@ CircleComponent.propTypes = {
   evaluateText: _propTypes["default"].string,
   strokeWidth: _propTypes["default"].number,
   scale: _propTypes["default"].number,
+  selectedHotspotColor: _propTypes["default"].string,
   markAsCorrect: _propTypes["default"].bool.isRequired,
   showCorrectEnabled: _propTypes["default"].bool.isRequired
 };

package/lib/hotspot/circle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/circle.jsx"],"names":["CircleComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","radius","hotspotColor","isEvaluateMode","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass CircleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      radius,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled,\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = x - 10;\n    const iconY = y - 10; // Adjust position for the icon\n\n    let iconSrc;\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        <Circle\n          classes={classes.base}\n          radius={radius}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nCircleComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  radius: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  isEvaluateMode: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nCircleComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(CircleComponent);\n"],"file":"circle.js"}
+{"version":3,"sources":["../../src/hotspot/circle.jsx"],"names":["CircleComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","radius","hotspotColor","isEvaluateMode","hoverOutlineColor","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass CircleComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      radius,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      selectedHotspotColor,\n      showCorrectEnabled,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = x - 10;\n    const iconY = y - 10; // Adjust position for the icon\n\n    let iconSrc;\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        {hoverOutlineColor && hovered && (\n          <Circle radius={radius} x={x} y={y} stroke={hoverOutlineColor} strokeWidth={2} listening={false} />\n        )}\n        <Circle\n          classes={classes.base}\n          radius={radius}\n          fill={selected ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}\n          strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nCircleComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  radius: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  isEvaluateMode: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  selectedHotspotColor: PropTypes.string,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nCircleComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(CircleComponent);\n"],"file":"circle.js"}

package/lib/hotspot/container.js

@@ -97,6 +97,8 @@ var Container = /*#__PURE__*/function (_React$Component) {
           heightProp = _this$props$dimension.height,
           disabled = _this$props.disabled,
           hotspotColor = _this$props.hotspotColor,
+          hoverOutlineColor = _this$props.hoverOutlineColor,
+          selectedHotspotColor = _this$props.selectedHotspotColor,
           imageUrl = _this$props.imageUrl,
           isEvaluateMode = _this$props.isEvaluateMode,
           outlineColor = _this$props.outlineColor,
@@ -152,6 +154,8 @@ var Container = /*#__PURE__*/function (_React$Component) {
           selected: selected,
           height: shape.height,
           hotspotColor: hotspotColor,
+          hoverOutlineColor: hoverOutlineColor,
+          selectedHotspotColor: selectedHotspotColor,
           id: shape.id,
           key: shape.id,
           onClick: onSelectChoice,
@@ -184,6 +188,8 @@ var Container = /*#__PURE__*/function (_React$Component) {
           points: polygon.points,
           strokeWidth: strokeWidth,
           markAsCorrect: markAsCorrect,
+          selectedHotspotColor: selectedHotspotColor,
+          hoverOutlineColor: hoverOutlineColor,
           showCorrectEnabled: showCorrect
         });
       }), circles.map(function (shape) {
@@ -210,6 +216,8 @@ var Container = /*#__PURE__*/function (_React$Component) {
           y: shape.y,
           strokeWidth: strokeWidth,
           markAsCorrect: markAsCorrect,
+          selectedHotspotColor: selectedHotspotColor,
+          hoverOutlineColor: hoverOutlineColor,
           showCorrectEnabled: showCorrect
         });
       }))));
@@ -262,10 +270,12 @@ Container.propTypes = {
   dimensions: _propTypes["default"].object.isRequired,
   disabled: _propTypes["default"].bool.isRequired,
   hotspotColor: _propTypes["default"].string.isRequired,
+  hoverOutlineColor: _propTypes["default"].string,
   imageUrl: _propTypes["default"].string.isRequired,
   isEvaluateMode: _propTypes["default"].bool.isRequired,
   onSelectChoice: _propTypes["default"].func.isRequired,
   outlineColor: _propTypes["default"].string.isRequired,
+  selectedHotspotColor: _propTypes["default"].string,
   session: _propTypes["default"].object.isRequired,
   shapes: _propTypes["default"].object.isRequired,
   strokeWidth: _propTypes["default"].number,

package/lib/hotspot/container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/container.jsx"],"names":["Container","isCorrect","isChecked","selected","shape","selectedShape","props","session","answers","filter","answer","id","classes","dimensions","withProp","width","heightProp","height","disabled","hotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","circles","SCALE","scale","strokeWidth","showCorrect","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","markAsCorrect","x","y","polygon","points","radius","React","Component","styles","theme","marginTop","spacing","unit","marginBottom","position","background","palette","common","white","border","alignItems","display","justifyContent","left","top","resize","borderBottom","color","borderRight","bottom","cursor","right","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\nimport Circle from './circle';\n\nexport class Container extends React.Component {\n  isSelected(shape) {\n    const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];\n    return !!selectedShape;\n  }\n\n  correctness = (isCorrect, isChecked) => (isCorrect ? isChecked : !isChecked);\n\n  getEvaluateText = (isCorrect, selected) => {\n    if (selected && isCorrect) {\n      return 'Correctly\\nselected';\n    }\n\n    if (selected && !isCorrect) {\n      return 'Should not have\\nbeen selected';\n    }\n\n    if (!selected && isCorrect) {\n      return 'Should have\\nbeen selected';\n    }\n\n    return null;\n  };\n\n  render() {\n    const {\n      classes,\n      dimensions: { width: withProp, height: heightProp },\n      disabled,\n      hotspotColor,\n      imageUrl,\n      isEvaluateMode,\n      outlineColor,\n      onSelectChoice,\n      shapes: { rectangles = [], polygons = [], circles = [] },\n      scale: SCALE,\n      strokeWidth,\n      showCorrect,\n    } = this.props;\n\n    const width = withProp * SCALE;\n    const height = heightProp * SCALE;\n\n    return (\n      <div className={classes.base} style={{ padding: strokeWidth / 2 }}>\n        {imageUrl ? (\n          <div className={classes.imageContainer}>\n            <img\n              alt=\"hotspot-image\"\n              className={classes.image}\n              height=\"auto\"\n              src={imageUrl}\n              style={{ width, height, maxWidth: width, maxHeight: height }}\n            />\n          </div>\n        ) : null}\n\n        <Stage\n          className={classes.stage}\n          height={height + strokeWidth}\n          width={width + strokeWidth}\n          x={strokeWidth / 2}\n          y={strokeWidth / 2}\n        >\n          <Layer>\n            {rectangles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Rectangle\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {polygons.map((polygon) => {\n              const selected = this.isSelected(polygon);\n              const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);\n\n              return (\n                <Polygon\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={!!isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  hotspotColor={hotspotColor}\n                  id={polygon.id}\n                  key={polygon.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  points={polygon.points}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {circles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Circle\n                  classes={classes}\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  radius={shape.radius}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    position: 'relative',\n    background: theme.palette.common.white,\n    border: `${theme.spacing.unit}px solid ${theme.palette.common.white}`,\n    width: 'fit-content',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n  resize: {\n    borderBottom: `1px solid ${color.disabled()}`,\n    borderRight: `1px solid ${color.disabled()}`,\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  session: PropTypes.object.isRequired,\n  shapes: PropTypes.object.isRequired,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  showCorrect: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  scale: 1,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
+{"version":3,"sources":["../../src/hotspot/container.jsx"],"names":["Container","isCorrect","isChecked","selected","shape","selectedShape","props","session","answers","filter","answer","id","classes","dimensions","withProp","width","heightProp","height","disabled","hotspotColor","hoverOutlineColor","selectedHotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","circles","SCALE","scale","strokeWidth","showCorrect","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","markAsCorrect","x","y","polygon","points","radius","React","Component","styles","theme","marginTop","spacing","unit","marginBottom","position","background","palette","common","white","border","alignItems","display","justifyContent","left","top","resize","borderBottom","color","borderRight","bottom","cursor","right","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\nimport Circle from './circle';\n\nexport class Container extends React.Component {\n  isSelected(shape) {\n    const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];\n    return !!selectedShape;\n  }\n\n  correctness = (isCorrect, isChecked) => (isCorrect ? isChecked : !isChecked);\n\n  getEvaluateText = (isCorrect, selected) => {\n    if (selected && isCorrect) {\n      return 'Correctly\\nselected';\n    }\n\n    if (selected && !isCorrect) {\n      return 'Should not have\\nbeen selected';\n    }\n\n    if (!selected && isCorrect) {\n      return 'Should have\\nbeen selected';\n    }\n\n    return null;\n  };\n\n  render() {\n    const {\n      classes,\n      dimensions: { width: withProp, height: heightProp },\n      disabled,\n      hotspotColor,\n      hoverOutlineColor,\n      selectedHotspotColor,\n      imageUrl,\n      isEvaluateMode,\n      outlineColor,\n      onSelectChoice,\n      shapes: { rectangles = [], polygons = [], circles = [] },\n      scale: SCALE,\n      strokeWidth,\n      showCorrect,\n    } = this.props;\n\n    const width = withProp * SCALE;\n    const height = heightProp * SCALE;\n\n    return (\n      <div className={classes.base} style={{ padding: strokeWidth / 2 }}>\n        {imageUrl ? (\n          <div className={classes.imageContainer}>\n            <img\n              alt=\"hotspot-image\"\n              className={classes.image}\n              height=\"auto\"\n              src={imageUrl}\n              style={{ width, height, maxWidth: width, maxHeight: height }}\n            />\n          </div>\n        ) : null}\n\n        <Stage\n          className={classes.stage}\n          height={height + strokeWidth}\n          width={width + strokeWidth}\n          x={strokeWidth / 2}\n          y={strokeWidth / 2}\n        >\n          <Layer>\n            {rectangles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Rectangle\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  selectedHotspotColor={selectedHotspotColor}\n                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {polygons.map((polygon) => {\n              const selected = this.isSelected(polygon);\n              const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);\n\n              return (\n                <Polygon\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={!!isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  hotspotColor={hotspotColor}\n                  id={polygon.id}\n                  key={polygon.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  points={polygon.points}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  selectedHotspotColor={selectedHotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {circles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Circle\n                  classes={classes}\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  radius={shape.radius}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  selectedHotspotColor={selectedHotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    position: 'relative',\n    background: theme.palette.common.white,\n    border: `${theme.spacing.unit}px solid ${theme.palette.common.white}`,\n    width: 'fit-content',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n  resize: {\n    borderBottom: `1px solid ${color.disabled()}`,\n    borderRight: `1px solid ${color.disabled()}`,\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  imageUrl: PropTypes.string.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selectedHotspotColor: PropTypes.string,\n  session: PropTypes.object.isRequired,\n  shapes: PropTypes.object.isRequired,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  showCorrect: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  scale: 1,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}

package/lib/hotspot/index.js

@@ -120,6 +120,8 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
           shapes = _this$props$model.shapes,
           outlineColor = _this$props$model.outlineColor,
           hotspotColor = _this$props$model.hotspotColor,
+          hoverOutlineColor = _this$props$model.hoverOutlineColor,
+          selectedHotspotColor = _this$props$model.selectedHotspotColor,
           dimensions = _this$props$model.dimensions,
           rationale = _this$props$model.rationale,
           teacherInstructions = _this$props$model.teacherInstructions,
@@ -156,6 +158,8 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
         dimensions: dimensions,
         imageUrl: imageUrl,
         hotspotColor: hotspotColor,
+        hoverOutlineColor: hoverOutlineColor,
+        selectedHotspotColor: selectedHotspotColor,
         multipleCorrect: multipleCorrect,
         outlineColor: outlineColor,
         onSelectChoice: onSelectChoice,

package/lib/hotspot/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","main","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      observer: null,\n      scale: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer?.disconnect();\n  }\n\n  onToggle = () => {\n    const { showCorrect } = this.state;\n    this.setState({ showCorrect: !showCorrect });\n  };\n\n  render() {\n    const {\n      session,\n      model: {\n        disabled,\n        imageUrl,\n        prompt,\n        mode,\n        multipleCorrect,\n        shapes,\n        outlineColor,\n        hotspotColor,\n        dimensions,\n        rationale,\n        teacherInstructions,\n        strokeWidth,\n        responseCorrect,\n        language,\n      },\n      onSelectChoice,\n      classes,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <div className={classes.main}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt className=\"prompt\" prompt={prompt} />}\n\n        {showCorrectAnswerToggle && (\n          <CorrectAnswerToggle\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.onToggle.bind(this)}\n            language={language}\n          />\n        )}\n\n        {imageUrl ? (\n          <Container\n            isEvaluateMode={isEvaluateMode}\n            session={session}\n            dimensions={dimensions}\n            imageUrl={imageUrl}\n            hotspotColor={hotspotColor}\n            multipleCorrect={multipleCorrect}\n            outlineColor={outlineColor}\n            onSelectChoice={onSelectChoice}\n            shapes={shapes}\n            disabled={disabled}\n            strokeWidth={strokeWidth}\n            scale={this.state.scale}\n            showCorrect={showCorrect}\n          />\n        ) : null}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  prompt: {\n    fontSize: 'inherit',\n  },\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","hoverOutlineColor","selectedHotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","main","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      observer: null,\n      scale: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer?.disconnect();\n  }\n\n  onToggle = () => {\n    const { showCorrect } = this.state;\n    this.setState({ showCorrect: !showCorrect });\n  };\n\n  render() {\n    const {\n      session,\n      model: {\n        disabled,\n        imageUrl,\n        prompt,\n        mode,\n        multipleCorrect,\n        shapes,\n        outlineColor,\n        hotspotColor,\n        hoverOutlineColor,\n        selectedHotspotColor,\n        dimensions,\n        rationale,\n        teacherInstructions,\n        strokeWidth,\n        responseCorrect,\n        language,\n      },\n      onSelectChoice,\n      classes,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <div className={classes.main}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt className=\"prompt\" prompt={prompt} />}\n\n        {showCorrectAnswerToggle && (\n          <CorrectAnswerToggle\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.onToggle.bind(this)}\n            language={language}\n          />\n        )}\n\n        {imageUrl ? (\n          <Container\n            isEvaluateMode={isEvaluateMode}\n            session={session}\n            dimensions={dimensions}\n            imageUrl={imageUrl}\n            hotspotColor={hotspotColor}\n            hoverOutlineColor={hoverOutlineColor}\n            selectedHotspotColor={selectedHotspotColor}\n            multipleCorrect={multipleCorrect}\n            outlineColor={outlineColor}\n            onSelectChoice={onSelectChoice}\n            shapes={shapes}\n            disabled={disabled}\n            strokeWidth={strokeWidth}\n            scale={this.state.scale}\n            showCorrect={showCorrect}\n          />\n        ) : null}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  prompt: {\n    fontSize: 'inherit',\n  },\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}

package/lib/hotspot/polygon.js

@@ -93,9 +93,17 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
       if (!disabled) {
         document.body.style.cursor = 'pointer';
       }
+
+      _this.setState({
+        hovered: true
+      });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
       document.body.style.cursor = 'default';
+
+      _this.setState({
+        hovered: false
+      });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateOutlineColor", function (isCorrect, markAsCorrect, outlineColor) {
       return markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';
@@ -103,6 +111,9 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOutlineWidth", function (showCorrectEnabled, selected, markAsCorrect, strokeWidth) {
       return markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0;
     });
+    _this.state = {
+      hovered: false
+    };
     return _this;
   }
 
@@ -114,6 +125,7 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
           hotspotColor = _this$props2.hotspotColor,
           isCorrect = _this$props2.isCorrect,
           isEvaluateMode = _this$props2.isEvaluateMode,
+          hoverOutlineColor = _this$props2.hoverOutlineColor,
           outlineColor = _this$props2.outlineColor,
           selected = _this$props2.selected,
           points = _this$props2.points,
@@ -121,7 +133,9 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
           strokeWidth = _this$props2.strokeWidth,
           scale = _this$props2.scale,
           markAsCorrect = _this$props2.markAsCorrect,
+          selectedHotspotColor = _this$props2.selectedHotspotColor,
           showCorrectEnabled = _this$props2.showCorrectEnabled;
+      var hovered = this.state.hovered;
       var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor) : outlineColor;
       var outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
       var pointsParsed = this.parsePointsForKonva(points);
@@ -163,16 +177,23 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
         scaleX: scale,
         scaleY: scale
-      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
+      }, hoverOutlineColor && hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
+        closed: true,
+        draggable: false,
+        points: pointsParsed,
+        stroke: hoverOutlineColor,
+        strokeWidth: 2,
+        listening: false
+      }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
         points: pointsParsed,
         closed: true,
         classes: classes.base,
-        fill: hotspotColor,
+        fill: selected ? selectedHotspotColor : hotspotColor,
         onClick: this.handleClick,
         onTap: this.handleClick,
         draggable: false,
-        stroke: outlineColorParsed,
-        strokeWidth: outlineWidth,
+        stroke: hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed,
+        strokeWidth: !(hovered && hoverOutlineColor) ? outlineWidth : 0,
         onMouseLeave: this.handleMouseLeave,
         onMouseEnter: this.handleMouseEnter
       }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_icons.ImageComponent, {
@@ -202,12 +223,14 @@ PolygonComponent.propTypes = {
   id: _propTypes["default"].string.isRequired,
   isCorrect: _propTypes["default"].bool.isRequired,
   isEvaluateMode: _propTypes["default"].bool.isRequired,
+  hoverOutlineColor: _propTypes["default"].string,
   disabled: _propTypes["default"].bool.isRequired,
   onClick: _propTypes["default"].func.isRequired,
   outlineColor: _propTypes["default"].string.isRequired,
   points: _propTypes["default"].array.isRequired,
   selected: _propTypes["default"].bool.isRequired,
   evaluateText: _propTypes["default"].string,
+  selectedHotspotColor: _propTypes["default"].string,
   strokeWidth: _propTypes["default"].number,
   scale: _propTypes["default"].number,
   markAsCorrect: _propTypes["default"].bool.isRequired,

package/lib/hotspot/polygon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/polygon.jsx"],"names":["PolygonComponent","props","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","hotspotColor","isEvaluateMode","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","string","bool","func","array","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  getPolygonCenter = (points) => {\n    const x = points.map(({ x }) => x);\n    const y = points.map(({ y }) => y);\n    const minX = Math.min.apply(null, x);\n    const maxX = Math.max.apply(null, x);\n    const minY = Math.min.apply(null, y);\n    const maxY = Math.max.apply(null, y);\n    return [(minX + maxX) / 2, (minY + maxY) / 2];\n  };\n\n  parsePointsForKonva = (points) => {\n    const parsedPoints = [];\n    points.forEach(({ x, y }) => {\n      parsedPoints.push(x);\n      parsedPoints.push(y);\n    });\n    return parsedPoints;\n  };\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      points,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled,\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const pointsParsed = this.parsePointsForKonva(points);\n    const center = this.getPolygonCenter(points);\n    const iconX = center[0];\n    const iconY = center[1];\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        <Line\n          points={pointsParsed}\n          closed={true}\n          classes={classes.base}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nPolygonComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.bool.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.array.isRequired,\n  selected: PropTypes.bool.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(PolygonComponent);\n"],"file":"polygon.js"}
+{"version":3,"sources":["../../src/hotspot/polygon.jsx"],"names":["PolygonComponent","props","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","hotspotColor","isEvaluateMode","hoverOutlineColor","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","string","bool","func","array","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  getPolygonCenter = (points) => {\n    const x = points.map(({ x }) => x);\n    const y = points.map(({ y }) => y);\n    const minX = Math.min.apply(null, x);\n    const maxX = Math.max.apply(null, x);\n    const minY = Math.min.apply(null, y);\n    const maxY = Math.max.apply(null, y);\n    return [(minX + maxX) / 2, (minY + maxY) / 2];\n  };\n\n  parsePointsForKonva = (points) => {\n    const parsedPoints = [];\n    points.forEach(({ x, y }) => {\n      parsedPoints.push(x);\n      parsedPoints.push(y);\n    });\n    return parsedPoints;\n  };\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      points,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      selectedHotspotColor,\n      showCorrectEnabled,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const pointsParsed = this.parsePointsForKonva(points);\n    const center = this.getPolygonCenter(points);\n    const iconX = center[0];\n    const iconY = center[1];\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        {hoverOutlineColor && hovered && (\n          <Line\n            closed={true}\n            draggable={false}\n            points={pointsParsed}\n            stroke={hoverOutlineColor}\n            strokeWidth={2}\n            listening={false}\n          />\n        )}\n        <Line\n          points={pointsParsed}\n          closed={true}\n          classes={classes.base}\n          fill={selected ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}\n          strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nPolygonComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.bool.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.array.isRequired,\n  selected: PropTypes.bool.isRequired,\n  evaluateText: PropTypes.string,\n  selectedHotspotColor: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(PolygonComponent);\n"],"file":"polygon.js"}

package/lib/hotspot/rectangle.js

@@ -68,9 +68,17 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
       if (!disabled) {
         document.body.style.cursor = 'pointer';
       }
+
+      _this.setState({
+        hovered: true
+      });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
       document.body.style.cursor = 'default';
+
+      _this.setState({
+        hovered: false
+      });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateOutlineColor", function (isCorrect, markAsCorrect, outlineColor) {
       return markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';
@@ -78,6 +86,9 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOutlineWidth", function (showCorrectEnabled, selected, markAsCorrect, strokeWidth) {
       return markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0;
     });
+    _this.state = {
+      hovered: false
+    };
     return _this;
   }
 
@@ -88,6 +99,8 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
           classes = _this$props2.classes,
           height = _this$props2.height,
           hotspotColor = _this$props2.hotspotColor,
+          hoverOutlineColor = _this$props2.hoverOutlineColor,
+          selectedHotspotColor = _this$props2.selectedHotspotColor,
           isCorrect = _this$props2.isCorrect,
           isEvaluateMode = _this$props2.isEvaluateMode,
           outlineColor = _this$props2.outlineColor,
@@ -136,19 +149,28 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
         }
       }
 
+      var hovered = this.state.hovered;
       return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
         scaleX: scale,
         scaleY: scale
-      }, /*#__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,
         width: width,
         height: height,
-        fill: hotspotColor,
+        fill: selected ? selectedHotspotColor : hotspotColor,
         onClick: this.handleClick,
         onTap: this.handleClick,
         draggable: false,
-        stroke: outlineColorParsed,
-        strokeWidth: outlineWidth,
+        stroke: hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed,
+        strokeWidth: !(hovered && hoverOutlineColor) ? outlineWidth : 0,
         onMouseLeave: this.handleMouseLeave,
         onMouseEnter: this.handleMouseEnter,
         x: x,
@@ -181,6 +203,7 @@ RectComponent.propTypes = {
   id: _propTypes["default"].string.isRequired,
   isCorrect: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
   isEvaluateMode: _propTypes["default"].bool.isRequired,
+  hoverOutlineColor: _propTypes["default"].string,
   disabled: _propTypes["default"].bool.isRequired,
   onClick: _propTypes["default"].func.isRequired,
   outlineColor: _propTypes["default"].string.isRequired,
@@ -191,6 +214,7 @@ RectComponent.propTypes = {
   evaluateText: _propTypes["default"].string,
   strokeWidth: _propTypes["default"].number,
   scale: _propTypes["default"].number,
+  selectedHotspotColor: _propTypes["default"].string,
   markAsCorrect: _propTypes["default"].bool.isRequired,
   showCorrectEnabled: _propTypes["default"].bool.isRequired
 };

package/lib/hotspot/rectangle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","height","hotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,a;;;;;AACJ,yBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,oGAIL,UAACC,CAAD,EAAO;AACnB,wBAA4C,MAAKD,KAAjD;AAAA,UAAQE,OAAR,eAAQA,OAAR;AAAA,UAAiBC,EAAjB,eAAiBA,EAAjB;AAAA,UAAqBC,QAArB,eAAqBA,QAArB;AAAA,UAA+BC,QAA/B,eAA+BA,QAA/B;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbJ,QAAAA,CAAC,CAACK,YAAF,GAAiB,IAAjB;AACAJ,QAAAA,OAAO,CAAC;AAAEC,UAAAA,EAAE,EAAFA,EAAF;AAAMC,UAAAA,QAAQ,EAAE,CAACA;AAAjB,SAAD,CAAP;AACD;AACF,KAXkB;AAAA,yGAaA,YAAM;AACvB,UAAQC,QAAR,GAAqB,MAAKL,KAA1B,CAAQK,QAAR;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbE,QAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;AACD;AACF,KAnBkB;AAAA,yGAqBA,YAAM;AACvBH,MAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;AACD,KAvBkB;AAAA,gHAyBO,UAACC,SAAD,EAAYC,aAAZ,EAA2BC,YAA3B;AAAA,aACxBD,aAAa,GAAG,OAAH,GAAaD,SAAS,GAAGE,YAAH,GAAkB,KAD7B;AAAA,KAzBP;AAAA,wGA4BD,UAACC,kBAAD,EAAqBV,QAArB,EAA+BQ,aAA/B,EAA8CG,WAA9C;AAAA,aAChBH,aAAa,IAAK,CAACA,aAAD,IAAkB,CAACE,kBAAnB,IAAyCV,QAA3D,GAAuEW,WAAvE,GAAqF,CADrE;AAAA,KA5BC;AAAA;AAElB;;;;WA6BD,kBAAS;AACP,yBAgBI,KAAKf,KAhBT;AAAA,UACEgB,OADF,gBACEA,OADF;AAAA,UAEEC,MAFF,gBAEEA,MAFF;AAAA,UAGEC,YAHF,gBAGEA,YAHF;AAAA,UAIEP,SAJF,gBAIEA,SAJF;AAAA,UAKEQ,cALF,gBAKEA,cALF;AAAA,UAMEN,YANF,gBAMEA,YANF;AAAA,UAOET,QAPF,gBAOEA,QAPF;AAAA,UAQEgB,KARF,gBAQEA,KARF;AAAA,UASEC,CATF,gBASEA,CATF;AAAA,UAUEC,CAVF,gBAUEA,CAVF;AAAA,UAWEC,YAXF,gBAWEA,YAXF;AAAA,UAYER,WAZF,gBAYEA,WAZF;AAAA,UAaES,KAbF,gBAaEA,KAbF;AAAA,UAcEZ,aAdF,gBAcEA,aAdF;AAAA,UAeEE,kBAfF,gBAeEA,kBAfF;AAkBA,UAAMW,kBAAkB,GAAGN,cAAc,GACrC,KAAKO,uBAAL,CAA6Bf,SAA7B,EAAwCC,aAAxC,EAAuDC,YAAvD,CADqC,GAErCA,YAFJ;AAIA,UAAMc,YAAY,GAAG,KAAKC,eAAL,CAAqBd,kBAArB,EAAyCV,QAAzC,EAAmDQ,aAAnD,EAAkEG,WAAlE,CAArB;AAEA,UAAMc,KAAK,GAAGR,CAAC,GAAGD,KAAK,GAAG,CAAZ,GAAgB,EAA9B;AACA,UAAMU,KAAK,GAAGR,CAAC,GAAGL,MAAM,GAAG,CAAb,GAAiB,EAA/B,CA1BO,CA4BP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,UAAIc,OAAJ;;AAEA,UAAIjB,kBAAJ,EAAwB;AACtB,YAAKV,QAAQ,IAAIO,SAAb,IAA4B,CAACP,QAAD,IAAa,CAACO,SAA9C,EAA0D;AACxDoB,UAAAA,OAAO,GAAGC,iBAAV;AACD;AACF,OAJD,MAIO;AACL,YAAI5B,QAAJ,EAAc;AACZ,cAAIO,SAAJ,EAAe;AACboB,YAAAA,OAAO,GAAGC,iBAAV;AACD,WAFD,MAEO;AACLD,YAAAA,OAAO,GAAGE,eAAV;AACD;AACF,SAND,MAMO,IAAI,CAACtB,SAAL,EAAgB;AACrBoB,UAAAA,OAAO,GAAGE,eAAV;AACD;AACF;;AAED,0BACE,gCAAC,iBAAD;AAAO,QAAA,MAAM,EAAET,KAAf;AAAsB,QAAA,MAAM,EAAEA;AAA9B,sBACE,gCAAC,gBAAD;AACE,QAAA,OAAO,EAAER,OAAO,CAACkB,IADnB;AAEE,QAAA,KAAK,EAAEd,KAFT;AAGE,QAAA,MAAM,EAAEH,MAHV;AAIE,QAAA,IAAI,EAAEC,YAJR;AAKE,QAAA,OAAO,EAAE,KAAKiB,WALhB;AAME,QAAA,KAAK,EAAE,KAAKA,WANd;AAOE,QAAA,SAAS,EAAE,KAPb;AAQE,QAAA,MAAM,EAAEV,kBARV;AASE,QAAA,WAAW,EAAEE,YATf;AAUE,QAAA,YAAY,EAAE,KAAKS,gBAVrB;AAWE,QAAA,YAAY,EAAE,KAAKC,gBAXrB;AAYE,QAAA,CAAC,EAAEhB,CAZL;AAaE,QAAA,CAAC,EAAEC;AAbL,QADF,EAgBGH,cAAc,IAAIY,OAAlB,gBAA4B,gCAAC,qBAAD;AAAgB,QAAA,GAAG,EAAEA,OAArB;AAA8B,QAAA,CAAC,EAAEF,KAAjC;AAAwC,QAAA,CAAC,EAAEC,KAA3C;AAAkD,QAAA,OAAO,EAAEP;AAA3D,QAA5B,GAA0G,IAhB7G,CADF;AAoBD;;;EAhHyBe,kBAAMC,S;;AAmHlC,IAAMC,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBN,IAAAA,IAAI,EAAE;AACJxB,MAAAA,MAAM,EAAE,SADJ;AAEJ+B,MAAAA,OAAO,EAAE,GAFL;AAGJC,MAAAA,QAAQ,EAAE;AAHN;AADc,GAAP;AAAA,CAAf;;AAQA3C,aAAa,CAAC4C,SAAd,GAA0B;AACxB3B,EAAAA,OAAO,EAAE4B,sBAAUC,MAAV,CAAiBC,UADF;AAExB7B,EAAAA,MAAM,EAAE2B,sBAAUG,MAAV,CAAiBD,UAFD;AAGxB5B,EAAAA,YAAY,EAAE0B,sBAAUI,MAAV,CAAiBF,UAHP;AAIxB3C,EAAAA,EAAE,EAAEyC,sBAAUI,MAAV,CAAiBF,UAJG;AAKxBnC,EAAAA,SAAS,EAAEiC,sBAAUK,SAAV,CAAoB,CAACL,sBAAUM,IAAX,EAAiBN,sBAAUI,MAA3B,CAApB,CALa;AAMxB7B,EAAAA,cAAc,EAAEyB,sBAAUM,IAAV,CAAeJ,UANP;AAOxBzC,EAAAA,QAAQ,EAAEuC,sBAAUM,IAAV,CAAeJ,UAPD;AAQxB5C,EAAAA,OAAO,EAAE0C,sBAAUO,IAAV,CAAeL,UARA;AASxBjC,EAAAA,YAAY,EAAE+B,sBAAUI,MAAV,CAAiBF,UATP;AAUxB1C,EAAAA,QAAQ,EAAEwC,sBAAUM,IAAV,CAAeJ,UAVD;AAWxB1B,EAAAA,KAAK,EAAEwB,sBAAUG,MAAV,CAAiBD,UAXA;AAYxBzB,EAAAA,CAAC,EAAEuB,sBAAUG,MAAV,CAAiBD,UAZI;AAaxBxB,EAAAA,CAAC,EAAEsB,sBAAUG,MAAV,CAAiBD,UAbI;AAcxBvB,EAAAA,YAAY,EAAEqB,sBAAUI,MAdA;AAexBjC,EAAAA,WAAW,EAAE6B,sBAAUG,MAfC;AAgBxBvB,EAAAA,KAAK,EAAEoB,sBAAUG,MAhBO;AAiBxBnC,EAAAA,aAAa,EAAEgC,sBAAUM,IAAV,CAAeJ,UAjBN;AAkBxBhC,EAAAA,kBAAkB,EAAE8B,sBAAUM,IAAV,CAAeJ;AAlBX,CAA1B;AAqBA/C,aAAa,CAACqD,YAAd,GAA6B;AAC3BzC,EAAAA,SAAS,EAAE,KADgB;AAE3BY,EAAAA,YAAY,EAAE,IAFa;AAG3BR,EAAAA,WAAW,EAAE,CAHc;AAI3BS,EAAAA,KAAK,EAAE;AAJoB,CAA7B;;eAOe,wBAAWgB,MAAX,EAAmBzC,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\n  }\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      height,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      width,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled,\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = x + width / 2 - 10;\n    const iconY = y + height / 2 - 10;\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        <Rect\n          classes={classes.base}\n          width={width}\n          height={height}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nRectComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  isEvaluateMode: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"rectangle.js"}
+{"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,a;;;;;AACJ,yBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,oGAOL,UAACC,CAAD,EAAO;AACnB,wBAA4C,MAAKD,KAAjD;AAAA,UAAQE,OAAR,eAAQA,OAAR;AAAA,UAAiBC,EAAjB,eAAiBA,EAAjB;AAAA,UAAqBC,QAArB,eAAqBA,QAArB;AAAA,UAA+BC,QAA/B,eAA+BA,QAA/B;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbJ,QAAAA,CAAC,CAACK,YAAF,GAAiB,IAAjB;AACAJ,QAAAA,OAAO,CAAC;AAAEC,UAAAA,EAAE,EAAFA,EAAF;AAAMC,UAAAA,QAAQ,EAAE,CAACA;AAAjB,SAAD,CAAP;AACD;AACF,KAdkB;AAAA,yGAgBA,YAAM;AACvB,UAAQC,QAAR,GAAqB,MAAKL,KAA1B,CAAQK,QAAR;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbE,QAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;AACD;;AACD,YAAKC,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KAvBkB;AAAA,yGAyBA,YAAM;AACvBL,MAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;;AACA,YAAKC,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KA5BkB;AAAA,gHA8BO,UAACC,SAAD,EAAYC,aAAZ,EAA2BC,YAA3B;AAAA,aACxBD,aAAa,GAAG,OAAH,GAAaD,SAAS,GAAGE,YAAH,GAAkB,KAD7B;AAAA,KA9BP;AAAA,wGAiCD,UAACC,kBAAD,EAAqBZ,QAArB,EAA+BU,aAA/B,EAA8CG,WAA9C;AAAA,aAChBH,aAAa,IAAK,CAACA,aAAD,IAAkB,CAACE,kBAAnB,IAAyCZ,QAA3D,GAAuEa,WAAvE,GAAqF,CADrE;AAAA,KAjCC;AAEjB,UAAKC,KAAL,GAAa;AACXN,MAAAA,OAAO,EAAE;AADE,KAAb;AAFiB;AAKlB;;;;WA+BD,kBAAS;AACP,yBAkBI,KAAKZ,KAlBT;AAAA,UACEmB,OADF,gBACEA,OADF;AAAA,UAEEC,MAFF,gBAEEA,MAFF;AAAA,UAGEC,YAHF,gBAGEA,YAHF;AAAA,UAIEC,iBAJF,gBAIEA,iBAJF;AAAA,UAKEC,oBALF,gBAKEA,oBALF;AAAA,UAMEV,SANF,gBAMEA,SANF;AAAA,UAOEW,cAPF,gBAOEA,cAPF;AAAA,UAQET,YARF,gBAQEA,YARF;AAAA,UASEX,QATF,gBASEA,QATF;AAAA,UAUEqB,KAVF,gBAUEA,KAVF;AAAA,UAWEC,CAXF,gBAWEA,CAXF;AAAA,UAYEC,CAZF,gBAYEA,CAZF;AAAA,UAaEC,YAbF,gBAaEA,YAbF;AAAA,UAcEX,WAdF,gBAcEA,WAdF;AAAA,UAeEY,KAfF,gBAeEA,KAfF;AAAA,UAgBEf,aAhBF,gBAgBEA,aAhBF;AAAA,UAiBEE,kBAjBF,gBAiBEA,kBAjBF;AAoBA,UAAMc,kBAAkB,GAAGN,cAAc,GACrC,KAAKO,uBAAL,CAA6BlB,SAA7B,EAAwCC,aAAxC,EAAuDC,YAAvD,CADqC,GAErCA,YAFJ;AAIA,UAAMiB,YAAY,GAAG,KAAKC,eAAL,CAAqBjB,kBAArB,EAAyCZ,QAAzC,EAAmDU,aAAnD,EAAkEG,WAAlE,CAArB;AAEA,UAAMiB,KAAK,GAAGR,CAAC,GAAGD,KAAK,GAAG,CAAZ,GAAgB,EAA9B;AACA,UAAMU,KAAK,GAAGR,CAAC,GAAGP,MAAM,GAAG,CAAb,GAAiB,EAA/B,CA5BO,CA8BP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,UAAIgB,OAAJ;;AAEA,UAAIpB,kBAAJ,EAAwB;AACtB,YAAKZ,QAAQ,IAAIS,SAAb,IAA4B,CAACT,QAAD,IAAa,CAACS,SAA9C,EAA0D;AACxDuB,UAAAA,OAAO,GAAGC,iBAAV;AACD;AACF,OAJD,MAIO;AACL,YAAIjC,QAAJ,EAAc;AACZ,cAAIS,SAAJ,EAAe;AACbuB,YAAAA,OAAO,GAAGC,iBAAV;AACD,WAFD,MAEO;AACLD,YAAAA,OAAO,GAAGE,eAAV;AACD;AACF,SAND,MAMO,IAAI,CAACzB,SAAL,EAAgB;AACrBuB,UAAAA,OAAO,GAAGE,eAAV;AACD;AACF;;AAED,UAAQ1B,OAAR,GAAoB,KAAKM,KAAzB,CAAQN,OAAR;AAEA,0BACE,gCAAC,iBAAD;AAAO,QAAA,MAAM,EAAEiB,KAAf;AAAsB,QAAA,MAAM,EAAEA;AAA9B,SACGP,iBAAiB,IAAIV,OAArB,iBACC,gCAAC,gBAAD;AACE,QAAA,CAAC,EAAEc,CADL;AAEE,QAAA,CAAC,EAAEC,CAFL;AAGE,QAAA,KAAK,EAAEF,KAHT;AAIE,QAAA,MAAM,EAAEL,MAJV;AAKE,QAAA,MAAM,EAAEE,iBALV;AAME,QAAA,WAAW,EAAE,CANf;AAOE,QAAA,SAAS,EAAE;AAPb,QAFJ,eAYE,gCAAC,gBAAD;AACE,QAAA,OAAO,EAAEH,OAAO,CAACoB,IADnB;AAEE,QAAA,KAAK,EAAEd,KAFT;AAGE,QAAA,MAAM,EAAEL,MAHV;AAIE,QAAA,IAAI,EAAEhB,QAAQ,GAAGmB,oBAAH,GAA0BF,YAJ1C;AAKE,QAAA,OAAO,EAAE,KAAKmB,WALhB;AAME,QAAA,KAAK,EAAE,KAAKA,WANd;AAOE,QAAA,SAAS,EAAE,KAPb;AAQE,QAAA,MAAM,EAAE5B,OAAO,IAAIU,iBAAX,GAA+B,aAA/B,GAA+CQ,kBARzD;AASE,QAAA,WAAW,EAAE,EAAElB,OAAO,IAAIU,iBAAb,IAAkCU,YAAlC,GAAiD,CAThE;AAUE,QAAA,YAAY,EAAE,KAAKS,gBAVrB;AAWE,QAAA,YAAY,EAAE,KAAKC,gBAXrB;AAYE,QAAA,CAAC,EAAEhB,CAZL;AAaE,QAAA,CAAC,EAAEC;AAbL,QAZF,EA2BGH,cAAc,IAAIY,OAAlB,gBAA4B,gCAAC,qBAAD;AAAgB,QAAA,GAAG,EAAEA,OAArB;AAA8B,QAAA,CAAC,EAAEF,KAAjC;AAAwC,QAAA,CAAC,EAAEC,KAA3C;AAAkD,QAAA,OAAO,EAAEP;AAA3D,QAA5B,GAA0G,IA3B7G,CADF;AA+BD;;;EApIyBe,kBAAMC,S;;AAuIlC,IAAMC,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBN,IAAAA,IAAI,EAAE;AACJ7B,MAAAA,MAAM,EAAE,SADJ;AAEJoC,MAAAA,OAAO,EAAE,GAFL;AAGJC,MAAAA,QAAQ,EAAE;AAHN;AADc,GAAP;AAAA,CAAf;;AAQAhD,aAAa,CAACiD,SAAd,GAA0B;AACxB7B,EAAAA,OAAO,EAAE8B,sBAAUC,MAAV,CAAiBC,UADF;AAExB/B,EAAAA,MAAM,EAAE6B,sBAAUG,MAAV,CAAiBD,UAFD;AAGxB9B,EAAAA,YAAY,EAAE4B,sBAAUI,MAAV,CAAiBF,UAHP;AAIxBhD,EAAAA,EAAE,EAAE8C,sBAAUI,MAAV,CAAiBF,UAJG;AAKxBtC,EAAAA,SAAS,EAAEoC,sBAAUK,SAAV,CAAoB,CAACL,sBAAUM,IAAX,EAAiBN,sBAAUI,MAA3B,CAApB,CALa;AAMxB7B,EAAAA,cAAc,EAAEyB,sBAAUM,IAAV,CAAeJ,UANP;AAOxB7B,EAAAA,iBAAiB,EAAE2B,sBAAUI,MAPL;AAQxBhD,EAAAA,QAAQ,EAAE4C,sBAAUM,IAAV,CAAeJ,UARD;AASxBjD,EAAAA,OAAO,EAAE+C,sBAAUO,IAAV,CAAeL,UATA;AAUxBpC,EAAAA,YAAY,EAAEkC,sBAAUI,MAAV,CAAiBF,UAVP;AAWxB/C,EAAAA,QAAQ,EAAE6C,sBAAUM,IAAV,CAAeJ,UAXD;AAYxB1B,EAAAA,KAAK,EAAEwB,sBAAUG,MAAV,CAAiBD,UAZA;AAaxBzB,EAAAA,CAAC,EAAEuB,sBAAUG,MAAV,CAAiBD,UAbI;AAcxBxB,EAAAA,CAAC,EAAEsB,sBAAUG,MAAV,CAAiBD,UAdI;AAexBvB,EAAAA,YAAY,EAAEqB,sBAAUI,MAfA;AAgBxBpC,EAAAA,WAAW,EAAEgC,sBAAUG,MAhBC;AAiBxBvB,EAAAA,KAAK,EAAEoB,sBAAUG,MAjBO;AAkBxB7B,EAAAA,oBAAoB,EAAE0B,sBAAUI,MAlBR;AAmBxBvC,EAAAA,aAAa,EAAEmC,sBAAUM,IAAV,CAAeJ,UAnBN;AAoBxBnC,EAAAA,kBAAkB,EAAEiC,sBAAUM,IAAV,CAAeJ;AApBX,CAA1B;AAuBApD,aAAa,CAAC0D,YAAd,GAA6B;AAC3B5C,EAAAA,SAAS,EAAE,KADgB;AAE3Be,EAAAA,YAAY,EAAE,IAFa;AAG3BX,EAAAA,WAAW,EAAE,CAHc;AAI3BY,EAAAA,KAAK,EAAE;AAJoB,CAA7B;;eAOe,wBAAWgB,MAAX,EAAmB9C,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      height,\n      hotspotColor,\n      hoverOutlineColor,\n      selectedHotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      width,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled,\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = x + width / 2 - 10;\n    const iconY = y + height / 2 - 10;\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    const { hovered } = this.state;\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\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        <Rect\n          classes={classes.base}\n          width={width}\n          height={height}\n          fill={selected ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}\n          strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative',\n  },\n});\n\nRectComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  isEvaluateMode: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  selectedHotspotColor: PropTypes.string,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"rectangle.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "7.0.2-next.14+6eaf92821",
+  "version": "7.0.2-next.19+0c867a113",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "6eaf92821818744066bbee4f680750fff4ccb6e9",
+  "gitHead": "0c867a113dca7c312aaeaf4166ede5171ea1ebd5",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/hotspot/circle.jsx

@@ -8,6 +8,9 @@ import { faCorrect, faWrong } from './icons';
 class CircleComponent extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      hovered: false,
+    };
   }
 
   handleClick = (e) => {
@@ -25,10 +28,12 @@ class CircleComponent extends React.Component {
     if (!disabled) {
       document.body.style.cursor = 'pointer';
     }
+    this.setState({ hovered: true });
   };
 
   handleMouseLeave = () => {
     document.body.style.cursor = 'default';
+    this.setState({ hovered: false });
   };
 
   getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>
@@ -44,6 +49,7 @@ class CircleComponent extends React.Component {
       hotspotColor,
       isCorrect,
       isEvaluateMode,
+      hoverOutlineColor,
       outlineColor,
       selected,
       x,
@@ -52,9 +58,12 @@ class CircleComponent extends React.Component {
       strokeWidth,
       scale,
       markAsCorrect,
+      selectedHotspotColor,
       showCorrectEnabled,
     } = this.props;
 
+    const { hovered } = this.state;
+
     const outlineColorParsed = isEvaluateMode
       ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)
       : outlineColor;
@@ -83,15 +92,18 @@ class CircleComponent extends React.Component {
 
     return (
       <Group scaleX={scale} scaleY={scale}>
+        {hoverOutlineColor && hovered && (
+          <Circle radius={radius} x={x} y={y} stroke={hoverOutlineColor} strokeWidth={2} listening={false} />
+        )}
         <Circle
           classes={classes.base}
           radius={radius}
-          fill={hotspotColor}
+          fill={selected ? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable={false}
-          stroke={outlineColorParsed}
-          strokeWidth={outlineWidth}
+          stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}
+          strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}
           onMouseLeave={this.handleMouseLeave}
           onMouseEnter={this.handleMouseEnter}
           x={x}
@@ -119,6 +131,7 @@ CircleComponent.propTypes = {
   isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   isEvaluateMode: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,
+  hoverOutlineColor: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   selected: PropTypes.bool.isRequired,
@@ -127,6 +140,7 @@ CircleComponent.propTypes = {
   evaluateText: PropTypes.string,
   strokeWidth: PropTypes.number,
   scale: PropTypes.number,
+  selectedHotspotColor: PropTypes.string,
   markAsCorrect: PropTypes.bool.isRequired,
   showCorrectEnabled: PropTypes.bool.isRequired,
 };

package/src/hotspot/container.jsx

@@ -38,6 +38,8 @@ export class Container extends React.Component {
       dimensions: { width: withProp, height: heightProp },
       disabled,
       hotspotColor,
+      hoverOutlineColor,
+      selectedHotspotColor,
       imageUrl,
       isEvaluateMode,
       outlineColor,
@@ -89,6 +91,8 @@ export class Container extends React.Component {
                   selected={selected}
                   height={shape.height}
                   hotspotColor={hotspotColor}
+                  hoverOutlineColor={hoverOutlineColor}
+                  selectedHotspotColor={selectedHotspotColor}
                   id={shape.id}
                   key={shape.id}
                   onClick={onSelectChoice}
@@ -124,6 +128,8 @@ export class Container extends React.Component {
                   points={polygon.points}
                   strokeWidth={strokeWidth}
                   markAsCorrect={markAsCorrect}
+                  selectedHotspotColor={selectedHotspotColor}
+                  hoverOutlineColor={hoverOutlineColor}
                   showCorrectEnabled={showCorrect}
                 />
               );
@@ -153,6 +159,8 @@ export class Container extends React.Component {
                   y={shape.y}
                   strokeWidth={strokeWidth}
                   markAsCorrect={markAsCorrect}
+                  selectedHotspotColor={selectedHotspotColor}
+                  hoverOutlineColor={hoverOutlineColor}
                   showCorrectEnabled={showCorrect}
                 />
               );
@@ -204,10 +212,12 @@ Container.propTypes = {
   dimensions: PropTypes.object.isRequired,
   disabled: PropTypes.bool.isRequired,
   hotspotColor: PropTypes.string.isRequired,
+  hoverOutlineColor: PropTypes.string,
   imageUrl: PropTypes.string.isRequired,
   isEvaluateMode: PropTypes.bool.isRequired,
   onSelectChoice: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
+  selectedHotspotColor: PropTypes.string,
   session: PropTypes.object.isRequired,
   shapes: PropTypes.object.isRequired,
   strokeWidth: PropTypes.number,

package/src/hotspot/index.jsx

@@ -67,6 +67,8 @@ class HotspotComponent extends React.Component {
         shapes,
         outlineColor,
         hotspotColor,
+        hoverOutlineColor,
+        selectedHotspotColor,
         dimensions,
         rationale,
         teacherInstructions,
@@ -110,6 +112,8 @@ class HotspotComponent extends React.Component {
             dimensions={dimensions}
             imageUrl={imageUrl}
             hotspotColor={hotspotColor}
+            hoverOutlineColor={hoverOutlineColor}
+            selectedHotspotColor={selectedHotspotColor}
             multipleCorrect={multipleCorrect}
             outlineColor={outlineColor}
             onSelectChoice={onSelectChoice}

package/src/hotspot/polygon.jsx

@@ -8,6 +8,9 @@ import { faCorrect, faWrong } from './icons';
 class PolygonComponent extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      hovered: false,
+    };
   }
 
   getPolygonCenter = (points) => {
@@ -44,10 +47,12 @@ class PolygonComponent extends React.Component {
     if (!disabled) {
       document.body.style.cursor = 'pointer';
     }
+    this.setState({ hovered: true });
   };
 
   handleMouseLeave = () => {
     document.body.style.cursor = 'default';
+    this.setState({ hovered: false });
   };
 
   getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>
@@ -62,6 +67,7 @@ class PolygonComponent extends React.Component {
       hotspotColor,
       isCorrect,
       isEvaluateMode,
+      hoverOutlineColor,
       outlineColor,
       selected,
       points,
@@ -69,9 +75,12 @@ class PolygonComponent extends React.Component {
       strokeWidth,
       scale,
       markAsCorrect,
+      selectedHotspotColor,
       showCorrectEnabled,
     } = this.props;
 
+    const { hovered } = this.state;
+
     const outlineColorParsed = isEvaluateMode
       ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)
       : outlineColor;
@@ -116,16 +125,26 @@ class PolygonComponent extends React.Component {
 
     return (
       <Group scaleX={scale} scaleY={scale}>
+        {hoverOutlineColor && hovered && (
+          <Line
+            closed={true}
+            draggable={false}
+            points={pointsParsed}
+            stroke={hoverOutlineColor}
+            strokeWidth={2}
+            listening={false}
+          />
+        )}
         <Line
           points={pointsParsed}
           closed={true}
           classes={classes.base}
-          fill={hotspotColor}
+          fill={selected ? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable={false}
-          stroke={outlineColorParsed}
-          strokeWidth={outlineWidth}
+          stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}
+          strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}
           onMouseLeave={this.handleMouseLeave}
           onMouseEnter={this.handleMouseEnter}
         />
@@ -149,12 +168,14 @@ PolygonComponent.propTypes = {
   id: PropTypes.string.isRequired,
   isCorrect: PropTypes.bool.isRequired,
   isEvaluateMode: PropTypes.bool.isRequired,
+  hoverOutlineColor: PropTypes.string,
   disabled: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   points: PropTypes.array.isRequired,
   selected: PropTypes.bool.isRequired,
   evaluateText: PropTypes.string,
+  selectedHotspotColor: PropTypes.string,
   strokeWidth: PropTypes.number,
   scale: PropTypes.number,
   markAsCorrect: PropTypes.bool.isRequired,

package/src/hotspot/rectangle.jsx

@@ -8,6 +8,9 @@ import { faCorrect, faWrong } from './icons';
 class RectComponent extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {
+      hovered: false,
+    };
   }
 
   handleClick = (e) => {
@@ -25,10 +28,12 @@ class RectComponent extends React.Component {
     if (!disabled) {
       document.body.style.cursor = 'pointer';
     }
+    this.setState({ hovered: true });
   };
 
   handleMouseLeave = () => {
     document.body.style.cursor = 'default';
+    this.setState({ hovered: false });
   };
 
   getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>
@@ -42,6 +47,8 @@ class RectComponent extends React.Component {
       classes,
       height,
       hotspotColor,
+      hoverOutlineColor,
+      selectedHotspotColor,
       isCorrect,
       isEvaluateMode,
       outlineColor,
@@ -97,18 +104,31 @@ class RectComponent extends React.Component {
       }
     }
 
+    const { hovered } = this.state;
+
     return (
       <Group scaleX={scale} scaleY={scale}>
+        {hoverOutlineColor && hovered && (
+          <Rect
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            stroke={hoverOutlineColor}
+            strokeWidth={2}
+            listening={false}
+          />
+        )}
         <Rect
           classes={classes.base}
           width={width}
           height={height}
-          fill={hotspotColor}
+          fill={selected ? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable={false}
-          stroke={outlineColorParsed}
-          strokeWidth={outlineWidth}
+          stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}
+          strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}
           onMouseLeave={this.handleMouseLeave}
           onMouseEnter={this.handleMouseEnter}
           x={x}
@@ -135,6 +155,7 @@ RectComponent.propTypes = {
   id: PropTypes.string.isRequired,
   isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   isEvaluateMode: PropTypes.bool.isRequired,
+  hoverOutlineColor: PropTypes.string,
   disabled: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
@@ -145,6 +166,7 @@ RectComponent.propTypes = {
   evaluateText: PropTypes.string,
   strokeWidth: PropTypes.number,
   scale: PropTypes.number,
+  selectedHotspotColor: PropTypes.string,
   markAsCorrect: PropTypes.bool.isRequired,
   showCorrectEnabled: PropTypes.bool.isRequired,
 };