lexgui 0.1.35 → 0.1.37

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.35",
+        version: "0.1.37",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -29,7 +29,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     LX.CURVE_MOVEOUT_DELETE = 1;
 
     function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
-    function round( num, n ) { return +num.toFixed( n ); }
+    function round( number, precision ) { return +(( number ).toFixed( precision ?? 2 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' )); }
     
     function getSupportedDOMName( string )
     {
@@ -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;
@@ -113,6 +113,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         return (S4()+"-"+S4()+"-"+S4());
     }
 
+    LX.guidGenerator = simple_guidGenerator;
+
     // Timer that works everywhere (from litegraph.js)
     if (typeof performance != "undefined") {
         LX.getTime = performance.now.bind(performance);
@@ -133,22 +135,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 +162,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;
@@ -295,11 +306,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             else
             {
                 for( let c of LX.components )
-                    if( LX[c].prototype.onKeyPressed ) 
+                {
+                    if( !LX[c] || !LX[c].prototype.onKeyPressed )
+                    {
+                        continue;
+                    }
+
+                    const instances = LX.CodeEditor.getInstances();
+                    for( let i of instances )
                     {
-                        const instances = LX.CodeEditor.getInstances();
-                        for( let i of instances ) i.onKeyPressed( e );
+                        i.onKeyPressed( e );
                     }
+                }
             }
         });
 
@@ -625,6 +643,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
     };
 
+    LX.IEvent = IEvent;
+
     class TreeEvent {
 
         static NONE                 = 0;
@@ -661,16 +681,22 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.TreeEvent = TreeEvent;
 
-    function emit( signal_name, value, target )
+    function emit( signalName, value, options = {} )
     {
-        const data = LX.signals[ signal_name ];
+        const data = LX.signals[ signalName ];
 
         if( !data )
         return;
 
+        const target = options.target;
+
         if( target )
         {
-            if(target[signal_name]) target[signal_name].call(target, value);
+            if( target[ signalName ])
+            {
+                target[ signalName ].call( target, value );
+            }
+
             return;
         }
 
@@ -678,13 +704,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         {
             if( obj.constructor === Widget )
             {
-                obj.set( value );
+                obj.set( value, options.skipCallback ?? true );
                 
-                if(obj.options && obj.options.callback)
-                    obj.options.callback(value, data);
-            }else
+                if( obj.options && obj.options.callback )
+                {
+                    obj.options.callback( value, data );
+                }
+            }
+            else
             {
-                obj[signal_name].call(obj, value);
+                obj[ signalName ].call( obj, value );
             }
         }
     }
@@ -723,13 +752,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          */
 
         constructor( options = {} ) {
-        
-            var root = document.createElement('div');
+
+            var root = document.createElement( 'div' );
             root.className = "lexarea";
-            if(options.id)
+            if( options.id )
+            {
                 root.id = options.id;
-            if(options.className)
+            }
+            if( options.className )
+            {
                 root.className += " " + options.className;
+            }
     
             var width = options.width || "calc( 100% )";
             var height = options.height || "100%";
@@ -737,10 +770,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // This has default options..
             this.setLimitBox( options.minWidth, options.minHeight, options.maxWidth, options.maxHeight );
     
-            if(width.constructor == Number)
+            if( width.constructor == Number )
+            {
                 width += "px";
-            if(height.constructor == Number)
+            }
+            if( height.constructor == Number )
+            {
                 height += "px";
+            }
     
             root.style.width = width;
             root.style.height = height;
@@ -751,115 +788,136 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.sections = [];
             this.panels = [];
     
-            if(!options.no_append) {
+            if( !options.no_append )
+            {
                 var lexroot = document.getElementById("lexroot");
                 lexroot.appendChild( this.root );
             }
 
             let overlay = options.overlay;
 
-            if(overlay)
+            if( overlay )
             {
                 this.root.classList.add("overlay-" + overlay);
-                
-                if( options.draggable )
+
+                if( options.left )
+                {
+                    this.root.style.left = options.left;
+                }
+                else if( options.right )
+                {
+                    this.root.style.right = options.right;
+                }
+                else if( options.top )
+                {
+                    this.root.style.top = options.top;
+                }
+                else if( options.bottom )
+                {
+                    this.root.style.bottom = options.bottom;
+                }
+
+                const draggable = options.draggable ?? true;
+                if( draggable )
                     makeDraggable( root );
 
                 if( options.resizeable ) {
                     root.classList.add("resizeable");
                 }
 
-                if(options.resize)
+                if( options.resize )
                 {                  
                     this.split_bar = document.createElement("div");
-                    let type = overlay == "left" || overlay == "right" ? "horizontal" : "vertical";
+                    let type = (overlay == "left") || (overlay == "right") ? "horizontal" : "vertical";
                     this.type = overlay;;
                     this.split_bar.className = "lexsplitbar " + type;
-                    if(overlay == "right") {
+
+                    if( overlay == "right" )
+                    {
                         this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.left = -LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                        this.split_bar.style.left = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     } 
-                    else if(overlay == "left") {
+                    else if( overlay == "left" )
+                    {
                         let size = Math.min(document.body.clientWidth - LX.DEFAULT_SPLITBAR_SIZE, this.root.clientWidth);
                         this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.left = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                        this.split_bar.style.left = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     }
-                    else if (overlay == "top") {
+                    else if( overlay == "top" )
+                    {
                         let size = Math.min(document.body.clientHeight - LX.DEFAULT_SPLITBAR_SIZE, this.root.clientHeight);
                         this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.top = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                        this.split_bar.style.top = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     }
-                    else if(overlay == "bottom") {
+                    else if( overlay == "bottom" )
+                    {
                         this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                        this.split_bar.style.top = -LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                        this.split_bar.style.top = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                     }
 
                     this.split_bar.addEventListener("mousedown", inner_mousedown);
-                    this.root.appendChild(this.split_bar);
+                    this.root.appendChild( this.split_bar );
                     
                     var that = this;
-                    var last_pos = [0,0];
+                    var last_pos = [ 0, 0 ];
                     
-                    function inner_mousedown(e)
+                    function inner_mousedown( e )
                     {
                         var doc = that.root.ownerDocument;
-                        doc.addEventListener("mousemove",inner_mousemove);
-                        doc.addEventListener("mouseup",inner_mouseup);
-                        last_pos[0] = e.x;
-                        last_pos[1] = e.y;
+                        doc.addEventListener( 'mousemove', inner_mousemove );
+                        doc.addEventListener( 'mouseup', inner_mouseup );
+                        last_pos[ 0 ] = e.x;
+                        last_pos[ 1 ] = e.y;
                         e.stopPropagation();
                         e.preventDefault();
-                        document.body.classList.add("nocursor");
-                        that.split_bar.classList.add("nocursor");
+                        document.body.classList.add( 'nocursor' );
+                        that.split_bar.classList.add( 'nocursor' );
                     }
 
-                    function inner_mousemove(e)
+                    function inner_mousemove( e )
                     {
-                        switch(that.type) {
+                        switch( that.type ) {
                             case "right":
-                                var dt = (last_pos[0] - e.x);
-                                var size = (that.root.offsetWidth + dt);
+                                var dt = ( last_pos[ 0 ] - e.x );
+                                var size = ( that.root.offsetWidth + dt );
                                 that.root.style.width = size + "px";
                                 break;
-                            
                             case "left":
-                                var dt = (last_pos[0] - e.x);
+                                var dt = ( last_pos[ 0 ] - e.x );
                                 var size = Math.min(document.body.clientWidth - LX.DEFAULT_SPLITBAR_SIZE, (that.root.offsetWidth - dt));
                                 that.root.style.width = size + "px";
                                 that.split_bar.style.left = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
                                 break;
-                            
                             case "top":
-                                var dt = (last_pos[1] - e.y);
+                                var dt = ( last_pos[ 1 ] - e.y );
                                 var size = Math.min(document.body.clientHeight - LX.DEFAULT_SPLITBAR_SIZE, (that.root.offsetHeight - dt));
                                 that.root.style.height = size + "px";
                                 that.split_bar.style.top = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
                                 break;
-
                             case "bottom":
-                                var dt = (last_pos[1] - e.y);
-                                var size = (that.root.offsetHeight + dt);
+                                var dt = ( last_pos[ 1 ] - e.y );
+                                var size = ( that.root.offsetHeight + dt );
                                 that.root.style.height = size + "px";
                                 break;
                         }
                         
-                        last_pos[0] = e.x;
-                        last_pos[1] = e.y;
+                        last_pos[ 0 ] = e.x;
+                        last_pos[ 1 ] = e.y;
                         e.stopPropagation();
                         e.preventDefault();
                         
                         // Resize events   
-                        if(that.onresize)
+                        if( that.onresize )
                             that.onresize( that.root.getBoundingClientRect() );
                     }
 
-                    function inner_mouseup(e)
+                    function inner_mouseup( e )
                     {
                         var doc = that.root.ownerDocument;
-                        doc.removeEventListener("mousemove",inner_mousemove);
-                        doc.removeEventListener("mouseup",inner_mouseup);
-                        document.body.classList.remove("nocursor");
-                        that.split_bar.classList.remove("nocursor");
+                        doc.removeEventListener( 'mousemove', inner_mousemove );
+                        doc.removeEventListener( 'mouseup', inner_mouseup );
+                        document.body.classList.remove( 'nocursor' );
+                        that.split_bar.classList.remove( 'nocursor' );
                     }
                 }
             }
@@ -1142,7 +1200,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.propagateEvent("onresize");
         }
 
-         /**
+        /**
         * @method extend
         * Hide 2nd area split
         */
@@ -1592,7 +1650,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 this.classList.remove("dockingtab");
 
                 // Change tabs instance
-                LX.emit( "@on_tab_docked", el.instance );
+                LX.emit( "@on_tab_docked" );
                 el.instance = that;
 
                 // Show on drop
@@ -1664,22 +1722,26 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             let isSelected = options.selected ?? false;
 
-            if( isSelected ) {
-                this.root.querySelectorAll('span').forEach( s => s.classList.remove('selected'));
-                this.area.root.querySelectorAll('.lextabcontent').forEach( c => c.style.display = 'none');
+            if( isSelected )
+            {
+                this.root.querySelectorAll( 'span' ).forEach( s => s.classList.remove( 'selected' ) );
+                this.area.root.querySelectorAll( '.lextabcontent' ).forEach( c => c.style.display = 'none' );
             }
             
             isSelected = !Object.keys( this.tabs ).length && !this.folding ? true : isSelected;
 
             let contentEl = content.root ? content.root : content;
-            contentEl.style.display = isSelected ? "block" : "none";
-            contentEl.classList.add("lextabcontent");
+            contentEl.originalDisplay = contentEl.style.display;
+            contentEl.style.display = isSelected ? contentEl.originalDisplay : "none";
+            contentEl.classList.add( 'lextabcontent' );
 
             // Process icon
             if( options.icon )
             {
                 if( options.icon.includes( 'fa-' ) ) // It's fontawesome icon...
+                {
                     options.icon = "<i class='" + options.icon + "'></i>";
+                }
                 else // an image..
                 {
                     const rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
@@ -1688,26 +1750,31 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             // Create tab
-            let tabEl = document.createElement('span');
-            tabEl.dataset["name"] = name;
-            tabEl.className = "lexareatab" + (isSelected ? " selected" : "");
-            tabEl.innerHTML = (options.icon ?? "") + name;
-            tabEl.id = name.replace(/\s/g, '') + Tabs.TAB_ID++;
+            let tabEl = document.createElement( 'span' );
+            tabEl.dataset[ "name" ] = name;
+            tabEl.className = "lexareatab" + ( isSelected ? " selected" : "" );
+            tabEl.innerHTML = ( options.icon ?? "" ) + name;
+            tabEl.id = name.replace( /\s/g, '' ) + Tabs.TAB_ID++;
             tabEl.title = options.title;
             tabEl.selected = isSelected ?? false;
             tabEl.fixed = options.fixed;
-            if(tabEl.selected)
-                this.selected = name;
             tabEl.instance = this;
             contentEl.id = tabEl.id + "_content";
 
+            if( tabEl.selected )
+            {
+                this.selected = name;
+            }
+
             LX.addSignal( "@on_tab_docked", tabEl, function() {
-                if( this.parentElement.childNodes.length == 1 ){
-                    this.parentElement.childNodes[0].click(); // single tab!!
+                if( this.parentElement.childNodes.length == 1 )
+                {
+                    this.parentElement.childNodes[ 0 ].click(); // single tab!!
                 } 
             } );
             
             tabEl.addEventListener("click", e => {
+
                 e.preventDefault();
                 e.stopPropagation();
 
@@ -1715,25 +1782,27 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 {
                     // For folding tabs
                     const lastValue = tabEl.selected;
-                    tabEl.parentElement.querySelectorAll('span').forEach( s => s.selected = false );
+                    tabEl.parentElement.querySelectorAll( 'span' ).forEach( s => s.selected = false );
                     tabEl.selected = !lastValue; 
                     // Manage selected
-                    tabEl.parentElement.querySelectorAll('span').forEach( s => s.classList.remove('selected'));
-                    tabEl.classList.toggle('selected', (this.folding && tabEl.selected));
+                    tabEl.parentElement.querySelectorAll( 'span' ).forEach( s => s.classList.remove( 'selected' ));
+                    tabEl.classList.toggle('selected', ( this.folding && tabEl.selected ));
                     // Manage visibility 
-                    tabEl.instance.area.root.querySelectorAll('.lextabcontent').forEach( c => c.style.display = 'none');
-                    contentEl.style.display = "block";
+                    tabEl.instance.area.root.querySelectorAll( '.lextabcontent' ).forEach( c => c.style.display = 'none' );
+                    contentEl.style.display = contentEl.originalDisplay;
                     tabEl.instance.selected = tabEl.dataset.name;
                 }
 
                 if( this.folding )
                 {
                     this.folded = tabEl.selected;
-                    this.area.root.classList.toggle('folded', !this.folded);
+                    this.area.root.classList.toggle( 'folded', !this.folded );
                 }
 
-                if(options.onSelect)
+                if( options.onSelect )
+                {
                     options.onSelect(e, tabEl.dataset.name);
+                }
 
                 if( this.thumb )
                 {
@@ -1748,25 +1817,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
@@ -2390,6 +2462,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         static CONTENT      = 20;
         static CUSTOM       = 21;
         static SEPARATOR    = 22;
+        static KNOB         = 23;
 
         static NO_CONTEXT_TYPES = [
             Widget.BUTTON,
@@ -2398,7 +2471,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             Widget.PROGRESS
         ];
 
-        constructor(name, type, options) {
+        constructor( name, type, options ) {
             this.name = name;
             this.type = type;
             this.options = options;
@@ -2406,10 +2479,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         value() {
 
-            if(this.onGetValue)
+            if( this.onGetValue )
+            {
                 return this.onGetValue();
+            }
 
-            console.warn("Can't get value of " + this.typeName());
+            console.warn( "Can't get value of " + this.typeName() );
         }
 
         set( value, skipCallback = false ) {
@@ -2469,13 +2544,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 case Widget.LIST: return "List";
                 case Widget.TAGS: return "Tags";
                 case Widget.CURVE: return "Curve";
+                case Widget.KNOB: return "Knob";
                 case Widget.CUSTOM: return this.customName;
             }
         }
 
         refresh() {
-            // this.domEl.innerHTML = "";
-            // if( this.options.callback ) this.options.callback();
+
         }
     }
 
@@ -3704,6 +3779,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * placeholder: Add input placeholder
          * trigger: Choose onchange trigger (default, input) [default]
          * inputWidth: Width of the text input
+         * float: Justify input text content
+         * justifyName: Justify name content
          * fitHeight: Height adapts to text
          */
 
@@ -3741,6 +3818,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let wValue = document.createElement( 'textarea' );
             wValue.value = wValue.iValue = value || "";
             wValue.style.width = "100%";
+            wValue.style.textAlign = options.float ?? "";
             Object.assign( wValue.style, options.style ?? {} );
 
             if( options.disabled ?? false ) wValue.setAttribute("disabled", true);
@@ -3817,8 +3895,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {String} value Button name
          * @param {Function} callback Callback function on click
          * @param {*} options:
-         * icon 
          * disabled: Make the widget disabled [false]
+         * icon: Icon class to show as button value
+         * img: Path to image to show as button value
          */
 
         addButton( name, value, callback, options = {} ) {
@@ -4434,6 +4513,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 = {} ) {
@@ -4778,7 +4858,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             flag.className = "checkbox " + (flag.value ? "on" : "");
             flag.id = "checkbox"+simple_guidGenerator();
             flag.innerHTML = "<a class='fa-solid fa-check' style='display: " + (flag.value ? "block" : "none") + "'></a>";
-            
+
             if( options.disabled ) {
                 flag.disabled = true;
                 toggle.className += " disabled";
@@ -4946,6 +5026,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * precision: The number of digits to appear after the decimal point
          * min, max: Min and Max values for the input
          * skipSlider: If there are min and max values, skip the slider
+         * units: Unit as string added to the end of the value
          */
 
         addNumber( name, value, callback, options = {} ) {
@@ -4956,7 +5037,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 return +vecinput.value;
             };
             widget.onSetValue = ( newValue, skipCallback ) => {
-                vecinput.value = newValue;
+                vecinput.value = round( newValue, options.precision );
                 Panel._dispatch_event( vecinput, "change", skipCallback );
             };
 
@@ -4981,27 +5062,48 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             box.className = "numberbox";
 
             let vecinput = document.createElement( 'input' );
+            vecinput.id = "number_" + simple_guidGenerator();
             vecinput.className = "vecinput";
             vecinput.min = options.min ?? -1e24;
             vecinput.max = options.max ?? 1e24;
             vecinput.step = options.step ?? "any";
             vecinput.type = "number";
-            vecinput.id = "number_" + simple_guidGenerator();
 
             if( value.constructor == Number )
             {
                 value = clamp( value, +vecinput.min, +vecinput.max );
-                value = options.precision ? round( value, options.precision ) : value;
+                value = round( value, options.precision );
             }
 
             vecinput.value = vecinput.iValue = value;
             box.appendChild( vecinput );
 
-            let drag_icon = document.createElement( 'a' );
-            drag_icon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
-            box.appendChild( drag_icon );
+            let measureRealWidth = function( value, paddingPlusMargin = 8 ) {
+                var i = document.createElement( "span" );
+                i.className = "lexinputmeasure";
+                i.innerHTML = value;
+                document.body.appendChild( i );
+                var rect = i.getBoundingClientRect();
+                LX.UTILS.deleteElement( i );
+                return rect.width + paddingPlusMargin;
+            }
 
-            if( options.disabled ) {
+            if( options.units )
+            {
+                let unitSpan = document.createElement( 'span' );
+                unitSpan.className = "lexunit";
+                unitSpan.innerText = options.units;
+                unitSpan.style.left = measureRealWidth( vecinput.value ) + "px";
+                vecinput.unitSpan = unitSpan;
+                box.appendChild( unitSpan );
+            }
+
+            let dragIcon = document.createElement( 'a' );
+            dragIcon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
+            box.appendChild( dragIcon );
+
+            if( options.disabled )
+            {
                 vecinput.disabled = true;
             }
 
@@ -5016,7 +5118,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 slider.value = value;
                 slider.addEventListener( "input", function( e ) {
                     let new_value = +this.valueAsNumber;
-                    vecinput.value = ( +new_value ).toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
+                    vecinput.value = round( new_value, options.precision );
                     Panel._dispatch_event( vecinput, "change" );
                 }, false );
                 box.appendChild( slider );
@@ -5032,7 +5134,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 if( e.shiftKey ) mult *= 10;
                 else if( e.altKey ) mult *= 0.1;
                 let new_value = ( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) );
-                this.value = ( +new_value ).toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
+                this.value = round( new_value, options.precision );
                 Panel._dispatch_event(vecinput, "change");
             }, { passive: false });
 
@@ -5045,12 +5147,20 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 let val = e.target.value = clamp( +e.target.valueAsNumber, +vecinput.min, +vecinput.max );
                 val = options.precision ? round( val, options.precision ) : val;
-                // update slider!
+
+                // Update slider!
                 if( box.querySelector( ".lexinputslider" ) )
+                {
                     box.querySelector( ".lexinputslider" ).value = val;
+                }
 
                 vecinput.value = val;
 
+                if( options.units )
+                {
+                    vecinput.unitSpan.style.left = measureRealWidth( vecinput.value ) + "px";
+                }
+
                 // Reset button (default value)
                 if( !skipCallback )
                 {
@@ -5075,7 +5185,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 lastY = e.pageY;
                 document.body.classList.add('nocursor');
                 document.body.classList.add('noevents');
-                drag_icon.classList.remove('hidden');
+                dragIcon.classList.remove('hidden');
                 e.stopImmediatePropagation();
                 e.stopPropagation();
             }
@@ -5087,8 +5197,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if(e.shiftKey) mult *= 10;
                     else if(e.altKey) mult *= 0.1;
                     let new_value = (+vecinput.valueAsNumber + mult * dt);
-                    vecinput.value = (+new_value).toFixed(4).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
-                    Panel._dispatch_event(vecinput, "change");
+                    vecinput.value = (+new_value).toFixed( 4 ).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
+                    Panel._dispatch_event( vecinput, "change" );
                 }
 
                 lastY = e.pageY;
@@ -5102,7 +5212,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 doc.removeEventListener("mouseup",inner_mouseup);
                 document.body.classList.remove('nocursor');
                 document.body.classList.remove('noevents');
-                drag_icon.classList.add('hidden');
+                dragIcon.classList.add('hidden');
             }
             
             container.appendChild(box);
@@ -5139,9 +5249,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             };
             widget.onSetValue = ( newValue, skipCallback ) => {
                 const inputs = element.querySelectorAll( ".vecinput" );
+                if( inputs.length == newValue.length )
+                {
+                    console.error( "Input length does not match vector length." );
+                    return;
+                }
+
                 for( var i = 0; i < inputs.length; ++i ) {
                     let value = newValue[ i ];
-                    inputs[ i ].value = value ?? 0;
+                    inputs[ i ].value = round( value, options.precision ) ?? 0;
                     Panel._dispatch_event( inputs[ i ], "change", skipCallback );
                 }
             };
@@ -5181,14 +5297,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 if( value[ i ].constructor == Number )
                 {
                     value[ i ] = clamp(value[ i ], +vecinput.min, +vecinput.max);
-                    value[ i ] = options.precision ? round(value[ i ], options.precision) : value[ i ];
+                    value[ i ] = round( value[ i ], options.precision );
                 }
 
                 vecinput.value = vecinput.iValue = value[ i ];
 
-                let drag_icon = document.createElement( 'a' );
-                drag_icon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
-                box.appendChild( drag_icon );
+                let dragIcon = document.createElement( 'a' );
+                dragIcon.className = "fa-solid fa-arrows-up-down drag-icon hidden";
+                box.appendChild( dragIcon );
 
                 if( options.disabled ) {
                     vecinput.disabled = true;
@@ -5204,14 +5320,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if( e.shiftKey ) mult = 10;
                     else if( e.altKey ) mult = 0.1;
 
-                    if( lock_icon.locked )
+                    if( locker.locked )
                     {
-                        for( let v of element.querySelectorAll(".vecinput") ) {
-                            v.value = ( +v.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) ).toPrecision( 5 );
+                        for( let v of element.querySelectorAll(".vecinput") )
+                        {
+                            v.value = round( +v.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ), options.precision );
                             Panel._dispatch_event(v, "change");
                         }
-                    } else {
-                        this.value = ( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) ).toPrecision( 5 );
+                    }
+                    else
+                    {
+                        this.value = round( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ), options.precision );
                         Panel._dispatch_event( vecinput, "change" );
                     }
                 }, { passive: false } );
@@ -5224,7 +5343,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     const skipCallback = e.detail;
 
                     let val = e.target.value = clamp( e.target.value, +vecinput.min, +vecinput.max );
-                    val = options.precision ? round( val, options.precision ) : val;
+                    val = round( val, options.precision );
 
                     // Reset button (default value)
                     if( !skipCallback )
@@ -5233,7 +5352,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         if( btn ) btn.style.display = val != vecinput.iValue ? "block": "none";
                     }
 
-                    if( lock_icon.locked )
+                    if( locker.locked )
                     {
                         for( let v of element.querySelectorAll( ".vecinput" ) ) {
                             v.value = val;
@@ -5261,7 +5380,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     lastY = e.pageY;
                     document.body.classList.add('nocursor');
                     document.body.classList.add('noevents');
-                    drag_icon.classList.remove('hidden');
+                    dragIcon.classList.remove('hidden');
                     e.stopImmediatePropagation();
                     e.stopPropagation();
                 }
@@ -5273,14 +5392,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         if(e.shiftKey) mult = 10;
                         else if(e.altKey) mult = 0.1;
 
-                        if( lock_icon.locked )
+                        if( locker.locked )
                         {
                             for( let v of element.querySelectorAll(".vecinput") ) {
-                                v.value = (+v.valueAsNumber + mult * dt).toPrecision(5);
+                                v.value = round( +v.valueAsNumber + mult * dt, options.precision );
                                 Panel._dispatch_event(v, "change");
                             }
                         } else {
-                            vecinput.value = (+vecinput.valueAsNumber + mult * dt).toPrecision(5);
+                            vecinput.value = round( +vecinput.valueAsNumber + mult * dt, options.precision );
                             Panel._dispatch_event(vecinput, "change");
                         }
                     }
@@ -5290,23 +5409,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     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');
                     document.body.classList.remove('noevents');
-                    drag_icon.classList.add('hidden');
+                    dragIcon.classList.add('hidden');
                 }
-                
-                box.appendChild(vecinput);
-                container.appendChild(box);
+
+                box.appendChild( vecinput );
+                container.appendChild( box );
             }
 
-            let lock_icon = document.createElement('a');
-            lock_icon.className = "fa-solid fa-lock-open lexicon";
-            container.appendChild(lock_icon);
-            lock_icon.addEventListener("click", function(e) {
+            let locker = document.createElement('a');
+            locker.className = "fa-solid fa-lock-open lexicon";
+            container.appendChild(locker);
+            locker.addEventListener("click", function(e) {
                 this.locked = !this.locked;
                 if(this.locked){
                     this.classList.add("fa-lock");
@@ -5317,7 +5436,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
             }, false);
             
-            element.appendChild(container);
+            element.appendChild( container );
 
             return widget;
         }
@@ -5355,9 +5474,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {*} options:
          * min, max: Min and Max values
          * low, optimum, high: Low and High boundary values, Optimum point in the range
-         * showValue: show current value
-         * editable: allow edit value
-         * callback: function called on change value
+         * showValue: Show current value
+         * editable: Allow edit value
+         * callback: Function called on change value
          */
 
         addProgress( name, value, options = {} ) {
@@ -5611,64 +5730,93 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         /**
          * @method addTabs
-         * @param {Array} tabs Contains objects with {name, icon, callback}
+         * @param {Array} tabs Contains objects with {
+         *      name: Name of the tab (if icon, use as title)
+         *      icon: Icon to be used as the tab icon (optional)
+         *      onCreate: Func to be called at tab creation
+         *      onSelect: Func to be called on select tab (optional)
+         * }
          * @param {*} options 
          * vertical: Use vertical or horizontal tabs (vertical by default)
          * showNames: Show tab name only in horizontal tabs
          */
 
         addTabs( tabs, options = {} ) {
+
             let root = this.current_branch ? this.current_branch.content : this.root;
-            if(!this.current_branch)
+
+            if( !this.current_branch )
+            {
                 console.warn("No current branch!");
+            }
 
-            if(tabs.constructor != Array)
-                throw("Param @tabs must be an Array!");
+            if( tabs.constructor != Array )
+            {
+                throw( "Param @tabs must be an Array!" );
+            }
 
             const vertical = options.vertical ?? true;
-            const showNames = !vertical && (options.showNames ?? false);
+            const showNames = !vertical && ( options.showNames ?? false );
 
-            let container = document.createElement('div');
+            let container = document.createElement( 'div' );
             container.className = "lextabscontainer";
-            if( !vertical ) container.className += " horizontal";
+            if( !vertical )
+            {
+                container.className += " horizontal";
+            }
 
-            let tabContainer = document.createElement("div");
-            tabContainer.className = "tabs";
+            let tabContainer = document.createElement( 'div' );
+            tabContainer.className = 'tabs';
             container.appendChild( tabContainer );
             root.appendChild( container );
 
-            for( var i = 0; i < tabs.length; ++i ) 
+            for( let i = 0; i < tabs.length; ++i )
             {
-                const tab = tabs[i];
-                const selected = i == 0;
-                let tabEl = document.createElement('div');
-                tabEl.className = "lextab " + (i == tabs.length - 1 ? "last" : "") + (selected ? "selected" : "");
-                tabEl.innerHTML = (showNames ? tab.name : "") + "<a class='" + (tab.icon || "fa fa-hashtag") + " " + (showNames ? "withname" : "") + "'></a>";
+                const tab = tabs[ i ];
+                console.assert( tab.name );
+                const isSelected = ( i == 0 );
+                let tabEl = document.createElement( 'div' );
+                tabEl.className = "lextab " + (i == tabs.length - 1 ? "last" : "") + ( isSelected ? "selected" : "" );
+                tabEl.innerHTML = ( showNames ? tab.name : "" ) + "<a class='" + ( tab.icon || "fa fa-hashtag" ) + " " + (showNames ? "withname" : "") + "'></a>";
                 tabEl.title = tab.name;
 
-                let infoContainer = document.createElement("div");
-                infoContainer.id = tab.name.replace(/\s/g, '');
+                let infoContainer = document.createElement( 'div' );
+                infoContainer.id = tab.name.replace( /\s/g, '' );
                 infoContainer.className = "widgets";
-                if(!selected) infoContainer.toggleAttribute('hidden', true);
+
+                if(!isSelected)
+                {
+                    infoContainer.toggleAttribute('hidden', true);
+                }
+
                 container.appendChild( infoContainer );
 
-                tabEl.addEventListener("click", function() {
-                    // change selected tab
-                    tabContainer.querySelectorAll(".lextab").forEach( e => { e.classList.remove("selected"); } );
-                    this.classList.add("selected");
-                    // hide all tabs content
-                    container.querySelectorAll(".widgets").forEach( e => { e.toggleAttribute('hidden', true); } );
-                    // show tab content
-                    const el = container.querySelector("#" + infoContainer.id);
-                    el.toggleAttribute('hidden');
+                tabEl.addEventListener( 'click', e => {
+
+                    // Change selected tab
+                    tabContainer.querySelectorAll( '.lextab' ).forEach( e => { e.classList.remove( 'selected' ); } );
+                    e.target.classList.add( 'selected' );
+                    // Hide all tabs content
+                    container.querySelectorAll(".widgets").forEach( e => { e.toggleAttribute( 'hidden', true ); } );
+                    // Show tab content
+                    const el = container.querySelector( '#' + infoContainer.id );
+                    el.toggleAttribute( 'hidden' );
+
+                    if( tab.onSelect )
+                    {
+                        tab.onSelect( this, infoContainer );
+                    }
                 });
 
-                tabContainer.appendChild(tabEl);
+                tabContainer.appendChild( tabEl );
 
-                // push to tab space
-                this.queue( infoContainer );
-                tab.callback( this, infoContainer );
-                this.clearQueue();
+                if( tab.onCreate )
+                {
+                    // push to tab space
+                    this.queue( infoContainer );
+                    tab.onCreate( this, infoContainer );
+                    this.clearQueue();
+                }
             }
             
             this.addSeparator();
@@ -5684,14 +5832,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     class Branch {
         
         constructor( name, options = {} ) {
+
             this.name = name;
 
-            var root = document.createElement('div');
+            var root = document.createElement( 'div' );
             root.className = "lexbranch";
-            if(options.id)
+            if( options.id )
+            {
                 root.id = options.id;
-            if(options.className)
+            }
+            if( options.className )
+            {
                 root.className += " " + options.className;
+            }
 
             root.style.width = "calc(100% - 7px)";
             root.style.margin = "0 auto";
@@ -5702,65 +5855,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() {
@@ -6199,7 +6356,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.items = [];
             this.colors = {};
 
-            if(title) {
+            if( title )
+            {
                 const item = {};
                 item[ title ] = [];
                 item[ 'className' ] = "cmtitle";
@@ -6214,7 +6372,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             
             if(!useAbsolute)
             {   
-                let width = rect.width + 36; // this has paddings
+                let width = rect.width;
                 if(window.innerWidth - rect.right < 0)
                     div.style.left = (window.innerWidth - width - margin) + "px";
 
@@ -6255,7 +6413,6 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             contextmenu.style.marginTop =  3.5 - c.offsetHeight + "px";
 
             // Set final width
-            // contextmenu.style.width = contextmenu.offsetWidth + "px";
             this._adjust_position( contextmenu, 6, true );
         }
 
@@ -6329,7 +6486,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
 
         onCreate() {
-            this._adjust_position( this.root, 6 );
+            doAsync( () => this._adjust_position( this.root, 6 ) );
         }
 
         add( path, options = {} ) {
@@ -6434,10 +6591,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     function addContextMenu( title, event, callback, options )
     {
         var menu = new ContextMenu( event, title, options );
-        LX.root.appendChild(menu.root);
+        LX.root.appendChild( menu.root );
 
-        if(callback)
+        if( callback )
+        {
             callback( menu );
+        }
 
         menu.onCreate();