@pie-element/hotspot 4.8.4-next.133 → 4.8.4-next.1335

package/lib/hotspot/image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/image.jsx"],"names":["ImageComponent","props","setState","image","state","showTooltip","loadImage","oldProps","src","removeEventListener","handleLoad","window","Image","addEventListener","x","y","tooltip","React","Component","propTypes","PropTypes","string","isRequired","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;IAEMA,c;;;;;AACJ,0BAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,mGA8BN,YAAM;AACjB,YAAKC,QAAL,CAAc;AACZC,QAAAA,KAAK,EAAE,MAAKA;AADA,OAAd;AAGD,KAlCkB;AAEjB,UAAKC,KAAL,GAAa;AACXD,MAAAA,KAAK,EAAE,IADI;AAEXE,MAAAA,WAAW,EAAE;AAFF,KAAb;AAFiB;AAMlB;;;;WAED,6BAAoB;AAClB,WAAKC,SAAL;AACD;;;WAED,4BAAmBC,QAAnB,EAA6B;AAC3B,UAAIA,QAAQ,CAACC,GAAT,KAAiB,KAAKP,KAAL,CAAWO,GAAhC,EAAqC;AACnC,aAAKF,SAAL;AACD;AACF;;;WAED,gCAAuB;AACrB,WAAKH,KAAL,CAAWM,mBAAX,CAA+B,MAA/B,EAAuC,KAAKC,UAA5C;AACD;;;WAED,qBAAY;AAAA,UACFF,GADE,GACM,KAAKP,KADX,CACFO,GADE;AAGV,WAAKL,KAAL,GAAa,IAAIQ,MAAM,CAACC,KAAX,EAAb;AACA,WAAKT,KAAL,CAAWK,GAAX,GAAiBA,GAAjB;AACA,WAAKL,KAAL,CAAWU,gBAAX,CAA4B,MAA5B,EAAoC,KAAKH,UAAzC;AACD;;;WAQD,kBAAS;AAAA;;AAAA,wBACmB,KAAKT,KADxB;AAAA,UACCa,CADD,eACCA,CADD;AAAA,UACIC,CADJ,eACIA,CADJ;AAAA,UACOC,OADP,eACOA,OADP;AAAA,wBAEwB,KAAKZ,KAF7B;AAAA,UAECD,KAFD,eAECA,KAFD;AAAA,UAEQE,WAFR,eAEQA,WAFR;AAIP,0BACE,gCAAC,iBAAD,qBACE,gCAAC,iBAAD;AACE,QAAA,KAAK,EAAE,EADT;AAEE,QAAA,MAAM,EAAE,EAFV;AAGE,QAAA,CAAC,EAAES,CAHL;AAIE,QAAA,CAAC,EAAEC,CAJL;AAKE,QAAA,KAAK,EAAEZ,KALT;AAME,QAAA,YAAY,EAAE;AAAA,iBAAM,MAAI,CAACD,QAAL,CAAc;AAAEG,YAAAA,WAAW,EAAE;AAAf,WAAd,CAAN;AAAA,SANhB;AAOE,QAAA,YAAY,EAAE;AAAA,iBAAM,MAAI,CAACH,QAAL,CAAc;AAAEG,YAAAA,WAAW,EAAE;AAAf,WAAd,CAAN;AAAA;AAPhB,QADF,EAWGA,WAAW,IAAIW,OAAf,iBACC,gCAAC,iBAAD;AAAO,QAAA,CAAC,EAAEF,CAAC,GAAG,EAAd;AAAkB,QAAA,CAAC,EAAEC,CAAC,GAAG;AAAzB,sBACE,gCAAC,eAAD;AACE,QAAA,IAAI,EAAC,OADP;AAEE,QAAA,YAAY,EAAE,CAFhB;AAGE,QAAA,OAAO,EAAE;AAHX,QADF,eAME,gCAAC,gBAAD;AAAM,QAAA,IAAI,EAAEC,OAAZ;AAAqB,QAAA,OAAO,EAAE;AAA9B,QANF,CAZJ,CADF;AAwBD;;;EAjE0BC,kBAAMC,S;;AAoEnClB,cAAc,CAACmB,SAAf,GAA2B;AACzBX,EAAAA,GAAG,EAAEY,sBAAUC,MAAV,CAAiBC,UADG;AAEzBR,EAAAA,CAAC,EAAEM,sBAAUG,MAAV,CAAiBD,UAFK;AAGzBP,EAAAA,CAAC,EAAEK,sBAAUG,MAAV,CAAiBD,UAHK;AAIzBN,EAAAA,OAAO,EAAEI,sBAAUC;AAJM,CAA3B;eAOerB,c","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Image, Text, Tag, Label } from 'react-konva';\n\nclass ImageComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      image: null,\n      showTooltip: false\n    };\n  }\n\n  componentDidMount() {\n    this.loadImage();\n  }\n\n  componentDidUpdate(oldProps) {\n    if (oldProps.src !== this.props.src) {\n      this.loadImage();\n    }\n  }\n\n  componentWillUnmount() {\n    this.image.removeEventListener('load', this.handleLoad);\n  }\n\n  loadImage() {\n    const { src } = this.props;\n\n    this.image = new window.Image();\n    this.image.src = src;\n    this.image.addEventListener('load', this.handleLoad);\n  }\n\n  handleLoad = () => {\n    this.setState({\n      image: this.image\n    });\n  };\n\n  render() {\n    const { x, y, tooltip } = this.props;\n    const { image, showTooltip } = this.state;\n\n    return (\n      <Group>\n        <Image\n          width={20}\n          height={20}\n          x={x}\n          y={y}\n          image={image}\n          onMouseEnter={() => this.setState({ showTooltip: true })}\n          onMouseLeave={() => this.setState({ showTooltip: false })}\n        />\n\n        {showTooltip && tooltip && (\n          <Label x={x - 30} y={y + 25}>\n            <Tag\n              fill=\"white\"\n              cornerRadius={5}\n              opacity={0.9}\n            />\n            <Text text={tooltip} padding={5} />\n          </Label>\n        )}\n      </Group>\n    );\n  }\n}\n\nImageComponent.propTypes = {\n  src: PropTypes.string.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  tooltip: PropTypes.string\n};\n\nexport default ImageComponent;\n"],"file":"image.js"}
+{"version":3,"sources":["../../src/hotspot/image.jsx"],"names":["ImageComponent","props","setState","image","state","showTooltip","loadImage","oldProps","src","removeEventListener","handleLoad","window","Image","addEventListener","x","y","tooltip","React","Component","propTypes","PropTypes","string","isRequired","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;IAEMA,c;;;;;AACJ,0BAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,mGA8BN,YAAM;AACjB,YAAKC,QAAL,CAAc;AACZC,QAAAA,KAAK,EAAE,MAAKA;AADA,OAAd;AAGD,KAlCkB;AAEjB,UAAKC,KAAL,GAAa;AACXD,MAAAA,KAAK,EAAE,IADI;AAEXE,MAAAA,WAAW,EAAE;AAFF,KAAb;AAFiB;AAMlB;;;;WAED,6BAAoB;AAClB,WAAKC,SAAL;AACD;;;WAED,4BAAmBC,QAAnB,EAA6B;AAC3B,UAAIA,QAAQ,CAACC,GAAT,KAAiB,KAAKP,KAAL,CAAWO,GAAhC,EAAqC;AACnC,aAAKF,SAAL;AACD;AACF;;;WAED,gCAAuB;AACrB,WAAKH,KAAL,CAAWM,mBAAX,CAA+B,MAA/B,EAAuC,KAAKC,UAA5C;AACD;;;WAED,qBAAY;AACV,UAAQF,GAAR,GAAgB,KAAKP,KAArB,CAAQO,GAAR;AAEA,WAAKL,KAAL,GAAa,IAAIQ,MAAM,CAACC,KAAX,EAAb;AACA,WAAKT,KAAL,CAAWK,GAAX,GAAiBA,GAAjB;AACA,WAAKL,KAAL,CAAWU,gBAAX,CAA4B,MAA5B,EAAoC,KAAKH,UAAzC;AACD;;;WAQD,kBAAS;AAAA;;AACP,wBAA0B,KAAKT,KAA/B;AAAA,UAAQa,CAAR,eAAQA,CAAR;AAAA,UAAWC,CAAX,eAAWA,CAAX;AAAA,UAAcC,OAAd,eAAcA,OAAd;AACA,wBAA+B,KAAKZ,KAApC;AAAA,UAAQD,KAAR,eAAQA,KAAR;AAAA,UAAeE,WAAf,eAAeA,WAAf;AAEA,0BACE,gCAAC,iBAAD,qBACE,gCAAC,iBAAD;AACE,QAAA,KAAK,EAAE,EADT;AAEE,QAAA,MAAM,EAAE,EAFV;AAGE,QAAA,CAAC,EAAES,CAHL;AAIE,QAAA,CAAC,EAAEC,CAJL;AAKE,QAAA,KAAK,EAAEZ,KALT;AAME,QAAA,YAAY,EAAE;AAAA,iBAAM,MAAI,CAACD,QAAL,CAAc;AAAEG,YAAAA,WAAW,EAAE;AAAf,WAAd,CAAN;AAAA,SANhB;AAOE,QAAA,YAAY,EAAE;AAAA,iBAAM,MAAI,CAACH,QAAL,CAAc;AAAEG,YAAAA,WAAW,EAAE;AAAf,WAAd,CAAN;AAAA;AAPhB,QADF,EAWGA,WAAW,IAAIW,OAAf,iBACC,gCAAC,iBAAD;AAAO,QAAA,CAAC,EAAEF,CAAC,GAAG,EAAd;AAAkB,QAAA,CAAC,EAAEC,CAAC,GAAG;AAAzB,sBACE,gCAAC,eAAD;AACE,QAAA,IAAI,EAAC,OADP;AAEE,QAAA,YAAY,EAAE,CAFhB;AAGE,QAAA,OAAO,EAAE;AAHX,QADF,eAME,gCAAC,gBAAD;AAAM,QAAA,IAAI,EAAEC,OAAZ;AAAqB,QAAA,OAAO,EAAE;AAA9B,QANF,CAZJ,CADF;AAwBD;;;EAjE0BC,kBAAMC,S;;AAoEnClB,cAAc,CAACmB,SAAf,GAA2B;AACzBX,EAAAA,GAAG,EAAEY,sBAAUC,MAAV,CAAiBC,UADG;AAEzBR,EAAAA,CAAC,EAAEM,sBAAUG,MAAV,CAAiBD,UAFK;AAGzBP,EAAAA,CAAC,EAAEK,sBAAUG,MAAV,CAAiBD,UAHK;AAIzBN,EAAAA,OAAO,EAAEI,sBAAUC;AAJM,CAA3B;eAOerB,c","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Image, Text, Tag, Label } from 'react-konva';\n\nclass ImageComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      image: null,\n      showTooltip: false\n    };\n  }\n\n  componentDidMount() {\n    this.loadImage();\n  }\n\n  componentDidUpdate(oldProps) {\n    if (oldProps.src !== this.props.src) {\n      this.loadImage();\n    }\n  }\n\n  componentWillUnmount() {\n    this.image.removeEventListener('load', this.handleLoad);\n  }\n\n  loadImage() {\n    const { src } = this.props;\n\n    this.image = new window.Image();\n    this.image.src = src;\n    this.image.addEventListener('load', this.handleLoad);\n  }\n\n  handleLoad = () => {\n    this.setState({\n      image: this.image\n    });\n  };\n\n  render() {\n    const { x, y, tooltip } = this.props;\n    const { image, showTooltip } = this.state;\n\n    return (\n      <Group>\n        <Image\n          width={20}\n          height={20}\n          x={x}\n          y={y}\n          image={image}\n          onMouseEnter={() => this.setState({ showTooltip: true })}\n          onMouseLeave={() => this.setState({ showTooltip: false })}\n        />\n\n        {showTooltip && tooltip && (\n          <Label x={x - 30} y={y + 25}>\n            <Tag\n              fill=\"white\"\n              cornerRadius={5}\n              opacity={0.9}\n            />\n            <Text text={tooltip} padding={5} />\n          </Label>\n        )}\n      </Group>\n    );\n  }\n}\n\nImageComponent.propTypes = {\n  src: PropTypes.string.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  tooltip: PropTypes.string\n};\n\nexport default ImageComponent;\n"],"file":"image.js"}

package/lib/hotspot/index.js

@@ -27,15 +27,17 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _renderUi = require("@pie-lib/render-ui");
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
 
-var _container = _interopRequireDefault(require("./container"));
+var _renderUi = require("@pie-lib/render-ui");
 
 var _styles = require("@material-ui/core/styles");
 
+var _container = _interopRequireDefault(require("./container"));
+
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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; } }
 
 var HotspotComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(HotspotComponent, _React$Component);
