@pie-element/drawing-response 4.6.1-beta.3 → 4.6.1-beta.4

package/configure/lib/button.js

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_classnames","_Button","RawButton","_ref","classes","className","label","onClick","disabled","createElement","classNames","addButton","size","variant","color","propTypes","PropTypes","object","isRequired","string","bool","func","defaultProps","styles","marginLeft","ButtonStyled","withStyles","_default","exports"],"sources":["../src/button.jsx"],"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"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEA,IAAMK,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA;EAAA,IAAMC,OAAO,GAAAD,IAAA,CAAPC,OAAO;IAAEC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAEC,KAAK,GAAAH,IAAA,CAALG,KAAK;IAAEC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IAAEC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;EAAA,oBAC/Db,MAAA,YAAAc,aAAA,CAACR,OAAA,WAAM;IACLM,OAAO,EAAEA,OAAQ;IACjBC,QAAQ,EAAEA,QAAS;IACnBH,SAAS,EAAE,IAAAK,sBAAU,EAACN,OAAO,CAACO,SAAS,EAAEN,SAAS,CAAE;IACpDO,IAAI,EAAC,OAAO;IACZC,OAAO,EAAC,WAAW;IACnBC,KAAK,EAAC;EAAS,GAEdR,KACK,CAAC;AAAA,CACV;AAEDJ,SAAS,CAACa,SAAS,GAAG;EACpBX,OAAO,EAAEY,qBAAS,CAACC,MAAM,CAACC,UAAU;EACpCb,SAAS,EAAEW,qBAAS,CAACG,MAAM;EAC3BX,QAAQ,EAAEQ,qBAAS,CAACI,IAAI;EACxBd,KAAK,EAAEU,qBAAS,CAACG,MAAM;EACvBZ,OAAO,EAAES,qBAAS,CAACK;AACrB,CAAC;AAEDnB,SAAS,CAACoB,YAAY,GAAG;EACvBjB,SAAS,EAAE,EAAE;EACbG,QAAQ,EAAE,KAAK;EACfF,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,SAAAA,QAAA,EAAM,CAAC;AAClB,CAAC;AAED,IAAMgB,MAAM,GAAG,SAATA,MAAMA,CAAA;EAAA,OAAU;IACpBZ,SAAS,EAAE;MACTa,UAAU,EAAE;IACd;EACF,CAAC;AAAA,CAAC;AAEF,IAAMC,YAAY,GAAG,IAAAC,kBAAU,EAACH,MAAM,CAAC,CAACrB,SAAS,CAAC;AAAC,IAAAyB,QAAA,GAEpCF,YAAY;AAAAG,OAAA,cAAAD,QAAA"}

package/configure/lib/defaults.js

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

@@ -0,0 +1 @@
+{"version":3,"file":"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","exports","_default"],"sources":["../src/defaults.js"],"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"],"mappings":";;;;;;eAAe;EACbA,KAAK,EAAE;IACLC,MAAM,EAAE,6BAA6B;IACrCC,QAAQ,EAAE,EAAE;IACZC,eAAe,EAAE;MACfC,MAAM,EAAE,CAAC;MACTC,KAAK,EAAE;IACT,CAAC;IACDC,aAAa,EAAE,IAAI;IACnBC,0BAA0B,EAAE,IAAI;IAChCC,0BAA0B,EAAE,IAAI;IAChCC,sBAAsB,EAAE,IAAI;IAC5BC,iBAAiB,EAAE,IAAI;IACvBC,qBAAqB,EAAE;EACzB,CAAC;EACDC,aAAa,EAAE;IACbC,UAAU,EAAE;MACVC,KAAK,EAAE,YAAY;MACnBC,QAAQ,EAAE,KAAK;MACfC,OAAO,EAAE;IACX,CAAC;IACDC,eAAe,EAAE;MACfF,QAAQ,EAAE,IAAI;MACdD,KAAK,EAAE;IACT,CAAC;IACDb,MAAM,EAAE;MACNc,QAAQ,EAAE,IAAI;MACdD,KAAK,EAAE;IACT,CAAC;IACDI,qBAAqB,EAAE,KAAK;IAC5BC,mBAAmB,EAAE;MACnBJ,QAAQ,EAAE,IAAI;MACdD,KAAK,EAAE;IACT,CAAC;IACDM,aAAa,EAAE;MACbD,mBAAmB,EAAE,GAAG;MACxBlB,MAAM,EAAE;IACV,CAAC;IACDoB,cAAc,EAAE;MACdF,mBAAmB,EAAE,GAAG;MACxBlB,MAAM,EAAE;IACV,CAAC;IACDqB,UAAU,EAAE;MACVP,QAAQ,EAAE,KAAK;MACfD,KAAK,EAAE;IACT;EACF;AACF,CAAC;AAAAS,OAAA,cAAAC,QAAA"}

