@pie-element/drawing-response 3.7.2 → 3.7.3-next.1016

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

@@ -47,13 +47,13 @@ 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); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var DrawableMain = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(DrawableMain, _React$Component);
@@ -97,13 +97,16 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseDown", function (e) {
+      // ONLY IF MOBILE?
+      document.body.style.overflow = 'hidden';
       var _this$state = _this.state,
           newDrawable = _this$state.newDrawable,
           textIsSelected = _this$state.textIsSelected;
       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 +114,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()
@@ -124,9 +127,12 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseUp", function (e) {
+      // ONLY IF MOBILE?
+      document.body.style.overflow = 'initial';
       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 +140,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 +151,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 +159,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 +264,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,21 +290,27 @@ 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 = {};
 
       if (!disabled) {
         listeners = {
           onMouseUp: this.handleMouseUp,
-          onMouseMove: this.handleMouseMove
+          onTouchEnd: this.handleMouseUp,
+          onMouseMove: this.handleMouseMove,
+          onTouchMove: this.handleMouseMove
         };
 
         if (!draggable) {
           listeners.onMouseDown = this.handleMouseDown;
+          listeners.onTouchStart = this.handleMouseDown;
         }
       }
 
+      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 +323,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 +388,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","document","body","style","overflow","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","onTouchEnd","onMouseMove","handleMouseMove","onTouchMove","onMouseDown","handleMouseDown","onTouchStart","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    // ONLY IF MOBILE?\n    document.body.style.overflow = 'hidden';\n\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\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    // ONLY IF MOBILE?\n    document.body.style.overflow = 'initial';\n\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        onTouchEnd: this.handleMouseUp,\n        onMouseMove: this.handleMouseMove,\n        onTouchMove: this.handleMouseMove,\n      };\n\n      if (!draggable) {\n        listeners.onMouseDown = this.handleMouseDown;\n        listeners.onTouchStart = 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-palette.js

@@ -35,7 +35,7 @@ var _styles = require("@material-ui/core/styles");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 // TODO: Change Palette so will render inputs and colors dynamically
 var Palette = /*#__PURE__*/function (_React$Component) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-palette.jsx"],"names":["Palette","name","event","value","target","props","onFillColorChange","onOutlineColorChange","onPaintColorChange","classes","fillColor","outlineColor","fillList","outlineList","base","input","select","onChange","map","label","item","backgroundColor","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","fontSize","width","borderRadius","height","marginLeft","marginRight","transform","propTypes","PropTypes","object","isRequired","string","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { InputContainer } from '@pie-lib/render-ui';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { withStyles } from '@material-ui/core/styles';\n\n// TODO: Change Palette so will render inputs and colors dynamically\nclass Palette extends React.Component {\n  onChange = name => event => {\n    const { value } = event.target;\n    const {\n      onFillColorChange,\n      onOutlineColorChange,\n      onPaintColorChange\n    } = this.props;\n\n    if (name === 'fill') {\n      onFillColorChange(value);\n    } else if (name === 'outline') {\n      onOutlineColorChange(value);\n    } else {\n      onPaintColorChange(value);\n    }\n  };\n\n  render() {\n    const {\n      classes,\n      fillColor,\n      outlineColor,\n      fillList,\n      outlineList\n    } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <InputContainer label=\"Fill Color\" className={classes.input}>\n          <Select\n            className={classes.select}\n            onChange={this.onChange('fill')}\n            value={fillColor}\n          >\n            {fillList.map(({ value, label }) => (\n              <MenuItem\n                key={value}\n                value={value}\n                className={classes.item}\n                style={{ backgroundColor: value }}\n              >\n                {label}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n\n        <InputContainer label=\"Outline Color\" className={classes.input}>\n          <Select\n            className={classes.select}\n            onChange={this.onChange('outline')}\n            value={outlineColor}\n          >\n            {outlineList.map(({ value, label }) => (\n              <MenuItem\n                key={value}\n                value={value}\n                className={classes.item}\n                style={{ border: `2px solid ${value}` }}\n              >\n                {label}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex'\n  },\n  input: {\n    flex: 1,\n    fontSize: 'inherit',\n    width: '90%',\n  },\n  item: {\n    borderRadius: '2px',\n    fontSize: 'inherit',\n    height: '22px',\n    marginLeft: theme.spacing.unit * 2,\n    marginRight: theme.spacing.unit * 2,\n    marginTop: theme.spacing.unit * 2\n  },\n  select: {\n    fontSize: 'inherit',\n    transform: 'translate(0%, 40%)',\n  }\n});\n\nPalette.propTypes = {\n  classes: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  fillList: PropTypes.array.isRequired,\n  onFillColorChange: PropTypes.func.isRequired,\n  onOutlineColorChange: PropTypes.func.isRequired,\n  onPaintColorChange: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  outlineList: PropTypes.array.isRequired\n};\n\nexport default withStyles(styles)(Palette);\n"],"file":"drawable-palette.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-palette.jsx"],"names":["Palette","name","event","value","target","props","onFillColorChange","onOutlineColorChange","onPaintColorChange","classes","fillColor","outlineColor","fillList","outlineList","base","input","select","onChange","map","label","item","backgroundColor","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","fontSize","width","borderRadius","height","marginLeft","marginRight","transform","propTypes","PropTypes","object","isRequired","string","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { InputContainer } from '@pie-lib/render-ui';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { withStyles } from '@material-ui/core/styles';\n\n// TODO: Change Palette so will render inputs and colors dynamically\nclass Palette extends React.Component {\n  onChange = name => event => {\n    const { value } = event.target;\n    const {\n      onFillColorChange,\n      onOutlineColorChange,\n      onPaintColorChange\n    } = this.props;\n\n    if (name === 'fill') {\n      onFillColorChange(value);\n    } else if (name === 'outline') {\n      onOutlineColorChange(value);\n    } else {\n      onPaintColorChange(value);\n    }\n  };\n\n  render() {\n    const {\n      classes,\n      fillColor,\n      outlineColor,\n      fillList,\n      outlineList\n    } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <InputContainer label=\"Fill Color\" className={classes.input}>\n          <Select\n            className={classes.select}\n            onChange={this.onChange('fill')}\n            value={fillColor}\n          >\n            {fillList.map(({ value, label }) => (\n              <MenuItem\n                key={value}\n                value={value}\n                className={classes.item}\n                style={{ backgroundColor: value }}\n              >\n                {label}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n\n        <InputContainer label=\"Outline Color\" className={classes.input}>\n          <Select\n            className={classes.select}\n            onChange={this.onChange('outline')}\n            value={outlineColor}\n          >\n            {outlineList.map(({ value, label }) => (\n              <MenuItem\n                key={value}\n                value={value}\n                className={classes.item}\n                style={{ border: `2px solid ${value}` }}\n              >\n                {label}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex'\n  },\n  input: {\n    flex: 1,\n    fontSize: 'inherit',\n    width: '90%',\n  },\n  item: {\n    borderRadius: '2px',\n    fontSize: 'inherit',\n    height: '22px',\n    marginLeft: theme.spacing.unit * 2,\n    marginRight: theme.spacing.unit * 2,\n    marginTop: theme.spacing.unit * 2\n  },\n  select: {\n    fontSize: 'inherit',\n    transform: 'translate(0%, 40%)',\n  }\n});\n\nPalette.propTypes = {\n  classes: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  fillList: PropTypes.array.isRequired,\n  onFillColorChange: PropTypes.func.isRequired,\n  onOutlineColorChange: PropTypes.func.isRequired,\n  onPaintColorChange: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  outlineList: PropTypes.array.isRequired\n};\n\nexport default withStyles(styles)(Palette);\n"],"file":"drawable-palette.js"}

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

