@agilemotion/oui-react-js 1.3.3 → 1.3.5

package/dist/components/signatures/SignatureTemplateDesigner.js

@@ -33,6 +33,10 @@ var _RestUtils = require("../../RestUtils");
 
 var _ServiceCallActionHandler = _interopRequireDefault(require("../../event/ServiceCallActionHandler"));
 
+var _TemplateItemEventHandler = _interopRequireDefault(require("../TemplateItemEventHandler"));
+
+require("../TemplateDesigner.css");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -54,22 +58,16 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 const INITIAL_ITEM = {
-  type: "initial",
-  defaultWidth: "100%",
-  defaultWidthOnPageDrop: "80px",
-  defaultHeightOnPageDrop: "80px"
+  defaultWidthOnPageDrop: 80,
+  defaultHeightOnPageDrop: 80
 };
 const SIGN_ITEM = {
-  type: "sign",
-  defaultWidth: "100%",
-  defaultWidthOnPageDrop: "200px",
-  defaultHeightOnPageDrop: "80px"
+  defaultWidthOnPageDrop: 200,
+  defaultHeightOnPageDrop: 80
 };
 const TEXT_ITEM = {
-  type: "text",
-  defaultWidth: "100%",
-  defaultWidthOnPageDrop: "200px",
-  defaultHeightOnPageDrop: "80px"
+  defaultWidthOnPageDrop: 200,
+  defaultHeightOnPageDrop: 80
 };
 const DROP_ITEM_MARGIN = 32;
 const types = [INITIAL_ITEM, SIGN_ITEM, TEXT_ITEM];
