lexgui 0.1.34 → 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.34",
+        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;
@@ -472,7 +481,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         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
@@ -526,26 +535,29 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
      * 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);
-      
-        dialog.root.classList.add("fadein");
+        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' );
         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;
     }
 
@@ -564,36 +576,45 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
      * 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 } );
+
+            if( options.input ?? true )
+            {
+                p.addText( null, options.input || value, v => value = v, { placeholder: "..." } );
+            }
 
-                    callback.call(this, value); 
-                    dialog.close() ;
+            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;
     }
@@ -649,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;
         }
 
@@ -666,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 );
             }
         }
     }
@@ -711,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%";
@@ -725,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;
@@ -739,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' );
                     }
                 }
             }
@@ -884,35 +943,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         
         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;
@@ -923,23 +983,27 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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;
 
@@ -961,14 +1025,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
             }
 
-            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 + " )";
@@ -987,20 +1051,20 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     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";
                     if(height2.constructor == Number)
@@ -1014,7 +1078,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.root.appendChild( area1.root );
 
-            if(resize) 
+            if( resize ) 
             {
                 this.root.appendChild(this.split_bar);
             }
@@ -1026,55 +1090,67 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // 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;
         }
 
@@ -1113,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
         */
@@ -1563,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
@@ -1635,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/";
@@ -1659,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();
 
@@ -1686,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 )
                 {
@@ -1719,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
@@ -2445,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();
+
         }
     }
 
@@ -3220,7 +3309,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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;
                 }
@@ -3675,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
          */
 
@@ -3712,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);
@@ -3788,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 = {} ) {
@@ -4294,10 +4387,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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;
         }
 
@@ -4401,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 = {} ) {
@@ -4850,7 +4948,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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();
@@ -4891,7 +4989,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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";
     
@@ -5322,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 = {} ) {
@@ -5578,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();
@@ -5651,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";
@@ -5669,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() {
@@ -6611,11 +6747,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     
                 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 ];
@@ -6647,7 +6783,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     {
                         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 ] );
                     }