@@ -29,7 +29,7 @@ var _drawableHelper = _interopRequireDefault(require("./drawable-helper"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var RectangleDrawable = /*#__PURE__*/function (_DrawableHelper) {
   (0, _inherits2["default"])(RectangleDrawable, _DrawableHelper);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-rectangle.jsx"],"names":["RectangleDrawable","props","TYPE","event","deltaX","startx","target","getX","deltaY","starty","getY","x","y","handleSessionChange","width","height","paint","paintColor","forceUpdate","draggable","key","onMouseOverElement","onMouseOutElement","fillColor","handleOnClick","handleDragEnd","bind","outlineColor","DrawableHelper"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Rect } from 'react-konva';\n\nimport DrawableHelper from './drawable-helper';\n\nexport default class RectangleDrawable extends DrawableHelper {\n  static TYPE = 'RectangleDrawable';\n  constructor(props) {\n    super(props, RectangleDrawable.TYPE);\n    const { startx, starty, x, y } = props;\n    this.startx = startx;\n    this.starty = starty;\n    this.x = x || startx;\n    this.y = y || starty;\n    this.width = x - startx || 0;\n    this.height = y - starty || 0;\n  }\n\n  registerMovement(x, y) {\n    this.x = x;\n    this.y = y;\n    this.width = this.x - this.startx;\n    this.height = this.y - this.starty;\n  }\n\n  handleOnClick(props) {\n    const { paint, paintColor, forceUpdate } = props;\n\n    if (paint) {\n      this.paintColor = paintColor;\n      forceUpdate();\n    }\n  }\n\n  handleDragEnd = (props, event) => {\n    const deltaX = this.startx - event.target.getX();\n    const deltaY = this.starty - event.target.getY();\n\n    this.startx = event.target.getX();\n    this.starty = event.target.getY();\n\n    this.x = this.x - deltaX;\n    this.y = this.y - deltaY;\n\n    props.handleSessionChange();\n  };\n\n  render(props) {\n    const { draggable, key, onMouseOverElement, onMouseOutElement } = props;\n\n    return (\n      <Rect\n        key={key}\n        height={this.height}\n        width={this.width}\n        fill={this.paintColor || this.fillColor}\n        onClick={() => this.handleOnClick(props)}\n        onDragEnd={this.handleDragEnd.bind(this, props)}\n        onMouseEnter={onMouseOverElement}\n        onMouseLeave={onMouseOutElement}\n        stroke={this.outlineColor}\n        draggable={draggable}\n        strokeWidth={2}\n        x={this.startx}\n        y={this.starty}\n      />\n    );\n  }\n}\n"],"file":"drawable-rectangle.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-rectangle.jsx"],"names":["RectangleDrawable","props","TYPE","event","deltaX","startx","target","getX","deltaY","starty","getY","x","y","handleSessionChange","width","height","paint","paintColor","forceUpdate","draggable","key","onMouseOverElement","onMouseOutElement","fillColor","handleOnClick","handleDragEnd","bind","outlineColor","DrawableHelper"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Rect } from 'react-konva';\n\nimport DrawableHelper from './drawable-helper';\n\nexport default class RectangleDrawable extends DrawableHelper {\n  static TYPE = 'RectangleDrawable';\n  constructor(props) {\n    super(props, RectangleDrawable.TYPE);\n    const { startx, starty, x, y } = props;\n    this.startx = startx;\n    this.starty = starty;\n    this.x = x || startx;\n    this.y = y || starty;\n    this.width = x - startx || 0;\n    this.height = y - starty || 0;\n  }\n\n  registerMovement(x, y) {\n    this.x = x;\n    this.y = y;\n    this.width = this.x - this.startx;\n    this.height = this.y - this.starty;\n  }\n\n  handleOnClick(props) {\n    const { paint, paintColor, forceUpdate } = props;\n\n    if (paint) {\n      this.paintColor = paintColor;\n      forceUpdate();\n    }\n  }\n\n  handleDragEnd = (props, event) => {\n    const deltaX = this.startx - event.target.getX();\n    const deltaY = this.starty - event.target.getY();\n\n    this.startx = event.target.getX();\n    this.starty = event.target.getY();\n\n    this.x = this.x - deltaX;\n    this.y = this.y - deltaY;\n\n    props.handleSessionChange();\n  };\n\n  render(props) {\n    const { draggable, key, onMouseOverElement, onMouseOutElement } = props;\n\n    return (\n      <Rect\n        key={key}\n        height={this.height}\n        width={this.width}\n        fill={this.paintColor || this.fillColor}\n        onClick={() => this.handleOnClick(props)}\n        onDragEnd={this.handleDragEnd.bind(this, props)}\n        onMouseEnter={onMouseOverElement}\n        onMouseLeave={onMouseOutElement}\n        stroke={this.outlineColor}\n        draggable={draggable}\n        strokeWidth={2}\n        x={this.startx}\n        y={this.starty}\n      />\n    );\n  }\n}\n"],"file":"drawable-rectangle.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 || [];
@@ -300,15 +300,23 @@ var TextDrawable = /*#__PURE__*/function () {
             onClick: function onClick(e) {
               return _this3.handleClick(e, id);
             },
+            onTap: function onTap(e) {
+              return _this3.handleClick(e, id);
+            },
             onDblClick: function onDblClick(e) {
               return _this3.handleDblClick(e, text);
             },
+            onDblTap: function onDblTap(e) {
+              return _this3.handleDblClick(e, text);
+            },
             onTransform: function onTransform(e) {
               return _this3.handleTransform(e, textNode);
             },
             onTransformEnd: _this3.props.handleSessionChange,
             onMouseDown: _this3.handleMouseDown,
+            onTouchStart: _this3.handleMouseDown,
             onMouseUp: _this3.handleMouseUp,
+            onTouchEnd: _this3.handleMouseUp,
             onDragEnd: _this3.props.handleSessionChange,
             onMouseEnter: _this3.props.onMouseOverElement,
             onMouseLeave: _this3.props.onMouseOutElement
@@ -341,7 +349,9 @@ var TextDrawable = /*#__PURE__*/function () {
           },
           selectedShapeName: textNode,
           onMouseDown: _this3.handleMouseDown,
-          onMouseUp: _this3.handleMouseUp
+          onTouchStart: _this3.handleMouseDown,
+          onMouseUp: _this3.handleMouseUp,
+          onTouchEnd: _this3.handleMouseUp
         })];
       });
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-text.jsx"],"names":["generateId","Math","random","toString","substring","Date","getTime","TextDrawable","props","eventListenersDetachArray","forEach","fn","all","forceUpdate","id","push","isDefault","label","width","x","length","y","textVisible","transformerVisible","textareaVisible","createdAt","type","handleSessionChange","toggleTextSelected","e","current","filter","item","text","toggleTextarea","textNode","getTextNode","textareaNode","getTextareaNode","areaPosition","_lastPos","value","style","position","top","left","padding","height","fontSize","border","margin","overflow","background","outline","resize","lineHeight","fontFamily","transformOrigin","textAlign","align","color","fill","rotation","transform","px","isFirefox","navigator","userAgent","toLowerCase","indexOf","round","scrollHeight","focus","keyDownHandler","keyCode","shiftKey","saveValue","addEventListener","removeEventListener","blurHandler","showOnlyTextNodes","initializeDefault","setAttrs","scaleX","map","textarea","display","setInitialProps","stage","newStage","stageClickHandler","target","on","off","transformerNode","extraProps","disabled","onClick","handleClick","onDblClick","handleDblClick","onTransform","handleTransform","onTransformEnd","onMouseDown","handleMouseDown","onMouseUp","handleMouseUp","onDragEnd","onMouseEnter","onMouseOverElement","onMouseLeave","onMouseOutElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-konva';\n\nimport Transformer from './drawable-transformer';\n\nexport const generateId = () =>\n  Math.random()\n    .toString(36)\n    .substring(2) + new Date().getTime().toString(36);\n\nexport default class TextDrawable {\n  static getTextareaNode(id) {\n    return `textarea_${id}`;\n  }\n\n  static getTextNode(id) {\n    return `text_${id}`;\n  }\n\n  static getTransformerNode(id) {\n    return `transformer_${id}`;\n  }\n\n  constructor(props) {\n    this.all = (props && props.all) || [];\n    this.eventListenersDetachArray = [];\n  }\n\n  removeEventListeners = () =>\n    this.eventListenersDetachArray.forEach(fn => fn());\n\n  setAll = all => {\n    this.all = all;\n    this.props.forceUpdate();\n  };\n\n  addNewTextEntry = () => {\n    const all = this.all;\n    const id = generateId();\n\n    all.push({\n      id: id,\n      isDefault: true,\n      label: 'Double click to edit this text. Press Enter to submit.',\n      width: 200,\n      x: (all.length + 1) * 5 + 50,\n      y: (all.length + 1) * 5 + 50,\n      textVisible: true,\n      transformerVisible: true,\n      textareaVisible: false,\n      createdAt: new Date(),\n      type: 'text-entry'\n    });\n\n    this.props.handleSessionChange();\n  };\n\n  showOnlyTextNodes() {\n    this.all.map(item => {\n      item.textVisible = true;\n      item.transformerVisible = false;\n      item.textareaVisible = false;\n    });\n  }\n\n  toggleTextarea(id, value) {\n    this.all = this.all.map(item => {\n      if (item.id === id) {\n        return {\n          ...item,\n          textVisible: !value,\n          transformerVisible: !value,\n          textareaVisible: value\n        };\n      }\n      return item;\n    });\n    this.props.forceUpdate();\n  }\n\n  initializeDefault(id, isDefault) {\n    if (isDefault) {\n      const current = this.all.filter(item => item.id === id)[0];\n      current.isDefault = false;\n    }\n  }\n\n  saveValue(id, textNode, textareaNode) {\n    if (textareaNode.value) {\n      textNode.text(textareaNode.value);\n    } else {\n      this.all = this.all.filter(text => text.id !== id);\n      this.props.forceUpdate();\n    }\n\n    this.props.handleSessionChange();\n  }\n\n  handleMouseDown = () => this.props.toggleTextSelected(true);\n  handleMouseUp = () => this.props.toggleTextSelected(false);\n\n  handleClick = (e, id) => {\n    const current = this.all.filter(item => item.id === id)[0];\n    current.transformerVisible = true;\n    this.props.forceUpdate();\n  };\n\n  handleDblClick = (e, text) => {\n    const { id, isDefault } = text;\n    this.toggleTextarea(id, true);\n\n    const textNode = this[TextDrawable.getTextNode(id)];\n    const textareaNode = this[TextDrawable.getTextareaNode(id)];\n\n    const areaPosition = textNode._lastPos;\n\n    textareaNode.value = isDefault ? '' : textNode.text();\n    textareaNode.style.position = 'absolute';\n    textareaNode.style.top = areaPosition.y + 'px';\n    textareaNode.style.left = areaPosition.x + 'px';\n    textareaNode.style.width = textNode.width() - textNode.padding() * 2 + 'px';\n    textareaNode.style.height =\n      textNode.height() - textNode.padding() * 2 + 5 + 'px';\n    textareaNode.style.fontSize = textNode.fontSize() + 'px';\n    textareaNode.style.border = 'none';\n    textareaNode.style.padding = '0px';\n    textareaNode.style.margin = '0px';\n    textareaNode.style.overflow = 'hidden';\n    textareaNode.style.background = 'none';\n    textareaNode.style.outline = 'none';\n    textareaNode.style.resize = 'none';\n    textareaNode.style.lineHeight = textNode.lineHeight();\n    textareaNode.style.fontFamily = textNode.fontFamily();\n    textareaNode.style.transformOrigin = 'left top';\n    textareaNode.style.textAlign = textNode.align();\n    textareaNode.style.color = textNode.fill();\n\n    let rotation = textNode.rotation();\n    let transform = '';\n    if (rotation) {\n      transform += 'rotateZ(' + rotation + 'deg)';\n    }\n\n    let px = 0;\n    const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n\n    if (isFirefox) {\n      px += 2 + Math.round(textNode.fontSize() / 20);\n    }\n\n    transform += 'translateY(-' + px + 'px)';\n\n    textareaNode.style.transform = transform;\n    textareaNode.style.height = 'auto';\n    textareaNode.style.height = textareaNode.scrollHeight + 3 + 'px';\n\n    textareaNode.focus();\n\n    const keyDownHandler = e => {\n      // hide on enter but don't hide on shift + enter\n      if (e.keyCode === 13 && !e.shiftKey) {\n        this.toggleTextarea(id, false);\n        this.saveValue(id, textNode, textareaNode);\n      }\n\n      // on esc do not set value back to node\n      if (e.keyCode === 27) {\n        this.toggleTextarea(id, false);\n      }\n    };\n\n    textareaNode.addEventListener('keydown', keyDownHandler);\n\n    this.eventListenersDetachArray.push(() =>\n      textareaNode.removeEventListener('keydown', keyDownHandler)\n    );\n\n    const blurHandler = () => {\n      this.showOnlyTextNodes();\n      this.saveValue(id, textNode, textareaNode);\n    };\n\n    textareaNode.addEventListener('blur', blurHandler);\n\n    this.eventListenersDetachArray.push(() =>\n      textareaNode.removeEventListener('blur', blurHandler)\n    );\n\n    this.initializeDefault(id, isDefault);\n    this.props.forceUpdate();\n  };\n\n  handleTransform = (e, textNode) => {\n    this[textNode].setAttrs({\n      width: this[textNode].width() * this[textNode].scaleX(),\n      scaleX: 1\n    });\n  };\n\n  renderTextareas() {\n    return this.all.map(text => {\n      const { id, textareaVisible } = text;\n      const textareaNode = `textarea_${id}`;\n\n      return (\n        <textarea\n          key={textareaNode}\n          ref={textarea => {\n            this[textareaNode] = textarea;\n          }}\n          style={{ display: `${textareaVisible ? 'block' : 'none'}` }}\n        />\n      );\n    });\n  }\n\n  setInitialProps(props) {\n    if (!this.props) {\n      this.props = props;\n    }\n  }\n\n  render(props) {\n    this.setInitialProps(props);\n\n    if (props.stage) {\n      const newStage = props.stage;\n\n      // setting the handler only once\n      if (newStage !== this.stage) {\n        const stageClickHandler = e => {\n          if (e.target !== this.stage) {\n            return;\n          }\n\n          this.showOnlyTextNodes();\n          this.props.forceUpdate();\n        };\n\n        newStage.on('click', stageClickHandler);\n\n        this.eventListenersDetachArray.push(() =>\n          newStage.off('click', stageClickHandler)\n        );\n      }\n\n      this.stage = newStage;\n    }\n\n    return this.all.map(text => {\n      const {\n        id,\n        label,\n        x,\n        y,\n        width,\n        textVisible,\n        rotation,\n        transformerVisible\n      } = text;\n\n      const textNode = `text_${id}`;\n      const transformerNode = `transformer_${id}`;\n      let extraProps = {};\n\n      if (!props.disabled) {\n        extraProps = {\n          onClick: e => this.handleClick(e, id),\n          onDblClick: e => this.handleDblClick(e, text),\n          onTransform: e => this.handleTransform(e, textNode),\n          onTransformEnd: this.props.handleSessionChange,\n          onMouseDown: this.handleMouseDown,\n          onMouseUp: this.handleMouseUp,\n          onDragEnd: this.props.handleSessionChange,\n          onMouseEnter: this.props.onMouseOverElement,\n          onMouseLeave: this.props.onMouseOutElement,\n        }\n      }\n\n      if (rotation) {\n        extraProps.rotation = rotation;\n      }\n\n      return [\n        <Text\n          key={id}\n          bubbles={true}\n          id={id}\n          ref={text => {\n            this[textNode] = text;\n          }}\n          text={text.text || label}\n          name={textNode}\n          x={x}\n          y={y}\n          width={width}\n          draggable={!props.disabled}\n          visible={textVisible}\n          fontSize={16}\n          {...extraProps}\n        />,\n        transformerVisible && (\n          <Transformer\n            key={`transformer_${id}`}\n            ref={text => {\n              this[transformerNode] = text;\n            }}\n            selectedShapeName={textNode}\n            onMouseDown={this.handleMouseDown}\n            onMouseUp={this.handleMouseUp}\n          />\n        )\n      ];\n    });\n  }\n}\n"],"file":"drawable-text.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-text.jsx"],"names":["generateId","Math","random","toString","substring","Date","getTime","TextDrawable","props","eventListenersDetachArray","forEach","fn","all","forceUpdate","id","push","isDefault","label","width","x","length","y","textVisible","transformerVisible","textareaVisible","createdAt","type","handleSessionChange","toggleTextSelected","e","current","filter","item","text","toggleTextarea","textNode","getTextNode","textareaNode","getTextareaNode","areaPosition","_lastPos","value","style","position","top","left","padding","height","fontSize","border","margin","overflow","background","outline","resize","lineHeight","fontFamily","transformOrigin","textAlign","align","color","fill","rotation","transform","px","isFirefox","navigator","userAgent","toLowerCase","indexOf","round","scrollHeight","focus","keyDownHandler","keyCode","shiftKey","saveValue","addEventListener","removeEventListener","blurHandler","showOnlyTextNodes","initializeDefault","setAttrs","scaleX","scale","map","textarea","display","setInitialProps","stage","newStage","stageClickHandler","target","on","off","transformerNode","extraProps","disabled","onClick","handleClick","onTap","onDblClick","handleDblClick","onDblTap","onTransform","handleTransform","onTransformEnd","onMouseDown","handleMouseDown","onTouchStart","onMouseUp","handleMouseUp","onTouchEnd","onDragEnd","onMouseEnter","onMouseOverElement","onMouseLeave","onMouseOutElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-konva';\n\nimport Transformer from './drawable-transformer';\n\nexport const generateId = () =>\n  Math.random()\n    .toString(36)\n    .substring(2) + new Date().getTime().toString(36);\n\nexport default class TextDrawable {\n  static getTextareaNode(id) {\n    return `textarea_${id}`;\n  }\n\n  static getTextNode(id) {\n    return `text_${id}`;\n  }\n\n  static getTransformerNode(id) {\n    return `transformer_${id}`;\n  }\n\n  constructor(props) {\n    this.all = (props && props.all) || [];\n    this.eventListenersDetachArray = [];\n  }\n\n  removeEventListeners = () =>\n    this.eventListenersDetachArray.forEach(fn => fn());\n\n  setAll = all => {\n    this.all = all;\n    this.props.forceUpdate();\n  };\n\n  addNewTextEntry = () => {\n    const all = this.all;\n    const id = generateId();\n\n    all.push({\n      id: id,\n      isDefault: true,\n      label: 'Double click to edit this text. Press Enter to submit.',\n      width: 200,\n      x: (all.length + 1) * 5 + 50,\n      y: (all.length + 1) * 5 + 50,\n      textVisible: true,\n      transformerVisible: true,\n      textareaVisible: false,\n      createdAt: new Date(),\n      type: 'text-entry'\n    });\n\n    this.props.handleSessionChange();\n  };\n\n  showOnlyTextNodes() {\n    this.all.map(item => {\n      item.textVisible = true;\n      item.transformerVisible = false;\n      item.textareaVisible = false;\n    });\n  }\n\n  toggleTextarea(id, value) {\n    this.all = this.all.map(item => {\n      if (item.id === id) {\n        return {\n          ...item,\n          textVisible: !value,\n          transformerVisible: !value,\n          textareaVisible: value\n        };\n      }\n      return item;\n    });\n    this.props.forceUpdate();\n  }\n\n  initializeDefault(id, isDefault) {\n    if (isDefault) {\n      const current = this.all.filter(item => item.id === id)[0];\n      current.isDefault = false;\n    }\n  }\n\n  saveValue(id, textNode, textareaNode) {\n    if (textareaNode.value) {\n      textNode.text(textareaNode.value);\n    } else {\n      this.all = this.all.filter(text => text.id !== id);\n      this.props.forceUpdate();\n    }\n\n    this.props.handleSessionChange();\n  }\n\n  handleMouseDown = () => this.props.toggleTextSelected(true);\n  handleMouseUp = () => this.props.toggleTextSelected(false);\n\n  handleClick = (e, id) => {\n    const current = this.all.filter(item => item.id === id)[0];\n    current.transformerVisible = true;\n    this.props.forceUpdate();\n  };\n\n  handleDblClick = (e, text) => {\n    const { id, isDefault } = text;\n    this.toggleTextarea(id, true);\n\n    const textNode = this[TextDrawable.getTextNode(id)];\n    const textareaNode = this[TextDrawable.getTextareaNode(id)];\n\n    const areaPosition = textNode._lastPos;\n\n    textareaNode.value = isDefault ? '' : textNode.text();\n    textareaNode.style.position = 'absolute';\n    textareaNode.style.top = areaPosition.y + 'px';\n    textareaNode.style.left = areaPosition.x + 'px';\n    textareaNode.style.width = textNode.width() - textNode.padding() * 2 + 'px';\n    textareaNode.style.height =\n      textNode.height() - textNode.padding() * 2 + 5 + 'px';\n    textareaNode.style.fontSize = textNode.fontSize() + 'px';\n    textareaNode.style.border = 'none';\n    textareaNode.style.padding = '0px';\n    textareaNode.style.margin = '0px';\n    textareaNode.style.overflow = 'hidden';\n    textareaNode.style.background = 'none';\n    textareaNode.style.outline = 'none';\n    textareaNode.style.resize = 'none';\n    textareaNode.style.lineHeight = textNode.lineHeight();\n    textareaNode.style.fontFamily = textNode.fontFamily();\n    textareaNode.style.transformOrigin = 'left top';\n    textareaNode.style.textAlign = textNode.align();\n    textareaNode.style.color = textNode.fill();\n\n    let rotation = textNode.rotation();\n    let transform = '';\n    if (rotation) {\n      transform += 'rotateZ(' + rotation + 'deg)';\n    }\n\n    let px = 0;\n    const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n\n    if (isFirefox) {\n      px += 2 + Math.round(textNode.fontSize() / 20);\n    }\n\n    transform += 'translateY(-' + px + 'px)';\n\n    textareaNode.style.transform = transform;\n    textareaNode.style.height = 'auto';\n    textareaNode.style.height = textareaNode.scrollHeight + 3 + 'px';\n\n    textareaNode.focus();\n\n    const keyDownHandler = e => {\n      // hide on enter but don't hide on shift + enter\n      if (e.keyCode === 13 && !e.shiftKey) {\n        this.toggleTextarea(id, false);\n        this.saveValue(id, textNode, textareaNode);\n      }\n\n      // on esc do not set value back to node\n      if (e.keyCode === 27) {\n        this.toggleTextarea(id, false);\n      }\n    };\n\n    textareaNode.addEventListener('keydown', keyDownHandler);\n\n    this.eventListenersDetachArray.push(() =>\n      textareaNode.removeEventListener('keydown', keyDownHandler)\n    );\n\n    const blurHandler = () => {\n      this.showOnlyTextNodes();\n      this.saveValue(id, textNode, textareaNode);\n    };\n\n    textareaNode.addEventListener('blur', blurHandler);\n\n    this.eventListenersDetachArray.push(() =>\n      textareaNode.removeEventListener('blur', blurHandler)\n    );\n\n    this.initializeDefault(id, isDefault);\n    this.props.forceUpdate();\n  };\n\n  handleTransform = (e, textNode) => {\n    this[textNode].setAttrs({\n      width: this[textNode].width() * this[textNode].scaleX(),\n      scaleX: this.props.scale,\n    });\n  };\n\n  renderTextareas() {\n    return this.all.map(text => {\n      const { id, textareaVisible } = text;\n      const textareaNode = `textarea_${id}`;\n\n      return (\n        <textarea\n          key={textareaNode}\n          ref={textarea => {\n            this[textareaNode] = textarea;\n          }}\n          style={{ display: `${textareaVisible ? 'block' : 'none'}` }}\n        />\n      );\n    });\n  }\n\n  setInitialProps(props) {\n    if (!this.props) {\n      this.props = props;\n    }\n  }\n\n  render(props) {\n    this.setInitialProps(props);\n\n    if (props.stage) {\n      const newStage = props.stage;\n\n      // setting the handler only once\n      if (newStage !== this.stage) {\n        const stageClickHandler = e => {\n          if (e.target !== this.stage) {\n            return;\n          }\n\n          this.showOnlyTextNodes();\n          this.props.forceUpdate();\n        };\n\n        newStage.on('click', stageClickHandler);\n\n        this.eventListenersDetachArray.push(() =>\n          newStage.off('click', stageClickHandler)\n        );\n      }\n\n      this.stage = newStage;\n    }\n\n    return this.all.map(text => {\n      const {\n        id,\n        label,\n        x,\n        y,\n        width,\n        textVisible,\n        rotation,\n        transformerVisible\n      } = text;\n\n      const textNode = `text_${id}`;\n      const transformerNode = `transformer_${id}`;\n      let extraProps = {};\n\n      if (!props.disabled) {\n        extraProps = {\n          onClick: e => this.handleClick(e, id),\n          onTap: e => this.handleClick(e, id),\n          onDblClick: e => this.handleDblClick(e, text),\n          onDblTap: e => this.handleDblClick(e, text),\n          onTransform: e => this.handleTransform(e, textNode),\n          onTransformEnd: this.props.handleSessionChange,\n          onMouseDown: this.handleMouseDown,\n          onTouchStart: this.handleMouseDown,\n          onMouseUp: this.handleMouseUp,\n          onTouchEnd: this.handleMouseUp,\n          onDragEnd: this.props.handleSessionChange,\n          onMouseEnter: this.props.onMouseOverElement,\n          onMouseLeave: this.props.onMouseOutElement,\n        }\n      }\n\n      if (rotation) {\n        extraProps.rotation = rotation;\n      }\n\n      return [\n        <Text\n          key={id}\n          bubbles={true}\n          id={id}\n          ref={text => {\n            this[textNode] = text;\n          }}\n          text={text.text || label}\n          name={textNode}\n          x={x}\n          y={y}\n          width={width}\n          draggable={!props.disabled}\n          visible={textVisible}\n          fontSize={16}\n          {...extraProps}\n        />,\n        transformerVisible && (\n          <Transformer\n            key={`transformer_${id}`}\n            ref={text => {\n              this[transformerNode] = text;\n            }}\n            selectedShapeName={textNode}\n            onMouseDown={this.handleMouseDown}\n            onTouchStart={this.handleMouseDown}\n            onMouseUp={this.handleMouseUp}\n            onTouchEnd={this.handleMouseUp}\n          />\n        )\n      ];\n    });\n  }\n}\n"],"file":"drawable-text.js"}

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

