@pie-element/hotspot 11.3.2-beta.5 → 11.3.2-beta.6

package/lib/hotspot/polygon.js

@@ -1,207 +0,0 @@
-"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 PolygonComponent extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    (0, _defineProperty2.default)(this, "getPolygonCenter", points => {
-      const x = points.map(({
-        x
-      }) => x);
-      const y = points.map(({
-        y
-      }) => y);
-      const minX = Math.min.apply(null, x);
-      const maxX = Math.max.apply(null, x);
-      const minY = Math.min.apply(null, y);
-      const maxY = Math.max.apply(null, y);
-      return [(minX + maxX) / 2, (minY + maxY) / 2];
-    });
-    (0, _defineProperty2.default)(this, "parsePointsForKonva", points => {
-      const parsedPoints = [];
-      points.forEach(({
-        x,
-        y
-      }) => {
-        parsedPoints.push(x);
-        parsedPoints.push(y);
-      });
-      return parsedPoints;
-    });
-    (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 {
-      hotspotColor,
-      isCorrect,
-      isEvaluateMode,
-      hoverOutlineColor,
-      outlineColor,
-      selected,
-      focused,
-      points,
-      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 pointsParsed = this.parsePointsForKonva(points);
-    const center = this.getPolygonCenter(points);
-    const iconX = center[0];
-    const iconY = center[1];
-
-    // "Show Correct Answer" Enabled:
-    //   - Correctly Selected: white checkmark in green circle
-    //   - Correctly Not Selected: none
-    //   - Incorrectly Selected: none
-    //   - Incorrectly Not Selected: white checkmark in green circle
-    // "Show Correct Answer" Disabled:
-    //   - Correctly Selected:
-    //     - white checkmark in green circle
-    //     - heavy outline, as on “Gather”
-    //   - Correctly Not Selected: none
-    //   - Incorrectly Selected:
-    //     - white "X" in red circle
-    //     - heavy outline around the selection should appear in red
-    //   - Incorrectly Not Selected: white "X" in red circle
-    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;
-    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
-
-    const minX = Math.min(...xValues);
-    const maxX = Math.max(...xValues);
-    const minY = Math.min(...yValues);
-    const maxY = Math.max(...yValues);
-    const rectX = minX;
-    const rectY = minY;
-    const rectWidth = maxX - minX;
-    const rectHeight = maxY - minY;
-    return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
-      scaleX: scale,
-      scaleY: scale,
-      onMouseEnter: this.handleMouseEnter,
-      onMouseLeave: this.handleMouseLeave
-    }, /*#__PURE__*/_react.default.createElement(_reactKonva.Line, {
-      points: pointsParsed,
-      closed: true,
-      fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
-      onClick: this.handleClick,
-      onTap: this.handleClick,
-      draggable: false,
-      stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
-      strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
-      cursor: "pointer",
-      position: "relative"
-    }), useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
-      x: rectX,
-      y: rectY,
-      width: rectWidth,
-      height: rectHeight,
-      stroke: hoverOutlineColor,
-      strokeWidth: strokeWidth,
-      listening: false
-    }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react.default.createElement(_imageKonvaTooltip.default, {
-      src: iconSrc,
-      x: iconX,
-      y: iconY,
-      tooltip: evaluateText
-    }) : null);
-  }
-}
-PolygonComponent.propTypes = {
-  hotspotColor: _propTypes.default.string.isRequired,
-  id: _propTypes.default.string.isRequired,
-  isCorrect: _propTypes.default.bool.isRequired,
-  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,
-  selected: _propTypes.default.bool.isRequired,
-  evaluateText: _propTypes.default.string,
-  selectedHotspotColor: _propTypes.default.string,
-  strokeWidth: _propTypes.default.number,
-  scale: _propTypes.default.number,
-  markAsCorrect: _propTypes.default.bool.isRequired,
-  showCorrectEnabled: _propTypes.default.bool.isRequired
-};
-PolygonComponent.defaultProps = {
-  evaluateText: null,
-  focused: false,
-  strokeWidth: 5,
-  scale: 1
-};
-var _default = exports.default = PolygonComponent;
-//# sourceMappingURL=polygon.js.map

