@pie-element/drawing-response 3.9.20 → 3.9.21

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 (15) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/configure/CHANGELOG.md +8 -0
  3. package/configure/lib/image-container.js +3 -1
  4. package/configure/lib/image-container.js.map +1 -1
  5. package/configure/lib/root.js +2 -1
  6. package/configure/lib/root.js.map +1 -1
  7. package/configure/package.json +3 -3
  8. package/configure/src/__tests__/__snapshots__/image-container.test.jsx.snap +1 -0
  9. package/configure/src/image-container.jsx +2 -1
  10. package/configure/src/root.jsx +1 -0
  11. package/lib/drawing-response/container.js +1 -1
  12. package/lib/drawing-response/container.js.map +1 -1
  13. package/package.json +4 -4
  14. package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap +0 -128
  15. package/src/drawing-response/container.jsx +15 -13
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+ **Note:** Version bump only for package @pie-element/drawing-response
9
+
10
+
11
+
12
+
13
+
6
14
  ## [3.9.20](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.19...@pie-element/drawing-response@3.9.20) (2022-05-30)
7
15
 
8
16
  **Note:** Version bump only for package @pie-element/drawing-response
package/configure/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+ **Note:** Version bump only for package @pie-element/drawing-response-configure
9
+
10
+
11
+
12
+
13
+
6
14
  ## [3.2.24](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.23...@pie-element/drawing-response-configure@3.2.24) (2022-05-30)
7
15
 
8
16
  **Note:** Version bump only for package @pie-element/drawing-response-configure
package/configure/lib/image-container.js CHANGED
@@ -234,7 +234,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
234
234
 
235
235
  var _this$props = this.props,
236
236
  classes = _this$props.classes,
237
- imageUrl = _this$props.imageUrl;
237
+ imageUrl = _this$props.imageUrl,
238
+ imageDimensions = _this$props.imageDimensions;
238
239
  var _this$state2 = this.state,
239
240
  dropzoneActive = _this$state2.dropzoneActive,
240
241
  dragEnabled = _this$state2.dragEnabled,
@@ -268,6 +269,7 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
268
269
  },
269
270
  src: imageUrl,
270
271
  style: {
272
+ width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
271
273
  maxWidth: maxImageWidth,
272
274
  maxHeight: maxImageHeight
273
275
  },
package/configure/lib/image-container.js.map CHANGED
@@ -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","base","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","renderUploadControl","drawableHeight","imageContainer","handleOnImageLoad","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 } = 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 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","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"}
package/configure/lib/root.js CHANGED
@@ -184,7 +184,8 @@ var Root = /*#__PURE__*/function (_React$Component) {
184
184
  }, "Define Background Image"), /*#__PURE__*/_react["default"].createElement(_imageContainer["default"], {
185
185
  imageUrl: model.imageUrl,
186
186
  onUpdateImageDimension: this.onUpdateImageDimension,
187
- onImageUpload: this.onImageUpload
187
+ onImageUpload: this.onImageUpload,
188
+ imageDimensions: model.imageDimensions
188
189
  })))));
189
190
  }
190
191
  }]);
package/configure/lib/root.js.map CHANGED
@@ -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 />\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","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"}
package/configure/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/drawing-response-configure",
3
3
  "private": true,
4
- "version": "3.2.24",
4
+ "version": "3.2.25",
5
5
  "description": "",
6
6
  "main": "lib/index.js",
7
7
  "module": "src/index.js",
