@pie-element/drawing-response 4.6.1-beta.1 → 4.6.1-beta.4

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

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _renderUi = require("@pie-lib/render-ui");
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _styles = require("@material-ui/core/styles");
+var _classnames2 = _interopRequireDefault(require("classnames"));
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+// TODO: Change Palette so will render inputs and colors dynamically
+var Palette = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Palette, _React$Component);
+  var _super = _createSuper(Palette);
+  function Palette() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Palette);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (name) {
+      return function (event) {
+        var value = event.target.value;
+        var _this$props = _this.props,
+          onFillColorChange = _this$props.onFillColorChange,
+          onOutlineColorChange = _this$props.onOutlineColorChange,
+          onPaintColorChange = _this$props.onPaintColorChange;
+        if (name === 'fill') {
+          onFillColorChange(value);
+        } else if (name === 'outline') {
+          onOutlineColorChange(value);
+        } else {
+          onPaintColorChange(value);
+        }
+      };
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(Palette, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        classes = _this$props2.classes,
+        fillColor = _this$props2.fillColor,
+        outlineColor = _this$props2.outlineColor,
+        fillList = _this$props2.fillList,
+        outlineList = _this$props2.outlineList;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.base
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
+        label: "Fill Color",
+        className: classes.input
+      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        className: classes.select,
+        onChange: this.onChange('fill'),
+        value: fillColor
+      }, fillList.map(function (_ref) {
+        var value = _ref.value,
+          label = _ref.label;
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: value,
+          value: value,
+          className: (0, _classnames2["default"])(classes.item, (0, _defineProperty2["default"])({}, classes.blackColorItem, value === 'black')),
+          style: {
+            backgroundColor: value
+          }
+        }, label);
+      }))), /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
+        label: "Outline Color",
+        className: classes.input
+      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        className: classes.select,
+        onChange: this.onChange('outline'),
+        value: outlineColor
+      }, outlineList.map(function (_ref2) {
+        var value = _ref2.value,
+          label = _ref2.label;
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: value,
+          value: value,
+          className: classes.item,
+          style: {
+            border: "2px solid ".concat(value)
+          }
+        }, label);
+      }))));
+    }
+  }]);
+  return Palette;
+}(_react["default"].Component);
+var styles = function styles(theme) {
+  return {
+    base: {
+      marginTop: theme.spacing.unit * 2,
+      display: 'flex'
+    },
+    input: {
+      flex: 1,
+      fontSize: 'inherit',
+      width: '90%'
+    },
+    item: {
+      borderRadius: '2px',
+      fontSize: 'inherit',
+      height: '22px',
+      marginLeft: theme.spacing.unit * 2,
+      marginRight: theme.spacing.unit * 2,
+      marginTop: theme.spacing.unit * 2
+    },
+    blackColorItem: {
+      color: theme.palette.background.paper
+    },
+    select: {
+      fontSize: 'inherit',
+      transform: 'translate(0%, 40%)'
+    }
+  };
+};
+Palette.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  fillColor: _propTypes["default"].string.isRequired,
+  fillList: _propTypes["default"].array.isRequired,
+  onFillColorChange: _propTypes["default"].func.isRequired,
+  onOutlineColorChange: _propTypes["default"].func.isRequired,
+  onPaintColorChange: _propTypes["default"].func.isRequired,
+  outlineColor: _propTypes["default"].string.isRequired,
+  outlineList: _propTypes["default"].array.isRequired
+};
+var _default = (0, _styles.withStyles)(styles)(Palette);
+exports["default"] = _default;
+//# sourceMappingURL=drawable-palette.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawable-palette.js","names":["_react","_interopRequireDefault","require","_propTypes","_renderUi","_Select","_MenuItem","_styles","_classnames2","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","Palette","_React$Component","_inherits2","_super","_this","_classCallCheck2","_len","length","args","Array","_key","concat","_defineProperty2","_assertThisInitialized2","name","event","value","target","_this$props","props","onFillColorChange","onOutlineColorChange","onPaintColorChange","_createClass2","key","render","_this$props2","classes","fillColor","outlineColor","fillList","outlineList","createElement","className","base","InputContainer","label","input","select","onChange","map","_ref","classnames","item","blackColorItem","style","backgroundColor","_ref2","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","fontSize","width","borderRadius","height","marginLeft","marginRight","color","palette","background","paper","transform","propTypes","PropTypes","object","isRequired","string","array","func","_default","withStyles","exports"],"sources":["../../src/drawing-response/drawable-palette.jsx"],"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';\nimport classnames from 'classnames';\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 { onFillColorChange, onOutlineColorChange, onPaintColorChange } = 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 { classes, fillColor, outlineColor, fillList, outlineList } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <InputContainer label=\"Fill Color\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('fill')} value={fillColor}>\n            {fillList.map(({ value, label }) => (\n              <MenuItem\n                key={value}\n                value={value}\n                className={classnames(classes.item, {\n                  [classes.blackColorItem]: value === 'black',\n                })}\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 className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>\n            {outlineList.map(({ value, label }) => (\n              <MenuItem key={value} value={value} className={classes.item} style={{ border: `2px solid ${value}` }}>\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  blackColorItem: {\n    color: theme.palette.background.paper,\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"],"mappings":"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"}

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

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactKonva = require("react-konva");
+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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var RectangleDrawable = /*#__PURE__*/function (_DrawableHelper) {
+  (0, _inherits2["default"])(RectangleDrawable, _DrawableHelper);
+  var _super = _createSuper(RectangleDrawable);
+  function RectangleDrawable(_props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, RectangleDrawable);
+    _this = _super.call(this, _props, RectangleDrawable.TYPE);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDragEnd", function (props, event) {
+      var deltaX = _this.startx - event.target.getX();
+      var deltaY = _this.starty - event.target.getY();
+      _this.startx = event.target.getX();
+      _this.starty = event.target.getY();
+      _this.x = _this.x - deltaX;
+      _this.y = _this.y - deltaY;
+      props.handleSessionChange();
+    });
+    var startx = _props.startx,
+      starty = _props.starty,
+      x = _props.x,
+      y = _props.y;
+    _this.startx = startx;
+    _this.starty = starty;
+    _this.x = x || startx;
+    _this.y = y || starty;
+    _this.width = x - startx || 0;
+    _this.height = y - starty || 0;
+    return _this;
+  }
+  (0, _createClass2["default"])(RectangleDrawable, [{
+    key: "registerMovement",
+    value: function registerMovement(x, y) {
+      this.x = x;
+      this.y = y;
+      this.width = this.x - this.startx;
+      this.height = this.y - this.starty;
+    }
+  }, {
+    key: "handleOnClick",
+    value: function handleOnClick(props) {
+      var paint = props.paint,
+        paintColor = props.paintColor,
+        forceUpdate = props.forceUpdate;
+      if (paint) {
+        this.paintColor = paintColor;
+        forceUpdate();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this2 = this;
+      var draggable = props.draggable,
+        key = props.key,
+        onMouseOverElement = props.onMouseOverElement,
+        onMouseOutElement = props.onMouseOutElement;
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
+        key: key,
+        height: this.height,
+        width: this.width,
+        fill: this.paintColor || this.fillColor,
+        onClick: function onClick() {
+          return _this2.handleOnClick(props);
+        },
+        onDragEnd: this.handleDragEnd.bind(this, props),
+        onMouseEnter: onMouseOverElement,
+        onMouseLeave: onMouseOutElement,
+        stroke: this.outlineColor,
+        draggable: draggable,
+        strokeWidth: 2,
+        x: this.startx,
+        y: this.starty
+      });
+    }
+  }]);
+  return RectangleDrawable;
+}(_drawableHelper["default"]);
+exports["default"] = RectangleDrawable;
+(0, _defineProperty2["default"])(RectangleDrawable, "TYPE", 'RectangleDrawable');
+//# sourceMappingURL=drawable-rectangle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawable-rectangle.js","names":["_react","_interopRequireDefault","require","_reactKonva","_drawableHelper","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","RectangleDrawable","_DrawableHelper","_inherits2","_super","props","_this","_classCallCheck2","TYPE","_defineProperty2","_assertThisInitialized2","event","deltaX","startx","target","getX","deltaY","starty","getY","x","y","handleSessionChange","width","height","_createClass2","key","value","registerMovement","handleOnClick","paint","paintColor","forceUpdate","render","_this2","draggable","onMouseOverElement","onMouseOutElement","createElement","Rect","fill","fillColor","onClick","onDragEnd","handleDragEnd","bind","onMouseEnter","onMouseLeave","stroke","outlineColor","strokeWidth","DrawableHelper","exports"],"sources":["../../src/drawing-response/drawable-rectangle.jsx"],"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"],"mappings":"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"}

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

