@pie-element/hotspot 5.10.3-next.41 → 5.10.3-next.56

package/configure/lib/button.js

@@ -47,10 +47,10 @@ RawButton.defaultProps = {
   onClick: function onClick() {}
 };
 
-var styles = function styles() {
+var styles = function styles(theme) {
   return {
     addButton: {
-      marginLeft: 8
+      marginLeft: theme.spacing.unit
     }
   };
 };

package/configure/lib/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/button.jsx"],"names":["RawButton","classes","className","label","onClick","disabled","addButton","propTypes","PropTypes","object","isRequired","string","bool","func","defaultProps","styles","marginLeft","ButtonStyled"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,SAAZ,QAAYA,SAAZ;AAAA,MAAuBC,KAAvB,QAAuBA,KAAvB;AAAA,MAA8BC,OAA9B,QAA8BA,OAA9B;AAAA,MAAuCC,QAAvC,QAAuCA,QAAvC;AAAA,sBAChB,gCAAC,kBAAD;AACE,IAAA,OAAO,EAAED,OADX;AAEE,IAAA,QAAQ,EAAEC,QAFZ;AAGE,IAAA,SAAS,EAAE,4BAAWJ,OAAO,CAACK,SAAnB,EAA8BJ,SAA9B,CAHb;AAIE,IAAA,IAAI,EAAC,OAJP;AAKE,IAAA,OAAO,EAAC,WALV;AAME,IAAA,KAAK,EAAC;AANR,KAQGC,KARH,CADgB;AAAA,CAAlB;;AAaAH,SAAS,CAACO,SAAV,GAAsB;AACpBN,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC,UADN;AAEpBR,EAAAA,SAAS,EAAEM,sBAAUG,MAFD;AAGpBN,EAAAA,QAAQ,EAAEG,sBAAUI,IAHA;AAIpBT,EAAAA,KAAK,EAAEK,sBAAUG,MAJG;AAKpBP,EAAAA,OAAO,EAAEI,sBAAUK;AALC,CAAtB;AAQAb,SAAS,CAACc,YAAV,GAAyB;AACvBZ,EAAAA,SAAS,EAAE,EADY;AAEvBG,EAAAA,QAAQ,EAAE,KAFa;AAGvBF,EAAAA,KAAK,EAAE,KAHgB;AAIvBC,EAAAA,OAAO,EAAE,mBAAM,CAAE;AAJM,CAAzB;;AAOA,IAAMW,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBT,IAAAA,SAAS,EAAE;AACTU,MAAAA,UAAU,EAAE;AADH;AADS,GAAP;AAAA,CAAf;;AAMA,IAAMC,YAAY,GAAG,wBAAWF,MAAX,EAAmBf,SAAnB,CAArB;eAEeiB,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Button from '@material-ui/core/Button';\n\nconst RawButton = ({ classes, className, label, onClick, disabled }) => (\n  <Button\n    onClick={onClick}\n    disabled={disabled}\n    className={classNames(classes.addButton, className)}\n    size=\"small\"\n    variant=\"contained\"\n    color=\"default\"\n  >\n    {label}\n  </Button>\n);\n\nRawButton.propTypes = {\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func,\n};\n\nRawButton.defaultProps = {\n  className: '',\n  disabled: false,\n  label: 'Add',\n  onClick: () => {},\n};\n\nconst styles = () => ({\n  addButton: {\n    marginLeft: 8,\n  },\n});\n\nconst ButtonStyled = withStyles(styles)(RawButton);\n\nexport default ButtonStyled;\n"],"file":"button.js"}
+{"version":3,"sources":["../src/button.jsx"],"names":["RawButton","classes","className","label","onClick","disabled","addButton","propTypes","PropTypes","object","isRequired","string","bool","func","defaultProps","styles","theme","marginLeft","spacing","unit","ButtonStyled"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,SAAZ,QAAYA,SAAZ;AAAA,MAAuBC,KAAvB,QAAuBA,KAAvB;AAAA,MAA8BC,OAA9B,QAA8BA,OAA9B;AAAA,MAAuCC,QAAvC,QAAuCA,QAAvC;AAAA,sBAChB,gCAAC,kBAAD;AACE,IAAA,OAAO,EAAED,OADX;AAEE,IAAA,QAAQ,EAAEC,QAFZ;AAGE,IAAA,SAAS,EAAE,4BAAWJ,OAAO,CAACK,SAAnB,EAA8BJ,SAA9B,CAHb;AAIE,IAAA,IAAI,EAAC,OAJP;AAKE,IAAA,OAAO,EAAC,WALV;AAME,IAAA,KAAK,EAAC;AANR,KAQGC,KARH,CADgB;AAAA,CAAlB;;AAaAH,SAAS,CAACO,SAAV,GAAsB;AACpBN,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC,UADN;AAEpBR,EAAAA,SAAS,EAAEM,sBAAUG,MAFD;AAGpBN,EAAAA,QAAQ,EAAEG,sBAAUI,IAHA;AAIpBT,EAAAA,KAAK,EAAEK,sBAAUG,MAJG;AAKpBP,EAAAA,OAAO,EAAEI,sBAAUK;AALC,CAAtB;AAQAb,SAAS,CAACc,YAAV,GAAyB;AACvBZ,EAAAA,SAAS,EAAE,EADY;AAEvBG,EAAAA,QAAQ,EAAE,KAFa;AAGvBF,EAAAA,KAAK,EAAE,KAHgB;AAIvBC,EAAAA,OAAO,EAAE,mBAAM,CAAE;AAJM,CAAzB;;AAOA,IAAMW,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBV,IAAAA,SAAS,EAAE;AACTW,MAAAA,UAAU,EAAED,KAAK,CAACE,OAAN,CAAcC;AADjB;AADc,GAAZ;AAAA,CAAf;;AAMA,IAAMC,YAAY,GAAG,wBAAWL,MAAX,EAAmBf,SAAnB,CAArB;eAEeoB,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Button from '@material-ui/core/Button';\n\nconst RawButton = ({ classes, className, label, onClick, disabled }) => (\n  <Button\n    onClick={onClick}\n    disabled={disabled}\n    className={classNames(classes.addButton, className)}\n    size=\"small\"\n    variant=\"contained\"\n    color=\"default\"\n  >\n    {label}\n  </Button>\n);\n\nRawButton.propTypes = {\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func,\n};\n\nRawButton.defaultProps = {\n  className: '',\n  disabled: false,\n  label: 'Add',\n  onClick: () => {},\n};\n\nconst styles = (theme) => ({\n  addButton: {\n    marginLeft: theme.spacing.unit,\n  },\n});\n\nconst ButtonStyled = withStyles(styles)(RawButton);\n\nexport default ButtonStyled;\n"],"file":"button.js"}

package/configure/lib/hotspot-container.js

@@ -309,7 +309,7 @@ var styles = function styles(theme) {
       border: '1px solid #0032C2'
     },
     boxError: {
-      border: '1px solid red'
+      border: "1px solid ".concat(theme.palette.error.main)
     },
     centered: {
       alignItems: 'center',
@@ -352,7 +352,7 @@ var styles = function styles(theme) {
     tooltipContent: {
       background: '#333131',
       borderRadius: '4px',
-      color: '#FFFFFF',
+      color: theme.palette.common.white,
       fontSize: theme.typography.fontSize,
       lineHeight: '18px',
       marginTop: '-60px',

package/configure/lib/hotspot-container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","setState","dropzoneActive","e","files","clipboardData","handleFileRead","preventDefault","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","length","sort","a","b","parseInt","index","slice","dragEnabled","insertImage","cancel","done","url","fileChosen","progress","showTooltip","classes","dimensions","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","replaceButton","replaceSection","handleInputClick","ref","input","handleUndo","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginTop","spacing","unit","marginBottom","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","cursor","marginLeft","marginRight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","fontSize","typography","lineHeight","right","width","height","borderLeft","borderRight","borderTop","propTypes","PropTypes","object","isRequired","string","bool","func","shape","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\n\nimport Drawable from './hotspot-drawable';\nimport Button from './button';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n    }\n  };\n\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes))\n    );\n  };\n\n  handleUndo = () => {\n    const { shapes } = this.state;\n\n    if (shapes && shapes.length) {\n      // sort by index value\n      let newShapes = shapes.sort((a, b) => parseInt(a.index) - parseInt(b.index));\n\n      newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];\n\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n  handleInputClick = () => {\n    const { insertImage } = this.props;\n\n    if (insertImage) {\n      insertImage(\n        {\n          cancel: () => {\n          },\n          done: (a, url) => this.props.onImageUpload(url),\n          fileChosen: () => {\n          },\n          progress: () => {\n          }\n        }\n      );\n    }\n  };\n\n  toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hasErrors,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n    } = this.props;\n    const { dropzoneActive, dragEnabled, showTooltip } = this.state;\n    const { shapes } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={classNames(classes.box, {\n            [classes.boxError]: hasErrors && !dropzoneActive,\n            [classes.boxActive]: dropzoneActive,\n          })}\n          {...(dragEnabled\n            ? {\n              onDragExit: this.handleOnDragExit,\n              onDragLeave: this.handleOnDragExit,\n              onDragOver: this.handleOnDragOver,\n              onDrop: this.handleOnDrop,\n              onPaste: this.handleOnPaste,\n            }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleUndo} label=\"Undo\"/>\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\"/>\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={classNames(classes.drawableHeight, classes.centered)}>\n                <label>Drag and drop or upload image from computer</label>\n                <br/>\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n\n          {imageUrl && (\n            <div className={classes.tooltip}>\n              {showTooltip && (\n                <div className={classes.tooltipContent}>\n                  <label>\n                    Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark.\n                  </label>\n                  <div className={classes.tooltipArrow}/>\n                </div>\n              )}\n\n              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip}/>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 1.5,\n    marginBottom: theme.spacing.unit * 2.5,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  boxError: {\n    border: '1px solid red',\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: theme.spacing.unit * 5,\n    paddingRight: theme.spacing.unit * 5,\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: theme.spacing.unit,\n  },\n  tooltip: {\n    position: 'relative',\n    textAlign: 'right',\n    padding: theme.spacing.unit,\n  },\n  tooltipContent: {\n    background: '#333131',\n    borderRadius: '4px',\n    color: '#FFFFFF',\n    fontSize: theme.typography.fontSize,\n    lineHeight: '18px',\n    marginTop: '-60px',\n    padding: theme.spacing.unit,\n    position: 'absolute',\n    right: '5px',\n    textAlign: 'left',\n    width: '300px',\n  },\n  tooltipArrow: {\n    width: 0,\n    height: 0,\n    borderLeft: '10px solid transparent',\n    borderRight: '10px solid transparent',\n    borderTop: '10px solid #333131',\n    marginBottom: -10,\n    marginTop: '4px',\n    position: 'absolute',\n    right: '5px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  insertImage: PropTypes.func,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n  hasErrors: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}
+{"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","setState","dropzoneActive","e","files","clipboardData","handleFileRead","preventDefault","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","length","sort","a","b","parseInt","index","slice","dragEnabled","insertImage","cancel","done","url","fileChosen","progress","showTooltip","classes","dimensions","hasErrors","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxError","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","replaceButton","replaceSection","handleInputClick","ref","input","handleUndo","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginTop","spacing","unit","marginBottom","border","borderRadius","palette","error","main","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","cursor","marginLeft","marginRight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","common","white","fontSize","typography","lineHeight","right","width","height","borderLeft","borderRight","borderTop","propTypes","PropTypes","object","isRequired","string","bool","func","shape","rectangles","array","polygons","number","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAG,SAAVA,OAAU,CAACC,IAAD,EAAU;AACxB,MAAMC,SAAS,GAAG,SAAlB;AAEA,SAAOD,IAAI,CAACE,IAAL,CAAUC,KAAV,CAAgBF,SAAhB,CAAP;AACD,CAJD;;IAMaG,S;;;;;AASX,qBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,uGAUF,UAACL,IAAD,EAAU;AACzB,UAAIA,IAAI,YAAYM,IAApB,EAA0B;AACxB,YAAQC,aAAR,GAA0B,MAAKF,KAA/B,CAAQE,aAAR;AACA,YAAMC,MAAM,GAAG,IAAIC,UAAJ,EAAf;;AAEAD,QAAAA,MAAM,CAACE,SAAP,GAAmB;AAAA,iBAAMH,aAAa,CAACC,MAAM,CAACG,MAAR,CAAnB;AAAA,SAAnB;;AACAH,QAAAA,MAAM,CAACI,aAAP,CAAqBZ,IAArB;AACD;AACF,KAlBkB;AAAA,uGAoBF;AAAA,aAAM,MAAKa,QAAL,CAAc;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAAd,CAAN;AAAA,KApBE;AAAA,wGAsBD;AAAA,aAAM,MAAKD,QAAL,CAAc;AAAEC,QAAAA,cAAc,EAAE;AAAlB,OAAd,CAAN;AAAA,KAtBC;AAAA,sGAwBH,UAACC,CAAD,EAAO;AACrB,UAAQC,KAAR,GAAkBD,CAAC,CAACE,aAApB,CAAQD,KAAR;;AAEA,UAAIA,KAAK,IAAIjB,OAAO,CAACiB,KAAK,CAAC,CAAD,CAAN,CAApB,EAAgC;AAC9B,cAAKE,cAAL,CAAoBF,KAAK,CAAC,CAAD,CAAzB;AACD;AACF,KA9BkB;AAAA,qGAgCJ,UAACD,CAAD,EAAO;AACpBA,MAAAA,CAAC,CAACI,cAAF;AAEA,4BAAyBJ,CAAC,CAACK,YAA3B;AAAA,UAAQC,KAAR,mBAAQA,KAAR;AAAA,UAAeL,KAAf,mBAAeA,KAAf;;AAEA,UAAIK,KAAK,IAAIA,KAAK,CAAC,CAAD,CAAL,CAASC,IAAT,KAAkB,MAA/B,EAAuC;AACrC,YAAMtB,IAAI,GAAGqB,KAAK,CAAC,CAAD,CAAL,CAASE,SAAT,EAAb;;AAEA,YAAIxB,OAAO,CAACC,IAAD,CAAX,EAAmB;AACjB,gBAAKkB,cAAL,CAAoBlB,IAApB;AACD;AACF,OAND,MAMO,IAAID,OAAO,CAACiB,KAAK,CAAC,CAAD,CAAN,CAAX,EAAuB;AAC5B,cAAKE,cAAL,CAAoBF,KAAK,CAAC,CAAD,CAAzB;AACD;;AAED,YAAKQ,eAAL;AACD,KAhDkB;AAAA,yGAkDA,UAACT,CAAD,EAAO;AACxBA,MAAAA,CAAC,CAACI,cAAF;AAEA,UAAQL,cAAR,GAA2B,MAAKW,KAAhC,CAAQX,cAAR;;AAEA,UAAI,CAACA,cAAL,EAAqB;AACnB,cAAKY,cAAL;AACD;AACF,KA1DkB;AAAA,yGA4DA,UAACX,CAAD,EAAO;AACxBA,MAAAA,CAAC,CAACI,cAAF;;AAEA,YAAKK,eAAL;AACD,KAhEkB;AAAA,uGAkEF,UAACG,SAAD,EAAe;AAC9B,UAAQC,cAAR,GAA2B,MAAKvB,KAAhC,CAAQuB,cAAR;;AAEA,YAAKf,QAAL,CACE;AAAEgB,QAAAA,MAAM,EAAEF;AAAV,OADF,EAEE;AACA;AAAA,eAAMC,cAAc,CAAC,wBAAYD,SAAZ,CAAD,CAApB;AAAA,OAHF;AAKD,KA1EkB;AAAA,mGA4EN,YAAM;AACjB,UAAQE,MAAR,GAAmB,MAAKJ,KAAxB,CAAQI,MAAR;;AAEA,UAAIA,MAAM,IAAIA,MAAM,CAACC,MAArB,EAA6B;AAC3B;AACA,YAAIH,SAAS,GAAGE,MAAM,CAACE,IAAP,CAAY,UAACC,CAAD,EAAIC,CAAJ;AAAA,iBAAUC,QAAQ,CAACF,CAAC,CAACG,KAAH,CAAR,GAAoBD,QAAQ,CAACD,CAAC,CAACE,KAAH,CAAtC;AAAA,SAAZ,CAAhB;AAEAR,QAAAA,SAAS,GAAGA,SAAS,GAAGA,SAAS,CAACS,KAAV,CAAgB,CAAhB,EAAmBT,SAAS,CAACG,MAAV,GAAmB,CAAtC,CAAH,GAA8C,EAAnE;;AAEA,cAAKF,cAAL,CAAoBD,SAApB;AACD;AACF,KAvFkB;AAAA,uGAyFF;AAAA,aAAM,MAAKC,cAAL,CAAoB,EAApB,CAAN;AAAA,KAzFE;AAAA,yGA2FA;AAAA,aAAM,MAAKf,QAAL,CAAc;AAAEwB,QAAAA,WAAW,EAAE;AAAf,OAAd,CAAN;AAAA,KA3FA;AAAA,0GA6FC;AAAA,aAAM,MAAKxB,QAAL,CAAc;AAAEwB,QAAAA,WAAW,EAAE;AAAf,OAAd,CAAN;AAAA,KA7FD;AAAA,yGA+FA,YAAM;AACvB,UAAQC,WAAR,GAAwB,MAAKjC,KAA7B,CAAQiC,WAAR;;AAEA,UAAIA,WAAJ,EAAiB;AACfA,QAAAA,WAAW,CACT;AACEC,UAAAA,MAAM,EAAE,kBAAM,CACb,CAFH;AAGEC,UAAAA,IAAI,EAAE,cAACR,CAAD,EAAIS,GAAJ;AAAA,mBAAY,MAAKpC,KAAL,CAAWE,aAAX,CAAyBkC,GAAzB,CAAZ;AAAA,WAHR;AAIEC,UAAAA,UAAU,EAAE,sBAAM,CACjB,CALH;AAMEC,UAAAA,QAAQ,EAAE,oBAAM,CACf;AAPH,SADS,CAAX;AAWD;AACF,KA/GkB;AAAA,sGAiHH;AAAA,aAAM,MAAK9B,QAAL,CAAc;AAAE+B,QAAAA,WAAW,EAAE,CAAC,MAAKnB,KAAL,CAAWmB;AAA3B,OAAd,CAAN;AAAA,KAjHG;AAGjB,UAAKnB,KAAL,GAAa;AACXY,MAAAA,WAAW,EAAE,IADF;AAEX;AACAR,MAAAA,MAAM,EAAE,yBAAaxB,KAAK,CAACwB,MAAnB;AAHG,KAAb;AAHiB;AAQlB;;;;WA2GD,kBAAS;AAAA;AAAA;;AACP,wBAWI,KAAKxB,KAXT;AAAA,UACEwC,OADF,eACEA,OADF;AAAA,UAEEC,UAFF,eAEEA,UAFF;AAAA,UAGEC,SAHF,eAGEA,SAHF;AAAA,UAIEC,YAJF,eAIEA,YAJF;AAAA,UAKEC,QALF,eAKEA,QALF;AAAA,UAMEC,eANF,eAMEA,eANF;AAAA,UAOEC,sBAPF,eAOEA,sBAPF;AAAA,UAQEC,YARF,eAQEA,YARF;AAAA,UASEC,WATF,eASEA,WATF;AAAA,UAUEC,0BAVF,eAUEA,0BAVF;AAYA,wBAAqD,KAAK7B,KAA1D;AAAA,UAAQX,cAAR,eAAQA,cAAR;AAAA,UAAwBuB,WAAxB,eAAwBA,WAAxB;AAAA,UAAqCO,WAArC,eAAqCA,WAArC;AACA,UAAQf,MAAR,GAAmB,KAAKJ,KAAxB,CAAQI,MAAR;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEgB,OAAO,CAACU;AAAxB,sBACE;AACE,QAAA,SAAS,EAAE,4BAAWV,OAAO,CAACW,GAAnB,mEACRX,OAAO,CAACY,QADA,EACWV,SAAS,IAAI,CAACjC,cADzB,iDAER+B,OAAO,CAACa,SAFA,EAEY5C,cAFZ;AADb,SAKOuB,WAAW,GACZ;AACAsB,QAAAA,UAAU,EAAE,KAAKC,gBADjB;AAEAC,QAAAA,WAAW,EAAE,KAAKD,gBAFlB;AAGAE,QAAAA,UAAU,EAAE,KAAKC,gBAHjB;AAIAC,QAAAA,MAAM,EAAE,KAAKC,YAJb;AAKAC,QAAAA,OAAO,EAAE,KAAKC;AALd,OADY,GAQZ,EAbN,gBAeE;AAAK,QAAA,SAAS,EAAEtB,OAAO,CAACuB;AAAxB,SACGnB,QAAQ,iBACP,gCAAC,yBAAD;AACE,QAAA,eAAe,EAAEJ,OAAO,CAACwB,aAD3B;AAEE,QAAA,gBAAgB,EAAExB,OAAO,CAACyB,cAF5B;AAGE,QAAA,KAAK,EAAC,eAHR;AAIE,QAAA,YAAY,EAAE,KAAKC,gBAJrB;AAKE,QAAA,MAAM,EAAE,gBAACC,GAAD,EAAS;AACf,UAAA,MAAI,CAACC,KAAL,GAAaD,GAAb;AACD;AAPH,QAFJ,eAaE,gCAAC,kBAAD;AAAQ,QAAA,QAAQ,EAAE,EAAE3C,MAAM,IAAIA,MAAM,CAACC,MAAnB,CAAlB;AAA8C,QAAA,OAAO,EAAE,KAAK4C,UAA5D;AAAwE,QAAA,KAAK,EAAC;AAA9E,QAbF,eAcE,gCAAC,kBAAD;AAAQ,QAAA,QAAQ,EAAE,EAAE7C,MAAM,IAAIA,MAAM,CAACC,MAAnB,CAAlB;AAA8C,QAAA,OAAO,EAAE,KAAK6C,cAA5D;AAA4E,QAAA,KAAK,EAAC;AAAlF,QAdF,CAfF,eAgCE;AACE,QAAA,GAAG,EAAE,aAACH,IAAD,EAAS;AACZ,UAAA,MAAI,CAACI,YAAL,GAAoBJ,IAApB;AACD,SAHH;AAIE,QAAA,SAAS,EAAE3B,OAAO,CAACgC;AAJrB,SAMG5B,QAAQ,gBACP,gCAAC,2BAAD;AACE,QAAA,UAAU,EAAEH,UADd;AAEE,QAAA,WAAW,EAAE,KAAKgC,iBAFpB;AAGE,QAAA,UAAU,EAAE,KAAKC,gBAHnB;AAIE,QAAA,QAAQ,EAAE9B,QAJZ;AAKE,QAAA,YAAY,EAAED,YALhB;AAME,QAAA,eAAe,EAAEE,eANnB;AAOE,QAAA,sBAAsB,EAAEC,sBAP1B;AAQE,QAAA,cAAc,EAAE,KAAKvB,cARvB;AASE,QAAA,YAAY,EAAEwB,YAThB;AAUE,QAAA,MAAM,EAAEvB,MAVV;AAWE,QAAA,WAAW,EAAEwB,WAXf;AAYE,QAAA,0BAA0B,EAAEC;AAZ9B,QADO,gBAgBP;AAAK,QAAA,SAAS,EAAE,4BAAWT,OAAO,CAACgC,cAAnB,EAAmChC,OAAO,CAACmC,QAA3C;AAAhB,sBACE,6FADF,eAEE,2CAFF,eAGE,gCAAC,yBAAD;AACE,QAAA,KAAK,EAAC,cADR;AAEE,QAAA,YAAY,EAAE,KAAKT,gBAFrB;AAGE,QAAA,MAAM,EAAE,gBAACC,GAAD,EAAS;AACf,UAAA,MAAI,CAACC,KAAL,GAAaD,GAAb;AACD;AALH,QAHF,CAtBJ,CAhCF,EAoEGvB,QAAQ,iBACP;AAAK,QAAA,SAAS,EAAEJ,OAAO,CAACoC;AAAxB,SACGrC,WAAW,iBACV;AAAK,QAAA,SAAS,EAAEC,OAAO,CAACqC;AAAxB,sBACE,+IADF,eAIE;AAAK,QAAA,SAAS,EAAErC,OAAO,CAACsC;AAAxB,QAJF,CAFJ,eAUE,gCAAC,gBAAD;AAAM,QAAA,SAAS,EAAEtC,OAAO,CAACuC,IAAzB;AAA+B,QAAA,UAAU,EAAE,KAAKC,aAAhD;AAA+D,QAAA,WAAW,EAAE,KAAKA;AAAjF,QAVF,CArEJ,CADF,CADF;AAuFD;;;WAlOD,kCAAgCC,SAAhC,EAA2CC,SAA3C,EAAsD;AACpD;AACA,6CACKA,SADL;AAEE1D,QAAAA,MAAM,EAAE,yBAAayD,SAAS,CAACzD,MAAvB;AAFV;AAID;;;EAP4B2D,gB;;;;AAsO/B,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBnC,IAAAA,IAAI,EAAE;AACJoC,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,GAD5B;AAEJC,MAAAA,YAAY,EAAEJ,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAF/B,KADmB;AAKzBrC,IAAAA,GAAG,EAAE;AACHuC,MAAAA,MAAM,EAAE,mBADL;AAEHC,MAAAA,YAAY,EAAE;AAFX,KALoB;AASzBtC,IAAAA,SAAS,EAAE;AACTqC,MAAAA,MAAM,EAAE;AADC,KATc;AAYzBtC,IAAAA,QAAQ,EAAE;AACRsC,MAAAA,MAAM,sBAAeL,KAAK,CAACO,OAAN,CAAcC,KAAd,CAAoBC,IAAnC;AADE,KAZe;AAezBnB,IAAAA,QAAQ,EAAE;AACRoB,MAAAA,UAAU,EAAE,QADJ;AAERC,MAAAA,OAAO,EAAE,MAFD;AAGRC,MAAAA,aAAa,EAAE,QAHP;AAIRC,MAAAA,cAAc,EAAE;AAJR,KAfe;AAqBzB1B,IAAAA,cAAc,EAAE;AACd2B,MAAAA,SAAS,EAAE,GADG;AAEdC,MAAAA,aAAa,EAAEf,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CAFtB;AAGda,MAAAA,YAAY,EAAEhB,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAHrB,KArBS;AA0BzBT,IAAAA,IAAI,EAAE;AACJ,iBAAW;AACTuB,QAAAA,KAAK,EAAE,SADE;AAETC,QAAAA,MAAM,EAAE;AAFC,OADP;AAKJD,MAAAA,KAAK,EAAE;AALH,KA1BmB;AAiCzBtC,IAAAA,aAAa,EAAE;AACbwC,MAAAA,UAAU,EAAE;AADC,KAjCU;AAoCzBvC,IAAAA,cAAc,EAAE;AACdwC,MAAAA,WAAW,EAAE;AADC,KApCS;AAuCzB1C,IAAAA,OAAO,EAAE;AACP2C,MAAAA,eAAe,EAAE,SADV;AAEPC,MAAAA,YAAY,EAAE,mBAFP;AAGPC,MAAAA,mBAAmB,EAAE,KAHd;AAIPC,MAAAA,oBAAoB,EAAE,KAJf;AAKPb,MAAAA,OAAO,EAAE,MALF;AAMPE,MAAAA,cAAc,EAAE,UANT;AAOPY,MAAAA,OAAO,EAAEzB,KAAK,CAACE,OAAN,CAAcC;AAPhB,KAvCgB;AAgDzBZ,IAAAA,OAAO,EAAE;AACPmC,MAAAA,QAAQ,EAAE,UADH;AAEPC,MAAAA,SAAS,EAAE,OAFJ;AAGPF,MAAAA,OAAO,EAAEzB,KAAK,CAACE,OAAN,CAAcC;AAHhB,KAhDgB;AAqDzBX,IAAAA,cAAc,EAAE;AACdoC,MAAAA,UAAU,EAAE,SADE;AAEdtB,MAAAA,YAAY,EAAE,KAFA;AAGdW,MAAAA,KAAK,EAAEjB,KAAK,CAACO,OAAN,CAAcsB,MAAd,CAAqBC,KAHd;AAIdC,MAAAA,QAAQ,EAAE/B,KAAK,CAACgC,UAAN,CAAiBD,QAJb;AAKdE,MAAAA,UAAU,EAAE,MALE;AAMdhC,MAAAA,SAAS,EAAE,OANG;AAOdwB,MAAAA,OAAO,EAAEzB,KAAK,CAACE,OAAN,CAAcC,IAPT;AAQduB,MAAAA,QAAQ,EAAE,UARI;AASdQ,MAAAA,KAAK,EAAE,KATO;AAUdP,MAAAA,SAAS,EAAE,MAVG;AAWdQ,MAAAA,KAAK,EAAE;AAXO,KArDS;AAkEzB1C,IAAAA,YAAY,EAAE;AACZ0C,MAAAA,KAAK,EAAE,CADK;AAEZC,MAAAA,MAAM,EAAE,CAFI;AAGZC,MAAAA,UAAU,EAAE,wBAHA;AAIZC,MAAAA,WAAW,EAAE,wBAJD;AAKZC,MAAAA,SAAS,EAAE,oBALC;AAMZnC,MAAAA,YAAY,EAAE,CAAC,EANH;AAOZH,MAAAA,SAAS,EAAE,KAPC;AAQZyB,MAAAA,QAAQ,EAAE,UARE;AASZQ,MAAAA,KAAK,EAAE;AATK;AAlEW,GAAZ;AAAA,CAAf;;AA+EAxH,SAAS,CAAC8H,SAAV,GAAsB;AACpBrF,EAAAA,OAAO,EAAEsF,sBAAUC,MAAV,CAAiBC,UADN;AAEpBvF,EAAAA,UAAU,EAAEqF,sBAAUC,MAAV,CAAiBC,UAFT;AAGpBpF,EAAAA,QAAQ,EAAEkF,sBAAUG,MAAV,CAAiBD,UAHP;AAIpBrF,EAAAA,YAAY,EAAEmF,sBAAUG,MAAV,CAAiBD,UAJX;AAKpBnF,EAAAA,eAAe,EAAEiF,sBAAUI,IAAV,CAAeF,UALZ;AAMpB9H,EAAAA,aAAa,EAAE4H,sBAAUK,IAAV,CAAeH,UANV;AAOpBlF,EAAAA,sBAAsB,EAAEgF,sBAAUK,IAAV,CAAeH,UAPnB;AAQpB/F,EAAAA,WAAW,EAAE6F,sBAAUK,IARH;AASpB5G,EAAAA,cAAc,EAAEuG,sBAAUK,IAAV,CAAeH,UATX;AAUpBjF,EAAAA,YAAY,EAAE+E,sBAAUG,MAAV,CAAiBD,UAVX;AAWpBxG,EAAAA,MAAM,EAAEsG,sBAAUM,KAAV,CAAgB;AACtBC,IAAAA,UAAU,EAAEP,sBAAUQ,KADA;AAEtBC,IAAAA,QAAQ,EAAET,sBAAUQ;AAFE,GAAhB,EAGLN,UAdiB;AAepBhF,EAAAA,WAAW,EAAE8E,sBAAUU,MAfH;AAgBpBvF,EAAAA,0BAA0B,EAAE6E,sBAAUI,IAhBlB;AAiBpBxF,EAAAA,SAAS,EAAEoF,sBAAUI;AAjBD,CAAtB;AAoBAnI,SAAS,CAAC0I,YAAV,GAAyB;AACvBzF,EAAAA,WAAW,EAAE;AADU,CAAzB;;eAIe,uBAAWoC,MAAX,EAAmBrF,SAAnB,C","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\n\nimport Drawable from './hotspot-drawable';\nimport Button from './button';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n\n  return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    // always transform shapes map into shapes array at this level\n    return {\n      ...prevState,\n      shapes: getAllShapes(nextProps.shapes),\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dragEnabled: true,\n      // always transform shapes map into shapes array at this level\n      shapes: getAllShapes(props.shapes),\n    };\n  }\n\n  handleFileRead = (file) => {\n    if (file instanceof Blob) {\n      const { onImageUpload } = this.props;\n      const reader = new FileReader();\n\n      reader.onloadend = () => onImageUpload(reader.result);\n      reader.readAsDataURL(file);\n    }\n  };\n\n  enableDropzone = () => this.setState({ dropzoneActive: true });\n\n  disableDropzone = () => this.setState({ dropzoneActive: false });\n\n  handleOnPaste = (e) => {\n    const { files } = e.clipboardData;\n\n    if (files && isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n  };\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.disableDropzone();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.enableDropzone();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n\n    this.disableDropzone();\n  };\n\n  onUpdateShapes = (newShapes) => {\n    const { onUpdateShapes } = this.props;\n\n    this.setState(\n      { shapes: newShapes },\n      // always transform shapes array back into shapes map when saving changes\n      () => onUpdateShapes(groupShapes(newShapes))\n    );\n  };\n\n  handleUndo = () => {\n    const { shapes } = this.state;\n\n    if (shapes && shapes.length) {\n      // sort by index value\n      let newShapes = shapes.sort((a, b) => parseInt(a.index) - parseInt(b.index));\n\n      newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];\n\n      this.onUpdateShapes(newShapes);\n    }\n  };\n\n  handleClearAll = () => this.onUpdateShapes([]);\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n\n  handleInputClick = () => {\n    const { insertImage } = this.props;\n\n    if (insertImage) {\n      insertImage(\n        {\n          cancel: () => {\n          },\n          done: (a, url) => this.props.onImageUpload(url),\n          fileChosen: () => {\n          },\n          progress: () => {\n          }\n        }\n      );\n    }\n  };\n\n  toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n  render() {\n    const {\n      classes,\n      dimensions,\n      hasErrors,\n      hotspotColor,\n      imageUrl,\n      multipleCorrect,\n      onUpdateImageDimension,\n      outlineColor,\n      strokeWidth,\n      preserveAspectRatioEnabled,\n    } = this.props;\n    const { dropzoneActive, dragEnabled, showTooltip } = this.state;\n    const { shapes } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={classNames(classes.box, {\n            [classes.boxError]: hasErrors && !dropzoneActive,\n            [classes.boxActive]: dropzoneActive,\n          })}\n          {...(dragEnabled\n            ? {\n              onDragExit: this.handleOnDragExit,\n              onDragLeave: this.handleOnDragExit,\n              onDragOver: this.handleOnDragOver,\n              onDrop: this.handleOnDrop,\n              onPaste: this.handleOnPaste,\n            }\n            : {})}\n        >\n          <div className={classes.toolbar}>\n            {imageUrl && (\n              <UploadControl\n                classNameButton={classes.replaceButton}\n                classNameSection={classes.replaceSection}\n                label=\"Replace Image\"\n                onInputClick={this.handleInputClick}\n                setRef={(ref) => {\n                  this.input = ref;\n                }}\n              />\n            )}\n\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleUndo} label=\"Undo\"/>\n            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label=\"Clear all\"/>\n          </div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <Drawable\n                dimensions={dimensions}\n                disableDrag={this.handleDisableDrag}\n                enableDrag={this.handleEnableDrag}\n                imageUrl={imageUrl}\n                hotspotColor={hotspotColor}\n                multipleCorrect={multipleCorrect}\n                onUpdateImageDimension={onUpdateImageDimension}\n                onUpdateShapes={this.onUpdateShapes}\n                outlineColor={outlineColor}\n                shapes={shapes}\n                strokeWidth={strokeWidth}\n                preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n              />\n            ) : (\n              <div className={classNames(classes.drawableHeight, classes.centered)}>\n                <label>Drag and drop or upload image from computer</label>\n                <br/>\n                <UploadControl\n                  label=\"Upload Image\"\n                  onInputClick={this.handleInputClick}\n                  setRef={(ref) => {\n                    this.input = ref;\n                  }}\n                />\n              </div>\n            )}\n          </div>\n\n          {imageUrl && (\n            <div className={classes.tooltip}>\n              {showTooltip && (\n                <div className={classes.tooltipContent}>\n                  <label>\n                    Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark.\n                  </label>\n                  <div className={classes.tooltipArrow}/>\n                </div>\n              )}\n\n              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip}/>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 1.5,\n    marginBottom: theme.spacing.unit * 2.5,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  boxError: {\n    border: `1px solid ${theme.palette.error.main}`,\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    paddingBottom: theme.spacing.unit * 5,\n    paddingRight: theme.spacing.unit * 5,\n  },\n  icon: {\n    '&:hover': {\n      color: '#333131',\n      cursor: 'help',\n    },\n    color: '#C1C1C1',\n  },\n  replaceButton: {\n    marginLeft: 0,\n  },\n  replaceSection: {\n    marginRight: 'auto',\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'flex-end',\n    padding: theme.spacing.unit,\n  },\n  tooltip: {\n    position: 'relative',\n    textAlign: 'right',\n    padding: theme.spacing.unit,\n  },\n  tooltipContent: {\n    background: '#333131',\n    borderRadius: '4px',\n    color: theme.palette.common.white,\n    fontSize: theme.typography.fontSize,\n    lineHeight: '18px',\n    marginTop: '-60px',\n    padding: theme.spacing.unit,\n    position: 'absolute',\n    right: '5px',\n    textAlign: 'left',\n    width: '300px',\n  },\n  tooltipArrow: {\n    width: 0,\n    height: 0,\n    borderLeft: '10px solid transparent',\n    borderRight: '10px solid transparent',\n    borderTop: '10px solid #333131',\n    marginBottom: -10,\n    marginTop: '4px',\n    position: 'absolute',\n    right: '5px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  insertImage: PropTypes.func,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.shape({\n    rectangles: PropTypes.array,\n    polygons: PropTypes.array,\n  }).isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n  hasErrors: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  strokeWidth: 5,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}

package/configure/package.json

@@ -10,8 +10,8 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "^11.5.4",
-    "@pie-lib/editable-html": "^9.5.16",
+    "@pie-lib/config-ui": "^11.5.5",
+    "@pie-lib/editable-html": "^9.5.17",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/button.jsx

@@ -32,9 +32,9 @@ RawButton.defaultProps = {
   onClick: () => {},
 };
 
-const styles = () => ({
+const styles = (theme) => ({
   addButton: {
-    marginLeft: 8,
+    marginLeft: theme.spacing.unit,
   },
 });
 

package/configure/src/hotspot-container.jsx

@@ -258,7 +258,7 @@ const styles = (theme) => ({
     border: '1px solid #0032C2',
   },
   boxError: {
-    border: '1px solid red',
+    border: `1px solid ${theme.palette.error.main}`,
   },
   centered: {
     alignItems: 'center',
@@ -301,7 +301,7 @@ const styles = (theme) => ({
   tooltipContent: {
     background: '#333131',
     borderRadius: '4px',
-    color: '#FFFFFF',
+    color: theme.palette.common.white,
     fontSize: theme.typography.fontSize,
     lineHeight: '18px',
     marginTop: '-60px',

package/lib/hotspot/index.js

@@ -130,7 +130,9 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
       var showCorrect = this.state.showCorrect;
       var isEvaluateMode = mode === 'evaluate';
       var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
-      return /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.main
+      }, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
@@ -186,6 +188,10 @@ HotspotComponent.defaultProps = {
 
 var styles = function styles(theme) {
   return {
+    main: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background()
+    },
     collapsible: {
       marginBottom: theme.spacing.unit * 2
     },

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","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","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 { Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      observer: null,\n      scale: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        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        imageUrl,\n        prompt,\n        mode,\n        multipleCorrect,\n        shapes,\n        outlineColor,\n        hotspotColor,\n        dimensions,\n        rationale,\n        teacherInstructions,\n        strokeWidth,\n        responseCorrect,\n      },\n      onSelectChoice,\n      classes,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <div>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt className=\"prompt\" prompt={prompt} />}\n\n        {showCorrectAnswerToggle && (\n          <CorrectAnswerToggle\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.onToggle.bind(this)}\n          />\n        )}\n\n        {imageUrl ? (\n          <Container\n            isEvaluateMode={isEvaluateMode}\n            session={session}\n            dimensions={dimensions}\n            imageUrl={imageUrl}\n            hotspotColor={hotspotColor}\n            multipleCorrect={multipleCorrect}\n            outlineColor={outlineColor}\n            onSelectChoice={onSelectChoice}\n            shapes={shapes}\n            disabled={disabled}\n            strokeWidth={strokeWidth}\n            scale={this.state.scale}\n            showCorrect={showCorrect}\n          />\n        ) : null}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  collapsible: {\n    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,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","main","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","color","text","backgroundColor","background","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 } 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        imageUrl,\n        prompt,\n        mode,\n        multipleCorrect,\n        shapes,\n        outlineColor,\n        hotspotColor,\n        dimensions,\n        rationale,\n        teacherInstructions,\n        strokeWidth,\n        responseCorrect,\n      },\n      onSelectChoice,\n      classes,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <div className={classes.main}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt className=\"prompt\" prompt={prompt} />}\n\n        {showCorrectAnswerToggle && (\n          <CorrectAnswerToggle\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.onToggle.bind(this)}\n          />\n        )}\n\n        {imageUrl ? (\n          <Container\n            isEvaluateMode={isEvaluateMode}\n            session={session}\n            dimensions={dimensions}\n            imageUrl={imageUrl}\n            hotspotColor={hotspotColor}\n            multipleCorrect={multipleCorrect}\n            outlineColor={outlineColor}\n            onSelectChoice={onSelectChoice}\n            shapes={shapes}\n            disabled={disabled}\n            strokeWidth={strokeWidth}\n            scale={this.state.scale}\n            showCorrect={showCorrect}\n          />\n        ) : null}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "5.10.3-next.41+c2858855e",
+  "version": "5.10.3-next.56+d8bf26886",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -9,9 +9,9 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "^2.3.66",
-    "@pie-lib/math-rendering": "^2.5.12",
-    "@pie-lib/render-ui": "^4.14.16",
+    "@pie-lib/correct-answer-toggle": "^2.3.67",
+    "@pie-lib/math-rendering": "^2.5.13",
+    "@pie-lib/render-ui": "^4.14.17",
     "@pie-lib/test-utils": "^0.2.32",
     "konva": "^3.2.5",
     "prop-types": "^15.6.1",
@@ -21,7 +21,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "c2858855e0df45a4cb86fbd20637fc82f27f07c6",
+  "gitHead": "d8bf268864c1023d6595698b86fb1f7ea82c39d4",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/__tests__/__snapshots__/container.test.jsx.snap

@@ -4,11 +4,11 @@ exports[`Container snapshots hotspot color renders 1`] = `
 <Container
   classes={
     Object {
-      "base": "Container-base-3 base",
-      "image": "Container-image-4",
-      "imageContainer": "Container-imageContainer-5",
-      "resize": "Container-resize-7",
-      "stage": "Container-stage-6",
+      "base": "Container-base-4 base",
+      "image": "Container-image-5",
+      "imageContainer": "Container-imageContainer-6",
+      "resize": "Container-resize-8",
+      "stage": "Container-stage-7",
     }
   }
   dimensions={
@@ -42,11 +42,11 @@ exports[`Container snapshots image renders 1`] = `
 <Container
   classes={
     Object {
-      "base": "Container-base-3 base",
-      "image": "Container-image-4",
-      "imageContainer": "Container-imageContainer-5",
-      "resize": "Container-resize-7",
-      "stage": "Container-stage-6",
+      "base": "Container-base-4 base",
+      "image": "Container-image-5",
+      "imageContainer": "Container-imageContainer-6",
+      "resize": "Container-resize-8",
+      "stage": "Container-stage-7",
     }
   }
   dimensions={
@@ -80,11 +80,11 @@ exports[`Container snapshots outline color renders 1`] = `
 <Container
   classes={
     Object {
-      "base": "Container-base-3 base",
-      "image": "Container-image-4",
-      "imageContainer": "Container-imageContainer-5",
-      "resize": "Container-resize-7",
-      "stage": "Container-stage-6",
+      "base": "Container-base-4 base",
+      "image": "Container-image-5",
+      "imageContainer": "Container-imageContainer-6",
+      "resize": "Container-resize-8",
+      "stage": "Container-stage-7",
     }
   }
   dimensions={
@@ -118,11 +118,11 @@ exports[`Container snapshots shapes renders 1`] = `
 <Container
   classes={
     Object {
-      "base": "Container-base-3 base",
-      "image": "Container-image-4",
-      "imageContainer": "Container-imageContainer-5",
-      "resize": "Container-resize-7",
-      "stage": "Container-stage-6",
+      "base": "Container-base-4 base",
+      "image": "Container-image-5",
+      "imageContainer": "Container-imageContainer-6",
+      "resize": "Container-resize-8",
+      "stage": "Container-stage-7",
     }
   }
   dimensions={
@@ -189,8 +189,9 @@ exports[`HotspotComponent renders snapshot 1`] = `
 <HotspotComponent
   classes={
     Object {
-      "collapsible": "HotspotComponent-collapsible-1",
-      "prompt": "HotspotComponent-prompt-2",
+      "collapsible": "HotspotComponent-collapsible-2",
+      "main": "HotspotComponent-main-1",
+      "prompt": "HotspotComponent-prompt-3",
     }
   }
 />
@@ -253,8 +254,9 @@ exports[`HotspotComponent renders snapshot with rationale 1`] = `
 <HotspotComponent
   classes={
     Object {
-      "collapsible": "HotspotComponent-collapsible-1",
-      "prompt": "HotspotComponent-prompt-2",
+      "collapsible": "HotspotComponent-collapsible-2",
+      "main": "HotspotComponent-main-1",
+      "prompt": "HotspotComponent-prompt-3",
     }
   }
   rationale="This is rationale"

package/src/hotspot/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
-import { Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';
+import { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 
 import Container from './container';
@@ -81,7 +81,7 @@ class HotspotComponent extends React.Component {
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
 
     return (
-      <div>
+      <div className={classes.main}>
         {teacherInstructions && hasText(teacherInstructions) && (
           <Collapsible
             labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}
@@ -141,6 +141,10 @@ HotspotComponent.defaultProps = {
 };
 
 const styles = (theme) => ({
+  main: {
+    color: color.text(),
+    backgroundColor: color.background(),
+  },
   collapsible: {
     marginBottom: theme.spacing.unit * 2,
   },