@pie-element/drawing-response 12.1.2-next.1 → 12.1.2

package/configure/lib/button.js

@@ -0,0 +1,37 @@
+"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("@mui/material/styles");
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+const StyledButton = (0, _styles.styled)(_Button.default)({
+  marginLeft: 8
+});
+const CustomButton = ({
+  label,
+  onClick,
+  disabled
+}) => /*#__PURE__*/_react.default.createElement(StyledButton, {
+  onClick: onClick,
+  disabled: disabled,
+  size: "small",
+  variant: "contained"
+}, label);
+CustomButton.propTypes = {
+  disabled: _propTypes.default.bool,
+  label: _propTypes.default.string,
+  onClick: _propTypes.default.func
+};
+CustomButton.defaultProps = {
+  className: '',
+  disabled: false,
+  label: 'Add',
+  onClick: () => {}
+};
+var _default = exports.default = CustomButton;
+//# sourceMappingURL=button.js.map

package/configure/lib/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_Button","StyledButton","styled","Button","marginLeft","CustomButton","label","onClick","disabled","default","createElement","size","variant","propTypes","PropTypes","bool","string","func","defaultProps","className","_default","exports"],"sources":["../src/button.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport Button from '@mui/material/Button';\n\nconst StyledButton = styled(Button)({\n  marginLeft: 8,\n});\n\nconst CustomButton = ({ label, onClick, disabled }) => (\n  <StyledButton\n    onClick={onClick}\n    disabled={disabled}\n    size=\"small\"\n    variant=\"contained\">\n    {label}\n  </StyledButton>\n);\n\nCustomButton.propTypes = {\n  disabled: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func,\n};\n\nCustomButton.defaultProps = {\n  className: '',\n  disabled: false,\n  label: 'Add',\n  onClick: () => { },\n};\n\nexport default CustomButton;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,MAAMI,YAAY,GAAG,IAAAC,cAAM,EAACC,eAAM,CAAC,CAAC;EAClCC,UAAU,EAAE;AACd,CAAC,CAAC;AAEF,MAAMC,YAAY,GAAGA,CAAC;EAAEC,KAAK;EAAEC,OAAO;EAAEC;AAAS,CAAC,kBAChDb,MAAA,CAAAc,OAAA,CAAAC,aAAA,CAACT,YAAY;EACXM,OAAO,EAAEA,OAAQ;EACjBC,QAAQ,EAAEA,QAAS;EACnBG,IAAI,EAAC,OAAO;EACZC,OAAO,EAAC;AAAW,GAClBN,KACW,CACf;AAEDD,YAAY,CAACQ,SAAS,GAAG;EACvBL,QAAQ,EAAEM,kBAAS,CAACC,IAAI;EACxBT,KAAK,EAAEQ,kBAAS,CAACE,MAAM;EACvBT,OAAO,EAAEO,kBAAS,CAACG;AACrB,CAAC;AAEDZ,YAAY,CAACa,YAAY,GAAG;EAC1BC,SAAS,EAAE,EAAE;EACbX,QAAQ,EAAE,KAAK;EACfF,KAAK,EAAE,KAAK;EACZC,OAAO,EAAEA,CAAA,KAAM,CAAE;AACnB,CAAC;AAAC,IAAAa,QAAA,GAAAC,OAAA,CAAAZ,OAAA,GAEaJ,YAAY","ignoreList":[]}

package/configure/lib/defaults.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  model: {
+    backgroundImageEnabled: true,
+    imageDimensions: {
+      height: 0,
+      width: 0
+    },
+    imageUrl: '',
+    prompt: '',
+    promptEnabled: true,
+    spellCheckEnabled: true,
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom'
+  },
+  configuration: {
+    baseInputConfiguration: {
+      h3: {
+        disabled: true
+      },
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    backgroundImage: {
+      settings: true,
+      label: 'Background Image'
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    settingsPanelDisabled: false,
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric'
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: []
+    }
+  }
+};
+//# sourceMappingURL=defaults.js.map

