@pie-element/hotspot 11.1.1-next.0 → 11.1.1-next.101

package/lib/hotspot/circle.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactKonva = require("react-konva");
+var _imageKonvaTooltip = _interopRequireDefault(require("./image-konva-tooltip"));
+var _icons = require("./icons");
+class CircleComponent extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "handleClick", e => {
+      const {
+        onClick,
+        id,
+        selected,
+        disabled
+      } = this.props;
+      if (!disabled) {
+        e.cancelBubble = true;
+        onClick({
+          id,
+          selected: !selected,
+          selector: 'Mouse'
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleMouseEnter", () => {
+      const {
+        disabled
+      } = this.props;
+      if (!disabled) {
+        document.body.style.cursor = 'pointer';
+      }
+      this.setState({
+        hovered: true
+      });
+    });
+    (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
+      document.body.style.cursor = 'default';
+      this.setState({
+        hovered: false
+      });
+    });
+    (0, _defineProperty2.default)(this, "getEvaluateOutlineColor", (isCorrect, markAsCorrect, outlineColor) => markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red');
+    (0, _defineProperty2.default)(this, "getOutlineWidth", (showCorrectEnabled, selected, markAsCorrect, strokeWidth) => markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0);
+    this.state = {
+      hovered: false
+    };
+  }
+  render() {
+    const {
+      radius,
+      hotspotColor,
+      isCorrect,
+      isEvaluateMode,
+      hoverOutlineColor,
+      outlineColor,
+      selected,
+      focused,
+      x,
+      y,
+      evaluateText,
+      strokeWidth,
+      scale,
+      markAsCorrect,
+      selectedHotspotColor,
+      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 - 10;
+    const iconY = y - 10; // Adjust position for the icon
+
+    let iconSrc;
+    if (showCorrectEnabled) {
+      if (selected && isCorrect || !selected && !isCorrect) {
+        iconSrc = _icons.faCorrect;
+      }
+    } else {
+      if (selected) {
+        if (isCorrect) {
+          iconSrc = _icons.faCorrect;
+        } else {
+          iconSrc = _icons.faWrong;
+        }
+      } else if (!isCorrect) {
+        iconSrc = _icons.faWrong;
+      }
+    }
+    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
+    return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
+      scaleX: scale,
+      scaleY: scale,
+      onMouseLeave: this.handleMouseLeave,
+      onMouseEnter: this.handleMouseEnter
+    }, /*#__PURE__*/_react.default.createElement(_reactKonva.Circle, {
+      radius: radius,
+      fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
+      onClick: this.handleClick,
+      onTap: this.handleClick,
+      draggable: false,
+      stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
+      strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
+      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,
+      y: iconY,
+      tooltip: evaluateText
+    }) : null);
+  }
+}
+CircleComponent.propTypes = {
+  radius: _propTypes.default.number.isRequired,
+  hotspotColor: _propTypes.default.string.isRequired,
+  id: _propTypes.default.string.isRequired,
+  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,
+  selected: _propTypes.default.bool.isRequired,
+  x: _propTypes.default.number.isRequired,
+  y: _propTypes.default.number.isRequired,
+  evaluateText: _propTypes.default.string,
+  strokeWidth: _propTypes.default.number,
+  scale: _propTypes.default.number,
+  selectedHotspotColor: _propTypes.default.string,
+  markAsCorrect: _propTypes.default.bool.isRequired,
+  showCorrectEnabled: _propTypes.default.bool.isRequired
+};
+CircleComponent.defaultProps = {
+  isCorrect: false,
+  evaluateText: null,
+  focused: false,
+  strokeWidth: 5,
+  scale: 1
+};
+var _default = exports.default = CircleComponent;
+//# sourceMappingURL=circle.js.map

package/lib/hotspot/circle.js.map

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

