@pie-element/drawing-response 3.7.3-next.667 → 3.7.3-next.672

package/configure/lib/defaults.js

@@ -15,13 +15,13 @@ var _default = {
     promptEnabled: true,
     teacherInstructionsEnabled: true,
     studentInstructionsEnabled: true,
+    backgroundImageEnabled: true,
     toolbarEditorPosition: 'bottom'
   },
   configuration: {
     backgroundImage: {
       settings: true,
-      label: 'Background Image',
-      enabled: true
+      label: 'Background Image'
     },
     prompt: {
       settings: true,

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","imageUrl","imageDimensions","height","width","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","toolbarEditorPosition","configuration","backgroundImage","settings","label","enabled","teacherInstructions"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,QAAQ,EAAE,EAFL;AAGLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,MAAM,EAAE,CADO;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KAHZ;AAOLC,IAAAA,aAAa,EAAE,IAPV;AAQLC,IAAAA,0BAA0B,EAAE,IARvB;AASLC,IAAAA,0BAA0B,EAAE,IATvB;AAULC,IAAAA,qBAAqB,EAAE;AAVlB,GADM;AAabC,EAAAA,aAAa,EAAE;AACbC,IAAAA,eAAe,EAAE;AACfC,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE,kBAFQ;AAGfC,MAAAA,OAAO,EAAE;AAHM,KADJ;AAMbb,IAAAA,MAAM,EAAE;AACNW,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KANK;AAUbE,IAAAA,mBAAmB,EAAE;AACnBH,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY;AAVR;AAbF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    imageUrl: '',\n    imageDimensions: {\n      height: 0,\n      width: 0\n    },\n    promptEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    backgroundImage: {\n      settings: true,\n      label: 'Background Image',\n      enabled: true\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt'\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    }\n  }\n};\n"],"file":"defaults.js"}
+{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","imageUrl","imageDimensions","height","width","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","toolbarEditorPosition","configuration","backgroundImage","settings","label","teacherInstructions"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,QAAQ,EAAE,EAFL;AAGLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,MAAM,EAAE,CADO;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KAHZ;AAOLC,IAAAA,aAAa,EAAE,IAPV;AAQLC,IAAAA,0BAA0B,EAAE,IARvB;AASLC,IAAAA,0BAA0B,EAAE,IATvB;AAULC,IAAAA,sBAAsB,EAAE,IAVnB;AAWLC,IAAAA,qBAAqB,EAAE;AAXlB,GADM;AAcbC,EAAAA,aAAa,EAAE;AACbC,IAAAA,eAAe,EAAE;AACfC,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KADJ;AAKbb,IAAAA,MAAM,EAAE;AACNY,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KALK;AASbC,IAAAA,mBAAmB,EAAE;AACnBF,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY;AATR;AAdF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    imageUrl: '',\n    imageDimensions: {\n      height: 0,\n      width: 0\n    },\n    promptEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    backgroundImageEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    backgroundImage: {\n      settings: true,\n      label: 'Background Image'\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt'\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    }\n  }\n};\n"],"file":"defaults.js"}

package/configure/lib/index.js

