lexgui 0.1.30 → 0.1.31

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;

package/build/lexgui.css

@@ -1302,7 +1302,7 @@ input[type="range"] {
   height: 12px;
   border: 1px solid #c9c7de;
   border-radius: 6px;
-  background: var(--global-selected-dark);
+  background: var(--global-selected);
   box-shadow: 0px 0px 6px #111;
   cursor: pointer;
 }
@@ -1737,7 +1737,7 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexcontextmenu .lexcontextmenuentry:hover {
-  background-color: var(--global-selected-dark);
+  background-color: var(--global-selected);
   color: #f5f5f5;
 }
 
@@ -1909,7 +1909,7 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexcontextmenubox .lexcontextmenuentry:hover:not(.cmtitle) {
-  background-color: var(--global-selected-dark);
+  background-color: var(--global-selected);
   color: #f5f5f5;
 }
 
@@ -1953,7 +1953,7 @@ meter::-webkit-meter-even-less-good-value {
   border-radius: 6px;
   text-align: center;
   opacity: 0;
-  z-index: 1;
+  z-index: 102;
   padding: 2px 6px;
   transition: opacity ease-in 0.1s;
 }
@@ -2181,7 +2181,7 @@ meter::-webkit-meter-even-less-good-value {
 
 .lexareatabs .lexareatab.thumb {
   position: absolute;
-  background-color: var(--global-selected-dark);
+  background-color: var(--global-selected);
   z-index: 0;
 }
 
@@ -2221,8 +2221,8 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexareatabs.row .lexareatab.selected {
-  color: var(--global-text);
-  background-color: var(--global-selected-dark);
+  color: var(--global-text-primary);
+  background-color: var(--global-selected);
 }
 
 .lexareatabs.folding .lexareatab.selected {
@@ -3406,7 +3406,7 @@ pre .line-gutter {
 }
 
 .lexgraphnode.variables {
-  background: linear-gradient(15deg, #f1e643da 10%, #e78b8bda);
+  background: linear-gradient(15deg, #f14343da 10%, #e7b88bda);
   background-color: unset; background-origin: border-box;
 }
 

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.30",
+        version: "0.1.31",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -4916,6 +4916,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             vecinput.step = options.step ?? "any";
             vecinput.type = "number";
             vecinput.id = "number_"+simple_guidGenerator();
+
+            if( value.constructor == Number )
+            {
+                value = clamp(value, +vecinput.min, +vecinput.max);
+                value = options.precision ? round(value, options.precision) : value;
+            }
+
             vecinput.value = vecinput.iValue = value;
             box.appendChild(vecinput);
 
@@ -5042,6 +5049,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             let widget = this.create_widget(name, Widget.VECTOR, options);
+
             widget.onGetValue = () => {
                 let inputs = element.querySelectorAll("input");
                 let value = [];
@@ -5094,6 +5102,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 vecinput.type = "number";
                 vecinput.id = "vec"+num_components+"_"+simple_guidGenerator();
                 vecinput.idx = i;
+
+                if( value[i].constructor == Number )
+                {
+                    value[i] = clamp(value[i], +vecinput.min, +vecinput.max);
+                    value[i] = options.precision ? round(value[i], options.precision) : value[i];
+                }
+
                 vecinput.value = vecinput.iValue = value[i];
 
                 let drag_icon = document.createElement('a');
@@ -5127,13 +5142,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }, {passive:false});
 
                 vecinput.addEventListener("change", e => {
-                    if(isNaN(e.target.value))
+
+                    if( isNaN( e.target.value ) )
                         return;
-                    let val = e.target.value = clamp(e.target.value, vecinput.min, vecinput.max);
-        
+
+                    console.log(e.target.value);
+                    let val = e.target.value = clamp(e.target.value, +vecinput.min, +vecinput.max);
+                    val = options.precision ? round(val, options.precision) : val;
+                    console.log(val);
+
                     // Reset button (default value)
-                    let btn = element.querySelector(".lexwidgetname .lexicon");
-                    if(btn) btn.style.display = val != vecinput.iValue ? "block": "none";
+                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
+                    if( btn ) btn.style.display = val != vecinput.iValue ? "block": "none";
 
                     if( lock_icon.locked )
                     {
@@ -5142,6 +5162,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                             value[v.idx] = val;
                         }
                     } else {
+                        vecinput.value = val;
                         value[e.target.idx] = val;
                     }
 

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.30",
+    version: "0.1.31",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -4912,6 +4912,13 @@ class Panel {
         vecinput.step = options.step ?? "any";
         vecinput.type = "number";
         vecinput.id = "number_"+simple_guidGenerator();
+
+        if( value.constructor == Number )
+        {
+            value = clamp(value, +vecinput.min, +vecinput.max);
+            value = options.precision ? round(value, options.precision) : value;
+        }
+
         vecinput.value = vecinput.iValue = value;
         box.appendChild(vecinput);
 
@@ -5038,6 +5045,7 @@ class Panel {
         }
 
         let widget = this.create_widget(name, Widget.VECTOR, options);
+
         widget.onGetValue = () => {
             let inputs = element.querySelectorAll("input");
             let value = [];
@@ -5090,6 +5098,13 @@ class Panel {
             vecinput.type = "number";
             vecinput.id = "vec"+num_components+"_"+simple_guidGenerator();
             vecinput.idx = i;
+
+            if( value[i].constructor == Number )
+            {
+                value[i] = clamp(value[i], +vecinput.min, +vecinput.max);
+                value[i] = options.precision ? round(value[i], options.precision) : value[i];
+            }
+
             vecinput.value = vecinput.iValue = value[i];
 
             let drag_icon = document.createElement('a');
@@ -5123,13 +5138,18 @@ class Panel {
             }, {passive:false});
 
             vecinput.addEventListener("change", e => {
-                if(isNaN(e.target.value))
+
+                if( isNaN( e.target.value ) )
                     return;
-                let val = e.target.value = clamp(e.target.value, vecinput.min, vecinput.max);
-    
+
+                console.log(e.target.value);
+                let val = e.target.value = clamp(e.target.value, +vecinput.min, +vecinput.max);
+                val = options.precision ? round(val, options.precision) : val;
+                console.log(val);
+
                 // Reset button (default value)
-                let btn = element.querySelector(".lexwidgetname .lexicon");
-                if(btn) btn.style.display = val != vecinput.iValue ? "block": "none";
+                let btn = element.querySelector( ".lexwidgetname .lexicon" );
+                if( btn ) btn.style.display = val != vecinput.iValue ? "block": "none";
 
                 if( lock_icon.locked )
                 {
@@ -5138,6 +5158,7 @@ class Panel {
                         value[v.idx] = val;
                     }
                 } else {
+                    vecinput.value = val;
                     value[e.target.idx] = val;
                 }
 

package/changelog.md

@@ -1,5 +1,14 @@
 # lexgui.js changelog
 
+## 0.1.31
+
+GraphEditor:
+- Graph/function renaming.
+- Copy/Paste nodes.
+
+Fixed precision in Number/Vector widgets.
+Minor bug fixes.
+
 ## 0.1.30
 
 GraphEditor:

package/examples/node_graph.html

@@ -45,7 +45,6 @@
            
         } );
 
-        graph_editor.loadGraph( "../data/function_sample.json" );
         graph_editor.loadGraph( "../data/graph_sample.json" );
 
         function loop(dt) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.30",
+    "version": "0.1.31",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",