@pie-element/drawing-response 4.3.4-next.8 → 4.3.4-next.90

package/configure/src/image-container.jsx

@@ -13,8 +13,8 @@ export class ImageContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      maxImageWidth: "100%",
-      maxImageHeight: "auto",
+      maxImageWidth: '100%',
+      maxImageHeight: 'auto',
       dragEnabled: true,
       dropzoneActive: false,
     };
@@ -131,7 +131,7 @@ export class ImageContainer extends Component {
     const y = e.clientY - bounds.top;
 
     const imageAspectRatio = dimensions.width / dimensions.height;
-    const fitsContainer = x <= maxImageWidth + 5 && (x / imageAspectRatio) <= maxImageHeight + 5;
+    const fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;
     const hasMinimumWidth = x > 150 && y > 150;
 
     if (fitsContainer && hasMinimumWidth && box) {
@@ -170,19 +170,12 @@ export class ImageContainer extends Component {
 
   render() {
     const { classes, imageUrl, imageDimensions } = this.props;
-    const {
-      dropzoneActive,
-      dragEnabled,
-      maxImageHeight,
-      maxImageWidth
-    } = this.state;
+    const { dropzoneActive, dragEnabled, maxImageHeight, maxImageWidth } = this.state;
 
     return (
       <div className={classes.base}>
         <div
-          className={`${classes.box} ${
-            dropzoneActive ? classes.boxActive : ''
-          }`}
+          className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
           {...(dragEnabled
             ? {
                 onDragExit: this.handleOnDragExit,
@@ -192,11 +185,7 @@ export class ImageContainer extends Component {
               }
             : {})}
         >
-          <div className={classes.toolbar}>
-            {this.renderUploadControl(
-              imageUrl ? 'Replace Image' : 'Upload Image'
-            )}
-          </div>
+          <div className={classes.toolbar}>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</div>
 
           <div
             ref={(ref) => {
@@ -217,7 +206,7 @@ export class ImageContainer extends Component {
                   style={{
                     width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
                     maxWidth: maxImageWidth,
-                    maxHeight: maxImageHeight
+                    maxHeight: maxImageHeight,
                   }}
                   alt=""
                 />

package/configure/src/index.js

@@ -3,7 +3,7 @@ import {
   DeleteImageEvent,
   InsertImageEvent,
   InsertSoundEvent,
-  DeleteSoundEvent
+  DeleteSoundEvent,
 } from '@pie-framework/pie-configure-events';
 
 import React from 'react';
@@ -43,7 +43,7 @@ export default class DrawableResponseConfigure extends HTMLElement {
       this._model.rubricEnabled = true;
       this.dispatchEvent(new ModelUpdatedEvent(this._model));
     }
-  }
+  };
 
   set model(s) {
     this._model = DrawableResponseConfigure.createDefaultModel(s, this._configuration);
@@ -105,12 +105,12 @@ export default class DrawableResponseConfigure extends HTMLElement {
       onConfigurationChanged: this.onConfigurationChanged,
       imageSupport: {
         add: this.insertImage,
-        delete: this.onDeleteImage
+        delete: this.onDeleteImage,
       },
       uploadSoundSupport: {
         add: this.insertSound.bind(this),
-        delete: this.onDeleteSound.bind(this)
-      }
+        delete: this.onDeleteSound.bind(this),
+      },
     });
     ReactDOM.render(element, this);
   }

package/configure/src/root.jsx

@@ -49,15 +49,8 @@ export class Root extends React.Component {
   };
 
   render() {
-    const {
-      classes,
-      configuration,
-      model,
-      imageSupport,
-      uploadSoundSupport,
-      onConfigurationChanged,
-      onModelChanged,
-    } = this.props;
+    const { classes, configuration, model, imageSupport, uploadSoundSupport, onConfigurationChanged, onModelChanged } =
+      this.props;
     const {
       backgroundImage = {},
       prompt = {},
@@ -67,12 +60,7 @@ export class Root extends React.Component {
       maxImageHeight = {},
       withRubric = {},
     } = configuration || {};
-    const {
-      teacherInstructionsEnabled,
-      promptEnabled,
-      spellCheckEnabled,
-      backgroundImageEnabled,
-    } = model || {};
+    const { teacherInstructionsEnabled, promptEnabled, spellCheckEnabled, backgroundImageEnabled } = model || {};
     const toolbarOpts = {};
 
     const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
@@ -99,15 +87,12 @@ export class Root extends React.Component {
               groups={{
                 Settings: {
                   backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),
-                  promptEnabled: prompt.settings && toggle(prompt.label)
+                  promptEnabled: prompt.settings && toggle(prompt.label),
                 },
                 Properties: {
-                  teacherInstructionsEnabled:
-                    teacherInstructions.settings &&
-                    toggle(teacherInstructions.label),
-                  spellCheckEnabled:
-                    spellCheck.settings && toggle(spellCheck.label),
-                  rubricEnabled: !withRubric?.forceEnabled && withRubric?.settings && toggle(withRubric?.label)
+                  teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+                  spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+                  rubricEnabled: !withRubric?.forceEnabled && withRubric?.settings && toggle(withRubric?.label),
                 },
               }}
             />
@@ -115,10 +100,7 @@ export class Root extends React.Component {
         >
           <div className={classes.regular}>
             {teacherInstructionsEnabled && (
-              <InputContainer
-                label={teacherInstructions.label}
-                className={classes.prompt}
-              >
+              <InputContainer label={teacherInstructions.label} className={classes.prompt}>
                 <EditableHtml
                   markup={model.teacherInstructions || ''}
                   onChange={this.onTeacherInstructionsChanged}
@@ -126,8 +108,8 @@ export class Root extends React.Component {
                   nonEmpty={false}
                   toolbarOpts={toolbarOpts}
                   spellCheck={spellCheckEnabled}
-                  maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth}
-                  maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight}
+                  maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
+                  maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
                   uploadSoundSupport={uploadSoundSupport}
                   languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
                 />

package/controller/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["prompt","imageUrl","imageDimensions","height","width"],"mappings":";;;;;;eAAe;AACbA,EAAAA,MAAM,EAAE,6BADK;AAEbC,EAAAA,QAAQ,EAAE,EAFG;AAGbC,EAAAA,eAAe,EAAE;AACfC,IAAAA,MAAM,EAAE,CADO;AAEfC,IAAAA,KAAK,EAAE;AAFQ;AAHJ,C","sourcesContent":["export default {\n  prompt: 'This is the question prompt',\n  imageUrl: '',\n  imageDimensions: {\n    height: 0,\n    width: 0\n  }\n};\n"],"file":"defaults.js"}
+{"version":3,"sources":["../src/defaults.js"],"names":["prompt","imageUrl","imageDimensions","height","width"],"mappings":";;;;;;eAAe;AACbA,EAAAA,MAAM,EAAE,6BADK;AAEbC,EAAAA,QAAQ,EAAE,EAFG;AAGbC,EAAAA,eAAe,EAAE;AACfC,IAAAA,MAAM,EAAE,CADO;AAEfC,IAAAA,KAAK,EAAE;AAFQ;AAHJ,C","sourcesContent":["export default {\n  prompt: 'This is the question prompt',\n  imageUrl: '',\n  imageDimensions: {\n    height: 0,\n    width: 0,\n  },\n};\n"],"file":"defaults.js"}

package/controller/lib/index.js.map

@@ -1 +1 @@
-{"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;AAAiB;AAARgB,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"}
+{"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,CAACC,QAAD;AAAA;AACvBC,IAAAA,aAAa,EAAE,IADQ;AAEvBC,IAAAA,0BAA0B,EAAE,IAFL;AAGvBC,IAAAA,0BAA0B,EAAE,IAHL;AAIvBC,IAAAA,sBAAsB,EAAE;AAJD,KAKpBJ,QALoB;AAAA,CAAlB;;;;AAQA,SAASK,KAAT,CAAeL,QAAf,EAAyBM,OAAzB,EAAkCC,GAAlC,EAAuC;AAC5C,MAAMC,kBAAkB,GAAGT,SAAS,CAACC,QAAD,CAApC;AACA,MAAQS,QAAR,GAAqFD,kBAArF,CAAQC,QAAR;AAAA,MAAkBC,eAAlB,GAAqFF,kBAArF,CAAkBE,eAAlB;AAAA,MAAmCC,MAAnC,GAAqFH,kBAArF,CAAmCG,MAAnC;AAAA,MAA2CV,aAA3C,GAAqFO,kBAArF,CAA2CP,aAA3C;AAAA,MAA0DG,sBAA1D,GAAqFI,kBAArF,CAA0DJ,sBAA1D;AAEA,SAAO,IAAIQ,OAAJ,CAAY,UAACC,OAAD,EAAa;AAC9B,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,GACtBM,kBAAkB,CAACU,mBADG,GAEtB,IAFJ;AAGD,KAJD,MAIO;AACLJ,MAAAA,GAAG,CAACI,mBAAJ,GAA0B,IAA1B;AACD;;AAEDL,IAAAA,OAAO,CAACC,GAAD,CAAP;AACD,GAnBM,CAAP;AAoBD;;AAEM,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAACd,KAAD,uEAAS,EAAT;AAAA,SAChC,IAAIO,OAAJ,CAAY,UAACC,OAAD,EAAa;AACvBA,IAAAA,OAAO,iCACFO,oBADE,GAEFf,KAFE,EAAP;AAID,GALD,CADgC;AAAA,CAA3B;;;;AAQA;AAAiB;AAARgB,OAAT,GAAsC;AAC3C,SAAO,IAAIT,OAAJ,CAAY,UAACC,OAAD,EAAa;AAC9Bf,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 { imageUrl, imageDimensions, prompt, promptEnabled, backgroundImageEnabled } = 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\n        ? normalizedQuestion.teacherInstructions\n        : 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

@@ -10,10 +10,10 @@ describe('controller', () => {
       imageUrl: '',
       imageDimensions: {
         height: 0,
-        width: 0
+        width: 0,
       },
       teacherInstructions: 'Teacher Instructions',
-      backgroundImageEnabled: true
+      backgroundImageEnabled: true,
     };
   });
 
@@ -49,7 +49,7 @@ describe('controller', () => {
       });
 
       it('gather mode promptEnabled: true', async () => {
-        result = await model(question, {}, { mode: 'gather'});
+        result = await model(question, {}, { mode: 'gather' });
 
         expect(result).toEqual({
           disabled: false,
@@ -58,12 +58,12 @@ describe('controller', () => {
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
           teacherInstructions: null,
-          backgroundImageEnabled: question.backgroundImageEnabled
+          backgroundImageEnabled: question.backgroundImageEnabled,
         });
       });
 
       it('gather mode promptEnabled: false', async () => {
-        result = await model({ ...question, promptEnabled: false }, {}, { mode: 'gather'});
+        result = await model({ ...question, promptEnabled: false }, {}, { mode: 'gather' });
 
         expect(result).toEqual({
           disabled: false,
@@ -72,13 +72,12 @@ describe('controller', () => {
           imageDimensions: question.imageDimensions,
           prompt: null,
           teacherInstructions: null,
-          backgroundImageEnabled: question.backgroundImageEnabled
+          backgroundImageEnabled: question.backgroundImageEnabled,
         });
       });
 
-
       it('view mode, student role', async () => {
-        result = await model(question, {}, { mode: 'view'});
+        result = await model(question, {}, { mode: 'view' });
 
         expect(result).toEqual({
           disabled: true,
@@ -87,12 +86,12 @@ describe('controller', () => {
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
           teacherInstructions: null,
-          backgroundImageEnabled: question.backgroundImageEnabled
+          backgroundImageEnabled: question.backgroundImageEnabled,
         });
       });
 
       it('view mode, instructor role and teacherInstructions enabled', async () => {
-        result = await model(question, {}, { mode: 'view', role: 'instructor'});
+        result = await model(question, {}, { mode: 'view', role: 'instructor' });
 
         expect(result).toEqual({
           disabled: true,
@@ -101,7 +100,7 @@ describe('controller', () => {
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
           teacherInstructions: question.teacherInstructions,
-          backgroundImageEnabled: question.backgroundImageEnabled
+          backgroundImageEnabled: question.backgroundImageEnabled,
         });
       });
 
@@ -109,7 +108,8 @@ describe('controller', () => {
         result = await model(
           { ...question, teacherInstructionsEnabled: false },
           {},
-          { mode: 'evaluate', role: 'instructor'});
+          { mode: 'evaluate', role: 'instructor' },
+        );
 
         expect(result).toEqual({
           disabled: true,
@@ -118,12 +118,12 @@ describe('controller', () => {
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
           teacherInstructions: null,
-          backgroundImageEnabled: question.backgroundImageEnabled
+          backgroundImageEnabled: question.backgroundImageEnabled,
         });
       });
 
       it('evaluate mode, student role', async () => {
-        result = await model(question, {}, { mode: 'evaluate'});
+        result = await model(question, {}, { mode: 'evaluate' });
 
         expect(result).toEqual({
           disabled: true,
@@ -132,12 +132,12 @@ describe('controller', () => {
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
           teacherInstructions: null,
-          backgroundImageEnabled: question.backgroundImageEnabled
+          backgroundImageEnabled: question.backgroundImageEnabled,
         });
       });
 
       it('evaluate mode, instructor role and teacherInstructions enabled', async () => {
-        result = await model(question, {}, { mode: 'evaluate', role: 'instructor'});
+        result = await model(question, {}, { mode: 'evaluate', role: 'instructor' });
 
         expect(result).toEqual({
           disabled: true,
@@ -146,7 +146,7 @@ describe('controller', () => {
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
           teacherInstructions: question.teacherInstructions,
-          backgroundImageEnabled: question.backgroundImageEnabled
+          backgroundImageEnabled: question.backgroundImageEnabled,
         });
       });
 
@@ -154,7 +154,8 @@ describe('controller', () => {
         result = await model(
           { ...question, teacherInstructionsEnabled: false },
           {},
-          { mode: 'view', role: 'instructor'});
+          { mode: 'view', role: 'instructor' },
+        );
 
         expect(result).toEqual({
           disabled: true,
@@ -163,7 +164,7 @@ describe('controller', () => {
           imageDimensions: question.imageDimensions,
           prompt: question.prompt,
           teacherInstructions: null,
-          backgroundImageEnabled: question.backgroundImageEnabled
+          backgroundImageEnabled: question.backgroundImageEnabled,
         });
       });
     });

package/controller/src/defaults.js

@@ -3,6 +3,6 @@ export default {
   imageUrl: '',
   imageDimensions: {
     height: 0,
-    width: 0
-  }
+    width: 0,
+  },
 };

package/controller/src/index.js

@@ -3,7 +3,7 @@ import defaults from './defaults';
 
 const log = debug('pie-elements:drawing-response:controller');
 
-export const normalize = question => ({
+export const normalize = (question) => ({
   promptEnabled: true,
   teacherInstructionsEnabled: true,
   studentInstructionsEnabled: true,
@@ -13,26 +13,22 @@ export const normalize = question => ({
 
 export function model(question, session, env) {
   const normalizedQuestion = normalize(question);
-  const {
-    imageUrl,
-    imageDimensions,
-    prompt,
-    promptEnabled,
-    backgroundImageEnabled
-  } = normalizedQuestion;
-
-  return new Promise(resolve => {
+  const { imageUrl, imageDimensions, prompt, promptEnabled, backgroundImageEnabled } = normalizedQuestion;
+
+  return new Promise((resolve) => {
     const out = {
       disabled: env.mode !== 'gather',
       mode: env.mode,
       imageDimensions,
       imageUrl,
       prompt: promptEnabled ? prompt : null,
-      backgroundImageEnabled
+      backgroundImageEnabled,
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
-      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;
+      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled
+        ? normalizedQuestion.teacherInstructions
+        : null;
     } else {
       out.teacherInstructions = null;
     }
@@ -42,20 +38,20 @@ export function model(question, session, env) {
 }
 
 export const createDefaultModel = (model = {}) =>
-  new Promise(resolve => {
+  new Promise((resolve) => {
     resolve({
       ...defaults,
       ...model,
-    })
+    });
   });
 
 export function outcome(/*config, session*/) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     log('outcome...');
     resolve({
       score: 0,
       completed: 'n/a',
-      note: 'Requires manual scoring'
+      note: 'Requires manual scoring',
     });
   });
 }

package/docs/config-schema.json.md

@@ -192,4 +192,4 @@ Indicates the label for the item that has to be displayed in the Settings Panel
 
 ### `forceEnabled` (boolean)
 
-Indicates the value for the toggle; if true, this property will not be visible in Settings Panel
+Indicates the value for the toggle; if true, this property will not be visible in Settings Panel

package/docs/demo/config.js

@@ -2,7 +2,7 @@ const { model } = require('./generate');
 
 module.exports = {
   elements: {
-    'drawing-response': '../..'
+    'drawing-response': '../..',
   },
-  models: [model('1', 'drawing-response')]
+  models: [model('1', 'drawing-response')],
 };

package/docs/demo/generate.js

@@ -8,7 +8,7 @@ exports.model = (id, element) => ({
   imageUrl: '',
   imageDimensions: {
     height: 0,
-    width: 0
+    width: 0,
   },
-  rubricEnabled: false
+  rubricEnabled: false,
 });

package/docs/demo/session.js

@@ -30,8 +30,8 @@ module.exports = [
         createdAt: '2020-01-21T11:03:51.257Z',
         fontSize: 16,
         textareaVisible: false,
-        transformerVisible: false
-      }
-    ]
-  }
+        transformerVisible: false,
+      },
+    ],
+  },
 ];

package/docs/pie-schema.json.md

@@ -154,4 +154,4 @@ the height of the section
 
 ### `width` (number, required)
 
-the width of the section
+the width of the section

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/button.jsx"],"names":["RawButton","classes","className","label","onClick","disabled","title","addButton","propTypes","PropTypes","object","isRequired","string","bool","oneOfType","func","defaultProps","styles","fontSize","marginLeft","minWidth","height","width","ButtonStyled"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,SAAZ,QAAYA,SAAZ;AAAA,MAAuBC,KAAvB,QAAuBA,KAAvB;AAAA,MAA8BC,OAA9B,QAA8BA,OAA9B;AAAA,MAAuCC,QAAvC,QAAuCA,QAAvC;AAAA,MAAiDC,KAAjD,QAAiDA,KAAjD;AAAA,sBAChB,gCAAC,kBAAD;AACE,IAAA,KAAK,EAAEA,KADT;AAEE,IAAA,OAAO,EAAEF,OAFX;AAGE,IAAA,QAAQ,EAAEC,QAHZ;AAIE,IAAA,SAAS,EAAE,4BAAWJ,OAAO,CAACM,SAAnB,EAA8BL,SAA9B,CAJb;AAKE,IAAA,IAAI,EAAC,OALP;AAME,IAAA,OAAO,EAAC,WANV;AAOE,IAAA,KAAK,EAAC;AAPR,KASGC,KATH,CADgB;AAAA,CAAlB;;AAcAH,SAAS,CAACQ,SAAV,GAAsB;AACpBP,EAAAA,OAAO,EAAEQ,sBAAUC,MAAV,CAAiBC,UADN;AAEpBT,EAAAA,SAAS,EAAEO,sBAAUG,MAFD;AAGpBP,EAAAA,QAAQ,EAAEI,sBAAUI,IAHA;AAIpBV,EAAAA,KAAK,EAAEM,sBAAUK,SAAV,CAAoB,CACzBL,sBAAUG,MADe,EAEzBH,sBAAUC,MAFe,CAApB,CAJa;AAQpBN,EAAAA,OAAO,EAAEK,sBAAUM,IARC;AASpBT,EAAAA,KAAK,EAAEG,sBAAUG;AATG,CAAtB;AAYAZ,SAAS,CAACgB,YAAV,GAAyB;AACvBd,EAAAA,SAAS,EAAE,EADY;AAEvBG,EAAAA,QAAQ,EAAE,KAFa;AAGvBF,EAAAA,KAAK,EAAE,KAHgB;AAIvBC,EAAAA,OAAO,EAAE,mBAAM,CAAE,CAJM;AAKvBE,EAAAA,KAAK,EAAE;AALgB,CAAzB;;AAQA,IAAMW,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBV,IAAAA,SAAS,EAAE;AACTW,MAAAA,QAAQ,EAAE,OADD;AAETC,MAAAA,UAAU,EAAE,CAFH;AAGTC,MAAAA,QAAQ,EAAE,EAHD;AAITC,MAAAA,MAAM,EAAE,EAJC;AAMT,gBAAU;AACR,iBAAS;AACPC,UAAAA,KAAK,EAAE,kBADA;AAEPD,UAAAA,MAAM,EAAE;AAFD;AADD;AAND;AADS,GAAP;AAAA,CAAf;;AAgBA,IAAME,YAAY,GAAG,wBAAWN,MAAX,EAAmBjB,SAAnB,CAArB;eAEeuB,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Button from '@material-ui/core/Button';\n\nconst RawButton = ({ classes, className, label, onClick, disabled, title }) => (\n  <Button\n    title={title}\n    onClick={onClick}\n    disabled={disabled}\n    className={classNames(classes.addButton, className)}\n    size=\"small\"\n    variant=\"contained\"\n    color=\"default\"\n  >\n    {label}\n  </Button>\n);\n\nRawButton.propTypes = {\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  label: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.object,\n  ]),\n  onClick: PropTypes.func,\n  title: PropTypes.string\n};\n\nRawButton.defaultProps = {\n  className: '',\n  disabled: false,\n  label: 'Add',\n  onClick: () => {},\n  title: ''\n};\n\nconst styles = () => ({\n  addButton: {\n    fontSize: '0.9em',\n    marginLeft: 8,\n    minWidth: 32,\n    height: 32,\n\n    '& span': {\n      '& svg': {\n        width: '1.3em !important',\n        height: '1.3em !important',\n      }\n    }\n  },\n});\n\nconst ButtonStyled = withStyles(styles)(RawButton);\n\nexport default ButtonStyled;\n"],"file":"button.js"}
+{"version":3,"sources":["../../src/drawing-response/button.jsx"],"names":["RawButton","classes","className","label","onClick","disabled","title","addButton","propTypes","PropTypes","object","isRequired","string","bool","oneOfType","func","defaultProps","styles","fontSize","marginLeft","minWidth","height","width","ButtonStyled"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,SAAZ,QAAYA,SAAZ;AAAA,MAAuBC,KAAvB,QAAuBA,KAAvB;AAAA,MAA8BC,OAA9B,QAA8BA,OAA9B;AAAA,MAAuCC,QAAvC,QAAuCA,QAAvC;AAAA,MAAiDC,KAAjD,QAAiDA,KAAjD;AAAA,sBAChB,gCAAC,kBAAD;AACE,IAAA,KAAK,EAAEA,KADT;AAEE,IAAA,OAAO,EAAEF,OAFX;AAGE,IAAA,QAAQ,EAAEC,QAHZ;AAIE,IAAA,SAAS,EAAE,4BAAWJ,OAAO,CAACM,SAAnB,EAA8BL,SAA9B,CAJb;AAKE,IAAA,IAAI,EAAC,OALP;AAME,IAAA,OAAO,EAAC,WANV;AAOE,IAAA,KAAK,EAAC;AAPR,KASGC,KATH,CADgB;AAAA,CAAlB;;AAcAH,SAAS,CAACQ,SAAV,GAAsB;AACpBP,EAAAA,OAAO,EAAEQ,sBAAUC,MAAV,CAAiBC,UADN;AAEpBT,EAAAA,SAAS,EAAEO,sBAAUG,MAFD;AAGpBP,EAAAA,QAAQ,EAAEI,sBAAUI,IAHA;AAIpBV,EAAAA,KAAK,EAAEM,sBAAUK,SAAV,CAAoB,CAACL,sBAAUG,MAAX,EAAmBH,sBAAUC,MAA7B,CAApB,CAJa;AAKpBN,EAAAA,OAAO,EAAEK,sBAAUM,IALC;AAMpBT,EAAAA,KAAK,EAAEG,sBAAUG;AANG,CAAtB;AASAZ,SAAS,CAACgB,YAAV,GAAyB;AACvBd,EAAAA,SAAS,EAAE,EADY;AAEvBG,EAAAA,QAAQ,EAAE,KAFa;AAGvBF,EAAAA,KAAK,EAAE,KAHgB;AAIvBC,EAAAA,OAAO,EAAE,mBAAM,CAAE,CAJM;AAKvBE,EAAAA,KAAK,EAAE;AALgB,CAAzB;;AAQA,IAAMW,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBV,IAAAA,SAAS,EAAE;AACTW,MAAAA,QAAQ,EAAE,OADD;AAETC,MAAAA,UAAU,EAAE,CAFH;AAGTC,MAAAA,QAAQ,EAAE,EAHD;AAITC,MAAAA,MAAM,EAAE,EAJC;AAMT,gBAAU;AACR,iBAAS;AACPC,UAAAA,KAAK,EAAE,kBADA;AAEPD,UAAAA,MAAM,EAAE;AAFD;AADD;AAND;AADS,GAAP;AAAA,CAAf;;AAgBA,IAAME,YAAY,GAAG,wBAAWN,MAAX,EAAmBjB,SAAnB,CAArB;eAEeuB,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Button from '@material-ui/core/Button';\n\nconst RawButton = ({ classes, className, label, onClick, disabled, title }) => (\n  <Button\n    title={title}\n    onClick={onClick}\n    disabled={disabled}\n    className={classNames(classes.addButton, className)}\n    size=\"small\"\n    variant=\"contained\"\n    color=\"default\"\n  >\n    {label}\n  </Button>\n);\n\nRawButton.propTypes = {\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  onClick: PropTypes.func,\n  title: PropTypes.string,\n};\n\nRawButton.defaultProps = {\n  className: '',\n  disabled: false,\n  label: 'Add',\n  onClick: () => {},\n  title: '',\n};\n\nconst styles = () => ({\n  addButton: {\n    fontSize: '0.9em',\n    marginLeft: 8,\n    minWidth: 32,\n    height: 32,\n\n    '& span': {\n      '& svg': {\n        width: '1.3em !important',\n        height: '1.3em !important',\n      },\n    },\n  },\n});\n\nconst ButtonStyled = withStyles(styles)(RawButton);\n\nexport default ButtonStyled;\n"],"file":"button.js"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/constants.js"],"names":["tools","type","label","icon"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE,CAAC;AACNC,IAAAA,IAAI,EAAE,QADA;AAENC,IAAAA,KAAK,EAAE,QAFD;AAGNC,IAAAA,IAAI,EAAE;AAHA,GAAD,EAIL;AACAF,IAAAA,IAAI,EAAE,kBADN;AAEAC,IAAAA,KAAK,EAAE,WAFP;AAGAC,IAAAA,IAAI,EAAE;AAHN,GAJK,EAQL;AACAF,IAAAA,IAAI,EAAE,cADN;AAEAC,IAAAA,KAAK,EAAE,MAFP;AAGAC,IAAAA,IAAI,EAAE;AAHN,GARK,EAYL;AACAF,IAAAA,IAAI,EAAE,mBADN;AAEAC,IAAAA,KAAK,EAAE,WAFP;AAGAC,IAAAA,IAAI,EAAE;AAHN,GAZK,EAgBL;AACAF,IAAAA,IAAI,EAAE,gBADN;AAEAC,IAAAA,KAAK,EAAE,QAFP;AAGAC,IAAAA,IAAI,EAAE;AAHN,GAhBK,EAoBL;AACAF,IAAAA,IAAI,EAAE,MADN;AAEAC,IAAAA,KAAK,EAAE,YAFP;AAGAC,IAAAA,IAAI,EAAE;AAHN,GApBK,EAwBL;AACA;AACA;AACA;AACA;AACA;AACAF,IAAAA,IAAI,EAAE,gBANN;AAOAC,IAAAA,KAAK,EAAE,QAPP;AAQAC,IAAAA,IAAI,EAAE;AARN,GAxBK;AADM,C","sourcesContent":["export default {\n  tools: [{\n    type: 'Select',\n    label: 'Select',\n    icon: 'mdiCursorDefault'\n  },{\n    type: 'FreePathDrawable',\n    label: 'Free Draw',\n    icon: 'mdiPencil'\n  },{\n    type: 'LineDrawable',\n    label: 'Line',\n    icon: 'mdiMinus'\n  },{\n    type: 'RectangleDrawable',\n    label: 'Rectangle',\n    icon: 'mdiRectangle'\n  },{\n    type: 'CircleDrawable',\n    label: 'Circle',\n    icon: 'mdiCircle'\n  },{\n    type: 'Text',\n    label: 'Text Entry',\n    icon: 'mdiFormatColorText'\n  },{\n    // ,{\n    //   type: 'PaintBucket',\n    //   label: 'Paint Bucket',\n    //   icon: 'mdiFormatColorFill'\n    // },\n    type: 'EraserDrawable',\n    label: 'Eraser',\n    icon: 'mdiEraser'\n  }]\n};\n"],"file":"constants.js"}
+{"version":3,"sources":["../../src/drawing-response/constants.js"],"names":["tools","type","label","icon"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE,CACL;AACEC,IAAAA,IAAI,EAAE,QADR;AAEEC,IAAAA,KAAK,EAAE,QAFT;AAGEC,IAAAA,IAAI,EAAE;AAHR,GADK,EAML;AACEF,IAAAA,IAAI,EAAE,kBADR;AAEEC,IAAAA,KAAK,EAAE,WAFT;AAGEC,IAAAA,IAAI,EAAE;AAHR,GANK,EAWL;AACEF,IAAAA,IAAI,EAAE,cADR;AAEEC,IAAAA,KAAK,EAAE,MAFT;AAGEC,IAAAA,IAAI,EAAE;AAHR,GAXK,EAgBL;AACEF,IAAAA,IAAI,EAAE,mBADR;AAEEC,IAAAA,KAAK,EAAE,WAFT;AAGEC,IAAAA,IAAI,EAAE;AAHR,GAhBK,EAqBL;AACEF,IAAAA,IAAI,EAAE,gBADR;AAEEC,IAAAA,KAAK,EAAE,QAFT;AAGEC,IAAAA,IAAI,EAAE;AAHR,GArBK,EA0BL;AACEF,IAAAA,IAAI,EAAE,MADR;AAEEC,IAAAA,KAAK,EAAE,YAFT;AAGEC,IAAAA,IAAI,EAAE;AAHR,GA1BK,EA+BL;AACE;AACA;AACA;AACA;AACA;AACAF,IAAAA,IAAI,EAAE,gBANR;AAOEC,IAAAA,KAAK,EAAE,QAPT;AAQEC,IAAAA,IAAI,EAAE;AARR,GA/BK;AADM,C","sourcesContent":["export default {\n  tools: [\n    {\n      type: 'Select',\n      label: 'Select',\n      icon: 'mdiCursorDefault',\n    },\n    {\n      type: 'FreePathDrawable',\n      label: 'Free Draw',\n      icon: 'mdiPencil',\n    },\n    {\n      type: 'LineDrawable',\n      label: 'Line',\n      icon: 'mdiMinus',\n    },\n    {\n      type: 'RectangleDrawable',\n      label: 'Rectangle',\n      icon: 'mdiRectangle',\n    },\n    {\n      type: 'CircleDrawable',\n      label: 'Circle',\n      icon: 'mdiCircle',\n    },\n    {\n      type: 'Text',\n      label: 'Text Entry',\n      icon: 'mdiFormatColorText',\n    },\n    {\n      // ,{\n      //   type: 'PaintBucket',\n      //   label: 'Paint Bucket',\n      //   icon: 'mdiFormatColorFill'\n      // },\n      type: 'EraserDrawable',\n      label: 'Eraser',\n      icon: 'mdiEraser',\n    },\n  ],\n};\n"],"file":"constants.js"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","checkExist","setInterval","drawable","getBoundingClientRect","setState","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","session","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","backgroundColor","minHeight","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","boxSizing","maxWidth","marginBottom"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;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,CAACC,MAAnB,GAA4B,KAAKL,KAAL,CAAWG,KAA3D;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEgD,OAAO,CAACO;AAAxB,SACG,CAAC5D,QAAD,iBACC,gCAAC,2BAAD;AACE,QAAA,SAAS,EAAES,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,QAFJ,eAiBE;AAAK,QAAA,SAAS,EAAEE,OAAO,CAACS;AAAxB,sBACE;AAAK,QAAA,SAAS,EAAET,OAAO,CAACU;AAAxB,SACG1E,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,eAiBE;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,CAjBF,CAjBF,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,CAH7B;AAIHG,MAAAA,eAAe,EAAE;AAJd,KAJkB;AAUvBhB,IAAAA,cAAc,EAAE;AACdiB,MAAAA,SAAS,EAAE,GADG;AAEdD,MAAAA,eAAe,EAAE;AAFH,KAVO;AAcvBpB,IAAAA,OAAO,EAAE;AACPsB,MAAAA,YAAY,EAAE,mBADP;AAEPC,MAAAA,mBAAmB,EAAE,KAFd;AAGPC,MAAAA,oBAAoB,EAAE,KAHf;AAIPC,MAAAA,OAAO,EAAE,cAJF;AAKPC,MAAAA,SAAS,EAAE,YALJ;AAMPC,MAAAA,QAAQ,EAAE,oBANH;AAMyB;AAChC,kBAAY;AACVC,QAAAA,YAAY,EAAE;AADJ;AAPL;AAdc,GAAL;AAAA,CAApB;;eA2Be,wBAAWf,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: 'light blue' },\n        { value: 'lightyellow', label: 'light yellow' },\n        ...ROGVAIV\n      ],\n      outlineColor: 'black',\n      outlineColorList: ROGVAIV,\n      paintColor: 'red',\n      paintColorList: ROGVAIV,\n      TextEntry\n    };\n  }\n\n  setDimensions() {\n    const checkExist = setInterval(() => {\n      try {\n        const { height, width } = this.drawable.getBoundingClientRect();\n        if (height !== 0 && width !== 0) {\n          this.setState({\n            drawableDimensions: {\n              height,\n              width\n            }\n          });\n        }\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.warn('setDimensions Error: ', e);\n      } finally {\n        clearInterval(checkExist);\n      }\n    }, 100);\n  }\n\n  componentDidMount() {\n    this.setDimensions();\n\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText\n        const zoom = target?.substring(\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.height * this.state.scale;\n\n    return (\n      <div className={classes.base}>\n        {!disabled &&\n          <DrawablePalette\n            fillColor={fillColor}\n            fillList={fillColorList}\n            outlineColor={outlineColor}\n            outlineList={outlineColorList}\n            paintColor={paintColor}\n            paintList={paintColorList}\n            onFillColorChange={color => this.handleColorChange('fill', color)}\n            onOutlineColorChange={color =>\n              this.handleColorChange('outline', color)\n            }\n            onPaintColorChange={color => this.handleColorChange('paint', color)}\n          />\n        }\n\n        <div className={classes.box}>\n          <div className={classes.toolbar}>\n            {TOOLS.map(tool => {\n              const { type, label, icon } = tool;\n\n              return (\n                <Button\n                  title={label}\n                  key={type}\n                  disabled={this.checkIfToolIsDisabled(type)}\n                  onClick={() => this.handleMakeToolActive(tool)}\n                  label={<Icon path={icon} />}\n                />\n              );\n            })}\n          </div>\n\n          <div\n            ref={drawable => {\n              this.drawable = drawable;\n            }}\n            className={classes.drawableHeight}\n            style={{ height: heightToUse, maxHeight: heightToUse }}\n          >\n            <DrawableMain\n              scale={this.state.scale}\n              session={session}\n              disabled={disabled}\n              onSessionChange={onSessionChange}\n              fillColor={fillColor}\n              outlineColor={outlineColor}\n              paintColor={paintColor}\n              imageUrl={imageUrl}\n              drawableDimensions={drawableDimensions}\n              imageDimensions={imageDimensions}\n              toolActive={toolActive}\n              TextEntry={TextEntry}\n              backgroundImageEnabled={backgroundImageEnabled}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  base: {\n    marginTop: theme.spacing.unit * 2\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n    marginTop: theme.spacing.unit * 2,\n    backgroundColor: '#ECEDF1'\n  },\n  drawableHeight: {\n    minHeight: 350,\n    backgroundColor: '#fff'\n  },\n  toolbar: {\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    padding: '12px 8px 4px',\n    boxSizing: 'border-box',\n    maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls\n    '& button': {\n      marginBottom: '8px'\n    }\n  }\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
+{"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","checkExist","setInterval","drawable","getBoundingClientRect","setState","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","session","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","backgroundColor","minHeight","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","boxSizing","maxWidth","marginBottom"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport constants from './constants';\nimport Button from './button';\nimport DrawablePalette from './drawable-palette';\nimport DrawableMain from './drawable-main';\nimport DrawableText from './drawable-text';\nimport Icon from './icon';\n\nconst { tools: TOOLS } = constants;\n\nconst ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({\n  value: c,\n  label: c,\n}));\n\nexport class Container extends Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    disabled: PropTypes.bool,\n    session: PropTypes.object.isRequired,\n    onSessionChange: PropTypes.func.isRequired,\n    imageDimensions: PropTypes.object.isRequired,\n    imageUrl: PropTypes.string.isRequired,\n    backgroundImageEnabled: PropTypes.bool.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    const TextEntry = new DrawableText();\n\n    this.state = {\n      scale: 1,\n      drawableDimensions: {\n        height: 0,\n        width: 0,\n      },\n      toolActive: TOOLS[0],\n      fillColor: 'white',\n      fillColorList: [\n        { value: 'transparent', label: 'no fill' },\n        { value: 'lightblue', label: 'light blue' },\n        { value: 'lightyellow', label: 'light yellow' },\n        ...ROGVAIV,\n      ],\n      outlineColor: 'black',\n      outlineColorList: ROGVAIV,\n      paintColor: 'red',\n      paintColorList: ROGVAIV,\n      TextEntry,\n    };\n  }\n\n  setDimensions() {\n    const checkExist = setInterval(() => {\n      try {\n        const { height, width } = this.drawable.getBoundingClientRect();\n        if (height !== 0 && width !== 0) {\n          this.setState({\n            drawableDimensions: {\n              height,\n              width,\n            },\n          });\n        }\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.warn('setDimensions Error: ', e);\n      } finally {\n        clearInterval(checkExist);\n      }\n    }, 100);\n  }\n\n  componentDidMount() {\n    this.setDimensions();\n\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    const { TextEntry } = this.state;\n\n    TextEntry.removeEventListeners();\n    this.observer?.disconnect();\n  }\n\n  handleMakeToolActive(tool) {\n    const { TextEntry } = this.state;\n    const { type } = tool;\n\n    if (type !== 'Text') {\n      this.setState({\n        toolActive: tool,\n      });\n    } else {\n      TextEntry.addNewTextEntry();\n      // Force update\n      this.setState({\n        updatedAt: new Date(),\n      });\n    }\n  }\n\n  checkIfToolIsDisabled = (type) => {\n    if (this.props.disabled) return true;\n\n    const { toolActive } = this.state;\n    // Text will never be disabled since on each \"Text Entry\" click a new text is added\n    if (type === 'Text') {\n      return false;\n    }\n    return type === toolActive.type;\n  };\n\n  handleColorChange(type, color) {\n    const cType = `${type}Color`;\n    this.setState({\n      [cType]: color,\n    });\n  }\n\n  render() {\n    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled } =\n      this.props;\n    const {\n      drawableDimensions,\n      toolActive,\n      fillColor,\n      fillColorList,\n      outlineColor,\n      outlineColorList,\n      paintColor,\n      paintColorList,\n      TextEntry,\n    } = this.state;\n\n    const heightToUse = drawableDimensions.height * this.state.scale;\n\n    return (\n      <div className={classes.base}>\n        {!disabled && (\n          <DrawablePalette\n            fillColor={fillColor}\n            fillList={fillColorList}\n            outlineColor={outlineColor}\n            outlineList={outlineColorList}\n            paintColor={paintColor}\n            paintList={paintColorList}\n            onFillColorChange={(color) => this.handleColorChange('fill', color)}\n            onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n            onPaintColorChange={(color) => this.handleColorChange('paint', color)}\n          />\n        )}\n\n        <div className={classes.box}>\n          <div className={classes.toolbar}>\n            {TOOLS.map((tool) => {\n              const { type, label, icon } = tool;\n\n              return (\n                <Button\n                  title={label}\n                  key={type}\n                  disabled={this.checkIfToolIsDisabled(type)}\n                  onClick={() => this.handleMakeToolActive(tool)}\n                  label={<Icon path={icon} />}\n                />\n              );\n            })}\n          </div>\n\n          <div\n            ref={(drawable) => {\n              this.drawable = drawable;\n            }}\n            className={classes.drawableHeight}\n            style={{ height: heightToUse, maxHeight: heightToUse }}\n          >\n            <DrawableMain\n              scale={this.state.scale}\n              session={session}\n              disabled={disabled}\n              onSessionChange={onSessionChange}\n              fillColor={fillColor}\n              outlineColor={outlineColor}\n              paintColor={paintColor}\n              imageUrl={imageUrl}\n              drawableDimensions={drawableDimensions}\n              imageDimensions={imageDimensions}\n              toolActive={toolActive}\n              TextEntry={TextEntry}\n              backgroundImageEnabled={backgroundImageEnabled}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n    marginTop: theme.spacing.unit * 2,\n    backgroundColor: '#ECEDF1',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    backgroundColor: '#fff',\n  },\n  toolbar: {\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    padding: '12px 8px 4px',\n    boxSizing: 'border-box',\n    maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls\n    '& button': {\n      marginBottom: '8px',\n    },\n  },\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-image.jsx"],"names":["DrawableImage","classes","url","dimensions","height","width","imageContainer","image","maxWidth","maxHeight","styles","alignItems","display","justifyContent","position","propTypes","PropTypes","object","isRequired","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,GAAZ,QAAYA,GAAZ;AAAA,6BAAiBC,UAAjB;AAAA,MAA+BC,MAA/B,mBAA+BA,MAA/B;AAAA,MAAuCC,KAAvC,mBAAuCA,KAAvC;AAAA,sBACpB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE;AACE,IAAA,GAAG,EAAC,wBADN;AAEE,IAAA,SAAS,EAAEL,OAAO,CAACM,KAFrB;AAGE,IAAA,GAAG,EAAEL,GAHP;AAIE,IAAA,KAAK,EAAE;AACLE,MAAAA,MAAM,EAANA,MADK;AAELI,MAAAA,QAAQ,EAAEH,KAFL;AAGLI,MAAAA,SAAS,EAAE,GAHN;AAILJ,MAAAA,KAAK,EAALA;AAJK;AAJT,IADF,CADoB;AAAA,CAAtB;;AAgBA,IAAMK,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBH,IAAAA,KAAK,EAAE;AACLI,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KADa;AAMpBP,IAAAA,cAAc,EAAE;AACdQ,MAAAA,QAAQ,EAAE,UADI;AAEdT,MAAAA,KAAK,EAAE;AAFO;AANI,GAAP;AAAA,CAAf;;AAYAL,aAAa,CAACe,SAAd,GAA0B;AACxBd,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADF;AAExBf,EAAAA,UAAU,EAAEa,sBAAUC,MAAV,CAAiBC,UAFL;AAGxBhB,EAAAA,GAAG,EAACc,sBAAUG,MAAV,CAAiBD;AAHG,CAA1B;;eAMe,wBAAWR,MAAX,EAAmBV,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DrawableImage = ({ classes, url, dimensions: { height, width } }) => (\n  <div className={classes.imageContainer}>\n    <img\n      alt=\"drawing-response-image\"\n      className={classes.image}\n      src={url}\n      style={{\n        height,\n        maxWidth: width,\n        maxHeight: 350,\n        width,\n      }}\n    />\n  </div>\n);\n\nconst styles = () => ({\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content'\n  }\n});\n\nDrawableImage.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  url:PropTypes.string.isRequired\n};\n\nexport default withStyles(styles)(DrawableImage);\n"],"file":"drawable-image.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-image.jsx"],"names":["DrawableImage","classes","url","dimensions","height","width","imageContainer","image","maxWidth","maxHeight","styles","alignItems","display","justifyContent","position","propTypes","PropTypes","object","isRequired","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,GAAZ,QAAYA,GAAZ;AAAA,6BAAiBC,UAAjB;AAAA,MAA+BC,MAA/B,mBAA+BA,MAA/B;AAAA,MAAuCC,KAAvC,mBAAuCA,KAAvC;AAAA,sBACpB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE;AACE,IAAA,GAAG,EAAC,wBADN;AAEE,IAAA,SAAS,EAAEL,OAAO,CAACM,KAFrB;AAGE,IAAA,GAAG,EAAEL,GAHP;AAIE,IAAA,KAAK,EAAE;AACLE,MAAAA,MAAM,EAANA,MADK;AAELI,MAAAA,QAAQ,EAAEH,KAFL;AAGLI,MAAAA,SAAS,EAAE,GAHN;AAILJ,MAAAA,KAAK,EAALA;AAJK;AAJT,IADF,CADoB;AAAA,CAAtB;;AAgBA,IAAMK,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBH,IAAAA,KAAK,EAAE;AACLI,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KADa;AAMpBP,IAAAA,cAAc,EAAE;AACdQ,MAAAA,QAAQ,EAAE,UADI;AAEdT,MAAAA,KAAK,EAAE;AAFO;AANI,GAAP;AAAA,CAAf;;AAYAL,aAAa,CAACe,SAAd,GAA0B;AACxBd,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADF;AAExBf,EAAAA,UAAU,EAAEa,sBAAUC,MAAV,CAAiBC,UAFL;AAGxBhB,EAAAA,GAAG,EAAEc,sBAAUG,MAAV,CAAiBD;AAHE,CAA1B;;eAMe,wBAAWR,MAAX,EAAmBV,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DrawableImage = ({ classes, url, dimensions: { height, width } }) => (\n  <div className={classes.imageContainer}>\n    <img\n      alt=\"drawing-response-image\"\n      className={classes.image}\n      src={url}\n      style={{\n        height,\n        maxWidth: width,\n        maxHeight: 350,\n        width,\n      }}\n    />\n  </div>\n);\n\nconst styles = () => ({\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n});\n\nDrawableImage.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  url: PropTypes.string.isRequired,\n};\n\nexport default withStyles(styles)(DrawableImage);\n"],"file":"drawable-image.js"}

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

@@ -370,6 +370,7 @@ var styles = function styles() {
     stage: {
       left: 0,
       position: 'absolute',
+      touchAction: 'none',
       top: 0
     },
     active: {