@pie-element/hotspot 5.7.1-beta.1 → 5.7.1-beta.4

package/lib/hotspot/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+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 { 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);
+  var _super = _createSuper(HotspotComponent);
+  function HotspotComponent(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, HotspotComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onToggle", function () {
+      var showCorrect = _this.state.showCorrect;
+      _this.setState({
+        showCorrect: !showCorrect
+      });
+    });
+    _this.state = {
+      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;
+          var target = (_document$getElementB = document.getElementById('question-container')) === null || _document$getElementB === void 0 || (_document$getElementB = _document$getElementB.style) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.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,
+        session = _this$props.session,
+        _this$props$model = _this$props.model,
+        disabled = _this$props$model.disabled,
+        imageUrl = _this$props$model.imageUrl,
+        prompt = _this$props$model.prompt,
+        mode = _this$props$model.mode,
+        multipleCorrect = _this$props$model.multipleCorrect,
+        shapes = _this$props$model.shapes,
+        outlineColor = _this$props$model.outlineColor,
+        hotspotColor = _this$props$model.hotspotColor,
+        dimensions = _this$props$model.dimensions,
+        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';
+      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(_renderUi.PreviewPrompt, {
+        className: "prompt",
+        prompt: teacherInstructions
+      })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: classes.prompt
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        className: "prompt",
+        prompt: prompt
+      })), imageUrl ? /*#__PURE__*/_react["default"].createElement(_container["default"], {
+        isEvaluateMode: isEvaluateMode,
+        session: session,
+        dimensions: dimensions,
+        imageUrl: imageUrl,
+        hotspotColor: hotspotColor,
+        multipleCorrect: multipleCorrect,
+        outlineColor: outlineColor,
+        onSelectChoice: onSelectChoice,
+        shapes: shapes,
+        disabled: disabled,
+        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(_renderUi.PreviewPrompt, {
+        className: "prompt",
+        prompt: rationale
+      })));
+    }
+  }]);
+  return HotspotComponent;
+}(_react["default"].Component);
+HotspotComponent.propTypes = {
+  classes: _propTypes["default"].object,
+  model: _propTypes["default"].object.isRequired,
+  onSelectChoice: _propTypes["default"].func.isRequired,
+  session: _propTypes["default"].object.isRequired
+};
+HotspotComponent.defaultProps = {
+  classes: {}
+};
+var styles = function styles(theme) {
+  return {
+    collapsible: {
+      paddingTop: theme.spacing.unit * 2,
+      paddingBottom: theme.spacing.unit * 2
+    },
+    prompt: {
+      fontSize: 'inherit'
+    }
+  };
+};
+var _default = (0, _styles.withStyles)(styles)(HotspotComponent);
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/lib/hotspot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_Typography","_correctAnswerToggle","_renderUi","_styles","_container","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","HotspotComponent","_React$Component","_inherits2","_super","props","_this","_classCallCheck2","_defineProperty2","_assertThisInitialized2","showCorrect","state","setState","observer","scale","_createClass2","key","value","componentDidMount","_this2","MutationObserver","mutations","forEach","_document$getElementB","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","componentWillUnmount","_this$observer","disconnect","render","_this$props","session","_this$props$model","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","createElement","show","toggled","onToggle","bind","hasText","Collapsible","labels","hidden","visible","className","collapsible","PreviewPrompt","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","paddingTop","spacing","unit","paddingBottom","fontSize","_default","withStyles","exports"],"sources":["../../src/hotspot/index.jsx"],"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(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\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        {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        <Typography className={classes.prompt}>\n          <PreviewPrompt className=\"prompt\" prompt={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            scale={this.state.scale}\n            showCorrect={showCorrect}\n          />\n        ) : null}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }} className={classes.collapsible}>\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  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"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,oBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAEA,IAAAM,UAAA,GAAAP,sBAAA,CAAAC,OAAA;AAAoC,SAAAO,aAAAC,OAAA,QAAAC,yBAAA,GAAAC,yBAAA,oBAAAC,qBAAA,QAAAC,KAAA,OAAAC,gBAAA,aAAAL,OAAA,GAAAM,MAAA,MAAAL,yBAAA,QAAAM,SAAA,OAAAF,gBAAA,mBAAAG,WAAA,EAAAF,MAAA,GAAAG,OAAA,CAAAC,SAAA,CAAAN,KAAA,EAAAO,SAAA,EAAAJ,SAAA,YAAAD,MAAA,GAAAF,KAAA,CAAAQ,KAAA,OAAAD,SAAA,gBAAAE,2BAAA,mBAAAP,MAAA;AAAA,SAAAJ,0BAAA,eAAAO,OAAA,qBAAAA,OAAA,CAAAC,SAAA,oBAAAD,OAAA,CAAAC,SAAA,CAAAI,IAAA,2BAAAC,KAAA,oCAAAC,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,IAAA,CAAAV,OAAA,CAAAC,SAAA,CAAAM,OAAA,8CAAAI,CAAA;AAAA,IAE9BC,gBAAgB,0BAAAC,gBAAA;EAAA,IAAAC,UAAA,aAAAF,gBAAA,EAAAC,gBAAA;EAAA,IAAAE,MAAA,GAAAzB,YAAA,CAAAsB,gBAAA;EACpB,SAAAA,iBAAYI,KAAK,EAAE;IAAA,IAAAC,KAAA;IAAA,IAAAC,gBAAA,mBAAAN,gBAAA;IACjBK,KAAA,GAAAF,MAAA,CAAAL,IAAA,OAAMM,KAAK;IAAE,IAAAG,gBAAA,iBAAAC,uBAAA,aAAAH,KAAA,eAwCJ,YAAM;MACf,IAAQI,WAAW,GAAKJ,KAAA,CAAKK,KAAK,CAA1BD,WAAW;MACnBJ,KAAA,CAAKM,QAAQ,CAAC;QAAEF,WAAW,EAAE,CAACA;MAAY,CAAC,CAAC;IAC9C,CAAC;IA1CCJ,KAAA,CAAKK,KAAK,GAAG;MACXD,WAAW,EAAE,KAAK;MAClBG,QAAQ,EAAE,IAAI;MACdC,KAAK,EAAE;IACT,CAAC;IAAC,OAAAR,KAAA;EACJ;EAAC,IAAAS,aAAA,aAAAd,gBAAA;IAAAe,GAAA;IAAAC,KAAA,EAED,SAAAC,kBAAA,EAAoB;MAAA,IAAAC,MAAA;MAClB,IAAI,CAACN,QAAQ,GAAG,IAAIO,gBAAgB,CAAC,UAACC,SAAS,EAAK;QAClDA,SAAS,CAACC,OAAO,CAAC,YAAM;UAAA,IAAAC,qBAAA;UACtB,IAAMC,MAAM,IAAAD,qBAAA,GAAGE,QAAQ,CAACC,cAAc,CAAC,oBAAoB,CAAC,cAAAH,qBAAA,gBAAAA,qBAAA,GAA7CA,qBAAA,CAA+CI,KAAK,cAAAJ,qBAAA,uBAApDA,qBAAA,CAAsDK,OAAO;UAC5E,IAAMC,IAAI,GAAGL,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEM,SAAS,CAACN,MAAM,CAACO,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,EAAEP,MAAM,CAACQ,WAAW,CAAC,GAAG,CAAC,CAAC;UAE1F,IAAMC,UAAU,GAAGJ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEK,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;UAC3C,IAAID,UAAU,EAAE;YACd,IAAME,QAAQ,GAAGC,UAAU,CAACH,UAAU,CAAC,GAAG,GAAG;YAC7C,IAAIE,QAAQ,KAAKhB,MAAI,CAACR,KAAK,CAACG,KAAK,EAAE;cACjCK,MAAI,CAACP,QAAQ,CAAC;gBACZE,KAAK,EAAEsB,UAAU,CAACH,UAAU,CAAC,GAAG;cAClC,CAAC,CAAC;YACJ;UACF,CAAC,MAAM,IAAI,CAACA,UAAU,IAAId,MAAI,CAACR,KAAK,CAACG,KAAK,KAAK,CAAC,EAAE;YAChDK,MAAI,CAACP,QAAQ,CAAC;cACZE,KAAK,EAAE;YACT,CAAC,CAAC;UACJ;QACF,CAAC,CAAC;MACJ,CAAC,CAAC;MAEF,IAAMU,MAAM,GAAGC,QAAQ,CAACC,cAAc,CAAC,oBAAoB,CAAC;MAC5D,IAAIF,MAAM,EAAE;QACV,IAAI,CAACX,QAAQ,CAACwB,OAAO,CAACb,MAAM,EAAE;UAAEc,UAAU,EAAE,IAAI;UAAEC,eAAe,EAAE,CAAC,OAAO;QAAE,CAAC,CAAC;MACjF;IACF;EAAC;IAAAvB,GAAA;IAAAC,KAAA,EAED,SAAAuB,qBAAA,EAAuB;MAAA,IAAAC,cAAA;MACrB,CAAAA,cAAA,OAAI,CAAC5B,QAAQ,cAAA4B,cAAA,uBAAbA,cAAA,CAAeC,UAAU,CAAC,CAAC;IAC7B;EAAC;IAAA1B,GAAA;IAAAC,KAAA,EAOD,SAAA0B,OAAA,EAAS;MACP,IAAAC,WAAA,GAmBI,IAAI,CAACvC,KAAK;QAlBZwC,OAAO,GAAAD,WAAA,CAAPC,OAAO;QAAAC,iBAAA,GAAAF,WAAA,CACPG,KAAK;QACHC,QAAQ,GAAAF,iBAAA,CAARE,QAAQ;QACRC,QAAQ,GAAAH,iBAAA,CAARG,QAAQ;QACRC,MAAM,GAAAJ,iBAAA,CAANI,MAAM;QACNC,IAAI,GAAAL,iBAAA,CAAJK,IAAI;QACJC,eAAe,GAAAN,iBAAA,CAAfM,eAAe;QACfC,MAAM,GAAAP,iBAAA,CAANO,MAAM;QACNC,YAAY,GAAAR,iBAAA,CAAZQ,YAAY;QACZC,YAAY,GAAAT,iBAAA,CAAZS,YAAY;QACZC,UAAU,GAAAV,iBAAA,CAAVU,UAAU;QACVC,SAAS,GAAAX,iBAAA,CAATW,SAAS;QACTC,mBAAmB,GAAAZ,iBAAA,CAAnBY,mBAAmB;QACnBC,WAAW,GAAAb,iBAAA,CAAXa,WAAW;QACXC,eAAe,GAAAd,iBAAA,CAAfc,eAAe;QAEjBC,cAAc,GAAAjB,WAAA,CAAdiB,cAAc;QACdC,OAAO,GAAAlB,WAAA,CAAPkB,OAAO;MAET,IAAQpD,WAAW,GAAK,IAAI,CAACC,KAAK,CAA1BD,WAAW;MACnB,IAAMqD,cAAc,GAAGZ,IAAI,KAAK,UAAU;MAC1C,IAAMa,uBAAuB,GAAGD,cAAc,IAAI,CAACH,eAAe;MAElE,oBACE1F,MAAA,YAAA+F,aAAA,cACGD,uBAAuB,iBACtB9F,MAAA,YAAA+F,aAAA,CAAC1F,oBAAA,WAAmB;QAClB2F,IAAI,EAAEF,uBAAwB;QAC9BG,OAAO,EAAEzD,WAAY;QACrB0D,QAAQ,EAAE,IAAI,CAACA,QAAQ,CAACC,IAAI,CAAC,IAAI;MAAE,CACpC,CACF,EACAL,uBAAuB,iBAAI9F,MAAA,YAAA+F,aAAA,WAAK,CAAC,EACjCP,mBAAmB,IAAI,IAAAY,iBAAO,EAACZ,mBAAmB,CAAC,iBAClDxF,MAAA,YAAA+F,aAAA,CAACzF,SAAA,CAAA+F,WAAW;QACVC,MAAM,EAAE;UAAEC,MAAM,EAAE,2BAA2B;UAAEC,OAAO,EAAE;QAA4B,CAAE;QACtFC,SAAS,EAAEb,OAAO,CAACc;MAAY,gBAE/B1G,MAAA,YAAA+F,aAAA,CAACzF,SAAA,CAAAqG,aAAa;QAACF,SAAS,EAAC,QAAQ;QAACzB,MAAM,EAAEQ;MAAoB,CAAE,CACrD,CACd,eAEDxF,MAAA,YAAA+F,aAAA,CAAC3F,WAAA,WAAU;QAACqG,SAAS,EAAEb,OAAO,CAACZ;MAAO,gBACpChF,MAAA,YAAA+F,aAAA,CAACzF,SAAA,CAAAqG,aAAa;QAACF,SAAS,EAAC,QAAQ;QAACzB,MAAM,EAAEA;MAAO,CAAE,CACzC,CAAC,EAEZD,QAAQ,gBACP/E,MAAA,YAAA+F,aAAA,CAACvF,UAAA,WAAS;QACRqF,cAAc,EAAEA,cAAe;QAC/BlB,OAAO,EAAEA,OAAQ;QACjBW,UAAU,EAAEA,UAAW;QACvBP,QAAQ,EAAEA,QAAS;QACnBM,YAAY,EAAEA,YAAa;QAC3BH,eAAe,EAAEA,eAAgB;QACjCE,YAAY,EAAEA,YAAa;QAC3BO,cAAc,EAAEA,cAAe;QAC/BR,MAAM,EAAEA,MAAO;QACfL,QAAQ,EAAEA,QAAS;QACnBW,WAAW,EAAEA,WAAY;QACzB7C,KAAK,EAAE,IAAI,CAACH,KAAK,CAACG,KAAM;QACxBJ,WAAW,EAAEA;MAAY,CAC1B,CAAC,GACA,IAAI,EAEP+C,SAAS,IAAI,IAAAa,iBAAO,EAACb,SAAS,CAAC,iBAC9BvF,MAAA,YAAA+F,aAAA,CAACzF,SAAA,CAAA+F,WAAW;QAACC,MAAM,EAAE;UAAEC,MAAM,EAAE,gBAAgB;UAAEC,OAAO,EAAE;QAAiB,CAAE;QAACC,SAAS,EAAEb,OAAO,CAACc;MAAY,gBAC3G1G,MAAA,YAAA+F,aAAA,CAACzF,SAAA,CAAAqG,aAAa;QAACF,SAAS,EAAC,QAAQ;QAACzB,MAAM,EAAEO;MAAU,CAAE,CAC3C,CAEZ,CAAC;IAEV;EAAC;EAAA,OAAAxD,gBAAA;AAAA,EAxH4B6E,iBAAK,CAACC,SAAS;AA2H9C9E,gBAAgB,CAAC+E,SAAS,GAAG;EAC3BlB,OAAO,EAAEmB,qBAAS,CAACC,MAAM;EACzBnC,KAAK,EAAEkC,qBAAS,CAACC,MAAM,CAACC,UAAU;EAClCtB,cAAc,EAAEoB,qBAAS,CAACG,IAAI,CAACD,UAAU;EACzCtC,OAAO,EAAEoC,qBAAS,CAACC,MAAM,CAACC;AAC5B,CAAC;AAEDlF,gBAAgB,CAACoF,YAAY,GAAG;EAC9BvB,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,IAAMwB,MAAM,GAAG,SAATA,MAAMA,CAAIC,KAAK;EAAA,OAAM;IACzBX,WAAW,EAAE;MACXY,UAAU,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,GAAG,CAAC;MAClCC,aAAa,EAAEJ,KAAK,CAACE,OAAO,CAACC,IAAI,GAAG;IACtC,CAAC;IACDxC,MAAM,EAAE;MACN0C,QAAQ,EAAE;IACZ;EACF,CAAC;AAAA,CAAC;AAAC,IAAAC,QAAA,GAEY,IAAAC,kBAAU,EAACR,MAAM,CAAC,CAACrF,gBAAgB,CAAC;AAAA8F,OAAA,cAAAF,QAAA"}

package/lib/hotspot/polygon.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactKonva = require("react-konva");
+var _styles = require("@material-ui/core/styles");
+var _image = _interopRequireDefault(require("./image"));
+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 { 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);
+  var _super = _createSuper(PolygonComponent);
+  function PolygonComponent(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, PolygonComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPolygonCenter", function (points) {
+      var x = points.map(function (_ref) {
+        var x = _ref.x;
+        return x;
+      });
+      var y = points.map(function (_ref2) {
+        var y = _ref2.y;
+        return y;
+      });
+      var minX = Math.min.apply(null, x);
+      var maxX = Math.max.apply(null, x);
+      var minY = Math.min.apply(null, y);
+      var maxY = Math.max.apply(null, y);
+      return [(minX + maxX) / 2, (minY + maxY) / 2];
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "parsePointsForKonva", function (points) {
+      var parsedPoints = [];
+      points.forEach(function (_ref3) {
+        var x = _ref3.x,
+          y = _ref3.y;
+        parsedPoints.push(x);
+        parsedPoints.push(y);
+      });
+      return parsedPoints;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (e) {
+      var _this$props = _this.props,
+        onClick = _this$props.onClick,
+        id = _this$props.id,
+        selected = _this$props.selected,
+        disabled = _this$props.disabled;
+      if (!disabled) {
+        e.cancelBubble = true;
+        onClick({
+          id: id,
+          selected: !selected
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
+      var disabled = _this.props.disabled;
+      if (!disabled) {
+        document.body.style.cursor = 'pointer';
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
+      document.body.style.cursor = 'default';
+    });
+    (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 (showCorrectEnabled, selected, markAsCorrect, strokeWidth) {
+      return markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0;
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(PolygonComponent, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        classes = _this$props2.classes,
+        hotspotColor = _this$props2.hotspotColor,
+        isCorrect = _this$props2.isCorrect,
+        isEvaluateMode = _this$props2.isEvaluateMode,
+        outlineColor = _this$props2.outlineColor,
+        selected = _this$props2.selected,
+        points = _this$props2.points,
+        evaluateText = _this$props2.evaluateText,
+        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];
+
+      // "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 (showCorrectEnabled) {
+        if (selected && isCorrect || !selected && !isCorrect) {
+          iconSrc = _icons.faCorrect;
+        }
+      } else {
+        if (selected) {
+          if (isCorrect) {
+            iconSrc = _icons.faCorrect;
+          } else {
+            iconSrc = _icons.faWrong;
+          }
+        } else if (!isCorrect) {
+          iconSrc = _icons.faWrong;
+        }
+      }
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
+        scaleX: scale,
+        scaleY: scale
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
+        points: pointsParsed,
+        closed: true,
+        classes: classes.base,
+        fill: hotspotColor,
+        onClick: this.handleClick,
+        onTap: this.handleClick,
+        draggable: false,
+        stroke: outlineColorParsed,
+        strokeWidth: outlineWidth,
+        onMouseLeave: this.handleMouseLeave,
+        onMouseEnter: this.handleMouseEnter
+      }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_image["default"], {
+        src: iconSrc,
+        x: iconX,
+        y: iconY,
+        tooltip: evaluateText
+      }) : null);
+    }
+  }]);
+  return PolygonComponent;
+}(_react["default"].Component);
+var styles = function styles() {
+  return {
+    base: {
+      cursor: 'pointer',
+      opacity: 0.5,
+      position: 'relative'
+    }
+  };
+};
+PolygonComponent.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  hotspotColor: _propTypes["default"].string.isRequired,
+  id: _propTypes["default"].string.isRequired,
+  isCorrect: _propTypes["default"].bool.isRequired,
+  isEvaluateMode: _propTypes["default"].bool.isRequired,
+  disabled: _propTypes["default"].bool.isRequired,
+  onClick: _propTypes["default"].func.isRequired,
+  outlineColor: _propTypes["default"].string.isRequired,
+  points: _propTypes["default"].array.isRequired,
+  selected: _propTypes["default"].bool.isRequired,
+  evaluateText: _propTypes["default"].string,
+  strokeWidth: _propTypes["default"].number,
+  scale: _propTypes["default"].number,
+  markAsCorrect: _propTypes["default"].bool.isRequired,
+  showCorrectEnabled: _propTypes["default"].bool.isRequired
+};
+PolygonComponent.defaultProps = {
+  evaluateText: null,
+  strokeWidth: 5,
+  scale: 1
+};
+var _default = (0, _styles.withStyles)(styles)(PolygonComponent);
+exports["default"] = _default;
+//# sourceMappingURL=polygon.js.map

