@pie-element/hotspot 9.1.0 → 9.2.0-mui-update.0

package/lib/hotspot/image-konva-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/image-konva-tooltip.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;AAAK,QAAA,IAAI,EAAC,OAAV;AAAkB,QAAA,YAAY,EAAE,CAAhC;AAAmC,QAAA,OAAO,EAAE;AAA5C,QADF,eAEE,gCAAC,gBAAD;AAAM,QAAA,IAAI,EAAEC,OAAZ;AAAqB,QAAA,OAAO,EAAE;AAA9B,QAFF,CAZJ,CADF;AAoBD;;;EA7D0BC,kBAAMC,S;;AAgEnClB,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,MAAV,CAAiBC;AAJD,CAA3B;eAOetB,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 fill=\"white\" cornerRadius={5} opacity={0.9} />\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.isRequired,\n};\n\nexport default ImageComponent;\n"],"file":"image-konva-tooltip.js"}
+{"version":3,"file":"image-konva-tooltip.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","ImageComponent","React","Component","constructor","props","_defineProperty2","default","setState","image","state","showTooltip","componentDidMount","loadImage","componentDidUpdate","oldProps","src","componentWillUnmount","removeEventListener","handleLoad","window","Image","addEventListener","render","x","y","tooltip","createElement","Group","width","height","onMouseEnter","onMouseLeave","Label","Tag","fill","cornerRadius","opacity","Text","text","padding","propTypes","PropTypes","string","isRequired","number","_default","exports"],"sources":["../../src/hotspot/image-konva-tooltip.jsx"],"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 fill=\"white\" cornerRadius={5} opacity={0.9} />\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.isRequired,\n};\n\nexport default ImageComponent;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAEA,MAAMG,cAAc,SAASC,cAAK,CAACC,SAAS,CAAC;EAC3CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,sBA6BF,MAAM;MACjB,IAAI,CAACC,QAAQ,CAAC;QACZC,KAAK,EAAE,IAAI,CAACA;MACd,CAAC,CAAC;IACJ,CAAC;IAhCC,IAAI,CAACC,KAAK,GAAG;MACXD,KAAK,EAAE,IAAI;MACXE,WAAW,EAAE;IACf,CAAC;EACH;EAEAC,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACC,SAAS,CAAC,CAAC;EAClB;EAEAC,kBAAkBA,CAACC,QAAQ,EAAE;IAC3B,IAAIA,QAAQ,CAACC,GAAG,KAAK,IAAI,CAACX,KAAK,CAACW,GAAG,EAAE;MACnC,IAAI,CAACH,SAAS,CAAC,CAAC;IAClB;EACF;EAEAI,oBAAoBA,CAAA,EAAG;IACrB,IAAI,CAACR,KAAK,CAACS,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAACC,UAAU,CAAC;EACzD;EAEAN,SAASA,CAAA,EAAG;IACV,MAAM;MAAEG;IAAI,CAAC,GAAG,IAAI,CAACX,KAAK;IAE1B,IAAI,CAACI,KAAK,GAAG,IAAIW,MAAM,CAACC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAACZ,KAAK,CAACO,GAAG,GAAGA,GAAG;IACpB,IAAI,CAACP,KAAK,CAACa,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAACH,UAAU,CAAC;EACtD;EAQAI,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,CAAC;MAAEC,CAAC;MAAEC;IAAQ,CAAC,GAAG,IAAI,CAACrB,KAAK;IACpC,MAAM;MAAEI,KAAK;MAAEE;IAAY,CAAC,GAAG,IAAI,CAACD,KAAK;IAEzC,oBACEd,MAAA,CAAAW,OAAA,CAAAoB,aAAA,CAAC3B,WAAA,CAAA4B,KAAK,qBACJhC,MAAA,CAAAW,OAAA,CAAAoB,aAAA,CAAC3B,WAAA,CAAAqB,KAAK;MACJQ,KAAK,EAAE,EAAG;MACVC,MAAM,EAAE,EAAG;MACXN,CAAC,EAAEA,CAAE;MACLC,CAAC,EAAEA,CAAE;MACLhB,KAAK,EAAEA,KAAM;MACbsB,YAAY,EAAEA,CAAA,KAAM,IAAI,CAACvB,QAAQ,CAAC;QAAEG,WAAW,EAAE;MAAK,CAAC,CAAE;MACzDqB,YAAY,EAAEA,CAAA,KAAM,IAAI,CAACxB,QAAQ,CAAC;QAAEG,WAAW,EAAE;MAAM,CAAC;IAAE,CAC3D,CAAC,EAEDA,WAAW,IAAIe,OAAO,iBACrB9B,MAAA,CAAAW,OAAA,CAAAoB,aAAA,CAAC3B,WAAA,CAAAiC,KAAK;MAACT,CAAC,EAAEA,CAAC,GAAG,EAAG;MAACC,CAAC,EAAEA,CAAC,GAAG;IAAG,gBAC1B7B,MAAA,CAAAW,OAAA,CAAAoB,aAAA,CAAC3B,WAAA,CAAAkC,GAAG;MAACC,IAAI,EAAC,OAAO;MAACC,YAAY,EAAE,CAAE;MAACC,OAAO,EAAE;IAAI,CAAE,CAAC,eACnDzC,MAAA,CAAAW,OAAA,CAAAoB,aAAA,CAAC3B,WAAA,CAAAsC,IAAI;MAACC,IAAI,EAAEb,OAAQ;MAACc,OAAO,EAAE;IAAE,CAAE,CAC7B,CAEJ,CAAC;EAEZ;AACF;AAEAvC,cAAc,CAACwC,SAAS,GAAG;EACzBzB,GAAG,EAAE0B,kBAAS,CAACC,MAAM,CAACC,UAAU;EAChCpB,CAAC,EAAEkB,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC9BnB,CAAC,EAAEiB,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC9BlB,OAAO,EAAEgB,kBAAS,CAACC,MAAM,CAACC;AAC5B,CAAC;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAxC,OAAA,GAEaN,cAAc","ignoreList":[]}

