@pie-element/drawing-response 6.1.3-next.41 → 6.1.3-next.56

package/configure/package.json

@@ -9,8 +9,8 @@
   "dependencies": {
     "@material-ui/core": "^3.9.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",
     "lodash": "^4.17.15",

package/lib/drawing-response/container.js

@@ -330,7 +330,7 @@ var styles = function styles(theme) {
       maxWidth: 'calc(100% - 163px)',
       // 163px is the width set on undoControls
       '& button': {
-        marginBottom: '8px'
+        marginBottom: theme.spacing.unit
       }
     }
   };

package/lib/drawing-response/container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","checkExist","setInterval","drawable","getBoundingClientRect","setState","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","session","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","backgroundColor","minHeight","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","boxSizing","maxWidth","marginBottom"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport constants from './constants';\nimport Button from './button';\nimport DrawablePalette from './drawable-palette';\nimport DrawableMain from './drawable-main';\nimport DrawableText from './drawable-text';\nimport Icon from './icon';\n\nconst { tools: TOOLS } = constants;\n\nconst ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({\n  value: c,\n  label: c,\n}));\n\nexport class Container extends Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    disabled: PropTypes.bool,\n    session: PropTypes.object.isRequired,\n    onSessionChange: PropTypes.func.isRequired,\n    imageDimensions: PropTypes.object.isRequired,\n    imageUrl: PropTypes.string.isRequired,\n    backgroundImageEnabled: PropTypes.bool.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    const TextEntry = new DrawableText();\n\n    this.state = {\n      scale: 1,\n      drawableDimensions: {\n        height: 0,\n        width: 0,\n      },\n      toolActive: TOOLS[0],\n      fillColor: 'white',\n      fillColorList: [\n        { value: 'transparent', label: 'no fill' },\n        { value: 'lightblue', label: 'light blue' },\n        { value: 'lightyellow', label: 'light yellow' },\n        ...ROGVAIV,\n      ],\n      outlineColor: 'black',\n      outlineColorList: ROGVAIV,\n      paintColor: 'red',\n      paintColorList: ROGVAIV,\n      TextEntry,\n    };\n  }\n\n  setDimensions() {\n    const checkExist = setInterval(() => {\n      try {\n        const { height, width } = this.drawable.getBoundingClientRect();\n        if (height !== 0 && width !== 0) {\n          this.setState({\n            drawableDimensions: {\n              height,\n              width,\n            },\n          });\n        }\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.warn('setDimensions Error: ', e);\n      } finally {\n        clearInterval(checkExist);\n      }\n    }, 100);\n  }\n\n  componentDidMount() {\n    this.setDimensions();\n\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          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    const { TextEntry } = this.state;\n\n    TextEntry.removeEventListeners();\n    this.observer?.disconnect();\n  }\n\n  handleMakeToolActive(tool) {\n    const { TextEntry } = this.state;\n    const { type } = tool;\n\n    if (type !== 'Text') {\n      this.setState({\n        toolActive: tool,\n      });\n    } else {\n      TextEntry.addNewTextEntry();\n      // Force update\n      this.setState({\n        updatedAt: new Date(),\n      });\n    }\n  }\n\n  checkIfToolIsDisabled = (type) => {\n    if (this.props.disabled) return true;\n\n    const { toolActive } = this.state;\n    // Text will never be disabled since on each \"Text Entry\" click a new text is added\n    if (type === 'Text') {\n      return false;\n    }\n    return type === toolActive.type;\n  };\n\n  handleColorChange(type, color) {\n    const cType = `${type}Color`;\n    this.setState({\n      [cType]: color,\n    });\n  }\n\n  render() {\n    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled } =\n      this.props;\n    const {\n      drawableDimensions,\n      toolActive,\n      fillColor,\n      fillColorList,\n      outlineColor,\n      outlineColorList,\n      paintColor,\n      paintColorList,\n      TextEntry,\n    } = this.state;\n\n    const heightToUse = drawableDimensions.height * this.state.scale;\n\n    return (\n      <div className={classes.base}>\n        {!disabled && (\n          <DrawablePalette\n            fillColor={fillColor}\n            fillList={fillColorList}\n            outlineColor={outlineColor}\n            outlineList={outlineColorList}\n            paintColor={paintColor}\n            paintList={paintColorList}\n            onFillColorChange={(color) => this.handleColorChange('fill', color)}\n            onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n            onPaintColorChange={(color) => this.handleColorChange('paint', color)}\n          />\n        )}\n\n        <div className={classes.box}>\n          <div className={classes.toolbar}>\n            {TOOLS.map((tool) => {\n              const { type, label, icon } = tool;\n\n              return (\n                <Button\n                  title={label}\n                  key={type}\n                  disabled={this.checkIfToolIsDisabled(type)}\n                  onClick={() => this.handleMakeToolActive(tool)}\n                  label={<Icon path={icon} />}\n                />\n              );\n            })}\n          </div>\n\n          <div\n            ref={(drawable) => {\n              this.drawable = drawable;\n            }}\n            className={classes.drawableHeight}\n            style={{ height: heightToUse, maxHeight: heightToUse }}\n          >\n            <DrawableMain\n              scale={this.state.scale}\n              session={session}\n              disabled={disabled}\n              onSessionChange={onSessionChange}\n              fillColor={fillColor}\n              outlineColor={outlineColor}\n              paintColor={paintColor}\n              imageUrl={imageUrl}\n              drawableDimensions={drawableDimensions}\n              imageDimensions={imageDimensions}\n              toolActive={toolActive}\n              TextEntry={TextEntry}\n              backgroundImageEnabled={backgroundImageEnabled}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n    marginTop: theme.spacing.unit * 2,\n    backgroundColor: '#ECEDF1',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    backgroundColor: '#fff',\n  },\n  toolbar: {\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    padding: '12px 8px 4px',\n    boxSizing: 'border-box',\n    maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls\n    '& button': {\n      marginBottom: '8px',\n    },\n  },\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
+{"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","checkExist","setInterval","drawable","getBoundingClientRect","setState","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","session","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","backgroundColor","minHeight","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","boxSizing","maxWidth","marginBottom"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport constants from './constants';\nimport Button from './button';\nimport DrawablePalette from './drawable-palette';\nimport DrawableMain from './drawable-main';\nimport DrawableText from './drawable-text';\nimport Icon from './icon';\n\nconst { tools: TOOLS } = constants;\n\nconst ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({\n  value: c,\n  label: c,\n}));\n\nexport class Container extends Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    disabled: PropTypes.bool,\n    session: PropTypes.object.isRequired,\n    onSessionChange: PropTypes.func.isRequired,\n    imageDimensions: PropTypes.object.isRequired,\n    imageUrl: PropTypes.string.isRequired,\n    backgroundImageEnabled: PropTypes.bool.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    const TextEntry = new DrawableText();\n\n    this.state = {\n      scale: 1,\n      drawableDimensions: {\n        height: 0,\n        width: 0,\n      },\n      toolActive: TOOLS[0],\n      fillColor: 'white',\n      fillColorList: [\n        { value: 'transparent', label: 'no fill' },\n        { value: 'lightblue', label: 'light blue' },\n        { value: 'lightyellow', label: 'light yellow' },\n        ...ROGVAIV,\n      ],\n      outlineColor: 'black',\n      outlineColorList: ROGVAIV,\n      paintColor: 'red',\n      paintColorList: ROGVAIV,\n      TextEntry,\n    };\n  }\n\n  setDimensions() {\n    const checkExist = setInterval(() => {\n      try {\n        const { height, width } = this.drawable.getBoundingClientRect();\n        if (height !== 0 && width !== 0) {\n          this.setState({\n            drawableDimensions: {\n              height,\n              width,\n            },\n          });\n        }\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.warn('setDimensions Error: ', e);\n      } finally {\n        clearInterval(checkExist);\n      }\n    }, 100);\n  }\n\n  componentDidMount() {\n    this.setDimensions();\n\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          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    const { TextEntry } = this.state;\n\n    TextEntry.removeEventListeners();\n    this.observer?.disconnect();\n  }\n\n  handleMakeToolActive(tool) {\n    const { TextEntry } = this.state;\n    const { type } = tool;\n\n    if (type !== 'Text') {\n      this.setState({\n        toolActive: tool,\n      });\n    } else {\n      TextEntry.addNewTextEntry();\n      // Force update\n      this.setState({\n        updatedAt: new Date(),\n      });\n    }\n  }\n\n  checkIfToolIsDisabled = (type) => {\n    if (this.props.disabled) return true;\n\n    const { toolActive } = this.state;\n    // Text will never be disabled since on each \"Text Entry\" click a new text is added\n    if (type === 'Text') {\n      return false;\n    }\n    return type === toolActive.type;\n  };\n\n  handleColorChange(type, color) {\n    const cType = `${type}Color`;\n    this.setState({\n      [cType]: color,\n    });\n  }\n\n  render() {\n    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled } =\n      this.props;\n    const {\n      drawableDimensions,\n      toolActive,\n      fillColor,\n      fillColorList,\n      outlineColor,\n      outlineColorList,\n      paintColor,\n      paintColorList,\n      TextEntry,\n    } = this.state;\n\n    const heightToUse = drawableDimensions.height * this.state.scale;\n\n    return (\n      <div className={classes.base}>\n        {!disabled && (\n          <DrawablePalette\n            fillColor={fillColor}\n            fillList={fillColorList}\n            outlineColor={outlineColor}\n            outlineList={outlineColorList}\n            paintColor={paintColor}\n            paintList={paintColorList}\n            onFillColorChange={(color) => this.handleColorChange('fill', color)}\n            onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n            onPaintColorChange={(color) => this.handleColorChange('paint', color)}\n          />\n        )}\n\n        <div className={classes.box}>\n          <div className={classes.toolbar}>\n            {TOOLS.map((tool) => {\n              const { type, label, icon } = tool;\n\n              return (\n                <Button\n                  title={label}\n                  key={type}\n                  disabled={this.checkIfToolIsDisabled(type)}\n                  onClick={() => this.handleMakeToolActive(tool)}\n                  label={<Icon path={icon} />}\n                />\n              );\n            })}\n          </div>\n\n          <div\n            ref={(drawable) => {\n              this.drawable = drawable;\n            }}\n            className={classes.drawableHeight}\n            style={{ height: heightToUse, maxHeight: heightToUse }}\n          >\n            <DrawableMain\n              scale={this.state.scale}\n              session={session}\n              disabled={disabled}\n              onSessionChange={onSessionChange}\n              fillColor={fillColor}\n              outlineColor={outlineColor}\n              paintColor={paintColor}\n              imageUrl={imageUrl}\n              drawableDimensions={drawableDimensions}\n              imageDimensions={imageDimensions}\n              toolActive={toolActive}\n              TextEntry={TextEntry}\n              backgroundImageEnabled={backgroundImageEnabled}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n    marginTop: theme.spacing.unit * 2,\n    backgroundColor: '#ECEDF1',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    backgroundColor: '#fff',\n  },\n  toolbar: {\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    padding: '12px 8px 4px',\n    boxSizing: 'border-box',\n    maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls\n    '& button': {\n      marginBottom: theme.spacing.unit,\n    },\n  },\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}

package/lib/drawing-response/index.js

@@ -68,7 +68,11 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
           hasError = _this$state.hasError,
           errorMessage = _this$state.errorMessage;
       var isEvaluateMode = mode === 'evaluate';
-      return hasError ? /*#__PURE__*/_react["default"].createElement("div", null, "An error occured: ", errorMessage) : /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructions && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      return hasError ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.main
+      }, "An error occured: ", errorMessage) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.main
+      }, teacherInstructions && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         className: classes.collapsible,
         labels: {
           hidden: 'Show Teacher Instructions',
@@ -110,6 +114,10 @@ DrawingResponseComponent.propTypes = {
 
 var styles = function styles(theme) {
   return {
+    main: {
+      color: _renderUi.color.text(),
+      backgroundColor: _renderUi.color.background()
+    },
     collapsible: {
       marginBottom: theme.spacing.unit * 2
     }

package/lib/drawing-response/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/index.jsx"],"names":["DrawingResponseComponent","props","state","showCorrect","hasError","model","disabled","imageDimensions","imageUrl","prompt","mode","teacherInstructions","backgroundImageEnabled","session","onSessionChange","classes","errorMessage","isEvaluateMode","collapsible","hidden","visible","error","message","React","Component","propTypes","PropTypes","object","isRequired","func","styles","theme","marginBottom","spacing","unit"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEMA,wB;;;;;AACJ,oCAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AACA,UAAKC,KAAL,GAAa;AACXC,MAAAA,WAAW,EAAE,KADF;AAEXC,MAAAA,QAAQ,EAAE;AAFC,KAAb;AAFiB;AAMlB;;;;WAMD,kBAAS;AACP,wBAKI,KAAKH,KALT;AAAA,0CACEI,KADF;AAAA,UACWC,QADX,qBACWA,QADX;AAAA,UACqBC,eADrB,qBACqBA,eADrB;AAAA,UACsCC,QADtC,qBACsCA,QADtC;AAAA,UACgDC,MADhD,qBACgDA,MADhD;AAAA,UACwDC,IADxD,qBACwDA,IADxD;AAAA,UAC8DC,mBAD9D,qBAC8DA,mBAD9D;AAAA,oDACmFC,sBADnF;AAAA,UACmFA,sBADnF,sCAC4G,IAD5G;AAAA,UAEEC,OAFF,eAEEA,OAFF;AAAA,UAGEC,eAHF,eAGEA,eAHF;AAAA,UAIEC,OAJF,eAIEA,OAJF;AAMA,wBAAmC,KAAKb,KAAxC;AAAA,UAAQE,QAAR,eAAQA,QAAR;AAAA,UAAkBY,YAAlB,eAAkBA,YAAlB;AACA,UAAMC,cAAc,GAAGP,IAAI,KAAK,UAAhC;AAEA,aAAON,QAAQ,gBACb,mEAAwBY,YAAxB,CADa,gBAGb,6CACGL,mBAAmB,iBAClB,gCAAC,qBAAD;AACE,QAAA,SAAS,EAAEI,OAAO,CAACG,WADrB;AAEE,QAAA,MAAM,EAAE;AACNC,UAAAA,MAAM,EAAE,2BADF;AAENC,UAAAA,OAAO,EAAE;AAFH;AAFV,sBAOE,gCAAC,uBAAD;AAAe,QAAA,MAAM,EAAET;AAAvB,QAPF,CAFJ,EAaGF,MAAM,iBAAI,gCAAC,uBAAD;AAAe,QAAA,OAAO,EAAC,MAAvB;AAA8B,QAAA,MAAM,EAAEA;AAAtC,QAbb,eAeE,gCAAC,qBAAD;AACE,QAAA,OAAO,EAAEI,OADX;AAEE,QAAA,eAAe,EAAEC,eAFnB;AAGE,QAAA,cAAc,EAAEG,cAHlB;AAIE,QAAA,eAAe,EAAEV,eAJnB;AAKE,QAAA,QAAQ,EAAEC,QALZ;AAME,QAAA,sBAAsB,EAAEI,sBAN1B;AAOE,QAAA,QAAQ,EAAEN;AAPZ,QAfF,CAHF;AA6BD;;;WA3CD,kCAAgCe,KAAhC,EAAuC;AACrC,aAAO;AAAEjB,QAAAA,QAAQ,EAAE,IAAZ;AAAkBY,QAAAA,YAAY,EAAEK,KAAK,CAACC;AAAtC,OAAP;AACD;;;EAXoCC,kBAAMC,S;;AAuD7CxB,wBAAwB,CAACyB,SAAzB,GAAqC;AACnCV,EAAAA,OAAO,EAAEW,sBAAUC,MADgB;AAEnCtB,EAAAA,KAAK,EAAEqB,sBAAUC,MAAV,CAAiBC,UAFW;AAGnCd,EAAAA,eAAe,EAAEY,sBAAUG,IAAV,CAAeD,UAHG;AAInCf,EAAAA,OAAO,EAAEa,sBAAUC,MAAV,CAAiBC;AAJS,CAArC;;AAOA,IAAME,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBb,IAAAA,WAAW,EAAE;AACXc,MAAAA,YAAY,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AADxB;AADY,GAAZ;AAAA,CAAf;;eAMe,wBAAWJ,MAAX,EAAmB9B,wBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass DrawingResponseComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      hasError: false,\n    };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, errorMessage: error.message };\n  }\n\n  render() {\n    const {\n      model: { disabled, imageDimensions, imageUrl, prompt, mode, teacherInstructions, backgroundImageEnabled = true },\n      session,\n      onSessionChange,\n      classes,\n    } = this.props;\n    const { hasError, errorMessage } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n\n    return hasError ? (\n      <div>An error occured: {errorMessage}</div>\n    ) : (\n      <div>\n        {teacherInstructions && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt tagName=\"span\" prompt={prompt} />}\n\n        <Container\n          session={session}\n          onSessionChange={onSessionChange}\n          isEvaluateMode={isEvaluateMode}\n          imageDimensions={imageDimensions}\n          imageUrl={imageUrl}\n          backgroundImageEnabled={backgroundImageEnabled}\n          disabled={disabled}\n        />\n      </div>\n    );\n  }\n}\n\nDrawingResponseComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nconst styles = (theme) => ({\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n});\n\nexport default withStyles(styles)(DrawingResponseComponent);\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/drawing-response/index.jsx"],"names":["DrawingResponseComponent","props","state","showCorrect","hasError","model","disabled","imageDimensions","imageUrl","prompt","mode","teacherInstructions","backgroundImageEnabled","session","onSessionChange","classes","errorMessage","isEvaluateMode","main","collapsible","hidden","visible","error","message","React","Component","propTypes","PropTypes","object","isRequired","func","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass DrawingResponseComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      hasError: false,\n    };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, errorMessage: error.message };\n  }\n\n  render() {\n    const {\n      model: { disabled, imageDimensions, imageUrl, prompt, mode, teacherInstructions, backgroundImageEnabled = true },\n      session,\n      onSessionChange,\n      classes,\n    } = this.props;\n    const { hasError, errorMessage } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n\n    return hasError ? (\n      <div className={classes.main}>An error occured: {errorMessage}</div>\n    ) : (\n      <div className={classes.main}>\n        {teacherInstructions && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt tagName=\"span\" prompt={prompt} />}\n\n        <Container\n          session={session}\n          onSessionChange={onSessionChange}\n          isEvaluateMode={isEvaluateMode}\n          imageDimensions={imageDimensions}\n          imageUrl={imageUrl}\n          backgroundImageEnabled={backgroundImageEnabled}\n          disabled={disabled}\n        />\n      </div>\n    );\n  }\n}\n\nDrawingResponseComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\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});\n\nexport default withStyles(styles)(DrawingResponseComponent);\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "6.1.3-next.41+c2858855e",
+  "version": "6.1.3-next.56+d8bf26886",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -11,8 +11,8 @@
     "@mdi/js": "^3.6.95",
     "@mdi/react": "^1.1.1",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/math-rendering": "^2.5.12",
-    "@pie-lib/render-ui": "^4.14.16",
+    "@pie-lib/math-rendering": "^2.5.13",
+    "@pie-lib/render-ui": "^4.14.17",
     "classnames": "^2.2.6",
     "enzyme-to-json": "^3.3.5",
     "konva": "^3.4.1",
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "c2858855e0df45a4cb86fbd20637fc82f27f07c6",
+  "gitHead": "d8bf268864c1023d6595698b86fb1f7ea82c39d4",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/drawing-response/container.jsx

@@ -247,7 +247,7 @@ const styles = (theme) => ({
     boxSizing: 'border-box',
     maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls
     '& button': {
-      marginBottom: '8px',
+      marginBottom: theme.spacing.unit,
     },
   },
 });

package/src/drawing-response/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';
+import { color, Collapsible, PreviewPrompt } from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 
 import Container from './container';
@@ -29,9 +29,9 @@ class DrawingResponseComponent extends React.Component {
     const isEvaluateMode = mode === 'evaluate';
 
     return hasError ? (
-      <div>An error occured: {errorMessage}</div>
+      <div className={classes.main}>An error occured: {errorMessage}</div>
     ) : (
-      <div>
+      <div className={classes.main}>
         {teacherInstructions && (
           <Collapsible
             className={classes.collapsible}
@@ -68,6 +68,10 @@ DrawingResponseComponent.propTypes = {
 };
 
 const styles = (theme) => ({
+  main: {
+    color: color.text(),
+    backgroundColor: color.background(),
+  },
   collapsible: {
     marginBottom: theme.spacing.unit * 2,
   },