@pie-element/drawing-response 6.0.0 → 6.0.1-cr.1

package/configure/src/index.js

@@ -16,28 +16,40 @@ import sensibleDefaults from './defaults';
 const log = debug('hotspot:configure');
 
 export default class DrawableResponseConfigure extends HTMLElement {
-  static createDefaultModel = (model = {}) => {
-    return {
+  static createDefaultModel = (model = {}, config) => {
+    const defaultModel = {
       ...sensibleDefaults.model,
       ...model,
     };
+
+    if (config?.withRubric?.forceEnabled && !defaultModel.rubricEnabled) {
+      defaultModel.rubricEnabled = true;
+    }
+
+    return defaultModel;
   };
 
   constructor() {
     super();
     this._configuration = sensibleDefaults.configuration;
-    this._model = DrawableResponseConfigure.createDefaultModel({});
+    this._model = DrawableResponseConfigure.createDefaultModel({}, this._configuration);
     this.onModelChanged = this.onModelChanged.bind(this);
   }
 
   set model(s) {
-    this._model = DrawableResponseConfigure.createDefaultModel(s);
+    this._model = DrawableResponseConfigure.createDefaultModel(s, this._configuration);
     this._render();
   }
 
   set configuration(c) {
     this._configuration = c;
 
+    const { withRubric = {} } = c || {};
+
+    if (withRubric?.forceEnabled && !this._model.rubricEnabled) {
+      this._model.rubricEnabled = true;
+    }
+
     this._render();
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "6.0.0",
+  "version": "6.0.1-cr.1",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "17aaa33ea6a9b4917916224e914ed3539f772b78",
+  "gitHead": "0e14ff981bcdc8a89a0e58484026496701bfdbc3",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/configure/lib/button.js

@@ -1,61 +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;
-  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    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"].string,
-  onClick: _propTypes["default"].func
-};
-RawButton.defaultProps = {
-  className: '',
-  disabled: false,
-  label: 'Add',
-  onClick: function onClick() {}
-};
-
-var styles = function styles() {
-  return {
-    addButton: {
-      marginLeft: 8
-    }
-  };
-};
-
-var ButtonStyled = (0, _styles.withStyles)(styles)(RawButton);
-var _default = ButtonStyled;
-exports["default"] = _default;
-//# sourceMappingURL=button.js.map

package/configure/lib/button.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button.jsx"],"names":["RawButton","classes","className","label","onClick","disabled","addButton","propTypes","PropTypes","object","isRequired","string","bool","func","defaultProps","styles","marginLeft","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,sBAChB,gCAAC,kBAAD;AACE,IAAA,OAAO,EAAED,OADX;AAEE,IAAA,QAAQ,EAAEC,QAFZ;AAGE,IAAA,SAAS,EAAE,4BAAWJ,OAAO,CAACK,SAAnB,EAA8BJ,SAA9B,CAHb;AAIE,IAAA,IAAI,EAAC,OAJP;AAKE,IAAA,OAAO,EAAC,WALV;AAME,IAAA,KAAK,EAAC;AANR,KAQGC,KARH,CADgB;AAAA,CAAlB;;AAaAH,SAAS,CAACO,SAAV,GAAsB;AACpBN,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC,UADN;AAEpBR,EAAAA,SAAS,EAAEM,sBAAUG,MAFD;AAGpBN,EAAAA,QAAQ,EAAEG,sBAAUI,IAHA;AAIpBT,EAAAA,KAAK,EAAEK,sBAAUG,MAJG;AAKpBP,EAAAA,OAAO,EAAEI,sBAAUK;AALC,CAAtB;AAQAb,SAAS,CAACc,YAAV,GAAyB;AACvBZ,EAAAA,SAAS,EAAE,EADY;AAEvBG,EAAAA,QAAQ,EAAE,KAFa;AAGvBF,EAAAA,KAAK,EAAE,KAHgB;AAIvBC,EAAAA,OAAO,EAAE,mBAAM,CAAE;AAJM,CAAzB;;AAOA,IAAMW,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBT,IAAAA,SAAS,EAAE;AACTU,MAAAA,UAAU,EAAE;AADH;AADS,GAAP;AAAA,CAAf;;AAMA,IAAMC,YAAY,GAAG,wBAAWF,MAAX,EAAmBf,SAAnB,CAArB;eAEeiB,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 }) => (\n  <Button\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.string,\n  onClick: PropTypes.func,\n};\n\nRawButton.defaultProps = {\n  className: '',\n  disabled: false,\n  label: 'Add',\n  onClick: () => {},\n};\n\nconst styles = () => ({\n  addButton: {\n    marginLeft: 8,\n  },\n});\n\nconst ButtonStyled = withStyles(styles)(RawButton);\n\nexport default ButtonStyled;\n"],"file":"button.js"}

package/configure/lib/defaults.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _default = {
-  model: {
-    prompt: 'This is the question prompt',
-    imageUrl: '',
-    imageDimensions: {
-      height: 0,
-      width: 0
-    },
-    promptEnabled: true,
-    teacherInstructionsEnabled: true,
-    studentInstructionsEnabled: true,
-    backgroundImageEnabled: true,
-    spellCheckEnabled: true,
-    toolbarEditorPosition: 'bottom'
-  },
-  configuration: {
-    spellCheck: {
-      label: 'Spellcheck',
-      settings: false,
-      enabled: true
-    },
-    backgroundImage: {
-      settings: true,
-      label: 'Background Image'
-    },
-    prompt: {
-      settings: true,
-      label: 'Prompt'
-    },
-    settingsPanelDisabled: false,
-    teacherInstructions: {
-      settings: true,
-      label: 'Teacher Instructions'
-    },
-    maxImageWidth: {
-      teacherInstructions: 300,
-      prompt: 300
-    },
-    maxImageHeight: {
-      teacherInstructions: 300,
-      prompt: 300
-    },
-    withRubric: {
-      settings: false,
-      label: 'Add Rubric'
-    }
-  }
-};
-exports["default"] = _default;
-//# sourceMappingURL=defaults.js.map

package/configure/lib/defaults.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","imageUrl","imageDimensions","height","width","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","spellCheckEnabled","toolbarEditorPosition","configuration","spellCheck","label","settings","enabled","backgroundImage","settingsPanelDisabled","teacherInstructions","maxImageWidth","maxImageHeight","withRubric"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,QAAQ,EAAE,EAFL;AAGLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,MAAM,EAAE,CADO;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KAHZ;AAOLC,IAAAA,aAAa,EAAE,IAPV;AAQLC,IAAAA,0BAA0B,EAAE,IARvB;AASLC,IAAAA,0BAA0B,EAAE,IATvB;AAULC,IAAAA,sBAAsB,EAAE,IAVnB;AAWLC,IAAAA,iBAAiB,EAAE,IAXd;AAYLC,IAAAA,qBAAqB,EAAE;AAZlB,GADM;AAebC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE;AACVC,MAAAA,KAAK,EAAE,YADG;AAEVC,MAAAA,QAAQ,EAAE,KAFA;AAGVC,MAAAA,OAAO,EAAE;AAHC,KADC;AAMbC,IAAAA,eAAe,EAAE;AACfF,MAAAA,QAAQ,EAAE,IADK;AAEfD,MAAAA,KAAK,EAAE;AAFQ,KANJ;AAUbb,IAAAA,MAAM,EAAE;AACNc,MAAAA,QAAQ,EAAE,IADJ;AAEND,MAAAA,KAAK,EAAE;AAFD,KAVK;AAcbI,IAAAA,qBAAqB,EAAE,KAdV;AAebC,IAAAA,mBAAmB,EAAE;AACnBJ,MAAAA,QAAQ,EAAE,IADS;AAEnBD,MAAAA,KAAK,EAAE;AAFY,KAfR;AAmBbM,IAAAA,aAAa,EAAE;AACbD,MAAAA,mBAAmB,EAAE,GADR;AAEblB,MAAAA,MAAM,EAAE;AAFK,KAnBF;AAuBboB,IAAAA,cAAc,EAAE;AACdF,MAAAA,mBAAmB,EAAE,GADP;AAEdlB,MAAAA,MAAM,EAAE;AAFM,KAvBH;AA2BbqB,IAAAA,UAAU,EAAE;AACVP,MAAAA,QAAQ,EAAE,KADA;AAEVD,MAAAA,KAAK,EAAE;AAFG;AA3BC;AAfF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    imageUrl: '',\n    imageDimensions: {\n      height: 0,\n      width: 0,\n    },\n    promptEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    backgroundImageEnabled: true,\n    spellCheckEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    backgroundImage: {\n      settings: true,\n      label: 'Background Image',\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt',\n    },\n    settingsPanelDisabled: false,\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    },\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n  },\n};\n"],"file":"defaults.js"}