@@ -55,12 +57,58 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
       });
     });
     _this.state = {
-      showCorrect: false
+      showCorrect: false,
+      observer: null,
+      scale: 1
     };
     return _this;
   }
 
   (0, _createClass2["default"])(HotspotComponent, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function () {
+          var _document$getElementB, _document$getElementB2;
+
+          var target = (_document$getElementB = document.getElementById('question-container')) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.style) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.cssText;
+          var zoom = target === null || target === void 0 ? void 0 : target.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
+          var zoomParsed = zoom === null || zoom === void 0 ? void 0 : zoom.replace(/\s/g, '');
+
+          if (zoomParsed) {
+            var newScale = parseFloat(zoomParsed) / 100;
+
+            if (newScale !== _this2.state.scale) {
+              _this2.setState({
+                scale: parseFloat(zoomParsed) / 100
+              });
+            }
+          } else if (!zoomParsed && _this2.state.scale !== 1) {
+            _this2.setState({
+              scale: 1
+            });
+          }
+        });
+      });
+      var target = document.getElementById('question-container');
+
+      if (target) {
+        this.observer.observe(target, {
+          attributes: true,
+          attributeFilter: ['style']
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$observer;
+
+      (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.disconnect();
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -78,25 +126,30 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
           rationale = _this$props$model.rationale,
           teacherInstructions = _this$props$model.teacherInstructions,
           strokeWidth = _this$props$model.strokeWidth,
+          responseCorrect = _this$props$model.responseCorrect,
           onSelectChoice = _this$props.onSelectChoice,
           classes = _this$props.classes;
+      var showCorrect = this.state.showCorrect;
       var isEvaluateMode = mode === 'evaluate';
-      return /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
+      return /*#__PURE__*/_react["default"].createElement("div", null, showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
+        show: showCorrectAnswerToggle,
+        toggled: showCorrect,
+        onToggle: this.onToggle.bind(this)
+      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement("br", null), teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         },
         className: classes.collapsible
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        className: "prompt",
+        prompt: teacherInstructions
       })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.prompt
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        dangerouslySetInnerHTML: {
-          __html: prompt
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        className: "prompt",
+        prompt: prompt
       })), imageUrl ? /*#__PURE__*/_react["default"].createElement(_container["default"], {
         isEvaluateMode: isEvaluateMode,
         session: session,
@@ -108,17 +161,18 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
         onSelectChoice: onSelectChoice,
         shapes: shapes,
         disabled: disabled,
-        strokeWidth: strokeWidth
+        strokeWidth: strokeWidth,
+        scale: this.state.scale,
+        showCorrect: showCorrect
       }) : null, rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Rationale',
           visible: 'Hide Rationale'
         },
         className: classes.collapsible
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: rationale
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        className: "prompt",
+        prompt: rationale
       })));
     }
   }]);