package/lib/hotspot/index.js

@@ -1,225 +1,162 @@
 "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"));
-
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/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({
+const StyledUiLayout = (0, _styles.styled)(_renderUi.UiLayout)({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  position: 'relative'
+});
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+class HotspotComponent extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onToggle", () => {
+      const {
+        showCorrect
+      } = this.state;
+      this.setState({
         showCorrect: !showCorrect
       });
     });
-    _this.state = {
+    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, _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
+  componentDidMount() {
+    this.observer = new MutationObserver(mutations => {
+      mutations.forEach(() => {
+        const target = document.getElementById('question-container')?.style?.cssText;
+        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
+        const zoomParsed = zoom?.replace(/\s/g, '');
+        if (zoomParsed) {
+          const newScale = parseFloat(zoomParsed) / 100;
+          if (newScale !== this.state.scale) {
+            this.setState({
+              scale: parseFloat(zoomParsed) / 100
             });
           }
-        });
-      });
-      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,
-          extraCSSRules = _this$props$model.extraCSSRules,
-          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,
-          hoverOutlineColor = _this$props$model.hoverOutlineColor,
-          selectedHotspotColor = _this$props$model.selectedHotspotColor,
-          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,
-          language = _this$props$model.language,
-          fontSizeFactor = _this$props$model.fontSizeFactor,
-          autoplayAudioEnabled = _this$props$model.autoplayAudioEnabled,
-          customAudioButton = _this$props$model.customAudioButton,
-          onSelectChoice = _this$props.onSelectChoice,
-          classes = _this$props.classes;
-      var showCorrect = this.state.showCorrect;
-      var isEvaluateMode = mode === 'evaluate';
-      var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
-      var showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
-      var showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-        extraCSSRules: extraCSSRules,
-        id: 'main-container',
-        className: classes.main,
-        fontSizeFactor: fontSizeFactor
-      }, showTeacherInstructions && /*#__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
-      })), prompt && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        className: "prompt",
-        prompt: prompt,
-        autoplayAudioEnabled: autoplayAudioEnabled,
-        customAudioButton: customAudioButton
-      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        show: showCorrectAnswerToggle,
-        toggled: showCorrect,
-        onToggle: this.onToggle.bind(this),
-        language: language
-      }), imageUrl ? /*#__PURE__*/_react["default"].createElement(_container["default"], {
-        isEvaluateMode: isEvaluateMode,
-        session: session,
-        dimensions: dimensions,
-        imageUrl: imageUrl,
-        hotspotColor: hotspotColor,
-        hoverOutlineColor: hoverOutlineColor,
-        selectedHotspotColor: selectedHotspotColor,
-        multipleCorrect: multipleCorrect,
-        outlineColor: outlineColor,
-        onSelectChoice: onSelectChoice,
-        shapes: shapes,
-        disabled: disabled,
-        strokeWidth: strokeWidth,
-        scale: this.state.scale,
-        showCorrect: showCorrect
-      }) : null, showRationale && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
-        labels: {
-          hidden: 'Show Rationale',
-          visible: 'Hide Rationale'
+        } else if (!zoomParsed && this.state.scale !== 1) {
+          this.setState({
+            scale: 1
+          });
         }
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        className: "prompt",
-        prompt: rationale
-      })));
+      });
+    });
+    const target = document.getElementById('question-container');
+    if (target) {
+      this.observer.observe(target, {
+        attributes: true,
+        attributeFilter: ['style']
+      });
     }
