@pie-element/drawing-response 7.11.2-next.1 → 7.11.2-next.15

package/controller/lib/index.js

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createDefaultModel = void 0;
+exports.model = model;
+exports.normalize = void 0;
+exports.outcome = outcome;
+exports.validate = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+var _defaults = _interopRequireDefault(require("./defaults"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var log = (0, _debug["default"])('pie-elements:drawing-response:controller');
+
+var normalize = function normalize(question) {
+  return _objectSpread({
+    promptEnabled: true,
+    teacherInstructionsEnabled: true,
+    studentInstructionsEnabled: true,
+    backgroundImageEnabled: true
+  }, question);
+};
+
+exports.normalize = normalize;
+
+function model(question, session, env) {
+  var normalizedQuestion = normalize(question);
+  var imageUrl = normalizedQuestion.imageUrl,
+      imageDimensions = normalizedQuestion.imageDimensions,
+      prompt = normalizedQuestion.prompt,
+      promptEnabled = normalizedQuestion.promptEnabled,
+      backgroundImageEnabled = normalizedQuestion.backgroundImageEnabled,
+      language = normalizedQuestion.language;
+  return new Promise(function (resolve) {
+    var out = {
+      disabled: env.mode !== 'gather',
+      mode: env.mode,
+      imageDimensions: imageDimensions,
+      imageUrl: imageUrl,
+      prompt: promptEnabled ? prompt : null,
+      backgroundImageEnabled: backgroundImageEnabled,
+      language: language
+    };
+
+    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
+      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;
+    } else {
+      out.teacherInstructions = null;
+    }
+
+    resolve(out);
+  });
+}
+
+var createDefaultModel = function createDefaultModel() {
+  var model = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return new Promise(function (resolve) {
+    resolve(_objectSpread(_objectSpread({}, _defaults["default"]), model));
+  });
+};
+
+exports.createDefaultModel = createDefaultModel;
+
+function
+  /*config, session*/
+outcome() {
+  return new Promise(function (resolve) {
+    log('outcome...');
+    resolve({
+      score: 0,
+      completed: 'n/a',
+      note: 'Requires manual scoring'
+    });
+  });
+} // remove all html tags
+
+
+var getInnerText = function getInnerText(html) {
+  return (html || '').replaceAll(/<[^>]*>/g, '');
+}; // remove all html tags except img and iframe
+
+
+var getContent = function getContent(html) {
+  return (html || '').replace(/(<(?!img|iframe)([^>]+)>)/gi, '');
+};
+
+var validate = function validate() {
+  var model = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var errors = {};
+  ['teacherInstructions', 'prompt'].forEach(function (field) {
+    var _config$field;
+
+    if ((_config$field = config[field]) !== null && _config$field !== void 0 && _config$field.required && !getContent(model[field])) {
+      errors[field] = 'This field is required.';
+    }
+  });
+  return errors;
+};
+
+exports.validate = validate;
+//# sourceMappingURL=index.js.map

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","getInnerText","html","replaceAll","getContent","replace","validate","config","errors","forEach","field","required"],"mappings":"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","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\n// remove all html tags\nconst getInnerText = (html) => (html || '').replaceAll(/<[^>]*>/g, '');\n\n// remove all html tags except img and iframe\nconst getContent = (html) => (html || '').replace(/(<(?!img|iframe)([^>]+)>)/gi, '');\n\nexport const validate = (model = {}, config = {}) => {\n  const errors = {};\n\n  ['teacherInstructions', 'prompt'].forEach((field) => {\n    if (config[field]?.required && !getContent(model[field])) {\n      errors[field] = 'This field is required.';\n    }\n  });\n\n  return errors;\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