@pie-element/drawing-response 3.7.2 → 3.7.3-next.1016

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","__html","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;AAAA,wBAaH,KAAKH,KAbF;AAAA,0CAELI,KAFK;AAAA,UAGHC,QAHG,qBAGHA,QAHG;AAAA,UAIHC,eAJG,qBAIHA,eAJG;AAAA,UAKHC,QALG,qBAKHA,QALG;AAAA,UAMHC,MANG,qBAMHA,MANG;AAAA,UAOHC,IAPG,qBAOHA,IAPG;AAAA,UAQHC,mBARG,qBAQHA,mBARG;AAAA,UAULC,OAVK,eAULA,OAVK;AAAA,UAWLC,eAXK,eAWLA,eAXK;AAAA,UAYLC,OAZK,eAYLA,OAZK;AAAA,wBAc4B,KAAKZ,KAdjC;AAAA,UAcCE,QAdD,eAcCA,QAdD;AAAA,UAcWW,YAdX,eAcWA,YAdX;AAeP,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;AAAK,QAAA,uBAAuB,EAAE;AAAEC,UAAAA,MAAM,EAAER;AAAV;AAA9B,QANF,CADF,eASE,2CATF,CAFJ,eAeE,gCAAC,sBAAD;AAAY,QAAA,SAAS,EAAEG,OAAO,CAACL;AAA/B,sBACE;AAAM,QAAA,uBAAuB,EAAE;AAAEU,UAAAA,MAAM,EAAEV;AAAV;AAA/B,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,kCAAgCc,KAAhC,EAAuC;AACrC,aAAO;AAAEhB,QAAAA,QAAQ,EAAE,IAAZ;AAAkBW,QAAAA,YAAY,EAAEK,KAAK,CAACC;AAAtC,OAAP;AACD;;;EAXoCC,kBAAMC,S;;AAiE7CvB,wBAAwB,CAACwB,SAAzB,GAAqC;AACnCV,EAAAA,OAAO,EAAEW,sBAAUC,MADgB;AAEnCrB,EAAAA,KAAK,EAAEoB,sBAAUC,MAAV,CAAiBC,UAFW;AAGnCd,EAAAA,eAAe,EAAEY,sBAAUG,IAAV,CAAeD,UAHG;AAInCf,EAAAA,OAAO,EAAEa,sBAAUC,MAAV,CAAiBC;AAJS,CAArC;;AAOA,IAAME,MAAM,GAAG,SAATA,MAAS;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 } 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              <div dangerouslySetInnerHTML={{ __html: teacherInstructions }} />\n            </Collapsible>\n            <br />\n          </React.Fragment>\n        )}\n\n        <Typography className={classes.prompt}>\n          <span dangerouslySetInnerHTML={{ __html: 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/lib/index.js

@@ -37,7 +37,7 @@ var _drawingResponse = _interopRequireDefault(require("./drawing-response"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var DrawingResponse = /*#__PURE__*/function (_HTMLElement) {
   (0, _inherits2["default"])(DrawingResponse, _HTMLElement);
@@ -80,6 +80,9 @@ var DrawingResponse = /*#__PURE__*/function (_HTMLElement) {
     }
   }, {
     key: "session",
+    get: function get() {
+      return this._session;
+    },
     set: function set(s) {
       this._session = s;
 

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["DrawingResponse","update","_session","drawables","texts","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","m","_model","ModelSetEvent","s","el","React","createElement","DrawingResponseComponent","model","session","onSessionChange","sessionChanged","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEqBA,e;;;;;;;;;;;;;;;uGAkBF,UAACC,MAAD,EAAY;AAC3B,YAAKC,QAAL,CAAcC,SAAd,GAA0BF,MAAM,CAACE,SAAjC;AACA,YAAKD,QAAL,CAAcE,KAAd,GAAsBH,MAAM,CAACG,KAA7B;;AAEA,YAAKC,aAAL,CACE,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,MAAKC,UAAL,EAApD,CADF;;AAIA,YAAKC,OAAL;AACD,K;;;;;;SA1BD,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKN,aAAL,CACE,IAAIQ,8BAAJ,CACE,KAAKN,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKG,MAHT,CADF;;AAOA,WAAKF,OAAL;AACD;;;WAED,sBAAa;AACX,aAAO,KAAKR,QAAL,KAAkB,CAAC,yBAAQ,KAAKA,QAAL,CAAcC,SAAtB,CAAD,IAAqC,CAAC,yBAAQ,KAAKD,QAAL,CAAcE,KAAtB,CAAxD,CAAP;AACD;;;SAaD,aAAYU,CAAZ,EAAe;AACb,WAAKZ,QAAL,GAAgBY,CAAhB;;AACA,WAAKJ,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKE,MAAL,IAAe,KAAKV,QAAxB,EAAkC;AAChC,YAAMa,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,2BAApB,EAA8C;AACvDC,UAAAA,KAAK,EAAE,KAAKP,MAD2C;AAEvDQ,UAAAA,OAAO,EAAE,KAAKlB,QAFyC;AAGvDmB,UAAAA,eAAe,EAAE,KAAKC;AAHiC,SAA9C,CAAX;;AAKAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,MAAX;AACD,SAFD;AAGD;AACF;;;kDAjD0CU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport isEmpty from 'lodash/isEmpty';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport DrawingResponseComponent from './drawing-response';\n\nexport default class DrawingResponse extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));\n  }\n\n  sessionChanged = (update) => {\n    this._session.drawables = update.drawables;\n    this._session.texts = update.texts;\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  };\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(DrawingResponseComponent, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.sessionChanged\n      });\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["DrawingResponse","update","_session","drawables","texts","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","m","_model","ModelSetEvent","s","el","React","createElement","DrawingResponseComponent","model","session","onSessionChange","sessionChanged","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEqBA,e;;;;;;;;;;;;;;;uGAkBF,UAACC,MAAD,EAAY;AAC3B,YAAKC,QAAL,CAAcC,SAAd,GAA0BF,MAAM,CAACE,SAAjC;AACA,YAAKD,QAAL,CAAcE,KAAd,GAAsBH,MAAM,CAACG,KAA7B;;AAEA,YAAKC,aAAL,CACE,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,MAAKC,UAAL,EAApD,CADF;;AAIA,YAAKC,OAAL;AACD,K;;;;;;SA1BD,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKN,aAAL,CACE,IAAIQ,8BAAJ,CACE,KAAKN,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKG,MAHT,CADF;;AAOA,WAAKF,OAAL;AACD;;;WAED,sBAAa;AACX,aAAO,KAAKR,QAAL,KAAkB,CAAC,yBAAQ,KAAKA,QAAL,CAAcC,SAAtB,CAAD,IAAqC,CAAC,yBAAQ,KAAKD,QAAL,CAAcE,KAAtB,CAAxD,CAAP;AACD;;;SAkBD,eAAc;AACZ,aAAO,KAAKF,QAAZ;AACD,K;SAPD,aAAYY,CAAZ,EAAe;AACb,WAAKZ,QAAL,GAAgBY,CAAhB;;AACA,WAAKJ,OAAL;AACD;;;WAMD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKE,MAAL,IAAe,KAAKV,QAAxB,EAAkC;AAChC,YAAMa,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,2BAApB,EAA8C;AACvDC,UAAAA,KAAK,EAAE,KAAKP,MAD2C;AAEvDQ,UAAAA,OAAO,EAAE,KAAKlB,QAFyC;AAGvDmB,UAAAA,eAAe,EAAE,KAAKC;AAHiC,SAA9C,CAAX;;AAMAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,MAAX;AACD,SAFD;AAGD;AACF;;;kDAtD0CU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport isEmpty from 'lodash/isEmpty';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport DrawingResponseComponent from './drawing-response';\n\nexport default class DrawingResponse extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));\n  }\n\n  sessionChanged = (update) => {\n    this._session.drawables = update.drawables;\n    this._session.texts = update.texts;\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  };\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(DrawingResponseComponent, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.sessionChanged\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "3.7.2",
+  "version": "3.7.3-next.1016+1dc291af4",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -11,8 +11,8 @@
     "@mdi/js": "^3.6.95",
     "@mdi/react": "^1.1.1",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/math-rendering": "^2.3.8",
-    "@pie-lib/render-ui": "^4.11.7",
+    "@pie-lib/math-rendering": "^2.4.3",
+    "@pie-lib/render-ui": "^4.12.9",
     "classnames": "^2.2.6",
     "enzyme-to-json": "^3.3.5",
     "konva": "^3.4.1",
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "c4ade45496a17fa2a49e6fe44f6bc500ea17580f",
+  "gitHead": "1dc291af490cf91cc86a6a7c8d0eb0fdf184232b",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap

@@ -212,7 +212,14 @@ exports[`Container snapshot renders 1`] = `
         />
       </div>
     </div>
-    <div>
+    <div
+      style={
+        Object {
+          "height": 0,
+          "maxHeight": 0,
+        }
+      }
+    >
       <WithStyles(DrawableMain)
         TextEntry={
           TextDrawable {
@@ -240,6 +247,7 @@ exports[`Container snapshot renders 1`] = `
         onSessionChange={[MockFunction]}
         outlineColor="black"
         paintColor="red"
+        scale={1}
         session={Object {}}
         toolActive={
           Object {
@@ -256,134 +264,6 @@ exports[`Container snapshot renders 1`] = `
 
 exports[`Container snapshot renders disabled 1`] = `
 <div>
-  <WithStyles(Palette)
-    fillColor="white"
-    fillList={
-      Array [
-        Object {
-          "label": "no fill",
-          "value": "transparent",
-        },
-        Object {
-          "label": "lightblue",
-          "value": "lightblue",
-        },
-        Object {
-          "label": "lightyellow",
-          "value": "lightyellow",
-        },
-        Object {
-          "label": "red",
-          "value": "red",
-        },
-        Object {
-          "label": "orange",
-          "value": "orange",
-        },
-        Object {
-          "label": "yellow",
-          "value": "yellow",
-        },
-        Object {
-          "label": "violet",
-          "value": "violet",
-        },
-        Object {
-          "label": "blue",
-          "value": "blue",
-        },
-        Object {
-          "label": "green",
-          "value": "green",
-        },
-        Object {
-          "label": "white",
-          "value": "white",
-        },
-        Object {
-          "label": "black",
-          "value": "black",
-        },
-      ]
-    }
-    onFillColorChange={[Function]}
-    onOutlineColorChange={[Function]}
-    onPaintColorChange={[Function]}
-    outlineColor="black"
-    outlineList={
-      Array [
-        Object {
-          "label": "red",
-          "value": "red",
-        },
-        Object {
-          "label": "orange",
-          "value": "orange",
-        },
-        Object {
-          "label": "yellow",
-          "value": "yellow",
-        },
-        Object {
-          "label": "violet",
-          "value": "violet",
-        },
-        Object {
-          "label": "blue",
-          "value": "blue",
-        },
-        Object {
-          "label": "green",
-          "value": "green",
-        },
-        Object {
-          "label": "white",
-          "value": "white",
-        },
-        Object {
-          "label": "black",
-          "value": "black",
-        },
-      ]
-    }
-    paintColor="red"
-    paintList={
-      Array [
-        Object {
-          "label": "red",
-          "value": "red",
-        },
-        Object {
-          "label": "orange",
-          "value": "orange",
-        },
-        Object {
-          "label": "yellow",
-          "value": "yellow",
-        },
-        Object {
-          "label": "violet",
-          "value": "violet",
-        },
-        Object {
-          "label": "blue",
-          "value": "blue",
-        },
-        Object {
-          "label": "green",
-          "value": "green",
-        },
-        Object {
-          "label": "white",
-          "value": "white",
-        },
-        Object {
-          "label": "black",
-          "value": "black",
-        },
-      ]
-    }
-  />
   <div>
     <div>
       <div>
@@ -466,7 +346,14 @@ exports[`Container snapshot renders disabled 1`] = `
         />
       </div>
     </div>
-    <div>
+    <div
+      style={
+        Object {
+          "height": 0,
+          "maxHeight": 0,
+        }
+      }
+    >
       <WithStyles(DrawableMain)
         TextEntry={
           TextDrawable {
@@ -495,6 +382,7 @@ exports[`Container snapshot renders disabled 1`] = `
         onSessionChange={[MockFunction]}
         outlineColor="black"
         paintColor="red"
+        scale={1}
         session={Object {}}
         toolActive={
           Object {

package/src/drawing-response/__tests__/__snapshots__/drawing-main.test.jsx.snap

@@ -26,7 +26,12 @@ exports[`DrawingResponse DrawableMain snapshot renders 1`] = `
   </div>
   <div>
     <WithStyles(DrawableImage)
-      dimensions={Object {}}
+      dimensions={
+        Object {
+          "height": NaN,
+          "width": NaN,
+        }
+      }
       url="url"
     />
     <ForwardRef
@@ -34,6 +39,8 @@ exports[`DrawingResponse DrawableMain snapshot renders 1`] = `
       height={350}
       onMouseMove={[Function]}
       onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
       width={353}
     >
       <Layer />
@@ -58,7 +65,12 @@ exports[`DrawingResponse DrawableMain snapshot renders disabled 1`] = `
   </div>
   <div>
     <WithStyles(DrawableImage)
-      dimensions={Object {}}
+      dimensions={
+        Object {
+          "height": NaN,
+          "width": NaN,
+        }
+      }
       url="url"
     />
     <ForwardRef
@@ -83,9 +95,13 @@ exports[`DrawingResponse DrawableText snapshot renders 1`] = `
     name="text_gcifqhhimf8k2d6g8hs"
     onClick={[Function]}
     onDblClick={[Function]}
+    onDblTap={[Function]}
     onDragEnd={[MockFunction]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
+    onTap={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
     onTransform={[Function]}
     onTransformEnd={[MockFunction]}
     text="Double click to edit this text. Press Enter to submit."
@@ -98,6 +114,8 @@ exports[`DrawingResponse DrawableText snapshot renders 1`] = `
     key="transformer_gcifqhhimf8k2d6g8hs"
     onMouseDown={[Function]}
     onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
     selectedShapeName="text_gcifqhhimf8k2d6g8hs"
   />
 </div>
@@ -127,9 +145,13 @@ exports[`DrawingResponse DrawableText snapshot when there is no value renders 1`
     name="text_gcifqhhimf8k2d6g8hs"
     onClick={[Function]}
     onDblClick={[Function]}
+    onDblTap={[Function]}
     onDragEnd={[MockFunction]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
+    onTap={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
     onTransform={[Function]}
     onTransformEnd={[MockFunction]}
     text="Double click to edit this text. Press Enter to submit."
@@ -142,6 +164,8 @@ exports[`DrawingResponse DrawableText snapshot when there is no value renders 1`
     key="transformer_gcifqhhimf8k2d6g8hs"
     onMouseDown={[Function]}
     onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
     selectedShapeName="text_gcifqhhimf8k2d6g8hs"
   />
 </div>

package/src/drawing-response/__tests__/container.test.jsx

@@ -1,5 +1,12 @@
 import { shallow } from 'enzyme';
 import React from 'react';
+
+global.MutationObserver = class {
+  constructor(callback) {}
+  disconnect() {}
+  observe(element, initObject) {}
+};
+
 import { Container } from '../container';
 
 beforeEach(() => {

package/src/drawing-response/__tests__/drawing-main.test.jsx

@@ -507,7 +507,8 @@ describe('DrawingResponse', () => {
         startx: 200,
         starty: 200,
         x: 300,
-        y: 300
+        y: 300,
+        scale: 1
       };
       wrapper = mkWrapper('DrawableText', props, 'div');
     });

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) {
@@ -37,6 +38,7 @@ export class Container extends Component {
     const TextEntry = new DrawableText();
 
     this.state = {
+      scale: 1,
       drawableDimensions: {
         height: 0,
         width: 0
@@ -80,12 +82,42 @@ export class Container extends Component {
 
   componentDidMount() {
     this.setDimensions();
+
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach(() => {
+        const target = document.getElementById('question-container')?.style?.cssText
+        const zoom = target?.substring(
+          target.indexOf('--pie-zoom') + 11,
+          target.lastIndexOf('%')
+        );
+        const zoomParsed = zoom?.replace(/\s/g, '');
+
+      if (zoomParsed) {
+          const newScale = parseFloat(zoomParsed) / 100;
+          if (newScale !== this.state.scale) {
+            this.setState({
+              scale: parseFloat(zoomParsed) / 100,
+            })
+          }
+        } else if (!zoomParsed && this.state.scale !== 1) {
+          this.setState({
+            scale: 1,
+          });
+        }
+      });
+    });
+
+    const target = document.getElementById('question-container');
+    if (target) {
+      this.observer.observe(target, { attributes : true, attributeFilter : ['style'] })
+    }
   }
 
   componentWillUnmount() {
     const { TextEntry } = this.state;
 
     TextEntry.removeEventListeners();
+    this.observer?.disconnect();
   }
 
   handleMakeToolActive(tool) {
@@ -131,7 +163,8 @@ export class Container extends Component {
       imageUrl,
       imageDimensions,
       onSessionChange,
-      session
+      session,
+      backgroundImageEnabled
     } = this.props;
     const {
       drawableDimensions,
@@ -145,21 +178,25 @@ export class Container extends Component {
       TextEntry
     } = this.state;
 
+    const heightToUse = drawableDimensions.height * this.state.scale;
+
     return (
       <div className={classes.base}>
-        <DrawablePalette
-          fillColor={fillColor}
-          fillList={fillColorList}
-          outlineColor={outlineColor}
-          outlineList={outlineColorList}
-          paintColor={paintColor}
-          paintList={paintColorList}
-          onFillColorChange={color => this.handleColorChange('fill', color)}
-          onOutlineColorChange={color =>
-            this.handleColorChange('outline', color)
-          }
-          onPaintColorChange={color => this.handleColorChange('paint', color)}
-        />
+        {!disabled &&
+          <DrawablePalette
+            fillColor={fillColor}
+            fillList={fillColorList}
+            outlineColor={outlineColor}
+            outlineList={outlineColorList}
+            paintColor={paintColor}
+            paintList={paintColorList}
+            onFillColorChange={color => this.handleColorChange('fill', color)}
+            onOutlineColorChange={color =>
+              this.handleColorChange('outline', color)
+            }
+            onPaintColorChange={color => this.handleColorChange('paint', color)}
+          />
+        }
 
         <div className={classes.box}>
           <div className={classes.toolbar}>
@@ -185,8 +222,10 @@ export class Container extends Component {
               this.drawable = drawable;
             }}
             className={classes.drawableHeight}
+            style={{ height: heightToUse, maxHeight: heightToUse }}
           >
             <DrawableMain
+              scale={this.state.scale}
               session={session}
               disabled={disabled}
               onSessionChange={onSessionChange}
@@ -198,6 +237,7 @@ export class Container extends Component {
               imageDimensions={imageDimensions}
               toolActive={toolActive}
               TextEntry={TextEntry}
+              backgroundImageEnabled={backgroundImageEnabled}
             />
           </div>
         </div>

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

@@ -5,6 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
 const DrawableImage = ({ classes, url, dimensions: { height, width } }) => (
   <div className={classes.imageContainer}>
     <img
+      alt="drawing-response-image"
       className={classes.image}
       src={url}
       style={{

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

@@ -89,14 +89,18 @@ export class DrawableMain extends React.Component {
   onMouseOutElement = () => this.setState({ isOver: false });
 
   handleMouseDown = e => {
+    // ONLY IF MOBILE?
+    document.body.style.overflow = 'hidden';
+
     const { newDrawable, textIsSelected } = this.state;
-    const { toolActive, fillColor, outlineColor } = this.props;
+    const { toolActive, fillColor, outlineColor, scale } = this.props;
 
     if (newDrawable.length === 0 && !textIsSelected) {
       const { x, y } = e.target.getStage().getPointerPosition();
+
       const newDrawable = factory(toolActive.type, {
-        startx: x,
-        starty: y,
+        startx: x / scale,
+        starty: y / scale,
         fillColor,
         outlineColor,
         createdAt: new Date()
@@ -109,13 +113,17 @@ export class DrawableMain extends React.Component {
   };
 
   handleMouseUp = e => {
+    // ONLY IF MOBILE?
+    document.body.style.overflow = 'initial';
+
     const { newDrawable, drawables } = this.state;
+    const { scale } = this.props;
 
     if (newDrawable.length === 1) {
       const { x, y } = e.target.getStage().getPointerPosition();
       const drawableToAdd = newDrawable[0];
 
-      drawableToAdd.registerMovement(x, y);
+      drawableToAdd.registerMovement(x / scale, y / scale);
       drawables.push(drawableToAdd);
 
       this.setState(
@@ -130,12 +138,13 @@ export class DrawableMain extends React.Component {
 
   handleMouseMove = e => {
     const { newDrawable } = this.state;
+    const { scale } = this.props;
 
     if (newDrawable.length === 1) {
       const { x, y } = e.target.getStage().getPointerPosition();
       const updatedNewDrawable = newDrawable[0];
 
-      updatedNewDrawable.registerMovement(x, y);
+      updatedNewDrawable.registerMovement(x / scale, y / scale);
 
       this.setState({
         newDrawable: [updatedNewDrawable]
@@ -185,7 +194,9 @@ export class DrawableMain extends React.Component {
       paintColor,
       outlineColor,
       TextEntry,
-      toolActive: { type }
+      backgroundImageEnabled = true,
+      toolActive: { type },
+      scale
     } = this.props;
     const { isOver, newDrawable } = this.state;
 
@@ -205,7 +216,8 @@ export class DrawableMain extends React.Component {
       handleSessionChange: this.handleSessionChange,
       stage: this.stage,
       onMouseOverElement: this.onMouseOverElement,
-      onMouseOutElement: this.onMouseOutElement
+      onMouseOutElement: this.onMouseOutElement,
+      scale
     };
 
     let listeners = {};
@@ -213,35 +225,45 @@ export class DrawableMain extends React.Component {
     if (!disabled) {
       listeners = {
         onMouseUp: this.handleMouseUp,
-        onMouseMove: this.handleMouseMove
+        onTouchEnd: this.handleMouseUp,
+        onMouseMove: this.handleMouseMove,
+        onTouchMove: this.handleMouseMove,
       };
 
       if (!draggable) {
         listeners.onMouseDown = this.handleMouseDown;
+        listeners.onTouchStart = this.handleMouseDown;
       }
     }
 
+    const imageHeight = imageDimensions?.height * scale;
+    const imageWidth = imageDimensions?.width * scale;
+
     return (
       <div>
         <div className={classes.undoControls}>
-          <Button disabled={disabled} onClick={this.handleUndo} label="Undo" />
-          <Button disabled={disabled} onClick={this.handleClearAll} label="Clear all" />
+          <Button disabled={disabled} onClick={this.handleUndo} label="Undo"/>
+          <Button disabled={disabled} onClick={this.handleClearAll} label="Clear all"/>
         </div>
         <div className={classes.base}>
-          {imageUrl && (
-            <ImageBackground dimensions={imageDimensions} url={imageUrl} />
+          {backgroundImageEnabled && imageUrl && (
+            <ImageBackground
+              dimensions={{ height: imageHeight, width: imageWidth }}
+              url={imageUrl}/>
           )}
 
           {TextEntry.renderTextareas()}
 
           <Stage
+            scaleX={scale}
+            scaleY={scale}
             ref={ref => {
               this.stage = ref;
             }}
             className={classnames(classes.stage, {
               [classes.active]:
-                draggable &&
-                (isOver || (newDrawable && newDrawable.length === 1))
+              draggable &&
+              (isOver || (newDrawable && newDrawable.length === 1))
             })}
             height={drawableDimensions.height}
             width={drawableDimensions.width}
@@ -297,7 +319,9 @@ DrawableMain.propTypes = {
   imageUrl: PropTypes.string.isRequired,
   TextEntry: PropTypes.object.isRequired,
   toolActive: PropTypes.object.isRequired,
-  session: PropTypes.object.isRequired
+  session: PropTypes.object.isRequired,
+  backgroundImageEnabled: PropTypes.bool.isRequired,
+  scale: PropTypes.number.isRequired
 };
 
 export default withStyles(styles)(DrawableMain);