-  }]);
-  return HotspotComponent;
-}(_react["default"].Component);
-
+  }
+  componentWillUnmount() {
+    this.observer?.disconnect();
+  }
+  render() {
+    const {
+      session,
+      model: {
+        disabled,
+        extraCSSRules,
+        imageUrl,
+        prompt,
+        mode,
+        multipleCorrect,
+        shapes,
+        outlineColor,
+        hotspotColor,
+        hoverOutlineColor,
+        selectedHotspotColor,
+        dimensions,
+        rationale,
+        teacherInstructions,
+        strokeWidth,
+        responseCorrect,
+        language,
+        fontSizeFactor,
+        autoplayAudioEnabled,
+        customAudioButton
+      },
+      onSelectChoice
+    } = this.props;
+    const {
+      showCorrect
+    } = this.state;
+    const isEvaluateMode = mode === 'evaluate';
+    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
+    const showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
+    const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
+    return /*#__PURE__*/_react.default.createElement(StyledUiLayout, {
+      extraCSSRules: extraCSSRules,
+      id: 'main-container',
+      fontSizeFactor: fontSizeFactor
+    }, showTeacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: teacherInstructions
+    })), prompt && /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: prompt,
+      autoplayAudioEnabled: autoplayAudioEnabled,
+      customAudioButton: customAudioButton
+    }), showCorrectAnswerToggle && /*#__PURE__*/_react.default.createElement(_correctAnswerToggle.default, {
+      show: showCorrectAnswerToggle,
+      toggled: showCorrect,
+      onToggle: this.onToggle.bind(this),
+      language: language
+    }), imageUrl ? /*#__PURE__*/_react.default.createElement(_container.default, {
+      isEvaluateMode: isEvaluateMode,
+      session: session,
+      dimensions: dimensions,
+      imageUrl: imageUrl,
+      hotspotColor: hotspotColor,
+      hoverOutlineColor: hoverOutlineColor,
+      selectedHotspotColor: selectedHotspotColor,
+      multipleCorrect: multipleCorrect,
+      outlineColor: outlineColor,
+      onSelectChoice: onSelectChoice,
+      shapes: shapes,
+      disabled: disabled,
+      strokeWidth: strokeWidth,
+      scale: this.state.scale,
+      showCorrect: showCorrect
+    }) : null, showRationale && /*#__PURE__*/_react.default.createElement(_renderUi.Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      className: "prompt",
+      prompt: rationale
+    })));
+  }
+}
 HotspotComponent.propTypes = {
-  classes: _propTypes["default"].object,
-  model: _propTypes["default"].object.isRequired,
-  onSelectChoice: _propTypes["default"].func.isRequired,
-  session: _propTypes["default"].object.isRequired
+  model: _propTypes.default.object.isRequired,
+  onSelectChoice: _propTypes.default.func.isRequired,
+  session: _propTypes.default.object.isRequired
 };