package/configure/lib/image-container.js

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-container.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_button","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","valueOf","e","isImage","file","imageType","type","match","ImageContainer","_Component","_inherits2","_super","props","_this","_classCallCheck2","_defineProperty2","_assertThisInitialized2","onImageUpload","reader","FileReader","onloadend","readAsDataURL","preventDefault","target","files","handleFileRead","setState","dropzoneActive","_e$dataTransfer","dataTransfer","items","kind","getAsFile","makeDropzoneInactive","state","makeDropzoneActive","dragEnabled","input","click","_ref","_ref$target","offsetHeight","offsetWidth","naturalHeight","naturalWidth","_this$props","onUpdateImageDimension","imageDimensions","resizeHandle","resize","dimensions","height","width","imageAspectRatio","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","_this$state","maxImageWidth","maxImageHeight","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","fitsContainer","hasMinimumWidth","style","concat","handleDisableDrag","_createClass2","value","componentDidMount","imageSection","positionInfo","renderUploadControl","label","_this2","classes","createElement","onClick","handleInputClick","accept","className","onChange","handleUploadImage","ref","render","_this3","_this$props2","imageUrl","_this$state2","base","_extends2","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","drawableHeight","imageContainer","onLoad","handleOnImageLoad","src","undefined","maxWidth","maxHeight","alt","centered","Component","exports","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","_default","withStyles"],"sources":["../src/image-container.jsx"],"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"],"mappings":"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"}

package/configure/lib/index.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+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 _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _pieConfigureEvents = require("@pie-framework/pie-configure-events");
+var _react = _interopRequireDefault(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _debug = _interopRequireDefault(require("debug"));
+var _root = _interopRequireDefault(require("./root"));
+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; }
+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 log = (0, _debug["default"])('hotspot:configure');
+var DrawableResponseConfigure = /*#__PURE__*/function (_HTMLElement) {
+  (0, _inherits2["default"])(DrawableResponseConfigure, _HTMLElement);
+  var _super = _createSuper(DrawableResponseConfigure);
+  function DrawableResponseConfigure() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, DrawableResponseConfigure);
+    _this = _super.call(this);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "verifyRubric", /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(c) {
+        var _ref2, _ref2$withRubric, withRubric;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _ref2 = c || {}, _ref2$withRubric = _ref2.withRubric, withRubric = _ref2$withRubric === void 0 ? {} : _ref2$withRubric;
+              if (withRubric !== null && withRubric !== void 0 && withRubric.forceEnabled && !_this._model.rubricEnabled) {
+                _this._model.rubricEnabled = true;
+                _this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(_this._model));
+              }
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onModelChanged", function (m, reset) {
+      _this._model = m;
+      _this.dispatchModelUpdated(reset);
+      _this._render();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onConfigurationChanged", function (c) {
+      _this._configuration = c;
+      _this.verifyRubric(_this._configuration);
+      _this._render();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "insertImage", function (handler) {
+      _this.dispatchEvent(new _pieConfigureEvents.InsertImageEvent(handler));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onDeleteImage", function (src, done) {
+      _this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
+    });
+    _this._configuration = _defaults["default"].configuration;
+    _this._model = DrawableResponseConfigure.createDefaultModel({}, _this._configuration);
+    _this.onModelChanged = _this.onModelChanged.bind((0, _assertThisInitialized2["default"])(_this));
+    return _this;
+  }
+  (0, _createClass2["default"])(DrawableResponseConfigure, [{
+    key: "model",
+    set: function set(s) {
+      this._model = DrawableResponseConfigure.createDefaultModel(s, this._configuration);
+      this._render();
+    }
+  }, {
+    key: "configuration",
+    set: function set(c) {
+      this._configuration = c;
+      this.verifyRubric(this._configuration);
+      this._render();
+    }
+  }, {
+    key: "dispatchModelUpdated",
+    value: function dispatchModelUpdated(reset) {
+      var resetValue = !!reset;
+      this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(this._model, resetValue));
+    }
+  }, {
+    key: "insertSound",
+    value: function insertSound(handler) {
+      this.dispatchEvent(new _pieConfigureEvents.InsertSoundEvent(handler));
+    }
+  }, {
+    key: "onDeleteSound",
+    value: function onDeleteSound(src, done) {
+      this.dispatchEvent(new _pieConfigureEvents.DeleteSoundEvent(src, done));
+    }
+  }, {
+    key: "_render",
+    value: function _render() {
+      log('_render');
+      var element = /*#__PURE__*/_react["default"].createElement(_root["default"], {
+        model: this._model,
+        configuration: this._configuration,
+        onModelChanged: this.onModelChanged,
+        onConfigurationChanged: this.onConfigurationChanged,
+        imageSupport: {
+          add: this.insertImage,
+          "delete": this.onDeleteImage
+        },
+        uploadSoundSupport: {
+          add: this.insertSound.bind(this),
+          "delete": this.onDeleteSound.bind(this)
+        }
+      });
+      _reactDom["default"].render(element, this);
+    }
+  }]);
+  return DrawableResponseConfigure;
+}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
+exports["default"] = DrawableResponseConfigure;
+(0, _defineProperty2["default"])(DrawableResponseConfigure, "createDefaultModel", function () {
+  var _config$withRubric;
+  var model = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var config = arguments.length > 1 ? arguments[1] : undefined;
+  var defaultModel = _objectSpread(_objectSpread({}, _defaults["default"].model), model);
+  if (config !== null && config !== void 0 && (_config$withRubric = config.withRubric) !== null && _config$withRubric !== void 0 && _config$withRubric.forceEnabled && !defaultModel.rubricEnabled) {
+    defaultModel.rubricEnabled = true;
+  }
+  return defaultModel;
+});
+//# sourceMappingURL=index.js.map