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

package/lib/hotspot/index.js

@@ -0,0 +1,174 @@
+"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 _reactDom = _interopRequireDefault(require("react-dom"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+var _renderUi = require("@pie-lib/render-ui");
+var _mathRendering = require("@pie-lib/math-rendering");
+var _styles = require("@mui/material/styles");
+var _container = _interopRequireDefault(require("./container"));
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  position: 'relative'
+});
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+class HotspotComponent extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onToggle", () => {
+      const {
+        showCorrect
+      } = this.state;
+      this.setState({
+        showCorrect: !showCorrect
+      });
+    });
+    this.state = {
+      showCorrect: false,
+      observer: null,
+      scale: 1
+    };
+  }
+  componentDidMount() {
+    this.observer = new MutationObserver(mutations => {
+      mutations.forEach(() => {
+        const target = document.getElementById('question-container')?.style?.cssText;
+        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
+        const zoomParsed = zoom?.replace(/\s/g, '');
+        if (zoomParsed) {
+          const newScale = parseFloat(zoomParsed) / 100;
+          if (newScale !== this.state.scale) {
+            this.setState({
+              scale: parseFloat(zoomParsed) / 100
+            });
+          }
+        } else if (!zoomParsed && this.state.scale !== 1) {
+          this.setState({
+            scale: 1
+          });
+        }
+      });
+    });
+    const target = document.getElementById('question-container');
+    if (target) {
+      this.observer.observe(target, {
+        attributes: true,
+        attributeFilter: ['style']
+      });
+    }
+
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = _reactDom.default.findDOMNode(this);
+    (0, _mathRendering.renderMath)(domNode);
+  }
+  componentDidUpdate() {
+    // eslint-disable-next-line react/no-find-dom-node
+    const domNode = _reactDom.default.findDOMNode(this);
+    (0, _mathRendering.renderMath)(domNode);
+  }
+  componentWillUnmount() {
+    this.observer?.disconnect();
+  }
+  render() {
+    const {
+      session,
+      model: {
+        disabled,
+        extraCSSRules,
+        imageUrl,
+        prompt,
+        mode,
+        multipleCorrect,
+        shapes,
+        outlineColor,
+        hotspotColor,
+        hoverOutlineColor,
+        selectedHotspotColor,
+        dimensions,
+        rationale,
+        teacherInstructions,
+        strokeWidth,
+        responseCorrect,
+        language,
+        fontSizeFactor,
+        autoplayAudioEnabled,
+        customAudioButton
+      },
+      onSelectChoice
+    } = this.props;
+    const {
+      showCorrect
+    } = this.state;
+    const isEvaluateMode = mode === 'evaluate';
+    const isGatherMode = mode === 'gather';
+    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
+    const showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
+    const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
+    return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules,
+      id: 'main-container',
+      fontSizeFactor: fontSizeFactor
+    }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: teacherInstructions
+    })), prompt && /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: prompt,
+      autoplayAudioEnabled: autoplayAudioEnabled,
+      customAudioButton: customAudioButton
+    }), showCorrectAnswerToggle && /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      show: showCorrectAnswerToggle,
+      toggled: showCorrect,
+      onToggle: this.onToggle.bind(this),
+      language: language
+    }), imageUrl ? /*#__PURE__*/_react.default.createElement(_container.default, {
+      isEvaluateMode: isEvaluateMode,
+      session: session,
+      dimensions: dimensions,
+      imageUrl: imageUrl,
+      hotspotColor: hotspotColor,
+      hoverOutlineColor: isGatherMode ? hoverOutlineColor : undefined,
+      selectedHotspotColor: selectedHotspotColor,
+      multipleCorrect: multipleCorrect,
+      outlineColor: outlineColor,
+      onSelectChoice: onSelectChoice,
+      shapes: shapes,
+      disabled: disabled,
+      strokeWidth: strokeWidth,
+      scale: this.state.scale,
+      showCorrect: showCorrect
+    }) : null, showRationale && /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: rationale
+    })));
+  }
+}
+HotspotComponent.propTypes = {
+  model: _propTypes.default.object.isRequired,
+  onSelectChoice: _propTypes.default.func.isRequired,
+  session: _propTypes.default.object.isRequired
+};
+var _default = exports.default = HotspotComponent;
+//# sourceMappingURL=index.js.map

package/lib/hotspot/index.js.map

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

package/lib/hotspot/polygon.js

@@ -0,0 +1,207 @@
+"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

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

package/lib/hotspot/rectangle.js

@@ -0,0 +1,178 @@
+"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

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