@@ -98,7 +96,8 @@ const useStyles = (0, _core.makeStyles)(theme => ({
     margin: "4px",
     textAlign: "center",
     padding: "28px 0",
-    borderRadius: "4px"
+    borderRadius: "4px",
+    cursor: 'grabbing'
   },
   paletteButtonSelected: {
     '&:hover': {
@@ -110,7 +109,8 @@ const useStyles = (0, _core.makeStyles)(theme => ({
     margin: "4px",
     textAlign: "center",
     padding: "28px 0",
-    borderRadius: "4px"
+    borderRadius: "4px",
+    cursor: 'grabbing'
   },
   palette: {
     width: "280px",
@@ -133,10 +133,9 @@ const json = response => {
   return response.text();
 };
 
-const VALID_COLOR = "green";
-const INVALID_COLOR = "red";
 const location = window.location.protocol + "//" + window.location.hostname;
-const dragAndDropData = {}; //Global variable as Chrome doesn't allow access to event.dataTransfer in dragover
+const templateItemEventHandler = new _TemplateItemEventHandler.default();
+const VALID_COLOR = "green";
 
 const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const _React$useState = _react.default.useState(null),
@@ -146,8 +145,8 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
 
   const _React$useState3 = _react.default.useState(null),
         _React$useState4 = _slicedToArray(_React$useState3, 2),
-        htmlTemplate = _React$useState4[0],
-        setHtmlTemplate = _React$useState4[1];
+        templateDoc = _React$useState4[0],
+        setTemplateDoc = _React$useState4[1];
 
   const _React$useState5 = _react.default.useState(null),
         _React$useState6 = _slicedToArray(_React$useState5, 2),
@@ -187,10 +186,15 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
 
   const documentName = _react.default.useRef(null);
 
-  _react.default.useEffect(() => {
-    props.handle.api = api();
+  const _React$useState17 = _react.default.useState(null),
+        _React$useState18 = _slicedToArray(_React$useState17, 2),
+        grabbedItem = _React$useState18[0],
+        setGrabbedItem = _React$useState18[1];
 
+  _react.default.useEffect(() => {
     if (initializing) {
+      props.handle.api = api();
+
       let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
 
       _Observable.default.addSubscriptions(parsedConfig.eventHandlingConfig, props.handle, props.viewId);
@@ -205,6 +209,22 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     }
   });
 
+  const setup = () => {
+    let container = document.getElementById('templateContainer');
+
+    if (!_Utils.default.isNull(templateDoc) && !_Utils.default.isNull(container)) {
+      templateItemEventHandler.initDragAndDrop(id => {}, container);
+    }
+  };
+
+  _react.default.useEffect(() => {
+    setup();
+  });
+
+  _react.default.useEffect(() => {
+    setup();
+  }, [templateDoc]);
+
   _react.default.useEffect(() => {
     if (!_Utils.default.isNull(props.valueChangeHandler)) {
       props.valueChangeHandler(value);
@@ -240,7 +260,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
             actionConfig.service = service;
 
             _ServiceCallActionHandler.default.execute(actionConfig, null, null, props.viewId, data => {
-              setHtmlTemplate(data.template);
+              setTemplateDoc(data.template);
               setLoading(false);
             }, () => {});
           }
@@ -252,7 +272,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
             setValue(value);
 
             if (!_Utils.default.isNull(value)) {
-              setHtmlTemplate(value.htmlTemplate);
+              setTemplateDoc(value.htmlTemplate);
               setInputBoxValues(value.signatureInputs);
               idCounter.current = value.idCounter;
             }
@@ -273,193 +293,47 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     };
   };
 
-  let mouseOverHandler = function mouseOverHandler(event) {
-    if (typeof event.target.className === 'string' && event.target.className.includes("dropTarget") && paletteSelection.current !== null) {
-      let originalBorder = event.target.style.border.replace(INVALID_COLOR, VALID_COLOR);
-      event.target.setAttribute('originalBorder', originalBorder);
-      event.target.style.border = "4px dashed " + VALID_COLOR;
-    }
-  };
-
-  let mouseOutHandler = function mouseOutHandler(event) {
-    if (typeof event.target.className === 'string' && event.target.className.includes("dropTarget")) {
-      let originalBorder = event.target.getAttribute("originalBorder");
-
-      if (_Utils.default.isNull(originalBorder)) {
-        originalBorder = "";
-      }
-
-      event.target.style.border = originalBorder;
-    }
-  };
-
-  const resetBorders = item => {
-    let elements = document.getElementsByClassName("_draggable_" + item.type);
-
-    var _iterator = _createForOfIteratorHelper(elements),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        const element = _step.value;
-        element.style.borderWidth = "2px";
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-  };
-
-  const getAllInputBoxElements = () => {
-    let elements = [];
-
-    var _iterator2 = _createForOfIteratorHelper(types),
-        _step2;
-
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        const type = _step2.value;
-
-        var _iterator3 = _createForOfIteratorHelper(document.getElementsByClassName("_draggable_" + type.type)),
-            _step3;
-
-        try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            const element = _step3.value;
-            elements.push(element);
-          }
-        } catch (err) {
-          _iterator3.e(err);
-        } finally {
-          _iterator3.f();
-        }
-      }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
-    }
-
-    return elements;
-  };
-
-  const getPageDropOffset = (left, top) => {
-    let leftOffset = 0;
-    let topOffset = 0;
-    let elements = getAllInputBoxElements();
-
-    var _iterator4 = _createForOfIteratorHelper(elements),
-        _step4;
-
-    try {
-      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-        const element = _step4.value;
-
-        if (parseFloat(element.style.left.replace('px', '')) === left) {
-          leftOffset += 4;
-          left = parseFloat(element.style.left.replace('px', '')) + 4;
-        }
-
-        if (parseFloat(element.style.top.replace('px', '')) === top) {
-          topOffset += 4;
-          top = parseFloat(element.style.top.replace('px', ''));
-        }
-      }
-    } catch (err) {
-      _iterator4.e(err);
-    } finally {
-      _iterator4.f();
-    }
-
-    return {
-      leftOffset: leftOffset,
-      topOffset: topOffset
-    };
-  };
-
-  const convertToPixels = val => {
-    if (val.includes("pt")) {
-      let numericValue = parseFloat(val.replace('pt', ''));
-      return (4 * numericValue / 3).toFixed(0) + "px";
-    }
-
-    return val;
-  };
-
-  const resetAllBorder = () => {
-    resetBorders(INITIAL_ITEM);
-    resetBorders(SIGN_ITEM);
-    resetBorders(TEXT_ITEM);
+  const newItem = (id, width, height) => {
+    let inputValue = {};
+    inputValue.id = id;
+    inputValue.height = height.replace("px", "");
+    inputValue.width = width.replace("px", "");
+    inputValue.type = paletteSelection.current === "INITIAL_ITEM" ? "INITIAL" : paletteSelection.current === "SIGN_ITEM" ? "SIGN" : "TEXT INPUT";
+    return inputValue;
   };
 
   let mouseClickHandler = function mouseClickHandler(event) {
-    resetAllBorder();
-    setSelectedInputBoxValue(null);
-
-    if (typeof event.target.className === 'string' && event.target.className.includes("dropTarget")) {
-      if (paletteSelection.current !== null) {
-        let node = document.createElement("div"); // TODO : First check if its an overlay or an adaptive mode
-
-        node.style.lineHeight = event.target.style.lineHeight;
-        node.style.border = "2px dashed " + INVALID_COLOR;
-        node.style.position = 'absolute';
-        node.style.borderRadius = '2px';
-        node.id = idCounter.current++;
-        node.className = "__agm_wf_signatureInput__ _draggable_" + paletteSelection.current.type;
-        node.setAttribute("draggable", true);
-
-        if (event.target.className.includes("page")) {
-          let top = !_Utils.default.isNull(event.target.style.top) && event.target.style.top.trim().length > 0 ? event.target.style.top.replaceAll('pt', '') : '0';
-          let topPos = parseFloat(top) + parseFloat(event.target.style.height.replace('pt', '')) - parseFloat(paletteSelection.current.defaultHeightOnPageDrop.replace('px', '')) * .75 - DROP_ITEM_MARGIN;
-          let pageDropOffset = getPageDropOffset(DROP_ITEM_MARGIN, parseFloat(convertToPixels(topPos + "pt").replace('px', '')));
-          node.style.top = convertToPixels(topPos - pageDropOffset.topOffset + 'pt');
-          node.style.width = paletteSelection.current.defaultWidthOnPageDrop;
-          node.style.height = paletteSelection.current.defaultHeightOnPageDrop;
-          node.style.padding = '8px';
-          node.style.left = DROP_ITEM_MARGIN + pageDropOffset.leftOffset + 'px';
-          event.target.appendChild(node);
-        } else {
-          let lineHeight = event.target.style.lineHeight;
-          let hasLineHeight = !_Utils.default.isNull(lineHeight) && lineHeight.trim().length > 0 && lineHeight.toString() !== '0';
-          node.style.top = hasLineHeight ? event.target.style.top : convertToPixels(parseFloat(event.target.style.top.replace('pt', '')) - 14.5 + 'pt');
-          node.style.left = event.target.style.left;
-          node.style.width = convertToPixels(event.target.style.width);
-          node.style.height = convertToPixels(hasLineHeight ? event.target.style.lineHeight : '14.5pt');
-          node.style.padding = parseFloat(node.style.height.replace('px', '')) > 32 ? '8px' : '0px';
-          event.target.parentElement.appendChild(node);
+    if (grabbedItem) {
+      setSelectedInputBoxValue(null);
+      templateItemEventHandler.handleGrabRelease(event, {
+        id: grabbedItem.id,
+        width: grabbedItem.props.defaultWidthOnPageDrop,
+        height: grabbedItem.props.defaultHeightOnPageDrop,
+        description: grabbedItem.description,
+        type: grabbedItem.type
+      }, (id, node) => {
+        let inputValue = getInputValue(id);
+
+        if (!inputValue) {
+          inputValue = newItem(id, node.style.width, node.style.height);
+          inputBoxValues.push(inputValue);
+          setValue(null);
         }
 
-        node.addEventListener('dragstart', dragStart, false);
-        let inputValue = {};
-        inputValue.id = node.id;
-        inputValue.height = node.style.height.replace("px", "");
-        inputValue.width = node.style.width.replace("px", "");
-        inputValue.type = paletteSelection.current.type === "initial" ? "INITIAL" : paletteSelection.current.type === "sign" ? "SIGN" : "TEXT INPUT";
-        inputBoxValues.push(inputValue);
-        setValue(null);
-      }
-
-      paletteSelection.current = null;
-      setPaletteSelectionId(null);
-    } else if (event.target.className.includes("_draggable_")) {
-      event.target.style.borderWidth = "4px";
-      let inputValue = getInputValue(event.target.id);
-      setSelectedInputBoxValue(inputValue);
+        setSelectedInputBoxValue(inputValue);
+      });
     }
 
-    if (typeof event.target.className === 'string' && !event.target.className.includes("paletteButton") && !event.target.className.includes("paletteButtonLabel") && !event.target.className.includes("paletteButtonSelected")) {
-      paletteSelection.current = null;
-      setPaletteSelectionId(null);
-      document.getElementsByTagName("body")[0].style.cursor = 'default';
-    }
+    setPaletteSelectionId(null);
+    setGrabbedItem(null);
   };
 
-  _react.default.useEffect(() => {
-    return () => {
-      destroyEvents();
-    };
-  }, []);
+  const grabPalleteItem = item => {
+    document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
+    setPaletteSelectionId(item.type);
+    paletteSelection.current = item.type;
+    setGrabbedItem(item);
+  };
 
   _react.default.useEffect(() => {
     let event = new _Event.default(props.handle, props.viewId, value);
@@ -467,195 +341,15 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     _Observable.default.fireEvent(_EventType.default.VALUE_CHANGE, event);
   }, [value]);
 
-  const initDragAndDrop = className => {
-    setTimeout(() => {
-      let elements = document.getElementsByClassName(className);
-
-      var _iterator5 = _createForOfIteratorHelper(elements),
-          _step5;
-
-      try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          const element = _step5.value;
-
-          if (className !== "page") {
-            element.addEventListener("dragstart", dragStart, false);
-          }
-
-          element.addEventListener("dragover", dragOver, false);
-          element.addEventListener("drop", drop, false);
-        }
-      } catch (err) {
-        _iterator5.e(err);
-      } finally {
-        _iterator5.f();
-      }
-    }, 2000);
-  };
-
-  const destroyEvents = () => {
-    let elements = document.getElementsByClassName("page");
-
-    var _iterator6 = _createForOfIteratorHelper(elements),
-        _step6;
-
-    try {
-      for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-        const element = _step6.value;
-        element.removeEventListener("dragover", dragOver);
-        element.removeEventListener("drop", drop);
-      }
-    } catch (err) {
-      _iterator6.e(err);
-    } finally {
-      _iterator6.f();
-    }
-
-    let allInputs = getAllInputBoxElements();
-
-    var _iterator7 = _createForOfIteratorHelper(allInputs),
-        _step7;
-
-    try {
-      for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-        const element = _step7.value;
-        element.removeEventListener("dragover", dragOver);
-        element.removeEventListener("drop", drop);
-        element.removeEventListener("dropStart", dragStart);
-      }
-    } catch (err) {
-      _iterator7.e(err);
-    } finally {
-      _iterator7.f();
-    }
-  };
-
-  _react.default.useEffect(() => {
-    initDragAndDrop("page");
-
-    var _iterator8 = _createForOfIteratorHelper(types),
-        _step8;
-
-    try {
-      for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-        const type = _step8.value;
-        initDragAndDrop("_draggable_" + type.type);
-        resetBorders(type);
-      }
-    } catch (err) {
-      _iterator8.e(err);
-    } finally {
-      _iterator8.f();
-    }
-
-    if (!loading) {
-      setValue(null);
-    }
-
-    setSelectedInputBoxValue(null);
-    setInputBoxValues([]);
-    setPaletteSelectionId(null);
-  }, [htmlTemplate]);
-
-  function getElementPage(elementId) {
-    let pages = document.getElementsByClassName("page");
-
-    var _iterator9 = _createForOfIteratorHelper(pages),
-        _step9;
-
-    try {
-      for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-        const page = _step9.value;
-        let elements = page.getElementsByClassName("__agm_wf_signatureInput__");
-
-        var _iterator10 = _createForOfIteratorHelper(elements),
-            _step10;
-
-        try {
-          for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-            const element = _step10.value;
-
-            if (element.id === elementId) {
-              return page;
-            }
-          }
-        } catch (err) {
-          _iterator10.e(err);
-        } finally {
-          _iterator10.f();
-        }
-      }
-    } catch (err) {
-      _iterator9.e(err);
-    } finally {
-      _iterator9.f();
-    }
-
-    return null;
-  }
-
-  function handleDragDrop(event) {
-    let offset;
-    offset = dragAndDropData.offset.split(',');
-    let dm = document.getElementById(dragAndDropData.id);
-    let page = getElementPage(dm.id);
-    let itemLeft = event.clientX + parseInt(offset[0], 10);
-    let itemTop = event.clientY + parseInt(offset[1], 10);
-    let itemWidth = parseFloat(convertToPixels(dm.style.width).replace('px', ''));
-    let itemHeight = parseFloat(convertToPixels(dm.style.height).replace('px', ''));
-    dm.style.left = itemLeft + 'px';
-    dm.style.top = itemTop + 'px';
-    let itemRight = itemLeft + itemWidth;
-    let itemBottom = itemTop + itemHeight;
-    let pageRight = parseFloat(convertToPixels(page.style.width).replace('px', ''));
-    let pageBottom = parseFloat(convertToPixels(page.style.height).replace('px', ''));
-
-    if (itemLeft < DROP_ITEM_MARGIN) {
-      dm.style.left = DROP_ITEM_MARGIN + 'px';
-    }
-
-    if (itemRight > pageRight - DROP_ITEM_MARGIN) {
-      dm.style.left = pageRight - DROP_ITEM_MARGIN - itemWidth + 'px';
-    }
-
-    if (itemTop < DROP_ITEM_MARGIN) {
-      dm.style.top = DROP_ITEM_MARGIN + 'px';
-    }
-
-    if (itemBottom > pageBottom - DROP_ITEM_MARGIN) {
-      dm.style.top = pageBottom - DROP_ITEM_MARGIN - itemHeight + 'px';
-    }
-
-    event.preventDefault();
-    return false;
-  }
-
-  function dragStart(event) {
-    document.body.style.cursor = "move";
-    let style = window.getComputedStyle(event.target, null);
-    dragAndDropData.offset = parseInt(style.getPropertyValue("left"), 10) - event.clientX + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY);
-    dragAndDropData.id = event.target.id;
-  }
-
-  function dragOver(event) {
-    document.body.style.cursor = "move";
-    return handleDragDrop(event);
-  }
-
-  function drop(event) {
-    document.body.style.cursor = "default";
-    return handleDragDrop(event);
-  }
-
   const getInputValue = id => {
     let index = 0;
 
-    var _iterator11 = _createForOfIteratorHelper(inputBoxValues),
-        _step11;
+    var _iterator = _createForOfIteratorHelper(inputBoxValues),
+        _step;
 
     try {
-      for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-        const inputBoxValue = _step11.value;
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        const inputBoxValue = _step.value;
 
         if (inputBoxValue.id === id) {
           inputBoxValue.index = index;
@@ -665,16 +359,16 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
         index++;
       }
     } catch (err) {
-      _iterator11.e(err);
+      _iterator.e(err);
     } finally {
-      _iterator11.f();
+      _iterator.f();
     }
 
     return null;
   };
 
   const handleSubmit = () => event => {
-    setHtmlTemplate("");
+    setTemplateDoc("");
     const accessToken = sessionStorage.getItem("accessToken");
     const idToken = sessionStorage.getItem("idToken");
     let data = new FormData();
@@ -692,7 +386,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     };
     let url = location + _ApplicationContext.default.getBaseApiUrl() + props.config.documentConverterUrl;
     (0, _reactPromiseTracker.trackPromise)(fetch(encodeURI(url), fetchConfig).then(status).then(json).then(data => {
-      setHtmlTemplate(data);
+      setTemplateDoc(data);
       setFile(null);
     }).catch(e => {
       if (e.code === 401) {
@@ -718,38 +412,40 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
   };
 
   const clear = () => {
-    var _iterator12 = _createForOfIteratorHelper(inputBoxValues),
-        _step12;
+    let elements = document.getElementsByClassName('_draggable_');
 
-    try {
-      for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
-        const inputBoxValue = _step12.value;
-        document.getElementById(inputBoxValue.id).remove();
-      }
-    } catch (err) {
-      _iterator12.e(err);
-    } finally {
-      _iterator12.f();
+    while (elements.length > 0) {
+      elements[0].remove();
     }
 
     inputBoxValues.splice(0, inputBoxValues.length);
     setValue(null);
   };
 
+  const getProps = type => {
+    if (type === 'INITIAL_ITEM') {
+      return INITIAL_ITEM;
+    } else if (type === 'SIGN_ITEM') {
+      return SIGN_ITEM;
+    }
+
+    return TEXT_ITEM;
+  };
+
   const handleDuplicate = id => {
-    let inputValue = getInputValue(id);
+    // TODO : Fix this function
     let element = document.getElementById(id);
-    let pageElements = document.getElementsByClassName("page");
+    let pageElements = document.getElementsByClassName("dropTarget");
     let elementPage = null;
     let elementTop = 3 * parseFloat(element.style.top.replace("px", '').replace('pt', '')) / 4;
     let pageElementTop = 0;
 
-    var _iterator13 = _createForOfIteratorHelper(pageElements),
-        _step13;
+    var _iterator2 = _createForOfIteratorHelper(pageElements),
+        _step2;
 
     try {
-      for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
-        const pageElement = _step13.value;
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        const pageElement = _step2.value;
         let pageElementHeight = parseFloat(pageElement.style.height.replace("px", '').replace('pt', ''));
 
         if (elementTop >= pageElementTop && elementTop < pageElementTop + pageElementHeight) {
@@ -760,68 +456,74 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
         pageElementTop += pageElementHeight;
       }
     } catch (err) {
-      _iterator13.e(err);
+      _iterator2.e(err);
     } finally {
-      _iterator13.f();
+      _iterator2.f();
     }
 
     let offset = elementTop - pageElementTop;
     let pageNumber = 0;
     let elementData = getInputValue(id);
 
-    var _iterator14 = _createForOfIteratorHelper(pageElements),
-        _step14;
+    var _iterator3 = _createForOfIteratorHelper(pageElements),
+        _step3;
 
     try {
-      for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
-        const pageElement = _step14.value;
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        const pageElement = _step3.value;
         let pageElementHeight = parseFloat(pageElement.style.height.replace("px", '').replace('pt', ''));
 
         if (pageElement !== elementPage) {
-          let node = document.createElement("div");
-          node.style.lineHeight = element.lineHeight;
-          node.style.border = element.style.border;
-          node.style.position = 'absolute';
-          node.style.borderWidth = '2px';
-          node.style.borderRadius = '2px';
-          node.style.width = element.style.width;
-          node.style.padding = element.style.padding;
-          node.style.height = element.style.height;
-          node.style.left = element.style.left;
-          node.innerText = element.innerText;
-          node.style.top = convertToPixels(pageNumber * pageElementHeight + offset + 'pt');
-          node.id = idCounter.current++;
-          node.className = element.className;
-          node.setAttribute("sid", element.getAttribute("sid"));
-          node.setAttribute("draggable", true);
-          let inputValue = {};
-          inputValue.id = node.id;
-          inputValue.height = node.style.height.replace("px", "");
-          inputValue.width = node.style.width.replace("px", "");
-          inputValue.type = elementData.type;
-          inputValue.signatory = elementData.signatory;
-          inputBoxValues.push(inputValue);
-          pageElement.appendChild(node);
-          node.addEventListener('dragstart', dragStart, false);
-          saveValue();
+          let item = {
+            id: idCounter.current++,
+            description: elementData.description,
+            type: elementData.type,
+            props: getProps(elementData.type)
+          };
+          grabPalleteItem(item);
+          let event = {
+            target: pageElement
+          };
+          templateItemEventHandler.handleGrabRelease(event, {
+            id: item.id,
+            top: pageNumber * pageElementHeight + offset,
+            left: parseFloat(element.style.left.replace("px", "")),
+            width: parseFloat(element.style.width.replace("px", "")),
+            height: parseFloat(element.style.height.replace("px", "")),
+            description: item.description,
+            type: item.type
+          }, (id, node) => {
+            let inputValue = getInputValue(id);
+
+            if (!inputValue) {
+              inputValue = newItem(item.id, node.style.width, node.style.height);
+              inputBoxValues.push(inputValue);
+              setValue(null);
+            }
+
+            setSelectedInputBoxValue(inputValue);
+          });
+          setGrabbedItem(null);
         }
+
+        pageNumber++;
       }
     } catch (err) {
-      _iterator14.e(err);
+      _iterator3.e(err);
     } finally {
-      _iterator14.f();
+      _iterator3.f();
     }
   };
 
   function saveValue() {
     let allValid = true;
 
-    var _iterator15 = _createForOfIteratorHelper(inputBoxValues),
-        _step15;
+    var _iterator4 = _createForOfIteratorHelper(inputBoxValues),
+        _step4;
 
     try {
-      for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) {
-        const inputBoxValue = _step15.value;
+      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+        const inputBoxValue = _step4.value;
 
         if (_Utils.default.isNull(inputBoxValue.signatory)) {
           allValid = false;
@@ -829,14 +531,14 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
         }
       }
     } catch (err) {
-      _iterator15.e(err);
+      _iterator4.e(err);
     } finally {
-      _iterator15.f();
+      _iterator4.f();
     }
 
     if (allValid) {
       let newValue = {};
-      newValue.htmlTemplate = document.getElementById("templateContainer").innerHTML.replace("div name=\"replaced_html\"", "html").replace("div name=\"replaced_body\"", "body");
+      newValue.htmlTemplate = document.getElementById("templateContainer").innerHTML.replace("2px dashed #a1a1a1", "none").replace("2px dashed green", "none").replace("div name=\"replaced_html\"", "html").replace("div name=\"replaced_body\"", "body");
       newValue.htmlTemplateBase64 = Base64.encode(newValue.htmlTemplate);
       newValue.signatureInputs = inputBoxValues;
       newValue.idCounter = idCounter.current;
@@ -857,7 +559,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     element.style.width = values.width + "px";
     element.style.height = values.height + "px";
     element.style.borderColor = VALID_COLOR;
-    element.innerText = values.signatory.map.name;
+    element.innerText = values.signatory.map.emailAddress + "_" + id;
     element.setAttribute("sid", values.signatory.map.emailAddress);
     saveValue();
   };
@@ -904,62 +606,58 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     style: {
       height: "auto"
     }
-  }, !_Utils.default.isNull(htmlTemplate) ? /*#__PURE__*/_react.default.createElement("div", {
+  }, !_Utils.default.isNull(templateDoc) ? /*#__PURE__*/_react.default.createElement("div", {
     className: 'row'
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(classes.palette, " col-*-*"),
     style: {
       maxHeight: "calc(70vh - 80px)",
-      overflow: "auto"
+      overflow: "auto",
+      width: '280px'
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-*-*"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     component: "span",
     className: paletteSelectionId === 'INITIAL_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
-    onClick: () => {
-      document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
-      paletteSelection.current = INITIAL_ITEM;
-      setPaletteSelectionId('INITIAL_ITEM');
-    },
+    onClick: () => grabPalleteItem({
+      id: idCounter.current++,
+      description: 'Initial',
+      type: 'INITIAL_ITEM',
+      props: INITIAL_ITEM
+    }),
     id: "initialPaletteButton",
     classes: {
       "label": "paletteButtonLabel"
     }
-  }, "Initial Pad")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-*-*"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, "Initial Pad"), /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     component: "span",
     className: paletteSelectionId === 'SIGN_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
-    onClick: () => {
-      document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
-      paletteSelection.current = SIGN_ITEM;
-      setPaletteSelectionId('SIGN_ITEM');
-    },
-    id: "signPaletteButton",
+    onClick: () => grabPalleteItem({
+      id: idCounter.current++,
+      description: 'Signature',
+      type: 'SIGN_ITEM',
+      props: SIGN_ITEM
+    }),
+    id: "initialPaletteButton",
     classes: {
       "label": "paletteButtonLabel"
     }
-  }, "Signature Pad")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-*-*"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, "Signature Pad"), /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     component: "span",
     className: paletteSelectionId === 'TEXT_ITEM' ? classes.paletteButtonSelected : classes.paletteButton,
-    onClick: () => {
-      document.getElementsByTagName("body")[0].style.cursor = 'grabbing';
-      paletteSelection.current = TEXT_ITEM;
-      setPaletteSelectionId('TEXT_ITEM');
-    },
-    id: "signPaletteButton",
+    onClick: () => grabPalleteItem({
+      id: idCounter.current++,
+      description: 'Text',
+      type: 'TEXT_ITEM',
+      props: TEXT_ITEM
+    }),
+    id: "initialPaletteButton",
     classes: {
       "label": "paletteButtonLabel"
     }
-  }, "Text Input")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "col-*-*"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, "Text Input"), /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "contained",
     component: "span",
     className: classes.paletteButton,
