lexgui 0.5.0 → 0.5.2

package/build/components/codeeditor.js

@@ -1536,8 +1536,8 @@ class CodeEditor {
 
             panel.sameLine();
             panel.addLabel( this.code.title, { float: 'right', signal: "@tab-name" });
-            panel.addLabel( "Ln " + 1, { maxWidth: "48px", signal: "@cursor-line" });
-            panel.addLabel( "Col " + 1, { maxWidth: "48px", signal: "@cursor-pos" });
+            panel.addLabel( "Ln " + 1, { xmaxWidth: "48px", signal: "@cursor-line" });
+            panel.addLabel( "Col " + 1, { xmaxWidth: "48px", signal: "@cursor-pos" });
             panel.addButton( null, "Spaces: " + this.tabSpaces, ( value, event ) => {
                 LX.addContextMenu( "Spaces", event, m => {
                     const options = [ 2, 4, 8 ];
@@ -1548,7 +1548,7 @@ class CodeEditor {
                             this._updateDataInfoPanel( "@tab-spaces", "Spaces: " + this.tabSpaces );
                         } );
                 });
-            }, { width: "10%", nameWidth: "15%", signal: "@tab-spaces" });
+            }, { nameWidth: "15%", signal: "@tab-spaces" });
             panel.addButton( "<b>{ }</b>", this.highlight, ( value, event ) => {
                 LX.addContextMenu( "Language", event, m => {
                     for( const lang of Object.keys( this.languages ) )
@@ -1558,7 +1558,7 @@ class CodeEditor {
                         } );
                     }
                 });
-            }, { width: "17.5%", nameWidth: "15%", signal: "@highlight" });
+            }, { nameWidth: "15%", signal: "@highlight" });
             panel.endLine();
 
             return panel;

package/build/components/nodegraph.js

@@ -1965,7 +1965,7 @@ class GraphEditor {
         for( let node of nodesOutsideViewport )
         {
             let dom = this._getNodeDOMElement( node.id );
-            dom.classList.toggle( 'hiddenOpacity', true );
+            dom.classList.toggle( 'hidden-opacity', true );
         }
     }
 
