lexgui 0.1.34 → 0.1.36

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.34",
+    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;
@@ -469,7 +478,7 @@ function init( options = { } )
     var link = document.createElement( 'link' );
     link.rel = 'stylesheet';
     link.type = 'text/css';
-    link.href = 'https://use.fontawesome.com/releases/v6.5.1/css/all.css';
+    link.href = 'https://use.fontawesome.com/releases/v6.6.0/css/all.css';
     head.appendChild( link );
 
     // Global vars
@@ -523,26 +532,29 @@ LX.message = message;
  * size: (Array) [width, height]
  */
 
-function popup(text, title, options = {})
+function popup( text, title, options = {} )
 {
-    if(!text)
+    if( !text )
+    {
         throw("No message to show");
+    }
 
-    options.size = options.size ?? ["auto", "auto"];
+    options.size = options.size ?? [ "auto", "auto" ];
     options.class = "lexpopup";
-    const time = options.timeout || 3000; 
 
-    const dialog = new Dialog(title, p => {
-        p.addTextArea(null, text, null, { disabled: true, fitHeight: true });
-    }, options);
+    const time = options.timeout || 3000; 
+    const dialog = new Dialog( title, p => {
+        p.addTextArea( null, text, null, { disabled: true, fitHeight: true } );
+    }, options );
     
-    dialog.root.classList.add("fadein");
+    dialog.root.classList.add( 'fadein' );
     setTimeout(() => {
-        dialog.root.classList.remove("fadein");
-        dialog.root.classList.add("fadeout");   
-    }, time - 1000);
+        dialog.root.classList.remove( 'fadein' );
+        dialog.root.classList.add( 'fadeout' );
+    }, time - 1000 );
     
-    setTimeout(dialog.close, time);
+    setTimeout( dialog.close, time );
+
     return dialog;
 }
 
@@ -561,36 +573,45 @@ LX.popup = popup;
  * required: Input has to be filled [true]. Default: false
  */
 
-function prompt(text, title, callback, options = {})
+function prompt( text, title, callback, options = {} )
 {
     options.modal = true;
 
     let value = "";
 
-    const dialog = new Dialog(title, p => {
-        p.addTextArea(null, text, null, { disabled: true });
-        if(options.input !== false)
-            p.addText(null, options.input || value, (v) => value = v, {placeholder: "..."} );
-        p.sameLine(2);
-        p.addButton(null, options.accept || "OK", () => { 
-            if(options.required && value === '') {
+    const dialog = new Dialog( title, p => {
 
-                text += text.includes("You must fill the input text.") ? "": "\nYou must fill the input text.";
-                dialog.close() ;
-                prompt(text, title, callback, options);
-            }else {
+        p.addTextArea( null, text, null, { disabled: true, fitHeight: true } );
 
-                callback.call(this, value); 
-                dialog.close() ;
+        if( options.input ?? true )
+        {
+            p.addText( null, options.input || value, v => value = v, { placeholder: "..." } );
+        }
+
+        p.sameLine( 2 );
+
+        p.addButton( null, options.accept || "OK", () => {
+            if( options.required && value === '' )
+            {
+                text += text.includes("You must fill the input text.") ? "": "\nYou must fill the input text.";
+                dialog.close();
+                prompt( text, title, callback, options );
+            }else
+            {
+                if( callback ) callback.call( this, value );
+                dialog.close();
             }
-            
         }, { buttonClass: "accept" });
+
         p.addButton(null, "Cancel", () => {if(options.on_cancel) options.on_cancel(); dialog.close();} );
-    }, options);
+
+    }, options );
 
     // Focus text prompt
-    if(options.input !== false)
-        dialog.root.querySelector('input').focus();
+    if( options.input ?? true )
+    {
+        dialog.root.querySelector( 'input' ).focus();
+    }
     
     return dialog;
 }
@@ -647,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;
     }
 
@@ -664,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 );
         }
     }
 }
@@ -710,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%";
@@ -723,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;
@@ -737,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;
             }
             
@@ -769,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' );
                 }
             }
         }
