@pie-element/drawing-response 3.9.12 → 3.9.15

package/docs/pie-schema.json

@@ -63,6 +63,16 @@
       "type": "boolean",
       "title": "teacherInstructionsEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled for the author. Default value is true",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
+    "backgroundImageEnabled": {
+      "description": "Indicates if Background Image is enabled",
+      "type": "boolean",
+      "title": "backgroundImageEnabled"
+    },
     "toolbarEditorPosition": {
       "description": "Indicates the editor's toolbar position which can be 'bottom' or 'top'",
       "default": ": 'bottom'",
@@ -85,9 +95,11 @@
     }
   },
   "required": [
+    "backgroundImageEnabled",
     "element",
     "id",
     "imageDimensions",
+    "spellCheckEnabled",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],

package/docs/pie-schema.json.md

@@ -46,6 +46,14 @@ Indicates if Student Instructions are enabled
 
 Indicates if Teacher Instructions are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled for the author. Default value is true
+
+# `backgroundImageEnabled` (boolean, required)
+
+Indicates if Background Image is enabled
+
 # `toolbarEditorPosition` (string, enum)
 
 Indicates the editor's toolbar position which can be 'bottom' or 'top'

package/lib/drawing-response/container.js

@@ -81,6 +81,7 @@ var Container = /*#__PURE__*/function (_Component) {
     });
     var TextEntry = new _drawableText["default"]();
     _this.state = {
+      scale: 1,
       drawableDimensions: {
         height: 0,
         width: 0
@@ -136,13 +137,49 @@ var Container = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this3 = this;
+
       this.setDimensions();
+      this.observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function () {
+          var _document$getElementB, _document$getElementB2;
+
+          var target = (_document$getElementB = document.getElementById('question-container')) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.style) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.cssText;
+          var zoom = target === null || target === void 0 ? void 0 : target.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
+          var zoomParsed = zoom === null || zoom === void 0 ? void 0 : zoom.replace(/\s/g, '');
+
+          if (zoomParsed) {
+            var newScale = parseFloat(zoomParsed) / 100;
+
+            if (newScale !== _this3.state.scale) {
+              _this3.setState({
+                scale: parseFloat(zoomParsed) / 100
+              });
+            }
+          } else if (!zoomParsed && _this3.state.scale !== 1) {
+            _this3.setState({
+              scale: 1
+            });
+          }
+        });
+      });
+      var target = document.getElementById('question-container');
+
+      if (target) {
+        this.observer.observe(target, {
+          attributes: true,
+          attributeFilter: ['style']
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$observer;
+
       var TextEntry = this.state.TextEntry;
       TextEntry.removeEventListeners();
+      (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.disconnect();
     }
   }, {
     key: "handleMakeToolActive",
@@ -171,7 +208,7 @@ var Container = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this4 = this;
 
       var _this$props = this.props,
           classes = _this$props.classes,
@@ -179,7 +216,8 @@ var Container = /*#__PURE__*/function (_Component) {
           imageUrl = _this$props.imageUrl,
           imageDimensions = _this$props.imageDimensions,
           onSessionChange = _this$props.onSessionChange,
-          session = _this$props.session;
+          session = _this$props.session,
+          backgroundImageEnabled = _this$props.backgroundImageEnabled;
       var _this$state = this.state,
           drawableDimensions = _this$state.drawableDimensions,
           toolActive = _this$state.toolActive,
@@ -190,6 +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;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement(_drawablePalette["default"], {
@@ -200,13 +239,13 @@ var Container = /*#__PURE__*/function (_Component) {
         paintColor: paintColor,
         paintList: paintColorList,
         onFillColorChange: function onFillColorChange(color) {
-          return _this3.handleColorChange('fill', color);
+          return _this4.handleColorChange('fill', color);
         },
         onOutlineColorChange: function onOutlineColorChange(color) {
-          return _this3.handleColorChange('outline', color);
+          return _this4.handleColorChange('outline', color);
         },
         onPaintColorChange: function onPaintColorChange(color) {
-          return _this3.handleColorChange('paint', color);
+          return _this4.handleColorChange('paint', color);
         }
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.box
@@ -219,9 +258,9 @@ var Container = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react["default"].createElement(_button["default"], {
           title: label,
           key: type,
-          disabled: _this3.checkIfToolIsDisabled(type),
+          disabled: _this4.checkIfToolIsDisabled(type),
           onClick: function onClick() {
-            return _this3.handleMakeToolActive(tool);
+            return _this4.handleMakeToolActive(tool);
           },
           label: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
             path: icon
@@ -229,10 +268,15 @@ var Container = /*#__PURE__*/function (_Component) {
         });
       }))), /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(drawable) {
-          _this3.drawable = drawable;
+          _this4.drawable = drawable;
         },
-        className: classes.drawableHeight
+        className: classes.drawableHeight,
+        style: {
+          height: heightToUse,
+          maxHeight: heightToUse
+        }
       }, /*#__PURE__*/_react["default"].createElement(_drawableMain["default"], {
+        scale: this.state.scale,
         session: session,
         disabled: disabled,
         onSessionChange: onSessionChange,
@@ -243,7 +287,8 @@ var Container = /*#__PURE__*/function (_Component) {
         drawableDimensions: drawableDimensions,
         imageDimensions: imageDimensions,
         toolActive: toolActive,
-        TextEntry: TextEntry
+        TextEntry: TextEntry,
+        backgroundImageEnabled: backgroundImageEnabled
       }))));
     }
   }]);
