@pie-element/drawing-response 3.7.3-next.135 → 3.7.3-next.1357

package/lib/drawing-response/index.js

@@ -31,7 +31,7 @@ var _container = _interopRequireDefault(require("./container"));
 
 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 DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(DrawingResponseComponent, _React$Component);
@@ -61,6 +61,8 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
           prompt = _this$props$model.prompt,
           mode = _this$props$model.mode,
           teacherInstructions = _this$props$model.teacherInstructions,
+          _this$props$model$bac = _this$props$model.backgroundImageEnabled,
+          backgroundImageEnabled = _this$props$model$bac === void 0 ? true : _this$props$model$bac,
           session = _this$props.session,
           onSessionChange = _this$props.onSessionChange,
           classes = _this$props.classes;
@@ -73,22 +75,20 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: teacherInstructions
       })), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.prompt
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        dangerouslySetInnerHTML: {
-          __html: prompt
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        tagName: "span",
+        prompt: prompt
       })), /*#__PURE__*/_react["default"].createElement(_container["default"], {
         session: session,
         onSessionChange: onSessionChange,
         isEvaluateMode: isEvaluateMode,
         imageDimensions: imageDimensions,
         imageUrl: imageUrl,
+        backgroundImageEnabled: backgroundImageEnabled,
         disabled: disabled
       }));
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/index.jsx"],"names":["DrawingResponseComponent","props","state","showCorrect","hasError","model","disabled","imageDimensions","imageUrl","prompt","mode","teacherInstructions","session","onSessionChange","classes","errorMessage","isEvaluateMode","hidden","visible","__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.3-next.135+4af016191",
+  "version": "3.7.3-next.1357+42d700e42",
   "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.9",
+    "@pie-lib/math-rendering": "^2.5.0",
+    "@pie-lib/render-ui": "^4.13.6",
     "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": "4af016191b4e3b79b27fec8365a0e1189e91c4d3",
+  "gitHead": "42d700e42127ea8ccd3e7b4f069d918abb490f15",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

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

@@ -132,87 +132,92 @@ exports[`Container snapshot renders 1`] = `
   />
   <div>
     <div>
-      <div>
-        <WithStyles(RawButton)
-          disabled={true}
-          key="Select"
-          label={
-            <IconWrapper
-              path="mdiCursorDefault"
-            />
-          }
-          onClick={[Function]}
-          title="Select"
-        />
-        <WithStyles(RawButton)
-          disabled={false}
-          key="FreePathDrawable"
-          label={
-            <IconWrapper
-              path="mdiPencil"
-            />
-          }
-          onClick={[Function]}
-          title="Free Draw"
-        />
-        <WithStyles(RawButton)
-          disabled={false}
-          key="LineDrawable"
-          label={
-            <IconWrapper
-              path="mdiMinus"
-            />
-          }
-          onClick={[Function]}
-          title="Line"
-        />
-        <WithStyles(RawButton)
-          disabled={false}
-          key="RectangleDrawable"
-          label={
-            <IconWrapper
-              path="mdiRectangle"
-            />
-          }
-          onClick={[Function]}
-          title="Rectangle"
-        />
-        <WithStyles(RawButton)
-          disabled={false}
-          key="CircleDrawable"
-          label={
-            <IconWrapper
-              path="mdiCircle"
-            />
-          }
-          onClick={[Function]}
-          title="Circle"
-        />
-        <WithStyles(RawButton)
-          disabled={false}
-          key="Text"
-          label={
-            <IconWrapper
-              path="mdiFormatColorText"
-            />
-          }
-          onClick={[Function]}
-          title="Text Entry"
-        />
-        <WithStyles(RawButton)
-          disabled={false}
-          key="EraserDrawable"
-          label={
-            <IconWrapper
-              path="mdiEraser"
-            />
-          }
-          onClick={[Function]}
-          title="Eraser"
-        />
-      </div>
+      <WithStyles(RawButton)
+        disabled={true}
+        key="Select"
+        label={
+          <IconWrapper
+            path="mdiCursorDefault"
+          />
+        }
+        onClick={[Function]}
+        title="Select"
+      />
+      <WithStyles(RawButton)
+        disabled={false}
+        key="FreePathDrawable"
+        label={
+          <IconWrapper
+            path="mdiPencil"
+          />
+        }
+        onClick={[Function]}
+        title="Free Draw"
+      />
+      <WithStyles(RawButton)
+        disabled={false}
+        key="LineDrawable"
+        label={
+          <IconWrapper
+            path="mdiMinus"
+          />
+        }
+        onClick={[Function]}
+        title="Line"
+      />
+      <WithStyles(RawButton)
+        disabled={false}
+        key="RectangleDrawable"
+        label={
+          <IconWrapper
+            path="mdiRectangle"
+          />
+        }
+        onClick={[Function]}
+        title="Rectangle"
+      />
+      <WithStyles(RawButton)
+        disabled={false}
+        key="CircleDrawable"
+        label={
+          <IconWrapper
+            path="mdiCircle"
+          />
+        }
+        onClick={[Function]}
+        title="Circle"
+      />
+      <WithStyles(RawButton)
+        disabled={false}
+        key="Text"
+        label={
+          <IconWrapper
+            path="mdiFormatColorText"
+          />
+        }
+        onClick={[Function]}
+        title="Text Entry"
+      />
+      <WithStyles(RawButton)
+        disabled={false}
+        key="EraserDrawable"
+        label={
+          <IconWrapper
+            path="mdiEraser"
+          />
+        }
+        onClick={[Function]}
+        title="Eraser"
+      />
     </div>
-    <div>
+    <div
+      style={
+        Object {
+          "height": 0,
+          "maxHeight": 0,
+        }
+      }
+    >
       <WithStyles(DrawableMain)
         TextEntry={
           TextDrawable {
@@ -240,6 +245,7 @@ exports[`Container snapshot renders 1`] = `
         onSessionChange={[MockFunction]}
         outlineColor="black"
         paintColor="red"