@@ -896,35 +941,36 @@ class Area {
     
     split( options = {} ) {
 
-        if(this.sections.length)
+        if( this.sections.length )
         {
             // In case Area has been split before, get 2nd section as root
-            this.offset = this.root.childNodes[0].offsetHeight; // store offset to take into account when resizing
-            this._root = this.sections[0].root;
-            this.root = this.sections[1].root;
+            this.offset = this.root.childNodes[ 0 ].offsetHeight; // store offset to take into account when resizing
+            this._root = this.sections[ 0 ].root;
+            this.root = this.sections[ 1 ].root;
         }
 
         var type = options.type || "horizontal";
-        var sizes = options.sizes || ["50%", "50%"];
+        var sizes = options.sizes || [ "50%", "50%" ];
         var infer_height = false;
-        var auto = options.sizes === 'auto';
+        var auto = (options.sizes === 'auto');
 
-        if( !sizes[1] )
+        if( !sizes[ 1 ] )
         {
-            let size = sizes[0];
+            let size = sizes[ 0 ];
             let margin = options.top ? options.top : 0;
-            if(size.constructor == Number) {
+            if( size.constructor == Number )
+            {
                 size += margin;
                 size += "px";
             }
             
-            sizes[1] = "calc( 100% - " + size + " )";
+            sizes[ 1 ] = "calc( 100% - " + size + " )";
             infer_height = true;
         }
 
         // Create areas
-        var area1 = new Area({ no_append: true, className: "split" + (options.menubar || options.sidebar ? "" : " origin") });
-        var area2 = new Area({ no_append: true, className: "split"});
+        var area1 = new Area( { no_append: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
+        var area2 = new Area( { no_append: true, className: "split"} );
 
         area1.parentArea = this;
         area2.parentArea = this;
@@ -935,23 +981,27 @@ class Area {
         var data = "0px";
         this.offset = 0;
 
-        if(resize)
+        if( resize )
         {
             this.resize = resize;
-            this.split_bar = document.createElement("div");
+            this.split_bar = document.createElement( "div" );
             this.split_bar.className = "lexsplitbar " + type;
 
-            if(type == "horizontal") {
+            if( type == "horizontal" )
+            {
                 this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
             }
-            else {
+            else
+            {
                 this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
             }
-            this.split_bar.addEventListener("mousedown", inner_mousedown);
-            data = LX.DEFAULT_SPLITBAR_SIZE/2 + "px"; // updates
+
+            this.split_bar.addEventListener( 'mousedown', inner_mousedown );
+
+            data = ( LX.DEFAULT_SPLITBAR_SIZE / 2 ) + "px"; // updates
 
             // Being minimizable means it's also resizeable!
-            if(minimizable)
+            if( minimizable )
             {
                 this.split_extended = false;
 
@@ -973,14 +1023,14 @@ class Area {
             }
         }
 
-        if(type == "horizontal")
+        if( type == "horizontal" )
         {
-            var width1 = sizes[0],
-                width2 = sizes[1];
+            var width1 = sizes[ 0 ],
+                width2 = sizes[ 1 ];
 
-            if(width1.constructor == Number)
+            if( width1.constructor == Number )
                 width1 += "px";
-            if(width2.constructor == Number)
+            if( width2.constructor == Number )
                 width2 += "px";
 
             area1.root.style.width = "calc( " + width1 + " - " + data + " )";
@@ -999,19 +1049,19 @@ class Area {
                 area1.root.style.height = "auto";
 
                 // Listen resize event on first area
-                const resizeObserver = new ResizeObserver((entries) => {
+                const resizeObserver = new ResizeObserver( entries => {
                     for (const entry of entries) {
                         const bb = entry.contentRect;
                         area2.root.style.height = "calc(100% - " + ( bb.height + 4) + "px )";
                     }
                 });
 
-                resizeObserver.observe(area1.root);
+                resizeObserver.observe( area1.root );
             }
             else
             {
-                var height1 = sizes[0],
-                    height2 = sizes[1];
+                var height1 = sizes[ 0 ],
+                    height2 = sizes[ 1 ];
 
                 if(height1.constructor == Number)
                     height1 += "px";
@@ -1026,7 +1076,7 @@ class Area {
 
         this.root.appendChild( area1.root );
 
-        if(resize) 
+        if( resize )
         {
             this.root.appendChild(this.split_bar);
         }
@@ -1038,55 +1088,67 @@ class Area {
         // Update sizes
         this._update();
 
-        if(!resize)
+        if( !resize )
         {
             return this.sections;
         }
 
-        // from litegui.js @jagenjo
-
         var that = this;
-        var last_pos = [0,0];
-        function inner_mousedown(e)
+        var last_pos = [ 0, 0 ];
+
+        function inner_mousedown( e )
         {
             var doc = that.root.ownerDocument;
-            doc.addEventListener("mousemove",inner_mousemove);
-            doc.addEventListener("mouseup",inner_mouseup);
+            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 )
         {
-            if(that.type == "horizontal") {
-                that._moveSplit(last_pos[0] - e.x);
+            if(that.type == "horizontal")
+            {
+                that._moveSplit( last_pos[ 0 ] - e.x );
             }
-            else {
-                that._moveSplit(last_pos[1] - e.y);
+            else
+            {
+                that._moveSplit( last_pos[ 1 ] - e.y );
             }
             
-            last_pos[0] = e.x;
-            last_pos[1] = e.y;
+            last_pos[ 0 ] = e.x;
+            last_pos[ 1 ] = e.y;
+
+            const widgets = that.root.querySelectorAll( ".lexwidget" );
+
+            // Send area resize to every widget in the area
+            for( let widget of widgets )
+            {
+                const jsInstance = widget.jsIinstance;
+
+                if( jsInstance.onresize )
+                {
+                    jsInstance.onresize();
+                }
+            }
+
             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("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' );
         }
 
-        // Is this necessary?..
-        // setTimeout( () => this._moveSplit(0), 100);
-
         return this.sections;
     }
 
@@ -1125,7 +1187,7 @@ class Area {
         this.propagateEvent("onresize");
     }
 
-        /**
+    /**
     * @method extend
     * Hide 2nd area split
     */
@@ -1574,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
@@ -1646,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/";
@@ -1670,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();
 
@@ -1697,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 )
             {
@@ -1730,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
@@ -2394,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 );
@@ -2456,8 +2532,7 @@ class Widget {
     }
 
     refresh() {
-        // this.domEl.innerHTML = "";
-        // if( this.options.callback ) this.options.callback();
+        
     }
 }
 
@@ -3303,7 +3378,7 @@ class Panel {
 
         if( type != Widget.TITLE )
         {
-            element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE || ( type == Widget.BUTTON && !name ) ? 10 : 20) + "px)";
+            element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE ? 10 : 20) + "px)";
             if( options.width ) {
                 element.style.width = element.style.minWidth = options.width;
             }
@@ -3355,6 +3430,7 @@ class Panel {
         }
 
         widget.domEl = element;
+        element.jsIinstance = widget;
 
         const insert_widget = el => {
             if(options.container)
@@ -3758,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
      */
 
@@ -3795,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);
@@ -3871,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 = {} ) {
@@ -4380,10 +4460,14 @@ class Panel {
         element.appendChild( container );
 
         // Resize
-        curveInstance.canvas.width = container.offsetWidth;
-        curveInstance.redraw();
         widget.onresize = curveInstance.redraw.bind( curveInstance );
         widget.curveInstance = curveInstance;
+
+        doAsync(() => {
+            curveInstance.canvas.width = container.offsetWidth;
+            curveInstance.redraw();
+        });
+
         return widget;
     }
 
@@ -4487,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 = {} ) {
@@ -4936,7 +5021,7 @@ class Panel {
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
         let color = document.createElement( 'input' );
-        color.style.width = "calc(30% - 6px)";
+        color.style.width = "32px";
         color.type = 'color';
         color.className = "colorinput";
         color.id = "color" + simple_guidGenerator();
@@ -4977,7 +5062,7 @@ class Panel {
             change_from_input = true;
             widget.set( v );
             change_from_input = false;
-        }, { width: "calc(70% - 4px)" });
+        }, { width: "calc( 100% - 32px )"});
         
         text_widget.domEl.style.marginLeft = "4px";
 
@@ -5408,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 = {} ) {
@@ -5669,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();
@@ -5742,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";
@@ -5760,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();
@@ -5813,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() {
@@ -6702,11 +6825,11 @@ class Curve {
 
             selected = computeSelected( mousex, canvas.height - mousey );
 
-            if(selected == -1 && element.allow_add_values) {
-                var v = unconvert([ mousex, canvas.height-mousey ]);
-                element.value.push(v);
+            if( e.button == LX.MOUSE_LEFT_CLICK && selected == -1 && element.allow_add_values ) {
+                var v = unconvert([ mousex, canvas.height - mousey ]);
+                element.value.push( v );
                 sortValues();
-                selected = element.value.indexOf(v);
+                selected = element.value.indexOf( v );
             }
 
             last_mouse = [ mousex, mousey ];
@@ -6738,7 +6861,7 @@ class Curve {
                 {
                     const d = [ currentMouseDiff[ 0 ] - mousex, currentMouseDiff[ 1 ] - mousey ];
                     let value = element.value[ selected ];
-                    value[ 0 ] = ( d[ 0 ] == 0.0 ) ? value[ 0 ] : ( d[ 0 ] < 0.0 ? element.xrange[ 1 ] : element.xrange[ 0 ] );
+                    value[ 0 ] = ( d[ 0 ] == 0.0 ) ? value[ 0 ] : ( d[ 0 ] < 0.0 ? element.xrange[ 0 ] : element.xrange[ 1 ] );
                     value[ 1 ] = ( d[ 1 ] == 0.0 ) ? value[ 1 ] : ( d[ 1 ] < 0.0 ? element.yrange[ 1 ] : element.yrange[ 0 ] );
                 }