@pie-element/drawing-response 3.9.15 → 3.9.18

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.9.18](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.17...@pie-element/drawing-response@3.9.18) (2022-05-09)
+
+**Note:** Version bump only for package @pie-element/drawing-response
+
+
+
+
+
+## [3.9.17](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.16...@pie-element/drawing-response@3.9.17) (2022-05-03)
+
+**Note:** Version bump only for package @pie-element/drawing-response
+
+
+
+
+
+## [3.9.16](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.15...@pie-element/drawing-response@3.9.16) (2022-04-12)
+
+**Note:** Version bump only for package @pie-element/drawing-response
+
+
+
+
+
 ## [3.9.15](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@3.9.14...@pie-element/drawing-response@3.9.15) (2022-03-28)
 
 **Note:** Version bump only for package @pie-element/drawing-response

package/configure/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.22](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.21...@pie-element/drawing-response-configure@3.2.22) (2022-05-09)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [3.2.21](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.20...@pie-element/drawing-response-configure@3.2.21) (2022-05-03)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [3.2.20](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.19...@pie-element/drawing-response-configure@3.2.20) (2022-04-12)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
 ## [3.2.19](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.18...@pie-element/drawing-response-configure@3.2.19) (2022-03-28)
 
 **Note:** Version bump only for package @pie-element/drawing-response-configure

package/configure/lib/image-container.js

@@ -37,10 +37,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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); }; }
 
 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; } }
@@ -164,23 +160,26 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startResizing", function (e) {
       var box = _this.image;
-      var maxImageWidth = _this.state.maxImageWidth;
+      var _this$state = _this.state,
+          maxImageWidth = _this$state.maxImageWidth,
+          dimensions = _this$state.dimensions;
       var bounds = e.target.getBoundingClientRect();
       var x = e.clientX - bounds.left;
       var y = e.clientY - bounds.top;
+      var imageAspectRatio = dimensions.width / dimensions.height;
       var fitsContainer = x <= maxImageWidth + 5;
       var hasMinimumWidth = x > 150 && y > 150;
       var keepAspectRatioWidth = x > y ? x : 'auto';
       var keepAspectRatioHeight = x > y ? 'auto' : y;
 
       if (fitsContainer && hasMinimumWidth) {
-        box.style.width = "".concat(keepAspectRatioWidth, "px");
-        box.style.height = "".concat(keepAspectRatioHeight, "px");
+        box.style.width = "".concat(x, "px");
+        box.style.height = "".concat(x / imageAspectRatio, "px");
 
         _this.setState({
           dimensions: {
-            height: keepAspectRatioHeight,
-            width: keepAspectRatioWidth
+            height: x / imageAspectRatio,
+            width: x
           }
         });
       }
@@ -188,8 +187,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
       _this.handleDisableDrag();
     });
     _this.state = {
-      maxImageWidth: 0,
-      maxImageHeight: 0,
+      maxImageWidth: "100%",
+      maxImageHeight: "auto",
       dragEnabled: true,
       dropzoneActive: false
     };
@@ -236,12 +235,12 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
           classes = _this$props.classes,
           imageUrl = _this$props.imageUrl;
-      var _this$state = this.state,
-          dropzoneActive = _this$state.dropzoneActive,
-          dragEnabled = _this$state.dragEnabled,
-          maxImageHeight = _this$state.maxImageHeight,
-          maxImageWidth = _this$state.maxImageWidth,
-          dimensions = _this$state.dimensions;
+      var _this$state2 = this.state,
+          dropzoneActive = _this$state2.dropzoneActive,
+          dragEnabled = _this$state2.dragEnabled,
+          maxImageHeight = _this$state2.maxImageHeight,
+          maxImageWidth = _this$state2.maxImageWidth,
+          dimensions = _this$state2.dimensions;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
@@ -268,10 +267,10 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
           _this3.image = _ref3;
         },
         src: imageUrl,
