lexgui 0.1.35 → 0.1.36

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.35",
+    version: "0.1.36",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -41,43 +41,43 @@ function has( component_name )
 
 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;
@@ -129,22 +129,26 @@ let ASYNC_ENABLED = true;
 
 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; }
@@ -152,6 +156,11 @@ class vec2 {
     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;
@@ -659,16 +668,22 @@ class TreeEvent {
 
 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;
     }
 
@@ -676,13 +691,16 @@ function emit( signal_name, value, target )
     {
         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 );
         }
     }
 }
@@ -722,12 +740,16 @@ class Area {
 
     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%";
@@ -735,10 +757,14 @@ class Area {
         // 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;
@@ -749,27 +775,32 @@ class Area {
         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.left) {
+            if( options.left )
+            {
                 this.root.style.left = options.left;
             }
-            if(options.right) {
+            else if( options.right )
+            {
                 this.root.style.right = options.right;
             }
-            if(options.top) {
+            else if( options.top )
+            {
                 this.root.style.top = options.top;
             }
-            if(options.bottom) {
+            else if( options.bottom )
+            {
                 this.root.style.bottom = options.bottom;
             }
             
@@ -781,97 +812,99 @@ class Area {
                 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' );
                 }
             }
         }
@@ -1154,7 +1187,7 @@ class Area {
         this.propagateEvent("onresize");
     }
 
-        /**
+    /**
     * @method extend
     * Hide 2nd area split
     */
@@ -1603,7 +1636,7 @@ class Tabs {
             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
@@ -1675,22 +1708,26 @@ class Tabs {
 
         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/";
@@ -1699,26 +1736,31 @@ class Tabs {
         }
 
         // 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();
 
@@ -1726,25 +1768,27 @@ class Tabs {
             {
                 // 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 )
             {
@@ -1759,25 +1803,28 @@ class Tabs {
             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
@@ -2423,7 +2470,7 @@ class Widget {
         console.warn("Can't get value of " + this.typeName());
     }
 
-    set( value, skipCallback = false ) {
+    set( value, skipCallback = false, signalName = "" ) {
 
         if( this.onSetValue )
             return this.onSetValue( value, skipCallback );
@@ -2485,8 +2532,7 @@ class Widget {
     }
 
     refresh() {
-        // this.domEl.innerHTML = "";
-        // if( this.options.callback ) this.options.callback();
+        
     }
 }
 
@@ -3788,6 +3834,8 @@ class Panel {
      * 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
      */
 
@@ -3825,6 +3873,7 @@ class Panel {
         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);
@@ -3901,8 +3950,9 @@ class Panel {
      * @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 = {} ) {
@@ -4521,6 +4571,7 @@ class Panel {
      * @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 = {} ) {
@@ -5442,9 +5493,9 @@ class Panel {
      * @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 = {} ) {
@@ -5703,64 +5754,93 @@ class Panel {
 
     /**
      * @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();
@@ -5776,14 +5856,19 @@ LX.Panel = Panel;
 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";
@@ -5794,52 +5879,56 @@ class Branch {
         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;
+            }
                 
             addContextMenu("Dock", e, p => {
                 e.preventDefault();
@@ -5847,12 +5936,12 @@ class Branch {
                 // 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() {
@@ -6867,7 +6956,6 @@ class Curve {
     }
 
     redraw( options = {} ) {
-        console.log("REDRAW!!");
         this.element.redraw( options );
     }
 }