@pie-element/drawing-response 3.9.9 → 3.9.10-beta.1445

package/configure/CHANGELOG.md

@@ -3,6 +3,361 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.5.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.4.0...@pie-element/drawing-response-configure@4.5.0) (2023-01-17)
+
+
+### Features
+
+* update pie-libs ([6423903](https://github.com/pie-framework/pie-elements/commit/6423903898b041f56db2111de2e4aac4ee9f1fd3))
+
+
+
+
+
+# [4.4.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.3.6...@pie-element/drawing-response-configure@4.4.0) (2023-01-05)
+
+
+### Features
+
+* update pie-libs ([b174476](https://github.com/pie-framework/pie-elements/commit/b174476729119a0689f1f8adfc8c235246676cab))
+* update pie-libs ([f72c3c8](https://github.com/pie-framework/pie-elements/commit/f72c3c8d8bc9bbf061bb81502317157a63c22972))
+* update pie-libs ([8490729](https://github.com/pie-framework/pie-elements/commit/8490729a2389d36fd3968f0806119fde96577842))
+* **drawing-response:** added configuration prop to hide the settings panel PD-1999 ([57ddf9e](https://github.com/pie-framework/pie-elements/commit/57ddf9e56540f77ab3286495d660821bc70deb59))
+
+
+
+
+
+## [4.3.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.3.5...@pie-element/drawing-response-configure@4.3.6) (2022-12-21)
+
+
+### Bug Fixes
+
+* updated pie-libs ([8cb5b90](https://github.com/pie-framework/pie-elements/commit/8cb5b90d501ccbdf5ffd764e6555faa48b8f54d6))
+
+
+
+
+
+## [4.3.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.3.4...@pie-element/drawing-response-configure@4.3.5) (2022-12-20)
+
+
+### Bug Fixes
+
+* updated pie-libs ([6549302](https://github.com/pie-framework/pie-elements/commit/65493026fbf356c5ab752ae6a14d961d4b256368))
+
+
+
+
+
+## [4.3.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.3.3...@pie-element/drawing-response-configure@4.3.4) (2022-12-07)
+
+
+### Bug Fixes
+
+* update libs ([441f403](https://github.com/pie-framework/pie-elements/commit/441f403870b7bec0d61fab58b8d93dbe0ead4c32))
+* update libs for PD-2030 PD-2031 ([3174022](https://github.com/pie-framework/pie-elements/commit/3174022d45603ed217bbe8804a142b07084636a5))
+* updated lib PD-1715 ([42e788d](https://github.com/pie-framework/pie-elements/commit/42e788db0c792838994e55001952da7701251a8e))
+* updated libs ([c20de3a](https://github.com/pie-framework/pie-elements/commit/c20de3a6ba4499a090c809e18e52588d2a585fa0))
+* updated libs ([0eed79a](https://github.com/pie-framework/pie-elements/commit/0eed79a32c3b777c16c8cabf201513fc1d2726a0))
+* updated libs ([343c9ec](https://github.com/pie-framework/pie-elements/commit/343c9ec3dccba7f781e90ae2bd195cac6f78f467))
+
+
+
+
+
+## [4.3.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.3.2...@pie-element/drawing-response-configure@4.3.3) (2022-11-15)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [4.3.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.3.1...@pie-element/drawing-response-configure@4.3.2) (2022-11-11)
+
+
+### Bug Fixes
+
+* add sanity checks ([1cfd187](https://github.com/pie-framework/pie-elements/commit/1cfd187d2c2bab2d589aa2d7b7563b1c69e3295e))
+
+
+
+
+
+## [4.3.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.3.0...@pie-element/drawing-response-configure@4.3.1) (2022-11-11)
+
+
+### Bug Fixes
+
+* **drawing-response:** add sanity checks for withRubric ([d22ea78](https://github.com/pie-framework/pie-elements/commit/d22ea78fc5b0a9dd73d3614fbd2a39b28183a991))
+
+
+
+
+
+# [4.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.2.2...@pie-element/drawing-response-configure@4.3.0) (2022-11-01)
+
+
+### Features
+
+* add a different property in the config, forceEnabled, to force a value ([300c664](https://github.com/pie-framework/pie-elements/commit/300c664618f46177137deef3bced2d096cdb8126))
+
+
+
+
+
+## [4.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.2.1...@pie-element/drawing-response-configure@4.2.2) (2022-11-01)
+
+
+### Bug Fixes
+
+* trigger updating model depending on configuration.withRubric ([6b42963](https://github.com/pie-framework/pie-elements/commit/6b429639dade1f72e77e972530ab784c5417384c))
+* trigger updating model depending on configuration.withRubric (added additional check) ([02ae9c0](https://github.com/pie-framework/pie-elements/commit/02ae9c0664aa140d6624643b6efbdef33cea2acb))
+
+
+
+
+
+## [4.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.2.0...@pie-element/drawing-response-configure@4.2.1) (2022-10-31)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+# [4.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.9...@pie-element/drawing-response-configure@4.2.0) (2022-10-17)
+
+
+### Bug Fixes
+
+* update snapshots ([9781596](https://github.com/pie-framework/pie-elements/commit/978159686bbbd6b727dff4b88ce4ab9606504586))
+
+
+### Features
+
+* set withRubric to false in item default configurations. Set rubricEnabled to true if it's enabled for drawing-response and extended-text-entry ([a209057](https://github.com/pie-framework/pie-elements/commit/a209057f5a3fa5438efc8595453c89c11959a8f5))
+* update libs ([7e174fb](https://github.com/pie-framework/pie-elements/commit/7e174fba75e7ea668900ad5c103751cefe33e2af))
+* **drawing-response:** add pie-api config PD-23 ([d98fc22](https://github.com/pie-framework/pie-elements/commit/d98fc225c16f6bc89631f72ea488ff67feab3872))
+* **drawing-response:** add settings to enable rubric. Add withRubric prop to configuration and rubricEnabled prop to model PD-2096 ([142429a](https://github.com/pie-framework/pie-elements/commit/142429a1a92af9e41f670d4f611e9bb62039a1f3))
+* **drawing-response:** updated snapshot PD-2096 ([4e1a63c](https://github.com/pie-framework/pie-elements/commit/4e1a63cf0840c2ac93de0b314d56b9bb6c3835ac))
+* enable spanish and special characters in author PD-2120 ([85fd3dd](https://github.com/pie-framework/pie-elements/commit/85fd3dd0fc10da1a2dfd5a842809c625790f8ba9))
+* **drawing-response:** add uploadSoundSupport property PD-23-updated ([9a0f0b4](https://github.com/pie-framework/pie-elements/commit/9a0f0b4adb5d3956240fdebc62485c27572be495))
+
+
+
+
+
+## [4.1.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.8...@pie-element/drawing-response-configure@4.1.9) (2022-09-29)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [4.1.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.7...@pie-element/drawing-response-configure@4.1.8) (2022-09-14)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [4.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.6...@pie-element/drawing-response-configure@4.1.7) (2022-08-31)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [4.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.5...@pie-element/drawing-response-configure@4.1.6) (2022-08-16)
+
+
+### Bug Fixes
+
+* tests ([ae31244](https://github.com/pie-framework/pie-elements/commit/ae312449fcf05ec6787163259b3c75e15d42b261))
+* **drawing-respone:** make sure image dimensions are not reset in IBX in authoring and preview PD-1932 ([47fc982](https://github.com/pie-framework/pie-elements/commit/47fc982d21f992fecf61af96bc15744055787f78))
+* **drawing-response:** fix image aspect ratio PD-1934 ([0a094b8](https://github.com/pie-framework/pie-elements/commit/0a094b874abc81a6f642bf0bdece83ee2ce815a4))
+* **drawing-response:** fix svg not loading PD-1933 ([f65540e](https://github.com/pie-framework/pie-elements/commit/f65540e1627184d47f29ec3aeea0ad439ca07844))
+
+
+
+
+
+## [4.1.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.4...@pie-element/drawing-response-configure@4.1.5) (2022-08-08)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [4.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.3...@pie-element/drawing-response-configure@4.1.4) (2022-08-02)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [4.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.2...@pie-element/drawing-response-configure@4.1.3) (2022-07-22)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [4.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.1...@pie-element/drawing-response-configure@4.1.2) (2022-07-20)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [4.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.1.0...@pie-element/drawing-response-configure@4.1.1) (2022-07-19)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+# [4.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@4.0.0...@pie-element/drawing-response-configure@4.1.0) (2022-06-28)
+
+
+### Bug Fixes
+
+* **drawing-response:** PD-1839 do not set image width if it's 0 ([ba4e321](https://github.com/pie-framework/pie-elements/commit/ba4e321f4fe3252e93ed125efbf93d684a2740f0))
+* add missing prop ([fd4220c](https://github.com/pie-framework/pie-elements/commit/fd4220c60d519dccd9a37ab3639d4feaa90a58a4))
+* **drawing-response:** fix width of image not being rendered correctly PD-1839 ([5599ff5](https://github.com/pie-framework/pie-elements/commit/5599ff5c4d03a1d0d86c687f2b781b92903e5a63))
+
+
+### Features
+
+* **drawing-response:** add maxImageWidth and maxImageHeight props PD-1801 ([4f1fb5d](https://github.com/pie-framework/pie-elements/commit/4f1fb5dfa4616c194eefd1702854a5aaa413ce1f))
+
+
+
+
+
+# [4.0.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.25...@pie-element/drawing-response-configure@4.0.0) (2022-06-28)
+
+
+### chore
+
+* Merge master with develop. ([cdca48a](https://github.com/pie-framework/pie-elements/commit/cdca48abaa1d4179e4a961e13d171e14b7ed2444))
+
+
+### BREAKING CHANGES
+
+* Image percent buttons were removed from toolbar.
+New properties maxImageWidth and maxImageHeight were added.
+
+
+
+
+
+## [3.2.25](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.24...@pie-element/drawing-response-configure@3.2.25) (2022-06-13)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [3.2.24](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.23...@pie-element/drawing-response-configure@3.2.24) (2022-05-30)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [3.2.23](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.22...@pie-element/drawing-response-configure@3.2.23) (2022-05-16)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [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
+
+
+
+
+
+## [3.2.18](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.17...@pie-element/drawing-response-configure@3.2.18) (2022-03-22)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [3.2.17](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.16...@pie-element/drawing-response-configure@3.2.17) (2022-03-08)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [3.2.16](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.15...@pie-element/drawing-response-configure@3.2.16) (2022-03-08)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [3.2.15](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.14...@pie-element/drawing-response-configure@3.2.15) (2022-02-21)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
+## [3.2.14](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.13...@pie-element/drawing-response-configure@3.2.14) (2022-02-04)
+
+**Note:** Version bump only for package @pie-element/drawing-response-configure
+
+
+
+
+
 ## [3.2.13](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@3.2.12...@pie-element/drawing-response-configure@3.2.13) (2022-01-24)
 
 **Note:** Version bump only for package @pie-element/drawing-response-configure

package/configure/lib/button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/button.jsx"],"names":["RawButton","classes","className","label","onClick","disabled","addButton","propTypes","PropTypes","object","isRequired","string","bool","func","defaultProps","styles","marginLeft","ButtonStyled"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,SAAZ,QAAYA,SAAZ;AAAA,MAAuBC,KAAvB,QAAuBA,KAAvB;AAAA,MAA8BC,OAA9B,QAA8BA,OAA9B;AAAA,MAAuCC,QAAvC,QAAuCA,QAAvC;AAAA,sBAChB,gCAAC,kBAAD;AACE,IAAA,OAAO,EAAED,OADX;AAEE,IAAA,QAAQ,EAAEC,QAFZ;AAGE,IAAA,SAAS,EAAE,4BAAWJ,OAAO,CAACK,SAAnB,EAA8BJ,SAA9B,CAHb;AAIE,IAAA,IAAI,EAAC,OAJP;AAKE,IAAA,OAAO,EAAC,WALV;AAME,IAAA,KAAK,EAAC;AANR,KAQGC,KARH,CADgB;AAAA,CAAlB;;AAaAH,SAAS,CAACO,SAAV,GAAsB;AACpBN,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC,UADN;AAEpBR,EAAAA,SAAS,EAAEM,sBAAUG,MAFD;AAGpBN,EAAAA,QAAQ,EAAEG,sBAAUI,IAHA;AAIpBT,EAAAA,KAAK,EAAEK,sBAAUG,MAJG;AAKpBP,EAAAA,OAAO,EAAEI,sBAAUK;AALC,CAAtB;AAQAb,SAAS,CAACc,YAAV,GAAyB;AACvBZ,EAAAA,SAAS,EAAE,EADY;AAEvBG,EAAAA,QAAQ,EAAE,KAFa;AAGvBF,EAAAA,KAAK,EAAE,KAHgB;AAIvBC,EAAAA,OAAO,EAAE,mBAAM,CAAE;AAJM,CAAzB;;AAOA,IAAMW,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBT,IAAAA,SAAS,EAAE;AACTU,MAAAA,UAAU,EAAE;AADH;AADS,GAAP;AAAA,CAAf;;AAMA,IAAMC,YAAY,GAAG,wBAAWF,MAAX,EAAmBf,SAAnB,CAArB;eAEeiB,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Button from '@material-ui/core/Button';\n\nconst RawButton = ({ classes, className, label, onClick, disabled }) => (\n  <Button\n    onClick={onClick}\n    disabled={disabled}\n    className={classNames(classes.addButton, className)}\n    size=\"small\"\n    variant=\"contained\"\n    color=\"default\"\n  >\n    {label}\n  </Button>\n);\n\nRawButton.propTypes = {\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func\n};\n\nRawButton.defaultProps = {\n  className: '',\n  disabled: false,\n  label: 'Add',\n  onClick: () => {}\n};\n\nconst styles = () => ({\n  addButton: {\n    marginLeft: 8\n  }\n});\n\nconst ButtonStyled = withStyles(styles)(RawButton);\n\nexport default ButtonStyled;\n"],"file":"button.js"}
+{"version":3,"sources":["../src/button.jsx"],"names":["RawButton","classes","className","label","onClick","disabled","addButton","propTypes","PropTypes","object","isRequired","string","bool","func","defaultProps","styles","marginLeft","ButtonStyled"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,SAAS,GAAG,SAAZA,SAAY;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,SAAZ,QAAYA,SAAZ;AAAA,MAAuBC,KAAvB,QAAuBA,KAAvB;AAAA,MAA8BC,OAA9B,QAA8BA,OAA9B;AAAA,MAAuCC,QAAvC,QAAuCA,QAAvC;AAAA,sBAChB,gCAAC,kBAAD;AACE,IAAA,OAAO,EAAED,OADX;AAEE,IAAA,QAAQ,EAAEC,QAFZ;AAGE,IAAA,SAAS,EAAE,4BAAWJ,OAAO,CAACK,SAAnB,EAA8BJ,SAA9B,CAHb;AAIE,IAAA,IAAI,EAAC,OAJP;AAKE,IAAA,OAAO,EAAC,WALV;AAME,IAAA,KAAK,EAAC;AANR,KAQGC,KARH,CADgB;AAAA,CAAlB;;AAaAH,SAAS,CAACO,SAAV,GAAsB;AACpBN,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC,UADN;AAEpBR,EAAAA,SAAS,EAAEM,sBAAUG,MAFD;AAGpBN,EAAAA,QAAQ,EAAEG,sBAAUI,IAHA;AAIpBT,EAAAA,KAAK,EAAEK,sBAAUG,MAJG;AAKpBP,EAAAA,OAAO,EAAEI,sBAAUK;AALC,CAAtB;AAQAb,SAAS,CAACc,YAAV,GAAyB;AACvBZ,EAAAA,SAAS,EAAE,EADY;AAEvBG,EAAAA,QAAQ,EAAE,KAFa;AAGvBF,EAAAA,KAAK,EAAE,KAHgB;AAIvBC,EAAAA,OAAO,EAAE,mBAAM,CAAE;AAJM,CAAzB;;AAOA,IAAMW,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBT,IAAAA,SAAS,EAAE;AACTU,MAAAA,UAAU,EAAE;AADH;AADS,GAAP;AAAA,CAAf;;AAMA,IAAMC,YAAY,GAAG,wBAAWF,MAAX,EAAmBf,SAAnB,CAArB;eAEeiB,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport Button from '@material-ui/core/Button';\n\nconst RawButton = ({ classes, className, label, onClick, disabled }) => (\n  <Button\n    onClick={onClick}\n    disabled={disabled}\n    className={classNames(classes.addButton, className)}\n    size=\"small\"\n    variant=\"contained\"\n    color=\"default\"\n  >\n    {label}\n  </Button>\n);\n\nRawButton.propTypes = {\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  label: PropTypes.string,\n  onClick: PropTypes.func,\n};\n\nRawButton.defaultProps = {\n  className: '',\n  disabled: false,\n  label: 'Add',\n  onClick: () => {},\n};\n\nconst styles = () => ({\n  addButton: {\n    marginLeft: 8,\n  },\n});\n\nconst ButtonStyled = withStyles(styles)(RawButton);\n\nexport default ButtonStyled;\n"],"file":"button.js"}

package/configure/lib/defaults.js

@@ -15,21 +15,40 @@ var _default = {
     promptEnabled: true,
     teacherInstructionsEnabled: true,
     studentInstructionsEnabled: true,
+    backgroundImageEnabled: true,
+    spellCheckEnabled: true,
     toolbarEditorPosition: 'bottom'
   },
   configuration: {
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
     backgroundImage: {
       settings: true,
-      label: 'Background Image',
-      enabled: true
+      label: 'Background Image'
     },
     prompt: {
       settings: true,
       label: 'Prompt'
     },
+    settingsPanelDisabled: false,
     teacherInstructions: {
       settings: true,
       label: 'Teacher Instructions'
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric'
     }
   }
 };

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","imageUrl","imageDimensions","height","width","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","toolbarEditorPosition","configuration","backgroundImage","settings","label","enabled","teacherInstructions"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,QAAQ,EAAE,EAFL;AAGLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,MAAM,EAAE,CADO;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KAHZ;AAOLC,IAAAA,aAAa,EAAE,IAPV;AAQLC,IAAAA,0BAA0B,EAAE,IARvB;AASLC,IAAAA,0BAA0B,EAAE,IATvB;AAULC,IAAAA,qBAAqB,EAAE;AAVlB,GADM;AAabC,EAAAA,aAAa,EAAE;AACbC,IAAAA,eAAe,EAAE;AACfC,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE,kBAFQ;AAGfC,MAAAA,OAAO,EAAE;AAHM,KADJ;AAMbb,IAAAA,MAAM,EAAE;AACNW,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KANK;AAUbE,IAAAA,mBAAmB,EAAE;AACnBH,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY;AAVR;AAbF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    imageUrl: '',\n    imageDimensions: {\n      height: 0,\n      width: 0\n    },\n    promptEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    backgroundImage: {\n      settings: true,\n      label: 'Background Image',\n      enabled: true\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt'\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    }\n  }\n};\n"],"file":"defaults.js"}
+{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","imageUrl","imageDimensions","height","width","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","spellCheckEnabled","toolbarEditorPosition","configuration","spellCheck","label","settings","enabled","backgroundImage","settingsPanelDisabled","teacherInstructions","maxImageWidth","maxImageHeight","withRubric"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,QAAQ,EAAE,EAFL;AAGLC,IAAAA,eAAe,EAAE;AACfC,MAAAA,MAAM,EAAE,CADO;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KAHZ;AAOLC,IAAAA,aAAa,EAAE,IAPV;AAQLC,IAAAA,0BAA0B,EAAE,IARvB;AASLC,IAAAA,0BAA0B,EAAE,IATvB;AAULC,IAAAA,sBAAsB,EAAE,IAVnB;AAWLC,IAAAA,iBAAiB,EAAE,IAXd;AAYLC,IAAAA,qBAAqB,EAAE;AAZlB,GADM;AAebC,EAAAA,aAAa,EAAE;AACbC,IAAAA,UAAU,EAAE;AACVC,MAAAA,KAAK,EAAE,YADG;AAEVC,MAAAA,QAAQ,EAAE,KAFA;AAGVC,MAAAA,OAAO,EAAE;AAHC,KADC;AAMbC,IAAAA,eAAe,EAAE;AACfF,MAAAA,QAAQ,EAAE,IADK;AAEfD,MAAAA,KAAK,EAAE;AAFQ,KANJ;AAUbb,IAAAA,MAAM,EAAE;AACNc,MAAAA,QAAQ,EAAE,IADJ;AAEND,MAAAA,KAAK,EAAE;AAFD,KAVK;AAcbI,IAAAA,qBAAqB,EAAE,KAdV;AAebC,IAAAA,mBAAmB,EAAE;AACnBJ,MAAAA,QAAQ,EAAE,IADS;AAEnBD,MAAAA,KAAK,EAAE;AAFY,KAfR;AAmBbM,IAAAA,aAAa,EAAE;AACbD,MAAAA,mBAAmB,EAAE,GADR;AAEblB,MAAAA,MAAM,EAAE;AAFK,KAnBF;AAuBboB,IAAAA,cAAc,EAAE;AACdF,MAAAA,mBAAmB,EAAE,GADP;AAEdlB,MAAAA,MAAM,EAAE;AAFM,KAvBH;AA2BbqB,IAAAA,UAAU,EAAE;AACVP,MAAAA,QAAQ,EAAE,KADA;AAEVD,MAAAA,KAAK,EAAE;AAFG;AA3BC;AAfF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    imageUrl: '',\n    imageDimensions: {\n      height: 0,\n      width: 0,\n    },\n    promptEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    backgroundImageEnabled: true,\n    spellCheckEnabled: true,\n    toolbarEditorPosition: 'bottom',\n  },\n  configuration: {\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    backgroundImage: {\n      settings: true,\n      label: 'Background Image',\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt',\n    },\n    settingsPanelDisabled: false,\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n    },\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n  },\n};\n"],"file":"defaults.js"}

package/configure/lib/image-container.js

@@ -129,13 +129,23 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnImageLoad", function (_ref) {
       var _ref$target = _ref.target,
           offsetHeight = _ref$target.offsetHeight,
-          offsetWidth = _ref$target.offsetWidth;
-      var onUpdateImageDimension = _this.props.onUpdateImageDimension;
+          offsetWidth = _ref$target.offsetWidth,
+          naturalHeight = _ref$target.naturalHeight,
+          naturalWidth = _ref$target.naturalWidth;
+      var _this$props = _this.props,
+          onUpdateImageDimension = _this$props.onUpdateImageDimension,
+          imageDimensions = _this$props.imageDimensions;
       var resizeHandle = _this.resize;
       var dimensions = {
-        height: offsetHeight,
-        width: offsetWidth
-      };
+        height: imageDimensions && imageDimensions.height || offsetHeight || naturalHeight,
+        width: imageDimensions && imageDimensions.width || offsetWidth || naturalWidth
+      }; // check if aspect ratio is not respected on replacing image
+
+      var imageAspectRatio = naturalWidth / naturalHeight;
+
+      if (dimensions.width !== dimensions.height * imageAspectRatio) {
+        dimensions.width = dimensions.height * imageAspectRatio;
+      }
 
       _this.setState({
         dimensions: dimensions
@@ -160,21 +170,25 @@ 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,
+          maxImageHeight = _this$state.maxImageHeight,
+          dimensions = _this$state.dimensions;
       var bounds = e.target.getBoundingClientRect();
       var x = e.clientX - bounds.left;
       var y = e.clientY - bounds.top;
-      var fitsContainer = x <= maxImageWidth + 5;
+      var imageAspectRatio = dimensions.width / dimensions.height;
+      var fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;
       var hasMinimumWidth = x > 150 && y > 150;
 
-      if (fitsContainer && hasMinimumWidth) {
+      if (fitsContainer && hasMinimumWidth && box) {
         box.style.width = "".concat(x, "px");
-        box.style.height = "".concat(y, "px");
+        box.style.height = "".concat(x / imageAspectRatio, "px");
 
         _this.setState({
           dimensions: {
-            height: y,
-            width: x
+            width: x,
+            height: x / imageAspectRatio
           }
         });
       }
@@ -182,8 +196,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
       _this.handleDisableDrag();
     });
     _this.state = {
-      maxImageWidth: 0,
-      maxImageHeight: 0,
+      maxImageWidth: '100%',
+      maxImageHeight: 'auto',
       dragEnabled: true,
       dropzoneActive: false
     };
@@ -227,14 +241,15 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this3 = this;
 
-      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;
+      var _this$props2 = this.props,
+          classes = _this$props2.classes,
+          imageUrl = _this$props2.imageUrl,
+          imageDimensions = _this$props2.imageDimensions;
+      var _this$state2 = this.state,
+          dropzoneActive = _this$state2.dropzoneActive,
+          dragEnabled = _this$state2.dragEnabled,
+          maxImageHeight = _this$state2.maxImageHeight,
+          maxImageWidth = _this$state2.maxImageWidth;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
@@ -262,6 +277,7 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
         },
         src: imageUrl,
         style: {
+          width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
           maxWidth: maxImageWidth,
           maxHeight: maxImageHeight
         },

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","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"}
+{"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","naturalHeight","naturalWidth","onUpdateImageDimension","imageDimensions","resizeHandle","resize","dimensions","height","width","imageAspectRatio","addEventListener","initialiseResize","window","startResizing","stopResizing","handleEnableDrag","removeEventListener","box","image","maxImageWidth","maxImageHeight","bounds","getBoundingClientRect","x","clientX","left","y","clientY","top","fitsContainer","hasMinimumWidth","style","handleDisableDrag","imageSection","positionInfo","label","classes","handleInputClick","handleUploadImage","ref","imageUrl","base","boxActive","onDragExit","handleOnDragExit","onDragLeave","onDragOver","handleOnDragOver","onDrop","handleOnDrop","toolbar","renderUploadControl","drawableHeight","imageContainer","handleOnImageLoad","undefined","maxWidth","maxHeight","centered","Component","styles","theme","marginTop","spacing","unit","border","borderRadius","alignItems","display","flexDirection","justifyContent","minHeight","position","borderBottom","borderRight","bottom","cursor","right","backgroundColor","borderTopLeftRadius","borderTopRightRadius","padding","propTypes","PropTypes","object","isRequired","string","func"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Button from './button';\n\nconst isImage = (file) => {\n  const imageType = /image.*/;\n  return file.type.match(imageType);\n};\n\nexport class ImageContainer extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      maxImageWidth: '100%',\n      maxImageHeight: 'auto',\n      dragEnabled: true,\n      dropzoneActive: false,\n    };\n  }\n\n  componentDidMount() {\n    if (this.imageSection) {\n      const positionInfo = this.imageSection.getBoundingClientRect();\n      const { height, width } = positionInfo;\n      this.setState({\n        maxImageWidth: width,\n        maxImageHeight: height,\n      });\n    }\n  }\n\n  handleFileRead = (file) => {\n    const { onImageUpload } = this.props;\n    const reader = new FileReader();\n    reader.onloadend = () => {\n      onImageUpload(reader.result);\n    };\n    reader.readAsDataURL(file);\n  };\n\n  handleUploadImage = (e) => {\n    e.preventDefault();\n    const file = e.target.files[0];\n    this.handleFileRead(file);\n  };\n\n  makeDropzoneActive = () => this.setState({ dropzoneActive: true });\n\n  makeDropzoneInactive = () => this.setState({ dropzoneActive: false });\n\n  handleOnDrop = (e) => {\n    e.preventDefault();\n    const { items, files } = e.dataTransfer;\n\n    if (items && items[0].kind === 'file') {\n      const file = items[0].getAsFile();\n      if (isImage(file)) {\n        this.handleFileRead(file);\n      }\n    } else if (isImage(files[0])) {\n      this.handleFileRead(files[0]);\n    }\n\n    this.makeDropzoneInactive();\n  };\n\n  handleOnDragOver = (e) => {\n    e.preventDefault();\n    const { dropzoneActive } = this.state;\n\n    if (!dropzoneActive) {\n      this.makeDropzoneActive();\n    }\n  };\n\n  handleOnDragExit = (e) => {\n    e.preventDefault();\n    this.makeDropzoneInactive();\n  };\n\n  handleEnableDrag = () => this.setState({ dragEnabled: true });\n  handleDisableDrag = () => this.setState({ dragEnabled: false });\n  handleInputClick = () => this.input.click();\n\n  handleOnImageLoad = ({ target: { offsetHeight, offsetWidth, naturalHeight, naturalWidth } }) => {\n    const { onUpdateImageDimension, imageDimensions } = this.props;\n    const resizeHandle = this.resize;\n\n    const dimensions = {\n      height: (imageDimensions && imageDimensions.height) || offsetHeight || naturalHeight,\n      width: (imageDimensions && imageDimensions.width) || offsetWidth || naturalWidth,\n    };\n\n    // check if aspect ratio is not respected on replacing image\n    const imageAspectRatio = naturalWidth / naturalHeight;\n\n    if (dimensions.width !== dimensions.height * imageAspectRatio) {\n      dimensions.width = dimensions.height * imageAspectRatio;\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, maxImageHeight, 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    const fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;\n    const hasMinimumWidth = x > 150 && y > 150;\n\n    if (fitsContainer && hasMinimumWidth && box) {\n      box.style.width = `${x}px`;\n      box.style.height = `${x / imageAspectRatio}px`;\n\n      this.setState({\n        dimensions: {\n          width: x,\n          height: x / imageAspectRatio,\n        },\n      });\n    }\n\n    this.handleDisableDrag();\n  };\n\n  renderUploadControl(label) {\n    const { classes } = this.props;\n\n    return (\n      <div>\n        <Button label={label} onClick={this.handleInputClick} />\n        <input\n          accept=\"image/*\"\n          className={classes.input}\n          onChange={this.handleUploadImage}\n          ref={(ref) => {\n            this.input = ref;\n          }}\n          type=\"file\"\n        />\n      </div>\n    );\n  }\n\n  render() {\n    const { classes, imageUrl, imageDimensions } = this.props;\n    const { dropzoneActive, dragEnabled, maxImageHeight, maxImageWidth } = this.state;\n\n    return (\n      <div className={classes.base}>\n        <div\n          className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}\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}>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</div>\n\n          <div\n            ref={(ref) => {\n              this.imageSection = ref;\n            }}\n            className={classes.drawableHeight}\n          >\n            {imageUrl ? (\n              <div className={classes.imageContainer}>\n                <img\n                  className={classes.image}\n                  height=\"auto\"\n                  onLoad={this.handleOnImageLoad}\n                  ref={(ref) => {\n                    this.image = ref;\n                  }}\n                  src={imageUrl}\n                  style={{\n                    width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,\n                    maxWidth: maxImageWidth,\n                    maxHeight: maxImageHeight,\n                  }}\n                  alt=\"\"\n                />\n                <div\n                  ref={(ref) => {\n                    this.resize = ref;\n                  }}\n                  className={classes.resize}\n                />\n              </div>\n            ) : (\n              <div className={`${classes.drawableHeight} ${classes.centered}`}>\n                <label>Drag and drop or upload image from computer</label>\n                <br />\n                {this.renderUploadControl('Upload Image')}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n  },\n  boxActive: {\n    border: '1px solid #0032C2',\n  },\n  centered: {\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n  },\n  drawableHeight: {\n    minHeight: 350,\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n  input: {\n    display: 'none',\n  },\n  toolbar: {\n    backgroundColor: '#ECEDF1',\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    display: 'flex',\n    padding: '12px 8px',\n  },\n});\n\nImageContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  onImageUpload: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}