@dualbox/editor 1.0.74 → 1.0.76

package/js/dist/GraphEditor.min.js

@@ -18063,6 +18063,10 @@ class History {
         this._holdSaving = b;
     }
 
+    isHoldingSave() {
+        return this._holdSaving;
+    }
+
     // execute the callback and save the history as 1 change
     batch(cb) {
         let ret = this.ignore(cb);
@@ -43753,6 +43757,53 @@ class GraphModel {
         return json;
     }
 
+    // ctrl+v
+    paste(json) {
+        var currentMetanode = this.getCurrentMetanode();
+
+        this.batch(() => {
+            // paste metanodes
+            lodash.each(json.metamodules, (mmDef, mmName) => {
+                var metamodule = lodash.get(currentMetanode, ["metanodes", mmName]);
+                if (metamodule === undefined) {
+                    lodash.set(currentMetanode, ["metanodes", mmName], mmDef);
+                }
+            });
+
+            // paste inputs
+            lodash.each(json.input, (inputDef, inputName) => {
+                var input = lodash.get(currentMetanode, ["input", inputName]);
+                if (input === undefined) {
+                    lodash.set(currentMetanode, ["input", inputName], inputDef);
+                }
+            });
+
+            // paste outputs
+            lodash.each(json.output, (outputDef, outputName) => {
+                var output = lodash.get(currentMetanode, ["output", outputName]);
+                if (output === undefined) {
+                    lodash.set(currentMetanode, ["output", outputName], outputDef);
+                }
+            });
+
+            // paste modules
+            lodash.each(json.modules, (moduleDef, moduleName) => {
+                var node = lodash.get(currentMetanode, ["modules", moduleName]);
+                if (node === undefined) {
+                    lodash.set(currentMetanode, ["modules", moduleName], moduleDef);
+                }
+            });
+
+            // paste uis
+            lodash.each(json.ui, (uiDef, uiName) => {
+                var ui = lodash.get(currentMetanode, ["ui", uiName]);
+                if (ui === undefined) {
+                    lodash.set(currentMetanode, ["ui", uiName], uiDef);
+                }
+            });
+        });
+    }
+
     /**
      *   Json security methods
      */
@@ -44138,12 +44189,12 @@ class GraphNode {
                 this.graphId = id.substring(4);
                 this.def = this.app.output[this.graphId];
             } else if (this.app.modules && this.app.modules[id]) {
-                this.graphId = id;
                 this.type = "module";
+                this.graphId = id;
                 this.def = this.app.modules[this.graphId];
             } else if (this.app.ui && this.app.ui[id]) {
-                this.graphId = id;
                 this.type = "ui";
+                this.graphId = id;
                 this.def = this.app.ui[this.graphId];
             } else {
                 throw "Cant find node " + id;
@@ -45285,10 +45336,14 @@ class GraphNode {
 
     // remove from current app
     remove() {
-        this.m.history.holdSaving(true);
-        this.removeFrom(this.app);
-        this.m.history.holdSaving(false);
-        this.m.save();
+        if (this.m.history.isHoldingSave()) {
+            this.removeFrom(this.app);
+        } else {
+            this.m.history.holdSaving(true);
+            this.removeFrom(this.app);
+            this.m.history.holdSaving(false);
+            this.m.save();
+        }
     }
 
     rename(newId) {
@@ -48499,8 +48554,17 @@ var script$1 = {
                 else if((e.which == 89 || e.keyCode == 89) && e.ctrlKey) { // ctrl + y
                     self.view.c.redo();
                 }
-                else if((e.which == 46 || e.keyCode == 46)) {
-                    // suppr: delete selection
+                else if((e.which == 46 || e.keyCode == 46)) { // suppr
+                    self.view.c.deleteSelection();
+                }
+                else if((e.which == 67 || e.keyCode == 67) && e.ctrlKey) { // ctrl + c
+                    self.view.c.copySelection();
+                }
+                else if((e.which == 86 || e.keyCode == 86) && e.ctrlKey) { // ctrl + v
+                    self.view.c.pasteSelection();
+                }
+                else if((e.which == 88 || e.keyCode == 88) && e.ctrlKey) { // ctrl + x
+                    self.view.c.copySelection();
                     self.view.c.deleteSelection();
                 }
             }
@@ -48626,6 +48690,14 @@ var script$1 = {
             this.view.c.deleteSelection();
         },
 
+        copySelection() {
+            this.view.c.copySelection();
+        },
+
+        pasteSelection() {
+            this.view.c.pasteSelection();
+        },
+
         getCurrentMousePosition(e) {
             var x = e.pageX - $(this.$el).find('#dualbox-graph-canvas').offset().left;
             var y = e.pageY - $(this.$el).find('#dualbox-graph-canvas').offset().top;
@@ -48668,7 +48740,7 @@ var script$1 = {
 
             // show selected nodes
             this.selector.onSelecting((divs) => {
-                $(this.view.canvas).find('.card').removeClass('selected');
+                $(this.canvas).find('.card').removeClass('selected');
                 lodash.each(divs, (div) => {
                     $(div).addClass('selected');
                 });
@@ -48956,7 +49028,7 @@ var script$1 = {
                 id: id,
                 class: "connection-control capture-left-click capture-right-click"
             });
-            $(this.view.canvas).append(div);
+            $(this.canvas).append(div);
 
             // position it at pos (adjust for the height of the div)
             var jsPlumbElement = this.jsPlumbInstance.getElement(id);
@@ -49241,6 +49313,24 @@ var __vue_render__$1 = function() {
               return null
             }
             return _vm.deleteSelection()
+          },
+          function($event) {
+            if (!$event.type.indexOf("key") && $event.keyCode !== 67) {
+              return null
+            }
+            if (!$event.ctrlKey) {
+              return null
+            }
+            return _vm.copySelection()
+          },
+          function($event) {
+            if (!$event.type.indexOf("key") && $event.keyCode !== 86) {
+              return null
+            }
+            if (!$event.ctrlKey) {
+              return null
+            }
+            return _vm.pasteSelection()
           }
         ]
       }
@@ -49390,7 +49480,7 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-82f3e0bc_0", { source: "\n.dualbox-graph-container {\n    padding: 0px 0px 30px 0px;\n    margin-left: -25px;\n    margin-right: -25px;\n    height: 100%;\n    width: calc(100% + 50px);\n    overflow: hidden;\n    transform: translateZ(0); /* chrome hack to avoid glitches */\n}\n.dualbox-graph-container.translating {\n    cursor: move;\n}\n.dualbox-graph-container span {\n    pointer-events: none;\n}\n.dualbox-graph-container:focus {\n    outline: none;\n}\n.dualbox-graph-canvas {\n    height: 100%;\n    width: 100%;\n    background-color: #eee;\n    position: relative;\n    outline-color: transparent!important;\n    min-height: 100%;\n    min-width: 100%;\n    border-radius: 5px;\n    background-color: #ECF2F8;\n    border: 1px solid #2e6da4;\n    display: inline-block; /* fix padding pb: https://stackoverflow.com/questions/10054870/when-a-child-element-overflows-horizontally-why-is-the-right-padding-of-the-par */\n    margin-bottom: -7px;\n}\n\n/* ex-plumb.css */\n.dualbox-graph-canvas .marker-color-tag {\n    height: 8px;\n    margin: 0 3px 3px 0;\n    padding: 0;\n    width: 42px;\n    line-height: 75pt;\n    border-radius: 3px;\n    display: block;\n    width: 100%;\n}\n.dualbox-graph-canvas .jtk-connector {\n    z-index: 4;\n}\n.dualbox-graph-canvas .jtk-endpoint {\n    z-index: 30;\n}\n.dualbox-graph-canvas .inoutEndpointLabel, .endpointSourceLabel {\n    box-shadow: 1px 1px 1px #716f6f;\n    -o-box-shadow: 1px 1px 1px #716f6f;\n    -webkit-box-shadow: 0px 1px 1px #716f6f;\n    -moz-box-shadow: 1px 1px 1px #716f6f;\n    z-index: 2000;\n    transform:translate(0%,0%) !important; /* this shit is just to prevent jsplumb of centering the box on the endpoint... */\n}\n.dualbox-graph-canvas .descSpan {\n    box-shadow: 1px 1px 1px #716f6f;\n    -o-box-shadow: 1px 1px 1px #716f6f;\n    -webkit-box-shadow: 0px 1px 1px #716f6f;\n    -moz-box-shadow: 1px 1px 1px #716f6f;\n    position: fixed;\n    display:none;\n    z-index:2010;\n}\n.dualbox-graph-canvas .aLabel {\n    background-color: white;\n    padding: 0.4em;\n    font: 12px sans-serif;\n    color: #444;\n    z-index: 21;\n    border: 1px dotted gray;\n    opacity: 0.8;\n    cursor: pointer;\n}\n.dualbox-graph-canvas .aLabel.jtk-hover {\n    background-color: #5C96BC;\n    color: white;\n    border: 1px solid white;\n}\n.card.jtk-connected {\n    /*border: 1px solid #a1a1a1; change border when connected to spot isolated elements as disabled*/\n}\n.jtk-drag {\n    opacity:0.7 !important;\n}\npath, .jtk-endpoint {\n    cursor: pointer;\n}\n.jtk-overlay {\n    background-color:transparent;\n}\n", map: {"version":3,"sources":["/home/seb/dev/dualbox/editor/js/src/v/templates/graph.vue"],"names":[],"mappings":";AACA;IACA,yBAAA;IACA,kBAAA;IACA,mBAAA;IACA,YAAA;IACA,wBAAA;IACA,gBAAA;IACA,wBAAA,EAAA,kCAAA;AACA;AAEA;IACA,YAAA;AACA;AAEA;IACA,oBAAA;AACA;AAEA;IACA,aAAA;AACA;AAEA;IACA,YAAA;IACA,WAAA;IACA,sBAAA;IACA,kBAAA;IACA,oCAAA;IACA,gBAAA;IACA,eAAA;IACA,kBAAA;IACA,yBAAA;IACA,yBAAA;IACA,qBAAA,EAAA,iJAAA;IACA,mBAAA;AACA;;AAEA,iBAAA;AACA;IACA,WAAA;IACA,mBAAA;IACA,UAAA;IACA,WAAA;IACA,iBAAA;IACA,kBAAA;IACA,cAAA;IACA,WAAA;AACA;AAEA;IACA,UAAA;AACA;AAEA;IACA,WAAA;AACA;AACA;IACA,+BAAA;IACA,kCAAA;IACA,uCAAA;IACA,oCAAA;IACA,aAAA;IACA,qCAAA,EAAA,iFAAA;AACA;AACA;IACA,+BAAA;IACA,kCAAA;IACA,uCAAA;IACA,oCAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;AACA;AAEA;IACA,uBAAA;IACA,cAAA;IACA,qBAAA;IACA,WAAA;IACA,WAAA;IACA,uBAAA;IACA,YAAA;IACA,eAAA;AACA;AAEA;IACA,yBAAA;IACA,YAAA;IACA,uBAAA;AACA;AAEA;IACA,gGAAA;AACA;AAEA;IACA,sBAAA;AACA;AAEA;IACA,eAAA;AACA;AAEA;IACA,4BAAA;AACA","file":"graph.vue","sourcesContent":["<style>\n    .dualbox-graph-container {\n        padding: 0px 0px 30px 0px;\n        margin-left: -25px;\n        margin-right: -25px;\n        height: 100%;\n        width: calc(100% + 50px);\n        overflow: hidden;\n        transform: translateZ(0); /* chrome hack to avoid glitches */\n    }\n\n    .dualbox-graph-container.translating {\n        cursor: move;\n    }\n\n    .dualbox-graph-container span {\n        pointer-events: none;\n    }\n\n    .dualbox-graph-container:focus {\n        outline: none;\n    }\n\n    .dualbox-graph-canvas {\n        height: 100%;\n        width: 100%;\n        background-color: #eee;\n        position: relative;\n        outline-color: transparent!important;\n        min-height: 100%;\n        min-width: 100%;\n        border-radius: 5px;\n        background-color: #ECF2F8;\n        border: 1px solid #2e6da4;\n        display: inline-block; /* fix padding pb: https://stackoverflow.com/questions/10054870/when-a-child-element-overflows-horizontally-why-is-the-right-padding-of-the-par */\n        margin-bottom: -7px;\n    }\n\n    /* ex-plumb.css */\n    .dualbox-graph-canvas .marker-color-tag {\n        height: 8px;\n        margin: 0 3px 3px 0;\n        padding: 0;\n        width: 42px;\n        line-height: 75pt;\n        border-radius: 3px;\n        display: block;\n        width: 100%;\n    }\n\n    .dualbox-graph-canvas .jtk-connector {\n        z-index: 4;\n    }\n\n    .dualbox-graph-canvas .jtk-endpoint {\n        z-index: 30;\n    }\n    .dualbox-graph-canvas .inoutEndpointLabel, .endpointSourceLabel {\n        box-shadow: 1px 1px 1px #716f6f;\n        -o-box-shadow: 1px 1px 1px #716f6f;\n        -webkit-box-shadow: 0px 1px 1px #716f6f;\n        -moz-box-shadow: 1px 1px 1px #716f6f;\n        z-index: 2000;\n        transform:translate(0%,0%) !important; /* this shit is just to prevent jsplumb of centering the box on the endpoint... */\n    }\n    .dualbox-graph-canvas .descSpan {\n        box-shadow: 1px 1px 1px #716f6f;\n        -o-box-shadow: 1px 1px 1px #716f6f;\n        -webkit-box-shadow: 0px 1px 1px #716f6f;\n        -moz-box-shadow: 1px 1px 1px #716f6f;\n        position: fixed;\n        display:none;\n        z-index:2010;\n    }\n\n    .dualbox-graph-canvas .aLabel {\n        background-color: white;\n        padding: 0.4em;\n        font: 12px sans-serif;\n        color: #444;\n        z-index: 21;\n        border: 1px dotted gray;\n        opacity: 0.8;\n        cursor: pointer;\n    }\n\n    .dualbox-graph-canvas .aLabel.jtk-hover {\n        background-color: #5C96BC;\n        color: white;\n        border: 1px solid white;\n    }\n\n    .card.jtk-connected {\n        /*border: 1px solid #a1a1a1; change border when connected to spot isolated elements as disabled*/\n    }\n\n    .jtk-drag {\n        opacity:0.7 !important;\n    }\n\n    path, .jtk-endpoint {\n        cursor: pointer;\n    }\n\n    .jtk-overlay {\n        background-color:transparent;\n    }\n</style>\n\n<template>\n    <div class=\"grid-bg dualbox-graph-container dark\" @keyup.ctrl.89=\"redo()\" @keyup.ctrl.90=\"undo()\" @keyup.ctrl.46=\"deleteSelection()\" tabindex=1>\n        <div id=\"dualbox-graph-canvas\" class=\"canvas-wide jtk-surface jtk-surface-nopan contextmenu dualbox-graph-canvas\">\n            <graph-node v-for=\"(def, id) in app.input\" :key=\"getNodeUniqId(id, 'input')\" :id=\"getNodeId(id, 'input')\" :pkg=\"getNode(id, 'input').getPackage()\" :n=\"getNode(id, 'input')\" :ref=\"getNodeId(id, 'input')\"></graph-node>\n            <graph-node v-for=\"(def, id) in app.output\" :key=\"getNodeUniqId(id, 'output')\" :id=\"getNodeId(id, 'output')\" :pkg=\"getNode(id, 'output').getPackage()\" :n=\"getNode(id, 'output')\" :ref=\"getNodeId(id, 'output')\"></graph-node>\n            <graph-node v-for=\"(def, id) in app.modules\" :key=\"getNodeUniqId(id, 'module')\" :id=\"getNodeId(id, 'module')\" :pkg=\"getNode(id, 'module').getPackage()\" :n=\"getNode(id, 'module')\" :ref=\"getNodeId(id, 'module')\"></graph-node>\n            <graph-node v-for=\"(def, id) in app.ui\" :key=\"getNodeUniqId(id, 'ui')\" :id=\"getNodeId(id, 'ui')\" :pkg=\"getNode(id, 'ui').getPackage()\" :n=\"getNode(id, 'ui')\" :ref=\"getNodeId(id, 'ui')\" :displayEvents=\"displayEvents\"></graph-node>\n        </div>\n        <button class=\"btn btn-editor-xs btn-outline-dark btn-graph-goto btn-goto-topleft\" style=\"position: absolute; top: 0; left: 0px; border-radius: 0px; border-top-left-radius: 5px; margin: 0;\" v-on:click=\"gotoTopLeft\"><i class=\"fa fa-arrows-alt\"></i></button>\n        <button class=\"btn btn-editor-xs btn-outline-dark btn-graph-goto btn-goto-topright\" style=\"position: absolute; top: 0; right: 0px; border-radius: 0px; border-top-right-radius: 5px; margin: 0;\" v-on:click=\"gotoTopRight\"><i class=\"fa fa-arrows-alt\"></i></button>\n        <button class=\"btn btn-editor-xs btn-outline-dark btn-graph-goto btn-goto-bottomleft\" style=\"position: absolute; bottom: 30px; left: 0px; border-radius: 0px; border-bottom-left-radius: 5px; margin: 0;\" v-on:click=\"gotoBottomLeft\"><i class=\"fa fa-arrows-alt\"></i></button>\n        <button class=\"btn btn-editor-xs btn-outline-dark btn-graph-goto btn-goto-bottomright\" style=\"position: absolute; bottom: 30px; right: 0px; border-radius: 0px; border-bottom-right-radius: 5px; margin: 0;\" v-on:click=\"gotoBottomRight\"><i class=\"fa fa-arrows-alt\"></i></button>\n    </div>\n</template>\n\n<script>\n// Utils\nimport _ from 'lodash-es';\nimport dbutils from '../../m/DualboxUtils';\nimport Utils from '../Utils';\nimport swal from 'sweetalert2';\n\n// Sub-components\nimport graphNodeVue from './graphNode.vue';\n\n// Canvas control helpers\nimport Zoomer from '../Zoomer';\nimport Selector from '../Selector';\nimport Translater from '../Translater';\nimport CanvasSizeHandler from '../CanvasSizeHandler';\nimport ContextMenu from '../ContextMenu';\n\n// jsplumb style definitins\nimport PlumbStyle from '../PlumbStyle';\n\nexport default {\n    props: [\n        \"app\",     // the app model\n        \"displayEvents\" // display events or not\n    ],\n    components: {\n        'graph-node' : graphNodeVue,\n    },\n    data: function () {\n        return {\n            utils: Utils,\n            loading: false,\n        }\n    },\n    created: function() {\n        this.view = window.dualboxEditor.v;\n        this.jsPlumbInstance = null;\n\n        // Controls helpers utilities\n        this.selector = null;\n        this.translater = null;\n        this.zoomer = null;\n        this.canvasSizeHandler = null;\n\n        // encapsulate the JSPlumb styles\n        this.style = new PlumbStyle(this);\n    },\n    mounted: async function() {\n        this.jsPlumbInstance = jsPlumb.getInstance({\n            DragOptions: { cursor: 'pointer', zIndex: 2500 }, // default drag options\n            Container: \"dualbox-graph-canvas\"\n        });\n        this.jsPlumbInstance.rand = dbutils.randomString(8);\n        this.style.setDefault();\n        this.graphContainer = $(this.$el);\n        this.canvas = $(this.$el).find('.dualbox-graph-canvas');\n\n        // TODO: remove theses definitions from the graphview object (bugs when entering metanode)\n        this.view.selector = this.selector = new Selector(this, this.graphContainer);\n        this.view.translater = this.translater = new Translater(this, this.graphContainer, this.canvas);\n        this.view.zoomer = this.zoomer = new Zoomer(this, this.graphContainer, this.canvas);\n        this.view.canvasSizeHandler = this.canvasSizeHandler = new CanvasSizeHandler(this, this.canvas);\n        this.assignContextMenu();\n\n        // autofocus editor when the div is clicked (allow to use keydown)\n        // We use this way because it's easier than to set a tabindex on the dualbox-graph-container\n        // to capture keyboard events (will break modals)\n        var self = this;\n        this.keyDownHandler = function(e) {\n            // Ensure event is not null\n            e = e || window.event;\n\n            if( $(self.$el).is(\":hover\") ) {\n                if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) { // ctrl + z\n                    self.view.c.undo();\n                }\n                else if((e.which == 89 || e.keyCode == 89) && e.ctrlKey) { // ctrl + y\n                    self.view.c.redo();\n                }\n                else if((e.which == 46 || e.keyCode == 46)) {\n                    // suppr: delete selection\n                    self.view.c.deleteSelection();\n                }\n            }\n        }\n\n        $(document).on(\"keydown\", this.keyDownHandler);\n        return await this.initializeListeners();\n    },\n    destroyed: function() {\n        $(document).off(\"keydown\", this.keyDownHandler);\n    },\n    beforeUpdate: async function() {\n        // Reset the JSPlumb instance\n        this.resetJsPlumb();\n        this.refreshBoxes();\n    },\n    updated: async function() {\n        // don't do anything for out-of-date updates (hash is not matching)\n        console.log('Updating graph !');\n\n        //this.canvas.empty();\n        ContextMenu.clean();\n        this.assignContextMenu();\n\n        // We need to add links and events to the nodes\n\n        // Function to gather all links from a node into the \"links\" array\n        var links = []; // array of links\n        var gatherLinks = (targetId, sourceDef) => {\n            // for nodes and uis\n            _.each(sourceDef.links, (sources, targetInput) => {\n                _.each(sources, (sourceOutput, sourceId) => {\n                    if( sourceId === \"graph\" ) {\n                        return;\n                    }\n\n                    if( sourceId === \"input\" || sourceId === \"output\" ) {\n                        sourceId = this.view.m.prefixId(sourceOutput, sourceId);\n                        sourceOutput = \"value\";\n                    }\n\n                    links.push({\n                        sourceId: sourceId,\n                        sourceOutput: sourceOutput,\n                        targetId: targetId,\n                        targetInput: targetInput\n                    });\n                });\n            });\n\n            // for inputs and outputs\n            _.each(sourceDef.link, (sourceOutput, sourceId) => {\n                if( sourceId === \"graph\" ) return;\n                if( sourceId === \"input\" || sourceId === \"output\" ) {\n                    sourceId = this.view.m.prefixId(sourceOutput, sourceId);\n                    sourceOutput = \"value\";\n                }\n\n                links.push({\n                    sourceId: sourceId,\n                    sourceOutput: sourceOutput,\n                    targetId: targetId,\n                    targetInput: \"value\"\n                });\n            });\n        }\n\n        // Function to gather all events from a node into the \"links\" array\n        var events = [];\n        var gatherEvents = (sourceId, def) => {\n            _.each(def.events, (evt) => {\n                if( evt.node ) {\n                    events.push({\n                        sourceId: sourceId,\n                        targetId: evt.node,\n                        name: evt.event\n                    });\n                }\n            });\n        }\n\n        _.each(this.app.input, (def, id) => {\n            id = this.view.m.prefixId(id, \"input\");\n            gatherLinks(id, def); // add all data links in our array\n            gatherEvents(id, def); // add all event links in our array\n        });\n        _.each(this.app.output, (def, id) => {\n            id = this.view.m.prefixId(id, \"output\");\n            gatherLinks(id, def); // add all data links in our array\n            gatherEvents(id, def); // add all event links in our array\n        });\n        _.each(this.app.modules, (def, id) =>{\n            gatherLinks(id, def); // add all data links in our array\n            gatherEvents(id, def); // add all event links in our array\n        });\n        _.each(this.app.ui,  (def, id) =>{\n            gatherLinks(id, def); // add all data links in our array\n            gatherEvents(id, def); // add all event links in our array\n        });\n\n        // Now, we gathered all links and events. Add them into jsPlumb\n        // add the links\n        _.each(links, (link) => {\n            this.addLink(link.sourceId, link.sourceOutput, link.targetId, link.targetInput);\n        });\n\n        // add the events\n        if( this.displayEvents ) {\n            _.each(events, (e) => {\n                this.addEvent(e.sourceId, e.targetId, e.name);\n            });\n        }\n\n        await this.canvasSizeHandler.resize();\n\n        // Initialize all listeners again\n        await this.initializeJsPlumbListeners();\n\n        return new Promise((resolve) => this.jsPlumbInstance.ready(resolve));\n    },\n    methods: {\n        deleteSelection() {\n            this.view.c.deleteSelection();\n        },\n\n        getCurrentMousePosition(e) {\n            var x = e.pageX - $(this.$el).find('#dualbox-graph-canvas').offset().left;\n            var y = e.pageY - $(this.$el).find('#dualbox-graph-canvas').offset().top;\n            x = x / this.zoomer.getZoom();\n            y = y / this.zoomer.getZoom();\n            return {\n                \"top\": y,\n                \"left\": x\n            };\n        },\n\n        resetJsPlumb : function() {\n            if( this.jsPlumbInstance ) {\n                this.jsPlumbInstance.reset();\n                delete this.jsPlumbInstance.initializedNodes;\n            }\n\n            window.jsPlumbInstance = this.jsPlumbInstance = jsPlumb.getInstance({\n                DragOptions: { cursor: 'pointer', zIndex: 2500 }, // default drag options\n                Container: \"dualbox-graph-canvas\"\n            });\n\n            this.jsPlumbInstance.rand = dbutils.randomString(8); // just change the node refs to avoid vue.js optimizations\n            this.style.setDefault();\n        },\n\n        refreshBoxes: function() {\n            _.each(this.$refs, (component, name) => {\n                var c = component[0];\n                if(c) c.$forceUpdate();\n            })\n        },\n\n        // bind jsPlumb events\n        initializeListeners: async function() {\n            this.selector.initialize();\n            this.zoomer.initialize();\n            ContextMenu.initialize(); // important to make this after the translater (right-clic conflicts)\n            this.translater.initialize();\n\n            // show selected nodes\n            this.selector.onSelecting((divs) => {\n                $(this.view.canvas).find('.card').removeClass('selected');\n                _.each(divs, (div) => {\n                    $(div).addClass('selected');\n                });\n            });\n\n            // Add every node in the selected area to JsPlumb selection\n            this.selector.onSelect((divs) => {\n                _.each(divs, (div) => {\n                    $(div).addClass('selected');\n                    this.jsPlumbInstance.addToDragSelection($(div)[0]);\n                });\n            });\n\n            // remove the selection\n            this.selector.onDeselect((divs) => {\n                _.each(divs, (div) => {\n                    $(div).removeClass('selected');\n                    this.jsPlumbInstance.removeFromDragSelection($(div)[0]);\n                });\n            });\n\n            return await this.initializeJsPlumbListeners();\n        },\n\n        initializeJsPlumbListeners: function() {\n            this.refreshGraphNode = function(id) {\n                var nodeVue = this.$refs[id];\n                if( nodeVue[0] ) nodeVue[0].$forceUpdate();\n            }\n\n            this.jsPlumbInstance.bind(\"connectionDrag\", (connection) => {\n                // hide the type of the source (output endpoint)\n                var endpoints = connection.getAttachedElements();\n                if( endpoints && endpoints[0] ) this.style.hideType(endpoints[0]);\n\n                // if the connection linked a source to a target, remove the connection\n                var c = connection.getParameters();\n                if( c.target ) {\n                    if( c.type === \"data\" ) {\n                        // remove the link\n                        this.view.m.removeDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n                    }\n                    else if( c.type === \"event\" ) {\n                        this.view.m.removeEventLink(c.source.id, c.target.id, c.event);\n                        this.view.setBoxMenu(c.source.id);\n                    }\n                }\n            });\n\n            this.jsPlumbInstance.bind(\"connectionDragStop\", (connection) => {\n                // if the connection has not been made, show back the type of the source\n                var endpoints = connection.getAttachedElements();\n                if( endpoints && endpoints.length == 2 ) {\n                    var sourceEP = endpoints[0];\n                    var targetEP = endpoints[1];\n                    if( targetEP && targetEP.elementId.startsWith('jsPlumb')) {\n                        if( targetEP.elementId.startsWith('jsPlumb') ) {\n                            // no connection has been made, show back our output type\n                            var sourceOutput = connection.getParameters().source.output;\n                            if( !this.view.m.getNode(sourceEP.elementId).isOutputConnected(sourceOutput) ) {\n                                this.style.showType(sourceEP);\n                            }\n                        }\n                    }\n                }\n            });\n\n            this.jsPlumbInstance.bind(\"connection\", (info, event) => {\n                // only do this for connection established by user, no programmatically\n                if( event ) {\n                    var c = info.connection.getParameters();\n                    if( c.type === \"data\" ) {\n                        // check the types\n                        var sourceType = this.view.m.getNode(c.source.id).getOutputType(c.source.output);\n                        var targetType = this.view.m.getNode(c.target.id).getInputType(c.target.input);\n                        if( this.view.m.compareTypes(sourceType, targetType) ) {\n                            this.view.m.addDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n\n                            // the target need to be refreshed\n                            this.refreshGraphNode(c.target.id);\n\n                            // hide source and target types\n                            this.style.hideType(info.sourceEndpoint);\n                            this.style.hideType(info.targetEndpoint);\n                        }\n                        else {\n                            // Error\n                            this.jsPlumbInstance.deleteConnection(info.connection, {\n                                fireEvent: false, //fire a connection detached event?\n                                forceDetach: false //override any beforeDetach listeners\n                            });\n                            this.style.showType(info.targetEndpoint);\n                            if( !this.view.m.getNode(info.sourceId).isOutputConnected(c.source.output) ) {\n                                this.style.showType(info.sourceEndpoint);\n                            }\n\n                            swal({\n                                title: \"Nope.\",\n                                html: \"<div style='text-align: left;'>Output <b style='font-weight: bold;'>\" + c.source.output + \"</b> of <b style='font-weight: bold;'>\" + info.sourceId + \"</b> is of type <u>\" + Utils.htmlentities(sourceType) + \"</u><br/>Input <b style='font-weight: bold;'>\" + c.target.input + \"</b> of <b style='font-weight: bold;'>\" + info.targetId  + \"</b> is of type <u>\" + Utils.htmlentities(targetType) + \"</u>.</div><br/>Type mismatch.\",\n                                type: \"error\",\n                            });\n                        }\n                    }\n                    else if( c.type === \"event\" ) {\n                        var target = this.view.m.getNode(c.target.id);\n                        var eventNames = target.getEventsNames();\n                        var options = {};\n                        _.each(eventNames, (name) => options[name] = name );\n\n                        swal({\n                            input: 'select',\n                            title: 'Select an event',\n                            inputOptions: options\n                        }).then( (result) => {\n                            if( result.value ) {\n                                info.connection.setParameter('event', result.value);\n                                info.connection.setLabel({ label: result.value, cssClass: \"connection-label noselect\", location: 0.5 });\n                                this.view.m.addEventLink(c.source.id, c.target.id, result.value);\n\n                                this.view.setBoxMenu(c.source.id);\n                            }\n                        });\n                    }\n                }\n            });\n\n            this.jsPlumbInstance.bind(\"connectionDetached\", (info, event) => {\n                var c = info.connection.getParameters();\n                if( c.type === \"data\" ) {\n                    // remove the link\n                    this.view.m.removeDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n\n                    // show source and target type\n                    this.style.showType(info.targetEndpoint);\n                    if( !info.source.id.startsWith('connection-split') &&\n                        !this.view.m.getNode(info.source.id).isOutputConnected(c.source.output) ) {\n                        this.style.showType(info.sourceEndpoint);\n                    }\n\n                    // the target need to be refreshed\n                    this.refreshGraphNode(c.target.id);\n                }\n                else if( c.type === \"event\" ) {\n                    this.view.m.removeEventLink(c.source.id, c.target.id, c.event);\n                    //this.style.showEventName(info.targetEndpoint);\n                }\n\n                // if the connection is splitted, remove all other connections/endpoint\n                if( c.splitted ) {\n                    var connections = this.jsPlumbInstance.getAllConnections();\n                    var connToDelete = [];\n                    var EPToDelete = {};\n                    _.each(connections, conn => {\n                        var p = conn.getParameters();\n                        if( p.source.id === c.source.id &&\n                            p.target.id === c.target.id &&\n                            ((c.type == \"event\"  && p.event === c.event) ||\n                            (c.type == \"data\" && p.source.sourceOutput == c.source.sourceOutput &&\n                            p.target.targetInput === p.target.targetInput))) {\n                            // collect the connection and the endpoints to delete\n                            connToDelete.push(conn);\n\n                            let [sourceEP, targetEP] = conn.getAttachedElements();\n                            if( sourceEP.getUuid().startsWith('connection-split-') ) {\n                                EPToDelete[ sourceEP.getUuid() ] = sourceEP;\n                            }\n                            if( targetEP.getUuid().startsWith('connection-split-') ) {\n                                EPToDelete[ targetEP.getUuid() ] = targetEP;\n                            }\n                        }\n                    });\n\n                    // clean all theses connections and endpoints once this call is ended\n                    _.each(connToDelete, conn => {\n                        _.defer(()=> {\n                            this.jsPlumbInstance.deleteConnection(conn, {\n                                fireEvent: false, //fire a connection detached event?\n                                forceDetach: false //override any beforeDetach listeners\n                            });\n                        });\n                    });\n\n                    _.each(EPToDelete, (endpoint, uuid) => {\n                        _.defer(()=> {\n                            var div = endpoint.getElement();\n                            this.jsPlumbInstance.deleteEndpoint(endpoint);\n                            $(div).remove();\n                        });\n                    });\n                }\n            });\n\n            this.jsPlumbInstance.bind(\"dblclick\", async (connection, e) => {\n                let [sourceEP, targetEP] = connection.getAttachedElements();\n                let c = connection.getParameters();\n\n                // split this connection into 2 by creating an endpoint at the event coordinate\n                // remove 7px to align it to the center\n                var pos = {\n                    \"top\" : e.pageY - $(this.canvas).offset().top -7,\n                    \"left\": e.pageX - $(this.canvas).offset().left - 7\n                };\n                this.splitConnection(connection, pos); // return the endpoint exact position\n\n                // save to the graph\n                if( c.type == \"data\" ) {\n                    var link = this.m.getDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n                }\n                else {\n                    var link = this.m.getEventLink(c.source.id, c.target.id, c.event);\n                }\n\n                if( sourceEP.getUuid().startsWith('connection-split-') ) {\n                    var el = sourceEP.getElement();\n                    var prevPos = this.jsPlumbInstance.getPosition(el);\n                    link.addPathStep(prevPos, pos);\n                }\n                else {\n                    link.addPathStep( \"source\", pos );\n                }\n            });\n\n            return new Promise(resolve => this.jsPlumbInstance.ready(resolve));\n        },\n\n        addLink: function(sourceId, sourceOutput, targetId, targetInput) {\n            var sourceUuid = [sourceId, \"output\", sourceOutput].join('#');\n            var targetUuid = [targetId, \"input\", targetInput].join('#');\n\n            // hide source and target types\n            this.style.hideType(sourceUuid); // works with endpoint or uuid\n            this.style.hideType(targetUuid);\n\n            var connection = this.jsPlumbInstance.connect({\n                uuids: [sourceUuid, targetUuid],\n                editable: true,\n                paintStyle: this.style.connectorData.paintStyle,\n                cssClass: 'data-connection',\n                connectorClass: 'data-connection'\n            });\n\n            // split the connection if we need to\n            var datalink = this.view.m.getDataLink(sourceId, sourceOutput, targetId, targetInput);\n            var path = datalink.getPath();\n            _.each( path, (pos) => {\n                var r = this.splitConnection(connection, pos);\n                connection = r.c2; // switch to the 2nd child connection\n            });\n        },\n\n        addEvent: function(sourceId, targetId, name) {\n            var sourceUuid = [sourceId, \"event-out\"].join('#');\n            var sourceEP = this.jsPlumbInstance.getEndpoint(sourceUuid);\n\n            var connection = this.jsPlumbInstance.connect({\n                source: sourceEP,\n                target: targetId,\n                editable: true,\n                paintStyle: this.style.connectorData.paintStyle,\n                cssClass: 'event-connection',\n                connectorClass: 'event-connection',\n                overlays: [\n                    [ \"PlainArrow\", { location: 1,  width:10, length:10, gap: 12 }],\n                    [ \"Label\", { label: name, location:0.50, labelStyle: { cssClass: \"connection-label noselect\" } } ]\n                ]\n            });\n            connection.setParameter(\"event\", name);\n\n            // split the connection if we need to\n            var eventlink = this.view.m.getEventLink(sourceId, targetId, name);\n            var path = eventlink.getPath();\n            _.each( path, (pos) => {\n                var r = this.splitConnection(connection, pos);\n                connection = r.c2; // switch to the 2nd child connection\n            });\n        },\n\n        // split a connection by adding an endpoint at given pos\n        splitConnection: function( connection, pos ) {\n            var c = connection.getParameters();\n\n            // create the endpoint div\n            var id = \"connection-split-\" + dbutils.randomString(8);\n            var div = $('<div/>', {\n                id: id,\n                class: \"connection-control capture-left-click capture-right-click\"\n            });\n            $(this.view.canvas).append(div);\n\n            // position it at pos (adjust for the height of the div)\n            var jsPlumbElement = this.jsPlumbInstance.getElement(id);\n            this.jsPlumbInstance.setPosition(jsPlumbElement, pos);\n\n            // make this div draggable\n            var startPosition = pos;\n            this.jsPlumbInstance.draggable(div, {\n                start: (e) => {\n                    startPosition = this.jsPlumbInstance.getPosition(jsPlumbElement);\n                },\n                stop: (e) => {\n                    var stopPosition = this.jsPlumbInstance.getPosition(jsPlumbElement);\n                    if( c.type == \"data\" ) {\n                        var link = this.view.m.getDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n                    }\n                    else if( c.type == \"event\" ) {\n                        var link = this.view.m.getEventLink(c.source.id, c.target.id, c.event);\n                    }\n                    link.updatePathStep(startPosition, stopPosition);\n                }\n            });\n\n            // determine the style of the 2 connections\n            c.splitted = true; // indicates that this connection is splitted\n            if( c.type == \"data\" ) {\n                var connectionStyle = {\n                    paintStyle: this.style.splittedConnectorData.paintStyle,\n                    connector: this.style.splittedConnectorData.connector,\n                    connectorOverlays:this.style.splittedConnectorData.overlays,\n                    connectorStyle: this.style.splittedConnectorData.paintStyle,\n                    hoverPaintStyle: this.style.endpointData.hoverStyle,\n                    cssClass : 'data-connection'\n                }\n                var epStyle = this.style.dataLineSplitterEndpoint;\n            }\n            else if( c.type == \"event\" ) {\n                var connectionStyle = {\n                    paintStyle: this.style.eventConnectorData.paintStyle,\n                    connector: this.style.eventConnectorData.connector,\n                    connectorOverlays:this.style.eventConnectorData.overlays,\n                    connectorStyle: this.style.eventConnectorData.paintStyle,\n                    hoverPaintStyle: this.style.eventEndpointData.hoverStyle,\n                    cssClass : 'event-connection',\n                };\n                var epStyle = this.style.eventLineSplitterEndpoint;\n            }\n\n            // create the div endpoint\n            var ep = this.jsPlumbInstance.addEndpoint(id,  {\n                isSource : false,\n                isTarget : false,\n                uuid     : id,\n                anchor   : \"Center\",\n                maxConnections : 2,\n                parameters : c\n            }, epStyle);\n\n            // make the ep transparent to pointer events, left click on it must drag the div\n            $(ep.canvas).css('pointer-events', 'none');\n            $(ep.canvas).css('cursor', 'move');\n            $(ep.canvas).addClass('capture-left-click');\n            $(ep.canvas).addClass('capture-right-click');\n            $(ep.canvas).find('svg').attr('pointer-events', 'none');\n            $(ep.canvas).addClass(id);\n\n\n            // save the connection overlays\n            var overlays = connection.getOverlays();\n            var overlaysParams = [];\n            _.each(overlays, (o)=> {\n                overlaysParams.push([o.type, {\n                    \"location\"  : o.loc,\n                    \"width\"     : o.width,\n                    \"length\"    : o.length,\n                    \"label\"     : o.getLabel ? o.getLabel() : undefined,\n                    \"id\"        : o.id,\n                    \"labelStyle\": o.labelStyle\n                }]);\n            });\n\n            let [sourceEP, targetEP] = connection.getAttachedElements();\n            let targetId = connection.targetId;\n\n            // detach the original connection\n            this.jsPlumbInstance.deleteConnection(connection, { fireEvent: false, forceDetach: false });\n\n            // now reattach it into 2 connections\n            var c1 = this.jsPlumbInstance.connect({\n                source: sourceEP,\n                target: ep,\n                editable: true,\n            }, connectionStyle);\n\n            var c2 = this.jsPlumbInstance.connect({\n                source: ep,\n                target: targetEP._jsPlumb ? targetEP : targetId /* EP has been destroyed, reattach to window */,\n                editable: true,\n            }, connectionStyle);\n\n            sourceEP.setParameter(\"targetConnection\", c1);\n            ep.setParameter(\"sourceConnection\", c1);\n            ep.setParameter(\"targetConnection\", c2);\n            targetEP.setParameter(\"sourceConnection\", c2);\n\n            // add the overlays to c2\n            _.each(overlaysParams, (p)=> {\n                c2.addOverlay(p);\n            });\n\n            // add menu to remove this split\n            $(ep.canvas).ready(() => {\n                var menu = new ContextMenu(\"#\" + id, [\n                    {\n                        name: 'Remove the split',\n                        fn: () => {\n                            this.unsplitConnection(ep);\n                        }\n                    },\n                ]);\n            });\n\n            return {\n                pos: pos,\n                c1 : c1,\n                c2 : c2\n            }\n        },\n\n        // Remove a split in a connection\n        // ep: entrypoint\n        // c1: connection 1\n        // c2: connection 2\n        unsplitConnection: function(ep) {\n            var c = ep.getParameters();\n            var c1 = c.sourceConnection;\n            var c2 = c.targetConnection;\n            var sourceEP = c1.getAttachedElements()[0];\n            var targetEP = c2.getAttachedElements()[1];\n\n            // detach and delete the endpoint\n            this.jsPlumbInstance.deleteConnection(c1, { fireEvent: false, forceDetach: false });\n            this.jsPlumbInstance.deleteConnection(c2, { fireEvent: false, forceDetach: false });\n            this.jsPlumbInstance.deleteEndpoint(ep);\n\n\n            // reconnect directly the source and the target\n            var connection = this.jsPlumbInstance.connect({\n                source: sourceEP,\n                target: targetEP,\n                editable: true,\n            });\n\n            sourceEP.setParameter('targetConnection', connection);\n            targetEP.setParameter('sourceConnection', connection);\n\n            // find the position of the split endpoint to remove\n            var id = c1.targetId;\n            var element = this.jsPlumbInstance.getElement(id)\n            var position = this.jsPlumbInstance.getPosition(element);\n\n            // remove the element in the path\n            // 1. find the link\n            // 2. find the position of the split endpoint\n            if( c.type == \"data\" ) {\n                var link = this.view.m.getDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n                link.removePathStep(position);\n            }\n            else if( c.type == \"event\" ) {\n                var link = this.m.getEventLink();\n                link.removePathStep(position);\n            }\n            else {\n                throw \"unknown connection type\";\n            }\n\n            // remove the div\n            $(\"#\" + id).remove(); // delete the div\n        },\n\n        getNodeId: function( id, nodeType ) {\n            switch( nodeType ) {\n            case \"input\": return this.view.m.prefixId(id, \"input\");\n            case \"output\": return this.view.m.prefixId(id, \"output\");\n            case \"module\":\n            case \"ui\":\n            default:\n                return id;\n            }\n        },\n\n        getNode( id, nodeType ) {\n            var realId = this.getNodeId(id, nodeType);\n            return this.view.m.getNode(realId);\n        },\n\n        getNodeUniqId(id, nodeType) {\n            return this.getNode(id, nodeType).getUniqId() + this.jsPlumbInstance.rand;\n        },\n\n        setLoading(b) {\n            this.loading = b;\n        },\n\n        gotoTopLeft: function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            this.translater.gotoTopLeft();\n        },\n\n        gotoTopRight: function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            this.translater.gotoTopRight();\n        },\n\n        gotoBottomLeft: function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            this.translater.gotoBottomLeft();\n        },\n\n        gotoBottomRight: function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            this.translater.gotoBottomRight();\n        },\n\n        assignContextMenu: function() {\n            // Create a contextmenu for the div\n            var contextOptions = [\n                {\n                    name: 'Add node...',\n                    fn: (target, evt) => {\n                        this.$parent.addBox(evt);\n                    }\n                }\n            ];\n            var cMenu = new ContextMenu(\"#dualbox-graph-canvas\", contextOptions);\n        },\n    }\n}\n</script>\n"]}, media: undefined });
+    inject("data-v-6d2c9492_0", { source: "\n.dualbox-graph-container {\n    padding: 0px 0px 30px 0px;\n    margin-left: -25px;\n    margin-right: -25px;\n    height: 100%;\n    width: calc(100% + 50px);\n    overflow: hidden;\n    transform: translateZ(0); /* chrome hack to avoid glitches */\n}\n.dualbox-graph-container.translating {\n    cursor: move;\n}\n.dualbox-graph-container span {\n    pointer-events: none;\n}\n.dualbox-graph-container:focus {\n    outline: none;\n}\n.dualbox-graph-canvas {\n    height: 100%;\n    width: 100%;\n    background-color: #eee;\n    position: relative;\n    outline-color: transparent!important;\n    min-height: 100%;\n    min-width: 100%;\n    border-radius: 5px;\n    background-color: #ECF2F8;\n    border: 1px solid #2e6da4;\n    display: inline-block; /* fix padding pb: https://stackoverflow.com/questions/10054870/when-a-child-element-overflows-horizontally-why-is-the-right-padding-of-the-par */\n    margin-bottom: -7px;\n}\n\n/* ex-plumb.css */\n.dualbox-graph-canvas .marker-color-tag {\n    height: 8px;\n    margin: 0 3px 3px 0;\n    padding: 0;\n    width: 42px;\n    line-height: 75pt;\n    border-radius: 3px;\n    display: block;\n    width: 100%;\n}\n.dualbox-graph-canvas .jtk-connector {\n    z-index: 4;\n}\n.dualbox-graph-canvas .jtk-endpoint {\n    z-index: 30;\n}\n.dualbox-graph-canvas .inoutEndpointLabel, .endpointSourceLabel {\n    box-shadow: 1px 1px 1px #716f6f;\n    -o-box-shadow: 1px 1px 1px #716f6f;\n    -webkit-box-shadow: 0px 1px 1px #716f6f;\n    -moz-box-shadow: 1px 1px 1px #716f6f;\n    z-index: 2000;\n    transform:translate(0%,0%) !important; /* this shit is just to prevent jsplumb of centering the box on the endpoint... */\n}\n.dualbox-graph-canvas .descSpan {\n    box-shadow: 1px 1px 1px #716f6f;\n    -o-box-shadow: 1px 1px 1px #716f6f;\n    -webkit-box-shadow: 0px 1px 1px #716f6f;\n    -moz-box-shadow: 1px 1px 1px #716f6f;\n    position: fixed;\n    display:none;\n    z-index:2010;\n}\n.dualbox-graph-canvas .aLabel {\n    background-color: white;\n    padding: 0.4em;\n    font: 12px sans-serif;\n    color: #444;\n    z-index: 21;\n    border: 1px dotted gray;\n    opacity: 0.8;\n    cursor: pointer;\n}\n.dualbox-graph-canvas .aLabel.jtk-hover {\n    background-color: #5C96BC;\n    color: white;\n    border: 1px solid white;\n}\n.card.jtk-connected {\n    /*border: 1px solid #a1a1a1; change border when connected to spot isolated elements as disabled*/\n}\n.jtk-drag {\n    opacity:0.7 !important;\n}\npath, .jtk-endpoint {\n    cursor: pointer;\n}\n.jtk-overlay {\n    background-color:transparent;\n}\n", map: {"version":3,"sources":["/home/seb/dev/dualbox/editor/js/src/v/templates/graph.vue"],"names":[],"mappings":";AACA;IACA,yBAAA;IACA,kBAAA;IACA,mBAAA;IACA,YAAA;IACA,wBAAA;IACA,gBAAA;IACA,wBAAA,EAAA,kCAAA;AACA;AAEA;IACA,YAAA;AACA;AAEA;IACA,oBAAA;AACA;AAEA;IACA,aAAA;AACA;AAEA;IACA,YAAA;IACA,WAAA;IACA,sBAAA;IACA,kBAAA;IACA,oCAAA;IACA,gBAAA;IACA,eAAA;IACA,kBAAA;IACA,yBAAA;IACA,yBAAA;IACA,qBAAA,EAAA,iJAAA;IACA,mBAAA;AACA;;AAEA,iBAAA;AACA;IACA,WAAA;IACA,mBAAA;IACA,UAAA;IACA,WAAA;IACA,iBAAA;IACA,kBAAA;IACA,cAAA;IACA,WAAA;AACA;AAEA;IACA,UAAA;AACA;AAEA;IACA,WAAA;AACA;AACA;IACA,+BAAA;IACA,kCAAA;IACA,uCAAA;IACA,oCAAA;IACA,aAAA;IACA,qCAAA,EAAA,iFAAA;AACA;AACA;IACA,+BAAA;IACA,kCAAA;IACA,uCAAA;IACA,oCAAA;IACA,eAAA;IACA,YAAA;IACA,YAAA;AACA;AAEA;IACA,uBAAA;IACA,cAAA;IACA,qBAAA;IACA,WAAA;IACA,WAAA;IACA,uBAAA;IACA,YAAA;IACA,eAAA;AACA;AAEA;IACA,yBAAA;IACA,YAAA;IACA,uBAAA;AACA;AAEA;IACA,gGAAA;AACA;AAEA;IACA,sBAAA;AACA;AAEA;IACA,eAAA;AACA;AAEA;IACA,4BAAA;AACA","file":"graph.vue","sourcesContent":["<style>\n    .dualbox-graph-container {\n        padding: 0px 0px 30px 0px;\n        margin-left: -25px;\n        margin-right: -25px;\n        height: 100%;\n        width: calc(100% + 50px);\n        overflow: hidden;\n        transform: translateZ(0); /* chrome hack to avoid glitches */\n    }\n\n    .dualbox-graph-container.translating {\n        cursor: move;\n    }\n\n    .dualbox-graph-container span {\n        pointer-events: none;\n    }\n\n    .dualbox-graph-container:focus {\n        outline: none;\n    }\n\n    .dualbox-graph-canvas {\n        height: 100%;\n        width: 100%;\n        background-color: #eee;\n        position: relative;\n        outline-color: transparent!important;\n        min-height: 100%;\n        min-width: 100%;\n        border-radius: 5px;\n        background-color: #ECF2F8;\n        border: 1px solid #2e6da4;\n        display: inline-block; /* fix padding pb: https://stackoverflow.com/questions/10054870/when-a-child-element-overflows-horizontally-why-is-the-right-padding-of-the-par */\n        margin-bottom: -7px;\n    }\n\n    /* ex-plumb.css */\n    .dualbox-graph-canvas .marker-color-tag {\n        height: 8px;\n        margin: 0 3px 3px 0;\n        padding: 0;\n        width: 42px;\n        line-height: 75pt;\n        border-radius: 3px;\n        display: block;\n        width: 100%;\n    }\n\n    .dualbox-graph-canvas .jtk-connector {\n        z-index: 4;\n    }\n\n    .dualbox-graph-canvas .jtk-endpoint {\n        z-index: 30;\n    }\n    .dualbox-graph-canvas .inoutEndpointLabel, .endpointSourceLabel {\n        box-shadow: 1px 1px 1px #716f6f;\n        -o-box-shadow: 1px 1px 1px #716f6f;\n        -webkit-box-shadow: 0px 1px 1px #716f6f;\n        -moz-box-shadow: 1px 1px 1px #716f6f;\n        z-index: 2000;\n        transform:translate(0%,0%) !important; /* this shit is just to prevent jsplumb of centering the box on the endpoint... */\n    }\n    .dualbox-graph-canvas .descSpan {\n        box-shadow: 1px 1px 1px #716f6f;\n        -o-box-shadow: 1px 1px 1px #716f6f;\n        -webkit-box-shadow: 0px 1px 1px #716f6f;\n        -moz-box-shadow: 1px 1px 1px #716f6f;\n        position: fixed;\n        display:none;\n        z-index:2010;\n    }\n\n    .dualbox-graph-canvas .aLabel {\n        background-color: white;\n        padding: 0.4em;\n        font: 12px sans-serif;\n        color: #444;\n        z-index: 21;\n        border: 1px dotted gray;\n        opacity: 0.8;\n        cursor: pointer;\n    }\n\n    .dualbox-graph-canvas .aLabel.jtk-hover {\n        background-color: #5C96BC;\n        color: white;\n        border: 1px solid white;\n    }\n\n    .card.jtk-connected {\n        /*border: 1px solid #a1a1a1; change border when connected to spot isolated elements as disabled*/\n    }\n\n    .jtk-drag {\n        opacity:0.7 !important;\n    }\n\n    path, .jtk-endpoint {\n        cursor: pointer;\n    }\n\n    .jtk-overlay {\n        background-color:transparent;\n    }\n</style>\n\n<template>\n    <div class=\"grid-bg dualbox-graph-container dark\" @keyup.ctrl.89=\"redo()\" @keyup.ctrl.90=\"undo()\" @keyup.ctrl.46=\"deleteSelection()\" @keyup.ctrl.67=\"copySelection()\" @keyup.ctrl.86=\"pasteSelection()\" tabindex=1>\n        <div id=\"dualbox-graph-canvas\" class=\"canvas-wide jtk-surface jtk-surface-nopan contextmenu dualbox-graph-canvas\">\n            <graph-node v-for=\"(def, id) in app.input\" :key=\"getNodeUniqId(id, 'input')\" :id=\"getNodeId(id, 'input')\" :pkg=\"getNode(id, 'input').getPackage()\" :n=\"getNode(id, 'input')\" :ref=\"getNodeId(id, 'input')\"></graph-node>\n            <graph-node v-for=\"(def, id) in app.output\" :key=\"getNodeUniqId(id, 'output')\" :id=\"getNodeId(id, 'output')\" :pkg=\"getNode(id, 'output').getPackage()\" :n=\"getNode(id, 'output')\" :ref=\"getNodeId(id, 'output')\"></graph-node>\n            <graph-node v-for=\"(def, id) in app.modules\" :key=\"getNodeUniqId(id, 'module')\" :id=\"getNodeId(id, 'module')\" :pkg=\"getNode(id, 'module').getPackage()\" :n=\"getNode(id, 'module')\" :ref=\"getNodeId(id, 'module')\"></graph-node>\n            <graph-node v-for=\"(def, id) in app.ui\" :key=\"getNodeUniqId(id, 'ui')\" :id=\"getNodeId(id, 'ui')\" :pkg=\"getNode(id, 'ui').getPackage()\" :n=\"getNode(id, 'ui')\" :ref=\"getNodeId(id, 'ui')\" :displayEvents=\"displayEvents\"></graph-node>\n        </div>\n        <button class=\"btn btn-editor-xs btn-outline-dark btn-graph-goto btn-goto-topleft\" style=\"position: absolute; top: 0; left: 0px; border-radius: 0px; border-top-left-radius: 5px; margin: 0;\" v-on:click=\"gotoTopLeft\"><i class=\"fa fa-arrows-alt\"></i></button>\n        <button class=\"btn btn-editor-xs btn-outline-dark btn-graph-goto btn-goto-topright\" style=\"position: absolute; top: 0; right: 0px; border-radius: 0px; border-top-right-radius: 5px; margin: 0;\" v-on:click=\"gotoTopRight\"><i class=\"fa fa-arrows-alt\"></i></button>\n        <button class=\"btn btn-editor-xs btn-outline-dark btn-graph-goto btn-goto-bottomleft\" style=\"position: absolute; bottom: 30px; left: 0px; border-radius: 0px; border-bottom-left-radius: 5px; margin: 0;\" v-on:click=\"gotoBottomLeft\"><i class=\"fa fa-arrows-alt\"></i></button>\n        <button class=\"btn btn-editor-xs btn-outline-dark btn-graph-goto btn-goto-bottomright\" style=\"position: absolute; bottom: 30px; right: 0px; border-radius: 0px; border-bottom-right-radius: 5px; margin: 0;\" v-on:click=\"gotoBottomRight\"><i class=\"fa fa-arrows-alt\"></i></button>\n    </div>\n</template>\n\n<script>\n// Utils\nimport _ from 'lodash-es';\nimport dbutils from '../../m/DualboxUtils';\nimport Utils from '../Utils';\nimport swal from 'sweetalert2';\n\n// Sub-components\nimport graphNodeVue from './graphNode.vue';\n\n// Canvas control helpers\nimport Zoomer from '../Zoomer';\nimport Selector from '../Selector';\nimport Translater from '../Translater';\nimport CanvasSizeHandler from '../CanvasSizeHandler';\nimport ContextMenu from '../ContextMenu';\n\n// jsplumb style definitins\nimport PlumbStyle from '../PlumbStyle';\n\nexport default {\n    props: [\n        \"app\",     // the app model\n        \"displayEvents\" // display events or not\n    ],\n    components: {\n        'graph-node' : graphNodeVue,\n    },\n    data: function () {\n        return {\n            utils: Utils,\n            loading: false,\n        }\n    },\n    created: function() {\n        this.view = window.dualboxEditor.v;\n        this.jsPlumbInstance = null;\n\n        // Controls helpers utilities\n        this.selector = null;\n        this.translater = null;\n        this.zoomer = null;\n        this.canvasSizeHandler = null;\n\n        // encapsulate the JSPlumb styles\n        this.style = new PlumbStyle(this);\n    },\n    mounted: async function() {\n        this.jsPlumbInstance = jsPlumb.getInstance({\n            DragOptions: { cursor: 'pointer', zIndex: 2500 }, // default drag options\n            Container: \"dualbox-graph-canvas\"\n        });\n        this.jsPlumbInstance.rand = dbutils.randomString(8);\n        this.style.setDefault();\n        this.graphContainer = $(this.$el);\n        this.canvas = $(this.$el).find('.dualbox-graph-canvas');\n\n        // TODO: remove theses definitions from the graphview object (bugs when entering metanode)\n        this.view.selector = this.selector = new Selector(this, this.graphContainer);\n        this.view.translater = this.translater = new Translater(this, this.graphContainer, this.canvas);\n        this.view.zoomer = this.zoomer = new Zoomer(this, this.graphContainer, this.canvas);\n        this.view.canvasSizeHandler = this.canvasSizeHandler = new CanvasSizeHandler(this, this.canvas);\n        this.assignContextMenu();\n\n        // autofocus editor when the div is clicked (allow to use keydown)\n        // We use this way because it's easier than to set a tabindex on the dualbox-graph-container\n        // to capture keyboard events (will break modals)\n        var self = this;\n        this.keyDownHandler = function(e) {\n            // Ensure event is not null\n            e = e || window.event;\n\n            if( $(self.$el).is(\":hover\") ) {\n                if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) { // ctrl + z\n                    self.view.c.undo();\n                }\n                else if((e.which == 89 || e.keyCode == 89) && e.ctrlKey) { // ctrl + y\n                    self.view.c.redo();\n                }\n                else if((e.which == 46 || e.keyCode == 46)) { // suppr\n                    self.view.c.deleteSelection();\n                }\n                else if((e.which == 67 || e.keyCode == 67) && e.ctrlKey) { // ctrl + c\n                    self.view.c.copySelection();\n                }\n                else if((e.which == 86 || e.keyCode == 86) && e.ctrlKey) { // ctrl + v\n                    self.view.c.pasteSelection();\n                }\n                else if((e.which == 88 || e.keyCode == 88) && e.ctrlKey) { // ctrl + x\n                    self.view.c.copySelection();\n                    self.view.c.deleteSelection();\n                }\n            }\n        }\n\n        $(document).on(\"keydown\", this.keyDownHandler);\n        return await this.initializeListeners();\n    },\n    destroyed: function() {\n        $(document).off(\"keydown\", this.keyDownHandler);\n    },\n    beforeUpdate: async function() {\n        // Reset the JSPlumb instance\n        this.resetJsPlumb();\n        this.refreshBoxes();\n    },\n    updated: async function() {\n        // don't do anything for out-of-date updates (hash is not matching)\n        console.log('Updating graph !');\n\n        //this.canvas.empty();\n        ContextMenu.clean();\n        this.assignContextMenu();\n\n        // We need to add links and events to the nodes\n\n        // Function to gather all links from a node into the \"links\" array\n        var links = []; // array of links\n        var gatherLinks = (targetId, sourceDef) => {\n            // for nodes and uis\n            _.each(sourceDef.links, (sources, targetInput) => {\n                _.each(sources, (sourceOutput, sourceId) => {\n                    if( sourceId === \"graph\" ) {\n                        return;\n                    }\n\n                    if( sourceId === \"input\" || sourceId === \"output\" ) {\n                        sourceId = this.view.m.prefixId(sourceOutput, sourceId);\n                        sourceOutput = \"value\";\n                    }\n\n                    links.push({\n                        sourceId: sourceId,\n                        sourceOutput: sourceOutput,\n                        targetId: targetId,\n                        targetInput: targetInput\n                    });\n                });\n            });\n\n            // for inputs and outputs\n            _.each(sourceDef.link, (sourceOutput, sourceId) => {\n                if( sourceId === \"graph\" ) return;\n                if( sourceId === \"input\" || sourceId === \"output\" ) {\n                    sourceId = this.view.m.prefixId(sourceOutput, sourceId);\n                    sourceOutput = \"value\";\n                }\n\n                links.push({\n                    sourceId: sourceId,\n                    sourceOutput: sourceOutput,\n                    targetId: targetId,\n                    targetInput: \"value\"\n                });\n            });\n        }\n\n        // Function to gather all events from a node into the \"links\" array\n        var events = [];\n        var gatherEvents = (sourceId, def) => {\n            _.each(def.events, (evt) => {\n                if( evt.node ) {\n                    events.push({\n                        sourceId: sourceId,\n                        targetId: evt.node,\n                        name: evt.event\n                    });\n                }\n            });\n        }\n\n        _.each(this.app.input, (def, id) => {\n            id = this.view.m.prefixId(id, \"input\");\n            gatherLinks(id, def); // add all data links in our array\n            gatherEvents(id, def); // add all event links in our array\n        });\n        _.each(this.app.output, (def, id) => {\n            id = this.view.m.prefixId(id, \"output\");\n            gatherLinks(id, def); // add all data links in our array\n            gatherEvents(id, def); // add all event links in our array\n        });\n        _.each(this.app.modules, (def, id) =>{\n            gatherLinks(id, def); // add all data links in our array\n            gatherEvents(id, def); // add all event links in our array\n        });\n        _.each(this.app.ui,  (def, id) =>{\n            gatherLinks(id, def); // add all data links in our array\n            gatherEvents(id, def); // add all event links in our array\n        });\n\n        // Now, we gathered all links and events. Add them into jsPlumb\n        // add the links\n        _.each(links, (link) => {\n            this.addLink(link.sourceId, link.sourceOutput, link.targetId, link.targetInput);\n        });\n\n        // add the events\n        if( this.displayEvents ) {\n            _.each(events, (e) => {\n                this.addEvent(e.sourceId, e.targetId, e.name);\n            });\n        }\n\n        await this.canvasSizeHandler.resize();\n\n        // Initialize all listeners again\n        await this.initializeJsPlumbListeners();\n\n        return new Promise((resolve) => this.jsPlumbInstance.ready(resolve));\n    },\n    methods: {\n        deleteSelection() {\n            this.view.c.deleteSelection();\n        },\n\n        copySelection() {\n            this.view.c.copySelection();\n        },\n\n        pasteSelection() {\n            this.view.c.pasteSelection();\n        },\n\n        getCurrentMousePosition(e) {\n            var x = e.pageX - $(this.$el).find('#dualbox-graph-canvas').offset().left;\n            var y = e.pageY - $(this.$el).find('#dualbox-graph-canvas').offset().top;\n            x = x / this.zoomer.getZoom();\n            y = y / this.zoomer.getZoom();\n            return {\n                \"top\": y,\n                \"left\": x\n            };\n        },\n\n        resetJsPlumb : function() {\n            if( this.jsPlumbInstance ) {\n                this.jsPlumbInstance.reset();\n                delete this.jsPlumbInstance.initializedNodes;\n            }\n\n            window.jsPlumbInstance = this.jsPlumbInstance = jsPlumb.getInstance({\n                DragOptions: { cursor: 'pointer', zIndex: 2500 }, // default drag options\n                Container: \"dualbox-graph-canvas\"\n            });\n\n            this.jsPlumbInstance.rand = dbutils.randomString(8); // just change the node refs to avoid vue.js optimizations\n            this.style.setDefault();\n        },\n\n        refreshBoxes: function() {\n            _.each(this.$refs, (component, name) => {\n                var c = component[0];\n                if(c) c.$forceUpdate();\n            })\n        },\n\n        // bind jsPlumb events\n        initializeListeners: async function() {\n            this.selector.initialize();\n            this.zoomer.initialize();\n            ContextMenu.initialize(); // important to make this after the translater (right-clic conflicts)\n            this.translater.initialize();\n\n            // show selected nodes\n            this.selector.onSelecting((divs) => {\n                $(this.canvas).find('.card').removeClass('selected');\n                _.each(divs, (div) => {\n                    $(div).addClass('selected');\n                });\n            });\n\n            // Add every node in the selected area to JsPlumb selection\n            this.selector.onSelect((divs) => {\n                _.each(divs, (div) => {\n                    $(div).addClass('selected');\n                    this.jsPlumbInstance.addToDragSelection($(div)[0]);\n                });\n            });\n\n            // remove the selection\n            this.selector.onDeselect((divs) => {\n                _.each(divs, (div) => {\n                    $(div).removeClass('selected');\n                    this.jsPlumbInstance.removeFromDragSelection($(div)[0]);\n                });\n            });\n\n            return await this.initializeJsPlumbListeners();\n        },\n\n        initializeJsPlumbListeners: function() {\n            this.refreshGraphNode = function(id) {\n                var nodeVue = this.$refs[id];\n                if( nodeVue[0] ) nodeVue[0].$forceUpdate();\n            }\n\n            this.jsPlumbInstance.bind(\"connectionDrag\", (connection) => {\n                // hide the type of the source (output endpoint)\n                var endpoints = connection.getAttachedElements();\n                if( endpoints && endpoints[0] ) this.style.hideType(endpoints[0]);\n\n                // if the connection linked a source to a target, remove the connection\n                var c = connection.getParameters();\n                if( c.target ) {\n                    if( c.type === \"data\" ) {\n                        // remove the link\n                        this.view.m.removeDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n                    }\n                    else if( c.type === \"event\" ) {\n                        this.view.m.removeEventLink(c.source.id, c.target.id, c.event);\n                        this.view.setBoxMenu(c.source.id);\n                    }\n                }\n            });\n\n            this.jsPlumbInstance.bind(\"connectionDragStop\", (connection) => {\n                // if the connection has not been made, show back the type of the source\n                var endpoints = connection.getAttachedElements();\n                if( endpoints && endpoints.length == 2 ) {\n                    var sourceEP = endpoints[0];\n                    var targetEP = endpoints[1];\n                    if( targetEP && targetEP.elementId.startsWith('jsPlumb')) {\n                        if( targetEP.elementId.startsWith('jsPlumb') ) {\n                            // no connection has been made, show back our output type\n                            var sourceOutput = connection.getParameters().source.output;\n                            if( !this.view.m.getNode(sourceEP.elementId).isOutputConnected(sourceOutput) ) {\n                                this.style.showType(sourceEP);\n                            }\n                        }\n                    }\n                }\n            });\n\n            this.jsPlumbInstance.bind(\"connection\", (info, event) => {\n                // only do this for connection established by user, no programmatically\n                if( event ) {\n                    var c = info.connection.getParameters();\n                    if( c.type === \"data\" ) {\n                        // check the types\n                        var sourceType = this.view.m.getNode(c.source.id).getOutputType(c.source.output);\n                        var targetType = this.view.m.getNode(c.target.id).getInputType(c.target.input);\n                        if( this.view.m.compareTypes(sourceType, targetType) ) {\n                            this.view.m.addDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n\n                            // the target need to be refreshed\n                            this.refreshGraphNode(c.target.id);\n\n                            // hide source and target types\n                            this.style.hideType(info.sourceEndpoint);\n                            this.style.hideType(info.targetEndpoint);\n                        }\n                        else {\n                            // Error\n                            this.jsPlumbInstance.deleteConnection(info.connection, {\n                                fireEvent: false, //fire a connection detached event?\n                                forceDetach: false //override any beforeDetach listeners\n                            });\n                            this.style.showType(info.targetEndpoint);\n                            if( !this.view.m.getNode(info.sourceId).isOutputConnected(c.source.output) ) {\n                                this.style.showType(info.sourceEndpoint);\n                            }\n\n                            swal({\n                                title: \"Nope.\",\n                                html: \"<div style='text-align: left;'>Output <b style='font-weight: bold;'>\" + c.source.output + \"</b> of <b style='font-weight: bold;'>\" + info.sourceId + \"</b> is of type <u>\" + Utils.htmlentities(sourceType) + \"</u><br/>Input <b style='font-weight: bold;'>\" + c.target.input + \"</b> of <b style='font-weight: bold;'>\" + info.targetId  + \"</b> is of type <u>\" + Utils.htmlentities(targetType) + \"</u>.</div><br/>Type mismatch.\",\n                                type: \"error\",\n                            });\n                        }\n                    }\n                    else if( c.type === \"event\" ) {\n                        var target = this.view.m.getNode(c.target.id);\n                        var eventNames = target.getEventsNames();\n                        var options = {};\n                        _.each(eventNames, (name) => options[name] = name );\n\n                        swal({\n                            input: 'select',\n                            title: 'Select an event',\n                            inputOptions: options\n                        }).then( (result) => {\n                            if( result.value ) {\n                                info.connection.setParameter('event', result.value);\n                                info.connection.setLabel({ label: result.value, cssClass: \"connection-label noselect\", location: 0.5 });\n                                this.view.m.addEventLink(c.source.id, c.target.id, result.value);\n\n                                this.view.setBoxMenu(c.source.id);\n                            }\n                        });\n                    }\n                }\n            });\n\n            this.jsPlumbInstance.bind(\"connectionDetached\", (info, event) => {\n                var c = info.connection.getParameters();\n                if( c.type === \"data\" ) {\n                    // remove the link\n                    this.view.m.removeDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n\n                    // show source and target type\n                    this.style.showType(info.targetEndpoint);\n                    if( !info.source.id.startsWith('connection-split') &&\n                        !this.view.m.getNode(info.source.id).isOutputConnected(c.source.output) ) {\n                        this.style.showType(info.sourceEndpoint);\n                    }\n\n                    // the target need to be refreshed\n                    this.refreshGraphNode(c.target.id);\n                }\n                else if( c.type === \"event\" ) {\n                    this.view.m.removeEventLink(c.source.id, c.target.id, c.event);\n                    //this.style.showEventName(info.targetEndpoint);\n                }\n\n                // if the connection is splitted, remove all other connections/endpoint\n                if( c.splitted ) {\n                    var connections = this.jsPlumbInstance.getAllConnections();\n                    var connToDelete = [];\n                    var EPToDelete = {};\n                    _.each(connections, conn => {\n                        var p = conn.getParameters();\n                        if( p.source.id === c.source.id &&\n                            p.target.id === c.target.id &&\n                            ((c.type == \"event\"  && p.event === c.event) ||\n                            (c.type == \"data\" && p.source.sourceOutput == c.source.sourceOutput &&\n                            p.target.targetInput === p.target.targetInput))) {\n                            // collect the connection and the endpoints to delete\n                            connToDelete.push(conn);\n\n                            let [sourceEP, targetEP] = conn.getAttachedElements();\n                            if( sourceEP.getUuid().startsWith('connection-split-') ) {\n                                EPToDelete[ sourceEP.getUuid() ] = sourceEP;\n                            }\n                            if( targetEP.getUuid().startsWith('connection-split-') ) {\n                                EPToDelete[ targetEP.getUuid() ] = targetEP;\n                            }\n                        }\n                    });\n\n                    // clean all theses connections and endpoints once this call is ended\n                    _.each(connToDelete, conn => {\n                        _.defer(()=> {\n                            this.jsPlumbInstance.deleteConnection(conn, {\n                                fireEvent: false, //fire a connection detached event?\n                                forceDetach: false //override any beforeDetach listeners\n                            });\n                        });\n                    });\n\n                    _.each(EPToDelete, (endpoint, uuid) => {\n                        _.defer(()=> {\n                            var div = endpoint.getElement();\n                            this.jsPlumbInstance.deleteEndpoint(endpoint);\n                            $(div).remove();\n                        });\n                    });\n                }\n            });\n\n            this.jsPlumbInstance.bind(\"dblclick\", async (connection, e) => {\n                let [sourceEP, targetEP] = connection.getAttachedElements();\n                let c = connection.getParameters();\n\n                // split this connection into 2 by creating an endpoint at the event coordinate\n                // remove 7px to align it to the center\n                var pos = {\n                    \"top\" : e.pageY - $(this.canvas).offset().top -7,\n                    \"left\": e.pageX - $(this.canvas).offset().left - 7\n                };\n                this.splitConnection(connection, pos); // return the endpoint exact position\n\n                // save to the graph\n                if( c.type == \"data\" ) {\n                    var link = this.m.getDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n                }\n                else {\n                    var link = this.m.getEventLink(c.source.id, c.target.id, c.event);\n                }\n\n                if( sourceEP.getUuid().startsWith('connection-split-') ) {\n                    var el = sourceEP.getElement();\n                    var prevPos = this.jsPlumbInstance.getPosition(el);\n                    link.addPathStep(prevPos, pos);\n                }\n                else {\n                    link.addPathStep( \"source\", pos );\n                }\n            });\n\n            return new Promise(resolve => this.jsPlumbInstance.ready(resolve));\n        },\n\n        addLink: function(sourceId, sourceOutput, targetId, targetInput) {\n            var sourceUuid = [sourceId, \"output\", sourceOutput].join('#');\n            var targetUuid = [targetId, \"input\", targetInput].join('#');\n\n            // hide source and target types\n            this.style.hideType(sourceUuid); // works with endpoint or uuid\n            this.style.hideType(targetUuid);\n\n            var connection = this.jsPlumbInstance.connect({\n                uuids: [sourceUuid, targetUuid],\n                editable: true,\n                paintStyle: this.style.connectorData.paintStyle,\n                cssClass: 'data-connection',\n                connectorClass: 'data-connection'\n            });\n\n            // split the connection if we need to\n            var datalink = this.view.m.getDataLink(sourceId, sourceOutput, targetId, targetInput);\n            var path = datalink.getPath();\n            _.each( path, (pos) => {\n                var r = this.splitConnection(connection, pos);\n                connection = r.c2; // switch to the 2nd child connection\n            });\n        },\n\n        addEvent: function(sourceId, targetId, name) {\n            var sourceUuid = [sourceId, \"event-out\"].join('#');\n            var sourceEP = this.jsPlumbInstance.getEndpoint(sourceUuid);\n\n            var connection = this.jsPlumbInstance.connect({\n                source: sourceEP,\n                target: targetId,\n                editable: true,\n                paintStyle: this.style.connectorData.paintStyle,\n                cssClass: 'event-connection',\n                connectorClass: 'event-connection',\n                overlays: [\n                    [ \"PlainArrow\", { location: 1,  width:10, length:10, gap: 12 }],\n                    [ \"Label\", { label: name, location:0.50, labelStyle: { cssClass: \"connection-label noselect\" } } ]\n                ]\n            });\n            connection.setParameter(\"event\", name);\n\n            // split the connection if we need to\n            var eventlink = this.view.m.getEventLink(sourceId, targetId, name);\n            var path = eventlink.getPath();\n            _.each( path, (pos) => {\n                var r = this.splitConnection(connection, pos);\n                connection = r.c2; // switch to the 2nd child connection\n            });\n        },\n\n        // split a connection by adding an endpoint at given pos\n        splitConnection: function( connection, pos ) {\n            var c = connection.getParameters();\n\n            // create the endpoint div\n            var id = \"connection-split-\" + dbutils.randomString(8);\n            var div = $('<div/>', {\n                id: id,\n                class: \"connection-control capture-left-click capture-right-click\"\n            });\n            $(this.canvas).append(div);\n\n            // position it at pos (adjust for the height of the div)\n            var jsPlumbElement = this.jsPlumbInstance.getElement(id);\n            this.jsPlumbInstance.setPosition(jsPlumbElement, pos);\n\n            // make this div draggable\n            var startPosition = pos;\n            this.jsPlumbInstance.draggable(div, {\n                start: (e) => {\n                    startPosition = this.jsPlumbInstance.getPosition(jsPlumbElement);\n                },\n                stop: (e) => {\n                    var stopPosition = this.jsPlumbInstance.getPosition(jsPlumbElement);\n                    if( c.type == \"data\" ) {\n                        var link = this.view.m.getDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n                    }\n                    else if( c.type == \"event\" ) {\n                        var link = this.view.m.getEventLink(c.source.id, c.target.id, c.event);\n                    }\n                    link.updatePathStep(startPosition, stopPosition);\n                }\n            });\n\n            // determine the style of the 2 connections\n            c.splitted = true; // indicates that this connection is splitted\n            if( c.type == \"data\" ) {\n                var connectionStyle = {\n                    paintStyle: this.style.splittedConnectorData.paintStyle,\n                    connector: this.style.splittedConnectorData.connector,\n                    connectorOverlays:this.style.splittedConnectorData.overlays,\n                    connectorStyle: this.style.splittedConnectorData.paintStyle,\n                    hoverPaintStyle: this.style.endpointData.hoverStyle,\n                    cssClass : 'data-connection'\n                }\n                var epStyle = this.style.dataLineSplitterEndpoint;\n            }\n            else if( c.type == \"event\" ) {\n                var connectionStyle = {\n                    paintStyle: this.style.eventConnectorData.paintStyle,\n                    connector: this.style.eventConnectorData.connector,\n                    connectorOverlays:this.style.eventConnectorData.overlays,\n                    connectorStyle: this.style.eventConnectorData.paintStyle,\n                    hoverPaintStyle: this.style.eventEndpointData.hoverStyle,\n                    cssClass : 'event-connection',\n                };\n                var epStyle = this.style.eventLineSplitterEndpoint;\n            }\n\n            // create the div endpoint\n            var ep = this.jsPlumbInstance.addEndpoint(id,  {\n                isSource : false,\n                isTarget : false,\n                uuid     : id,\n                anchor   : \"Center\",\n                maxConnections : 2,\n                parameters : c\n            }, epStyle);\n\n            // make the ep transparent to pointer events, left click on it must drag the div\n            $(ep.canvas).css('pointer-events', 'none');\n            $(ep.canvas).css('cursor', 'move');\n            $(ep.canvas).addClass('capture-left-click');\n            $(ep.canvas).addClass('capture-right-click');\n            $(ep.canvas).find('svg').attr('pointer-events', 'none');\n            $(ep.canvas).addClass(id);\n\n\n            // save the connection overlays\n            var overlays = connection.getOverlays();\n            var overlaysParams = [];\n            _.each(overlays, (o)=> {\n                overlaysParams.push([o.type, {\n                    \"location\"  : o.loc,\n                    \"width\"     : o.width,\n                    \"length\"    : o.length,\n                    \"label\"     : o.getLabel ? o.getLabel() : undefined,\n                    \"id\"        : o.id,\n                    \"labelStyle\": o.labelStyle\n                }]);\n            });\n\n            let [sourceEP, targetEP] = connection.getAttachedElements();\n            let targetId = connection.targetId;\n\n            // detach the original connection\n            this.jsPlumbInstance.deleteConnection(connection, { fireEvent: false, forceDetach: false });\n\n            // now reattach it into 2 connections\n            var c1 = this.jsPlumbInstance.connect({\n                source: sourceEP,\n                target: ep,\n                editable: true,\n            }, connectionStyle);\n\n            var c2 = this.jsPlumbInstance.connect({\n                source: ep,\n                target: targetEP._jsPlumb ? targetEP : targetId /* EP has been destroyed, reattach to window */,\n                editable: true,\n            }, connectionStyle);\n\n            sourceEP.setParameter(\"targetConnection\", c1);\n            ep.setParameter(\"sourceConnection\", c1);\n            ep.setParameter(\"targetConnection\", c2);\n            targetEP.setParameter(\"sourceConnection\", c2);\n\n            // add the overlays to c2\n            _.each(overlaysParams, (p)=> {\n                c2.addOverlay(p);\n            });\n\n            // add menu to remove this split\n            $(ep.canvas).ready(() => {\n                var menu = new ContextMenu(\"#\" + id, [\n                    {\n                        name: 'Remove the split',\n                        fn: () => {\n                            this.unsplitConnection(ep);\n                        }\n                    },\n                ]);\n            });\n\n            return {\n                pos: pos,\n                c1 : c1,\n                c2 : c2\n            }\n        },\n\n        // Remove a split in a connection\n        // ep: entrypoint\n        // c1: connection 1\n        // c2: connection 2\n        unsplitConnection: function(ep) {\n            var c = ep.getParameters();\n            var c1 = c.sourceConnection;\n            var c2 = c.targetConnection;\n            var sourceEP = c1.getAttachedElements()[0];\n            var targetEP = c2.getAttachedElements()[1];\n\n            // detach and delete the endpoint\n            this.jsPlumbInstance.deleteConnection(c1, { fireEvent: false, forceDetach: false });\n            this.jsPlumbInstance.deleteConnection(c2, { fireEvent: false, forceDetach: false });\n            this.jsPlumbInstance.deleteEndpoint(ep);\n\n\n            // reconnect directly the source and the target\n            var connection = this.jsPlumbInstance.connect({\n                source: sourceEP,\n                target: targetEP,\n                editable: true,\n            });\n\n            sourceEP.setParameter('targetConnection', connection);\n            targetEP.setParameter('sourceConnection', connection);\n\n            // find the position of the split endpoint to remove\n            var id = c1.targetId;\n            var element = this.jsPlumbInstance.getElement(id)\n            var position = this.jsPlumbInstance.getPosition(element);\n\n            // remove the element in the path\n            // 1. find the link\n            // 2. find the position of the split endpoint\n            if( c.type == \"data\" ) {\n                var link = this.view.m.getDataLink(c.source.id, c.source.output, c.target.id, c.target.input);\n                link.removePathStep(position);\n            }\n            else if( c.type == \"event\" ) {\n                var link = this.m.getEventLink();\n                link.removePathStep(position);\n            }\n            else {\n                throw \"unknown connection type\";\n            }\n\n            // remove the div\n            $(\"#\" + id).remove(); // delete the div\n        },\n\n        getNodeId: function( id, nodeType ) {\n            switch( nodeType ) {\n            case \"input\": return this.view.m.prefixId(id, \"input\");\n            case \"output\": return this.view.m.prefixId(id, \"output\");\n            case \"module\":\n            case \"ui\":\n            default:\n                return id;\n            }\n        },\n\n        getNode( id, nodeType ) {\n            var realId = this.getNodeId(id, nodeType);\n            return this.view.m.getNode(realId);\n        },\n\n        getNodeUniqId(id, nodeType) {\n            return this.getNode(id, nodeType).getUniqId() + this.jsPlumbInstance.rand;\n        },\n\n        setLoading(b) {\n            this.loading = b;\n        },\n\n        gotoTopLeft: function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            this.translater.gotoTopLeft();\n        },\n\n        gotoTopRight: function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            this.translater.gotoTopRight();\n        },\n\n        gotoBottomLeft: function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            this.translater.gotoBottomLeft();\n        },\n\n        gotoBottomRight: function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            this.translater.gotoBottomRight();\n        },\n\n        assignContextMenu: function() {\n            // Create a contextmenu for the div\n            var contextOptions = [\n                {\n                    name: 'Add node...',\n                    fn: (target, evt) => {\n                        this.$parent.addBox(evt);\n                    }\n                }\n            ];\n            var cMenu = new ContextMenu(\"#dualbox-graph-canvas\", contextOptions);\n        },\n    }\n}\n</script>\n"]}, media: undefined });
 
   };
   /* scoped */
@@ -89862,12 +89952,140 @@ class GraphController {
         this.v.repaint();
     }
 
+    setClipboard(str) {
+        const el = document.createElement('textarea');
+        el.value = str;
+        document.body.appendChild(el);
+        el.select();
+        document.execCommand('copy');
+        document.body.removeChild(el);
+    }
+
+    async getClipboard() {
+        return await navigator.clipboard.readText();
+    }
+
     deleteSelection() {
+        this.m.batch(() => {
+            var selectedDivs = this.v.selector.getSelection();
+            lodash.each(selectedDivs, (div) => {
+                this.m.getNode($(div).attr('id')).remove();
+            });
+        });
+        this.v.repaint();
+    }
+
+    copySelection() {
+        var nodes = [];
+        var json = {
+            object: "dualbox c/c",
+            modules: {},
+            ui: {},
+            input: {},
+            output: {},
+            metanodes: {},
+        };
         var selectedDivs = this.v.selector.getSelection();
+
+        var isInSelection = nodeId => {
+            var r = false;
+            lodash.each(nodes, n => {
+                if (n.graphId === nodeId) {
+                    r = true;
+                    return false; // eol
+                }
+            });
+            return r;
+        };
+
+        // strip a node definition from it's content that is outside
+        // of the scope of selection
+        var stripContentOutsideOfSelection = (n) => {
+            var def = lodash.clone(n.def);
+
+            // delete links from outside
+            var links = n.getInboundLinks();
+            lodash.each(links, (l) => {
+                var sourceNode = l.getSourceNode();
+                if (!isInSelection(sourceNode.graphId)) {
+                    if (n.isInput() || n.isOutput()) {
+                        delete def.link;
+                    } else {
+                        delete def.links[l.targetInput];
+                    }
+                }
+            });
+
+            // delete events and UI stuff
+            delete def.events;
+            delete def.registerTo;
+
+            return def;
+        };
+
+        // first get nodes
         lodash.each(selectedDivs, (div) => {
-            this.m.getNode($(div).attr('id')).remove();
+            var n = this.m.getNode($(div).attr('id'));
+            nodes.push(n);
         });
-        this.v.repaint();
+
+
+        // add node, but strip content
+        lodash.each(nodes, n => {
+            if (n.isInput()) {
+                json.input[n.graphId] = stripContentOutsideOfSelection(n);
+            } else if (n.isOutput()) {
+                json.output[n.graphId] = stripContentOutsideOfSelection(n);
+            } else if (n.isUI()) {
+                json.ui[n.graphId] = stripContentOutsideOfSelection(n);
+            } else if (n.isModule()) {
+                json.modules[n.graphId] = stripContentOutsideOfSelection(n);
+                if (n.isMetanode()) {
+                    json.metanodes[n.def.module] = n.getMetanodeDefinition();
+                }
+            }
+        });
+
+        this.setClipboard(JSON.stringify(json));
+
+        // indicates to the user that the selection is saved
+        const Toast = sweetalert2_all.mixin({
+            toast: true,
+            position: 'bottom-end',
+            showConfirmButton: false,
+            timer: 2000,
+            timerProgressBar: true,
+            onOpen: (toast) => {
+                toast.addEventListener('mouseenter', sweetalert2_all.stopTimer);
+                toast.addEventListener('mouseleave', sweetalert2_all.resumeTimer);
+            }
+        });
+
+        Toast.fire({
+            icon: 'success',
+            title: 'Selection copied to clipboard'
+        });
+    }
+
+    async pasteSelection() {
+        var clipboard = await this.getClipboard();
+        try {
+            var json = JSON.parse(clipboard);
+        } catch (e) {
+            sweetalert2_all.fire("Error", "You must first copy boxes from Dualbox");
+        }
+
+        sweetalert2_all.queue([{
+            title: 'Dependencies required',
+            text: 'Dualbox will load additional required dependencies to paste your selection',
+            showLoaderOnConfirm: true,
+            preConfirm: async () => {
+                await this.e.loadPackages(json);
+                this.m.paste(json);
+                await this.v.repaint();
+            }
+        }]);
+
     }
 
     mergeSelection() {