@pie-element/hotspot 4.8.1 → 4.8.4-next.1014

package/lib/hotspot/rectangle.js

@@ -35,7 +35,7 @@ var _icons = require("./icons");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var RectComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(RectComponent, _React$Component);
@@ -78,17 +78,6 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getOutlineWidth", function (selected, strokeWidth) {
       return selected ? strokeWidth : 0;
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateText", function (isCorrect, selected) {
-      if (selected && isCorrect) {
-        return 'Correctly\nselected';
-      } else if (selected && !isCorrect) {
-        return 'Incorrectly\nselected';
-      } else if (!selected && isCorrect) {
-        return 'Correctly\nunselected';
-      }
-
-      return 'Incorrectly\nunselected';
-    });
     return _this;
   }
 
@@ -106,7 +95,9 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
           width = _this$props2.width,
           x = _this$props2.x,
           y = _this$props2.y,
-          strokeWidth = _this$props2.strokeWidth;
+          evaluateText = _this$props2.evaluateText,
+          strokeWidth = _this$props2.strokeWidth,
+          scale = _this$props2.scale;
       var outlineColorParsed = isEvaluateMode ? this.getEvaluateOutlineColor(isCorrect, outlineColor) : outlineColor;
       var outlineWidth = this.getOutlineWidth(selected, strokeWidth);
       var iconX = x + width / 2 - 10;
@@ -127,7 +118,10 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
         iconSrc = _icons.faWrong;
       }
 
-      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, null, /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
+        scaleX: scale,
+        scaleY: scale
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
         classes: classes.base,
         width: width,
         height: height,
@@ -144,7 +138,8 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
       }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_image["default"], {
         src: iconSrc,
         x: iconX,
-        y: iconY
+        y: iconY,
+        tooltip: evaluateText
       }) : null);
     }
   }]);
@@ -175,11 +170,15 @@ RectComponent.propTypes = {
   width: _propTypes["default"].number.isRequired,
   x: _propTypes["default"].number.isRequired,
   y: _propTypes["default"].number.isRequired,
-  strokeWidth: _propTypes["default"].number
+  evaluateText: _propTypes["default"].string,
+  strokeWidth: _propTypes["default"].number,
+  scale: _propTypes["default"].number
 };
 RectComponent.defaultProps = {
   isCorrect: false,
-  strokeWidth: 5
+  evaluateText: null,
+  strokeWidth: 5,
+  scale: 1
 };
 
 var _default = (0, _styles.withStyles)(styles)(RectComponent);

package/lib/hotspot/rectangle.js.map

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

package/lib/index.js

@@ -33,7 +33,7 @@ var _sessionUpdater = require("./session-updater");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var Hotspot = /*#__PURE__*/function (_HTMLElement) {
   (0, _inherits2["default"])(Hotspot, _HTMLElement);
@@ -64,6 +64,9 @@ var Hotspot = /*#__PURE__*/function (_HTMLElement) {
     }
   }, {
     key: "session",
+    get: function get() {
+      return this._session;
+    },
     set: function set(s) {
       if (s && !s.answers) {
         s.answers = [];

package/lib/index.js.map

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

package/lib/session-updater.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "4.8.1",
+  "version": "4.8.4-next.1014+b002895e2",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -9,8 +9,8 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/math-rendering": "^2.3.8",
-    "@pie-lib/render-ui": "^4.11.7",
+    "@pie-lib/math-rendering": "^2.4.3",
+    "@pie-lib/render-ui": "^4.12.9",
     "konva": "^3.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
@@ -19,7 +19,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "c8dbb31e012aaa666c88f089238e86992f444986",
+  "gitHead": "b002895e29dec43623f303053f9a2bbefe276040",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/__tests__/image-test.jsx

@@ -16,7 +16,8 @@ describe('Image', () => {
       {
         x: 5,
         y: 5,
-        src: ''
+        src: '',
+        tooltip: null
       },
       opts
     );
@@ -42,5 +43,12 @@ describe('Image', () => {
         expect(toJson(wrapper)).toMatchSnapshot();
       });
     });
+
+    describe('tooltip', () => {
+      it('renders', () => {
+        const wrapper = mkWrapper({ tooltip: 'Correctly\nselected' });
+        expect(toJson(wrapper)).toMatchSnapshot();
+      });
+    });
   });
 });

