@pie-element/hotspot 11.1.6 → 11.2.0

package/docs/demo/generate.js

@@ -13,6 +13,7 @@ exports.model = (id, element) => ({
     'rgba(254, 241, 96, 0.25)',
     'rgba(0, 0, 0, 0.1)',
   ],
+  // hoverOutlineColor: 'black',
   outlineColor: 'blue',
   outlineList: ['blue', 'red', 'yellow'],
   multipleCorrect: true,
@@ -25,7 +26,8 @@ exports.model = (id, element) => ({
         x: 261,
         y: 44,
         index: 2,
-        correct: true
+        correct: true,
+        // ariaLabel: 'First rectangle',
       },
       {
         id: '4',
@@ -34,8 +36,8 @@ exports.model = (id, element) => ({
         x: 270,
         y: 215.4886474609375,
         index: 3,
-        correct: false
-      }
+        correct: false,
+      },
     ],
     polygons: [
       {
@@ -53,10 +55,11 @@ exports.model = (id, element) => ({
           { x: 109, y: 294 },
           { x: 106, y: 280 },
           { x: 56, y: 193 },
-          { x: 68, y: 139 }
+          { x: 68, y: 139 },
         ],
         index: 1,
-        correct: false
+        correct: false,
+        // ariaLabel: 'First polygon',
       },
       {
         id: '5',
@@ -71,10 +74,10 @@ exports.model = (id, element) => ({
           { x: 564, y: 465 },
           { x: 575, y: 461 },
           { x: 575, y: 438 },
-          { x: 544, y: 367 }
+          { x: 544, y: 367 },
         ],
         index: 4,
-        correct: false
+        correct: false,
       },
       {
         id: '7',
@@ -84,11 +87,11 @@ exports.model = (id, element) => ({
           { x: 556, y: 287 },
           { x: 575, y: 302 },
           { x: 601, y: 280 },
-          { x: 598, y: 246 }
+          { x: 598, y: 246 },
         ],
         index: 6,
-        correct: true
-      }
+        correct: true,
+      },
     ],
     circles: [
       {
@@ -97,7 +100,8 @@ exports.model = (id, element) => ({
         x: 71,
         y: 420,
         index: 1,
-        correct: false
+        correct: false,
+        // ariaLabel: 'First circle',
       },
       {
         id: '6',
@@ -105,14 +109,14 @@ exports.model = (id, element) => ({
         x: 479,
         y: 140,
         index: 5,
-        correct: false
-      }
-    ]
+        correct: false,
+        // ariaLabel: 'Second circle',
+      },
+    ],
   },
   rationale: null,
   teacherInstructions: null,
   toolbarEditorPosition: 'bottom',
-  prompt:
-    '<div>Which state(s) have names beginning in "North"?</div>',
+  prompt: '<div>Which state(s) have names beginning in "North"?</div>',
   rubricEnabled: false,
 });

package/lib/hotspot/circle.js

@@ -62,6 +62,7 @@ class CircleComponent extends _react.default.Component {
       hoverOutlineColor,
       outlineColor,
       selected,
+      focused,
       x,
       y,
       evaluateText,
@@ -95,18 +96,13 @@ class CircleComponent extends _react.default.Component {
         iconSrc = _icons.faWrong;
       }
     }
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
     return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
       scaleX: scale,
-      scaleY: scale
-    }, useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
-      x: x - radius,
-      y: y - radius,
-      width: radius * 2,
-      height: radius * 2,
-      stroke: selected ? 'transparent' : hoverOutlineColor,
-      strokeWidth: strokeWidth
-    }), /*#__PURE__*/_react.default.createElement(_reactKonva.Circle, {
+      scaleY: scale,
+      onMouseLeave: this.handleMouseLeave,
+      onMouseEnter: this.handleMouseEnter
+    }, /*#__PURE__*/_react.default.createElement(_reactKonva.Circle, {
       radius: radius,
       fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
       onClick: this.handleClick,
@@ -114,10 +110,16 @@ class CircleComponent extends _react.default.Component {
       draggable: false,
       stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
       strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
-      onMouseLeave: this.handleMouseLeave,
-      onMouseEnter: this.handleMouseEnter,
       x: x,
       y: y
+    }), useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
+      x: x - radius,
+      y: y - radius,
+      width: radius * 2,
+      height: radius * 2,
+      stroke: hoverOutlineColor,
+      strokeWidth: strokeWidth,
+      listening: false
     }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react.default.createElement(_imageKonvaTooltip.default, {
       src: iconSrc,
       x: iconX,
@@ -133,6 +135,7 @@ CircleComponent.propTypes = {
   isCorrect: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
   isEvaluateMode: _propTypes.default.bool.isRequired,
   disabled: _propTypes.default.bool.isRequired,
+  focused: _propTypes.default.bool,
   hoverOutlineColor: _propTypes.default.string,
   onClick: _propTypes.default.func.isRequired,
   outlineColor: _propTypes.default.string.isRequired,
@@ -149,6 +152,7 @@ CircleComponent.propTypes = {
 CircleComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1
 };

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","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","Rect","width","height","stroke","Circle","fill","handleClick","onTap","draggable","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","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      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 && hoverOutlineColor;\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        {useHoveredStyle && (\n          <Rect\n            x={x - radius}\n            y={y - radius}\n            width={radius * 2}\n            height={radius * 2}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n          />\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          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\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  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 CircleComponent;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,MAAMK,eAAe,SAASC,cAAK,CAACC,SAAS,CAAC;EAC5CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,uBAMAC,CAAC,IAAK;MACnB,MAAM;QAAEC,OAAO;QAAEC,EAAE;QAAEC,QAAQ;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACP,KAAK;MAEtD,IAAI,CAACO,QAAQ,EAAE;QACbJ,CAAC,CAACK,YAAY,GAAG,IAAI;QACrBJ,OAAO,CAAC;UAAEC,EAAE;UAAEC,QAAQ,EAAE,CAACA,QAAQ;UAAEG,QAAQ,EAAE;QAAQ,CAAC,CAAC;MACzD;IACF,CAAC;IAAA,IAAAR,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,MAAM;QAAEK;MAAS,CAAC,GAAG,IAAI,CAACP,KAAK;MAE/B,IAAI,CAACO,QAAQ,EAAE;QACbG,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACxC;MACA,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;IAClC,CAAC;IAAA,IAAAd,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvBQ,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACtC,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAM,CAAC,CAAC;IACnC,CAAC;IAAA,IAAAd,gBAAA,CAAAC,OAAA,mCAEyB,CAACc,SAAS,EAAEC,aAAa,EAAEC,YAAY,KAC/DD,aAAa,GAAG,OAAO,GAAGD,SAAS,GAAGE,YAAY,GAAG,KAAK;IAAA,IAAAjB,gBAAA,CAAAC,OAAA,2BAE1C,CAACiB,kBAAkB,EAAEb,QAAQ,EAAEW,aAAa,EAAEG,WAAW,KACzEH,aAAa,IAAK,CAACA,aAAa,IAAI,CAACE,kBAAkB,IAAIb,QAAS,GAAGc,WAAW,GAAG,CAAC;IAhCtF,IAAI,CAACC,KAAK,GAAG;MACXN,OAAO,EAAE;IACX,CAAC;EACH;EA+BAO,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,MAAM;MACNC,YAAY;MACZR,SAAS;MACTS,cAAc;MACdC,iBAAiB;MACjBR,YAAY;MACZZ,QAAQ;MACRqB,CAAC;MACDC,CAAC;MACDC,YAAY;MACZT,WAAW;MACXU,KAAK;MACLb,aAAa;MACbc,oBAAoB;MACpBZ;IACF,CAAC,GAAG,IAAI,CAACnB,KAAK;IAEd,MAAM;MAAEe;IAAQ,CAAC,GAAG,IAAI,CAACM,KAAK;IAE9B,MAAMW,kBAAkB,GAAGP,cAAc,GACrC,IAAI,CAACQ,uBAAuB,CAACjB,SAAS,EAAEC,aAAa,EAAEC,YAAY,CAAC,GACpEA,YAAY;IAEhB,MAAMgB,YAAY,GAAG,IAAI,CAACC,eAAe,CAAChB,kBAAkB,EAAEb,QAAQ,EAAEW,aAAa,EAAEG,WAAW,CAAC;IAEnG,MAAMgB,KAAK,GAAGT,CAAC,GAAG,EAAE;IACpB,MAAMU,KAAK,GAAGT,CAAC,GAAG,EAAE,CAAC,CAAC;;IAEtB,IAAIU,OAAO;IACX,IAAInB,kBAAkB,EAAE;MACtB,IAAKb,QAAQ,IAAIU,SAAS,IAAM,CAACV,QAAQ,IAAI,CAACU,SAAU,EAAE;QACxDsB,OAAO,GAAGC,gBAAS;MACrB;IACF,CAAC,MAAM;MACL,IAAIjC,QAAQ,EAAE;QACZ,IAAIU,SAAS,EAAE;UACbsB,OAAO,GAAGC,gBAAS;QACrB,CAAC,MAAM;UACLD,OAAO,GAAGE,cAAO;QACnB;MACF,CAAC,MAAM,IAAI,CAACxB,SAAS,EAAE;QACrBsB,OAAO,GAAGE,cAAO;MACnB;IACF;IAEA,MAAMC,eAAe,GAAG1B,OAAO,IAAIW,iBAAiB;IAEpD,oBACErC,MAAA,CAAAa,OAAA,CAAAwC,aAAA,CAACjD,WAAA,CAAAkD,KAAK;MAACC,MAAM,EAAEd,KAAM;MAACe,MAAM,EAAEf;IAAM,GACjCW,eAAe,iBACdpD,MAAA,CAAAa,OAAA,CAAAwC,aAAA,CAACjD,WAAA,CAAAqD,IAAI;MACHnB,CAAC,EAAEA,CAAC,GAAGJ,MAAO;MACdK,CAAC,EAAEA,CAAC,GAAGL,MAAO;MACdwB,KAAK,EAAExB,MAAM,GAAG,CAAE;MAClByB,MAAM,EAAEzB,MAAM,GAAG,CAAE;MACnB0B,MAAM,EAAE3C,QAAQ,GAAG,aAAa,GAAGoB,iBAAkB;MACrDN,WAAW,EAAEA;IAAY,CAC1B,CACF,eACD/B,MAAA,CAAAa,OAAA,CAAAwC,aAAA,CAACjD,WAAA,CAAAyD,MAAM;MACL3B,MAAM,EAAEA,MAAO;MACf4B,IAAI,EAAE7C,QAAQ,IAAIyB,oBAAoB,GAAGA,oBAAoB,GAAGP,YAAa;MAC7EpB,OAAO,EAAE,IAAI,CAACgD,WAAY;MAC1BC,KAAK,EAAE,IAAI,CAACD,WAAY;MACxBE,SAAS,EAAE,KAAM;MACjBL,MAAM,EAAER,eAAe,IAAI,CAACnC,QAAQ,GAAG,aAAa,GAAG0B,kBAAmB;MAC1EZ,WAAW,EAAEqB,eAAe,IAAI,CAACnC,QAAQ,GAAG,CAAC,GAAG4B,YAAa;MAC7DqB,YAAY,EAAE,IAAI,CAACC,gBAAiB;MACpCC,YAAY,EAAE,IAAI,CAACC,gBAAiB;MACpC/B,CAAC,EAAEA,CAAE;MACLC,CAAC,EAAEA;IAAE,CACN,CAAC,EACDH,cAAc,IAAIa,OAAO,gBAAGjD,MAAA,CAAAa,OAAA,CAAAwC,aAAA,CAAChD,kBAAA,CAAAQ,OAAc;MAACyD,GAAG,EAAErB,OAAQ;MAACX,CAAC,EAAES,KAAM;MAACR,CAAC,EAAES,KAAM;MAACuB,OAAO,EAAE/B;IAAa,CAAE,CAAC,GAAG,IACtG,CAAC;EAEZ;AACF;AAEAjC,eAAe,CAACiE,SAAS,GAAG;EAC1BtC,MAAM,EAAEuC,kBAAS,CAACC,MAAM,CAACC,UAAU;EACnCxC,YAAY,EAAEsC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzC3D,EAAE,EAAEyD,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC/BhD,SAAS,EAAE8C,kBAAS,CAACI,SAAS,CAAC,CAACJ,kBAAS,CAACK,IAAI,EAAEL,kBAAS,CAACG,MAAM,CAAC,CAAC;EAClExC,cAAc,EAAEqC,kBAAS,CAACK,IAAI,CAACH,UAAU;EACzCzD,QAAQ,EAAEuD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACnCtC,iBAAiB,EAAEoC,kBAAS,CAACG,MAAM;EACnC7D,OAAO,EAAE0D,kBAAS,CAACM,IAAI,CAACJ,UAAU;EAClC9C,YAAY,EAAE4C,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzC1D,QAAQ,EAAEwD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACnCrC,CAAC,EAAEmC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC9BpC,CAAC,EAAEkC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC9BnC,YAAY,EAAEiC,kBAAS,CAACG,MAAM;EAC9B7C,WAAW,EAAE0C,kBAAS,CAACC,MAAM;EAC7BjC,KAAK,EAAEgC,kBAAS,CAACC,MAAM;EACvBhC,oBAAoB,EAAE+B,kBAAS,CAACG,MAAM;EACtChD,aAAa,EAAE6C,kBAAS,CAACK,IAAI,CAACH,UAAU;EACxC7C,kBAAkB,EAAE2C,kBAAS,CAACK,IAAI,CAACH;AACrC,CAAC;AAEDpE,eAAe,CAACyE,YAAY,GAAG;EAC7BrD,SAAS,EAAE,KAAK;EAChBa,YAAY,EAAE,IAAI;EAClBT,WAAW,EAAE,CAAC;EACdU,KAAK,EAAE;AACT,CAAC;AAAC,IAAAwC,QAAA,GAAAC,OAAA,CAAArE,OAAA,GAEaN,eAAe","ignoreList":[]}
+{"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":[]}

package/lib/hotspot/container.js

@@ -21,8 +21,18 @@ const BaseContainer = (0, _styles.styled)('div')(({
   position: 'relative',
   background: theme.palette.common.white,
   border: `${theme.spacing(1)} solid ${theme.palette.common.white}`,
-  width: 'fit-content'
+  width: 'fit-content',
+  maxWidth: '100%',
+  overflowX: 'auto'
 }));
+const HiddenFocusable = (0, _styles.styled)('span')({
+  position: 'absolute',
+  width: 1,
+  height: 1,
+  overflow: 'hidden',
+  clip: 'rect(0, 0, 0, 0)',
+  whiteSpace: 'nowrap'
+});
 const ImageContainer = (0, _styles.styled)('div')({
   position: 'relative',
   width: 'fit-content'
@@ -38,8 +48,8 @@ const StyledStage = (0, _styles.styled)(_reactKonva.Stage)({
   position: 'absolute'
 });
 class Container extends _react.default.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     (0, _defineProperty2.default)(this, "correctness", (isCorrect, isChecked) => isCorrect ? isChecked : !isChecked);
     (0, _defineProperty2.default)(this, "getEvaluateText", (isCorrect, selected) => {
       if (selected && isCorrect) {
@@ -53,6 +63,62 @@ class Container extends _react.default.Component {
       }
       return null;
     });
+    (0, _defineProperty2.default)(this, "getAllShapesSorted", () => {
+      const {
+        shapes: {
+          rectangles = [],
+          polygons = [],
+          circles = []
+        }
+      } = this.props;
+      const allShapes = [...rectangles.map(s => ({
+        ...s,
+        type: 'rectangle'
+      })), ...polygons.map(s => ({
+        ...s,
+        type: 'polygon'
+      })), ...circles.map(s => ({
+        ...s,
+        type: 'circle'
+      }))];
+      allShapes.sort((a, b) => String(a.id).localeCompare(String(b.id), undefined, {
+        numeric: true
+      }));
+      return allShapes;
+    });
+    (0, _defineProperty2.default)(this, "handleShapeFocus", shapeId => {
+      this.setState({
+        focusedShapeId: shapeId
+      });
+    });
+    (0, _defineProperty2.default)(this, "handleShapeBlur", () => {
+      this.setState({
+        focusedShapeId: null
+      });
+    });
+    (0, _defineProperty2.default)(this, "handleShapeKeyDown", (e, shapeId) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        const {
+          onSelectChoice,
+          disabled
+        } = this.props;
+        if (!disabled) {
+          const shape = this.getAllShapesSorted().find(s => s.id === shapeId);
+          if (shape) {
+            const selected = this.isSelected(shape);
+            onSelectChoice({
+              id: shapeId,
+              selected: !selected,
+              selector: 'Keyboard'
+            });
+          }
+        }
+      }
+    });
+    this.state = {
+      focusedShapeId: null
+    };
   }
   isSelected(shape) {
     const selectedShape = this.props.session.answers.filter(answer => answer.id === shape.id)[0];
@@ -81,8 +147,12 @@ class Container extends _react.default.Component {
       strokeWidth,
       showCorrect
     } = this.props;
+    const {
+      focusedShapeId
+    } = this.state;
     const width = withProp * SCALE;
     const height = heightProp * SCALE;
+    const sortedShapes = this.getAllShapesSorted();
     return /*#__PURE__*/_react.default.createElement(BaseContainer, {
       style: {
         padding: strokeWidth / 2
@@ -127,7 +197,8 @@ class Container extends _react.default.Component {
         y: shape.y,
         strokeWidth: strokeWidth,
         markAsCorrect: markAsCorrect,
-        showCorrectEnabled: showCorrect
+        showCorrectEnabled: showCorrect,
+        focused: focusedShapeId === shape.id
       });
     }), polygons.map(polygon => {
       const selected = this.isSelected(polygon);
@@ -151,7 +222,8 @@ class Container extends _react.default.Component {
         markAsCorrect: markAsCorrect,
         selectedHotspotColor: selectedHotspotColor,
         hoverOutlineColor: hoverOutlineColor,
-        showCorrectEnabled: showCorrect
+        showCorrectEnabled: showCorrect,
+        focused: focusedShapeId === polygon.id
       });
     }), circles.map(shape => {
       const selected = this.isSelected(shape);
@@ -177,9 +249,22 @@ class Container extends _react.default.Component {
         markAsCorrect: markAsCorrect,
         selectedHotspotColor: selectedHotspotColor,
         hoverOutlineColor: hoverOutlineColor,
-        showCorrectEnabled: showCorrect
+        showCorrectEnabled: showCorrect,
+        focused: focusedShapeId === shape.id
+      });
+    }))), sortedShapes.map(shape => {
+      const selected = this.isSelected(shape);
+      return /*#__PURE__*/_react.default.createElement(HiddenFocusable, {
+        key: `focus-${shape.id}`,
+        tabIndex: disabled ? -1 : 0,
+        role: "button",
+        "aria-label": shape.ariaLabel || '',
+        "aria-pressed": selected,
+        onFocus: () => this.handleShapeFocus(shape.id),
+        onBlur: this.handleShapeBlur,
+        onKeyDown: e => this.handleShapeKeyDown(e, shape.id)
       });
-    }))));
+    }));
   }
 }
 exports.Container = Container;

