lexgui 0.4.2 → 0.5.1

package/build/components/audio.js

@@ -1,202 +1,212 @@
 import { LX } from 'lexgui';
 
-if(!LX) {
+if( !LX )
+{
     throw("lexgui.js missing!");
 }
 
 LX.components.push( 'Audio' );
 
 /**
- * @method addKnob
- * @param {String} name Widget name
- * @param {Number} value Knob value
- * @param {Number} min Min Knob value
- * @param {Number} max Max Knob value
- * @param {Function} callback Callback function on change
- * @param {*} options:
- * minLabel (String): Label to show as min value
- * maxLabel (String): Label to show as max value
+ * @class Knob
+ * @description Knob Widget
  */
 
-let Panel = LX.Panel;
-let Widget = LX.Widget;
+class Knob extends LX.Widget {
 
-Panel.prototype.addKnob = function( name, value, min, max, callback, options = {} ) {
+    constructor( name, value, min, max, callback, options = {} ) {
 
-    if( value.constructor == Number )
-    {
-        value = LX.clamp( value, min, max );
-        value = options.precision ? LX.round( value, options.precision ) : value;
-    }
+        if( value.constructor == Number )
+        {
+            value = LX.clamp( value, min, max );
+            value = options.precision ? LX.round( value, options.precision ) : value;
+        }
 
-    let widget = this._createWidget( Widget.KNOB, name, value, options );
+        super( LX.Widget.KNOB, name, value, options );
 
-    widget.onGetValue = () => {
-        return innerKnobCircle.value;
-    };
-    widget.onSetValue = ( newValue, skipCallback ) => {
-        innerSetValue( newValue );
-        Panel._dispatch_event( innerKnobCircle, "change", skipCallback );
-    };
+        this.onGetValue = () => {
+            return innerKnobCircle.value;
+        };
 
-    let element = widget.domEl;
+        this.onSetValue = ( newValue, skipCallback ) => {
+            innerSetValue( newValue );
+            LX.Widget._dispatchEvent( innerKnobCircle, "change", skipCallback );
+        };
 
-    const snapEnabled = ( options.snap && options.snap.constructor == Number );
-    const ticks = [];
-    if( snapEnabled )
-    {
-        const range = (max - min) / options.snap;
-        for( let i = 0; i < ( options.snap + 1 ); ++i )
+        const snapEnabled = ( options.snap && options.snap.constructor == Number );
+        const ticks = [];
+        if( snapEnabled )
         {
-            ticks.push( min + (i  * range) );
+            const range = (max - min) / options.snap;
+            for( let i = 0; i < ( options.snap + 1 ); ++i )
+            {
+                ticks.push( min + (i  * range) );
+            }
         }
-    }
 
-    var container = document.createElement( 'div' );
-    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";
-    if( snapEnabled )
-    {
-        knobCircle.style.setProperty( "--knob-snap-mark", ( 270 / options.snap ) + "deg" );
-    }
+        var container = document.createElement( 'div' );
+        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 innerKnobCircle = document.createElement( 'div' );
-    innerKnobCircle.className = "innerknobcircle";
-    innerKnobCircle.min = min;
-    innerKnobCircle.max = max;
-    knobCircle.appendChild( innerKnobCircle );
-
-    let knobMarker = document.createElement( 'div' );
-    knobMarker.className = "knobmarker";
-    innerKnobCircle.appendChild( knobMarker );
-    innerKnobCircle.value = innerKnobCircle.iValue = value;
-
-    let mustSnap = false;
-    let innerSetValue = function( v ) {
-        // Convert val between (-135 and 135)
-        const angle = LX.remapRange( v, innerKnobCircle.min, innerKnobCircle.max, -135.0, 135.0 );
-        innerKnobCircle.style.rotate = angle + 'deg';
-        innerKnobCircle.value = v;
-    }
+        let knobCircle = document.createElement( 'div' );
+        knobCircle.className = "knobcircle";
+        if( snapEnabled )
+        {
+            knobCircle.style.setProperty( "--knob-snap-mark", ( 270 / options.snap ) + "deg" );
+        }
 
-    const angle = LX.remapRange( value, min, max, -135.0, 135.0 );
-    innerKnobCircle.style.rotate = angle + 'deg';
+        let innerKnobCircle = document.createElement( 'div' );
+        innerKnobCircle.className = "innerknobcircle";
+        innerKnobCircle.min = min;
+        innerKnobCircle.max = max;
+        knobCircle.appendChild( innerKnobCircle );
+
+        let knobMarker = document.createElement( 'div' );
+        knobMarker.className = "knobmarker";
+        innerKnobCircle.appendChild( knobMarker );
+        innerKnobCircle.value = innerKnobCircle.iValue = value;
+
+        let mustSnap = false;
+        let innerSetValue = function( v ) {
+            // Convert val between (-135 and 135)
+            const angle = LX.remapRange( v, innerKnobCircle.min, innerKnobCircle.max, -135.0, 135.0 );
+            innerKnobCircle.style.rotate = angle + 'deg';
+            innerKnobCircle.value = v;
+        }
 
-    if( options.disabled )
-    {
-        container.addClass( "disabled" );
-    }
+        const angle = LX.remapRange( value, min, max, -135.0, 135.0 );
+        innerKnobCircle.style.rotate = angle + 'deg';
 
-    innerKnobCircle.addEventListener( "change", e => {
+        if( options.disabled )
+        {
+            container.addClass( "disabled" );
+        }
 
-        const knob = e.target;
+        innerKnobCircle.addEventListener( "change", e => {
 
-        const skipCallback = e.detail;
+            const knob = e.target;
 
-        if( mustSnap )
-        {
-            knob.value = ticks.reduce(( prev, curr ) => Math.abs( curr - knob.value ) < Math.abs( prev - knob.value ) ? curr : prev );
-        }
+            const skipCallback = e.detail;
 
-        let val = knob.value = LX.clamp( knob.value, knob.min, knob.max );
-        val = options.precision ? LX.round( val, options.precision ) : val;
+            if( mustSnap )
+            {
+                knob.value = ticks.reduce(( prev, curr ) => Math.abs( curr - knob.value ) < Math.abs( prev - knob.value ) ? curr : prev );
+            }
 
-        innerSetValue( val );
+            let val = knob.value = LX.clamp( knob.value, knob.min, knob.max );
+            val = options.precision ? LX.round( val, options.precision ) : val;
 
-        // Reset button (default value)
-        if( !skipCallback )
-        {
-            let btn = element.querySelector( ".lexwidgetname .lexicon" );
-            if( btn ) btn.style.display = val != innerKnobCircle.iValue ? "block": "none";
+            innerSetValue( val );
 
-            if( !( snapEnabled && !mustSnap ) )
+            // Reset button (default value)
+            if( !skipCallback )
             {
-                this._trigger( new LX.IEvent( name, val, e ), callback );
-                mustSnap = false;
+                let btn = this.root.querySelector( ".lexwidgetname .lexicon" );
+                if( btn ) btn.style.display = val != innerKnobCircle.iValue ? "block": "none";
+
+                if( !( snapEnabled && !mustSnap ) )
+                {
+                    this._trigger( new LX.IEvent( name, val, e ), callback );
+                    mustSnap = false;
+                }
             }
-        }
 
-    }, { passive: false });
-    
-    // Add drag input
+        }, { passive: false });
 
-    innerKnobCircle.addEventListener( "mousedown", inner_mousedown );
+        // Add drag input
 
-    var that = this;
+        innerKnobCircle.addEventListener( "mousedown", inner_mousedown );
 
-    function inner_mousedown( e ) {
+        var that = this;
 
-        if( document.activeElement == innerKnobCircle || options.disabled )
-        {
-            return;
-        }
+        function inner_mousedown( e ) {
 
-        var doc = that.root.ownerDocument;
-        doc.addEventListener("mousemove",inner_mousemove);
-        doc.addEventListener("mouseup",inner_mouseup);
-        document.body.classList.add('noevents');
+            if( document.activeElement == innerKnobCircle || options.disabled )
+            {
+                return;
+            }
 
-        if( !document.pointerLockElement )
-        {
-            container.requestPointerLock();
+            var doc = that.root.ownerDocument;
+            doc.addEventListener("mousemove",inner_mousemove);
+            doc.addEventListener("mouseup",inner_mouseup);
+            document.body.classList.add('noevents');
+
+            if( !document.pointerLockElement )
+            {
+                container.requestPointerLock();
+            }
+
+            e.stopImmediatePropagation();
+            e.stopPropagation();
         }
 
-        e.stopImmediatePropagation();
-        e.stopPropagation();
-    }
+        function inner_mousemove( e ) {
 
-    function inner_mousemove( e ) {
+            let dt = -e.movementY;
 
-        let dt = -e.movementY;
+            if ( dt != 0 )
+            {
+                let mult = options.step ?? 1;
+                if(e.shiftKey) mult *= 10;
+                else if(e.altKey) mult *= 0.1;
+                let new_value = (innerKnobCircle.value - mult * dt);
+                innerKnobCircle.value = new_value;
+                LX.Widget._dispatchEvent( innerKnobCircle, 'change' );
+            }
 
-        if ( dt != 0 )
-        {
-            let mult = options.step ?? 1;
-            if(e.shiftKey) mult *= 10;
-            else if(e.altKey) mult *= 0.1;
-            let new_value = (innerKnobCircle.value - mult * dt);
-            innerKnobCircle.value = new_value;
-            Panel._dispatch_event( innerKnobCircle, 'change' );
+            e.stopPropagation();
+            e.preventDefault();
         }
 
-        e.stopPropagation();
-        e.preventDefault();
-    }
+        function inner_mouseup( e ) {
 
-    function inner_mouseup( e ) {
+            var doc = that.root.ownerDocument;
+            doc.removeEventListener( 'mousemove', inner_mousemove );
+            doc.removeEventListener( 'mouseup', inner_mouseup );
+            document.body.classList.remove( 'noevents' );
 
-        var doc = that.root.ownerDocument;
-        doc.removeEventListener( 'mousemove', inner_mousemove );
-        doc.removeEventListener( 'mouseup', inner_mouseup );
-        document.body.classList.remove( 'noevents' );
+            // Snap if necessary
+            if( snapEnabled )
+            {
+                mustSnap = true;
+                LX.Widget._dispatchEvent( innerKnobCircle, 'change' );
+            }
 
-        // Snap if necessary
-        if( snapEnabled )
-        {
-            mustSnap = true;
-            Panel._dispatch_event( innerKnobCircle, 'change' );
+            if( document.pointerLockElement )
+            {
+                document.exitPointerLock();
+            }
         }
 
-        if( document.pointerLockElement )
+        container.appendChild( knobCircle );
+        this.root.appendChild( container );
+
+        // Remove branch padding and margins
+        if( !this.name )
         {
-            document.exitPointerLock();
+            this.root.className += " noname";
+            container.style.width = "100%";
         }
     }
-    
-    container.appendChild( knobCircle );
-    element.appendChild( container );
-
-    // Remove branch padding and margins
-    if( !widget.name )
-    {
-        element.className += " noname";
-        container.style.width = "100%";
-    }
+}
+
+LX.Knob = Knob;
+
+/**
+ * @method addKnob
+ * @param {String} name Widget name
+ * @param {Number} value Knob value
+ * @param {Number} min Min Knob value
+ * @param {Number} max Max Knob value
+ * @param {Function} callback Callback function on change
+ * @param {*} options:
+ * minLabel (String): Label to show as min value
+ * maxLabel (String): Label to show as max value
+ */
 
-    return widget;
+LX.Panel.prototype.addKnob = function( name, value, min, max, callback, options = {} ) {
+    const widget = new Knob( name, value, min, max, callback, options );
+    return this._attachWidget( widget );
 }

package/build/components/codeeditor.js

@@ -302,8 +302,10 @@ class CodeEditor {
 
             this.addExplorerItem = function( item )
             {
-                if( !this.explorer.data.children.find( (value, index) => value.id === item.id ) )
-                    this.explorer.data.children.push( item );
+                if( !this.explorer.innerTree.data.children.find( ( value, index ) => value.id === item.id ) )
+                {
+                    this.explorer.innerTree.data.children.push( item );
+                }
             };
 
             explorerArea.attach( panel );
@@ -1240,7 +1242,7 @@ class CodeEditor {
 
                 const ext = this.languages[ options.language ] ?. ext;
                 this.addExplorerItem( { 'id': name, 'skipVisibility': true, 'icon': this._getFileIcon( name, ext ) } );
-                this.explorer.frefresh( name );
+                this.explorer.innerTree.frefresh( name );
             }
             else
             {
@@ -1488,10 +1490,10 @@ class CodeEditor {
         // Update explorer icon
         if( this.explorer )
         {
-            const item = this.explorer.data.children.filter( (v) => v.id === this.code.tabName )[ 0 ];
+            const item = this.explorer.innerTree.data.children.filter( (v) => v.id === this.code.tabName )[ 0 ];
             console.assert( item != undefined );
             item.icon = icon;
-            this.explorer.frefresh( this.code.tabName );
+            this.explorer.innerTree.frefresh( this.code.tabName );
         }
     }
 
@@ -1720,7 +1722,7 @@ class CodeEditor {
         if( this.explorer && !isNewTabButton )
         {
             this.addExplorerItem( { 'id': name, 'skipVisibility': true, 'icon': tabIcon } );
-            this.explorer.frefresh( name );
+            this.explorer.innerTree.frefresh( name );
         }
 
         this.tabs.add( name, code, {

package/build/components/nodegraph.js

@@ -95,11 +95,12 @@ class GraphEditor {
         this._sidebar = area.addSidebar( m => {
 
         }, {
-            headerIcon: "More",
+            displaySelected: true,
+            headerIcon: "more",
             headerTitle: "Create",
             headerSubtitle: "Press to rename",
             onHeaderPressed: () => this._showRenameGraphDialog(),
-            footerIcon: "Plus",
+            footerIcon: "plus",
             footerTitle: "Create",
             footerSubtitle: "Graph or Function",
             onFooterPressed: (e) => this._onSidebarCreate( e )
@@ -1204,7 +1205,7 @@ class GraphEditor {
                 panel.addVector4( p.name, p.value, (v) => { p.value = v } );
                 break;
             case 'select':
-                panel.addDropdown( p.name, p.options, p.value, (v) => { p.value = v } );
+                panel.addSelect( p.name, p.options, p.value, (v) => { p.value = v } );
                 break;
             case 'array':
                 panel.addArray( p.name, p.value, (v) => {

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%";
     }
 
     /**
@@ -258,13 +278,14 @@ class Timeline {
         let panel = this.leftPanel;
         panel.sameLine( 2 );
 
-        let title = panel.addTitle( "Tracks" );
+        let titleWidget = panel.addTitle( "Tracks" );
+        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();
@@ -2752,12 +2773,14 @@ class ClipsTimeline extends Timeline {
         let panel = this.leftPanel;
         
         panel.sameLine(2);
-        let title = panel.addTitle("Tracks");
+
+        let titleWidget = panel.addTitle("Tracks");
+        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);