@agilemotion/oui-react-js 1.3.7 → 1.3.9

package/dist/components/TemplateDesigner.js

@@ -27,8 +27,6 @@ var _Form = _interopRequireDefault(require("./form/Form"));
 
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
-var _LookupField = _interopRequireDefault(require("./form/LookupField"));
-
 var _reactPromiseTracker = require("react-promise-tracker");
 
 var _ApplicationContext = _interopRequireDefault(require("../ApplicationContext"));
@@ -41,51 +39,37 @@ require("./TemplateDesigner.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 const OPEN_DIALOG_CONFIG = {
-  type: "form",
-  id: "openTemplateForm",
+  type: 'form',
+  id: 'openTemplateForm',
   attributes: {
-    defaultVisibility: true,
     style: {
-      margin: "0",
-      padding: "0"
+      margin: '0',
+      padding: '0'
     }
   },
-  binder: "MAP_OBJECT",
   sections: [{
-    type: "formSection",
+    type: 'formSection',
     components: [{
-      type: "fieldSet",
+      type: 'fieldSet',
       attributes: {
         defaultVisibility: true
       },
       fields: [{
-        type: "field",
-        id: "templateId",
+        type: 'field',
+        id: 'templateId',
         dataService: {
-          type: "rest",
-          url: "/api/v1/docs/templating/types/get",
-          method: "GET"
+          type: 'rest',
+          url: '/docs/api/v1/templating/types/get',
+          method: 'GET'
         },
         attributes: {
           colspan: 1,
-          label: "Template ID"
+          label: 'Template ID'
         },
-        fieldType: "SELECT",
+        fieldType: 'SELECT',
         validator: {
-          nullable: "false"
+          nullable: 'false'
         }
       }]
     }]
@@ -102,38 +86,38 @@ const useStyles = (0, _core.makeStyles)(theme => ({
     color: 'red'
   },
   propertyWindow: {
-    height: "400px",
-    margin: "4px",
-    borderRadius: "4px",
-    paddingLeft: "24px",
-    borderBottom: "1px solid #e1e1e1",
-    borderTop: "1px solid #e1e1e1"
+    height: '400px',
+    margin: '4px',
+    borderRadius: '4px',
+    paddingLeft: '24px',
+    borderBottom: '1px solid #e1e1e1',
+    borderTop: '1px solid #e1e1e1'
   },
   paletteButton: {
-    width: "270px",
-    height: "40px",
-    backgroundColor: "#e1e1e1",
-    margin: "4px",
-    textAlign: "center",
-    padding: "28px 0",
-    borderRadius: "4px"
+    width: '270px',
+    height: '40px',
+    backgroundColor: '#e1e1e1',
+    margin: '4px',
+    textAlign: 'center',
+    padding: '28px 0',
+    borderRadius: '4px'
   },
   paletteButtonSelected: {
     '&:hover': {
-      backgroundColor: "yellowgreen"
+      backgroundColor: 'yellowgreen'
     },
-    width: "270px",
-    height: "40px",
-    backgroundColor: "yellowgreen",
-    margin: "4px",
-    textAlign: "center",
-    padding: "28px 0",
-    borderRadius: "4px"
+    width: '270px',
+    height: '40px',
+    backgroundColor: 'yellowgreen',
+    margin: '4px',
+    textAlign: 'center',
+    padding: '28px 0',
+    borderRadius: '4px'
   },
   palette: {
-    width: "280px",
-    borderRadius: "4px",
-    border: "1px solid #e1e1e1"
+    width: '280px',
+    borderRadius: '4px',
+    border: '1px solid #e1e1e1'
   }
 }));
 
@@ -152,76 +136,43 @@ const json = response => {
 };
 
 const templateItemEventHandler = new _TemplateItemEventHandler.default();
-const location = window.location.protocol + "//" + window.location.hostname;
+const location = window.location.protocol + '//' + window.location.hostname;
 
 const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const classes = useStyles();
 
-  const _React$useState = _react.default.useState(true),
-        _React$useState2 = _slicedToArray(_React$useState, 2),
-        initializing = _React$useState2[0],
-        setInitializing = _React$useState2[1];
-
-  const _React$useState3 = _react.default.useState(true),
-        _React$useState4 = _slicedToArray(_React$useState3, 2),
-        loading = _React$useState4[0],
-        setLoading = _React$useState4[1];
-
-  const _React$useState5 = _react.default.useState(null),
-        _React$useState6 = _slicedToArray(_React$useState5, 2),
-        value = _React$useState6[0],
-        setValue = _React$useState6[1];
-
-  const _React$useState7 = _react.default.useState(false),
-        _React$useState8 = _slicedToArray(_React$useState7, 2),
-        fileDialogOpen = _React$useState8[0],
-        setFileDialogOpen = _React$useState8[1];
-
-  const _React$useState9 = _react.default.useState(null),
-        _React$useState10 = _slicedToArray(_React$useState9, 2),
-        templateType = _React$useState10[0],
-        setTemplateType = _React$useState10[1];
-
-  const _React$useState11 = _react.default.useState(null),
-        _React$useState12 = _slicedToArray(_React$useState11, 2),
-        designData = _React$useState12[0],
-        setDesignData = _React$useState12[1];
-
-  const _React$useState13 = _react.default.useState(null),
-        _React$useState14 = _slicedToArray(_React$useState13, 2),
-        templateDoc = _React$useState14[0],
-        setTemplateDoc = _React$useState14[1];
-
-  const _React$useState15 = _react.default.useState(null),
-        _React$useState16 = _slicedToArray(_React$useState15, 2),
-        grabbedItem = _React$useState16[0],
-        setGrabbedItem = _React$useState16[1];
-
-  const _React$useState17 = _react.default.useState(null),
-        _React$useState18 = _slicedToArray(_React$useState17, 2),
-        selectedItem = _React$useState18[0],
-        setSelectedItem = _React$useState18[1];
+  const [loading, setLoading] = _react.default.useState(true);
 
-  _react.default.useEffect(() => {
-    if (initializing) {
-      props.handle.api = api();
+  const [value, setValue] = _react.default.useState(null);
 
-      let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+  const [fileDialogOpen, setFileDialogOpen] = _react.default.useState(false);
 
-      _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+  const [templateType, setTemplateType] = _react.default.useState(null);
 
-      _Observable.default.addSystemSubscriptions(parsedConfig);
+  const [designData, setDesignData] = _react.default.useState(null);
 
-      setInitializing(false);
+  const [templateDoc, setTemplateDoc] = _react.default.useState(null);
 
-      if (!_Utils.default.isNull(props.loadCompleteHandler)) {
-        props.loadCompleteHandler(props.config.id);
-      }
+  const [templateHtml, setTemplateHtml] = _react.default.useState(null);
 
-      setLoading(false);
-    }
+  const [grabbedItem, setGrabbedItem] = _react.default.useState(null);
+
+  const [selectedItem, setSelectedItem] = _react.default.useState(null);
+
+  _react.default.useEffect(() => {
+    props.handle.api = api();
   });
 
+  _react.default.useEffect(() => {
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+
+    _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
+
+    _Observable.default.addSystemSubscriptions(parsedConfig);
+
+    setLoading(false);
+  }, []);
+
   const setup = () => {
     let container = document.getElementById('templateContainer');
 
@@ -234,15 +185,21 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
 
   _react.default.useEffect(() => {
     setup();
-  });
+  }, []);
 
   _react.default.useEffect(() => {
     setup();
+  }, [templateHtml]);
+
+  _react.default.useEffect(() => {
+    if (templateDoc) {
+      setTemplateHtml(templateDoc);
+    }
   }, [templateDoc]);
 
   function getFetchConfig(data, method, contentType = null) {
-    const accessToken = sessionStorage.getItem("accessToken");
-    const idToken = sessionStorage.getItem("idToken");
+    const accessToken = sessionStorage.getItem('accessToken');
+    const idToken = sessionStorage.getItem('idToken');
     let headers = {
       'Accept': 'application/json',
       'Authorization': 'Bearer ' + accessToken,
@@ -293,12 +250,12 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   };
 
   const handleSave = () => {
-    let payload = document.getElementById("templateContainer").innerHTML.replace("<div name=\"replaced_html\", '<html'").replace('</div>', '</html>').replace("<div name=\"replaced_body\"", '<body').replace('</div>', '</body>').replace('2px dashed green', 'none');
+    let payload = document.getElementById('templateContainer').innerHTML.replace('<div name="replaced_html", \'<html\'').replace('</div>', '</html>').replace('<div name="replaced_body"', '<body').replace('</div>', '</body>').replace('2px dashed green', 'none');
     let templateData = {};
     templateData.templateType = templateType;
     templateData.payloadBase64 = btoa(payload);
     let fetchConfig = getFetchConfig(JSON.stringify(templateData), 'POST', 'application/json');
-    let url = location + _ApplicationContext.default.getBaseApiUrl() + props.config.templateStorageUrl;
+    let url = location + _ApplicationContext.default.getContextRoot() + props.config.templateStorageUrl;
     (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {//alert('SAVE RESULT : ' + JSON.stringify(data));
     }).catch(e => {
       if (e.code === 401) {
@@ -312,7 +269,7 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   const handleOk = () => {
     let fetchConfig = getFetchConfig(null, 'GET');
     setFileDialogOpen(false);
-    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(location + _ApplicationContext.default.getBaseApiUrl() + props.config.metaDataUrl + '/' + templateType.id), fetchConfig).then(status).then(json).then(data => {
+    (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(location + _ApplicationContext.default.getContextRoot() + props.config.metaDataUrl + '/' + templateType.id), fetchConfig).then(status).then(json).then(data => {
       let designData = JSON.parse(data);
       setDesignData(designData);
       setTemplateDoc(atob(designData.template.payloadBase64));
@@ -330,15 +287,13 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   };
 
   const loadDoc = file => {
-    setTemplateDoc(null);
+    setTemplateHtml(null);
     let data = new FormData();
-    data.append("sourceType", "PDF");
-    data.append("targetType", "HTML");
-    data.append("file", file);
+    data.append('file', file);
     let fetchConfig = getFetchConfig(data, 'POST');
-    let url = location + _ApplicationContext.default.getBaseApiUrl() + props.config.documentConverterUrl;
+    let url = location + _ApplicationContext.default.getContextRoot() + props.config.documentConverterBaseUrl + "/PDF/HTML";
     (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
-      setTemplateDoc(data);
+      setTemplateHtml(data);
     }).catch(e => {
       if (e.code === 401) {
         _ApplicationContext.default.clear();
@@ -348,7 +303,7 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     }));
   };
 
-  let mouseClickHandler = function mouseClickHandler(event) {
+  let mouseClickHandler = function (event) {
     if (grabbedItem) {
       setSelectedItem(grabbedItem.id);
       templateItemEventHandler.handleGrabRelease(event, {
@@ -372,7 +327,7 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   };
 
   const grabPalleteItem = item => {
-    document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
+    document.getElementsByTagName('body')[0].style.cursor = 'grabbing';
     setGrabbedItem(item);
   };
 
@@ -384,9 +339,9 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       marginTop: '8px'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "row-*-*"
+    className: 'row-*-*'
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-*-*"
+    className: 'col-*-*'
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     "aria-controls": "menu-list-grow",
     "aria-haspopup": "true",
@@ -395,7 +350,7 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'FOLDER'
   })), designData ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
-    accept: "application/pdf",
+    accept: 'application/pdf',
     className: classes.input,
     id: "template-file-upload",
     onChange: handleChange(),
@@ -405,14 +360,14 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     component: "span",
     variant: 'contained',
-    size: "large"
+    size: "medium"
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'UPLOAD'
   })))), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     component: "span",
     disabled: selectedItem === null,
     variant: 'contained',
-    size: "large",
+    size: "medium",
     onClick: handleDelete
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'DELETE'
@@ -420,12 +375,12 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     component: "span",
     disabled: !templateDoc,
     variant: 'contained',
-    size: "large",
+    size: "medium",
     onClick: handleSave
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     id: 'SAVE'
   }))) : null))), designData ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "row",