package/lib/hotspot/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","onSelectChoice","classes","isEvaluateMode","hidden","visible","collapsible","__html","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","paddingTop","spacing","unit","paddingBottom","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport { Collapsible, hasText } from '@pie-lib/render-ui';\nimport Container from './container';\nimport { withStyles } from '@material-ui/core/styles';\n\nclass HotspotComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false\n    };\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      },\n      onSelectChoice,\n      classes\n    } = this.props;\n\n    const isEvaluateMode = mode === 'evaluate';\n\n    return (\n      <div>\n        {\n          teacherInstructions && hasText(teacherInstructions) && (\n            <Collapsible\n              labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n              className={classes.collapsible}\n            >\n              <div dangerouslySetInnerHTML={{ __html: teacherInstructions }}/>\n            </Collapsible>\n          )\n        }\n\n        <Typography className={classes.prompt}>\n          <span dangerouslySetInnerHTML={{ __html: prompt }} />\n        </Typography>\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          />\n        ) : null}\n\n        {\n          rationale && hasText(rationale) && (\n            <Collapsible\n              labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}\n              className={classes.collapsible}\n            >\n              <div dangerouslySetInnerHTML={{ __html: rationale }} />\n            </Collapsible>\n          )\n        }\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  collapsible: {\n    paddingTop: theme.spacing.unit * 2,\n    paddingBottom: 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","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","onToggle","bind","hidden","visible","collapsible","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","paddingTop","spacing","unit","paddingBottom","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport {Collapsible, hasText, PreviewPrompt} from '@pie-lib/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(\n          target.indexOf('--pie-zoom') + 11,\n          target.lastIndexOf('%')\n        );\n\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\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    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      },\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>\n        {showCorrectAnswerToggle && (\n          <CorrectAnswerToggle\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.onToggle.bind(this)}\n          />\n        )}\n        {showCorrectAnswerToggle && <br />}\n        {\n          teacherInstructions && hasText(teacherInstructions) && (\n            <Collapsible\n              labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n              className={classes.collapsible}\n            >\n              <PreviewPrompt\n                className=\"prompt\"\n                prompt={teacherInstructions}\n              />\n            </Collapsible>\n          )\n        }\n\n        <Typography className={classes.prompt}>\n          <PreviewPrompt\n            className=\"prompt\"\n            prompt={prompt}\n          />\n        </Typography>\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        {\n          rationale && hasText(rationale) && (\n            <Collapsible\n              labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}\n              className={classes.collapsible}\n            >\n              <PreviewPrompt\n                className=\"prompt\"\n                prompt={rationale}\n              />\n            </Collapsible>\n          )\n        }\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  collapsible: {\n    paddingTop: theme.spacing.unit * 2,\n    paddingBottom: theme.spacing.unit * 2,\n  },\n  prompt: {\n    fontSize: 'inherit'\n  }\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}

package/lib/hotspot/polygon.js

@@ -35,7 +35,7 @@ var _icons = require("./icons");
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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; } }
 
 var PolygonComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(PolygonComponent, _React$Component);