@@ -63,12 +63,6 @@ var DrawableResponseConfigure = /*#__PURE__*/function (_HTMLElement) {
       _this._render();
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onConfigurationChanged", function (c) {
-      if (!c.backgroundImage.enabled) {
-        _this.onModelChanged(_objectSpread(_objectSpread({}, _this._model), {}, {
-          imageUrl: ''
-        }));
-      }
-
       _this._configuration = c;
 
       _this._render();

package/configure/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","DrawableResponseConfigure","m","reset","_model","dispatchModelUpdated","_render","c","backgroundImage","enabled","onModelChanged","imageUrl","_configuration","handler","dispatchEvent","InsertImageEvent","src","done","DeleteImageEvent","createDefaultModel","sensibleDefaults","configuration","bind","s","resetValue","ModelUpdatedEvent","element","React","createElement","Root","model","onConfigurationChanged","imageSupport","add","insertImage","onDeleteImage","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAMA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,mBAAN,CAAZ;;IAEqBC,yB;;;;;AAMnB,uCAAc;AAAA;;AAAA;AACZ;AADY,uGAuBG,UAACC,CAAD,EAAIC,KAAJ,EAAc;AAC7B,YAAKC,MAAL,GAAcF,CAAd;;AACA,YAAKG,oBAAL,CAA0BF,KAA1B;;AACA,YAAKG,OAAL;AACD,KA3Ba;AAAA,+GA6BW,UAACC,CAAD,EAAO;AAC9B,UAAI,CAACA,CAAC,CAACC,eAAF,CAAkBC,OAAvB,EAAgC;AAC9B,cAAKC,cAAL,iCACK,MAAKN,MADV;AAEEO,UAAAA,QAAQ,EAAE;AAFZ;AAID;;AACD,YAAKC,cAAL,GAAsBL,CAAtB;;AACA,YAAKD,OAAL;AACD,KAtCa;AAAA,oGAwCA,UAACO,OAAD,EAAa;AACzB,YAAKC,aAAL,CAAmB,IAAIC,oCAAJ,CAAqBF,OAArB,CAAnB;AACD,KA1Ca;AAAA,sGA4CE,UAACG,GAAD,EAAMC,IAAN,EAAe;AAC7B,YAAKH,aAAL,CAAmB,IAAII,oCAAJ,CAAqBF,GAArB,EAA0BC,IAA1B,CAAnB;AACD,KA9Ca;AAEZ,UAAKb,MAAL,GAAcH,yBAAyB,CAACkB,kBAA1B,EAAd;AACA,UAAKP,cAAL,GAAsBQ,qBAAiBC,aAAvC;AACA,UAAKX,cAAL,GAAsB,MAAKA,cAAL,CAAoBY,IAApB,gDAAtB;AAJY;AAKb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKnB,MAAL,GAAcH,yBAAyB,CAACkB,kBAA1B,CAA6CI,CAA7C,CAAd;;AACA,WAAKjB,OAAL;AACD;;;SAED,aAAkBC,CAAlB,EAAqB;AACnB,WAAKK,cAAL,GAAsBL,CAAtB;;AACA,WAAKD,OAAL;AACD;;;WAED,8BAAqBH,KAArB,EAA4B;AAC1B,UAAMqB,UAAU,GAAG,CAAC,CAACrB,KAArB;AAEA,WAAKW,aAAL,CAAmB,IAAIW,qCAAJ,CAAsB,KAAKrB,MAA3B,EAAmCoB,UAAnC,CAAnB;AACD;;;WA2BD,mBAAU;AACRxB,MAAAA,GAAG,CAAC,SAAD,CAAH;;AACA,UAAI0B,OAAO,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACtCC,QAAAA,KAAK,EAAE,KAAK1B,MAD0B;AAEtCiB,QAAAA,aAAa,EAAE,KAAKT,cAFkB;AAGtCF,QAAAA,cAAc,EAAE,KAAKA,cAHiB;AAItCqB,QAAAA,sBAAsB,EAAE,KAAKA,sBAJS;AAKtCC,QAAAA,YAAY,EAAE;AACZC,UAAAA,GAAG,EAAE,KAAKC,WADE;AAEZ,oBAAQ,KAAKC;AAFD;AALwB,OAA1B,CAAd;;AAUAC,2BAASC,MAAT,CAAgBX,OAAhB,EAAyB,IAAzB;AACD;;;kDAnEoDY,W;;;iCAAlCrC,yB,wBACS;AAAA,MAAC6B,KAAD,uEAAS,EAAT;AAAA,yCACvBV,qBAAiBU,KADM,GAEvBA,KAFuB;AAAA,C","sourcesContent":["import {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('hotspot:configure');\n\nexport default class DrawableResponseConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n  });\n\n  constructor() {\n    super();\n    this._model = DrawableResponseConfigure.createDefaultModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = DrawableResponseConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged = (m, reset) => {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  };\n\n  onConfigurationChanged = (c) => {\n    if (!c.backgroundImage.enabled) {\n      this.onModelChanged({\n        ...this._model,\n        imageUrl: ''\n      });\n    }\n    this._configuration = c;\n    this._render();\n  };\n\n  insertImage = (handler) => {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  };\n\n  onDeleteImage = (src, done) => {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  };\n\n  _render() {\n    log('_render');\n    let element = React.createElement(Root, {\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      imageSupport: {\n        add: this.insertImage,\n        delete: this.onDeleteImage\n      }\n    });\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","DrawableResponseConfigure","m","reset","_model","dispatchModelUpdated","_render","c","_configuration","handler","dispatchEvent","InsertImageEvent","src","done","DeleteImageEvent","createDefaultModel","sensibleDefaults","configuration","onModelChanged","bind","s","resetValue","ModelUpdatedEvent","element","React","createElement","Root","model","onConfigurationChanged","imageSupport","add","insertImage","onDeleteImage","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAMA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,mBAAN,CAAZ;;IAEqBC,yB;;;;;AAMnB,uCAAc;AAAA;;AAAA;AACZ;AADY,uGAuBG,UAACC,CAAD,EAAIC,KAAJ,EAAc;AAC7B,YAAKC,MAAL,GAAcF,CAAd;;AACA,YAAKG,oBAAL,CAA0BF,KAA1B;;AACA,YAAKG,OAAL;AACD,KA3Ba;AAAA,+GA6BW,UAACC,CAAD,EAAO;AAC9B,YAAKC,cAAL,GAAsBD,CAAtB;;AACA,YAAKD,OAAL;AACD,KAhCa;AAAA,oGAkCA,UAACG,OAAD,EAAa;AACzB,YAAKC,aAAL,CAAmB,IAAIC,oCAAJ,CAAqBF,OAArB,CAAnB;AACD,KApCa;AAAA,sGAsCE,UAACG,GAAD,EAAMC,IAAN,EAAe;AAC7B,YAAKH,aAAL,CAAmB,IAAII,oCAAJ,CAAqBF,GAArB,EAA0BC,IAA1B,CAAnB;AACD,KAxCa;AAEZ,UAAKT,MAAL,GAAcH,yBAAyB,CAACc,kBAA1B,EAAd;AACA,UAAKP,cAAL,GAAsBQ,qBAAiBC,aAAvC;AACA,UAAKC,cAAL,GAAsB,MAAKA,cAAL,CAAoBC,IAApB,gDAAtB;AAJY;AAKb;;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKhB,MAAL,GAAcH,yBAAyB,CAACc,kBAA1B,CAA6CK,CAA7C,CAAd;;AACA,WAAKd,OAAL;AACD;;;SAED,aAAkBC,CAAlB,EAAqB;AACnB,WAAKC,cAAL,GAAsBD,CAAtB;;AACA,WAAKD,OAAL;AACD;;;WAED,8BAAqBH,KAArB,EAA4B;AAC1B,UAAMkB,UAAU,GAAG,CAAC,CAAClB,KAArB;AAEA,WAAKO,aAAL,CAAmB,IAAIY,qCAAJ,CAAsB,KAAKlB,MAA3B,EAAmCiB,UAAnC,CAAnB;AACD;;;WAqBD,mBAAU;AACRrB,MAAAA,GAAG,CAAC,SAAD,CAAH;;AACA,UAAIuB,OAAO,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACtCC,QAAAA,KAAK,EAAE,KAAKvB,MAD0B;AAEtCa,QAAAA,aAAa,EAAE,KAAKT,cAFkB;AAGtCU,QAAAA,cAAc,EAAE,KAAKA,cAHiB;AAItCU,QAAAA,sBAAsB,EAAE,KAAKA,sBAJS;AAKtCC,QAAAA,YAAY,EAAE;AACZC,UAAAA,GAAG,EAAE,KAAKC,WADE;AAEZ,oBAAQ,KAAKC;AAFD;AALwB,OAA1B,CAAd;;AAUAC,2BAASC,MAAT,CAAgBX,OAAhB,EAAyB,IAAzB;AACD;;;kDA7DoDY,W;;;iCAAlClC,yB,wBACS;AAAA,MAAC0B,KAAD,uEAAS,EAAT;AAAA,yCACvBX,qBAAiBW,KADM,GAEvBA,KAFuB;AAAA,C","sourcesContent":["import {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('hotspot:configure');\n\nexport default class DrawableResponseConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n  });\n\n  constructor() {\n    super();\n    this._model = DrawableResponseConfigure.createDefaultModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = DrawableResponseConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged = (m, reset) => {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  };\n\n  onConfigurationChanged = (c) => {\n    this._configuration = c;\n    this._render();\n  };\n\n  insertImage = (handler) => {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  };\n\n  onDeleteImage = (src, done) => {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  };\n\n  _render() {\n    log('_render');\n    let element = React.createElement(Root, {\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      imageSupport: {\n        add: this.insertImage,\n        delete: this.onDeleteImage\n      }\n    });\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}

package/configure/lib/root.js

@@ -120,7 +120,8 @@ var Root = /*#__PURE__*/function (_React$Component) {
 
       var _ref2 = model || {},
           teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
-          promptEnabled = _ref2.promptEnabled;
+          promptEnabled = _ref2.promptEnabled,
+          backgroundImageEnabled = _ref2.backgroundImageEnabled;
 
       var toolbarOpts = {};
 
@@ -144,7 +145,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
           onChangeConfiguration: onConfigurationChanged,
           groups: {
             Settings: {
-              'backgroundImage.enabled': backgroundImage.settings && toggle(backgroundImage.label, true),
+              backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),
               promptEnabled: prompt.settings && toggle(prompt.label)
             },
             Properties: {
@@ -171,7 +172,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
         onChange: this.onPromptChanged,
         toolbarOpts: toolbarOpts,
         imageSupport: imageSupport
-      })), backgroundImage.enabled && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      })), backgroundImageEnabled && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.label,
         variant: "subheading"
       }, "Define Background Image"), /*#__PURE__*/_react["default"].createElement(_imageContainer["default"], {

package/configure/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","prompt","props","model","onModelChanged","update","teacherInstructions","dimensions","imageDimensions","imageUrl","classes","configuration","imageSupport","onConfigurationChanged","backgroundImage","teacherInstructionsEnabled","promptEnabled","toolbarOpts","toolbarEditorPosition","position","base","Settings","label","Properties","regular","onTeacherInstructionsChanged","onPromptChanged","enabled","onUpdateImageDimension","onImageUpload","React","Component","styles","theme","marginTop","spacing","unit","paddingTop","width","marginBottom","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageContainer from './image-container';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst { Panel, toggle } = settings;\n\nexport class Root extends React.Component {\n  onPromptChanged = prompt => {\n    const { model, onModelChanged } = this.props;\n    const update = cloneDeep(model);\n\n    onModelChanged({\n      ...update,\n      prompt\n    });\n  };\n\n  onTeacherInstructionsChanged = teacherInstructions => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      teacherInstructions\n    });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageDimensions: dimensions\n    });\n  };\n\n  onImageUpload = imageUrl => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageUrl\n    });\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      onConfigurationChanged,\n      onModelChanged\n    } = this.props;\n    const { backgroundImage = {}, prompt = {}, teacherInstructions = {} } =\n      configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled } =\n      model || {};\n    const toolbarOpts = {};\n\n    switch (model.toolbarEditorPosition) {\n      case 'top':\n        toolbarOpts.position = 'top';\n        break;\n      default:\n        toolbarOpts.position = 'bottom';\n        break;\n    }\n\n    return (\n      <div className={classes.base}>\n        <layout.ConfigLayout\n          settings={\n            <Panel\n              model={model}\n              onChangeModel={onModelChanged}\n              configuration={configuration}\n              onChangeConfiguration={onConfigurationChanged}\n              groups={{\n                Settings: {\n                  'backgroundImage.enabled':\n                    backgroundImage.settings &&\n                    toggle(backgroundImage.label, true),\n                  promptEnabled: prompt.settings && toggle(prompt.label)\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings &&\n                    toggle(teacherInstructions.label)\n                }\n              }}\n            />\n          }\n        >\n          <div className={classes.regular}>\n            {teacherInstructionsEnabled && (\n              <InputContainer\n                label={teacherInstructions.label}\n                className={classes.prompt}\n              >\n                <EditableHtml\n                  markup={model.teacherInstructions || ''}\n                  onChange={this.onTeacherInstructionsChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  toolbarOpts={toolbarOpts}\n                />\n              </InputContainer>\n            )}\n\n            {promptEnabled && (\n              <InputContainer label=\"Item Stem\" className={classes.prompt}>\n                <EditableHtml\n                  markup={model.prompt}\n                  onChange={this.onPromptChanged}\n                  toolbarOpts={toolbarOpts}\n                  imageSupport={imageSupport}\n                />\n              </InputContainer>\n            )}\n\n            {backgroundImage.enabled && (\n              <div>\n                <Typography className={classes.label} variant=\"subheading\">\n                  Define Background Image\n                </Typography>\n\n                <ImageContainer\n                  imageUrl={model.imageUrl}\n                  onUpdateImageDimension={this.onUpdateImageDimension}\n                  onImageUpload={this.onImageUpload}\n                />\n              </div>\n            )}\n          </div>\n        </layout.ConfigLayout>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  base: {\n    marginTop: theme.spacing.unit * 3\n  },\n  label: {\n    marginTop: theme.spacing.unit * 4\n  },\n  prompt: {\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%'\n  },\n  regular: {\n    marginBottom: theme.spacing.unit * 3\n  }\n});\n\nRoot.propTypes = {\n  classes: PropTypes.object.isRequired,\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func\n  }),\n  onModelChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}
+{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","prompt","props","model","onModelChanged","update","teacherInstructions","dimensions","imageDimensions","imageUrl","classes","configuration","imageSupport","onConfigurationChanged","backgroundImage","teacherInstructionsEnabled","promptEnabled","backgroundImageEnabled","toolbarOpts","toolbarEditorPosition","position","base","Settings","label","Properties","regular","onTeacherInstructionsChanged","onPromptChanged","onUpdateImageDimension","onImageUpload","React","Component","styles","theme","marginTop","spacing","unit","paddingTop","width","marginBottom","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageContainer from './image-container';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst { Panel, toggle } = settings;\n\nexport class Root extends React.Component {\n  onPromptChanged = prompt => {\n    const { model, onModelChanged } = this.props;\n    const update = cloneDeep(model);\n\n    onModelChanged({\n      ...update,\n      prompt\n    });\n  };\n\n  onTeacherInstructionsChanged = teacherInstructions => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      teacherInstructions\n    });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageDimensions: dimensions\n    });\n  };\n\n  onImageUpload = imageUrl => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({\n      ...model,\n      imageUrl\n    });\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      onConfigurationChanged,\n      onModelChanged\n    } = this.props;\n    const { backgroundImage = {}, prompt = {}, teacherInstructions = {} } =\n      configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled, backgroundImageEnabled} =\n      model || {};\n    const toolbarOpts = {};\n\n    switch (model.toolbarEditorPosition) {\n      case 'top':\n        toolbarOpts.position = 'top';\n        break;\n      default:\n        toolbarOpts.position = 'bottom';\n        break;\n    }\n\n    return (\n      <div className={classes.base}>\n        <layout.ConfigLayout\n          settings={\n            <Panel\n              model={model}\n              onChangeModel={onModelChanged}\n              configuration={configuration}\n              onChangeConfiguration={onConfigurationChanged}\n              groups={{\n                Settings: {\n                  backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),\n                  promptEnabled: prompt.settings && toggle(prompt.label)\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings &&\n                    toggle(teacherInstructions.label)\n                }\n              }}\n            />\n          }\n        >\n          <div className={classes.regular}>\n            {teacherInstructionsEnabled && (\n              <InputContainer\n                label={teacherInstructions.label}\n                className={classes.prompt}\n              >\n                <EditableHtml\n                  markup={model.teacherInstructions || ''}\n                  onChange={this.onTeacherInstructionsChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  toolbarOpts={toolbarOpts}\n                />\n              </InputContainer>\n            )}\n\n            {promptEnabled && (\n              <InputContainer label=\"Item Stem\" className={classes.prompt}>\n                <EditableHtml\n                  markup={model.prompt}\n                  onChange={this.onPromptChanged}\n                  toolbarOpts={toolbarOpts}\n                  imageSupport={imageSupport}\n                />\n              </InputContainer>\n            )}\n\n            {backgroundImageEnabled && (\n              <div>\n                <Typography className={classes.label} variant=\"subheading\">\n                  Define Background Image\n                </Typography>\n\n                <ImageContainer\n                  imageUrl={model.imageUrl}\n                  onUpdateImageDimension={this.onUpdateImageDimension}\n                  onImageUpload={this.onImageUpload}\n                />\n              </div>\n            )}\n          </div>\n        </layout.ConfigLayout>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  base: {\n    marginTop: theme.spacing.unit * 3\n  },\n  label: {\n    marginTop: theme.spacing.unit * 4\n  },\n  prompt: {\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%'\n  },\n  regular: {\n    marginBottom: theme.spacing.unit * 3\n  }\n});\n\nRoot.propTypes = {\n  classes: PropTypes.object.isRequired,\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func\n  }),\n  onModelChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}

package/configure/src/__tests__/__snapshots__/root.test.jsx.snap

@@ -8,7 +8,6 @@ exports[`Root snapshot renders 1`] = `
         configuration={
           Object {
             "backgroundImage": Object {
-              "enabled": true,
               "label": "Background Image",
               "settings": true,
             },
@@ -28,7 +27,7 @@ exports[`Root snapshot renders 1`] = `
               "teacherInstructionsEnabled": undefined,
             },
             "Settings": Object {
-              "backgroundImage.enabled": undefined,
+              "backgroundImageEnabled": undefined,
               "promptEnabled": undefined,
             },
           }
@@ -63,18 +62,6 @@ exports[`Root snapshot renders 1`] = `
           }
         />
       </Component>
-      <div>
-        <WithStyles(Typography)
-          variant="subheading"
-        >
-          Define Background Image
-        </WithStyles(Typography)>
-        <WithStyles(ImageContainer)
-          imageUrl=""
-          onImageUpload={[Function]}
-          onUpdateImageDimension={[Function]}
-        />
-      </div>
     </div>
   </ConfigLayout>
 </div>

package/configure/src/defaults.js

@@ -9,13 +9,13 @@ export default {
     promptEnabled: true,
     teacherInstructionsEnabled: true,
     studentInstructionsEnabled: true,
+    backgroundImageEnabled: true,
     toolbarEditorPosition: 'bottom',
   },
   configuration: {
     backgroundImage: {
       settings: true,
-      label: 'Background Image',
-      enabled: true
+      label: 'Background Image'
     },
     prompt: {
       settings: true,

package/configure/src/index.js

@@ -49,12 +49,6 @@ export default class DrawableResponseConfigure extends HTMLElement {
   };
 
   onConfigurationChanged = (c) => {
-    if (!c.backgroundImage.enabled) {
-      this.onModelChanged({
-        ...this._model,
-        imageUrl: ''
-      });
-    }
     this._configuration = c;
     this._render();
   };

package/configure/src/root.jsx

@@ -59,7 +59,7 @@ export class Root extends React.Component {
     } = this.props;
     const { backgroundImage = {}, prompt = {}, teacherInstructions = {} } =
       configuration || {};
-    const { teacherInstructionsEnabled, promptEnabled } =
+    const { teacherInstructionsEnabled, promptEnabled, backgroundImageEnabled} =
       model || {};
     const toolbarOpts = {};
 
@@ -83,9 +83,7 @@ export class Root extends React.Component {
               onChangeConfiguration={onConfigurationChanged}
               groups={{
                 Settings: {
-                  'backgroundImage.enabled':
-                    backgroundImage.settings &&
-                    toggle(backgroundImage.label, true),
+                  backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),
                   promptEnabled: prompt.settings && toggle(prompt.label)
                 },
                 Properties: {
@@ -124,7 +122,7 @@ export class Root extends React.Component {
               </InputContainer>
             )}
 
-            {backgroundImage.enabled && (
+            {backgroundImageEnabled && (
               <div>
                 <Typography className={classes.label} variant="subheading">
                   Define Background Image

package/controller/lib/index.js

@@ -25,7 +25,8 @@ var normalize = function normalize(question) {
   return _objectSpread({
     promptEnabled: true,
     teacherInstructionsEnabled: true,
-    studentInstructionsEnabled: true
+    studentInstructionsEnabled: true,
+    backgroundImageEnabled: true
   }, question);
 };
 
@@ -36,14 +37,16 @@ function model(question, session, env) {
   var imageUrl = normalizedQuestion.imageUrl,
       imageDimensions = normalizedQuestion.imageDimensions,
       prompt = normalizedQuestion.prompt,
-      promptEnabled = normalizedQuestion.promptEnabled;
+      promptEnabled = normalizedQuestion.promptEnabled,
+      backgroundImageEnabled = normalizedQuestion.backgroundImageEnabled;
   return new Promise(function (resolve) {
     var out = {
       disabled: env.mode !== 'gather',
       mode: env.mode,
       imageDimensions: imageDimensions,
       imageUrl: imageUrl,
-      prompt: promptEnabled ? prompt : null
+      prompt: promptEnabled ? prompt : null,
+      backgroundImageEnabled: backgroundImageEnabled
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {

package/controller/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","model","session","env","normalizedQuestion","imageUrl","imageDimensions","prompt","Promise","resolve","out","disabled","mode","role","teacherInstructions","createDefaultModel","defaults","outcome","score","completed","note"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0CAAN,CAAZ;;AAEO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,QAAQ;AAAA;AAC/BC,IAAAA,aAAa,EAAE,IADgB;AAE/BC,IAAAA,0BAA0B,EAAE,IAFG;AAG/BC,IAAAA,0BAA0B,EAAE;AAHG,KAI5BH,QAJ4B;AAAA,CAA1B;;;;AAOA,SAASI,KAAT,CAAeJ,QAAf,EAAyBK,OAAzB,EAAkCC,GAAlC,EAAuC;AAC5C,MAAMC,kBAAkB,GAAGR,SAAS,CAACC,QAAD,CAApC;AACA,MACEQ,QADF,GAKID,kBALJ,CACEC,QADF;AAAA,MAEEC,eAFF,GAKIF,kBALJ,CAEEE,eAFF;AAAA,MAGEC,MAHF,GAKIH,kBALJ,CAGEG,MAHF;AAAA,MAIET,aAJF,GAKIM,kBALJ,CAIEN,aAJF;AAOA,SAAO,IAAIU,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5B,QAAMC,GAAG,GAAG;AACVC,MAAAA,QAAQ,EAAER,GAAG,CAACS,IAAJ,KAAa,QADb;AAEVA,MAAAA,IAAI,EAAET,GAAG,CAACS,IAFA;AAGVN,MAAAA,eAAe,EAAfA,eAHU;AAIVD,MAAAA,QAAQ,EAARA,QAJU;AAKVE,MAAAA,MAAM,EAAET,aAAa,GAAGS,MAAH,GAAY;AALvB,KAAZ;;AAQA,QAAIJ,GAAG,CAACU,IAAJ,KAAa,YAAb,KAA8BV,GAAG,CAACS,IAAJ,KAAa,MAAb,IAAuBT,GAAG,CAACS,IAAJ,KAAa,UAAlE,CAAJ,EAAmF;AACjFF,MAAAA,GAAG,CAACI,mBAAJ,GAA0BV,kBAAkB,CAACL,0BAAnB,GAAgDK,kBAAkB,CAACU,mBAAnE,GAAyF,IAAnH;AACD,KAFD,MAEO;AACLJ,MAAAA,GAAG,CAACI,mBAAJ,GAA0B,IAA1B;AACD;;AAEDL,IAAAA,OAAO,CAACC,GAAD,CAAP;AACD,GAhBM,CAAP;AAiBD;;AAEM,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAACd,KAAD,uEAAS,EAAT;AAAA,SAChC,IAAIO,OAAJ,CAAY,UAAAC,OAAO,EAAI;AACrBA,IAAAA,OAAO,iCACFO,oBADE,GAEFf,KAFE,EAAP;AAID,GALD,CADgC;AAAA,CAA3B;;;;AAQA,SAASgB,OAAT,GAAsC;AAC3C,SAAO,IAAIT,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5Bd,IAAAA,GAAG,CAAC,YAAD,CAAH;AACAc,IAAAA,OAAO,CAAC;AACNS,MAAAA,KAAK,EAAE,CADD;AAENC,MAAAA,SAAS,EAAE,KAFL;AAGNC,MAAAA,IAAI,EAAE;AAHA,KAAD,CAAP;AAKD,GAPM,CAAP;AAQD","sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = question => ({\n  promptEnabled: true,\n  teacherInstructionsEnabled: true,\n  studentInstructionsEnabled: true,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    imageDimensions,\n    prompt,\n    promptEnabled\n  } = normalizedQuestion;\n\n  return new Promise(resolve => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      imageDimensions,\n      imageUrl,\n      prompt: promptEnabled ? prompt : null,\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;\n    } else {\n      out.teacherInstructions = null;\n    }\n\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise(resolve => {\n    resolve({\n      ...defaults,\n      ...model,\n    })\n  });\n\nexport function outcome(/*config, session*/) {\n  return new Promise(resolve => {\n    log('outcome...');\n    resolve({\n      score: 0,\n      completed: 'n/a',\n      note: 'Requires manual scoring'\n    });\n  });\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","model","session","env","normalizedQuestion","imageUrl","imageDimensions","prompt","Promise","resolve","out","disabled","mode","role","teacherInstructions","createDefaultModel","defaults","outcome","score","completed","note"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0CAAN,CAAZ;;AAEO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,QAAQ;AAAA;AAC/BC,IAAAA,aAAa,EAAE,IADgB;AAE/BC,IAAAA,0BAA0B,EAAE,IAFG;AAG/BC,IAAAA,0BAA0B,EAAE,IAHG;AAI/BC,IAAAA,sBAAsB,EAAE;AAJO,KAK5BJ,QAL4B;AAAA,CAA1B;;;;AAQA,SAASK,KAAT,CAAeL,QAAf,EAAyBM,OAAzB,EAAkCC,GAAlC,EAAuC;AAC5C,MAAMC,kBAAkB,GAAGT,SAAS,CAACC,QAAD,CAApC;AACA,MACES,QADF,GAMID,kBANJ,CACEC,QADF;AAAA,MAEEC,eAFF,GAMIF,kBANJ,CAEEE,eAFF;AAAA,MAGEC,MAHF,GAMIH,kBANJ,CAGEG,MAHF;AAAA,MAIEV,aAJF,GAMIO,kBANJ,CAIEP,aAJF;AAAA,MAKEG,sBALF,GAMII,kBANJ,CAKEJ,sBALF;AAQA,SAAO,IAAIQ,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5B,QAAMC,GAAG,GAAG;AACVC,MAAAA,QAAQ,EAAER,GAAG,CAACS,IAAJ,KAAa,QADb;AAEVA,MAAAA,IAAI,EAAET,GAAG,CAACS,IAFA;AAGVN,MAAAA,eAAe,EAAfA,eAHU;AAIVD,MAAAA,QAAQ,EAARA,QAJU;AAKVE,MAAAA,MAAM,EAAEV,aAAa,GAAGU,MAAH,GAAY,IALvB;AAMVP,MAAAA,sBAAsB,EAAtBA;AANU,KAAZ;;AASA,QAAIG,GAAG,CAACU,IAAJ,KAAa,YAAb,KAA8BV,GAAG,CAACS,IAAJ,KAAa,MAAb,IAAuBT,GAAG,CAACS,IAAJ,KAAa,UAAlE,CAAJ,EAAmF;AACjFF,MAAAA,GAAG,CAACI,mBAAJ,GAA0BV,kBAAkB,CAACN,0BAAnB,GAAgDM,kBAAkB,CAACU,mBAAnE,GAAyF,IAAnH;AACD,KAFD,MAEO;AACLJ,MAAAA,GAAG,CAACI,mBAAJ,GAA0B,IAA1B;AACD;;AAEDL,IAAAA,OAAO,CAACC,GAAD,CAAP;AACD,GAjBM,CAAP;AAkBD;;AAEM,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAACd,KAAD,uEAAS,EAAT;AAAA,SAChC,IAAIO,OAAJ,CAAY,UAAAC,OAAO,EAAI;AACrBA,IAAAA,OAAO,iCACFO,oBADE,GAEFf,KAFE,EAAP;AAID,GALD,CADgC;AAAA,CAA3B;;;;AAQA,SAASgB,OAAT,GAAsC;AAC3C,SAAO,IAAIT,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5Bf,IAAAA,GAAG,CAAC,YAAD,CAAH;AACAe,IAAAA,OAAO,CAAC;AACNS,MAAAA,KAAK,EAAE,CADD;AAENC,MAAAA,SAAS,EAAE,KAFL;AAGNC,MAAAA,IAAI,EAAE;AAHA,KAAD,CAAP;AAKD,GAPM,CAAP;AAQD","sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = question => ({\n  promptEnabled: true,\n  teacherInstructionsEnabled: true,\n  studentInstructionsEnabled: true,\n  backgroundImageEnabled: true,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    imageDimensions,\n    prompt,\n    promptEnabled,\n    backgroundImageEnabled\n  } = normalizedQuestion;\n\n  return new Promise(resolve => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      imageDimensions,\n      imageUrl,\n      prompt: promptEnabled ? prompt : null,\n      backgroundImageEnabled\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;\n    } else {\n      out.teacherInstructions = null;\n    }\n\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise(resolve => {\n    resolve({\n      ...defaults,\n      ...model,\n    })\n  });\n\nexport function outcome(/*config, session*/) {\n  return new Promise(resolve => {\n    log('outcome...');\n    resolve({\n      score: 0,\n      completed: 'n/a',\n      note: 'Requires manual scoring'\n    });\n  });\n}\n"],"file":"index.js"}

package/controller/src/__tests__/index.test.js

@@ -12,7 +12,8 @@ describe('controller', () => {
         height: 0,
         width: 0
       },
-      teacherInstructions: 'Teacher Instructions'
+      teacherInstructions: 'Teacher Instructions',
+      backgroundImageEnabled: true
     };
   });
 
@@ -56,7 +57,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -69,7 +71,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: null,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -83,7 +86,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -96,7 +100,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: question.teacherInstructions
+          teacherInstructions: question.teacherInstructions,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -112,7 +117,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -125,7 +131,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -138,7 +145,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: question.teacherInstructions
+          teacherInstructions: question.teacherInstructions,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
 
@@ -154,7 +162,8 @@ describe('controller', () => {
           imageUrl: question.imageUrl,
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
-          teacherInstructions: null
+          teacherInstructions: null,
+          backgroundImageEnabled: question.backgroundImageEnabled
         });
       });
     });

package/controller/src/index.js

@@ -7,6 +7,7 @@ export const normalize = question => ({
   promptEnabled: true,
   teacherInstructionsEnabled: true,
   studentInstructionsEnabled: true,
+  backgroundImageEnabled: true,
   ...question,
 });
 
@@ -16,7 +17,8 @@ export function model(question, session, env) {
     imageUrl,
     imageDimensions,
     prompt,
-    promptEnabled
+    promptEnabled,
+    backgroundImageEnabled
   } = normalizedQuestion;
 
   return new Promise(resolve => {
@@ -26,6 +28,7 @@ export function model(question, session, env) {
       imageDimensions,
       imageUrl,
       prompt: promptEnabled ? prompt : null,
+      backgroundImageEnabled
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {

package/docs/config-schema.json

@@ -4,7 +4,7 @@
   "type": "object",
   "properties": {
     "backgroundImage": {
-      "title": "ConfigurePropWithEnabled",
+      "title": "ConfigureProp",
       "type": "object",
       "properties": {
         "settings": {
@@ -16,11 +16,6 @@
           "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
           "type": "string",
           "title": "label"
-        },
-        "enabled": {
-          "description": "Indicates the value of the item if it affects config-ui\n(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)",
-          "type": "boolean",
-          "title": "enabled"
         }
       }
     },
@@ -86,27 +81,6 @@
     }
   },
   "definitions": {
-    "ConfigurePropWithEnabled": {
-      "title": "ConfigurePropWithEnabled",
-      "type": "object",
-      "properties": {
-        "settings": {
-          "description": "Indicates if the item has to be displayed in the Settings Panel",
-          "type": "boolean",
-          "title": "settings"
-        },
-        "label": {
-          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
-          "type": "string",
-          "title": "label"
-        },
-        "enabled": {
-          "description": "Indicates the value of the item if it affects config-ui\n(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)",
-          "type": "boolean",
-          "title": "enabled"
-        }
-      }
-    },
     "ConfigureProp": {
       "title": "ConfigureProp",
       "type": "object",

package/docs/config-schema.json.md

@@ -14,11 +14,6 @@ Indicates if the item has to be displayed in the Settings Panel
 
 Indicates the label for the item that has to be displayed in the Settings Panel
 
-## `enabled` (boolean)
-
-Indicates the value of the item if it affects config-ui
-(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
-
 # `partialScoring` (object)
 
 Properties of the `partialScoring` object:
@@ -73,23 +68,6 @@ Default: `"Item Stemm"`
 
 The schema defines the following additional types:
 
-## `ConfigurePropWithEnabled` (object)
-
-Properties of the `ConfigurePropWithEnabled` object:
-
-### `settings` (boolean)
-
-Indicates if the item has to be displayed in the Settings Panel
-
-### `label` (string)
-
-Indicates the label for the item that has to be displayed in the Settings Panel
-
-### `enabled` (boolean)
-
-Indicates the value of the item if it affects config-ui
-(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
-
 ## `ConfigureProp` (object)
 
 Properties of the `ConfigureProp` object:

package/docs/demo/generate.js

@@ -3,6 +3,7 @@ exports.model = (id, element) => ({
   element,
   prompt: 'This is the question prompt',
   promptEnabled: true,
+  backgroundImageEnabled: true,
   toolbarEditorPosition: 'bottom',
   imageUrl: '',
   imageDimensions: {

package/docs/pie-schema.json

@@ -63,6 +63,11 @@
       "type": "boolean",
       "title": "teacherInstructionsEnabled"
     },
+    "backgroundImageEnabled": {
+      "description": "Indicates if Background Image is enabled",
+      "type": "boolean",
+      "title": "backgroundImageEnabled"
+    },
     "toolbarEditorPosition": {
       "description": "Indicates the editor's toolbar position which can be 'bottom' or 'top'",
       "default": ": 'bottom'",
@@ -85,6 +90,7 @@
     }
   },
   "required": [
+    "backgroundImageEnabled",
     "element",
     "id",
     "imageDimensions",
@@ -92,27 +98,6 @@
     "teacherInstructionsEnabled"
   ],
   "definitions": {
-    "ConfigurePropWithEnabled": {
-      "title": "ConfigurePropWithEnabled",
-      "type": "object",
-      "properties": {
-        "settings": {
-          "description": "Indicates if the item has to be displayed in the Settings Panel",
-          "type": "boolean",
-          "title": "settings"
-        },
-        "label": {
-          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
-          "type": "string",
-          "title": "label"
-        },
-        "enabled": {
-          "description": "Indicates the value of the item if it affects config-ui\n(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)",
-          "type": "boolean",
-          "title": "enabled"
-        }
-      }
-    },
     "ConfigureProp": {
       "title": "ConfigureProp",
       "type": "object",

package/docs/pie-schema.json.md

@@ -46,6 +46,10 @@ Indicates if Student Instructions are enabled
 
 Indicates if Teacher Instructions are enabled
 
+# `backgroundImageEnabled` (boolean, required)
+
+Indicates if Background Image is enabled
+
 # `toolbarEditorPosition` (string, enum)
 
 Indicates the editor's toolbar position which can be 'bottom' or 'top'
@@ -71,23 +75,6 @@ The html Element tag name
 
 The schema defines the following additional types:
 
-## `ConfigurePropWithEnabled` (object)
-
-Properties of the `ConfigurePropWithEnabled` object:
-
-### `settings` (boolean)
-
-Indicates if the item has to be displayed in the Settings Panel
-
-### `label` (string)
-
-Indicates the label for the item that has to be displayed in the Settings Panel
-
-### `enabled` (boolean)
-
-Indicates the value of the item if it affects config-ui
-(eg.: if item is a switch and displaying an input on the config-ui depends on the switch value: on/off)
-
 ## `ConfigureProp` (object)
 
 Properties of the `ConfigureProp` object:

package/lib/drawing-response/container.js

@@ -216,7 +216,8 @@ var Container = /*#__PURE__*/function (_Component) {
           imageUrl = _this$props.imageUrl,
           imageDimensions = _this$props.imageDimensions,
           onSessionChange = _this$props.onSessionChange,
-          session = _this$props.session;
+          session = _this$props.session,
+          backgroundImageEnabled = _this$props.backgroundImageEnabled;
       var _this$state = this.state,
           drawableDimensions = _this$state.drawableDimensions,
           toolActive = _this$state.toolActive,
@@ -286,7 +287,8 @@ var Container = /*#__PURE__*/function (_Component) {
         drawableDimensions: drawableDimensions,
         imageDimensions: imageDimensions,
         toolActive: toolActive,
-        TextEntry: TextEntry
+        TextEntry: TextEntry,
+        backgroundImageEnabled: backgroundImageEnabled
       }))));
     }
   }]);
@@ -300,7 +302,8 @@ exports.Container = Container;
   session: _propTypes["default"].object.isRequired,
   onSessionChange: _propTypes["default"].func.isRequired,
   imageDimensions: _propTypes["default"].object.isRequired,
-  imageUrl: _propTypes["default"].string.isRequired
+  imageUrl: _propTypes["default"].string.isRequired,
+  backgroundImageEnabled: _propTypes["default"].bool.isRequired
 });
 
 var styles = function styles(theme) {

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","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","minHeight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","display","justifyContent","padding"],"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 = [\n  'red',\n  'orange',\n  'yellow',\n  'violet',\n  'blue',\n  'green',\n  'white',\n  'black'\n].map(c => ({ value: c, label: c }));\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  };\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: 'lightblue' },\n        { value: 'lightyellow', label: 'lightyellow' },\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(\n          target.indexOf('--pie-zoom') + 11,\n          target.lastIndexOf('%')\n        );\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\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 {\n      classes,\n      disabled,\n      imageUrl,\n      imageDimensions,\n      onSessionChange,\n      session\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 * this.state.scale;\n\n    return (\n      <div className={classes.base}>\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 =>\n            this.handleColorChange('outline', color)\n          }\n          onPaintColorChange={color => this.handleColorChange('paint', color)}\n        />\n\n        <div className={classes.box}>\n          <div className={classes.toolbar}>\n            <div>\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          </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            />\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  },\n  drawableHeight: {\n    minHeight: 350\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: '12px 8px'\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","minHeight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","display","justifyContent","padding"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAeA,KAAf,GAAyBC,qBAAzB,CAAQC,KAAR;AAEA,IAAMC,OAAO,GAAG,CACd,KADc,EAEd,QAFc,EAGd,QAHc,EAId,QAJc,EAKd,MALc,EAMd,OANc,EAOd,OAPc,EAQd,OARc,EASdC,GATc,CASV,UAAAC,CAAC;AAAA,SAAK;AAAEC,IAAAA,KAAK,EAAED,CAAT;AAAYE,IAAAA,KAAK,EAAEF;AAAnB,GAAL;AAAA,CATS,CAAhB;;IAWaG,S;;;;;AAWX,qBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,8GAwGK,UAAAC,IAAI,EAAI;AAC9B,UAAI,MAAKD,KAAL,CAAWE,QAAf,EAAyB,OAAO,IAAP;AAGzB,UAAQC,UAAR,GAAuB,MAAKC,KAA5B,CAAQD,UAAR,CAJ8B,CAK9B;;AACA,UAAIF,IAAI,KAAK,MAAb,EAAqB;AACnB,eAAO,KAAP;AACD;;AACD,aAAOA,IAAI,KAAKE,UAAU,CAACF,IAA3B;AACD,KAlHkB;AAEjB,QAAMI,SAAS,GAAG,IAAIC,wBAAJ,EAAlB;AAEA,UAAKF,KAAL,GAAa;AACXG,MAAAA,KAAK,EAAE,CADI;AAEXC,MAAAA,kBAAkB,EAAE;AAClBC,QAAAA,MAAM,EAAE,CADU;AAElBC,QAAAA,KAAK,EAAE;AAFW,OAFT;AAMXP,MAAAA,UAAU,EAAEZ,KAAK,CAAC,CAAD,CANN;AAOXoB,MAAAA,SAAS,EAAE,OAPA;AAQXC,MAAAA,aAAa,GACX;AAAEf,QAAAA,KAAK,EAAE,aAAT;AAAwBC,QAAAA,KAAK,EAAE;AAA/B,OADW,EAEX;AAAED,QAAAA,KAAK,EAAE,WAAT;AAAsBC,QAAAA,KAAK,EAAE;AAA7B,OAFW,EAGX;AAAED,QAAAA,KAAK,EAAE,aAAT;AAAwBC,QAAAA,KAAK,EAAE;AAA/B,OAHW,6CAIRJ,OAJQ,EARF;AAcXmB,MAAAA,YAAY,EAAE,OAdH;AAeXC,MAAAA,gBAAgB,EAAEpB,OAfP;AAgBXqB,MAAAA,UAAU,EAAE,KAhBD;AAiBXC,MAAAA,cAAc,EAAEtB,OAjBL;AAkBXW,MAAAA,SAAS,EAATA;AAlBW,KAAb;AAJiB;AAwBlB;;;;WAED,yBAAgB;AAAA;;AACd,UAAMY,UAAU,GAAGC,WAAW,CAAC,YAAM;AACnC,YAAI;AACF,sCAA0B,MAAI,CAACC,QAAL,CAAcC,qBAAd,EAA1B;AAAA,cAAQX,MAAR,yBAAQA,MAAR;AAAA,cAAgBC,KAAhB,yBAAgBA,KAAhB;;AACA,cAAID,MAAM,KAAK,CAAX,IAAgBC,KAAK,KAAK,CAA9B,EAAiC;AAC/B,YAAA,MAAI,CAACW,QAAL,CAAc;AACZb,cAAAA,kBAAkB,EAAE;AAClBC,gBAAAA,MAAM,EAANA,MADkB;AAElBC,gBAAAA,KAAK,EAALA;AAFkB;AADR,aAAd;AAMD;AACF,SAVD,CAUE,OAAOY,CAAP,EAAU;AACV;AACAC,UAAAA,OAAO,CAACC,IAAR,CAAa,uBAAb,EAAsCF,CAAtC;AACD,SAbD,SAaU;AACRG,UAAAA,aAAa,CAACR,UAAD,CAAb;AACD;AACF,OAjB6B,EAiB3B,GAjB2B,CAA9B;AAkBD;;;WAED,6BAAoB;AAAA;;AAClB,WAAKS,aAAL;AAEA,WAAKC,QAAL,GAAgB,IAAIC,gBAAJ,CAAqB,UAACC,SAAD,EAAe;AAClDA,QAAAA,SAAS,CAACC,OAAV,CAAkB,YAAM;AAAA;;AACtB,cAAMC,MAAM,4BAAGC,QAAQ,CAACC,cAAT,CAAwB,oBAAxB,CAAH,oFAAG,sBAA+CC,KAAlD,2DAAG,uBAAsDC,OAArE;AACA,cAAMC,IAAI,GAAGL,MAAH,aAAGA,MAAH,uBAAGA,MAAM,CAAEM,SAAR,CACXN,MAAM,CAACO,OAAP,CAAe,YAAf,IAA+B,EADpB,EAEXP,MAAM,CAACQ,WAAP,CAAmB,GAAnB,CAFW,CAAb;AAIA,cAAMC,UAAU,GAAGJ,IAAH,aAAGA,IAAH,uBAAGA,IAAI,CAAEK,OAAN,CAAc,KAAd,EAAqB,EAArB,CAAnB;;AAEF,cAAID,UAAJ,EAAgB;AACZ,gBAAME,QAAQ,GAAGC,UAAU,CAACH,UAAD,CAAV,GAAyB,GAA1C;;AACA,gBAAIE,QAAQ,KAAK,MAAI,CAACtC,KAAL,CAAWG,KAA5B,EAAmC;AACjC,cAAA,MAAI,CAACc,QAAL,CAAc;AACZd,gBAAAA,KAAK,EAAEoC,UAAU,CAACH,UAAD,CAAV,GAAyB;AADpB,eAAd;AAGD;AACF,WAPH,MAOS,IAAI,CAACA,UAAD,IAAe,MAAI,CAACpC,KAAL,CAAWG,KAAX,KAAqB,CAAxC,EAA2C;AAChD,YAAA,MAAI,CAACc,QAAL,CAAc;AACZd,cAAAA,KAAK,EAAE;AADK,aAAd;AAGD;AACF,SApBD;AAqBD,OAtBe,CAAhB;AAwBA,UAAMwB,MAAM,GAAGC,QAAQ,CAACC,cAAT,CAAwB,oBAAxB,CAAf;;AACA,UAAIF,MAAJ,EAAY;AACV,aAAKJ,QAAL,CAAciB,OAAd,CAAsBb,MAAtB,EAA8B;AAAEc,UAAAA,UAAU,EAAG,IAAf;AAAqBC,UAAAA,eAAe,EAAG,CAAC,OAAD;AAAvC,SAA9B;AACD;AACF;;;WAED,gCAAuB;AAAA;;AACrB,UAAQzC,SAAR,GAAsB,KAAKD,KAA3B,CAAQC,SAAR;AAEAA,MAAAA,SAAS,CAAC0C,oBAAV;AACA,6BAAKpB,QAAL,kEAAeqB,UAAf;AACD;;;WAED,8BAAqBC,IAArB,EAA2B;AACzB,UAAQ5C,SAAR,GAAsB,KAAKD,KAA3B,CAAQC,SAAR;AACA,UAAQJ,IAAR,GAAiBgD,IAAjB,CAAQhD,IAAR;;AAEA,UAAIA,IAAI,KAAK,MAAb,EAAqB;AACnB,aAAKoB,QAAL,CAAc;AACZlB,UAAAA,UAAU,EAAE8C;AADA,SAAd;AAGD,OAJD,MAIO;AACL5C,QAAAA,SAAS,CAAC6C,eAAV,GADK,CAEL;;AACA,aAAK7B,QAAL,CAAc;AACZ8B,UAAAA,SAAS,EAAE,IAAIC,IAAJ;AADC,SAAd;AAGD;AACF;;;WAcD,2BAAkBnD,IAAlB,EAAwBoD,KAAxB,EAA+B;AAC7B,UAAMC,KAAK,aAAMrD,IAAN,UAAX;AACA,WAAKoB,QAAL,sCACGiC,KADH,EACWD,KADX;AAGD;;;WAED,kBAAS;AAAA;;AACP,wBAQI,KAAKrD,KART;AAAA,UACEuD,OADF,eACEA,OADF;AAAA,UAEErD,QAFF,eAEEA,QAFF;AAAA,UAGEsD,QAHF,eAGEA,QAHF;AAAA,UAIEC,eAJF,eAIEA,eAJF;AAAA,UAKEC,eALF,eAKEA,eALF;AAAA,UAMEC,OANF,eAMEA,OANF;AAAA,UAOEC,sBAPF,eAOEA,sBAPF;AASA,wBAUI,KAAKxD,KAVT;AAAA,UACEI,kBADF,eACEA,kBADF;AAAA,UAEEL,UAFF,eAEEA,UAFF;AAAA,UAGEQ,SAHF,eAGEA,SAHF;AAAA,UAIEC,aAJF,eAIEA,aAJF;AAAA,UAKEC,YALF,eAKEA,YALF;AAAA,UAMEC,gBANF,eAMEA,gBANF;AAAA,UAOEC,UAPF,eAOEA,UAPF;AAAA,UAQEC,cARF,eAQEA,cARF;AAAA,UASEX,SATF,eASEA,SATF;AAYA,UAAMwD,WAAW,GAAGrD,kBAAkB,GAAG,KAAKJ,KAAL,CAAWG,KAApD;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEgD,OAAO,CAACO;AAAxB,sBACE,gCAAC,2BAAD;AACE,QAAA,SAAS,EAAEnD,SADb;AAEE,QAAA,QAAQ,EAAEC,aAFZ;AAGE,QAAA,YAAY,EAAEC,YAHhB;AAIE,QAAA,WAAW,EAAEC,gBAJf;AAKE,QAAA,UAAU,EAAEC,UALd;AAME,QAAA,SAAS,EAAEC,cANb;AAOE,QAAA,iBAAiB,EAAE,2BAAAqC,KAAK;AAAA,iBAAI,MAAI,CAACU,iBAAL,CAAuB,MAAvB,EAA+BV,KAA/B,CAAJ;AAAA,SAP1B;AAQE,QAAA,oBAAoB,EAAE,8BAAAA,KAAK;AAAA,iBACzB,MAAI,CAACU,iBAAL,CAAuB,SAAvB,EAAkCV,KAAlC,CADyB;AAAA,SAR7B;AAWE,QAAA,kBAAkB,EAAE,4BAAAA,KAAK;AAAA,iBAAI,MAAI,CAACU,iBAAL,CAAuB,OAAvB,EAAgCV,KAAhC,CAAJ;AAAA;AAX3B,QADF,eAeE;AAAK,QAAA,SAAS,EAAEE,OAAO,CAACS;AAAxB,sBACE;AAAK,QAAA,SAAS,EAAET,OAAO,CAACU;AAAxB,sBACE,6CACG1E,KAAK,CAACI,GAAN,CAAU,UAAAsD,IAAI,EAAI;AACjB,YAAQhD,IAAR,GAA8BgD,IAA9B,CAAQhD,IAAR;AAAA,YAAcH,KAAd,GAA8BmD,IAA9B,CAAcnD,KAAd;AAAA,YAAqBoE,IAArB,GAA8BjB,IAA9B,CAAqBiB,IAArB;AAEA,4BACE,gCAAC,kBAAD;AACE,UAAA,KAAK,EAAEpE,KADT;AAEE,UAAA,GAAG,EAAEG,IAFP;AAGE,UAAA,QAAQ,EAAE,MAAI,CAACkE,qBAAL,CAA2BlE,IAA3B,CAHZ;AAIE,UAAA,OAAO,EAAE;AAAA,mBAAM,MAAI,CAACmE,oBAAL,CAA0BnB,IAA1B,CAAN;AAAA,WAJX;AAKE,UAAA,KAAK,eAAE,gCAAC,gBAAD;AAAM,YAAA,IAAI,EAAEiB;AAAZ;AALT,UADF;AASD,OAZA,CADH,CADF,CADF,eAmBE;AACE,QAAA,GAAG,EAAE,aAAA/C,QAAQ,EAAI;AACf,UAAA,MAAI,CAACA,QAAL,GAAgBA,QAAhB;AACD,SAHH;AAIE,QAAA,SAAS,EAAEoC,OAAO,CAACc,cAJrB;AAKE,QAAA,KAAK,EAAE;AAAE5D,UAAAA,MAAM,EAAEoD,WAAV;AAAuBS,UAAAA,SAAS,EAAET;AAAlC;AALT,sBAOE,gCAAC,wBAAD;AACE,QAAA,KAAK,EAAE,KAAKzD,KAAL,CAAWG,KADpB;AAEE,QAAA,OAAO,EAAEoD,OAFX;AAGE,QAAA,QAAQ,EAAEzD,QAHZ;AAIE,QAAA,eAAe,EAAEwD,eAJnB;AAKE,QAAA,SAAS,EAAE/C,SALb;AAME,QAAA,YAAY,EAAEE,YANhB;AAOE,QAAA,UAAU,EAAEE,UAPd;AAQE,QAAA,QAAQ,EAAEyC,QARZ;AASE,QAAA,kBAAkB,EAAEhD,kBATtB;AAUE,QAAA,eAAe,EAAEiD,eAVnB;AAWE,QAAA,UAAU,EAAEtD,UAXd;AAYE,QAAA,SAAS,EAAEE,SAZb;AAaE,QAAA,sBAAsB,EAAEuD;AAb1B,QAPF,CAnBF,CAfF,CADF;AA6DD;;;EA3N4BW,gB;;;iCAAlBxE,S,eACQ;AACjBwD,EAAAA,OAAO,EAAEiB,sBAAUC,MAAV,CAAiBC,UADT;AAEjBxE,EAAAA,QAAQ,EAAEsE,sBAAUG,IAFH;AAGjBhB,EAAAA,OAAO,EAAEa,sBAAUC,MAAV,CAAiBC,UAHT;AAIjBhB,EAAAA,eAAe,EAAEc,sBAAUI,IAAV,CAAeF,UAJf;AAKjBjB,EAAAA,eAAe,EAAEe,sBAAUC,MAAV,CAAiBC,UALjB;AAMjBlB,EAAAA,QAAQ,EAAEgB,sBAAUK,MAAV,CAAiBH,UANV;AAOjBd,EAAAA,sBAAsB,EAAEY,sBAAUG,IAAV,CAAeD;AAPtB,C;;AA6NrB,IAAMI,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;AAAA,SAAK;AACvBjB,IAAAA,IAAI,EAAE;AACJkB,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAD5B,KADiB;AAIvBlB,IAAAA,GAAG,EAAE;AACHmB,MAAAA,MAAM,EAAE,mBADL;AAEHC,MAAAA,YAAY,EAAE,KAFX;AAGHJ,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAH7B,KAJkB;AASvBb,IAAAA,cAAc,EAAE;AACdgB,MAAAA,SAAS,EAAE;AADG,KATO;AAYvBpB,IAAAA,OAAO,EAAE;AACPqB,MAAAA,eAAe,EAAE,SADV;AAEPC,MAAAA,YAAY,EAAE,mBAFP;AAGPC,MAAAA,mBAAmB,EAAE,KAHd;AAIPC,MAAAA,oBAAoB,EAAE,KAJf;AAKPC,MAAAA,OAAO,EAAE,MALF;AAMPC,MAAAA,cAAc,EAAE,eANT;AAOPC,MAAAA,OAAO,EAAE;AAPF;AAZc,GAAL;AAAA,CAApB;;eAuBe,wBAAWd,MAAX,EAAmB/E,SAAnB,C","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 = [\n  'red',\n  'orange',\n  'yellow',\n  'violet',\n  'blue',\n  'green',\n  'white',\n  'black'\n].map(c => ({ value: c, label: c }));\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: 'lightblue' },\n        { value: 'lightyellow', label: 'lightyellow' },\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(\n          target.indexOf('--pie-zoom') + 11,\n          target.lastIndexOf('%')\n        );\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\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 {\n      classes,\n      disabled,\n      imageUrl,\n      imageDimensions,\n      onSessionChange,\n      session,\n      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 * this.state.scale;\n\n    return (\n      <div className={classes.base}>\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 =>\n            this.handleColorChange('outline', color)\n          }\n          onPaintColorChange={color => this.handleColorChange('paint', color)}\n        />\n\n        <div className={classes.box}>\n          <div className={classes.toolbar}>\n            <div>\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          </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  },\n  drawableHeight: {\n    minHeight: 350\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    justifyContent: 'space-between',\n    padding: '12px 8px'\n  }\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}

package/lib/drawing-response/drawable-main.js

@@ -260,6 +260,8 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
           paintColor = _this$props3.paintColor,
           outlineColor = _this$props3.outlineColor,
           TextEntry = _this$props3.TextEntry,
+          _this$props3$backgrou = _this$props3.backgroundImageEnabled,
+          backgroundImageEnabled = _this$props3$backgrou === void 0 ? true : _this$props3$backgrou,
           type = _this$props3.toolActive.type,
           scale = _this$props3.scale;
       var _this$state3 = this.state,
@@ -314,7 +316,7 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
         label: "Clear all"
       })), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
-      }, imageUrl && /*#__PURE__*/_react["default"].createElement(_drawableImage["default"], {
+      }, backgroundImageEnabled && imageUrl && /*#__PURE__*/_react["default"].createElement(_drawableImage["default"], {
         dimensions: {
           height: imageHeight,
           width: imageWidth
@@ -380,6 +382,7 @@ DrawableMain.propTypes = {
   TextEntry: _propTypes["default"].object.isRequired,
   toolActive: _propTypes["default"].object.isRequired,
   session: _propTypes["default"].object.isRequired,
+  backgroundImageEnabled: _propTypes["default"].bool.isRequired,
   scale: _propTypes["default"].number.isRequired
 };
 

package/lib/drawing-response/drawable-main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-main.jsx"],"names":["DrawableMain","props","onSessionChange","session","TextEntry","drawables","state","newSession","map","d","toJson","texts","all","text","id","attrs","value","setState","isOver","e","newDrawable","textIsSelected","toolActive","fillColor","outlineColor","scale","length","target","getStage","getPointerPosition","x","y","type","startx","starty","createdAt","Date","drawableToAdd","registerMovement","push","handleSessionChange","bind","updatedNewDrawable","newDrawables","allData","sort","a","b","lastElement","pop","updatedAt","nextProps","currentDrawables","drawablesString","JSON","stringify","sessionDrawableString","drawable","drawableArray","currentTexts","setAll","classes","disabled","drawableDimensions","imageDimensions","imageUrl","paintColor","draggable","paint","drawableProps","forceUpdate","toggleTextSelected","stage","onMouseOverElement","onMouseOutElement","listeners","onMouseUp","handleMouseUp","onMouseMove","handleMouseMove","onMouseDown","handleMouseDown","imageHeight","height","imageWidth","width","undoControls","handleUndo","handleClearAll","base","renderTextareas","ref","active","layer","key","render","React","Component","styles","position","left","top","cursor","marginTop","propTypes","PropTypes","object","isRequired","bool","string","func","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;IAEaA,Y;;;;;AACX,wBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,4GAiDG,YAAM;AAC1B,wBAAgD,MAAKA,KAArD;AAAA,UAAQC,eAAR,eAAQA,eAAR;AAAA,UAAyBC,OAAzB,eAAyBA,OAAzB;AAAA,UAAkCC,SAAlC,eAAkCA,SAAlC;AACA,UAAQC,SAAR,GAAsB,MAAKC,KAA3B,CAAQD,SAAR;AAEA,UAAME,UAAU,GAAG;AACjBF,QAAAA,SAAS,EAAEA,SAAS,CAACG,GAAV,CAAc,UAAAC,CAAC;AAAA,iBAAIA,CAAC,CAACC,MAAF,EAAJ;AAAA,SAAf,CADM;AAEjBC,QAAAA,KAAK,EAAEP,SAAS,CAACQ,GAAV,CAAcJ,GAAd,CAAkB,UAAAK,IAAI;AAAA,+DACxBA,IADwB,GAEvBT,SAAS,gBAASS,IAAI,CAACC,EAAd,EAAT,IAAgCV,SAAS,gBAASS,IAAI,CAACC,EAAd,EAAT,CAA6BC,KAFtC;AAG3BC,YAAAA,KAAK,EACHZ,SAAS,oBAAaS,IAAI,CAACC,EAAlB,EAAT,IACAV,SAAS,oBAAaS,IAAI,CAACC,EAAlB,EAAT,CAAiCE;AALR;AAAA,SAAtB;AAFU,OAAnB;;AAWA,UAAI,CAAC,yBAAQT,UAAR,EAAoBJ,OAApB,CAAL,EAAmC;AACjCD,QAAAA,eAAe,iCACVC,OADU,GAEVI,UAFU,EAAf;AAID;AACF,KAtEkB;AAAA,2GAwEE;AAAA,aAAM,MAAKU,QAAL,CAAc;AAAEC,QAAAA,MAAM,EAAE;AAAV,OAAd,CAAN;AAAA,KAxEF;AAAA,0GA0EC;AAAA,aAAM,MAAKD,QAAL,CAAc;AAAEC,QAAAA,MAAM,EAAE;AAAV,OAAd,CAAN;AAAA,KA1ED;AAAA,wGA4ED,UAAAC,CAAC,EAAI;AACrB,wBAAwC,MAAKb,KAA7C;AAAA,UAAQc,WAAR,eAAQA,WAAR;AAAA,UAAqBC,cAArB,eAAqBA,cAArB;AACA,yBAAuD,MAAKpB,KAA5D;AAAA,UAAQqB,UAAR,gBAAQA,UAAR;AAAA,UAAoBC,SAApB,gBAAoBA,SAApB;AAAA,UAA+BC,YAA/B,gBAA+BA,YAA/B;AAAA,UAA6CC,KAA7C,gBAA6CA,KAA7C;;AAEA,UAAIL,WAAW,CAACM,MAAZ,KAAuB,CAAvB,IAA4B,CAACL,cAAjC,EAAiD;AAC/C,oCAAiBF,CAAC,CAACQ,MAAF,CAASC,QAAT,GAAoBC,kBAApB,EAAjB;AAAA,YAAQC,CAAR,yBAAQA,CAAR;AAAA,YAAWC,CAAX,yBAAWA,CAAX;;AACA,YAAMX,YAAW,GAAG,yBAAQE,UAAU,CAACU,IAAnB,EAAyB;AAC3CC,UAAAA,MAAM,EAAEH,CAAC,GAAGL,KAD+B;AAE3CS,UAAAA,MAAM,EAAEH,CAAC,GAAGN,KAF+B;AAG3CF,UAAAA,SAAS,EAATA,SAH2C;AAI3CC,UAAAA,YAAY,EAAZA,YAJ2C;AAK3CW,UAAAA,SAAS,EAAE,IAAIC,IAAJ;AALgC,SAAzB,CAApB;;AAQA,cAAKnB,QAAL,CAAc;AACZG,UAAAA,WAAW,EAAE,CAACA,YAAD;AADD,SAAd;AAGD;AACF,KA9FkB;AAAA,sGAgGH,UAAAD,CAAC,EAAI;AACnB,yBAAmC,MAAKb,KAAxC;AAAA,UAAQc,WAAR,gBAAQA,WAAR;AAAA,UAAqBf,SAArB,gBAAqBA,SAArB;AACA,UAAQoB,KAAR,GAAkB,MAAKxB,KAAvB,CAAQwB,KAAR;;AAEA,UAAIL,WAAW,CAACM,MAAZ,KAAuB,CAA3B,EAA8B;AAC5B,qCAAiBP,CAAC,CAACQ,MAAF,CAASC,QAAT,GAAoBC,kBAApB,EAAjB;AAAA,YAAQC,CAAR,0BAAQA,CAAR;AAAA,YAAWC,CAAX,0BAAWA,CAAX;;AACA,YAAMM,aAAa,GAAGjB,WAAW,CAAC,CAAD,CAAjC;AAEAiB,QAAAA,aAAa,CAACC,gBAAd,CAA+BR,CAAC,GAAGL,KAAnC,EAA0CM,CAAC,GAAGN,KAA9C;AACApB,QAAAA,SAAS,CAACkC,IAAV,CAAeF,aAAf;;AAEA,cAAKpB,QAAL,CACE;AACEG,UAAAA,WAAW,EAAE,EADf;AAEEf,UAAAA,SAAS,EAATA;AAFF,SADF,EAKE,MAAKmC,mBAAL,CAAyBC,IAAzB,iDAAoCJ,aAApC,CALF;AAOD;AACF,KAnHkB;AAAA,wGAqHD,UAAAlB,CAAC,EAAI;AACrB,UAAQC,WAAR,GAAwB,MAAKd,KAA7B,CAAQc,WAAR;AACA,UAAQK,KAAR,GAAkB,MAAKxB,KAAvB,CAAQwB,KAAR;;AAEA,UAAIL,WAAW,CAACM,MAAZ,KAAuB,CAA3B,EAA8B;AAC5B,qCAAiBP,CAAC,CAACQ,MAAF,CAASC,QAAT,GAAoBC,kBAApB,EAAjB;AAAA,YAAQC,CAAR,0BAAQA,CAAR;AAAA,YAAWC,CAAX,0BAAWA,CAAX;;AACA,YAAMW,kBAAkB,GAAGtB,WAAW,CAAC,CAAD,CAAtC;AAEAsB,QAAAA,kBAAkB,CAACJ,gBAAnB,CAAoCR,CAAC,GAAGL,KAAxC,EAA+CM,CAAC,GAAGN,KAAnD;;AAEA,cAAKR,QAAL,CAAc;AACZG,UAAAA,WAAW,EAAE,CAACsB,kBAAD;AADD,SAAd;AAGD;AACF,KAnIkB;AAAA,mGAqIN,YAAM;AACjB,UAAQrC,SAAR,GAAsB,MAAKC,KAA3B,CAAQD,SAAR;AACA,UAAQD,SAAR,GAAsB,MAAKH,KAA3B,CAAQG,SAAR;AAEA,UAAMuC,YAAY,uCAAOtC,SAAP,CAAlB;AACA,UAAMuC,OAAO,iDAAOvC,SAAP,uCAAqBD,SAAS,CAACQ,GAA/B,EAAb;AAEAgC,MAAAA,OAAO,CAACC,IAAR,CAAa,UAACC,CAAD,EAAIC,CAAJ;AAAA,eAAU,IAAIX,IAAJ,CAASU,CAAC,CAACX,SAAX,IAAwB,IAAIC,IAAJ,CAASW,CAAC,CAACZ,SAAX,CAAlC;AAAA,OAAb;AACA,UAAMa,WAAW,GAAGJ,OAAO,CAACA,OAAO,CAAClB,MAAR,GAAiB,CAAlB,CAA3B;;AAEA,UAAIsB,WAAW,IAAIA,WAAW,CAAChB,IAAZ,KAAqB,YAAxC,EAAsD;AACpD5B,QAAAA,SAAS,CAACQ,GAAV,CAAcqC,GAAd;;AACA,cAAKhC,QAAL,CAAc;AAAEiC,UAAAA,SAAS,EAAE,IAAId,IAAJ;AAAb,SAAd,EAAyC,MAAKI,mBAA9C;AACD,OAHD,MAGO;AACLG,QAAAA,YAAY,CAACM,GAAb;;AACA,cAAKhC,QAAL,CAAc;AAAEZ,UAAAA,SAAS,EAAEsC;AAAb,SAAd,EAA2C,MAAKH,mBAAhD;AACD;AACF,KAtJkB;AAAA,uGAwJF,YAAM;AACrB,UAAQpC,SAAR,GAAsB,MAAKH,KAA3B,CAAQG,SAAR;AAEAA,MAAAA,SAAS,CAACQ,GAAV,GAAgB,EAAhB;;AACA,YAAKK,QAAL,CACE;AAAEZ,QAAAA,SAAS,EAAE,EAAb;AAAiB6C,QAAAA,SAAS,EAAE,IAAId,IAAJ;AAA5B,OADF,EAEE,MAAKI,mBAFP;AAID,KAhKkB;AAAA,2GAkKE,UAAAnB,cAAc;AAAA,aAAI,MAAKJ,QAAL,CAAc;AAAEI,QAAAA,cAAc,EAAdA;AAAF,OAAd,CAAJ;AAAA,KAlKhB;AAEjB,UAAKf,KAAL,GAAa;AACXD,MAAAA,SAAS,EAAE,EADA;AAEXe,MAAAA,WAAW,EAAE,EAFF;AAGXC,MAAAA,cAAc,EAAE;AAHL,KAAb;AAFiB;AAOlB;;;;WAED,0CAAiC8B,SAAjC,EAA4C;AAC1C,UAAIA,SAAS,CAAChD,OAAd,EAAuB;AACrB,YAAQC,SAAR,GAAsB+C,SAAtB,CAAQ/C,SAAR;AACA,YAAmBgD,gBAAnB,GAAwC,KAAK9C,KAA7C,CAAQD,SAAR;;AAEA,YAAI8C,SAAS,CAAChD,OAAV,CAAkBE,SAAtB,EAAiC;AAC/B,cAAMsC,YAAY,GAAG,2BAAUQ,SAAS,CAAChD,OAAV,CAAkBE,SAA5B,CAArB;AACA,cAAMgD,eAAe,GAAGC,IAAI,CAACC,SAAL,CAAeH,gBAAf,CAAxB;AACA,cAAMI,qBAAqB,GAAGF,IAAI,CAACC,SAAL,CAC5B,CAACZ,YAAY,IAAI,EAAjB,EAAqBnC,GAArB,CAAyB,UAAAiD,QAAQ;AAAA,mBAAI,sBAAKA,QAAL,EAAe,MAAf,CAAJ;AAAA,WAAjC,CAD4B,CAA9B;;AAIA,cAAIJ,eAAe,KAAKG,qBAAxB,EAA+C;AAC7C,gBAAME,aAAa,GAAGP,SAAS,CAAChD,OAAV,CAAkBE,SAAxC;AAEA,iBAAKY,QAAL,CAAc;AACZZ,cAAAA,SAAS,EAAEqD,aAAa,CAAClD,GAAd,CAAkB,UAAAiD,QAAQ;AAAA,uBACnC,yBAAQA,QAAQ,CAACzB,IAAjB,EAAuByB,QAAvB,CADmC;AAAA,eAA1B;AADC,aAAd;AAKD;;AAED,cAAME,YAAY,GAAGvD,SAAS,CAACQ,GAAV,CAAcJ,GAAd,CAAkB,UAAAK,IAAI;AAAA,iEACtCA,IADsC,GAErCT,SAAS,gBAASS,IAAI,CAACC,EAAd,EAAT,IACFV,SAAS,gBAASS,IAAI,CAACC,EAAd,EAAT,CAA6BC,KAHU;AAIzCC,cAAAA,KAAK,EACHZ,SAAS,oBAAaS,IAAI,CAACC,EAAlB,EAAT,IACAV,SAAS,oBAAaS,IAAI,CAACC,EAAlB,EAAT,CAAiCE;AANM;AAAA,WAAtB,CAArB;;AASA,cAAI,CAAC,yBAAQ2C,YAAR,EAAsBR,SAAS,CAAChD,OAAV,CAAkBQ,KAAxC,CAAL,EAAqD;AACnDP,YAAAA,SAAS,CAACwD,MAAV,CAAiBT,SAAS,CAAChD,OAAV,CAAkBQ,KAAlB,IAA2B,EAA5C;AACD;AACF;AACF,OAlCD,MAkCO;AACL,aAAK6B,mBAAL;AACD;AACF;;;WAqHD,kBAAS;AAAA;;AACP,yBAYI,KAAKvC,KAZT;AAAA,UACE4D,OADF,gBACEA,OADF;AAAA,UAEEC,QAFF,gBAEEA,QAFF;AAAA,UAGEC,kBAHF,gBAGEA,kBAHF;AAAA,UAIExC,SAJF,gBAIEA,SAJF;AAAA,UAKEyC,eALF,gBAKEA,eALF;AAAA,UAMEC,QANF,gBAMEA,QANF;AAAA,UAOEC,UAPF,gBAOEA,UAPF;AAAA,UAQE1C,YARF,gBAQEA,YARF;AAAA,UASEpB,SATF,gBASEA,SATF;AAAA,UAUgB4B,IAVhB,gBAUEV,UAVF,CAUgBU,IAVhB;AAAA,UAWEP,KAXF,gBAWEA,KAXF;AAaA,yBAAgC,KAAKnB,KAArC;AAAA,UAAQY,MAAR,gBAAQA,MAAR;AAAA,UAAgBE,WAAhB,gBAAgBA,WAAhB;AAEA,UAAM+C,SAAS,GAAGnC,IAAI,KAAK,QAA3B;AACA,UAAMoC,KAAK,GAAGpC,IAAI,KAAK,aAAvB;AACA,UAAM3B,SAAS,iDAAO,KAAKC,KAAL,CAAWD,SAAlB,uCAAgC,KAAKC,KAAL,CAAWc,WAA3C,EAAf;AAEA,UAAMiD,aAAa,GAAG;AACpBF,QAAAA,SAAS,EAAEA,SAAS,IAAI,CAACL,QADL;AAEpBA,QAAAA,QAAQ,EAARA,QAFoB;AAGpBM,QAAAA,KAAK,EAALA,KAHoB;AAIpB7C,QAAAA,SAAS,EAATA,SAJoB;AAKpB+C,QAAAA,WAAW,EAAE;AAAA,iBAAM,MAAI,CAACrD,QAAL,CAAc;AAAEiC,YAAAA,SAAS,EAAE,IAAId,IAAJ;AAAb,WAAd,CAAN;AAAA,SALO;AAMpB8B,QAAAA,UAAU,EAAVA,UANoB;AAOpB1C,QAAAA,YAAY,EAAZA,YAPoB;AAQpB+C,QAAAA,kBAAkB,EAAE,KAAKA,kBARL;AASpB/B,QAAAA,mBAAmB,EAAE,KAAKA,mBATN;AAUpBgC,QAAAA,KAAK,EAAE,KAAKA,KAVQ;AAWpBC,QAAAA,kBAAkB,EAAE,KAAKA,kBAXL;AAYpBC,QAAAA,iBAAiB,EAAE,KAAKA,iBAZJ;AAapBjD,QAAAA,KAAK,EAALA;AAboB,OAAtB;AAgBA,UAAIkD,SAAS,GAAG,EAAhB;;AAEA,UAAI,CAACb,QAAL,EAAe;AACba,QAAAA,SAAS,GAAG;AACVC,UAAAA,SAAS,EAAE,KAAKC,aADN;AAEVC,UAAAA,WAAW,EAAE,KAAKC;AAFR,SAAZ;;AAKA,YAAI,CAACZ,SAAL,EAAgB;AACdQ,UAAAA,SAAS,CAACK,WAAV,GAAwB,KAAKC,eAA7B;AACD;AACF;;AAED,UAAMC,WAAW,GAAGlB,eAAe,CAACmB,MAAhB,GAAyB1D,KAA7C;AACA,UAAM2D,UAAU,GAAGpB,eAAe,CAACqB,KAAhB,GAAwB5D,KAA3C;AAEA,0BACE,0DACE;AAAK,QAAA,SAAS,EAAEoC,OAAO,CAACyB;AAAxB,sBACE,gCAAC,kBAAD;AAAQ,QAAA,QAAQ,EAAExB,QAAlB;AAA4B,QAAA,OAAO,EAAE,KAAKyB,UAA1C;AAAsD,QAAA,KAAK,EAAC;AAA5D,QADF,eAEE,gCAAC,kBAAD;AAAQ,QAAA,QAAQ,EAAEzB,QAAlB;AAA4B,QAAA,OAAO,EAAE,KAAK0B,cAA1C;AAA0D,QAAA,KAAK,EAAC;AAAhE,QAFF,CADF,eAKE;AAAK,QAAA,SAAS,EAAE3B,OAAO,CAAC4B;AAAxB,SACGxB,QAAQ,iBACP,gCAAC,yBAAD;AACE,QAAA,UAAU,EAAE;AAAEkB,UAAAA,MAAM,EAAED,WAAV;AAAuBG,UAAAA,KAAK,EAAED;AAA9B,SADd;AAEE,QAAA,GAAG,EAAEnB;AAFP,QAFJ,EAOG7D,SAAS,CAACsF,eAAV,EAPH,eASE,gCAAC,iBAAD;AACE,QAAA,MAAM,EAAEjE,KADV;AAEE,QAAA,MAAM,EAAEA,KAFV;AAGE,QAAA,GAAG,EAAE,aAAAkE,KAAG,EAAI;AACV,UAAA,MAAI,CAACnB,KAAL,GAAamB,KAAb;AACD,SALH;AAME,QAAA,SAAS,EAAE,6BAAW9B,OAAO,CAACW,KAAnB,uCACRX,OAAO,CAAC+B,MADA,EAEPzB,SAAS,KACRjD,MAAM,IAAKE,WAAW,IAAIA,WAAW,CAACM,MAAZ,KAAuB,CADzC,CAFF,EANb;AAWE,QAAA,MAAM,EAAEqC,kBAAkB,CAACoB,MAX7B;AAYE,QAAA,KAAK,EAAEpB,kBAAkB,CAACsB;AAZ5B,SAaMV,SAbN,gBAeE,gCAAC,iBAAD;AACE,QAAA,GAAG,EAAE,aAAAgB,IAAG,EAAI;AACV,UAAA,MAAI,CAACE,KAAL,GAAaF,IAAb;AACD;AAHH,SAKGtF,SAAS,CAACG,GAAV,CAAc,UAACiD,QAAD,EAAWqC,GAAX;AAAA,eACbrC,QAAQ,CAACsC,MAAT,iCAAqB1B,aAArB;AAAoCyB,UAAAA,GAAG,EAAHA;AAApC,WADa;AAAA,OAAd,CALH,EASG1F,SAAS,CAAC2F,MAAV,CAAiB1B,aAAjB,CATH,CAfF,CATF,CALF,CADF;AA6CD;;;EAtQ+B2B,kBAAMC,S;;;;AAyQxC,IAAMC,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBT,IAAAA,IAAI,EAAE;AACJU,MAAAA,QAAQ,EAAE,UADN;AAEJd,MAAAA,KAAK,EAAE;AAFH,KADc;AAKpBb,IAAAA,KAAK,EAAE;AACL4B,MAAAA,IAAI,EAAE,CADD;AAELD,MAAAA,QAAQ,EAAE,UAFL;AAGLE,MAAAA,GAAG,EAAE;AAHA,KALa;AAUpBT,IAAAA,MAAM,EAAE;AACNU,MAAAA,MAAM,EAAE;AADF,KAVY;AAapBhB,IAAAA,YAAY,EAAE;AACZ,eAAO,OADK;AAEZiB,MAAAA,SAAS,EAAE,CAAC,EAFA;AAGZlB,MAAAA,KAAK,EAAE;AAHK;AAbM,GAAP;AAAA,CAAf;;AAoBArF,YAAY,CAACwG,SAAb,GAAyB;AACvB3C,EAAAA,OAAO,EAAE4C,sBAAUC,MAAV,CAAiBC,UADH;AAEvB7C,EAAAA,QAAQ,EAAE2C,sBAAUG,IAFG;AAGvB7C,EAAAA,kBAAkB,EAAE0C,sBAAUC,MAAV,CAAiBC,UAHd;AAIvB3C,EAAAA,eAAe,EAAEyC,sBAAUC,MAAV,CAAiBC,UAJX;AAKvBpF,EAAAA,SAAS,EAAEkF,sBAAUI,MAAV,CAAiBF,UALL;AAMvBzG,EAAAA,eAAe,EAAEuG,sBAAUK,IAAV,CAAeH,UANT;AAOvBzC,EAAAA,UAAU,EAAEuC,sBAAUI,MAAV,CAAiBF,UAPN;AAQvBnF,EAAAA,YAAY,EAAEiF,sBAAUI,MAAV,CAAiBF,UARR;AASvB1C,EAAAA,QAAQ,EAAEwC,sBAAUI,MAAV,CAAiBF,UATJ;AAUvBvG,EAAAA,SAAS,EAAEqG,sBAAUC,MAAV,CAAiBC,UAVL;AAWvBrF,EAAAA,UAAU,EAAEmF,sBAAUC,MAAV,CAAiBC,UAXN;AAYvBxG,EAAAA,OAAO,EAAEsG,sBAAUC,MAAV,CAAiBC,UAZH;AAavBlF,EAAAA,KAAK,EAAEgF,sBAAUM,MAAV,CAAiBJ;AAbD,CAAzB;;eAgBe,wBAAWT,MAAX,EAAmBlG,YAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport omit from 'lodash/omit';\nimport cloneDeep from 'lodash/cloneDeep';\nimport isEqual from 'lodash/isEqual';\nimport classnames from 'classnames';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageBackground from './drawable-image';\nimport Button from './button';\nimport factory from './factory';\n\nexport class DrawableMain extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      drawables: [],\n      newDrawable: [],\n      textIsSelected: false\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps.session) {\n      const { TextEntry } = nextProps;\n      const { drawables: currentDrawables } = this.state;\n\n      if (nextProps.session.drawables) {\n        const newDrawables = cloneDeep(nextProps.session.drawables);\n        const drawablesString = JSON.stringify(currentDrawables);\n        const sessionDrawableString = JSON.stringify(\n          (newDrawables || []).map(drawable => omit(drawable, 'type'))\n        );\n\n        if (drawablesString !== sessionDrawableString) {\n          const drawableArray = nextProps.session.drawables;\n\n          this.setState({\n            drawables: drawableArray.map(drawable =>\n              factory(drawable.type, drawable)\n            )\n          });\n        }\n\n        const currentTexts = TextEntry.all.map(text => ({\n          ...text,\n          ...(TextEntry[`text_${text.id}`] &&\n            TextEntry[`text_${text.id}`].attrs),\n          value:\n            TextEntry[`textarea_${text.id}`] &&\n            TextEntry[`textarea_${text.id}`].value\n        }));\n\n        if (!isEqual(currentTexts, nextProps.session.texts)) {\n          TextEntry.setAll(nextProps.session.texts || []);\n        }\n      }\n    } else {\n      this.handleSessionChange();\n    }\n  }\n\n  handleSessionChange = () => {\n    const { onSessionChange, session, TextEntry } = this.props;\n    const { drawables } = this.state;\n\n    const newSession = {\n      drawables: drawables.map(d => d.toJson()),\n      texts: TextEntry.all.map(text => ({\n        ...text,\n        ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),\n        value:\n          TextEntry[`textarea_${text.id}`] &&\n          TextEntry[`textarea_${text.id}`].value\n      }))\n    };\n\n    if (!isEqual(newSession, session)) {\n      onSessionChange({\n        ...session,\n        ...newSession\n      });\n    }\n  };\n\n  onMouseOverElement = () => this.setState({ isOver: true });\n\n  onMouseOutElement = () => this.setState({ isOver: false });\n\n  handleMouseDown = e => {\n    const { newDrawable, textIsSelected } = this.state;\n    const { toolActive, fillColor, outlineColor, scale } = this.props;\n\n    if (newDrawable.length === 0 && !textIsSelected) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const newDrawable = factory(toolActive.type, {\n        startx: x / scale,\n        starty: y / scale,\n        fillColor,\n        outlineColor,\n        createdAt: new Date()\n      });\n\n      this.setState({\n        newDrawable: [newDrawable]\n      });\n    }\n  };\n\n  handleMouseUp = e => {\n    const { newDrawable, drawables } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const drawableToAdd = newDrawable[0];\n\n      drawableToAdd.registerMovement(x / scale, y / scale);\n      drawables.push(drawableToAdd);\n\n      this.setState(\n        {\n          newDrawable: [],\n          drawables\n        },\n        this.handleSessionChange.bind(this, drawableToAdd)\n      );\n    }\n  };\n\n  handleMouseMove = e => {\n    const { newDrawable } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const updatedNewDrawable = newDrawable[0];\n\n      updatedNewDrawable.registerMovement(x / scale, y / scale);\n\n      this.setState({\n        newDrawable: [updatedNewDrawable]\n      });\n    }\n  };\n\n  handleUndo = () => {\n    const { drawables } = this.state;\n    const { TextEntry } = this.props;\n\n    const newDrawables = [...drawables];\n    const allData = [...drawables, ...TextEntry.all];\n\n    allData.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));\n    const lastElement = allData[allData.length - 1];\n\n    if (lastElement && lastElement.type === 'text-entry') {\n      TextEntry.all.pop();\n      this.setState({ updatedAt: new Date() }, this.handleSessionChange);\n    } else {\n      newDrawables.pop();\n      this.setState({ drawables: newDrawables }, this.handleSessionChange);\n    }\n  };\n\n  handleClearAll = () => {\n    const { TextEntry } = this.props;\n\n    TextEntry.all = [];\n    this.setState(\n      { drawables: [], updatedAt: new Date() },\n      this.handleSessionChange\n    );\n  };\n\n  toggleTextSelected = textIsSelected => this.setState({ textIsSelected });\n\n  render() {\n    const {\n      classes,\n      disabled,\n      drawableDimensions,\n      fillColor,\n      imageDimensions,\n      imageUrl,\n      paintColor,\n      outlineColor,\n      TextEntry,\n      toolActive: { type },\n      scale\n    } = this.props;\n    const { isOver, newDrawable } = this.state;\n\n    const draggable = type === 'Select';\n    const paint = type === 'PaintBucket';\n    const drawables = [...this.state.drawables, ...this.state.newDrawable];\n\n    const drawableProps = {\n      draggable: draggable && !disabled,\n      disabled,\n      paint,\n      fillColor,\n      forceUpdate: () => this.setState({ updatedAt: new Date() }),\n      paintColor,\n      outlineColor,\n      toggleTextSelected: this.toggleTextSelected,\n      handleSessionChange: this.handleSessionChange,\n      stage: this.stage,\n      onMouseOverElement: this.onMouseOverElement,\n      onMouseOutElement: this.onMouseOutElement,\n      scale\n    };\n\n    let listeners = {};\n\n    if (!disabled) {\n      listeners = {\n        onMouseUp: this.handleMouseUp,\n        onMouseMove: this.handleMouseMove\n      };\n\n      if (!draggable) {\n        listeners.onMouseDown = this.handleMouseDown;\n      }\n    }\n\n    const imageHeight = imageDimensions.height * scale;\n    const imageWidth = imageDimensions.width * scale;\n\n    return (\n      <div>\n        <div className={classes.undoControls}>\n          <Button disabled={disabled} onClick={this.handleUndo} label=\"Undo\" />\n          <Button disabled={disabled} onClick={this.handleClearAll} label=\"Clear all\" />\n        </div>\n        <div className={classes.base}>\n          {imageUrl && (\n            <ImageBackground\n              dimensions={{ height: imageHeight, width: imageWidth }}\n              url={imageUrl} />\n          )}\n\n          {TextEntry.renderTextareas()}\n\n          <Stage\n            scaleX={scale}\n            scaleY={scale}\n            ref={ref => {\n              this.stage = ref;\n            }}\n            className={classnames(classes.stage, {\n              [classes.active]:\n                draggable &&\n                (isOver || (newDrawable && newDrawable.length === 1))\n            })}\n            height={drawableDimensions.height}\n            width={drawableDimensions.width}\n            {...listeners}\n          >\n            <Layer\n              ref={ref => {\n                this.layer = ref;\n              }}\n            >\n              {drawables.map((drawable, key) =>\n                drawable.render({ ...drawableProps, key })\n              )}\n              {/* Text Entry is a special case  */}\n              {TextEntry.render(drawableProps)}\n            </Layer>\n          </Stage>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n    width: '100%'\n  },\n  stage: {\n    left: 0,\n    position: 'absolute',\n    top: 0\n  },\n  active: {\n    cursor: 'pointer'\n  },\n  undoControls: {\n    float: 'right',\n    marginTop: -43,\n    width: 163\n  }\n});\n\nDrawableMain.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disabled: PropTypes.bool,\n  drawableDimensions: PropTypes.object.isRequired,\n  imageDimensions: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  paintColor: PropTypes.string.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  TextEntry: PropTypes.object.isRequired,\n  toolActive: PropTypes.object.isRequired,\n  session: PropTypes.object.isRequired,\n  scale: PropTypes.number.isRequired\n};\n\nexport default withStyles(styles)(DrawableMain);\n"],"file":"drawable-main.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-main.jsx"],"names":["DrawableMain","props","onSessionChange","session","TextEntry","drawables","state","newSession","map","d","toJson","texts","all","text","id","attrs","value","setState","isOver","e","newDrawable","textIsSelected","toolActive","fillColor","outlineColor","scale","length","target","getStage","getPointerPosition","x","y","type","startx","starty","createdAt","Date","drawableToAdd","registerMovement","push","handleSessionChange","bind","updatedNewDrawable","newDrawables","allData","sort","a","b","lastElement","pop","updatedAt","nextProps","currentDrawables","drawablesString","JSON","stringify","sessionDrawableString","drawable","drawableArray","currentTexts","setAll","classes","disabled","drawableDimensions","imageDimensions","imageUrl","paintColor","backgroundImageEnabled","draggable","paint","drawableProps","forceUpdate","toggleTextSelected","stage","onMouseOverElement","onMouseOutElement","listeners","onMouseUp","handleMouseUp","onMouseMove","handleMouseMove","onMouseDown","handleMouseDown","imageHeight","height","imageWidth","width","undoControls","handleUndo","handleClearAll","base","renderTextareas","ref","active","layer","key","render","React","Component","styles","position","left","top","cursor","marginTop","propTypes","PropTypes","object","isRequired","bool","string","func","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport omit from 'lodash/omit';\nimport cloneDeep from 'lodash/cloneDeep';\nimport isEqual from 'lodash/isEqual';\nimport classnames from 'classnames';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageBackground from './drawable-image';\nimport Button from './button';\nimport factory from './factory';\n\nexport class DrawableMain extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      drawables: [],\n      newDrawable: [],\n      textIsSelected: false\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps.session) {\n      const { TextEntry } = nextProps;\n      const { drawables: currentDrawables } = this.state;\n\n      if (nextProps.session.drawables) {\n        const newDrawables = cloneDeep(nextProps.session.drawables);\n        const drawablesString = JSON.stringify(currentDrawables);\n        const sessionDrawableString = JSON.stringify(\n          (newDrawables || []).map(drawable => omit(drawable, 'type'))\n        );\n\n        if (drawablesString !== sessionDrawableString) {\n          const drawableArray = nextProps.session.drawables;\n\n          this.setState({\n            drawables: drawableArray.map(drawable =>\n              factory(drawable.type, drawable)\n            )\n          });\n        }\n\n        const currentTexts = TextEntry.all.map(text => ({\n          ...text,\n          ...(TextEntry[`text_${text.id}`] &&\n            TextEntry[`text_${text.id}`].attrs),\n          value:\n            TextEntry[`textarea_${text.id}`] &&\n            TextEntry[`textarea_${text.id}`].value\n        }));\n\n        if (!isEqual(currentTexts, nextProps.session.texts)) {\n          TextEntry.setAll(nextProps.session.texts || []);\n        }\n      }\n    } else {\n      this.handleSessionChange();\n    }\n  }\n\n  handleSessionChange = () => {\n    const { onSessionChange, session, TextEntry } = this.props;\n    const { drawables } = this.state;\n\n    const newSession = {\n      drawables: drawables.map(d => d.toJson()),\n      texts: TextEntry.all.map(text => ({\n        ...text,\n        ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),\n        value:\n          TextEntry[`textarea_${text.id}`] &&\n          TextEntry[`textarea_${text.id}`].value\n      }))\n    };\n\n    if (!isEqual(newSession, session)) {\n      onSessionChange({\n        ...session,\n        ...newSession\n      });\n    }\n  };\n\n  onMouseOverElement = () => this.setState({ isOver: true });\n\n  onMouseOutElement = () => this.setState({ isOver: false });\n\n  handleMouseDown = e => {\n    const { newDrawable, textIsSelected } = this.state;\n    const { toolActive, fillColor, outlineColor, scale } = this.props;\n\n    if (newDrawable.length === 0 && !textIsSelected) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const newDrawable = factory(toolActive.type, {\n        startx: x / scale,\n        starty: y / scale,\n        fillColor,\n        outlineColor,\n        createdAt: new Date()\n      });\n\n      this.setState({\n        newDrawable: [newDrawable]\n      });\n    }\n  };\n\n  handleMouseUp = e => {\n    const { newDrawable, drawables } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const drawableToAdd = newDrawable[0];\n\n      drawableToAdd.registerMovement(x / scale, y / scale);\n      drawables.push(drawableToAdd);\n\n      this.setState(\n        {\n          newDrawable: [],\n          drawables\n        },\n        this.handleSessionChange.bind(this, drawableToAdd)\n      );\n    }\n  };\n\n  handleMouseMove = e => {\n    const { newDrawable } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const updatedNewDrawable = newDrawable[0];\n\n      updatedNewDrawable.registerMovement(x / scale, y / scale);\n\n      this.setState({\n        newDrawable: [updatedNewDrawable]\n      });\n    }\n  };\n\n  handleUndo = () => {\n    const { drawables } = this.state;\n    const { TextEntry } = this.props;\n\n    const newDrawables = [...drawables];\n    const allData = [...drawables, ...TextEntry.all];\n\n    allData.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));\n    const lastElement = allData[allData.length - 1];\n\n    if (lastElement && lastElement.type === 'text-entry') {\n      TextEntry.all.pop();\n      this.setState({ updatedAt: new Date() }, this.handleSessionChange);\n    } else {\n      newDrawables.pop();\n      this.setState({ drawables: newDrawables }, this.handleSessionChange);\n    }\n  };\n\n  handleClearAll = () => {\n    const { TextEntry } = this.props;\n\n    TextEntry.all = [];\n    this.setState(\n      { drawables: [], updatedAt: new Date() },\n      this.handleSessionChange\n    );\n  };\n\n  toggleTextSelected = textIsSelected => this.setState({ textIsSelected });\n\n  render() {\n    const {\n      classes,\n      disabled,\n      drawableDimensions,\n      fillColor,\n      imageDimensions,\n      imageUrl,\n      paintColor,\n      outlineColor,\n      TextEntry,\n      backgroundImageEnabled = true,\n      toolActive: { type },\n      scale\n    } = this.props;\n    const { isOver, newDrawable } = this.state;\n\n    const draggable = type === 'Select';\n    const paint = type === 'PaintBucket';\n    const drawables = [...this.state.drawables, ...this.state.newDrawable];\n\n    const drawableProps = {\n      draggable: draggable && !disabled,\n      disabled,\n      paint,\n      fillColor,\n      forceUpdate: () => this.setState({ updatedAt: new Date() }),\n      paintColor,\n      outlineColor,\n      toggleTextSelected: this.toggleTextSelected,\n      handleSessionChange: this.handleSessionChange,\n      stage: this.stage,\n      onMouseOverElement: this.onMouseOverElement,\n      onMouseOutElement: this.onMouseOutElement,\n      scale\n    };\n\n    let listeners = {};\n\n    if (!disabled) {\n      listeners = {\n        onMouseUp: this.handleMouseUp,\n        onMouseMove: this.handleMouseMove\n      };\n\n      if (!draggable) {\n        listeners.onMouseDown = this.handleMouseDown;\n      }\n    }\n\n    const imageHeight = imageDimensions.height * scale;\n    const imageWidth = imageDimensions.width * scale;\n\n    return (\n      <div>\n        <div className={classes.undoControls}>\n          <Button disabled={disabled} onClick={this.handleUndo} label=\"Undo\" />\n          <Button disabled={disabled} onClick={this.handleClearAll} label=\"Clear all\" />\n        </div>\n        <div className={classes.base}>\n          {backgroundImageEnabled && imageUrl && (\n            <ImageBackground\n              dimensions={{height: imageHeight, width: imageWidth}}\n              url={imageUrl}/>\n          )}\n\n          {TextEntry.renderTextareas()}\n\n          <Stage\n            scaleX={scale}\n            scaleY={scale}\n            ref={ref => {\n              this.stage = ref;\n            }}\n            className={classnames(classes.stage, {\n              [classes.active]:\n                draggable &&\n                (isOver || (newDrawable && newDrawable.length === 1))\n            })}\n            height={drawableDimensions.height}\n            width={drawableDimensions.width}\n            {...listeners}\n          >\n            <Layer\n              ref={ref => {\n                this.layer = ref;\n              }}\n            >\n              {drawables.map((drawable, key) =>\n                drawable.render({ ...drawableProps, key })\n              )}\n              {/* Text Entry is a special case  */}\n              {TextEntry.render(drawableProps)}\n            </Layer>\n          </Stage>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n    width: '100%'\n  },\n  stage: {\n    left: 0,\n    position: 'absolute',\n    top: 0\n  },\n  active: {\n    cursor: 'pointer'\n  },\n  undoControls: {\n    float: 'right',\n    marginTop: -43,\n    width: 163\n  }\n});\n\nDrawableMain.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disabled: PropTypes.bool,\n  drawableDimensions: PropTypes.object.isRequired,\n  imageDimensions: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  paintColor: PropTypes.string.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  TextEntry: PropTypes.object.isRequired,\n  toolActive: PropTypes.object.isRequired,\n  session: PropTypes.object.isRequired,\n  backgroundImageEnabled: PropTypes.bool.isRequired,\n  scale: PropTypes.number.isRequired\n};\n\nexport default withStyles(styles)(DrawableMain);\n"],"file":"drawable-main.js"}

package/lib/drawing-response/index.js

@@ -61,6 +61,8 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
           prompt = _this$props$model.prompt,
           mode = _this$props$model.mode,
           teacherInstructions = _this$props$model.teacherInstructions,
+          _this$props$model$bac = _this$props$model.backgroundImageEnabled,
+          backgroundImageEnabled = _this$props$model$bac === void 0 ? true : _this$props$model$bac,
           session = _this$props.session,
           onSessionChange = _this$props.onSessionChange,
           classes = _this$props.classes;
@@ -86,6 +88,7 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
         isEvaluateMode: isEvaluateMode,
         imageDimensions: imageDimensions,
         imageUrl: imageUrl,
+        backgroundImageEnabled: backgroundImageEnabled,
         disabled: disabled
       }));
     }

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","session","onSessionChange","classes","errorMessage","isEvaluateMode","hidden","visible","error","message","React","Component","propTypes","PropTypes","object","isRequired","func","styles","fontSize"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;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,wBAYI,KAAKH,KAZT;AAAA,0CACEI,KADF;AAAA,UAEIC,QAFJ,qBAEIA,QAFJ;AAAA,UAGIC,eAHJ,qBAGIA,eAHJ;AAAA,UAIIC,QAJJ,qBAIIA,QAJJ;AAAA,UAKIC,MALJ,qBAKIA,MALJ;AAAA,UAMIC,IANJ,qBAMIA,IANJ;AAAA,UAOIC,mBAPJ,qBAOIA,mBAPJ;AAAA,UASEC,OATF,eASEA,OATF;AAAA,UAUEC,eAVF,eAUEA,eAVF;AAAA,UAWEC,OAXF,eAWEA,OAXF;AAaA,wBAAmC,KAAKZ,KAAxC;AAAA,UAAQE,QAAR,eAAQA,QAAR;AAAA,UAAkBW,YAAlB,eAAkBA,YAAlB;AACA,UAAMC,cAAc,GAAGN,IAAI,KAAK,UAAhC;AAEA,aAAON,QAAQ,gBACb,mEAAwBW,YAAxB,CADa,gBAGb,6CACGJ,mBAAmB,iBAClB,gCAAC,iBAAD,CAAO,QAAP,qBACE,gCAAC,qBAAD;AACE,QAAA,MAAM,EAAE;AACNM,UAAAA,MAAM,EAAE,2BADF;AAENC,UAAAA,OAAO,EAAE;AAFH;AADV,sBAME,gCAAC,uBAAD;AAAe,QAAA,MAAM,EAAEP;AAAvB,QANF,CADF,eASE,2CATF,CAFJ,eAeE,gCAAC,sBAAD;AAAY,QAAA,SAAS,EAAEG,OAAO,CAACL;AAA/B,sBACE,gCAAC,uBAAD;AAAe,QAAA,OAAO,EAAC,MAAvB;AAA8B,QAAA,MAAM,EAAEA;AAAtC,QADF,CAfF,eAmBE,gCAAC,qBAAD;AACE,QAAA,OAAO,EAAEG,OADX;AAEE,QAAA,eAAe,EAAEC,eAFnB;AAGE,QAAA,cAAc,EAAEG,cAHlB;AAIE,QAAA,eAAe,EAAET,eAJnB;AAKE,QAAA,QAAQ,EAAEC,QALZ;AAME,QAAA,QAAQ,EAAEF;AANZ,QAnBF,CAHF;AAgCD;;;WArDD,kCAAgCa,KAAhC,EAAuC;AACrC,aAAO;AAAEf,QAAAA,QAAQ,EAAE,IAAZ;AAAkBW,QAAAA,YAAY,EAAEI,KAAK,CAACC;AAAtC,OAAP;AACD;;;EAXoCC,kBAAMC,S;;AAiE7CtB,wBAAwB,CAACuB,SAAzB,GAAqC;AACnCT,EAAAA,OAAO,EAAEU,sBAAUC,MADgB;AAEnCpB,EAAAA,KAAK,EAAEmB,sBAAUC,MAAV,CAAiBC,UAFW;AAGnCb,EAAAA,eAAe,EAAEW,sBAAUG,IAAV,CAAeD,UAHG;AAInCd,EAAAA,OAAO,EAAEY,sBAAUC,MAAV,CAAiBC;AAJS,CAArC;;AAOA,IAAME,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBnB,IAAAA,MAAM,EAAE;AACNoB,MAAAA,QAAQ,EAAE;AADJ;AADY,GAAP;AAAA,CAAf;;eAMe,wBAAWD,MAAX,EAAmB5B,wBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\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: {\n        disabled,\n        imageDimensions,\n        imageUrl,\n        prompt,\n        mode,\n        teacherInstructions\n      },\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          <React.Fragment>\n            <Collapsible\n              labels={{\n                hidden: 'Show Teacher Instructions',\n                visible: 'Hide Teacher Instructions'\n              }}\n            >\n              <PreviewPrompt prompt={teacherInstructions} />\n            </Collapsible>\n            <br />\n          </React.Fragment>\n        )}\n\n        <Typography className={classes.prompt}>\n          <PreviewPrompt tagName=\"span\" prompt={prompt} />\n        </Typography>\n\n        <Container\n          session={session}\n          onSessionChange={onSessionChange}\n          isEvaluateMode={isEvaluateMode}\n          imageDimensions={imageDimensions}\n          imageUrl={imageUrl}\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 = () => ({\n  prompt: {\n    fontSize: 'inherit'\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","hidden","visible","error","message","React","Component","propTypes","PropTypes","object","isRequired","func","styles","fontSize"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;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,wBAaI,KAAKH,KAbT;AAAA,0CACEI,KADF;AAAA,UAEIC,QAFJ,qBAEIA,QAFJ;AAAA,UAGIC,eAHJ,qBAGIA,eAHJ;AAAA,UAIIC,QAJJ,qBAIIA,QAJJ;AAAA,UAKIC,MALJ,qBAKIA,MALJ;AAAA,UAMIC,IANJ,qBAMIA,IANJ;AAAA,UAOIC,mBAPJ,qBAOIA,mBAPJ;AAAA,oDAQIC,sBARJ;AAAA,UAQIA,sBARJ,sCAQ6B,IAR7B;AAAA,UAUEC,OAVF,eAUEA,OAVF;AAAA,UAWEC,eAXF,eAWEA,eAXF;AAAA,UAYEC,OAZF,eAYEA,OAZF;AAcA,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,iBAAD,CAAO,QAAP,qBACE,gCAAC,qBAAD;AACE,QAAA,MAAM,EAAE;AACNO,UAAAA,MAAM,EAAE,2BADF;AAENC,UAAAA,OAAO,EAAE;AAFH;AADV,sBAME,gCAAC,uBAAD;AAAe,QAAA,MAAM,EAAER;AAAvB,QANF,CADF,eASE,2CATF,CAFJ,eAeE,gCAAC,sBAAD;AAAY,QAAA,SAAS,EAAEI,OAAO,CAACN;AAA/B,sBACE,gCAAC,uBAAD;AAAe,QAAA,OAAO,EAAC,MAAvB;AAA8B,QAAA,MAAM,EAAEA;AAAtC,QADF,CAfF,eAmBE,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,QAnBF,CAHF;AAiCD;;;WAvDD,kCAAgCc,KAAhC,EAAuC;AACrC,aAAO;AAAEhB,QAAAA,QAAQ,EAAE,IAAZ;AAAkBY,QAAAA,YAAY,EAAEI,KAAK,CAACC;AAAtC,OAAP;AACD;;;EAXoCC,kBAAMC,S;;AAmE7CvB,wBAAwB,CAACwB,SAAzB,GAAqC;AACnCT,EAAAA,OAAO,EAAEU,sBAAUC,MADgB;AAEnCrB,EAAAA,KAAK,EAAEoB,sBAAUC,MAAV,CAAiBC,UAFW;AAGnCb,EAAAA,eAAe,EAAEW,sBAAUG,IAAV,CAAeD,UAHG;AAInCd,EAAAA,OAAO,EAAEY,sBAAUC,MAAV,CAAiBC;AAJS,CAArC;;AAOA,IAAME,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBpB,IAAAA,MAAM,EAAE;AACNqB,MAAAA,QAAQ,EAAE;AADJ;AADY,GAAP;AAAA,CAAf;;eAMe,wBAAWD,MAAX,EAAmB7B,wBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\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: {\n        disabled,\n        imageDimensions,\n        imageUrl,\n        prompt,\n        mode,\n        teacherInstructions,\n        backgroundImageEnabled = true\n      },\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          <React.Fragment>\n            <Collapsible\n              labels={{\n                hidden: 'Show Teacher Instructions',\n                visible: 'Hide Teacher Instructions'\n              }}\n            >\n              <PreviewPrompt prompt={teacherInstructions} />\n            </Collapsible>\n            <br />\n          </React.Fragment>\n        )}\n\n        <Typography className={classes.prompt}>\n          <PreviewPrompt tagName=\"span\" prompt={prompt} />\n        </Typography>\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 = () => ({\n  prompt: {\n    fontSize: 'inherit'\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": "3.7.3-next.667+c46e66a9f",
+  "version": "3.7.3-next.672+01e4d0147",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "c46e66a9fa7ee1a349cd20cb733907c5e38e3e57",
+  "gitHead": "01e4d014720f0b5414e0edba270248e914372eb4",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/drawing-response/container.jsx

@@ -29,7 +29,8 @@ export class Container extends Component {
     session: PropTypes.object.isRequired,
     onSessionChange: PropTypes.func.isRequired,
     imageDimensions: PropTypes.object.isRequired,
-    imageUrl: PropTypes.string.isRequired
+    imageUrl: PropTypes.string.isRequired,
+    backgroundImageEnabled: PropTypes.bool.isRequired
   };
 
   constructor(props) {
@@ -162,7 +163,8 @@ export class Container extends Component {
       imageUrl,
       imageDimensions,
       onSessionChange,
-      session
+      session,
+      backgroundImageEnabled
     } = this.props;
     const {
       drawableDimensions,
@@ -233,6 +235,7 @@ export class Container extends Component {
               imageDimensions={imageDimensions}
               toolActive={toolActive}
               TextEntry={TextEntry}
+              backgroundImageEnabled={backgroundImageEnabled}
             />
           </div>
         </div>

package/src/drawing-response/drawable-main.jsx

@@ -187,6 +187,7 @@ export class DrawableMain extends React.Component {
       paintColor,
       outlineColor,
       TextEntry,
+      backgroundImageEnabled = true,
       toolActive: { type },
       scale
     } = this.props;
@@ -235,10 +236,10 @@ export class DrawableMain extends React.Component {
           <Button disabled={disabled} onClick={this.handleClearAll} label="Clear all" />
         </div>
         <div className={classes.base}>
-          {imageUrl && (
+          {backgroundImageEnabled && imageUrl && (
             <ImageBackground
-              dimensions={{ height: imageHeight, width: imageWidth }}
-              url={imageUrl} />
+              dimensions={{height: imageHeight, width: imageWidth}}
+              url={imageUrl}/>
           )}
 
           {TextEntry.renderTextareas()}
@@ -309,6 +310,7 @@ DrawableMain.propTypes = {
   TextEntry: PropTypes.object.isRequired,
   toolActive: PropTypes.object.isRequired,
   session: PropTypes.object.isRequired,
+  backgroundImageEnabled: PropTypes.bool.isRequired,
   scale: PropTypes.number.isRequired
 };
 

package/src/drawing-response/index.jsx

@@ -27,7 +27,8 @@ class DrawingResponseComponent extends React.Component {
         imageUrl,
         prompt,
         mode,
-        teacherInstructions
+        teacherInstructions,
+        backgroundImageEnabled = true
       },
       session,
       onSessionChange,
@@ -64,6 +65,7 @@ class DrawingResponseComponent extends React.Component {
           isEvaluateMode={isEvaluateMode}
           imageDimensions={imageDimensions}
           imageUrl={imageUrl}
+          backgroundImageEnabled={backgroundImageEnabled}
           disabled={disabled}
         />
       </div>