@pie-element/hotspot 5.4.3-next.5 → 5.4.3-next.57

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

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;;;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"}
+{"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;;AAEA;;AACA;;;;;;IAEqBA,O;;;;;;;;;;;;SACnB,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKE,aAAL,CAAmB,IAAIC,8BAAJ,CAAkB,KAAKC,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAAKC,UAAL,EAA9C,EAAiE,CAAC,CAAC,KAAKL,MAAxE,CAAnB;;AACA,WAAKM,OAAL;AACD;;;WAED,sBAAa;AACX,UAAI,CAAC,KAAKC,QAAV,EAAoB;AAClB,eAAO,KAAP;AACD;;AAED,aAAOC,KAAK,CAACC,OAAN,CAAc,KAAKF,QAAL,CAAcG,OAA5B,KAAwC,KAAKH,QAAL,CAAcG,OAAd,CAAsBC,MAAtB,GAA+B,CAA9E;AACD;;;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,CAAmB,IAAIa,oCAAJ,CAAwB,KAAKX,OAAL,CAAaC,WAAb,EAAxB,EAAoD,KAAKC,UAAL,EAApD,CAAnB;;AAEA,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;;;kDArDkCU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { SessionChangedEvent, ModelSetEvent } 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(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session) {\n      return false;\n    }\n\n    return Array.isArray(this._session.answers) && this._session.answers.length > 0;\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(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\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;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"}
+{"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,UAACC,MAAD;AAAA,aAAYA,MAAM,CAACL,EAAP,KAAcA,EAA1B;AAAA,KAAvB,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": "5.4.3-next.5+7ba6e589b",
+  "version": "5.4.3-next.57+749d34ccd",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "^2.3.46",
-    "@pie-lib/math-rendering": "^2.5.0",
-    "@pie-lib/render-ui": "^4.13.6",
-    "@pie-lib/test-utils": "^0.2.19",
+    "@pie-lib/correct-answer-toggle": "^2.3.47",
+    "@pie-lib/math-rendering": "^2.5.1",
+    "@pie-lib/render-ui": "^4.13.7",
+    "@pie-lib/test-utils": "^0.2.20",
     "konva": "^3.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
@@ -21,7 +21,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "7ba6e589bd229421bea7efd640b64e56df62b8bc",
+  "gitHead": "749d34ccd164ce7a61c4d928abf3650820c285db",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/__tests__/container.test.jsx

@@ -23,7 +23,7 @@ describe('HotspotComponent', () => {
     let wrapper;
 
     beforeEach(() => {
-      wrapper = props => shallow(<HotspotComponent {...props} />);
+      wrapper = (props) => shallow(<HotspotComponent {...props} />);
     });
 
     it('snapshot', () => {
@@ -39,31 +39,33 @@ describe('HotspotComponent', () => {
     });
 
     it('snapshot with padding having a size accordingly to strokeWidth', () => {
-      let w = shallow(<ContainerComp
-        strokeWidth={50}
-        classes={{}}
-        dimensions={{ width: 100, height: 100 }}
-        onSelectChoice={jest.fn()}
-        disabled={false}
-        hotspotColor='#000'
-        outlineColor='#FAFAFA'
-        imageUrl='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8PEA8PDw8PDxAPDg8PDw0PDw8PDw8QFREWFhURFRUYHSggGBomHRUVITEhJSkrLi4uFx8zODMsNygtLysBCgoKDg0OFxAQFy0dHR0tLSstLS0tKy0tLS0tLSstLS0tKy0tLS0tLSstKy0tLS0tLS0tLS0tLS0tLS0tLS0tK//AABEIAKgBLAMBEQACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAABAgADBAUGB//EADoQAAICAQMCBAQEBQMDBQEAAAECAAMRBBIhMUEFE1FhIjJxgQYUQpEjUqGx0WJywUPh8BUkM1PxB//EABoBAQEAAwEBAAAAAAAAAAAAAAABAgMEBQb/xAAxEQEAAgIBAwIEBAYDAQEAAAAAAQIDEQQSITFBUQUTMmEicYGRQqGx0eHwFDPB8SP/2gAMAwEAAhEDEQA/ALszw5c45kEzCJmUTMyBzMhMygEwFJlQMwFJhCkwBIATIATAXMCZkAJlC5kTYQgZhAMoWBJQQYVCYCEygZhQzCgWlClpVLukQCYUuZCAJhSlpNAEwF3RoekzNSpmESBJlAOZYEEoOZQpMoUmELKJIhTAEgkgWADIFzAEIEIBMIEASoECSqEokBYUCYUhMBCZVKTKIDAhMihmApMgQmULmNCQPSZmlkGYQcy6BzMgJQcwITKgZgKYElQJQDMQpkEkCkyAUBrXaupHusRd711DeyL6t6Z7A8ntN1OPe8b8MopMsel19dudjcqcMpBVgfTB+hmN8N6eYSazDRNbBCYQIEgSVAMAYlEMKUyhSYCmFITKK2hSkygboUQYUCZApMoWAJQZB6KaWSS6BlElElBzCBmEAwJKBKgEwFJmMgZkFT3qMjJJVdzBVd9i/wAz7Qdg9zibK4b2jcQyik62z6zXLXUbgQwAG3BBDMeFGfTP/MYsU2v0z+pWu51LylOsYFL7UdKNz1226V/IuvcgMUZhkZ5B5XGOJ6rpVUeJKErrFFe1LTY7hrFutHZGdTwAOmAOeYTTueFeNq7eU5wST5TMQSwzwpPGWx3wM+gnBn4+vxV8NGTHrvDs5nI0oIDSIglExAUyhTKEJhSkygGFIYFZhSmUKYUMwoEwBmAMyoGZVTdA9JNDJJQZRJRMwJCJKiEwgShSYCkwFJkFd1oRWY9FUsfoBmWleq0QsRudPNeGeMWJcPKtGja7zBfqRudXUnPxpyPh6ZUDrPU06Wffpxp9puBc03vsau3at4esIKyDgkrvOSMevtYgrDq6D8EajxLUXipaNItaVPgO1iBbE3IFIyTkck//AJKpE/8A5v4mLzp2FIJUmu42fwrSP0qcZ3exA6Rs25eu/AniSan8qKGNm1rK2VlCMqkZZHJA4JHHXkQO14LqLjWq6lHS0BsMyFRaFbaWGepB4OO887kYeidx4c2SnT3h0gZzNRhAIkQZQjShGhSGULKoGAhhSMYCGFKxlCZgSVQgLKiEyqXdA9PNDIZRJRIElRMwgEygZhAJgLmEAmApMDLrkV1VHxtstqQ5sFQ+JwPnIIH3E28f62zH9Ty1tLuqU6db3NiK9tO3eHuQuCyBeqjnB+s729r8GosGl17/AJaqwKdKhNxIuqc3HC1Lt+IsRgjI6d5lCw+qfg8UatbdXp9OfDr67W09ldRA6BWIsrxtY5Y9VyJJSZ05b/j7SvqLNNqCNgcqNVs20llbGGXcSnI4bp34l0rt+J+OafSrWNTqE2sxNNhJe5CFz1GdwwcZPrg5zmSCO7xmv/GvhupbV1WK21a/M0erRG3Lq+j4XghGwmQeuH9RFqxaNSlq7hk0eoFqK46MM49D3H7zyb0mlpiXHaNTpoEwYmECQFIgKRKpCIC7Y2oFZdrpWywK2EqqzKEMKEokoBgKZUVsYCZgerzNTMYElEhEJhC5lEzCFJhCkwFzKgEwFJgVXVVua1trstrN1QeuoZsZS4BCjPXmbcH1tmP6nW/AtVX8FtLcWv035lbtDeMbamtwdrbcqxwhwcjOemTO6XRLzn45uoTW2alrtR5tllrChVVTp7aQg0+7cdpXO4nGcdusyhlDzF+t1iPYz2aittQVutAZ6vNzyHKjAI54+sul1LA2c59ep6ZEak6Z9R/LlOvoMH29PtM7UmvlnfFasbtDr+HeI6JdLqdO+mRtTftFGtJ5obcOeegwD055I6TW1PQaTVaIGqvTko9qFrNPu3pXag2sEJ5GSjHnqCpHecvKx7jq9mrLTcbdETz3MYQDAmICkQpdsbE2RtSssKqYSiphLAqcSqrIlAIgKZQuZkAYCNAXEI9Tma2aZhEzKJmRAJhCkygZhAJlQpMaUMyoBMBCZBVYl7lBpmVbQ4sVmxgeUDb3/wBk3cf62zF9TmaD8TPob6ba0otsFdv5iwPldSL2FvxYA2uhOO/TE7XRMOJ49rtVe6DUEvzdZSPhJ222s5OV5654PTE2REz2iG2tZmdVjbdZ4v8AmGVtYzGxUVFZ1CjaM4HAA7nrPRwzirqLR0z93v8ADvxaRFcteifvDa+mqdeikY44H9DO2aVtGtbe3bBhy11qJhyfEPDyikodyjkoeo+k483HmK/h8R6PF5vw+aU3Sd1jvr+yrV+FK6LZVwcA47EYjJxK2rE0Y5/hdMmOL4nOqqamxWHwupDKfcH3nm3xzG4s8HJitSem0PomluFiK46MAfp6ieNevTaYefaNTpdMWIiRTQDiTa6DEihiBW8qqWEyFTLARllNKysoUiBU0yCmUKZQpMAQPTZmtdhmVEgTMIBMBSYQCZUAmXQUmUDMIBMBDIrH4lqRUoc0reu/DVNnawKtz9jg/abuPH4m3FHd57wt6DVbS9am2xqzXqC+DWF6qBjkH6/2npYaRedTL0+Jhpmv02tpctulqtVCjV2bbBc7tlHYvlHX0G3g/Qe86ePauPJNb9nofD8mPjcm1M3b03/vu6T6ZWHZgex5E9KaxaPd9LbDTJX0mJ/VlOg2nNbNW3p1U+2Jq+TFe9J1/RwzwIxzvDM0n+X7AdYycXJx/wDYvK/cdpl8y1frj9VjkZMfbNXt7x4UeHahQ7U5BX5qzn9J6j7THFaItNP2auJlrW9sMTuPNfy9v0DxnSh03AfGuSPf1EcjFF6/dj8Q40Zce9d4a/wXr/MrsrOc1MCM/wArD/IP7z5fl11MS+Nzx329KJyNBpA4kUZFAmRS4lCsI2qsrKK2EoqIlFbCUI0CphLArMyQjSwElEgelzMBMwBmEAmEDMugCZdIUmUAmVAzClJgDMgBMgo1gyhyzoAVJerPmKoI3Fffbu4m3DOrw2Y51Zx9Ho6HTCFbAGYbsYLYPDeoyMH7z6DDTHekdn2HC4/Hz8eNREz6++ya3wZnQDazqCdmQS6njIR/24mvLSkdpt/f93JzMOKn4Jyb16T5j8p/8lz6NDrasmlLrEX59tbt5ff4wAQv1mmuS2P6bODHyMvHneLJ29v8NOl8dB+GwD/cJ24uZE9rvZ43xmLfhzRr7w6O5XGQQwM69xPeHrRal43E7hy/EfD9v8Wrh1Odo7jvxOXLj1PXTzDyuXxeifnYu0x3adJqRfWGHXow9DOnFkjJXcOvBnryMfVH6sfgJ8jX7Oi3o6j6j4v+P6zwviWLW/3fLfE8Py7z9+72xbAz6TxdPJhKS20b8bsZbHyjvj6D1idb7MtHptDjcucHOCQRn3Ge3vMbRqdGlhkEAkVDCkaBWTLAraZCswqtpRS0qEMCpjMoFTSwFlEgejzMETMqBmAN0qFLSoGZRCZQuYAJlC5gTMgGZBJF0wpVTodV5u7RN5ulN6o4t1FQc8rW6VsNrnHuOfvPTx9VY8u7HNqR2mYcurxS5gtim/zarzdUA2dPVzu+Cog4O73x7TbXHa3iG7HgyZIma12xig3OWtc7i247zyWznPPvNmPHEzqZ034ONGS3Ta3T+aa3w4gDOCo/UoHHuRLkwTTv6M+TwL4O/mvvDJt1GmxYBuq7uPiUf7h1H3lpe+Pv6Jiy5sH4o+n/AH9nS0/iqPjd8J7HsT7GdtM9beXs4edW8av2ZbP/AGtnnLlqbOLVHO3/AFTCf/xv1x9M+Wi8f8TL86velvMf+tWuULfpLVwf49Yz6qx/7TX8RpE06mHxrFWccZI/3cPX9/pz/ifLvk4MFz1/bt95PHhVomIMipIoExoVsZdKQyhDKKnlRWZVVtAqaEUvMoFZgQCUGB38zFAJlQMwFJmTEMwBmUAmUAmAMyiZkUCYAzAVfMdzVprEdrNJY9guq2JRjJb4nHOUHDDuw7Ttx44rH3dVKREPP2aQahmZXQBlRnCU+StdhGWqVfQdMjgztw4Jyb76erwvh9+VuYnUQ2afT2VDC7GA9VIJ/adtKXxxqNS9/BxuTxq9NJrMfeJj+6MxbiyjPupB/viWbTP1U2t75L9s3Hi35TE/10A06dB5iZ7f9pj8uvpEw024eGY7VtXfpH/2YVJTamSpHOfh9R79pqrhvHeJcdPh/IrHVWY/JzNXo1zuCNQ3fau+lvqvb7TCcdq99a/o578fJj7zWa/lG4n84U19Cu4LxyB/EpI6dOqy1v6eP5x/hcWT+Hevt5r+3mF+nrbYi4OK7qnU53qoDgkbh1GN3vxMM1o+VOP9mvk5KxgnBPmPHr/P2ex0Ospv801PvaplyAPhZG4DqT2z/eeLfjzXH1TLxZw6x9W+8efya1Pr/mc2t+GjR5iJmGUFLQF3RoITKoQARKKmEqKyIVW4gVMIRU6yhCsAETIITA72ZiiZlQpMASoEqJKBAEqhAGYUMwEsbAJzjAPI6jjrMq+YWPMOeTo/NvS78yK0ruWl3LHUWOP/AIVsB4UAEeg4E9CHYzV6a+pmqRWVlA81bcfBZjnGAMA8cHP1nXx7ZNTFIex8MycrptTBETH39D/ltQf+qo9gMzo6c0/xPSnj/EbeckR/v5E1DXVDJsRh3UEK5Gegmu9slPNtuPPn5WDtfLFvtHlenjFBHIdPbaWx+02V5FXbi+LYdd4mP0Ld4vp8Z3n6bWH95f8AkU92c/FuNHfc/syHxlW4pqtsP0wv7jMx/wCVE/TWZaI+MRedYsc2FabrSD5KBh0G7Ln/AE/eY3yT5mIhrz8i0R15KVrMeO+5/k0aTSor4Vzy1oLsisvmeWWUL1GM+WN3OC44btwz7vB1vu9HTXtU4OdxBc5BZ2Chdx4GeB1wBPNz3tee3hyZbWt48LFnM0DmRUJkFbGVUUSxEyDtPpMopM+irjpHxnE6Z4eSK70KrKmXqMTRfFan1QKis1hSkoqeuBUUgVWCEVGUVPKKiZR6AyIEIkoBlQJAJQDCgZkBmAICmFV2glWA6lSB9cS1nUxJHaVV2sWu8Waha9fZbS7Wgn5mtrCqm3HwWIRnjOQOMdZ6FZiY2641MMtRt03mrqKrVItKMWH/AFNobYT64wfvOzj54xxMTD2PhnxKnFrat6zO+/ZW73XfL/CT17n6TdNsmXx2h22ycznfR+Chl0NVfxOScd25J+0fKpjjdmyeDxeJXryzufv/AGAX235WhRWnTzD1I9ph1Wv9PaHN83Nyv+uOmvuddFRpxuswzH9T8kn2EvRWveWyOLgwV6r9/vJsWPwFFS4yEOA5X+Y9kX3P7GYzefTs135Vtaxx0x/vou0WlbcxJYLnH6gzevXt79ZwcrkRT8Ne8/0ePzM8U3SO9p8z7f5dBdNX8RwMkIhTjG0bsHHbsPt7Tz5vaa+fV53Xbp8+rcqfAQDwqqzIhIUgtjoOAwPJ+oP16aUm0dczvUb17x/j1ZxaZ77dDTaDdU5A3FhlWA+XbuY/YgD7kTdXhR8qY8zbx9tf3hj09mPV6fZyOnC++7aC39TOTlcb5U9vHj9dRMsZjTPONA2wrqeGaLPPX2ntcLjR5kiHd03ge7nGB6YnpxhxU9GUVaz4YoGMTd1VmNaZac7xTw8bc4A55P0nLysdb1Y2h5zU1gHifPZ6RWezFQRNCq3WBQ6wM9iyigiUVWCBQYHpSsmzRGWXbHRcTLaDtk2ARAUiUKZQplCkwATChmAIREpNn8EHT1Cxmf8AM2jayv5TJs3/AKQwI5PQgHInTgyRrUt2O3oTXqbNM+u1Nlepu1DGiypi1d2mswfLvABwylU44xgj3nU2qH1YRELq6lkDJuRgHHTKE9R7z068mnT38w+sw/GMFcMb31RDLVpTcRZdkL+ikcE+59BNcY7ZJ67ufFxcvLt8/P4nxH++jo2XbSKalD2EZCjhEH8zHsJna2u0eXTnzRj1jpG7e3t+ftCtKlQl8m23BzdtB2kdVpU8Z/1Hp/SaLTET3nu87LatLfjnqt/KPyhrWoFRu6thmT5l+Jc8t+puR8WfsJzcrP8ALjUeZcfN5EYqxWve0/yWgen7Tx57z3eFM7nbp6GooWK7bVZEGcZ/mzU4/TnP7gcz1ONWaR21aJ/3U+2/6tkeHtPw7+HkpVTYAXJFibtwKDcpZCO54/rOj5UY4/B7/tE+jbWvq7JVcFuFyTvA+U+5H2m+Pw7WXI/I6TUWZKqTWdxVCMPk/qAnnczNjvMVidz5Tp2z+KeCUeVY4UV4LWZHXgH4R7Tz5mJjvGiaw8aiZIHrNdK9U6anqfBtFtAPafRYK9FYhlWHoPPVRwZtmW+KslmtXvL8yDpYfENWhUjI+sxyZaxHeWu0PK6pBnIPWeDyKx1br6tZDpLB+gnvwMxPEzR/DsaNf4edqWKpywwy46Gdufh2vjrkpHf1gn3c/WafZtB+bGWHpOHPhjFqN9/UYbUmgZXEClxKKCJB6giYbUhSXaaTZL1Jou2NmgKS7XRCsu00qYTKJTSppQpMAZgCDSQBCLtNq3rvr1LKuoaisV01WhdgQH5M45GCwGemR2GJ005Gu1m2uT0lf4azWrTbqUpvr01rUUeEAA3tXa36cfMRkYJ/k5xidUWifEt0TE+GK6lvgVGBsYMtqlbM6QqfiFoKjHse+PTmd0cr8OvV9DT4xHyta1bx9vz/AMKho2QbFcYf4rLVYOzg9DuHHTsOAJy5uXTHGq95lxZ/iGPDSYxT1Wt5mWoUrt244wB1I4HuJ5U5rzbq33eFOW826pnuetAoCgYAGAJha02ncsLWm07lYJijp+Eaqul1sPmEj5guAMfvz/56Ts4+XHi1bvv19mVZ09Ro/wAShnWsc7yQnXgkdMztxc6mTJ02jW2/ca3DH+IfHrEXYEZCcgMVI6duZ43P+I5Jm2Ksa+62nTh+EeKPVuZWy3xLZznkHP8AbE8TNa269M616++2Nb6btf8AiBtSBV8owNxz1nRXNe969c9o8E33GoYaX2nPWeniv0ztrdKnxZl7cTtjnSyi2mHUeNWq2e2eZqj4jatvxeG6tlVviNl5wmRNOXm5M2TpxQtrLbkYKDkkY59jNmWL6id7abBoU3WIOeTjiY8f/sqkeXudFoQgO/aWHRe5n0VbTrTb0rtXQpxhQMdZspaY2kw8z4loakDOy7uSf8Ca8uHFFZtau/VrmIiHkddYXYnG329BPns95veZmNfZGJxNIzPKKjA9VtmjbPRgkmzSeXLs0UpLEmiFJls0rdZYlNM7iZxKM7yppWZkgEyKmYAzCJCaGQEdu2CCCMgg9iD2MsTMeE3pbTY6CxVewC05tHmOfMJ4O/J+L7zOc159WXXYVE1MBgMIDgQLFkHd8Hq2gWg7GBwc4ZHHb6Gc+bk/JmNx2b6V3G23WeO13kpYoG39JGf6GeTysuTNPVMa9phnuPDzevpqrDW0DCtxYoJxz+r2lxTe+q39PDXbXox6E7vi9OP8Tvw4/wAW/Zg6CmdgfMCeSbCFXqeJjOKckxEMqzL1PgH4eSld1hDMeo9J7PE4sYY3Plvivu7N/henIIIA3TqmK27TCTSHm9boRS5akcg4QluhmFuJWsddY7sZr7NKeL4YVsysy7dx/wBfpObDzY+bOKe+u36ttYiYabtZn9YBI3dwwHfI+s9Sl4idSkwx32cZ4IHPM39bC0PK+L3o5OEKtnvjGPbE8Hm5sd5+nVvdpch554y2CUVmVXrgs49s1qpJtlECVl2aUvMoRWZltFTyxIz2CZwksts2QxUEyoBMAZkBEAiRBErEwgMIDiQSA4gOJEODCr6rNuevI7HHPYzTlxRkrqWVbaZ3QuwLg5/nU8icXyL0iY1tn1RLMrvm1CfiVWJHZlAz/aX5Pf2YzLXpvkTHHw9vrOzF9MIvBmwHdKOj4S6o3mMcBZ28OKRbqs24q7l6AeKAtuBzWR8X1nqVtW07iezo12FvFa1Ugtu28nkcD/wzO81rDDUuB+INahR2qOec7gfkI7Tj5OaIxzqSbREPKf8AqThCQ5VmI6dT9587iy5Me4rOtsN9l+j8c1jrsTaFUFS5HJ5zye876cvNFYisnVp3tFrXsBrcKSVPxDjt3ndx+TfJ+CzGbb7ONqM5IOcjiefffVMS1sbyKz2QiqVXslE8/bafMKDGWBS0zhFZEygVuJlCSzWTOGLHdNkMZZ2mSFzAmZAQYQ4MggMqGBhDCQNmAcwGWA4MB1kFiyKcSLpRqtMGIYcMOPqvcTVlruDW19NG2tO/XmauLeLRMfdfQ4E6kHECe3b0l8MomY8M+t1dlCN5Z+BvmU9PtM4z3x1mKz5Z1vLh6PxiyvJQDDdcjOeZI5F4lsnLMxp0l1e9LbnAHmH5R06Y/wCJhky9W7T6tNpTwzwJrcO3wr/L3MuLjzaNyw63Uv06VDaoA9v+ZtyRFe0G9s9dpU5HWY0vNJ3CqLTnkzGZmZ3Iy2SqzWSirMD2WZ5zcmYALTKAhmSFMygUvMoSWS5pthjLHaZshioJlQhMCZgEGQHMIbMIIMgeEEGA2YDKYFgkFiiQWrIyOIBkF1LgcHoes8/Pjtjt82n6qFle36HoZ14c1ckbg0WbgBKF1FIdSp7iY2jcES88+gIdaz0J6zVXvZZl000wexKV+VeT7zKI68kVa7S9fUorT7T1u1YYw8/q3LMSZw3nctlfDO0wVS5l0M9hlVlsmQqgew3TztNmwLRo2GZkm0MqkYzKBnsabIRktaZwksdhmyGKomVCEwJmBMwCDIhgYDqZENmEEGA8BlgXLMVWCQWCRRzCjmAwMgsW3HDcj+08/Lhtit14wWTHI5HrOvDnrkj7hBN4dRyMQirxbSYCv6GcmaJrO1N4NQAd3Uzp4Vf45a7T6O3faMYno2tDCXB1NmWPpOSzZTwzM0xZqXMqqHMooslFcaH/2Q=='
-        isEvaluateMode={false}
-        session={{ answers: [{ id: '1' }, { id: '2' }] }}
-        shapes={{
-          rectangles: [
-            {
-              id: '1',
-              correct: true,
-              x: 0,
-              y: 0,
-              width: 80,
-              height: 80
-            },
-          ],
-          polygons: []
-        }}
-      />);
+      let w = shallow(
+        <ContainerComp
+          strokeWidth={50}
+          classes={{}}
+          dimensions={{ width: 100, height: 100 }}
+          onSelectChoice={jest.fn()}
+          disabled={false}
+          hotspotColor="#000"
+          outlineColor="#FAFAFA"
+          imageUrl="data:image/jpeg;base64,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"
+          isEvaluateMode={false}
+          session={{ answers: [{ id: '1' }, { id: '2' }] }}
+          shapes={{
+            rectangles: [
+              {
+                id: '1',
+                correct: true,
+                x: 0,
+                y: 0,
+                width: 80,
+                height: 80,
+              },
+            ],
+            polygons: [],
+          }}
+        />,
+      );
 
       expect(w).toMatchSnapshot();
     });
@@ -76,12 +78,17 @@ describe('CorrectAnswerToggle', () => {
     mode: 'evaluate',
     responseCorrect: false,
   };
-  const testWrapperFn = (props) => shallowChild(HotspotComponent, {
-    model: {
-      ...model,
-      ...props
-    }
-  }, 1);
+  const testWrapperFn = (props) =>
+    shallowChild(
+      HotspotComponent,
+      {
+        model: {
+          ...model,
+          ...props,
+        },
+      },
+      1,
+    );
 
   beforeEach(() => {
     testWrapper = testWrapperFn({});
@@ -125,11 +132,11 @@ describe('Container', () => {
     opts = _.extend(
       {
         classes: {
-          base: 'base'
+          base: 'base',
         },
         dimensions: {
           height: 0,
-          width: 0
+          width: 0,
         },
         disabled: false,
         hotspotColor: 'rgba(137, 183, 244, 0.65)',
@@ -139,13 +146,13 @@ describe('Container', () => {
         session: { answers: [] },
         shapes: {
           rectangles: [],
-          polygons: []
-        }
+          polygons: [],
+        },
       },
-      opts
+      opts,
     );
 
-    return shallow(<Container {...opts} onSelectChoice={onSelectChoice}/>);
+    return shallow(<Container {...opts} onSelectChoice={onSelectChoice} />);
   };
 
   beforeEach(() => {
@@ -181,17 +188,24 @@ describe('Container', () => {
           shapes: {
             rectangles: [
               { id: '1', x: 5, y: 5, width: 5, height: 5 },
-              { id: '2', x: 25, y: 25, width: 5, height: 5 }
+              { id: '2', x: 25, y: 25, width: 5, height: 5 },
             ],
             polygons: [
-              { id: '3', points: [{ x: 94, y: 4 }, { x: 89, y: 4 }, { x: 36, y: 40 }] }
-            ]
+              {
+                id: '3',
+                points: [
+                  { x: 94, y: 4 },
+                  { x: 89, y: 4 },
+                  { x: 36, y: 40 },
+                ],
+              },
+            ],
           },
           imageUrl: 'https://picsum.photos/id/102/200/300',
           dimensions: {
             width: 200,
-            height: 300
-          }
+            height: 300,
+          },
         });
         expect(toJson(wrapper)).toMatchSnapshot();
       });

package/src/__tests__/image.test.jsx

@@ -17,9 +17,9 @@ describe('Image', () => {
         x: 5,
         y: 5,
         src: '',
-        tooltip: null
+        tooltip: null,
       },
-      opts
+      opts,
     );
 
     return shallow(<Image {...opts} />);

package/src/__tests__/polygon.test.jsx

@@ -20,7 +20,7 @@ describe('Polygon', () => {
     opts = _.extend(
       {
         classes: {
-          base: 'base'
+          base: 'base',
         },
         height: 200,
         hotspotColor: 'rgba(137, 183, 244, 0.65)',
@@ -31,9 +31,13 @@ describe('Polygon', () => {
         disabled: false,
         outlineColor: 'blue',
         selected: false,
-        points: [{ x: 94, y: 4 }, { x: 89, y: 4 }, { x: 36, y: 40 }]
+        points: [
+          { x: 94, y: 4 },
+          { x: 89, y: 4 },
+          { x: 36, y: 40 },
+        ],
       },
-      opts
+      opts,
     );
 
     return shallow(<Polygon {...opts} onClick={onClick} />);
@@ -64,7 +68,6 @@ describe('Polygon', () => {
       });
     });
 
-
     describe('hotspot color', () => {
       it('renders', () => {
         const wrapper = mkWrapper({ hotspotColor: 'rgba(217, 30, 24, 0.65)' });
@@ -92,29 +95,37 @@ describe('Polygon', () => {
       outlineColor: 'blue',
       strokeWidth: 5,
       selected: false,
-      points: [{ x: 94, y: 4 }, { x: 89, y: 4 }, { x: 36, y: 40 }],
+      points: [
+        { x: 94, y: 4 },
+        { x: 89, y: 4 },
+        { x: 36, y: 40 },
+      ],
       markAsCorrect: false,
       showCorrectEnabled: false,
-      onClick
+      onClick,
     };
 
     const getComponents = (model) => {
-      const testWrapper = shallowChild(Polygon, {
-        ...defaultModel,
-        ...model
-      }, 1);
+      const testWrapper = shallowChild(
+        Polygon,
+        {
+          ...defaultModel,
+          ...model,
+        },
+        1,
+      );
       const polygonComponent = testWrapper();
       const lineComponent = polygonComponent.find(Line);
       return {
         polygonComponent,
-        lineComponent
+        lineComponent,
       };
-    }
+    };
 
     describe('when correctly selected', () => {
       const { polygonComponent, lineComponent } = getComponents({
         selected: true,
-        isCorrect: true
+        isCorrect: true,
       });
 
       it('should have a blue outline', () => {
@@ -132,7 +143,7 @@ describe('Polygon', () => {
     describe('when correctly not selected', () => {
       const { polygonComponent, lineComponent } = getComponents({
         selected: false,
-        isCorrect: true
+        isCorrect: true,
       });
 
       it('should have no outline', () => {
@@ -148,7 +159,7 @@ describe('Polygon', () => {
     describe('when incorrectly selected', () => {
       const { polygonComponent, lineComponent } = getComponents({
         selected: true,
-        isCorrect: false
+        isCorrect: false,
       });
 
       it('should have a red outline', () => {
@@ -166,7 +177,7 @@ describe('Polygon', () => {
     describe('when incorrectly not selected', () => {
       const { polygonComponent, lineComponent } = getComponents({
         selected: false,
-        isCorrect: false
+        isCorrect: false,
       });
 
       it('should have no outline', () => {
@@ -184,7 +195,7 @@ describe('Polygon', () => {
       it('should have a green outline', () => {
         const { lineComponent } = getComponents({
           showCorrectEnabled: true,
-          markAsCorrect: true
+          markAsCorrect: true,
         });
         expect(lineComponent.prop('stroke')).toEqual('green');
         expect(lineComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
@@ -193,7 +204,7 @@ describe('Polygon', () => {
       it('should have a green checkmark icon', () => {
         const { polygonComponent } = getComponents({
           showCorrectEnabled: true,
-          markAsCorrect: true
+          markAsCorrect: true,
         });
         const imgComponent = polygonComponent.find(Image);
         expect(imgComponent.prop('src')).toEqual(faCorrect);
@@ -204,7 +215,7 @@ describe('Polygon', () => {
           showCorrectEnabled: true,
           markAsCorrect: false,
           selected: true,
-          isCorrect: false
+          isCorrect: false,
         });
         expect(lineComponent.prop('strokeWidth')).toEqual(0);
       });
@@ -214,7 +225,7 @@ describe('Polygon', () => {
           showCorrectEnabled: true,
           markAsCorrect: false,
           selected: true,
-          isCorrect: false
+          isCorrect: false,
         });
         const imgComponent = polygonComponent.find(Image);
         expect(imgComponent.length).toEqual(0);

package/src/__tests__/rectangle.test.jsx

@@ -26,7 +26,7 @@ describe('Rectangle', () => {
     opts = _.extend(
       {
         classes: {
-          base: 'base'
+          base: 'base',
         },
         height: 200,
         hotspotColor: 'rgba(137, 183, 244, 0.65)',
@@ -39,9 +39,9 @@ describe('Rectangle', () => {
         selected: false,
         width: 300,
         x: 5,
-        y: 5
+        y: 5,
       },
-      opts
+      opts,
     );
 
     return shallow(<Rectangle {...opts} onClick={onClick} />);
@@ -104,26 +104,30 @@ describe('Rectangle', () => {
       strokeWidth: 5,
       outlineColor: 'blue',
       markAsCorrect: false,
-      showCorrectEnabled: false
+      showCorrectEnabled: false,
     };
 
     const getComponents = (model) => {
-      const testWrapper = shallowChild(Rectangle, {
-        ...defaultModel,
-        ...model
-      }, 1);
+      const testWrapper = shallowChild(
+        Rectangle,
+        {
+          ...defaultModel,
+          ...model,
+        },
+        1,
+      );
       const rectangleComponent = testWrapper();
       const rectComponent = rectangleComponent.find(Rect);
       return {
         rectangleComponent,
-        rectComponent
+        rectComponent,
       };
-    }
+    };
 
     describe('when correctly selected', () => {
       const { rectangleComponent, rectComponent } = getComponents({
         selected: true,
-        isCorrect: true
+        isCorrect: true,
       });
 
       it('should have a blue outline', () => {
@@ -141,7 +145,7 @@ describe('Rectangle', () => {
     describe('when correctly not selected', () => {
       const { rectangleComponent, rectComponent } = getComponents({
         selected: false,
-        isCorrect: true
+        isCorrect: true,
       });
 
       it('should have no outline', () => {
@@ -157,7 +161,7 @@ describe('Rectangle', () => {
     describe('when incorrectly selected', () => {
       const { rectangleComponent, rectComponent } = getComponents({
         selected: true,
-        isCorrect: false
+        isCorrect: false,
       });
 
       it('should have a red outline', () => {
@@ -175,7 +179,7 @@ describe('Rectangle', () => {
     describe('when incorrectly not selected', () => {
       const { rectangleComponent, rectComponent } = getComponents({
         selected: false,
-        isCorrect: false
+        isCorrect: false,
       });
 
       it('should have no outline', () => {
@@ -193,7 +197,7 @@ describe('Rectangle', () => {
       it('should have a green outline', () => {
         const { rectComponent } = getComponents({
           showCorrectEnabled: true,
-          markAsCorrect: true
+          markAsCorrect: true,
         });
         expect(rectComponent.prop('stroke')).toEqual('green');
         expect(rectComponent.prop('strokeWidth')).toEqual(defaultModel.strokeWidth);
@@ -202,7 +206,7 @@ describe('Rectangle', () => {
       it('should have a green checkmark icon', () => {
         const { rectangleComponent } = getComponents({
           showCorrectEnabled: true,
-          markAsCorrect: true
+          markAsCorrect: true,
         });
         const imgComponent = rectangleComponent.find(Image);
         expect(imgComponent.prop('src')).toEqual(faCorrect);
@@ -213,7 +217,7 @@ describe('Rectangle', () => {
           showCorrectEnabled: true,
           markAsCorrect: false,
           selected: true,
-          isCorrect: false
+          isCorrect: false,
         });
         expect(rectComponent.prop('strokeWidth')).toEqual(0);
       });
@@ -223,7 +227,7 @@ describe('Rectangle', () => {
           showCorrectEnabled: true,
           markAsCorrect: false,
           selected: true,
-          isCorrect: false
+          isCorrect: false,
         });
         const imgComponent = rectangleComponent.find(Image);
         expect(imgComponent.length).toEqual(0);