@@ -97,11 +97,11 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
       document.body.style.cursor = 'default';
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateOutlineColor", function (isCorrect, outlineColor) {
-      return isCorrect ? outlineColor : 'red';
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateOutlineColor", function (isCorrect, markAsCorrect, outlineColor) {
+      return markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOutlineWidth", function (selected, strokeWidth) {
-      return selected ? strokeWidth : 0;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOutlineWidth", function (showCorrectEnabled, selected, markAsCorrect, strokeWidth) {
+      return markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0;
     });
     return _this;
   }
@@ -118,30 +118,52 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
           selected = _this$props2.selected,
           points = _this$props2.points,
           evaluateText = _this$props2.evaluateText,
-          strokeWidth = _this$props2.strokeWidth;
-      var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, outlineColor) : outlineColor;
-      var outlineWidth = this.getOutlineWidth(selected, strokeWidth);
+          strokeWidth = _this$props2.strokeWidth,
+          scale = _this$props2.scale,
+          markAsCorrect = _this$props2.markAsCorrect,
+          showCorrectEnabled = _this$props2.showCorrectEnabled;
+      var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor) : outlineColor;
+      var outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
       var pointsParsed = this.parsePointsForKonva(points);
       var center = this.getPolygonCenter(points);
       var iconX = center[0];
-      var iconY = center[1]; // Correctly selected hotspot: white checkmark in green circle (plus the selected hotspot will have a heavy outline, as on “Gather”)
-      // Correctly not selected hotspot: none
-      // Incorrectly selected hostpot: white “X” in red circle, plus the heavy outline around the selection should appear in red
-      // Incorrectly not selected hotspot: white “X” in red circle
+      var 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
 
       var iconSrc;
 
