@pie-element/hotspot 11.1.1-next.89 → 11.1.1-next.92

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":"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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","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","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      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}>\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  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/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
 
@@ -183,6 +184,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 +198,7 @@ PolygonComponent.propTypes = {
 };
 PolygonComponent.defaultProps = {
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1
 };

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","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","Rect","width","height","stroke","Line","closed","fill","handleClick","onTap","draggable","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","position","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      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 && 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}>\n        {useHoveredStyle && (\n          <Rect\n            x={rectX}\n            y={rectY}\n            width={rectWidth}\n            height={rectHeight}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n          />\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          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          cursor='pointer'\n          position='relative'\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  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.array.isRequired,\n  selected: PropTypes.bool.isRequired,\n  evaluateText: PropTypes.string,\n  selectedHotspotColor: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default 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","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","Rect","width","height","stroke","Line","closed","fill","handleClick","onTap","draggable","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","position","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}>\n        {useHoveredStyle && (\n          <Rect\n            x={rectX}\n            y={rectY}\n            width={rectWidth}\n            height={rectHeight}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n          />\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          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          cursor='pointer'\n          position='relative'\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

@@ -63,6 +63,7 @@ class RectComponent extends _react.default.Component {
       isEvaluateMode,
       outlineColor,
       selected,
+      focused,
       width,
       x,
       y,
@@ -72,6 +73,9 @@ class RectComponent extends _react.default.Component {
       markAsCorrect,
       showCorrectEnabled
     } = this.props;
+    const {
+      hovered
+    } = this.state;
     const outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor) : outlineColor;
     const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
     const iconX = x + width / 2 - 10;
@@ -107,10 +111,7 @@ class RectComponent extends _react.default.Component {
         iconSrc = _icons.faWrong;
       }
     }
-    const {
-      hovered
-    } = this.state;
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
     return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
       scaleX: scale,
       scaleY: scale
@@ -152,6 +153,7 @@ RectComponent.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,
   selected: _propTypes.default.bool.isRequired,
@@ -168,6 +170,7 @@ RectComponent.propTypes = {
 RectComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1
 };

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","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","Rect","stroke","listening","fill","handleClick","onTap","draggable","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","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      width,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled,\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = x + width / 2 - 10;\n    const iconY = y + height / 2 - 10;\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    const { hovered } = this.state;\n    const useHoveredStyle = hovered && hoverOutlineColor;\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        {useHoveredStyle && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\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          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          cursor=\"pointer\"\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  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  selectedHotspotColor: PropTypes.string,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default 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","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","Rect","stroke","listening","fill","handleClick","onTap","draggable","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","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}>\n        {useHoveredStyle && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={selected ? 'transparent' : hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\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          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          cursor=\"pointer\"\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.1.1-next.89+620d65469",
+  "version": "11.1.1-next.92+37202a2aa",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "620d65469534b5110ac40573660b1c0cf6aae35b",
+  "gitHead": "37202a2aaffe36fd8df9dd865caf3535978bc482",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/hotspot/circle.jsx

@@ -50,6 +50,7 @@ class CircleComponent extends React.Component {
       hoverOutlineColor,
       outlineColor,
       selected,
+      focused,
       x,
       y,
       evaluateText,
@@ -88,7 +89,7 @@ class CircleComponent extends React.Component {
       }
     }
 
-    const useHoveredStyle = hovered && hoverOutlineColor;
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
 
     return (
       <Group scaleX={scale} scaleY={scale}>
@@ -128,6 +129,7 @@ CircleComponent.propTypes = {
   isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   isEvaluateMode: PropTypes.bool.isRequired,
   disabled: PropTypes.bool.isRequired,
+  focused: PropTypes.bool,
   hoverOutlineColor: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
@@ -145,6 +147,7 @@ CircleComponent.propTypes = {
 CircleComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
+  focused: false,
   strokeWidth: 5,
   scale: 1,
 };