package/lib/hotspot/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_styles","_rectangle","_polygon","_circle","BaseContainer","styled","theme","marginTop","spacing","marginBottom","position","background","palette","common","white","border","width","ImageContainer","Image","alignItems","display","justifyContent","StyledStage","Stage","left","top","Container","React","Component","constructor","args","_defineProperty2","default","isCorrect","isChecked","selected","isSelected","shape","selectedShape","props","session","answers","filter","answer","id","render","dimensions","withProp","height","heightProp","disabled","hotspotColor","hoverOutlineColor","selectedHotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","circles","scale","SCALE","strokeWidth","showCorrect","createElement","style","padding","alt","src","maxWidth","maxHeight","x","y","Layer","map","correctness","correct","undefined","evaluateText","getEvaluateText","markAsCorrect","key","onClick","showCorrectEnabled","polygon","points","radius","exports","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps","_default"],"sources":["../../src/hotspot/container.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { styled } from '@mui/material/styles';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\nimport Circle from './circle';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n  marginTop: theme.spacing(2),\n  marginBottom: theme.spacing(2),\n  position: 'relative',\n  background: theme.palette.common.white,\n  border: `${theme.spacing(1)} solid ${theme.palette.common.white}`,\n  width: 'fit-content',\n}));\n\nconst ImageContainer = styled('div')({\n  position: 'relative',\n  width: 'fit-content',\n});\n\nconst Image = styled('img')({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nconst StyledStage = styled(Stage)({\n  left: 0,\n  top: 0,\n  position: 'absolute',\n});\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      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      <BaseContainer style={{ padding: strokeWidth / 2 }}>\n        {imageUrl ? (\n          <ImageContainer>\n            <Image\n              alt=\"hotspot-image\"\n              height=\"auto\"\n              src={imageUrl}\n              style={{ width, height, maxWidth: width, maxHeight: height }}\n            />\n          </ImageContainer>\n        ) : null}\n\n        <StyledStage\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                  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        </StyledStage>\n      </BaseContainer>\n    );\n  }\n}\n\nContainer.propTypes = {\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 Container;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"container.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_styles","_rectangle","_polygon","_circle","BaseContainer","styled","theme","marginTop","spacing","marginBottom","position","background","palette","common","white","border","width","maxWidth","overflowX","HiddenFocusable","height","overflow","clip","whiteSpace","ImageContainer","Image","alignItems","display","justifyContent","StyledStage","Stage","left","top","Container","React","Component","constructor","props","_defineProperty2","default","isCorrect","isChecked","selected","shapes","rectangles","polygons","circles","allShapes","map","s","type","sort","a","b","String","id","localeCompare","undefined","numeric","shapeId","setState","focusedShapeId","e","key","preventDefault","onSelectChoice","disabled","shape","getAllShapesSorted","find","isSelected","selector","state","selectedShape","session","answers","filter","answer","render","dimensions","withProp","heightProp","hotspotColor","hoverOutlineColor","selectedHotspotColor","imageUrl","isEvaluateMode","outlineColor","scale","SCALE","strokeWidth","showCorrect","sortedShapes","createElement","style","padding","alt","src","maxHeight","x","y","Layer","correctness","correct","evaluateText","getEvaluateText","markAsCorrect","onClick","showCorrectEnabled","focused","polygon","points","radius","tabIndex","role","ariaLabel","onFocus","handleShapeFocus","onBlur","handleShapeBlur","onKeyDown","handleShapeKeyDown","exports","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps","_default"],"sources":["../../src/hotspot/container.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { styled } from '@mui/material/styles';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\nimport Circle from './circle';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n  marginTop: theme.spacing(2),\n  marginBottom: theme.spacing(2),\n  position: 'relative',\n  background: theme.palette.common.white,\n  border: `${theme.spacing(1)} solid ${theme.palette.common.white}`,\n  width: 'fit-content',\n  maxWidth: '100%',\n  overflowX: 'auto',\n}));\n\nconst HiddenFocusable = styled('span')({\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  overflow: 'hidden',\n  clip: 'rect(0, 0, 0, 0)',\n  whiteSpace: 'nowrap',\n});\n\nconst ImageContainer = styled('div')({\n  position: 'relative',\n  width: 'fit-content',\n});\n\nconst Image = styled('img')({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nconst StyledStage = styled(Stage)({\n  left: 0,\n  top: 0,\n  position: 'absolute',\n});\n\nexport class Container extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      focusedShapeId: null,\n    };\n  }\n\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  getAllShapesSorted = () => {\n    const { shapes: { rectangles = [], polygons = [], circles = [] } } = this.props;\n    const allShapes = [\n      ...rectangles.map((s) => ({ ...s, type: 'rectangle' })),\n      ...polygons.map((s) => ({ ...s, type: 'polygon' })),\n      ...circles.map((s) => ({ ...s, type: 'circle' })),\n    ];\n    allShapes.sort((a, b) => String(a.id).localeCompare(String(b.id), undefined, { numeric: true }));\n\n    return allShapes;\n  };\n\n  handleShapeFocus = (shapeId) => {\n    this.setState({ focusedShapeId: shapeId });\n  };\n\n  handleShapeBlur = () => {\n    this.setState({ focusedShapeId: null });\n  };\n\n  handleShapeKeyDown = (e, shapeId) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n\n      const { onSelectChoice, disabled } = this.props;\n\n      if (!disabled) {\n        const shape = this.getAllShapesSorted().find((s) => s.id === shapeId);\n\n        if (shape) {\n          const selected = this.isSelected(shape);\n\n          onSelectChoice({ id: shapeId, selected: !selected, selector: 'Keyboard' });\n        }\n      }\n    }\n  };\n\n  render() {\n    const {\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 { focusedShapeId } = this.state;\n\n    const width = withProp * SCALE;\n    const height = heightProp * SCALE;\n\n    const sortedShapes = this.getAllShapesSorted();\n\n    return (\n      <BaseContainer style={{ padding: strokeWidth / 2 }}>\n        {imageUrl ? (\n          <ImageContainer>\n            <Image\n              alt=\"hotspot-image\"\n              height=\"auto\"\n              src={imageUrl}\n              style={{ width, height, maxWidth: width, maxHeight: height }}\n            />\n          </ImageContainer>\n        ) : null}\n\n        <StyledStage\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                  focused={focusedShapeId === shape.id}\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                  focused={focusedShapeId === polygon.id}\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                  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                  focused={focusedShapeId === shape.id}\n                />\n              );\n            })}\n          </Layer>\n        </StyledStage>\n\n        {sortedShapes.map((shape) => {\n          const selected = this.isSelected(shape);\n\n          return (\n            <HiddenFocusable\n              key={`focus-${shape.id}`}\n              tabIndex={disabled ? -1 : 0}\n              role=\"button\"\n              aria-label={shape.ariaLabel || ''}\n              aria-pressed={selected}\n              onFocus={() => this.handleShapeFocus(shape.id)}\n              onBlur={this.handleShapeBlur}\n              onKeyDown={(e) => this.handleShapeKeyDown(e, shape.id)}\n            />\n          );\n        })}\n      </BaseContainer>\n    );\n  }\n}\n\nContainer.propTypes = {\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 Container;\n"],"mappings":"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","ignoreList":[]}

package/lib/hotspot/index.js

@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
 var _renderUi = require("@pie-lib/render-ui");
+var _mathRendering = require("@pie-lib/math-rendering");
 var _styles = require("@mui/material/styles");
 var _container = _interopRequireDefault(require("./container"));
 const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
@@ -66,6 +68,15 @@ class HotspotComponent extends _react.default.Component {
         attributeFilter: ['style']
       });
     }
+
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = _reactDom.default.findDOMNode(this);
+    (0, _mathRendering.renderMath)(domNode);
+  }
+  componentDidUpdate() {
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = _reactDom.default.findDOMNode(this);
+    (0, _mathRendering.renderMath)(domNode);
   }
   componentWillUnmount() {
     this.observer?.disconnect();

package/lib/hotspot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_correctAnswerToggle","_renderUi","_styles","_container","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","position","StyledCollapsible","Collapsible","theme","marginBottom","spacing","HotspotComponent","React","Component","constructor","props","_defineProperty2","default","showCorrect","state","setState","observer","scale","componentDidMount","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","componentWillUnmount","disconnect","render","session","model","disabled","extraCSSRules","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","hoverOutlineColor","selectedHotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","fontSizeFactor","autoplayAudioEnabled","customAudioButton","onSelectChoice","isEvaluateMode","isGatherMode","showCorrectAnswerToggle","showRationale","hasText","hasMedia","showTeacherInstructions","createElement","id","labels","hidden","visible","PreviewPrompt","className","show","toggled","onToggle","bind","undefined","propTypes","PropTypes","object","isRequired","func","_default","exports"],"sources":["../../src/hotspot/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\n\nimport Container from './container';\n\nconst StyledUiLayout = styled(UiLayout)({\n  color: color.text(),\n  backgroundColor: color.background(),\n  position: 'relative',\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\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        extraCSSRules,\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        fontSizeFactor,\n        autoplayAudioEnabled,\n        customAudioButton,\n      },\n      onSelectChoice,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const isGatherMode = mode === 'gather';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n    const showTeacherInstructions =\n      teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\n\n    return (\n      <StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>\n        {showTeacherInstructions && (\n          <StyledCollapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </StyledCollapsible>\n        )}\n\n        {prompt && (\n          <PreviewPrompt\n            className=\"prompt\"\n            prompt={prompt}\n            autoplayAudioEnabled={autoplayAudioEnabled}\n            customAudioButton={customAudioButton}\n          />\n        )}\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={isGatherMode ? hoverOutlineColor : undefined}\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        {showRationale && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </StyledUiLayout>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nexport default HotspotComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_reactDom","_propTypes","_correctAnswerToggle","_renderUi","_mathRendering","_styles","_container","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","position","StyledCollapsible","Collapsible","theme","marginBottom","spacing","HotspotComponent","React","Component","constructor","props","_defineProperty2","default","showCorrect","state","setState","observer","scale","componentDidMount","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","domNode","ReactDOM","findDOMNode","renderMath","componentDidUpdate","componentWillUnmount","disconnect","render","session","model","disabled","extraCSSRules","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","hoverOutlineColor","selectedHotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","fontSizeFactor","autoplayAudioEnabled","customAudioButton","onSelectChoice","isEvaluateMode","isGatherMode","showCorrectAnswerToggle","showRationale","hasText","hasMedia","showTeacherInstructions","createElement","id","labels","hidden","visible","PreviewPrompt","className","show","toggled","onToggle","bind","undefined","propTypes","PropTypes","object","isRequired","func","_default","exports"],"sources":["../../src/hotspot/index.jsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { styled } from '@mui/material/styles';\n\nimport Container from './container';\n\nconst StyledUiLayout = styled(UiLayout)({\n  color: color.text(),\n  backgroundColor: color.background(),\n  position: 'relative',\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\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    // eslint-disable-next-line react/no-find-dom-node\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\n  }\n\n  componentDidUpdate() {\n    // eslint-disable-next-line react/no-find-dom-node\n    const domNode = ReactDOM.findDOMNode(this);\n\n    renderMath(domNode);\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        extraCSSRules,\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        fontSizeFactor,\n        autoplayAudioEnabled,\n        customAudioButton,\n      },\n      onSelectChoice,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const isGatherMode = mode === 'gather';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n    const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n    const showTeacherInstructions =\n      teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\n\n    return (\n      <StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>\n        {showTeacherInstructions && (\n          <StyledCollapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </StyledCollapsible>\n        )}\n\n        {prompt && (\n          <PreviewPrompt\n            className=\"prompt\"\n            prompt={prompt}\n            autoplayAudioEnabled={autoplayAudioEnabled}\n            customAudioButton={customAudioButton}\n          />\n        )}\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={isGatherMode ? hoverOutlineColor : undefined}\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        {showRationale && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </StyledUiLayout>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nexport default HotspotComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/hotspot/polygon.js

@@ -85,6 +85,7 @@ class PolygonComponent extends _react.default.Component {
       hoverOutlineColor,
       outlineColor,
       selected,
+      focused,
       points,
       evaluateText,
       strokeWidth,
@@ -133,7 +134,7 @@ class PolygonComponent extends _react.default.Component {
         iconSrc = _icons.faWrong;
       }
     }
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
     const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates
     const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates
 
@@ -147,15 +148,10 @@ class PolygonComponent extends _react.default.Component {
     const rectHeight = maxY - minY;
     return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
       scaleX: scale,
-      scaleY: scale
-    }, useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
-      x: rectX,
-      y: rectY,
-      width: rectWidth,
-      height: rectHeight,
-      stroke: selected ? 'transparent' : hoverOutlineColor,
-      strokeWidth: strokeWidth
-    }), /*#__PURE__*/_react.default.createElement(_reactKonva.Line, {
+      scaleY: scale,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave
+    }, /*#__PURE__*/_react.default.createElement(_reactKonva.Line, {
       points: pointsParsed,
       closed: true,
       fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
@@ -164,10 +160,16 @@ class PolygonComponent extends _react.default.Component {
       draggable: false,
       stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
       strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
-      onMouseLeave: this.handleMouseLeave,
-      onMouseEnter: this.handleMouseEnter,
       cursor: "pointer",
       position: "relative"
+    }), useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
+      x: rectX,
+      y: rectY,
+      width: rectWidth,
+      height: rectHeight,
+      stroke: hoverOutlineColor,
+      strokeWidth: strokeWidth,
+      listening: false
     }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react.default.createElement(_imageKonvaTooltip.default, {
       src: iconSrc,
       x: iconX,
@@ -183,6 +185,7 @@ PolygonComponent.propTypes = {
   isEvaluateMode: _propTypes.default.bool.isRequired,
   hoverOutlineColor: _propTypes.default.string,
   disabled: _propTypes.default.bool.isRequired,
+  focused: _propTypes.default.bool,
   onClick: _propTypes.default.func.isRequired,
   outlineColor: _propTypes.default.string.isRequired,
   points: _propTypes.default.array.isRequired,
@@ -196,6 +199,7 @@ PolygonComponent.propTypes = {
 };
 PolygonComponent.defaultProps = {
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1
 };