@pie-element/drawing-response 4.6.0 → 4.6.1-beta.1

package/lib/drawing-response/button.js

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

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

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

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

@@ -1,342 +0,0 @@
-"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 _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 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: "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;
-
-      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;
-
-      if (type !== 'Text') {
-        this.setState({
-          toolActive: tool
-        });
-      } else {
-        TextEntry.addNewTextEntry(); // 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;
-      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);
-        }
-      }), /*#__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
-      }))));
-    }
-  }]);
-  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
-});
-
-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: '8px'
-      }
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Container);
-
-exports["default"] = _default;
-//# sourceMappingURL=container.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","checkExist","setInterval","drawable","getBoundingClientRect","setState","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","session","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","backgroundColor","minHeight","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","boxSizing","maxWidth","marginBottom"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport constants from './constants';\nimport Button from './button';\nimport DrawablePalette from './drawable-palette';\nimport DrawableMain from './drawable-main';\nimport DrawableText from './drawable-text';\nimport Icon from './icon';\n\nconst { tools: TOOLS } = constants;\n\nconst ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({\n  value: c,\n  label: c,\n}));\n\nexport class Container extends Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    disabled: PropTypes.bool,\n    session: PropTypes.object.isRequired,\n    onSessionChange: PropTypes.func.isRequired,\n    imageDimensions: PropTypes.object.isRequired,\n    imageUrl: PropTypes.string.isRequired,\n    backgroundImageEnabled: PropTypes.bool.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    const TextEntry = new DrawableText();\n\n    this.state = {\n      scale: 1,\n      drawableDimensions: {\n        height: 0,\n        width: 0,\n      },\n      toolActive: TOOLS[0],\n      fillColor: 'white',\n      fillColorList: [\n        { value: 'transparent', label: 'no fill' },\n        { value: 'lightblue', label: 'light blue' },\n        { value: 'lightyellow', label: 'light yellow' },\n        ...ROGVAIV,\n      ],\n      outlineColor: 'black',\n      outlineColorList: ROGVAIV,\n      paintColor: 'red',\n      paintColorList: ROGVAIV,\n      TextEntry,\n    };\n  }\n\n  setDimensions() {\n    const checkExist = setInterval(() => {\n      try {\n        const { height, width } = this.drawable.getBoundingClientRect();\n        if (height !== 0 && width !== 0) {\n          this.setState({\n            drawableDimensions: {\n              height,\n              width,\n            },\n          });\n        }\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.warn('setDimensions Error: ', e);\n      } finally {\n        clearInterval(checkExist);\n      }\n    }, 100);\n  }\n\n  componentDidMount() {\n    this.setDimensions();\n\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    const { TextEntry } = this.state;\n\n    TextEntry.removeEventListeners();\n    this.observer?.disconnect();\n  }\n\n  handleMakeToolActive(tool) {\n    const { TextEntry } = this.state;\n    const { type } = tool;\n\n    if (type !== 'Text') {\n      this.setState({\n        toolActive: tool,\n      });\n    } else {\n      TextEntry.addNewTextEntry();\n      // Force update\n      this.setState({\n        updatedAt: new Date(),\n      });\n    }\n  }\n\n  checkIfToolIsDisabled = (type) => {\n    if (this.props.disabled) return true;\n\n    const { toolActive } = this.state;\n    // Text will never be disabled since on each \"Text Entry\" click a new text is added\n    if (type === 'Text') {\n      return false;\n    }\n    return type === toolActive.type;\n  };\n\n  handleColorChange(type, color) {\n    const cType = `${type}Color`;\n    this.setState({\n      [cType]: color,\n    });\n  }\n\n  render() {\n    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled } =\n      this.props;\n    const {\n      drawableDimensions,\n      toolActive,\n      fillColor,\n      fillColorList,\n      outlineColor,\n      outlineColorList,\n      paintColor,\n      paintColorList,\n      TextEntry,\n    } = this.state;\n\n    const heightToUse = drawableDimensions.height * this.state.scale;\n\n    return (\n      <div className={classes.base}>\n        {!disabled && (\n          <DrawablePalette\n            fillColor={fillColor}\n            fillList={fillColorList}\n            outlineColor={outlineColor}\n            outlineList={outlineColorList}\n            paintColor={paintColor}\n            paintList={paintColorList}\n            onFillColorChange={(color) => this.handleColorChange('fill', color)}\n            onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n            onPaintColorChange={(color) => this.handleColorChange('paint', color)}\n          />\n        )}\n\n        <div className={classes.box}>\n          <div className={classes.toolbar}>\n            {TOOLS.map((tool) => {\n              const { type, label, icon } = tool;\n\n              return (\n                <Button\n                  title={label}\n                  key={type}\n                  disabled={this.checkIfToolIsDisabled(type)}\n                  onClick={() => this.handleMakeToolActive(tool)}\n                  label={<Icon path={icon} />}\n                />\n              );\n            })}\n          </div>\n\n          <div\n            ref={(drawable) => {\n              this.drawable = drawable;\n            }}\n            className={classes.drawableHeight}\n            style={{ height: heightToUse, maxHeight: heightToUse }}\n          >\n            <DrawableMain\n              scale={this.state.scale}\n              session={session}\n              disabled={disabled}\n              onSessionChange={onSessionChange}\n              fillColor={fillColor}\n              outlineColor={outlineColor}\n              paintColor={paintColor}\n              imageUrl={imageUrl}\n              drawableDimensions={drawableDimensions}\n              imageDimensions={imageDimensions}\n              toolActive={toolActive}\n              TextEntry={TextEntry}\n              backgroundImageEnabled={backgroundImageEnabled}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n    marginTop: theme.spacing.unit * 2,\n    backgroundColor: '#ECEDF1',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    backgroundColor: '#fff',\n  },\n  toolbar: {\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    padding: '12px 8px 4px',\n    boxSizing: 'border-box',\n    maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls\n    '& button': {\n      marginBottom: '8px',\n    },\n  },\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}

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

@@ -1,119 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-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 = _interopRequireDefault(require("react"));
-
-var _reactKonva = require("react-konva");
-
-var _drawableHelper = _interopRequireDefault(require("./drawable-helper"));
-
-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 CircleDrawable = /*#__PURE__*/function (_DrawableHelper) {
-  (0, _inherits2["default"])(CircleDrawable, _DrawableHelper);
-
-  var _super = _createSuper(CircleDrawable);
-
-  function CircleDrawable(_props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, CircleDrawable);
-    _this = _super.call(this, _props, CircleDrawable.TYPE);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDragEnd", function (props, event) {
-      var deltaX = _this.startx - event.target.getX();
-      var deltaY = _this.starty - event.target.getY();
-      _this.startx = event.target.getX();
-      _this.starty = event.target.getY();
-      _this.x = _this.x - deltaX;
-      _this.y = _this.y - deltaY;
-      props.handleSessionChange();
-    });
-    var startx = _props.startx,
-        starty = _props.starty,
-        x = _props.x,
-        y = _props.y;
-    _this.startx = startx;
-    _this.starty = starty;
-    _this.x = x || startx;
-    _this.y = y || starty;
-    var dx = _this.startx - _this.x;
-    var dy = _this.starty - _this.y;
-    _this.radius = Math.sqrt(dx * dx + dy * dy);
-    return _this;
-  }
-
-  (0, _createClass2["default"])(CircleDrawable, [{
-    key: "registerMovement",
-    value: function registerMovement(x, y) {
-      this.x = x;
-      this.y = y;
-      var dx = this.startx - this.x;
-      var dy = this.starty - this.y;
-      this.radius = Math.sqrt(dx * dx + dy * dy);
-    }
-  }, {
-    key: "handleOnClick",
-    value: function handleOnClick(props) {
-      var paint = props.paint,
-          paintColor = props.paintColor,
-          forceUpdate = props.forceUpdate;
-
-      if (paint) {
-        this.paintColor = paintColor;
-        forceUpdate();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render(props) {
-      var _this2 = this;
-
-      var draggable = props.draggable,
-          key = props.key,
-          onMouseOverElement = props.onMouseOverElement,
-          onMouseOutElement = props.onMouseOutElement;
-      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
-        key: key,
-        draggable: draggable,
-        radius: this.radius,
-        x: this.startx,
-        y: this.starty,
-        fill: this.paintColor || this.fillColor,
-        onClick: function onClick() {
-          return _this2.handleOnClick(props);
-        },
-        onDragEnd: this.handleDragEnd.bind(this, props),
-        onMouseEnter: onMouseOverElement,
-        onMouseLeave: onMouseOutElement,
-        stroke: this.outlineColor
-      });
-    }
-  }]);
-  return CircleDrawable;
-}(_drawableHelper["default"]);
-
-exports["default"] = CircleDrawable;
-(0, _defineProperty2["default"])(CircleDrawable, "TYPE", 'CircleDrawable');
-//# sourceMappingURL=drawable-circle.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-circle.jsx"],"names":["CircleDrawable","props","TYPE","event","deltaX","startx","target","getX","deltaY","starty","getY","x","y","handleSessionChange","dx","dy","radius","Math","sqrt","paint","paintColor","forceUpdate","draggable","key","onMouseOverElement","onMouseOutElement","fillColor","handleOnClick","handleDragEnd","bind","outlineColor","DrawableHelper"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Circle } from 'react-konva';\n\nimport DrawableHelper from './drawable-helper';\n\nexport default class CircleDrawable extends DrawableHelper {\n  static TYPE = 'CircleDrawable';\n  constructor(props) {\n    super(props, CircleDrawable.TYPE);\n    const { startx, starty, x, y } = props;\n\n    this.startx = startx;\n    this.starty = starty;\n    this.x = x || startx;\n    this.y = y || starty;\n\n    const dx = this.startx - this.x;\n    const dy = this.starty - this.y;\n\n    this.radius = Math.sqrt(dx * dx + dy * dy);\n  }\n\n  registerMovement(x, y) {\n    this.x = x;\n    this.y = y;\n\n    const dx = this.startx - this.x;\n    const dy = this.starty - this.y;\n\n    this.radius = Math.sqrt(dx * dx + dy * dy);\n  }\n\n  handleOnClick(props) {\n    const { paint, paintColor, forceUpdate } = props;\n\n    if (paint) {\n      this.paintColor = paintColor;\n      forceUpdate();\n    }\n  }\n\n  handleDragEnd = (props, event) => {\n    const deltaX = this.startx - event.target.getX();\n    const deltaY = this.starty - event.target.getY();\n\n    this.startx = event.target.getX();\n    this.starty = event.target.getY();\n\n    this.x = this.x - deltaX;\n    this.y = this.y - deltaY;\n\n    props.handleSessionChange();\n  };\n\n  render(props) {\n    const { draggable, key, onMouseOverElement, onMouseOutElement } = props;\n\n    return (\n      <Circle\n        key={key}\n        draggable={draggable}\n        radius={this.radius}\n        x={this.startx}\n        y={this.starty}\n        fill={this.paintColor || this.fillColor}\n        onClick={() => this.handleOnClick(props)}\n        onDragEnd={this.handleDragEnd.bind(this, props)}\n        onMouseEnter={onMouseOverElement}\n        onMouseLeave={onMouseOutElement}\n        stroke={this.outlineColor}\n      />\n    );\n  }\n}\n"],"file":"drawable-circle.js"}