@pie-element/drawing-response 3.7.3-next.672 → 3.7.3-next.678

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 (7) hide show
  1. package/configure/lib/image-container.js +14 -7
  2. package/configure/lib/image-container.js.map +1 -1
  3. package/configure/src/image-container.jsx +72 -44
  4. package/lib/drawing-response/drawable-image.js +2 -2
  5. package/lib/drawing-response/drawable-image.js.map +1 -1
  6. package/package.json +2 -2
  7. package/src/drawing-response/drawable-image.jsx +2 -2
package/configure/lib/image-container.js CHANGED
@@ -37,6 +37,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
37
37
 
38
38
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
39
39
 
40
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
41
+
42
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
43
+
40
44
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
41
45
 
42
46
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -166,15 +170,17 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
166
170
  var y = e.clientY - bounds.top;
167
171
  var fitsContainer = x <= maxImageWidth + 5;
168
172
  var hasMinimumWidth = x > 150 && y > 150;
173
+ var keepAspectRatioWidth = x > y ? x : 'auto';
174
+ var keepAspectRatioHeight = x > y ? 'auto' : y;
169
175
 
170
176
  if (fitsContainer && hasMinimumWidth) {
171
- box.style.width = "".concat(x, "px");
172
- box.style.height = "".concat(y, "px");
177
+ box.style.width = "".concat(keepAspectRatioWidth, "px");
178
+ box.style.height = "".concat(keepAspectRatioHeight, "px");
173
179
 
174
180
  _this.setState({
175
181
  dimensions: {
176
- height: y,
177
- width: x
182
+ height: keepAspectRatioHeight,
183
+ width: keepAspectRatioWidth
178
184
  }
179
185
  });
180
186
  }
@@ -234,7 +240,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
234
240
  dropzoneActive = _this$state.dropzoneActive,
235
241
  dragEnabled = _this$state.dragEnabled,
236
242
  maxImageHeight = _this$state.maxImageHeight,
237
- maxImageWidth = _this$state.maxImageWidth;
243
+ maxImageWidth = _this$state.maxImageWidth,
244
+ dimensions = _this$state.dimensions;
238
245
  return /*#__PURE__*/_react["default"].createElement("div", {
239
246
  className: classes.base
240
247
  }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
@@ -261,10 +268,10 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
261
268
  _this3.image = _ref3;
262
269
  },
263
270
  src: imageUrl,
264
- style: {
271
+ style: _objectSpread({
265
272
  maxWidth: maxImageWidth,
266
273
  maxHeight: maxImageHeight
267
- },
274
+ }, dimensions),
268
275
  alt: ""
269
276
  }), /*#__PURE__*/_react["default"].createElement("div", {
270
277
  ref: function ref(_ref4) {
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","fitsContainer","hasMinimumWidth","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: 0,\n maxImageHeight: 0,\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 } = 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 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 = `${y}px`;\n\n this.setState({ dimensions: { height: y, width: x }});\n }\n\n this.handleDisableDrag();\n };\n\n renderUploadControl(label) {\n const { classes } = this.props;\n\n return (\n <div>\n <Button\n label={label}\n onClick={this.handleInputClick}\n />\n <input\n accept=\"image/*\"\n className={classes.input}\n onChange={this.handleUploadImage}\n ref={ref => { this.input = ref; }}\n type=\"file\"\n />\n </div>\n )\n }\n\n render() {\n const {\n classes,\n imageUrl\n } = 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 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 } : {}}\n >\n <div className={classes.toolbar}>\n {this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}\n </div>\n\n <div ref={ref => { this.imageSection = ref; }} className={classes.drawableHeight}>\n {imageUrl ? (\n <div className={classes.imageContainer}>\n <img\n className={classes.image}\n height=\"auto\"\n onLoad={this.handleOnImageLoad}\n ref={ref => { this.image = ref; }}\n src={imageUrl}\n style={{ maxWidth: maxImageWidth, maxHeight: maxImageHeight }}\n alt=''\n />\n <div ref={ref => { this.resize = ref; }} className={classes.resize} />\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","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: 0,\n maxImageHeight: 0,\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 } = 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 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 = `${keepAspectRatioWidth}px`;\n box.style.height = `${keepAspectRatioHeight}px`;\n\n this.setState({\n dimensions: {\n height: keepAspectRatioHeight,\n width: keepAspectRatioWidth,\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 ...dimensions,\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/src/image-container.jsx CHANGED
@@ -17,7 +17,7 @@ export class ImageContainer extends Component {
17
17
  maxImageHeight: 0,
18
18
  dragEnabled: true,
19
19
  dropzoneActive: false,
20
- }
20
+ };
21
21
  }
