lexgui 0.1.35 → 0.1.37

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.35",
+    version: "0.1.37",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -25,7 +25,10 @@ LX.CURVE_MOVEOUT_CLAMP = 0;
 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' )); }
+
+LX.clamp = clamp;
+LX.round = round;
 
 function getSupportedDOMName( string )
 {
@@ -41,43 +44,43 @@ function has( component_name )
 
 LX.has = has;
 
-function getExtension(s)
+function getExtension( s )
 { 
     return s.includes('.') ? s.split('.').pop() : null;
 }
 
 LX.getExtension = getExtension;
 
-function deepCopy(o)
+function deepCopy( o )
 { 
     return JSON.parse(JSON.stringify(o)) 
 }
 
 LX.deepCopy = deepCopy;
 
-function setThemeColor(color_name, color)
+function setThemeColor( colorName, color )
 {
-    var r = document.querySelector(':root');
-    r.style.setProperty("--" + color_name, color);
+    var r = document.querySelector( ':root' );
+    r.style.setProperty( '--' + colorName, color );
 }
 
 LX.setThemeColor = setThemeColor;
 
-function getThemeColor(color_name)
+function getThemeColor( colorName )
 {
-    var r = getComputedStyle(document.querySelector(':root'));
-    return r.getPropertyValue("--" + color_name);
+    var r = getComputedStyle( document.querySelector( ':root' ) );
+    return r.getPropertyValue( '--' + colorName );
 }
 
 LX.getThemeColor = getThemeColor;
 
-function getBase64Image(img) {
-    var canvas = document.createElement("canvas");
+function getBase64Image( img ) {
+    var canvas = document.createElement( 'canvas' );
     canvas.width = img.width;
     canvas.height = img.height;
-    var ctx = canvas.getContext("2d");
-    ctx.drawImage(img, 0, 0);
-    return canvas.toDataURL("image/png");
+    var ctx = canvas.getContext( '2d' );
+    ctx.drawImage( img, 0, 0 );
+    return canvas.toDataURL( 'image/png' );
 }
 
 LX.getBase64Image = getBase64Image;
@@ -109,6 +112,8 @@ function simple_guidGenerator() {
     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);
@@ -129,22 +134,26 @@ let ASYNC_ENABLED = true;
 
 function doAsync( fn, ms ) {
     if( ASYNC_ENABLED )
+    {
         setTimeout( fn, ms ?? 0 );
+    }
     else
+    {
         fn();
+    }
 }
 
 // Math classes
 
 class vec2 {
 
-    constructor(x, y) {
+    constructor( x, y ) {
         this.x = x ?? 0;
-        this.y = y ?? (x ?? 0);
+        this.y = y ?? ( x ?? 0 );
     }
 
-    get xy() { return [ this.x, this.y]; }
-    get yx() { return [ this.y, this.x]; }
+    get xy() { return [ this.x, this.y ]; }
+    get yx() { return [ this.y, this.x ]; }
 
     set ( x, y ) { this.x = x; this.y = y; }
     add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
@@ -152,6 +161,11 @@ class vec2 {
     mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x * v.x, this.y * v.y ); return v0; }
     div ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x / v.x, this.y / v.y ); return v0; }
     abs ( v0 = new vec2() ) { v0.set( Math.abs( this.x ), Math.abs( this.y ) ); return v0; }
+    dot ( v ) { return this.x * v.x + this.y * v.y; }
+    len2 () { return this.dot( this ) }
+    len () { return Math.sqrt( this.len2() ); }
+    nrm ( v0 = new vec2() ) { v0.set( this.x, this.y ); return v0.mul( 1.0 / this.len(), v0 ); }
+    dst ( v ) { return v.sub( this ).len(); }
 };
 
 LX.vec2 = vec2;
@@ -291,11 +305,18 @@ function create_global_searchbar( root ) {
         else
         {
             for( let c of LX.components )
-                if( LX[c].prototype.onKeyPressed ) 
+            {
+                if( !LX[c] || !LX[c].prototype.onKeyPressed )
                 {
-                    const instances = LX.CodeEditor.getInstances();
-                    for( let i of instances ) i.onKeyPressed( e );
+                    continue;
                 }
+
+                const instances = LX.CodeEditor.getInstances();
+                for( let i of instances )
+                {
+                    i.onKeyPressed( e );
+                }
+            }
         }
     });
 
