lexgui 0.1.29 → 0.1.31

package/build/components/nodegraph.js

@@ -4,43 +4,7 @@ if(!LX) {
     throw("lexgui.js missing!");
 }
 
-LX.components.push( 'Graph' );
-
-function flushCss(element) {
-    // By reading the offsetHeight property, we are forcing
-    // the browser to flush the pending CSS changes (which it
-    // does to ensure the value obtained is accurate).
-    element.offsetHeight;
-}
-
-function swapElements (obj, a, b) {
-    [obj[a], obj[b]] = [obj[b], obj[a]];
-}
-
-function swapArrayElements (array, id0, id1) {
-    [array[id0], array[id1]] = [array[id1], array[id0]];
-};
-
-function sliceChar(str, idx) {
-    return str.substr(0, idx) + str.substr(idx + 1);
-}
-
-function firstNonspaceIndex(str) {
-    return str.search(/\S|$/);
-}
-
-function deleteElement( el ) {
-    if( el ) el.remove();
-}
-
-let ASYNC_ENABLED = true;
-
-function doAsync( fn, ms ) {
-    if( ASYNC_ENABLED )
-        setTimeout( fn, ms ?? 0 );
-    else
-        fn();
-}
+LX.components.push( 'GraphEditor' );
 
 class BoundingBox {
 
@@ -50,7 +14,7 @@ class BoundingBox {
         this.size = s ?? new LX.vec2( 0, 0 );
     }
 
-    merge ( bb ) {
+    merge( bb ) {
 
         console.assert( bb.constructor == BoundingBox );
 
@@ -67,7 +31,7 @@ class BoundingBox {
         this.size = merge_max.sub( merge_min );
     }
 
-    inside ( bb ) {
+    inside( bb, full = true ) {
 
         const min_0 = this.origin;
         const max_0 = this.origin.add( this.size );
@@ -75,8 +39,16 @@ class BoundingBox {
         const min_1 = bb.origin;
         const max_1 = bb.origin.add( bb.size );
 
-        return min_1.x >= min_0.x && max_1.x <= max_0.x
-                && min_1.y >= min_0.y && max_1.y <= max_0.y;
+        if( full )
+        {
+            return min_1.x >= min_0.x && max_1.x <= max_0.x
+                    && min_1.y >= min_0.y && max_1.y <= max_0.y;
+        }
+        else
+        {
+            return max_1.x >= min_0.x && min_1.x <= max_0.x
+                && max_1.y >= min_0.y && min_1.y <= max_0.y;
+        }
     }
 };
 
@@ -97,6 +69,10 @@ class GraphEditor {
     static EVENT_MOUSEWHEEL     = 1;
 
     static LAST_GROUP_ID        = 0;
+    static LAST_FUNCTION_ID     = 0;
+
+    static STOPPED              = 0;
+    static RUNNING              = 1;
 
     // Node Drawing
 
@@ -114,10 +90,10 @@ class GraphEditor {
 
         GraphEditor.__instances.push( this );
 
-        area.addSidebar( m => {
-            m.add( "Scene", { icon: "fa fa-cube", callback: () => { codeArea.hide(); show( canvas ); } } );
-            m.add( "Code", { icon: "fa fa-code", callback: () => { hide( canvas ); codeArea.show(); } } );
-            m.add( "Search", { icon: "fa fa-search", bottom: true, callback: () => { } } );
+        const useSidebar = options.sidebar ?? true;
+
+        this._sidebar = area.addSidebar( m => {
+            m.add( "Create", { icon: "fa fa-add", bottom: true, callback: (e) => this._onSidebarCreate( e ) } );
         });
 
         this.base_area = area;
@@ -127,12 +103,20 @@ class GraphEditor {
 
         this.root = this.area.root;
         this.root.tabIndex = -1;
+
         area.attach( this.root );
 
+        this._graphContainer = area.sections[ 1 ].root;
+        this._sidebarDom = area.sections[ 0 ].root;
+        this._sidebarActive = useSidebar;
+
+        // Set sidebar state depending on options..
+        this._toggleSideBar( useSidebar );
+
         // Bind resize
 
         area.onresize = ( bb ) => {
-            console.log(bb);
+            
         };
 
         area.addOverlayButtons( [
@@ -141,27 +125,20 @@ class GraphEditor {
                 icon: "fa fa-table-columns",
                 callback: () => this._toggleSideBar(),
             },
-            // [
-            //     {
-            //         name: "Select",
-            //         icon: "fa fa-arrow-pointer",
-            //         callback: (value, event) => console.log(value),
-            //         selectable: true
-            //     },
-            //     {
-            //         name: "Move",
-            //         icon: "fa-solid fa-arrows-up-down-left-right",
-            //         img: "https://webglstudio.org/latest/imgs/mini-icon-gizmo.png",
-            //         callback: (value, event) => console.log(value),
-            //         selectable: true
-            //     },
-            //     {
-            //         name: "Rotate",
-            //         icon: "fa-solid fa-rotate-right",
-            //         callback: (value, event) => console.log(value),
-            //         selectable: true
-            //     }
-            // ],
+            [
+                {
+                    name: "Start Graph",
+                    icon: "fa fa-play",
+                    callback: (value, event) => this.start(),
+                    selectable: true
+                },
+                {
+                    name: "Stop Graph",
+                    icon: "fa-solid fa-stop",
+                    callback: (value, event) => this.stop(),
+                    selectable: true
+                }
+            ],
             [
                 {
                     name: "Enable Snapping",
@@ -184,9 +161,14 @@ class GraphEditor {
                 {
                     name: "Export",
                     icon: "fa fa-diagram-project",
-                    callback: (value, event) => this.graph.export()
+                    callback: (value, event) => this.currentGraph.export()
                 }
-            ]
+            ],
+            {
+                name: "",
+                class: "graph-title",
+                callback: (value, event) => this._showRenameGraphDialog()
+            }
         ], { float: "htc" } );
 
         this.root.addEventListener( 'keydown', this._processKeyDown.bind( this ), true );
@@ -202,7 +184,7 @@ class GraphEditor {
         this.root.addEventListener( 'focusout', this._processFocus.bind( this, false ) );
 
         this.propertiesDialog = new LX.PocketDialog( "Properties", null, {
-            size: [ "300px", null ],
+            size: [ "350px", null ],
             position: [ "8px", "8px" ],
             float: "left",
             class: 'lexgraphpropdialog'
@@ -236,18 +218,17 @@ class GraphEditor {
 
         this.keys = { };
 
-        this._sidebar = area.sections[ 0 ].root;
-        this._sidebarActive = false;
-
         this._snapToGrid = false;
         this._snapValue = 1.0;
 
-        this._scale = 1.0;
+        // Graphs, Nodes and connections
 
-        // Nodes and connections
+        this.currentGraph   = null;
 
-        this.nodes      = { };
-        this.variables  = { };
+        this.graphs         = { };
+        this.nodes          = { };
+        this.groups         = { };
+        this.variables      = { };
 
         this.selectedNodes = [ ];
 
@@ -273,7 +254,6 @@ class GraphEditor {
         // Back pattern
         
         const f = 15.0;
-        this._patternPosition = new LX.vec2( 0, 0 );
         this._patternSize = new LX.vec2( f );
         this._circlePatternSize = f * 0.04;
         this._circlePatternColor = '#71717a9c';
@@ -372,6 +352,11 @@ class GraphEditor {
         node.position = new LX.vec2( 0, 0 );
         node.color = null;
 
+        if( baseClass.name == 'NodeFunction' )
+        {
+            node.gid = baseClass.gid;
+        }
+
         // Extra options
         if ( options ) {
             for (var i in options) {
@@ -393,24 +378,41 @@ class GraphEditor {
 
     setGraph( graph ) {
 
+        // Nothing to do, already there...
+        if( this.currentGraph && graph.id == this.currentGraph.id )
+            return;
+
         this.clear();
 
-        this.graph = graph;
+        graph.id = graph.id ?? graph.constructor.name  + '-' + LX.UTILS.uidGenerator();
+
+        this.graphs[ graph.id ] = graph;
 
-        if( !this.graph.nodes )
+        if( !graph.nodes )
         {
             console.warn( 'Graph does not contain any node!' );
             return;
         }
 
-        for( let node of this.graph.nodes )
+        this.currentGraph = graph;
+
+        this._updatePattern();
+
+        for( let node of graph.nodes )
         {
             this._createNodeDOM( node );
         }
 
-        for( let linkId in this.graph.links )
+        for( let group of graph.groups )
+        {
+            const groupDom = this._createGroup( group );
+            groupDom.querySelector( '.lexgraphgrouptitle' ).value = group.name;
+            this._domNodes.prepend( groupDom );
+        }
+
+        for( let linkId in graph.links )
         {
-            const links = this.graph.links[ linkId ];
+            const links = graph.links[ linkId ];
 
             for( let link of links )
             {
@@ -418,24 +420,21 @@ class GraphEditor {
             }
         }
 
-        // TODO: REMOVE THIS (DEBUG)
-        this.start();
-        // 
+        this._updateGraphName( graph.name );
+        this._togglePropertiesDialog( false );
     }
 
     /**
      * @method loadGraph
-     * @param {Graph} graph
+     * @param {String} url
+     * @param {Function} callback Function to call once the graph is loaded
      */
 
     loadGraph( url, callback ) {
 
         const onComplete = ( json ) => {
 
-            var graph = new Graph();
-            graph.configure( json );
-
-            this.setGraph( graph );
+            let graph = ( json.type == 'Graph' ) ? this.addGraph( json ) : this.addGraphFunction( json );
 
             if( callback )
                 callback( graph );
@@ -446,6 +445,86 @@ class GraphEditor {
         LX.requestJSON( url, onComplete, onError );
     }
 
+    /**
+     * @method addGraph
+     * @param {Object} o Options to configure the graph
+     */
+
+    addGraph( o ) {
+
+        let graph = new Graph();
+        graph.editor = this;
+
+        if( o )
+        {
+            // Load functions first if any..
+
+            for( let fn of o.functions ?? [] )
+            {
+                this.addGraphFunction( fn );
+            }
+
+            graph.configure( o );
+        }
+
+        this.setGraph( graph );
+
+        this._sidebar.add( graph.name, { icon: "fa fa-diagram-project", className: graph.id, callback: (e) => { this.setGraph( graph ) } } );
+
+        this._sidebar.select( graph.name );
+
+        return graph;
+    }
+
+    /**
+     * @method addGraphFunction
+     * @param {Object} o Options to configure the graph
+     */
+
+    addGraphFunction( o ) {
+
+        let func = new GraphFunction();
+        func.editor = this;
+
+        if( o )
+        {
+            // Load other inner functions first if any..
+
+            for( let fn of o.functions ?? [] )
+            {
+                this.addGraphFunction( fn );
+            }
+
+            func.configure( o );
+        }
+
+        this.setGraph( func );
+
+        // Add a new node to use this function..
+
+        class NodeFunction extends GraphNode
+        {
+            onCreate() {
+                this.addInput( null, "float" );
+                this.addOutput( null, "any" );
+            }
+
+            onExecute() {
+                const func = NodeFunction.func;
+                const value = func.getOutputData( this.getInput( 0 ) );
+                this.setOutput( 0, value );
+            }
+        }
+
+        NodeFunction.func = func;
+        NodeFunction.gid = func.id;
+        GraphEditor.registerCustomNode( "function/" + func.name, NodeFunction );
+
+        this._sidebar.add( func.name, { icon: "fa fa-florin-sign", className: func.id, callback: (e) => { this.setGraph( func ) } } );
+
+        this._sidebar.select( func.name );
+    }
+
     /**
      * @method clear
      */
@@ -470,10 +549,10 @@ class GraphEditor {
 
     propagateEventToAllNodes( eventName, params ) {
 
-        if( !this.graph )
+        if( !this.currentGraph )
             return;
 
-        for ( let node of this.graph.nodes )
+        for ( let node of this.currentGraph.nodes )
         {
             if( !node[ eventName ] )
                 continue;
@@ -511,6 +590,7 @@ class GraphEditor {
     _createNodeDOM( node ) {
 
         node.editor = this;
+        node.graphID = this.currentGraph.id;
 
         var nodeContainer = document.createElement( 'div' );
         nodeContainer.classList.add( 'lexgraphnode' );
@@ -527,6 +607,12 @@ class GraphEditor {
             const category = node.constructor.category;
             nodeContainer.classList.add( category );
         }
+        else
+        {
+            const pos = node.type.lastIndexOf( "/" );
+            const category = node.type.substring( 0, pos );
+            nodeContainer.classList.add( category );
+        }
 
         // Update with manual color
 
@@ -582,14 +668,16 @@ class GraphEditor {
             LX.addContextMenu(null, e, m => {
 
                 m.add( "Copy", () => {
-                    // TODO
-                    // ...
+                    this._clipboardData = {
+                        id: node.id,
+                        gid: this.currentGraph.id
+                    };
                 } );
 
-                m.add( "Paste", () => {
-                    // TODO
-                    // ...
-                } );
+                // TODO
+                // m.add( "Paste", () => {
+
+                // } );
 
                 m.add( "" );
 
@@ -604,6 +692,13 @@ class GraphEditor {
             // Only for left click..
             if( e.button != LX.MOUSE_LEFT_CLICK )
                 return;
+
+            // Open graph function..
+            if( node.constructor.func )
+            {
+                this._sidebar.select( node.constructor.func.name )
+            }
+
         } );
 
         // Title header
@@ -613,7 +708,7 @@ class GraphEditor {
         nodeContainer.appendChild( nodeHeader );
 
         // Properties
-        // if( node.properties.length && node.constructor.category == 'inputs'  )
+        // if( node.properties.length  )
         // {
         //     var nodeProperties = document.createElement( 'div' );
         //     nodeProperties.classList.add( 'lexgraphnodeproperties' );
@@ -656,7 +751,7 @@ class GraphEditor {
         {
             var nodeInputs = null;
 
-            if( node.inputs && node.inputs.length )
+            if( hasInputs )
             {
                 nodeInputs = document.createElement( 'div' );
                 nodeInputs.classList.add( 'lexgraphnodeinputs' );
@@ -678,6 +773,7 @@ class GraphEditor {
 
                 var type = document.createElement( 'span' );
                 type.className = 'io__type input ' + i.type;
+                type.dataset[ 'type' ] = i.type;
                 type.innerHTML = '<span>' + i.type[ 0 ].toUpperCase() + '</span>';
                 input.appendChild( type );
 
@@ -702,7 +798,7 @@ class GraphEditor {
         {
             var nodeOutputs = null;
 
-            if( node.outputs && node.outputs.length )
+            if( hasOutputs )
             {
                 nodeOutputs = document.createElement( 'div' );
                 nodeOutputs.classList.add( 'lexgraphnodeoutputs' );
@@ -731,6 +827,7 @@ class GraphEditor {
 
                 var type = document.createElement( 'span' );
                 type.className = 'io__type output ' + o.type;
+                type.dataset[ 'type' ] = o.type;
                 type.innerHTML = '<span>' + o.type[ 0 ].toUpperCase() + '</span>';
                 output.appendChild( type );
 
@@ -750,6 +847,141 @@ class GraphEditor {
             onDragStart: this._onDragNode.bind( this )
         } );
 
+        this._addNodeIOEvents( nodeContainer );
+
+        const id = node.id ?? node.title.toLowerCase().replaceAll( /\s/g, '-' ) + '-' + LX.UTILS.uidGenerator();
+        this.nodes[ id ] = { data: node, dom: nodeContainer };
+
+        node.id = id;
+        nodeContainer.dataset[ 'id' ] = id;
+
+        this._domNodes.appendChild( nodeContainer );
+
+        // Only 1 main per graph!
+        if( node.title == 'Main' )
+        {
+            this.main = id;
+        }
+
+        node.size = new LX.vec2( nodeContainer.offsetWidth, nodeContainer.offsetHeight );
+
+        node.resizeObserver = new ResizeObserver( entries => {
+
+            for( const entry of entries ) {
+                const bb = entry.contentRect;
+                if( !bb.width || !bb.height )
+                    continue;
+                node.size = new LX.vec2( nodeContainer.offsetWidth, nodeContainer.offsetHeight );
+            }
+        });
+
+        node.resizeObserver.observe( nodeContainer );
+
+        return nodeContainer;
+    }
+
+    _updateNodeDOMIOs( dom, node ) {
+
+        // Inputs and outputs
+        var nodeIO = dom.querySelector( '.lexgraphnodeios' );
+
+        const hasInputs = node.inputs && node.inputs.length;
+        const hasOutputs = node.outputs && node.outputs.length;
+
+        // Inputs
+        {
+            var nodeInputs = null;
+
+            if( hasInputs )
+            {
+                nodeInputs = nodeIO.querySelector( '.lexgraphnodeinputs' );
+                nodeInputs.innerHTML = "";
+            }
+
+            for( let i of node.inputs )
+            {
+                if( !i.type )
+                {
+                    console.warn( `Missing type for node [${ node.title }], skipping...` );
+                    continue;
+                }
+
+                var input = document.createElement( 'div' );
+                input.className = 'lexgraphnodeio ioinput';
+                input.dataset[ 'index' ] = nodeInputs.childElementCount;
+
+                var type = document.createElement( 'span' );
+                type.className = 'io__type input ' + i.type;
+                type.innerHTML = '<span>' + i.type[ 0 ].toUpperCase() + '</span>';
+                input.appendChild( type );
+
+                var typeDesc = document.createElement( 'span' );
+                typeDesc.className = 'io__typedesc input ' + i.type;
+                typeDesc.innerHTML = i.type;
+                input.appendChild( typeDesc );
+
+                if( i.name )
+                {
+                    var name = document.createElement( 'span' );
+                    name.classList.add( 'io__name' );
+                    name.innerText = i.name;
+                    input.appendChild( name );
+                }
+
+                nodeInputs.appendChild( input );
+            }
+        }
+
+        // Outputs
+        {
+            var nodeOutputs = null;
+
+            if( hasOutputs )
+            {
+                nodeOutputs = nodeIO.querySelector( '.lexgraphnodeoutputs' );
+                nodeOutputs.innerHTML = "";
+            }
+
+            for( let o of node.outputs )
+            {
+                if( !o.type  )
+                {
+                    console.warn( `Missing type for node [${ node.title }], skipping...` );
+                }
+
+                var output = document.createElement( 'div' );
+                output.className = 'lexgraphnodeio iooutput';
+                output.dataset[ 'index' ] = nodeOutputs.childElementCount;
+
+                if( o.name )
+                {
+                    var name = document.createElement( 'span' );
+                    name.classList.add( 'io__name' );
+                    name.innerText = o.name;
+                    output.appendChild( name );
+                }
+
+                var type = document.createElement( 'span' );
+                type.className = 'io__type output ' + o.type;
+                type.innerHTML = '<span>' + o.type[ 0 ].toUpperCase() + '</span>';
+                output.appendChild( type );
+
+                var typeDesc = document.createElement( 'span' );
+                typeDesc.className = 'io__typedesc output ' + o.type;
+                typeDesc.innerHTML = o.type;
+                output.appendChild( typeDesc );
+
+                nodeOutputs.appendChild( output );
+            }
+        }
+
+        this._addNodeIOEvents( dom );
+    }
+
+    _addNodeIOEvents( nodeContainer ) {
+
+        const nodeIO = nodeContainer.querySelector( '.lexgraphnodeios' );
+
         // Manage links
 
         nodeIO.querySelectorAll( '.lexgraphnodeio' ).forEach( el => {
@@ -775,8 +1007,11 @@ class GraphEditor {
 
             el.addEventListener( 'mouseup', e => {
 
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+
                 // Single click..
-                if( ( LX.getTime() - this.lastMouseDown ) < 120 ) {
+                if( ( LX.getTime() - this.lastMouseDown ) < 200 ) {
                     delete this._generatingLink;
                     return;
                 }
@@ -787,14 +1022,11 @@ class GraphEditor {
                     if( !this._onLink( e ) )
                     {
                         // Delete entire SVG if not a successful connection..
-                        deleteElement( this._generatingLink.path ? this._generatingLink.path.parentElement : null );
+                        LX.UTILS.deleteElement( this._generatingLink.path ? this._generatingLink.path.parentElement : null );
                     }
 
                     delete this._generatingLink;
                 }
-
-                e.stopPropagation();
-                e.stopImmediatePropagation();
             } );
 
             el.addEventListener( 'click', e => {
@@ -808,36 +1040,29 @@ class GraphEditor {
             } );
 
         } );
+    }
 
-        const id = node.id ?? node.title.toLowerCase().replaceAll( /\s/g, '-' ) + '-' + LX.UTILS.uidGenerator();
-        this.nodes[ id ] = { data: node, dom: nodeContainer };
+    _getAllDOMNodes( includeGroups, exclude ) {
         
-        node.id = id;
-        nodeContainer.dataset[ 'id' ] = id;
+        var elements = null;
 
-        this._domNodes.appendChild( nodeContainer );
+        if( includeGroups )
+            elements = Array.from( this._domNodes.childNodes );
+        else
+            elements = Array.from( this._domNodes.childNodes ).filter( v => v.classList.contains( 'lexgraphnode' ) );
 
-        // Only 1 main per graph!
-        if( node.title == 'Main' )
+        if( exclude )
         {
-            this.main = nodeContainer;
+            elements = elements.filter( v => v != exclude );
         }
 
-        return nodeContainer;
-    }
-
-    _getAllDOMNodes( includeGroups ) {
-        
-        if( includeGroups )
-            return this._domNodes.childNodes;
-
-        return Array.from( this._domNodes.childNodes ).filter( v => v.classList.contains( 'lexgraphnode' ) );
+        return elements;
     }
 
     _onMoveNodes( target ) {
 
         let dT = this._snapToGrid ? this._snappedDeltaMousePosition : this._deltaMousePosition;
-        dT.div( this._scale, dT);
+        dT.div( this.currentGraph.scale, dT);
 
         for( let nodeId of this.selectedNodes )
         {
@@ -867,17 +1092,20 @@ class GraphEditor {
             return;
 
         let dT = this._snapToGrid ? this._snappedDeltaMousePosition : this._deltaMousePosition;
-        dT.div( this._scale, dT);
+        dT.div( this.currentGraph.scale, dT);
 
         this._translateNode( target, dT );
 
         for( let nodeId of groupNodeIds )
         {
-            const el = this._getNodeDOMElement( nodeId );
+            const isGroup = nodeId.constructor !== String;
 
-            this._translateNode( el, dT );
+            const el = isGroup ? nodeId : this._getNodeDOMElement( nodeId );
 
-            this._updateNodeLinks( nodeId );
+            this._translateNode( el, dT, !isGroup );
+
+            if( !isGroup )
+                this._updateNodeLinks( nodeId );
         }
     }
 
@@ -889,7 +1117,7 @@ class GraphEditor {
 
         const groupNodeIds = [ ];
 
-        for( let dom of this._getAllDOMNodes() )
+        for( let dom of this._getAllDOMNodes( true, target ) )
         {
             const x = parseFloat( dom.style.left );
             const y = parseFloat( dom.style.top );
@@ -898,7 +1126,7 @@ class GraphEditor {
             if( !group_bb.inside( node_bb ) )
                 continue;
 
-            groupNodeIds.push( dom.dataset[ 'id' ] );
+            groupNodeIds.push( dom.dataset[ 'id' ] ?? dom );
         }
 
         target.nodes = groupNodeIds;
@@ -966,6 +1194,16 @@ class GraphEditor {
             case 'select':
                 panel.addDropdown( p.name, p.options, p.value, (v) => { p.value = v } );
                 break;
+            case 'array':
+                panel.addArray( p.name, p.value, (v) => {
+                    p.value = v;
+                    if( node.type == "function/Input" )
+                    {
+                        node.setOutputs( v );
+                        this._updateNodeDOMIOs( dom, node );
+                    }
+                }, { innerValues: p.options } );
+                break;
             }
         }
 
@@ -984,7 +1222,7 @@ class GraphEditor {
             this._togglePropertiesDialog( false );
     }
 
-    _translateNode( dom, deltaTranslation ) {
+    _translateNode( dom, deltaTranslation, updateBasePosition = true ) {
 
         const translation = deltaTranslation.add( new LX.vec2( parseFloat( dom.style.left ), parseFloat( dom.style.top ) ) );
 
@@ -998,27 +1236,44 @@ class GraphEditor {
 
         dom.style.left = ( translation.x ) + "px";
         dom.style.top = ( translation.y ) + "px";
+
+        // Update base node position..
+        if( updateBasePosition && dom.dataset[ 'id' ] )
+        {
+            let baseNode = this.nodes[ dom.dataset[ 'id' ] ];
+            baseNode.data.position = translation;
+        }
     }
 
     _deleteNode( nodeId ) {
 
-        const el = this._getNodeDOMElement( nodeId );
+        const nodeInfo = this.nodes[ nodeId ];
+        const node = nodeInfo.data;
+        const el = nodeInfo.dom;
 
         console.assert( el );
 
-        if( el == this.main )
+        if( node.constructor.blockDelete )
         {
-            console.warn( `Can't delete MAIN node!` );
+            console.warn( `Can't delete node!` );
             return;
         }
 
-        deleteElement( el );
+        LX.UTILS.deleteElement( el );
+
+        // Delete from the editor
 
         delete this.nodes[ nodeId ];
 
+        // Delete from the graph data
+
+        const idx = this.currentGraph.nodes.findIndex( v => v.id === nodeId );
+        console.assert( idx >= 0 );
+        this.currentGraph.nodes.splice( idx, 1 );
+
         // Delete connected links..
         
-        for( let key in this.graph.links )
+        for( let key in this.currentGraph.links )
         {
             if( !key.includes( nodeId ) )
                 continue;
@@ -1028,13 +1283,13 @@ class GraphEditor {
 
             // Remove the connection from the other before deleting..
 
-            const numLinks = this.graph.links[ key ].length;
+            const numLinks = this.currentGraph.links[ key ].length;
 
             for( var i = 0; i < numLinks; ++i )
             {
-                var link = this.graph.links[ key ][ i ];
+                var link = this.currentGraph.links[ key ][ i ];
 
-                deleteElement( link.path.parentElement );
+                LX.UTILS.deleteElement( link.path.parentElement );
 
                 const targetNodeId = targetIsInput ? link.inputNode : link.outputNode;
 
@@ -1057,19 +1312,60 @@ class GraphEditor {
                 {
                     var active = false;
                     for( var links of  io.links )
-                        for( var j of links ){
-                            console.log(j)
+                    {
+                        if( !links )
+                            continue;
+                        for( var j of links ) {
                             active |= ( !!j );
                         }
+                    }
                     if( !active )
                         delete io.dataset[ 'active' ];
                 }
             }
 
-            delete this.graph.links[ key ];
+            delete this.currentGraph.links[ key ];
         }
     }
 
+    _deleteGroup( groupId ) {
+
+        const dom = this.groups[ groupId ];
+        LX.UTILS.deleteElement( dom );
+
+        // Delete from the editor
+
+        delete this.groups[ groupId ];
+
+        // Delete from the graph data
+
+        const idx = this.currentGraph.groups.findIndex( v => v.id === groupId );
+        console.assert( idx >= 0 );
+        this.currentGraph.groups.splice( idx, 1 );
+    }
+
+    _cloneNode( nodeId, graphId, position ) {
+
+        const graph = this.graphs[ graphId ?? this.currentGraph.id ];
+
+        const nodeData = graph.getNodeById( nodeId );
+
+        if( !nodeData )
+            return;
+
+        const el = this._getNodeDOMElement( nodeId );
+        const newNode = GraphEditor.addNode( nodeData.type );
+        newNode.properties = LX.deepCopy( nodeData.properties );
+
+        const newDom = this._createNodeDOM( newNode );
+
+        this._translateNode( newDom, position ?? this._getNodePosition( el ) );
+
+        this._selectNode( newDom, true );
+
+        this.currentGraph.nodes.push( newNode );
+    }
+
     _cloneNodes() {
 
         // Clone all selected nodes
@@ -1079,20 +1375,7 @@ class GraphEditor {
 
         for( let nodeId of selectedIds )
         {
-            const nodeInfo = this.nodes[ nodeId ];
-            if( !nodeInfo )
-                return;
-
-            const el = this._getNodeDOMElement( nodeId );
-            const data = nodeInfo.data;
-            const newNode = GraphEditor.addNode( data.type );
-            const newDom = this._createNodeDOM( newNode );
-
-            this._translateNode( newDom, this._getNodePosition( el ) );
-
-            this._selectNode( newDom, true );
-
-            this.graph.nodes.push( newNode );
+            this._cloneNode( nodeId );
         }
     }
 
@@ -1110,7 +1393,7 @@ class GraphEditor {
     _getLinks( nodeSrcId, nodeDstId ) {
 
         const str = nodeSrcId + '@' + nodeDstId;
-        return this.graph.links[ str ];
+        return this.currentGraph.links[ str ];
     }
 
     _deleteLinks( nodeId, io ) {
@@ -1132,7 +1415,7 @@ class GraphEditor {
             var links = this._getLinks( targetId, nodeId );
 
             var linkIdx = links.findIndex( i => ( i.inputIdx == srcIndex && i.outputIdx == targetIndex ) );
-            deleteElement( links[ linkIdx ].path.parentElement );
+            LX.UTILS.deleteElement( links[ linkIdx ].path.parentElement );
             links.splice( linkIdx, 1 );
 
             // Input has no longer any connected link
@@ -1182,7 +1465,7 @@ class GraphEditor {
                     var links = this._getLinks( nodeId, targetId );
 
                     var linkIdx = links.findIndex( i => ( i.inputIdx == targetIndex && i.outputIdx == srcIndex ) );
-                    deleteElement( links[ linkIdx ].path.parentElement );
+                    LX.UTILS.deleteElement( links[ linkIdx ].path.parentElement );
                     links.splice( linkIdx, 1 );
 
                     // Remove a connection from the output connections
@@ -1274,7 +1557,7 @@ class GraphEditor {
 
         if( this._snapToGrid )
         {
-            const snapSize = this._patternSize.x * this._snapValue * this._scale;
+            const snapSize = this._patternSize.x * this._snapValue * this.currentGraph.scale;
             snapPosition.x = Math.floor( snapPosition.x / snapSize ) * snapSize;
             snapPosition.y = Math.floor( snapPosition.y / snapSize ) * snapSize;
             this._snappedDeltaMousePosition = snapPosition.sub( this._lastSnappedMousePosition );
@@ -1291,7 +1574,8 @@ class GraphEditor {
         
         else if( e.type == 'mouseup' )
         {
-            if( ( LX.getTime() - this.lastMouseDown ) < 120 ) {
+            if( ( LX.getTime() - this.lastMouseDown ) < 200 ) {
+
                 this._processClick( e );
             }
 
@@ -1323,7 +1607,7 @@ class GraphEditor {
 
             e.preventDefault();
             
-            if( ( LX.getTime() - this.lastMouseDown ) < 120 ) {
+            if( ( LX.getTime() - this.lastMouseDown ) < 300 ) {
                 this._processContextMenu( e );
             }
         }
@@ -1374,8 +1658,14 @@ class GraphEditor {
         // It the event reaches this, the link isn't valid..
         if( this._generatingLink )
         {
-            deleteElement( this._generatingLink.path ? this._generatingLink.path.parentElement : null );
+            const linkInfo = Object.assign( { }, this._generatingLink );
+
+            // Delete old link
+            LX.UTILS.deleteElement( this._generatingLink.path ? this._generatingLink.path.parentElement : null );
             delete this._generatingLink;
+
+            // Open contextmenu to auto-connect something..
+            this._processContextMenu( e, linkInfo );
         }
 
         else if( this._boxSelecting )
@@ -1385,7 +1675,7 @@ class GraphEditor {
 
             this._selectNodesInBox( this._boxSelecting, this._mousePosition, e.altKey );
 
-            deleteElement( this._currentBoxSelectionSVG );
+            LX.UTILS.deleteElement( this._currentBoxSelectionSVG );
 
             delete this._currentBoxSelectionSVG;
             delete this._boxSelecting;
@@ -1399,7 +1689,7 @@ class GraphEditor {
 
         if( rightPressed )
         {
-            this._patternPosition.add( this._deltaMousePosition.div( this._scale ), this._patternPosition );
+            this.currentGraph.translation.add( this._deltaMousePosition.div( this.currentGraph.scale ), this.currentGraph.translation );
 
             this._updatePattern();
 
@@ -1435,10 +1725,10 @@ class GraphEditor {
 
         const delta = e.deltaY;
 
-        if( delta > 0.0 ) this._scale *= 0.9;
-        else this._scale *= ( 1.0 / 0.9 );
+        if( delta > 0.0 ) this.currentGraph.scale *= 0.9;
+        else this.currentGraph.scale *= ( 1.0 / 0.9 );
 
-        this._scale = LX.UTILS.clamp( this._scale, GraphEditor.MIN_SCALE, GraphEditor.MAX_SCALE );
+        this.currentGraph.scale = LX.UTILS.clamp( this.currentGraph.scale, GraphEditor.MIN_SCALE, GraphEditor.MAX_SCALE );
 
         // Compute zoom center in pattern space using new scale
         // and get delta..
@@ -1447,17 +1737,46 @@ class GraphEditor {
 
         const deltaCenter = newCenter.sub( center );
 
-        this._patternPosition = this._patternPosition.add( deltaCenter );
+        this.currentGraph.translation.add( deltaCenter, this.currentGraph.translation );
 
-        this._updatePattern( GraphEditor.EVENT_MOUSEWHEEL );
+        this._updatePattern();
     }
 
-    _processContextMenu( e ) {
+    _processContextMenu( e, autoConnect ) {
         
-        LX.addContextMenu( "ADD NODE", e, m => {
-            
+        LX.addContextMenu( null, e, m => {
+
+            var eventPosition = null;
+
+            if( e )
+            {
+                const rect = this.root.getBoundingClientRect();
+
+                const localPosition = new LX.vec2( e.clientX - rect.x, e.clientY - rect.y );
+
+                eventPosition = this._getPatternPosition( localPosition );
+            }
+
+            if( this._clipboardData )
+            {
+                m.add( "Paste", () => {
+
+                    const nodeId = this._clipboardData.id;
+                    const graphId = this._clipboardData.gid;
+
+                    this._cloneNode( nodeId, graphId, eventPosition );
+
+                } );
+                m.add( "" );
+            }
+
             for( let type in GraphEditor.NODE_TYPES )
             {
+                const baseClass = GraphEditor.NODE_TYPES[ type ];
+
+                if( baseClass.blockAdd )
+                    continue;
+
                 m.add( type, () => {
 
                     const newNode = GraphEditor.addNode( type );
@@ -1469,18 +1788,38 @@ class GraphEditor {
                         dom.mustSnap = true;
                     }
 
-                    if( e )
+                    if( eventPosition )
                     {
-                        const rect = this.root.getBoundingClientRect();
-            
-                        let position = new LX.vec2( e.clientX - rect.x, e.clientY - rect.y );
-            
-                        position = this._getPatternPosition( position );
-            
-                        this._translateNode( dom, position );
+                        this._translateNode( dom, eventPosition );
                     }
 
-                    this.graph.nodes.push( newNode );
+                    this.currentGraph.nodes.push( newNode );
+
+                    if( autoConnect && newNode.inputs.length )
+                    {
+                        const srcId = autoConnect.domEl.dataset[ 'id' ];
+                        const srcType = autoConnect.io.childNodes[ autoConnect.index ].dataset[ 'type' ];
+                        const srcIsInput = autoConnect.ioType == GraphEditor.NODE_IO_INPUT;
+
+                        const newLink = {
+                            inputNode: srcIsInput ? srcId : newNode.id,
+                            inputIdx: srcIsInput ? autoConnect.index : 0,
+                            inputType: srcIsInput ? srcType : newNode.inputs[ 0 ].type,
+                            outputNode: srcIsInput ? newNode.id : srcId,
+                            outputIdx: srcIsInput ? 0 : autoConnect.index,
+                            outputType: srcIsInput ? newNode.inputs[ 0 ].type : srcType,
+                        }
+
+                        // Store link
+
+                        const pathId = newLink.outputNode + '@' + newLink.inputNode;
+
+                        if( !this.currentGraph.links[ pathId ] ) this.currentGraph.links[ pathId ] = [];
+
+                        this.currentGraph.links[ pathId ].push( newLink );
+
+                        this._createLink( newLink );
+                    }
 
                 } );
             }
@@ -1494,101 +1833,40 @@ class GraphEditor {
     start() {
 
         this.mustStop = false;
+        this.state = GraphEditor.RUNNING;
 
         this.propagateEventToAllNodes( 'onStart' );
 
         requestAnimationFrame( this._frame.bind(this) );
     }
 
-    /**
-     * @method stop
-     */
-
-    stop() {
-
-        this.mustStop = true;
-        this.state = GraphEditor.STOPPED;
-
-        this.propagateEventToAllNodes( 'onStop' );
-    }
-
-    /**
-     * @method _frame
-     */
-
-    _frame() {
-
-        if( this.mustStop )
-        {
-            return;
-        }
-
-        requestAnimationFrame( this._frame.bind(this) );
-
-        this._runStep();
-    }
-
-    /**
-     * @method _runStep
-     */
-
-    _runStep() {
-        
-        const main = this.main;
-
-        if( !main )
-            return;
-
-        const visitedNodes = {  };
-        
-        this._executionNodes = [ ];
-
-        // Reser variables each step?
-        this.variables = { };
-
-        const mainId = this.main.dataset[ 'id' ];
-
-        const addNode = ( id ) => {
-
-            if( visitedNodes[ id ] )
-                return;
-
-            visitedNodes[ id ] = true;
-
-            for( let linkId in this.graph.links )
-            {
-                const idx = linkId.indexOf( '@' + id );
-
-                if( idx < 0 )
-                    continue;
-
-                const preNodeId = linkId.substring( 0, idx );
+    /**
+     * @method stop
+     */
 
-                this._executionNodes.push( preNodeId );
+    stop() {
 
-                addNode( preNodeId );
-            }
-        };
+        this.mustStop = true;
+        this.state = GraphEditor.STOPPED;
 
-        // TODO: Search "no output" nodes and add to the executable list (same as main)..
-        // ...
+        this.propagateEventToAllNodes( 'onStop' );
+    }
 
-        this._executionNodes.push( mainId );
+    /**
+     * @method _frame
+     */
 
-        addNode( mainId );
+    _frame() {
 
-        for( var i = this._executionNodes.length - 1; i >= 0; --i )
+        if( this.mustStop )
         {
-            const node = this.nodes[ this._executionNodes[ i ] ];
-
-            if( node.data.onBeforeStep )
-                node.data.onBeforeStep();
+            return;
+        }
 
-            node.data.execute();
+        requestAnimationFrame( this._frame.bind(this) );
 
-            if( node.data.onBeforeStep )
-                node.data.onAfterStep();
-        }
+        // Only run here main graph!
+        this.currentGraph._runStep( this.main );
     }
 
     _generatePattern() {
@@ -1597,8 +1875,8 @@ class GraphEditor {
         {
             var pattern = document.createElementNS( 'http://www.w3.org/2000/svg', 'pattern' );
             pattern.setAttribute( 'id', 'pattern-0' );
-            pattern.setAttribute( 'x', this._patternPosition.x );
-            pattern.setAttribute( 'y', this._patternPosition.y );
+            pattern.setAttribute( 'x', 0.0 );
+            pattern.setAttribute( 'y', 0.0 );
             pattern.setAttribute( 'width', this._patternSize.x )
             pattern.setAttribute( 'height', this._patternSize.y );
             pattern.setAttribute( 'patternUnits', 'userSpaceOnUse' );
@@ -1638,9 +1916,9 @@ class GraphEditor {
         if( !this._background )
             return;
 
-        const patternSize = this._patternSize.mul( this._scale );
-        const circlePatternSize = this._circlePatternSize * this._scale;
-        const patternPosition = this._patternPosition.mul( this._scale );
+        const patternSize = this._patternSize.mul( this.currentGraph.scale );
+        const circlePatternSize = this._circlePatternSize * this.currentGraph.scale;
+        const patternPosition = this.currentGraph.translation.mul( this.currentGraph.scale );
         
         let pattern = this._background.querySelector( 'pattern' );
         pattern.setAttribute( 'x', patternPosition.x );
@@ -1658,24 +1936,34 @@ class GraphEditor {
         const w = this._domNodes.offsetWidth * 0.5;
         const h = this._domNodes.offsetHeight * 0.5;
 
-        const dw = w - w * this._scale;
-        const dh = h - h * this._scale;
+        const dw = w - w * this.currentGraph.scale;
+        const dh = h - h * this.currentGraph.scale;
 
         this._domNodes.style.transform = `
             translate(` + ( patternPosition.x - dw ) + `px, ` + ( patternPosition.y - dh ) + `px) 
-            scale(` + this._scale + `)
+            scale(` + this.currentGraph.scale + `)
         `;
         this._domLinks.style.transform = this._domNodes.style.transform;
+
+        // Hide nodes outside the viewport
+
+        const nodesOutsideViewport = this._getNonVisibleNodes();
+
+        for( let node of nodesOutsideViewport )
+        {
+            let dom = this._getNodeDOMElement( node.id );
+            dom.classList.toggle( 'hiddenOpacity', true );
+        }
     }
 
     _getPatternPosition( renderPosition ) {
 
-        return renderPosition.div( this._scale ).sub( this._patternPosition );
+        return renderPosition.div( this.currentGraph.scale ).sub( this.currentGraph.translation );
     }
 
     _getRenderPosition( patternPosition ) {
 
-        return patternPosition.add( this._patternPosition ).mul( this._scale );
+        return patternPosition.add( this.currentGraph.translation ).mul( this.currentGraph.scale );
     }
 
     _onLink( e ) {
@@ -1738,11 +2026,6 @@ class GraphEditor {
             this._deleteLinks( src_nodeId, linkData.io );
         }
 
-        // Mark as active 
-
-        linkData.io.dataset[ 'active' ] = true;
-        e.target.parentElement.dataset[ 'active' ] = true;
-
         // Store the end io..
 
         var srcDom = linkData.io;
@@ -1763,9 +2046,9 @@ class GraphEditor {
 
         const pathId = ( srcIsInput ? dst_nodeId : src_nodeId ) + '@' + ( srcIsInput ? src_nodeId : dst_nodeId );
 
-        if( !this.graph.links[ pathId ] ) this.graph.links[ pathId ] = [];
+        if( !this.currentGraph.links[ pathId ] ) this.currentGraph.links[ pathId ] = [];
 
-        this.graph.links[ pathId ].push( {
+        this.currentGraph.links[ pathId ].push( {
             path: path,
             inputNode: srcIsInput ? src_nodeId : dst_nodeId,
             inputIdx: srcIsInput ? src_ioIndex : dst_ioIndex,
@@ -1777,6 +2060,11 @@ class GraphEditor {
 
         path.dataset[ 'id' ] = pathId;
 
+        // Mark as active links...
+
+        linkData.io.dataset[ 'active' ] = true;
+        e.target.parentElement.dataset[ 'active' ] = true;
+
         // Successful link..
         return true;
     }
@@ -1814,6 +2102,7 @@ class GraphEditor {
 
         let startPos = new LX.vec2( startRect.x - offsetX, startRect.y - offsetY );
         let endPos = null;
+        let endioEl = null;
 
         if( e )
         {
@@ -1822,7 +2111,6 @@ class GraphEditor {
             // Add node position, since I can't get the correct position directly from the event..
             if( e.target.hasClass( [ 'lexgraphnode', 'lexgraphgroup' ] ) )
             {
-                console.log( this._getNodePosition( e.target ) );
                 endPos.add( this._getNodePosition( e.target ), endPos );
                 endPos.add( new LX.vec2( 3, 3 ), endPos );
             }
@@ -1840,7 +2128,8 @@ class GraphEditor {
         }
         else
         {
-            const ioRect = endIO.querySelector( '.io__type' ).getBoundingClientRect();
+            endioEl = endIO.querySelector( '.io__type' );
+            const ioRect = endioEl.getBoundingClientRect();
             endPos = new LX.vec2( ioRect.x - offsetX, ioRect.y - offsetY );
         }
 
@@ -1851,7 +2140,11 @@ class GraphEditor {
             startPos = tmp;
         }
 
-        const color = getComputedStyle( ioEl ).backgroundColor;
+        let color = getComputedStyle( ioEl ).backgroundColor;
+
+        if( type == GraphEditor.NODE_IO_OUTPUT && endioEl )
+            color = getComputedStyle( endioEl ).backgroundColor;
+
         this._createLinkPath( path, startPos, endPos, color, !!e );
 
         return path;
@@ -1907,11 +2200,14 @@ class GraphEditor {
         io1.links = [ ];
         io1.links[ link.outputIdx ] = io1.links[ link.outputIdx ] ?? [ ];
         io1.links[ link.outputIdx ].push( link.outputNode );
+
+        io0.dataset[ 'active' ] = true;
+        io1.dataset[ 'active' ] = true;
     }
 
     _createLinkPath( path, startPos, endPos, color, exactEnd ) {
 
-        const dist = 6 * this._scale;
+        const dist = 6 * this.currentGraph.scale;
         startPos.add( new LX.vec2( dist, dist ), startPos );
 
         if( !exactEnd )
@@ -2062,16 +2358,44 @@ class GraphEditor {
         "/>`;
     }
 
-    // TODO: Return the ones in the viewport
-    _getVisibleNodes() {
+    _getNonVisibleNodes() {
+
+        const nonVisibleNodes = [ ];
 
-        if( !this.graph )
+        if( !this.currentGraph )
         {
             console.warn( "No graph set" );
             return [];
         }
 
-        return this.graph.nodes;
+        const graph_bb = new BoundingBox( new LX.vec2( 0, 0 ), new LX.vec2( this.root.offsetWidth, this.root.offsetHeight ) );
+
+        for( let node of this.currentGraph.nodes )
+        {
+            let pos = this._getRenderPosition( node.position );
+
+            let dom = this._getNodeDOMElement( node.id );
+
+            if( !dom )
+                continue;
+
+            const node_bb = new BoundingBox( pos, node.size.mul( this.currentGraph.scale ) );
+
+            if( graph_bb.inside( node_bb, false ) )
+            {
+                // Show if node in viewport..
+                dom.classList.toggle( 'hiddenOpacity', false );
+
+                // And hide content if scale is very small..
+                dom.childNodes[ 1 ].classList.toggle( 'hiddenOpacity', this.currentGraph.scale < 0.5 );
+
+                continue;
+            }
+
+            nonVisibleNodes.push( node );
+        }
+
+        return nonVisibleNodes;
     }
 
     _selectNodesInBox( lt, rb, remove ) {
@@ -2145,11 +2469,8 @@ class GraphEditor {
 
         for( let nodeId of nodeIds )
         {
-            const dom = this._getNodeDOMElement( nodeId );
-
-            const x = parseFloat( dom.style.left );
-            const y = parseFloat( dom.style.top );
-            const node_bb = new BoundingBox( new LX.vec2( x, y ), new LX.vec2( dom.offsetWidth - 6, dom.offsetHeight - 6 ) );
+            const node = this.nodes[ nodeId ].data;
+            const node_bb = new BoundingBox( node.position, node.size );
 
             if( group_bb )
             {
@@ -2180,11 +2501,13 @@ class GraphEditor {
      * @returns JSON data from the serialized graph
      */
 
-    _createGroup() {
+    _createGroup( bb ) {
 
-        const group_bb = this._getBoundingFromNodes( this.selectedNodes );
+        const group_bb = bb ?? this._getBoundingFromNodes( this.selectedNodes );
+        const group_id = bb ? bb.id : "group-" + LX.UTILS.uidGenerator();
 
         let groupDOM = document.createElement( 'div' );
+        groupDOM.id = group_id;
         groupDOM.classList.add( 'lexgraphgroup' );
         groupDOM.style.left = group_bb.origin.x + "px";
         groupDOM.style.top = group_bb.origin.y + "px";
@@ -2196,6 +2519,8 @@ class GraphEditor {
 
         groupResizer.addEventListener( 'mousedown', inner_mousedown );
 
+        this.groups[ group_id ] = groupDOM;
+
         var that = this;
         var lastPos = [0,0];
 
@@ -2215,7 +2540,7 @@ class GraphEditor {
         function inner_mousemove( e )
         {
             let dt = new LX.vec2( lastPos[0] - e.x, lastPos[1] - e.y );
-            dt.div( that._scale, dt);
+            dt.div( that.currentGraph.scale, dt);
 
             groupDOM.style.width = ( parseFloat( groupDOM.style.width ) - dt.x ) + "px";
             groupDOM.style.height = ( parseFloat( groupDOM.style.height ) - dt.y ) + "px";
@@ -2273,6 +2598,19 @@ class GraphEditor {
             groupTitle.focus();
         } );
 
+        groupDOM.addEventListener( 'contextmenu', e => {
+
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+
+            LX.addContextMenu(null, e, m => {
+                m.add( "Delete", () => {
+                    this._deleteGroup( group_id );
+                } );
+            });
+        } );
+
         groupDOM.appendChild( groupResizer );
         groupDOM.appendChild( groupTitle );
 
@@ -2286,6 +2624,8 @@ class GraphEditor {
         } );
 
         GraphEditor.LAST_GROUP_ID++;
+
+        return groupDOM;
     }
 
     _addUndoStep( deleteRedo = true )  {
@@ -2370,78 +2710,104 @@ class GraphEditor {
         }
     }
 
-    _toggleSideBar() {
+    _toggleSideBar( force ) {
 
-        this._sidebar.classList.toggle( 'hidden' );
+        this._sidebarActive = force ?? !this._sidebarActive;
+        this._sidebarDom.classList.toggle( 'hidden', !this._sidebarActive );
+        this._graphContainer.style.width = this._sidebarActive ? "calc( 100% - 64px )" : "100%";
     }
-}
 
-LX.GraphEditor = GraphEditor;
+    _onSidebarCreate( e ) {
+
+        LX.addContextMenu(null, e, m => {
+            m.add( "Graph", () => this.addGraph() );
+            m.add( "Function", () => this.addGraphFunction() );
+        });
+    }
 
+    _showRenameGraphDialog() {
 
-/**
- * @class Graph
- */
+        const dialog = new LX.Dialog( this.currentGraph.constructor.name, p => {
+            p.addText( "Name", this.currentGraph.name, v => {
+                this._updateGraphName( v );
+                dialog.close();
+            } );
+        }, { modal: true, size: [ "350px", null ] } );
+    }
 
-class Graph {
+    _updateGraphName( name ) {
 
-    /**
-     * @param {*} options
-     * 
-     */
+        const newNameKey = name.replace( /\s/g, '' ).replaceAll( '.', '' );
 
-    constructor( name, options = {} ) {
+        // Change graph name button
+        const nameDom = LX.root.querySelector( '.graph-title button' );
+        console.assert( nameDom );
+        nameDom.innerText = name;
 
-        this.name = name ?? "Unnamed Graph";
+        // Change name in sidebar
+        const graphNameKey = this.currentGraph.name.replace( /\s/g, '' ).replaceAll( '.', '' );
+        const sidebarItem = this._sidebar.items.find( v => v.name === graphNameKey );
+        if( sidebarItem )
+        {
+            sidebarItem.name = newNameKey;
+            sidebarItem.domEl.id = newNameKey;
+            sidebarItem.domEl.querySelector(".lexsidebarentrydesc").innerText = name;
+        }
 
-        // Nodes
+        // Change registered nodes function
+        const oldType = 'function/' + this.currentGraph.name;
+        const nodeClass = GraphEditor.NODE_TYPES[ oldType ];
 
-        this.nodes = [ ];
+        if( nodeClass )
+        {
+            delete GraphEditor.NODE_TYPES[ oldType ];
+
+            nodeClass.title = name;
+
+            GraphEditor.registerCustomNode( "function/" + name, nodeClass );
+        }
 
-        this.links = { };
+        this.currentGraph.name = name;
+    }
 
-        // const mainNode = GraphEditor.addNode( 'system/Main' );
-        // mainNode.position = new LX.vec2( 650, 400 );
+    _addGlobalActions() {
 
-        // const addNode = GraphEditor.addNode( 'math/Add' );
-        // addNode.position = new LX.vec2( 425, 250 );
+        
+    }
+}
 
-        // const floatNode = GraphEditor.addNode( 'inputs/Float' );
-        // floatNode.position = new LX.vec2( 200, 200 );
+LX.GraphEditor = GraphEditor;
 
-        // const stringNode = GraphEditor.addNode( 'inputs/String' );
-        // stringNode.position = new LX.vec2( 400, 50 );
 
-        // const setVarNode = GraphEditor.addNode( 'variables/SetVariable' );
-        // setVarNode.position = new LX.vec2( 650, 50 );
+/**
+ * @class Graph
+ */
 
-        // // const multNode = new GraphNode( GraphEditor.DEFAULT_NODES[ 'Multiply' ] );
-        // // multNode.position = new LX.vec2( 200, 400 );
+class Graph {
 
-        // const keydownNode = GraphEditor.addNode( 'events/KeyDown' );
-        // keydownNode.position = new LX.vec2( 600, 200 );
+    /**
+     * @param {*} options
+     * 
+     */
 
-        // const orNode = GraphEditor.addNode( 'logic/Or' );
-        // orNode.position = new LX.vec2( 435, 435 );
+    constructor( name, options = {} ) {
 
-        // const equalNode = GraphEditor.addNode( 'logic/Select' );
-        // equalNode.position = new LX.vec2( 135, 400 );
+        this.name = name ?? "Unnamed Graph";
+        this.type = 'Graph';
 
-        // this.nodes = [
-        //     mainNode,
-        //     addNode,
-        //     floatNode,
-        //     setVarNode,
-        //     stringNode,
-        //     keydownNode,
-        //     orNode,
-        //     equalNode,
-        //     // multNode
-        // ];
+        this.nodes  = [ ];
+        this.groups = [ ];
+        this.links  = { };
+        
+        this.scale = 1.0;
+        this.translation = new LX.vec2( 0, 0 );
     }
 
     configure( o ) {
 
+        this.id = o.id;
+        this.name = o.name;
+
         this.nodes.length = 0;
 
         for( let node of o.nodes )
@@ -2453,13 +2819,12 @@ class Graph {
             newNode.color = node.color;
             newNode.position = new LX.vec2( node.position.x, node.position.y );
             newNode.type = node.type;
-            // newNode.inputs = node.inputs;
-            // newNode.outputs = node.outputs;
-            // newNode.properties = node.properties;
+            newNode.properties = node.properties;
 
             this.nodes.push( newNode );
         }
 
+        this.groups = o.groups;
         this.links = o.links;
 
         // editor options?
@@ -2468,20 +2833,111 @@ class Graph {
     }
 
     /**
-     * @method export
+     * @method getNodeById
+     */
+
+    getNodeById( id ) {
+
+        for( let node of this.nodes )
+        {
+            if( node.id == id ) return node;
+        }
+    }
+
+    /**
+     * @method _runStep
+     */
+
+    _runStep( mainId ) {
+
+        if( !mainId )
+            return;
+
+        const nodes = this.nodes.reduce( ( ac, a ) => ( {...ac, [ a.id ] : a } ), {} );
+
+        // Not main graph..
+        if( !nodes[ mainId ] )
+            return;
+
+        const visitedNodes = {  };
+
+        this._executionNodes = [ ];
+
+        // Reser variables each step?
+        this.variables = { };
+
+        const addNode = ( id ) => {
+
+            if( visitedNodes[ id ] )
+                return;
+
+            visitedNodes[ id ] = true;
+
+            for( let linkId in this.links )
+            {
+                const idx = linkId.indexOf( '@' + id );
+
+                if( idx < 0 )
+                    continue;
+
+                const preNodeId = linkId.substring( 0, idx );
+
+                this._executionNodes.push( preNodeId );
+
+                addNode( preNodeId );
+            }
+        };
+
+        // TODO: Search "no output" nodes and add to the executable list (same as main)..
+        // ...
+
+        this._executionNodes.push( mainId );
+
+        addNode( mainId );
+
+        for( var i = this._executionNodes.length - 1; i >= 0; --i )
+        {
+            const node = nodes[ this._executionNodes[ i ] ];
+
+            if( node.onBeforeStep )
+                node.onBeforeStep();
+
+            node.execute();
+
+            if( node.onBeforeStep )
+                node.onAfterStep();
+        }
+    }
+
+    /**
+     * @method serialize
      * @param {Boolean} prettify
      * @returns JSON data from the serialized graph
      */
 
-    export( prettify = true ) {
+    serialize( prettify = true ) {
         
         var o = { };
-        o.nodes = [ ];
-        o.links = { };
+
+        o.id = this.id;
+        o.name = this.name;
+        o.type = this.type;
+
+        o.nodes     = [ ];
+        o.groups    = [ ];
+        o.functions = [ ];
+        o.links     = { };
 
         for( let node of this.nodes )
         {
             o.nodes.push( node.serialize() );
+
+            const fnOrigin = this.editor.graphs[ node.gid ];
+
+            if( fnOrigin )
+            {
+                o.functions.push( JSON.parse( fnOrigin.serialize() ) );
+            }
         }
 
         for( let linkId in this.links )
@@ -2491,6 +2947,15 @@ class Graph {
             o.links[ linkId ] = ioLinks;
         }
 
+        for( let group of this.groups )
+        {
+            const groupDom = this.editor.groups[ group.id ];
+            const group_bb = this.editor._getBoundingFromGroup( groupDom );
+            group_bb.id = group.id;
+            group_bb.name = group.name
+            o.groups.push( group_bb );
+        }
+
         // editor options?
 
         // zoom/translation ??
@@ -2505,10 +2970,19 @@ class Graph {
             console.error( `Can't export GraphNode [${ this.title }] of type [${ this.type }].` );
         }
 
-        LX.downloadFile( this.name + ".json", o );
-
         return o;
     }
+
+    /**
+     * @method export
+     */
+
+    export() {
+
+        const o = this.serialize();
+
+        LX.downloadFile( this.name + ".json", o );
+    }
 }
 
 LX.Graph = Graph;
@@ -2562,16 +3036,18 @@ class GraphNode {
         if( !this.inputs || !this.inputs.length || !this.inputs[ index ] )
             return;
 
+        const graph = this.editor.graphs[ this.graphID ];
+
         // Get data from link
 
-        for( let linkId in this.editor.graph.links )
+        for( let linkId in graph.links )
         {
             const idx = linkId.indexOf( '@' + this.id );
 
             if( idx < 0 )
                 continue;
 
-            const nodeLinks = this.editor.graph.links[ linkId ];
+            const nodeLinks = graph.links[ linkId ];
 
             for ( var link of nodeLinks )
             {
@@ -2589,23 +3065,27 @@ class GraphNode {
         if( !this.outputs || !this.outputs.length || !this.outputs[ index ] )
             return;
 
+        const graph = this.editor.graphs[ this.graphID ];
+
         // Set data in link
 
-        for( let linkId in this.editor.graph.links )
+        for( let linkId in graph.links )
         {
             const idx = linkId.indexOf( this.id + '@' );
 
             if( idx < 0 )
                 continue;
 
-            const nodeLinks = this.editor.graph.links[ linkId ];
+            const nodeLinks = graph.links[ linkId ];
 
             for ( var link of nodeLinks )
             {
                 if( link.outputIdx != index )
                     continue;
 
-                if( data != undefined && link.inputType != link.outputType && link.inputType != "any" && link.outputType != "any"  )
+                let innerData = data;
+
+                if( innerData != undefined && link.inputType != link.outputType && link.inputType != "any" && link.outputType != "any"  )
                 {
                     // In case of supported casting, use function to cast..
 
@@ -2613,19 +3093,14 @@ class GraphNode {
 
                     // Use function if it's possible to cast!
 
-                    data = fn ? fn( LX.deepCopy( data ) ) : null;
+                    innerData = fn ? fn( LX.deepCopy( innerData ) ) : null;
                 }
 
-                link.data = data;
+                link.data = innerData;
             }
         }
     }
 
-    getOutput( index ) {
-
-        return this.outputs[ index ].value;
-    }
-
     serialize() {
 
         var o = { };
@@ -2645,6 +3120,45 @@ class GraphNode {
 
 LX.GraphNode = GraphNode;
 
+/**
+ * @class GraphFunction
+ */
+
+class GraphFunction extends Graph {
+
+    constructor( name, options = { } ) {
+
+        super();
+
+        this.name = name ?? ( "GraphFunction" + GraphEditor.LAST_FUNCTION_ID );
+        this.type = 'GraphFunction';
+
+        GraphEditor.LAST_FUNCTION_ID++
+
+        const nodeInput = GraphEditor.addNode( "function/Input" );
+        nodeInput.position = new LX.vec2( 150, 250 );
+
+        const nodeOutput = GraphEditor.addNode( "function/Output" );
+        nodeOutput.position = new LX.vec2( 650, 350 );
+
+        this.nodes.push( nodeInput, nodeOutput );
+    }
+
+    getOutputData( inputValue ) {
+
+        const inputNode = this.nodes[ 0 ];
+        inputNode.setOutput( 0, inputValue );
+
+        const outputNode = this.nodes[ 1 ];
+
+        this._runStep( outputNode.id );
+
+        return outputNode.getInput( 0 );
+    }
+}
+
+LX.GraphFunction = GraphFunction;
+
 /* 
     ************ PREDEFINED NODES ************
 
@@ -2656,6 +3170,54 @@ LX.GraphNode = GraphNode;
         - onExecute: Callback for node execution
 */
 
+/*
+    Function nodes
+*/
+
+class NodeFuncInput extends GraphNode
+{
+    onCreate() {
+        this.addOutput( null, "float" );
+        this.addProperty( "Outputs", "array", [ "float" ], [ 'float', 'int', 'bool', 'vec2', 'vec3', 'vec4', 'mat44' ] );
+    }
+
+    onExecute() {
+        // var a = this.getInput( 0 ) ?? this.properties[ 0 ].value;
+        // var b = this.getInput( 1 ) ?? this.properties[ 1 ].value;
+        // this.setOutput( 0, a + b );
+    }
+
+    setOutputs( v ) {
+
+        this.outputs.length = 0;
+
+        for( var i of v )
+        {
+            this.outputs.push( { name: null, type: i } );
+        }
+    }
+}
+
+NodeFuncInput.blockDelete = true;
+NodeFuncInput.blockAdd = true;
+GraphEditor.registerCustomNode( "function/Input", NodeFuncInput );
+
+class NodeFuncOutput extends GraphNode
+{
+    onCreate() {
+        this.addInput( null, "any" );
+    }
+
+    onExecute() {
+        // var a = this.getInput( 0 ) ?? this.properties[ 0 ].value;
+        // var b = this.getInput( 1 ) ?? this.properties[ 1 ].value;
+        // this.setOutput( 0, a + b );
+    }
+}
+
+NodeFuncOutput.blockDelete = true;
+NodeFuncOutput.blockAdd = true;
+GraphEditor.registerCustomNode( "function/Output", NodeFuncOutput );
 
 /*
     Math nodes
@@ -3047,7 +3609,7 @@ class NodeSetVariable extends GraphNode
         var varValue = this.getInput( 1 );
         if( varValue == undefined )
             return;
-        this.graph.setVariable( varName, varValue );
+        this.editor.setVariable( varName, varValue );
         this.setOutput( 0, varValue );
     }
 }
@@ -3112,6 +3674,7 @@ class NodeMain extends GraphNode
     };
 }
 
+NodeMain.blockDelete = true;
 GraphEditor.registerCustomNode( "system/Main", NodeMain );
 
 export { GraphEditor, Graph, GraphNode };