-HotspotComponent.defaultProps = {
-  classes: {}
-};
-
-var styles = function styles(theme) {
-  return {
-    main: {
-      color: _renderUi.color.text(),
-      backgroundColor: _renderUi.color.background(),
-      position: 'relative'
-    },
-    collapsible: {
-      marginBottom: theme.spacing.unit * 2
-    },
-    prompt: {
-      fontSize: 'inherit'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(HotspotComponent);
-
-exports["default"] = _default;
-//# sourceMappingURL=index.js.map
+var _default = exports.default = HotspotComponent;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9wcm9wVHlwZXMiLCJfY29ycmVjdEFuc3dlclRvZ2dsZSIsIl9yZW5kZXJVaSIsIl9zdHlsZXMiLCJfY29udGFpbmVyIiwiU3R5bGVkVWlMYXlvdXQiLCJzdHlsZWQiLCJVaUxheW91dCIsImNvbG9yIiwidGV4dCIsImJhY2tncm91bmRDb2xvciIsImJhY2tncm91bmQiLCJwb3NpdGlvbiIsIlN0eWxlZENvbGxhcHNpYmxlIiwiQ29sbGFwc2libGUiLCJ0aGVtZSIsIm1hcmdpbkJvdHRvbSIsInNwYWNpbmciLCJIb3RzcG90Q29tcG9uZW50IiwiUmVhY3QiLCJDb21wb25lbnQiLCJjb25zdHJ1Y3RvciIsInByb3BzIiwiX2RlZmluZVByb3BlcnR5MiIsImRlZmF1bHQiLCJzaG93Q29ycmVjdCIsInN0YXRlIiwic2V0U3RhdGUiLCJvYnNlcnZlciIsInNjYWxlIiwiY29tcG9uZW50RGlkTW91bnQiLCJNdXRhdGlvbk9ic2VydmVyIiwibXV0YXRpb25zIiwiZm9yRWFjaCIsInRhcmdldCIsImRvY3VtZW50IiwiZ2V0RWxlbWVudEJ5SWQiLCJzdHlsZSIsImNzc1RleHQiLCJ6b29tIiwic3Vic3RyaW5nIiwiaW5kZXhPZiIsImxhc3RJbmRleE9mIiwiem9vbVBhcnNlZCIsInJlcGxhY2UiLCJuZXdTY2FsZSIsInBhcnNlRmxvYXQiLCJvYnNlcnZlIiwiYXR0cmlidXRlcyIsImF0dHJpYnV0ZUZpbHRlciIsImNvbXBvbmVudFdpbGxVbm1vdW50IiwiZGlzY29ubmVjdCIsInJlbmRlciIsInNlc3Npb24iLCJtb2RlbCIsImRpc2FibGVkIiwiZXh0cmFDU1NSdWxlcyIsImltYWdlVXJsIiwicHJvbXB0IiwibW9kZSIsIm11bHRpcGxlQ29ycmVjdCIsInNoYXBlcyIsIm91dGxpbmVDb2xvciIsImhvdHNwb3RDb2xvciIsImhvdmVyT3V0bGluZUNvbG9yIiwic2VsZWN0ZWRIb3RzcG90Q29sb3IiLCJkaW1lbnNpb25zIiwicmF0aW9uYWxlIiwidGVhY2hlckluc3RydWN0aW9ucyIsInN0cm9rZVdpZHRoIiwicmVzcG9uc2VDb3JyZWN0IiwibGFuZ3VhZ2UiLCJmb250U2l6ZUZhY3RvciIsImF1dG9wbGF5QXVkaW9FbmFibGVkIiwiY3VzdG9tQXVkaW9CdXR0b24iLCJvblNlbGVjdENob2ljZSIsImlzRXZhbHVhdGVNb2RlIiwic2hvd0NvcnJlY3RBbnN3ZXJUb2dnbGUiLCJzaG93UmF0aW9uYWxlIiwiaGFzVGV4dCIsImhhc01lZGlhIiwic2hvd1RlYWNoZXJJbnN0cnVjdGlvbnMiLCJjcmVhdGVFbGVtZW50IiwiaWQiLCJsYWJlbHMiLCJoaWRkZW4iLCJ2aXNpYmxlIiwiUHJldmlld1Byb21wdCIsImNsYXNzTmFtZSIsInNob3ciLCJ0b2dnbGVkIiwib25Ub2dnbGUiLCJiaW5kIiwicHJvcFR5cGVzIiwiUHJvcFR5cGVzIiwib2JqZWN0IiwiaXNSZXF1aXJlZCIsImZ1bmMiLCJfZGVmYXVsdCIsImV4cG9ydHMiXSwic291cmNlcyI6WyIuLi8uLi9zcmMvaG90c3BvdC9pbmRleC5qc3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgQ29ycmVjdEFuc3dlclRvZ2dsZSBmcm9tICdAcGllLWxpYi9jb3JyZWN0LWFuc3dlci10b2dnbGUnO1xuaW1wb3J0IHsgY29sb3IsIENvbGxhcHNpYmxlLCBoYXNUZXh0LCBQcmV2aWV3UHJvbXB0LCBVaUxheW91dCwgaGFzTWVkaWEgfSBmcm9tICdAcGllLWxpYi9yZW5kZXItdWknO1xuaW1wb3J0IHsgc3R5bGVkIH0gZnJvbSAnQG11aS9tYXRlcmlhbC9zdHlsZXMnO1xuXG5pbXBvcnQgQ29udGFpbmVyIGZyb20gJy4vY29udGFpbmVyJztcblxuY29uc3QgU3R5bGVkVWlMYXlvdXQgPSBzdHlsZWQoVWlMYXlvdXQpKHtcbiAgY29sb3I6IGNvbG9yLnRleHQoKSxcbiAgYmFja2dyb3VuZENvbG9yOiBjb2xvci5iYWNrZ3JvdW5kKCksXG4gIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxufSk7XG5cbmNvbnN0IFN0eWxlZENvbGxhcHNpYmxlID0gc3R5bGVkKENvbGxhcHNpYmxlKSgoeyB0aGVtZSB9KSA9PiAoe1xuICBtYXJnaW5Cb3R0b206IHRoZW1lLnNwYWNpbmcoMiksXG59KSk7XG5cbmNsYXNzIEhvdHNwb3RDb21wb25lbnQgZXh0ZW5kcyBSZWFjdC5Db21wb25lbnQge1xuICBjb25zdHJ1Y3Rvcihwcm9wcykge1xuICAgIHN1cGVyKHByb3BzKTtcbiAgICB0aGlzLnN0YXRlID0ge1xuICAgICAgc2hvd0NvcnJlY3Q6IGZhbHNlLFxuICAgICAgb2JzZXJ2ZXI6IG51bGwsXG4gICAgICBzY2FsZTogMSxcbiAgICB9O1xuICB9XG5cbiAgY29tcG9uZW50RGlkTW91bnQoKSB7XG4gICAgdGhpcy5vYnNlcnZlciA9IG5ldyBNdXRhdGlvbk9ic2VydmVyKChtdXRhdGlvbnMpID0+IHtcbiAgICAgIG11dGF0aW9ucy5mb3JFYWNoKCgpID0+IHtcbiAgICAgICAgY29uc3QgdGFyZ2V0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3F1ZXN0aW9uLWNvbnRhaW5lcicpPy5zdHlsZT8uY3NzVGV4dDtcbiAgICAgICAgY29uc3Qgem9vbSA9IHRhcmdldD8uc3Vic3RyaW5nKHRhcmdldC5pbmRleE9mKCctLXBpZS16b29tJykgKyAxMSwgdGFyZ2V0Lmxhc3RJbmRleE9mKCclJykpO1xuICAgICAgICBjb25zdCB6b29tUGFyc2VkID0gem9vbT8ucmVwbGFjZSgvXFxzL2csICcnKTtcblxuICAgICAgICBpZiAoem9vbVBhcnNlZCkge1xuICAgICAgICAgIGNvbnN0IG5ld1NjYWxlID0gcGFyc2VGbG9hdCh6b29tUGFyc2VkKSAvIDEwMDtcblxuICAgICAgICAgIGlmIChuZXdTY2FsZSAhPT0gdGhpcy5zdGF0ZS5zY2FsZSkge1xuICAgICAgICAgICAgdGhpcy5zZXRTdGF0ZSh7XG4gICAgICAgICAgICAgIHNjYWxlOiBwYXJzZUZsb2F0KHpvb21QYXJzZWQpIC8gMTAwLFxuICAgICAgICAgICAgfSk7XG4gICAgICAgICAgfVxuICAgICAgICB9IGVsc2UgaWYgKCF6b29tUGFyc2VkICYmIHRoaXMuc3RhdGUuc2NhbGUgIT09IDEpIHtcbiAgICAgICAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgICAgICAgIHNjYWxlOiAxLFxuICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgICB9KTtcbiAgICB9KTtcblxuICAgIGNvbnN0IHRhcmdldCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdxdWVzdGlvbi1jb250YWluZXInKTtcblxuICAgIGlmICh0YXJnZXQpIHtcbiAgICAgIHRoaXMub2JzZXJ2ZXIub2JzZXJ2ZSh0YXJnZXQsIHsgYXR0cmlidXRlczogdHJ1ZSwgYXR0cmlidXRlRmlsdGVyOiBbJ3N0eWxlJ10gfSk7XG4gICAgfVxuICB9XG5cbiAgY29tcG9uZW50V2lsbFVubW91bnQoKSB7XG4gICAgdGhpcy5vYnNlcnZlcj8uZGlzY29ubmVjdCgpO1xuICB9XG5cbiAgb25Ub2dnbGUgPSAoKSA9PiB7XG4gICAgY29uc3QgeyBzaG93Q29ycmVjdCB9ID0gdGhpcy5zdGF0ZTtcbiAgICB0aGlzLnNldFN0YXRlKHsgc2hvd0NvcnJlY3Q6ICFzaG93Q29ycmVjdCB9KTtcbiAgfTtcblxuICByZW5kZXIoKSB7XG4gICAgY29uc3Qge1xuICAgICAgc2Vzc2lvbixcbiAgICAgIG1vZGVsOiB7XG4gICAgICAgIGRpc2FibGVkLFxuICAgICAgICBleHRyYUNTU1J1bGVzLFxuICAgICAgICBpbWFnZVVybCxcbiAgICAgICAgcHJvbXB0LFxuICAgICAgICBtb2RlLFxuICAgICAgICBtdWx0aXBsZUNvcnJlY3QsXG4gICAgICAgIHNoYXBlcyxcbiAgICAgICAgb3V0bGluZUNvbG9yLFxuICAgICAgICBob3RzcG90Q29sb3IsXG4gICAgICAgIGhvdmVyT3V0bGluZUNvbG9yLFxuICAgICAgICBzZWxlY3RlZEhvdHNwb3RDb2xvcixcbiAgICAgICAgZGltZW5zaW9ucyxcbiAgICAgICAgcmF0aW9uYWxlLFxuICAgICAgICB0ZWFjaGVySW5zdHJ1Y3Rpb25zLFxuICAgICAgICBzdHJva2VXaWR0aCxcbiAgICAgICAgcmVzcG9uc2VDb3JyZWN0LFxuICAgICAgICBsYW5ndWFnZSxcbiAgICAgICAgZm9udFNpemVGYWN0b3IsXG4gICAgICAgIGF1dG9wbGF5QXVkaW9FbmFibGVkLFxuICAgICAgICBjdXN0b21BdWRpb0J1dHRvbixcbiAgICAgIH0sXG4gICAgICBvblNlbGVjdENob2ljZSxcbiAgICB9ID0gdGhpcy5wcm9wcztcbiAgICBjb25zdCB7IHNob3dDb3JyZWN0IH0gPSB0aGlzLnN0YXRlO1xuICAgIGNvbnN0IGlzRXZhbHVhdGVNb2RlID0gbW9kZSA9PT0gJ2V2YWx1YXRlJztcbiAgICBjb25zdCBzaG93Q29ycmVjdEFuc3dlclRvZ2dsZSA9IGlzRXZhbHVhdGVNb2RlICYmICFyZXNwb25zZUNvcnJlY3Q7XG4gICAgY29uc3Qgc2hvd1JhdGlvbmFsZSA9IHJhdGlvbmFsZSAmJiAoaGFzVGV4dChyYXRpb25hbGUpIHx8IGhhc01lZGlhKHJhdGlvbmFsZSkpO1xuICAgIGNvbnN0IHNob3dUZWFjaGVySW5zdHJ1Y3Rpb25zID1cbiAgICAgIHRlYWNoZXJJbnN0cnVjdGlvbnMgJiYgKGhhc1RleHQodGVhY2hlckluc3RydWN0aW9ucykgfHwgaGFzTWVkaWEodGVhY2hlckluc3RydWN0aW9ucykpO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxTdHlsZWRVaUxheW91dFxuICAgICAgICBleHRyYUNTU1J1bGVzPXtleHRyYUNTU1J1bGVzfVxuICAgICAgICBpZD17J21haW4tY29udGFpbmVyJ31cbiAgICAgICAgZm9udFNpemVGYWN0b3I9e2ZvbnRTaXplRmFjdG9yfVxuICAgICAgPlxuICAgICAgICB7c2hvd1RlYWNoZXJJbnN0cnVjdGlvbnMgJiYgKFxuICAgICAgICAgIDxTdHlsZWRDb2xsYXBzaWJsZVxuICAgICAgICAgICAgbGFiZWxzPXt7IGhpZGRlbjogJ1Nob3cgVGVhY2hlciBJbnN0cnVjdGlvbnMnLCB2aXNpYmxlOiAnSGlkZSBUZWFjaGVyIEluc3RydWN0aW9ucycgfX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8UHJldmlld1Byb21wdCBjbGFzc05hbWU9XCJwcm9tcHRcIiBwcm9tcHQ9e3RlYWNoZXJJbnN0cnVjdGlvbnN9IC8+XG4gICAgICAgICAgPC9TdHlsZWRDb2xsYXBzaWJsZT5cbiAgICAgICAgKX1cblxuICAgICAgICB7cHJvbXB0ICYmIChcbiAgICAgICAgICA8UHJldmlld1Byb21wdFxuICAgICAgICAgICAgY2xhc3NOYW1lPVwicHJvbXB0XCJcbiAgICAgICAgICAgIHByb21wdD17cHJvbXB0fVxuICAgICAgICAgICAgYXV0b3BsYXlBdWRpb0VuYWJsZWQ9e2F1dG9wbGF5QXVkaW9FbmFibGVkfVxuICAgICAgICAgICAgY3VzdG9tQXVkaW9CdXR0b249e2N1c3RvbUF1ZGlvQnV0dG9ufVxuICAgICAgICAgIC8+XG4gICAgICAgICl9XG5cbiAgICAgICAge3Nob3dDb3JyZWN0QW5zd2VyVG9nZ2xlICYmIChcbiAgICAgICAgICA8Q29ycmVjdEFuc3dlclRvZ2dsZVxuICAgICAgICAgICAgc2hvdz17c2hvd0NvcnJlY3RBbnN3ZXJUb2dnbGV9XG4gICAgICAgICAgICB0b2dnbGVkPXtzaG93Q29ycmVjdH1cbiAgICAgICAgICAgIG9uVG9nZ2xlPXt0aGlzLm9uVG9nZ2xlLmJpbmQodGhpcyl9XG4gICAgICAgICAgICBsYW5ndWFnZT17bGFuZ3VhZ2V9XG4gICAgICAgICAgLz5cbiAgICAgICAgKX1cblxuICAgICAgICB7aW1hZ2VVcmwgPyAoXG4gICAgICAgICAgPENvbnRhaW5lclxuICAgICAgICAgICAgaXNFdmFsdWF0ZU1vZGU9e2lzRXZhbHVhdGVNb2RlfVxuICAgICAgICAgICAgc2Vzc2lvbj17c2Vzc2lvbn1cbiAgICAgICAgICAgIGRpbWVuc2lvbnM9e2RpbWVuc2lvbnN9XG4gICAgICAgICAgICBpbWFnZVVybD17aW1hZ2VVcmx9XG4gICAgICAgICAgICBob3RzcG90Q29sb3I9e2hvdHNwb3RDb2xvcn1cbiAgICAgICAgICAgIGhvdmVyT3V0bGluZUNvbG9yPXtob3Zlck91dGxpbmVDb2xvcn1cbiAgICAgICAgICAgIHNlbGVjdGVkSG90c3BvdENvbG9yPXtzZWxlY3RlZEhvdHNwb3RDb2xvcn1cbiAgICAgICAgICAgIG11bHRpcGxlQ29ycmVjdD17bXVsdGlwbGVDb3JyZWN0fVxuICAgICAgICAgICAgb3V0bGluZUNvbG9yPXtvdXRsaW5lQ29sb3J9XG4gICAgICAgICAgICBvblNlbGVjdENob2ljZT17b25TZWxlY3RDaG9pY2V9XG4gICAgICAgICAgICBzaGFwZXM9e3NoYXBlc31cbiAgICAgICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgICAgIHN0cm9rZVdpZHRoPXtzdHJva2VXaWR0aH1cbiAgICAgICAgICAgIHNjYWxlPXt0aGlzLnN0YXRlLnNjYWxlfVxuICAgICAgICAgICAgc2hvd0NvcnJlY3Q9e3Nob3dDb3JyZWN0fVxuICAgICAgICAgIC8+XG4gICAgICAgICkgOiBudWxsfVxuXG4gICAgICAgIHtzaG93UmF0aW9uYWxlICYmIChcbiAgICAgICAgICA8Q29sbGFwc2libGUgbGFiZWxzPXt7IGhpZGRlbjogJ1Nob3cgUmF0aW9uYWxlJywgdmlzaWJsZTogJ0hpZGUgUmF0aW9uYWxlJyB9fT5cbiAgICAgICAgICAgIDxQcmV2aWV3UHJvbXB0IGNsYXNzTmFtZT1cInByb21wdFwiIHByb21wdD17cmF0aW9uYWxlfSAvPlxuICAgICAgICAgIDwvQ29sbGFwc2libGU+XG4gICAgICAgICl9XG4gICAgICA8L1N0eWxlZFVpTGF5b3V0PlxuICAgICk7XG4gIH1cbn1cblxuSG90c3BvdENvbXBvbmVudC5wcm9wVHlwZXMgPSB7XG4gIG1vZGVsOiBQcm9wVHlwZXMub2JqZWN0LmlzUmVxdWlyZWQsXG4gIG9uU2VsZWN0Q2hvaWNlOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxuICBzZXNzaW9uOiBQcm9wVHlwZXMub2JqZWN0LmlzUmVxdWlyZWQsXG59O1xuXG5leHBvcnQgZGVmYXVsdCBIb3RzcG90Q29tcG9uZW50O1xuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7OztBQUFBLElBQUFBLE1BQUEsR0FBQUMsc0JBQUEsQ0FBQUMsT0FBQTtBQUNBLElBQUFDLFVBQUEsR0FBQUYsc0JBQUEsQ0FBQUMsT0FBQTtBQUNBLElBQUFFLG9CQUFBLEdBQUFILHNCQUFBLENBQUFDLE9BQUE7QUFDQSxJQUFBRyxTQUFBLEdBQUFILE9BQUE7QUFDQSxJQUFBSSxPQUFBLEdBQUFKLE9BQUE7QUFFQSxJQUFBSyxVQUFBLEdBQUFOLHNCQUFBLENBQUFDLE9BQUE7QUFFQSxNQUFNTSxjQUFjLEdBQUcsSUFBQUMsY0FBTSxFQUFDQyxrQkFBUSxDQUFDLENBQUM7RUFDdENDLEtBQUssRUFBRUEsZUFBSyxDQUFDQyxJQUFJLENBQUMsQ0FBQztFQUNuQkMsZUFBZSxFQUFFRixlQUFLLENBQUNHLFVBQVUsQ0FBQyxDQUFDO0VBQ25DQyxRQUFRLEVBQUU7QUFDWixDQUFDLENBQUM7QUFFRixNQUFNQyxpQkFBaUIsR0FBRyxJQUFBUCxjQUFNLEVBQUNRLHFCQUFXLENBQUMsQ0FBQyxDQUFDO0VBQUVDO0FBQU0sQ0FBQyxNQUFNO0VBQzVEQyxZQUFZLEVBQUVELEtBQUssQ0FBQ0UsT0FBTyxDQUFDLENBQUM7QUFDL0IsQ0FBQyxDQUFDLENBQUM7QUFFSCxNQUFNQyxnQkFBZ0IsU0FBU0MsY0FBSyxDQUFDQyxTQUFTLENBQUM7RUFDN0NDLFdBQVdBLENBQUNDLEtBQUssRUFBRTtJQUNqQixLQUFLLENBQUNBLEtBQUssQ0FBQztJQUFDLElBQUFDLGdCQUFBLENBQUFDLE9BQUEsb0JBMENKLE1BQU07TUFDZixNQUFNO1FBQUVDO01BQVksQ0FBQyxHQUFHLElBQUksQ0FBQ0MsS0FBSztNQUNsQyxJQUFJLENBQUNDLFFBQVEsQ0FBQztRQUFF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

package/lib/hotspot/index.js.map

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