lexgui 0.1.26 → 0.1.28

package/build/components/nodegraph.js

@@ -39,22 +39,29 @@ function doAsync( fn, ms ) {
 }
 
 /**
- * @class GraphCanvas
+ * @class GraphEditor
  */
 
-class GraphCanvas {
+class GraphEditor {
 
     static __instances  = [];
 
-    static BACK_IMAGE_SRC = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAplJREFUeF7tm8FqwzAQRG2DDynEvaT//5fNKXFRCqZQkjLSyEzxC/Qmb5eZN9pYasfL5WMd+MQoMBZDxnEc5nl+2tS6rkP5mabpZeNlzf1+f6wrNZ99jrau6HC73f7UpazbDDmfFwsl1+vncDq9WWqVIkerhyGN6LiBwRAM0RRwE5hej4RofPxa7TYYQzBEU8BNYHo9EqLxsc+WVX7Lsrw3tvb9eDqB6f2RkEYM3QZjCIZoCrgJTK9HQjQ+9hnq5WSWw8U6Z9yJIyF1PmxPYUiYgBiCIZoCbmKOVu8xQ4rkr65wNUtY3aIAQ71FvQ5HRRiCIZoCh5whvBhqkPxc7QaGLaveiy7XDRiCIZoC7i0hvR4J0fjgtDedaHd/25s6d+p1UeliCF9768zo8UcdzJB6L/ja26hdFwHZshpdcQvorseWFWYwhmCIpoB7S0ivR0I0PnhTTyfa3R936o0JcT/OltWoaJeEcHRS7wqG1GvHm3qjdv9CQBLS6LJbQHc9hnqYwRiCIZoC7i0hvR4J0fjY5+ik/Bbu1OuccSeOhNT5sD2FIWECYgiGaAq4iTlaPWaIxts+37I47a13xZ1gElLvRZfDTwzBEE0B95aQXo87dY2P7qvZsholdicOQzBEU8BNYHo9EqLxwYthOtHu/kgICdEUcBOYXo+EaHwwQ9KJdvfH/6mTEE0BN4Hp9ZghGh/MkHSi3f2REBKiKeAmML0eCdH4YIakE+3uj4SQEE0BN4Hp9bhT1/jovpotq1Fid+IwBEM0BdwEptcjIRofvIekE+3uj4SQEE0BN4Hp9UiIxgczJJ1od38khIRoCrgJTK9HQjQ+mCHpRLv7IyEkRFPATWB6PRKi8cEMSSfa3R8JISGaAm4C0+t9AfQNJzgm7/oIAAAAAElFTkSuQmCC";
+    // Canvas
+
+    static MIN_SCALE    = 0.25;
+    static MAX_SCALE    = 4.0;
+
+    static EVENT_MOUSEMOVE      = 0;
+    static EVENT_MOUSEWHEEL     = 1;
 
     // Node Drawing
+
     static NODE_TITLE_HEIGHT    = 24;
     static NODE_ROW_HEIGHT      = 16;
 
-    static NODE_SHAPE_RADIUS    = 4;
-    static NODE_TITLE_RADIUS    = [GraphCanvas.NODE_SHAPE_RADIUS, GraphCanvas.NODE_SHAPE_RADIUS, 0, 0];
-    static NODE_BODY_RADIUS     = [GraphCanvas.NODE_SHAPE_RADIUS, GraphCanvas.NODE_SHAPE_RADIUS, GraphCanvas.NODE_SHAPE_RADIUS, GraphCanvas.NODE_SHAPE_RADIUS];
+    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 DEFAULT_NODE_TITLE_COLOR     = "#4a59b0";
     static DEFAULT_NODE_BODY_COLOR      = "#111";
@@ -66,68 +73,233 @@ class GraphCanvas {
 
     constructor( area, options = {} ) {
 
-        GraphCanvas.__instances.push( this );
+        GraphEditor.__instances.push( this );
 
         this.base_area = area;
-        this.area = new LX.Area( { className: "lexGraph" } );
+        this.area = new LX.Area( { className: "lexgraph" } );
 
-        area.root.classList.add('grapharea');
+        area.root.classList.add( 'grapharea' );
 
         this.root = this.area.root;
+        this.root.tabIndex = -1;
         area.attach( this.root );
 
         // Bind resize
+
         area.onresize = ( bb ) => {
-            this.dom.width = bb.width;
-            this.dom.height = bb.height;
-            this._backDirty = true;
-            this._frontDirty = true;
+            
         };
 
-        this.root.addEventListener( 'keydown', this._processKey.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( '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) );
-
-        // State
-
-        this.drawAllFrames      = false;
-        this.isFocused          = false;
-        this._backDirty         = true;
-        this._frontDirty        = true;
-
-        // Canvas
-
-        this.dom = document.createElement('canvas');
-        this.dom.width = area.size[0];
-        this.dom.height = area.size[1];
-        this.dom.tabIndex = -1;
-        this.area.attach( this.dom );
-
-        this.frames         = 0;
-        this.fps            = 0;
-        this._lastDrawTime  = 0;
-        this._drawTime      = 0;
-
-        this.font = new FontFace("Ubuntu", "url(../data/Ubuntu-Bold.ttf)");
-        this.font.load().then(
-            ( font ) => {
-                document.fonts.add( font );
-                requestAnimationFrame( this.frame.bind(this) );
-            },
-            (err) => {
-                console.error(err);
-            },
-        );
+        this.root.addEventListener( 'keydown', this._processKey.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( '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._lastMousePosition = new LX.vec2( 0, 0 );
+
+        // Back pattern
+        
+        const f = 15.0;
+        this._patternPosition = new LX.vec2( 0, 0 );
+        this._patternSize = new LX.vec2( f );
+        this._circlePatternSize = f * 0.04;
+        this._circlePatternColor = '#71717a9c';
+
+        this._generatePattern();
+
+        // Renderer state
+
+        this._scale = 1.0;
+
+        // Node container
+
+        this._domNodes = document.createElement( 'div' );
+        this._domNodes.classList.add( 'lexgraphnodes' );
+        this.root.appendChild( this._domNodes );
+
+        // requestAnimationFrame( this._frame.bind(this) );
     }
 
     static getInstances()
     {
-        return GraphCanvas.__instances;
+        return GraphEditor.__instances;
+    }
+
+    /**
+     * @method setGraph
+     * @param {Graph} graph:
+     */
+
+    setGraph( graph ) {
+
+        this.graph = graph;
+
+        if( !this.graph.nodes )
+        {
+            console.warn( 'Graph does not contain any node!' );
+            return ;
+        }
+
+        for( let node of this.graph.nodes )
+        {
+            this._createNode( node );
+        }
+    }
+
+    /**
+     * @method clear
+     */
+
+    clear() {
+
+        this._domNodes.innerHTML = "";
+    }
+
+    /**
+     * @method unSelectAll
+     */
+
+    unSelectAll( forceOrder = true ) {
+
+        this._domNodes.querySelectorAll( '.lexgraphnode' ).forEach( v => {
+            v.classList.remove( 'selected' );
+            // if( forceOrder )
+                // v.style.zIndex = "0";
+        } );
+    }
+
+    _createNode( node ) {
+
+        var nodeContainer = document.createElement( 'div' );
+        nodeContainer.classList.add( 'lexgraphnode' );
+        
+        nodeContainer.style.left = node.position.x + "px";
+        nodeContainer.style.top = node.position.y + "px";
+
+        if( node.color )
+        {
+            nodeContainer.style.backgroundColor = node.color;
+        }
+
+        // nodeContainer.addEventListener( 'click', e => {
+
+        //     // TODO: check multiple selection
+        //     this.unSelectAll();
+
+        //     nodeContainer.classList.toggle( 'selected' );
+        //     nodeContainer.style.zIndex = "1";
+
+        //     // Refresh node render order
+        //     this._domNodes.appendChild( nodeContainer );
+        // } );
+
+        // Title header
+        var nodeHeader = document.createElement( 'div' );
+        nodeHeader.classList.add( 'lexgraphnodeheader' );
+        nodeHeader.innerText = node.name;
+        nodeContainer.appendChild( nodeHeader );
+
+        // Inputs and outputs
+        var nodeIO = document.createElement( 'div' );
+        nodeIO.classList.add( 'lexgraphnodeios' );
+        nodeContainer.appendChild( nodeIO );
+
+        const hasInputs = node.inputs && node.inputs.length;
+        const hasOutputs = node.outputs && node.outputs.length;
+
+        // Inputs
+        {
+            var nodeInputs = null;
+
+            if( node.inputs && node.inputs.length )
+            {
+                nodeInputs = document.createElement( 'div' );
+                nodeInputs.classList.add( 'lexgraphnodeinputs' );
+                nodeInputs.style.width = hasOutputs ? "50%" : "100%";
+                nodeIO.appendChild( nodeInputs );
+            }
+
+            for( let i of node.inputs )
+            {
+                if( !i.type )
+                {
+                    console.warn( `Missing type for node [${ node.name }], skipping...` );
+                    continue;
+                }
+
+                var input = document.createElement( 'div' );
+                input.classList.add( 'lexgraphnodeio' );
+
+                var type = document.createElement( 'span' );
+                type.className = 'io__type input ' + i.type;
+                type.innerHTML = "<span>" + i.type[ 0 ].toUpperCase() + "</span>";
+                input.appendChild( type );
+
+                if( i.name )
+                {
+                    var name = document.createElement( 'span' );
+                    name.classList.add( 'io__name' );
+                    name.innerText = i.name;
+                    input.appendChild( name );
+                }
+
+                nodeInputs.appendChild( input );
+            }
+        }
+
+        // Outputs
+        {
+            var nodeOutputs = null;
+
+            if( node.outputs && node.outputs.length )
+            {
+                nodeOutputs = document.createElement( 'div' );
+                nodeOutputs.classList.add( 'lexgraphnodeoutputs' );
+                nodeOutputs.style.width = hasInputs ? "50%" : "100%";
+                nodeIO.appendChild( nodeOutputs );
+            }
+
+            for( let o of node.outputs )
+            {
+                if( !o.type  )
+                {
+                    console.warn( `Missing type for node [${ node.name }], skipping...` );
+                }
+
+                var output = document.createElement( 'div' );
+                output.className = 'lexgraphnodeio output';
+
+                if( o.name )
+                {
+                    var name = document.createElement( 'span' );
+                    name.classList.add( 'io__name' );
+                    name.innerText = o.name;
+                    output.appendChild( name );
+                }
+
+                var type = document.createElement( 'span' );
+                type.className = 'io__type output ' + o.type;
+                type.innerHTML = "<span>" + o.type[ 0 ].toUpperCase() + "</span>";
+                output.appendChild( type );
+
+                nodeOutputs.appendChild( output );
+            }
+        }
+
+        // Drag listener
+
+        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';
+        } } );
+
+        this._domNodes.appendChild( nodeContainer );
     }
 
     _processFocus( active ) {
@@ -135,13 +307,18 @@ class GraphCanvas {
         this.isFocused = active;
     }
 
-    _processKey(e) {
+    _processKey( e ) {
 
         var key = e.key ?? e.detail.key;
         console.log( key );
     }
 
-    _processMouse(e) {
+    _processMouse( e ) {
+
+        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 );
 
         if( e.type == 'mousedown' )
         {
@@ -150,14 +327,14 @@ class GraphCanvas {
         
         else if( e.type == 'mouseup' )
         {
-            if( (LX.getTime() - this.lastMouseDown) < 300 ) {
-                this._processClick(e);
+            if( (LX.getTime() - this.lastMouseDown) < 120 ) {
+                this._processClick( e );
             }
         }
 
         else if( e.type == 'mousemove' )
         {
-            
+            this._processMouseMove( e );
         }
 
         else if ( e.type == 'click' ) // trip
@@ -171,57 +348,94 @@ class GraphCanvas {
             }
         }
 
+        else if ( e.type == 'mousewheel' ) {
+            e.preventDefault();
+            this._processWheel( e );
+        }
+
         else if ( e.type == 'contextmenu' ) {
-            e.preventDefault()
-            this._processContextMenu( e );
+
+            e.preventDefault();
+            
+            if( (LX.getTime() - this.lastMouseDown) < 120 ) {
+                this._processContextMenu( e );
+            }
         }
+
+        this._lastMousePosition = this._mousePosition;
     }
 
     _processClick( e ) {
 
-        
-    }
+        if( e.target.classList.contains( 'lexgraphnodes' ) )
+        {
+            this._processBackgroundClick( e );
+            return;
+        }
 
-    _processContextMenu( e ) {
-        
-        LX.addContextMenu( "Test", e, m => {
-            m.add( "option 1", () => { } );
-            m.add( "option 2", () => { } );
-        });
+        console.log(e.target);
     }
 
-    _forceDraw() {
+    _processBackgroundClick( e ) {
 
-        this._backDirty = true;
-        this._frontDirty = true;
+        this.unSelectAll( false );
     }
 
-    /**
-     * @method setGraph
-     * @param {Graph} graph:
-     */
+    _processMouseMove( e ) {
 
-    setGraph( graph ) {
+        const rightPressed = ( e.which == 3 );
+        
+        if( rightPressed )
+        {
+            this._patternPosition.add( this._deltaMousePosition.div( this._scale ), this._patternPosition );
 
-        this.graph = graph;
+            this._updatePattern();
+        }
     }
 
-    /**
-     * @method clear
-     */
+    _processWheel( e ) {
+
+        // 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 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..
 
-    clear(  ) {
+        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( "Test", e, m => {
+            m.add( "option 1", () => { } );
+            m.add( "option 2", () => { } );
+        });
     }
 
     /**
      * @method frame
      */
 
-    frame() {
+    _frame() {
 
-        // this.update();
-        this.draw();
+        this._update();
 
         requestAnimationFrame( this.frame.bind(this) );
     }
@@ -230,102 +444,90 @@ class GraphCanvas {
      * @method update
      */
 
-    update() {
+    _update() {
         
         console.log("Update");
     }
 
-    /**
-     * @method draw
-     */
-
-    draw() {
+    _generatePattern() {
 
-        if (!this.dom || !this.dom.width || !this.dom.height)
-            return;
-
-        // Count Fps
-        var now = LX.getTime();
-        this._drawTime = (now - this._lastDrawTime) * 0.001;
-        this._lastDrawTime = now;
-
-        // if (this.graph) {
-        //     this.ds.computeVisibleArea(this.viewport);
-        // }
-
-        const forceDraw = this.drawAllFrames || (this._backDirty || this._frontDirty);
-
-        if ( forceDraw )
+        // Generate pattern
         {
-            if( this._backDirty ) 
-                this._drawBack();
-            if ( this._frontDirty )
-                this._drawFront();
+            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%";
 
-        this.fps = this._drawTime ? (1.0 / this._drawTime) : 0;
-        this.frames += 1;
-    }
-
-    _drawBack() {
-
-        console.log( "_drawBack" );
+        svg.appendChild( pattern );
 
-        var ctx = this.dom.getContext("2d");
+        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)' );
 
-        if ( !GraphCanvas.BACK_IMAGE_SRC )
-            return;
+        svg.appendChild( rect );
 
-        ctx.imageSmoothingEnabled = false;
+        this._background = svg;
 
-        if ( !this._backImage ) {
-            this._backImage = new Image();
-            this._backImage.src = GraphCanvas.BACK_IMAGE_SRC;
-            this._backImage.onload = this._forceDraw.bind(this);
-        }
+        this.root.appendChild( this._background );
+    }
 
-        if ( !this._pattern && this._backImage.width > 0) {
-            this._pattern = ctx.createPattern(this._backImage, "repeat");
-        }
+    _updatePattern() {
 
-        // Draw background
+        if( !this._background )
+            return;
 
-        if (this._pattern) {
-            ctx.fillStyle = this._pattern;
-            ctx.fillRect(0, 0, this.dom.width, this.dom.height);
-            ctx.fillStyle = "transparent";
-        }
+        const patternSize = this._patternSize.mul( this._scale );
+        const circlePatternSize = this._circlePatternSize * this._scale;
+        const patternPosition = this._patternPosition.mul( this._scale );
         
-        ctx.globalAlpha = 1.0;
-        ctx.imageSmoothingEnabled = true;
-
-        // Draw node connections
-
-        this._drawConnections();
-
-        this._backDirty = false;
-    }
+        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 );
 
-    _drawFront() {
+        var circle = this._background.querySelector( 'circle' );
+        circle.setAttribute( 'cx', circlePatternSize );
+        circle.setAttribute( 'cy', circlePatternSize );
+        circle.setAttribute( 'r', circlePatternSize );
 
-        console.log( "_drawFront" );
+        // Nodes
 
-        let nodes = this._getVisibleNodes();
+        const w = this._domNodes.offsetWidth * 0.5;
+        const h = this._domNodes.offsetHeight * 0.5;
 
-        for( let node of nodes )
-        {
-            this._drawNode( node );
-        }
+        const dw = w - w * this._scale;
+        const dh = h - h * this._scale;
 
-        this._frontDirty = false;
+        this._domNodes.style.transform = `
+            translate(` + ( patternPosition.x - dw ) + `px, ` + ( patternPosition.y - dh ) + `px) 
+            scale(` + this._scale + `)
+        `;
     }
 
-    _resetCanvasShadows( ctx ) {
+    _getPatternPosition( renderPosition ) {
 
-        ctx.shadowOffsetX = 0;
-        ctx.shadowOffsetY = 0;
-        ctx.shadowBlur = 0;
-        ctx.shadowColor = "rgba(0,0,0,0)";
+        return renderPosition.div( this._scale ).sub( this._patternPosition );
     }
 
     _computeNodeSize( node ) {
@@ -336,7 +538,7 @@ class GraphCanvas {
         let sX = 32 + textMetrics.width * 1.475;
 
         const rows = Math.max(1,  Math.max(node.inputs.length, node.outputs.length));
-        let sY = rows * GraphCanvas.NODE_ROW_HEIGHT + GraphCanvas.NODE_TITLE_HEIGHT;
+        let sY = rows * GraphEditor.NODE_ROW_HEIGHT + GraphEditor.NODE_TITLE_HEIGHT;
 
         return [sX, sY];
     }
@@ -345,20 +547,20 @@ class GraphCanvas {
 
         console.log( "_drawConnections" );
 
-        const ctx = this.dom.getContext("2d");
+        // const ctx = this.dom.getContext("2d");
 
-        let nodes = this._getVisibleNodes();
+        // let nodes = this._getVisibleNodes();
 
-        let start = { x: 50, y: 20 };
-        let cp1 = { x: 230, y: 30 };
-        let cp2 = { x: 150, y: 80 };
-        let end = { x: 250, y: 100 };
+        // let start = { x: 50, y: 20 };
+        // let cp1 = { x: 230, y: 30 };
+        // let cp2 = { x: 150, y: 80 };
+        // let end = { x: 250, y: 100 };
 
-        // 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();
+        // // 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();
 
         // for( let node of nodes )
         // {
@@ -374,55 +576,7 @@ class GraphCanvas {
         // }
     }
 
-    _drawNode( node ) {
-
-        console.log( node.name );
-
-        // Process some attributes
-        node.size = node.size ?? this._computeNodeSize( node );
-        node.color = node.color ?? GraphCanvas.DEFAULT_NODE_BODY_COLOR;
-        node.titleColor = node.titleColor ?? GraphCanvas.DEFAULT_NODE_TITLE_COLOR;
-
-        let [pX, pY] = node.position;
-        let [sX, sY] = node.size;
-
-        const ctx = this.dom.getContext("2d");
-        const offsetY = GraphCanvas.NODE_TITLE_HEIGHT;
-
-        // Body
-
-        ctx.shadowBlur = 8;
-        ctx.shadowColor = "#000";
-
-        ctx.beginPath();
-        ctx.fillStyle = node.color;
-        ctx.roundRect( pX, pY, sX, sY, GraphCanvas.NODE_BODY_RADIUS );
-        ctx.fill();
-
-        this._resetCanvasShadows( ctx );
-
-        // Draw border
-        ctx.beginPath();
-        ctx.strokeStyle = "#555";
-        ctx.roundRect( pX, pY, sX, sY, GraphCanvas.NODE_BODY_RADIUS );
-        ctx.stroke();
-
-        // Title
-
-        ctx.beginPath();
-        var titleGrd = ctx.createLinearGradient(pX, pY, pX + sX, pY + offsetY);
-        titleGrd.addColorStop(0, node.color);
-        titleGrd.addColorStop(1, node.titleColor);
-
-        ctx.fillStyle = titleGrd;
-        ctx.roundRect( pX + 1, pY, sX - 2, offsetY, GraphCanvas.NODE_TITLE_RADIUS );
-        ctx.fill();
-
-        ctx.font = "14px Ubuntu";
-        ctx.fillStyle = "#ddd";
-        ctx.fillText( node.name, pX + 16, pY + offsetY * 0.75);
-    }
-
+    // TODO: Return the ones in the viewport
     _getVisibleNodes() {
 
         if( !this.graph )
@@ -431,13 +585,12 @@ class GraphCanvas {
             return [];
         }
 
-        // TODO: Return the ones in the viewport
         return this.graph.nodes;
     }
 
 }
 
-LX.GraphCanvas = GraphCanvas;
+LX.GraphEditor = GraphEditor;
 
 /**
  * @class Graph
@@ -457,26 +610,60 @@ class Graph {
         this.nodes = [
             new GraphNode({
                 name: "Node 1",
-                xsize: [120, 100],
-                position: [200, 200],
+                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: "number"
+                        type: "float"
                     },
                     {
                         name: "Offset",
-                        type: "number"
+                        type: "vec2"
                     }
                 ],
                 outputs: [
                     {
                         name: "Speed",
-                        type: "number"
+                        type: "float"
                     },
                     {
                         name: "Offset",
-                        type: "number"
+                        type: "vec3"
                     },
                     {
                         name: "Loop",
@@ -485,11 +672,21 @@ class Graph {
                 ]
             }),
             new GraphNode({
-                name: "Node 2",
-                size: [120, 100],
-                position: [500, 350],
-                inputs: [],
-                outputs: []
+                name: "Add",
+                position: new LX.vec2( 300, 300 ),
+                inputs: [
+                    {
+                        type: "float"
+                    },
+                    {
+                        type: "float"
+                    }
+                ],
+                outputs: [
+                    {
+                        type: "float"
+                    }
+                ]
             })
         ];
     }
@@ -512,7 +709,8 @@ class GraphNode {
 
         this.name = options.name ?? "Unnamed";
         this.size = options.size;
-        this.position = options.position ?? [0, 0];
+        this.position = options.position ?? new LX.vec2( 0, 0 );
+        this.color = options.color;
         
         this.inputs = options.inputs ?? [];
         this.outputs = options.outputs ?? [];
@@ -523,7 +721,7 @@ class GraphNode {
         let sX = 16 + this.name.length * 10;
 
         const rows = Math.max(1, Math.max(this.inputs.length, this.outputs.length));
-        let sY = rows * GraphCanvas.NODE_ROW_HEIGHT + GraphCanvas.NODE_TITLE_HEIGHT;
+        let sY = rows * GraphEditor.NODE_ROW_HEIGHT + GraphEditor.NODE_TITLE_HEIGHT;
 
         return [sX, sY];
     }
@@ -531,4 +729,4 @@ class GraphNode {
 
 LX.GraphNode = GraphNode;
 
-export { GraphCanvas, Graph, GraphNode };
+export { GraphEditor, Graph, GraphNode };