lexgui 0.1.0 → 0.1.2

package/build/components/nodegraph.js

@@ -1,534 +1,534 @@
-(function(global){
+import { LX } from 'lexgui';
 
-    if(!global.LX) {
-        throw("lexgui.js missing!");
-    }
+if(!LX) {
+    throw("lexgui.js missing!");
+}
 
-    LX.components.push( 'Graph' );
+LX.components.push( 'Graph' );
 
-    function flushCss(element) {
-        // By reading the offsetHeight property, we are forcing
-        // the browser to flush the pending CSS changes (which it
-        // does to ensure the value obtained is accurate).
-        element.offsetHeight;
-    }
+function flushCss(element) {
+    // By reading the offsetHeight property, we are forcing
+    // the browser to flush the pending CSS changes (which it
+    // does to ensure the value obtained is accurate).
+    element.offsetHeight;
+}
 
-    function swapElements (obj, a, b) {
-        [obj[a], obj[b]] = [obj[b], obj[a]];
-    }
+function swapElements (obj, a, b) {
+    [obj[a], obj[b]] = [obj[b], obj[a]];
+}
 
-    function swapArrayElements (array, id0, id1) {
-        [array[id0], array[id1]] = [array[id1], array[id0]];
-    };
+function swapArrayElements (array, id0, id1) {
+    [array[id0], array[id1]] = [array[id1], array[id0]];
+};
 
-    function sliceChar(str, idx) {
-        return str.substr(0, idx) + str.substr(idx + 1);
-    }
+function sliceChar(str, idx) {
+    return str.substr(0, idx) + str.substr(idx + 1);
+}
 
-    function firstNonspaceIndex(str) {
-        return str.search(/\S|$/);
-    }
-
-    let ASYNC_ENABLED = true;
+function firstNonspaceIndex(str) {
+    return str.search(/\S|$/);
+}
 
-    function doAsync( fn, ms ) {
-        if( ASYNC_ENABLED )
-            setTimeout( fn, ms ?? 0 );
-        else
-            fn();
-    }
+let ASYNC_ENABLED = true;
 
-    /**
-     * @class GraphCanvas
-     */
+function doAsync( fn, ms ) {
+    if( ASYNC_ENABLED )
+        setTimeout( fn, ms ?? 0 );
+    else
+        fn();
+}
 
-    class GraphCanvas {
+/**
+ * @class GraphCanvas
+ */
 
-        static __instances  = [];
+class GraphCanvas {
 
-        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";
+    static __instances  = [];
 
-        // Node Drawing
-        static NODE_TITLE_HEIGHT    = 24;
-        static NODE_ROW_HEIGHT      = 16;
+    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";
 
-        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];
+    // Node Drawing
+    static NODE_TITLE_HEIGHT    = 24;
+    static NODE_ROW_HEIGHT      = 16;
 
-        static DEFAULT_NODE_TITLE_COLOR     = "#4a59b0";
-        static DEFAULT_NODE_BODY_COLOR      = "#111";
+    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];
 
-        /**
-         * @param {*} options
-         * 
-         */
+    static DEFAULT_NODE_TITLE_COLOR     = "#4a59b0";
+    static DEFAULT_NODE_BODY_COLOR      = "#111";
 
-        constructor( area, options = {} ) {
+    /**
+     * @param {*} options
+     * 
+     */
 
-            GraphCanvas.__instances.push( this );
+    constructor( area, options = {} ) {
 
-            this.base_area = area;
-            this.area = new LX.Area( { className: "lexGraph" } );
+        GraphCanvas.__instances.push( this );
 
-            area.root.classList.add('grapharea');
+        this.base_area = area;
+        this.area = new LX.Area( { className: "lexGraph" } );
 
-            this.root = this.area.root;
-            area.attach( this.root );
+        area.root.classList.add('grapharea');
 
-            // Bind resize
-            area.onresize = ( bb ) => {
-                this.dom.width = bb.width;
-                this.dom.height = bb.height;
-                this._backDirty = true;
-                this._frontDirty = true;
-            };
+        this.root = this.area.root;
+        area.attach( this.root );
 
-            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) );
+        // 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);
+            },
+        );
+    }
 
-            // State
+    static getInstances()
+    {
+        return GraphCanvas.__instances;
+    }
 
-            this.drawAllFrames      = false;
-            this.isFocused          = false;
-            this._backDirty         = true;
-            this._frontDirty        = true;
+    _processFocus( active ) {
 
-            // Canvas
+        this.isFocused = active;
+    }
 