22
22
 
23
23
  componentDidMount() {
@@ -26,7 +26,7 @@ export class ImageContainer extends Component {
26
26
  const { height, width } = positionInfo;
27
27
  this.setState({
28
28
  maxImageWidth: width,
29
- maxImageHeight: height
29
+ maxImageHeight: height,
30
30
  });
31
31
  }
32
32
  }
@@ -46,7 +46,7 @@ export class ImageContainer extends Component {
46
46
  this.handleFileRead(file);
47
47
  };
48
48
 
49
- makeDropzoneActive= () => this.setState({ dropzoneActive: true });
49
+ makeDropzoneActive = () => this.setState({ dropzoneActive: true });
50
50
 
51
51
  makeDropzoneInactive = () => this.setState({ dropzoneActive: false });
52
52
 
@@ -90,7 +90,7 @@ export class ImageContainer extends Component {
90
90
 
91
91
  const dimensions = {
92
92
  height: offsetHeight,
93
- width: offsetWidth
93
+ width: offsetWidth,
94
94
  };
95
95
 
96
96
  this.setState({ dimensions });
@@ -126,11 +126,19 @@ export class ImageContainer extends Component {
126
126
  const fitsContainer = x <= maxImageWidth + 5;
127
127
  const hasMinimumWidth = x > 150 && y > 150;
128
128
 
129
+ const keepAspectRatioWidth = x > y ? x : 'auto';
130
+ const keepAspectRatioHeight = x > y ? 'auto' : y;
131
+
129
132
  if (fitsContainer && hasMinimumWidth) {
130
- box.style.width = `${x}px`;
131
- box.style.height = `${y}px`;
133
+ box.style.width = `${keepAspectRatioWidth}px`;
134
+ box.style.height = `${keepAspectRatioHeight}px`;
132
135
 
133
- this.setState({ dimensions: { height: y, width: x }});
136
+ this.setState({
137
+ dimensions: {
138
+ height: keepAspectRatioHeight,
139
+ width: keepAspectRatioWidth,
140
+ },
141
+ });
134
142
  }
135
143
 
136
144
  this.handleDisableDrag();
@@ -141,60 +149,80 @@ export class ImageContainer extends Component {
141
149
 
142
150
  return (
143
151
  <div>
144
- <Button
145
- label={label}
146
- onClick={this.handleInputClick}
147
- />
152
+ <Button label={label} onClick={this.handleInputClick} />
148
153
  <input
149
154
  accept="image/*"
150
155
  className={classes.input}
151
156
  onChange={this.handleUploadImage}
152
- ref={ref => { this.input = ref; }}
157
+ ref={(ref) => {
158
+ this.input = ref;
159
+ }}
153
160
  type="file"
154
161
  />
155
162
  </div>
156
- )
163
+ );
157
164
  }
158
165
 
159
166
  render() {
160
- const {
161
- classes,
162
- imageUrl
163
- } = this.props;
167
+ const { classes, imageUrl } = this.props;
164
168
  const {
165
169
  dropzoneActive,
166
170
  dragEnabled,
167
171
  maxImageHeight,
168
- maxImageWidth
172
+ maxImageWidth,
173
+ dimensions,
169
174
  } = this.state;
170
175
 
171
176
  return (
172
- <div className={classes.base} >
173
- <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
174
- {...dragEnabled ? {
175
- onDragExit: this.handleOnDragExit,
176
- onDragLeave: this.handleOnDragExit,
177
- onDragOver: this.handleOnDragOver ,
178
- onDrop: this.handleOnDrop
179
- } : {}}
177
+ <div className={classes.base}>
178
+ <div
179
+ className={`${classes.box} ${
180
+ dropzoneActive ? classes.boxActive : ''
181
+ }`}
182
+ {...(dragEnabled
183
+ ? {
184
+ onDragExit: this.handleOnDragExit,
185
+ onDragLeave: this.handleOnDragExit,
186
+ onDragOver: this.handleOnDragOver,
187
+ onDrop: this.handleOnDrop,
188
+ }
189
+ : {})}
180
190
  >
181
191
  <div className={classes.toolbar}>
182
- {this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}
192
+ {this.renderUploadControl(
193
+ imageUrl ? 'Replace Image' : 'Upload Image'
194
+ )}
183
195
  </div>
184
196
 
185
- <div ref={ref => { this.imageSection = ref; }} className={classes.drawableHeight}>
197
+ <div
198
+ ref={(ref) => {
199
+ this.imageSection = ref;
200
+ }}
201
+ className={classes.drawableHeight}
202
+ >
186
203
  {imageUrl ? (
187
204
  <div className={classes.imageContainer}>
188
205
  <img
189
206
  className={classes.image}
190
207
  height="auto"
191
208
  onLoad={this.handleOnImageLoad}
192
- ref={ref => { this.image = ref; }}
209
+ ref={(ref) => {
210
+ this.image = ref;
211
+ }}
193
212
  src={imageUrl}
194
- style={{ maxWidth: maxImageWidth, maxHeight: maxImageHeight }}
195
- alt=''
213
+ style={{
214
+ maxWidth: maxImageWidth,
215
+ maxHeight: maxImageHeight,
216
+ ...dimensions,
217
+ }}
218
+ alt=""
219
+ />
220
+ <div
221
+ ref={(ref) => {
222
+ this.resize = ref;
223
+ }}
224
+ className={classes.resize}
196
225
  />
197
- <div ref={ref => { this.resize = ref; }} className={classes.resize} />
198
226
  </div>
199
227
  ) : (
200
228
  <div className={`${classes.drawableHeight} ${classes.centered}`}>
@@ -210,25 +238,25 @@ export class ImageContainer extends Component {
210
238
  }
211
239
  }
212
240
 
213
- const styles = theme => ({
241
+ const styles = (theme) => ({
214
242
  base: {
215
- marginTop: theme.spacing.unit * 2
243
+ marginTop: theme.spacing.unit * 2,
216
244
  },
217
245
  box: {
218
246
  border: '1px solid #E0E1E6',
219
- borderRadius: '5px'
247
+ borderRadius: '5px',
220
248
  },
221
249
  boxActive: {
222
- border: '1px solid #0032C2'
250
+ border: '1px solid #0032C2',
223
251
  },
224
252
  centered: {
225
253
  alignItems: 'center',
226
254
  display: 'flex',
227
255
  flexDirection: 'column',
228
- justifyContent: 'center'
256
+ justifyContent: 'center',
229
257
  },
230
258
  drawableHeight: {
231
- minHeight: 350
259
+ minHeight: 350,
232
260
  },
233
261
  image: {
234
262
  alignItems: 'center',
@@ -237,7 +265,7 @@ const styles = theme => ({
237
265
  },
238
266
  imageContainer: {
239
267
  position: 'relative',
240
- width: 'fit-content'
268
+ width: 'fit-content',
241
269
  },
242
270
  resize: {
243
271
  borderBottom: '1px solid #727272',
@@ -247,10 +275,10 @@ const styles = theme => ({
247
275
  height: '10px',
248
276
  position: 'absolute',
249
277
  right: '-10px',
250
- width: '10px'
278
+ width: '10px',
251
279
  },
252
280
  input: {
253
- display: 'none'
281
+ display: 'none',
254
282
  },
255
283
  toolbar: {
256
284
  backgroundColor: '#ECEDF1',
@@ -258,15 +286,15 @@ const styles = theme => ({
258
286
  borderTopLeftRadius: '5px',
259
287
  borderTopRightRadius: '5px',
260
288
  display: 'flex',
261
- padding: '12px 8px'
262
- }
289
+ padding: '12px 8px',
290
+ },
263
291
  });
264
292
 
265
293
  ImageContainer.propTypes = {
266
294
  classes: PropTypes.object.isRequired,
267
295
  imageUrl: PropTypes.string.isRequired,
268
296
  onImageUpload: PropTypes.func.isRequired,
269
- onUpdateImageDimension: PropTypes.func.isRequired
297
+ onUpdateImageDimension: PropTypes.func.isRequired,
270
298
  };
271
299
 
272
300
  export default withStyles(styles)(ImageContainer);
package/lib/drawing-response/drawable-image.js CHANGED
@@ -27,8 +27,8 @@ var DrawableImage = function DrawableImage(_ref) {
27
27
  src: url,
28
28
  style: {
29
29
  height: height,
30
- maxWidth: width,
31
- maxHeight: height,
30
+ maxWidth: 598,
31
+ maxHeight: 350,
32
32
  width: width
33
33
  }
34
34
  }));
package/lib/drawing-response/drawable-image.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/drawing-response/drawable-image.jsx"],"names":["DrawableImage","classes","url","dimensions","height","width","imageContainer","image","maxWidth","maxHeight","styles","alignItems","display","justifyContent","position","propTypes","PropTypes","object","isRequired","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,GAAZ,QAAYA,GAAZ;AAAA,6BAAiBC,UAAjB;AAAA,MAA+BC,MAA/B,mBAA+BA,MAA/B;AAAA,MAAuCC,KAAvC,mBAAuCA,KAAvC;AAAA,sBACpB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE;AACE,IAAA,GAAG,EAAC,wBADN;AAEE,IAAA,SAAS,EAAEL,OAAO,CAACM,KAFrB;AAGE,IAAA,GAAG,EAAEL,GAHP;AAIE,IAAA,KAAK,EAAE;AACLE,MAAAA,MAAM,EAANA,MADK;AAELI,MAAAA,QAAQ,EAAEH,KAFL;AAGLI,MAAAA,SAAS,EAAEL,MAHN;AAILC,MAAAA,KAAK,EAALA;AAJK;AAJT,IADF,CADoB;AAAA,CAAtB;;AAgBA,IAAMK,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBH,IAAAA,KAAK,EAAE;AACLI,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KADa;AAMpBP,IAAAA,cAAc,EAAE;AACdQ,MAAAA,QAAQ,EAAE,UADI;AAEdT,MAAAA,KAAK,EAAE;AAFO;AANI,GAAP;AAAA,CAAf;;AAYAL,aAAa,CAACe,SAAd,GAA0B;AACxBd,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADF;AAExBf,EAAAA,UAAU,EAAEa,sBAAUC,MAAV,CAAiBC,UAFL;AAGxBhB,EAAAA,GAAG,EAACc,sBAAUG,MAAV,CAAiBD;AAHG,CAA1B;;eAMe,wBAAWR,MAAX,EAAmBV,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DrawableImage = ({ classes, url, dimensions: { height, width } }) => (\n <div className={classes.imageContainer}>\n <img\n alt=\"drawing-response-image\"\n className={classes.image}\n src={url}\n style={{\n height,\n maxWidth: width,\n maxHeight: height,\n width,\n }}\n />\n </div>\n);\n\nconst styles = () => ({\n image: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center'\n },\n imageContainer: {\n position: 'relative',\n width: 'fit-content'\n }\n});\n\nDrawableImage.propTypes = {\n classes: PropTypes.object.isRequired,\n dimensions: PropTypes.object.isRequired,\n url:PropTypes.string.isRequired\n};\n\nexport default withStyles(styles)(DrawableImage);\n"],"file":"drawable-image.js"}
1
+ {"version":3,"sources":["../../src/drawing-response/drawable-image.jsx"],"names":["DrawableImage","classes","url","dimensions","height","width","imageContainer","image","maxWidth","maxHeight","styles","alignItems","display","justifyContent","position","propTypes","PropTypes","object","isRequired","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,GAAZ,QAAYA,GAAZ;AAAA,6BAAiBC,UAAjB;AAAA,MAA+BC,MAA/B,mBAA+BA,MAA/B;AAAA,MAAuCC,KAAvC,mBAAuCA,KAAvC;AAAA,sBACpB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE;AACE,IAAA,GAAG,EAAC,wBADN;AAEE,IAAA,SAAS,EAAEL,OAAO,CAACM,KAFrB;AAGE,IAAA,GAAG,EAAEL,GAHP;AAIE,IAAA,KAAK,EAAE;AACLE,MAAAA,MAAM,EAANA,MADK;AAELI,MAAAA,QAAQ,EAAE,GAFL;AAGLC,MAAAA,SAAS,EAAE,GAHN;AAILJ,MAAAA,KAAK,EAALA;AAJK;AAJT,IADF,CADoB;AAAA,CAAtB;;AAgBA,IAAMK,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBH,IAAAA,KAAK,EAAE;AACLI,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KADa;AAMpBP,IAAAA,cAAc,EAAE;AACdQ,MAAAA,QAAQ,EAAE,UADI;AAEdT,MAAAA,KAAK,EAAE;AAFO;AANI,GAAP;AAAA,CAAf;;AAYAL,aAAa,CAACe,SAAd,GAA0B;AACxBd,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADF;AAExBf,EAAAA,UAAU,EAAEa,sBAAUC,MAAV,CAAiBC,UAFL;AAGxBhB,EAAAA,GAAG,EAACc,sBAAUG,MAAV,CAAiBD;AAHG,CAA1B;;eAMe,wBAAWR,MAAX,EAAmBV,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DrawableImage = ({ classes, url, dimensions: { height, width } }) => (\n <div className={classes.imageContainer}>\n <img\n alt=\"drawing-response-image\"\n className={classes.image}\n src={url}\n style={{\n height,\n maxWidth: 598,\n maxHeight: 350,\n width,\n }}\n />\n </div>\n);\n\nconst styles = () => ({\n image: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center'\n },\n imageContainer: {\n position: 'relative',\n width: 'fit-content'\n }\n});\n\nDrawableImage.propTypes = {\n classes: PropTypes.object.isRequired,\n dimensions: PropTypes.object.isRequired,\n url:PropTypes.string.isRequired\n};\n\nexport default withStyles(styles)(DrawableImage);\n"],"file":"drawable-image.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-element/drawing-response",
3
- "version": "3.7.3-next.672+01e4d0147",
3
+ "version": "3.7.3-next.678+8224cd833",
4
4
  "description": "",
5
5
  "repository": "pie-framework/pie-elements",
6
6
  "publishConfig": {
@@ -24,7 +24,7 @@
24
24
  },
25
25
  "author": "pie framework developers",
26
26
  "license": "ISC",
27
- "gitHead": "01e4d014720f0b5414e0edba270248e914372eb4",
27
+ "gitHead": "8224cd8333bd0e45785b341173b2c4396218cc3d",
28
28
  "scripts": {
29
29
  "postpublish": "../../scripts/postpublish"
30
30
  },
package/src/drawing-response/drawable-image.jsx CHANGED
@@ -10,8 +10,8 @@ const DrawableImage = ({ classes, url, dimensions: { height, width } }) => (
10
10
  src={url}
11
11
  style={{
12
12
  height,
13
- maxWidth: width,
14
- maxHeight: height,
13
+ maxWidth: 598,
14
+ maxHeight: 350,
15
15
  width,
16
16
  }}
17
17
  />