lexgui 0.1.35 → 0.1.36

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.35",
+        version: "0.1.36",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -45,43 +45,43 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.has = has;
 
-    function getExtension(s)
+    function getExtension( s )
     { 
         return s.includes('.') ? s.split('.').pop() : null;
     }
-    
+
     LX.getExtension = getExtension;
-    
-    function deepCopy(o)
+
+    function deepCopy( o )
     { 
         return JSON.parse(JSON.stringify(o)) 
     }
 
     LX.deepCopy = deepCopy;
 
-    function setThemeColor(color_name, color)
+    function setThemeColor( colorName, color )
     {
-        var r = document.querySelector(':root');
-        r.style.setProperty("--" + color_name, color);
+        var r = document.querySelector( ':root' );
+        r.style.setProperty( '--' + colorName, color );
     }
 
     LX.setThemeColor = setThemeColor;
-    
-    function getThemeColor(color_name)
+
+    function getThemeColor( colorName )
     {
-        var r = getComputedStyle(document.querySelector(':root'));
-        return r.getPropertyValue("--" + color_name);
+        var r = getComputedStyle( document.querySelector( ':root' ) );
+        return r.getPropertyValue( '--' + colorName );
     }
 
     LX.getThemeColor = getThemeColor;
 
-    function getBase64Image(img) {
-        var canvas = document.createElement("canvas");
+    function getBase64Image( img ) {
+        var canvas = document.createElement( 'canvas' );
         canvas.width = img.width;
         canvas.height = img.height;
-        var ctx = canvas.getContext("2d");
-        ctx.drawImage(img, 0, 0);
-        return canvas.toDataURL("image/png");
+        var ctx = canvas.getContext( '2d' );
+        ctx.drawImage( img, 0, 0 );
+        return canvas.toDataURL( 'image/png' );
     }
 
     LX.getBase64Image = getBase64Image;
@@ -133,22 +133,26 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     function doAsync( fn, ms ) {
         if( ASYNC_ENABLED )
+        {
             setTimeout( fn, ms ?? 0 );
+        }
         else
+        {
             fn();
+        }
     }
 
     // Math classes
 
     class vec2 {
 
-        constructor(x, y) {
+        constructor( x, y ) {
             this.x = x ?? 0;
-            this.y = y ?? (x ?? 0);
+            this.y = y ?? ( x ?? 0 );
         }
     
-        get xy() { return [ this.x, this.y]; }
-        get yx() { return [ this.y, this.x]; }
+        get xy() { return [ this.x, this.y ]; }
+        get yx() { return [ this.y, this.x ]; }
     
         set ( x, y ) { this.x = x; this.y = y; }
         add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
@@ -156,6 +160,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x * v.x, this.y * v.y ); return v0; }
         div ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x / v.x, this.y / v.y ); return v0; }
         abs ( v0 = new vec2() ) { v0.set( Math.abs( this.x ), Math.abs( this.y ) ); return v0; }
+        dot ( v ) { return this.x * v.x + this.y * v.y; }
+        len2 () { return this.dot( this ) }
+        len () { return Math.sqrt( this.len2() ); }
+        nrm ( v0 = new vec2() ) { v0.set( this.x, this.y ); return v0.mul( 1.0 / this.len(), v0 ); }
+        dst ( v ) { return v.sub( this ).len(); }
     };
 
     LX.vec2 = vec2;
@@ -661,16 +670,22 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.TreeEvent = TreeEvent;
 
-    function emit( signal_name, value, target )
+    function emit( signalName, value, options = {} )
     {
-        const data = LX.signals[ signal_name ];
+        const data = LX.signals[ signalName ];
 
         if( !data )
         return;
 
+        const target = options.target;
+
         if( target )
         {
-            if(target[signal_name]) target[signal_name].call(target, value);
+            if( target[ signalName ])
+            {
+                target[ signalName ].call( target, value );
+            }
+
             return;
         }
 
@@ -678,13 +693,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         {
             if( obj.constructor === Widget )
             {
-                obj.set( value );
+                obj.set( value, options.skipCallback ?? true );
                 
-                if(obj.options && obj.options.callback)
-                    obj.options.callback(value, data);
-            }else
+                if( obj.options && obj.options.callback )
+                {
+                    obj.options.callback( value, data );
+                }
+            }
+            else
             {
-                obj[signal_name].call(obj, value);
+                obj[ signalName ].call( obj, value );
             }
         }
     }