-            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 );
+    _processKey(e) {
 
-            this.frames         = 0;
-            this.fps            = 0;
-            this._lastDrawTime  = 0;
-            this._drawTime      = 0;
+        var key = e.key ?? e.detail.key;
+        console.log( key );
+    }
 
-            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);
-                },
-            );
-        }
+    _processMouse(e) {
 
-        static getInstances()
+        if( e.type == 'mousedown' )
         {
-            return GraphCanvas.__instances;
-        }
-
-        _processFocus( active ) {
-
-            this.isFocused = active;
+            this.lastMouseDown = LX.getTime();
         }
-
-        _processKey(e) {
-
-            var key = e.key ?? e.detail.key;
-            console.log( key );
+        
+        else if( e.type == 'mouseup' )
+        {
+            if( (LX.getTime() - this.lastMouseDown) < 300 ) {
+                this._processClick(e);
+            }
         }
 
-        _processMouse(e) {
-
-            if( e.type == 'mousedown' )
-            {
-                this.lastMouseDown = LX.getTime();
-            }
+        else if( e.type == 'mousemove' )
+        {
             
-            else if( e.type == 'mouseup' )
-            {
-                if( (LX.getTime() - this.lastMouseDown) < 300 ) {
-                    this._processClick(e);
-                }
-            }
-
-            else if( e.type == 'mousemove' )
-            {
-                
-            }
+        }
 
-            else if ( e.type == 'click' ) // trip
+        else if ( e.type == 'click' ) // trip
+        {
+            switch( e.detail )
             {
-                switch( e.detail )
-                {
-                    case LX.MOUSE_DOUBLE_CLICK:
-                        break;
-                    case LX.MOUSE_TRIPLE_CLICK:
-                        break;
-                }
-            }
-
-            else if ( e.type == 'contextmenu' ) {
-                e.preventDefault()
-                this._processContextMenu( e );
+                case LX.MOUSE_DOUBLE_CLICK:
+                    break;
+                case LX.MOUSE_TRIPLE_CLICK:
+                    break;
             }
         }
 
-        _processClick( e ) {
-
-            
+        else if ( e.type == 'contextmenu' ) {
+            e.preventDefault()
+            this._processContextMenu( e );
         }
+    }
 
-        _processContextMenu( e ) {
-            
-            LX.addContextMenu( "Test", e, m => {
-                m.add( "option 1", () => { } );
-                m.add( "option 2", () => { } );
-            });
-        }
+    _processClick( e ) {
 
-        _forceDraw() {
+        
+    }
 
-            this._backDirty = true;
-            this._frontDirty = true;
-        }
+    _processContextMenu( e ) {
+        
+        LX.addContextMenu( "Test", e, m => {
+            m.add( "option 1", () => { } );
+            m.add( "option 2", () => { } );
+        });
+    }
 
-        /**
-         * @method setGraph
-         * @param {Graph} graph:
-         */
+    _forceDraw() {
 
-        setGraph( graph ) {
+        this._backDirty = true;
+        this._frontDirty = true;
+    }
 
-            this.graph = graph;
-        }
+    /**
+     * @method setGraph
+     * @param {Graph} graph:
+     */
 
-        /**
-         * @method clear
-         */
+    setGraph( graph ) {
 
-        clear(  ) {
+        this.graph = graph;
+    }
 
-        }
+    /**
+     * @method clear
+     */
 
-        /**
-         * @method frame
-         */
+    clear(  ) {
 
-        frame() {
+    }
 
-            // this.update();
-            this.draw();
+    /**
+     * @method frame
+     */
 
-            requestAnimationFrame( this.frame.bind(this) );
-        }
+    frame() {
 
-        /**
-         * @method update
-         */
+        // this.update();
+        this.draw();
 
-        update() {
-            
-            console.log("Update");
-        }
+        requestAnimationFrame( this.frame.bind(this) );
+    }
 
-        /**
-         * @method draw
-         */
+    /**
+     * @method update
+     */
 
-        draw() {
+    update() {
+        
+        console.log("Update");
+    }
 
-            if (!this.dom || !this.dom.width || !this.dom.height)
-                return;
+    /**
+     * @method draw
+     */
 
-            // Count Fps
-            var now = LX.getTime();
-            this._drawTime = (now - this._lastDrawTime) * 0.001;
-            this._lastDrawTime = now;
+    draw() {
 
-            // if (this.graph) {
-            //     this.ds.computeVisibleArea(this.viewport);
-            // }
+        if (!this.dom || !this.dom.width || !this.dom.height)
+            return;
 
-            const forceDraw = this.drawAllFrames || (this._backDirty || this._frontDirty);
+        // Count Fps
+        var now = LX.getTime();
+        this._drawTime = (now - this._lastDrawTime) * 0.001;
+        this._lastDrawTime = now;
 
-            if ( forceDraw )
-            {
-                if( this._backDirty ) 
-                    this._drawBack();
-                if ( this._frontDirty )
-                    this._drawFront();
-            }
+        // if (this.graph) {
+        //     this.ds.computeVisibleArea(this.viewport);
+        // }
+
+        const forceDraw = this.drawAllFrames || (this._backDirty || this._frontDirty);
 
-            this.fps = this._drawTime ? (1.0 / this._drawTime) : 0;
-            this.frames += 1;
+        if ( forceDraw )
+        {
+            if( this._backDirty ) 
+                this._drawBack();
+            if ( this._frontDirty )
+                this._drawFront();
         }
 
-        _drawBack() {
+        this.fps = this._drawTime ? (1.0 / this._drawTime) : 0;
+        this.frames += 1;
+    }
 
-            console.log( "_drawBack" );
+    _drawBack() {
 
-            var ctx = this.dom.getContext("2d");
+        console.log( "_drawBack" );
 
-            if ( !GraphCanvas.BACK_IMAGE_SRC )
-                return;
+        var ctx = this.dom.getContext("2d");
 
-            ctx.imageSmoothingEnabled = false;
+        if ( !GraphCanvas.BACK_IMAGE_SRC )
+            return;
 
-            if ( !this._backImage ) {
-                this._backImage = new Image();
-                this._backImage.src = GraphCanvas.BACK_IMAGE_SRC;
-                this._backImage.onload = this._forceDraw.bind(this);
-            }
+        ctx.imageSmoothingEnabled = false;
 
-            if ( !this._pattern && this._backImage.width > 0) {
-                this._pattern = ctx.createPattern(this._backImage, "repeat");
-            }
+        if ( !this._backImage ) {
+            this._backImage = new Image();
+            this._backImage.src = GraphCanvas.BACK_IMAGE_SRC;
+            this._backImage.onload = this._forceDraw.bind(this);
+        }
 
-            // Draw background
+        if ( !this._pattern && this._backImage.width > 0) {
+            this._pattern = ctx.createPattern(this._backImage, "repeat");
+        }
 
-            if (this._pattern) {
-                ctx.fillStyle = this._pattern;
-                ctx.fillRect(0, 0, this.dom.width, this.dom.height);
-                ctx.fillStyle = "transparent";
-            }
-            
-            ctx.globalAlpha = 1.0;
-            ctx.imageSmoothingEnabled = true;
+        // Draw background
 
-            // Draw node connections
+        if (this._pattern) {
+            ctx.fillStyle = this._pattern;
+            ctx.fillRect(0, 0, this.dom.width, this.dom.height);
+            ctx.fillStyle = "transparent";
+        }
+        
+        ctx.globalAlpha = 1.0;
+        ctx.imageSmoothingEnabled = true;
 
-            this._drawConnections();
+        // Draw node connections
 
-            this._backDirty = false;
-        }
+        this._drawConnections();
 
-        _drawFront() {
+        this._backDirty = false;
+    }
 
-            console.log( "_drawFront" );
+    _drawFront() {
 
-            let nodes = this._getVisibleNodes();
+        console.log( "_drawFront" );
 
-            for( let node of nodes )
-            {
-                this._drawNode( node );
-            }
+        let nodes = this._getVisibleNodes();
 
-            this._frontDirty = false;
+        for( let node of nodes )
+        {
+            this._drawNode( node );
         }
 
-        _resetCanvasShadows( ctx ) {
+        this._frontDirty = false;
+    }
 
-            ctx.shadowOffsetX = 0;
-            ctx.shadowOffsetY = 0;
-            ctx.shadowBlur = 0;
-            ctx.shadowColor = "rgba(0,0,0,0)";
-        }
+    _resetCanvasShadows( ctx ) {
 
-        _computeNodeSize( node ) {
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.shadowBlur = 0;
+        ctx.shadowColor = "rgba(0,0,0,0)";
+    }
 
-            const ctx = this.dom.getContext("2d");
-            var textMetrics = ctx.measureText( node.name );
+    _computeNodeSize( node ) {
 
-            let sX = 32 + textMetrics.width * 1.475;
+        const ctx = this.dom.getContext("2d");
+        var textMetrics = ctx.measureText( node.name );
 
-            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 sX = 32 + textMetrics.width * 1.475;
 
-            return [sX, sY];
-        }
+        const rows = Math.max(1,  Math.max(node.inputs.length, node.outputs.length));
+        let sY = rows * GraphCanvas.NODE_ROW_HEIGHT + GraphCanvas.NODE_TITLE_HEIGHT;
 
-        _drawConnections() {
+        return [sX, sY];
+    }
 
-            console.log( "_drawConnections" );
+    _drawConnections() {
 
-            const ctx = this.dom.getContext("2d");
+        console.log( "_drawConnections" );
 
-            let nodes = this._getVisibleNodes();
+        const ctx = this.dom.getContext("2d");
 
-            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 nodes = this._getVisibleNodes();
 
-            // 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();
+        let start = { x: 50, y: 20 };
+        let cp1 = { x: 230, y: 30 };
+        let cp2 = { x: 150, y: 80 };
+        let end = { x: 250, y: 100 };
 
-            // for( let node of nodes )
-            // {
-            //     // Discard nodes without inputs...
-            //     if (!node.inputs || !node.inputs.length) {
-            //         continue;
-            //     }
+        // 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 input of node.inputs) {
+        // for( let node of nodes )
+        // {
+        //     // Discard nodes without inputs...
+        //     if (!node.inputs || !node.inputs.length) {
+        //         continue;
+        //     }
 
+        //     for (let input of node.inputs) {
 
-            //     }
-            // }
-        }
 
-        _drawNode( node ) {
+        //     }
+        // }
+    }
 
-            console.log( node.name );
+    _drawNode( node ) {
 
-            // 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;
+        console.log( node.name );
 
-            let [pX, pY] = node.position;
-            let [sX, sY] = node.size;
+        // 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;
 
-            const ctx = this.dom.getContext("2d");
-            const offsetY = GraphCanvas.NODE_TITLE_HEIGHT;
+        let [pX, pY] = node.position;
+        let [sX, sY] = node.size;
 
-            // Body
+        const ctx = this.dom.getContext("2d");
+        const offsetY = GraphCanvas.NODE_TITLE_HEIGHT;
 
-            ctx.shadowBlur = 8;
-            ctx.shadowColor = "#000";
+        // Body
 
-            ctx.beginPath();
-            ctx.fillStyle = node.color;
-            ctx.roundRect( pX, pY, sX, sY, GraphCanvas.NODE_BODY_RADIUS );
-            ctx.fill();
+        ctx.shadowBlur = 8;
+        ctx.shadowColor = "#000";
 
-            this._resetCanvasShadows( ctx );
+        ctx.beginPath();
+        ctx.fillStyle = node.color;
+        ctx.roundRect( pX, pY, sX, sY, GraphCanvas.NODE_BODY_RADIUS );
+        ctx.fill();
 
-            // Draw border
-            ctx.beginPath();
-            ctx.strokeStyle = "#555";
-            ctx.roundRect( pX, pY, sX, sY, GraphCanvas.NODE_BODY_RADIUS );
-            ctx.stroke();
+        this._resetCanvasShadows( ctx );
 
-            // Title
+        // Draw border
+        ctx.beginPath();
+        ctx.strokeStyle = "#555";
+        ctx.roundRect( pX, pY, sX, sY, GraphCanvas.NODE_BODY_RADIUS );
+        ctx.stroke();
 
-            ctx.beginPath();
-            var titleGrd = ctx.createLinearGradient(pX, pY, pX + sX, pY + offsetY);
-            titleGrd.addColorStop(0, node.color);
-            titleGrd.addColorStop(1, node.titleColor);
+        // Title
 
-            ctx.fillStyle = titleGrd;
-            ctx.roundRect( pX + 1, pY, sX - 2, offsetY, GraphCanvas.NODE_TITLE_RADIUS );
-            ctx.fill();
+        ctx.beginPath();
+        var titleGrd = ctx.createLinearGradient(pX, pY, pX + sX, pY + offsetY);
+        titleGrd.addColorStop(0, node.color);
+        titleGrd.addColorStop(1, node.titleColor);
 
-            ctx.font = "14px Ubuntu";
-            ctx.fillStyle = "#ddd";
-            ctx.fillText( node.name, pX + 16, pY + offsetY * 0.75);
-        }
+        ctx.fillStyle = titleGrd;
+        ctx.roundRect( pX + 1, pY, sX - 2, offsetY, GraphCanvas.NODE_TITLE_RADIUS );
+        ctx.fill();
 
-        _getVisibleNodes() {
+        ctx.font = "14px Ubuntu";
+        ctx.fillStyle = "#ddd";
+        ctx.fillText( node.name, pX + 16, pY + offsetY * 0.75);
+    }
 
-            if( !this.graph )
-            {
-                console.warn( "No graph set" );
-                return [];
-            }
+    _getVisibleNodes() {
 
-            // TODO: Return the ones in the viewport
-            return this.graph.nodes;
+        if( !this.graph )
+        {
+            console.warn( "No graph set" );
+            return [];
         }
 
+        // TODO: Return the ones in the viewport
+        return this.graph.nodes;
     }
 
-    LX.GraphCanvas = GraphCanvas;
+}
+
+LX.GraphCanvas = GraphCanvas;
+
+/**
+ * @class Graph
+ */
+
+class Graph {
 
     /**
-     * @class Graph
+     * @param {*} options
+     * 
      */
 
-    class Graph {
-
-        /**
-         * @param {*} options
-         * 
-         */
-
-        constructor( options = {} ) {
-
-            // Nodes
-
-            this.nodes = [
-                new GraphNode({
-                    name: "Node 1",
-                    xsize: [120, 100],
-                    position: [200, 200],
-                    inputs: [
-                        {
-                            name: "Speed",
-                            type: "number"
-                        },
-                        {
-                            name: "Offset",
-                            type: "number"
-                        }
-                    ],
-                    outputs: [
-                        {
-                            name: "Speed",
-                            type: "number"
-                        },
-                        {
-                            name: "Offset",
-                            type: "number"
-                        },
-                        {
-                            name: "Loop",
-                            type: "bool"
-                        }
-                    ]
-                }),
-                new GraphNode({
-                    name: "Node 2",
-                    size: [120, 100],
-                    position: [500, 350],
-                    inputs: [],
-                    outputs: []
-                })
-            ];
-        }
+    constructor( options = {} ) {
+
+        // Nodes
+
+        this.nodes = [
+            new GraphNode({
+                name: "Node 1",
+                xsize: [120, 100],
+                position: [200, 200],
+                inputs: [
+                    {
+                        name: "Speed",
+                        type: "number"
+                    },
+                    {
+                        name: "Offset",
+                        type: "number"
+                    }
+                ],
+                outputs: [
+                    {
+                        name: "Speed",
+                        type: "number"
+                    },
+                    {
+                        name: "Offset",
+                        type: "number"
+                    },
+                    {
+                        name: "Loop",
+                        type: "bool"
+                    }
+                ]
+            }),
+            new GraphNode({
+                name: "Node 2",
+                size: [120, 100],
+                position: [500, 350],
+                inputs: [],
+                outputs: []
+            })
+        ];
     }
+}
 
-    LX.Graph = Graph;
+LX.Graph = Graph;
 
-    /**
-     * @class GraphNode
-     */
+/**
+ * @class GraphNode
+ */
 
-    class GraphNode {
+class GraphNode {
 
-        /**
-         * @param {*} options
-         * 
-         */
+    /**
+     * @param {*} options
+     * 
+     */
 
-        constructor( options = {} ) {
+    constructor( options = {} ) {
 
-            this.name = options.name ?? "Unnamed";
-            this.size = options.size;
-            this.position = options.position ?? [0, 0];
-            
-            this.inputs = options.inputs ?? [];
-            this.outputs = options.outputs ?? [];
-        }
+        this.name = options.name ?? "Unnamed";
+        this.size = options.size;
+        this.position = options.position ?? [0, 0];
+        
+        this.inputs = options.inputs ?? [];
+        this.outputs = options.outputs ?? [];
+    }
 
-        computeSize() {
+    computeSize() {
 
-            let sX = 16 + this.name.length * 10;
+        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;
+        const rows = Math.max(1, Math.max(this.inputs.length, this.outputs.length));
+        let sY = rows * GraphCanvas.NODE_ROW_HEIGHT + GraphCanvas.NODE_TITLE_HEIGHT;
 
-            return [sX, sY];
-        }
+        return [sX, sY];
     }
+}
 
-    LX.GraphNode = GraphNode;
+LX.GraphNode = GraphNode;
 
-})( typeof(window) != "undefined" ? window : (typeof(self) != "undefined" ? self : global ) );
+export { GraphCanvas, Graph, GraphNode };