-        style: _objectSpread({
+        style: {
           maxWidth: maxImageWidth,
           maxHeight: maxImageHeight
-        }, dimensions),
+        },
         alt: ""
       }), /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(_ref4) {

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

@@ -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","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"}
+{"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"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/drawing-response-configure",
   "private": true,
-  "version": "3.2.19",
+  "version": "3.2.22",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -9,8 +9,8 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "^10.10.24",
-    "@pie-lib/editable-html": "^7.19.3",
+    "@pie-lib/config-ui": "^10.12.2",
+    "@pie-lib/editable-html": "^7.22.2",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",

package/configure/src/__tests__/__snapshots__/image-container.test.jsx.snap

@@ -31,8 +31,8 @@ exports[`ImageContainer snapshot renders 1`] = `
           src="url"
           style={
             Object {
-              "maxHeight": 0,
-              "maxWidth": 0,
+              "maxHeight": "auto",
+              "maxWidth": "100%",
             }
           }
         />

package/configure/src/image-container.jsx

@@ -13,8 +13,8 @@ export class ImageContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      maxImageWidth: 0,
-      maxImageHeight: 0,
+      maxImageWidth: "100%",
+      maxImageHeight: "auto",
       dragEnabled: true,
       dropzoneActive: false,
     };
@@ -117,12 +117,14 @@ export class ImageContainer extends Component {
 
   startResizing = (e) => {
     const box = this.image;
-    const { maxImageWidth } = this.state;
+    const { maxImageWidth, dimensions } = this.state;
 
     const bounds = e.target.getBoundingClientRect();
     const x = e.clientX - bounds.left;
     const y = e.clientY - bounds.top;
 
+    const imageAspectRatio = dimensions.width / dimensions.height;
+
     const fitsContainer = x <= maxImageWidth + 5;
     const hasMinimumWidth = x > 150 && y > 150;
 
@@ -130,13 +132,13 @@ export class ImageContainer extends Component {
     const keepAspectRatioHeight = x > y ? 'auto' : y;
 
     if (fitsContainer && hasMinimumWidth) {
-      box.style.width = `${keepAspectRatioWidth}px`;
-      box.style.height = `${keepAspectRatioHeight}px`;
+      box.style.width = `${x}px`;
+      box.style.height = `${x/imageAspectRatio}px`;
 
       this.setState({
         dimensions: {
-          height: keepAspectRatioHeight,
-          width: keepAspectRatioWidth,
+          height:x/imageAspectRatio,
+          width:x,
         },
       });
     }
@@ -212,8 +214,7 @@ export class ImageContainer extends Component {
                   src={imageUrl}
                   style={{
                     maxWidth: maxImageWidth,
-                    maxHeight: maxImageHeight,
-                    ...dimensions,
+                    maxHeight: maxImageHeight
                   }}
                   alt=""
                 />

package/lib/drawing-response/container.js

@@ -228,7 +228,7 @@ var Container = /*#__PURE__*/function (_Component) {
           paintColor = _this$state.paintColor,
           paintColorList = _this$state.paintColorList,
           TextEntry = _this$state.TextEntry;
-      var heightToUse = drawableDimensions * this.state.scale;
+      var heightToUse = drawableDimensions.height * this.state.scale;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement(_drawablePalette["default"], {

package/lib/drawing-response/container.js.map

@@ -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 * 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"}
+{"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"}

package/lib/index.js

@@ -80,6 +80,9 @@ var DrawingResponse = /*#__PURE__*/function (_HTMLElement) {
     }
   }, {
     key: "session",
+    get: function get() {
+      return this._session;
+    },
     set: function set(s) {
       this._session = s;
 

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["DrawingResponse","update","_session","drawables","texts","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","m","_model","ModelSetEvent","s","el","React","createElement","DrawingResponseComponent","model","session","onSessionChange","sessionChanged","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEqBA,e;;;;;;;;;;;;;;;uGAkBF,UAACC,MAAD,EAAY;AAC3B,YAAKC,QAAL,CAAcC,SAAd,GAA0BF,MAAM,CAACE,SAAjC;AACA,YAAKD,QAAL,CAAcE,KAAd,GAAsBH,MAAM,CAACG,KAA7B;;AAEA,YAAKC,aAAL,CACE,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,MAAKC,UAAL,EAApD,CADF;;AAIA,YAAKC,OAAL;AACD,K;;;;;;SA1BD,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKN,aAAL,CACE,IAAIQ,8BAAJ,CACE,KAAKN,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKG,MAHT,CADF;;AAOA,WAAKF,OAAL;AACD;;;WAED,sBAAa;AACX,aAAO,KAAKR,QAAL,KAAkB,CAAC,yBAAQ,KAAKA,QAAL,CAAcC,SAAtB,CAAD,IAAqC,CAAC,yBAAQ,KAAKD,QAAL,CAAcE,KAAtB,CAAxD,CAAP;AACD;;;SAaD,aAAYU,CAAZ,EAAe;AACb,WAAKZ,QAAL,GAAgBY,CAAhB;;AACA,WAAKJ,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKE,MAAL,IAAe,KAAKV,QAAxB,EAAkC;AAChC,YAAMa,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,2BAApB,EAA8C;AACvDC,UAAAA,KAAK,EAAE,KAAKP,MAD2C;AAEvDQ,UAAAA,OAAO,EAAE,KAAKlB,QAFyC;AAGvDmB,UAAAA,eAAe,EAAE,KAAKC;AAHiC,SAA9C,CAAX;;AAKAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,MAAX;AACD,SAFD;AAGD;AACF;;;kDAjD0CU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport isEmpty from 'lodash/isEmpty';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport DrawingResponseComponent from './drawing-response';\n\nexport default class DrawingResponse extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));\n  }\n\n  sessionChanged = (update) => {\n    this._session.drawables = update.drawables;\n    this._session.texts = update.texts;\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  };\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(DrawingResponseComponent, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.sessionChanged\n      });\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["DrawingResponse","update","_session","drawables","texts","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","m","_model","ModelSetEvent","s","el","React","createElement","DrawingResponseComponent","model","session","onSessionChange","sessionChanged","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEqBA,e;;;;;;;;;;;;;;;uGAkBF,UAACC,MAAD,EAAY;AAC3B,YAAKC,QAAL,CAAcC,SAAd,GAA0BF,MAAM,CAACE,SAAjC;AACA,YAAKD,QAAL,CAAcE,KAAd,GAAsBH,MAAM,CAACG,KAA7B;;AAEA,YAAKC,aAAL,CACE,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,MAAKC,UAAL,EAApD,CADF;;AAIA,YAAKC,OAAL;AACD,K;;;;;;SA1BD,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKN,aAAL,CACE,IAAIQ,8BAAJ,CACE,KAAKN,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKG,MAHT,CADF;;AAOA,WAAKF,OAAL;AACD;;;WAED,sBAAa;AACX,aAAO,KAAKR,QAAL,KAAkB,CAAC,yBAAQ,KAAKA,QAAL,CAAcC,SAAtB,CAAD,IAAqC,CAAC,yBAAQ,KAAKD,QAAL,CAAcE,KAAtB,CAAxD,CAAP;AACD;;;SAkBD,eAAc;AACZ,aAAO,KAAKF,QAAZ;AACD,K;SAPD,aAAYY,CAAZ,EAAe;AACb,WAAKZ,QAAL,GAAgBY,CAAhB;;AACA,WAAKJ,OAAL;AACD;;;WAMD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKE,MAAL,IAAe,KAAKV,QAAxB,EAAkC;AAChC,YAAMa,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,2BAApB,EAA8C;AACvDC,UAAAA,KAAK,EAAE,KAAKP,MAD2C;AAEvDQ,UAAAA,OAAO,EAAE,KAAKlB,QAFyC;AAGvDmB,UAAAA,eAAe,EAAE,KAAKC;AAHiC,SAA9C,CAAX;;AAMAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,MAAX;AACD,SAFD;AAGD;AACF;;;kDAtD0CU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport isEmpty from 'lodash/isEmpty';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport DrawingResponseComponent from './drawing-response';\n\nexport default class DrawingResponse extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));\n  }\n\n  sessionChanged = (update) => {\n    this._session.drawables = update.drawables;\n    this._session.texts = update.texts;\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  };\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(DrawingResponseComponent, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.sessionChanged\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "3.9.15",
+  "version": "3.9.18",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -11,8 +11,8 @@
     "@mdi/js": "^3.6.95",
     "@mdi/react": "^1.1.1",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/math-rendering": "^2.3.13",
-    "@pie-lib/render-ui": "^4.12.5",
+    "@pie-lib/math-rendering": "^2.4.0",
+    "@pie-lib/render-ui": "^4.12.6",
     "classnames": "^2.2.6",
     "enzyme-to-json": "^3.3.5",
     "konva": "^3.4.1",
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "92cd24e6736b2eed8f82ac44ba775ad4f2080ade",
+  "gitHead": "43f534de577f1eb49e63c8dc43d5519754d4df93",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap

@@ -215,8 +215,8 @@ exports[`Container snapshot renders 1`] = `
     <div
       style={
         Object {
-          "height": NaN,
-          "maxHeight": NaN,
+          "height": 0,
+          "maxHeight": 0,
         }
       }
     >
@@ -477,8 +477,8 @@ exports[`Container snapshot renders disabled 1`] = `
     <div
       style={
         Object {
-          "height": NaN,
-          "maxHeight": NaN,
+          "height": 0,
+          "maxHeight": 0,
         }
       }
     >

package/src/drawing-response/container.jsx

@@ -178,7 +178,7 @@ export class Container extends Component {
       TextEntry
     } = this.state;
 
-    const heightToUse = drawableDimensions * this.state.scale;
+    const heightToUse = drawableDimensions.height * this.state.scale;
 
     return (
       <div className={classes.base}>

package/src/index.js

@@ -40,6 +40,10 @@ export default class DrawingResponse extends HTMLElement {
     this._render();
   }
 
+  get session() {
+    return this._session;
+  }
+
   connectedCallback() {
     this._render();
   }
@@ -51,6 +55,7 @@ export default class DrawingResponse extends HTMLElement {
         session: this._session,
         onSessionChange: this.sessionChanged
       });
+
       ReactDOM.render(el, this, () => {
         renderMath(this);
       });