@@ -723,13 +741,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          */
 
         constructor( options = {} ) {
-        
-            var root = document.createElement('div');
+
+            var root = document.createElement( 'div' );
             root.className = "lexarea";
-            if(options.id)
+            if( options.id )
+            {
                 root.id = options.id;
-            if(options.className)
+            }
+            if( options.className )
+            {
                 root.className += " " + options.className;
+            }
     
             var width = options.width || "calc( 100% )";
             var height = options.height || "100%";
@@ -737,10 +759,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // This has default options..
             this.setLimitBox( options.minWidth, options.minHeight, options.maxWidth, options.maxHeight );
     
-            if(width.constructor == Number)
+            if( width.constructor == Number )
+            {
                 width += "px";
-            if(height.constructor == Number)
+            }
+            if( height.constructor == Number )
+            {
                 height += "px";
+            }
     
             root.style.width = width;
             root.style.height = height;
@@ -751,115 +777,136 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.sections = [];
             this.panels = [];
     
-            if(!options.no_append) {
+            if( !options.no_append )
+            {
                 var lexroot = document.getElementById("lexroot");
                 lexroot.appendChild( this.root );
             }
 
             let overlay = options.overlay;
 
-            if(overlay)
+            if( overlay )
             {
                 this.root.classList.add("overlay-" + overlay);
-                
-                if( options.draggable )
+
+                if( options.left )
+                {
+                    this.root.style.left = options.left;
+                }
+                else if( options.right )
+                {
+                    this.root.style.right = options.right;
+                }
+                else if( options.top )
+                {
+                    this.root.style.top = options.top;
+                }
+                else if( options.bottom )
+                {
+                    this.root.style.bottom = options.bottom;
+                }
+
+                const draggable = options.draggable ?? true;
+                if( draggable )
                     makeDraggable( root );
 
                 if( options.resizeable ) {
                     root.classList.add("resizeable");
                 }
 
-                if(options.resize)
+                if( options.resize )
                 {                  
                     this.split_bar = document.createElement("div");
-                    let type = overlay == "left" || overlay == "right" ? "horizontal" : "vertical";
+                    let type = (overlay == "left") || (overlay == "right") ? "horizontal" : "vertical";
                     this.type = overlay;;
                     this.split_bar.className = "lexsplitbar " + type;
-                    if(overlay == "right") {
+
+                    if( overlay == "right" )
+                    {
                         this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.left = -LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                        this.split_bar.style.left = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     } 
-                    else if(overlay == "left") {
+                    else if( overlay == "left" )
+                    {
                         let size = Math.min(document.body.clientWidth - LX.DEFAULT_SPLITBAR_SIZE, this.root.clientWidth);
                         this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.left = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                        this.split_bar.style.left = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     }
-                    else if (overlay == "top") {
+                    else if( overlay == "top" )
+                    {
                         let size = Math.min(document.body.clientHeight - LX.DEFAULT_SPLITBAR_SIZE, this.root.clientHeight);
                         this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.top = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                        this.split_bar.style.top = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     }
-                    else if(overlay == "bottom") {
+                    else if( overlay == "bottom" )
+                    {
                         this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.top = -LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                        this.split_bar.style.top = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     }
 
                     this.split_bar.addEventListener("mousedown", inner_mousedown);
-                    this.root.appendChild(this.split_bar);
+                    this.root.appendChild( this.split_bar );
                     
                     var that = this;
-                    var last_pos = [0,0];
+                    var last_pos = [ 0, 0 ];
                     
-                    function inner_mousedown(e)
+                    function inner_mousedown( e )
                     {
                         var doc = that.root.ownerDocument;
-                        doc.addEventListener("mousemove",inner_mousemove);
-                        doc.addEventListener("mouseup",inner_mouseup);
-                        last_pos[0] = e.x;
-                        last_pos[1] = e.y;
+                        doc.addEventListener( 'mousemove', inner_mousemove );
+                        doc.addEventListener( 'mouseup', inner_mouseup );
+                        last_pos[ 0 ] = e.x;
+                        last_pos[ 1 ] = e.y;
                         e.stopPropagation();
                         e.preventDefault();
-                        document.body.classList.add("nocursor");
-                        that.split_bar.classList.add("nocursor");
+                        document.body.classList.add( 'nocursor' );
+                        that.split_bar.classList.add( 'nocursor' );
                     }
 
-                    function inner_mousemove(e)
+                    function inner_mousemove( e )
                     {
-                        switch(that.type) {
+                        switch( that.type ) {
                             case "right":
-                                var dt = (last_pos[0] - e.x);
-                                var size = (that.root.offsetWidth + dt);
+                                var dt = ( last_pos[ 0 ] - e.x );
+                                var size = ( that.root.offsetWidth + dt );
                                 that.root.style.width = size + "px";
                                 break;
-                            
                             case "left":
-                                var dt = (last_pos[0] - e.x);
+                                var dt = ( last_pos[ 0 ] - e.x );
                                 var size = Math.min(document.body.clientWidth - LX.DEFAULT_SPLITBAR_SIZE, (that.root.offsetWidth - dt));
                                 that.root.style.width = size + "px";
                                 that.split_bar.style.left = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
                                 break;
-                            
                             case "top":
-                                var dt = (last_pos[1] - e.y);
+                                var dt = ( last_pos[ 1 ] - e.y );
                                 var size = Math.min(document.body.clientHeight - LX.DEFAULT_SPLITBAR_SIZE, (that.root.offsetHeight - dt));
                                 that.root.style.height = size + "px";
                                 that.split_bar.style.top = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
                                 break;
-
                             case "bottom":
-                                var dt = (last_pos[1] - e.y);
-                                var size = (that.root.offsetHeight + dt);
+                                var dt = ( last_pos[ 1 ] - e.y );
+                                var size = ( that.root.offsetHeight + dt );
                                 that.root.style.height = size + "px";
                                 break;
                         }
                         
-                        last_pos[0] = e.x;
-                        last_pos[1] = e.y;
+                        last_pos[ 0 ] = e.x;
+                        last_pos[ 1 ] = e.y;
                         e.stopPropagation();
                         e.preventDefault();
                         
                         // Resize events   
-                        if(that.onresize)
+                        if( that.onresize )
                             that.onresize( that.root.getBoundingClientRect() );
                     }
 
-                    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("nocursor");
-                        that.split_bar.classList.remove("nocursor");
+                        doc.removeEventListener( 'mousemove', inner_mousemove );
+                        doc.removeEventListener( 'mouseup', inner_mouseup );
+                        document.body.classList.remove( 'nocursor' );
+                        that.split_bar.classList.remove( 'nocursor' );
                     }
                 }
             }
@@ -1142,7 +1189,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.propagateEvent("onresize");
         }
 
-         /**
+        /**
         * @method extend
         * Hide 2nd area split
         */
@@ -1592,7 +1639,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 this.classList.remove("dockingtab");
 
                 // Change tabs instance
-                LX.emit( "@on_tab_docked", el.instance );
+                LX.emit( "@on_tab_docked" );
                 el.instance = that;
 
                 // Show on drop
@@ -1664,22 +1711,26 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             let isSelected = options.selected ?? false;
 
-            if( isSelected ) {
-                this.root.querySelectorAll('span').forEach( s => s.classList.remove('selected'));
-                this.area.root.querySelectorAll('.lextabcontent').forEach( c => c.style.display = 'none');
+            if( isSelected )
+            {
+                this.root.querySelectorAll( 'span' ).forEach( s => s.classList.remove( 'selected' ) );
+                this.area.root.querySelectorAll( '.lextabcontent' ).forEach( c => c.style.display = 'none' );
             }
             
             isSelected = !Object.keys( this.tabs ).length && !this.folding ? true : isSelected;
 
             let contentEl = content.root ? content.root : content;
-            contentEl.style.display = isSelected ? "block" : "none";
-            contentEl.classList.add("lextabcontent");
+            contentEl.originalDisplay = contentEl.style.display;
+            contentEl.style.display = isSelected ? contentEl.originalDisplay : "none";
+            contentEl.classList.add( 'lextabcontent' );
 
             // Process icon
             if( options.icon )
             {
                 if( options.icon.includes( 'fa-' ) ) // It's fontawesome icon...
+                {
                     options.icon = "<i class='" + options.icon + "'></i>";
+                }
                 else // an image..
                 {
                     const rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
@@ -1688,26 +1739,31 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             // Create tab
-            let tabEl = document.createElement('span');
-            tabEl.dataset["name"] = name;
-            tabEl.className = "lexareatab" + (isSelected ? " selected" : "");
-            tabEl.innerHTML = (options.icon ?? "") + name;
-            tabEl.id = name.replace(/\s/g, '') + Tabs.TAB_ID++;
+            let tabEl = document.createElement( 'span' );
+            tabEl.dataset[ "name" ] = name;
+            tabEl.className = "lexareatab" + ( isSelected ? " selected" : "" );
+            tabEl.innerHTML = ( options.icon ?? "" ) + name;
+            tabEl.id = name.replace( /\s/g, '' ) + Tabs.TAB_ID++;
             tabEl.title = options.title;
             tabEl.selected = isSelected ?? false;
             tabEl.fixed = options.fixed;
-            if(tabEl.selected)
-                this.selected = name;
             tabEl.instance = this;
             contentEl.id = tabEl.id + "_content";
 
+            if( tabEl.selected )
+            {
+                this.selected = name;
+            }
+
             LX.addSignal( "@on_tab_docked", tabEl, function() {
-                if( this.parentElement.childNodes.length == 1 ){
-                    this.parentElement.childNodes[0].click(); // single tab!!
+                if( this.parentElement.childNodes.length == 1 )
+                {
+                    this.parentElement.childNodes[ 0 ].click(); // single tab!!
                 } 
             } );
             
             tabEl.addEventListener("click", e => {
+
                 e.preventDefault();
                 e.stopPropagation();
 
@@ -1715,25 +1771,27 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 {
                     // For folding tabs
                     const lastValue = tabEl.selected;
-                    tabEl.parentElement.querySelectorAll('span').forEach( s => s.selected = false );
+                    tabEl.parentElement.querySelectorAll( 'span' ).forEach( s => s.selected = false );
                     tabEl.selected = !lastValue; 
                     // Manage selected
-                    tabEl.parentElement.querySelectorAll('span').forEach( s => s.classList.remove('selected'));
-                    tabEl.classList.toggle('selected', (this.folding && tabEl.selected));
+                    tabEl.parentElement.querySelectorAll( 'span' ).forEach( s => s.classList.remove( 'selected' ));
+                    tabEl.classList.toggle('selected', ( this.folding && tabEl.selected ));
                     // Manage visibility 
-                    tabEl.instance.area.root.querySelectorAll('.lextabcontent').forEach( c => c.style.display = 'none');
-                    contentEl.style.display = "block";
+                    tabEl.instance.area.root.querySelectorAll( '.lextabcontent' ).forEach( c => c.style.display = 'none' );
+                    contentEl.style.display = contentEl.originalDisplay;
                     tabEl.instance.selected = tabEl.dataset.name;
                 }
 
                 if( this.folding )
                 {
                     this.folded = tabEl.selected;
-                    this.area.root.classList.toggle('folded', !this.folded);
+                    this.area.root.classList.toggle( 'folded', !this.folded );
                 }
 
-                if(options.onSelect)
+                if( options.onSelect )
+                {
                     options.onSelect(e, tabEl.dataset.name);
+                }
 
                 if( this.thumb )
                 {
@@ -1748,25 +1806,28 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 e.preventDefault();
                 e.stopPropagation();
     
-                if(options.onContextMenu) 
+                if( options.onContextMenu )
+                {
                     options.onContextMenu( e, tabEl.dataset.name );
+                }
             });
 
             tabEl.addEventListener("mouseup", e => {
                 e.preventDefault();
                 e.stopPropagation();
-                if( e.button == 1 ) {
-                    this.delete( tabEl.dataset["name"] );
+                if( e.button == 1 )
+                {
+                    this.delete( tabEl.dataset[ "name" ] );
                 }
             });
             
-            tabEl.setAttribute('draggable', true);
-            tabEl.addEventListener("dragstart", function(e) {
+            tabEl.setAttribute( 'draggable', true );
+            tabEl.addEventListener( 'dragstart', function( e ) {
                 if( this.parentElement.childNodes.length == 1 ){
                     e.preventDefault();
                     return;
                 } 
-                e.dataTransfer.setData( "source", e.target.id );
+                e.dataTransfer.setData( 'source', e.target.id );
             });
             
             // Attach content
@@ -2474,8 +2535,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
 
         refresh() {
-            // this.domEl.innerHTML = "";
-            // if( this.options.callback ) this.options.callback();
+
         }
     }
 
@@ -3704,6 +3764,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * placeholder: Add input placeholder
          * trigger: Choose onchange trigger (default, input) [default]
          * inputWidth: Width of the text input
+         * float: Justify input text content
+         * justifyName: Justify name content
          * fitHeight: Height adapts to text
          */
 
@@ -3741,6 +3803,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let wValue = document.createElement( 'textarea' );
             wValue.value = wValue.iValue = value || "";
             wValue.style.width = "100%";
+            wValue.style.textAlign = options.float ?? "";
             Object.assign( wValue.style, options.style ?? {} );
 
             if( options.disabled ?? false ) wValue.setAttribute("disabled", true);
@@ -3817,8 +3880,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {String} value Button name
          * @param {Function} callback Callback function on click
          * @param {*} options:
-         * icon 
          * disabled: Make the widget disabled [false]
+         * icon: Icon class to show as button value
+         * img: Path to image to show as button value
          */
 
         addButton( name, value, callback, options = {} ) {
@@ -4434,6 +4498,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {Array} values By default values in the array
          * @param {Function} callback Callback function on change
          * @param {*} options:
+         * innerValues (Array): Use dropdown mode and use values as options
          */
 
         addArray( name, values = [], callback, options = {} ) {
@@ -5355,9 +5420,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {*} options:
          * min, max: Min and Max values
          * low, optimum, high: Low and High boundary values, Optimum point in the range
-         * showValue: show current value
-         * editable: allow edit value
-         * callback: function called on change value
+         * showValue: Show current value
+         * editable: Allow edit value
+         * callback: Function called on change value
          */
 
         addProgress( name, value, options = {} ) {
@@ -5611,64 +5676,93 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         /**
          * @method addTabs
-         * @param {Array} tabs Contains objects with {name, icon, callback}
+         * @param {Array} tabs Contains objects with {
+         *      name: Name of the tab (if icon, use as title)
+         *      icon: Icon to be used as the tab icon (optional)
+         *      onCreate: Func to be called at tab creation
+         *      onSelect: Func to be called on select tab (optional)
+         * }
          * @param {*} options 
          * vertical: Use vertical or horizontal tabs (vertical by default)
          * showNames: Show tab name only in horizontal tabs
          */
 
         addTabs( tabs, options = {} ) {
+
             let root = this.current_branch ? this.current_branch.content : this.root;
-            if(!this.current_branch)
+
+            if( !this.current_branch )
+            {
                 console.warn("No current branch!");
+            }
 
-            if(tabs.constructor != Array)
-                throw("Param @tabs must be an Array!");
+            if( tabs.constructor != Array )
+            {
+                throw( "Param @tabs must be an Array!" );
+            }
 
             const vertical = options.vertical ?? true;
-            const showNames = !vertical && (options.showNames ?? false);
+            const showNames = !vertical && ( options.showNames ?? false );
 
-            let container = document.createElement('div');
+            let container = document.createElement( 'div' );
             container.className = "lextabscontainer";
-            if( !vertical ) container.className += " horizontal";
+            if( !vertical )
+            {
+                container.className += " horizontal";
+            }
 
-            let tabContainer = document.createElement("div");
-            tabContainer.className = "tabs";
+            let tabContainer = document.createElement( 'div' );
+            tabContainer.className = 'tabs';
             container.appendChild( tabContainer );
             root.appendChild( container );
 
-            for( var i = 0; i < tabs.length; ++i ) 
+            for( let i = 0; i < tabs.length; ++i )
             {
-                const tab = tabs[i];
-                const selected = i == 0;
-                let tabEl = document.createElement('div');
-                tabEl.className = "lextab " + (i == tabs.length - 1 ? "last" : "") + (selected ? "selected" : "");
-                tabEl.innerHTML = (showNames ? tab.name : "") + "<a class='" + (tab.icon || "fa fa-hashtag") + " " + (showNames ? "withname" : "") + "'></a>";
+                const tab = tabs[ i ];
+                console.assert( tab.name );
+                const isSelected = ( i == 0 );
+                let tabEl = document.createElement( 'div' );
+                tabEl.className = "lextab " + (i == tabs.length - 1 ? "last" : "") + ( isSelected ? "selected" : "" );
+                tabEl.innerHTML = ( showNames ? tab.name : "" ) + "<a class='" + ( tab.icon || "fa fa-hashtag" ) + " " + (showNames ? "withname" : "") + "'></a>";
                 tabEl.title = tab.name;
 
-                let infoContainer = document.createElement("div");
-                infoContainer.id = tab.name.replace(/\s/g, '');
+                let infoContainer = document.createElement( 'div' );
+                infoContainer.id = tab.name.replace( /\s/g, '' );
                 infoContainer.className = "widgets";
-                if(!selected) infoContainer.toggleAttribute('hidden', true);
+
+                if(!isSelected)
+                {
+                    infoContainer.toggleAttribute('hidden', true);
+                }
+
                 container.appendChild( infoContainer );
 
-                tabEl.addEventListener("click", function() {
-                    // change selected tab
-                    tabContainer.querySelectorAll(".lextab").forEach( e => { e.classList.remove("selected"); } );
-                    this.classList.add("selected");
-                    // hide all tabs content
-                    container.querySelectorAll(".widgets").forEach( e => { e.toggleAttribute('hidden', true); } );
-                    // show tab content
-                    const el = container.querySelector("#" + infoContainer.id);
-                    el.toggleAttribute('hidden');
+                tabEl.addEventListener( 'click', e => {
+
+                    // Change selected tab
+                    tabContainer.querySelectorAll( '.lextab' ).forEach( e => { e.classList.remove( 'selected' ); } );
+                    e.target.classList.add( 'selected' );
+                    // Hide all tabs content
+                    container.querySelectorAll(".widgets").forEach( e => { e.toggleAttribute( 'hidden', true ); } );
+                    // Show tab content
+                    const el = container.querySelector( '#' + infoContainer.id );
+                    el.toggleAttribute( 'hidden' );
+
+                    if( tab.onSelect )
+                    {
+                        tab.onSelect( this, infoContainer );
+                    }
                 });
 
-                tabContainer.appendChild(tabEl);
+                tabContainer.appendChild( tabEl );
 
-                // push to tab space
-                this.queue( infoContainer );
-                tab.callback( this, infoContainer );
-                this.clearQueue();
+                if( tab.onCreate )
+                {
+                    // push to tab space
+                    this.queue( infoContainer );
+                    tab.onCreate( this, infoContainer );
+                    this.clearQueue();
+                }
             }
             
             this.addSeparator();
@@ -5684,14 +5778,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     class Branch {
         
         constructor( name, options = {} ) {
+
             this.name = name;
 
-            var root = document.createElement('div');
+            var root = document.createElement( 'div' );
             root.className = "lexbranch";
-            if(options.id)
+            if( options.id )
+            {
                 root.id = options.id;
-            if(options.className)
+            }
+            if( options.className )
+            {
                 root.className += " " + options.className;
+            }
 
             root.style.width = "calc(100% - 7px)";
             root.style.margin = "0 auto";
@@ -5702,65 +5801,69 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.widgets = [];
 
             // create element
-            var title = document.createElement('div');
+            var title = document.createElement( 'div' );
             title.className = "lexbranchtitle";
-            
+
             title.innerHTML = "<a class='fa-solid fa-angle-up switch-branch-button'></a>";
-            if(options.icon) {
+            if( options.icon )
+            {
                 title.innerHTML += "<a class='branchicon " + options.icon + "' style='margin-right: 8px; margin-bottom: -2px;'>";
             }
             title.innerHTML += name || "Branch";
 
-            root.appendChild(title);
+            root.appendChild( title );
 
-            var branch_content = document.createElement('div');
-            branch_content.id = name.replace(/\s/g, '');
-            branch_content.className = "lexbranchcontent";
-            root.appendChild(branch_content);
-            this.content = branch_content;
+            var branchContent = document.createElement( 'div' );
+            branchContent.id = name.replace(/\s/g, '');
+            branchContent.className = "lexbranchcontent";
+            root.appendChild(branchContent);
+            this.content = branchContent;
 
             this._addBranchSeparator();
 
-            if( options.closed ) {
+            if( options.closed )
+            {
                 title.className += " closed";
                 root.className += " closed";
                 this.grabber.setAttribute('hidden', true);
                 doAsync( () => {
-                    this.content.setAttribute('hidden', true);
-                }, 15);
+                    this.content.setAttribute( 'hidden', true );
+                }, 15 );
             }
 
-            this.onclick = function(e){
+            this.onclick = function( e ) {
                 e.stopPropagation();
-                this.classList.toggle('closed');
-                this.parentElement.classList.toggle('closed');
+                this.classList.toggle( 'closed' );
+                this.parentElement.classList.toggle( 'closed' );
 
-                that.content.toggleAttribute('hidden');
-                that.grabber.toggleAttribute('hidden');
+                that.content.toggleAttribute( 'hidden' );
+                that.grabber.toggleAttribute( 'hidden' );
 
-                LX.emit("@on_branch_closed", this.classList.contains("closed"), that.panel);
+                LX.emit( "@on_branch_closed", this.classList.contains("closed"), { target: that.panel } );
             };
 
-            this.oncontextmenu = function(e) {
+            this.oncontextmenu = function( e ) {
 
                 e.preventDefault();
                 e.stopPropagation();
 
                 if( this.parentElement.classList.contains("dialog") )
-                   return;
-                   
+                {
+                    return;
+                }
+
                 addContextMenu("Dock", e, p => {
                     e.preventDefault();
                     // p.add('<i class="fa-regular fa-window-maximize">', {id: 'dock_options0'});
                     // p.add('<i class="fa-regular fa-window-maximize fa-rotate-180">', {id: 'dock_options1'});
                     // p.add('<i class="fa-regular fa-window-maximize fa-rotate-90">', {id: 'dock_options2'});
                     // p.add('<i class="fa-regular fa-window-maximize fa-rotate-270">', {id: 'dock_options3'});
-                    p.add('Floating', that._on_make_floating.bind(that));
+                    p.add( 'Floating', that._on_make_floating.bind( that ) );
                 }, { icon: "fa-regular fa-window-restore" });
             };
 
-            title.addEventListener("click", this.onclick);
-            title.addEventListener("contextmenu", this.oncontextmenu);
+            title.addEventListener( 'click', this.onclick );
+            title.addEventListener( 'contextmenu', this.oncontextmenu );
         }
 
         _on_make_floating() {