@pie-element/hotspot 4.8.4-next.1066 → 4.8.4-next.1078

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 (4) hide show
  1. package/configure/lib/hotspot-container.js +8 -6
  2. package/configure/lib/hotspot-container.js.map +1 -1
  3. package/configure/src/hotspot-container.jsx +6 -4
  4. package/package.json +2 -2
package/configure/lib/hotspot-container.js CHANGED
@@ -69,14 +69,16 @@ var Container = /*#__PURE__*/function (_Component) {
69
69
  (0, _classCallCheck2["default"])(this, Container);
70
70
  _this = _super.call(this, props);
71
71
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFileRead", function (file) {
72
- var onImageUpload = _this.props.onImageUpload;
73
- var reader = new FileReader();
72
+ if (file instanceof Blob) {
73
+ var onImageUpload = _this.props.onImageUpload;
74
+ var reader = new FileReader();
74
75
 
75
- reader.onloadend = function () {
76
- return onImageUpload(reader.result);
77
- };
76
+ reader.onloadend = function () {
77
+ return onImageUpload(reader.result);
78
+ };
78
79
 
79
- reader.readAsDataURL(file);
80
+ reader.readAsDataURL(file);
81
+ }
80
82
  });
81
83
  (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleUploadImage", function (e) {
82
84
  e.preventDefault();
package/configure/lib/hotspot-container.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","handleFileRead","target","files","setState","dropzoneActive","clipboardData","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","length","sort","a","b","parseInt","index","slice","dragEnabled","input","click","showTooltip","classes","dimensions","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","replaceButton","replaceSection","handleInputClick","handleUploadImage","ref","handleUndo","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","cursor","marginLeft","marginRight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","fontSize","lineHeight","right","width","height","borderLeft","borderRight","borderTop","marginBottom","propTypes","PropTypes","object","isRequired","string","bool","func","shape","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\n\nimport Drawable from './hotspot-drawable';\nimport Button from './button';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n const imageType = /image.*/;\n return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n // always transform shapes map into shapes array at this level\n return {\n ...prevState,\n shapes: getAllShapes(nextProps.shapes),\n }\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragEnabled: true,\n // always transform shapes map into shapes array at this level\n shapes: getAllShapes(props.shapes)\n }\n }\n\n handleFileRead = (file) => {\n const { onImageUpload } = this.props;\n const reader = new FileReader();\n\n reader.onloadend = () => onImageUpload(reader.result);\n reader.readAsDataURL(file)\n };\n\n handleUploadImage = (e) => {\n e.preventDefault();\n\n this.handleFileRead(e.target.files[0]);\n };\n\n enableDropzone = () => this.setState({ dropzoneActive: true });\n disableDropzone = () => this.setState({ dropzoneActive: false });\n\n handleOnPaste = (e) => {\n const { files } = e.clipboardData;\n\n if (files && isImage(files[0])) {\n this.handleFileRead(files[0]);\n }\n };\n\n handleOnDrop = (e) => {\n e.preventDefault();\n\n const { items, files } = e.dataTransfer;\n\n if (items && items[0].kind === 'file') {\n const file = items[0].getAsFile();\n\n if (isImage(file)) {\n this.handleFileRead(file);\n }\n } else if (isImage(files[0])) {\n this.handleFileRead(files[0]);\n }\n this.disableDropzone();\n };\n\n handleOnDragOver = (e) => {\n e.preventDefault();\n\n const { dropzoneActive } = this.state;\n\n if (!dropzoneActive) {\n this.enableDropzone();\n }\n };\n\n handleOnDragExit = (e) => {\n e.preventDefault();\n\n this.disableDropzone();\n };\n\n onUpdateShapes = newShapes => {\n const { onUpdateShapes } = this.props;\n\n this.setState(\n { shapes: newShapes },\n // always transform shapes array back into shapes map when saving changes\n () => onUpdateShapes(groupShapes(newShapes))\n );\n };\n\n handleUndo = () => {\n const { shapes } = this.state;\n\n if (shapes && shapes.length) {\n // sort by index value\n let newShapes = shapes.sort((a, b) => (parseInt(a.index) - parseInt(b.index)));\n\n newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];\n\n this.onUpdateShapes(newShapes);\n }\n };\n\n handleClearAll = () => this.onUpdateShapes([]);\n\n handleEnableDrag = () => this.setState({ dragEnabled: true });\n handleDisableDrag = () => this.setState({ dragEnabled: false });\n handleInputClick = () => this.input.click();\n\n toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n render() {\n const {\n classes,\n dimensions,\n hotspotColor,\n imageUrl,\n multipleCorrect,\n onUpdateImageDimension,\n outlineColor,\n strokeWidth,\n preserveAspectRatioEnabled\n } = this.props;\n const {\n dropzoneActive,\n dragEnabled,\n showTooltip\n } = this.state;\n const { shapes } = this.state;\n\n return (\n <div className={classes.base}>\n <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\n {...dragEnabled ? {\n onDragExit: this.handleOnDragExit,\n onDragLeave: this.handleOnDragExit,\n onDragOver: this.handleOnDragOver,\n onDrop: this.handleOnDrop,\n onPaste: this.handleOnPaste\n } : {}}\n >\n <div className={classes.toolbar}>\n {imageUrl && (\n <UploadControl\n classNameButton={classes.replaceButton}\n classNameSection={classes.replaceSection}\n label=\"Replace Image\"\n onInputClick={this.handleInputClick}\n onUploadImage={this.handleUploadImage}\n setRef={(ref) => {\n this.input = ref;\n }}\n />\n )}\n <Button\n disabled={!(shapes && shapes.length)}\n onClick={this.handleUndo}\n label=\"Undo\"\n />\n <Button\n disabled={!(shapes && shapes.length)}\n onClick={this.handleClearAll}\n label=\"Clear all\"\n />\n </div>\n\n <div\n ref={ref => {\n this.imageSection = ref;\n }}\n className={classes.drawableHeight}>\n {imageUrl\n ? (\n <Drawable\n dimensions={dimensions}\n disableDrag={this.handleDisableDrag}\n enableDrag={this.handleEnableDrag}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n multipleCorrect={multipleCorrect}\n onUpdateImageDimension={onUpdateImageDimension}\n onUpdateShapes={this.onUpdateShapes}\n outlineColor={outlineColor}\n shapes={shapes}\n strokeWidth={strokeWidth}\n preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n />\n )\n : (\n <div className={`${classes.drawableHeight} ${classes.centered}`}>\n <label>Drag and drop or upload image from computer</label>\n <br/>\n <UploadControl\n label=\"Upload Image\"\n onInputClick={this.handleInputClick}\n onUploadImage={this.handleUploadImage}\n setRef={(ref) => {\n this.input = ref;\n }}\n />\n </div>\n )}\n </div>\n\n {imageUrl && (\n <div className={classes.tooltip}>\n {showTooltip && (\n <div className={classes.tooltipContent}>\n <label>\n Click and drag to create a hotspot. Click the hotspot to mark correct. Click\n again to unmark.\n </label>\n <div className={classes.tooltipArrow}/>\n </div>\n )}\n <Help\n className={classes.icon}\n onMouseOut={this.toggleTooltip}\n onMouseOver={this.toggleTooltip}\n />\n </div>\n )}\n </div>\n </div>\n\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 paddingBottom: '40px',\n paddingRight: '40px',\n },\n icon: {\n '&:hover': {\n color: '#333131',\n cursor: 'help'\n },\n color: '#C1C1C1'\n },\n replaceButton: {\n marginLeft: 0,\n },\n replaceSection: {\n marginRight: 'auto'\n },\n toolbar: {\n backgroundColor: '#ECEDF1',\n borderBottom: '1px solid #E0E1E6',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n display: 'flex',\n justifyContent: 'flex-end',\n padding: '12px 8px'\n },\n tooltip: {\n position: 'relative',\n textAlign: 'right',\n padding: '5px 9px'\n },\n tooltipContent: {\n background: '#333131',\n borderRadius: '4px',\n color: '#FFFFFF',\n fontSize: '14px',\n lineHeight: '18px',\n marginTop: '-70px',\n padding: '7px 16px',\n position: 'absolute',\n right: '5px',\n textAlign: 'left',\n width: '300px'\n },\n tooltipArrow: {\n width: 0,\n height: 0,\n borderLeft: '10px solid transparent',\n borderRight: '10px solid transparent',\n borderTop: '10px solid #333131',\n marginBottom: -10,\n marginTop: '2px',\n position: 'absolute',\n right: '5px'\n }\n});\n\nContainer.propTypes = {\n classes: PropTypes.object.isRequired,\n dimensions: PropTypes.object.isRequired,\n imageUrl: PropTypes.string.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n multipleCorrect: PropTypes.bool.isRequired,\n onImageUpload: PropTypes.func.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n onUpdateShapes: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n shapes: PropTypes.shape({\n rectangles: PropTypes.array,\n polygons: PropTypes.array\n }).isRequired,\n strokeWidth: PropTypes.number,\n preserveAspectRatioEnabled: PropTypes.bool\n};\nContainer.defaultProps = {\n strokeWidth: 5\n};\n\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}
1
+ {"version":3,"sources":["../src/hotspot-container.jsx"],"names":["isImage","file","imageType","type","match","Container","props","Blob","onImageUpload","reader","FileReader","onloadend","result","readAsDataURL","e","preventDefault","handleFileRead","target","files","setState","dropzoneActive","clipboardData","dataTransfer","items","kind","getAsFile","disableDropzone","state","enableDropzone","newShapes","onUpdateShapes","shapes","length","sort","a","b","parseInt","index","slice","dragEnabled","input","click","showTooltip","classes","dimensions","hotspotColor","imageUrl","multipleCorrect","onUpdateImageDimension","outlineColor","strokeWidth","preserveAspectRatioEnabled","base","box","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","onPaste","handleOnPaste","toolbar","replaceButton","replaceSection","handleInputClick","handleUploadImage","ref","handleUndo","handleClearAll","imageSection","drawableHeight","handleDisableDrag","handleEnableDrag","centered","tooltip","tooltipContent","tooltipArrow","icon","toggleTooltip","nextProps","prevState","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","paddingBottom","paddingRight","color","cursor","marginLeft","marginRight","backgroundColor","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","position","textAlign","background","fontSize","lineHeight","right","width","height","borderLeft","borderRight","borderTop","marginBottom","propTypes","PropTypes","object","isRequired","string","bool","func","shape","rectangles","array","polygons","number","defaultProps"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Help from '@material-ui/icons/Help';\n\nimport Drawable from './hotspot-drawable';\nimport Button from './button';\nimport UploadControl from './upload-control';\nimport { getAllShapes, groupShapes } from './utils';\n\nconst isImage = (file) => {\n const imageType = /image.*/;\n return file.type.match(imageType);\n};\n\nexport class Container extends Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n // always transform shapes map into shapes array at this level\n return {\n ...prevState,\n shapes: getAllShapes(nextProps.shapes),\n }\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragEnabled: true,\n // always transform shapes map into shapes array at this level\n shapes: getAllShapes(props.shapes)\n }\n }\n\n handleFileRead = (file) => {\n if (file instanceof Blob) {\n const { onImageUpload } = this.props;\n const reader = new FileReader();\n\n reader.onloadend = () => onImageUpload(reader.result);\n reader.readAsDataURL(file)\n }\n };\n\n handleUploadImage = (e) => {\n e.preventDefault();\n\n this.handleFileRead(e.target.files[0]);\n };\n\n enableDropzone = () => this.setState({ dropzoneActive: true });\n disableDropzone = () => this.setState({ dropzoneActive: false });\n\n handleOnPaste = (e) => {\n const { files } = e.clipboardData;\n\n if (files && isImage(files[0])) {\n this.handleFileRead(files[0]);\n }\n };\n\n handleOnDrop = (e) => {\n e.preventDefault();\n\n const { items, files } = e.dataTransfer;\n\n if (items && items[0].kind === 'file') {\n const file = items[0].getAsFile();\n\n if (isImage(file)) {\n this.handleFileRead(file);\n }\n } else if (isImage(files[0])) {\n this.handleFileRead(files[0]);\n }\n this.disableDropzone();\n };\n\n handleOnDragOver = (e) => {\n e.preventDefault();\n\n const { dropzoneActive } = this.state;\n\n if (!dropzoneActive) {\n this.enableDropzone();\n }\n };\n\n handleOnDragExit = (e) => {\n e.preventDefault();\n\n this.disableDropzone();\n };\n\n onUpdateShapes = newShapes => {\n const { onUpdateShapes } = this.props;\n\n this.setState(\n { shapes: newShapes },\n // always transform shapes array back into shapes map when saving changes\n () => onUpdateShapes(groupShapes(newShapes))\n );\n };\n\n handleUndo = () => {\n const { shapes } = this.state;\n\n if (shapes && shapes.length) {\n // sort by index value\n let newShapes = shapes.sort((a, b) => (parseInt(a.index) - parseInt(b.index)));\n\n newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];\n\n this.onUpdateShapes(newShapes);\n }\n };\n\n handleClearAll = () => this.onUpdateShapes([]);\n\n handleEnableDrag = () => this.setState({ dragEnabled: true });\n handleDisableDrag = () => this.setState({ dragEnabled: false });\n handleInputClick = () => this.input.click();\n\n toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });\n\n render() {\n const {\n classes,\n dimensions,\n hotspotColor,\n imageUrl,\n multipleCorrect,\n onUpdateImageDimension,\n outlineColor,\n strokeWidth,\n preserveAspectRatioEnabled\n } = this.props;\n const {\n dropzoneActive,\n dragEnabled,\n showTooltip\n } = this.state;\n const { shapes } = this.state;\n\n return (\n <div className={classes.base}>\n <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\n {...dragEnabled ? {\n onDragExit: this.handleOnDragExit,\n onDragLeave: this.handleOnDragExit,\n onDragOver: this.handleOnDragOver,\n onDrop: this.handleOnDrop,\n onPaste: this.handleOnPaste\n } : {}}\n >\n <div className={classes.toolbar}>\n {imageUrl && (\n <UploadControl\n classNameButton={classes.replaceButton}\n classNameSection={classes.replaceSection}\n label=\"Replace Image\"\n onInputClick={this.handleInputClick}\n onUploadImage={this.handleUploadImage}\n setRef={(ref) => {\n this.input = ref;\n }}\n />\n )}\n <Button\n disabled={!(shapes && shapes.length)}\n onClick={this.handleUndo}\n label=\"Undo\"\n />\n <Button\n disabled={!(shapes && shapes.length)}\n onClick={this.handleClearAll}\n label=\"Clear all\"\n />\n </div>\n\n <div\n ref={ref => {\n this.imageSection = ref;\n }}\n className={classes.drawableHeight}>\n {imageUrl\n ? (\n <Drawable\n dimensions={dimensions}\n disableDrag={this.handleDisableDrag}\n enableDrag={this.handleEnableDrag}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n multipleCorrect={multipleCorrect}\n onUpdateImageDimension={onUpdateImageDimension}\n onUpdateShapes={this.onUpdateShapes}\n outlineColor={outlineColor}\n shapes={shapes}\n strokeWidth={strokeWidth}\n preserveAspectRatioEnabled={preserveAspectRatioEnabled}\n />\n )\n : (\n <div className={`${classes.drawableHeight} ${classes.centered}`}>\n <label>Drag and drop or upload image from computer</label>\n <br/>\n <UploadControl\n label=\"Upload Image\"\n onInputClick={this.handleInputClick}\n onUploadImage={this.handleUploadImage}\n setRef={(ref) => {\n this.input = ref;\n }}\n />\n </div>\n )}\n </div>\n\n {imageUrl && (\n <div className={classes.tooltip}>\n {showTooltip && (\n <div className={classes.tooltipContent}>\n <label>\n Click and drag to create a hotspot. Click the hotspot to mark correct. Click\n again to unmark.\n </label>\n <div className={classes.tooltipArrow}/>\n </div>\n )}\n <Help\n className={classes.icon}\n onMouseOut={this.toggleTooltip}\n onMouseOver={this.toggleTooltip}\n />\n </div>\n )}\n </div>\n </div>\n\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 paddingBottom: '40px',\n paddingRight: '40px',\n },\n icon: {\n '&:hover': {\n color: '#333131',\n cursor: 'help'\n },\n color: '#C1C1C1'\n },\n replaceButton: {\n marginLeft: 0,\n },\n replaceSection: {\n marginRight: 'auto'\n },\n toolbar: {\n backgroundColor: '#ECEDF1',\n borderBottom: '1px solid #E0E1E6',\n borderTopLeftRadius: '5px',\n borderTopRightRadius: '5px',\n display: 'flex',\n justifyContent: 'flex-end',\n padding: '12px 8px'\n },\n tooltip: {\n position: 'relative',\n textAlign: 'right',\n padding: '5px 9px'\n },\n tooltipContent: {\n background: '#333131',\n borderRadius: '4px',\n color: '#FFFFFF',\n fontSize: '14px',\n lineHeight: '18px',\n marginTop: '-70px',\n padding: '7px 16px',\n position: 'absolute',\n right: '5px',\n textAlign: 'left',\n width: '300px'\n },\n tooltipArrow: {\n width: 0,\n height: 0,\n borderLeft: '10px solid transparent',\n borderRight: '10px solid transparent',\n borderTop: '10px solid #333131',\n marginBottom: -10,\n marginTop: '2px',\n position: 'absolute',\n right: '5px'\n }\n});\n\nContainer.propTypes = {\n classes: PropTypes.object.isRequired,\n dimensions: PropTypes.object.isRequired,\n imageUrl: PropTypes.string.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n multipleCorrect: PropTypes.bool.isRequired,\n onImageUpload: PropTypes.func.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n onUpdateShapes: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n shapes: PropTypes.shape({\n rectangles: PropTypes.array,\n polygons: PropTypes.array\n }).isRequired,\n strokeWidth: PropTypes.number,\n preserveAspectRatioEnabled: PropTypes.bool\n};\nContainer.defaultProps = {\n strokeWidth: 5\n};\n\n\nexport default withStyles(styles)(Container);\n"],"file":"hotspot-container.js"}
package/configure/src/hotspot-container.jsx CHANGED
@@ -33,11 +33,13 @@ export class Container extends Component {
33
33
  }
34
34
 
35
35
  handleFileRead = (file) => {
36
- const { onImageUpload } = this.props;
37
- const reader = new FileReader();
36
+ if (file instanceof Blob) {
37
+ const { onImageUpload } = this.props;
38
+ const reader = new FileReader();
38
39
 
39
- reader.onloadend = () => onImageUpload(reader.result);
40
- reader.readAsDataURL(file)
40
+ reader.onloadend = () => onImageUpload(reader.result);
41
+ reader.readAsDataURL(file)
42
+ }
41
43
  };
42
44
 
43
45
  handleUploadImage = (e) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-element/hotspot",
3
- "version": "4.8.4-next.1066+5fe886938",
3
+ "version": "4.8.4-next.1078+daf77099b",
4
4
  "description": "",
5
5
  "repository": "pie-framework/pie-elements",
6
6
  "publishConfig": {
@@ -19,7 +19,7 @@
19
19
  },
20
20
  "author": "pie framework developers",
21
21
  "license": "ISC",
22
- "gitHead": "5fe8869380884fb4bdee6005882a4e5dd9ecac16",
22
+ "gitHead": "daf77099b41a212bd567d2faa205630f52df2896",
23
23
  "scripts": {
24
24
  "postpublish": "../../scripts/postpublish"
25
25
  },