@agilemotion/oui-react-js 1.8.55 → 1.8.57

package/dist/components/TableCellContent.js

@@ -11,6 +11,11 @@ var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 var _Form = _interopRequireDefault(require("./form/Form"));
 var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const [contentType] = _react.default.useState(props.contentType);
   const [refresher, setRefresher] = _react.default.useState(true);
@@ -29,7 +34,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
       if (!_Utils.default.isNull(validator)) {
         let required = false;
         if (!_Utils.default.isNull(validator.nullable)) {
-          let nullableExpression = validator.nullable.replace(/\[#i]/g, `[${props.row.index}]`);
+          let nullableExpression = validator.nullable.replace(/\[#i]/g, "[".concat(props.row.index, "]"));
           required = !_Utils.default.evaluateBooleanExpression(nullableExpression, props.dataBinding);
         }
         let formValue = {};
@@ -71,10 +76,9 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
   }, [props.row, props.editor]);
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.editor)) {
-      let e = {
-        ...props.editor,
+      let e = _objectSpread(_objectSpread({}, props.editor), {}, {
         id: props.editor.id.replace('.', '_')
-      };
+      });
       if (_Utils.default.isNull(e.attributes)) {
         e.attributes = {};
       }
@@ -96,7 +100,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
   }, [props.editor]);
   const formatDate = contentValue => {
     const date = new Date(contentValue);
-    const formatted = `${String(date.getDate()).padStart(2, '0')}/` + `${String(date.getMonth() + 1).padStart(2, '0')}/` + `${date.getFullYear()}`;
+    const formatted = "".concat(String(date.getDate()).padStart(2, '0'), "/") + "".concat(String(date.getMonth() + 1).padStart(2, '0'), "/") + "".concat(date.getFullYear());
     return formatted;
   };
 
@@ -104,7 +108,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
   const buildSearchTerms = parameters => {
     const set = new Set();
     for (const p of parameters || []) {
-      if (p?.value && typeof p.value === 'string') {
+      if (p !== null && p !== void 0 && p.value && typeof p.value === 'string') {
         for (const term of p.value.split(/\s+/)) {
           const t = term.trim();
           if (t) set.add(t.toLowerCase());
@@ -114,12 +118,12 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     return Array.from(set); // lowercase terms
   };
   const highlightTokens = (value, terms) => {
-    if (!value || !terms?.length) return value;
+    if (!value || !(terms !== null && terms !== void 0 && terms.length)) return value;
 
     // Combine terms into a single capturing group for split
-    const pattern = `(${terms.map(t => escapeRegex(t)).join('|')})`;
+    const pattern = "(".concat(terms.map(t => escapeRegex(t)).join('|'), ")");
     const splitRegex = new RegExp(pattern, 'gi');
-    const exactRegex = new RegExp(`^(?:${pattern})$`, 'i'); // to test parts
+    const exactRegex = new RegExp("^(?:".concat(pattern, ")$"), 'i'); // to test parts
 
     const parts = value.split(splitRegex);
     return parts.map((part, i) => {
@@ -157,7 +161,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
       }
     }
     if (props.columnConfig.cellFormat === 'CURRENCY' || props.columnConfig.cellFormat === 'NUMBER') {
-      return props.cellFormatter ? _DynamicJS.default.executeScriptFunction(props.cellFormatter, contentValue) : _Utils.default.isNull(contentValue) ? '' : props.columnConfig.cellFormat === 'CURRENCY' ? formatter.format(contentValue) : contentValue.toFixed(2);
+      return props.cellFormatter ? _DynamicJS.default.executeScriptFunction(props.cellFormatter, contentValue) : _Utils.default.isNull(contentValue) ? '' : props.columnConfig.cellFormat === 'CURRENCY' ? formatter.format(Math.round((contentValue + Number.EPSILON) * 100) / 100) : Math.round((contentValue + Number.EPSILON) * 100) / 100;
     } else {
       if (_Utils.default.isNull(contentValue)) {
         displayValue = '';
@@ -219,7 +223,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
           handle: props.handle,
           values: formValue,
           valueChangeHandler: value => {
-            editorValue.current = value[editor.dataBinding || editor.id];
+            editorValue.current = value ? value[editor.dataBinding || editor.id] : null;
             valueChangeHandler(editorValue.current);
           },
           viewId: props.viewId

package/dist/components/TemplateDesigner.js

@@ -293,11 +293,11 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
   })), designData ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
     accept: 'application/pdf',
     className: classes.input,
-    id: `template-file-upload`,
+    id: "template-file-upload",
     onChange: handleChange(),
     type: "file"
   }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: `template-file-upload`
+    htmlFor: "template-file-upload"
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     component: "span",
     variant: 'contained',

package/dist/components/TemplateItemEventHandler.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _TemplateTable = _interopRequireDefault(require("./TemplateTable"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const parse = val => {
   return parseFloat(val.replace('px', ''));
 };
@@ -13,126 +16,244 @@ const boundCheck = (pos, mousePos) => {
   return pos - 8 < mousePos && pos + 8 > mousePos;
 };
 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;
+  constructor() {
+    _defineProperty(this, "dragStart", 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();
         }
-        event.preventDefault();
+        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', '')));
       }
-      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);
+    });
+    _defineProperty(this, "dragOver", event => {
+      event.preventDefault();
+    });
+    _defineProperty(this, "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);
+        }
+      }, 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);
       }