package/lib/hotspot/container.js

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Container = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactKonva = require("react-konva");
+var _styles = require("@mui/material/styles");
+var _rectangle = _interopRequireDefault(require("./rectangle"));
+var _polygon = _interopRequireDefault(require("./polygon"));
+var _circle = _interopRequireDefault(require("./circle"));
+const BaseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  position: 'relative',
+  background: theme.palette.common.white,
+  border: `${theme.spacing(1)} solid ${theme.palette.common.white}`,
+  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'
+});
+const Image = (0, _styles.styled)('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center'
+});
+const StyledStage = (0, _styles.styled)(_reactKonva.Stage)({
+  left: 0,
+  top: 0,
+  position: 'absolute'
+});
+class Container extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "correctness", (isCorrect, isChecked) => isCorrect ? isChecked : !isChecked);
+    (0, _defineProperty2.default)(this, "getEvaluateText", (isCorrect, selected) => {
+      if (selected && isCorrect) {
+        return 'Correctly\nselected';
+      }
+      if (selected && !isCorrect) {
+        return 'Should not have\nbeen selected';
+      }
+      if (!selected && isCorrect) {
+        return 'Should have\nbeen selected';
+      }
+      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];
+    return !!selectedShape;
+  }
+  render() {
+    const {
+      dimensions: {
+        width: withProp,
+        height: heightProp
+      },
+      disabled,
+      hotspotColor,
+      hoverOutlineColor,
+      selectedHotspotColor,
+      imageUrl,
+      isEvaluateMode,
+      outlineColor,
+      onSelectChoice,
+      shapes: {
+        rectangles = [],
+        polygons = [],
+        circles = []
+      },
+      scale: SCALE,
+      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
+      }
+    }, imageUrl ? /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(Image, {
+      alt: "hotspot-image",
+      height: "auto",
+      src: imageUrl,
+      style: {
+        width,
+        height,
+        maxWidth: width,
+        maxHeight: height
+      }
+    })) : null, /*#__PURE__*/_react.default.createElement(StyledStage, {
+      height: height + strokeWidth,
+      width: width + strokeWidth,
+      x: strokeWidth / 2,
+      y: strokeWidth / 2
+    }, /*#__PURE__*/_react.default.createElement(_reactKonva.Layer, null, rectangles.map(shape => {
+      const selected = this.isSelected(shape);
+      const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;
+      const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;
+      const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);
+      return /*#__PURE__*/_react.default.createElement(_rectangle.default, {
+        scale: SCALE,
+        isEvaluateMode: isEvaluateMode,
+        isCorrect: isCorrect,
+        evaluateText: evaluateText,
+        disabled: disabled,
+        selected: selected,
+        height: shape.height,
+        hotspotColor: hotspotColor,
+        hoverOutlineColor: hoverOutlineColor,
+        selectedHotspotColor: selectedHotspotColor,
+        id: shape.id,
+        key: shape.id,
+        onClick: onSelectChoice,
+        outlineColor: outlineColor,
+        width: shape.width,
+        x: shape.x,
+        y: shape.y,
+        strokeWidth: strokeWidth,
+        markAsCorrect: markAsCorrect,
+        showCorrectEnabled: showCorrect,
+        focused: focusedShapeId === shape.id
+      });
+    }), polygons.map(polygon => {
+      const selected = this.isSelected(polygon);
+      const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;
+      const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;
+      const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);
+      return /*#__PURE__*/_react.default.createElement(_polygon.default, {
+        scale: SCALE,
+        isEvaluateMode: isEvaluateMode,
+        isCorrect: !!isCorrect,
+        evaluateText: evaluateText,
+        disabled: disabled,
+        selected: selected,
+        hotspotColor: hotspotColor,
+        id: polygon.id,
+        key: polygon.id,
+        onClick: onSelectChoice,
+        outlineColor: outlineColor,
+        points: polygon.points,
+        strokeWidth: strokeWidth,
+        markAsCorrect: markAsCorrect,
+        selectedHotspotColor: selectedHotspotColor,
+        hoverOutlineColor: hoverOutlineColor,
+        showCorrectEnabled: showCorrect,
+        focused: focusedShapeId === polygon.id
+      });
+    }), circles.map(shape => {
+      const selected = this.isSelected(shape);
+      const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;
+      const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;
+      const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);
+      return /*#__PURE__*/_react.default.createElement(_circle.default, {
+        scale: SCALE,
+        isEvaluateMode: isEvaluateMode,
+        isCorrect: isCorrect,
+        evaluateText: evaluateText,
+        disabled: disabled,
+        selected: selected,
+        radius: shape.radius,
+        hotspotColor: hotspotColor,
+        id: shape.id,
+        key: shape.id,
+        onClick: onSelectChoice,
+        outlineColor: outlineColor,
+        x: shape.x,
+        y: shape.y,
+        strokeWidth: strokeWidth,
+        markAsCorrect: markAsCorrect,
+        selectedHotspotColor: selectedHotspotColor,
+        hoverOutlineColor: hoverOutlineColor,
+        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;
+Container.propTypes = {
+  dimensions: _propTypes.default.object.isRequired,
+  disabled: _propTypes.default.bool.isRequired,
+  hotspotColor: _propTypes.default.string.isRequired,
+  hoverOutlineColor: _propTypes.default.string,
+  imageUrl: _propTypes.default.string.isRequired,
+  isEvaluateMode: _propTypes.default.bool.isRequired,
+  onSelectChoice: _propTypes.default.func.isRequired,
+  outlineColor: _propTypes.default.string.isRequired,
+  selectedHotspotColor: _propTypes.default.string,
+  session: _propTypes.default.object.isRequired,
+  shapes: _propTypes.default.object.isRequired,
+  strokeWidth: _propTypes.default.number,
+  scale: _propTypes.default.number,
+  showCorrect: _propTypes.default.bool
+};
+Container.defaultProps = {
+  scale: 1
+};
+var _default = exports.default = Container;
+//# sourceMappingURL=container.js.map

package/lib/hotspot/container.js.map

@@ -0,0 +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","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":[]}