@dualbox/editor 1.0.1 → 1.0.3

package/js/src/v/GraphView.js

@@ -0,0 +1,928 @@
+/**
+ *   Implementing the View of the GraphEditor
+ *   Everything related to display should be here
+ */
+
+const _ = require('lodash');
+const swal = require('sweetalert2');
+const PlumbStyle = require('./PlumbStyle');
+
+// Manage the start/stop lifetime of the application
+const AppManager = require('./AppManager');
+
+// for instanciation and adding templates to DOM
+const TemplateManager = require('./TemplateManager');
+
+// Tools for the graph
+const Zoomer = require('./Zoomer');
+const Selector = require('./Selector');
+const Translater = require('./Translater');
+const CanvasSizeHandler = require('./CanvasSizeHandler');
+const ContextMenu = require('./ContextMenu');
+const Utils = require('./Utils');
+const dbUtils = require('../m/DualboxUtils');
+
+class GraphView {
+    constructor(editor, div, attrs) {
+        this.e = editor;
+        this.m = editor.m;
+        this.c = editor.c;
+
+        this.utils = Utils;
+
+        this.div = $(div);
+        this.canvas = null;
+        this.attrs = attrs;
+
+        // Manage the different HTML templates
+        this.templateMgr = new TemplateManager(this);
+
+        // jsplumb
+        this.jsPlumbInstance = null; // main canvas graph
+
+        // encapsulate the JSPlumb styles
+        this.style = new PlumbStyle(this);
+
+        // Controls for different views
+        this.showEvents = false;
+
+        // Controls helpers utilities
+        this.selector = null;
+        this.translater = null;
+        this.zoomer = null;
+        this.canvasSizeHandler = null;
+
+        // Application manager
+        this.appManager = null;
+
+        // Code mirror boxes
+        this.htmlCode = null;
+        this.cssCode = null;
+
+        // load the main template
+        this.initialize();
+    }
+
+    hideCanvas() {
+        this.canvas.css('visibility', 'hidden');
+        return new Promise((resolve) => {
+            this.canvas.ready(resolve);
+        });
+    }
+
+    showCanvas() {
+        this.canvas.css('visibility', 'visible');
+        return new Promise( (resolve) => {
+            this.canvas.ready(resolve);
+        });
+    }
+
+    initialize() {
+        // add main template
+        this.templateMgr.appendTemplate(this.div, "main", {showLoadSaveButtons: this.attrs.showLoadSaveButtons}, () => {
+            // for convenience, define thoses once the main div is ready
+            this.div.ready(() => {
+                this.graphContainer = this.div.find('.dualbox-graph-container');
+                this.canvas = this.div.find('.dualbox-graph-canvas');
+                this.selector = new Selector(this, this.graphContainer);
+                this.translater = new Translater(this, this.graphContainer, this.canvas);
+                this.zoomer = new Zoomer(this, this.graphContainer, this.canvas);
+                this.jsPlumbInstance = jsPlumb.getInstance({
+                    DragOptions: { cursor: 'pointer', zIndex: 2500 }, // default drag options
+                    Container: "dualbox-graph-canvas"
+                });
+                this.style.setDefault();
+                this.initializeListeners();
+                this.setNavigation();
+                this.canvasSizeHandler = new CanvasSizeHandler(this, this.canvas);
+                this.appManager = new AppManager(this, this.div.find('.application') );
+            });
+        });
+
+        this.templateMgr.appendTemplate(this.div, "addNode"); // "add node" modal
+    }
+
+    // bind jsplumb events
+    initializeListeners() {
+        this.selector.initialize();
+        this.zoomer.initialize();
+        ContextMenu.initialize(); // important to make this after the translater (right-clic conflicts)
+        this.translater.initialize();
+
+        // show selected nodes
+        this.selector.onSelecting((divs) => {
+            $(this.canvas).find('.card').removeClass('selected');
+            _.each(divs, (div) => {
+                $(div).addClass('selected');
+            });
+        });
+
+        // Add every node in the selected area to JsPlumb selection
+        this.selector.onSelect((divs) => {
+            _.each(divs, (div) => {
+                $(div).addClass('selected');
+                this.jsPlumbInstance.addToDragSelection($(div)[0]);
+            });
+        });
+
+        // remove the selection
+        this.selector.onDeselect((divs) => {
+            _.each(divs, (div) => {
+                $(div).removeClass('selected');
+                this.jsPlumbInstance.removeFromDragSelection($(div)[0]);
+            });
+        });
+
+        this.jsPlumbInstance.bind("connectionDrag", (connection) => {
+            // hide the type of the source (output endpoint)
+            var endpoints = connection.getAttachedElements();
+            if( endpoints && endpoints[0] ) this.style.hideType(endpoints[0]);
+
+            // if the connection linked a source to a target, remove the connection
+            var c = connection.getParameters();
+            if( c.target ) {
+                if( c.type === "data" ) {
+                    // remove the link
+                    this.m.removeDataLink(c.source.id, c.source.output, c.target.id, c.target.input);
+                }
+                else if( c.type === "event" ) {
+                    this.m.removeEventLink(c.source.id, c.target.id, c.event);
+                    this.setBoxMenu(c.source.id);
+                }
+            }
+        });
+
+        this.jsPlumbInstance.bind("connectionDragStop", (connection) => {
+            // if the connection has not been made, show back the type of the source
+            var endpoints = connection.getAttachedElements();
+            if( endpoints && endpoints.length == 2 ) {
+                var sourceEP = endpoints[0];
+                var targetEP = endpoints[1];
+                if( targetEP && targetEP.elementId.startsWith('jsPlumb')) {
+                    if( targetEP.elementId.startsWith('jsPlumb') ) {
+                        // no connection has been made, show back our output type
+                        var sourceOutput = connection.getParameters().source.output;
+                        if( !this.m.getNode(sourceEP.elementId).isOutputConnected(sourceOutput) ) {
+                            this.style.showType(sourceEP);
+                        }
+                    }
+                }
+            }
+        });
+
+        this.jsPlumbInstance.bind("connection", (info, event) => {
+            // only do this for connection established by user, no programmatically
+            if( event ) {
+                var c = info.connection.getParameters();
+                if( c.type === "data" ) {
+                    // check the types
+                    var sourceType = this.m.getNode(c.source.id).getOutputType(c.source.output);
+                    var targetType = this.m.getNode(c.target.id).getInputType(c.target.input);
+                    if( this.m.compareTypes(sourceType, targetType) ) {
+                        this.m.addDataLink(c.source.id, c.source.output, c.target.id, c.target.input);
+
+                        // hide source and target types
+                        this.style.hideType(info.sourceEndpoint);
+                        this.style.hideType(info.targetEndpoint);
+                    }
+                    else {
+                        // Error
+                        this.jsPlumbInstance.detach(info.connection, {
+                            fireEvent: false, //fire a connection detached event?
+                            forceDetach: false //override any beforeDetach listeners
+                        });
+                        this.style.showType(info.targetEndpoint);
+                        if( !this.m.getNode(info.sourceId).isOutputConnected(c.source.output) ) {
+                            this.style.showType(info.sourceEndpoint);
+                        }
+
+                        swal({
+                            title: "Nope.",
+                            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.",
+                            type: "error",
+                        });
+                    }
+                }
+                else if( c.type === "event" ) {
+                    var target = this.m.getNode(c.target.id);
+                    var eventNames = target.getEventsNames();
+                    var options = {};
+                    _.each(eventNames, (name) => options[name] = name );
+
+                    swal({
+                        input: 'select',
+                        title: 'Select an event',
+                        inputOptions: options
+                    }).then( (result) => {
+                        if( result.value ) {
+                            info.connection.setParameter('event', result.value);
+                            info.connection.setLabel({ label: result.value, cssClass: "connection-label noselect", location: 0.5 });
+                            this.m.addEventLink(c.source.id, c.target.id, result.value);
+
+                            this.setBoxMenu(c.source.id);
+                        }
+                    });
+                }
+            }
+        });
+
+        this.jsPlumbInstance.bind("connectionDetached", (info, event) => {
+            var c = info.connection.getParameters();
+            if( c.type === "data" ) {
+                // remove the link
+                this.m.removeDataLink(c.source.id, c.source.output, c.target.id, c.target.input);
+
+                // show source and target type
+                this.style.showType(info.targetEndpoint);
+                if( !info.source.id.startsWith('connection-split') &&
+                    !this.m.getNode(info.source.id).isOutputConnected(c.source.output) ) {
+                    this.style.showType(info.sourceEndpoint);
+                }
+            }
+            else if( c.type === "event" ) {
+                this.m.removeEventLink(c.source.id, c.target.id, c.event);
+                //this.style.showEventName(info.targetEndpoint);
+            }
+
+            // if the connection is splitted, remove all other connections/endpoint
+            if( c.splitted ) {
+                var connections = this.jsPlumbInstance.getAllConnections();
+                var connToDelete = [];
+                var EPToDelete = {};
+                _.each(connections, conn => {
+                    var p = conn.getParameters();
+                    if( p.source.id === c.source.id &&
+                        p.target.id === c.target.id &&
+                        ((c.type == "event"  && p.event === c.event) ||
+                        (c.type == "data" && p.source.sourceOutput == c.source.sourceOutput &&
+                        p.target.targetInput === p.target.targetInput))) {
+                        // collect the connection and the endpoints to delete
+                        connToDelete.push(conn);
+
+                        let [sourceEP, targetEP] = conn.getAttachedElements();
+                        if( sourceEP.getUuid().startsWith('connection-split-') ) {
+                            EPToDelete[ sourceEP.getUuid() ] = sourceEP;
+                        }
+                        if( targetEP.getUuid().startsWith('connection-split-') ) {
+                            EPToDelete[ targetEP.getUuid() ] = targetEP;
+                        }
+                    }
+                });
+
+                // clean all theses connections and endpoints once this call is ended
+                _.each(connToDelete, conn => {
+                    _.defer(()=> {
+                        this.jsPlumbInstance.detach(conn, {
+                            fireEvent: false, //fire a connection detached event?
+                            forceDetach: false //override any beforeDetach listeners
+                        });
+                    });
+                });
+
+                _.each(EPToDelete, (endpoint, uuid) => {
+                    _.defer(()=> {
+                        var div = endpoint.getElement();
+                        this.jsPlumbInstance.deleteEndpoint(endpoint);
+                        $(div).remove();
+                    });
+                });
+            }
+        });
+
+        this.jsPlumbInstance.bind("dblclick", async (connection, e) => {
+            let [sourceEP, targetEP] = connection.getAttachedElements();
+            let c = connection.getParameters();
+
+            // split this connection into 2 by creating an endpoint at the event coordinate
+            // remove 7px to align it to the center
+            var pos = {
+                "top" : e.pageY - $(this.canvas).offset().top -7,
+                "left": e.pageX - $(this.canvas).offset().left - 7
+            };
+            this.splitConnection(connection, pos); // return the endpoint exact position
+
+            // save to the graph
+            if( c.type == "data" ) {
+                var link = this.m.getDataLink(c.source.id, c.source.output, c.target.id, c.target.input);
+            }
+            else {
+                var link = this.m.getEventLink(c.source.id, c.target.id, c.event);
+            }
+
+            if( sourceEP.getUuid().startsWith('connection-split-') ) {
+                var el = sourceEP.getElement();
+                var prevPos = this.jsPlumbInstance.getPosition(el);
+                link.addPathStep(prevPos, pos);
+            }
+            else {
+                link.addPathStep( "source", pos );
+            }
+        });
+    }
+
+    detachConnection(info) {
+
+    }
+
+    setEventsVisibility( b ) {
+        this.showEvents = b;
+        this.repaint();
+    }
+
+    // set some transparency to show event better
+    setEventMode(b) {
+        if( b ) {
+            // add opacity to non-events
+            $(this.canvas).find('.card:not(.card-ui)').addClass('transparent');
+            $(this.canvas).find('.data-connection').each(function() {
+                if( $(this).is('svg') ) {
+                    // addclass doesnt work with svg
+                    $(this).attr('class', $(this).attr('class') + " transparent");
+                }
+                else {
+                    $(this).addClass('transparent');;
+                }
+            });
+        }
+        else {
+            // add opacity to non-events
+            $(this.canvas).find('.card:not(.card-ui)').removeClass('transparent');
+            $(this.canvas).find('.data-connection').removeClass('transparent');;
+        }
+
+        return new Promise((resolve) => {
+            $(this.canvas).ready(resolve);
+        });
+    }
+
+    addNode(id, pkg, def) {
+        return new Promise( (resolve, reject) => {
+            this.templateMgr.appendTemplate(this.canvas, "graphNode", { id: id, pkg: pkg, def:def, n: this.m.getNode(id), utils: this.utils }, (div) => {
+                div.ready(() => resolve());
+            });
+        });
+    }
+
+    addLink(sourceId, sourceOutput, targetId, targetInput) {
+        var sourceUuid = [sourceId, "output", sourceOutput].join('#');
+        var targetUuid = [targetId, "input", targetInput].join('#');
+
+        // hide source and target types
+        this.style.hideType(sourceUuid); // works with endpoint or uuid
+        this.style.hideType(targetUuid);
+
+        var connection = this.jsPlumbInstance.connect({
+            uuids: [sourceUuid, targetUuid],
+            editable: true,
+            paintStyle: this.style.connectorData.paintStyle,
+            cssClass: 'data-connection',
+            connectorClass: 'data-connection'
+        });
+
+        // split the connection if we need to
+        var datalink = this.m.getDataLink(sourceId, sourceOutput, targetId, targetInput);
+        var path = datalink.getPath();
+        _.each( path, (pos) => {
+            var r = this.splitConnection(connection, pos);
+            connection = r.c2; // switch to the 2nd child connection
+        });
+    }
+
+    addEvent(sourceId, targetId, name) {
+        var sourceUuid = [sourceId, "event-out"].join('#');
+        var sourceEP = this.jsPlumbInstance.getEndpoint(sourceUuid);
+
+        var connection = this.jsPlumbInstance.connect({
+            source: sourceEP,
+            target: targetId,
+            editable: true,
+            paintStyle: this.style.connectorData.paintStyle,
+            cssClass: 'event-connection',
+            connectorClass: 'event-connection',
+            overlays: [
+                [ "PlainArrow", { location: 1,  width:10, length:10, gap: 12 }],
+                [ "Label", { label: name, location:0.50, labelStyle: { cssClass: "connection-label noselect" } } ]
+            ]
+        });
+        connection.setParameter("event", name);
+
+        // split the connection if we need to
+        var eventlink = this.m.getEventLink(sourceId, targetId, name);
+        var path = eventlink.getPath();
+        _.each( path, (pos) => {
+            var r = this.splitConnection(connection, pos);
+            connection = r.c2; // switch to the 2nd child connection
+        });
+    }
+
+    // split a connection by adding an endpoint at given pos
+    splitConnection( connection, pos ) {
+        var c = connection.getParameters();
+
+        // create the endpoint div
+        var id = "connection-split-" + dbUtils.randomString(8);
+        var div = $('<div/>', {
+            id: id,
+            class: "connection-control capture-left-click capture-right-click"
+        });
+        $(this.canvas).append(div);
+
+        // position it at pos (adjust for the height of the div)
+        var jsPlumbElement = this.jsPlumbInstance.getElement(id);
+        this.jsPlumbInstance.setPosition(jsPlumbElement, pos);
+
+        // make this div draggable
+        var startPosition = pos;
+        this.jsPlumbInstance.draggable(div, {
+            start: (e) => {
+                startPosition = this.jsPlumbInstance.getPosition(jsPlumbElement);
+            },
+            stop: (e) => {
+                var stopPosition = this.jsPlumbInstance.getPosition(jsPlumbElement);
+                if( c.type == "data" ) {
+                    var link = this.m.getDataLink(c.source.id, c.source.output, c.target.id, c.target.input);
+                }
+                else if( c.type == "event" ) {
+                    var link = this.m.getEventLink(c.source.id, c.target.id, c.event);
+                }
+                link.updatePathStep(startPosition, stopPosition);
+            }
+        });
+
+        // determine the style of the 2 connections
+        c.splitted = true; // indicates that this connection is splitted
+        if( c.type == "data" ) {
+            var connectionStyle = {
+                paintStyle: this.style.splittedConnectorData.paintStyle,
+                connector: this.style.splittedConnectorData.connector,
+                connectorOverlays:this.style.splittedConnectorData.overlays,
+                connectorStyle: this.style.splittedConnectorData.paintStyle,
+                hoverPaintStyle: this.style.endpointData.hoverStyle,
+                cssClass : 'data-connection'
+            }
+            var epStyle = this.style.dataLineSplitterEndpoint;
+        }
+        else if( c.type == "event" ) {
+            var connectionStyle = {
+                paintStyle: this.style.eventConnectorData.paintStyle,
+                connector: this.style.eventConnectorData.connector,
+                connectorOverlays:this.style.eventConnectorData.overlays,
+                connectorStyle: this.style.eventConnectorData.paintStyle,
+                hoverPaintStyle: this.style.eventEndpointData.hoverStyle,
+                cssClass : 'event-connection',
+            };
+            var epStyle = this.style.eventLineSplitterEndpoint;
+        }
+
+        // create the div endpoint
+        var ep = this.jsPlumbInstance.addEndpoint(id,  {
+            isSource : false,
+            isTarget : false,
+            uuid     : id,
+            anchor   : "Center",
+            maxConnections : 2,
+            parameters : c
+        }, epStyle);
+
+        // make the ep transparent to pointer events, left click on it must drag the div
+        $(ep.canvas).css('pointer-events', 'none');
+        $(ep.canvas).css('cursor', 'move');
+        $(ep.canvas).addClass('capture-left-click');
+        $(ep.canvas).addClass('capture-right-click');
+        $(ep.canvas).find('svg').attr('pointer-events', 'none');
+        $(ep.canvas).addClass(id);
+
+
+        // save the connection overlays
+        var overlays = connection.getOverlays();
+        var overlaysParams = [];
+        _.each(overlays, (o)=> {
+            overlaysParams.push([o.type, {
+                "location"  : o.loc,
+                "width"     : o.width,
+                "length"    : o.length,
+                "label"     : o.getLabel ? o.getLabel() : undefined,
+                "id"        : o.id,
+                "labelStyle": o.labelStyle
+            }]);
+        });
+
+        let [sourceEP, targetEP] = connection.getAttachedElements();
+        let targetId = connection.targetId;
+
+        // detach the original connection
+        this.jsPlumbInstance.detach(connection, { fireEvent: false, forceDetach: false });
+
+        // now reattach it into 2 connections
+        var c1 = this.jsPlumbInstance.connect({
+            source: sourceEP,
+            target: ep,
+            editable: true,
+        }, connectionStyle);
+
+        var c2 = this.jsPlumbInstance.connect({
+            source: ep,
+            target: targetEP._jsPlumb ? targetEP : targetId /* EP has been destroyed, reattach to window */,
+            editable: true,
+        }, connectionStyle);
+
+        sourceEP.setParameter("targetConnection", c1);
+        ep.setParameter("sourceConnection", c1);
+        ep.setParameter("targetConnection", c2);
+        targetEP.setParameter("sourceConnection", c2);
+
+        // add the overlays to c2
+        _.each(overlaysParams, (p)=> {
+            c2.addOverlay(p);
+        });
+
+        // add menu to remove this split
+        $(ep.canvas).ready(() => {
+            var menu = new ContextMenu("#" + id, [
+                {
+                    name: 'Remove the split',
+                    fn: () => {
+                        this.unsplitConnection(ep);
+                    }
+                },
+            ]);
+        });
+
+        return {
+            pos: pos,
+            c1 : c1,
+            c2 : c2
+        }
+    }
+
+    // Remove a split in a connection
+    // ep: entrypoint
+    // c1: connection 1
+    // c2: connection 2
+    unsplitConnection(ep) {
+        var c = ep.getParameters();
+        var c1 = c.sourceConnection;
+        var c2 = c.targetConnection;
+        var sourceEP = c1.getAttachedElements()[0];
+        var targetEP = c2.getAttachedElements()[1];
+
+        // detach and delete the endpoint
+        this.jsPlumbInstance.detach(c1, { fireEvent: false, forceDetach: false });
+        this.jsPlumbInstance.detach(c2, { fireEvent: false, forceDetach: false });
+        this.jsPlumbInstance.deleteEndpoint(ep);
+
+
+        // reconnect directly the source and the target
+        var connection = this.jsPlumbInstance.connect({
+            source: sourceEP,
+            target: targetEP,
+            editable: true,
+        });
+
+        sourceEP.setParameter('targetConnection', connection);
+        targetEP.setParameter('sourceConnection', connection);
+
+        // find the position of the split endpoint to remove
+        var id = c1.targetId;
+        var element = this.jsPlumbInstance.getElement(id)
+        var position = this.jsPlumbInstance.getPosition(element);
+
+        // remove the element in the path
+        // 1. find the link
+        // 2. find the position of the split endpoint
+        if( c.type == "data" ) {
+            var link = this.m.getDataLink(c.source.id, c.source.output, c.target.id, c.target.input);
+            link.removePathStep(position);
+        }
+        else if( c.type == "event" ) {
+            var link = this.m.getEventLink();
+            link.removePathStep(position);
+        }
+        else {
+            throw "unknown connection type";
+        }
+
+        // remove the div
+        $("#" + id).remove(); // delete the div
+    }
+
+    // set the navigation breadcrumb into the canvas
+    setNavigation() {
+        var appNav = this.div.find('.dualbox-app-navigation');
+        var container = appNav.parent();
+        appNav.remove();
+
+        var crumb = $('<ol/>', { class: 'breadcrumb dualbox-app-navigation'});
+        _.each(this.m.getWindows(), (w, index, array) => {
+            if( index === array.length - 1 ) {
+                // last element, don't make it a link
+                var li = $('<li/>', { class:"breadcrumb-item" }).append(w[0])
+                if( index !== 0 ) {
+                    // we're in a metanode, add a download button
+                    var downloadButton = $('<button class="btn btn-xs btn-secondary btn-download-metanode ml-2">' +
+                        '<i class="fa fa-download"></i></button>');
+                    downloadButton.click((e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        var app = this.m.getCurrentMetanode();
+                        var text = JSON.stringify(app, null, 2);
+                        var blob = new Blob([text], { "type" : "application/octet-stream" });
+
+                        var a = document.createElement('a');
+                        a.href = window.URL.createObjectURL(blob);
+                        a.download = this.m.getCurrentMetanodeName() + ".json";
+
+                        // simulate a click on the link
+                        if (document.createEvent) {
+                            var event = document.createEvent("MouseEvents");
+                            event.initEvent("click", true, true);
+                            a.dispatchEvent(event);
+                        } else {
+                            a.click();
+                        }
+                    });
+                    li.append(downloadButton)
+                }
+
+                crumb.append(li);
+            }
+            else {
+                // append a link to this metabox
+                var link = $('<a/>', { href: '#', class:"text-light" }).append(w[0]);
+                link.click((e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    this.c.setWindow(w);
+                });
+                crumb.append($('<li/>', { class:"breadcrumb-item" }).append(link));
+            }
+        });
+        container.append(crumb);
+        return new Promise((resolve) => { container.ready(resolve) });
+    }
+
+    isLeftMenuExpanded() {
+        return this.div.find('.btn-toggle-left-window').data('expanded')
+    }
+
+    isRightMenuExpanded() {
+        return this.div.find('.btn-toggle-right-window').data('expanded')
+    }
+
+    openBoxSettings(id) {
+        var expandSettings = () => {
+            this.div.find('.dualbox-editor-body').trigger('expandSettings');
+        };
+
+        if( id ) {
+            this.setBoxMenu(id, expandSettings);
+        }
+        else {
+            this.setMainMenu(expandSettings);
+        }
+    }
+
+    openDebug(id) {
+        var expandDebug = () => {
+            this.div.find('.dualbox-editor-body').trigger('expandDebug');
+        };
+
+        this.setDebugMenu(id, expandDebug);
+    }
+
+    setBoxMenu(id, cb) {
+        var targetDiv = this.div.find('.dualbox-graph-left-panel');
+        var expanded = this.getLeftMenuTarget();
+        targetDiv.html('');
+        this.templateMgr.appendTemplate(targetDiv, "editNodeSettings", { node: this.m.getNode(id) }, () => {
+            this.setLeftMenuTarget(expanded);
+            if(cb) cb();
+        });
+    }
+
+    setMainMenu(cb) {
+        var targetDiv = this.div.find('.dualbox-graph-left-panel');
+        var expanded = this.getLeftMenuTarget();
+        targetDiv.html('');
+        this.templateMgr.appendTemplate(targetDiv, "editMainSettings", { app : this.m.getCurrentApp() }, () => {
+            this.setLeftMenuTarget(expanded);
+            if(cb) cb();
+        });
+    }
+
+    setDebugMenu(id, cb) {
+        var targetDiv = this.div.find('.dualbox-graph-right-panel');
+        var expanded = this.getRightMenuTarget();
+        targetDiv.html('');
+        this.templateMgr.appendTemplate(targetDiv, "debugNodeInfos", { m : this.m, snapshot : this.m.get(), node: this.m.getNode(id) }, () => {
+            this.setRightMenuTarget(expanded);
+            if(cb) cb();
+        });
+    }
+
+    // save the actual position of where we are in the menu
+    getLeftMenuTarget() {
+        var expanded = [];
+        var panel = this.div.find('.dualbox-graph-left-panel');
+        panel.find('div[aria-expanded="true"]').each(function() {
+            expanded.push($(this).attr('id'));
+        });
+        return expanded;
+    }
+
+    // restore where we were before in the menu
+    setLeftMenuTarget(expanded) {
+        var panel = this.div.find('.dualbox-graph-left-panel');
+        var divs = panel.find('div[data-toggle="collapse"]').each(function() {
+            if( expanded.indexOf( $(this).attr('id') ) !== -1 ) {
+                // this menu was open, restore it
+                var dataTarget = $(this).attr('data-target');
+                $(dataTarget).collapse('show');
+            }
+        });
+    }
+
+    // save the actual position of where we are in the menu
+    getRightMenuTarget() {
+        var expanded = [];
+        var panel = this.div.find('.dualbox-graph-right-panel');
+        panel.find('div[aria-expanded="true"]').each(function() {
+            expanded.push($(this).attr('id'));
+        });
+        return expanded;
+    }
+
+    // restore where we were before in the menu
+    setRightMenuTarget(expanded) {
+        var panel = this.div.find('.dualbox-graph-right-panel');
+        var divs = panel.find('div[data-toggle="collapse"]').each(function() {
+            if( expanded.indexOf( $(this).attr('id') ) !== -1 ) {
+                // this menu was open, restore it
+                var dataTarget = $(this).attr('data-target');
+                $(dataTarget).collapse('show');
+            }
+        });
+    }
+
+    // reinitialize the view
+    reset() {
+        this.jsPlumbInstance.reset();
+        this.jsPlumbInstance = jsPlumb.getInstance({
+            DragOptions: { cursor: 'pointer', zIndex: 2500 }, // default drag options
+            Container: "dualbox-graph-canvas"
+        });
+        this.style.setDefault();
+        this.canvas.empty();
+        ContextMenu.clean();
+    }
+
+
+    // reset graph view and repaint from the graph model
+    async repaint() {
+        await this.hideCanvas();
+
+        this.reset();
+        await this.setNavigation();
+
+        // Function to gather all links from a node into the "links" array
+        var links = []; // array of links
+        var gatherLinks = (targetId, sourceDef) => {
+            // for nodes and uis
+            _.each(sourceDef.links, (sources, targetInput) => {
+                _.each(sources, (sourceOutput, sourceId) => {
+                    if( sourceId === "graph" ) {
+                        return;
+                    }
+
+                    if( sourceId === "input" || sourceId === "output" ) {
+                        sourceId = this.m.prefixId(sourceOutput, sourceId);
+                        sourceOutput = "value";
+                    }
+
+                    links.push({
+                        sourceId: sourceId,
+                        sourceOutput: sourceOutput,
+                        targetId: targetId,
+                        targetInput: targetInput
+                    });
+                });
+            });
+
+            // for inputs and outputs
+            _.each(sourceDef.link, (sourceOutput, sourceId) => {
+                if( sourceId === "graph" ) return;
+                if( sourceId === "input" || sourceId === "output" ) {
+                    sourceId = this.m.prefixId(sourceOutput, sourceId);
+                    sourceOutput = "value";
+                }
+
+                links.push({
+                    sourceId: sourceId,
+                    sourceOutput: sourceOutput,
+                    targetId: targetId,
+                    targetInput: "value"
+                });
+            });
+        }
+
+        // Function to gather all links from a node into the "links" array
+        var events = [];
+        var gatherEvents = (sourceId, def) => {
+            _.each(def.events, (evt) => {
+                if( evt.node ) {
+                    events.push({
+                        sourceId: sourceId,
+                        targetId: evt.node,
+                        name: evt.event
+                    });
+                }
+            });
+        }
+
+        var app = this.m.getCurrentWindow();
+        var addNodePromises = []; // array of promises that will be resolved once all node are added
+
+        var processModule = (def, id) => {
+            addNodePromises.push( new Promise( async (resolve) => {
+                var pkg = this.m.getNode(id).getPackage();
+                await this.addNode(id, pkg, def); // add the node
+                gatherLinks(id, def); // add all data links in our array
+                gatherEvents(id, def); // add all event links in our array
+                resolve();
+            }));
+        }
+
+        var processInput = (def, id) => {
+            addNodePromises.push( new Promise( async (resolve) => {
+                id = this.m.prefixId(id, "input");
+                var pkg = this.m.getNode(id).getPackage();
+                await this.addNode(id, pkg, def); // add the node
+                gatherLinks(id, def); // add all data links in our array
+                gatherEvents(id, def); // add all event links in our array
+                resolve();
+            }));
+        }
+
+        var processOutput = (def, id) => {
+            addNodePromises.push( new Promise( async (resolve) => {
+                id = this.m.prefixId(id, "output");
+                var pkg = this.m.getNode(id).getPackage();
+                await this.addNode(id, pkg, def); // add the node
+                gatherLinks(id, def); // add all data links in our array
+                gatherEvents(id, def); // add all event links in our array
+                resolve();
+            }));
+        }
+
+        return new Promise(async (resolve) => {
+            // All nodes are now added
+            await this.zoomer.deactivate();
+            _.each(app.modules, processModule);
+            _.each(app.ui, processModule);
+            _.each(app.input, processInput);
+            _.each(app.output, processOutput);
+
+            Promise.all(addNodePromises).then(async () => {
+                // add the links
+                _.each(links, (link) => {
+                    this.addLink(link.sourceId, link.sourceOutput, link.targetId, link.targetInput);
+                });
+
+                // add the events
+                if( this.showEvents ) {
+                    _.each(events, (e) => {
+                        this.addEvent(e.sourceId, e.targetId, e.name);
+                    });
+                }
+
+                await this.canvasSizeHandler.resize();
+                await this.zoomer.activate();
+                // Initialize all listeners again
+                this.initializeListeners();
+                await this.setEventMode(this.showEvents);
+
+                await this.showCanvas();
+                resolve();
+            });
+        });
+    }
+
+    runApp(options) {
+        var json = this.m.getEditorCompatibleJson();
+        this.appManager.run(json, options);
+    }
+
+    takeAndLoadSnapshot() {
+        var json = this.appManager.getSnapshot();
+        // if we're not on the 1st tab, go there
+        this.div.find("a[data-toggle='tab'][href='#1']").click();
+        this.e.setApp(json);
+    }
+
+    killApp() {
+        this.appManager.kill();
+    }
+}
+
+module.exports = GraphView;