package/lib/hotspot/polygon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","PolygonComponent","React","Component","constructor","props","_defineProperty2","default","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","hotspotColor","isEvaluateMode","hoverOutlineColor","focused","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","xValues","filter","_","index","yValues","rectX","rectY","rectWidth","rectHeight","createElement","Group","scaleX","scaleY","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","Line","closed","fill","handleClick","onTap","draggable","stroke","position","Rect","width","height","listening","src","tooltip","propTypes","PropTypes","string","isRequired","bool","func","array","number","defaultProps","_default","exports"],"sources":["../../src/hotspot/polygon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  getPolygonCenter = (points) => {\n    const x = points.map(({ x }) => x);\n    const y = points.map(({ y }) => y);\n    const minX = Math.min.apply(null, x);\n    const maxX = Math.max.apply(null, x);\n    const minY = Math.min.apply(null, y);\n    const maxY = Math.max.apply(null, y);\n    return [(minX + maxX) / 2, (minY + maxY) / 2];\n  };\n\n  parsePointsForKonva = (points) => {\n    const parsedPoints = [];\n    points.forEach(({ x, y }) => {\n      parsedPoints.push(x);\n      parsedPoints.push(y);\n    });\n    return parsedPoints;\n  };\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected, selector: 'Mouse' });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      hoverOutlineColor,\n      outlineColor,\n      selected,\n      focused,\n      points,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      selectedHotspotColor,\n      showCorrectEnabled,\n    } = this.props;\n\n    const { hovered } = this.state;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const pointsParsed = this.parsePointsForKonva(points);\n    const center = this.getPolygonCenter(points);\n    const iconX = center[0];\n    const iconY = center[1];\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n    const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n    const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\n    const minX = Math.min(...xValues);\n    const maxX = Math.max(...xValues);\n    const minY = Math.min(...yValues);\n    const maxY = Math.max(...yValues);\n\n    const rectX = minX;\n    const rectY = minY;\n    const rectWidth = maxX - minX;\n    const rectHeight = maxY - minY;\n\n    return (\n      <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>\n        <Line\n          points={pointsParsed}\n          closed={true}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          cursor=\"pointer\"\n          position=\"relative\"\n        />\n        {useHoveredStyle && (\n          <Rect\n            x={rectX}\n            y={rectY}\n            width={rectWidth}\n            height={rectHeight}\n            stroke={hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\n        )}\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nPolygonComponent.propTypes = {\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.bool.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  disabled: PropTypes.bool.isRequired,\n  focused: PropTypes.bool,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.array.isRequired,\n  selected: PropTypes.bool.isRequired,\n  evaluateText: PropTypes.string,\n  selectedHotspotColor: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n  evaluateText: null,\n  focused: false,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default PolygonComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/hotspot/rectangle.js

@@ -1,178 +0,0 @@
-"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 RectComponent 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 {
-      height,
-      hotspotColor,
-      hoverOutlineColor,
-      selectedHotspotColor,
-      isCorrect,
-      isEvaluateMode,
-      outlineColor,
-      selected,
-      focused,
-      width,
-      x,
-      y,
-      evaluateText,
-      strokeWidth,
-      scale,
-      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;
-    const iconY = y + height / 2 - 10;
-
-    // "Show Correct Answer" Enabled:
-    //   - Correctly Selected: white checkmark in green circle
-    //   - Correctly Not Selected: none
-    //   - Incorrectly Selected: none
-    //   - Incorrectly Not Selected: white checkmark in green circle
-    // "Show Correct Answer" Disabled:
-    //   - Correctly Selected:
-    //     - white checkmark in green circle
-    //     - heavy outline, as on “Gather”
-    //   - Correctly Not Selected: none
-    //   - Incorrectly Selected:
-    //     - white "X" in red circle
-    //     - heavy outline around the selection should appear in red
-    //   - Incorrectly Not Selected: white "X" in red circle
-    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.Rect, {
-      x: x,
-      y: y,
-      width: width,
-      height: height,
-      fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
-      onClick: this.handleClick,
-      onTap: this.handleClick,
-      draggable: false,
-      stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
-      strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
-      cursor: "pointer"
-    }), useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
-      x: x,
-      y: y,
-      width: width,
-      height: height,
-      stroke: hoverOutlineColor,
-      strokeWidth: strokeWidth,
-      listening: false
-    }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react.default.createElement(_imageKonvaTooltip.default, {
-      src: iconSrc,
-      x: iconX,
-      y: iconY,
-      tooltip: evaluateText
-    }) : null);
-  }
-}
-RectComponent.propTypes = {
-  height: _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,
-  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,
-  width: _propTypes.default.number.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
-};
-RectComponent.defaultProps = {
-  isCorrect: false,
-  evaluateText: null,
-  focused: false,
-  strokeWidth: 5,
-  scale: 1
-};
-var _default = exports.default = RectComponent;
-//# sourceMappingURL=rectangle.js.map