@@ -970,7 +668,7 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     classes: {
       "label": "paletteButtonLabel"
     }
-  }, "Clear")), /*#__PURE__*/_react.default.createElement("div", {
+  }, "Clear"), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(classes.propertyWindow)
   }, /*#__PURE__*/_react.default.createElement(_SignatureInputProps.default, {
     value: selectedInputBoxValue,
@@ -979,20 +677,32 @@ const SignatureTemplateDesigner = /*#__PURE__*/_react.default.memo( /*#__PURE__*
     deleteHandler: (id, values) => deleteInputItem(id, values),
     dublicateHandler: id => handleDuplicate(id)
   }))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      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", {
     style: {
       maxHeight: "calc(70vh - 80px)",
-      overflow: "auto",
-      width: "60%"
+      overflow: "auto"
     },
     className: 'col-*-*',
-    id: "signaturePanel",
-    onClick: e => mouseClickHandler(e),
-    onMouseOver: e => mouseOverHandler(e),
-    onMouseOut: e => mouseOutHandler(e),
     id: "templateContainer"
   }, /*#__PURE__*/_react.default.createElement(_reactHtmlRenderer.default, {
-    html: htmlTemplate.replace('<html', "<div name=\"replaced_html\"").replace('</html>', '</div>').replace('<body', "<div name=\"replaced_body\"").replace('</body>', '</div>')
-  }))) : null)) : /*#__PURE__*/_react.default.createElement("div", null, "Loading..."));
+    html: templateDoc.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%',
+      display: 'inline-block',
+      textAlign: 'center',
+      marginTop: '64px'
+    }
+  }, "no template to display"))) : null)) : /*#__PURE__*/_react.default.createElement("div", null, "Loading..."));
 }));
 
 var _default = SignatureTemplateDesigner;