package/src/__tests__/polygon-test.jsx

@@ -22,6 +22,7 @@ describe('Polygon', () => {
         id: '1',
         isCorrect: false,
         isEvaluateMode: false,
+        evaluateText: null,
         disabled: false,
         outlineColor: 'blue',
         selected: false,
@@ -68,7 +69,7 @@ describe('Polygon', () => {
 
     describe('evaluate with correct answer', () => {
       it('renders', () => {
-        const wrapper = mkWrapper({ isEvaluateMode: true, isCorrect: true });
+        const wrapper = mkWrapper({ isEvaluateMode: true, isCorrect: true, evaluateText: 'Correctly\nselected' });
         expect(toJson(wrapper)).toMatchSnapshot();
       });
     });

package/src/__tests__/rectangle-test.jsx

@@ -22,6 +22,7 @@ describe('Rectangle', () => {
         id: '1',
         isCorrect: false,
         isEvaluateMode: false,
+        evaluateText: null,
         disabled: false,
         outlineColor: 'blue',
         selected: false,
@@ -69,7 +70,7 @@ describe('Rectangle', () => {
 
     describe('evaluate with correct answer', () => {
       it('renders', () => {
-        const wrapper = mkWrapper({ isEvaluateMode: true, isCorrect: true });
+        const wrapper = mkWrapper({ isEvaluateMode: true, isCorrect: true, evaluateText: 'Correctly\nselected' });
         expect(toJson(wrapper)).toMatchSnapshot();
       });
     });

package/src/hotspot/container.jsx

@@ -15,10 +15,26 @@ export class Container extends React.Component {
 
   correctness = (isCorrect, isChecked) => isCorrect ? isChecked : !isChecked;
 
+  getEvaluateText = (isCorrect, selected) => {
+    if (selected && isCorrect) {
+      return 'Correctly\nselected';
+    }
+
+    if (selected && !isCorrect) {
+      return 'Should not have\nbeen selected';
+    }
+
+    if (!selected && isCorrect) {
+      return 'Should have\nbeen selected';
+    }
+
+    return null;
+  };
+
   render() {
     const {
       classes,
-      dimensions: { width, height },
+      dimensions: { width: withProp, height: heightProp },
       disabled,
       hotspotColor,
       imageUrl,
@@ -26,9 +42,13 @@ export class Container extends React.Component {
       outlineColor,
       onSelectChoice,
       shapes: { rectangles, polygons },
+      scale: SCALE,
       strokeWidth
     } = this.props;
 
+    const width = withProp * SCALE;
+    const height = heightProp * SCALE;
+
     return (
       <div
         className={classes.base}
@@ -37,6 +57,7 @@ export class Container extends React.Component {
         {imageUrl ? (
           <div className={classes.imageContainer}>
             <img
+              alt="hotspot-image"
               className={classes.image}
               height="auto"
               src={imageUrl}
@@ -56,11 +77,14 @@ export class Container extends React.Component {
             {rectangles.map((shape) => {
               const selected = this.isSelected(shape);
               const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;
+              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;
 
               return (
                 <Rectangle
+                  scale={SCALE}
                   isEvaluateMode={isEvaluateMode}
                   isCorrect={isCorrect}
+                  evaluateText={evaluateText}
                   disabled={disabled}
                   selected={selected}
                   height={shape.height}
@@ -79,11 +103,14 @@ export class Container extends React.Component {
             {polygons.map((polygon) => {
               const selected = this.isSelected(polygon);
               const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;
+              const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;
 
               return (
                 <Polygon
+                  scale={SCALE}
                   isEvaluateMode={isEvaluateMode}
                   isCorrect={!!isCorrect}
+                  evaluateText={evaluateText}
                   disabled={disabled}
                   selected={selected}
                   hotspotColor={hotspotColor}
@@ -145,7 +172,12 @@ Container.propTypes = {
   outlineColor:PropTypes.string.isRequired,
   session:PropTypes.object.isRequired,
   shapes:PropTypes.object.isRequired,
-  strokeWidth: PropTypes.number
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number
+};
+
+Container.defaultProps = {
+  scale: 1
 };
 
 export default withStyles(styles)(Container);

package/src/hotspot/image.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Image } from 'react-konva';
+import { Group, Image, Text, Tag, Label } from 'react-konva';
 
 class ImageComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      image: null
+      image: null,
+      showTooltip: false
     };
   }
 
@@ -39,17 +40,32 @@ class ImageComponent extends React.Component {
   };
 
   render() {
-    const { x, y } = this.props;
-    const { image } = this.state;
+    const { x, y, tooltip } = this.props;
+    const { image, showTooltip } = this.state;
 
     return (
-      <Image
-        width={20}
-        height={20}
-        x={x}
-        y={y}
-        image={image}
-      />
+      <Group>
+        <Image
+          width={20}
+          height={20}
+          x={x}
+          y={y}
+          image={image}
+          onMouseEnter={() => this.setState({ showTooltip: true })}
+          onMouseLeave={() => this.setState({ showTooltip: false })}
+        />
+
+        {showTooltip && tooltip && (
+          <Label x={x - 30} y={y + 25}>
+            <Tag
+              fill="white"
+              cornerRadius={5}
+              opacity={0.9}
+            />
+            <Text text={tooltip} padding={5} />
+          </Label>
+        )}
+      </Group>
     );
   }
 }
@@ -57,7 +73,8 @@ class ImageComponent extends React.Component {
 ImageComponent.propTypes = {
   src: PropTypes.string.isRequired,
   x: PropTypes.number.isRequired,
-  y: PropTypes.number.isRequired
+  y: PropTypes.number.isRequired,
+  tooltip: PropTypes.string
 };
 
 export default ImageComponent;

package/src/hotspot/index.jsx

@@ -1,18 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
-import { Collapsible, hasText } from '@pie-lib/render-ui';
-import Container from './container';
+import {Collapsible, hasText, PreviewPrompt} from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 
+import Container from './container';
+
 class HotspotComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      showCorrect: false
+      showCorrect: false,
+      observer: null,
+      scale: 1
     };
   }
 
+  componentDidMount() {
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach(() => {
+        const target = document.getElementById('question-container')?.style?.cssText
+        const zoom = target?.substring(
+          target.indexOf('--pie-zoom') + 11,
+          target.lastIndexOf('%')
+        );
+
+        const zoomParsed = zoom?.replace(/\s/g, '');
+        if (zoomParsed) {
+          const newScale = parseFloat(zoomParsed) / 100;
+          if (newScale !== this.state.scale) {
+            this.setState({
+              scale: parseFloat(zoomParsed) / 100,
+            })
+          }
+        } else if (!zoomParsed && this.state.scale !== 1) {
+          this.setState({
+            scale: 1,
+          });
+        }
+      });
+    });
+
+    const target = document.getElementById('question-container');
+    if (target) {
+      this.observer.observe(target, { attributes : true, attributeFilter : ['style'] })
+    }
+  }
+
+  componentWillUnmount() {
+    this.observer?.disconnect();
+  }
+
   onToggle = () => {
     const { showCorrect } = this.state;
     this.setState({ showCorrect: !showCorrect });
@@ -49,13 +87,19 @@ class HotspotComponent extends React.Component {
               labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}
               className={classes.collapsible}
             >
-              <div dangerouslySetInnerHTML={{ __html: teacherInstructions }}/>
+              <PreviewPrompt
+                className="prompt"
+                prompt={teacherInstructions}
+              />
             </Collapsible>
           )
         }
 
         <Typography className={classes.prompt}>
-          <span dangerouslySetInnerHTML={{ __html: prompt }} />
+          <PreviewPrompt
+            className="prompt"
+            prompt={prompt}
+          />
         </Typography>
 
         {imageUrl ? (
@@ -71,6 +115,7 @@ class HotspotComponent extends React.Component {
             shapes={shapes}
             disabled={disabled}
             strokeWidth={strokeWidth}
+            scale={this.state.scale}
           />
         ) : null}
 
@@ -80,7 +125,10 @@ class HotspotComponent extends React.Component {
               labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}
               className={classes.collapsible}
             >
-              <div dangerouslySetInnerHTML={{ __html: rationale }} />
+              <PreviewPrompt
+                className="prompt"
+                prompt={rationale}
+              />
             </Collapsible>
           )
         }

package/src/hotspot/polygon.jsx

@@ -55,17 +55,6 @@ class PolygonComponent extends React.Component {
 
   getOutlineWidth = (selected, strokeWidth) => selected ? strokeWidth : 0;
 
-  getEvaluateText = (isCorrect, selected) => {
-    if (selected && isCorrect) {
-      return 'Correctly\nselected';
-    } else if (selected && !isCorrect) {
-      return 'Incorrectly\nselected';
-    } else if (!selected && isCorrect) {
-      return 'Correctly\nunselected';
-    }
-    return 'Incorrectly\nunselected';
-  };
-
   render() {
     const {
       classes,
@@ -75,7 +64,9 @@ class PolygonComponent extends React.Component {
       outlineColor,
       selected,
       points,
-      strokeWidth
+      evaluateText,
+      strokeWidth,
+      scale
     } = this.props;
 
     const outlineColorParsed = isEvaluateMode
@@ -105,7 +96,7 @@ class PolygonComponent extends React.Component {
     }
 
     return (
-      <Group>
+      <Group scaleX={scale} scaleY={scale}>
         <Line
           points={pointsParsed}
           closed={true}
@@ -124,6 +115,7 @@ class PolygonComponent extends React.Component {
             src={iconSrc}
             x={iconX}
             y={iconY}
+            tooltip={evaluateText}
           />
         ): null}
       </Group>
@@ -150,11 +142,15 @@ PolygonComponent.propTypes = {
   outlineColor: PropTypes.string.isRequired,
   points: PropTypes.array.isRequired,
   selected: PropTypes.bool.isRequired,
-  strokeWidth: PropTypes.number
+  evaluateText: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number
 };
 
 PolygonComponent.defaultProps = {
-  strokeWidth: 5
+  evaluateText: null,
+  strokeWidth: 5,
+  scale: 1
 };
 
 export default withStyles(styles)(PolygonComponent);

package/src/hotspot/rectangle.jsx

@@ -36,17 +36,6 @@ class RectComponent extends React.Component {
 
   getOutlineWidth = (selected, strokeWidth) => selected ? strokeWidth : 0;
 
-  getEvaluateText = (isCorrect, selected) => {
-    if (selected && isCorrect) {
-      return 'Correctly\nselected';
-    } else if (selected && !isCorrect) {
-      return 'Incorrectly\nselected';
-    } else if (!selected && isCorrect) {
-      return 'Correctly\nunselected';
-    }
-    return 'Incorrectly\nunselected';
-  };
-
   render() {
     const {
       classes,
@@ -59,7 +48,9 @@ class RectComponent extends React.Component {
       width,
       x,
       y,
-      strokeWidth
+      evaluateText,
+      strokeWidth,
+      scale
     } = this.props;
 
     const outlineColorParsed = isEvaluateMode
@@ -88,7 +79,7 @@ class RectComponent extends React.Component {
     }
 
     return (
-      <Group>
+      <Group scaleX={scale} scaleY={scale}>
         <Rect
           classes={classes.base}
           width={width}
@@ -109,6 +100,7 @@ class RectComponent extends React.Component {
             src={iconSrc}
             x={iconX}
             y={iconY}
+            tooltip={evaluateText}
           />
         ): null}
       </Group>
@@ -138,12 +130,16 @@ RectComponent.propTypes = {
   width: PropTypes.number.isRequired,
   x: PropTypes.number.isRequired,
   y: PropTypes.number.isRequired,
-  strokeWidth: PropTypes.number
+  evaluateText: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  scale: PropTypes.number
 };
 
 RectComponent.defaultProps = {
   isCorrect: false,
-  strokeWidth: 5
+  evaluateText: null,
+  strokeWidth: 5,
+  scale: 1
 };
 
 export default withStyles(styles)(RectComponent);