lexgui 0.1.28 → 0.1.29

package/build/components/nodegraph.js

@@ -29,6 +29,10 @@ function firstNonspaceIndex(str) {
     return str.search(/\S|$/);
 }
 
+function deleteElement( el ) {
+    if( el ) el.remove();
+}
+
 let ASYNC_ENABLED = true;
 
 function doAsync( fn, ms ) {
@@ -38,6 +42,44 @@ function doAsync( fn, ms ) {
         fn();
 }
 
+class BoundingBox {
+
+    constructor( o, s )
+    {
+        this.origin = o ?? new LX.vec2( 0, 0 );
+        this.size = s ?? new LX.vec2( 0, 0 );
+    }
+
+    merge ( bb ) {
+
+        console.assert( bb.constructor == BoundingBox );
+
+        const min_0 = this.origin;
+        const max_0 = this.origin.add( this.size );
+
+        const min_1 = bb.origin;
+        const max_1 = bb.origin.add( bb.size );
+
+        const merge_min = new LX.vec2( Math.min( min_0.x, min_1.x ), Math.min( min_0.y, min_1.y ) );
+        const merge_max = new LX.vec2( Math.max( max_0.x, max_1.x ), Math.max( max_0.y, max_1.y ) );
+
+        this.origin = merge_min;
+        this.size = merge_max.sub( merge_min );
+    }
+
+    inside ( bb ) {
+
+        const min_0 = this.origin;
+        const max_0 = this.origin.add( this.size );
+
+        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;
+    }
+};
+
 /**
  * @class GraphEditor
  */
@@ -46,25 +88,22 @@ class GraphEditor {
 
     static __instances  = [];
 
-    // Canvas
+    // Editor
 
-    static MIN_SCALE    = 0.25;
-    static MAX_SCALE    = 4.0;
+    static MIN_SCALE            = 0.25;
+    static MAX_SCALE            = 4.0;
 
     static EVENT_MOUSEMOVE      = 0;
     static EVENT_MOUSEWHEEL     = 1;
 
-    // Node Drawing
+    static LAST_GROUP_ID        = 0;
 
-    static NODE_TITLE_HEIGHT    = 24;
-    static NODE_ROW_HEIGHT      = 16;
+    // Node Drawing
 
-    static NODE_SHAPE_RADIUS    = 12;
-    static NODE_TITLE_RADIUS    = [ GraphEditor.NODE_SHAPE_RADIUS, GraphEditor.NODE_SHAPE_RADIUS, 0, 0 ];
-    static NODE_BODY_RADIUS     = [ GraphEditor.NODE_SHAPE_RADIUS, GraphEditor.NODE_SHAPE_RADIUS, GraphEditor.NODE_SHAPE_RADIUS, GraphEditor.NODE_SHAPE_RADIUS ];
+    static NODE_IO_INPUT        = 0;
+    static NODE_IO_OUTPUT       = 1;
 
-    static DEFAULT_NODE_TITLE_COLOR     = "#4a59b0";
-    static DEFAULT_NODE_BODY_COLOR      = "#111";
+    static NODE_TYPES           = { };
 
     /**
      * @param {*} options
@@ -75,6 +114,12 @@ 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: () => { } } );
+        });
+
         this.base_area = area;
         this.area = new LX.Area( { className: "lexgraph" } );
 
@@ -87,20 +132,143 @@ class GraphEditor {
         // Bind resize
 
         area.onresize = ( bb ) => {
-            
+            console.log(bb);
         };
 
-        this.root.addEventListener( 'keydown', this._processKey.bind( this ), true );
+        area.addOverlayButtons( [
+            {
+                name: "Toggle Sidebar",
+                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: "Enable Snapping",
+                    icon: "fa fa-table-cells",
+                    callback: () => this._toggleSnapping(),
+                    selectable: true
+                },
+                {
+                    name: 1,
+                    options: [1, 2, 3],
+                    callback: value => this._setSnappingValue( value ),
+                }
+            ],
+            [
+                {
+                    name: "Import",
+                    icon: "fa fa-upload",
+                    callback: (value, event) => { this.loadGraph( "../../data/graph_sample.json" ); }
+                },
+                {
+                    name: "Export",
+                    icon: "fa fa-diagram-project",
+                    callback: (value, event) => this.graph.export()
+                }
+            ]
+        ], { float: "htc" } );
+
+        this.root.addEventListener( 'keydown', this._processKeyDown.bind( this ), true );
+        this.root.addEventListener( 'keyup', this._processKeyUp.bind( this ), true );
         this.root.addEventListener( 'mousedown', this._processMouse.bind( this ) );
         this.root.addEventListener( 'mouseup', this._processMouse.bind( this ) );
         this.root.addEventListener( 'mousemove', this._processMouse.bind( this ) );
         this.root.addEventListener( 'mousewheel', this._processMouse.bind(this) );
+        this.root.addEventListener( 'mouseleave', this._processMouse.bind(this) );
         this.root.addEventListener( 'click', this._processMouse.bind( this ) );
         this.root.addEventListener( 'contextmenu', this._processMouse.bind( this ) );
         this.root.addEventListener( 'focus', this._processFocus.bind( this, true) );
         this.root.addEventListener( 'focusout', this._processFocus.bind( this, false ) );
 
+        this.propertiesDialog = new LX.PocketDialog( "Properties", null, {
+            size: [ "300px", null ],
+            position: [ "8px", "8px" ],
+            float: "left",
+            class: 'lexgraphpropdialog'
+        } );
+
+        // Avoid closing the dialog on click..
+
+        this.propertiesDialog.root.addEventListener( "mousedown", function( e ) {
+            e.stopImmediatePropagation();
+            e.stopPropagation();
+        });
+
+        this.propertiesDialog.root.addEventListener( "mouseup", function( e ) {
+            e.stopImmediatePropagation();
+            e.stopPropagation();
+        });
+
+        // Move to root..
+        this.root.appendChild( this.propertiesDialog.root );
+
+        // Editor
+
+        this._mousePosition = new LX.vec2( 0, 0 );
+        this._deltaMousePosition = new LX.vec2( 0, 0 );
+        this._snappedDeltaMousePosition = new LX.vec2( 0, 0 );
         this._lastMousePosition = new LX.vec2( 0, 0 );
+        this._lastSnappedMousePosition = new LX.vec2( 0, 0 );
+
+        this._undoSteps = [ ];
+        this._redoSteps = [ ];
+
+        this.keys = { };
+
+        this._sidebar = area.sections[ 0 ].root;
+        this._sidebarActive = false;
+
+        this._snapToGrid = false;
+        this._snapValue = 1.0;
+
+        this._scale = 1.0;
+
+        // Nodes and connections
+
+        this.nodes      = { };
+        this.variables  = { };
+
+        this.selectedNodes = [ ];
+
+        this.supportedCastTypes = { };
+
+        this.addCastType( 'float', 'vec2', ( v ) => { return [ v, v ]; } );
+        this.addCastType( 'float', 'vec3', ( v ) => { return [ v, v, v ]; } );
+        this.addCastType( 'float', 'vec4', ( v ) => { return [ v, v, v, v ]; } );
+        this.addCastType( 'float', 'bool', ( v ) => { return !!v; } );
+
+        this.addCastType( 'vec4', 'vec3', ( v ) => { v.slice( 0, 3 ); return v; } );
+        this.addCastType( 'vec4', 'vec2', ( v ) => { v.slice( 0, 2 ); return v; } );
+        this.addCastType( 'vec3', 'vec2', ( v ) => { v.slice( 0, 2 ); return v; } );
+
+        this.addCastType( 'vec3', 'vec4', ( v ) => { v.push( 1 ); return v; } );
+        this.addCastType( 'vec2', 'vec3', ( v ) => { v.push( 1 ); return v; } );
+        this.addCastType( 'vec2', 'vec4', ( v ) => { v.push( 0, 1 ); return v; } );
+
+        this._nodeBackgroundOpacity = options.disableNodeOpacity ? 1.0 : 0.8;
+
+        this.main = null;
 
         // Back pattern
         
@@ -112,43 +280,170 @@ class GraphEditor {
 
         this._generatePattern();
 
-        // Renderer state
+        // Links
 
-        this._scale = 1.0;
+        this._domLinks = document.createElement( 'div' );
+        this._domLinks.classList.add( 'lexgraphlinks' );
+        this.root.appendChild( this._domLinks );
 
-        // Node container
+        // Nodes
 
         this._domNodes = document.createElement( 'div' );
         this._domNodes.classList.add( 'lexgraphnodes' );
         this.root.appendChild( this._domNodes );
 
-        // requestAnimationFrame( this._frame.bind(this) );
+        window.ge = this;
     }
 
-    static getInstances()
-    {
+    static getInstances() {
+
         return GraphEditor.__instances;
     }
 
+    /**
+     * Register a node class so it can be listed when the user wants to create a new one
+     * @method registerCustomNode
+     * @param {String} type: name of the node and path
+     * @param {Class} baseClass class containing the structure of the custom node
+     */
+
+    static registerCustomNode( type, baseClass ) {
+        
+        if ( !baseClass.prototype ) {
+            throw "Cannot register a simple object, it must be a class with a prototype!";
+        }
+        
+        // Get info from path
+        const pos = type.lastIndexOf( "/" );
+
+        baseClass.category = type.substring( 0, pos );
+        baseClass.title = baseClass.title ?? type.substring( pos + 1 );
+        baseClass.type = type;
+
+        if( !baseClass.prototype.onExecute )
+        {
+            console.warn( `GraphNode [${ this.title }] does not have a callback attached.` );
+        }
+
+        const prev = GraphEditor.NODE_TYPES[ type ];
+        if(prev) {
+            console.warn( `Replacing node type [${ type }]` );
+        }
+
+        GraphEditor.NODE_TYPES[ type ] = baseClass;
+
+        // Some callbacks..
+
+        if ( this.onNodeTypeRegistered ) {
+            this.onCustomNodeRegistered( type, baseClass);
+        }
+
+        if ( prev && this.onNodeTypeReplaced ) {
+            this.onNodeTypeReplaced( type, baseClass, prev );
+        }
+    }
+
+    /**
+     * Create a node of a given type with a name. The node is not attached to any graph yet.
+     * @method createNode
+     * @param {String} type full name of the node class. p.e. "math/sin"
+     * @param {String} title a name to distinguish from other nodes
+     * @param {Object} options Store node options
+     */
+
+    static addNode( type, title, options ) {
+
+        var baseClass = GraphEditor.NODE_TYPES[ type ];
+
+        if (!baseClass) {
+            console.warn( `GraphNode type [${ type }] not registered.` );
+            return null;
+        }
+
+        title = title ?? baseClass.title;
+
+        const node = new baseClass( title );
+
+        if( node.onCreate )
+            node.onCreate();
+
+        node.type = type;
+        node.title = title;
+        node.position = new LX.vec2( 0, 0 );
+        node.color = null;
+
+        // Extra options
+        if ( options ) {
+            for (var i in options) {
+                node[ i ] = options[ i ];
+            }
+        }
+
+        if ( node.onNodeCreated ) {
+            node.onNodeCreated();
+        }
+        
+        return node;
+    }
+
     /**
      * @method setGraph
-     * @param {Graph} graph:
+     * @param {Graph} graph
      */
 
     setGraph( graph ) {
 
+        this.clear();
+
         this.graph = graph;
 
         if( !this.graph.nodes )
         {
             console.warn( 'Graph does not contain any node!' );
-            return ;
+            return;
         }
 
         for( let node of this.graph.nodes )
         {
-            this._createNode( node );
+            this._createNodeDOM( node );
+        }
+
+        for( let linkId in this.graph.links )
+        {
+            const links = this.graph.links[ linkId ];
+
+            for( let link of links )
+            {
+                this._createLink( link );
+            }
+        }
+
+        // TODO: REMOVE THIS (DEBUG)
+        this.start();
+        // 
+    }
+
+    /**
+     * @method loadGraph
+     * @param {Graph} graph
+     */
+
+    loadGraph( url, callback ) {
+
+        const onComplete = ( json ) => {
+
+            var graph = new Graph();
+            graph.configure( json );
+
+            this.setGraph( graph );
+
+            if( callback )
+                callback( graph );
         }
+
+        const onError = (v) => console.error(v);
+
+        LX.requestJSON( url, onComplete, onError );
     }
 
     /**
@@ -158,52 +453,197 @@ class GraphEditor {
     clear() {
 
         this._domNodes.innerHTML = "";
+        this._domLinks.innerHTML = "";
+
+        this.nodes = { };
+    }
+
+    setVariable( name, value ) {
+
+        this.variables[ name ] = value;
+    }
+
+    getVariable( name ) {
+
+        return this.variables[ name ];
+    }
+
+    propagateEventToAllNodes( eventName, params ) {
+
+        if( !this.graph )
+            return;
+
+        for ( let node of this.graph.nodes )
+        {
+            if( !node[ eventName ] )
+                continue;
+
+            node[ eventName ].apply( this, params );
+        }
+    };
+
+    /**
+     * @method addCastType
+     * @param {String} type: Type to cast
+     * @param {String} targetType: Types to be casted from original type
+     * @param {Function} fn: Function to know how to cast
+     */
+
+    addCastType( type, targetType, fn ) {
+
+        this.supportedCastTypes[ type + '@' + targetType ] = fn;
     }
 
     /**
      * @method unSelectAll
      */
 
-    unSelectAll( forceOrder = true ) {
+    unSelectAll( keepPropDialog ) {
 
-        this._domNodes.querySelectorAll( '.lexgraphnode' ).forEach( v => {
-            v.classList.remove( 'selected' );
-            // if( forceOrder )
-                // v.style.zIndex = "0";
-        } );
+        this._domNodes.querySelectorAll( '.lexgraphnode' ).forEach( v => v.classList.remove( 'selected' ) );
+
+        this.selectedNodes.length = 0;
+
+        if( !keepPropDialog )
+            this._togglePropertiesDialog( false );
     }
 
-    _createNode( node ) {
+    _createNodeDOM( node ) {
+
+        node.editor = this;
 
         var nodeContainer = document.createElement( 'div' );
         nodeContainer.classList.add( 'lexgraphnode' );
+        nodeContainer.style.left = "0";
+        nodeContainer.style.top = "0";
         
-        nodeContainer.style.left = node.position.x + "px";
-        nodeContainer.style.top = node.position.y + "px";
+        this._translateNode( nodeContainer, node.position );
 
-        if( node.color )
+        var color;
+
+        // Get color from type if color if not manually specified
+        if( node.type && GraphEditor.NODE_TYPES[ node.type ] )
+        {
+            const category = node.constructor.category;
+            nodeContainer.classList.add( category );
+        }
+
+        // Update with manual color
+
+        color = node.color ?? color;
+
+        if( color )
         {
-            nodeContainer.style.backgroundColor = node.color;
+            // RGB
+            if( color.constructor == Array )
+            {
+                color = color.join( ',' );
+            }
+            // Hex color..
+            else
+            {
+                color = LX.hexToRgb( color );
+                color.forEach( ( v, i ) => color[ i ] = v * 255 );
+            }
+
+            nodeContainer.style.backgroundColor = "rgba(" + color + ", " + this._nodeBackgroundOpacity + ")";
         }
 
-        // nodeContainer.addEventListener( 'click', e => {
+        nodeContainer.addEventListener( 'mousedown', e => {
+
+            // Only for left click..
+            if( e.button != LX.MOUSE_LEFT_CLICK )
+                return;
+
+            if( e.altKey )
+            {
+                this._unSelectNode( nodeContainer );
+            }
+            else
+            {
+                if( this.selectedNodes.length > 1 && ( !e.ctrlKey && !e.shiftKey ) )
+                {
+                    this.unSelectAll( true );
+                }
+
+                if( !nodeContainer.classList.contains( 'selected' ) )
+                {
+                    this._selectNode( nodeContainer, ( e.ctrlKey || e.shiftKey ) );
+                }
+            }
+        } );
+
+        nodeContainer.addEventListener( 'contextmenu', e => {
 
-        //     // TODO: check multiple selection
-        //     this.unSelectAll();
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+
+            LX.addContextMenu(null, e, m => {
+
+                m.add( "Copy", () => {
+                    // TODO
+                    // ...
+                } );
+
+                m.add( "Paste", () => {
+                    // TODO
+                    // ...
+                } );
 
-        //     nodeContainer.classList.toggle( 'selected' );
-        //     nodeContainer.style.zIndex = "1";
+                m.add( "" );
 
-        //     // Refresh node render order
-        //     this._domNodes.appendChild( nodeContainer );
-        // } );
+                m.add( "Delete", () => {
+                    this._deleteNode( nodeContainer.dataset[ 'id' ] );
+                } );
+            });
+        } );
+
+        nodeContainer.addEventListener( 'dblclick', e => {
+
+            // Only for left click..
+            if( e.button != LX.MOUSE_LEFT_CLICK )
+                return;
+        } );
 
         // Title header
         var nodeHeader = document.createElement( 'div' );
         nodeHeader.classList.add( 'lexgraphnodeheader' );
-        nodeHeader.innerText = node.name;
+        nodeHeader.innerText = node.title;
         nodeContainer.appendChild( nodeHeader );
 
+        // Properties
+        // if( node.properties.length && node.constructor.category == 'inputs'  )
+        // {
+        //     var nodeProperties = document.createElement( 'div' );
+        //     nodeProperties.classList.add( 'lexgraphnodeproperties' );
+            
+        //     for( let p of node.properties )
+        //     {
+        //         var panel = new LX.Panel();
+    
+        //         p.signal = "@" + LX.UTILS.uidGenerator() + node.title;
+
+        //         switch( p.type )
+        //         {
+        //         case 'float':
+        //         case 'int':
+        //             panel.addNumber( p.name, p.value, (v) => p.value = v, { signal: p.signal } );
+        //             break;
+        //         case 'string':
+        //             panel.addText( p.name, p.value, (v) => p.value = v, { signal: p.signal } );
+        //         break;
+        //         }
+
+        //         // var prop = document.createElement( 'div' );
+        //         // prop.innerText = p.type;
+        //         // prop.classList.add( 'lexgraphnodeproperty' );
+        //         nodeProperties.appendChild( panel.root );
+        //     }
+    
+        //     nodeContainer.appendChild( nodeProperties );
+        // }
+
         // Inputs and outputs
         var nodeIO = document.createElement( 'div' );
         nodeIO.classList.add( 'lexgraphnodeios' );
@@ -228,18 +668,24 @@ class GraphEditor {
             {
                 if( !i.type )
                 {
-                    console.warn( `Missing type for node [${ node.name }], skipping...` );
+                    console.warn( `Missing type for node [${ node.title }], skipping...` );
                     continue;
                 }
 
                 var input = document.createElement( 'div' );
-                input.classList.add( 'lexgraphnodeio' );
+                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>";
+                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' );
@@ -268,11 +714,12 @@ class GraphEditor {
             {
                 if( !o.type  )
                 {
-                    console.warn( `Missing type for node [${ node.name }], skipping...` );
+                    console.warn( `Missing type for node [${ node.title }], skipping...` );
                 }
 
                 var output = document.createElement( 'div' );
-                output.className = 'lexgraphnodeio output';
+                output.className = 'lexgraphnodeio iooutput';
+                output.dataset[ 'index' ] = nodeOutputs.childElementCount;
 
                 if( o.name )
                 {
@@ -284,449 +731,2387 @@ class GraphEditor {
 
                 var type = document.createElement( 'span' );
                 type.className = 'io__type output ' + o.type;
-                type.innerHTML = "<span>" + o.type[ 0 ].toUpperCase() + "</span>";
+                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 );
             }
         }
 
-        // Drag listener
+        // Move nodes
 
-        LX.makeDraggable( nodeContainer, { onMove: e => {
-            const dP = this._deltaMousePosition.div( this._scale );
-            nodeContainer.style.left = (parseFloat(nodeContainer.style.left) + dP.x) + 'px';
-            nodeContainer.style.top = (parseFloat(nodeContainer.style.top) + dP.y) + 'px';
-        } } );
+        LX.makeDraggable( nodeContainer, {
+            onMove: this._onMoveNodes.bind( this ),
+            onDragStart: this._onDragNode.bind( this )
+        } );
 
-        this._domNodes.appendChild( nodeContainer );
-    }
+        // Manage links
 
-    _processFocus( active ) {
+        nodeIO.querySelectorAll( '.lexgraphnodeio' ).forEach( el => {
 
-        this.isFocused = active;
-    }
+            el.addEventListener( 'mousedown', e => {
 
-    _processKey( e ) {
+                // Only for left click..
+                if( e.button != LX.MOUSE_LEFT_CLICK )
+                    return;
 
-        var key = e.key ?? e.detail.key;
-        console.log( key );
-    }
+                this.lastMouseDown = LX.getTime();
+    
+                this._generatingLink = {
+                    index: parseInt( el.dataset[ 'index' ] ),
+                    io: el,
+                    ioType: el.classList.contains( 'ioinput' ) ? GraphEditor.NODE_IO_INPUT : GraphEditor.NODE_IO_OUTPUT,
+                    domEl: nodeContainer
+                };
 
-    _processMouse( e ) {
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+            } );
 
-        const rect = this.root.getBoundingClientRect();
-        
-        this._mousePosition = new LX.vec2( e.clientX - rect.x , e.clientY - rect.y );
-        this._deltaMousePosition = this._mousePosition.sub( this._lastMousePosition );
+            el.addEventListener( 'mouseup', e => {
 
-        if( e.type == 'mousedown' )
-        {
-            this.lastMouseDown = LX.getTime();
-        }
-        
-        else if( e.type == 'mouseup' )
-        {
-            if( (LX.getTime() - this.lastMouseDown) < 120 ) {
-                this._processClick( e );
-            }
-        }
+                // Single click..
+                if( ( LX.getTime() - this.lastMouseDown ) < 120 ) {
+                    delete this._generatingLink;
+                    return;
+                }
 
-        else if( e.type == 'mousemove' )
-        {
-            this._processMouseMove( e );
-        }
+                if( this._generatingLink )
+                {
+                    // Check for IO
+                    if( !this._onLink( e ) )
+                    {
+                        // Delete entire SVG if not a successful connection..
+                        deleteElement( this._generatingLink.path ? this._generatingLink.path.parentElement : null );
+                    }
 
-        else if ( e.type == 'click' ) // trip
-        {
-            switch( e.detail )
-            {
-                case LX.MOUSE_DOUBLE_CLICK:
-                    break;
-                case LX.MOUSE_TRIPLE_CLICK:
-                    break;
-            }
-        }
+                    delete this._generatingLink;
+                }
 
-        else if ( e.type == 'mousewheel' ) {
-            e.preventDefault();
-            this._processWheel( e );
-        }
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+            } );
 
-        else if ( e.type == 'contextmenu' ) {
+            el.addEventListener( 'click', e => {
 
-            e.preventDefault();
-            
-            if( (LX.getTime() - this.lastMouseDown) < 120 ) {
-                this._processContextMenu( e );
-            }
-        }
+                if( !el.links )
+                    return;
 
-        this._lastMousePosition = this._mousePosition;
-    }
+                const nodeId = nodeContainer.dataset[ 'id' ];
 
-    _processClick( e ) {
+                this._deleteLinks( nodeId, el );
+            } );
+
+        } );
+
+        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 );
 
-        if( e.target.classList.contains( 'lexgraphnodes' ) )
+        // Only 1 main per graph!
+        if( node.title == 'Main' )
         {
-            this._processBackgroundClick( e );
-            return;
+            this.main = nodeContainer;
         }
 
-        console.log(e.target);
+        return nodeContainer;
     }
 
-    _processBackgroundClick( e ) {
+    _getAllDOMNodes( includeGroups ) {
+        
+        if( includeGroups )
+            return this._domNodes.childNodes;
 
-        this.unSelectAll( false );
+        return Array.from( this._domNodes.childNodes ).filter( v => v.classList.contains( 'lexgraphnode' ) );
     }
 
-    _processMouseMove( e ) {
+    _onMoveNodes( target ) {
 
-        const rightPressed = ( e.which == 3 );
-        
-        if( rightPressed )
+        let dT = this._snapToGrid ? this._snappedDeltaMousePosition : this._deltaMousePosition;
+        dT.div( this._scale, dT);
+
+        for( let nodeId of this.selectedNodes )
         {
-            this._patternPosition.add( this._deltaMousePosition.div( this._scale ), this._patternPosition );
+            const el = this._getNodeDOMElement( nodeId );
 
-            this._updatePattern();
+            this._translateNode( el, dT );
+
+            this._updateNodeLinks( nodeId );
         }
     }
 
-    _processWheel( e ) {
+    _onDragNode( target, e ) {
+
+        if( !e.shiftKey )
+            return;
+
+        this._cloneNodes();
+    }
+
+    _onMoveGroup( target ) {
+
+        // Move nodes inside the group
+
+        const groupNodeIds = target.nodes;
+
+        if( !groupNodeIds )
+            return;
+
+        let dT = this._snapToGrid ? this._snappedDeltaMousePosition : this._deltaMousePosition;
+        dT.div( this._scale, dT);
+
+        this._translateNode( target, dT );
+
+        for( let nodeId of groupNodeIds )
+        {
+            const el = this._getNodeDOMElement( nodeId );
+
+            this._translateNode( el, dT );
+
+            this._updateNodeLinks( nodeId );
+        }
+    }
+
+    _onDragGroup( target ) {
+
+        // Get nodes inside the group to be moved
+
+        const group_bb = this._getBoundingFromGroup( target );
+
+        const groupNodeIds = [ ];
+
+        for( let dom of this._getAllDOMNodes() )
+        {
+            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 ) );
+
+            if( !group_bb.inside( node_bb ) )
+                continue;
+
+            groupNodeIds.push( dom.dataset[ 'id' ] );
+        }
+
+        target.nodes = groupNodeIds;
+    }
+
+    _selectNode( dom, multiSelection, forceOrder = true ) {
+
+        if( !multiSelection )
+            this.unSelectAll( true );
+
+        dom.classList.add( 'selected' );
+
+        const id = dom.dataset[ 'id' ];
+
+        this.selectedNodes.push( id );
+
+        if( forceOrder )
+        {
+            // Reorder nodes to draw on top..
+            this._domNodes.appendChild( dom );
+        }
+
+        const node = this.nodes[ id ].data;
+
+        this.propertiesDialog.setTitle( node.title );
+
+        var panel = this.propertiesDialog.panel;
+        panel.clear();
+
+        // Add description
+        if( node.constructor.description )
+        {
+            panel.addText( null, node.constructor.description, null, { disabled: true } );
+        }
+
+        // Allow change name if input
+        if( node.constructor.category == 'inputs' )
+        {
+            panel.addText( 'Name', node.title, (v) => { 
+                node.title = v;
+                dom.querySelector( '.lexgraphnodeheader' ).innerText = v;
+            } );
+        }
+
+        for( let p of node.properties )
+        {
+            switch( p.type )
+            {
+            case 'float':
+            case 'int':
+                panel.addNumber( p.name, p.value, (v) => { p.value = v } );
+                break;
+            case 'string':
+                panel.addText( p.name, p.value, (v) => { p.value = v } );
+                break;
+            case 'vec2':
+                panel.addVector2( p.name, p.value, (v) => { p.value = v } );
+                break;
+            case 'vec3':
+                panel.addVector3( p.name, p.value, (v) => { p.value = v } );
+                break;
+            case 'vec4':
+                panel.addVector4( p.name, p.value, (v) => { p.value = v } );
+                break;
+            case 'select':
+                panel.addDropdown( p.name, p.options, p.value, (v) => { p.value = v } );
+                break;
+            }
+        }
+
+        this._togglePropertiesDialog( true );
+    }
+
+    _unSelectNode( dom ) {
+
+        dom.classList.remove( 'selected' );
+
+        // Delete from selected..
+        const idx = this.selectedNodes.indexOf( dom.dataset[ 'id' ] );
+        this.selectedNodes.splice( idx, 1 );
+
+        if( !this.selectedNodes.length )
+            this._togglePropertiesDialog( false );
+    }
+
+    _translateNode( dom, deltaTranslation ) {
+
+        const translation = deltaTranslation.add( new LX.vec2( parseFloat( dom.style.left ), parseFloat( dom.style.top ) ) );
+
+        if( this._snapToGrid && dom.mustSnap )
+        {
+            const snapSize = this._patternSize.x * this._snapValue * this._snapValue;
+            translation.x = Math.floor( translation.x / snapSize ) * snapSize;
+            translation.y = Math.floor( translation.y / snapSize ) * snapSize;
+            dom.mustSnap = false;
+        }
+
+        dom.style.left = ( translation.x ) + "px";
+        dom.style.top = ( translation.y ) + "px";
+    }
+
+    _deleteNode( nodeId ) {
+
+        const el = this._getNodeDOMElement( nodeId );
+
+        console.assert( el );
+
+        if( el == this.main )
+        {
+            console.warn( `Can't delete MAIN node!` );
+            return;
+        }
+
+        deleteElement( el );
+
+        delete this.nodes[ nodeId ];
+
+        // Delete connected links..
+        
+        for( let key in this.graph.links )
+        {
+            if( !key.includes( nodeId ) )
+                continue;
+
+            const aIdx = key.indexOf( '@' );
+            const targetIsInput = key.substring( aIdx + 1 ) != nodeId;
+
+            // Remove the connection from the other before deleting..
+
+            const numLinks = this.graph.links[ key ].length;
+
+            for( var i = 0; i < numLinks; ++i )
+            {
+                var link = this.graph.links[ key ][ i ];
+
+                deleteElement( link.path.parentElement );
+
+                const targetNodeId = targetIsInput ? link.inputNode : link.outputNode;
+
+                const targetNodeDOM = this._getNodeDOMElement( targetNodeId );
+                const ios = targetNodeDOM.querySelector( targetIsInput ? '.lexgraphnodeinputs' : '.lexgraphnodeoutputs' );
+                const io = ios.childNodes[ targetIsInput ? link.inputIdx : link.outputIdx ];
+
+                const ioIndex = targetIsInput ? link.outputIdx : link.inputIdx;
+                const nodelinkidx = io.links[ ioIndex ].indexOf( nodeId );
+                io.links[ ioIndex ].splice( nodelinkidx, 1 );
+
+                // Unique link, so it's done..
+                if( targetIsInput )
+                {
+                    delete io.dataset[ 'active' ];
+                }
+
+                // Check if any link left in case of output
+                else
+                {
+                    var active = false;
+                    for( var links of  io.links )
+                        for( var j of links ){
+                            console.log(j)
+                            active |= ( !!j );
+                        }
+                    if( !active )
+                        delete io.dataset[ 'active' ];
+                }
+            }
+
+            delete this.graph.links[ key ];
+        }
+    }
+
+    _cloneNodes() {
+
+        // Clone all selected nodes
+        const selectedIds = LX.deepCopy( this.selectedNodes );
+
+        this.unSelectAll();
+
+        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 is in pattern space!
+    _getNodePosition( dom ) {
+
+        return new LX.vec2( parseFloat( dom.style.left ), parseFloat( dom.style.top ) );
+    }
+
+    _getNodeDOMElement( nodeId ) {
+
+        return this.nodes[ nodeId ] ? this.nodes[ nodeId ].dom : null;
+    }
+
+    _getLinks( nodeSrcId, nodeDstId ) {
+
+        const str = nodeSrcId + '@' + nodeDstId;
+        return this.graph.links[ str ];
+    }
+
+    _deleteLinks( nodeId, io ) {
+
+        const isInput = io.classList.contains( 'ioinput' );
+        const srcIndex = parseInt( io.dataset[ 'index' ] );
+
+        if( isInput ) // Only one "link to output" to delete
+        {
+            let targetIndex;
+
+            const targets = io.links.filter( (v, i) => { targetIndex = i; return v !== undefined; } )[ 0 ];
+            const targetId = targets[ 0 ];
+
+            // It has been deleted..
+            if( !targetId )
+                return;
+
+            var links = this._getLinks( targetId, nodeId );
+
+            var linkIdx = links.findIndex( i => ( i.inputIdx == srcIndex && i.outputIdx == targetIndex ) );
+            deleteElement( links[ linkIdx ].path.parentElement );
+            links.splice( linkIdx, 1 );
+
+            // Input has no longer any connected link
+
+            delete io.links;
+            delete io.dataset[ 'active' ];
+
+            // Remove a connection from the target connections
+
+            const targetDOM = this._getNodeDOMElement( targetId );
+            const ios = targetDOM.querySelector( '.lexgraphnodeoutputs' );
+            const targetIO = ios.childNodes[ targetIndex ];
+
+            const idx = targetIO.links[ srcIndex ].findIndex( v => v == nodeId );
+            targetIO.links[ srcIndex ].splice( idx, 1 );
+
+            let active = false;
+
+            for( var ls of targetIO.links )
+            {
+                if( !ls ) continue;
+                // Check links left per io
+                active |= ls.reduce( c => c !== undefined, 0 );
+            }
+
+            if( !active )
+            {
+                delete targetIO.links;
+                delete targetIO.dataset[ 'active' ];
+            }
+        }
+        else // Delete ALL "to input links"
+        {
+
+            const numLinks = io.links.length;
+
+            for( let targetIndex = 0; targetIndex < numLinks; ++targetIndex )
+            {
+                const targets = io.links[ targetIndex ];
+
+                if( !targets )
+                    continue;
+
+                for( let it = ( targets.length - 1 ); it >= 0 ; --it )
+                {
+                    const targetId = targets[ it ];
+                    var links = this._getLinks( nodeId, targetId );
+
+                    var linkIdx = links.findIndex( i => ( i.inputIdx == targetIndex && i.outputIdx == srcIndex ) );
+                    deleteElement( links[ linkIdx ].path.parentElement );
+                    links.splice( linkIdx, 1 );
+
+                    // Remove a connection from the output connections
+
+                    io.links[ targetIndex ].splice( it, 1 );
+
+                    // Input has no longer any connected link
+
+                    const targetDOM = this._getNodeDOMElement( targetId );
+                    const ios = targetDOM.querySelector( '.lexgraphnodeinputs' );
+                    const targetIO = ios.childNodes[ targetIndex ];
+
+                    delete targetIO.links;
+                    delete targetIO.dataset[ 'active' ];
+                }
+            }
+
+            delete io.links;
+            delete io.dataset[ 'active' ];
+        }
+    }
+
+    _processFocus( active ) {
+
+        this.isFocused = active;
+    }
+
+    _processKeyDown( e ) {
+
+        // Prevent processing keys on inputs and others
+        if( document.activeElement != this.root )
+            return;
+
+        var key = e.key ?? e.detail.key;
+        
+        switch( key ) {
+            case 'Escape':
+                this.unSelectAll();
+                break;
+            case 'Delete':
+            case 'Backspace':
+                e.preventDefault();
+                this._deleteSelection( e );
+                break;
+            case 'g':
+                if( e.ctrlKey )
+                {
+                    e.preventDefault();
+                    this._createGroup();
+                }
+                break;
+            case 'y':
+                if( e.ctrlKey )
+                {
+                    e.preventDefault();
+                    this._doRedo();
+                }
+                break;
+            case 'z':
+                if( e.ctrlKey )
+                {
+                    e.preventDefault();
+                    this._doUndo();
+                }
+                break;
+        }
+
+        this.keys[ key ] = true;
+    }
+
+    _processKeyUp( e ) {
+
+        // Prevent processing keys on inputs and others
+        if( document.activeElement != this.root )
+            return;
+
+        var key = e.key ?? e.detail.key;
+
+        delete this.keys[ key ];
+    }
+
+    _processMouse( e ) {
+
+        const rect = this.root.getBoundingClientRect();
+        
+        this._mousePosition = new LX.vec2( e.clientX - rect.x , e.clientY - rect.y );
+
+        const snapPosition = new LX.vec2( this._mousePosition.x, this._mousePosition.y );
+
+        if( this._snapToGrid )
+        {
+            const snapSize = this._patternSize.x * this._snapValue * this._scale;
+            snapPosition.x = Math.floor( snapPosition.x / snapSize ) * snapSize;
+            snapPosition.y = Math.floor( snapPosition.y / snapSize ) * snapSize;
+            this._snappedDeltaMousePosition = snapPosition.sub( this._lastSnappedMousePosition );
+        }
+
+        this._deltaMousePosition = this._mousePosition.sub( this._lastMousePosition );
+
+        if( e.type == 'mousedown' )
+        {
+            this.lastMouseDown = LX.getTime();
+
+            this._processMouseDown( e );
+        }
+        
+        else if( e.type == 'mouseup' )
+        {
+            if( ( LX.getTime() - this.lastMouseDown ) < 120 ) {
+                this._processClick( e );
+            }
+
+            this._processMouseUp( e );
+        }
+
+        else if( e.type == 'mousemove' )
+        {
+            this._processMouseMove( e );
+        }
+
+        else if ( e.type == 'click' ) // trick
+        {
+            switch( e.detail )
+            {
+                case LX.MOUSE_DOUBLE_CLICK:
+                    break;
+                case LX.MOUSE_TRIPLE_CLICK:
+                    break;
+            }
+        }
+
+        else if ( e.type == 'mousewheel' ) {
+            e.preventDefault();
+            this._processWheel( e );
+        }
+
+        else if ( e.type == 'contextmenu' ) {
+
+            e.preventDefault();
+            
+            if( ( LX.getTime() - this.lastMouseDown ) < 120 ) {
+                this._processContextMenu( e );
+            }
+        }
+
+        else if ( e.type == 'mouseleave' ) {
+
+            if( this._generatingLink )
+            {
+                this._processMouseUp( e );
+            }
+        }
+
+        if( this._snapToGrid )
+        {
+            this._lastSnappedMousePosition = snapPosition;
+        }
+
+        this._lastMousePosition = this._mousePosition;
+    }
+
+    _processClick( e ) {
+
+        if( e.target.classList.contains( 'lexgraphnodes' ) || e.target.classList.contains( 'lexgraphgroup' ) )
+        {
+            this._processBackgroundClick( e );
+            return;
+        }
+    }
+
+    _processBackgroundClick( e ) {
+
+        this.unSelectAll();
+    }
+
+    _processMouseDown( e ) {
+
+        // Don't box select over a node..
+        if( !e.target.classList.contains( 'lexgraphnode' ) && !e.target.classList.contains( 'lexgraphgroup' )
+            && e.button == LX.MOUSE_LEFT_CLICK )
+        {
+            this._boxSelecting = this._mousePosition;
+            this._boxSelectRemoving = e.altKey;
+        }
+    }
+
+    _processMouseUp( e ) {
+
+        // It the event reaches this, the link isn't valid..
+        if( this._generatingLink )
+        {
+            deleteElement( this._generatingLink.path ? this._generatingLink.path.parentElement : null );
+            delete this._generatingLink;
+        }
+
+        else if( this._boxSelecting )
+        {
+            if( !e.ctrlKey && !e.altKey )
+                this.unSelectAll();
+
+            this._selectNodesInBox( this._boxSelecting, this._mousePosition, e.altKey );
+
+            deleteElement( this._currentBoxSelectionSVG );
+
+            delete this._currentBoxSelectionSVG;
+            delete this._boxSelecting;
+            delete this._boxSelectRemoving;
+        }
+    }
+
+    _processMouseMove( e ) {
+
+        const rightPressed = ( e.which == 3 );
+
+        if( rightPressed )
+        {
+            this._patternPosition.add( this._deltaMousePosition.div( this._scale ), this._patternPosition );
+
+            this._updatePattern();
+
+            return;
+        }
+
+        else if( this._generatingLink )
+        {
+            this._updatePreviewLink( e );
+
+            return;
+        }
+
+        else if( this._boxSelecting )
+        {
+            this._drawBoxSelection( e );
+
+            return;
+        }
+    }
+
+    _processWheel( e ) {
+
+        if( this._boxSelecting )
+            return;
 
         // Compute zoom center in pattern space using current scale
 
-        const rect = this.root.getBoundingClientRect();
-        const zoomCenter = this._mousePosition ?? new LX.vec2( rect.width * 0.5, rect.height * 0.5 );
+        const rect = this.root.getBoundingClientRect();
+        const zoomCenter = this._mousePosition ?? new LX.vec2( rect.width * 0.5, rect.height * 0.5 );
+
+        const center = this._getPatternPosition( zoomCenter );
+
+        const delta = e.deltaY;
+
+        if( delta > 0.0 ) this._scale *= 0.9;
+        else this._scale *= ( 1.0 / 0.9 );
+
+        this._scale = LX.UTILS.clamp( this._scale, GraphEditor.MIN_SCALE, GraphEditor.MAX_SCALE );
+
+        // Compute zoom center in pattern space using new scale
+        // and get delta..
+
+        const newCenter = this._getPatternPosition( zoomCenter );
+
+        const deltaCenter = newCenter.sub( center );
+
+        this._patternPosition = this._patternPosition.add( deltaCenter );
+
+        this._updatePattern( GraphEditor.EVENT_MOUSEWHEEL );
+    }
+
+    _processContextMenu( e ) {
+        
+        LX.addContextMenu( "ADD NODE", e, m => {
+            
+            for( let type in GraphEditor.NODE_TYPES )
+            {
+                m.add( type, () => {
+
+                    const newNode = GraphEditor.addNode( type );
+
+                    const dom = this._createNodeDOM( newNode );
+
+                    if( this._snapToGrid )
+                    {
+                        dom.mustSnap = true;
+                    }
+
+                    if( e )
+                    {
+                        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.graph.nodes.push( newNode );
+
+                } );
+            }
+        });
+    }
+
+    /**
+     * @method start
+     */
+
+    start() {
+
+        this.mustStop = false;
+
+        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 );
+
+                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 = this.nodes[ this._executionNodes[ i ] ];
+
+            if( node.data.onBeforeStep )
+                node.data.onBeforeStep();
+
+            node.data.execute();
+
+            if( node.data.onBeforeStep )
+                node.data.onAfterStep();
+        }
+    }
+
+    _generatePattern() {
+
+        // Generate pattern
+        {
+            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( 'width', this._patternSize.x )
+            pattern.setAttribute( 'height', this._patternSize.y );
+            pattern.setAttribute( 'patternUnits', 'userSpaceOnUse' );
+
+            var circle = document.createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
+            circle.setAttribute( 'cx', this._circlePatternSize );
+            circle.setAttribute( 'cy', this._circlePatternSize );
+            circle.setAttribute( 'r', this._circlePatternSize );
+            circle.setAttribute( 'fill', this._circlePatternColor );
+
+            pattern.appendChild( circle );
+        }
+        
+        var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+        svg.classList.add( "background-svg" );
+        svg.style.width = "100%";
+        svg.style.height = "100%";
+
+        svg.appendChild( pattern );
+
+        var rect = document.createElementNS( 'http://www.w3.org/2000/svg', 'rect' );
+        rect.setAttribute( 'x', '0' );
+        rect.setAttribute( 'y', '0' );
+        rect.setAttribute( 'width', '100%' );
+        rect.setAttribute( 'height', '100%' );
+        rect.setAttribute( 'fill', 'url(#pattern-0)' );
+
+        svg.appendChild( rect );
+
+        this._background = svg;
+
+        this.root.appendChild( this._background );
+    }
+
+    _updatePattern() {
+
+        if( !this._background )
+            return;
+
+        const patternSize = this._patternSize.mul( this._scale );
+        const circlePatternSize = this._circlePatternSize * this._scale;
+        const patternPosition = this._patternPosition.mul( this._scale );
+        
+        let pattern = this._background.querySelector( 'pattern' );
+        pattern.setAttribute( 'x', patternPosition.x );
+        pattern.setAttribute( 'y', patternPosition.y );
+        pattern.setAttribute( 'width', patternSize.x )
+        pattern.setAttribute( 'height', patternSize.y );
+
+        var circle = this._background.querySelector( 'circle' );
+        circle.setAttribute( 'cx', circlePatternSize );
+        circle.setAttribute( 'cy', circlePatternSize );
+        circle.setAttribute( 'r', circlePatternSize );
+
+        // Nodes
+
+        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;
+
+        this._domNodes.style.transform = `
+            translate(` + ( patternPosition.x - dw ) + `px, ` + ( patternPosition.y - dh ) + `px) 
+            scale(` + this._scale + `)
+        `;
+        this._domLinks.style.transform = this._domNodes.style.transform;
+    }
+
+    _getPatternPosition( renderPosition ) {
+
+        return renderPosition.div( this._scale ).sub( this._patternPosition );
+    }
+
+    _getRenderPosition( patternPosition ) {
+
+        return patternPosition.add( this._patternPosition ).mul( this._scale );
+    }
+
+    _onLink( e ) {
+
+        const linkData = this._generatingLink;
+        const ioType = e.target.classList.contains( 'input' ) ? GraphEditor.NODE_IO_INPUT : GraphEditor.NODE_IO_OUTPUT;
+
+        // Discard same IO type
+        if( linkData.ioType == ioType )
+        {
+            console.warn( `Can't link same type of data` );
+            return;
+        }
+
+        // Info about src node
+        const src_nodeContainer = linkData.domEl;
+        const src_nodeId = src_nodeContainer.dataset[ 'id' ];
+        const src_node = this.nodes[ src_nodeId ].data;
+        const src_ioIndex = this._generatingLink.index
+        
+        // Info about dst node
+        const dst_nodeContainer = e.target.offsetParent;
+        const dst_nodeId = dst_nodeContainer.dataset[ 'id' ];
+        const dst_node = this.nodes[ dst_nodeId ].data;
+        const dst_ioIndex = parseInt( e.target.parentElement.dataset[ 'index' ] );
+
+        // Discard different types
+        const srcIsInput = ( linkData.ioType ==  GraphEditor.NODE_IO_INPUT );
+        const src_ios = src_node[ srcIsInput ? 'inputs' : 'outputs' ];
+        const src_ioType = src_ios[ src_ioIndex ].type;
+
+        const dst_ios = dst_node[ ioType ==  GraphEditor.NODE_IO_INPUT ? 'inputs' : 'outputs' ];
+        const dst_ioType = dst_ios[ dst_ioIndex ].type;
+
+        if( src_ioType != dst_ioType && src_ioType != "any" && dst_ioType != "any"  )
+        {
+            // Different types, but it might be possible to cast types
+
+            const inputType = srcIsInput ? src_ioType : dst_ioType;
+            const outputType = srcIsInput ? dst_ioType : src_ioType;
+
+            if( !this.supportedCastTypes[ outputType + '@' + inputType ] )
+            {
+                console.warn( `Can't link ${ src_ioType } to ${ dst_ioType }.` );
+                return;
+            }
+        }
+
+        // Check if target it's an active input and remove the old link
+
+        if( ioType == GraphEditor.NODE_IO_INPUT && e.target.parentElement.dataset[ 'active' ] )
+        {
+            this._deleteLinks( dst_nodeId, e.target.parentElement );
+        }
+
+        // Check if source it's an active input and remove the old link
+
+        else if( linkData.ioType == GraphEditor.NODE_IO_INPUT && linkData.io.dataset[ 'active' ] )
+        {
+            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;
+        srcDom.links = srcDom.links ?? [ ];
+        srcDom.links[ dst_ioIndex ] = srcDom.links[ dst_ioIndex ] ?? [ ];
+        srcDom.links[ dst_ioIndex ].push( dst_nodeId );
+        
+        var dstDom = e.target.parentElement;
+        dstDom.links = dstDom.links ?? [ ];
+        dstDom.links[ src_ioIndex ] = dstDom.links[ src_ioIndex ] ?? [ ];
+        dstDom.links[ src_ioIndex ].push( src_nodeId );
+
+        // Call this using the io target to set the connection to the center of the input DOM element..
+        
+        let path = this._updatePreviewLink( null, e.target.parentElement );
+
+        // Store link
+
+        const pathId = ( srcIsInput ? dst_nodeId : src_nodeId ) + '@' + ( srcIsInput ? src_nodeId : dst_nodeId );
+
+        if( !this.graph.links[ pathId ] ) this.graph.links[ pathId ] = [];
+
+        this.graph.links[ pathId ].push( {
+            path: path,
+            inputNode: srcIsInput ? src_nodeId : dst_nodeId,
+            inputIdx: srcIsInput ? src_ioIndex : dst_ioIndex,
+            inputType: srcIsInput ? src_ioType : dst_ioType,
+            outputNode: srcIsInput ? dst_nodeId : src_nodeId,
+            outputIdx: srcIsInput ? dst_ioIndex : src_ioIndex,
+            outputType: srcIsInput ? dst_ioType : src_ioType,
+        } );
+
+        path.dataset[ 'id' ] = pathId;
+
+        // Successful link..
+        return true;
+    }
+
+    _updatePreviewLink( e, endIO ) {
+
+        var path = this._generatingLink.path;
+
+        if( !path )
+        {
+            var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+            svg.classList.add( "link-svg" );
+            svg.style.width = "100%";
+            svg.style.height = "100%";
+            this._domLinks.appendChild( svg );
+
+            path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+            path.setAttribute( 'fill', 'none' );
+            svg.appendChild( path );
+            this._generatingLink.path = path;
+        }
+
+        // Generate bezier curve
+
+        const index = this._generatingLink.index;
+        const type = this._generatingLink.ioType;
+        const domEl = this._generatingLink.domEl;
+
+        const offsetX = this.root.getBoundingClientRect().x;
+        const offsetY = this.root.getBoundingClientRect().y;
+
+        const ios = domEl.querySelector( type == GraphEditor.NODE_IO_INPUT ? '.lexgraphnodeinputs' : '.lexgraphnodeoutputs' );
+        const ioEl = ios.childNodes[ index ].querySelector( '.io__type' );
+        const startRect = ioEl.getBoundingClientRect();
+
+        let startPos = new LX.vec2( startRect.x - offsetX, startRect.y - offsetY );
+        let endPos = null;
+
+        if( e )
+        {
+            endPos = new LX.vec2( e.offsetX, e.offsetY );
+
+            // 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 );
+            }
+            else if( e.target.hasClass( [ 'io__type', 'lexgraphgroupresizer' ] ) )
+            {
+                var parent = e.target.offsetParent;
+                // Add parent offset
+                endPos.add( this._getNodePosition( parent ), endPos );
+                // Add own offset
+                endPos.add( new LX.vec2( e.target.offsetLeft, e.target.offsetTop ), endPos );
+                endPos.add( new LX.vec2( 3, 3 ), endPos );
+            }
+
+            endPos = this._getRenderPosition( endPos );
+        }
+        else
+        {
+            const ioRect = endIO.querySelector( '.io__type' ).getBoundingClientRect();
+            endPos = new LX.vec2( ioRect.x - offsetX, ioRect.y - offsetY );
+        }
+
+        if( type == GraphEditor.NODE_IO_INPUT )
+        {
+            var tmp = endPos;
+            endPos = startPos;
+            startPos = tmp;
+        }
+
+        const color = getComputedStyle( ioEl ).backgroundColor;
+        this._createLinkPath( path, startPos, endPos, color, !!e );
+
+        return path;
+    }
+
+    _createLink( link ) {
+
+        var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+        svg.classList.add( "link-svg" );
+        svg.style.width = "100%";
+        svg.style.height = "100%";
+        this._domLinks.appendChild( svg );
+
+        var path = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+        path.setAttribute( 'fill', 'none' );
+        svg.appendChild( path );
+
+        const inputNodeDom = this._getNodeDOMElement( link.inputNode );
+        const outputNodeDom = this._getNodeDOMElement( link.outputNode );
+
+        // Start pos
+
+        const offsetX = this.root.getBoundingClientRect().x;
+        const offsetY = this.root.getBoundingClientRect().y;
+
+        const outputs = outputNodeDom.querySelector( '.lexgraphnodeoutputs' );
+        const io0 = outputs.childNodes[ link.outputIdx ];
+        const startRect = io0.querySelector( '.io__type' ).getBoundingClientRect();
+
+        let startPos = new LX.vec2( startRect.x - offsetX, startRect.y - offsetY + 6 );
+
+        // End pos
+
+        const inputs = inputNodeDom.querySelector( '.lexgraphnodeinputs' );
+        const io1 = inputs.childNodes[ link.inputIdx ];
+        const endRect = io1.querySelector( '.io__type' ).getBoundingClientRect();
+
+        let endPos = new LX.vec2( endRect.x - offsetX, endRect.y - offsetY + 6 );
+
+        // Generate bezier curve
+
+        const color = getComputedStyle( io1.querySelector( '.io__type' ) ).backgroundColor;
+        this._createLinkPath( path, startPos, endPos, color );
+
+        link.path = path;
+
+        // Store data in each IO
+
+        io0.links = [ ];
+        io0.links[ link.inputIdx ] = io0.links[ link.inputIdx ] ?? [ ];
+        io0.links[ link.inputIdx ].push( link.inputNode );
+
+        io1.links = [ ];
+        io1.links[ link.outputIdx ] = io1.links[ link.outputIdx ] ?? [ ];
+        io1.links[ link.outputIdx ].push( link.outputNode );
+    }
+
+    _createLinkPath( path, startPos, endPos, color, exactEnd ) {
+
+        const dist = 6 * this._scale;
+        startPos.add( new LX.vec2( dist, dist ), startPos );
+
+        if( !exactEnd )
+        {
+            endPos.add( new LX.vec2( dist, dist ), endPos );
+        }
+
+        startPos = this._getPatternPosition( startPos );
+        endPos = this._getPatternPosition( endPos );
+
+        const distanceX = LX.UTILS.clamp( Math.abs( startPos.x - endPos.x ), 0.0, 256.0 );
+        const cPDistance = 128.0 * Math.pow( distanceX / 256.0, 0.5 );
+
+        let cPoint1 = startPos.add( new LX.vec2( cPDistance, 0 ) );
+        let cPoint2 = endPos.sub( new LX.vec2( cPDistance, 0 ) );
+
+        path.setAttribute( 'd', `
+            M ${ startPos.x },${ startPos.y }
+            C ${ cPoint1.x },${ cPoint1.y } ${ cPoint2.x },${ cPoint2.y } ${ endPos.x },${ endPos.y }
+        ` );
+
+        path.setAttribute( 'stroke', color );
+    }
+
+    _updateNodeLinks( nodeId ) {
+
+        var node = this.nodes[ nodeId ] ? this.nodes[ nodeId ].data : null;
+
+        if( !node ) {
+            console.warn( `Can't finde node [${ nodeId }]` );
+            return;
+        }
+
+        const nodeDOM = this._getNodeDOMElement( nodeId );
+
+        // Update input links
+
+        for( let input of nodeDOM.querySelectorAll( '.ioinput' ) )
+        {
+            if( !input.links )
+                continue;
+
+            // Get first and only target output..
+            const targets = input.links.filter( v => v !== undefined )[ 0 ];
+            const targetNodeId = targets[ 0 ];
+
+            // It has been deleted..
+            if( !targetNodeId )
+                continue;
+
+            const ioIndex = parseInt( input.dataset[ 'index' ] );
+
+            var links = this._getLinks( targetNodeId, nodeId );
+
+            // Inputs only have 1 possible output connected
+            var link = links.find( i => ( i.inputIdx == ioIndex ) );
+
+            this._generatingLink = {
+                index: ioIndex,
+                io: input,
+                ioType: GraphEditor.NODE_IO_INPUT,
+                domEl: nodeDOM,
+                path: link.path
+            };
+
+            // Get end io
+
+            const outputNode = this._getNodeDOMElement( targetNodeId );
+            const io = outputNode.querySelector( '.lexgraphnodeoutputs' ).childNodes[ link.outputIdx ]
+
+            this._updatePreviewLink( null, io );
+        }
+
+        // Update output links
+        
+        
+        for( let output of nodeDOM.querySelectorAll( '.iooutput' ) )
+        {
+            if( !output.links )
+            continue;
+
+            const srcIndex = parseInt( output.dataset[ 'index' ] );
+
+            for( let targetIndex = 0; targetIndex < output.links.length; ++targetIndex )
+            {
+                const targets = output.links[ targetIndex ];
+
+                if( !targets )
+                continue;
+
+                for( let targetId of targets )
+                {
+                    var links = this._getLinks( nodeId, targetId );
+                    var link = links.find( i => ( i.inputIdx == targetIndex && i.outputIdx == srcIndex ) );
+
+                    // Outputs can have different inputs connected
+                    this._generatingLink = {
+                        index: link.outputIdx,
+                        io: output,
+                        ioType: GraphEditor.NODE_IO_OUTPUT,
+                        domEl: nodeDOM,
+                        path: link.path
+                    };
+
+                    // Get end io
+
+                    const inputNode = this._getNodeDOMElement( targetId );
+                    const io = inputNode.querySelector( '.lexgraphnodeinputs' ).childNodes[ link.inputIdx ]
+
+                    this._updatePreviewLink( null, io );
+                }
+            }
+        }
+
+        delete this._generatingLink;
+    }
+
+    _drawBoxSelection( e ) {
+
+        var svg = this._currentBoxSelectionSVG;
+
+        if( !svg )
+        {
+            var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
+            svg.classList.add( "box-selection-svg" );
+            if( this._boxSelectRemoving )
+                svg.classList.add( "removing" );
+            svg.style.width = "100%";
+            svg.style.height = "100%";
+            this._domLinks.appendChild( svg );
+            this._currentBoxSelectionSVG = svg;
+        }
+
+        // Generate box
+
+        let startPos = this._getPatternPosition( this._boxSelecting );
+        let size = this._getPatternPosition( this._mousePosition ).sub( startPos );
+
+        if( size.x < 0 ) startPos.x += size.x;
+        if( size.y < 0 ) startPos.y += size.y;
+
+        size = size.abs();
+
+        svg.innerHTML = `<rect
+            x="${ startPos.x }" y="${ startPos.y }"
+            rx="${ 6 }" ry="${ 6 }"
+            width="${ size.x }" height="${ size.y }"
+        "/>`;
+    }
+
+    // TODO: Return the ones in the viewport
+    _getVisibleNodes() {
+
+        if( !this.graph )
+        {
+            console.warn( "No graph set" );
+            return [];
+        }
+
+        return this.graph.nodes;
+    }
+
+    _selectNodesInBox( lt, rb, remove ) {
+
+        lt = this._getPatternPosition( lt );
+        rb = this._getPatternPosition( rb );
+
+        let size = rb.sub( lt );
+
+        if( size.x < 0 )
+        {
+            var tmp = lt.x;
+            lt.x = rb.x;
+            rb.x = tmp;
+        }
+
+        if( size.y < 0 )
+        {
+            var tmp = lt.y;
+            lt.y = rb.y;
+            rb.y = tmp;
+        }
+
+        for( let nodeEl of this._getAllDOMNodes() )
+        {
+            let pos = this._getNodePosition( nodeEl );
+            let size = new LX.vec2( nodeEl.offsetWidth, nodeEl.offsetHeight );
+
+            if( ( !( pos.x < lt.x && ( pos.x + size.x ) < lt.x ) && !( pos.x > rb.x && ( pos.x + size.x ) > rb.x ) ) && 
+                ( !( pos.y < lt.y && ( pos.y + size.y ) < lt.y ) && !( pos.y > rb.y && ( pos.y + size.y ) > rb.y ) ) )
+            {
+                if( remove )
+                    this._unSelectNode( nodeEl );
+                else
+                    this._selectNode( nodeEl, true, false );
+            }
+        }
+    }
+
+    _deleteSelection( e ) {
+
+        const lastNodeCount = this._domNodes.childElementCount;
+
+        for( let nodeId of this.selectedNodes )
+        {
+            this._deleteNode( nodeId );
+        }
+
+        this.selectedNodes.length = 0;
+
+        // We delete something, so add undo step..
+
+        if( this._domNodes.childElementCount != lastNodeCount )
+        {
+            this._addUndoStep();
+        }
+
+    }
+
+    _getBoundingFromGroup( groupDOM ) {
+
+        const x = parseFloat( groupDOM.style.left );
+        const y = parseFloat( groupDOM.style.top );
+
+        return new BoundingBox( new LX.vec2( x, y ), new LX.vec2( groupDOM.offsetWidth - 2, groupDOM.offsetHeight - 2 ) );
+    }
+
+    _getBoundingFromNodes( nodeIds ) {
+
+        let group_bb = null;
+
+        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 ) );
+
+            if( group_bb )
+            {
+                group_bb.merge( node_bb );
+            }
+            else
+            {
+                group_bb = node_bb;
+            }
+        }
+
+        // Add padding
+
+        const groupContentPadding = 8;
+
+        group_bb.origin.sub( new LX.vec2( groupContentPadding ), group_bb.origin );
+        group_bb.origin.sub( new LX.vec2( groupContentPadding ), group_bb.origin );
+
+        group_bb.size.add( new LX.vec2( groupContentPadding * 2.0 ), group_bb.size );
+        group_bb.size.add( new LX.vec2( groupContentPadding * 2.0 ), group_bb.size );
+
+        return group_bb;
+    }
+
+    /**
+     * @method _createGroup
+     * @description Creates a node group from the bounding box of the selected nodes
+     * @returns JSON data from the serialized graph
+     */
+
+    _createGroup() {
+
+        const group_bb = this._getBoundingFromNodes( this.selectedNodes );
+
+        let groupDOM = document.createElement( 'div' );
+        groupDOM.classList.add( 'lexgraphgroup' );
+        groupDOM.style.left = group_bb.origin.x + "px";
+        groupDOM.style.top = group_bb.origin.y + "px";
+        groupDOM.style.width = group_bb.size.x + "px";
+        groupDOM.style.height = group_bb.size.y + "px";
+
+        let groupResizer = document.createElement( 'div' );
+        groupResizer.classList.add( 'lexgraphgroupresizer' );
+
+        groupResizer.addEventListener( 'mousedown', inner_mousedown );
+
+        var that = this;
+        var lastPos = [0,0];
+
+        function inner_mousedown( e )
+        {
+            var doc = that.root.ownerDocument;
+            doc.addEventListener( 'mousemove', inner_mousemove );
+            doc.addEventListener( 'mouseup', inner_mouseup );
+            lastPos[0] = e.x;
+            lastPos[1] = e.y;
+            e.stopPropagation();
+            e.preventDefault();
+            document.body.classList.add( 'nocursor' );
+            groupResizer.classList.add( 'nocursor' );
+        }
+
+        function inner_mousemove( e )
+        {
+            let dt = new LX.vec2( lastPos[0] - e.x, lastPos[1] - e.y );
+            dt.div( that._scale, dt);
+
+            groupDOM.style.width = ( parseFloat( groupDOM.style.width ) - dt.x ) + "px";
+            groupDOM.style.height = ( parseFloat( groupDOM.style.height ) - dt.y ) + "px";
+
+            lastPos[0] = e.x;
+            lastPos[1] = e.y;
+
+            e.stopPropagation();
+            e.preventDefault();
+        }
+
+        function inner_mouseup( e )
+        {
+            var doc = that.root.ownerDocument;
+            doc.removeEventListener( 'mousemove', inner_mousemove );
+            doc.removeEventListener( 'mouseup', inner_mouseup );
+            document.body.classList.remove( 'nocursor' );
+            groupResizer.classList.remove( 'nocursor' );
+        }
+
+        let groupTitle = document.createElement( 'input' );
+        let defaultName = `Group ${ GraphEditor.LAST_GROUP_ID }`;
+        groupTitle.value = defaultName;
+        groupTitle.classList.add( 'lexgraphgrouptitle' );
+        groupTitle.disabled = true;
+
+        // Dbl click to rename
+
+        groupTitle.addEventListener( 'mousedown', e => {
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+        } );
+
+        groupTitle.addEventListener( 'focusout', e => {
+            groupTitle.disabled = true;
+            if( !groupTitle.value.length )
+                groupTitle.value = defaultName;
+        } );
+
+        groupTitle.addEventListener( 'keyup', e => {
+            if( e.key == 'Enter' ) {
+                groupTitle.blur();
+            }
+            else if( e.key == 'Escape' ) {
+                groupTitle.value = "";
+                groupTitle.blur();
+            }
+        });
+
+        groupDOM.addEventListener( 'dblclick', e => {
+            // Only for left click..
+            if( e.button != LX.MOUSE_LEFT_CLICK )
+                return;
+            groupTitle.disabled = false;
+            groupTitle.focus();
+        } );
+
+        groupDOM.appendChild( groupResizer );
+        groupDOM.appendChild( groupTitle );
+
+        this._domNodes.prepend( groupDOM );
+
+        // Move group!!
+
+        LX.makeDraggable( groupDOM, {
+            onMove: this._onMoveGroup.bind( this ),
+            onDragStart: this._onDragGroup.bind( this )
+        } );
+
+        GraphEditor.LAST_GROUP_ID++;
+    }
+
+    _addUndoStep( deleteRedo = true )  {
+
+        if( deleteRedo ) 
+        {
+            // Remove all redo steps
+            this._redoSteps.length = 0;
+        }
+
+        this._undoSteps.push( {
+            // TODO: Add graph state
+        } );
+    }
+
+    _doUndo() {
+
+        if( !this._undoSteps.length )
+            return;
+
+        this._addRedoStep();
+
+        // Extract info from the last state
+        const step = this._undoSteps.pop();
+
+        // Set old state
+        // TODO
+
+        console.log( "Undo!!" );
+    }
+
+    _addRedoStep()  {
+
+        this._redoSteps.push( {
+            // TODO: Add graph state
+        } );
+    }
+
+    _doRedo() {
+
+        if( !this._redoSteps.length )
+            return;
+
+        this._addUndoStep( false );
+
+        // Extract info from the next saved code state
+        const step = this._redoSteps.pop();
+
+        // Set old state
+        // TODO
+
+        console.log( "Redo!!" );
+    }
+
+    _togglePropertiesDialog( force ) {
+
+        this.propertiesDialog.root.classList.toggle( 'opened', force );
+
+        if( !force )
+        {
+            this.propertiesDialog.panel.clear();
+        }
+    }
+
+    _setSnappingValue( value ) {
+
+        this._snapValue = value;
+    }
+
+    _toggleSnapping() {
+
+        this._snapToGrid = !this._snapToGrid;
+
+        // Trigger position snapping for each node if needed
+
+        if( this._snapToGrid )
+        {
+            for( let nodeDom of this._getAllDOMNodes( true ) )
+            {
+                nodeDom.mustSnap = true;
+            }
+        }
+    }
+
+    _toggleSideBar() {
+
+        this._sidebar.classList.toggle( 'hidden' );
+    }
+}
+
+LX.GraphEditor = GraphEditor;
+
+
+/**
+ * @class Graph
+ */
+
+class Graph {
+
+    /**
+     * @param {*} options
+     * 
+     */
+
+    constructor( name, options = {} ) {
+
+        this.name = name ?? "Unnamed Graph";
+
+        // Nodes
+
+        this.nodes = [ ];
+
+        this.links = { };
+
+        // const mainNode = GraphEditor.addNode( 'system/Main' );
+        // mainNode.position = new LX.vec2( 650, 400 );
+
+        // 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 );
+
+        // 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 );
+
+        // // const multNode = new GraphNode( GraphEditor.DEFAULT_NODES[ 'Multiply' ] );
+        // // multNode.position = new LX.vec2( 200, 400 );
+
+        // const keydownNode = GraphEditor.addNode( 'events/KeyDown' );
+        // keydownNode.position = new LX.vec2( 600, 200 );
+
+        // const orNode = GraphEditor.addNode( 'logic/Or' );
+        // orNode.position = new LX.vec2( 435, 435 );
+
+        // const equalNode = GraphEditor.addNode( 'logic/Select' );
+        // equalNode.position = new LX.vec2( 135, 400 );
+
+        // this.nodes = [
+        //     mainNode,
+        //     addNode,
+        //     floatNode,
+        //     setVarNode,
+        //     stringNode,
+        //     keydownNode,
+        //     orNode,
+        //     equalNode,
+        //     // multNode
+        // ];
+    }
+
+    configure( o ) {
+
+        this.nodes.length = 0;
+
+        for( let node of o.nodes )
+        {
+            const newNode = GraphEditor.addNode( node.type );
+
+            newNode.id = node.id;
+            newNode.title = node.title;
+            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;
+
+            this.nodes.push( newNode );
+        }
+
+        this.links = o.links;
+
+        // editor options?
+
+        // zoom/translation ??
+    }
+
+    /**
+     * @method export
+     * @param {Boolean} prettify
+     * @returns JSON data from the serialized graph
+     */
+
+    export( prettify = true ) {
+        
+        var o = { };
+        o.nodes = [ ];
+        o.links = { };
+
+        for( let node of this.nodes )
+        {
+            o.nodes.push( node.serialize() );
+        }
+
+        for( let linkId in this.links )
+        {
+            const ioLinks = LX.deepCopy( this.links[ linkId ] );
+            ioLinks.forEach( v => delete v.path );
+            o.links[ linkId ] = ioLinks;
+        }
+
+        // editor options?
+
+        // zoom/translation ??
+
+        try
+        {
+            o = JSON.stringify( o, null, prettify ? 2 : null );
+        }
+        catch( e )
+        {
+            o = null;
+            console.error( `Can't export GraphNode [${ this.title }] of type [${ this.type }].` );
+        }
+
+        LX.downloadFile( this.name + ".json", o );
+
+        return o;
+    }
+}
 
-        const center = this._getPatternPosition( zoomCenter );
+LX.Graph = Graph;
 
-        const delta = e.deltaY;
+/**
+ * @class GraphNode
+ */
 
-        if( delta > 0.0 ) this._scale *= 0.9;
-        else this._scale *= ( 1.0 / 0.9 );
+class GraphNode {
 
-        this._scale = LX.UTILS.clamp( this._scale, GraphEditor.MIN_SCALE, GraphEditor.MAX_SCALE );
+    constructor() { 
 
-        // Compute zoom center in pattern space using new scale
-        // and get delta..
+        this.inputs     = [ ];
+        this.outputs    = [ ];
+        this.properties = [ ];
+    }
 
-        const newCenter = this._getPatternPosition( zoomCenter );
+    _hasOutputsConnected() {
 
-        const deltaCenter = newCenter.sub( center );
+        return true;
+    }
 
-        this._patternPosition = this._patternPosition.add( deltaCenter );
+    execute() {
 
-        this._updatePattern( GraphEditor.EVENT_MOUSEWHEEL );
+        if( !this._hasOutputsConnected() )
+            return;
+
+        if( this.onExecute )
+        {
+            this.onExecute();
+        }
     }
 
-    _processContextMenu( e ) {
-        
-        LX.addContextMenu( "Test", e, m => {
-            m.add( "option 1", () => { } );
-            m.add( "option 2", () => { } );
-        });
+    addInput( name, type ) {
+
+        this.inputs.push( { name: name, type: type } );
     }
 
-    /**
-     * @method frame
-     */
+    addOutput( name, type ) {
 
-    _frame() {
+        this.outputs.push( { name: name, type: type } );
+    }
 
-        this._update();
+    addProperty( name, type, value, selectOptions ) {
 
-        requestAnimationFrame( this.frame.bind(this) );
+        this.properties.push( { name: name, type: type, value: value, options: selectOptions } );
     }
 
-    /**
-     * @method update
-     */
+    getInput( index ) {
 
-    _update() {
-        
-        console.log("Update");
+        if( !this.inputs || !this.inputs.length || !this.inputs[ index ] )
+            return;
+
+        // Get data from link
+
+        for( let linkId in this.editor.graph.links )
+        {
+            const idx = linkId.indexOf( '@' + this.id );
+
+            if( idx < 0 )
+                continue;
+
+            const nodeLinks = this.editor.graph.links[ linkId ];
+
+            for ( var link of nodeLinks )
+            {
+                if( link.inputIdx != index )
+                    continue;
+
+                // This is the value!!
+                return link.data;
+            }
+        }
     }
 
-    _generatePattern() {
+    setOutput( index, data ) {
 
-        // Generate pattern
+        if( !this.outputs || !this.outputs.length || !this.outputs[ index ] )
+            return;
+
+        // Set data in link
+
+        for( let linkId in this.editor.graph.links )
         {
-            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( 'width', this._patternSize.x )
-            pattern.setAttribute( 'height', this._patternSize.y );
-            pattern.setAttribute( 'patternUnits', 'userSpaceOnUse' );
+            const idx = linkId.indexOf( this.id + '@' );
 
-            var circle = document.createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
-            circle.setAttribute( 'cx', this._circlePatternSize );
-            circle.setAttribute( 'cy', this._circlePatternSize );
-            circle.setAttribute( 'r', this._circlePatternSize );
-            circle.setAttribute( 'fill', this._circlePatternColor );
+            if( idx < 0 )
+                continue;
 
-            pattern.appendChild( circle );
+            const nodeLinks = this.editor.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"  )
+                {
+                    // In case of supported casting, use function to cast..
+
+                    var fn = this.editor.supportedCastTypes[ link.outputType + '@' + link.inputType ];
+
+                    // Use function if it's possible to cast!
+
+                    data = fn ? fn( LX.deepCopy( data ) ) : null;
+                }
+
+                link.data = data;
+            }
         }
-        
-        var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
-        svg.classList.add( "background-svg" );
-        svg.style.width = "100%";
-        svg.style.height = "100%";
+    }
 
-        svg.appendChild( pattern );
+    getOutput( index ) {
 
-        var rect = document.createElementNS( 'http://www.w3.org/2000/svg', 'rect' );
-        rect.setAttribute( 'x', '0' );
-        rect.setAttribute( 'y', '0' );
-        rect.setAttribute( 'width', '100%' );
-        rect.setAttribute( 'height', '100%' );
-        rect.setAttribute( 'fill', 'url(#pattern-0)' );
+        return this.outputs[ index ].value;
+    }
 
-        svg.appendChild( rect );
+    serialize() {
 
-        this._background = svg;
+        var o = { };
 
-        this.root.appendChild( this._background );
+        o.id = this.id;
+        o.title = this.title;
+        o.color = this.color;
+        o.position = this.position;
+        o.type = this.type;
+        o.inputs = this.inputs;
+        o.outputs = this.outputs;
+        o.properties = this.properties;
+
+        return o;
     }
+}
 
-    _updatePattern() {
+LX.GraphNode = GraphNode;
 
-        if( !this._background )
-            return;
+/* 
+    ************ PREDEFINED NODES ************
 
-        const patternSize = this._patternSize.mul( this._scale );
-        const circlePatternSize = this._circlePatternSize * this._scale;
-        const patternPosition = this._patternPosition.mul( this._scale );
-        
-        let pattern = this._background.querySelector( 'pattern' );
-        pattern.setAttribute( 'x', patternPosition.x );
-        pattern.setAttribute( 'y', patternPosition.y );
-        pattern.setAttribute( 'width', patternSize.x )
-        pattern.setAttribute( 'height', patternSize.y );
+    Nodes can override the following methods:
 
-        var circle = this._background.querySelector( 'circle' );
-        circle.setAttribute( 'cx', circlePatternSize );
-        circle.setAttribute( 'cy', circlePatternSize );
-        circle.setAttribute( 'r', circlePatternSize );
+        - onCreate: Add inputs, outputs and properties
+        - onStart: Callback on graph starts
+        - onStop: Callback on graph stops
+        - onExecute: Callback for node execution
+*/
 
-        // Nodes
 
-        const w = this._domNodes.offsetWidth * 0.5;
-        const h = this._domNodes.offsetHeight * 0.5;
+/*
+    Math nodes
+*/
 
-        const dw = w - w * this._scale;
-        const dh = h - h * this._scale;
+class NodeAdd extends GraphNode
+{
+    onCreate() {
+        this.addInput( null, "float" );
+        this.addInput( null, "float" );
+        this.addOutput( null, "float" );
+        this.addProperty( "A", "float", 0 );
+        this.addProperty( "B", "float", 0 );
+    }
+    
+    onExecute() {
+        var a = this.getInput( 0 ) ?? this.properties[ 0 ].value;
+        var b = this.getInput( 1 ) ?? this.properties[ 1 ].value;
+        this.setOutput( 0, a + b );
+    }
+}
 
-        this._domNodes.style.transform = `
-            translate(` + ( patternPosition.x - dw ) + `px, ` + ( patternPosition.y - dh ) + `px) 
-            scale(` + this._scale + `)
-        `;
+NodeAdd.description = "Addition of 2 values (A+B)."
+GraphEditor.registerCustomNode( "math/Add", NodeAdd );
+
+class NodeSubstract extends GraphNode
+{
+    onCreate() {
+        this.addInput( null, "float" );
+        this.addInput( null, "float" );
+        this.addOutput( null, "float" );
+        this.addProperty( "A", "float", 0 );
+        this.addProperty( "B", "float", 0 );
+    }
+    
+    onExecute() {
+        var a = this.getInput( 0 ) ?? this.properties[ 0 ].value;
+        var b = this.getInput( 1 ) ?? this.properties[ 1 ].value;
+        this.setOutput( 0, a - b );
+    }
+}
+
+NodeSubstract.description = "Substraction of 2 values (A-B)."
+GraphEditor.registerCustomNode( "math/Substract", NodeSubstract );
+
+class NodeMultiply extends GraphNode
+{
+    onCreate() {
+        this.addInput( null, "float" );
+        this.addInput( null, "float" );
+        this.addOutput( null, "float" );
+        this.addProperty( "A", "float", 0 );
+        this.addProperty( "B", "float", 0 );
     }
+    
+    onExecute() {
+        var a = this.getInput( 0 ) ?? this.properties[ 0 ].value;
+        var b = this.getInput( 1 ) ?? this.properties[ 1 ].value;
+        this.setOutput( 0, a * b );
+    }
+}
 
-    _getPatternPosition( renderPosition ) {
+NodeMultiply.description = "Multiplication of 2 values (A*B)."
+GraphEditor.registerCustomNode( "math/Multiply", NodeMultiply );
+
+class NodeDivide extends GraphNode
+{
+    onCreate() {
+        this.addInput( null, "float" );
+        this.addInput( null, "float" );
+        this.addOutput( null, "float" );
+        this.addProperty( "A", "float", 0 );
+        this.addProperty( "B", "float", 0 );
+    }
+    
+    onExecute() {
+        var a = this.getInput( 0 ) ?? this.properties[ 0 ].value;
+        var b = this.getInput( 1 ) ?? this.properties[ 1 ].value;
+        this.setOutput( 0, a / b );
+    }
+}
 
-        return renderPosition.div( this._scale ).sub( this._patternPosition );
+NodeDivide.description = "Division of 2 values (A/B)."
+GraphEditor.registerCustomNode( "math/Divide", NodeDivide );
+
+class NodeSqrt extends GraphNode
+{
+    onCreate() {
+        this.addInput( null, "float" );
+        this.addOutput( null, "float" );
+        this.addProperty( "Value", "float", 0 );
     }
+    
+    onExecute() {
+        var a = this.getInput( 0 ) ?? this.properties[ 0 ].value;
+        this.setOutput( 0, Math.sqrt( a ) );
+    }
+}
 
-    _computeNodeSize( node ) {
+NodeSqrt.description = "Square root of a scalar."
+GraphEditor.registerCustomNode( "math/SQRT", NodeSqrt );
+
+/*
+Math Missing:
+- abs
+- ceil
+- clamp
+- floor
+- fract
+- lerp
+- log
+- max
+- min
+- negate
+- pow
+- remainder
+- round
+- remap range
+- saturate
+- step
+*/
+
+
+/*
+    Logical operator nodes
+*/
+
+class NodeAnd extends GraphNode
+{
+    onCreate() {
+        this.addInput( null, "bool" );
+        this.addInput( null, "bool" );
+        this.addOutput( null, "bool" );
+    }
+    
+    onExecute() {
+        var a = this.getInput( 0 ), b = this.getInput( 1 );
+        if( a == undefined || b == undefined )
+            return;
+        this.setOutput( 0, !!( a ) && !!( b ) );
+    }
+}
 
-        const ctx = this.dom.getContext("2d");
-        var textMetrics = ctx.measureText( node.name );
+GraphEditor.registerCustomNode( "logic/And", NodeAnd );
 
-        let sX = 32 + textMetrics.width * 1.475;
+class NodeOr extends GraphNode
+{
+    onCreate() {
+        this.addInput( null, "bool" );
+        this.addInput( null, "bool" );
+        this.addOutput( null, "bool" );
+    }
+    
+    onExecute() {
+        var a = this.getInput( 0 ), b = this.getInput( 1 );
+        if( a == undefined || b == undefined )
+            return;
+        this.setOutput( 0, !!( a ) || !!( b ) );
+    }
+}
 
-        const rows = Math.max(1,  Math.max(node.inputs.length, node.outputs.length));
-        let sY = rows * GraphEditor.NODE_ROW_HEIGHT + GraphEditor.NODE_TITLE_HEIGHT;
+GraphEditor.registerCustomNode( "logic/Or", NodeOr );
 
-        return [sX, sY];
+class NodeEqual extends GraphNode
+{
+    onCreate() {
+        this.addInput( null, "float" );
+        this.addInput( null, "float" );
+        this.addOutput( null, "bool" );
+    }
+    
+    logicOp( a, b ) {
+        return a == b;
     }
 
-    _drawConnections() {
+    onExecute() {
+        var a = this.getInput( 0 ), b = this.getInput( 1 );
+        if( a == undefined || b == undefined )
+            return;
+        this.setOutput( 0, this.logicOp( a, b ) );
+    }
+}
 
-        console.log( "_drawConnections" );
+GraphEditor.registerCustomNode( "logic/Equal", NodeEqual );
 
-        // const ctx = this.dom.getContext("2d");
+class NodeNotEqual extends NodeEqual
+{
+    logicOp( a, b ) {
+        return a != b;
+    }
+}
 
-        // let nodes = this._getVisibleNodes();
+GraphEditor.registerCustomNode( "logic/NotEqual", NodeNotEqual );
 
-        // let start = { x: 50, y: 20 };
-        // let cp1 = { x: 230, y: 30 };
-        // let cp2 = { x: 150, y: 80 };
-        // let end = { x: 250, y: 100 };
+class NodeLess extends NodeEqual
+{
+    logicOp( a, b ) {
+        return a < b;
+    }
+}
 
-        // // Cubic Bézier curve
-        // ctx.beginPath();
-        // ctx.moveTo(start.x, start.y);
-        // ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);
-        // ctx.stroke();
+GraphEditor.registerCustomNode( "logic/Less", NodeLess );
 
-        // for( let node of nodes )
-        // {
-        //     // Discard nodes without inputs...
-        //     if (!node.inputs || !node.inputs.length) {
-        //         continue;
-        //     }
+class NodeLessEqual extends NodeEqual
+{
+    logicOp( a, b ) {
+        return a <= b;
+    }
+}
 
-        //     for (let input of node.inputs) {
+GraphEditor.registerCustomNode( "logic/LessEqual", NodeLessEqual );
 
+class NodeGreater extends NodeEqual
+{
+    logicOp( a, b ) {
+        return a > b;
+    }
+}
 
-        //     }
-        // }
+GraphEditor.registerCustomNode( "logic/Greater", NodeGreater );
+
+class NodeGreaterEqual extends NodeEqual
+{
+    logicOp( a, b ) {
+        return a >= b;
     }
+}
 
-    // TODO: Return the ones in the viewport
-    _getVisibleNodes() {
+GraphEditor.registerCustomNode( "logic/GreaterEqual", NodeGreaterEqual );
 
-        if( !this.graph )
-        {
-            console.warn( "No graph set" );
-            return [];
-        }
+class NodeSelect extends GraphNode
+{
+    onCreate() {
+        this.addInput( "True", "any" );
+        this.addInput( "False", "any" );
+        this.addInput( "Condition", "bool" );
+        this.addOutput( null, "any" );
+    }
+    
+    onExecute() {
+        var a = this.getInput( 0 ), b = this.getInput( 1 ), cond = this.getInput( 2 );
+        if( a == undefined || b == undefined || cond == undefined )
+            return;
+        this.setOutput( 0, cond ? a : b );
+    }
+}
 
-        return this.graph.nodes;
+GraphEditor.registerCustomNode( "logic/Select", NodeSelect );
+
+class NodeCompare extends GraphNode
+{
+    onCreate() {
+        this.addInput( "A", "any" );
+        this.addInput( "B", "any" );
+        this.addInput( "True", "any" );
+        this.addInput( "False", "any" );
+        this.addProperty( "Condition", "select", 'Equal', [ 'Equal', 'Not Equal', 'Less', 'Less Equal', 'Greater', 'Greater Equal' ] );
+        this.addOutput( null, "any" );
+    }
+    
+    onExecute() {
+        var a = this.getInput( 0 ), b = this.getInput( 1 ), TrueVal = this.getInput( 2 ), FalseVal = this.getInput( 3 );;
+        var cond = this.properties[ 0 ].value;
+        if( a == undefined || b == undefined || TrueVal == undefined || FalseVal == undefined )
+            return;
+        var output;
+        switch( cond ) {
+            case 'Equal': output = ( a == b ? TrueVal : FalseVal ); break;
+            case 'Not Equal': output = ( a != b ? TrueVal : FalseVal ); break;
+            case 'Less': output = ( a < b ? TrueVal : FalseVal ); break;
+            case 'Less Equal': output = ( a <= b ? TrueVal : FalseVal ); break;
+            case 'Greater': output = ( a > b ? TrueVal : FalseVal ); break;
+            case 'Greater Equal': output = ( a >= b ? TrueVal : FalseVal ); break;
+        }
+        this.setOutput( 0, output );
+    }
+}
+NodeCompare.description = "Compare A to B given the selected operator. If true, return value of True else return value of False."
+GraphEditor.registerCustomNode( "logic/Compare", NodeCompare );
+
+/*
+    Event nodes
+*/
+
+class NodeKeyDown extends GraphNode
+{
+    onCreate() {
+        this.addOutput( null, "bool" );
+        this.addProperty( "Key", "string", " " );
+    }
+    
+    onExecute() {
+        this.setOutput( 0, !!this.editor.keys[ this.properties[ 0 ].value ] );
     }
+}
+
+GraphEditor.registerCustomNode( "events/KeyDown", NodeKeyDown );
 
+/*
+    Input nodes
+*/
+
+class NodeString extends GraphNode
+{
+    onCreate() {
+        this.addOutput( null, "string" );
+        this.addProperty( null, "string", "text" );
+    }
+    
+    onExecute() {
+        this.setOutput( 0, this.properties[ 0 ].value );
+    }
 }
 
-LX.GraphEditor = GraphEditor;
+GraphEditor.registerCustomNode( "inputs/String", NodeString );
 
-/**
- * @class Graph
- */
+class NodeFloat extends GraphNode
+{
+    onCreate() {
+        this.addOutput( null, "float" );
+        this.addProperty( null, "float", 0.0 );
+    }
+    
+    onExecute() {
+        this.setOutput( 0, this.properties[ 0 ].value );
+    }
+}
 
-class Graph {
+GraphEditor.registerCustomNode( "inputs/Float", NodeFloat );
 
-    /**
-     * @param {*} options
-     * 
-     */
+class NodeVector2 extends GraphNode
+{
+    onCreate() {
+        this.addOutput( "Value", "vec2" );
+        this.addProperty( "Value", "vec2", [ 0, 0 ] );
+    }
+    
+    onExecute() {
+        this.setOutput( 0, this.properties[ 0 ].value );
+    }
+}
 
-    constructor( options = {} ) {
+GraphEditor.registerCustomNode( "inputs/Vector2", NodeVector2 );
 
-        // Nodes
+class NodeVector3 extends GraphNode
+{
+    onCreate() {
+        this.addOutput( "Value", "vec3" );
+        this.addProperty( "Value", "vec3", [ 0, 0, 0 ] );
+    }
+    
+    onExecute() {
+        this.setOutput( 0, this.properties[ 0 ].value );
+    }
+}
 
-        this.nodes = [
-            new GraphNode({
-                name: "Node 1",
-                position: new LX.vec2( 200, 200 ),
-                inputs: [
-                    {
-                        name: "Speed",
-                        type: "float"
-                    },
-                    {
-                        name: "Offset",
-                        type: "vec2"
-                    }
-                ]
-            }),
-            new GraphNode({
-                name: "Node 2",
-                size: new LX.vec2( 120, 100 ),
-                position: new LX.vec2( 500, 350 ),
-                color: "#f7884c",
-                inputs: [],
-                outputs: [
-                    {
-                        name: "Speed",
-                        type: "float"
-                    },
-                    {
-                        name: "Offset",
-                        type: "vec2"
-                    },
-                    {
-                        name: "Loop",
-                        type: "bool"
-                    }
-                ]
-            }),
-            new GraphNode({
-                name: "Node 3",
-                position: new LX.vec2( 200, 400 ),
-                inputs: [
-                    {
-                        name: "Speed",
-                        type: "float"
-                    },
-                    {
-                        name: "Offset",
-                        type: "vec2"
-                    }
-                ],
-                outputs: [
-                    {
-                        name: "Speed",
-                        type: "float"
-                    },
-                    {
-                        name: "Offset",
-                        type: "vec3"
-                    },
-                    {
-                        name: "Loop",
-                        type: "bool"
-                    }
-                ]
-            }),
-            new GraphNode({
-                name: "Add",
-                position: new LX.vec2( 300, 300 ),
-                inputs: [
-                    {
-                        type: "float"
-                    },
-                    {
-                        type: "float"
-                    }
-                ],
-                outputs: [
-                    {
-                        type: "float"
-                    }
-                ]
-            })
-        ];
+GraphEditor.registerCustomNode( "inputs/Vector3", NodeVector3 );
+
+class NodeVector4 extends GraphNode
+{
+    onCreate() {
+        this.addOutput( "Value", "vec4" );
+        this.addProperty( "Value", "vec4", [ 0, 0, 0, 0 ] );
+    }
+    
+    onExecute() {
+        this.setOutput( 0, this.properties[ 0 ].value );
     }
 }
 
-LX.Graph = Graph;
+GraphEditor.registerCustomNode( "inputs/Vector4", NodeVector4 );
 
-/**
- * @class GraphNode
- */
+/*
+    Variable nodes
+*/
 
-class GraphNode {
+class NodeSetVariable extends GraphNode
+{
+    onCreate() {
+        this.addInput( "Value", "any" );
+        this.addOutput( null, "any" );
+        this.addProperty( "Name", "string", "" );
+    }
+    
+    onExecute() {
+        var varName = this.getInput( 0 );
+        if( varName == undefined )
+            return;
+        var varValue = this.getInput( 1 );
+        if( varValue == undefined )
+            return;
+        this.graph.setVariable( varName, varValue );
+        this.setOutput( 0, varValue );
+    }
+}
 
-    /**
-     * @param {*} options
-     * 
-     */
+NodeSetVariable.title = "Set Variable";
+GraphEditor.registerCustomNode( "variables/SetVariable", NodeSetVariable );
 
-    constructor( options = {} ) {
+class NodeGetVariable extends GraphNode
+{
+    onCreate() {
+        this.addOutput( null, "any" );
+        this.addProperty( "Name", "string", "" );
+    }
 
-        this.name = options.name ?? "Unnamed";
-        this.size = options.size;
-        this.position = options.position ?? new LX.vec2( 0, 0 );
-        this.color = options.color;
-        
-        this.inputs = options.inputs ?? [];
-        this.outputs = options.outputs ?? [];
+    onExecute() {
+        var varName = this.getInput( 0 );
+        if( varName == undefined )
+            return;
+        var data = this.editor.getVariable( varName );
+        if( data != undefined )
+            this.setOutput( 0, data );
     }
+}
+
+NodeGetVariable.title = "Get Variable";
+GraphEditor.registerCustomNode( "variables/GetVariable", NodeGetVariable );
 
-    computeSize() {
+/*
+    System nodes
+*/
 
-        let sX = 16 + this.name.length * 10;
+class NodeConsoleLog extends GraphNode
+{
+    onCreate() {
+        this.addInput( null, "any" );
+    }
+
+    onExecute() {
+        var data = this.getInput( 0 );
+        if( data == undefined )
+            return;
+        console.log( data );
+    }
+}
 
-        const rows = Math.max(1, Math.max(this.inputs.length, this.outputs.length));
-        let sY = rows * GraphEditor.NODE_ROW_HEIGHT + GraphEditor.NODE_TITLE_HEIGHT;
+NodeConsoleLog.title = "Console Log";
+GraphEditor.registerCustomNode( "system/ConsoleLog", NodeConsoleLog );
 
-        return [sX, sY];
+class NodeMain extends GraphNode
+{
+    onCreate() {
+        this.addInput( "a", "float" );
+        this.addInput( "b", "bool" );
+        this.addInput( "Color", "vec4" );
     }
+
+    onExecute() {
+        var data = this.getInput( 2 );
+        if( data == undefined )
+            return;
+        console.log( data );
+    };
 }
 
-LX.GraphNode = GraphNode;
+GraphEditor.registerCustomNode( "system/Main", NodeMain );
 
 export { GraphEditor, Graph, GraphNode };