@pie-element/drawing-response 10.3.4-next.0 → 11.0.0-beta.0

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

@@ -1,60 +1,43 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateId = exports["default"] = void 0;
-
+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 _translator = _interopRequireDefault(require("@pie-lib/translator"));
-
 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 translator = _translator["default"].translator;
-
-var generateId = function generateId() {
-  return Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
-};
-
+const {
+  translator
+} = _translator.default;
+const generateId = () => 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();
+class TextDrawable {
+  static getTextareaNode(id) {
+    return `textarea_${id}`;
+  }
+  static getTextNode(id) {
+    return `text_${id}`;
+  }
+  static getTransformerNode(id) {
+    return `transformer_${id}`;
+  }
+  constructor(props) {
+    (0, _defineProperty2.default)(this, "removeEventListeners", () => this.eventListenersDetachArray.forEach(fn => fn()));
+    (0, _defineProperty2.default)(this, "setAll", all => {
+      this.all = all;
+      this.props.forceUpdate();
     });
-    (0, _defineProperty2["default"])(this, "addNewTextEntry", function (language) {
-      var all = _this.all;
-      var id = generateId();
+    (0, _defineProperty2.default)(this, "addNewTextEntry", language => {
+      const all = this.all;
+      const id = generateId();
       all.push({
         id: id,
+        text: '',
         isDefault: true,
         label: translator.t('drawingResponse.onDoubleClick', {
           lng: language
@@ -68,36 +51,26 @@ var TextDrawable = /*#__PURE__*/function () {
         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);
+      this.props.handleSessionChange();
     });
-    (0, _defineProperty2["default"])(this, "handleClick", function (e, id) {
-      var current = _this.all.filter(function (item) {
-        return item.id === id;
-      })[0];
-
+    (0, _defineProperty2.default)(this, "handleMouseDown", () => this.props.toggleTextSelected(true));
+    (0, _defineProperty2.default)(this, "handleMouseUp", () => this.props.toggleTextSelected(false));
+    (0, _defineProperty2.default)(this, "handleClick", (e, id) => {
+      const current = this.all.filter(item => item.id === id)[0];
       current.transformerVisible = true;
-
-      _this.props.forceUpdate();
+      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();
+    (0, _defineProperty2.default)(this, "handleDblClick", (e, text) => {
+      const {
+        id,
+        isDefault
+      } = text;
+      this.toggleTextarea(id, true);
+      const textNode = this[TextDrawable.getTextNode(id)];
+      const textareaNode = this[TextDrawable.getTextareaNode(id)];
+      if (!textNode || !textareaNode) return;
+      const areaPosition = textNode.getAbsolutePosition();
+      textareaNode.value = text.text || '';
       textareaNode.style.position = 'absolute';
       textareaNode.style.top = areaPosition.y + 'px';
       textareaNode.style.left = areaPosition.x + 'px';
@@ -116,269 +89,184 @@ var TextDrawable = /*#__PURE__*/function () {
       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.style.display = 'block';
+      let rotation = textNode.rotation();
+      textareaNode.style.transform = rotation ? `rotateZ(${rotation}deg)` : '';
       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);
+      const keyDownHandler = e => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          this.saveValue(id, textareaNode);
+        }
+        if (e.key === 'Escape') {
+          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);
+      const blurHandler = () => {
+        this.showOnlyTextNodes();
+        this.saveValue(id, textareaNode);
       };
-
+      textareaNode.addEventListener('keydown', keyDownHandler);
       textareaNode.addEventListener('blur', blurHandler);
-
-      _this.eventListenersDetachArray.push(function () {
-        return textareaNode.removeEventListener('blur', blurHandler);
+      this.eventListenersDetachArray.push(() => {
+        textareaNode.removeEventListener('keydown', keyDownHandler);
+        textareaNode.removeEventListener('blur', blurHandler);
       });
-
-      _this.initializeDefault(id, isDefault);
-
-      _this.props.forceUpdate();
+      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
+    (0, _defineProperty2.default)(this, "handleTransform", (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;
+  showOnlyTextNodes() {
+    this.all.map(item => {
+      item.textVisible = true;
+      item.transformerVisible = false;
+      item.textareaVisible = false;
+    });
+  }
+  toggleTextarea(id, value) {
+    this.all = this.all.map(item => {
+      if (item.id === id) {
+        return {
+          ...item,
+          textVisible: !value,
+          transformerVisible: !value,
+          textareaVisible: value
+        };
       }
+      return item;
+    });
+    this.props.forceUpdate();
+  }
+  initializeDefault(id, isDefault) {
+    if (isDefault) {
+      const current = this.all.filter(item => 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();
+  }
+  saveValue(id, textareaNode) {
+    const value = textareaNode.value;
+    this.all = this.all.map(t => t.id === id ? {
+      ...t,
+      text: value
+    } : t);
+    if (!value) {
+      this.all = this.all.filter(t => t.id !== id);
     }
-  }, {
-    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')
-          }
-        });
+    this.toggleTextarea(id, false);
+    this.props.handleSessionChange();
+    this.props.forceUpdate();
+  }
+  renderTextareas() {
+    return this.all.map(text => {
+      const {
+        id,
+        textareaVisible
+      } = text;
+      const textareaNode = `textarea_${id}`;
+      return /*#__PURE__*/_react.default.createElement("textarea", {
+        key: textareaNode,
+        ref: textarea => {
+          this[textareaNode] = textarea;
+        },
+        style: {
+          display: `${textareaVisible ? 'block' : 'none'}`
+        }
       });
+    });
+  }
+  setInitialProps(props) {
+    if (!this.props) {
+      this.props = props;
     }
-  }, {
-    key: "setInitialProps",
-    value: function setInitialProps(props) {
-      if (!this.props) {
-        this.props = props;
+  }
+  render(props) {
+    this.setInitialProps(props);
+    if (props.stage) {
+      const newStage = props.stage;
+
+      // setting the handler only once
+      if (newStage !== this.stage) {
+        const stageClickHandler = e => {
+          if (e.target !== this.stage) {
+            return;
+          }
+          this.showOnlyTextNodes();
+          this.props.forceUpdate();
+        };
+        newStage.on('click', stageClickHandler);
+        this.eventListenersDetachArray.push(() => newStage.off('click', stageClickHandler));
       }
+      this.stage = newStage;
     }
-  }, {
-    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(text => {
+      const {
+        id,
+        label,
+        x,
+        y,
+        width,
+        textVisible,
+        rotation,
+        transformerVisible
+      } = text;
+      const textNode = `text_${id}`;
+      const transformerNode = `transformer_${id}`;
+      let extraProps = {};
+      if (!props.disabled) {
+        extraProps = {
+          onClick: e => this.handleClick(e, id),
+          onTap: e => this.handleClick(e, id),
+          onDblClick: e => this.handleDblClick(e, text),
+          onDblTap: e => this.handleDblClick(e, text),
+          onTransform: e => this.handleTransform(e, textNode),
+          onTransformEnd: this.props.handleSessionChange,
+          onMouseDown: this.handleMouseDown,
+          onTouchStart: this.handleMouseDown,
+          onMouseUp: this.handleMouseUp,
+          onTouchEnd: this.handleMouseUp,
+          onDragEnd: this.props.handleSessionChange,
+          onMouseEnter: this.props.onMouseOverElement,
+          onMouseLeave: this.props.onMouseOutElement
+        };
       }
-
-      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;
+      if (rotation) {
+        extraProps.rotation = rotation;
+      }
+      return [/*#__PURE__*/_react.default.createElement(_reactKonva.Text, (0, _extends2.default)({
+        key: id,
+        bubbles: true,
+        id: id,
+        ref: text => {
+          this[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_${id}`,
+        ref: text => {
+          this[transformerNode] = text;
+        },
+        selectedShapeName: textNode,
+        onMouseDown: this.handleMouseDown,
+        onTouchStart: this.handleMouseDown,
+        onMouseUp: this.handleMouseUp,
+        onTouchEnd: this.handleMouseUp
+      })];
+    });
+  }
+}
+exports.default = TextDrawable;
 //# sourceMappingURL=drawable-text.js.map