-      if (selected) {
-        if (isCorrect) {
+      if (showCorrectEnabled) {
+        if (selected && isCorrect || !selected && !isCorrect) {
           iconSrc = _icons.faCorrect;
-        } else {
+        }
+      } else {
+        if (selected) {
+          if (isCorrect) {
+            iconSrc = _icons.faCorrect;
+          } else {
+            iconSrc = _icons.faWrong;
+          }
+        } else if (!isCorrect) {
           iconSrc = _icons.faWrong;
         }
-      } else if (!isCorrect) {
-        iconSrc = _icons.faWrong;
       }
 
-      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, null, /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
+        scaleX: scale,
+        scaleY: scale
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
         points: pointsParsed,
         closed: true,
         classes: classes.base,
@@ -186,11 +208,15 @@ PolygonComponent.propTypes = {
   points: _propTypes["default"].array.isRequired,
   selected: _propTypes["default"].bool.isRequired,
   evaluateText: _propTypes["default"].string,
-  strokeWidth: _propTypes["default"].number
+  strokeWidth: _propTypes["default"].number,
+  scale: _propTypes["default"].number,
+  markAsCorrect: _propTypes["default"].bool.isRequired,
+  showCorrectEnabled: _propTypes["default"].bool.isRequired
 };
 PolygonComponent.defaultProps = {
   evaluateText: null,
-  strokeWidth: 5
+  strokeWidth: 5,
+  scale: 1
 };
 
 var _default = (0, _styles.withStyles)(styles)(PolygonComponent);

package/lib/hotspot/polygon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/polygon.jsx"],"names":["PolygonComponent","props","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","outlineColor","strokeWidth","classes","hotspotColor","isEvaluateMode","evaluateText","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","string","bool","func","array","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Image from './image';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n  constructor(props) {\n    super(props);\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 });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n  };\n\n  getEvaluateOutlineColor = (isCorrect, outlineColor) => isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (selected, strokeWidth) => selected ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      points,\n      evaluateText,\n      strokeWidth\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, outlineColor)\n      : outlineColor;\n    const outlineWidth = this.getOutlineWidth(selected, 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    // Correctly selected hotspot: white checkmark in green circle (plus the selected hotspot will have a heavy outline, as on “Gather”)\n    // Correctly not selected hotspot: none\n    // Incorrectly selected hostpot: white “X” in red circle, plus the heavy outline around the selection should appear in red\n    // Incorrectly not selected hotspot: white “X” in red circle\n    let iconSrc;\n\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    return (\n      <Group>\n        <Line\n          points={pointsParsed}\n          closed={true}\n          classes={classes.base}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n        />\n        {(isEvaluateMode && iconSrc) ? (\n          <Image\n            src={iconSrc}\n            x={iconX}\n            y={iconY}\n            tooltip={evaluateText}\n          />\n        ): null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative'\n  },\n});\n\nPolygonComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.bool.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.array.isRequired,\n  selected: PropTypes.bool.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number\n};\n\nPolygonComponent.defaultProps = {\n  evaluateText: null,\n  strokeWidth: 5\n};\n\nexport default withStyles(styles)(PolygonComponent);\n"],"file":"polygon.js"}
+{"version":3,"sources":["../../src/hotspot/polygon.jsx"],"names":["PolygonComponent","props","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","hotspotColor","isEvaluateMode","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","string","bool","func","array","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Image from './image';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n  constructor(props) {\n    super(props);\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 });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) => markAsCorrect ? 'green' : (isCorrect ? outlineColor : 'red')\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) => markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      points,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n    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\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        <Line\n          points={pointsParsed}\n          closed={true}\n          classes={classes.base}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n        />\n        {(isEvaluateMode && iconSrc) ? (\n          <Image\n            src={iconSrc}\n            x={iconX}\n            y={iconY}\n            tooltip={evaluateText}\n          />\n        ): null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative'\n  },\n});\n\nPolygonComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  id: PropTypes.string.isRequired,\n  isCorrect: PropTypes.bool.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  points: PropTypes.array.isRequired,\n  selected: PropTypes.bool.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired\n};\n\nPolygonComponent.defaultProps = {\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1\n};\n\nexport default withStyles(styles)(PolygonComponent);\n"],"file":"polygon.js"}

package/lib/hotspot/rectangle.js

@@ -35,7 +35,7 @@ var _icons = require("./icons");
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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; } }
 
 var RectComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(RectComponent, _React$Component);
@@ -72,11 +72,11 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
       document.body.style.cursor = 'default';
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateOutlineColor", function (isCorrect, outlineColor) {
-      return isCorrect ? outlineColor : 'red';
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateOutlineColor", function (isCorrect, markAsCorrect, outlineColor) {
+      return markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOutlineWidth", function (selected, strokeWidth) {
-      return selected ? strokeWidth : 0;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOutlineWidth", function (showCorrectEnabled, selected, markAsCorrect, strokeWidth) {
+      return markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0;
     });
     return _this;
   }
@@ -96,28 +96,50 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
           x = _this$props2.x,
           y = _this$props2.y,
           evaluateText = _this$props2.evaluateText,
-          strokeWidth = _this$props2.strokeWidth;
-      var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, outlineColor) : outlineColor;
-      var outlineWidth = this.getOutlineWidth(selected, strokeWidth);
+          strokeWidth = _this$props2.strokeWidth,
+          scale = _this$props2.scale,
+          markAsCorrect = _this$props2.markAsCorrect,
+          showCorrectEnabled = _this$props2.showCorrectEnabled;
+      var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor) : outlineColor;
+      var outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);
       var iconX = x + width / 2 - 10;
-      var iconY = y + height / 2 - 10; // Correctly selected hotspot: white checkmark in green circle (plus the selected hotspot will have a heavy outline, as on “Gather”)
-      // Correctly not selected hotspot: none
-      // Incorrectly selected hostpot: white “X” in red circle, plus the heavy outline around the selection should appear in red
-      // Incorrectly not selected hotspot: white “X” in red circle
+      var 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
 
       var iconSrc;
 