@@ -0,0 +1,328 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateId = exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var generateId = function generateId() {
+  return Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
+};
+exports.generateId = generateId;
+var TextDrawable = /*#__PURE__*/function () {
+  function TextDrawable(props) {
+    var _this = this;
+    (0, _classCallCheck2["default"])(this, TextDrawable);
+    (0, _defineProperty2["default"])(this, "removeEventListeners", function () {
+      return _this.eventListenersDetachArray.forEach(function (fn) {
+        return fn();
+      });
+    });
+    (0, _defineProperty2["default"])(this, "setAll", function (all) {
+      _this.all = all;
+      _this.props.forceUpdate();
+    });
+    (0, _defineProperty2["default"])(this, "addNewTextEntry", function () {
+      var all = _this.all;
+      var id = generateId();
+      all.push({
+        id: id,
+        isDefault: true,
+        label: 'Double click to edit this text. Press Enter to submit.',
+        width: 200,
+        x: (all.length + 1) * 5 + 50,
+        y: (all.length + 1) * 5 + 50,
+        textVisible: true,
+        transformerVisible: true,
+        textareaVisible: false,
+        createdAt: new Date(),
+        type: 'text-entry'
+      });
+      _this.props.handleSessionChange();
+    });
+    (0, _defineProperty2["default"])(this, "handleMouseDown", function () {
+      return _this.props.toggleTextSelected(true);
+    });
+    (0, _defineProperty2["default"])(this, "handleMouseUp", function () {
+      return _this.props.toggleTextSelected(false);
+    });
+    (0, _defineProperty2["default"])(this, "handleClick", function (e, id) {
+      var current = _this.all.filter(function (item) {
+        return item.id === id;
+      })[0];
+      current.transformerVisible = true;
+      _this.props.forceUpdate();
+    });
+    (0, _defineProperty2["default"])(this, "handleDblClick", function (e, text) {
+      var id = text.id,
+        isDefault = text.isDefault;
+      _this.toggleTextarea(id, true);
+      var textNode = _this[TextDrawable.getTextNode(id)];
+      var textareaNode = _this[TextDrawable.getTextareaNode(id)];
+      var areaPosition = textNode._lastPos;
+      textareaNode.value = isDefault ? '' : textNode.text();
+      textareaNode.style.position = 'absolute';
+      textareaNode.style.top = areaPosition.y + 'px';
+      textareaNode.style.left = areaPosition.x + 'px';
+      textareaNode.style.width = textNode.width() - textNode.padding() * 2 + 'px';
+      textareaNode.style.height = textNode.height() - textNode.padding() * 2 + 5 + 'px';
+      textareaNode.style.fontSize = textNode.fontSize() + 'px';
+      textareaNode.style.border = 'none';
+      textareaNode.style.padding = '0px';
+      textareaNode.style.margin = '0px';
+      textareaNode.style.overflow = 'hidden';
+      textareaNode.style.background = 'none';
+      textareaNode.style.outline = 'none';
+      textareaNode.style.resize = 'none';
+      textareaNode.style.lineHeight = textNode.lineHeight();
+      textareaNode.style.fontFamily = textNode.fontFamily();
+      textareaNode.style.transformOrigin = 'left top';
+      textareaNode.style.textAlign = textNode.align();
+      textareaNode.style.color = textNode.fill();
+      var rotation = textNode.rotation();
+      var transform = '';
+      if (rotation) {
+        transform += 'rotateZ(' + rotation + 'deg)';
+      }
+      var px = 0;
+      var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+      if (isFirefox) {
+        px += 2 + Math.round(textNode.fontSize() / 20);
+      }
+      transform += 'translateY(-' + px + 'px)';
+      textareaNode.style.transform = transform;
+      textareaNode.style.height = 'auto';
+      textareaNode.style.height = textareaNode.scrollHeight + 3 + 'px';
+      textareaNode.focus();
+      var keyDownHandler = function keyDownHandler(e) {
+        // hide on enter but don't hide on shift + enter
+        if (e.keyCode === 13 && !e.shiftKey) {
+          _this.toggleTextarea(id, false);
+          _this.saveValue(id, textNode, textareaNode);
+        }
+
+        // on esc do not set value back to node
+        if (e.keyCode === 27) {
+          _this.toggleTextarea(id, false);
+        }
+      };
+      textareaNode.addEventListener('keydown', keyDownHandler);
+      _this.eventListenersDetachArray.push(function () {
+        return textareaNode.removeEventListener('keydown', keyDownHandler);
+      });
+      var blurHandler = function blurHandler() {
+        _this.showOnlyTextNodes();
+        _this.saveValue(id, textNode, textareaNode);
+      };
+      textareaNode.addEventListener('blur', blurHandler);
+      _this.eventListenersDetachArray.push(function () {
+        return textareaNode.removeEventListener('blur', blurHandler);
+      });
+      _this.initializeDefault(id, isDefault);
+      _this.props.forceUpdate();
+    });
+    (0, _defineProperty2["default"])(this, "handleTransform", function (e, textNode) {
+      _this[textNode].setAttrs({
+        width: _this[textNode].width() * _this[textNode].scaleX(),
+        scaleX: _this.props.scale
+      });
+    });
+    this.all = props && props.all || [];
+    this.eventListenersDetachArray = [];
+  }
+  (0, _createClass2["default"])(TextDrawable, [{
+    key: "showOnlyTextNodes",
+    value: function showOnlyTextNodes() {
+      this.all.map(function (item) {
+        item.textVisible = true;
+        item.transformerVisible = false;
+        item.textareaVisible = false;
+      });
+    }
+  }, {
+    key: "toggleTextarea",
+    value: function toggleTextarea(id, value) {
+      this.all = this.all.map(function (item) {
+        if (item.id === id) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            textVisible: !value,
+            transformerVisible: !value,
+            textareaVisible: value
+          });
+        }
+        return item;
+      });
+      this.props.forceUpdate();
+    }
+  }, {
+    key: "initializeDefault",
+    value: function initializeDefault(id, isDefault) {
+      if (isDefault) {
+        var current = this.all.filter(function (item) {
+          return item.id === id;
+        })[0];
+        current.isDefault = false;
+      }
+    }
+  }, {
+    key: "saveValue",
+    value: function saveValue(id, textNode, textareaNode) {
+      if (textareaNode.value) {
+        textNode.text(textareaNode.value);
+      } else {
+        this.all = this.all.filter(function (text) {
+          return text.id !== id;
+        });
+        this.props.forceUpdate();
+      }
+      this.props.handleSessionChange();
+    }
+  }, {
+    key: "renderTextareas",
+    value: function renderTextareas() {
+      var _this2 = this;
+      return this.all.map(function (text) {
+        var id = text.id,
+          textareaVisible = text.textareaVisible;
+        var textareaNode = "textarea_".concat(id);
+        return /*#__PURE__*/_react["default"].createElement("textarea", {
+          key: textareaNode,
+          ref: function ref(textarea) {
+            _this2[textareaNode] = textarea;
+          },
+          style: {
+            display: "".concat(textareaVisible ? 'block' : 'none')
+          }
+        });
+      });
+    }
+  }, {
+    key: "setInitialProps",
+    value: function setInitialProps(props) {
+      if (!this.props) {
+        this.props = props;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this3 = this;
+      this.setInitialProps(props);
+      if (props.stage) {
+        var newStage = props.stage;
+
+        // setting the handler only once
+        if (newStage !== this.stage) {
+          var stageClickHandler = function stageClickHandler(e) {
+            if (e.target !== _this3.stage) {
+              return;
+            }
+            _this3.showOnlyTextNodes();
+            _this3.props.forceUpdate();
+          };
+          newStage.on('click', stageClickHandler);
+          this.eventListenersDetachArray.push(function () {
+            return newStage.off('click', stageClickHandler);
+          });
+        }
+        this.stage = newStage;
+      }
+      return this.all.map(function (text) {
+        var id = text.id,
+          label = text.label,
+          x = text.x,
+          y = text.y,
+          width = text.width,
+          textVisible = text.textVisible,
+          rotation = text.rotation,
+          transformerVisible = text.transformerVisible;
+        var textNode = "text_".concat(id);
+        var transformerNode = "transformer_".concat(id);
+        var extraProps = {};
+        if (!props.disabled) {
+          extraProps = {
+            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
+          };
+        }
+        if (rotation) {
+          extraProps.rotation = rotation;
+        }
+        return [/*#__PURE__*/_react["default"].createElement(_reactKonva.Text, (0, _extends2["default"])({
+          key: id,
+          bubbles: true,
+          id: id,
+          ref: function ref(text) {
+            _this3[textNode] = text;
+          },
+          text: text.text || label,
+          name: textNode,
+          x: x,
+          y: y,
+          width: width,
+          draggable: !props.disabled,
+          visible: textVisible,
+          fontSize: 16
+        }, extraProps)), transformerVisible && /*#__PURE__*/_react["default"].createElement(_drawableTransformer["default"], {
+          key: "transformer_".concat(id),
+          ref: function ref(text) {
+            _this3[transformerNode] = text;
+          },
+          selectedShapeName: textNode,
+          onMouseDown: _this3.handleMouseDown,
+          onTouchStart: _this3.handleMouseDown,
+          onMouseUp: _this3.handleMouseUp,
+          onTouchEnd: _this3.handleMouseUp
+        })];
+      });
+    }
+  }], [{
+    key: "getTextareaNode",
+    value: function getTextareaNode(id) {
+      return "textarea_".concat(id);
+    }
+  }, {
+    key: "getTextNode",
+    value: function getTextNode(id) {
+      return "text_".concat(id);
+    }
+  }, {
+    key: "getTransformerNode",
+    value: function getTransformerNode(id) {
+      return "transformer_".concat(id);
+    }
+  }]);
+  return TextDrawable;
+}();
+exports["default"] = TextDrawable;
+//# sourceMappingURL=drawable-text.js.map