package/lib/hotspot/rectangle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","RectComponent","React","Component","constructor","props","_defineProperty2","default","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","focused","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Rect","fill","handleClick","onTap","draggable","stroke","listening","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      hovered: false,\n    };\n  }\n\n  handleClick = (e) => {\n    const { onClick, id, selected, disabled } = this.props;\n\n    if (!disabled) {\n      e.cancelBubble = true;\n      onClick({ id, selected: !selected, selector: 'Mouse' });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n    this.setState({ hovered: true });\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n    this.setState({ hovered: false });\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      height,\n      hotspotColor,\n      hoverOutlineColor,\n      selectedHotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      focused,\n      width,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled,\n    } = this.props;\n    const { hovered } = this.state;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = x + width / 2 - 10;\n    const iconY = y + height / 2 - 10;\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n    return (\n      <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n        <Rect\n          x={x}\n          y={y}\n          width={width}\n          height={height}\n          fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n          strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n          cursor=\"pointer\"\n        />\n        {useHoveredStyle && (\n          <Rect\n            x={x}\n            y={y}\n            width={width}\n            height={height}\n            stroke={hoverOutlineColor}\n            strokeWidth={strokeWidth}\n            listening={false}\n          />\n        )}\n        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n      </Group>\n    );\n  }\n}\n\nRectComponent.propTypes = {\n  height: PropTypes.number.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n  isEvaluateMode: PropTypes.bool.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  disabled: PropTypes.bool.isRequired,\n  focused: PropTypes.bool,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  selectedHotspotColor: PropTypes.string,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  focused: false,\n  strokeWidth: 5,\n  scale: 1,\n};\n\nexport default RectComponent;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,MAAMK,aAAa,SAASC,cAAK,CAACC,SAAS,CAAC;EAC1CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,uBAMAC,CAAC,IAAK;MACnB,MAAM;QAAEC,OAAO;QAAEC,EAAE;QAAEC,QAAQ;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACP,KAAK;MAEtD,IAAI,CAACO,QAAQ,EAAE;QACbJ,CAAC,CAACK,YAAY,GAAG,IAAI;QACrBJ,OAAO,CAAC;UAAEC,EAAE;UAAEC,QAAQ,EAAE,CAACA,QAAQ;UAAEG,QAAQ,EAAE;QAAQ,CAAC,CAAC;MACzD;IACF,CAAC;IAAA,IAAAR,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,MAAM;QAAEK;MAAS,CAAC,GAAG,IAAI,CAACP,KAAK;MAE/B,IAAI,CAACO,QAAQ,EAAE;QACbG,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACxC;MACA,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;IAClC,CAAC;IAAA,IAAAd,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvBQ,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACtC,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAM,CAAC,CAAC;IACnC,CAAC;IAAA,IAAAd,gBAAA,CAAAC,OAAA,mCAEyB,CAACc,SAAS,EAAEC,aAAa,EAAEC,YAAY,KAC/DD,aAAa,GAAG,OAAO,GAAGD,SAAS,GAAGE,YAAY,GAAG,KAAK;IAAA,IAAAjB,gBAAA,CAAAC,OAAA,2BAE1C,CAACiB,kBAAkB,EAAEb,QAAQ,EAAEW,aAAa,EAAEG,WAAW,KACzEH,aAAa,IAAK,CAACA,aAAa,IAAI,CAACE,kBAAkB,IAAIb,QAAS,GAAGc,WAAW,GAAG,CAAC;IAhCtF,IAAI,CAACC,KAAK,GAAG;MACXN,OAAO,EAAE;IACX,CAAC;EACH;EA+BAO,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,MAAM;MACNC,YAAY;MACZC,iBAAiB;MACjBC,oBAAoB;MACpBV,SAAS;MACTW,cAAc;MACdT,YAAY;MACZZ,QAAQ;MACRsB,OAAO;MACPC,KAAK;MACLC,CAAC;MACDC,CAAC;MACDC,YAAY;MACZZ,WAAW;MACXa,KAAK;MACLhB,aAAa;MACbE;IACF,CAAC,GAAG,IAAI,CAACnB,KAAK;IACd,MAAM;MAAEe;IAAQ,CAAC,GAAG,IAAI,CAACM,KAAK;IAE9B,MAAMa,kBAAkB,GAAGP,cAAc,GACrC,IAAI,CAACQ,uBAAuB,CAACnB,SAAS,EAAEC,aAAa,EAAEC,YAAY,CAAC,GACpEA,YAAY;IAEhB,MAAMkB,YAAY,GAAG,IAAI,CAACC,eAAe,CAAClB,kBAAkB,EAAEb,QAAQ,EAAEW,aAAa,EAAEG,WAAW,CAAC;IAEnG,MAAMkB,KAAK,GAAGR,CAAC,GAAGD,KAAK,GAAG,CAAC,GAAG,EAAE;IAChC,MAAMU,KAAK,GAAGR,CAAC,GAAGR,MAAM,GAAG,CAAC,GAAG,EAAE;;IAEjC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAIiB,OAAO;IAEX,IAAIrB,kBAAkB,EAAE;MACtB,IAAKb,QAAQ,IAAIU,SAAS,IAAM,CAACV,QAAQ,IAAI,CAACU,SAAU,EAAE;QACxDwB,OAAO,GAAGC,gBAAS;MACrB;IACF,CAAC,MAAM;MACL,IAAInC,QAAQ,EAAE;QACZ,IAAIU,SAAS,EAAE;UACbwB,OAAO,GAAGC,gBAAS;QACrB,CAAC,MAAM;UACLD,OAAO,GAAGE,cAAO;QACnB;MACF,CAAC,MAAM,IAAI,CAAC1B,SAAS,EAAE;QACrBwB,OAAO,GAAGE,cAAO;MACnB;IACF;IAEA,MAAMC,eAAe,GAAG,CAAC5B,OAAO,IAAIa,OAAO,KAAKH,iBAAiB;IAEjE,oBACEpC,MAAA,CAAAa,OAAA,CAAA0C,aAAA,CAACnD,WAAA,CAAAoD,KAAK;MAACC,MAAM,EAAEb,KAAM;MAACc,MAAM,EAAEd,KAAM;MAACe,YAAY,EAAE,IAAI,CAACC,gBAAiB;MAACC,YAAY,EAAE,IAAI,CAACC;IAAiB,gBAC5G9D,MAAA,CAAAa,OAAA,CAAA0C,aAAA,CAACnD,WAAA,CAAA2D,IAAI;MACHtB,CAAC,EAAEA,CAAE;MACLC,CAAC,EAAEA,CAAE;MACLF,KAAK,EAAEA,KAAM;MACbN,MAAM,EAAEA,MAAO;MACf8B,IAAI,EAAE/C,QAAQ,IAAIoB,oBAAoB,GAAGA,oBAAoB,GAAGF,YAAa;MAC7EpB,OAAO,EAAE,IAAI,CAACkD,WAAY;MAC1BC,KAAK,EAAE,IAAI,CAACD,WAAY;MACxBE,SAAS,EAAE,KAAM;MACjBC,MAAM,EAAEd,eAAe,IAAI,CAACrC,QAAQ,GAAG,aAAa,GAAG4B,kBAAmB;MAC1Ed,WAAW,EAAEuB,eAAe,IAAI,CAACrC,QAAQ,GAAG,CAAC,GAAG8B,YAAa;MAC7DvB,MAAM,EAAC;IAAS,CACjB,CAAC,EACD8B,eAAe,iBACdtD,MAAA,CAAAa,OAAA,CAAA0C,aAAA,CAACnD,WAAA,CAAA2D,IAAI;MACHtB,CAAC,EAAEA,CAAE;MACLC,CAAC,EAAEA,CAAE;MACLF,KAAK,EAAEA,KAAM;MACbN,MAAM,EAAEA,MAAO;MACfkC,MAAM,EAAEhC,iBAAkB;MAC1BL,WAAW,EAAEA,WAAY;MACzBsC,SAAS,EAAE;IAAM,CAClB,CACF,EACA/B,cAAc,IAAIa,OAAO,gBAAGnD,MAAA,CAAAa,OAAA,CAAA0C,aAAA,CAAClD,kBAAA,CAAAQ,OAAc;MAACyD,GAAG,EAAEnB,OAAQ;MAACV,CAAC,EAAEQ,KAAM;MAACP,CAAC,EAAEQ,KAAM;MAACqB,OAAO,EAAE5B;IAAa,CAAE,CAAC,GAAG,IACtG,CAAC;EAEZ;AACF;AAEApC,aAAa,CAACiE,SAAS,GAAG;EACxBtC,MAAM,EAAEuC,kBAAS,CAACC,MAAM,CAACC,UAAU;EACnCxC,YAAY,EAAEsC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzC3D,EAAE,EAAEyD,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC/BhD,SAAS,EAAE8C,kBAAS,CAACI,SAAS,CAAC,CAACJ,kBAAS,CAACK,IAAI,EAAEL,kBAAS,CAACG,MAAM,CAAC,CAAC;EAClEtC,cAAc,EAAEmC,kBAAS,CAACK,IAAI,CAACH,UAAU;EACzCvC,iBAAiB,EAAEqC,kBAAS,CAACG,MAAM;EACnC1D,QAAQ,EAAEuD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACnCpC,OAAO,EAAEkC,kBAAS,CAACK,IAAI;EACvB/D,OAAO,EAAE0D,kBAAS,CAACM,IAAI,CAACJ,UAAU;EAClC9C,YAAY,EAAE4C,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzC1D,QAAQ,EAAEwD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACnCnC,KAAK,EAAEiC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClClC,CAAC,EAAEgC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC9BjC,CAAC,EAAE+B,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC9BhC,YAAY,EAAE8B,kBAAS,CAACG,MAAM;EAC9B7C,WAAW,EAAE0C,kBAAS,CAACC,MAAM;EAC7B9B,KAAK,EAAE6B,kBAAS,CAACC,MAAM;EACvBrC,oBAAoB,EAAEoC,kBAAS,CAACG,MAAM;EACtChD,aAAa,EAAE6C,kBAAS,CAACK,IAAI,CAACH,UAAU;EACxC7C,kBAAkB,EAAE2C,kBAAS,CAACK,IAAI,CAACH;AACrC,CAAC;AAEDpE,aAAa,CAACyE,YAAY,GAAG;EAC3BrD,SAAS,EAAE,KAAK;EAChBgB,YAAY,EAAE,IAAI;EAClBJ,OAAO,EAAE,KAAK;EACdR,WAAW,EAAE,CAAC;EACda,KAAK,EAAE;AACT,CAAC;AAAC,IAAAqC,QAAA,GAAAC,OAAA,CAAArE,OAAA,GAEaN,aAAa","ignoreList":[]}

package/lib/index.js

@@ -1,214 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _client = require("react-dom/client");
-var _mathRendering = require("@pie-lib/math-rendering");
-var _renderUi = require("@pie-lib/render-ui");
-var _piePlayerEvents = require("@pie-framework/pie-player-events");
-var _hotspot = _interopRequireDefault(require("./hotspot"));
-var _sessionUpdater = require("./session-updater");
-class Hotspot extends HTMLElement {
-  constructor() {
-    super();
-    this._model = null;
-    this._session = null;
-    this._audioInitialized = false;
-    this.audioComplete = false;
-    this._root = null;
-  }
-  set model(m) {
-    this._model = m;
-    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
-    this._audioInitialized = false;
-    this._render();
-  }
-  isComplete() {
-    if (!this._session || !this._session.answers) {
-      return false;
-    }
-    const {
-      autoplayAudioEnabled,
-      completeAudioEnabled
-    } = this._model || {};
-    const elementContext = this;
-
-    // check audio completion if audio settings are enabled and audio actually exists
-    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
-      if (elementContext) {
-        const audio = elementContext.querySelector('audio');
-        const isInsidePrompt = audio && audio.closest('#preview-prompt');
-
-        // only require audio completion if audio exists and is inside the prompt
-        if (audio && isInsidePrompt) {
-          return false;
-        }
-      }
-    }
-    if (!Array.isArray(this._session.answers)) {
-      return false;
-    }
-    return this._session.answers.length > 0;
-  }
-  set session(s) {
-    if (s && !s.answers) {
-      s.answers = [];
-    }
-    this._session = s;
-    this._render();
-  }
-  get session() {
-    return this._session;
-  }
-  onSelectChoice(data) {
-    (0, _sessionUpdater.updateSessionValue)(this._session, this._model, data);
-    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-    this._render();
-  }
-  _createAudioInfoToast() {
-    const info = document.createElement('div');
-    info.id = 'play-audio-info';
-    Object.assign(info.style, {
-      position: 'absolute',
-      top: 0,
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      background: 'white',
-      zIndex: '1000',
-      cursor: 'pointer'
-    });
-    const img = document.createElement('img');
-    img.src = _renderUi.EnableAudioAutoplayImage;
-    img.alt = 'Click anywhere to enable audio autoplay';
-    img.width = 500;
-    img.height = 300;
-    info.appendChild(img);
-    return info;
-  }
-  connectedCallback() {
-    this._render();
-
-    // Observation:  audio in Chrome will have the autoplay attribute,
-    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio
-    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox
-    const observer = new MutationObserver((mutationsList, observer) => {
-      mutationsList.forEach(mutation => {
-        if (mutation.type === 'childList') {
-          if (this._audioInitialized) return;
-          const audio = this.querySelector('audio');
-          const isInsidePrompt = audio && audio.closest('#preview-prompt');
-          if (!this._model) return;
-          if (!this._model.autoplayAudioEnabled) return;
-          if (audio && !isInsidePrompt) return;
-          if (!audio) return;
-          const info = this._createAudioInfoToast();
-          const container = this.querySelector('#main-container');
-          const enableAudio = () => {
-            if (this.querySelector('#play-audio-info')) {
-              audio.play();
-              container.removeChild(info);
-            }
-            document.removeEventListener('click', enableAudio);
-          };
-
-          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play
-          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked
-          setTimeout(() => {
-            if (audio.paused && !this.querySelector('#play-audio-info')) {
-              // add info message as a toast to enable audio playback
-              container.appendChild(info);
-              document.addEventListener('click', enableAudio);
-            } else {
-              document.removeEventListener('click', enableAudio);
-            }
-          }, 500);
-
-          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
-          const handlePlaying = () => {
-            //timestamp when auto-played audio started playing
-            (0, _sessionUpdater.updateSessionMetadata)(this._session, {
-              audioStartTime: new Date().getTime()
-            });
-            const info = this.querySelector('#play-audio-info');
-            if (info) {
-              container.removeChild(info);
-            }
-            audio.removeEventListener('playing', handlePlaying);
-          };
-          audio.addEventListener('playing', handlePlaying);
-
-          // we need to listen for the ended event to update the isComplete state
-          const handleEnded = () => {
-            //timestamp when auto-played audio completed playing
-            (0, _sessionUpdater.updateSessionMetadata)(this._session, {
-              audioEndTime: new Date().getTime()
-            });
-            let {
-              audioStartTime,
-              audioEndTime,
-              waitTime
-            } = this._session;
-            if (!waitTime && audioStartTime && audioEndTime) {
-              // waitTime is elapsed time the user waited for auto-played audio to finish
-              this._session.waitTime = audioEndTime - audioStartTime;
-            }
-            this.audioComplete = true;
-            this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-            audio.removeEventListener('ended', handleEnded);
-          };
-          audio.addEventListener('ended', handleEnded);
-
-          // store references to remove later
-          this._audio = audio;
-          this._handlePlaying = handlePlaying;
-          this._handleEnded = handleEnded;
-          this._enableAudio = enableAudio;
-          // set to true to prevent multiple initializations
-          this._audioInitialized = true;
-          observer.disconnect();
-        }
-      });
-    });
-    observer.observe(this, {
-      childList: true,
-      subtree: true
-    });
-  }
-  _render() {
-    if (this._model && this._session) {
-      const el = /*#__PURE__*/_react.default.createElement(_hotspot.default, {
-        model: this._model,
-        session: this._session,
-        onSelectChoice: this.onSelectChoice.bind(this)
-      });
-      if (!this._root) {
-        this._root = (0, _client.createRoot)(this);
-      }
-      this._root.render(el);
-      queueMicrotask(() => {
-        (0, _mathRendering.renderMath)(this);
-      });
-    }
-  }
-  disconnectedCallback() {
-    document.removeEventListener('click', this._enableAudio);
-    if (this._audio) {
-      this._audio.removeEventListener('playing', this._handlePlaying);
-      this._audio.removeEventListener('ended', this._handleEnded);
-      this._audio = null;
-    }
-    if (this._root) {
-      this._root.unmount();
-      this._root = null;
-    }
-  }
-}
-exports.default = Hotspot;
-//# sourceMappingURL=index.js.map