@adlfe/campaign-management-library 2.9.21 → 2.10.2

package/projects/adl-campaign-management-library-internal/src/flowy.js.bkp

@@ -0,0 +1,979 @@
+"use strict";
+
+var flowy = function flowy(canvas, grab, release, snapping, rearrange, spacing_x, spacing_y) {
+  if (!grab) {
+    grab = function grab() {};
+  }
+
+  if (!release) {
+    release = function release() {};
+  }
+
+  if (!snapping) {
+    snapping = function snapping() {
+      return true;
+    };
+  }
+
+  if (!rearrange) {
+    rearrange = function rearrange() {
+      return false;
+    };
+  }
+
+  if (!spacing_x) {
+    spacing_x = 20;
+  }
+
+  if (!spacing_y) {
+    spacing_y = 80;
+  }
+
+  if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+  }
+
+  if (!Element.prototype.closest) {
+    Element.prototype.closest = function (s) {
+      var el = this;
+
+      do {
+        if (Element.prototype.matches.call(el, s)) return el;
+        el = el.parentElement || el.parentNode;
+      } while (el !== null && el.nodeType === 1);
+
+      return null;
+    };
+  }
+
+  var loaded = false;
+
+  flowy.load = function () {
+    if (!loaded) loaded = true;else return;
+    var blocks = [];
+    var blockstemp = [];
+    var canvas_div = canvas;
+    var active = false;
+    var paddingx = spacing_x;
+    var paddingy = spacing_y;
+    var offsetleft = 0;
+    var offsetleftold = 0;
+    var rearrange = false;
+    var lastevent = false;
+    var drag, dragx, dragy, original;
+    var mouse_x, mouse_y;
+    var dragblock = false;
+    var prevblock = 0;
+    var el = document.createElement("DIV");
+    el.classList.add('indicator');
+    el.classList.add('invisible');
+    canvas_div.appendChild(el);
+
+    flowy.import = function (output) {
+      canvas_div.innerHTML = output.html;
+
+      for (var a = 0; a < output.blockarr.length; a++) {
+        var block = {
+          childwidth: parseFloat(output.blockarr[a].childwidth),
+          parent: parseFloat(output.blockarr[a].parent),
+          id: parseFloat(output.blockarr[a].id),
+          x: parseFloat(output.blockarr[a].x),
+          y: parseFloat(output.blockarr[a].y),
+          width: parseFloat(output.blockarr[a].width),
+          height: parseFloat(output.blockarr[a].height)
+        };
+        blocks.push(block);
+      }
+
+      if (blocks.length > 1) {
+        rearrangeMe();
+      }
+    };
+
+    flowy.output = function () {
+      var html_ser = canvas_div.innerHTML;
+      var json_data = {
+        html: html_ser,
+        blockarr: blocks,
+        blocks: []
+      };
+
+      if (blocks.length > 0) {
+        for (var i = 0; i < blocks.length; i++) {
+          json_data.blocks.push({
+            id: blocks[i].id,
+            parent: blocks[i].parent,
+            data: [],
+            attr: []
+          });
+          var blockParent = document.querySelector(".blockid[value='" + blocks[i].id + "']").parentNode;
+          blockParent.querySelectorAll("input").forEach(function (block) {
+            var json_name = block.getAttribute("name");
+            var json_value = block.value;
+            json_data.blocks[i].data.push({
+              name: json_name,
+              value: json_value
+            });
+          });
+          Array.prototype.slice.call(blockParent.attributes).forEach(function (attribute) {
+            var jsonobj = {};
+            jsonobj[attribute.name] = attribute.value;
+            json_data.blocks[i].attr.push(jsonobj);
+          });
+        }
+
+        return json_data;
+      }
+    };
+
+    flowy.deleteBlocks = function () {
+      blocks = [];
+      canvas_div.innerHTML = "<div class='indicator invisible'></div>";
+    };
+
+    flowy.beginDrag = function (event) {
+      if (event.targetTouches) {
+        mouse_x = event.changedTouches[0].clientX;
+        mouse_y = event.changedTouches[0].clientY;
+      } else {
+        mouse_x = event.clientX;
+        mouse_y = event.clientY;
+      }
+
+      if (event.which != 3 && event.target.closest(".create-flowy")) {
+        original = event.target.closest(".create-flowy");
+        var newNode = event.target.closest(".create-flowy").cloneNode(true);
+        event.target.closest(".create-flowy").classList.add("dragnow");
+        newNode.classList.add("block");
+        newNode.classList.remove("create-flowy");
+
+        if (blocks.length === 0) {
+          newNode.appendChild(string2DomElem("<input type='hidden' name='blockid' class='blockid' value='" + blocks.length + "'>"));
+          document.getElementById('tree-wrapper').appendChild(newNode);
+          drag = document.querySelector(".blockid[value='" + blocks.length + "']").parentNode;
+        } else {
+          newNode.appendChild(string2DomElem("<input type='hidden' name='blockid' class='blockid' value='" + (Math.max.apply(Math, blocks.map(function (a) {
+            return a.id;
+          })) + 1) + "'>"));
+          document.getElementById('tree-wrapper').appendChild(newNode);
+          drag = document.querySelector(".blockid[value='" + (parseInt(Math.max.apply(Math, blocks.map(function (a) {
+            return a.id;
+          }))) + 1) + "']").parentNode;
+        }
+
+        blockGrabbed(event.target.closest(".create-flowy"));
+        drag.classList.add("dragging");
+        active = true;
+        dragx = mouse_x - event.target.closest(".create-flowy").getBoundingClientRect().left;
+        dragy = mouse_y - event.target.closest(".create-flowy").getBoundingClientRect().top;
+        drag.style.left = mouse_x - dragx + "px";
+        drag.style.top = mouse_y - dragy + "px";
+      }
+    };
+
+    document.getElementById('tree-wrapper').addEventListener("mousedown", touchblock, false);
+    document.getElementById('tree-wrapper').addEventListener("touchstart", touchblock, false);
+    document.getElementById('tree-wrapper').addEventListener("mouseup", touchblock, false);
+
+    flowy.touchDone = function () {
+      dragblock = false;
+    };
+
+    document.getElementById('tree-wrapper').addEventListener('mousedown', flowy.beginDrag);
+    document.getElementById('tree-wrapper').addEventListener('touchstart', flowy.beginDrag);
+
+    flowy.endDrag = function (event) {
+      if (event.which != 3 && (active || rearrange)) {
+        dragblock = false;
+        blockReleased();
+
+        if (!document.querySelector(".indicator").classList.contains("invisible")) {
+          document.querySelector(".indicator").classList.add("invisible");
+        }
+
+        if (active) {
+          original.classList.remove("dragnow");
+          drag.classList.remove("dragging");
+        }
+
+        if (parseInt(drag.querySelector(".blockid").value) === 0 && rearrange) {
+          drag.classList.remove("dragging");
+          rearrange = false;
+
+          for (var w = 0; w < blockstemp.length; w++) {
+            if (blockstemp[w].id != parseInt(drag.querySelector(".blockid").value)) {
+              var blockParent = document.querySelector(".blockid[value='" + blockstemp[w].id + "']").parentNode;
+              var arrowParent = document.querySelector(".arrowid[value='" + blockstemp[w].id + "']").parentNode;
+              blockParent.style.left = blockParent.getBoundingClientRect().left + window.pageXOffset - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + canvas_div.scrollLeft - 1 + "px";
+              blockParent.style.top = blockParent.getBoundingClientRect().top + window.pageYOffset - (canvas_div.getBoundingClientRect().top + window.pageYOffset) + canvas_div.scrollTop - 1 + "px";
+              arrowParent.style.left = arrowParent.getBoundingClientRect().left + window.pageXOffset - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + canvas_div.scrollLeft - 1 + "px";
+              arrowParent.style.top = arrowParent.getBoundingClientRect().top + window.pageYOffset - (canvas_div.getBoundingClientRect().top + canvas_div.scrollTop) - 1 + "px";
+              canvas_div.appendChild(blockParent);
+              canvas_div.appendChild(arrowParent);
+              blockstemp[w].x = blockParent.getBoundingClientRect().left + window.pageXOffset + parseInt(blockParent.offsetWidth) / 2 + canvas_div.scrollLeft - 1;
+              blockstemp[w].y = blockParent.getBoundingClientRect().top + window.pageYOffset + parseInt(blockParent.offsetHeight) / 2 + canvas_div.scrollTop - 1;
+            }
+          }
+
+          blockstemp.filter(function (a) {
+            return a.id == 0;
+          })[0].x = drag.getBoundingClientRect().left + window.pageXOffset + parseInt(window.getComputedStyle(drag).width) / 2;
+          blockstemp.filter(function (a) {
+            return a.id == 0;
+          })[0].y = drag.getBoundingClientRect().top + window.pageYOffset + parseInt(window.getComputedStyle(drag).height) / 2;
+          blocks = blocks.concat(blockstemp);
+          blockstemp = [];
+        } else if (active && blocks.length == 0 && drag.getBoundingClientRect().top + window.pageYOffset > canvas_div.getBoundingClientRect().top + window.pageYOffset && drag.getBoundingClientRect().left + window.pageXOffset > canvas_div.getBoundingClientRect().left + window.pageXOffset) {
+          blockSnap(drag, true, undefined);
+          active = false;
+          drag.style.top = drag.getBoundingClientRect().top + window.pageYOffset - (canvas_div.getBoundingClientRect().top + window.pageYOffset) + canvas_div.scrollTop + "px";
+          drag.style.left = drag.getBoundingClientRect().left + window.pageXOffset - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + canvas_div.scrollLeft + "px";
+          canvas_div.appendChild(drag);
+          blocks.push({
+            parent: -1,
+            childwidth: 0,
+            id: parseInt(drag.querySelector(".blockid").value),
+            x: drag.getBoundingClientRect().left + window.pageXOffset + parseInt(window.getComputedStyle(drag).width) / 2 + canvas_div.scrollLeft,
+            y: drag.getBoundingClientRect().top + window.pageYOffset + parseInt(window.getComputedStyle(drag).height) / 2 + canvas_div.scrollTop,
+            width: parseInt(window.getComputedStyle(drag).width),
+            height: parseInt(window.getComputedStyle(drag).height)
+          });
+        } else if (active && blocks.length == 0) {
+          canvas_div.appendChild(document.querySelector(".indicator"));
+          drag.parentNode.removeChild(drag);
+        } else if (active) {
+          var xpos = drag.getBoundingClientRect().left + window.pageXOffset + parseInt(window.getComputedStyle(drag).width) / 2 + canvas_div.scrollLeft;
+          var ypos = drag.getBoundingClientRect().top + window.pageYOffset + canvas_div.scrollTop;
+          var blocko = blocks.map(function (a) {
+            return a.id;
+          });
+
+          for (var i = 0; i < blocks.length; i++) {
+            if (xpos >= blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].x - blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].width / 2 - paddingx && xpos <= blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].x + blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].width / 2 + paddingx && ypos >= blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].y - blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].height / 2 && ypos <= blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].y + blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].height) {
+              active = false;
+
+              if (blockSnap(drag, false, document.querySelector(".blockid[value='" + blocko[i] + "']").parentNode)) {
+                snap(drag, i, blocko);
+              } else {
+                active = false;
+                canvas_div.appendChild(document.querySelector(".indicator"));
+                drag.parentNode.removeChild(drag);
+              }
+
+              break;
+            } else if (i == blocks.length - 1) {
+              active = false;
+              canvas_div.appendChild(document.querySelector(".indicator"));
+              drag.parentNode.removeChild(drag);
+            }
+          }
+        } else if (rearrange) {
+          var xpos = drag.getBoundingClientRect().left + window.pageXOffset + parseInt(window.getComputedStyle(drag).width) / 2 + canvas_div.scrollLeft;
+          var ypos = drag.getBoundingClientRect().top + window.pageYOffset + canvas_div.scrollTop;
+          var blocko = blocks.map(function (a) {
+            return a.id;
+          });
+
+          for (var i = 0; i < blocks.length; i++) {
+            if (xpos >= blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].x - blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].width / 2 - paddingx && xpos <= blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].x + blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].width / 2 + paddingx && ypos >= blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].y - blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].height / 2 && ypos <= blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].y + blocks.filter(function (a) {
+              return a.id == blocko[i];
+            })[0].height) {
+              active = false;
+              drag.classList.remove("dragging");
+              snap(drag, i, blocko);
+              break;
+            } else if (i == blocks.length - 1) {
+              if (beforeDelete(drag, blocks.filter(function (id) {
+                return id.id == blocko[i];
+              })[0])) {
+                active = false;
+                drag.classList.remove("dragging");
+                snap(drag, blocko.indexOf(prevblock), blocko);
+                break;
+              } else {
+                rearrange = false;
+                blockstemp = [];
+                active = false;
+                canvas_div.appendChild(document.querySelector(".indicator"));
+                drag.parentNode.removeChild(drag);
+                break;
+              }
+            }
+          }
+        }
+      }
+    };
+
+    document.getElementById('tree-wrapper').addEventListener("mouseup", flowy.endDrag, false);
+    document.getElementById('tree-wrapper').addEventListener("touchend", flowy.endDrag, false);
+
+    function snap(drag, i, blocko) {
+      if (!rearrange) {
+        canvas_div.appendChild(drag);
+      }
+
+      var totalwidth = 0;
+      var totalremove = 0;
+      var maxheight = 0;
+
+      for (var w = 0; w < blocks.filter(function (id) {
+        return id.parent == blocko[i];
+      }).length; w++) {
+        var children = blocks.filter(function (id) {
+          return id.parent == blocko[i];
+        })[w];
+
+        if (children.childwidth > children.width) {
+          totalwidth += children.childwidth + paddingx;
+        } else {
+          totalwidth += children.width + paddingx;
+        }
+      }
+
+      totalwidth += parseInt(window.getComputedStyle(drag).width);
+
+      for (var w = 0; w < blocks.filter(function (id) {
+        return id.parent == blocko[i];
+      }).length; w++) {
+        var children = blocks.filter(function (id) {
+          return id.parent == blocko[i];
+        })[w];
+
+        if (children.childwidth > children.width) {
+          document.querySelector(".blockid[value='" + children.id + "']").parentNode.style.left = blocks.filter(function (a) {
+            return a.id == blocko[i];
+          })[0].x - totalwidth / 2 + totalremove + children.childwidth / 2 - children.width / 2 + "px";
+          children.x = blocks.filter(function (id) {
+            return id.parent == blocko[i];
+          })[0].x - totalwidth / 2 + totalremove + children.childwidth / 2;
+          totalremove += children.childwidth + paddingx;
+        } else {
+          document.querySelector(".blockid[value='" + children.id + "']").parentNode.style.left = blocks.filter(function (a) {
+            return a.id == blocko[i];
+          })[0].x - totalwidth / 2 + totalremove + "px";
+          children.x = blocks.filter(function (id) {
+            return id.parent == blocko[i];
+          })[0].x - totalwidth / 2 + totalremove + children.width / 2;
+          totalremove += children.width + paddingx;
+        }
+      }
+
+      drag.style.left = blocks.filter(function (id) {
+        return id.id == blocko[i];
+      })[0].x - totalwidth / 2 + totalremove - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + canvas_div.scrollLeft + "px";
+      drag.style.top = blocks.filter(function (id) {
+        return id.id == blocko[i];
+      })[0].y + blocks.filter(function (id) {
+        return id.id == blocko[i];
+      })[0].height / 2 + paddingy - (canvas_div.getBoundingClientRect().top + window.pageYOffset) + "px";
+
+      if (rearrange) {
+        blockstemp.filter(function (a) {
+          return a.id == parseInt(drag.querySelector(".blockid").value);
+        })[0].x = drag.getBoundingClientRect().left + window.pageXOffset + parseInt(window.getComputedStyle(drag).width) / 2 + canvas_div.scrollLeft;
+        blockstemp.filter(function (a) {
+          return a.id == parseInt(drag.querySelector(".blockid").value);
+        })[0].y = drag.getBoundingClientRect().top + window.pageYOffset + parseInt(window.getComputedStyle(drag).height) / 2 + canvas_div.scrollTop;
+        blockstemp.filter(function (a) {
+          return a.id == drag.querySelector(".blockid").value;
+        })[0].parent = blocko[i];
+
+        for (var w = 0; w < blockstemp.length; w++) {
+          if (blockstemp[w].id != parseInt(drag.querySelector(".blockid").value)) {
+            var blockParent = document.querySelector(".blockid[value='" + blockstemp[w].id + "']").parentNode;
+            var arrowParent = document.querySelector(".arrowid[value='" + blockstemp[w].id + "']").parentNode;
+            blockParent.style.left = blockParent.getBoundingClientRect().left + window.pageXOffset - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + canvas_div.scrollLeft + "px";
+            blockParent.style.top = blockParent.getBoundingClientRect().top + window.pageYOffset - (canvas_div.getBoundingClientRect().top + window.pageYOffset) + canvas_div.scrollTop + "px";
+            arrowParent.style.left = arrowParent.getBoundingClientRect().left + window.pageXOffset - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + canvas_div.scrollLeft + 20 + "px";
+            arrowParent.style.top = arrowParent.getBoundingClientRect().top + window.pageYOffset - (canvas_div.getBoundingClientRect().top + window.pageYOffset) + canvas_div.scrollTop + "px";
+            canvas_div.appendChild(blockParent);
+            canvas_div.appendChild(arrowParent);
+            blockstemp[w].x = blockParent.getBoundingClientRect().left + window.pageXOffset + parseInt(window.getComputedStyle(blockParent).width) / 2 + canvas_div.scrollLeft;
+            blockstemp[w].y = blockParent.getBoundingClientRect().top + window.pageYOffset + parseInt(window.getComputedStyle(blockParent).height) / 2 + canvas_div.scrollTop;
+          }
+        }
+
+        blocks = blocks.concat(blockstemp);
+        blockstemp = [];
+      } else {
+        blocks.push({
+          childwidth: 0,
+          parent: blocko[i],
+          id: parseInt(drag.querySelector(".blockid").value),
+          x: drag.getBoundingClientRect().left + window.pageXOffset + parseInt(window.getComputedStyle(drag).width) / 2 + canvas_div.scrollLeft,
+          y: drag.getBoundingClientRect().top + window.pageYOffset + parseInt(window.getComputedStyle(drag).height) / 2 + canvas_div.scrollTop,
+          width: parseInt(window.getComputedStyle(drag).width),
+          height: parseInt(window.getComputedStyle(drag).height)
+        });
+      }
+
+      var arrowhelp = blocks.filter(function (a) {
+        return a.id == parseInt(drag.querySelector(".blockid").value);
+      })[0];
+      var arrowx = arrowhelp.x - blocks.filter(function (a) {
+        return a.id == blocko[i];
+      })[0].x + 20;
+      var arrowy = parseFloat(arrowhelp.y - arrowhelp.height / 2 - (blocks.filter(function (id) {
+        return id.parent == blocko[i];
+      })[0].y + blocks.filter(function (id) {
+        return id.parent == blocko[i];
+      })[0].height / 2) + canvas_div.scrollTop);
+
+      if (arrowx < 0) {
+        canvas_div.appendChild(string2DomElem('<div class="arrowblock"><input type="hidden" class="arrowid" value="' + drag.querySelector(".blockid").value + '"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M' + (blocks.filter(function (a) {
+          return a.id == blocko[i];
+        })[0].x - arrowhelp.x + 5) + ' 0L' + (blocks.filter(function (a) {
+          return a.id == blocko[i];
+        })[0].x - arrowhelp.x + 5) + ' ' + paddingy / 2 + 'L5 ' + paddingy / 2 + 'L5 ' + arrowy + '" stroke="#C5CCD0" stroke-width="2px"/><path d="M0 ' + (arrowy - 5) + 'H10L5 ' + arrowy + 'L0 ' + (arrowy - 5) + 'Z" fill="#C5CCD0"/></svg></div>'));
+        document.querySelector('.arrowid[value="' + drag.querySelector(".blockid").value + '"]').parentNode.style.left = arrowhelp.x - 5 - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + canvas_div.scrollLeft + "px";
+      } else {
+        canvas_div.appendChild(string2DomElem('<div class="arrowblock"><input type="hidden" class="arrowid" value="' + drag.querySelector(".blockid").value + '"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0L20 ' + paddingy / 2 + 'L' + arrowx + ' ' + paddingy / 2 + 'L' + arrowx + ' ' + arrowy + '" stroke="#C5CCD0" stroke-width="2px"/><path d="M' + (arrowx - 5) + ' ' + (arrowy - 5) + 'H' + (arrowx + 5) + 'L' + arrowx + ' ' + arrowy + 'L' + (arrowx - 5) + ' ' + (arrowy - 5) + 'Z" fill="#C5CCD0"/></svg></div>'));
+        document.querySelector('.arrowid[value="' + parseInt(drag.querySelector(".blockid").value) + '"]').parentNode.style.left = blocks.filter(function (a) {
+          return a.id == blocko[i];
+        })[0].x - 20 - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + canvas_div.scrollLeft + "px";
+      }
+
+      document.querySelector('.arrowid[value="' + parseInt(drag.querySelector(".blockid").value) + '"]').parentNode.style.top = blocks.filter(function (a) {
+        return a.id == blocko[i];
+      })[0].y + blocks.filter(function (a) {
+        return a.id == blocko[i];
+      })[0].height / 2 + "px";
+
+      if (blocks.filter(function (a) {
+        return a.id == blocko[i];
+      })[0].parent != -1) {
+        var flag = false;
+        var idval = blocko[i];
+
+        while (!flag) {
+          if (blocks.filter(function (a) {
+            return a.id == idval;
+          })[0].parent == -1) {
+            flag = true;
+          } else {
+            var zwidth = 0;
+
+            for (var w = 0; w < blocks.filter(function (id) {
+              return id.parent == idval;
+            }).length; w++) {
+              var children = blocks.filter(function (id) {
+                return id.parent == idval;
+              })[w];
+
+              if (children.childwidth > children.width) {
+                if (w == blocks.filter(function (id) {
+                  return id.parent == idval;
+                }).length - 1) {
+                  zwidth += children.childwidth;
+                } else {
+                  zwidth += children.childwidth + paddingx;
+                }
+              } else {
+                if (w == blocks.filter(function (id) {
+                  return id.parent == idval;
+                }).length - 1) {
+                  zwidth += children.width;
+                } else {
+                  zwidth += children.width + paddingx;
+                }
+              }
+            }
+
+            blocks.filter(function (a) {
+              return a.id == idval;
+            })[0].childwidth = zwidth;
+            idval = blocks.filter(function (a) {
+              return a.id == idval;
+            })[0].parent;
+          }
+        }
+
+        blocks.filter(function (id) {
+          return id.id == idval;
+        })[0].childwidth = totalwidth;
+      }
+
+      if (rearrange) {
+        rearrange = false;
+        drag.classList.remove("dragging");
+      }
+
+      rearrangeMe();
+      checkOffset();
+    }
+
+    function touchblock(event) {
+      dragblock = false;
+      console.log('touchblock');
+
+      if (hasParentClass(event.target, "block")) {
+        var theblock = event.target.closest(".block");
+
+        if (event.targetTouches) {
+          mouse_x = event.targetTouches[0].clientX;
+          mouse_y = event.targetTouches[0].clientY;
+        } else {
+          mouse_x = event.clientX;
+          mouse_y = event.clientY;
+        }
+
+        if (event.type !== "mouseup" && hasParentClass(event.target, "block")) {
+          if (event.which != 3) {
+            if (!active && !rearrange) {
+              dragblock = true;
+              drag = theblock;
+              dragx = mouse_x - (drag.getBoundingClientRect().left + window.pageXOffset);
+              dragy = mouse_y - (drag.getBoundingClientRect().top + window.pageYOffset);
+            }
+          }
+        }
+      }
+    }
+
+    function hasParentClass(element, classname) {
+      if (element.className) {
+        if (element.className.split(' ').indexOf(classname) >= 0) return true;
+      }
+
+      return element.parentNode && hasParentClass(element.parentNode, classname);
+    }
+
+    flowy.moveBlock = function (event) {
+      if (event.targetTouches) {
+        mouse_x = event.targetTouches[0].clientX;
+        mouse_y = event.targetTouches[0].clientY;
+      } else {
+        mouse_x = event.clientX;
+        mouse_y = event.clientY;
+      }
+
+      if (dragblock) {
+        rearrange = true;
+        drag.classList.add("dragging");
+        var blockid = parseInt(drag.querySelector(".blockid").value);
+        prevblock = blocks.filter(function (a) {
+          return a.id == blockid;
+        })[0].parent;
+        blockstemp.push(blocks.filter(function (a) {
+          return a.id == blockid;
+        })[0]);
+        blocks = blocks.filter(function (e) {
+          return e.id != blockid;
+        });
+
+        if (blockid != 0) {
+          document.querySelector(".arrowid[value='" + blockid + "']").parentNode.remove();
+        }
+
+        var layer = blocks.filter(function (a) {
+          return a.parent == blockid;
+        });
+        var flag = false;
+        var foundids = [];
+        var allids = [];
+
+        while (!flag) {
+          for (var i = 0; i < layer.length; i++) {
+            if (layer[i] != blockid) {
+              blockstemp.push(blocks.filter(function (a) {
+                return a.id == layer[i].id;
+              })[0]);
+              var blockParent = document.querySelector(".blockid[value='" + layer[i].id + "']").parentNode;
+              var arrowParent = document.querySelector(".arrowid[value='" + layer[i].id + "']").parentNode;
+              blockParent.style.left = blockParent.getBoundingClientRect().left + window.pageXOffset - (drag.getBoundingClientRect().left + window.pageXOffset) + "px";
+              blockParent.style.top = blockParent.getBoundingClientRect().top + window.pageYOffset - (drag.getBoundingClientRect().top + window.pageYOffset) + "px";
+              arrowParent.style.left = arrowParent.getBoundingClientRect().left + window.pageXOffset - (drag.getBoundingClientRect().left + window.pageXOffset) + "px";
+              arrowParent.style.top = arrowParent.getBoundingClientRect().top + window.pageYOffset - (drag.getBoundingClientRect().top + window.pageYOffset) + "px";
+              drag.appendChild(blockParent);
+              drag.appendChild(arrowParent);
+              foundids.push(layer[i].id);
+              allids.push(layer[i].id);
+            }
+          }
+
+          if (foundids.length == 0) {
+            flag = true;
+          } else {
+            layer = blocks.filter(function (a) {
+              return foundids.includes(a.parent);
+            });
+            foundids = [];
+          }
+        }
+
+        for (var i = 0; i < blocks.filter(function (a) {
+          return a.parent == blockid;
+        }).length; i++) {
+          var blocknumber = blocks.filter(function (a) {
+            return a.parent == blockid;
+          })[i];
+          blocks = blocks.filter(function (e) {
+            return e.id != blocknumber;
+          });
+        }
+
+        for (var i = 0; i < allids.length; i++) {
+          var blocknumber = allids[i];
+          blocks = blocks.filter(function (e) {
+            return e.id != blocknumber;
+          });
+        }
+
+        if (blocks.length > 1) {
+          rearrangeMe();
+        }
+
+        if (lastevent) {
+          fixOffset();
+        }
+
+        dragblock = false;
+      }
+
+      if (active) {
+        drag.style.left = mouse_x - dragx + "px";
+        drag.style.top = mouse_y - dragy + "px";
+      } else if (rearrange) {
+        drag.style.left = mouse_x - dragx - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + canvas_div.scrollLeft + "px";
+        drag.style.top = mouse_y - dragy - (canvas_div.getBoundingClientRect().top + window.pageYOffset) + canvas_div.scrollTop + "px";
+        blockstemp.filter(function (a) {
+          return a.id == parseInt(drag.querySelector(".blockid").value);
+        }).x = drag.getBoundingClientRect().left + window.pageXOffset + parseInt(window.getComputedStyle(drag).width) / 2 + canvas_div.scrollLeft;
+        blockstemp.filter(function (a) {
+          return a.id == parseInt(drag.querySelector(".blockid").value);
+        }).y = drag.getBoundingClientRect().left + window.pageXOffset + parseInt(window.getComputedStyle(drag).height) / 2 + canvas_div.scrollTop;
+      }
+
+      if (active || rearrange) {
+        var xpos = drag.getBoundingClientRect().left + window.pageXOffset + parseInt(window.getComputedStyle(drag).width) / 2 + canvas_div.scrollLeft;
+        var ypos = drag.getBoundingClientRect().top + window.pageYOffset + canvas_div.scrollTop;
+        var blocko = blocks.map(function (a) {
+          return a.id;
+        });
+
+        for (var i = 0; i < blocks.length; i++) {
+          if (xpos >= blocks.filter(function (a) {
+            return a.id == blocko[i];
+          })[0].x - blocks.filter(function (a) {
+            return a.id == blocko[i];
+          })[0].width / 2 - paddingx && xpos <= blocks.filter(function (a) {
+            return a.id == blocko[i];
+          })[0].x + blocks.filter(function (a) {
+            return a.id == blocko[i];
+          })[0].width / 2 + paddingx && ypos >= blocks.filter(function (a) {
+            return a.id == blocko[i];
+          })[0].y - blocks.filter(function (a) {
+            return a.id == blocko[i];
+          })[0].height / 2 && ypos <= blocks.filter(function (a) {
+            return a.id == blocko[i];
+          })[0].y + blocks.filter(function (a) {
+            return a.id == blocko[i];
+          })[0].height) {
+            document.querySelector(".blockid[value='" + blocko[i] + "']").parentNode.appendChild(document.querySelector(".indicator"));
+            document.querySelector(".indicator").style.left = parseInt(window.getComputedStyle(document.querySelector(".blockid[value='" + blocko[i] + "']").parentNode).width) / 2 - 5 + "px";
+            document.querySelector(".indicator").style.top = window.getComputedStyle(document.querySelector(".blockid[value='" + blocko[i] + "']").parentNode).height + "px";
+            document.querySelector(".indicator").classList.remove("invisible");
+            break;
+          } else if (i == blocks.length - 1) {
+            if (!document.querySelector(".indicator").classList.contains("invisible")) {
+              document.querySelector(".indicator").classList.add("invisible");
+            }
+          }
+        }
+      }
+    };
+
+    document.getElementById('tree-wrapper').addEventListener("mousemove", flowy.moveBlock, false);
+    document.getElementById('tree-wrapper').addEventListener("touchmove", flowy.moveBlock, false);
+
+    function checkOffset() {
+      offsetleft = blocks.map(function (a) {
+        return a.x;
+      });
+      var widths = blocks.map(function (a) {
+        return a.width;
+      });
+      var mathmin = offsetleft.map(function (item, index) {
+        return item - widths[index] / 2;
+      });
+      offsetleft = Math.min.apply(Math, mathmin);
+
+      if (offsetleft < canvas_div.getBoundingClientRect().left + window.pageXOffset) {
+        lastevent = true;
+        var blocko = blocks.map(function (a) {
+          return a.id;
+        });
+
+        for (var w = 0; w < blocks.length; w++) {
+          document.querySelector(".blockid[value='" + blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].id + "']").parentNode.style.left = blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].x - blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].width / 2 - offsetleft + 20 + "px";
+
+          if (blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].parent != -1) {
+            var arrowhelp = blocks.filter(function (a) {
+              return a.id == blocko[w];
+            })[0];
+            var arrowx = arrowhelp.x - blocks.filter(function (a) {
+              return a.id == blocks.filter(function (a) {
+                return a.id == blocko[w];
+              })[0].parent;
+            })[0].x;
+
+            if (arrowx < 0) {
+              document.querySelector('.arrowid[value="' + blocko[w] + '"]').parentNode.style.left = arrowhelp.x - offsetleft + 20 - 5 + "px";
+            } else {
+              document.querySelector('.arrowid[value="' + blocko[w] + '"]').parentNode.style.left = blocks.filter(function (id) {
+                return id.id == blocks.filter(function (a) {
+                  return a.id == blocko[w];
+                })[0].parent;
+              })[0].x - 20 - offsetleft + 20 + "px";
+            }
+          }
+        }
+
+        for (var w = 0; w < blocks.length; w++) {
+          blocks[w].x = document.querySelector(".blockid[value='" + blocks[w].id + "']").parentNode.getBoundingClientRect().left + window.pageXOffset + (canvas_div.getBoundingClientRect().left + canvas_div.scrollLeft) - parseInt(window.getComputedStyle(document.querySelector(".blockid[value='" + blocks[w].id + "']").parentNode).width) / 2 - 40;
+        }
+
+        offsetleftold = offsetleft;
+      }
+    }
+
+    function fixOffset() {
+      if (offsetleftold < canvas_div.getBoundingClientRect().left + window.pageXOffset) {
+        lastevent = false;
+        var blocko = blocks.map(function (a) {
+          return a.id;
+        });
+
+        for (var w = 0; w < blocks.length; w++) {
+          document.querySelector(".blockid[value='" + blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].id + "']").parentNode.style.left = blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].x - blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].width / 2 - offsetleftold - 20 + "px";
+          blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].x = document.querySelector(".blockid[value='" + blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].id + "']").parentNode.getBoundingClientRect().left + window.pageXOffset + blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].width / 2;
+
+          if (blocks.filter(function (a) {
+            return a.id == blocko[w];
+          })[0].parent != -1) {
+            var arrowhelp = blocks.filter(function (a) {
+              return a.id == blocko[w];
+            })[0];
+            var arrowx = arrowhelp.x - blocks.filter(function (a) {
+              return a.id == blocks.filter(function (a) {
+                return a.id == blocko[w];
+              })[0].parent;
+            })[0].x;
+
+            if (arrowx < 0) {
+              document.querySelector('.arrowid[value="' + blocko[w] + '"]').parentNode.style.left = arrowhelp.x - 5 - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + "px";
+            } else {
+              document.querySelector('.arrowid[value="' + blocko[w] + '"]').parentNode.style.left = blocks.filter(function (id) {
+                return id.id == blocks.filter(function (a) {
+                  return a.id == blocko[w];
+                })[0].parent;
+              })[0].x - 20 - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + "px";
+            }
+          }
+        }
+
+        offsetleftold = 0;
+      }
+    }
+
+    function rearrangeMe() {
+      var result = blocks.map(function (a) {
+        return a.parent;
+      });
+
+      for (var z = 0; z < result.length; z++) {
+        if (result[z] == -1) {
+          z++;
+        }
+
+        var totalwidth = 0;
+        var totalremove = 0;
+        var maxheight = 0;
+
+        for (var w = 0; w < blocks.filter(function (id) {
+          return id.parent == result[z];
+        }).length; w++) {
+          var children = blocks.filter(function (id) {
+            return id.parent == result[z];
+          })[w];
+
+          if (blocks.filter(function (id) {
+            return id.parent == children.id;
+          }).length == 0) {
+            children.childwidth = 0;
+          }
+
+          if (children.childwidth > children.width) {
+            if (w == blocks.filter(function (id) {
+              return id.parent == result[z];
+            }).length - 1) {
+              totalwidth += children.childwidth;
+            } else {
+              totalwidth += children.childwidth + paddingx;
+            }
+          } else {
+            if (w == blocks.filter(function (id) {
+              return id.parent == result[z];
+            }).length - 1) {
+              totalwidth += children.width;
+            } else {
+              totalwidth += children.width + paddingx;
+            }
+          }
+        }
+
+        if (result[z] != -1) {
+          blocks.filter(function (a) {
+            return a.id == result[z];
+          })[0].childwidth = totalwidth;
+        }
+
+        for (var w = 0; w < blocks.filter(function (id) {
+          return id.parent == result[z];
+        }).length; w++) {
+          var children = blocks.filter(function (id) {
+            return id.parent == result[z];
+          })[w];
+          var r_block = document.querySelector(".blockid[value='" + children.id + "']").parentNode;
+          var r_array = blocks.filter(function (id) {
+            return id.id == result[z];
+          });
+          r_block.style.top = r_array.y + paddingy + "px";
+          r_array.y = r_array.y + paddingy;
+
+          if (children.childwidth > children.width) {
+            r_block.style.left = r_array[0].x - totalwidth / 2 + totalremove + children.childwidth / 2 - children.width / 2 - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + "px";
+            children.x = r_array[0].x - totalwidth / 2 + totalremove + children.childwidth / 2;
+            totalremove += children.childwidth + paddingx;
+          } else {
+            r_block.style.left = r_array[0].x - totalwidth / 2 + totalremove - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + "px";
+            children.x = r_array[0].x - totalwidth / 2 + totalremove + children.width / 2;
+            totalremove += children.width + paddingx;
+          }
+
+          var arrowhelp = blocks.filter(function (a) {
+            return a.id == children.id;
+          })[0];
+          var arrowx = arrowhelp.x - blocks.filter(function (a) {
+            return a.id == children.parent;
+          })[0].x + 20;
+          var arrowy = arrowhelp.y - arrowhelp.height / 2 - (blocks.filter(function (a) {
+            return a.id == children.parent;
+          })[0].y + blocks.filter(function (a) {
+            return a.id == children.parent;
+          })[0].height / 2);
+          document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.style.top = blocks.filter(function (id) {
+            return id.id == children.parent;
+          })[0].y + blocks.filter(function (id) {
+            return id.id == children.parent;
+          })[0].height / 2 - (canvas_div.getBoundingClientRect().top + window.pageYOffset) + "px";
+
+          if (arrowx < 0) {
+            document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.style.left = arrowhelp.x - 5 - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + "px";
+            document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.innerHTML = '<input type="hidden" class="arrowid" value="' + children.id + '"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M' + (blocks.filter(function (id) {
+              return id.id == children.parent;
+            })[0].x - arrowhelp.x + 5) + ' 0L' + (blocks.filter(function (id) {
+              return id.id == children.parent;
+            })[0].x - arrowhelp.x + 5) + ' ' + paddingy / 2 + 'L5 ' + paddingy / 2 + 'L5 ' + arrowy + '" stroke="#C5CCD0" stroke-width="2px"/><path d="M0 ' + (arrowy - 5) + 'H10L5 ' + arrowy + 'L0 ' + (arrowy - 5) + 'Z" fill="#C5CCD0"/></svg>';
+          } else {
+            document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.style.left = blocks.filter(function (id) {
+              return id.id == children.parent;
+            })[0].x - 20 - (canvas_div.getBoundingClientRect().left + window.pageXOffset) + "px";
+            document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.innerHTML = '<input type="hidden" class="arrowid" value="' + children.id + '"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0L20 ' + paddingy / 2 + 'L' + arrowx + ' ' + paddingy / 2 + 'L' + arrowx + ' ' + arrowy + '" stroke="#C5CCD0" stroke-width="2px"/><path d="M' + (arrowx - 5) + ' ' + (arrowy - 5) + 'H' + (arrowx + 5) + 'L' + arrowx + ' ' + arrowy + 'L' + (arrowx - 5) + ' ' + (arrowy - 5) + 'Z" fill="#C5CCD0"/></svg>';
+          }
+        }
+      }
+    }
+  };
+
+  flowy.load();
+
+  function blockGrabbed(block) {
+    grab(block);
+  }
+
+  function blockReleased() {
+    release();
+  }
+
+  function blockSnap(drag, first, parent) {
+    return snapping(drag, first, parent);
+  }
+
+  function beforeDelete(drag, parent) {
+    return rearrange(drag, parent);
+  }
+
+  function addEventListenerMulti(type, listener, capture, selector) {
+    var nodes = document.getElementById('tree-wrapper').querySelectorAll(selector);
+
+    for (var i = 0; i < nodes.length; i++) {
+      nodes[i].addEventListener(type, listener, capture);
+    }
+  }
+
+  function removeEventListenerMulti(type, listener, capture, selector) {
+    var nodes = document.querySelectorAll(selector);
+
+    for (var i = 0; i < nodes.length; i++) {
+      nodes[i].removeEventListener(type, listener, capture);
+    }
+  }
+
+  function string2DomElem(html) {
+    var parser = new DOMParser();
+    return parser.parseFromString(html, 'text/html').body.childNodes[0];
+  }
+
+  return flowy;
+};