-      if (selected) {
-        if (isCorrect) {
+      if (showCorrectEnabled) {
+        if (selected && isCorrect || !selected && !isCorrect) {
           iconSrc = _icons.faCorrect;
-        } else {
+        }
+      } else {
+        if (selected) {
+          if (isCorrect) {
+            iconSrc = _icons.faCorrect;
+          } else {
+            iconSrc = _icons.faWrong;
+          }
+        } else if (!isCorrect) {
           iconSrc = _icons.faWrong;
         }
-      } else if (!isCorrect) {
-        iconSrc = _icons.faWrong;
       }
 
-      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, null, /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
+        scaleX: scale,
+        scaleY: scale
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
         classes: classes.base,
         width: width,
         height: height,
@@ -167,12 +189,16 @@ RectComponent.propTypes = {
   x: _propTypes["default"].number.isRequired,
   y: _propTypes["default"].number.isRequired,
   evaluateText: _propTypes["default"].string,
-  strokeWidth: _propTypes["default"].number
+  strokeWidth: _propTypes["default"].number,
+  scale: _propTypes["default"].number,
+  markAsCorrect: _propTypes["default"].bool.isRequired,
+  showCorrectEnabled: _propTypes["default"].bool.isRequired
 };
 RectComponent.defaultProps = {
   isCorrect: false,
   evaluateText: null,
-  strokeWidth: 5
+  strokeWidth: 5,
+  scale: 1
 };
 
 var _default = (0, _styles.withStyles)(styles)(RectComponent);

package/lib/hotspot/rectangle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","outlineColor","strokeWidth","classes","height","hotspotColor","isEvaluateMode","width","x","y","evaluateText","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Image from './image';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\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 });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n  };\n\n  getEvaluateOutlineColor = (isCorrect, outlineColor) => isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (selected, strokeWidth) => selected ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      height,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      width,\n      x,\n      y,\n      evaluateText,\n      strokeWidth\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(selected, strokeWidth);\n\n    const iconX = (x + (width / 2)) - 10;\n    const iconY = (y + (height / 2)) - 10;\n\n    // Correctly selected hotspot: white checkmark in green circle (plus the selected hotspot will have a heavy outline, as on “Gather”)\n    // Correctly not selected hotspot: none\n    // Incorrectly selected hostpot: white “X” in red circle, plus the heavy outline around the selection should appear in red\n    // Incorrectly not selected hotspot: white “X” in red circle\n    let iconSrc;\n\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    return (\n      <Group>\n        <Rect\n          classes={classes.base}\n          width={width}\n          height={height}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {(isEvaluateMode && iconSrc) ? (\n          <Image\n            src={iconSrc}\n            x={iconX}\n            y={iconY}\n            tooltip={evaluateText}\n          />\n        ): null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative'\n  },\n});\n\nRectComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\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  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number\n};\n\nRectComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"rectangle.js"}
+{"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","classes","height","hotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Image from './image';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n  constructor(props) {\n    super(props);\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 });\n    }\n  };\n\n  handleMouseEnter = () => {\n    const { disabled } = this.props;\n\n    if (!disabled) {\n      document.body.style.cursor = 'pointer';\n    }\n  };\n\n  handleMouseLeave = () => {\n    document.body.style.cursor = 'default';\n  };\n\n  getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) => markAsCorrect ? 'green' : (isCorrect ? outlineColor : 'red')\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) => markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      classes,\n      height,\n      hotspotColor,\n      isCorrect,\n      isEvaluateMode,\n      outlineColor,\n      selected,\n      width,\n      x,\n      y,\n      evaluateText,\n      strokeWidth,\n      scale,\n      markAsCorrect,\n      showCorrectEnabled\n    } = this.props;\n\n    const outlineColorParsed = isEvaluateMode\n      ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n      : outlineColor;\n\n    const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n    const iconX = (x + (width / 2)) - 10;\n    const iconY = (y + (height / 2)) - 10;\n\n    // \"Show Correct Answer\" Enabled:\n    //   - Correctly Selected: white checkmark in green circle\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected: none\n    //   - Incorrectly Not Selected: white checkmark in green circle\n    // \"Show Correct Answer\" Disabled:\n    //   - Correctly Selected:\n    //     - white checkmark in green circle\n    //     - heavy outline, as on “Gather”\n    //   - Correctly Not Selected: none\n    //   - Incorrectly Selected:\n    //     - white \"X\" in red circle\n    //     - heavy outline around the selection should appear in red\n    //   - Incorrectly Not Selected: white \"X\" in red circle\n    let iconSrc;\n\n    if (showCorrectEnabled) {\n      if ((selected && isCorrect) || (!selected && !isCorrect)) {\n        iconSrc = faCorrect;\n      }\n    } else {\n      if (selected) {\n        if (isCorrect) {\n          iconSrc = faCorrect;\n        } else {\n          iconSrc = faWrong;\n        }\n      } else if (!isCorrect) {\n        iconSrc = faWrong;\n      }\n    }\n\n    return (\n      <Group scaleX={scale} scaleY={scale}>\n        <Rect\n          classes={classes.base}\n          width={width}\n          height={height}\n          fill={hotspotColor}\n          onClick={this.handleClick}\n          onTap={this.handleClick}\n          draggable={false}\n          stroke={outlineColorParsed}\n          strokeWidth={outlineWidth}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseEnter={this.handleMouseEnter}\n          x={x}\n          y={y}\n        />\n        {(isEvaluateMode && iconSrc) ? (\n          <Image\n            src={iconSrc}\n            x={iconX}\n            y={iconY}\n            tooltip={evaluateText}\n          />\n        ): null}\n      </Group>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    cursor: 'pointer',\n    opacity: 0.5,\n    position: 'relative'\n  },\n});\n\nRectComponent.propTypes = {\n  classes: PropTypes.object.isRequired,\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  disabled: PropTypes.bool.isRequired,\n  onClick: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selected: PropTypes.bool.isRequired,\n  width: PropTypes.number.isRequired,\n  x: PropTypes.number.isRequired,\n  y: PropTypes.number.isRequired,\n  evaluateText: PropTypes.string,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  markAsCorrect: PropTypes.bool.isRequired,\n  showCorrectEnabled: PropTypes.bool.isRequired\n};\n\nRectComponent.defaultProps = {\n  isCorrect: false,\n  evaluateText: null,\n  strokeWidth: 5,\n  scale: 1\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"rectangle.js"}

package/lib/index.js

@@ -33,7 +33,7 @@ var _sessionUpdater = require("./session-updater");
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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; } }
 
 var Hotspot = /*#__PURE__*/function (_HTMLElement) {
   (0, _inherits2["default"])(Hotspot, _HTMLElement);
@@ -64,6 +64,9 @@ var Hotspot = /*#__PURE__*/function (_HTMLElement) {
     }
   }, {
     key: "session",
+    get: function get() {
+      return this._session;
+    },
     set: function set(s) {
       if (s && !s.answers) {
         s.answers = [];

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Hotspot","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","_session","Array","isArray","answers","length","s","data","SessionChangedEvent","el","React","createElement","HotspotComponent","model","session","onSelectChoice","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAKA;;AACA;;;;;;IAEqBA,O;;;;;;;;;;;;SACnB,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKE,aAAL,CACE,IAAIC,8BAAJ,CACE,KAAKC,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKL,MAHT,CADF;;AAOA,WAAKM,OAAL;AACD;;;WAED,sBAAa;AACX,UAAI,CAAC,KAAKC,QAAV,EAAoB;AAClB,eAAO,KAAP;AACD;;AAED,aACEC,KAAK,CAACC,OAAN,CAAc,KAAKF,QAAL,CAAcG,OAA5B,KAAwC,KAAKH,QAAL,CAAcG,OAAd,CAAsBC,MAAtB,GAA+B,CADzE;AAGD;;;SAED,aAAYC,CAAZ,EAAe;AACb,UAAIA,CAAC,IAAI,CAACA,CAAC,CAACF,OAAZ,EAAqB;AACnBE,QAAAA,CAAC,CAACF,OAAF,GAAY,EAAZ;AACD;;AAED,WAAKH,QAAL,GAAgBK,CAAhB;;AACA,WAAKN,OAAL;AACD;;;WAED,wBAAeO,IAAf,EAAqB;AACnB,8CAAmB,KAAKN,QAAxB,EAAkC,KAAKP,MAAvC,EAA+Ca,IAA/C;AAEA,WAAKZ,aAAL,CACE,IAAIa,oCAAJ,CAAwB,KAAKX,OAAL,CAAaC,WAAb,EAAxB,EAAoD,KAAKC,UAAL,EAApD,CADF;;AAIA,WAAKC,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKN,MAAL,IAAe,KAAKO,QAAxB,EAAkC;AAChC,YAAMQ,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,mBAApB,EAAsC;AAC/CC,UAAAA,KAAK,EAAE,KAAKnB,MADmC;AAE/CoB,UAAAA,OAAO,EAAE,KAAKb,QAFiC;AAG/Cc,UAAAA,cAAc,EAAE,KAAKA,cAAL,CAAoBC,IAApB,CAAyB,IAAzB;AAH+B,SAAtC,CAAX;;AAKAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDA1DkCU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport {\n  SessionChangedEvent,\n  ModelSetEvent\n} from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session) {\n      return false;\n    }\n\n    return (\n      Array.isArray(this._session.answers) && this._session.answers.length > 0\n    );\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  onSelectChoice(data) {\n    updateSessionValue(this._session, this._model, data);\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(HotspotComponent, {\n        model: this._model,\n        session: this._session,\n        onSelectChoice: this.onSelectChoice.bind(this)\n      });\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["Hotspot","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","_session","Array","isArray","answers","length","s","data","SessionChangedEvent","el","React","createElement","HotspotComponent","model","session","onSelectChoice","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAKA;;AACA;;;;;;IAEqBA,O;;;;;;;;;;;;SACnB,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKE,aAAL,CACE,IAAIC,8BAAJ,CACE,KAAKC,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKL,MAHT,CADF;;AAOA,WAAKM,OAAL;AACD;;;WAED,sBAAa;AACX,UAAI,CAAC,KAAKC,QAAV,EAAoB;AAClB,eAAO,KAAP;AACD;;AAED,aACEC,KAAK,CAACC,OAAN,CAAc,KAAKF,QAAL,CAAcG,OAA5B,KAAwC,KAAKH,QAAL,CAAcG,OAAd,CAAsBC,MAAtB,GAA+B,CADzE;AAGD;;;SAWD,eAAc;AACZ,aAAO,KAAKJ,QAAZ;AACD,K;SAXD,aAAYK,CAAZ,EAAe;AACb,UAAIA,CAAC,IAAI,CAACA,CAAC,CAACF,OAAZ,EAAqB;AACnBE,QAAAA,CAAC,CAACF,OAAF,GAAY,EAAZ;AACD;;AAED,WAAKH,QAAL,GAAgBK,CAAhB;;AACA,WAAKN,OAAL;AACD;;;WAMD,wBAAeO,IAAf,EAAqB;AACnB,8CAAmB,KAAKN,QAAxB,EAAkC,KAAKP,MAAvC,EAA+Ca,IAA/C;AAEA,WAAKZ,aAAL,CACE,IAAIa,oCAAJ,CAAwB,KAAKX,OAAL,CAAaC,WAAb,EAAxB,EAAoD,KAAKC,UAAL,EAApD,CADF;;AAIA,WAAKC,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKN,MAAL,IAAe,KAAKO,QAAxB,EAAkC;AAChC,YAAMQ,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,mBAApB,EAAsC;AAC/CC,UAAAA,KAAK,EAAE,KAAKnB,MADmC;AAE/CoB,UAAAA,OAAO,EAAE,KAAKb,QAFiC;AAG/Cc,UAAAA,cAAc,EAAE,KAAKA,cAAL,CAAoBC,IAApB,CAAyB,IAAzB;AAH+B,SAAtC,CAAX;;AAMAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDA/DkCU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport {\n  SessionChangedEvent,\n  ModelSetEvent\n} from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session) {\n      return false;\n    }\n\n    return (\n      Array.isArray(this._session.answers) && this._session.answers.length > 0\n    );\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  onSelectChoice(data) {\n    updateSessionValue(this._session, this._model, data);\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(HotspotComponent, {\n        model: this._model,\n        session: this._session,\n        onSelectChoice: this.onSelectChoice.bind(this)\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}

package/lib/session-updater.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/session-updater.js"],"names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push"],"mappings":";;;;;;;AAAO,SAASA,kBAAT,CAA4BC,OAA5B,EAAqCC,KAArC,EAA4CC,IAA5C,EAAkD;AAAA,MAC/CC,EAD+C,GAC9BD,IAD8B,CAC/CC,EAD+C;AAAA,MAC3CC,QAD2C,GAC9BF,IAD8B,CAC3CE,QAD2C;AAAA,MAE/CC,eAF+C,GAE3BJ,KAF2B,CAE/CI,eAF+C;AAGvDL,EAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,IAAmB,EAArC;;AAEA,MAAI,CAACF,QAAL,EAAe;AACbJ,IAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,CAAgBC,MAAhB,CAAuB,UAAAC,MAAM;AAAA,aAAIA,MAAM,CAACL,EAAP,KAAcA,EAAlB;AAAA,KAA7B,CAAlB;AACD,GAFD,MAEO;AACL,QAAMM,IAAI,GAAG;AAAEN,MAAAA,EAAE,EAAFA;AAAF,KAAb;;AACA,QAAIE,eAAJ,EAAqB;AACnBL,MAAAA,OAAO,CAACM,OAAR,CAAgBI,IAAhB,CAAqBD,IAArB;AACD,KAFD,MAEO;AACLT,MAAAA,OAAO,CAACM,OAAR,GAAkB,CAACG,IAAD,CAAlB;AACD;AACF;AACF","sourcesContent":["export function updateSessionValue(session, model, data) {\n  const { id, selected } = data;\n  const { multipleCorrect } = model;\n  session.answers = session.answers || [];\n\n  if (!selected) {\n    session.answers = session.answers.filter(answer => answer.id !== id);\n  } else {\n    const item = { id };\n    if (multipleCorrect) {\n      session.answers.push(item);\n    } else {\n      session.answers = [item];\n    }\n  }\n}\n"],"file":"session-updater.js"}
+{"version":3,"sources":["../src/session-updater.js"],"names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push"],"mappings":";;;;;;;AAAO,SAASA,kBAAT,CAA4BC,OAA5B,EAAqCC,KAArC,EAA4CC,IAA5C,EAAkD;AACvD,MAAQC,EAAR,GAAyBD,IAAzB,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAyBF,IAAzB,CAAYE,QAAZ;AACA,MAAQC,eAAR,GAA4BJ,KAA5B,CAAQI,eAAR;AACAL,EAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,IAAmB,EAArC;;AAEA,MAAI,CAACF,QAAL,EAAe;AACbJ,IAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,CAAgBC,MAAhB,CAAuB,UAAAC,MAAM;AAAA,aAAIA,MAAM,CAACL,EAAP,KAAcA,EAAlB;AAAA,KAA7B,CAAlB;AACD,GAFD,MAEO;AACL,QAAMM,IAAI,GAAG;AAAEN,MAAAA,EAAE,EAAFA;AAAF,KAAb;;AACA,QAAIE,eAAJ,EAAqB;AACnBL,MAAAA,OAAO,CAACM,OAAR,CAAgBI,IAAhB,CAAqBD,IAArB;AACD,KAFD,MAEO;AACLT,MAAAA,OAAO,CAACM,OAAR,GAAkB,CAACG,IAAD,CAAlB;AACD;AACF;AACF","sourcesContent":["export function updateSessionValue(session, model, data) {\n  const { id, selected } = data;\n  const { multipleCorrect } = model;\n  session.answers = session.answers || [];\n\n  if (!selected) {\n    session.answers = session.answers.filter(answer => answer.id !== id);\n  } else {\n    const item = { id };\n    if (multipleCorrect) {\n      session.answers.push(item);\n    } else {\n      session.answers = [item];\n    }\n  }\n}\n"],"file":"session-updater.js"}