npm - @pie-element/drawing-response - Versions diffs - 3.9.21 → 4.1.1 - Mend

@pie-element/drawing-response 3.9.21 → 4.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/CHANGELOG.md +44 -0
package/configure/CHANGELOG.md +43 -0
package/configure/lib/defaults.js +8 -0
package/configure/lib/defaults.js.map +1 -1
package/configure/lib/image-container.js +1 -4
package/configure/lib/image-container.js.map +1 -1
package/configure/lib/root.js +13 -3
package/configure/lib/root.js.map +1 -1
package/configure/package.json +3 -3
package/configure/src/__tests__/__snapshots__/root.test.jsx.snap +10 -0
package/configure/src/defaults.js +8 -0
package/configure/src/image-container.jsx +1 -5
package/configure/src/root.jsx +9 -0
package/docs/config-schema.json +63 -0
package/docs/config-schema.json.md +49 -1
package/docs/pie-schema.json +21 -0
package/docs/pie-schema.json.md +16 -0
package/lib/drawing-response/container.js +13 -8
package/lib/drawing-response/container.js.map +1 -1
package/lib/drawing-response/drawable-image.js +1 -1
package/lib/drawing-response/drawable-image.js.map +1 -1
package/lib/drawing-response/drawable-main.js +8 -2
package/lib/drawing-response/drawable-main.js.map +1 -1
package/package.json +4 -4
package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap +154 -158
package/src/drawing-response/container.jsx +22 -20
package/src/drawing-response/drawable-image.jsx +1 -1
package/src/drawing-response/drawable-main.jsx +6 -2

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [4.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@4.1.0...@pie-element/drawing-response@4.1.1) (2022-07-19)
+**Note:** Version bump only for package @pie-element/drawing-response
+# [4.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@4.0.0...@pie-element/drawing-response@4.1.0) (2022-06-28)
+### Bug Fixes
+* **drawing-response:** PD-1839 do not set image width if it's 0 ([ba4e321](https://github.com/pie-framework/pie-elements/commit/ba4e321f4fe3252e93ed125efbf93d684a2740f0))
+* add missing prop ([fd4220c](https://github.com/pie-framework/pie-elements/commit/fd4220c60d519dccd9a37ab3639d4feaa90a58a4))
+* **drawing-response:** fix width of image not being rendered correctly PD-1839 ([5599ff5](https://github.com/pie-framework/pie-elements/commit/5599ff5c4d03a1d0d86c687f2b781b92903e5a63))
+### Features
+* **drawing-response:** add maxImageWidth and maxImageHeight props PD-1801 ([4f1fb5d](https://github.com/pie-framework/pie-elements/commit/4f1fb5dfa4616c194eefd1702854a5aaa413ce1f))
+* Touch screen support for Drawing Response PD-1633 ([9d13832](https://github.com/pie-framework/pie-elements/commit/9d13832075cc84528a9766a087c0bcc77d38e6d2))
+# [4.0.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.21...@pie-element/drawing-response@4.0.0) (2022-06-28)
+### chore
+* Merge master with develop. ([cdca48a](https://github.com/pie-framework/pie-elements/commit/cdca48abaa1d4179e4a961e13d171e14b7ed2444))
+### BREAKING CHANGES
+* Image percent buttons were removed from toolbar.
+New properties maxImageWidth and maxImageHeight were added.
 ## [3.9.21](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.20...@pie-element/drawing-response@3.9.21) (2022-06-13)
 **Note:** Version bump only for package @pie-element/drawing-response

package/configure/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [4.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.0...@pie-element/drawing-response-configure@4.1.1) (2022-07-19)
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+# [4.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.0.0...@pie-element/drawing-response-configure@4.1.0) (2022-06-28)
+### Bug Fixes
+* **drawing-response:** PD-1839 do not set image width if it's 0 ([ba4e321](https://github.com/pie-framework/pie-elements/commit/ba4e321f4fe3252e93ed125efbf93d684a2740f0))
+* add missing prop ([fd4220c](https://github.com/pie-framework/pie-elements/commit/fd4220c60d519dccd9a37ab3639d4feaa90a58a4))
+* **drawing-response:** fix width of image not being rendered correctly PD-1839 ([5599ff5](https://github.com/pie-framework/pie-elements/commit/5599ff5c4d03a1d0d86c687f2b781b92903e5a63))
+### Features
+* **drawing-response:** add maxImageWidth and maxImageHeight props PD-1801 ([4f1fb5d](https://github.com/pie-framework/pie-elements/commit/4f1fb5dfa4616c194eefd1702854a5aaa413ce1f))
+# [4.0.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.25...@pie-element/drawing-response-configure@4.0.0) (2022-06-28)
+### chore
+* Merge master with develop. ([cdca48a](https://github.com/pie-framework/pie-elements/commit/cdca48abaa1d4179e4a961e13d171e14b7ed2444))
+### BREAKING CHANGES
+* Image percent buttons were removed from toolbar.
+New properties maxImageWidth and maxImageHeight were added.
 ## [3.2.25](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.24...@pie-element/drawing-response-configure@3.2.25) (2022-06-13)
 **Note:** Version bump only for package @pie-element/drawing-response-configure

package/configure/lib/defaults.js CHANGED Viewed

@@ -36,6 +36,14 @@ var _default = {
     teacherInstructions: {
       settings: true,
       label: 'Teacher Instructions'
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300
     }
   }
 };

package/configure/lib/defaults.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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","teacherInstructions"],"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,EAAC,IAXb;AAYLC,IAAAA,qBAAqB,EAAE;AAZlB,GADM;AAebC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE;AACVC,MAAAA,KAAK,EAAE,YADG;AAEVC,MAAAA,QAAQ,EAAC,KAFC;AAGVC,MAAAA,OAAO,EAAC;AAHE,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,mBAAmB,EAAE;AACnBH,MAAAA,QAAQ,EAAE,IADS;AAEnBD,MAAAA,KAAK,EAAE;AAFY;~~AAdR~~;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 teacherInstructions: {\n settings: true,\n label: 'Teacher Instructions',\n }\n }\n};\n"],"file":"defaults.js"}
1	+ {"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","teacherInstructions","maxImageWidth","maxImageHeight"],"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,EAAC,IAXb;AAYLC,IAAAA,qBAAqB,EAAE;AAZlB,GADM;AAebC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE;AACVC,MAAAA,KAAK,EAAE,YADG;AAEVC,MAAAA,QAAQ,EAAC,KAFC;AAGVC,MAAAA,OAAO,EAAC;AAHE,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,mBAAmB,EAAE;AACnBH,MAAAA,QAAQ,EAAE,IADS;AAEnBD,MAAAA,KAAK,EAAE;AAFY,KAdR;AAkBbK,IAAAA,aAAa,EAAE;AACbD,MAAAA,mBAAmB,EAAE,GADR;AAEbjB,MAAAA,MAAM,EAAE;AAFK,KAlBF;AAsBbmB,IAAAA,cAAc,EAAE;AACdF,MAAAA,mBAAmB,EAAE,GADP;AAEdjB,MAAAA,MAAM,EAAE;AAFM;AAtBH;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 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 }\n};\n"],"file":"defaults.js"}

package/configure/lib/image-container.js CHANGED Viewed

@@ -169,8 +169,6 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
       var imageAspectRatio = dimensions.width / dimensions.height;
       var fitsContainer = x <= maxImageWidth + 5;
       var hasMinimumWidth = x > 150 && y > 150;
-      var keepAspectRatioWidth = x > y ? x : 'auto';
-      var keepAspectRatioHeight = x > y ? 'auto' : y;
       if (fitsContainer && hasMinimumWidth) {
         box.style.width = "".concat(x, "px");
@@ -240,8 +238,7 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
           dropzoneActive = _this$state2.dropzoneActive,
           dragEnabled = _this$state2.dragEnabled,
           maxImageHeight = _this$state2.maxImageHeight,
-          maxImageWidth = _this$state2.maxImageWidth,
-          dimensions = _this$state2.dimensions;
+          maxImageWidth = _this$state2.maxImageWidth;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({

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

	@@ -1 +1 @@
1	- {"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","onUpdateImageDimension","resizeHandle","resize","dimensions","height","width","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","imageAspectRatio","fitsContainer","hasMinimumWidth","keepAspectRatioWidth","keepAspectRatioHeight","style","handleDisableDrag","maxImageHeight","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","imageDimensions","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 } }) => {\n const { onUpdateImageDimension } = this.props;\n const resizeHandle = this.resize;\n\n const dimensions = {\n height: offsetHeight,\n width: offsetWidth,\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, 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\n const fitsContainer = x <= maxImageWidth + 5;\n const hasMinimumWidth = x > 150 && y > 150;\n\n const keepAspectRatioWidth = x > y ? x : 'auto';\n const keepAspectRatioHeight = x > y ? 'auto' : y;\n\n if (fitsContainer && hasMinimumWidth) {\n box.style.width = `${x}px`;\n box.style.height = `${x/imageAspectRatio}px`;\n\n this.setState({\n dimensions: {\n height:x/imageAspectRatio,\n width:x,\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 {\n dropzoneActive,\n dragEnabled,\n maxImageHeight,\n maxImageWidth,\n dimensions,\n } = this.state;\n\n return (\n <div className={classes.base}>\n <div\n className={`${classes.box} ${\n dropzoneActive ? classes.boxActive : ''\n }`}\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}>\n {this.renderUploadControl(\n imageUrl ? 'Replace Image' : 'Upload Image'\n )}\n </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"}
1	+ {"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","onUpdateImageDimension","resizeHandle","resize","dimensions","height","width","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","imageAspectRatio","fitsContainer","hasMinimumWidth","style","handleDisableDrag","maxImageHeight","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","imageDimensions","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 } }) => {\n const { onUpdateImageDimension } = this.props;\n const resizeHandle = this.resize;\n\n const dimensions = {\n height: offsetHeight,\n width: offsetWidth,\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, 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\n const fitsContainer = x <= maxImageWidth + 5;\n const hasMinimumWidth = x > 150 && y > 150;\n\n if (fitsContainer && hasMinimumWidth) {\n box.style.width = `${x}px`;\n box.style.height = `${x/imageAspectRatio}px`;\n\n this.setState({\n dimensions: {\n height:x/imageAspectRatio,\n width:x,\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 {\n dropzoneActive,\n dragEnabled,\n maxImageHeight,\n maxImageWidth\n } = this.state;\n\n return (\n <div className={classes.base}>\n <div\n className={`${classes.box} ${\n dropzoneActive ? classes.boxActive : ''\n }`}\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}>\n {this.renderUploadControl(\n imageUrl ? 'Replace Image' : 'Upload Image'\n )}\n </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"}

package/configure/lib/root.js CHANGED Viewed

@@ -118,7 +118,11 @@ var Root = /*#__PURE__*/function (_React$Component) {
           _ref$teacherInstructi = _ref.teacherInstructions,
           teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
           _ref$spellCheck = _ref.spellCheck,
-          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck;
+          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
+          _ref$maxImageWidth = _ref.maxImageWidth,
+          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
+          _ref$maxImageHeight = _ref.maxImageHeight,
+          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight;
       var _ref2 = model || {},
           teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
@@ -127,6 +131,8 @@ var Root = /*#__PURE__*/function (_React$Component) {
           backgroundImageEnabled = _ref2.backgroundImageEnabled;
       var toolbarOpts = {};
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
       switch (model.toolbarEditorPosition) {
         case 'top':
@@ -168,7 +174,9 @@ var Root = /*#__PURE__*/function (_React$Component) {
         imageSupport: imageSupport,
         nonEmpty: false,
         toolbarOpts: toolbarOpts,
-        spellCheck: spellCheckEnabled
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight
       })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: "Item Stem",
         className: classes.prompt
@@ -177,7 +185,9 @@ var Root = /*#__PURE__*/function (_React$Component) {
         onChange: this.onPromptChanged,
         toolbarOpts: toolbarOpts,
         spellCheck: spellCheckEnabled,
-        imageSupport: imageSupport
+        imageSupport: imageSupport,
+        maxImageWidth: defaultImageMaxWidth,
+        maxImageHeight: defaultImageMaxHeight
       })), backgroundImageEnabled && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.label,
         variant: "subheading"

package/configure/lib/root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","prompt","props","model","onModelChanged","update","teacherInstructions","dimensions","imageDimensions","imageUrl","classes","configuration","imageSupport","onConfigurationChanged","backgroundImage","spellCheck","teacherInstructionsEnabled","promptEnabled","spellCheckEnabled","backgroundImageEnabled","toolbarOpts","toolbarEditorPosition","position","base","Settings","label","Properties","regular","onTeacherInstructionsChanged","onPromptChanged","onUpdateImageDimension","onImageUpload","React","Component","styles","theme","marginTop","spacing","unit","paddingTop","width","marginBottom","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageContainer from './image-container';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst { Panel, toggle } = settings;\n\nexport class Root extends React.Component {\n onPromptChanged = (prompt) => {\n const { model, onModelChanged } = this.props;\n const update = cloneDeep(model);\n\n onModelChanged({\n ...update,\n prompt,\n });\n };\n\n onTeacherInstructionsChanged = (teacherInstructions) => {\n const { model, onModelChanged } = this.props;\n\n onModelChanged({\n ...model,\n teacherInstructions,\n });\n };\n\n onUpdateImageDimension = (dimensions) => {\n const { model, onModelChanged } = this.props;\n\n onModelChanged({\n ...model,\n imageDimensions: dimensions,\n });\n };\n\n onImageUpload = (imageUrl) => {\n const { model, onModelChanged } = this.props;\n\n onModelChanged({\n ...model,\n imageUrl,\n });\n };\n\n render() {\n const {\n classes,\n configuration,\n model,\n imageSupport,\n onConfigurationChanged,\n onModelChanged,\n } = this.props;\n const {\n backgroundImage = {},\n prompt = {},\n teacherInstructions = {},\n spellCheck = {},\n } = configuration \|\| {};\n const { teacherInstructionsEnabled, promptEnabled, spellCheckEnabled, backgroundImageEnabled } =\n model \|\| {};\n const toolbarOpts = {};\n\n switch (model.toolbarEditorPosition) {\n case 'top':\n toolbarOpts.position = 'top';\n break;\n default:\n toolbarOpts.position = 'bottom';\n break;\n }\n\n return (\n <div className={classes.base}>\n <layout.ConfigLayout\n settings={\n <Panel\n model={model}\n onChangeModel={onModelChanged}\n configuration={configuration}\n onChangeConfiguration={onConfigurationChanged}\n groups={{\n Settings: {\n backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),\n promptEnabled: prompt.settings && toggle(prompt.label)\n },\n Properties: {\n teacherInstructionsEnabled:\n teacherInstructions.settings &&\n toggle(teacherInstructions.label),\n spellCheckEnabled:\n spellCheck.settings && toggle(spellCheck.label),\n },\n }}\n />\n }\n >\n <div className={classes.regular}>\n {teacherInstructionsEnabled && (\n <InputContainer\n label={teacherInstructions.label}\n className={classes.prompt}\n >\n <EditableHtml\n markup={model.teacherInstructions \|\| ''}\n onChange={this.onTeacherInstructionsChanged}\n imageSupport={imageSupport}\n nonEmpty={false}\n toolbarOpts={toolbarOpts}\n spellCheck={spellCheckEnabled}\n />\n </InputContainer>\n )}\n\n {promptEnabled && (\n <InputContainer label=\"Item Stem\" className={classes.prompt}>\n <EditableHtml\n markup={model.prompt}\n onChange={this.onPromptChanged}\n toolbarOpts={toolbarOpts}\n spellCheck={spellCheckEnabled}\n imageSupport={imageSupport}\n />\n </InputContainer>\n )}\n\n {backgroundImageEnabled && (\n <div>\n <Typography className={classes.label} variant=\"subheading\">\n Define Background Image\n </Typography>\n\n <ImageContainer\n imageUrl={model.imageUrl}\n onUpdateImageDimension={this.onUpdateImageDimension}\n onImageUpload={this.onImageUpload}\n imageDimensions={model.imageDimensions}\n />\n </div>\n )}\n </div>\n </layout.ConfigLayout>\n </div>\n );\n }\n}\n\nconst styles = (theme) => ({\n base: {\n marginTop: theme.spacing.unit * 3,\n },\n label: {\n marginTop: theme.spacing.unit * 4,\n },\n prompt: {\n paddingTop: theme.spacing.unit * 2,\n width: '100%',\n },\n regular: {\n marginBottom: theme.spacing.unit * 3,\n },\n});\n\nRoot.propTypes = {\n classes: PropTypes.object.isRequired,\n configuration: PropTypes.object,\n model: PropTypes.object.isRequired,\n imageSupport: PropTypes.shape({\n add: PropTypes.func,\n delete: PropTypes.func,\n }),\n onModelChanged: PropTypes.func.isRequired,\n onConfigurationChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}
1	+ {"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","prompt","props","model","onModelChanged","update","teacherInstructions","dimensions","imageDimensions","imageUrl","classes","configuration","imageSupport","onConfigurationChanged","backgroundImage","spellCheck","maxImageWidth","maxImageHeight","teacherInstructionsEnabled","promptEnabled","spellCheckEnabled","backgroundImageEnabled","toolbarOpts","defaultImageMaxWidth","defaultImageMaxHeight","toolbarEditorPosition","position","base","Settings","label","Properties","regular","onTeacherInstructionsChanged","onPromptChanged","onUpdateImageDimension","onImageUpload","React","Component","styles","theme","marginTop","spacing","unit","paddingTop","width","marginBottom","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageContainer from './image-container';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst { Panel, toggle } = settings;\n\nexport class Root extends React.Component {\n onPromptChanged = (prompt) => {\n const { model, onModelChanged } = this.props;\n const update = cloneDeep(model);\n\n onModelChanged({\n ...update,\n prompt,\n });\n };\n\n onTeacherInstructionsChanged = (teacherInstructions) => {\n const { model, onModelChanged } = this.props;\n\n onModelChanged({\n ...model,\n teacherInstructions,\n });\n };\n\n onUpdateImageDimension = (dimensions) => {\n const { model, onModelChanged } = this.props;\n\n onModelChanged({\n ...model,\n imageDimensions: dimensions,\n });\n };\n\n onImageUpload = (imageUrl) => {\n const { model, onModelChanged } = this.props;\n\n onModelChanged({\n ...model,\n imageUrl,\n });\n };\n\n render() {\n const {\n classes,\n configuration,\n model,\n imageSupport,\n onConfigurationChanged,\n onModelChanged,\n } = this.props;\n const {\n backgroundImage = {},\n prompt = {},\n teacherInstructions = {},\n spellCheck = {},\n maxImageWidth = {},\n maxImageHeight = {}\n } = configuration \|\| {};\n const { teacherInstructionsEnabled, promptEnabled, spellCheckEnabled, backgroundImageEnabled } =\n model \|\| {};\n const toolbarOpts = {};\n\n const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n switch (model.toolbarEditorPosition) {\n case 'top':\n toolbarOpts.position = 'top';\n break;\n default:\n toolbarOpts.position = 'bottom';\n break;\n }\n\n return (\n <div className={classes.base}>\n <layout.ConfigLayout\n settings={\n <Panel\n model={model}\n onChangeModel={onModelChanged}\n configuration={configuration}\n onChangeConfiguration={onConfigurationChanged}\n groups={{\n Settings: {\n backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),\n promptEnabled: prompt.settings && toggle(prompt.label)\n },\n Properties: {\n teacherInstructionsEnabled:\n teacherInstructions.settings &&\n toggle(teacherInstructions.label),\n spellCheckEnabled:\n spellCheck.settings && toggle(spellCheck.label),\n },\n }}\n />\n }\n >\n <div className={classes.regular}>\n {teacherInstructionsEnabled && (\n <InputContainer\n label={teacherInstructions.label}\n className={classes.prompt}\n >\n <EditableHtml\n markup={model.teacherInstructions \|\| ''}\n onChange={this.onTeacherInstructionsChanged}\n imageSupport={imageSupport}\n nonEmpty={false}\n toolbarOpts={toolbarOpts}\n spellCheck={spellCheckEnabled}\n maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions \|\| defaultImageMaxWidth}\n maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions \|\| defaultImageMaxHeight}\n />\n </InputContainer>\n )}\n\n {promptEnabled && (\n <InputContainer label=\"Item Stem\" className={classes.prompt}>\n <EditableHtml\n markup={model.prompt}\n onChange={this.onPromptChanged}\n toolbarOpts={toolbarOpts}\n spellCheck={spellCheckEnabled}\n imageSupport={imageSupport}\n maxImageWidth={defaultImageMaxWidth}\n maxImageHeight={defaultImageMaxHeight}\n />\n </InputContainer>\n )}\n\n {backgroundImageEnabled && (\n <div>\n <Typography className={classes.label} variant=\"subheading\">\n Define Background Image\n </Typography>\n\n <ImageContainer\n imageUrl={model.imageUrl}\n onUpdateImageDimension={this.onUpdateImageDimension}\n onImageUpload={this.onImageUpload}\n imageDimensions={model.imageDimensions}\n />\n </div>\n )}\n </div>\n </layout.ConfigLayout>\n </div>\n );\n }\n}\n\nconst styles = (theme) => ({\n base: {\n marginTop: theme.spacing.unit * 3,\n },\n label: {\n marginTop: theme.spacing.unit * 4,\n },\n prompt: {\n paddingTop: theme.spacing.unit * 2,\n width: '100%',\n },\n regular: {\n marginBottom: theme.spacing.unit * 3,\n },\n});\n\nRoot.propTypes = {\n classes: PropTypes.object.isRequired,\n configuration: PropTypes.object,\n model: PropTypes.object.isRequired,\n imageSupport: PropTypes.shape({\n add: PropTypes.func,\n delete: PropTypes.func,\n }),\n onModelChanged: PropTypes.func.isRequired,\n onConfigurationChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}

package/configure/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/drawing-response-configure",
   "private": true,
-  "version": "3.2.25",
+  "version": "4.1.1",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -9,8 +9,8 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "^10.13.3",
-    "@pie-lib/editable-html": "^7.22.6",
+    "@pie-lib/config-ui": "^11.0.6",
+    "@pie-lib/editable-html": "^9.0.2",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",

package/configure/src/__tests__/__snapshots__/root.test.jsx.snap CHANGED Viewed

@@ -11,6 +11,14 @@ exports[`Root snapshot renders 1`] = `
               "label": "Background Image",
               "settings": true,
             },
+            "maxImageHeight": Object {
+              "prompt": 300,
+              "teacherInstructions": 300,
+            },
+            "maxImageWidth": Object {
+              "prompt": 300,
+              "teacherInstructions": 300,
+            },
             "prompt": Object {
               "label": "Prompt",
               "settings": true,
@@ -60,6 +68,8 @@ exports[`Root snapshot renders 1`] = `
       >
         <EditableHtml
           markup="Test Prompt"
+          maxImageHeight={300}
+          maxImageWidth={300}
           onChange={[Function]}
           toolbarOpts={
             Object {

package/configure/src/defaults.js CHANGED Viewed

@@ -30,6 +30,14 @@ export default {
     teacherInstructions: {
       settings: true,
       label: 'Teacher Instructions',
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300
     }
   }
 };

package/configure/src/image-container.jsx CHANGED Viewed

@@ -128,9 +128,6 @@ export class ImageContainer extends Component {
     const fitsContainer = x <= maxImageWidth + 5;
     const hasMinimumWidth = x > 150 && y > 150;
-    const keepAspectRatioWidth = x > y ? x : 'auto';
-    const keepAspectRatioHeight = x > y ? 'auto' : y;
     if (fitsContainer && hasMinimumWidth) {
       box.style.width = `${x}px`;
       box.style.height = `${x/imageAspectRatio}px`;
@@ -171,8 +168,7 @@ export class ImageContainer extends Component {
       dropzoneActive,
       dragEnabled,
       maxImageHeight,
-      maxImageWidth,
-      dimensions,
+      maxImageWidth
     } = this.state;
     return (

package/configure/src/root.jsx CHANGED Viewed

@@ -62,11 +62,16 @@ export class Root extends React.Component {
       prompt = {},
       teacherInstructions = {},
       spellCheck = {},
+      maxImageWidth = {},
+      maxImageHeight = {}
     } = configuration || {};
     const { teacherInstructionsEnabled, promptEnabled, spellCheckEnabled, backgroundImageEnabled } =
       model || {};
     const toolbarOpts = {};
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
     switch (model.toolbarEditorPosition) {
       case 'top':
         toolbarOpts.position = 'top';
@@ -114,6 +119,8 @@ export class Root extends React.Component {
                   nonEmpty={false}
                   toolbarOpts={toolbarOpts}
                   spellCheck={spellCheckEnabled}
+                  maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth}
+                  maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight}
                 />
               </InputContainer>
             )}
@@ -126,6 +133,8 @@ export class Root extends React.Component {
                   toolbarOpts={toolbarOpts}
                   spellCheck={spellCheckEnabled}
                   imageSupport={imageSupport}
+                  maxImageWidth={defaultImageMaxWidth}
+                  maxImageHeight={defaultImageMaxHeight}
                 />
               </InputContainer>
             )}

package/docs/config-schema.json CHANGED Viewed

@@ -88,6 +88,48 @@
         }
       }
     },
+    "maxImageWidth": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
+    "maxImageHeight": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
     "showPrompt": {
       "description": "Determines whether prompt field will be displayed or not",
       "default": true,
@@ -138,6 +180,27 @@
           "title": "label"
         }
       }
+    },
+    "ConfigureMaxImageDimensionsProp": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#"

package/docs/config-schema.json.md CHANGED Viewed

@@ -67,6 +67,38 @@ Indicates if the item has to be displayed in the Settings Panel
 Indicates the label for the item that has to be displayed in the Settings Panel
+# `maxImageWidth` (object)
+Properties of the `maxImageWidth` object:
+## `teacherInstructions` (number)
+Indicates the max dimension for images in teacher instructions
+## `prompt` (number)
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+## `rationale` (number)
+Indicates the max dimension for images in rationale
+# `maxImageHeight` (object)
+Properties of the `maxImageHeight` object:
+## `teacherInstructions` (number)
+Indicates the max dimension for images in teacher instructions
+## `prompt` (number)
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+## `rationale` (number)
+Indicates the max dimension for images in rationale
 # `showPrompt` (boolean)
 Determines whether prompt field will be displayed or not
@@ -112,4 +144,20 @@ Indicates if the item has to be displayed in the Settings Panel
 ### `label` (string)
-Indicates the label for the item that has to be displayed in the Settings Panel
+Indicates the label for the item that has to be displayed in the Settings Panel
+## `ConfigureMaxImageDimensionsProp` (object)
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+### `teacherInstructions` (number)
+Indicates the max dimension for images in teacher instructions
+### `prompt` (number)
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+### `rationale` (number)
+Indicates the max dimension for images in rationale

package/docs/pie-schema.json CHANGED Viewed

@@ -141,6 +141,27 @@
         }
       }
     },
+    "ConfigureMaxImageDimensionsProp": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
     "Dimension": {
       "title": "Dimension",
       "type": "object",