@pie-element/hotspot 6.3.2-next.18 → 6.3.2-next.22

package/lib/hotspot/container.js

@@ -35,6 +35,8 @@ var _rectangle = _interopRequireDefault(require("./rectangle"));
 
 var _polygon = _interopRequireDefault(require("./polygon"));
 
+var _circle = _interopRequireDefault(require("./circle"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -100,8 +102,12 @@ var Container = /*#__PURE__*/function (_React$Component) {
           outlineColor = _this$props.outlineColor,
           onSelectChoice = _this$props.onSelectChoice,
           _this$props$shapes = _this$props.shapes,
-          rectangles = _this$props$shapes.rectangles,
-          polygons = _this$props$shapes.polygons,
+          _this$props$shapes$re = _this$props$shapes.rectangles,
+          rectangles = _this$props$shapes$re === void 0 ? [] : _this$props$shapes$re,
+          _this$props$shapes$po = _this$props$shapes.polygons,
+          polygons = _this$props$shapes$po === void 0 ? [] : _this$props$shapes$po,
+          _this$props$shapes$ci = _this$props$shapes.circles,
+          circles = _this$props$shapes$ci === void 0 ? [] : _this$props$shapes$ci,
           SCALE = _this$props.scale,
           strokeWidth = _this$props.strokeWidth,
           showCorrect = _this$props.showCorrect;
@@ -180,6 +186,32 @@ var Container = /*#__PURE__*/function (_React$Component) {
           markAsCorrect: markAsCorrect,
           showCorrectEnabled: showCorrect
         });
+      }), circles.map(function (shape) {
+        var selected = _this2.isSelected(shape);
+
+        var isCorrect = isEvaluateMode ? _this2.correctness(shape.correct, selected) : undefined;
+        var evaluateText = isEvaluateMode ? _this2.getEvaluateText(shape.correct, selected) : null;
+        var markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);
+        return /*#__PURE__*/_react["default"].createElement(_circle["default"], {
+          classes: classes,
+          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,
+          showCorrectEnabled: showCorrect
+        });
       }))));
     }
   }]);