@@ -257,7 +302,8 @@ exports.Container = Container;
   session: _propTypes["default"].object.isRequired,
   onSessionChange: _propTypes["default"].func.isRequired,
   imageDimensions: _propTypes["default"].object.isRequired,
-  imageUrl: _propTypes["default"].string.isRequired
+  imageUrl: _propTypes["default"].string.isRequired,
+  backgroundImageEnabled: _propTypes["default"].bool.isRequired
 });
 
 var styles = function styles(theme) {

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","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","checkExist","setInterval","drawable","getBoundingClientRect","setState","e","console","warn","clearInterval","setDimensions","removeEventListeners","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","session","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","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  };\n\n  constructor(props) {\n    super(props);\n    const TextEntry = new DrawableText();\n\n    this.state = {\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\n  componentWillUnmount() {\n    const { TextEntry } = this.state;\n\n    TextEntry.removeEventListeners();\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    } = 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    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          >\n            <DrawableMain\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            />\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 * 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/drawing-response/drawable-image.js

@@ -22,11 +22,12 @@ var DrawableImage = function DrawableImage(_ref) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.imageContainer
   }, /*#__PURE__*/_react["default"].createElement("img", {
+    alt: "drawing-response-image",
     className: classes.image,
     src: url,
     style: {
       height: height,
-      maxWidth: width,
+      maxWidth: 598,
       maxHeight: 350,
       width: width
     }

package/lib/drawing-response/drawable-image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-image.jsx"],"names":["DrawableImage","classes","url","dimensions","height","width","imageContainer","image","maxWidth","maxHeight","styles","alignItems","display","justifyContent","position","propTypes","PropTypes","object","isRequired","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,GAAZ,QAAYA,GAAZ;AAAA,6BAAiBC,UAAjB;AAAA,MAA+BC,MAA/B,mBAA+BA,MAA/B;AAAA,MAAuCC,KAAvC,mBAAuCA,KAAvC;AAAA,sBACpB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE;AACE,IAAA,SAAS,EAAEL,OAAO,CAACM,KADrB;AAEE,IAAA,GAAG,EAAEL,GAFP;AAGE,IAAA,KAAK,EAAE;AACLE,MAAAA,MAAM,EAANA,MADK;AAELI,MAAAA,QAAQ,EAAEH,KAFL;AAGLI,MAAAA,SAAS,EAAE,GAHN;AAILJ,MAAAA,KAAK,EAALA;AAJK;AAHT,IADF,CADoB;AAAA,CAAtB;;AAeA,IAAMK,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBH,IAAAA,KAAK,EAAE;AACLI,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KADa;AAMpBP,IAAAA,cAAc,EAAE;AACdQ,MAAAA,QAAQ,EAAE,UADI;AAEdT,MAAAA,KAAK,EAAE;AAFO;AANI,GAAP;AAAA,CAAf;;AAYAL,aAAa,CAACe,SAAd,GAA0B;AACxBd,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADF;AAExBf,EAAAA,UAAU,EAAEa,sBAAUC,MAAV,CAAiBC,UAFL;AAGxBhB,EAAAA,GAAG,EAACc,sBAAUG,MAAV,CAAiBD;AAHG,CAA1B;;eAMe,wBAAWR,MAAX,EAAmBV,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DrawableImage = ({ classes, url, dimensions: { height, width } }) => (\n  <div className={classes.imageContainer}>\n    <img\n      className={classes.image}\n      src={url}\n      style={{\n        height,\n        maxWidth: width,\n        maxHeight: 350,\n        width,\n      }}\n    />\n  </div>\n);\n\nconst styles = () => ({\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content'\n  }\n});\n\nDrawableImage.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  url:PropTypes.string.isRequired\n};\n\nexport default withStyles(styles)(DrawableImage);\n"],"file":"drawable-image.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-image.jsx"],"names":["DrawableImage","classes","url","dimensions","height","width","imageContainer","image","maxWidth","maxHeight","styles","alignItems","display","justifyContent","position","propTypes","PropTypes","object","isRequired","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,GAAZ,QAAYA,GAAZ;AAAA,6BAAiBC,UAAjB;AAAA,MAA+BC,MAA/B,mBAA+BA,MAA/B;AAAA,MAAuCC,KAAvC,mBAAuCA,KAAvC;AAAA,sBACpB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE;AACE,IAAA,GAAG,EAAC,wBADN;AAEE,IAAA,SAAS,EAAEL,OAAO,CAACM,KAFrB;AAGE,IAAA,GAAG,EAAEL,GAHP;AAIE,IAAA,KAAK,EAAE;AACLE,MAAAA,MAAM,EAANA,MADK;AAELI,MAAAA,QAAQ,EAAE,GAFL;AAGLC,MAAAA,SAAS,EAAE,GAHN;AAILJ,MAAAA,KAAK,EAALA;AAJK;AAJT,IADF,CADoB;AAAA,CAAtB;;AAgBA,IAAMK,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBH,IAAAA,KAAK,EAAE;AACLI,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KADa;AAMpBP,IAAAA,cAAc,EAAE;AACdQ,MAAAA,QAAQ,EAAE,UADI;AAEdT,MAAAA,KAAK,EAAE;AAFO;AANI,GAAP;AAAA,CAAf;;AAYAL,aAAa,CAACe,SAAd,GAA0B;AACxBd,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADF;AAExBf,EAAAA,UAAU,EAAEa,sBAAUC,MAAV,CAAiBC,UAFL;AAGxBhB,EAAAA,GAAG,EAACc,sBAAUG,MAAV,CAAiBD;AAHG,CAA1B;;eAMe,wBAAWR,MAAX,EAAmBV,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DrawableImage = ({ classes, url, dimensions: { height, width } }) => (\n  <div className={classes.imageContainer}>\n    <img\n      alt=\"drawing-response-image\"\n      className={classes.image}\n      src={url}\n      style={{\n        height,\n        maxWidth: 598,\n        maxHeight: 350,\n        width,\n      }}\n    />\n  </div>\n);\n\nconst styles = () => ({\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content'\n  }\n});\n\nDrawableImage.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  url:PropTypes.string.isRequired\n};\n\nexport default withStyles(styles)(DrawableImage);\n"],"file":"drawable-image.js"}

package/lib/drawing-response/drawable-main.js

@@ -47,9 +47,9 @@ var _button = _interopRequireDefault(require("./button"));
 
 var _factory = _interopRequireDefault(require("./factory"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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); }; }
 
