@pie-element/hotspot 11.2.1 → 11.2.2

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.2.0...@pie-element/hotspot@11.2.2) (2026-08-13)
+
+### Bug Fixes
+
+- **hotspot:** render hovered shape on top of other shapes PIE-900 ([23dfd21](https://github.com/pie-framework/pie-elements/commit/23dfd21a8c7b8909f2f494f47945831de79f40cc))
+
 ## [11.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.7...@pie-element/hotspot@11.2.1) (2026-08-11)
 
 ### Bug Fixes

package/configure/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.2.0...@pie-element/hotspot-configure@10.2.2) (2026-08-13)
+
+**Note:** Version bump only for package @pie-element/hotspot-configure
+
 ## [10.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.7...@pie-element/hotspot-configure@10.2.1) (2026-08-11)
 
 ### Features

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "10.2.1",
+  "version": "10.2.2",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -12,8 +12,8 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "13.0.13",
-    "@pie-lib/editable-html-tip-tap": "2.1.11",
+    "@pie-lib/config-ui": "13.0.14",
+    "@pie-lib/editable-html-tip-tap": "2.1.12",
     "debug": "^4.1.1",
     "konva": "8.3.0",
     "lodash-es": "^4.17.23",

package/controller/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.2.0...@pie-element/hotspot-controller@8.2.2) (2026-08-13)
+
+**Note:** Version bump only for package @pie-element/hotspot-controller
+
 ## [8.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.1.2...@pie-element/hotspot-controller@8.2.1) (2026-08-11)
 
 ### Features

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-controller",
   "private": true,
-  "version": "8.2.1",
+  "version": "8.2.2",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/lib/hotspot/circle.js