@@ -2397,10 +2397,10 @@ class GraphEditor {
             if( graph_bb.inside( node_bb, false ) )
             {
                 // Show if node in viewport..
-                dom.classList.toggle( 'hiddenOpacity', false );
+                dom.classList.toggle( 'hidden-opacity', false );
 
                 // And hide content if scale is very small..
-                dom.childNodes[ 1 ].classList.toggle( 'hiddenOpacity', this.currentGraph.scale < 0.5 );
+                dom.childNodes[ 1 ].classList.toggle( 'hidden-opacity', this.currentGraph.scale < 0.5 );
 
                 continue;
             }

package/build/components/timeline.js

@@ -169,7 +169,6 @@ class Timeline {
         }
 
         let header = this.header;
-        LX.DEFAULT_NAME_WIDTH = "50%";
         header.sameLine();
 
         if( this.name )
@@ -177,32 +176,54 @@ class Timeline {
             header.addTitle(this.name );
         }
 
-        header.addButton('', '<i class="fa-solid fa-'+ (this.playing ? 'pause' : 'play') +'"></i>', (value, event) => {
+        const buttonContainer = LX.makeContainer(["auto", "100%"], "", { display: "flex" });
+
+        header.queue( buttonContainer );
+
+        header.addButton("playBtn", '<i class="fa-solid fa-'+ (this.playing ? 'pause' : 'play') +'"></i>', (value, event) => {
            this.changeState();
-        }, { width: "40px", buttonClass: "accept", title: "Play" });
+        }, { buttonClass: "accept", title: "Play", hideName: true });
 
-        header.addButton('', '<i class="fa-solid fa-rotate"></i>', ( value, event ) => {
+        header.addButton("toggleLoopBtn", '<i class="fa-solid fa-rotate"></i>', ( value, event ) => {
             this.loop = !this.loop;
             if( this.onChangePlayMode )
             {
                 this.onChangePlayMode( this.loop );
             }
-        }, { width: "40px", selectable: true, selected: this.loop, title: 'Loop' });
+        }, { selectable: true, selected: this.loop, title: 'Loop', hideName: true });
         
         if( this.onBeforeCreateTopBar )
         {
             this.onBeforeCreateTopBar( header );
         }
 
+        header.clearQueue( buttonContainer );
+
+        header.addContent( "header-buttons", buttonContainer );
+
         header.addNumber("Current Time", this.currentTime, (value, event) => {
-            this.setTime(value)}, {signal: "@on_set_time_" + this.name, step: 0.01, min: 0, precision: 3, skipSlider: true});        
+            this.setTime(value)
+        }, {
+            units: "s",
+            signal: "@on_set_time_" + this.name,
+            step: 0.01, min: 0, precision: 3,
+            skipSlider: true
+        });
 
         header.addNumber("Duration", + this.duration.toFixed(3), (value, event) => {
-            this.setDuration(value, false)}, {step: 0.01, min: 0, signal: "@on_set_duration_" + this.name
+            this.setDuration(value, false)
+        }, {
+            units: "s",
+            step: 0.01, min: 0,
+            signal: "@on_set_duration_" + this.name
         });    
 
         header.addNumber("Speed", + this.speed.toFixed(3), (value, event) => {
-            this.setSpeed(value)}, {step: 0.01, signal: "@on_set_speed_" + this.name});    
+            this.setSpeed(value)
+        }, {
+            step: 0.01,
+            signal: "@on_set_speed_" + this.name
+        });
            
         if( this.onAfterCreateTopBar )
         {
@@ -211,12 +232,12 @@ class Timeline {
 
         if( this.onShowOptimizeMenu )
         {
-            header.addButton("", '<i class="fa-solid fa-filter"></i>', (value, event) => {this.onShowOptimizeMenu(event)}, { width: "40px", title: "Optimize" });
+            header.addButton(null, '<i class="fa-solid fa-filter"></i>', (value, event) => {this.onShowOptimizeMenu(event)}, { title: "Optimize" });
         }
 
         if( this.onShowConfiguration )
         {
-            header.addButton("", '<i class="fa-solid fa-gear"></i>', (value, event) => {
+            header.addButton(null, '<i class="fa-solid fa-gear"></i>', (value, event) => {
                 if(this.configurationDialog){
                     this.configurationDialog.close();
                     this.configurationDialog = null;
@@ -231,11 +252,10 @@ class Timeline {
                         root.remove();
                     }
                 })
-            }, { width: "40px" })
+            }, { title: "Settings" })
         }
 
-        header.endLine();
-        LX.DEFAULT_NAME_WIDTH = "30%";
+        header.endLine( "space-around" );
     }
 
     /**
@@ -263,9 +283,9 @@ class Timeline {
         
         if( !this.disableNewTracks ) 
         {
-            panel.addButton('', '<i class = "fa-solid fa-plus"></i>', (value, event) => {
+            panel.addButton("addTrackBtn", '<i class = "fa-solid fa-plus"></i>', (value, event) => {
                 this.addNewTrack();
-            }, {width: "40px", height: "40px"});            
+            }, { hideName: true, title: "Add Track" });
         }
 
         panel.endLine();
@@ -2758,9 +2778,9 @@ class ClipsTimeline extends Timeline {
         let title = titleWidget.root;
         if(!this.disableNewTracks) 
         {
-            panel.addButton('', '<i class = "fa-solid fa-plus"></i>', (value, event) => {
+            panel.addButton("addTrackBtn", '<i class = "fa-solid fa-plus"></i>', (value, event) => {
                 this.addNewTrack();
-            }, {width: "40px", height: "40px"});            
+            }, { hideName: true, title: "Add Track" });
         }
         panel.endLine();
         const styles = window.getComputedStyle(title);