@@ -9,8 +9,8 @@
9
9
  "dependencies": {
10
10
  "@material-ui/core": "^3.9.2",
11
11
  "@pie-framework/pie-configure-events": "^1.2.0",
12
- "@pie-lib/config-ui": "^10.13.2",
13
- "@pie-lib/editable-html": "^7.22.5",
12
+ "@pie-lib/config-ui": "^10.13.3",
13
+ "@pie-lib/editable-html": "^7.22.6",
14
14
  "classnames": "^2.2.6",
15
15
  "debug": "^3.1.0",
16
16
  "lodash": "^4.17.15",
package/configure/src/__tests__/__snapshots__/image-container.test.jsx.snap CHANGED
@@ -33,6 +33,7 @@ exports[`ImageContainer snapshot renders 1`] = `
33
33
  Object {
34
34
  "maxHeight": "auto",
35
35
  "maxWidth": "100%",
36
+ "width": undefined,
36
37
  }
37
38
  }
38
39
  />
package/configure/src/image-container.jsx CHANGED
@@ -166,7 +166,7 @@ export class ImageContainer extends Component {
166
166
  }
167
167
 
168
168
  render() {
169
- const { classes, imageUrl } = this.props;
169
+ const { classes, imageUrl, imageDimensions } = this.props;
170
170
  const {
171
171
  dropzoneActive,
172
172
  dragEnabled,
@@ -213,6 +213,7 @@ export class ImageContainer extends Component {
213
213
  }}
214
214
  src={imageUrl}
215
215
  style={{
216
+ width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
216
217
  maxWidth: maxImageWidth,
217
218
  maxHeight: maxImageHeight
218
219
  }}
package/configure/src/root.jsx CHANGED
@@ -140,6 +140,7 @@ export class Root extends React.Component {
140
140
  imageUrl={model.imageUrl}
141
141
  onUpdateImageDimension={this.onUpdateImageDimension}
142
142
  onImageUpload={this.onImageUpload}
143
+ imageDimensions={model.imageDimensions}
143
144
  />
144
145
  </div>
145
146
  )}
package/lib/drawing-response/container.js CHANGED
@@ -231,7 +231,7 @@ var Container = /*#__PURE__*/function (_Component) {
231
231
  var heightToUse = drawableDimensions.height * this.state.scale;
232
232
  return /*#__PURE__*/_react["default"].createElement("div", {
233
233
  className: classes.base
234
- }, /*#__PURE__*/_react["default"].createElement(_drawablePalette["default"], {
234
+ }, !disabled && /*#__PURE__*/_react["default"].createElement(_drawablePalette["default"], {
235
235
  fillColor: fillColor,
236
236
  fillList: fillColorList,
237
237
  outlineColor: outlineColor,
package/lib/drawing-response/container.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","checkExist","setInterval","drawable","getBoundingClientRect","setState","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","session","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","minHeight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","display","justifyContent","padding"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport constants from './constants';\nimport Button from './button';\nimport DrawablePalette from './drawable-palette';\nimport DrawableMain from './drawable-main';\nimport DrawableText from './drawable-text';\nimport Icon from './icon';\n\nconst { tools: TOOLS } = constants;\n\nconst ROGVAIV = [\n 'red',\n 'orange',\n 'yellow',\n 'violet',\n 'blue',\n 'green',\n 'white',\n 'black'\n].map(c => ({ value: c, label: c }));\n\nexport class Container extends Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n disabled: PropTypes.bool,\n session: PropTypes.object.isRequired,\n onSessionChange: PropTypes.func.isRequired,\n imageDimensions: PropTypes.object.isRequired,\n imageUrl: PropTypes.string.isRequired,\n backgroundImageEnabled: PropTypes.bool.isRequired\n };\n\n constructor(props) {\n super(props);\n const TextEntry = new DrawableText();\n\n this.state = {\n scale: 1,\n drawableDimensions: {\n height: 0,\n width: 0\n },\n toolActive: TOOLS[0],\n fillColor: 'white',\n fillColorList: [\n { value: 'transparent', label: 'no fill' },\n { value: 'lightblue', label: 'lightblue' },\n { value: 'lightyellow', label: 'lightyellow' },\n ...ROGVAIV\n ],\n outlineColor: 'black',\n outlineColorList: ROGVAIV,\n paintColor: 'red',\n paintColorList: ROGVAIV,\n TextEntry\n };\n }\n\n setDimensions() {\n const checkExist = setInterval(() => {\n try {\n const { height, width } = this.drawable.getBoundingClientRect();\n if (height !== 0 && width !== 0) {\n this.setState({\n drawableDimensions: {\n height,\n width\n }\n });\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn('setDimensions Error: ', e);\n } finally {\n clearInterval(checkExist);\n }\n }, 100);\n }\n\n componentDidMount() {\n this.setDimensions();\n\n this.observer = new MutationObserver((mutations) => {\n mutations.forEach(() => {\n const target = document.getElementById('question-container')?.style?.cssText\n const zoom = target?.substring(\n target.indexOf('--pie-zoom') + 11,\n target.lastIndexOf('%')\n );\n const zoomParsed = zoom?.replace(/\\s/g, '');\n\n if (zoomParsed) {\n const newScale = parseFloat(zoomParsed) / 100;\n if (newScale !== this.state.scale) {\n this.setState({\n scale: parseFloat(zoomParsed) / 100,\n })\n }\n } else if (!zoomParsed && this.state.scale !== 1) {\n this.setState({\n scale: 1,\n });\n }\n });\n });\n\n const target = document.getElementById('question-container');\n if (target) {\n this.observer.observe(target, { attributes : true, attributeFilter : ['style'] })\n }\n }\n\n componentWillUnmount() {\n const { TextEntry } = this.state;\n\n TextEntry.removeEventListeners();\n this.observer?.disconnect();\n }\n\n handleMakeToolActive(tool) {\n const { TextEntry } = this.state;\n const { type } = tool;\n\n if (type !== 'Text') {\n this.setState({\n toolActive: tool\n });\n } else {\n TextEntry.addNewTextEntry();\n // Force update\n this.setState({\n updatedAt: new Date()\n });\n }\n }\n\n checkIfToolIsDisabled = type => {\n if (this.props.disabled) return true;\n\n\n const { toolActive } = this.state;\n // Text will never be disabled since on each \"Text Entry\" click a new text is added\n if (type === 'Text') {\n return false;\n }\n return type === toolActive.type;\n };\n\n handleColorChange(type, color) {\n const cType = `${type}Color`;\n this.setState({\n [cType]: color\n });\n }\n\n render() {\n const {\n classes,\n disabled,\n imageUrl,\n imageDimensions,\n onSessionChange,\n session,\n backgroundImageEnabled\n } = this.props;\n const {\n drawableDimensions,\n toolActive,\n fillColor,\n fillColorList,\n outlineColor,\n outlineColorList,\n paintColor,\n paintColorList,\n TextEntry\n } = this.state;\n\n const heightToUse = drawableDimensions.height * this.state.scale;\n\n return (\n <div className={classes.base}>\n <DrawablePalette\n fillColor={fillColor}\n fillList={fillColorList}\n outlineColor={outlineColor}\n outlineList={outlineColorList}\n paintColor={paintColor}\n paintList={paintColorList}\n onFillColorChange={color => this.handleColorChange('fill', color)}\n onOutlineColorChange={color =>\n this.handleColorChange('outline', color)\n }\n onPaintColorChange={color => this.handleColorChange('paint', color)}\n />\n\n <div className={classes.box}>\n <div className={classes.toolbar}>\n <div>\n {TOOLS.map(tool => {\n const { type, label, icon } = tool;\n\n return (\n <Button\n title={label}\n key={type}\n disabled={this.checkIfToolIsDisabled(type)}\n onClick={() => this.handleMakeToolActive(tool)}\n label={<Icon path={icon} />}\n />\n );\n })}\n </div>\n </div>\n\n <div\n ref={drawable => {\n this.drawable = drawable;\n }}\n className={classes.drawableHeight}\n style={{ height: heightToUse, maxHeight: heightToUse }}\n >\n <DrawableMain\n scale={this.state.scale}\n session={session}\n disabled={disabled}\n onSessionChange={onSessionChange}\n fillColor={fillColor}\n outlineColor={outlineColor}\n paintColor={paintColor}\n imageUrl={imageUrl}\n drawableDimensions={drawableDimensions}\n imageDimensions={imageDimensions}\n toolActive={toolActive}\n TextEntry={TextEntry}\n backgroundImageEnabled={backgroundImageEnabled}\n />\n </div>\n </div>\n </div>\n );\n }\n}\n\nconst styles = theme => ({\n base: {\n marginTop: theme.spacing.unit * 2\n },\n box: {\n border: '1px solid #E0E1E6',\n borderRadius: '5px',\n marginTop: theme.spacing.unit * 2\n },\n drawableHeight: {\n minHeight: 350\n },\n toolbar: {\n backgroundColor: '#ECEDF1',\n borderBottom: '1px solid #E0E1E6',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n display: 'flex',\n justifyContent: 'space-between',\n padding: '12px 8px'\n }\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
1
+ {"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","checkExist","setInterval","drawable","getBoundingClientRect","setState","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","session","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","minHeight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","display","justifyContent","padding"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport constants from './constants';\nimport Button from './button';\nimport DrawablePalette from './drawable-palette';\nimport DrawableMain from './drawable-main';\nimport DrawableText from './drawable-text';\nimport Icon from './icon';\n\nconst { tools: TOOLS } = constants;\n\nconst ROGVAIV = [\n 'red',\n 'orange',\n 'yellow',\n 'violet',\n 'blue',\n 'green',\n 'white',\n 'black'\n].map(c => ({ value: c, label: c }));\n\nexport class Container extends Component {\n static propTypes = {\n classes: PropTypes.object.isRequired,\n disabled: PropTypes.bool,\n session: PropTypes.object.isRequired,\n onSessionChange: PropTypes.func.isRequired,\n imageDimensions: PropTypes.object.isRequired,\n imageUrl: PropTypes.string.isRequired,\n backgroundImageEnabled: PropTypes.bool.isRequired\n };\n\n constructor(props) {\n super(props);\n const TextEntry = new DrawableText();\n\n this.state = {\n scale: 1,\n drawableDimensions: {\n height: 0,\n width: 0\n },\n toolActive: TOOLS[0],\n fillColor: 'white',\n fillColorList: [\n { value: 'transparent', label: 'no fill' },\n { value: 'lightblue', label: 'lightblue' },\n { value: 'lightyellow', label: 'lightyellow' },\n ...ROGVAIV\n ],\n outlineColor: 'black',\n outlineColorList: ROGVAIV,\n paintColor: 'red',\n paintColorList: ROGVAIV,\n TextEntry\n };\n }\n\n setDimensions() {\n const checkExist = setInterval(() => {\n try {\n const { height, width } = this.drawable.getBoundingClientRect();\n if (height !== 0 && width !== 0) {\n this.setState({\n drawableDimensions: {\n height,\n width\n }\n });\n }\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn('setDimensions Error: ', e);\n } finally {\n clearInterval(checkExist);\n }\n }, 100);\n }\n\n componentDidMount() {\n this.setDimensions();\n\n this.observer = new MutationObserver((mutations) => {\n mutations.forEach(() => {\n const target = document.getElementById('question-container')?.style?.cssText\n const zoom = target?.substring(\n target.indexOf('--pie-zoom') + 11,\n target.lastIndexOf('%')\n );\n const zoomParsed = zoom?.replace(/\\s/g, '');\n\n if (zoomParsed) {\n const newScale = parseFloat(zoomParsed) / 100;\n if (newScale !== this.state.scale) {\n this.setState({\n scale: parseFloat(zoomParsed) / 100,\n })\n }\n } else if (!zoomParsed && this.state.scale !== 1) {\n this.setState({\n scale: 1,\n });\n }\n });\n });\n\n const target = document.getElementById('question-container');\n if (target) {\n this.observer.observe(target, { attributes : true, attributeFilter : ['style'] })\n }\n }\n\n componentWillUnmount() {\n const { TextEntry } = this.state;\n\n TextEntry.removeEventListeners();\n this.observer?.disconnect();\n }\n\n handleMakeToolActive(tool) {\n const { TextEntry } = this.state;\n const { type } = tool;\n\n if (type !== 'Text') {\n this.setState({\n toolActive: tool\n });\n } else {\n TextEntry.addNewTextEntry();\n // Force update\n this.setState({\n updatedAt: new Date()\n });\n }\n }\n\n checkIfToolIsDisabled = type => {\n if (this.props.disabled) return true;\n\n\n const { toolActive } = this.state;\n // Text will never be disabled since on each \"Text Entry\" click a new text is added\n if (type === 'Text') {\n return false;\n }\n return type === toolActive.type;\n };\n\n handleColorChange(type, color) {\n const cType = `${type}Color`;\n this.setState({\n [cType]: color\n });\n }\n\n render() {\n const {\n classes,\n disabled,\n imageUrl,\n imageDimensions,\n onSessionChange,\n session,\n backgroundImageEnabled\n } = this.props;\n const {\n drawableDimensions,\n toolActive,\n fillColor,\n fillColorList,\n outlineColor,\n outlineColorList,\n paintColor,\n paintColorList,\n TextEntry\n } = this.state;\n\n const heightToUse = drawableDimensions.height * this.state.scale;\n\n return (\n <div className={classes.base}>\n {!disabled &&\n <DrawablePalette\n fillColor={fillColor}\n fillList={fillColorList}\n outlineColor={outlineColor}\n outlineList={outlineColorList}\n paintColor={paintColor}\n paintList={paintColorList}\n onFillColorChange={color => this.handleColorChange('fill', color)}\n onOutlineColorChange={color =>\n this.handleColorChange('outline', color)\n }\n onPaintColorChange={color => this.handleColorChange('paint', color)}\n />\n }\n\n <div className={classes.box}>\n <div className={classes.toolbar}>\n <div>\n {TOOLS.map(tool => {\n const { type, label, icon } = tool;\n\n return (\n <Button\n title={label}\n key={type}\n disabled={this.checkIfToolIsDisabled(type)}\n onClick={() => this.handleMakeToolActive(tool)}\n label={<Icon path={icon} />}\n />\n );\n })}\n </div>\n </div>\n\n <div\n ref={drawable => {\n this.drawable = drawable;\n }}\n className={classes.drawableHeight}\n style={{ height: heightToUse, maxHeight: heightToUse }}\n >\n <DrawableMain\n scale={this.state.scale}\n session={session}\n disabled={disabled}\n onSessionChange={onSessionChange}\n fillColor={fillColor}\n outlineColor={outlineColor}\n paintColor={paintColor}\n imageUrl={imageUrl}\n drawableDimensions={drawableDimensions}\n imageDimensions={imageDimensions}\n toolActive={toolActive}\n TextEntry={TextEntry}\n backgroundImageEnabled={backgroundImageEnabled}\n />\n </div>\n </div>\n </div>\n );\n }\n}\n\nconst styles = theme => ({\n base: {\n marginTop: theme.spacing.unit * 2\n },\n box: {\n border: '1px solid #E0E1E6',\n borderRadius: '5px',\n marginTop: theme.spacing.unit * 2\n },\n drawableHeight: {\n minHeight: 350\n },\n toolbar: {\n backgroundColor: '#ECEDF1',\n borderBottom: '1px solid #E0E1E6',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n display: 'flex',\n justifyContent: 'space-between',\n padding: '12px 8px'\n }\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-element/drawing-response",
3
- "version": "3.9.20",
3
+ "version": "3.9.21",
4
4
  "description": "",
5
5
  "repository": "pie-framework/pie-elements",
6
6
  "publishConfig": {
@@ -11,8 +11,8 @@
11
11
  "@mdi/js": "^3.6.95",
12
12
  "@mdi/react": "^1.1.1",
13
13
  "@pie-framework/pie-player-events": "^0.1.0",
14
- "@pie-lib/math-rendering": "^2.4.2",
15
- "@pie-lib/render-ui": "^4.12.8",
14
+ "@pie-lib/math-rendering": "^2.4.3",
15
+ "@pie-lib/render-ui": "^4.12.9",
16
16
  "classnames": "^2.2.6",
17
17
  "enzyme-to-json": "^3.3.5",
18
18
  "konva": "^3.4.1",
@@ -24,7 +24,7 @@
24
24
  },
25
25
  "author": "pie framework developers",
26
26
  "license": "ISC",
27
- "gitHead": "3f3d6edc68890098821978ebd5a8b90da31ab222",
27
+ "gitHead": "2b16a41c0627a27ee758af9285afde4d226dc12b",
28
28
  "scripts": {
29
29
  "postpublish": "../../scripts/postpublish"
30
30
  },
package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap CHANGED
@@ -264,134 +264,6 @@ exports[`Container snapshot renders 1`] = `
264
264
 
265
265
  exports[`Container snapshot renders disabled 1`] = `
266
266
  <div>
267
- <WithStyles(Palette)
268
- fillColor="white"
269
- fillList={
270
- Array [
271
- Object {
272
- "label": "no fill",
273
- "value": "transparent",
274
- },
275
- Object {
276
- "label": "lightblue",
277
- "value": "lightblue",
278
- },
279
- Object {
280
- "label": "lightyellow",
281
- "value": "lightyellow",
282
- },
283
- Object {
284
- "label": "red",
285
- "value": "red",
286
- },
287
- Object {
288
- "label": "orange",
289
- "value": "orange",
290
- },
291
- Object {
292
- "label": "yellow",
293
- "value": "yellow",
294
- },
295
- Object {
296
- "label": "violet",
297
- "value": "violet",
298
- },
299
- Object {
300
- "label": "blue",
301
- "value": "blue",
302
- },
303
- Object {
304
- "label": "green",
305
- "value": "green",
306
- },
307
- Object {
308
- "label": "white",
309
- "value": "white",
310
- },
311
- Object {
312
- "label": "black",
313
- "value": "black",
314
- },
315
- ]
316
- }
317
- onFillColorChange={[Function]}
318
- onOutlineColorChange={[Function]}
319
- onPaintColorChange={[Function]}
320
- outlineColor="black"
321
- outlineList={
322
- Array [
323
- Object {
324
- "label": "red",
325
- "value": "red",
326
- },
327
- Object {
328
- "label": "orange",
329
- "value": "orange",
330
- },
331
- Object {
332
- "label": "yellow",
333
- "value": "yellow",
334
- },
335
- Object {
336
- "label": "violet",
337
- "value": "violet",
338
- },
339
- Object {
340
- "label": "blue",
341
- "value": "blue",
342
- },
343
- Object {
344
- "label": "green",
345
- "value": "green",
346
- },
347
- Object {
348
- "label": "white",
349
- "value": "white",
350
- },
351
- Object {
352
- "label": "black",
353
- "value": "black",
354
- },
355
- ]
356
- }
357
- paintColor="red"
358
- paintList={
359
- Array [
360
- Object {
361
- "label": "red",
362
- "value": "red",
363
- },
364
- Object {
365
- "label": "orange",
366
- "value": "orange",
367
- },
368
- Object {
369
- "label": "yellow",
370
- "value": "yellow",
371
- },
372
- Object {
373
- "label": "violet",
374
- "value": "violet",
375
- },
376
- Object {
377
- "label": "blue",
378
- "value": "blue",
379
- },
380
- Object {
381
- "label": "green",
382
- "value": "green",
383
- },
384
- Object {
385
- "label": "white",
386
- "value": "white",
387
- },
388
- Object {
389
- "label": "black",
390
- "value": "black",
391
- },
392
- ]
393
- }
394
- />
395
267
  <div>
396
268
  <div>
397
269
  <div>
package/src/drawing-response/container.jsx CHANGED
@@ -182,19 +182,21 @@ export class Container extends Component {
182
182
 
183
183
  return (
184
184
  <div className={classes.base}>
185
- <DrawablePalette
186
- fillColor={fillColor}
187
- fillList={fillColorList}
188
- outlineColor={outlineColor}
189
- outlineList={outlineColorList}
190
- paintColor={paintColor}
191
- paintList={paintColorList}
192
- onFillColorChange={color => this.handleColorChange('fill', color)}
193
- onOutlineColorChange={color =>
194
- this.handleColorChange('outline', color)
195
- }
196
- onPaintColorChange={color => this.handleColorChange('paint', color)}
197
- />
185
+ {!disabled &&
186
+ <DrawablePalette
187
+ fillColor={fillColor}
188
+ fillList={fillColorList}
189
+ outlineColor={outlineColor}
190
+ outlineList={outlineColorList}
191
+ paintColor={paintColor}
192
+ paintList={paintColorList}
193
+ onFillColorChange={color => this.handleColorChange('fill', color)}
194
+ onOutlineColorChange={color =>
195
+ this.handleColorChange('outline', color)
196
+ }
197
+ onPaintColorChange={color => this.handleColorChange('paint', color)}
198
+ />
199
+ }
198
200
 
199
201
  <div className={classes.box}>
200
202
  <div className={classes.toolbar}>