package/lib/hotspot/container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/container.jsx"],"names":["Container","isCorrect","isChecked","selected","shape","selectedShape","props","session","answers","filter","answer","id","classes","dimensions","withProp","width","heightProp","height","disabled","hotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","SCALE","scale","strokeWidth","showCorrect","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","markAsCorrect","x","y","polygon","points","React","Component","styles","theme","marginTop","spacing","unit","marginBottom","position","background","palette","common","white","border","alignItems","display","justifyContent","left","top","resize","borderBottom","color","borderRight","bottom","cursor","right","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\n\nexport class Container extends React.Component {\n  isSelected(shape) {\n    const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];\n    return !!selectedShape;\n  }\n\n  correctness = (isCorrect, isChecked) => (isCorrect ? isChecked : !isChecked);\n\n  getEvaluateText = (isCorrect, selected) => {\n    if (selected && isCorrect) {\n      return 'Correctly\\nselected';\n    }\n\n    if (selected && !isCorrect) {\n      return 'Should not have\\nbeen selected';\n    }\n\n    if (!selected && isCorrect) {\n      return 'Should have\\nbeen selected';\n    }\n\n    return null;\n  };\n\n  render() {\n    const {\n      classes,\n      dimensions: { width: withProp, height: heightProp },\n      disabled,\n      hotspotColor,\n      imageUrl,\n      isEvaluateMode,\n      outlineColor,\n      onSelectChoice,\n      shapes: { rectangles, polygons },\n      scale: SCALE,\n      strokeWidth,\n      showCorrect,\n    } = this.props;\n\n    const width = withProp * SCALE;\n    const height = heightProp * SCALE;\n\n    return (\n      <div className={classes.base} style={{ padding: strokeWidth / 2 }}>\n        {imageUrl ? (\n          <div className={classes.imageContainer}>\n            <img\n              alt=\"hotspot-image\"\n              className={classes.image}\n              height=\"auto\"\n              src={imageUrl}\n              style={{ width, height, maxWidth: width, maxHeight: height }}\n            />\n          </div>\n        ) : null}\n\n        <Stage\n          className={classes.stage}\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                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {polygons.map((polygon) => {\n              const selected = this.isSelected(polygon);\n              const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);\n\n              return (\n                <Polygon\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={!!isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  hotspotColor={hotspotColor}\n                  id={polygon.id}\n                  key={polygon.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  points={polygon.points}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    position: 'relative',\n    background: theme.palette.common.white,\n    border: `${theme.spacing.unit}px solid ${theme.palette.common.white}`,\n    width: 'fit-content',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n  resize: {\n    borderBottom: `1px solid ${color.disabled()}`,\n    borderRight: `1px solid ${color.disabled()}`,\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\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 withStyles(styles)(Container);\n"],"file":"container.js"}
+{"version":3,"sources":["../../src/hotspot/container.jsx"],"names":["Container","isCorrect","isChecked","selected","shape","selectedShape","props","session","answers","filter","answer","id","classes","dimensions","withProp","width","heightProp","height","disabled","hotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","circles","SCALE","scale","strokeWidth","showCorrect","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","markAsCorrect","x","y","polygon","points","radius","React","Component","styles","theme","marginTop","spacing","unit","marginBottom","position","background","palette","common","white","border","alignItems","display","justifyContent","left","top","resize","borderBottom","color","borderRight","bottom","cursor","right","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\nimport Circle from './circle';\n\nexport class Container extends React.Component {\n  isSelected(shape) {\n    const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];\n    return !!selectedShape;\n  }\n\n  correctness = (isCorrect, isChecked) => (isCorrect ? isChecked : !isChecked);\n\n  getEvaluateText = (isCorrect, selected) => {\n    if (selected && isCorrect) {\n      return 'Correctly\\nselected';\n    }\n\n    if (selected && !isCorrect) {\n      return 'Should not have\\nbeen selected';\n    }\n\n    if (!selected && isCorrect) {\n      return 'Should have\\nbeen selected';\n    }\n\n    return null;\n  };\n\n  render() {\n    const {\n      classes,\n      dimensions: { width: withProp, height: heightProp },\n      disabled,\n      hotspotColor,\n      imageUrl,\n      isEvaluateMode,\n      outlineColor,\n      onSelectChoice,\n      shapes: { rectangles = [], polygons = [], circles = [] },\n      scale: SCALE,\n      strokeWidth,\n      showCorrect,\n    } = this.props;\n\n    const width = withProp * SCALE;\n    const height = heightProp * SCALE;\n\n    return (\n      <div className={classes.base} style={{ padding: strokeWidth / 2 }}>\n        {imageUrl ? (\n          <div className={classes.imageContainer}>\n            <img\n              alt=\"hotspot-image\"\n              className={classes.image}\n              height=\"auto\"\n              src={imageUrl}\n              style={{ width, height, maxWidth: width, maxHeight: height }}\n            />\n          </div>\n        ) : null}\n\n        <Stage\n          className={classes.stage}\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                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {polygons.map((polygon) => {\n              const selected = this.isSelected(polygon);\n              const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);\n\n              return (\n                <Polygon\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={!!isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  hotspotColor={hotspotColor}\n                  id={polygon.id}\n                  key={polygon.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  points={polygon.points}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {circles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Circle\n                  classes={classes}\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                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    position: 'relative',\n    background: theme.palette.common.white,\n    border: `${theme.spacing.unit}px solid ${theme.palette.common.white}`,\n    width: 'fit-content',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n  resize: {\n    borderBottom: `1px solid ${color.disabled()}`,\n    borderRight: `1px solid ${color.disabled()}`,\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\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 withStyles(styles)(Container);\n"],"file":"container.js"}

package/lib/hotspot/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","main","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      observer: null,\n      scale: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer?.disconnect();\n  }\n\n  onToggle = () => {\n    const { showCorrect } = this.state;\n    this.setState({ showCorrect: !showCorrect });\n  };\n\n  render() {\n    const {\n      session,\n      model: {\n        disabled,\n        imageUrl,\n        prompt,\n        mode,\n        multipleCorrect,\n        shapes,\n        outlineColor,\n        hotspotColor,\n        dimensions,\n        rationale,\n        teacherInstructions,\n        strokeWidth,\n        responseCorrect,\n        language,\n      },\n      onSelectChoice,\n      classes,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <div className={classes.main}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt className=\"prompt\" prompt={prompt} />}\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            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        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  prompt: {\n    fontSize: 'inherit',\n  },\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","main","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      observer: null,\n      scale: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer?.disconnect();\n  }\n\n  onToggle = () => {\n    const { showCorrect } = this.state;\n    this.setState({ showCorrect: !showCorrect });\n  };\n\n  render() {\n    const {\n      session,\n      model: {\n        disabled,\n        imageUrl,\n        prompt,\n        mode,\n        multipleCorrect,\n        shapes,\n        outlineColor,\n        hotspotColor,\n        dimensions,\n        rationale,\n        teacherInstructions,\n        strokeWidth,\n        responseCorrect,\n        language,\n      },\n      onSelectChoice,\n      classes,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <div className={classes.main}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt className=\"prompt\" prompt={prompt} />}\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            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        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  prompt: {\n    fontSize: 'inherit',\n  },\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "6.3.2-next.18+30411b18c",
+  "version": "6.3.2-next.22+e23b434da",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "30411b18c999aaa5f917055fc0b5d87bab289f68",
+  "gitHead": "e23b434da8b2c92880360239a1abb65b5e13de64",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/hotspot/circle.jsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Circle, Group } from 'react-konva';
+import { withStyles } from '@material-ui/core/styles';
+import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
+import { faCorrect, faWrong } from './icons';
+
+class CircleComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  handleClick = (e) => {
+    const { onClick, id, selected, disabled } = this.props;
+
+    if (!disabled) {
+      e.cancelBubble = true;
+      onClick({ id, selected: !selected });
+    }
+  };
+
+  handleMouseEnter = () => {
+    const { disabled } = this.props;
+
+    if (!disabled) {
+      document.body.style.cursor = 'pointer';
+    }
+  };
+
+  handleMouseLeave = () => {
+    document.body.style.cursor = 'default';
+  };
+
+  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>
+    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';
+
+  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>
+    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;
+
+  render() {
+    const {
+      classes,
+      radius,
+      hotspotColor,
+      isCorrect,
+      isEvaluateMode,
+      outlineColor,
+      selected,
+      x,
+      y,
+      evaluateText,
+      strokeWidth,
+      scale,
+      markAsCorrect,
+      showCorrectEnabled,
+    } = this.props;
+
+    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 = faCorrect;
+      }
+    } else {
+      if (selected) {
+        if (isCorrect) {
+          iconSrc = faCorrect;
+        } else {
+          iconSrc = faWrong;
+        }
+      } else if (!isCorrect) {
+        iconSrc = faWrong;
+      }
+    }
+
+    return (
+      <Group scaleX={scale} scaleY={scale}>
+        <Circle
+          classes={classes.base}
+          radius={radius}
+          fill={hotspotColor}
+          onClick={this.handleClick}
+          onTap={this.handleClick}
+          draggable={false}
+          stroke={outlineColorParsed}
+          strokeWidth={outlineWidth}
+          onMouseLeave={this.handleMouseLeave}
+          onMouseEnter={this.handleMouseEnter}
+          x={x}
+          y={y}
+        />
+        {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
+      </Group>
+    );
+  }
+}
+
+const styles = () => ({
+  base: {
+    cursor: 'pointer',
+    opacity: 0.5,
+    position: 'relative',
+  },
+});
+
+CircleComponent.propTypes = {
+  classes: PropTypes.object.isRequired,
+  radius: PropTypes.number.isRequired,
+  hotspotColor: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  isEvaluateMode: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  outlineColor: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  evaluateText: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number,
+  markAsCorrect: PropTypes.bool.isRequired,
+  showCorrectEnabled: PropTypes.bool.isRequired,
+};
+
+CircleComponent.defaultProps = {
+  isCorrect: false,
+  evaluateText: null,
+  strokeWidth: 5,
+  scale: 1,
+};
+
+export default withStyles(styles)(CircleComponent);

package/src/hotspot/container.jsx

@@ -6,6 +6,7 @@ import { color } from '@pie-lib/pie-toolbox/render-ui';
 
 import Rectangle from './rectangle';
 import Polygon from './polygon';
+import Circle from './circle';
 
 export class Container extends React.Component {
   isSelected(shape) {
@@ -41,7 +42,7 @@ export class Container extends React.Component {
       isEvaluateMode,
       outlineColor,
       onSelectChoice,
-      shapes: { rectangles, polygons },
+      shapes: { rectangles = [], polygons = [], circles = [] },
       scale: SCALE,
       strokeWidth,
       showCorrect,
@@ -127,6 +128,35 @@ export class Container extends React.Component {
                 />
               );
             })}
+            {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 (
+                <Circle
+                  classes={classes}
+                  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}
+                  showCorrectEnabled={showCorrect}
+                />
+              );
+            })}
           </Layer>
         </Stage>
       </div>

package/src/hotspot/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {CorrectAnswerToggle} from '@pie-lib/pie-toolbox/correct-answer-toggle';
+import { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';
 import { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';
 import { withStyles } from '@material-ui/core/styles';