lexgui 0.1.30 → 0.1.32

package/build/components/nodegraph.js

@@ -352,6 +352,11 @@ class GraphEditor {
         node.position = new LX.vec2( 0, 0 );
         node.color = null;
 
+        if( baseClass.name == 'NodeFunction' )
+        {
+            node.gid = baseClass.gid;
+        }
+
         // Extra options
         if ( options ) {
             for (var i in options) {
@@ -450,7 +455,17 @@ class GraphEditor {
         let graph = new Graph();
         graph.editor = this;
 
-        if( o ) graph.configure( o );
+        if( o )
+        {
+            // Load functions first if any..
+
+            for( let fn of o.functions ?? [] )
+            {
+                this.addGraphFunction( fn );
+            }
+
+            graph.configure( o );
+        }
 
         this.setGraph( graph );
 
@@ -471,7 +486,17 @@ class GraphEditor {
         let func = new GraphFunction();
         func.editor = this;
 
-        if( o ) func.configure( o );
+        if( o )
+        {
+            // Load other inner functions first if any..
+
+            for( let fn of o.functions ?? [] )
+            {
+                this.addGraphFunction( fn );
+            }
+
+            func.configure( o );
+        }
 
         this.setGraph( func );
 
@@ -492,6 +517,7 @@ class GraphEditor {
         }
 
         NodeFunction.func = func;
+        NodeFunction.gid = func.id;
         GraphEditor.registerCustomNode( "function/" + func.name, NodeFunction );
 
         this._sidebar.add( func.name, { icon: "fa fa-florin-sign", className: func.id, callback: (e) => { this.setGraph( func ) } } );
@@ -642,13 +668,16 @@ class GraphEditor {
             LX.addContextMenu(null, e, m => {
 
                 m.add( "Copy", () => {
-                    this._clipboardData = node.id;
+                    this._clipboardData = {
+                        id: node.id,
+                        gid: this.currentGraph.id
+                    };
                 } );
 
-                m.add( "Paste", () => {
-                    // TODO
-                    // ...
-                } );
+                // TODO
+                // m.add( "Paste", () => {
+
+                // } );
 
                 m.add( "" );
 
@@ -1315,6 +1344,28 @@ class GraphEditor {
         this.currentGraph.groups.splice( idx, 1 );
     }
 
+    _cloneNode( nodeId, graphId, position ) {
+
+        const graph = this.graphs[ graphId ?? this.currentGraph.id ];
+
+        const nodeData = graph.getNodeById( nodeId );
+
+        if( !nodeData )
+            return;
+
+        const el = this._getNodeDOMElement( nodeId );
+        const newNode = GraphEditor.addNode( nodeData.type );
+        newNode.properties = LX.deepCopy( nodeData.properties );
+
+        const newDom = this._createNodeDOM( newNode );
+
+        this._translateNode( newDom, position ?? this._getNodePosition( el ) );
+
+        this._selectNode( newDom, true );
+
+        this.currentGraph.nodes.push( newNode );
+    }
+
     _cloneNodes() {
 
         // Clone all selected nodes
@@ -1324,20 +1375,7 @@ class GraphEditor {
 
         for( let nodeId of selectedIds )
         {
-            const nodeInfo = this.nodes[ nodeId ];
-            if( !nodeInfo )
-                return;
-
-            const el = this._getNodeDOMElement( nodeId );
-            const data = nodeInfo.data;
-            const newNode = GraphEditor.addNode( data.type );
-            const newDom = this._createNodeDOM( newNode );
-
-            this._translateNode( newDom, this._getNodePosition( el ) );
-
-            this._selectNode( newDom, true );
-
-            this.currentGraph.nodes.push( newNode );
+            this._cloneNode( nodeId );
         }
     }
 
@@ -1706,80 +1744,86 @@ class GraphEditor {
 
     _processContextMenu( e, autoConnect ) {
         
-        if( this._clipboardData )
-        {
-            LX.addContextMenu(null, e, m => {
-                m.add( "Paste", () => {
-                    // TODO: paste node data
-                    // ...
-                } );
-            });
-        }
-        else
-        {
-            LX.addContextMenu( "ADD NODE", e, m => {
-
-                for( let type in GraphEditor.NODE_TYPES )
-                {
-                    const baseClass = GraphEditor.NODE_TYPES[ type ];
+        LX.addContextMenu( null, e, m => {
 
-                    if( baseClass.blockAdd )
-                        continue;
+            var eventPosition = null;
 
-                    m.add( type, () => {
+            if( e )
+            {
+                const rect = this.root.getBoundingClientRect();
 
-                        const newNode = GraphEditor.addNode( type );
+                const localPosition = new LX.vec2( e.clientX - rect.x, e.clientY - rect.y );
 
-                        const dom = this._createNodeDOM( newNode );
+                eventPosition = this._getPatternPosition( localPosition );
+            }
 
-                        if( this._snapToGrid )
-                        {
-                            dom.mustSnap = true;
-                        }
+            if( this._clipboardData )
+            {
+                m.add( "Paste", () => {
 
-                        if( e )
-                        {
-                            const rect = this.root.getBoundingClientRect();
+                    const nodeId = this._clipboardData.id;
+                    const graphId = this._clipboardData.gid;
 
-                            let position = new LX.vec2( e.clientX - rect.x, e.clientY - rect.y );
+                    this._cloneNode( nodeId, graphId, eventPosition );
 
-                            position = this._getPatternPosition( position );
+                } );
+                m.add( "" );
+            }
 
-                            this._translateNode( dom, position );
-                        }
+            for( let type in GraphEditor.NODE_TYPES )
+            {
+                const baseClass = GraphEditor.NODE_TYPES[ type ];
 
-                        this.currentGraph.nodes.push( newNode );
+                if( baseClass.blockAdd )
+                    continue;
 
-                        if( autoConnect && newNode.inputs.length )
-                        {
-                            const srcId = autoConnect.domEl.dataset[ 'id' ];
-                            const srcType = autoConnect.io.childNodes[ autoConnect.index ].dataset[ 'type' ];
-                            const srcIsInput = autoConnect.ioType == GraphEditor.NODE_IO_INPUT;
+                m.add( type, () => {
 
-                            const newLink = {
-                                inputNode: srcIsInput ? srcId : newNode.id,
-                                inputIdx: srcIsInput ? autoConnect.index : 0,
-                                inputType: srcIsInput ? srcType : newNode.inputs[ 0 ].type,
-                                outputNode: srcIsInput ? newNode.id : srcId,
-                                outputIdx: srcIsInput ? 0 : autoConnect.index,
-                                outputType: srcIsInput ? newNode.inputs[ 0 ].type : srcType,
-                            }
+                    const newNode = GraphEditor.addNode( type );
 
-                            // Store link
+                    const dom = this._createNodeDOM( newNode );
 
-                            const pathId = newLink.outputNode + '@' + newLink.inputNode;
+                    if( this._snapToGrid )
+                    {
+                        dom.mustSnap = true;
+                    }
 
-                            if( !this.currentGraph.links[ pathId ] ) this.currentGraph.links[ pathId ] = [];
+                    if( eventPosition )
+                    {
+                        this._translateNode( dom, eventPosition );
+                    }
 
-                            this.currentGraph.links[ pathId ].push( newLink );
+                    this.currentGraph.nodes.push( newNode );
 
-                            this._createLink( newLink );
+                    if( autoConnect && newNode.inputs.length )
+                    {
+                        const srcId = autoConnect.domEl.dataset[ 'id' ];
+                        const srcType = autoConnect.io.childNodes[ autoConnect.index ].dataset[ 'type' ];
+                        const srcIsInput = autoConnect.ioType == GraphEditor.NODE_IO_INPUT;
+
+                        const newLink = {
+                            inputNode: srcIsInput ? srcId : newNode.id,
+                            inputIdx: srcIsInput ? autoConnect.index : 0,
+                            inputType: srcIsInput ? srcType : newNode.inputs[ 0 ].type,
+                            outputNode: srcIsInput ? newNode.id : srcId,
+                            outputIdx: srcIsInput ? 0 : autoConnect.index,
+                            outputType: srcIsInput ? newNode.inputs[ 0 ].type : srcType,
                         }
 
-                    } );
-                }
-            });
-        }
+                        // Store link
+
+                        const pathId = newLink.outputNode + '@' + newLink.inputNode;
+
+                        if( !this.currentGraph.links[ pathId ] ) this.currentGraph.links[ pathId ] = [];
+
+                        this.currentGraph.links[ pathId ].push( newLink );
+
+                        this._createLink( newLink );
+                    }
+
+                } );
+            }
+        });
     }
 
     /**
@@ -2683,21 +2727,47 @@ class GraphEditor {
 
     _showRenameGraphDialog() {
 
-        new LX.Dialog( this.currentGraph.constructor.name, p => {
-            p.addText( "Name", this.currentGraph.name, v => this._updateGraphName(v) );
+        const dialog = new LX.Dialog( this.currentGraph.constructor.name, p => {
+            p.addText( "Name", this.currentGraph.name, v => {
+                this._updateGraphName( v );
+                dialog.close();
+            } );
         }, { modal: true, size: [ "350px", null ] } );
     }
 
     _updateGraphName( name ) {
 
-        this.currentGraph.name = name;
+        const newNameKey = name.replace( /\s/g, '' ).replaceAll( '.', '' );
 
+        // Change graph name button
         const nameDom = LX.root.querySelector( '.graph-title button' );
         console.assert( nameDom );
         nameDom.innerText = name;
 
-        // TODO:
-        // Update name in sidebar and all references in current nodes..
+        // Change name in sidebar
+        const graphNameKey = this.currentGraph.name.replace( /\s/g, '' ).replaceAll( '.', '' );
+        const sidebarItem = this._sidebar.items.find( v => v.name === graphNameKey );
+        if( sidebarItem )
+        {
+            sidebarItem.name = newNameKey;
+            sidebarItem.domEl.id = newNameKey;
+            sidebarItem.domEl.querySelector(".lexsidebarentrydesc").innerText = name;
+        }
+
+        // Change registered nodes function
+        const oldType = 'function/' + this.currentGraph.name;
+        const nodeClass = GraphEditor.NODE_TYPES[ oldType ];
+
+        if( nodeClass )
+        {
+            delete GraphEditor.NODE_TYPES[ oldType ];
+
+            nodeClass.title = name;
+
+            GraphEditor.registerCustomNode( "function/" + name, nodeClass );
+        }
+
+        this.currentGraph.name = name;
     }
 
     _addGlobalActions() {
@@ -2762,6 +2832,18 @@ class Graph {
         // zoom/translation ??
     }
 
+    /**
+     * @method getNodeById
+     */
+
+    getNodeById( id ) {
+
+        for( let node of this.nodes )
+        {
+            if( node.id == id ) return node;
+        }
+    }
+
     /**
      * @method _runStep
      */
@@ -2828,12 +2910,12 @@ class Graph {
     }
 
     /**
-     * @method export
+     * @method serialize
      * @param {Boolean} prettify
      * @returns JSON data from the serialized graph
      */
 
-    export( prettify = true ) {
+    serialize( prettify = true ) {
         
         var o = { };
 
@@ -2841,13 +2923,21 @@ class Graph {
         o.name = this.name;
         o.type = this.type;
 
-        o.nodes = [ ];
-        o.groups = [ ];
-        o.links = { };
+        o.nodes     = [ ];
+        o.groups    = [ ];
+        o.functions = [ ];
+        o.links     = { };
 
         for( let node of this.nodes )
         {
             o.nodes.push( node.serialize() );
+
+            const fnOrigin = this.editor.graphs[ node.gid ];
+
+            if( fnOrigin )
+            {
+                o.functions.push( JSON.parse( fnOrigin.serialize() ) );
+            }
         }
 
         for( let linkId in this.links )
@@ -2880,10 +2970,19 @@ class Graph {
             console.error( `Can't export GraphNode [${ this.title }] of type [${ this.type }].` );
         }
 
-        LX.downloadFile( this.name + ".json", o );
-
         return o;
     }
+
+    /**
+     * @method export
+     */
+
+    export() {
+
+        const o = this.serialize();
+
+        LX.downloadFile( this.name + ".json", o );
+    }
 }
 
 LX.Graph = Graph;