+    className: 'row',
     style: {
       width: '100%',
       height: '72vh',
@@ -438,10 +393,12 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       minWidth: '280px'
     },
     className: 'col-*-*'
-  }, designData.templateType.templatePlaceHolders.map(placeHolder => {
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, designData.templateType.templatePlaceHolders.map((placeHolder, index) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
       variant: 'contained',
-      size: "large",
+      size: "medium",
       style: {
         width: '100%'
       },
@@ -451,23 +408,23 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     }, placeHolder.description));
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      border: "1px solid #e1e1e1",
-      borderRadius: "4px",
-      marginLeft: "8px",
-      height: "100%",
-      width: "calc(100% - 288px)"
+      border: '1px solid #e1e1e1',
+      borderRadius: '4px',
+      marginLeft: '8px',
+      height: '100%',
+      width: 'calc(100% - 288px)'
     },
     className: 'col-*-*',
     onClick: e => mouseClickHandler(e)
-  }, templateDoc ? /*#__PURE__*/_react.default.createElement("div", {
+  }, templateHtml ? /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      maxHeight: "calc(70vh - 80px)",
-      overflow: "auto"
+      maxHeight: 'calc(70vh - 80px)',
+      overflow: 'auto'
     },
     className: 'col-*-*',
-    id: "templateContainer"
+    id: 'templateContainer'
   }, /*#__PURE__*/_react.default.createElement(_reactHtmlRenderer.default, {
-    html: templateDoc.replace('<html', "<div name=\"replaced_html\"").replace('</html>', '</div>').replace('<body', "<div name=\"replaced_body\"").replace('</body>', '</div>')
+    html: templateHtml.replace('<html', '<div name="replaced_html"').replace('</html>', '</div>').replace('<body', '<div name="replaced_body"').replace('</body>', '</div>')
   })) : /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%',