package/configure/lib/image-container.js

@@ -1,364 +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.ImageContainer = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-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 _button = _interopRequireDefault(require("./button"));
-
-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 isImage = function isImage(file) {
-  var imageType = /image.*/;
-  return file.type.match(imageType);
-};
-
-var ImageContainer = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(ImageContainer, _Component);
-
-  var _super = _createSuper(ImageContainer);
-
-  function ImageContainer(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, ImageContainer);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFileRead", function (file) {
-      var onImageUpload = _this.props.onImageUpload;
-      var reader = new FileReader();
-
-      reader.onloadend = function () {
-        onImageUpload(reader.result);
-      };
-
-      reader.readAsDataURL(file);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleUploadImage", function (e) {
-      e.preventDefault();
-      var file = e.target.files[0];
-
-      _this.handleFileRead(file);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "makeDropzoneActive", function () {
-      return _this.setState({
-        dropzoneActive: true
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "makeDropzoneInactive", function () {
-      return _this.setState({
-        dropzoneActive: false
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDrop", function (e) {
-      e.preventDefault();
-      var _e$dataTransfer = e.dataTransfer,
-          items = _e$dataTransfer.items,
-          files = _e$dataTransfer.files;
-
-      if (items && items[0].kind === 'file') {
-        var file = items[0].getAsFile();
-
-        if (isImage(file)) {
-          _this.handleFileRead(file);
-        }
-      } else if (isImage(files[0])) {
-        _this.handleFileRead(files[0]);
-      }
-
-      _this.makeDropzoneInactive();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragOver", function (e) {
-      e.preventDefault();
-      var dropzoneActive = _this.state.dropzoneActive;
-
-      if (!dropzoneActive) {
-        _this.makeDropzoneActive();
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragExit", function (e) {
-      e.preventDefault();
-
-      _this.makeDropzoneInactive();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleEnableDrag", function () {
-      return _this.setState({
-        dragEnabled: true
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDisableDrag", function () {
-      return _this.setState({
-        dragEnabled: false
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleInputClick", function () {
-      return _this.input.click();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnImageLoad", function (_ref) {
-      var _ref$target = _ref.target,
-          offsetHeight = _ref$target.offsetHeight,
-          offsetWidth = _ref$target.offsetWidth,
-          naturalHeight = _ref$target.naturalHeight,
-          naturalWidth = _ref$target.naturalWidth;
-      var _this$props = _this.props,
-          onUpdateImageDimension = _this$props.onUpdateImageDimension,
-          imageDimensions = _this$props.imageDimensions;
-      var resizeHandle = _this.resize;
-      var dimensions = {
-        height: imageDimensions && imageDimensions.height || offsetHeight || naturalHeight,
-        width: imageDimensions && imageDimensions.width || offsetWidth || naturalWidth
-      }; // check if aspect ratio is not respected on replacing image
-
-      var imageAspectRatio = naturalWidth / naturalHeight;
-
-      if (dimensions.width !== dimensions.height * imageAspectRatio) {
-        dimensions.width = dimensions.height * imageAspectRatio;
-      }
-
-      _this.setState({
-        dimensions: dimensions
-      });
-
-      onUpdateImageDimension(dimensions);
-      resizeHandle.addEventListener('mousedown', _this.initialiseResize, false);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "initialiseResize", function () {
-      window.addEventListener('mousemove', _this.startResizing, false);
-      window.addEventListener('mouseup', _this.stopResizing, false);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stopResizing", function () {
-      var onUpdateImageDimension = _this.props.onUpdateImageDimension;
-      var dimensions = _this.state.dimensions;
-
-      _this.handleEnableDrag();
-
-      onUpdateImageDimension(dimensions);
-      window.removeEventListener('mousemove', _this.startResizing, false);
-      window.removeEventListener('mouseup', _this.stopResizing, false);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startResizing", function (e) {
-      var box = _this.image;
-      var _this$state = _this.state,
-          maxImageWidth = _this$state.maxImageWidth,
-          maxImageHeight = _this$state.maxImageHeight,
-          dimensions = _this$state.dimensions;
-      var bounds = e.target.getBoundingClientRect();
-      var x = e.clientX - bounds.left;
-      var y = e.clientY - bounds.top;
-      var imageAspectRatio = dimensions.width / dimensions.height;
-      var fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;
-      var hasMinimumWidth = x > 150 && y > 150;
-
-      if (fitsContainer && hasMinimumWidth && box) {
-        box.style.width = "".concat(x, "px");
-        box.style.height = "".concat(x / imageAspectRatio, "px");
-
-        _this.setState({
-          dimensions: {
-            width: x,
-            height: x / imageAspectRatio
-          }
-        });
-      }
-
-      _this.handleDisableDrag();
-    });
-    _this.state = {
-      maxImageWidth: '100%',
-      maxImageHeight: 'auto',
-      dragEnabled: true,
-      dropzoneActive: false
-    };
-    return _this;
-  }
-
-  (0, _createClass2["default"])(ImageContainer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.imageSection) {
-        var positionInfo = this.imageSection.getBoundingClientRect();
-        var height = positionInfo.height,
-            width = positionInfo.width;
-        this.setState({
-          maxImageWidth: width,
-          maxImageHeight: height
-        });
-      }
-    }
-  }, {
-    key: "renderUploadControl",
-    value: function renderUploadControl(label) {
-      var _this2 = this;
-
-      var classes = this.props.classes;
-      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
-        label: label,
-        onClick: this.handleInputClick
-      }), /*#__PURE__*/_react["default"].createElement("input", {
-        accept: "image/*",
-        className: classes.input,
-        onChange: this.handleUploadImage,
-        ref: function ref(_ref2) {
-          _this2.input = _ref2;
-        },
-        type: "file"
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          imageUrl = _this$props2.imageUrl,
-          imageDimensions = _this$props2.imageDimensions;
-      var _this$state2 = this.state,
-          dropzoneActive = _this$state2.dropzoneActive,
-          dragEnabled = _this$state2.dragEnabled,
-          maxImageHeight = _this$state2.maxImageHeight,
-          maxImageWidth = _this$state2.maxImageWidth;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.base
-      }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-        className: "".concat(classes.box, " ").concat(dropzoneActive ? classes.boxActive : '')
-      }, dragEnabled ? {
-        onDragExit: this.handleOnDragExit,
-        onDragLeave: this.handleOnDragExit,
-        onDragOver: this.handleOnDragOver,
-        onDrop: this.handleOnDrop
-      } : {}), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.toolbar
-      }, this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')), /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(_ref5) {
-          _this3.imageSection = _ref5;
-        },
-        className: classes.drawableHeight
-      }, imageUrl ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.imageContainer
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        className: classes.image,
-        height: "auto",
-        onLoad: this.handleOnImageLoad,
-        ref: function ref(_ref3) {
-          _this3.image = _ref3;
-        },
-        src: imageUrl,
-        style: {
-          width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
-          maxWidth: maxImageWidth,
-          maxHeight: maxImageHeight
-        },
-        alt: ""
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(_ref4) {
-          _this3.resize = _ref4;
-        },
-        className: classes.resize
-      })) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.drawableHeight, " ").concat(classes.centered)
-      }, /*#__PURE__*/_react["default"].createElement("label", null, "Drag and drop or upload image from computer"), /*#__PURE__*/_react["default"].createElement("br", null), this.renderUploadControl('Upload Image')))));
-    }
-  }]);
-  return ImageContainer;
-}(_react.Component);
-
-exports.ImageContainer = ImageContainer;
-
-var styles = function styles(theme) {
-  return {
-    base: {
-      marginTop: theme.spacing.unit * 2
-    },
-    box: {
-      border: '1px solid #E0E1E6',
-      borderRadius: '5px'
-    },
-    boxActive: {
-      border: '1px solid #0032C2'
-    },
-    centered: {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center'
-    },
-    drawableHeight: {
-      minHeight: 350
-    },
-    image: {
-      alignItems: 'center',
-      display: 'flex',
-      justifyContent: 'center'
-    },
-    imageContainer: {
-      position: 'relative',
-      width: 'fit-content'
-    },
-    resize: {
-      borderBottom: '1px solid #727272',
-      borderRight: '1px solid #727272',
-      bottom: '-10px',
-      cursor: 'se-resize',
-      height: '10px',
-      position: 'absolute',
-      right: '-10px',
-      width: '10px'
-    },
-    input: {
-      display: 'none'
-    },
-    toolbar: {
-      backgroundColor: '#ECEDF1',
-      borderBottom: '1px solid #E0E1E6',
-      borderTopLeftRadius: '5px',
-      borderTopRightRadius: '5px',
-      display: 'flex',
-      padding: '12px 8px'
-    }
-  };
-};
-
-ImageContainer.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  imageUrl: _propTypes["default"].string.isRequired,
-  onImageUpload: _propTypes["default"].func.isRequired,
-  onUpdateImageDimension: _propTypes["default"].func.isRequired
-};
-
-var _default = (0, _styles.withStyles)(styles)(ImageContainer);
-
-exports["default"] = _default;
-//# sourceMappingURL=image-container.js.map