@@ -27,7 +27,7 @@ var _reactKonva = require("react-konva");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var TransformerComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(TransformerComponent, _React$Component);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-transformer.jsx"],"names":["TransformerComponent","checkNode","stage","transformer","getStage","selectedShapeName","props","selectedNode","findOne","node","attachTo","detach","getLayer","batchDraw","React","Component","propTypes","PropTypes","string","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;IAEMA,oB;;;;;;;;;;;;WACJ,6BAAoB;AAClB,WAAKC,SAAL;AACD;;;WAED,8BAAqB;AACnB,WAAKA,SAAL;AACD;;;WAED,qBAAY;AACV;AACA,UAAMC,KAAK,GAAG,KAAKC,WAAL,CAAiBC,QAAjB,EAAd;AAFU,UAGFC,iBAHE,GAGoB,KAAKC,KAHzB,CAGFD,iBAHE;AAKV,UAAME,YAAY,GAAGL,KAAK,CAACM,OAAN,YAAkBH,iBAAlB,EAArB,CALU,CAMV;;AACA,UAAIE,YAAY,KAAK,KAAKJ,WAAL,CAAiBM,IAAjB,EAArB,EAA8C;AAC5C;AACD;;AAED,UAAIF,YAAJ,EAAkB;AAChB;AACA,aAAKJ,WAAL,CAAiBO,QAAjB,CAA0BH,YAA1B;AACD,OAHD,MAGO;AACL;AACA,aAAKJ,WAAL,CAAiBQ,MAAjB;AACD;;AACD,WAAKR,WAAL,CAAiBS,QAAjB,GAA4BC,SAA5B;AACD;;;WAED,kBAAS;AAAA;;AACP,0BACE,gCAAC,uBAAD;AACE,QAAA,GAAG,EAAE,aAAAJ,IAAI,EAAI;AAAE,UAAA,KAAI,CAACN,WAAL,GAAmBM,IAAnB;AAA0B,SAD3C;AAEE,QAAA,cAAc,EAAE,CAAC,aAAD,EAAgB,cAAhB;AAFlB,SAGM,KAAKH,KAHX,EADF;AAOD;;;EAtCgCQ,kBAAMC,S;;AAyCzCf,oBAAoB,CAACgB,SAArB,GAAiC;AAC/BX,EAAAA,iBAAiB,EAAEY,sBAAUC,MAAV,CAAiBC;AADL,CAAjC;eAIenB,oB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Transformer } from 'react-konva';\n\nclass TransformerComponent extends React.Component {\n  componentDidMount() {\n    this.checkNode();\n  }\n\n  componentDidUpdate() {\n    this.checkNode();\n  }\n\n  checkNode() {\n    // here we need to manually attach or detach Transformer node\n    const stage = this.transformer.getStage();\n    const { selectedShapeName } = this.props;\n\n    const selectedNode = stage.findOne(`.${selectedShapeName}`);\n    // do nothing if selected node is already attached\n    if (selectedNode === this.transformer.node()) {\n      return;\n    }\n\n    if (selectedNode) {\n      // attach to another node\n      this.transformer.attachTo(selectedNode);\n    } else {\n      // remove transformer\n      this.transformer.detach();\n    }\n    this.transformer.getLayer().batchDraw();\n  }\n\n  render() {\n    return (\n      <Transformer\n        ref={node => { this.transformer = node; }}\n        enabledAnchors={['middle-left', 'middle-right']}\n        {...this.props}\n      />\n    );\n  }\n}\n\nTransformerComponent.propTypes = {\n  selectedShapeName: PropTypes.string.isRequired,\n};\n\nexport default TransformerComponent;\n"],"file":"drawable-transformer.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-transformer.jsx"],"names":["TransformerComponent","checkNode","stage","transformer","getStage","selectedShapeName","props","selectedNode","findOne","node","attachTo","detach","getLayer","batchDraw","React","Component","propTypes","PropTypes","string","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;IAEMA,oB;;;;;;;;;;;;WACJ,6BAAoB;AAClB,WAAKC,SAAL;AACD;;;WAED,8BAAqB;AACnB,WAAKA,SAAL;AACD;;;WAED,qBAAY;AACV;AACA,UAAMC,KAAK,GAAG,KAAKC,WAAL,CAAiBC,QAAjB,EAAd;AACA,UAAQC,iBAAR,GAA8B,KAAKC,KAAnC,CAAQD,iBAAR;AAEA,UAAME,YAAY,GAAGL,KAAK,CAACM,OAAN,YAAkBH,iBAAlB,EAArB,CALU,CAMV;;AACA,UAAIE,YAAY,KAAK,KAAKJ,WAAL,CAAiBM,IAAjB,EAArB,EAA8C;AAC5C;AACD;;AAED,UAAIF,YAAJ,EAAkB;AAChB;AACA,aAAKJ,WAAL,CAAiBO,QAAjB,CAA0BH,YAA1B;AACD,OAHD,MAGO;AACL;AACA,aAAKJ,WAAL,CAAiBQ,MAAjB;AACD;;AACD,WAAKR,WAAL,CAAiBS,QAAjB,GAA4BC,SAA5B;AACD;;;WAED,kBAAS;AAAA;;AACP,0BACE,gCAAC,uBAAD;AACE,QAAA,GAAG,EAAE,aAAAJ,IAAI,EAAI;AAAE,UAAA,KAAI,CAACN,WAAL,GAAmBM,IAAnB;AAA0B,SAD3C;AAEE,QAAA,cAAc,EAAE,CAAC,aAAD,EAAgB,cAAhB;AAFlB,SAGM,KAAKH,KAHX,EADF;AAOD;;;EAtCgCQ,kBAAMC,S;;AAyCzCf,oBAAoB,CAACgB,SAArB,GAAiC;AAC/BX,EAAAA,iBAAiB,EAAEY,sBAAUC,MAAV,CAAiBC;AADL,CAAjC;eAIenB,oB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Transformer } from 'react-konva';\n\nclass TransformerComponent extends React.Component {\n  componentDidMount() {\n    this.checkNode();\n  }\n\n  componentDidUpdate() {\n    this.checkNode();\n  }\n\n  checkNode() {\n    // here we need to manually attach or detach Transformer node\n    const stage = this.transformer.getStage();\n    const { selectedShapeName } = this.props;\n\n    const selectedNode = stage.findOne(`.${selectedShapeName}`);\n    // do nothing if selected node is already attached\n    if (selectedNode === this.transformer.node()) {\n      return;\n    }\n\n    if (selectedNode) {\n      // attach to another node\n      this.transformer.attachTo(selectedNode);\n    } else {\n      // remove transformer\n      this.transformer.detach();\n    }\n    this.transformer.getLayer().batchDraw();\n  }\n\n  render() {\n    return (\n      <Transformer\n        ref={node => { this.transformer = node; }}\n        enabledAnchors={['middle-left', 'middle-right']}\n        {...this.props}\n      />\n    );\n  }\n}\n\nTransformerComponent.propTypes = {\n  selectedShapeName: PropTypes.string.isRequired,\n};\n\nexport default TransformerComponent;\n"],"file":"drawable-transformer.js"}

package/lib/drawing-response/index.js

@@ -31,7 +31,7 @@ var _container = _interopRequireDefault(require("./container"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(DrawingResponseComponent, _React$Component);
@@ -61,6 +61,8 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
           prompt = _this$props$model.prompt,
           mode = _this$props$model.mode,
           teacherInstructions = _this$props$model.teacherInstructions,
+          _this$props$model$bac = _this$props$model.backgroundImageEnabled,
+          backgroundImageEnabled = _this$props$model$bac === void 0 ? true : _this$props$model$bac,
           session = _this$props.session,
           onSessionChange = _this$props.onSessionChange,
           classes = _this$props.classes;
@@ -73,22 +75,20 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: teacherInstructions
       })), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
         className: classes.prompt
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        dangerouslySetInnerHTML: {
-          __html: prompt
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        tagName: "span",
+        prompt: prompt
       })), /*#__PURE__*/_react["default"].createElement(_container["default"], {
         session: session,
         onSessionChange: onSessionChange,
         isEvaluateMode: isEvaluateMode,
         imageDimensions: imageDimensions,
         imageUrl: imageUrl,
+        backgroundImageEnabled: backgroundImageEnabled,
         disabled: disabled
       }));
     }