@@ -483,17 +440,16 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
     "aria-describedby": "alert-dialog-description"
   }, /*#__PURE__*/_react.default.createElement(_DialogTitle.default, {
     id: "alert-dialog-title"
-  }, "Open Template"), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement(_Form.default, {
+  }, 'Open Template'), /*#__PURE__*/_react.default.createElement(_DialogContent.default, null, /*#__PURE__*/_react.default.createElement(_Form.default, {
     config: OPEN_DIALOG_CONFIG,
     handle: {},
-    ref: /*#__PURE__*/_react.default.createRef(),
     valueChangeHandler: val => {
       setTemplateType(val.templateId);
     },
     viewId: props.viewId,
     className: 'defaultForm'
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "row-*-*",
+    className: 'row-*-*',
     style: {
       width: '100%',
       margin: '8px 0',
@@ -501,10 +457,10 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       textAlign: 'right'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-*-*"
+    className: 'col-*-*'
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: 'contained',
-    size: "large",
+    size: "medium",
     style: {
       width: '80px',
       marginRight: '4px'
@@ -517,7 +473,7 @@ const TemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.d
       width: '80px'
     },
     disabled: templateType === null,
-    size: "large",
+    size: "medium",
     onClick: () => handleOk()
   }, "OK"))))));
 }));