@@ -14,6 +14,11 @@ var _icons = require("./icons");
 class CircleComponent extends _react.default.Component {
   constructor(props) {
     super(props);
+    (0, _defineProperty2.default)(this, "moveGroupToTop", () => {
+      if (this.groupRef.current) {
+        this.groupRef.current.moveToTop();
+      }
+    });
     (0, _defineProperty2.default)(this, "handleClick", e => {
       const {
         onClick,
@@ -40,6 +45,7 @@ class CircleComponent extends _react.default.Component {
       this.setState({
         hovered: true
       });
+      this.moveGroupToTop();
     });
     (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
       document.body.style.cursor = 'default';
@@ -52,6 +58,18 @@ class CircleComponent extends _react.default.Component {
     this.state = {
       hovered: false
     };
+    this.groupRef = /*#__PURE__*/_react.default.createRef();
+  }
+  componentDidMount() {
+    if (this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
+    if (!prevProps.focused && this.props.focused) {
+      this.moveGroupToTop();
+    }
   }
   render() {
     const {
@@ -98,6 +116,7 @@ class CircleComponent extends _react.default.Component {
     }
     const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
     return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
+      ref: this.groupRef,
       scaleX: scale,
       scaleY: scale,
       onMouseLeave: this.handleMouseLeave,

package/lib/hotspot/circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"circle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","CircleComponent","React","Component","constructor","props","_defineProperty2","default","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","radius","hotspotColor","isEvaluateMode","hoverOutlineColor","focused","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Circle","fill","handleClick","onTap","draggable","stroke","Rect","width","height","listening","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/circle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\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, selector: 'Mouse' });\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      radius,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      focused,\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    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n    return (\n      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Circle\n          radius={radius}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          x={x}\n          y={y}\n        />\n        {useHoveredStyle && (\n          <Rect\n            x={x - radius}\n            y={y - radius}\n            width={radius * 2}\n            height={radius * 2}\n            stroke={hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\n        )}\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nCircleComponent.propTypes = {\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  focused: PropTypes.bool,\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  focused: false,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default CircleComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"circle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","CircleComponent","React","Component","constructor","props","_defineProperty2","default","groupRef","current","moveToTop","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","moveGroupToTop","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","createRef","componentDidMount","focused","componentDidUpdate","prevProps","render","radius","hotspotColor","isEvaluateMode","hoverOutlineColor","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","ref","scaleX","scaleY","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Circle","fill","handleClick","onTap","draggable","stroke","Rect","width","height","listening","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/circle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\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    this.groupRef = React.createRef();\n  }\n\n  componentDidMount() {\n    if (this.props.focused) {\n      this.moveGroupToTop();\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter\n    if (!prevProps.focused && this.props.focused) {\n      this.moveGroupToTop();\n    }\n  }\n\n  moveGroupToTop = () => {\n    if (this.groupRef.current) {\n      this.groupRef.current.moveToTop();\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, selector: 'Mouse' });\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    this.moveGroupToTop();\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      radius,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      focused,\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    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n    return (\n      <Group\n        ref={this.groupRef}\n        scaleX={scale}\n        scaleY={scale}\n        onMouseLeave={this.handleMouseLeave}\n        onMouseEnter={this.handleMouseEnter}\n      >\n        <Circle\n          radius={radius}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          x={x}\n          y={y}\n        />\n        {useHoveredStyle && (\n          <Rect\n            x={x - radius}\n            y={y - radius}\n            width={radius * 2}\n            height={radius * 2}\n            stroke={hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\n        )}\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nCircleComponent.propTypes = {\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  focused: PropTypes.bool,\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  focused: false,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default CircleComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/hotspot/polygon.js

@@ -14,6 +14,11 @@ var _icons = require("./icons");
 class PolygonComponent extends _react.default.Component {
   constructor(props) {
     super(props);
+    (0, _defineProperty2.default)(this, "moveGroupToTop", () => {
+      if (this.groupRef.current) {
+        this.groupRef.current.moveToTop();
+      }
+    });
     (0, _defineProperty2.default)(this, "getPolygonCenter", points => {
       const x = points.map(({
         x
@@ -64,6 +69,7 @@ class PolygonComponent extends _react.default.Component {
       this.setState({
         hovered: true
       });
+      this.moveGroupToTop();
     });
     (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
       document.body.style.cursor = 'default';
@@ -76,6 +82,18 @@ class PolygonComponent extends _react.default.Component {
     this.state = {
       hovered: false
     };
+    this.groupRef = /*#__PURE__*/_react.default.createRef();
+  }
+  componentDidMount() {
+    if (this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
+    if (!prevProps.focused && this.props.focused) {
+      this.moveGroupToTop();
+    }
   }
   render() {
     const {
@@ -147,6 +165,7 @@ class PolygonComponent extends _react.default.Component {
     const rectWidth = maxX - minX;
     const rectHeight = maxY - minY;
     return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
+      ref: this.groupRef,
       scaleX: scale,
       scaleY: scale,
       onMouseEnter: this.handleMouseEnter,

package/lib/hotspot/polygon.js.map

@@ -1 +1 @@
-{"version":3,"file":"polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","PolygonComponent","React","Component","constructor","props","_defineProperty2","default","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","hotspotColor","isEvaluateMode","hoverOutlineColor","focused","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","xValues","filter","_","index","yValues","rectX","rectY","rectWidth","rectHeight","createElement","Group","scaleX","scaleY","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","Line","closed","fill","handleClick","onTap","draggable","stroke","position","Rect","width","height","listening","src","tooltip","propTypes","PropTypes","string","isRequired","bool","func","array","number","defaultProps","_default","exports"],"sources":["../../src/hotspot/polygon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\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, selector: 'Mouse' });\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      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      focused,\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    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n    const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n    const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\n    const minX = Math.min(...xValues);\n    const maxX = Math.max(...xValues);\n    const minY = Math.min(...yValues);\n    const maxY = Math.max(...yValues);\n\n    const rectX = minX;\n    const rectY = minY;\n    const rectWidth = maxX - minX;\n    const rectHeight = maxY - minY;\n\n    return (\n      <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>\n        <Line\n          points={pointsParsed}\n          closed={true}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          cursor=\"pointer\"\n          position=\"relative\"\n        />\n        {useHoveredStyle && (\n          <Rect\n            x={rectX}\n            y={rectY}\n            width={rectWidth}\n            height={rectHeight}\n            stroke={hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\n        )}\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nPolygonComponent.propTypes = {\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  focused: PropTypes.bool,\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  focused: false,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default PolygonComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","PolygonComponent","React","Component","constructor","props","_defineProperty2","default","groupRef","current","moveToTop","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","moveGroupToTop","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","createRef","componentDidMount","focused","componentDidUpdate","prevProps","render","hotspotColor","isEvaluateMode","hoverOutlineColor","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","xValues","filter","_","index","yValues","rectX","rectY","rectWidth","rectHeight","createElement","Group","ref","scaleX","scaleY","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","Line","closed","fill","handleClick","onTap","draggable","stroke","position","Rect","width","height","listening","src","tooltip","propTypes","PropTypes","string","isRequired","bool","func","array","number","defaultProps","_default","exports"],"sources":["../../src/hotspot/polygon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\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    this.groupRef = React.createRef();\n  }\n\n  componentDidMount() {\n    if (this.props.focused) {\n      this.moveGroupToTop();\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter\n    if (!prevProps.focused && this.props.focused) {\n      this.moveGroupToTop();\n    }\n  }\n\n  moveGroupToTop = () => {\n    if (this.groupRef.current) {\n      this.groupRef.current.moveToTop();\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, selector: 'Mouse' });\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    this.moveGroupToTop();\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      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      focused,\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    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n    const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n    const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\n    const minX = Math.min(...xValues);\n    const maxX = Math.max(...xValues);\n    const minY = Math.min(...yValues);\n    const maxY = Math.max(...yValues);\n\n    const rectX = minX;\n    const rectY = minY;\n    const rectWidth = maxX - minX;\n    const rectHeight = maxY - minY;\n\n    return (\n      <Group\n        ref={this.groupRef}\n        scaleX={scale}\n        scaleY={scale}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <Line\n          points={pointsParsed}\n          closed={true}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          cursor=\"pointer\"\n          position=\"relative\"\n        />\n        {useHoveredStyle && (\n          <Rect\n            x={rectX}\n            y={rectY}\n            width={rectWidth}\n            height={rectHeight}\n            stroke={hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\n        )}\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nPolygonComponent.propTypes = {\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  focused: PropTypes.bool,\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  focused: false,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default PolygonComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/hotspot/rectangle.js

@@ -14,6 +14,11 @@ var _icons = require("./icons");
 class RectComponent extends _react.default.Component {
   constructor(props) {
     super(props);
+    (0, _defineProperty2.default)(this, "moveGroupToTop", () => {
+      if (this.groupRef.current) {
+        this.groupRef.current.moveToTop();
+      }
+    });
     (0, _defineProperty2.default)(this, "handleClick", e => {
       const {
         onClick,
@@ -40,6 +45,7 @@ class RectComponent extends _react.default.Component {
       this.setState({
         hovered: true
       });
+      this.moveGroupToTop();
     });
     (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
       document.body.style.cursor = 'default';
@@ -52,6 +58,18 @@ class RectComponent extends _react.default.Component {
     this.state = {
       hovered: false
     };
+    this.groupRef = /*#__PURE__*/_react.default.createRef();
+  }
+  componentDidMount() {
+    if (this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
+    if (!prevProps.focused && this.props.focused) {
+      this.moveGroupToTop();
+    }
   }
   render() {
     const {
@@ -113,6 +131,7 @@ class RectComponent extends _react.default.Component {
     }
     const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
     return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
+      ref: this.groupRef,
       scaleX: scale,
       scaleY: scale,
       onMouseLeave: this.handleMouseLeave,

package/lib/hotspot/rectangle.js.map

@@ -1 +1 @@
-{"version":3,"file":"rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","RectComponent","React","Component","constructor","props","_defineProperty2","default","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","focused","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Rect","fill","handleClick","onTap","draggable","stroke","listening","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\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, selector: 'Mouse' });\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      height,\n      hotspotColor,\n      hoverOutlineColor,\n      selectedHotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      focused,\n      width,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled,\n    } = this.props;\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 + 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 useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n    return (\n      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Rect\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          cursor=\"pointer\"\n        />\n        {useHoveredStyle && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\n        )}\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nRectComponent.propTypes = {\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  focused: PropTypes.bool,\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  focused: false,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default RectComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","RectComponent","React","Component","constructor","props","_defineProperty2","default","groupRef","current","moveToTop","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","moveGroupToTop","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","createRef","componentDidMount","focused","componentDidUpdate","prevProps","render","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","ref","scaleX","scaleY","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Rect","fill","handleClick","onTap","draggable","stroke","listening","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\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    this.groupRef = React.createRef();\n  }\n\n  componentDidMount() {\n    if (this.props.focused) {\n      this.moveGroupToTop();\n    }\n  }\n\n  componentDidUpdate(prevProps) {\n    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter\n    if (!prevProps.focused && this.props.focused) {\n      this.moveGroupToTop();\n    }\n  }\n\n  moveGroupToTop = () => {\n    if (this.groupRef.current) {\n      this.groupRef.current.moveToTop();\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, selector: 'Mouse' });\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    this.moveGroupToTop();\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      height,\n      hotspotColor,\n      hoverOutlineColor,\n      selectedHotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      focused,\n      width,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled,\n    } = this.props;\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 + 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 useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n    return (\n      <Group\n        ref={this.groupRef}\n        scaleX={scale}\n        scaleY={scale}\n        onMouseLeave={this.handleMouseLeave}\n        onMouseEnter={this.handleMouseEnter}\n      >\n        <Rect\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          cursor=\"pointer\"\n        />\n        {useHoveredStyle && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\n        )}\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nRectComponent.propTypes = {\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  focused: PropTypes.bool,\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  focused: false,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default RectComponent;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot",
   "repository": "pie-framework/pie-elements",
-  "version": "11.2.1",
+  "version": "11.2.2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "3da9547e82ab80b9119ef5854e3593c3e040309d",
+  "gitHead": "d43fe1fb43626141b09cdda5292cf5d1f044440c",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/hotspot/circle.jsx

@@ -10,8 +10,28 @@ class CircleComponent extends React.Component {
     this.state = {
       hovered: false,
     };
+    this.groupRef = React.createRef();
   }
 
+  componentDidMount() {
+    if (this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
+    if (!prevProps.focused && this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  moveGroupToTop = () => {
+    if (this.groupRef.current) {
+      this.groupRef.current.moveToTop();
+    }
+  };
+
   handleClick = (e) => {
     const { onClick, id, selected, disabled } = this.props;
 
@@ -28,6 +48,7 @@ class CircleComponent extends React.Component {
       document.body.style.cursor = 'pointer';
     }
     this.setState({ hovered: true });
+    this.moveGroupToTop();
   };
 
   handleMouseLeave = () => {
@@ -92,7 +113,13 @@ class CircleComponent extends React.Component {
     const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
-      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
+      <Group
+        ref={this.groupRef}
+        scaleX={scale}
+        scaleY={scale}
+        onMouseLeave={this.handleMouseLeave}
+        onMouseEnter={this.handleMouseEnter}
+      >
         <Circle
           radius={radius}
           fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}

package/src/hotspot/polygon.jsx

@@ -10,8 +10,28 @@ class PolygonComponent extends React.Component {
     this.state = {
       hovered: false,
     };
+    this.groupRef = React.createRef();
   }
 
+  componentDidMount() {
+    if (this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
+    if (!prevProps.focused && this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  moveGroupToTop = () => {
+    if (this.groupRef.current) {
+      this.groupRef.current.moveToTop();
+    }
+  };
+
   getPolygonCenter = (points) => {
     const x = points.map(({ x }) => x);
     const y = points.map(({ y }) => y);
@@ -47,6 +67,7 @@ class PolygonComponent extends React.Component {
       document.body.style.cursor = 'pointer';
     }
     this.setState({ hovered: true });
+    this.moveGroupToTop();
   };
 
   handleMouseLeave = () => {
@@ -137,7 +158,13 @@ class PolygonComponent extends React.Component {
     const rectHeight = maxY - minY;
 
     return (
-      <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+      <Group
+        ref={this.groupRef}
+        scaleX={scale}
+        scaleY={scale}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+      >
         <Line
           points={pointsParsed}
           closed={true}

package/src/hotspot/rectangle.jsx

@@ -10,8 +10,28 @@ class RectComponent extends React.Component {
     this.state = {
       hovered: false,
     };
+    this.groupRef = React.createRef();
   }
 
+  componentDidMount() {
+    if (this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
+    if (!prevProps.focused && this.props.focused) {
+      this.moveGroupToTop();
+    }
+  }
+
+  moveGroupToTop = () => {
+    if (this.groupRef.current) {
+      this.groupRef.current.moveToTop();
+    }
+  };
+
   handleClick = (e) => {
     const { onClick, id, selected, disabled } = this.props;
 
@@ -28,6 +48,7 @@ class RectComponent extends React.Component {
       document.body.style.cursor = 'pointer';
     }
     this.setState({ hovered: true });
+    this.moveGroupToTop();
   };
 
   handleMouseLeave = () => {
@@ -107,7 +128,13 @@ class RectComponent extends React.Component {
     const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
-      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
+      <Group
+        ref={this.groupRef}
+        scaleX={scale}
+        scaleY={scale}
+        onMouseLeave={this.handleMouseLeave}
+        onMouseEnter={this.handleMouseEnter}
+      >
         <Rect
           x={x}
           y={y}