@agilemotion/oui-react-js 1.6.3 → 1.6.5

package/dist/components/TemplateItemEventHandler.js

@@ -4,516 +4,333 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _TemplateTable = _interopRequireDefault(require("./TemplateTable"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var parse = function parse(val) {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const parse = val => {
   return parseFloat(val.replace('px', ''));
 };
-
-var boundCheck = function boundCheck(pos, mousePos) {
+const boundCheck = (pos, mousePos) => {
   return pos - 8 < mousePos && pos + 8 > mousePos;
 };
-
-var TemplateItemEventHandler = /*#__PURE__*/function () {
-  function TemplateItemEventHandler() {
-    var _this = this;
-
-    _classCallCheck(this, TemplateItemEventHandler);
-
-    _defineProperty(this, "dragStart", function (event) {
-      if (_this.selectedNode === event.target) {
-        if (document.body.style.cursor !== "move" || _this.resizingTableColumn) {
-          if (!_this.resizingTableColumn || _this.resizingBoundaryTableColumn) {
-            _this.currentResizeNode = event.target;
-          }
-
-          event.preventDefault();
-        }
-
-        var parentLeft = event.target.parentElement.offsetLeft;
-        var parentTop = event.target.parentElement.offsetTop;
-        _this.dragOffset.x = event.clientX - (parentLeft + parseFloat(event.target.style.left.replace('px', '')));
-        _this.dragOffset.y = event.clientY - (parentTop + parseFloat(event.target.style.top.replace('px', '')));
-      }
-    });
-
-    _defineProperty(this, "dragOver", function (event) {
-      event.preventDefault();
-    });
-
-    _defineProperty(this, "initDragAndDrop", function (selectionHandler, container) {
-      _this.dragOffset = {};
-      setTimeout(function () {
-        var elements = document.getElementsByClassName("dropTarget");
-
-        var _iterator = _createForOfIteratorHelper(elements),
-            _step;
-
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var element = _step.value;
-            element.addEventListener("dragstart", _this.dragStart, false);
-            element.addEventListener("dragover", _this.dragOver, false);
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
-      }, 2000);
-      container.addEventListener("mousedown", _this.handleMouseDown);
-      container.addEventListener("mouseup", function (event) {
-        return _this.handleMouseUp(event, selectionHandler);
-      });
-      container.addEventListener("mousemove", _this.handleMouseMove);
-      var parent = document.getElementsByClassName('__sys_placeholders')[0];
-      var placeHolders = document.getElementsByClassName('_draggable_');
-
-      var dropTarget = _this.getDropTarget(parent);
-
-      var _iterator2 = _createForOfIteratorHelper(placeHolders),
-          _step2;
-
-      try {
-        var _loop = function _loop() {
-          var placeHolder = _step2.value;
-          placeHolder.addEventListener('mousemove', function (event) {
-            return _this.handleItemMouseMove(event, parent);
-          }, false);
-          placeHolder.addEventListener('mouseout', _this.handleItemMouseOut, false);
-          placeHolder.addEventListener('mouseup', function (event) {
-            return _this.handleItemMouseClick(placeHolder, placeHolder.id, selectionHandler);
-          }, false);
-          placeHolder.addEventListener('dragend', function (event) {
-            return _this.handleItemDrop(event, document.getElementsByClassName('dropTarget')[0]);
-          }, false);
-        };
-
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          _loop();
+class TemplateItemEventHandler {
+  constructor() {}
+  dragStart = event => {
+    if (this.selectedNode === event.target) {
+      if (document.body.style.cursor !== "move" || this.resizingTableColumn) {
+        if (!this.resizingTableColumn || this.resizingBoundaryTableColumn) {
+          this.currentResizeNode = event.target;
         }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
+        event.preventDefault();
       }
-    });
-
-    _defineProperty(this, "handleMouseMove", function (event) {
-      _this.resizeNode(event, _this.currentResizeNode);
-    });
-
-    _defineProperty(this, "handleMouseDown", function (event) {
-      _this.mouseDown = true;
-    });
-
-    _defineProperty(this, "handleMouseUp", function (event, selectionHandler) {
-      _this.mouseDown = false;
-      _this.currentResizeNode = null;
-      document.body.style.cursor = "default";
-
-      if (typeof event.target.className === 'string' && event.target.className !== '_draggable_' && !event.target.className.startsWith('_item_table')) {
-        _this.resetBorders();
-
-        _this.selectedNode = null;
-        _this.selectedNodeInitPosition = null;
-        selectionHandler(null);
+      let parentLeft = event.target.parentElement.offsetLeft;
+      let parentTop = event.target.parentElement.offsetTop;
+      this.dragOffset.x = event.clientX - (parentLeft + parseFloat(event.target.style.left.replace('px', '')));
+      this.dragOffset.y = event.clientY - (parentTop + parseFloat(event.target.style.top.replace('px', '')));
+    }
+  };
+  dragOver = event => {
+    event.preventDefault();
+  };
+  initDragAndDrop = (selectionHandler, container) => {
+    this.dragOffset = {};
+    setTimeout(() => {
+      let elements = document.getElementsByClassName("dropTarget");
+      for (const element of elements) {
+        element.addEventListener("dragstart", this.dragStart, false);
+        element.addEventListener("dragover", this.dragOver, false);
       }
-
-      _this.tableItemPreResizeWidth = null;
-      _this.tableItemPreResizeHeight = null;
-      _this.lastColItemPreResizeWidth = null;
-      _this.firstColItemPreResizeWidth = null;
-      _this.firstRowItemPreResizeHeight = null;
-      _this.resizingTableColumn = false;
-    });
-
-    _defineProperty(this, "handleGrabRelease", function (event, props, selectionHandler) {
-      var width = props.width;
-      var height = props.height;
-      var parent = event.target;
-      var dropTarget = document.getElementsByClassName('dropTarget')[0]; //this.getDropTarget(parent);
-
-      if (dropTarget) {
-        var container = document.getElementById('templateContainer');
-        var node = document.createElement("div");
-        node.id = props.id;
-        node.style.lineHeight = event.target.style.lineHeight;
-        node.style.left = (props.left ? props.left : event.clientX - dropTarget.offsetLeft) + 'px';
-        node.style.top = (props.top ? props.top : container.scrollTop + event.clientY - dropTarget.offsetTop) + 'px';
-        node.style.border = '2px dashed green';
-        node.style.position = 'absolute';
-        node.className = "_draggable_";
-        node.setAttribute("draggable", true);
-
-        if (props.type === 'TABLE') {
-          var table = new _TemplateTable.default(props.table, node).build(function (resizing, boundary) {
-            _this.resizingTableColumn = resizing;
-            _this.resizingBoundaryTableColumn = boundary;
-          }, function (parent) {
-            return _this.selectedNode === parent;
-          });
-          node.appendChild(table);
-          node.style.padding = '1px';
-          node.style.width = parse(table.style.width) + 2 + 'px';
-          node.style.height = parse(table.style.height) + 2 + 'px';
-        } else {
-          node.style.height = height + 'px';
-          node.style.width = width + 'px';
-          node.innerText = props.description;
-        }
-
-        node.addEventListener('dragend', function (event) {
-          return _this.handleItemDrop(event, dropTarget);
-        }, false);
-        var placeHolders = dropTarget.getElementsByClassName('__sys_placeholders')[0];
-        node.addEventListener('mousemove', function (event) {
-          return _this.handleItemMouseMove(event, placeHolders);
-        }, false);
-        node.addEventListener('mouseout', _this.handleItemMouseOut, false);
-        node.addEventListener('mouseup', function (event) {
-          return _this.handleItemMouseClick(node, props.id, selectionHandler);
-        }, false);
-        placeHolders.appendChild(node);
-        _this.selectedNode = node;
-
-        _this.setSelectedInitNodePos();
+    }, 2000);
+    container.addEventListener("mousedown", this.handleMouseDown);
+    container.addEventListener("mouseup", event => this.handleMouseUp(event, selectionHandler));
+    container.addEventListener("mousemove", this.handleMouseMove);
+    let parent = document.getElementsByClassName('__sys_placeholders')[0];
+    let placeHolders = document.getElementsByClassName('_draggable_');
+    let dropTarget = this.getDropTarget(parent);
+    for (const placeHolder of placeHolders) {
+      placeHolder.addEventListener('mousemove', event => this.handleItemMouseMove(event, parent), false);
+      placeHolder.addEventListener('mouseout', this.handleItemMouseOut, false);
+      placeHolder.addEventListener('mouseup', event => this.handleItemMouseClick(placeHolder, placeHolder.id, selectionHandler), false);
+      placeHolder.addEventListener('dragend', event => this.handleItemDrop(event, document.getElementsByClassName('dropTarget')[0]), false);
+    }
+  };
+  handleMouseMove = event => {
+    this.resizeNode(event, this.currentResizeNode);
+  };
+  handleMouseDown = event => {
+    this.mouseDown = true;
+  };
+  handleMouseUp = (event, selectionHandler) => {
+    this.mouseDown = false;
+    this.currentResizeNode = null;
+    document.body.style.cursor = "default";
+    if (typeof event.target.className === 'string' && event.target.className !== '_draggable_' && !event.target.className.startsWith('_item_table')) {
+      this.resetBorders();
+      this.selectedNode = null;
+      this.selectedNodeInitPosition = null;
+      selectionHandler(null);
+    }
+    this.tableItemPreResizeWidth = null;
+    this.tableItemPreResizeHeight = null;
+    this.lastColItemPreResizeWidth = null;
+    this.firstColItemPreResizeWidth = null;
+    this.firstRowItemPreResizeHeight = null;
+    this.resizingTableColumn = false;
+  };
+  handleGrabRelease = (event, props, selectionHandler) => {
+    let width = props.width;
+    let height = props.height;
+    let parent = event.target;
+    let dropTarget = document.getElementsByClassName('dropTarget')[0]; //this.getDropTarget(parent);
+
+    if (dropTarget) {
+      let container = document.getElementById('templateContainer');
+      let node = document.createElement("div");
+      node.id = props.id;
+      node.style.lineHeight = event.target.style.lineHeight;
+      node.style.left = (props.left ? props.left : event.clientX - dropTarget.offsetLeft) + 'px';
+      node.style.top = (props.top ? props.top : container.scrollTop + event.clientY - dropTarget.offsetTop) + 'px';
+      node.style.border = '2px dashed green';
+      node.style.position = 'absolute';
+      node.className = "_draggable_";
+      node.setAttribute("draggable", true);
+      if (props.type === 'TABLE') {
+        let table = new _TemplateTable.default(props.table, node).build((resizing, boundary) => {
+          this.resizingTableColumn = resizing;
+          this.resizingBoundaryTableColumn = boundary;
+        }, parent => {
+          return this.selectedNode === parent;
+        });
+        node.appendChild(table);
+        node.style.padding = '1px';
+        node.style.width = parse(table.style.width) + 2 + 'px';
+        node.style.height = parse(table.style.height) + 2 + 'px';
+      } else {
+        node.style.height = height + 'px';
+        node.style.width = width + 'px';
+        node.innerText = props.description;
       }
-
-      if (typeof event.target.className === 'string' && !event.target.className.includes("paletteButton") && !event.target.className.includes("paletteButtonLabel") && !event.target.className.includes("paletteButtonSelected")) {
-        document.getElementsByTagName("body")[0].style.cursor = 'default';
+      node.addEventListener('dragend', event => this.handleItemDrop(event, dropTarget), false);
+      let placeHolders = dropTarget.getElementsByClassName('__sys_placeholders')[0];
+      node.addEventListener('mousemove', event => this.handleItemMouseMove(event, placeHolders), false);
+      node.addEventListener('mouseout', this.handleItemMouseOut, false);
+      node.addEventListener('mouseup', event => this.handleItemMouseClick(node, props.id, selectionHandler), false);
+      placeHolders.appendChild(node);
+      this.selectedNode = node;
+      this.setSelectedInitNodePos();
+    }
+    if (typeof event.target.className === 'string' && !event.target.className.includes("paletteButton") && !event.target.className.includes("paletteButtonLabel") && !event.target.className.includes("paletteButtonSelected")) {
+      document.getElementsByTagName("body")[0].style.cursor = 'default';
+    }
+  };
+  getDropTarget(node) {
+    let parent = node;
+    let dropTarget = null;
+    while (parent) {
+      if (parent.className === 'dropTarget') {
+        dropTarget = parent;
+        break;
       }
-    });
-
-    _defineProperty(this, "handleItemDrop", function (event, target) {
-      console.log("\n\n\n\nclientY : " + event.clientY + " offsetTop : " + target.offsetTop + " dragOffset.y : " + _this.dragOffset.y);
-      event.target.style.left = event.clientX - target.offsetLeft - _this.dragOffset.x + 'px';
-      event.target.style.top = event.clientY - target.offsetTop - _this.dragOffset.y + 'px';
-      event.preventDefault();
-      _this.currentResizeNode = null;
-      _this.mouseDown = false;
-      document.body.style.cursor = "default";
-
-      _this.resetBorders();
-
-      event.target.style.border = '2px dashed green';
-    });
-
-    _defineProperty(this, "resizeNode", function (event, node) {
-      //console.log(this.mouseDown + " : " + node + " : " + this.resizingTableColumn);
-      if (_this.mouseDown && node) {
-        var container = document.getElementById('templateContainer');
-
-        if (container) {
-          var mouseX = event.clientX - _this.resizingItemParent.offsetLeft + container.scrollLeft;
-          var mouseY = event.clientY - _this.resizingItemParent.offsetTop + container.scrollTop;
-          var resizeSpec = {
-            leftOffset: 0,
-            rightOffset: 0,
-            topOffset: 0,
-            bottomOffset: 0
-          };
-
-          if (_this.boundCheckLeft) {
-            var widthDiff = mouseX - parse(node.style.left);
-            var newWidth = parse(node.style.width) - widthDiff; //console.log("\n\n\n SETTING SPEC LEFT : " + this.selectedNodeInitPosition.left);
-
-            resizeSpec.leftOffset = mouseX - _this.selectedNodeInitPosition.left;
-
-            if (newWidth >= 20) {
-              node.style.width = newWidth + 'px';
-              node.style.left = mouseX + 'px';
-            }
+      parent = parent.parentElement;
+    }
+    return dropTarget;
+  }
+  handleItemDrop = (event, target) => {
+    console.log("\n\n\n\nclientY : " + event.clientY + " offsetTop : " + target.offsetTop + " dragOffset.y : " + this.dragOffset.y);
+    event.target.style.left = event.clientX - target.offsetLeft - this.dragOffset.x + 'px';
+    event.target.style.top = event.clientY - target.offsetTop - this.dragOffset.y + 'px';
+    event.preventDefault();
+    this.currentResizeNode = null;
+    this.mouseDown = false;
+    document.body.style.cursor = "default";
+    this.resetBorders();
+    event.target.style.border = '2px dashed green';
+  };
+  resizeTables(node, spec) {
+    let tables = node.getElementsByClassName('_item_table');
+    let table = tables && tables.length > 0 ? tables[0] : null;
+    if (!this.tableItemPreResizeWidth && table) {
+      this.tableItemPreResizeWidth = parse(table.style.width);
+    }
+    if (!this.tableItemPreResizeHeight && table) {
+      this.tableItemPreResizeHeight = parse(table.style.height);
+    }
+    if (table) {
+      if (spec.rightOffset !== 0) {
+        let numCols = table['data-num-cols'];
+        let lastCols = node.getElementsByClassName(`_item_table_col_${numCols - 1}`);
+        let newWidth;
+        let resized = true;
+        for (const lastCol of lastCols) {
+          if (!this.lastColItemPreResizeWidth) {
+            this.lastColItemPreResizeWidth = parse(lastCol.style.width);
           }
-
-          if (_this.boundCheckRight) {
-            var _newWidth = mouseX - parse(node.style.left);
-
-            resizeSpec.rightOffset = _newWidth - _this.selectedNodeInitPosition.width;
-
-            if (_newWidth >= 20) {
-              node.style.width = _newWidth + 'px';
-            }
+          newWidth = this.lastColItemPreResizeWidth + spec.rightOffset;
+          //console.log(spec.leftOffset + " : " + spec.rightOffset + " : " + this.lastColItemPreResizeWidth);
+
+          if (newWidth >= 32) {
+            lastCol.style.width = newWidth + 'px';
+          } else {
+            resized = false;
+            break;
           }
-
-          if (_this.boundCheckTop) {
-            var heightDiff = mouseY - parse(node.style.top);
-            var newHeight = parse(node.style.height) - heightDiff;
-            resizeSpec.topOffset = mouseY - _this.selectedNodeInitPosition.top;
-
-            if (newHeight >= 20) {
-              node.style.height = newHeight + 'px';
-              node.style.top = mouseY + 'px';
-            }
-
-            resizeSpec.topResized = true;
+        }
+        if (resized) {
+          table.style.width = this.tableItemPreResizeWidth + spec.rightOffset + 'px';
+        }
+      }
+      if (spec.leftOffset !== 0) {
+        let newWidth;
+        let firstCols = node.getElementsByClassName('_item_table_col_0');
+        let resized = true;
+        for (const firstCol of firstCols) {
+          if (!this.firstColItemPreResizeWidth) {
+            this.firstColItemPreResizeWidth = parse(firstCol.style.width);
           }
-
-          if (_this.boundCheckBottom) {
-            var _newHeight = mouseY - parse(node.style.top);
-
-            resizeSpec.bottomOffset = _newHeight - _this.selectedNodeInitPosition.height;
-
-            if (_newHeight >= 20) {
-              node.style.height = _newHeight + 'px';
-            }
-
-            resizeSpec.bottomResized = true;
+          newWidth = this.firstColItemPreResizeWidth + spec.leftOffset * -1;
+          if (newWidth >= 32) {
+            firstCol.style.width = newWidth + 'px';
+          } else {
+            resized = false;
+            break;
           }
-
-          _this.resizeTables(node, resizeSpec);
         }
-      }
-    });
-
-    _defineProperty(this, "updateCursor", function (node, event, itemParent) {
-      if (!_this.mouseDown && _this.selectedNode) {
-        var container = document.getElementById('templateContainer');
-        var left = parse(node.style.left) + container.offsetLeft;
-        var right = left + parse(node.style.width);
-        var top = parse(node.style.top) + itemParent.offsetTop;
-        var bottom = top + parse(node.style.height);
-        var mouseX = event.clientX + container.scrollLeft;
-        var mouseY = event.clientY + container.scrollTop;
-        _this.boundCheckTop = boundCheck(top, mouseY);
-        _this.boundCheckLeft = boundCheck(left, mouseX);
-        _this.boundCheckRight = boundCheck(right, mouseX);
-        _this.boundCheckBottom = boundCheck(bottom, mouseY);
-
-        if (_this.boundCheckTop && _this.boundCheckLeft || _this.boundCheckBottom && _this.boundCheckRight) {
-          document.body.style.cursor = "nwse-resize";
-        } else if (_this.boundCheckTop && _this.boundCheckRight || _this.boundCheckBottom && _this.boundCheckLeft) {
-          document.body.style.cursor = "nesw-resize";
-        } else if (_this.boundCheckTop || _this.boundCheckBottom) {
-          document.body.style.cursor = "ns-resize";
-        } else if (_this.boundCheckLeft || _this.boundCheckRight) {
-          document.body.style.cursor = "ew-resize";
-        } else {
-          document.body.style.cursor = "move";
+        if (resized) {
+          table.style.width = this.tableItemPreResizeWidth + spec.leftOffset * -1 + 'px';
         }
-
-        _this.resizingItemParent = itemParent;
       }
-    });
-
-    _defineProperty(this, "resetBorders", function () {
-      var items = document.getElementsByClassName("_draggable_");
-
-      var _iterator3 = _createForOfIteratorHelper(items),
-          _step3;
-
-      try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var item = _step3.value;
-          item.style.border = 'none';
+      if (spec.topOffset !== 0 || spec.bottomOffset !== 0) {
+        let newHeight;
+        let rows = node.getElementsByClassName('_item_table_tr');
+        if (!this.firstRowItemPreResizeHeight) {
+          this.firstRowItemPreResizeHeight = parse(rows[0].style.height);
         }
-      } catch (err) {
-        _iterator3.e(err);
-      } finally {
-        _iterator3.f();
-      }
-    });
-
-    _defineProperty(this, "handleItemMouseOut", function (event) {
-      if (!_this.currentResizeNode) {
-        document.body.style.cursor = "default";
-      }
-    });
-
-    _defineProperty(this, "handleItemMouseMove", function (event, itemParent) {
-      var node = event.target;
-
-      _this.updateCursor(node, event, itemParent);
-    });
-
-    _defineProperty(this, "handleItemMouseClick", function (node, id, selectionHandler) {
-      _this.resetBorders();
-
-      node.style.border = '2px dashed green';
-      _this.selectedNode = node;
-
-      _this.setSelectedInitNodePos();
-
-      selectionHandler(id, node);
-    });
-  }
-
-  _createClass(TemplateItemEventHandler, [{
-    key: "getDropTarget",
-    value: function getDropTarget(node) {
-      var parent = node;
-      var dropTarget = null;
-
-      while (parent) {
-        if (parent.className === 'dropTarget') {
-          dropTarget = parent;
-          break;
+        if (spec.topOffset !== 0) {
+          newHeight = this.firstRowItemPreResizeHeight - spec.topOffset / rows.length;
+        } else if (spec.bottomOffset !== 0) {
+          newHeight = this.firstRowItemPreResizeHeight + spec.bottomOffset / rows.length;
         }
-
-        parent = parent.parentElement;
+        for (const row of rows) {
+          row.style.height = newHeight + 'px';
+        }
+        if (spec.topOffset !== 0) {
+          table.style.height = this.tableItemPreResizeHeight - spec.topOffset + 'px';
+        }
+        if (spec.bottomOffset !== 0) {
+          table.style.height = this.tableItemPreResizeHeight + spec.bottomOffset + 'px';
+        }
+        table.style.height = this.tableItemPreResizeHeight + (spec.topOffset !== 0 ? spec.topOffset : spec.bottomOffset) + 'px';
       }
-
-      return dropTarget;
     }
-  }, {
-    key: "resizeTables",
-    value: function resizeTables(node, spec) {
-      var tables = node.getElementsByClassName('_item_table');
-      var table = tables && tables.length > 0 ? tables[0] : null;
-
-      if (!this.tableItemPreResizeWidth && table) {
-        this.tableItemPreResizeWidth = parse(table.style.width);
-      }
-
-      if (!this.tableItemPreResizeHeight && table) {
-        this.tableItemPreResizeHeight = parse(table.style.height);
-      }
-
-      if (table) {
-        if (spec.rightOffset !== 0) {
-          var numCols = table['data-num-cols'];
-          var lastCols = node.getElementsByClassName("_item_table_col_".concat(numCols - 1));
-          var newWidth;
-          var resized = true;
-
-          var _iterator4 = _createForOfIteratorHelper(lastCols),
-              _step4;
-
-          try {
-            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-              var lastCol = _step4.value;
-
-              if (!this.lastColItemPreResizeWidth) {
-                this.lastColItemPreResizeWidth = parse(lastCol.style.width);
-              }
-
-              newWidth = this.lastColItemPreResizeWidth + spec.rightOffset; //console.log(spec.leftOffset + " : " + spec.rightOffset + " : " + this.lastColItemPreResizeWidth);
-
-              if (newWidth >= 32) {
-                lastCol.style.width = newWidth + 'px';
-              } else {
-                resized = false;
-                break;
-              }
-            }
-          } catch (err) {
-            _iterator4.e(err);
-          } finally {
-            _iterator4.f();
-          }
-
-          if (resized) {
-            table.style.width = this.tableItemPreResizeWidth + spec.rightOffset + 'px';
+  }
+  resizeNode = (event, node) => {
+    //console.log(this.mouseDown + " : " + node + " : " + this.resizingTableColumn);
+    if (this.mouseDown && node) {
+      let container = document.getElementById('templateContainer');
+      if (container) {
+        let mouseX = event.clientX - this.resizingItemParent.offsetLeft + container.scrollLeft;
+        let mouseY = event.clientY - this.resizingItemParent.offsetTop + container.scrollTop;
+        let resizeSpec = {
+          leftOffset: 0,
+          rightOffset: 0,
+          topOffset: 0,
+          bottomOffset: 0
+        };
+        if (this.boundCheckLeft) {
+          let widthDiff = mouseX - parse(node.style.left);
+          let newWidth = parse(node.style.width) - widthDiff;
+
+          //console.log("\n\n\n SETTING SPEC LEFT : " + this.selectedNodeInitPosition.left);
+          resizeSpec.leftOffset = mouseX - this.selectedNodeInitPosition.left;
+          if (newWidth >= 20) {
+            node.style.width = newWidth + 'px';
+            node.style.left = mouseX + 'px';
           }
         }
-
-        if (spec.leftOffset !== 0) {
-          var _newWidth2;
-
-          var firstCols = node.getElementsByClassName('_item_table_col_0');
-          var _resized = true;
-
-          var _iterator5 = _createForOfIteratorHelper(firstCols),
-              _step5;
-
-          try {
-            for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-              var firstCol = _step5.value;
-
-              if (!this.firstColItemPreResizeWidth) {
-                this.firstColItemPreResizeWidth = parse(firstCol.style.width);
-              }
-
-              _newWidth2 = this.firstColItemPreResizeWidth + spec.leftOffset * -1;
-
-              if (_newWidth2 >= 32) {
-                firstCol.style.width = _newWidth2 + 'px';
-              } else {
-                _resized = false;
-                break;
-              }
-            }
-          } catch (err) {
-            _iterator5.e(err);
-          } finally {
-            _iterator5.f();
-          }
-
-          if (_resized) {
-            table.style.width = this.tableItemPreResizeWidth + spec.leftOffset * -1 + 'px';
+        if (this.boundCheckRight) {
+          let newWidth = mouseX - parse(node.style.left);
+          resizeSpec.rightOffset = newWidth - this.selectedNodeInitPosition.width;
+          if (newWidth >= 20) {
+            node.style.width = newWidth + 'px';
           }
         }
-
-        if (spec.topOffset !== 0 || spec.bottomOffset !== 0) {
-          var newHeight;
-          var rows = node.getElementsByClassName('_item_table_tr');
-
-          if (!this.firstRowItemPreResizeHeight) {
-            this.firstRowItemPreResizeHeight = parse(rows[0].style.height);
-          }
-
-          if (spec.topOffset !== 0) {
-            newHeight = this.firstRowItemPreResizeHeight - spec.topOffset / rows.length;
-          } else if (spec.bottomOffset !== 0) {
-            newHeight = this.firstRowItemPreResizeHeight + spec.bottomOffset / rows.length;
+        if (this.boundCheckTop) {
+          let heightDiff = mouseY - parse(node.style.top);
+          let newHeight = parse(node.style.height) - heightDiff;
+          resizeSpec.topOffset = mouseY - this.selectedNodeInitPosition.top;
+          if (newHeight >= 20) {
+            node.style.height = newHeight + 'px';
+            node.style.top = mouseY + 'px';
           }
-
-          var _iterator6 = _createForOfIteratorHelper(rows),
-              _step6;
-
-          try {
-            for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-              var row = _step6.value;
-              row.style.height = newHeight + 'px';
-            }
-          } catch (err) {
-            _iterator6.e(err);
-          } finally {
-            _iterator6.f();
-          }
-
-          if (spec.topOffset !== 0) {
-            table.style.height = this.tableItemPreResizeHeight - spec.topOffset + 'px';
-          }
-
-          if (spec.bottomOffset !== 0) {
-            table.style.height = this.tableItemPreResizeHeight + spec.bottomOffset + 'px';
+          resizeSpec.topResized = true;
+        }
+        if (this.boundCheckBottom) {
+          let newHeight = mouseY - parse(node.style.top);
+          resizeSpec.bottomOffset = newHeight - this.selectedNodeInitPosition.height;
+          if (newHeight >= 20) {
+            node.style.height = newHeight + 'px';
           }
-
-          table.style.height = this.tableItemPreResizeHeight + (spec.topOffset !== 0 ? spec.topOffset : spec.bottomOffset) + 'px';
+          resizeSpec.bottomResized = true;
         }
+        this.resizeTables(node, resizeSpec);
       }
     }
-  }, {
-    key: "setSelectedInitNodePos",
-    value: function setSelectedInitNodePos() {
-      this.selectedNodeInitPosition = {
-        top: parse(this.selectedNode.style.top),
-        left: parse(this.selectedNode.style.left),
-        width: parse(this.selectedNode.style.width),
-        height: parse(this.selectedNode.style.height)
-      };
+  };
+  updateCursor = (node, event, itemParent) => {
+    if (!this.mouseDown && this.selectedNode) {
+      let container = document.getElementById('templateContainer');
+      let left = parse(node.style.left) + container.offsetLeft;
+      let right = left + parse(node.style.width);
+      let top = parse(node.style.top) + itemParent.offsetTop;
+      let bottom = top + parse(node.style.height);
+      let mouseX = event.clientX + container.scrollLeft;
+      let mouseY = event.clientY + container.scrollTop;
+      this.boundCheckTop = boundCheck(top, mouseY);
+      this.boundCheckLeft = boundCheck(left, mouseX);
+      this.boundCheckRight = boundCheck(right, mouseX);
+      this.boundCheckBottom = boundCheck(bottom, mouseY);
+      if (this.boundCheckTop && this.boundCheckLeft || this.boundCheckBottom && this.boundCheckRight) {
+        document.body.style.cursor = "nwse-resize";
+      } else if (this.boundCheckTop && this.boundCheckRight || this.boundCheckBottom && this.boundCheckLeft) {
+        document.body.style.cursor = "nesw-resize";
+      } else if (this.boundCheckTop || this.boundCheckBottom) {
+        document.body.style.cursor = "ns-resize";
+      } else if (this.boundCheckLeft || this.boundCheckRight) {
+        document.body.style.cursor = "ew-resize";
+      } else {
+        document.body.style.cursor = "move";
+      }
+      this.resizingItemParent = itemParent;
     }
-  }]);
-
-  return TemplateItemEventHandler;
-}();
-
+  };
+  resetBorders = () => {
+    let items = document.getElementsByClassName("_draggable_");
+    for (const item of items) {
+      item.style.border = 'none';
+    }
+  };
+  handleItemMouseOut = event => {
+    if (!this.currentResizeNode) {
+      document.body.style.cursor = "default";
+    }
+  };
+  handleItemMouseMove = (event, itemParent) => {
+    let node = event.target;
+    this.updateCursor(node, event, itemParent);
+  };
+  handleItemMouseClick = (node, id, selectionHandler) => {
+    this.resetBorders();
+    node.style.border = '2px dashed green';
+    this.selectedNode = node;
+    this.setSelectedInitNodePos();
+    selectionHandler(id, node);
+  };
+  setSelectedInitNodePos() {
+    this.selectedNodeInitPosition = {
+      top: parse(this.selectedNode.style.top),
+      left: parse(this.selectedNode.style.left),
+      width: parse(this.selectedNode.style.width),
+      height: parse(this.selectedNode.style.height)
+    };
+  }
+}
 exports.default = TemplateItemEventHandler;