@pie-element/drawing-response 7.4.1-next.42 → 7.4.1-next.45

package/controller/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","model","session","env","normalizedQuestion","imageUrl","imageDimensions","prompt","language","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,GAA+FD,kBAA/F,CAAQC,QAAR;AAAA,MAAkBC,eAAlB,GAA+FF,kBAA/F,CAAkBE,eAAlB;AAAA,MAAmCC,MAAnC,GAA+FH,kBAA/F,CAAmCG,MAAnC;AAAA,MAA2CV,aAA3C,GAA+FO,kBAA/F,CAA2CP,aAA3C;AAAA,MAA0DG,sBAA1D,GAA+FI,kBAA/F,CAA0DJ,sBAA1D;AAAA,MAAkFQ,QAAlF,GAA+FJ,kBAA/F,CAAkFI,QAAlF;AAEA,SAAO,IAAIC,OAAJ,CAAY,UAACC,OAAD,EAAa;AAC9B,QAAMC,GAAG,GAAG;AACVC,MAAAA,QAAQ,EAAET,GAAG,CAACU,IAAJ,KAAa,QADb;AAEVA,MAAAA,IAAI,EAAEV,GAAG,CAACU,IAFA;AAGVP,MAAAA,eAAe,EAAfA,eAHU;AAIVD,MAAAA,QAAQ,EAARA,QAJU;AAKVE,MAAAA,MAAM,EAAEV,aAAa,GAAGU,MAAH,GAAY,IALvB;AAMVP,MAAAA,sBAAsB,EAAtBA,sBANU;AAOVQ,MAAAA,QAAQ,EAARA;AAPU,KAAZ;;AAUA,QAAIL,GAAG,CAACW,IAAJ,KAAa,YAAb,KAA8BX,GAAG,CAACU,IAAJ,KAAa,MAAb,IAAuBV,GAAG,CAACU,IAAJ,KAAa,UAAlE,CAAJ,EAAmF;AACjFF,MAAAA,GAAG,CAACI,mBAAJ,GAA0BX,kBAAkB,CAACN,0BAAnB,GACtBM,kBAAkB,CAACW,mBADG,GAEtB,IAFJ;AAGD,KAJD,MAIO;AACLJ,MAAAA,GAAG,CAACI,mBAAJ,GAA0B,IAA1B;AACD;;AAEDL,IAAAA,OAAO,CAACC,GAAD,CAAP;AACD,GApBM,CAAP;AAqBD;;AAEM,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAACf,KAAD,uEAAS,EAAT;AAAA,SAChC,IAAIQ,OAAJ,CAAY,UAACC,OAAD,EAAa;AACvBA,IAAAA,OAAO,iCACFO,oBADE,GAEFhB,KAFE,EAAP;AAID,GALD,CADgC;AAAA,CAA3B;;;;AAQA;AAAiB;AAARiB,OAAT,GAAsC;AAC3C,SAAO,IAAIT,OAAJ,CAAY,UAACC,OAAD,EAAa;AAC9BhB,IAAAA,GAAG,CAAC,YAAD,CAAH;AACAgB,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, language } = 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      language\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/lib/drawing-response/button.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var RawButton = function RawButton(_ref) {
+  var classes = _ref.classes,
+      className = _ref.className,
+      label = _ref.label,
+      onClick = _ref.onClick,
+      disabled = _ref.disabled,
+      title = _ref.title;
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    title: title,
+    onClick: onClick,
+    disabled: disabled,
+    className: (0, _classnames["default"])(classes.addButton, className),
+    size: "small",
+    variant: "contained",
+    color: "default"
+  }, label);
+};
+
+RawButton.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  className: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  onClick: _propTypes["default"].func,
+  title: _propTypes["default"].string
+};
+RawButton.defaultProps = {
+  className: '',
+  disabled: false,
+  label: 'Add',
+  onClick: function onClick() {},
+  title: ''
+};
+
+var styles = function styles() {
+  return {
+    addButton: {
+      fontSize: '0.9em',
+      marginLeft: 8,
+      minWidth: 32,
+      height: 32,
+      '& span': {
+        '& svg': {
+          width: '1.3em !important',
+          height: '1.3em !important'
+        }
+      }
+    }
+  };
+};
+
+var ButtonStyled = (0, _styles.withStyles)(styles)(RawButton);
+var _default = ButtonStyled;
+exports["default"] = _default;
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +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,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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  tools: [{
+    type: 'Select',
+    label: 'Select',
+    icon: 'mdiCursorDefault'
+  }, {
+    type: 'FreePathDrawable',
+    label: 'Free Draw',
+    icon: 'mdiPencil'
+  }, {
+    type: 'LineDrawable',
+    label: 'Line',
+    icon: 'mdiMinus'
+  }, {
+    type: 'RectangleDrawable',
+    label: 'Rectangle',
+    icon: 'mdiRectangle'
+  }, {
+    type: 'CircleDrawable',
+    label: 'Circle',
+    icon: 'mdiCircle'
+  }, {
+    type: 'Text',
+    label: 'Text Entry',
+    icon: 'mdiFormatColorText'
+  }, {
+    // ,{
+    //   type: 'PaintBucket',
+    //   label: 'Paint Bucket',
+    //   icon: 'mdiFormatColorFill'
+    // },
+    type: 'EraserDrawable',
+    label: 'Eraser',
+    icon: 'mdiEraser'
+  }]
+};
+exports["default"] = _default;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,393 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Container = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _translator = _interopRequireDefault(require("@pie-lib/pie-toolbox/translator"));
+
+var _constants = _interopRequireDefault(require("./constants"));
+
+var _button = _interopRequireDefault(require("./button"));
+
+var _drawablePalette = _interopRequireDefault(require("./drawable-palette"));
+
+var _drawableMain = _interopRequireDefault(require("./drawable-main"));
+
+var _drawableText = _interopRequireDefault(require("./drawable-text"));
+
+var _icon = _interopRequireDefault(require("./icon"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var TOOLS = _constants["default"].tools;
+var translator = _translator["default"].translator;
+var ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map(function (c) {
+  return {
+    value: c,
+    label: c
+  };
+});
+
+var Container = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(Container, _Component);
+
+  var _super = _createSuper(Container);
+
+  function Container(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Container);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "checkIfToolIsDisabled", function (type) {
+      if (_this.props.disabled) return true;
+      var toolActive = _this.state.toolActive; // Text will never be disabled since on each "Text Entry" click a new text is added
+
+      if (type === 'Text') {
+        return false;
+      }
+
+      return type === toolActive.type;
+    });
+    var TextEntry = new _drawableText["default"]();
+    _this.state = {
+      scale: 1,
+      drawableDimensions: {
+        height: 0,
+        width: 0
+      },
+      toolActive: TOOLS[0],
+      fillColor: 'white',
+      fillColorList: [{
+        value: 'transparent',
+        label: 'no fill'
+      }, {
+        value: 'lightblue',
+        label: 'light blue'
+      }, {
+        value: 'lightyellow',
+        label: 'light yellow'
+      }].concat((0, _toConsumableArray2["default"])(ROGVAIV)),
+      outlineColor: 'black',
+      outlineColorList: ROGVAIV,
+      paintColor: 'red',
+      paintColorList: ROGVAIV,
+      TextEntry: TextEntry
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Container, [{
+    key: "setTranslatedState",
+    value: function setTranslatedState(language) {
+      var translatedROGVAIV = ROGVAIV.map(function (c) {
+        return {
+          value: c.value,
+          label: translator.t("drawingResponse.".concat(c.label), {
+            lng: language
+          })
+        };
+      });
+      this.setState({
+        fillColorList: [{
+          value: 'transparent',
+          label: translator.t('drawingResponse.noFill', {
+            lng: language
+          })
+        }, {
+          value: 'lightblue',
+          label: translator.t('drawingResponse.lightblue', {
+            lng: language
+          })
+        }, {
+          value: 'lightyellow',
+          label: translator.t('drawingResponse.lightyellow', {
+            lng: language
+          })
+        }].concat((0, _toConsumableArray2["default"])(translatedROGVAIV)),
+        paintColor: translator.t('drawingResponse.red', {
+          lng: language
+        }),
+        outlineColorList: translatedROGVAIV,
+        paintColorList: translatedROGVAIV
+      });
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(props) {
+      var language = props.language;
+      this.setTranslatedState(language);
+    }
+  }, {
+    key: "setDimensions",
+    value: function setDimensions() {
+      var _this2 = this;
+
+      var checkExist = setInterval(function () {
+        try {
+          var _this2$drawable$getBo = _this2.drawable.getBoundingClientRect(),
+              height = _this2$drawable$getBo.height,
+              width = _this2$drawable$getBo.width;
+
+          if (height !== 0 && width !== 0) {
+            _this2.setState({
+              drawableDimensions: {
+                height: height,
+                width: width
+              }
+            });
+          }
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.warn('setDimensions Error: ', e);
+        } finally {
+          clearInterval(checkExist);
+        }
+      }, 100);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this3 = this;
+
+      var language = this.props.language;
+      this.setTranslatedState(language);
+      this.setDimensions();
+      this.observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function () {
+          var _document$getElementB, _document$getElementB2;
+
+          var target = (_document$getElementB = document.getElementById('question-container')) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.style) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.cssText;
+          var zoom = target === null || target === void 0 ? void 0 : target.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
+          var zoomParsed = zoom === null || zoom === void 0 ? void 0 : zoom.replace(/\s/g, '');
+
+          if (zoomParsed) {
+            var newScale = parseFloat(zoomParsed) / 100;
+
+            if (newScale !== _this3.state.scale) {
+              _this3.setState({
+                scale: parseFloat(zoomParsed) / 100
+              });
+            }
+          } else if (!zoomParsed && _this3.state.scale !== 1) {
+            _this3.setState({
+              scale: 1
+            });
+          }
+        });
+      });
+      var target = document.getElementById('question-container');
+
+      if (target) {
+        this.observer.observe(target, {
+          attributes: true,
+          attributeFilter: ['style']
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$observer;
+
+      var TextEntry = this.state.TextEntry;
+      TextEntry.removeEventListeners();
+      (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.disconnect();
+    }
+  }, {
+    key: "handleMakeToolActive",
+    value: function handleMakeToolActive(tool) {
+      var TextEntry = this.state.TextEntry;
+      var type = tool.type;
+      var language = this.props.language;
+
+      if (type !== 'Text') {
+        this.setState({
+          toolActive: tool
+        });
+      } else {
+        TextEntry.addNewTextEntry(language); // Force update
+
+        this.setState({
+          updatedAt: new Date()
+        });
+      }
+    }
+  }, {
+    key: "handleColorChange",
+    value: function handleColorChange(type, color) {
+      var cType = "".concat(type, "Color");
+      this.setState((0, _defineProperty2["default"])({}, cType, color));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var _this$props = this.props,
+          classes = _this$props.classes,
+          disabled = _this$props.disabled,
+          imageUrl = _this$props.imageUrl,
+          imageDimensions = _this$props.imageDimensions,
+          onSessionChange = _this$props.onSessionChange,
+          session = _this$props.session,
+          backgroundImageEnabled = _this$props.backgroundImageEnabled,
+          language = _this$props.language;
+      var _this$state = this.state,
+          drawableDimensions = _this$state.drawableDimensions,
+          toolActive = _this$state.toolActive,
+          fillColor = _this$state.fillColor,
+          fillColorList = _this$state.fillColorList,
+          outlineColor = _this$state.outlineColor,
+          outlineColorList = _this$state.outlineColorList,
+          paintColor = _this$state.paintColor,
+          paintColorList = _this$state.paintColorList,
+          TextEntry = _this$state.TextEntry;
+      var heightToUse = drawableDimensions.height * this.state.scale;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.base
+      }, !disabled && /*#__PURE__*/_react["default"].createElement(_drawablePalette["default"], {
+        fillColor: fillColor,
+        fillList: fillColorList,
+        outlineColor: outlineColor,
+        outlineList: outlineColorList,
+        paintColor: paintColor,
+        paintList: paintColorList,
+        onFillColorChange: function onFillColorChange(color) {
+          return _this4.handleColorChange('fill', color);
+        },
+        onOutlineColorChange: function onOutlineColorChange(color) {
+          return _this4.handleColorChange('outline', color);
+        },
+        onPaintColorChange: function onPaintColorChange(color) {
+          return _this4.handleColorChange('paint', color);
+        },
+        language: language
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.box
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.toolbar
+      }, TOOLS.map(function (tool) {
+        var type = tool.type,
+            label = tool.label,
+            icon = tool.icon;
+        return /*#__PURE__*/_react["default"].createElement(_button["default"], {
+          title: label,
+          key: type,
+          disabled: _this4.checkIfToolIsDisabled(type),
+          onClick: function onClick() {
+            return _this4.handleMakeToolActive(tool);
+          },
+          label: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+            path: icon
+          })
+        });
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        ref: function ref(drawable) {
+          _this4.drawable = drawable;
+        },
+        className: classes.drawableHeight,
+        style: {
+          height: heightToUse,
+          maxHeight: heightToUse
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_drawableMain["default"], {
+        scale: this.state.scale,
+        session: session,
+        disabled: disabled,
+        onSessionChange: onSessionChange,
+        fillColor: fillColor,
+        outlineColor: outlineColor,
+        paintColor: paintColor,
+        imageUrl: imageUrl,
+        drawableDimensions: drawableDimensions,
+        imageDimensions: imageDimensions,
+        toolActive: toolActive,
+        TextEntry: TextEntry,
+        backgroundImageEnabled: backgroundImageEnabled,
+        language: language
+      }))));
+    }
+  }]);
+  return Container;
+}(_react.Component);
+
+exports.Container = Container;
+(0, _defineProperty2["default"])(Container, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
+  disabled: _propTypes["default"].bool,
+  session: _propTypes["default"].object.isRequired,
+  onSessionChange: _propTypes["default"].func.isRequired,
+  imageDimensions: _propTypes["default"].object.isRequired,
+  imageUrl: _propTypes["default"].string.isRequired,
+  backgroundImageEnabled: _propTypes["default"].bool.isRequired,
+  language: _propTypes["default"].string
+});
+
+var styles = function styles(theme) {
+  return {
+    base: {
+      marginTop: theme.spacing.unit * 2
+    },
+    box: {
+      border: '1px solid #E0E1E6',
+      borderRadius: '5px',
+      marginTop: theme.spacing.unit * 2,
+      backgroundColor: '#ECEDF1'
+    },
+    drawableHeight: {
+      minHeight: 350,
+      backgroundColor: '#fff'
+    },
+    toolbar: {
+      borderBottom: '1px solid #E0E1E6',
+      borderTopLeftRadius: '5px',
+      borderTopRightRadius: '5px',
+      padding: '12px 8px 4px',
+      boxSizing: 'border-box',
+      maxWidth: 'calc(100% - 163px)',
+      // 163px is the width set on undoControls
+      '& button': {
+        marginBottom: theme.spacing.unit
+      }
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(Container);
+
+exports["default"] = _default;
+//# sourceMappingURL=container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","translator","Translator","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","language","translatedROGVAIV","t","lng","setState","setTranslatedState","checkExist","setInterval","drawable","getBoundingClientRect","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';\nimport Translator from '@pie-lib/pie-toolbox/translator';\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;\nconst { translator } = Translator;\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    language: PropTypes.string,\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  setTranslatedState(language) {\n    const translatedROGVAIV = ROGVAIV.map((c) => ({\n      value: c.value,\n      label: translator.t(`drawingResponse.${c.label}`, { lng: language }),\n    }));\n\n    this.setState({\n      fillColorList: [\n        { value: 'transparent', label: translator.t('drawingResponse.noFill', { lng: language }), },\n        { value: 'lightblue', label: translator.t('drawingResponse.lightblue', { lng: language }), },\n        { value: 'lightyellow', label: translator.t('drawingResponse.lightyellow', { lng: language }), },\n        ...translatedROGVAIV,\n      ],\n      paintColor: translator.t('drawingResponse.red', { lng: language }),\n      outlineColorList: translatedROGVAIV,\n      paintColorList: translatedROGVAIV,\n    });\n  }\n\n  UNSAFE_componentWillReceiveProps(props) {\n    const { language } = props;\n    this.setTranslatedState(language);\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    const { language } = this.props;\n    this.setTranslatedState(language);\n\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    const { language } = this.props;\n\n    if (type !== 'Text') {\n      this.setState({\n        toolActive: tool,\n      });\n    } else {\n      TextEntry.addNewTextEntry(language);\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, language } =\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            language={language}\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              language={language}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n    marginTop: theme.spacing.unit * 2,\n    backgroundColor: '#ECEDF1',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    backgroundColor: '#fff',\n  },\n  toolbar: {\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    padding: '12px 8px 4px',\n    boxSizing: 'border-box',\n    maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls\n    '& button': {\n      marginBottom: theme.spacing.unit,\n    },\n  },\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}