package/configure/lib/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.js","names":["model","backgroundImageEnabled","imageDimensions","height","width","imageUrl","prompt","promptEnabled","spellCheckEnabled","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","toolbarEditorPosition","configuration","baseInputConfiguration","h3","disabled","audio","video","image","textAlign","showParagraphs","separateParagraphs","spellCheck","label","settings","enabled","backgroundImage","inputConfiguration","required","settingsPanelDisabled","maxImageWidth","maxImageHeight","withRubric","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options"],"sources":["../src/defaults.js"],"sourcesContent":["export default {\n  model: {\n    backgroundImageEnabled: true,\n    imageDimensions: { height: 0, width: 0 },\n    imageUrl: '',\n    prompt: '',\n    promptEnabled: true,\n    spellCheckEnabled: true,\n    studentInstructionsEnabled: true,\n    teacherInstructions: '',\n    teacherInstructionsEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    baseInputConfiguration: {\n      h3: { disabled: true },\n      audio: { disabled: false },\n      video: { disabled: false },\n      image: { disabled: false },\n      textAlign: { disabled: true },\n      showParagraphs: { disabled: false },\n      separateParagraphs: { disabled: true },\n    },\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      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    settingsPanelDisabled: false,\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\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    mathMlOptions: {\n      mmlOutput: false,\n      mmlEditing: false,\n    },\n    language: {\n      settings: false,\n      label: 'Specify Language',\n      enabled: false,\n    },\n    languageChoices: {\n      label: 'Language Choices',\n      options: [],\n    },\n  },\n};\n"],"mappings":";;;;;;iCAAe;EACbA,KAAK,EAAE;IACLC,sBAAsB,EAAE,IAAI;IAC5BC,eAAe,EAAE;MAAEC,MAAM,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAC;IACxCC,QAAQ,EAAE,EAAE;IACZC,MAAM,EAAE,EAAE;IACVC,aAAa,EAAE,IAAI;IACnBC,iBAAiB,EAAE,IAAI;IACvBC,0BAA0B,EAAE,IAAI;IAChCC,mBAAmB,EAAE,EAAE;IACvBC,0BAA0B,EAAE,IAAI;IAChCC,qBAAqB,EAAE;EACzB,CAAC;EACDC,aAAa,EAAE;IACbC,sBAAsB,EAAE;MACtBC,EAAE,EAAE;QAAEC,QAAQ,EAAE;MAAK,CAAC;MACtBC,KAAK,EAAE;QAAED,QAAQ,EAAE;MAAM,CAAC;MAC1BE,KAAK,EAAE;QAAEF,QAAQ,EAAE;MAAM,CAAC;MAC1BG,KAAK,EAAE;QAAEH,QAAQ,EAAE;MAAM,CAAC;MAC1BI,SAAS,EAAE;QAAEJ,QAAQ,EAAE;MAAK,CAAC;MAC7BK,cAAc,EAAE;QAAEL,QAAQ,EAAE;MAAM,CAAC;MACnCM,kBAAkB,EAAE;QAAEN,QAAQ,EAAE;MAAK;IACvC,CAAC;IACDO,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;IACDlB,MAAM,EAAE;MACNmB,QAAQ,EAAE,IAAI;MACdD,KAAK,EAAE,QAAQ;MACfI,kBAAkB,EAAE;QAClBX,KAAK,EAAE;UAAED,QAAQ,EAAE;QAAM,CAAC;QAC1BE,KAAK,EAAE;UAAEF,QAAQ,EAAE;QAAM,CAAC;QAC1BG,KAAK,EAAE;UAAEH,QAAQ,EAAE;QAAM;MAC3B,CAAC;MACDa,QAAQ,EAAE;IACZ,CAAC;IACDC,qBAAqB,EAAE,KAAK;IAC5BpB,mBAAmB,EAAE;MACnBe,QAAQ,EAAE,IAAI;MACdD,KAAK,EAAE,sBAAsB;MAC7BI,kBAAkB,EAAE;QAClBX,KAAK,EAAE;UAAED,QAAQ,EAAE;QAAM,CAAC;QAC1BE,KAAK,EAAE;UAAEF,QAAQ,EAAE;QAAM,CAAC;QAC1BG,KAAK,EAAE;UAAEH,QAAQ,EAAE;QAAM;MAC3B,CAAC;MACDa,QAAQ,EAAE;IACZ,CAAC;IACDE,aAAa,EAAE;MACbrB,mBAAmB,EAAE,GAAG;MACxBJ,MAAM,EAAE;IACV,CAAC;IACD0B,cAAc,EAAE;MACdtB,mBAAmB,EAAE,GAAG;MACxBJ,MAAM,EAAE;IACV,CAAC;IACD2B,UAAU,EAAE;MACVR,QAAQ,EAAE,KAAK;MACfD,KAAK,EAAE;IACT,CAAC;IACDU,aAAa,EAAE;MACbC,SAAS,EAAE,KAAK;MAChBC,UAAU,EAAE;IACd,CAAC;IACDC,QAAQ,EAAE;MACRZ,QAAQ,EAAE,KAAK;MACfD,KAAK,EAAE,kBAAkB;MACzBE,OAAO,EAAE;IACX,CAAC;IACDY,eAAe,EAAE;MACfd,KAAK,EAAE,kBAAkB;MACzBe,OAAO,EAAE;IACX;EACF;AACF,CAAC","ignoreList":[]}