package/configure/lib/image-container.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/image-container.jsx"],"names":["isImage","file","imageType","type","match","ImageContainer","props","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","target","files","handleFileRead","setState","dropzoneActive","dataTransfer","items","kind","getAsFile","makeDropzoneInactive","state","makeDropzoneActive","dragEnabled","input","click","offsetHeight","offsetWidth","naturalHeight","naturalWidth","onUpdateImageDimension","imageDimensions","resizeHandle","resize","dimensions","height","width","imageAspectRatio","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","maxImageHeight","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","fitsContainer","hasMinimumWidth","style","handleDisableDrag","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","base","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","renderUploadControl","drawableHeight","imageContainer","handleOnImageLoad","undefined","maxWidth","maxHeight","centered","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","position","borderBottom","borderRight","bottom","cursor","right","backgroundColor","borderTopLeftRadius","borderTopRightRadius","padding","propTypes","PropTypes","object","isRequired","string","func"],"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 Button from './button';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n  return file.type.match(imageType);\n};\n\nexport class ImageContainer extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      maxImageWidth: '100%',\n      maxImageHeight: 'auto',\n      dragEnabled: true,\n      dropzoneActive: false,\n    };\n  }\n\n  componentDidMount() {\n    if (this.imageSection) {\n      const positionInfo = this.imageSection.getBoundingClientRect();\n      const { height, width } = positionInfo;\n      this.setState({\n        maxImageWidth: width,\n        maxImageHeight: height,\n      });\n    }\n  }\n\n  handleFileRead = (file) => {\n    const { onImageUpload } = this.props;\n    const reader = new FileReader();\n    reader.onloadend = () => {\n      onImageUpload(reader.result);\n    };\n    reader.readAsDataURL(file);\n  };\n\n  handleUploadImage = (e) => {\n    e.preventDefault();\n    const file = e.target.files[0];\n    this.handleFileRead(file);\n  };\n\n  makeDropzoneActive = () => this.setState({ dropzoneActive: true });\n\n  makeDropzoneInactive = () => this.setState({ dropzoneActive: false });\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.makeDropzoneInactive();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.makeDropzoneActive();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n    this.makeDropzoneInactive();\n  };\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n  handleInputClick = () => this.input.click();\n\n  handleOnImageLoad = ({ target: { offsetHeight, offsetWidth, naturalHeight, naturalWidth } }) => {\n    const { onUpdateImageDimension, imageDimensions } = this.props;\n    const resizeHandle = this.resize;\n\n    const dimensions = {\n      height: (imageDimensions && imageDimensions.height) || offsetHeight || naturalHeight,\n      width: (imageDimensions && imageDimensions.width) || offsetWidth || naturalWidth,\n    };\n\n    // check if aspect ratio is not respected on replacing image\n    const imageAspectRatio = naturalWidth / naturalHeight;\n\n    if (dimensions.width !== dimensions.height * imageAspectRatio) {\n      dimensions.width = dimensions.height * imageAspectRatio;\n    }\n\n    this.setState({ dimensions });\n    onUpdateImageDimension(dimensions);\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  stopResizing = () => {\n    const { onUpdateImageDimension } = this.props;\n    const { dimensions } = this.state;\n\n    this.handleEnableDrag();\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n  };\n\n  startResizing = (e) => {\n    const box = this.image;\n    const { maxImageWidth, maxImageHeight, dimensions } = this.state;\n\n    const bounds = e.target.getBoundingClientRect();\n    const x = e.clientX - bounds.left;\n    const y = e.clientY - bounds.top;\n\n    const imageAspectRatio = dimensions.width / dimensions.height;\n    const fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;\n    const hasMinimumWidth = x > 150 && y > 150;\n\n    if (fitsContainer && hasMinimumWidth && box) {\n      box.style.width = `${x}px`;\n      box.style.height = `${x / imageAspectRatio}px`;\n\n      this.setState({\n        dimensions: {\n          width: x,\n          height: x / imageAspectRatio,\n        },\n      });\n    }\n\n    this.handleDisableDrag();\n  };\n\n  renderUploadControl(label) {\n    const { classes } = this.props;\n\n    return (\n      <div>\n        <Button label={label} onClick={this.handleInputClick} />\n        <input\n          accept=\"image/*\"\n          className={classes.input}\n          onChange={this.handleUploadImage}\n          ref={(ref) => {\n            this.input = ref;\n          }}\n          type=\"file\"\n        />\n      </div>\n    );\n  }\n\n  render() {\n    const { classes, imageUrl, imageDimensions } = this.props;\n    const { dropzoneActive, dragEnabled, maxImageHeight, maxImageWidth } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n              }\n            : {})}\n        >\n          <div className={classes.toolbar}>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <div className={classes.imageContainer}>\n                <img\n                  className={classes.image}\n                  height=\"auto\"\n                  onLoad={this.handleOnImageLoad}\n                  ref={(ref) => {\n                    this.image = ref;\n                  }}\n                  src={imageUrl}\n                  style={{\n                    width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,\n                    maxWidth: maxImageWidth,\n                    maxHeight: maxImageHeight,\n                  }}\n                  alt=\"\"\n                />\n                <div\n                  ref={(ref) => {\n                    this.resize = ref;\n                  }}\n                  className={classes.resize}\n                />\n              </div>\n            ) : (\n              <div className={`${classes.drawableHeight} ${classes.centered}`}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                {this.renderUploadControl('Upload Image')}\n              </div>\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  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n  input: {\n    display: 'none',\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    padding: '12px 8px',\n  },\n});\n\nImageContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}