lexgui 0.5.1 → 0.5.3

package/build/components/audio.js

@@ -33,6 +33,11 @@ class Knob extends LX.Widget {
             LX.Widget._dispatchEvent( innerKnobCircle, "change", skipCallback );
         };
 
+        this.onResize = ( rect ) => {
+            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
+            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+        };
+
         const snapEnabled = ( options.snap && options.snap.constructor == Number );
         const ticks = [];
         if( snapEnabled )
@@ -48,7 +53,6 @@ class Knob extends LX.Widget {
         container.className = "lexknob";
         container.addClass( options.size );
         container.addClass( snapEnabled ? "show-ticks" : null );
-        container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
         let knobCircle = document.createElement( 'div' );
         knobCircle.className = "knobcircle";
@@ -181,14 +185,10 @@ class Knob extends LX.Widget {
         }
 
         container.appendChild( knobCircle );
+
         this.root.appendChild( container );
 
-        // Remove branch padding and margins
-        if( !this.name )
-        {
-            this.root.className += " noname";
-            container.style.width = "100%";
-        }
+        LX.doAsync( this.onResize.bind( this ) );
     }
 }
 

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

@@ -101,7 +101,7 @@ class Timeline {
 
         this.root = new LX.Area({className : 'lextimeline'});
         
-        this.header_offset = 38;
+        this.header_offset = 48;
         
         let width = options.width ? options.width : null;
         let height = options.height ? options.height - this.header_offset : null;
@@ -255,7 +255,7 @@ class Timeline {
             }, { title: "Settings" })
         }
 
-        header.endLine();
+        header.endLine( "justify-around" );
     }
 
     /**