package/configure/lib/image-container.js

@@ -0,0 +1,307 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ImageContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _button = _interopRequireDefault(require("./button"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const isImage = file => {
+  const imageType = /image.*/;
+  return file.type.match(imageType);
+};
+const BaseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(1)
+}));
+const Box = (0, _styles.styled)('div')(({
+  active
+}) => ({
+  border: active ? '1px solid #0032C2' : '1px solid #E0E1E6',
+  borderRadius: '5px'
+}));
+const CenteredDiv = (0, _styles.styled)('div')({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+});
+const DrawableHeight = (0, _styles.styled)('div')({
+  minHeight: 350
+});
+const Image = (0, _styles.styled)('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center'
+});
+const StyledImageContainer = (0, _styles.styled)('div')({
+  position: 'relative',
+  width: 'fit-content'
+});
+const ResizeHandle = (0, _styles.styled)('div')({
+  borderBottom: '1px solid #727272',
+  borderRight: '1px solid #727272',
+  bottom: '-10px',
+  cursor: 'se-resize',
+  height: '10px',
+  position: 'absolute',
+  right: '-10px',
+  width: '10px'
+});
+const HiddenInput = (0, _styles.styled)('input')({
+  display: 'none'
+});
+const Toolbar = (0, _styles.styled)('div')({
+  backgroundColor: '#ECEDF1',
+  borderBottom: '1px solid #E0E1E6',
+  borderTopLeftRadius: '5px',
+  borderTopRightRadius: '5px',
+  display: 'flex',
+  padding: '12px 8px'
+});
+class ImageContainer extends _react.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "handleFileRead", file => {
+      const {
+        onImageUpload,
+        insertImage
+      } = this.props;
+      const reader = new FileReader();
+      reader.onloadend = () => onImageUpload(reader.result);
+      reader.readAsDataURL(file);
+      if (insertImage) {
+        insertImage({
+          ...this.fakeImageHandler,
+          getChosenFile: () => file,
+          isPasted: true
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleUploadImage", e => {
+      e.preventDefault();
+      const file = e.target.files[0];
+      this.handleFileRead(file);
+    });
+    (0, _defineProperty2.default)(this, "makeDropzoneActive", () => this.setState({
+      dropzoneActive: true
+    }));
+    (0, _defineProperty2.default)(this, "makeDropzoneInactive", () => this.setState({
+      dropzoneActive: false
+    }));
+    (0, _defineProperty2.default)(this, "handleOnDrop", e => {
+      e.preventDefault();
+      const {
+        items,
+        files
+      } = e.dataTransfer;
+      if (items && items[0].kind === 'file') {
+        const file = items[0].getAsFile();
+        if (isImage(file)) {
+          this.handleFileRead(file);
+        }
+      } else if (isImage(files[0])) {
+        this.handleFileRead(files[0]);
+      }
+      this.makeDropzoneInactive();
+    });
+    (0, _defineProperty2.default)(this, "handleOnDragOver", e => {
+      e.preventDefault();
+      const {
+        dropzoneActive
+      } = this.state;
+      if (!dropzoneActive) {
+        this.makeDropzoneActive();
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleOnDragExit", e => {
+      e.preventDefault();
+      this.makeDropzoneInactive();
+    });
+    (0, _defineProperty2.default)(this, "handleEnableDrag", () => this.setState({
+      dragEnabled: true
+    }));
+    (0, _defineProperty2.default)(this, "handleDisableDrag", () => this.setState({
+      dragEnabled: false
+    }));
+    (0, _defineProperty2.default)(this, "handleInputClick", () => {
+      const {
+        insertImage
+      } = this.props;
+      if (insertImage) {
+        insertImage(this.fakeImageHandler);
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleOnImageLoad", ({
+      target: {
+        offsetHeight,
+        offsetWidth,
+        naturalHeight,
+        naturalWidth
+      }
+    }) => {
+      const {
+        onUpdateImageDimension,
+        imageDimensions
+      } = this.props;
+      const resizeHandle = this.resize;
+      const dimensions = {
+        height: imageDimensions && imageDimensions.height || offsetHeight || naturalHeight,
+        width: imageDimensions && imageDimensions.width || offsetWidth || naturalWidth
+      };
+
+      // check if aspect ratio is not respected on replacing image
+      const imageAspectRatio = naturalWidth / naturalHeight;
+      if (dimensions.width !== dimensions.height * imageAspectRatio) {
+        dimensions.width = dimensions.height * imageAspectRatio;
+      }
+      this.setState({
+        dimensions
+      });
+      onUpdateImageDimension(dimensions);
+      resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
+    });
+    (0, _defineProperty2.default)(this, "initialiseResize", () => {
+      window.addEventListener('mousemove', this.startResizing, false);
+      window.addEventListener('mouseup', this.stopResizing, false);
+    });
+    (0, _defineProperty2.default)(this, "stopResizing", () => {
+      const {
+        onUpdateImageDimension
+      } = this.props;
+      const {
+        dimensions
+      } = this.state;
+      this.handleEnableDrag();
+      onUpdateImageDimension(dimensions);
+      window.removeEventListener('mousemove', this.startResizing, false);
+      window.removeEventListener('mouseup', this.stopResizing, false);
+    });
+    (0, _defineProperty2.default)(this, "startResizing", e => {
+      const box = this.image;
+      const {
+        maxImageWidth,
+        maxImageHeight,
+        dimensions
+      } = this.state;
+      const bounds = e.target.getBoundingClientRect();
+      const x = e.clientX - bounds.left;
+      const y = e.clientY - bounds.top;
+      const imageAspectRatio = dimensions.width / dimensions.height;
+      const fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;
+      const hasMinimumWidth = x > 150 && y > 150;
+      if (fitsContainer && hasMinimumWidth && box) {
+        box.style.width = `${x}px`;
+        box.style.height = `${x / imageAspectRatio}px`;
+        this.setState({
+          dimensions: {
+            width: x,
+            height: x / imageAspectRatio
+          }
+        });
+      }
+      this.handleDisableDrag();
+    });
+    this.state = {
+      maxImageWidth: '100%',
+      maxImageHeight: 'auto',
+      dragEnabled: true,
+      dropzoneActive: false
+    };
+    this.fakeImageHandler = {
+      cancel: () => {},
+      done: (a, url) => this.props.onImageUpload(url),
+      fileChosen: () => {},
+      progress: () => {}
+    };
+  }
+  componentDidMount() {
+    if (this.imageSection) {
+      const positionInfo = this.imageSection.getBoundingClientRect();
+      const {
+        height,
+        width
+      } = positionInfo;
+      this.setState({
+        maxImageWidth: width,
+        maxImageHeight: height
+      });
+    }
+  }
+  renderUploadControl(label) {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_button.default, {
+      label: label,
+      onClick: this.handleInputClick
+    }), /*#__PURE__*/_react.default.createElement(HiddenInput, {
+      accept: "image/*",
+      onChange: this.handleUploadImage,
+      ref: ref => {
+        this.input = ref;
+      },
+      type: "file"
+    }));
+  }
+  render() {
+    const {
+      imageUrl,
+      imageDimensions
+    } = this.props;
+    const {
+      dropzoneActive,
+      dragEnabled,
+      maxImageHeight,
+      maxImageWidth
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(BaseContainer, null, /*#__PURE__*/_react.default.createElement(Box, (0, _extends2.default)({
+      active: dropzoneActive
+    }, dragEnabled ? {
+      onDragExit: this.handleOnDragExit,
+      onDragLeave: this.handleOnDragExit,
+      onDragOver: this.handleOnDragOver,
+      onDrop: this.handleOnDrop
+    } : {}), /*#__PURE__*/_react.default.createElement(Toolbar, null, this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')), /*#__PURE__*/_react.default.createElement(DrawableHeight, {
+      ref: ref => {
+        this.imageSection = ref;
+      }
+    }, imageUrl ? /*#__PURE__*/_react.default.createElement(StyledImageContainer, null, /*#__PURE__*/_react.default.createElement(Image, {
+      height: "auto",
+      onLoad: this.handleOnImageLoad,
+      ref: ref => {
+        this.image = ref;
+      },
+      src: imageUrl,
+      style: {
+        width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
+        maxWidth: maxImageWidth,
+        maxHeight: maxImageHeight
+      },
+      alt: ""
+    }), /*#__PURE__*/_react.default.createElement(ResizeHandle, {
+      ref: ref => {
+        this.resize = ref;
+      }
+    })) : /*#__PURE__*/_react.default.createElement(DrawableHeight, {
+      as: CenteredDiv
+    }, /*#__PURE__*/_react.default.createElement("label", null, "Drag and drop or upload image from computer"), /*#__PURE__*/_react.default.createElement("br", null), this.renderUploadControl('Upload Image')))));
+  }
+}
+exports.ImageContainer = ImageContainer;
+(0, _defineProperty2.default)(ImageContainer, "propTypes", {
+  imageDimensions: _propTypes.default.object
+});
+(0, _defineProperty2.default)(ImageContainer, "defaultProps", {});
+ImageContainer.propTypes = {
+  imageUrl: _propTypes.default.string.isRequired,
+  onImageUpload: _propTypes.default.func.isRequired,
+  onUpdateImageDimension: _propTypes.default.func.isRequired,
+  insertImage: _propTypes.default.func
+};
+var _default = exports.default = ImageContainer;
+//# 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","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","isImage","file","imageType","type","match","BaseContainer","styled","theme","marginTop","spacing","Box","active","border","borderRadius","CenteredDiv","alignItems","display","flexDirection","justifyContent","DrawableHeight","minHeight","Image","StyledImageContainer","position","width","ResizeHandle","borderBottom","borderRight","bottom","cursor","height","right","HiddenInput","Toolbar","backgroundColor","borderTopLeftRadius","borderTopRightRadius","padding","ImageContainer","Component","constructor","props","_defineProperty2","onImageUpload","insertImage","reader","FileReader","onloadend","result","readAsDataURL","fakeImageHandler","getChosenFile","isPasted","preventDefault","target","files","handleFileRead","setState","dropzoneActive","items","dataTransfer","kind","getAsFile","makeDropzoneInactive","state","makeDropzoneActive","dragEnabled","offsetHeight","offsetWidth","naturalHeight","naturalWidth","onUpdateImageDimension","imageDimensions","resizeHandle","resize","dimensions","imageAspectRatio","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","maxImageHeight","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","fitsContainer","hasMinimumWidth","style","handleDisableDrag","cancel","done","a","url","fileChosen","progress","componentDidMount","imageSection","positionInfo","renderUploadControl","label","createElement","onClick","handleInputClick","accept","onChange","handleUploadImage","ref","input","render","imageUrl","_extends2","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onLoad","handleOnImageLoad","src","undefined","maxWidth","maxHeight","alt","as","exports","PropTypes","object","propTypes","string","isRequired","func","_default"],"sources":["../src/image-container.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nimport Button from './button';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n  return file.type.match(imageType);\n};\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n  marginTop: theme.spacing(1),\n}));\n\nconst Box = styled('div')(({ active }) => ({\n  border: active ? '1px solid #0032C2' : '1px solid #E0E1E6',\n  borderRadius: '5px',\n}));\n\nconst CenteredDiv = styled('div')({\n  alignItems: 'center',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'center',\n});\n\nconst DrawableHeight = styled('div')({\n  minHeight: 350,\n});\n\nconst Image = styled('img')({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nconst StyledImageContainer = styled('div')({\n  position: 'relative',\n  width: 'fit-content',\n});\n\nconst ResizeHandle = styled('div')({\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\nconst HiddenInput = styled('input')({\n  display: 'none',\n});\n\nconst Toolbar = styled('div')({\n  backgroundColor: '#ECEDF1',\n  borderBottom: '1px solid #E0E1E6',\n  borderTopLeftRadius: '5px',\n  borderTopRightRadius: '5px',\n  display: 'flex',\n  padding: '12px 8px',\n});\n\nexport class ImageContainer extends Component {\n\n  static propTypes = {\n    imageDimensions: PropTypes.object,\n  };\n\n  static defaultProps = {};\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      maxImageWidth: '100%',\n      maxImageHeight: 'auto',\n      dragEnabled: true,\n      dropzoneActive: false,\n    };\n    this.fakeImageHandler = {\n      cancel: () => {},\n      done: (a, url) => this.props.onImageUpload(url),\n      fileChosen: () => {},\n      progress: () => {},\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, insertImage } = this.props;\n    const reader = new FileReader();\n\n    reader.onloadend = () => onImageUpload(reader.result);\n    reader.readAsDataURL(file);\n\n    if (insertImage) {\n      insertImage({\n        ...this.fakeImageHandler,\n        getChosenFile: () => file,\n        isPasted: true,\n      });\n    }\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 = () => {\n    const { insertImage } = this.props;\n\n    if (insertImage) {\n      insertImage(this.fakeImageHandler);\n    }\n  };\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    return (\n      <div>\n        <Button label={label} onClick={this.handleInputClick} />\n        <HiddenInput\n          accept=\"image/*\"\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 { imageUrl, imageDimensions } = this.props;\n    const { dropzoneActive, dragEnabled, maxImageHeight, maxImageWidth } = this.state;\n\n    return (\n      <BaseContainer>\n        <Box\n          active={dropzoneActive}\n          {...(dragEnabled\n            ? {\n                onDragExit: this.handleOnDragExit,\n                onDragLeave: this.handleOnDragExit,\n                onDragOver: this.handleOnDragOver,\n                onDrop: this.handleOnDrop,\n              }\n            : {})}\n        >\n          <Toolbar>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</Toolbar>\n\n          <DrawableHeight\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n          >\n            {imageUrl ? (\n              <StyledImageContainer>\n                <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                <ResizeHandle\n                  ref={(ref) => {\n                    this.resize = ref;\n                  }}\n                />\n              </StyledImageContainer>\n            ) : (\n              <DrawableHeight as={CenteredDiv}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                {this.renderUploadControl('Upload Image')}\n              </DrawableHeight>\n            )}\n          </DrawableHeight>\n        </Box>\n      </BaseContainer>\n    );\n  }\n}\n\nImageContainer.propTypes = {\n  imageUrl: PropTypes.string.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  insertImage: PropTypes.func,\n};\n\nexport default ImageContainer;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/index.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _pieConfigureEvents = require("@pie-framework/pie-configure-events");
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _debug = _interopRequireDefault(require("debug"));
+var _root = _interopRequireDefault(require("./root"));
+var _defaults = _interopRequireDefault(require("./defaults"));
+const log = (0, _debug.default)('hotspot:configure');
+class DrawableResponseConfigure extends HTMLElement {
+  constructor() {
+    super();
+    (0, _defineProperty2.default)(this, "onModelChanged", (m, reset) => {
+      this._model = m;
+      this.dispatchModelUpdated(reset);
+      this._render();
+    });
+    (0, _defineProperty2.default)(this, "onConfigurationChanged", c => {
+      this._configuration = c;
+      this._render();
+    });
+    (0, _defineProperty2.default)(this, "insertImage", handler => {
+      this.dispatchEvent(new _pieConfigureEvents.InsertImageEvent(handler));
+    });
+    (0, _defineProperty2.default)(this, "onDeleteImage", (src, done) => {
+      this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
+    });
+    this._root = null;
+    this._configuration = _defaults.default.configuration;
+
+    // if configuration.withRubric.forceEnabled is true, then we
+    // update the configuration (we do not want to display the toggle in the Settings Panel)
+    if (this._configuration.withRubric?.forceEnabled) {
+      this._configuration.withRubric.settings = false;
+    }
+    this._model = DrawableResponseConfigure.createDefaultModel({}, this._configuration);
+    this.onModelChanged = this.onModelChanged.bind(this);
+  }
+  set model(s) {
+    this._model = DrawableResponseConfigure.createDefaultModel(s, this._configuration);
+    this._render();
+  }
+  set configuration(c) {
+    const newConfiguration = {
+      ..._defaults.default.configuration,
+      ...c
+    };
+    this._configuration = newConfiguration;
+    const {
+      withRubric = {}
+    } = c || {};
+
+    // if configuration.withRubric.forceEnabled is true, then we update the model
+    // without triggering the Model Updated event (for more details, check documentation)
+    // and also update the configuration (we do not want to display the toggle in the Settings Panel)
+    if (withRubric?.forceEnabled) {
+      this._configuration.withRubric.settings = false;
+      if (!this._model.rubricEnabled) {
+        this._model.rubricEnabled = true;
+      }
+    }
+
+    // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+    if (newConfiguration?.language?.enabled) {
+      if (newConfiguration?.languageChoices?.options?.length) {
+        this._model.language = newConfiguration?.languageChoices.options[0].value;
+      }
+    } else if (newConfiguration.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      }
+
+      // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+    this._render();
+  }
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+    this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(this._model, resetValue));
+  }
+  insertSound(handler) {
+    this.dispatchEvent(new _pieConfigureEvents.InsertSoundEvent(handler));
+  }
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new _pieConfigureEvents.DeleteSoundEvent(src, done));
+  }
+  _render() {
+    log('_render');
+    let 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)
+      }
+    });
+    if (!this._root) {
+      this._root = (0, _client.createRoot)(this);
+    }
+    this._root.render(element);
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = DrawableResponseConfigure;
+(0, _defineProperty2.default)(DrawableResponseConfigure, "createDefaultModel", (model = {}, config) => {
+  const defaultModel = {
+    ..._defaults.default.model,
+    ...model
+  };
+
+  // if configuration.withRubric.forceEnabled is true, then we update the model
+  // without triggering the Model Updated event (for more details, check documentation)
+  if (config?.withRubric?.forceEnabled && !defaultModel.rubricEnabled) {
+    defaultModel.rubricEnabled = true;
+  }
+  return defaultModel;
+});
+//# sourceMappingURL=index.js.map