-    }, 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')) {
+    });
+    _defineProperty(this, "handleMouseMove", event => {
+      this.resizeNode(event, this.currentResizeNode);
+    });
+    _defineProperty(this, "handleMouseDown", event => {
+      this.mouseDown = true;
+    });
+    _defineProperty(this, "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;
+        if (selectionHandler) {
+          selectionHandler(null);
+        }
+      }
+      this.tableItemPreResizeWidth = null;
+      this.tableItemPreResizeHeight = null;
+      this.lastColItemPreResizeWidth = null;
+      this.firstColItemPreResizeWidth = null;
+      this.firstRowItemPreResizeHeight = null;
+      this.resizingTableColumn = false;
+    });
+    _defineProperty(this, "handleGrabRelease", (event, props, selectionHandler) => {
+      let width = props.width;
+      let height = props.height;
+      let parent = event.target;
+      let dropTarget = this.getDropTarget(parent);
+      if (dropTarget) {
+        let container = document.getElementById('templateContainer');
+        let node = document.createElement("div");
+        node.id = props.id;
+        node.style.left = (props.left ? props.left : container.scrollLeft + 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.fontSize = '11px';
+        node.style.position = 'absolute';
+        node.style.verticalAlign = 'middle';
+        node.style.padding = '0 4px';
+        node.className = "_draggable_";
+        node.setAttribute("draggable", true);
+        if (props.sid) {
+          node.setAttribute("sid", props.sid);
+        }
+        if (props.sdesc) {
+          node.setAttribute("sdesc", props.sdesc);
+        }
+        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';
+          node.style.lineHeight = node.style.height;
+        } else {
+          node.style.height = height + 'px';
+          node.style.width = width + 'px';
+          node.style.lineHeight = node.style.height;
+          node.innerHTML = props.description;
+        }
+        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';
+      }
+    });
+    _defineProperty(this, "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 - this.dragOffset.x + 'px';
+      event.target.style.top = event.clientY - this.dragOffset.y + 'px';
+      event.preventDefault();
+      this.currentResizeNode = null;
+      this.mouseDown = false;
+      document.body.style.cursor = "default";
       this.resetBorders();
-      this.selectedNode = null;
-      this.selectedNodeInitPosition = null;
-      if (selectionHandler) {
-        selectionHandler(null);
+      event.target.style.border = '2px dashed green';
+    });
+    _defineProperty(this, "resizeNode", (event, node) => {
+      if (this.mouseDown && node) {
+        let container = document.getElementById('templateContainer');
+        if (container) {
+          let mouseX = event.clientX - this.resizingItemParent.getBoundingClientRect().left;
+          let mouseY = event.clientY - this.resizingItemParent.getBoundingClientRect().top;
+          let resizeSpec = {
+            leftOffset: 0,
+            rightOffset: 0,
+            topOffset: 0,
+            bottomOffset: 0
+          };
+          console.log("X : " + event.clientX + " Y : " + event.clientY + " MX : " + mouseX + " NL : " + node.style.left);
+          if (this.boundCheckLeft) {
+            let widthDiff = mouseX - parse(node.style.left);
+            let newWidth = parse(node.style.width) - widthDiff;
+            console.log("WD : " + widthDiff + " NW : " + newWidth + " MX : " + mouseX + " NL : " + node.style.left);
+            //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 (this.boundCheckRight) {
+            let newWidth = mouseX - parse(node.style.left);
+            resizeSpec.rightOffset = newWidth - this.selectedNodeInitPosition.width;
+            if (newWidth >= 20) {
+              node.style.width = newWidth + 'px';
+            }
+          }
+          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.lineHeight = newHeight + 'px';
+              node.style.top = mouseY + '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';
+              node.style.lineHeight = newHeight + 'px';
+            }
+            resizeSpec.bottomResized = true;
+          }
+          this.resizeTables(node, resizeSpec);
+        }
       }
