@adlfe/campaign-management-library 2.10.2 → 2.10.3

package/projects/adl-campaign-management-library-internal/src/assets/svg/flow-builder/flowy.js

@@ -1,645 +0,0 @@
-var flowy = function(canvas, grab, release, snapping, rearrange, spacing_x, spacing_y) {
-    if (!grab) {
-        grab = function() {};
-    }
-    if (!release) {
-        release = function() {};
-    }
-    if (!snapping) {
-        snapping = function() {
-            return true;
-        }
-    }
-    if (!rearrange) {
-        rearrange = function() {
-            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.innerHTML += "<input type='hidden' name='blockid' class='blockid' value='" + blocks.length + "'>";
-                    document.body.appendChild(newNode);
-                    drag = document.querySelector(".blockid[value='" + blocks.length + "']").parentNode;
-                } else {
-                    newNode.innerHTML += "<input type='hidden' name='blockid' class='blockid' value='" + (Math.max.apply(Math, blocks.map(a => a.id)) + 1) + "'>";
-                    document.body.appendChild(newNode);
-                    drag = document.querySelector(".blockid[value='" + (parseInt(Math.max.apply(Math, blocks.map(a => 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.addEventListener("mousedown",touchblock, false);
-        document.addEventListener("touchstart",touchblock, false);
-        document.addEventListener("mouseup", touchblock, false);
-
-        flowy.touchDone = function() {
-            dragblock = false;
-        }
-        document.addEventListener('mousedown',flowy.beginDrag);
-        document.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)) {
-                            const blockParent = document.querySelector(".blockid[value='" + blockstemp[w].id + "']").parentNode;
-                            const arrowParent = document.querySelector(".arrowid[value='" + blockstemp[w].id + "']").parentNode;
-                            blockParent.style.left = (blockParent.getBoundingClientRect().left + window.scrollX) - (canvas_div.getBoundingClientRect().left + window.scrollX) + canvas_div.scrollLeft - 1 + "px";
-                            blockParent.style.top = (blockParent.getBoundingClientRect().top + window.scrollY) - (canvas_div.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop - 1 + "px";
-                            arrowParent.style.left = (arrowParent.getBoundingClientRect().left + window.scrollX) - (canvas_div.getBoundingClientRect().left + window.scrollX) + canvas_div.scrollLeft - 1 + "px";
-                            arrowParent.style.top = (arrowParent.getBoundingClientRect().top + window.scrollY) - (canvas_div.getBoundingClientRect().top + canvas_div.scrollTop) - 1 + "px";
-                            canvas_div.appendChild(blockParent);
-                            canvas_div.appendChild(arrowParent);
-                            blockstemp[w].x = (blockParent.getBoundingClientRect().left + window.scrollX) + (parseInt(blockParent.offsetWidth) / 2) + canvas_div.scrollLeft - 1;
-                            blockstemp[w].y = (blockParent.getBoundingClientRect().top + window.scrollY) + (parseInt(blockParent.offsetHeight) / 2) + canvas_div.scrollTop - 1;
-                        }
-                    }
-                    blockstemp.filter(a => a.id == 0)[0].x = (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2);
-                    blockstemp.filter(a => a.id == 0)[0].y = (drag.getBoundingClientRect().top + window.scrollY) + (parseInt(window.getComputedStyle(drag).height) / 2);
-                    blocks = blocks.concat(blockstemp);
-                    blockstemp = [];
-                } else if (active && blocks.length == 0 && (drag.getBoundingClientRect().top + window.scrollY) > (canvas_div.getBoundingClientRect().top + window.scrollY) && (drag.getBoundingClientRect().left + window.scrollX) > (canvas_div.getBoundingClientRect().left + window.scrollX)) {
-                    blockSnap(drag, true, undefined);
-                    active = false;
-                    drag.style.top = (drag.getBoundingClientRect().top + window.scrollY) - (canvas_div.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop + "px";
-                    drag.style.left = (drag.getBoundingClientRect().left + window.scrollX) - (canvas_div.getBoundingClientRect().left + window.scrollX) + 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.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft,
-                        y: (drag.getBoundingClientRect().top + window.scrollY) + (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.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft;
-                    var ypos = (drag.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop
-                    var blocko = blocks.map(a => a.id);
-                    for (var i = 0; i < blocks.length; i++) {
-                        if (xpos >= blocks.filter(a => a.id == blocko[i])[0].x - (blocks.filter(a => a.id == blocko[i])[0].width / 2) - paddingx && xpos <= blocks.filter(a => a.id == blocko[i])[0].x + (blocks.filter(a => a.id == blocko[i])[0].width / 2) + paddingx && ypos >= blocks.filter(a => a.id == blocko[i])[0].y - (blocks.filter(a => a.id == blocko[i])[0].height / 2) && ypos <= blocks.filter(a => a.id == blocko[i])[0].y + blocks.filter(a => 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.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft;
-                    var ypos = (drag.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop
-                    var blocko = blocks.map(a => a.id);
-                    for (var i = 0; i < blocks.length; i++) {
-                        if (xpos >= blocks.filter(a => a.id == blocko[i])[0].x - (blocks.filter(a => a.id == blocko[i])[0].width / 2) - paddingx && xpos <= blocks.filter(a => a.id == blocko[i])[0].x + (blocks.filter(a => a.id == blocko[i])[0].width / 2) + paddingx && ypos >= blocks.filter(a => a.id == blocko[i])[0].y - (blocks.filter(a => a.id == blocko[i])[0].height / 2) && ypos <= blocks.filter(a => a.id == blocko[i])[0].y + blocks.filter(a => 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(id => 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.addEventListener("mouseup", flowy.endDrag, false);
-        document.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(id => id.parent == blocko[i]).length; w++) {
-                var children = blocks.filter(id => 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(id => id.parent == blocko[i]).length; w++) {
-                var children = blocks.filter(id => id.parent == blocko[i])[w];
-                if (children.childwidth > children.width) {
-                    document.querySelector(".blockid[value='" + children.id + "']").parentNode.style.left = blocks.filter(a => a.id == blocko[i])[0].x - (totalwidth / 2) + totalremove + (children.childwidth / 2) - (children.width / 2) + "px";
-                    children.x = blocks.filter(id => 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(a => a.id == blocko[i])[0].x - (totalwidth / 2) + totalremove + "px";
-                    children.x = blocks.filter(id => id.parent == blocko[i])[0].x - (totalwidth / 2) + totalremove + (children.width / 2);
-                    totalremove += children.width + paddingx;
-                }
-            }
-            drag.style.left = blocks.filter(id => id.id == blocko[i])[0].x - (totalwidth / 2) + totalremove - (canvas_div.getBoundingClientRect().left + window.scrollX) + canvas_div.scrollLeft + "px";
-            drag.style.top = blocks.filter(id => id.id == blocko[i])[0].y + (blocks.filter(id => id.id == blocko[i])[0].height / 2) + paddingy - (canvas_div.getBoundingClientRect().top + window.scrollY) + "px";
-            if (rearrange) {
-                blockstemp.filter(a => a.id == parseInt(drag.querySelector(".blockid").value))[0].x = (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft;
-                blockstemp.filter(a => a.id == parseInt(drag.querySelector(".blockid").value))[0].y = (drag.getBoundingClientRect().top + window.scrollY) + (parseInt(window.getComputedStyle(drag).height) / 2) + canvas_div.scrollTop;
-                blockstemp.filter(a => 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)) {
-                        const blockParent = document.querySelector(".blockid[value='" + blockstemp[w].id + "']").parentNode;
-                        const arrowParent = document.querySelector(".arrowid[value='" + blockstemp[w].id + "']").parentNode;
-                        blockParent.style.left = (blockParent.getBoundingClientRect().left + window.scrollX) - (canvas_div.getBoundingClientRect().left + window.scrollX) + canvas_div.scrollLeft + "px";
-                        blockParent.style.top = (blockParent.getBoundingClientRect().top + window.scrollY) - (canvas_div.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop + "px";
-                        arrowParent.style.left = (arrowParent.getBoundingClientRect().left + window.scrollX) - (canvas_div.getBoundingClientRect().left + window.scrollX) + canvas_div.scrollLeft + 20 + "px";
-                        arrowParent.style.top = (arrowParent.getBoundingClientRect().top + window.scrollY) - (canvas_div.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop + "px";
-                        canvas_div.appendChild(blockParent);
-                        canvas_div.appendChild(arrowParent);
-
-                        blockstemp[w].x = (blockParent.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(blockParent).width) / 2) + canvas_div.scrollLeft;
-                        blockstemp[w].y = (blockParent.getBoundingClientRect().top + window.scrollY) + (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.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft,
-                    y: (drag.getBoundingClientRect().top + window.scrollY) + (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(a => a.id == parseInt(drag.querySelector(".blockid").value))[0];
-            var arrowx = arrowhelp.x - blocks.filter(a => a.id == blocko[i])[0].x + 20;
-            var arrowy = parseFloat(arrowhelp.y - (arrowhelp.height / 2) - (blocks.filter(id => id.parent == blocko[i])[0].y + (blocks.filter(id => id.parent == blocko[i])[0].height / 2)) + canvas_div.scrollTop);
-            if (arrowx < 0) {
-                canvas_div.innerHTML += '<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(a => a.id == blocko[i])[0].x - arrowhelp.x + 5) + ' 0L' + (blocks.filter(a => 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.scrollX) + canvas_div.scrollLeft + "px";
-            } else {
-                canvas_div.innerHTML += '<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(a => a.id == blocko[i])[0].x - 20 - (canvas_div.getBoundingClientRect().left + window.scrollX) + canvas_div.scrollLeft + "px";
-            }
-            document.querySelector('.arrowid[value="' + parseInt(drag.querySelector(".blockid").value) + '"]').parentNode.style.top = blocks.filter(a => a.id == blocko[i])[0].y + (blocks.filter(a => a.id == blocko[i])[0].height / 2) + "px";
-            if (blocks.filter(a => a.id == blocko[i])[0].parent != -1) {
-                var flag = false;
-                var idval = blocko[i];
-                while (!flag) {
-                    if (blocks.filter(a => a.id == idval)[0].parent == -1) {
-                        flag = true;
-                    } else {
-                        var zwidth = 0;
-                        for (var w = 0; w < blocks.filter(id => id.parent == idval).length; w++) {
-                            var children = blocks.filter(id => id.parent == idval)[w];
-                            if (children.childwidth > children.width) {
-                                if (w == blocks.filter(id => id.parent == idval).length - 1) {
-                                    zwidth += children.childwidth;
-                                } else {
-                                    zwidth += children.childwidth + paddingx;
-                                }
-                            } else {
-                                if (w == blocks.filter(id => id.parent == idval).length - 1) {
-                                    zwidth += children.width;
-                                } else {
-                                    zwidth += children.width + paddingx;
-                                }
-                            }
-                        }
-                        blocks.filter(a => a.id == idval)[0].childwidth = zwidth;
-                        idval = blocks.filter(a => a.id == idval)[0].parent;
-                    }
-                }
-                blocks.filter(id => id.id == idval)[0].childwidth = totalwidth;
-            }
-            if (rearrange) {
-                rearrange = false;
-                drag.classList.remove("dragging");
-            }
-            rearrangeMe();
-            checkOffset();
-        }
-        
-        function touchblock(event) {
-            dragblock = false;
-            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.scrollX);
-                            dragy = mouse_y - (drag.getBoundingClientRect().top + window.scrollY);
-                        }
-                    }
-                }
-            }
-        }
-
-        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(a => a.id == blockid)[0].parent;
-                blockstemp.push(blocks.filter(a => 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(a => 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(a => a.id == layer[i].id)[0]);
-                        const blockParent = document.querySelector(".blockid[value='" + layer[i].id + "']").parentNode;
-                        const arrowParent = document.querySelector(".arrowid[value='" + layer[i].id + "']").parentNode;
-                        blockParent.style.left = (blockParent.getBoundingClientRect().left + window.scrollX) - (drag.getBoundingClientRect().left + window.scrollX) + "px";
-                        blockParent.style.top = (blockParent.getBoundingClientRect().top + window.scrollY) - (drag.getBoundingClientRect().top + window.scrollY) + "px";
-                        arrowParent.style.left = (arrowParent.getBoundingClientRect().left + window.scrollX) - (drag.getBoundingClientRect().left + window.scrollX) + "px";
-                        arrowParent.style.top = (arrowParent.getBoundingClientRect().top + window.scrollY) - (drag.getBoundingClientRect().top + window.scrollY) + "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(a => foundids.includes(a.parent));
-                        foundids = [];
-                    }
-                }
-                for (var i = 0; i < blocks.filter(a => a.parent == blockid).length; i++) {
-                    var blocknumber = blocks.filter(a => 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.scrollX) + canvas_div.scrollLeft + "px";
-                drag.style.top = mouse_y - dragy - (canvas_div.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop + "px";
-                blockstemp.filter(a => a.id == parseInt(drag.querySelector(".blockid").value)).x = (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft;
-                blockstemp.filter(a => a.id == parseInt(drag.querySelector(".blockid").value)).y = (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).height) / 2) + canvas_div.scrollTop;
-            }
-            if (active || rearrange) {
-                var xpos = (drag.getBoundingClientRect().left + window.scrollX) + (parseInt(window.getComputedStyle(drag).width) / 2) + canvas_div.scrollLeft;
-                var ypos = (drag.getBoundingClientRect().top + window.scrollY) + canvas_div.scrollTop;
-                var blocko = blocks.map(a => a.id);
-                for (var i = 0; i < blocks.length; i++) {
-                    if (xpos >= blocks.filter(a => a.id == blocko[i])[0].x - (blocks.filter(a => a.id == blocko[i])[0].width / 2) - paddingx && xpos <= blocks.filter(a => a.id == blocko[i])[0].x + (blocks.filter(a => a.id == blocko[i])[0].width / 2) + paddingx && ypos >= blocks.filter(a => a.id == blocko[i])[0].y - (blocks.filter(a => a.id == blocko[i])[0].height / 2) && ypos <= blocks.filter(a => a.id == blocko[i])[0].y + blocks.filter(a => 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.addEventListener("mousemove", flowy.moveBlock, false);
-        document.addEventListener("touchmove", flowy.moveBlock, false);
-
-        function checkOffset() {
-            offsetleft = blocks.map(a => a.x);
-            var widths = blocks.map(a => 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.scrollX)) {
-                lastevent = true;
-                var blocko = blocks.map(a => a.id);
-                for (var w = 0; w < blocks.length; w++) {
-                    document.querySelector(".blockid[value='" + blocks.filter(a => a.id == blocko[w])[0].id + "']").parentNode.style.left = blocks.filter(a => a.id == blocko[w])[0].x - (blocks.filter(a => a.id == blocko[w])[0].width / 2) - offsetleft + 20 + "px";
-                    if (blocks.filter(a => a.id == blocko[w])[0].parent != -1) {
-                        var arrowhelp = blocks.filter(a => a.id == blocko[w])[0];
-                        var arrowx = arrowhelp.x - blocks.filter(a => a.id == blocks.filter(a => 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(id => id.id == blocks.filter(a => 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.scrollX) + (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.scrollX)) {
-                lastevent = false;
-                var blocko = blocks.map(a => a.id);
-                for (var w = 0; w < blocks.length; w++) {
-                    document.querySelector(".blockid[value='" + blocks.filter(a => a.id == blocko[w])[0].id + "']").parentNode.style.left = blocks.filter(a => a.id == blocko[w])[0].x - (blocks.filter(a => a.id == blocko[w])[0].width / 2) - offsetleftold - 20 + "px";
-                    blocks.filter(a => a.id == blocko[w])[0].x = (document.querySelector(".blockid[value='" + blocks.filter(a => a.id == blocko[w])[0].id + "']").parentNode.getBoundingClientRect().left + window.scrollX) + (blocks.filter(a => a.id == blocko[w])[0].width / 2);
-
-                    if (blocks.filter(a => a.id == blocko[w])[0].parent != -1) {
-                        var arrowhelp = blocks.filter(a => a.id == blocko[w])[0];
-                        var arrowx = arrowhelp.x - blocks.filter(a => a.id == blocks.filter(a => 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.scrollX) + "px");
-                        } else {
-                            document.querySelector('.arrowid[value="' + blocko[w] + '"]').parentNode.style.left = blocks.filter(id => id.id == blocks.filter(a => a.id == blocko[w])[0].parent)[0].x - 20 - (canvas_div.getBoundingClientRect().left + window.scrollX) + "px";
-                        }
-                    }
-                }
-                offsetleftold = 0;
-            }
-        }
-
-        function rearrangeMe() {
-            var result = blocks.map(a => 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(id => id.parent == result[z]).length; w++) {
-                    var children = blocks.filter(id => id.parent == result[z])[w];
-                    if (blocks.filter(id => id.parent == children.id).length == 0) {
-                        children.childwidth = 0;
-                    }
-                    if (children.childwidth > children.width) {
-                        if (w == blocks.filter(id => id.parent == result[z]).length - 1) {
-                            totalwidth += children.childwidth;
-                        } else {
-                            totalwidth += children.childwidth + paddingx;
-                        }
-                    } else {
-                        if (w == blocks.filter(id => id.parent == result[z]).length - 1) {
-                            totalwidth += children.width;
-                        } else {
-                            totalwidth += children.width + paddingx;
-                        }
-                    }
-                }
-                if (result[z] != -1) {
-                    blocks.filter(a => a.id == result[z])[0].childwidth = totalwidth;
-                }
-                for (var w = 0; w < blocks.filter(id => id.parent == result[z]).length; w++) {
-                    var children = blocks.filter(id => id.parent == result[z])[w];
-                    const r_block = document.querySelector(".blockid[value='" + children.id + "']").parentNode;
-                    const r_array = blocks.filter(id => 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.scrollX) + "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.scrollX) + "px";
-                        children.x = r_array[0].x - (totalwidth / 2) + totalremove + (children.width / 2);
-                        totalremove += children.width + paddingx;
-                    }
-                    var arrowhelp = blocks.filter(a => a.id == children.id)[0];
-                    var arrowx = arrowhelp.x - blocks.filter(a => a.id == children.parent)[0].x + 20;
-                    var arrowy = arrowhelp.y - (arrowhelp.height / 2) - (blocks.filter(a => a.id == children.parent)[0].y + (blocks.filter(a => a.id == children.parent)[0].height / 2));
-                    document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.style.top = blocks.filter(id => id.id == children.parent)[0].y + (blocks.filter(id => id.id == children.parent)[0].height / 2) - (canvas_div.getBoundingClientRect().top + window.scrollY) + "px";
-                    if (arrowx < 0) {
-                        document.querySelector('.arrowid[value="' + children.id + '"]').parentNode.style.left = (arrowhelp.x - 5) - (canvas_div.getBoundingClientRect().left + window.scrollX) + "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(id => id.id == children.parent)[0].x - arrowhelp.x + 5) + ' 0L' + (blocks.filter(id => 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(id => id.id == children.parent)[0].x - 20 - (canvas_div.getBoundingClientRect().left + window.scrollX) + "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.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);
-        }
-    }
-}