package/lib/hotspot/polygon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_styles","_image","_icons","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","PolygonComponent","_React$Component","_inherits2","_super","props","_this","_classCallCheck2","_defineProperty2","_assertThisInitialized2","points","x","map","_ref","y","_ref2","minX","Math","min","maxX","max","minY","maxY","parsedPoints","forEach","_ref3","push","_this$props","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","_createClass2","key","value","render","_this$props2","classes","hotspotColor","isEvaluateMode","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","createElement","Group","scaleX","scaleY","Line","closed","base","fill","handleClick","onTap","draggable","stroke","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","src","tooltip","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","string","bool","func","array","number","defaultProps","_default","withStyles","exports"],"sources":["../../src/hotspot/polygon.jsx"],"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) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      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 ? <Image src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : 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"],"mappings":"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"}

package/lib/hotspot/rectangle.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactKonva = require("react-konva");
+var _styles = require("@material-ui/core/styles");
+var _image = _interopRequireDefault(require("./image"));
+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 { 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);
+  var _super = _createSuper(RectComponent);
+  function RectComponent(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, RectComponent);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (e) {
+      var _this$props = _this.props,
+        onClick = _this$props.onClick,
+        id = _this$props.id,
+        selected = _this$props.selected,
+        disabled = _this$props.disabled;
+      if (!disabled) {
+        e.cancelBubble = true;
+        onClick({
+          id: id,
+          selected: !selected
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
+      var disabled = _this.props.disabled;
+      if (!disabled) {
+        document.body.style.cursor = 'pointer';
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
+      document.body.style.cursor = 'default';
+    });
+    (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 (showCorrectEnabled, selected, markAsCorrect, strokeWidth) {
+      return markAsCorrect || !markAsCorrect && !showCorrectEnabled && selected ? strokeWidth : 0;
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(RectComponent, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        classes = _this$props2.classes,
+        height = _this$props2.height,
+        hotspotColor = _this$props2.hotspotColor,
+        isCorrect = _this$props2.isCorrect,
+        isEvaluateMode = _this$props2.isEvaluateMode,
+        outlineColor = _this$props2.outlineColor,
+        selected = _this$props2.selected,
+        width = _this$props2.width,
+        x = _this$props2.x,
+        y = _this$props2.y,
+        evaluateText = _this$props2.evaluateText,
+        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;
+
+      // "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 (showCorrectEnabled) {
+        if (selected && isCorrect || !selected && !isCorrect) {
+          iconSrc = _icons.faCorrect;
+        }
+      } else {
+        if (selected) {
+          if (isCorrect) {
+            iconSrc = _icons.faCorrect;
+          } else {
+            iconSrc = _icons.faWrong;
+          }
+        } else if (!isCorrect) {
+          iconSrc = _icons.faWrong;
+        }
+      }
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
+        scaleX: scale,
+        scaleY: scale
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
+        classes: classes.base,
+        width: width,
+        height: height,
+        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 ? /*#__PURE__*/_react["default"].createElement(_image["default"], {
+        src: iconSrc,
+        x: iconX,
+        y: iconY,
+        tooltip: evaluateText
+      }) : null);
+    }
+  }]);
+  return RectComponent;
+}(_react["default"].Component);
+var styles = function styles() {
+  return {
+    base: {
+      cursor: 'pointer',
+      opacity: 0.5,
+      position: 'relative'
+    }
+  };
+};
+RectComponent.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  hotspotColor: _propTypes["default"].string.isRequired,
+  id: _propTypes["default"].string.isRequired,
+  isCorrect: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
+  isEvaluateMode: _propTypes["default"].bool.isRequired,
+  disabled: _propTypes["default"].bool.isRequired,
+  onClick: _propTypes["default"].func.isRequired,
+  outlineColor: _propTypes["default"].string.isRequired,
+  selected: _propTypes["default"].bool.isRequired,
+  width: _propTypes["default"].number.isRequired,
+  x: _propTypes["default"].number.isRequired,
+  y: _propTypes["default"].number.isRequired,
+  evaluateText: _propTypes["default"].string,
+  strokeWidth: _propTypes["default"].number,
+  scale: _propTypes["default"].number,
+  markAsCorrect: _propTypes["default"].bool.isRequired,
+  showCorrectEnabled: _propTypes["default"].bool.isRequired
+};
+RectComponent.defaultProps = {
+  isCorrect: false,
+  evaluateText: null,
+  strokeWidth: 5,
+  scale: 1
+};
+var _default = (0, _styles.withStyles)(styles)(RectComponent);
+exports["default"] = _default;
+//# sourceMappingURL=rectangle.js.map

package/lib/hotspot/rectangle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_styles","_image","_icons","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","RectComponent","_React$Component","_inherits2","_super","props","_this","_classCallCheck2","_defineProperty2","_assertThisInitialized2","_this$props","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","_createClass2","key","value","render","_this$props2","classes","height","hotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","createElement","Group","scaleX","scaleY","Rect","base","fill","handleClick","onTap","draggable","stroke","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","src","tooltip","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps","_default","withStyles","exports"],"sources":["../../src/hotspot/rectangle.jsx"],"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) =>\n    markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n  getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n    markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n  render() {\n    const {\n      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 ? <Image src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : 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"],"mappings":"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"}