@@ -103,7 +103,8 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = _this.props,
           toolActive = _this$props2.toolActive,
           fillColor = _this$props2.fillColor,
-          outlineColor = _this$props2.outlineColor;
+          outlineColor = _this$props2.outlineColor,
+          scale = _this$props2.scale;
 
       if (newDrawable.length === 0 && !textIsSelected) {
         var _e$target$getStage$ge = e.target.getStage().getPointerPosition(),
@@ -111,8 +112,8 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
             y = _e$target$getStage$ge.y;
 
         var _newDrawable = (0, _factory["default"])(toolActive.type, {
-          startx: x,
-          starty: y,
+          startx: x / scale,
+          starty: y / scale,
           fillColor: fillColor,
           outlineColor: outlineColor,
           createdAt: new Date()
@@ -127,6 +128,7 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
       var _this$state2 = _this.state,
           newDrawable = _this$state2.newDrawable,
           drawables = _this$state2.drawables;
+      var scale = _this.props.scale;
 
       if (newDrawable.length === 1) {
         var _e$target$getStage$ge2 = e.target.getStage().getPointerPosition(),
@@ -134,7 +136,7 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
             y = _e$target$getStage$ge2.y;
 
         var drawableToAdd = newDrawable[0];
-        drawableToAdd.registerMovement(x, y);
+        drawableToAdd.registerMovement(x / scale, y / scale);
         drawables.push(drawableToAdd);
 
         _this.setState({
@@ -145,6 +147,7 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseMove", function (e) {
       var newDrawable = _this.state.newDrawable;
+      var scale = _this.props.scale;
 
       if (newDrawable.length === 1) {
         var _e$target$getStage$ge3 = e.target.getStage().getPointerPosition(),
@@ -152,7 +155,7 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
             y = _e$target$getStage$ge3.y;
 
         var updatedNewDrawable = newDrawable[0];
-        updatedNewDrawable.registerMovement(x, y);
+        updatedNewDrawable.registerMovement(x / scale, y / scale);
 
         _this.setState({
           newDrawable: [updatedNewDrawable]
@@ -257,7 +260,10 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
           paintColor = _this$props3.paintColor,
           outlineColor = _this$props3.outlineColor,
           TextEntry = _this$props3.TextEntry,
-          type = _this$props3.toolActive.type;
+          _this$props3$backgrou = _this$props3.backgroundImageEnabled,
+          backgroundImageEnabled = _this$props3$backgrou === void 0 ? true : _this$props3$backgrou,
+          type = _this$props3.toolActive.type,
+          scale = _this$props3.scale;
       var _this$state3 = this.state,
           isOver = _this$state3.isOver,
           newDrawable = _this$state3.newDrawable;
@@ -280,7 +286,8 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
         handleSessionChange: this.handleSessionChange,
         stage: this.stage,
         onMouseOverElement: this.onMouseOverElement,
-        onMouseOutElement: this.onMouseOutElement
+        onMouseOutElement: this.onMouseOutElement,
+        scale: scale
       };
       var listeners = {};
 
@@ -295,6 +302,8 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
         }
       }
 
+      var imageHeight = (imageDimensions === null || imageDimensions === void 0 ? void 0 : imageDimensions.height) * scale;
+      var imageWidth = (imageDimensions === null || imageDimensions === void 0 ? void 0 : imageDimensions.width) * scale;
       return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.undoControls
       }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
@@ -307,10 +316,15 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
         label: "Clear all"
       })), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
-      }, imageUrl && /*#__PURE__*/_react["default"].createElement(_drawableImage["default"], {
-        dimensions: imageDimensions,
+      }, backgroundImageEnabled && imageUrl && /*#__PURE__*/_react["default"].createElement(_drawableImage["default"], {
+        dimensions: {
+          height: imageHeight,
+          width: imageWidth
+        },
         url: imageUrl
       }), TextEntry.renderTextareas(), /*#__PURE__*/_react["default"].createElement(_reactKonva.Stage, (0, _extends2["default"])({
+        scaleX: scale,
+        scaleY: scale,
         ref: function ref(_ref2) {
           _this2.stage = _ref2;
         },
@@ -367,7 +381,9 @@ DrawableMain.propTypes = {
   imageUrl: _propTypes["default"].string.isRequired,
   TextEntry: _propTypes["default"].object.isRequired,
   toolActive: _propTypes["default"].object.isRequired,
-  session: _propTypes["default"].object.isRequired
+  session: _propTypes["default"].object.isRequired,
+  backgroundImageEnabled: _propTypes["default"].bool.isRequired,
+  scale: _propTypes["default"].number.isRequired
 };
 
 var _default = (0, _styles.withStyles)(styles)(DrawableMain);

package/lib/drawing-response/drawable-main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-main.jsx"],"names":["DrawableMain","props","onSessionChange","session","TextEntry","drawables","state","newSession","map","d","toJson","texts","all","text","id","attrs","value","setState","isOver","e","newDrawable","textIsSelected","toolActive","fillColor","outlineColor","length","target","getStage","getPointerPosition","x","y","type","startx","starty","createdAt","Date","drawableToAdd","registerMovement","push","handleSessionChange","bind","updatedNewDrawable","newDrawables","allData","sort","a","b","lastElement","pop","updatedAt","nextProps","currentDrawables","drawablesString","JSON","stringify","sessionDrawableString","drawable","drawableArray","currentTexts","setAll","classes","disabled","drawableDimensions","imageDimensions","imageUrl","paintColor","draggable","paint","drawableProps","forceUpdate","toggleTextSelected","stage","onMouseOverElement","onMouseOutElement","listeners","onMouseUp","handleMouseUp","onMouseMove","handleMouseMove","onMouseDown","handleMouseDown","undoControls","handleUndo","handleClearAll","base","renderTextareas","ref","active","height","width","layer","key","render","React","Component","styles","position","left","top","cursor","marginTop","propTypes","PropTypes","object","isRequired","bool","string","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport omit from 'lodash/omit';\nimport cloneDeep from 'lodash/cloneDeep';\nimport isEqual from 'lodash/isEqual';\nimport classnames from 'classnames';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageBackground from './drawable-image';\nimport Button from './button';\nimport factory from './factory';\n\nexport class DrawableMain extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      drawables: [],\n      newDrawable: [],\n      textIsSelected: false\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps.session) {\n      const { TextEntry } = nextProps;\n      const { drawables: currentDrawables } = this.state;\n\n      if (nextProps.session.drawables) {\n        const newDrawables = cloneDeep(nextProps.session.drawables);\n        const drawablesString = JSON.stringify(currentDrawables);\n        const sessionDrawableString = JSON.stringify(\n          (newDrawables || []).map(drawable => omit(drawable, 'type'))\n        );\n\n        if (drawablesString !== sessionDrawableString) {\n          const drawableArray = nextProps.session.drawables;\n\n          this.setState({\n            drawables: drawableArray.map(drawable =>\n              factory(drawable.type, drawable)\n            )\n          });\n        }\n\n        const currentTexts = TextEntry.all.map(text => ({\n          ...text,\n          ...(TextEntry[`text_${text.id}`] &&\n            TextEntry[`text_${text.id}`].attrs),\n          value:\n            TextEntry[`textarea_${text.id}`] &&\n            TextEntry[`textarea_${text.id}`].value\n        }));\n\n        if (!isEqual(currentTexts, nextProps.session.texts)) {\n          TextEntry.setAll(nextProps.session.texts || []);\n        }\n      }\n    } else {\n      this.handleSessionChange();\n    }\n  }\n\n  handleSessionChange = () => {\n    const { onSessionChange, session, TextEntry } = this.props;\n    const { drawables } = this.state;\n\n    const newSession = {\n      drawables: drawables.map(d => d.toJson()),\n      texts: TextEntry.all.map(text => ({\n        ...text,\n        ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),\n        value:\n          TextEntry[`textarea_${text.id}`] &&\n          TextEntry[`textarea_${text.id}`].value\n      }))\n    };\n\n    if (!isEqual(newSession, session)) {\n      onSessionChange({\n        ...session,\n        ...newSession\n      });\n    }\n  };\n\n  onMouseOverElement = () => this.setState({ isOver: true });\n\n  onMouseOutElement = () => this.setState({ isOver: false });\n\n  handleMouseDown = e => {\n    const { newDrawable, textIsSelected } = this.state;\n    const { toolActive, fillColor, outlineColor } = this.props;\n\n    if (newDrawable.length === 0 && !textIsSelected) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const newDrawable = factory(toolActive.type, {\n        startx: x,\n        starty: y,\n        fillColor,\n        outlineColor,\n        createdAt: new Date()\n      });\n\n      this.setState({\n        newDrawable: [newDrawable]\n      });\n    }\n  };\n\n  handleMouseUp = e => {\n    const { newDrawable, drawables } = this.state;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const drawableToAdd = newDrawable[0];\n\n      drawableToAdd.registerMovement(x, y);\n      drawables.push(drawableToAdd);\n\n      this.setState(\n        {\n          newDrawable: [],\n          drawables\n        },\n        this.handleSessionChange.bind(this, drawableToAdd)\n      );\n    }\n  };\n\n  handleMouseMove = e => {\n    const { newDrawable } = this.state;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const updatedNewDrawable = newDrawable[0];\n\n      updatedNewDrawable.registerMovement(x, y);\n\n      this.setState({\n        newDrawable: [updatedNewDrawable]\n      });\n    }\n  };\n\n  handleUndo = () => {\n    const { drawables } = this.state;\n    const { TextEntry } = this.props;\n\n    const newDrawables = [...drawables];\n    const allData = [...drawables, ...TextEntry.all];\n\n    allData.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));\n    const lastElement = allData[allData.length - 1];\n\n    if (lastElement && lastElement.type === 'text-entry') {\n      TextEntry.all.pop();\n      this.setState({ updatedAt: new Date() }, this.handleSessionChange);\n    } else {\n      newDrawables.pop();\n      this.setState({ drawables: newDrawables }, this.handleSessionChange);\n    }\n  };\n\n  handleClearAll = () => {\n    const { TextEntry } = this.props;\n\n    TextEntry.all = [];\n    this.setState(\n      { drawables: [], updatedAt: new Date() },\n      this.handleSessionChange\n    );\n  };\n\n  toggleTextSelected = textIsSelected => this.setState({ textIsSelected });\n\n  render() {\n    const {\n      classes,\n      disabled,\n      drawableDimensions,\n      fillColor,\n      imageDimensions,\n      imageUrl,\n      paintColor,\n      outlineColor,\n      TextEntry,\n      toolActive: { type }\n    } = this.props;\n    const { isOver, newDrawable } = this.state;\n\n    const draggable = type === 'Select';\n    const paint = type === 'PaintBucket';\n    const drawables = [...this.state.drawables, ...this.state.newDrawable];\n\n    const drawableProps = {\n      draggable: draggable && !disabled,\n      disabled,\n      paint,\n      fillColor,\n      forceUpdate: () => this.setState({ updatedAt: new Date() }),\n      paintColor,\n      outlineColor,\n      toggleTextSelected: this.toggleTextSelected,\n      handleSessionChange: this.handleSessionChange,\n      stage: this.stage,\n      onMouseOverElement: this.onMouseOverElement,\n      onMouseOutElement: this.onMouseOutElement\n    };\n\n    let listeners = {};\n\n    if (!disabled) {\n      listeners = {\n        onMouseUp: this.handleMouseUp,\n        onMouseMove: this.handleMouseMove\n      };\n\n      if (!draggable) {\n        listeners.onMouseDown = this.handleMouseDown;\n      }\n    }\n\n    return (\n      <div>\n        <div className={classes.undoControls}>\n          <Button disabled={disabled} onClick={this.handleUndo} label=\"Undo\" />\n          <Button disabled={disabled} onClick={this.handleClearAll} label=\"Clear all\" />\n        </div>\n        <div className={classes.base}>\n          {imageUrl && (\n            <ImageBackground dimensions={imageDimensions} url={imageUrl} />\n          )}\n\n          {TextEntry.renderTextareas()}\n\n          <Stage\n            ref={ref => {\n              this.stage = ref;\n            }}\n            className={classnames(classes.stage, {\n              [classes.active]:\n                draggable &&\n                (isOver || (newDrawable && newDrawable.length === 1))\n            })}\n            height={drawableDimensions.height}\n            width={drawableDimensions.width}\n            {...listeners}\n          >\n            <Layer\n              ref={ref => {\n                this.layer = ref;\n              }}\n            >\n              {drawables.map((drawable, key) =>\n                drawable.render({ ...drawableProps, key })\n              )}\n              {/* Text Entry is a special case  */}\n              {TextEntry.render(drawableProps)}\n            </Layer>\n          </Stage>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n    width: '100%'\n  },\n  stage: {\n    left: 0,\n    position: 'absolute',\n    top: 0\n  },\n  active: {\n    cursor: 'pointer'\n  },\n  undoControls: {\n    float: 'right',\n    marginTop: -43,\n    width: 163\n  }\n});\n\nDrawableMain.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disabled: PropTypes.bool,\n  drawableDimensions: PropTypes.object.isRequired,\n  imageDimensions: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  paintColor: PropTypes.string.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  TextEntry: PropTypes.object.isRequired,\n  toolActive: PropTypes.object.isRequired,\n  session: PropTypes.object.isRequired\n};\n\nexport default withStyles(styles)(DrawableMain);\n"],"file":"drawable-main.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-main.jsx"],"names":["DrawableMain","props","onSessionChange","session","TextEntry","drawables","state","newSession","map","d","toJson","texts","all","text","id","attrs","value","setState","isOver","e","newDrawable","textIsSelected","toolActive","fillColor","outlineColor","scale","length","target","getStage","getPointerPosition","x","y","type","startx","starty","createdAt","Date","drawableToAdd","registerMovement","push","handleSessionChange","bind","updatedNewDrawable","newDrawables","allData","sort","a","b","lastElement","pop","updatedAt","nextProps","currentDrawables","drawablesString","JSON","stringify","sessionDrawableString","drawable","drawableArray","currentTexts","setAll","classes","disabled","drawableDimensions","imageDimensions","imageUrl","paintColor","backgroundImageEnabled","draggable","paint","drawableProps","forceUpdate","toggleTextSelected","stage","onMouseOverElement","onMouseOutElement","listeners","onMouseUp","handleMouseUp","onMouseMove","handleMouseMove","onMouseDown","handleMouseDown","imageHeight","height","imageWidth","width","undoControls","handleUndo","handleClearAll","base","renderTextareas","ref","active","layer","key","render","React","Component","styles","position","left","top","cursor","marginTop","propTypes","PropTypes","object","isRequired","bool","string","func","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport omit from 'lodash/omit';\nimport cloneDeep from 'lodash/cloneDeep';\nimport isEqual from 'lodash/isEqual';\nimport classnames from 'classnames';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageBackground from './drawable-image';\nimport Button from './button';\nimport factory from './factory';\n\nexport class DrawableMain extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      drawables: [],\n      newDrawable: [],\n      textIsSelected: false\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps.session) {\n      const { TextEntry } = nextProps;\n      const { drawables: currentDrawables } = this.state;\n\n      if (nextProps.session.drawables) {\n        const newDrawables = cloneDeep(nextProps.session.drawables);\n        const drawablesString = JSON.stringify(currentDrawables);\n        const sessionDrawableString = JSON.stringify(\n          (newDrawables || []).map(drawable => omit(drawable, 'type'))\n        );\n\n        if (drawablesString !== sessionDrawableString) {\n          const drawableArray = nextProps.session.drawables;\n\n          this.setState({\n            drawables: drawableArray.map(drawable =>\n              factory(drawable.type, drawable)\n            )\n          });\n        }\n\n        const currentTexts = TextEntry.all.map(text => ({\n          ...text,\n          ...(TextEntry[`text_${text.id}`] &&\n            TextEntry[`text_${text.id}`].attrs),\n          value:\n            TextEntry[`textarea_${text.id}`] &&\n            TextEntry[`textarea_${text.id}`].value\n        }));\n\n        if (!isEqual(currentTexts, nextProps.session.texts)) {\n          TextEntry.setAll(nextProps.session.texts || []);\n        }\n      }\n    } else {\n      this.handleSessionChange();\n    }\n  }\n\n  handleSessionChange = () => {\n    const { onSessionChange, session, TextEntry } = this.props;\n    const { drawables } = this.state;\n\n    const newSession = {\n      drawables: drawables.map(d => d.toJson()),\n      texts: TextEntry.all.map(text => ({\n        ...text,\n        ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),\n        value:\n          TextEntry[`textarea_${text.id}`] &&\n          TextEntry[`textarea_${text.id}`].value\n      }))\n    };\n\n    if (!isEqual(newSession, session)) {\n      onSessionChange({\n        ...session,\n        ...newSession\n      });\n    }\n  };\n\n  onMouseOverElement = () => this.setState({ isOver: true });\n\n  onMouseOutElement = () => this.setState({ isOver: false });\n\n  handleMouseDown = e => {\n    const { newDrawable, textIsSelected } = this.state;\n    const { toolActive, fillColor, outlineColor, scale } = this.props;\n\n    if (newDrawable.length === 0 && !textIsSelected) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const newDrawable = factory(toolActive.type, {\n        startx: x / scale,\n        starty: y / scale,\n        fillColor,\n        outlineColor,\n        createdAt: new Date()\n      });\n\n      this.setState({\n        newDrawable: [newDrawable]\n      });\n    }\n  };\n\n  handleMouseUp = e => {\n    const { newDrawable, drawables } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const drawableToAdd = newDrawable[0];\n\n      drawableToAdd.registerMovement(x / scale, y / scale);\n      drawables.push(drawableToAdd);\n\n      this.setState(\n        {\n          newDrawable: [],\n          drawables\n        },\n        this.handleSessionChange.bind(this, drawableToAdd)\n      );\n    }\n  };\n\n  handleMouseMove = e => {\n    const { newDrawable } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const updatedNewDrawable = newDrawable[0];\n\n      updatedNewDrawable.registerMovement(x / scale, y / scale);\n\n      this.setState({\n        newDrawable: [updatedNewDrawable]\n      });\n    }\n  };\n\n  handleUndo = () => {\n    const { drawables } = this.state;\n    const { TextEntry } = this.props;\n\n    const newDrawables = [...drawables];\n    const allData = [...drawables, ...TextEntry.all];\n\n    allData.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));\n    const lastElement = allData[allData.length - 1];\n\n    if (lastElement && lastElement.type === 'text-entry') {\n      TextEntry.all.pop();\n      this.setState({ updatedAt: new Date() }, this.handleSessionChange);\n    } else {\n      newDrawables.pop();\n      this.setState({ drawables: newDrawables }, this.handleSessionChange);\n    }\n  };\n\n  handleClearAll = () => {\n    const { TextEntry } = this.props;\n\n    TextEntry.all = [];\n    this.setState(\n      { drawables: [], updatedAt: new Date() },\n      this.handleSessionChange\n    );\n  };\n\n  toggleTextSelected = textIsSelected => this.setState({ textIsSelected });\n\n  render() {\n    const {\n      classes,\n      disabled,\n      drawableDimensions,\n      fillColor,\n      imageDimensions,\n      imageUrl,\n      paintColor,\n      outlineColor,\n      TextEntry,\n      backgroundImageEnabled = true,\n      toolActive: { type },\n      scale\n    } = this.props;\n    const { isOver, newDrawable } = this.state;\n\n    const draggable = type === 'Select';\n    const paint = type === 'PaintBucket';\n    const drawables = [...this.state.drawables, ...this.state.newDrawable];\n\n    const drawableProps = {\n      draggable: draggable && !disabled,\n      disabled,\n      paint,\n      fillColor,\n      forceUpdate: () => this.setState({ updatedAt: new Date() }),\n      paintColor,\n      outlineColor,\n      toggleTextSelected: this.toggleTextSelected,\n      handleSessionChange: this.handleSessionChange,\n      stage: this.stage,\n      onMouseOverElement: this.onMouseOverElement,\n      onMouseOutElement: this.onMouseOutElement,\n      scale\n    };\n\n    let listeners = {};\n\n    if (!disabled) {\n      listeners = {\n        onMouseUp: this.handleMouseUp,\n        onMouseMove: this.handleMouseMove\n      };\n\n      if (!draggable) {\n        listeners.onMouseDown = this.handleMouseDown;\n      }\n    }\n\n    const imageHeight = imageDimensions?.height * scale;\n    const imageWidth = imageDimensions?.width * scale;\n\n    return (\n      <div>\n        <div className={classes.undoControls}>\n          <Button disabled={disabled} onClick={this.handleUndo} label=\"Undo\" />\n          <Button disabled={disabled} onClick={this.handleClearAll} label=\"Clear all\" />\n        </div>\n        <div className={classes.base}>\n          {backgroundImageEnabled && imageUrl && (\n            <ImageBackground\n              dimensions={{height: imageHeight, width: imageWidth}}\n              url={imageUrl}/>\n          )}\n\n          {TextEntry.renderTextareas()}\n\n          <Stage\n            scaleX={scale}\n            scaleY={scale}\n            ref={ref => {\n              this.stage = ref;\n            }}\n            className={classnames(classes.stage, {\n              [classes.active]:\n                draggable &&\n                (isOver || (newDrawable && newDrawable.length === 1))\n            })}\n            height={drawableDimensions.height}\n            width={drawableDimensions.width}\n            {...listeners}\n          >\n            <Layer\n              ref={ref => {\n                this.layer = ref;\n              }}\n            >\n              {drawables.map((drawable, key) =>\n                drawable.render({ ...drawableProps, key })\n              )}\n              {/* Text Entry is a special case  */}\n              {TextEntry.render(drawableProps)}\n            </Layer>\n          </Stage>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n    width: '100%'\n  },\n  stage: {\n    left: 0,\n    position: 'absolute',\n    top: 0\n  },\n  active: {\n    cursor: 'pointer'\n  },\n  undoControls: {\n    float: 'right',\n    marginTop: -43,\n    width: 163\n  }\n});\n\nDrawableMain.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disabled: PropTypes.bool,\n  drawableDimensions: PropTypes.object.isRequired,\n  imageDimensions: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  paintColor: PropTypes.string.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  TextEntry: PropTypes.object.isRequired,\n  toolActive: PropTypes.object.isRequired,\n  session: PropTypes.object.isRequired,\n  backgroundImageEnabled: PropTypes.bool.isRequired,\n  scale: PropTypes.number.isRequired\n};\n\nexport default withStyles(styles)(DrawableMain);\n"],"file":"drawable-main.js"}

package/lib/drawing-response/drawable-text.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.generateId = void 0;
+exports.generateId = exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -21,9 +21,9 @@ var _reactKonva = require("react-konva");
 
 var _drawableTransformer = _interopRequireDefault(require("./drawable-transformer"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 var generateId = function generateId() {
   return Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
@@ -169,7 +169,7 @@ var TextDrawable = /*#__PURE__*/function () {
     (0, _defineProperty2["default"])(this, "handleTransform", function (e, textNode) {
       _this[textNode].setAttrs({
         width: _this[textNode].width() * _this[textNode].scaleX(),
-        scaleX: 1
+        scaleX: _this.props.scale
       });
     });
     this.all = props && props.all || [];