package/dist/components/TemplateItemEventHandler.js

@@ -9,12 +9,6 @@ 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 _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; }
 
 const parse = val => {
@@ -53,19 +47,9 @@ class TemplateItemEventHandler {
       setTimeout(() => {
         let elements = document.getElementsByClassName("dropTarget");
 
-        var _iterator = _createForOfIteratorHelper(elements),
-            _step;
-
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            const element = _step.value;
-            element.addEventListener("dragstart", this.dragStart, false);
-            element.addEventListener("dragover", this.dragOver, false);
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
+        for (const element of elements) {
+          element.addEventListener("dragstart", this.dragStart, false);
+          element.addEventListener("dragover", this.dragOver, false);
         }
       }, 2000);
       container.addEventListener("mousedown", this.handleMouseDown);
@@ -75,21 +59,11 @@ class TemplateItemEventHandler {
       let placeHolders = document.getElementsByClassName('_draggable_');
       let dropTarget = this.getDropTarget(parent);
 
-      var _iterator2 = _createForOfIteratorHelper(placeHolders),
-          _step2;
-
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          const placeHolder = _step2.value;
-          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);
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
+      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);
       }
     });
 
@@ -135,6 +109,7 @@ class TemplateItemEventHandler {
         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);
 
@@ -280,18 +255,8 @@ class TemplateItemEventHandler {
     _defineProperty(this, "resetBorders", () => {
       let items = document.getElementsByClassName("_draggable_");
 
-      var _iterator3 = _createForOfIteratorHelper(items),
-          _step3;
-
-      try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          const item = _step3.value;
-          item.style.border = 'none';
-        }
-      } catch (err) {
-        _iterator3.e(err);
-      } finally {
-        _iterator3.f();
+      for (const item of items) {
+        item.style.border = 'none';
       }
     });
 