@@ -622,6 +643,8 @@ class IEvent {
     }
 };
 
+LX.IEvent = IEvent;
+
 class TreeEvent {
 
     static NONE                 = 0;
@@ -659,16 +682,22 @@ class TreeEvent {
 
 LX.TreeEvent = TreeEvent;
 
-function emit( signal_name, value, target )
+function emit( signalName, value, options = {} )
 {
-    const data = LX.signals[ signal_name ];
+    const data = LX.signals[ signalName ];
 
     if( !data )
     return;
 
+    const target = options.target;
+
     if( target )
     {
-        if(target[signal_name]) target[signal_name].call(target, value);
+        if( target[ signalName ])
+        {
+            target[ signalName ].call( target, value );
+        }
+
         return;
     }
 
@@ -676,13 +705,16 @@ function emit( signal_name, value, target )
     {
         if( obj.constructor === Widget )
         {
-            obj.set( value );
+            obj.set( value, options.skipCallback ?? true );
             
-            if(obj.options && obj.options.callback)
-                obj.options.callback(value, data);
-        }else
+            if( obj.options && obj.options.callback )
+            {
+                obj.options.callback( value, data );
+            }
+        }
+        else
         {
-            obj[signal_name].call(obj, value);
+            obj[ signalName ].call( obj, value );
         }
     }
 }
@@ -722,12 +754,16 @@ class Area {
 
     constructor( options = {} ) {
     
-        var root = document.createElement('div');
+        var root = document.createElement( 'div' );
         root.className = "lexarea";
-        if(options.id)
+        if( options.id )
+        {
             root.id = options.id;
-        if(options.className)
+        }
+        if( options.className )
+        {
             root.className += " " + options.className;
+        }
 
         var width = options.width || "calc( 100% )";
         var height = options.height || "100%";
@@ -735,10 +771,14 @@ class Area {
         // This has default options..
         this.setLimitBox( options.minWidth, options.minHeight, options.maxWidth, options.maxHeight );
 
-        if(width.constructor == Number)
+        if( width.constructor == Number )
+        {
             width += "px";
-        if(height.constructor == Number)
+        }
+        if( height.constructor == Number )
+        {
             height += "px";
+        }
 
         root.style.width = width;
         root.style.height = height;
@@ -749,27 +789,32 @@ class Area {
         this.sections = [];
         this.panels = [];
 
-        if(!options.no_append) {
+        if( !options.no_append )
+        {
             var lexroot = document.getElementById("lexroot");
             lexroot.appendChild( this.root );
         }
 
         let overlay = options.overlay;
 
-        if(overlay)
+        if( overlay )
         {
             this.root.classList.add("overlay-" + overlay);
 
-            if(options.left) {
+            if( options.left )
+            {
                 this.root.style.left = options.left;
             }
-            if(options.right) {
+            else if( options.right )
+            {
                 this.root.style.right = options.right;
             }
-            if(options.top) {
+            else if( options.top )
+            {
                 this.root.style.top = options.top;
             }
-            if(options.bottom) {
+            else if( options.bottom )
+            {
                 this.root.style.bottom = options.bottom;
             }
             
@@ -781,97 +826,99 @@ class Area {
                 root.classList.add("resizeable");
             }
             
-            if(options.resize)
+            if( options.resize )
             {                  
                 this.split_bar = document.createElement("div");
-                let type = overlay == "left" || overlay == "right" ? "horizontal" : "vertical";
+                let type = (overlay == "left") || (overlay == "right") ? "horizontal" : "vertical";
                 this.type = overlay;;
                 this.split_bar.className = "lexsplitbar " + type;
-                if(overlay == "right") {
+
+                if( overlay == "right" )
+                {
                     this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                    this.split_bar.style.left = -LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                    this.split_bar.style.left = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                 } 
-                else if(overlay == "left") {
+                else if( overlay == "left" )
+                {
                     let size = Math.min(document.body.clientWidth - LX.DEFAULT_SPLITBAR_SIZE, this.root.clientWidth);
                     this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                    this.split_bar.style.left = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                    this.split_bar.style.left = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                 }
-                else if (overlay == "top") {
+                else if( overlay == "top" )
+                {
                     let size = Math.min(document.body.clientHeight - LX.DEFAULT_SPLITBAR_SIZE, this.root.clientHeight);
                     this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                    this.split_bar.style.top = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                    this.split_bar.style.top = size + (LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                 }
-                else if(overlay == "bottom") {
+                else if( overlay == "bottom" )
+                {
                     this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
-                    this.split_bar.style.top = -LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
+                    this.split_bar.style.top = -(LX.DEFAULT_SPLITBAR_SIZE / 2.0) + "px";
                 }
 
                 this.split_bar.addEventListener("mousedown", inner_mousedown);
-                this.root.appendChild(this.split_bar);
+                this.root.appendChild( this.split_bar );
                 
                 var that = this;
-                var last_pos = [0,0];
+                var last_pos = [ 0, 0 ];
                 
-                function inner_mousedown(e)
+                function inner_mousedown( e )
                 {
                     var doc = that.root.ownerDocument;
-                    doc.addEventListener("mousemove",inner_mousemove);
-                    doc.addEventListener("mouseup",inner_mouseup);
-                    last_pos[0] = e.x;
-                    last_pos[1] = e.y;
+                    doc.addEventListener( 'mousemove', inner_mousemove );
+                    doc.addEventListener( 'mouseup', inner_mouseup );
+                    last_pos[ 0 ] = e.x;
+                    last_pos[ 1 ] = e.y;
                     e.stopPropagation();
                     e.preventDefault();
-                    document.body.classList.add("nocursor");
-                    that.split_bar.classList.add("nocursor");
+                    document.body.classList.add( 'nocursor' );
+                    that.split_bar.classList.add( 'nocursor' );
                 }
 
-                function inner_mousemove(e)
+                function inner_mousemove( e )
                 {
-                    switch(that.type) {
+                    switch( that.type ) {
                         case "right":
-                            var dt = (last_pos[0] - e.x);
-                            var size = (that.root.offsetWidth + dt);
+                            var dt = ( last_pos[ 0 ] - e.x );
+                            var size = ( that.root.offsetWidth + dt );
                             that.root.style.width = size + "px";
                             break;
-                        
                         case "left":
-                            var dt = (last_pos[0] - e.x);
+                            var dt = ( last_pos[ 0 ] - e.x );
                             var size = Math.min(document.body.clientWidth - LX.DEFAULT_SPLITBAR_SIZE, (that.root.offsetWidth - dt));
                             that.root.style.width = size + "px";
                             that.split_bar.style.left = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
                             break;
-                        
                         case "top":
-                            var dt = (last_pos[1] - e.y);
+                            var dt = ( last_pos[ 1 ] - e.y );
                             var size = Math.min(document.body.clientHeight - LX.DEFAULT_SPLITBAR_SIZE, (that.root.offsetHeight - dt));
                             that.root.style.height = size + "px";
                             that.split_bar.style.top = size + LX.DEFAULT_SPLITBAR_SIZE/2 + "px";
                             break;
-
                         case "bottom":
-                            var dt = (last_pos[1] - e.y);
-                            var size = (that.root.offsetHeight + dt);
+                            var dt = ( last_pos[ 1 ] - e.y );
+                            var size = ( that.root.offsetHeight + dt );
                             that.root.style.height = size + "px";
                             break;
                     }
                     
-                    last_pos[0] = e.x;
-                    last_pos[1] = e.y;
+                    last_pos[ 0 ] = e.x;
+                    last_pos[ 1 ] = e.y;
                     e.stopPropagation();
                     e.preventDefault();
                     
                     // Resize events   
-                    if(that.onresize)
+                    if( that.onresize )
                         that.onresize( that.root.getBoundingClientRect() );
                 }
 
-                function inner_mouseup(e)
+                function inner_mouseup( e )
                 {
                     var doc = that.root.ownerDocument;
-                    doc.removeEventListener("mousemove",inner_mousemove);
-                    doc.removeEventListener("mouseup",inner_mouseup);
-                    document.body.classList.remove("nocursor");
-                    that.split_bar.classList.remove("nocursor");
+                    doc.removeEventListener( 'mousemove', inner_mousemove );
+                    doc.removeEventListener( 'mouseup', inner_mouseup );
+                    document.body.classList.remove( 'nocursor' );
+                    that.split_bar.classList.remove( 'nocursor' );
                 }
             }
         }
@@ -1154,7 +1201,7 @@ class Area {
         this.propagateEvent("onresize");
     }
 
-        /**
+    /**
     * @method extend
     * Hide 2nd area split
     */
@@ -1603,7 +1650,7 @@ class Tabs {
             this.classList.remove("dockingtab");
 
             // Change tabs instance
-            LX.emit( "@on_tab_docked", el.instance );
+            LX.emit( "@on_tab_docked" );
             el.instance = that;
 
             // Show on drop
@@ -1675,22 +1722,26 @@ class Tabs {
 
         let isSelected = options.selected ?? false;
 
-        if( isSelected ) {
-            this.root.querySelectorAll('span').forEach( s => s.classList.remove('selected'));
-            this.area.root.querySelectorAll('.lextabcontent').forEach( c => c.style.display = 'none');
+        if( isSelected )
+        {
+            this.root.querySelectorAll( 'span' ).forEach( s => s.classList.remove( 'selected' ) );
+            this.area.root.querySelectorAll( '.lextabcontent' ).forEach( c => c.style.display = 'none' );
         }
         
         isSelected = !Object.keys( this.tabs ).length && !this.folding ? true : isSelected;
 
         let contentEl = content.root ? content.root : content;
-        contentEl.style.display = isSelected ? "block" : "none";
-        contentEl.classList.add("lextabcontent");
+        contentEl.originalDisplay = contentEl.style.display;
+        contentEl.style.display = isSelected ? contentEl.originalDisplay : "none";
+        contentEl.classList.add( 'lextabcontent' );
 
         // Process icon
         if( options.icon )
         {
             if( options.icon.includes( 'fa-' ) ) // It's fontawesome icon...
+            {
                 options.icon = "<i class='" + options.icon + "'></i>";
+            }
             else // an image..
             {
                 const rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
@@ -1699,26 +1750,31 @@ class Tabs {
         }
 
         // Create tab
-        let tabEl = document.createElement('span');
-        tabEl.dataset["name"] = name;
-        tabEl.className = "lexareatab" + (isSelected ? " selected" : "");
-        tabEl.innerHTML = (options.icon ?? "") + name;
-        tabEl.id = name.replace(/\s/g, '') + Tabs.TAB_ID++;
+        let tabEl = document.createElement( 'span' );
+        tabEl.dataset[ "name" ] = name;
+        tabEl.className = "lexareatab" + ( isSelected ? " selected" : "" );
+        tabEl.innerHTML = ( options.icon ?? "" ) + name;
+        tabEl.id = name.replace( /\s/g, '' ) + Tabs.TAB_ID++;
         tabEl.title = options.title;
         tabEl.selected = isSelected ?? false;
         tabEl.fixed = options.fixed;
-        if(tabEl.selected)
-            this.selected = name;
         tabEl.instance = this;
         contentEl.id = tabEl.id + "_content";
 
+        if( tabEl.selected )
+        {
+            this.selected = name;
+        }
+
         LX.addSignal( "@on_tab_docked", tabEl, function() {
-            if( this.parentElement.childNodes.length == 1 ){
-                this.parentElement.childNodes[0].click(); // single tab!!
+            if( this.parentElement.childNodes.length == 1 )
+            {
+                this.parentElement.childNodes[ 0 ].click(); // single tab!!
             } 
         } );
         
         tabEl.addEventListener("click", e => {
+
             e.preventDefault();
             e.stopPropagation();
 
@@ -1726,25 +1782,27 @@ class Tabs {
             {
                 // For folding tabs
                 const lastValue = tabEl.selected;
-                tabEl.parentElement.querySelectorAll('span').forEach( s => s.selected = false );
+                tabEl.parentElement.querySelectorAll( 'span' ).forEach( s => s.selected = false );
                 tabEl.selected = !lastValue; 
                 // Manage selected
-                tabEl.parentElement.querySelectorAll('span').forEach( s => s.classList.remove('selected'));
-                tabEl.classList.toggle('selected', (this.folding && tabEl.selected));
+                tabEl.parentElement.querySelectorAll( 'span' ).forEach( s => s.classList.remove( 'selected' ));
+                tabEl.classList.toggle('selected', ( this.folding && tabEl.selected ));
                 // Manage visibility 
-                tabEl.instance.area.root.querySelectorAll('.lextabcontent').forEach( c => c.style.display = 'none');
-                contentEl.style.display = "block";
+                tabEl.instance.area.root.querySelectorAll( '.lextabcontent' ).forEach( c => c.style.display = 'none' );
+                contentEl.style.display = contentEl.originalDisplay;
                 tabEl.instance.selected = tabEl.dataset.name;
             }
 
             if( this.folding )
             {
                 this.folded = tabEl.selected;
-                this.area.root.classList.toggle('folded', !this.folded);
+                this.area.root.classList.toggle( 'folded', !this.folded );
             }
 
-            if(options.onSelect)
+            if( options.onSelect )
+            {
                 options.onSelect(e, tabEl.dataset.name);
+            }
 
             if( this.thumb )
             {
@@ -1759,25 +1817,28 @@ class Tabs {
             e.preventDefault();
             e.stopPropagation();
 
-            if(options.onContextMenu) 
+            if( options.onContextMenu )
+            {
                 options.onContextMenu( e, tabEl.dataset.name );
+            }
         });
 
         tabEl.addEventListener("mouseup", e => {
             e.preventDefault();
             e.stopPropagation();
-            if( e.button == 1 ) {
-                this.delete( tabEl.dataset["name"] );
+            if( e.button == 1 )
+            {
+                this.delete( tabEl.dataset[ "name" ] );
             }
         });
         
-        tabEl.setAttribute('draggable', true);
-        tabEl.addEventListener("dragstart", function(e) {
+        tabEl.setAttribute( 'draggable', true );
+        tabEl.addEventListener( 'dragstart', function( e ) {
             if( this.parentElement.childNodes.length == 1 ){
                 e.preventDefault();
                 return;
             } 
-            e.dataTransfer.setData( "source", e.target.id );
+            e.dataTransfer.setData( 'source', e.target.id );
         });
         
         // Attach content
@@ -2401,6 +2462,7 @@ class Widget {
     static CONTENT      = 20;
     static CUSTOM       = 21;
     static SEPARATOR    = 22;
+    static KNOB         = 23;
 
     static NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -2409,7 +2471,7 @@ class Widget {
         Widget.PROGRESS
     ];
 
-    constructor(name, type, options) {
+    constructor( name, type, options ) {
         this.name = name;
         this.type = type;
         this.options = options;
@@ -2417,13 +2479,15 @@ class Widget {
 
     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 ) {
+    set( value, skipCallback = false, signalName = "" ) {
 
         if( this.onSetValue )
             return this.onSetValue( value, skipCallback );
@@ -2480,13 +2544,13 @@ class Widget {
             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();
+        
     }
 }
 
@@ -3788,6 +3852,8 @@ class Panel {
      * placeholder: Add input placeholder
      * trigger: Choose onchange trigger (default, input) [default]
      * inputWidth: Width of the text input
+     * float: Justify input text content
+     * justifyName: Justify name content
      * fitHeight: Height adapts to text
      */
 
@@ -3825,6 +3891,7 @@ class Panel {
         let wValue = document.createElement( 'textarea' );
         wValue.value = wValue.iValue = value || "";
         wValue.style.width = "100%";
+        wValue.style.textAlign = options.float ?? "";
         Object.assign( wValue.style, options.style ?? {} );
 
         if( options.disabled ?? false ) wValue.setAttribute("disabled", true);
@@ -3901,8 +3968,9 @@ class Panel {
      * @param {String} value Button name
      * @param {Function} callback Callback function on click
      * @param {*} options:
-     * icon 
      * disabled: Make the widget disabled [false]
+     * icon: Icon class to show as button value
+     * img: Path to image to show as button value
      */
 
     addButton( name, value, callback, options = {} ) {
@@ -4521,6 +4589,7 @@ class Panel {
      * @param {Array} values By default values in the array
      * @param {Function} callback Callback function on change
      * @param {*} options:
+     * innerValues (Array): Use dropdown mode and use values as options
      */
 
     addArray( name, values = [], callback, options = {} ) {
@@ -5033,6 +5102,7 @@ class Panel {
      * 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 = {} ) {
@@ -5043,7 +5113,7 @@ class Panel {
             return +vecinput.value;
         };
         widget.onSetValue = ( newValue, skipCallback ) => {
-            vecinput.value = newValue;
+            vecinput.value = round( newValue, options.precision );
             Panel._dispatch_event( vecinput, "change", skipCallback );
         };
 
@@ -5068,27 +5138,48 @@ class Panel {
         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;
         }
 
@@ -5103,7 +5194,7 @@ class Panel {
             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 );
@@ -5119,7 +5210,7 @@ class Panel {
             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 });
 
@@ -5132,12 +5223,20 @@ class Panel {
 
             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 )
             {
@@ -5162,7 +5261,7 @@ class Panel {
             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();
         }
@@ -5174,8 +5273,8 @@ class Panel {
                 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;
@@ -5189,7 +5288,7 @@ class Panel {
             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);
@@ -5226,9 +5325,15 @@ class Panel {
         };
         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 );
             }
         };
@@ -5268,14 +5373,14 @@ class Panel {
             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;
@@ -5291,14 +5396,17 @@ class Panel {
                 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 } );
@@ -5311,7 +5419,7 @@ class Panel {
                 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 )
@@ -5320,7 +5428,7 @@ class Panel {
                     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;
@@ -5348,7 +5456,7 @@ class Panel {
                 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();
             }
@@ -5360,14 +5468,14 @@ class Panel {
                     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");
                     }
                 }
@@ -5377,23 +5485,23 @@ class Panel {
                 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");
@@ -5404,7 +5512,7 @@ class Panel {
             }
         }, false);
         
-        element.appendChild(container);
+        element.appendChild( container );
 
         return widget;
     }
@@ -5442,9 +5550,9 @@ class Panel {
      * @param {*} options:
      * min, max: Min and Max values
      * low, optimum, high: Low and High boundary values, Optimum point in the range
-     * showValue: show current value
-     * editable: allow edit value
-     * callback: function called on change value
+     * showValue: Show current value
+     * editable: Allow edit value
+     * callback: Function called on change value
      */
 
     addProgress( name, value, options = {} ) {
@@ -5703,64 +5811,93 @@ class Panel {
 
     /**
      * @method addTabs
-     * @param {Array} tabs Contains objects with {name, icon, callback}
+     * @param {Array} tabs Contains objects with {
+     *      name: Name of the tab (if icon, use as title)
+     *      icon: Icon to be used as the tab icon (optional)
+     *      onCreate: Func to be called at tab creation
+     *      onSelect: Func to be called on select tab (optional)
+     * }
      * @param {*} options 
      * vertical: Use vertical or horizontal tabs (vertical by default)
      * showNames: Show tab name only in horizontal tabs
      */
 
     addTabs( tabs, options = {} ) {
+
         let root = this.current_branch ? this.current_branch.content : this.root;
-        if(!this.current_branch)
+
+        if( !this.current_branch )
+        {
             console.warn("No current branch!");
+        }
 
-        if(tabs.constructor != Array)
-            throw("Param @tabs must be an Array!");
+        if( tabs.constructor != Array )
+        {
+            throw( "Param @tabs must be an Array!" );
+        }
 
         const vertical = options.vertical ?? true;
-        const showNames = !vertical && (options.showNames ?? false);
+        const showNames = !vertical && ( options.showNames ?? false );
 
-        let container = document.createElement('div');
+        let container = document.createElement( 'div' );
         container.className = "lextabscontainer";
-        if( !vertical ) container.className += " horizontal";
+        if( !vertical )
+        {
+            container.className += " horizontal";
+        }
 
-        let tabContainer = document.createElement("div");
-        tabContainer.className = "tabs";
+        let tabContainer = document.createElement( 'div' );
+        tabContainer.className = 'tabs';
         container.appendChild( tabContainer );
         root.appendChild( container );
 
-        for( var i = 0; i < tabs.length; ++i ) 
+        for( let i = 0; i < tabs.length; ++i )
         {
-            const tab = tabs[i];
-            const selected = i == 0;
-            let tabEl = document.createElement('div');
-            tabEl.className = "lextab " + (i == tabs.length - 1 ? "last" : "") + (selected ? "selected" : "");
-            tabEl.innerHTML = (showNames ? tab.name : "") + "<a class='" + (tab.icon || "fa fa-hashtag") + " " + (showNames ? "withname" : "") + "'></a>";
+            const tab = tabs[ i ];
+            console.assert( tab.name );
+            const isSelected = ( i == 0 );
+            let tabEl = document.createElement( 'div' );
+            tabEl.className = "lextab " + (i == tabs.length - 1 ? "last" : "") + ( isSelected ? "selected" : "" );
+            tabEl.innerHTML = ( showNames ? tab.name : "" ) + "<a class='" + ( tab.icon || "fa fa-hashtag" ) + " " + (showNames ? "withname" : "") + "'></a>";
             tabEl.title = tab.name;
 
-            let infoContainer = document.createElement("div");
-            infoContainer.id = tab.name.replace(/\s/g, '');
+            let infoContainer = document.createElement( 'div' );
+            infoContainer.id = tab.name.replace( /\s/g, '' );
             infoContainer.className = "widgets";
-            if(!selected) infoContainer.toggleAttribute('hidden', true);
+
+            if(!isSelected)
+            {
+                infoContainer.toggleAttribute('hidden', true);
+            }
+
             container.appendChild( infoContainer );
 
-            tabEl.addEventListener("click", function() {
-                // change selected tab
-                tabContainer.querySelectorAll(".lextab").forEach( e => { e.classList.remove("selected"); } );
-                this.classList.add("selected");
-                // hide all tabs content
-                container.querySelectorAll(".widgets").forEach( e => { e.toggleAttribute('hidden', true); } );
-                // show tab content
-                const el = container.querySelector("#" + infoContainer.id);
-                el.toggleAttribute('hidden');
+            tabEl.addEventListener( 'click', e => {
+
+                // Change selected tab
+                tabContainer.querySelectorAll( '.lextab' ).forEach( e => { e.classList.remove( 'selected' ); } );
+                e.target.classList.add( 'selected' );
+                // Hide all tabs content
+                container.querySelectorAll(".widgets").forEach( e => { e.toggleAttribute( 'hidden', true ); } );
+                // Show tab content
+                const el = container.querySelector( '#' + infoContainer.id );
+                el.toggleAttribute( 'hidden' );
+
+                if( tab.onSelect )
+                {
+                    tab.onSelect( this, infoContainer );
+                }
             });
 
-            tabContainer.appendChild(tabEl);
+            tabContainer.appendChild( tabEl );
 
-            // push to tab space
-            this.queue( infoContainer );
-            tab.callback( this, infoContainer );
-            this.clearQueue();
+            if( tab.onCreate )
+            {
+                // push to tab space
+                this.queue( infoContainer );
+                tab.onCreate( this, infoContainer );
+                this.clearQueue();
+            }
         }
         
         this.addSeparator();
@@ -5776,14 +5913,19 @@ LX.Panel = Panel;
 class Branch {
     
     constructor( name, options = {} ) {
+
         this.name = name;
 
-        var root = document.createElement('div');
+        var root = document.createElement( 'div' );
         root.className = "lexbranch";
-        if(options.id)
+        if( options.id )
+        {
             root.id = options.id;
-        if(options.className)
+        }
+        if( options.className )
+        {
             root.className += " " + options.className;
+        }
 
         root.style.width = "calc(100% - 7px)";
         root.style.margin = "0 auto";
@@ -5794,52 +5936,56 @@ class Branch {
         this.widgets = [];
 
         // create element
-        var title = document.createElement('div');
+        var title = document.createElement( 'div' );
         title.className = "lexbranchtitle";
         
         title.innerHTML = "<a class='fa-solid fa-angle-up switch-branch-button'></a>";
-        if(options.icon) {
+        if( options.icon )
+        {
             title.innerHTML += "<a class='branchicon " + options.icon + "' style='margin-right: 8px; margin-bottom: -2px;'>";
         }
         title.innerHTML += name || "Branch";
 
-        root.appendChild(title);
+        root.appendChild( title );
 
-        var branch_content = document.createElement('div');
-        branch_content.id = name.replace(/\s/g, '');
-        branch_content.className = "lexbranchcontent";
-        root.appendChild(branch_content);
-        this.content = branch_content;
+        var branchContent = document.createElement( 'div' );
+        branchContent.id = name.replace(/\s/g, '');
+        branchContent.className = "lexbranchcontent";
+        root.appendChild(branchContent);
+        this.content = branchContent;
 
         this._addBranchSeparator();
 
-        if( options.closed ) {
+        if( options.closed )
+        {
             title.className += " closed";
             root.className += " closed";
             this.grabber.setAttribute('hidden', true);
             doAsync( () => {
-                this.content.setAttribute('hidden', true);
-            }, 15);
+                this.content.setAttribute( 'hidden', true );
+            }, 15 );
         }
 
-        this.onclick = function(e){
+        this.onclick = function( e ) {
             e.stopPropagation();
-            this.classList.toggle('closed');
-            this.parentElement.classList.toggle('closed');
+            this.classList.toggle( 'closed' );
+            this.parentElement.classList.toggle( 'closed' );
 
-            that.content.toggleAttribute('hidden');
-            that.grabber.toggleAttribute('hidden');
+            that.content.toggleAttribute( 'hidden' );
+            that.grabber.toggleAttribute( 'hidden' );
 
-            LX.emit("@on_branch_closed", this.classList.contains("closed"), that.panel);
+            LX.emit( "@on_branch_closed", this.classList.contains("closed"), { target: that.panel } );
         };
 
-        this.oncontextmenu = function(e) {
+        this.oncontextmenu = function( e ) {
 
             e.preventDefault();
             e.stopPropagation();
 
             if( this.parentElement.classList.contains("dialog") )
+            {
                 return;
+            }
                 
             addContextMenu("Dock", e, p => {
                 e.preventDefault();
@@ -5847,12 +5993,12 @@ class Branch {
                 // p.add('<i class="fa-regular fa-window-maximize fa-rotate-180">', {id: 'dock_options1'});
                 // p.add('<i class="fa-regular fa-window-maximize fa-rotate-90">', {id: 'dock_options2'});
                 // p.add('<i class="fa-regular fa-window-maximize fa-rotate-270">', {id: 'dock_options3'});
-                p.add('Floating', that._on_make_floating.bind(that));
+                p.add( 'Floating', that._on_make_floating.bind( that ) );
             }, { icon: "fa-regular fa-window-restore" });
         };
 
-        title.addEventListener("click", this.onclick);
-        title.addEventListener("contextmenu", this.oncontextmenu);
+        title.addEventListener( 'click', this.onclick );
+        title.addEventListener( 'contextmenu', this.oncontextmenu );
     }
 
     _on_make_floating() {
@@ -6291,7 +6437,8 @@ class ContextMenu {
         this.items = [];
         this.colors = {};
 
-        if(title) {
+        if( title )
+        {
             const item = {};
             item[ title ] = [];
             item[ 'className' ] = "cmtitle";
@@ -6306,7 +6453,7 @@ class ContextMenu {
         
         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";
 
@@ -6347,7 +6494,6 @@ class ContextMenu {
         contextmenu.style.marginTop =  3.5 - c.offsetHeight + "px";
 
         // Set final width
-        // contextmenu.style.width = contextmenu.offsetWidth + "px";
         this._adjust_position( contextmenu, 6, true );
     }
 
@@ -6421,7 +6567,7 @@ class ContextMenu {
     }
 
     onCreate() {
-        this._adjust_position( this.root, 6 );
+        doAsync( () => this._adjust_position( this.root, 6 ) );
     }
 
     add( path, options = {} ) {
@@ -6526,10 +6672,12 @@ LX.ContextMenu = ContextMenu;
 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();
 
@@ -6867,7 +7015,6 @@ class Curve {
     }
 
     redraw( options = {} ) {
-        console.log("REDRAW!!");
         this.element.redraw( options );
     }
 }