+        scale={1}
         session={Object {}}
         toolActive={
           Object {
@@ -256,217 +262,94 @@ 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>
-        <WithStyles(RawButton)
-          disabled={true}
-          key="Select"
-          label={
-            <IconWrapper
-              path="mdiCursorDefault"
-            />
-          }
-          onClick={[Function]}
-          title="Select"
-        />
-        <WithStyles(RawButton)
-          disabled={true}
-          key="FreePathDrawable"
-          label={
-            <IconWrapper
-              path="mdiPencil"
-            />
-          }
-          onClick={[Function]}
-          title="Free Draw"
-        />
-        <WithStyles(RawButton)
-          disabled={true}
-          key="LineDrawable"
-          label={
-            <IconWrapper
-              path="mdiMinus"
-            />
-          }
-          onClick={[Function]}
-          title="Line"
-        />
-        <WithStyles(RawButton)
-          disabled={true}
-          key="RectangleDrawable"
-          label={
-            <IconWrapper
-              path="mdiRectangle"
-            />
-          }
-          onClick={[Function]}
-          title="Rectangle"
-        />
-        <WithStyles(RawButton)
-          disabled={true}
-          key="CircleDrawable"
-          label={
-            <IconWrapper
-              path="mdiCircle"
-            />
-          }
-          onClick={[Function]}
-          title="Circle"
-        />
-        <WithStyles(RawButton)
-          disabled={true}
-          key="Text"
-          label={
-            <IconWrapper
-              path="mdiFormatColorText"
-            />
-          }
-          onClick={[Function]}
-          title="Text Entry"
-        />
-        <WithStyles(RawButton)
-          disabled={true}
-          key="EraserDrawable"
-          label={
-            <IconWrapper
-              path="mdiEraser"
-            />
-          }
-          onClick={[Function]}
-          title="Eraser"
-        />
-      </div>
+      <WithStyles(RawButton)
+        disabled={true}
+        key="Select"
+        label={
+          <IconWrapper
+            path="mdiCursorDefault"
+          />
+        }
+        onClick={[Function]}
+        title="Select"
+      />
+      <WithStyles(RawButton)
+        disabled={true}
+        key="FreePathDrawable"
+        label={
+          <IconWrapper
+            path="mdiPencil"
+          />
+        }
+        onClick={[Function]}
+        title="Free Draw"
+      />
+      <WithStyles(RawButton)
+        disabled={true}
+        key="LineDrawable"
+        label={
+          <IconWrapper
+            path="mdiMinus"
+          />
+        }
+        onClick={[Function]}
+        title="Line"
+      />
+      <WithStyles(RawButton)
+        disabled={true}
+        key="RectangleDrawable"
+        label={
+          <IconWrapper
+            path="mdiRectangle"
+          />
+        }
+        onClick={[Function]}
+        title="Rectangle"
+      />
+      <WithStyles(RawButton)
+        disabled={true}
+        key="CircleDrawable"
+        label={
+          <IconWrapper
+            path="mdiCircle"
+          />
+        }
+        onClick={[Function]}
+        title="Circle"
+      />
+      <WithStyles(RawButton)
+        disabled={true}
+        key="Text"
+        label={
+          <IconWrapper
+            path="mdiFormatColorText"
+          />
+        }
+        onClick={[Function]}
+        title="Text Entry"
+      />
+      <WithStyles(RawButton)
+        disabled={true}
+        key="EraserDrawable"
+        label={
+          <IconWrapper
+            path="mdiEraser"
+          />
+        }
+        onClick={[Function]}
+        title="Eraser"
+      />
     </div>
-    <div>
+    <div
+      style={
+        Object {
+          "height": 0,
+          "maxHeight": 0,
+        }
+      }
+    >
       <WithStyles(DrawableMain)
         TextEntry={
           TextDrawable {
@@ -495,6 +378,7 @@ exports[`Container snapshot renders disabled 1`] = `
         onSessionChange={[MockFunction]}
         outlineColor="black"
         paintColor="red"
+        scale={1}
         session={Object {}}
         toolActive={
           Object {