@@ -350,30 +315,19 @@ class TemplateItemEventHandler {
         let newWidth;
         let resized = true;
 
-        var _iterator4 = _createForOfIteratorHelper(lastCols),
-            _step4;
-
-        try {
-          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-            const lastCol = _step4.value;
-
-            if (!this.lastColItemPreResizeWidth) {
-              this.lastColItemPreResizeWidth = parse(lastCol.style.width);
-            }
+        for (const lastCol of lastCols) {
+          if (!this.lastColItemPreResizeWidth) {
+            this.lastColItemPreResizeWidth = parse(lastCol.style.width);
+          }
 
-            newWidth = this.lastColItemPreResizeWidth + spec.rightOffset; //console.log(spec.leftOffset + " : " + spec.rightOffset + " : " + this.lastColItemPreResizeWidth);
+          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 (newWidth >= 32) {
+            lastCol.style.width = newWidth + 'px';
+          } else {
+            resized = false;
+            break;
           }
-        } catch (err) {
-          _iterator4.e(err);
-        } finally {
-          _iterator4.f();
         }
 
         if (resized) {
@@ -386,30 +340,19 @@ class TemplateItemEventHandler {
         let firstCols = node.getElementsByClassName('_item_table_col_0');
         let resized = true;
 
-        var _iterator5 = _createForOfIteratorHelper(firstCols),
-            _step5;
-
-        try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            const firstCol = _step5.value;
-
-            if (!this.firstColItemPreResizeWidth) {
-              this.firstColItemPreResizeWidth = parse(firstCol.style.width);
-            }
+        for (const firstCol of firstCols) {
+          if (!this.firstColItemPreResizeWidth) {
+            this.firstColItemPreResizeWidth = parse(firstCol.style.width);
+          }
 
-            newWidth = this.firstColItemPreResizeWidth + spec.leftOffset * -1;
+          newWidth = this.firstColItemPreResizeWidth + spec.leftOffset * -1;
 
-            if (newWidth >= 32) {
-              firstCol.style.width = newWidth + 'px';
-            } else {
-              resized = false;
-              break;
-            }
+          if (newWidth >= 32) {
+            firstCol.style.width = newWidth + 'px';
+          } else {
+            resized = false;
+            break;
           }
-        } catch (err) {
-          _iterator5.e(err);
-        } finally {
-          _iterator5.f();
         }
 
         if (resized) {
@@ -431,18 +374,8 @@ class TemplateItemEventHandler {
           newHeight = this.firstRowItemPreResizeHeight + spec.bottomOffset / rows.length;
         }
 
-        var _iterator6 = _createForOfIteratorHelper(rows),
-            _step6;
-
-        try {
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-            const row = _step6.value;
-            row.style.height = newHeight + 'px';
-          }
-        } catch (err) {
-          _iterator6.e(err);
-        } finally {
-          _iterator6.f();
+        for (const row of rows) {
+          row.style.height = newHeight + 'px';
         }
 
         if (spec.topOffset !== 0) {