-    }
-    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 = this.getDropTarget(parent);
-    if (dropTarget) {
-      let container = document.getElementById('templateContainer');
-      let node = document.createElement("div");
-      node.id = props.id;
-      node.style.left = (props.left ? props.left : container.scrollLeft + 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.fontSize = '11px';
-      node.style.position = 'absolute';
-      node.style.verticalAlign = 'middle';
-      node.style.padding = '0 4px';
-      node.className = "_draggable_";
-      node.setAttribute("draggable", true);
-      if (props.sid) {
-        node.setAttribute("sid", props.sid);
+    });
+    _defineProperty(this, "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 - itemParent.getBoundingClientRect().top;
+        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;
       }
-      if (props.sdesc) {
-        node.setAttribute("sdesc", props.sdesc);
+    });
+    _defineProperty(this, "resetBorders", () => {
+      let items = document.getElementsByClassName("_draggable_");
+      for (const item of items) {
+        item.style.border = 'none';
       }
-      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';
-        node.style.lineHeight = node.style.height;
-      } else {
-        node.style.height = height + 'px';
-        node.style.width = width + 'px';
-        node.style.lineHeight = node.style.height;
-        node.innerHTML = props.description;
+    });
+    _defineProperty(this, "handleItemMouseOut", event => {
+      if (!this.currentResizeNode) {
+        document.body.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);
+    });
+    _defineProperty(this, "handleItemMouseMove", (event, itemParent) => {
+      let node = event.target;
+      this.updateCursor(node, event, itemParent);
+    });
+    _defineProperty(this, "handleItemMouseClick", (node, id, selectionHandler) => {
+      this.resetBorders();
+      node.style.border = '2px dashed green';
       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';
-    }
-  };
+      if (selectionHandler) {
+        selectionHandler(id, node);
+      }
+    });
+  }
   getDropTarget(node) {
     let parent = node;
     let dropTarget = null;
@@ -145,17 +266,6 @@ class TemplateItemEventHandler {
     }
     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 - this.dragOffset.x + 'px';
-    event.target.style.top = event.clientY - 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;
@@ -168,7 +278,7 @@ class TemplateItemEventHandler {
     if (table) {
       if (spec.rightOffset !== 0) {
         let numCols = table['data-num-cols'];
-        let lastCols = node.getElementsByClassName(`_item_table_col_${numCols - 1}`);
+        let lastCols = node.getElementsByClassName("_item_table_col_".concat(numCols - 1));
         let newWidth;
         let resized = true;
         for (const lastCol of lastCols) {
@@ -233,112 +343,6 @@ class TemplateItemEventHandler {
       }
     }
   }
-  resizeNode = (event, node) => {
-    if (this.mouseDown && node) {
-      let container = document.getElementById('templateContainer');
-      if (container) {
-        let mouseX = event.clientX - this.resizingItemParent.getBoundingClientRect().left;
-        let mouseY = event.clientY - this.resizingItemParent.getBoundingClientRect().top;
-        let resizeSpec = {
-          leftOffset: 0,
-          rightOffset: 0,
-          topOffset: 0,
-          bottomOffset: 0
-        };
-        console.log("X : " + event.clientX + " Y : " + event.clientY + " MX : " + mouseX + " NL : " + node.style.left);
-        if (this.boundCheckLeft) {
-          let widthDiff = mouseX - parse(node.style.left);
-          let newWidth = parse(node.style.width) - widthDiff;
-          console.log("WD : " + widthDiff + " NW : " + newWidth + " MX : " + mouseX + " NL : " + node.style.left);
-          //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 (this.boundCheckRight) {
-          let newWidth = mouseX - parse(node.style.left);
-          resizeSpec.rightOffset = newWidth - this.selectedNodeInitPosition.width;
-          if (newWidth >= 20) {
-            node.style.width = newWidth + 'px';
-          }
-        }
-        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.lineHeight = newHeight + 'px';
-            node.style.top = mouseY + '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';
-            node.style.lineHeight = newHeight + 'px';
-          }
-          resizeSpec.bottomResized = true;
-        }
-        this.resizeTables(node, resizeSpec);
-      }
-    }
-  };
-  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 - itemParent.getBoundingClientRect().top;
-      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;
-    }
-  };
-  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();
-    if (selectionHandler) {
-      selectionHandler(id, node);
-    }
-  };
   setSelectedInitNodePos() {
     this.selectedNodeInitPosition = {
       top: parse(this.selectedNode.style.top),