lexgui 0.1.36 → 0.1.39

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.36",
+        version: "0.1.39",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -29,7 +29,12 @@ 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 remapRange( oldValue, oldMin, oldMax, newMin, newMax ) { return ((( oldValue - oldMin ) * ( newMax - newMin )) / ( oldMax - oldMin )) + newMin; }
+
+    LX.clamp = clamp;
+    LX.round = round;
+    LX.remapRange = remapRange;
     
     function getSupportedDOMName( string )
     {
@@ -106,6 +111,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     
     LX.rgbToHex = rgbToHex;
 
+    function measureRealWidth( 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;
+    }
+
+    LX.measureRealWidth = measureRealWidth;
+
     function simple_guidGenerator() {
         var S4 = function() {
            return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
@@ -113,6 +130,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);
@@ -165,46 +184,79 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         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(); }
+        clp ( min, max, v0 = new vec2() ) { v0.set( clamp( this.x, min, max ), clamp( this.y, min, max ) ); return v0; }
     };
 
     LX.vec2 = vec2;
 
     // Other utils
 
+    /**
+     * @method makeDraggable
+     * @param {Element} domEl
+     * @param {Object} options
+     * autoAdjust (Bool): Sets in a correct position at the beggining
+     * dragMargin (Number): Margin of drag container
+     * onMove (Function): Called each move event
+     * onDragStart (Function): Called when drag event starts
+     */
     function makeDraggable( domEl, options = { } ) {
 
-        let offsetX;
-        let offsetY;
+        let offsetX = 0;
+        let offsetY = 0;
         let currentTarget = null;
         let targetClass = options.targetClass;
-    
+        let dragMargin = options.dragMargin ?? 3;
+
+        let _computePosition = ( e, top, left ) => {
+            const nullRect = { x: 0, y: 0, width: 0, height: 0 };
+            const parentRect = domEl.parentElement ? domEl.parentElement.getBoundingClientRect() : nullRect;
+            const isFixed = ( domEl.style.position == "fixed" );
+            const fixedOffset = isFixed ? new LX.vec2( parentRect.x, parentRect.y ) : new LX.vec2();
+            left = left ?? e.clientX - offsetX - parentRect.x;
+            top = top ?? e.clientY - offsetY - parentRect.y;
+            domEl.style.left = clamp( left, dragMargin + fixedOffset.x, fixedOffset.x + parentRect.width - domEl.offsetWidth - dragMargin ) + 'px';
+            domEl.style.top = clamp( top, dragMargin + fixedOffset.y, fixedOffset.y + parentRect.height - domEl.offsetHeight - dragMargin ) + 'px';
+        };
+
+        // Initial adjustment
+        if( options.autoAdjust )
+        {
+        _computePosition( null, parseInt( domEl.style.left ), parseInt( domEl.style.top ) )
+        }
+
         let id = LX.UTILS.uidGenerator();
         domEl[ 'draggable-id' ] = id;
-    
+
         const defaultMoveFunc = e => {
-            if( !currentTarget ) return;
-            let left = e.clientX - offsetX;
-            let top = e.clientY - offsetY;
-            if( left > 3 && ( left + domEl.offsetWidth + 6 ) <= window.innerWidth )
-                domEl.style.left = left + 'px';
-            if( top > 3 && ( top + domEl.offsetHeight + 6 ) <= window.innerHeight )
-                domEl.style.top = top + 'px';
+            if( !currentTarget )
+            {
+                return;
+            }
+
+            _computePosition( e );
         };
-    
+
         const customMoveFunc = e => {
-            if( !currentTarget ) return;
+            if( !currentTarget )
+            {
+                return;
+            }
+
             if( options.onMove )
+            {
                 options.onMove( currentTarget );
+            }
         };
-    
+
         let onMove = options.onMove ? customMoveFunc : defaultMoveFunc;
         let onDragStart = options.onDragStart;
-    
+
         domEl.setAttribute( 'draggable', true );
         domEl.addEventListener( "mousedown", function( e ) {
-            currentTarget = (e.target.classList.contains(targetClass) || !targetClass) ? e.target : null;
+            currentTarget = ( e.target.classList.contains( targetClass ) || !targetClass ) ? e.target : null;
         } );
-    
+
         domEl.addEventListener( "dragstart", function( e ) {
             e.preventDefault();
             e.stopPropagation();
@@ -216,15 +268,21 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             e.dataTransfer.setDragImage( img, 0, 0 );
             e.dataTransfer.effectAllowed = "move";
             const rect = e.target.getBoundingClientRect();
-            offsetX = e.clientX - rect.x;
-            offsetY = e.clientY - rect.y;
+            const parentRect = currentTarget.parentElement.getBoundingClientRect();
+            const isFixed = ( currentTarget.style.position == "fixed" );
+            const fixedOffset = isFixed ? new LX.vec2( parentRect.x, parentRect.y ) : new LX.vec2();
+            offsetX = e.clientX - rect.x - fixedOffset.x;
+            offsetY = e.clientY - rect.y - fixedOffset.y;
             document.addEventListener( "mousemove", onMove );
             if( onDragStart )
+            {
                 onDragStart( currentTarget, e );
+            }
         }, false );
         
         document.addEventListener( 'mouseup', () => {
-            if( currentTarget ) {
+            if( currentTarget )
+            {
                 currentTarget = null;
                 document.removeEventListener( "mousemove", onMove );
             }
@@ -304,11 +362,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 );
                     }
+                }
             }
         });
 
@@ -634,6 +699,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
     };
 
+    LX.IEvent = IEvent;
+
     class TreeEvent {
 
         static NONE                 = 0;
@@ -654,7 +721,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
         
         string() {
-            switch(this.type) {
+            switch( this.type )
+            {
                 case TreeEvent.NONE: return "tree_event_none";
                 case TreeEvent.NODE_SELECTED: return "tree_event_selected";
                 case TreeEvent.NODE_DELETED: return "tree_event_deleted";
@@ -808,7 +876,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 const draggable = options.draggable ?? true;
                 if( draggable )
-                    makeDraggable( root );
+                {
+                    makeDraggable( root, options );
+                }
 
                 if( options.resizeable ) {
                     root.classList.add("resizeable");
@@ -1170,23 +1240,33 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         * @method resize
         * Resize element
         */
-        setSize(size) {
+        setSize( size ) {
             
-            let [width, height] = size;
-    
-            if(width != undefined && width.constructor == Number)
+            let [ width, height ] = size;
+
+            if( width != undefined && width.constructor == Number )
+            {
                 width += "px";
-            if(height != undefined && height.constructor == Number)
+            }
+
+            if( height != undefined && height.constructor == Number )
+            {
                 height += "px";
-    
-            if(width)
+            }
+
+            if( width )
+            {
                 this.root.style.width = width;
-            if(height)
+            }
+
+            if( height )
+            {
                 this.root.style.height = height;
+            }
 
-            this.size = [this.root.clientWidth, this.root.clientHeight];
+            this.size = [ this.root.clientWidth, this.root.clientHeight ];
 
-            this.propagateEvent("onresize");
+            this.propagateEvent( "onresize" );
         }
 
         /**
@@ -1196,7 +1276,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         extend() {
 
             if( this.split_extended )
-            return;
+            {
+                return;
+            }
 
             let [area1, area2] = this.sections;
             this.split_extended = true;
@@ -1866,11 +1948,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             const tabEl = this.tabDOMs[ name ];
 
-            if(!tabEl || tabEl.fixed)
-            return;
+            if( !tabEl || tabEl.fixed )
+            {
+                return;
+            }
 
             if( this.onclose )
+            {
                 this.onclose( name );
+            }
 
             // Delete tab element
             this.tabDOMs[ name ].remove();
@@ -1881,11 +1967,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             delete this.tabs[ name ];
 
             // Select last tab
-            const last_tab = this.root.lastChild;
-            if(last_tab && !last_tab.fixed)
+            const lastTab = this.root.lastChild;
+            if( lastTab && !lastTab.fixed )
+            {
                 this.root.lastChild.click();
+            }
         }
-
     }
 
     LX.Tabs = Tabs;
@@ -2451,6 +2538,9 @@ 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 SIZE         = 24;
+        static PAD          = 25;
 
         static NO_CONTEXT_TYPES = [
             Widget.BUTTON,
@@ -2459,7 +2549,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;
@@ -2467,10 +2557,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 ) {
@@ -2506,14 +2598,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         paste() {
             if( !this._can_paste() )
-            return;
+            {
+                return;
+            }
 
             this.set(navigator.clipboard.data);
         }
 
         typeName() {
 
-            switch(this.type) {
+            switch( this.type ) {
                 case Widget.TEXT: return "Text";
                 case Widget.TEXTAREA: return "TextArea";
                 case Widget.BUTTON: return "Button";
@@ -2530,6 +2624,9 @@ 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.SIZE: return "Size";
+                case Widget.PAD: return "Pad";
                 case Widget.CUSTOM: return this.customName;
             }
         }
@@ -2624,40 +2721,50 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 custom_widgets.className = "lexcustomitems";
                 custom_widgets.toggleAttribute('hidden', true);
                 
-                element.appendChild(container);
-                element.appendChild(custom_widgets);
-    
-                if( instance ) {
-                    
+                element.appendChild( container );
+                element.appendChild( custom_widgets );
+
+                if( instance )
+                {
+
                     this.queue( custom_widgets );
                     
-                    const on_instance_changed = (key, value, event) => {
-                        instance[key] = value;
-                        this._trigger( new IEvent(name, instance, event), callback );
+                    const on_instance_changed = ( key, value, event ) => {
+                        instance[ key ] = value;
+                        this._trigger( new IEvent( name, instance, event ), callback );
                     };
 
                     for( let key in default_instance )
                     {
-                        const value = instance[key] ?? default_instance[key];
+                        const value = instance[ key ] ?? default_instance[ key ];
                         
-                        switch(value.constructor) {
+                        switch( value.constructor )
+                        {
                             case String:
-                                if(value[0] === '#')
-                                    this.addColor(key, value, on_instance_changed.bind(this, key));
+                                if( value[ 0 ] === '#' )
+                                {
+                                    this.addColor( key, value, on_instance_changed.bind( this, key ) );
+                                }
                                 else
-                                    this.addText(key, value, on_instance_changed.bind(this, key));
+                                {
+                                    this.addText( key, value, on_instance_changed.bind( this, key ) );
+                                }
                                 break;
                             case Number:
-                                this.addNumber(key, value, on_instance_changed.bind(this, key));
+                                this.addNumber( key, value, on_instance_changed.bind( this, key ) );
                                 break;
                             case Boolean:
-                                this.addCheckbox(key, value, on_instance_changed.bind(this, key));
+                                this.addCheckbox( key, value, on_instance_changed.bind( this, key ) );
                                 break;
                             case Array:
                                 if( value.length > 4 )
-                                    this.addArray(key, value, on_instance_changed.bind(this, key));    
+                                {
+                                    this.addArray( key, value, on_instance_changed.bind( this, key ) );
+                                }
                                 else
-                                    this._add_vector(value.length, key, value, on_instance_changed.bind(this, key));
+                                {
+                                    this._add_vector( value.length, key, value, on_instance_changed.bind( this, key ) );
+                                }
                                 break;
                         }
                     }
@@ -2695,37 +2802,40 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         _create_item( parent, node, level = 0, selectedId ) {
 
             const that = this;
-            const node_filter_input = this.domEl.querySelector("#lexnodetree_filter");
+            const node_filter_input = this.domEl.querySelector( "#lexnodetree_filter" );
 
             node.children = node.children ?? [];
-            if(node_filter_input && !node.id.includes(node_filter_input.value) || (selectedId != undefined) && selectedId != node.id)
+            if( node_filter_input && !node.id.includes( node_filter_input.value ) || (selectedId != undefined) && selectedId != node.id )
             {
                 for( var i = 0; i < node.children.length; ++i )
-                    this._create_item( node, node.children[i], level + 1, selectedId );
+                {
+                    this._create_item( node, node.children[ i ], level + 1, selectedId );
+                }
                 return;
             }
 
-            const list = this.domEl.querySelector("ul");
+            const list = this.domEl.querySelector( 'ul' );
 
             node.visible = node.visible ?? true;
             node.parent = parent;
-            let is_parent = node.children.length > 0;
-            let is_selected = this.selected.indexOf( node ) > -1;
+            let isParent = node.children.length > 0;
+            let isSelected = this.selected.indexOf( node ) > -1;
             
-            if( this.options.only_folders ) {
+            if( this.options.only_folders )
+            {
                 let has_folders = false;
                 node.children.forEach( c => has_folders |= (c.type == 'folder') );
-                is_parent = !!has_folders;
+                isParent = !!has_folders;
             }
 
             let item = document.createElement('li');
-            item.className = "lextreeitem " + "datalevel" + level + (is_parent ? " parent" : "") + (is_selected ? " selected" : "");
+            item.className = "lextreeitem " + "datalevel" + level + (isParent ? " parent" : "") + (isSelected ? " selected" : "");
             item.id = LX.getSupportedDOMName( node.id );
             item.tabIndex = "0";
 
             // Select hierarchy icon
             let icon = (this.options.skip_default_icon ?? true) ? "" : "fa-solid fa-square"; // Default: no childs
-            if( is_parent ) icon = node.closed ? "fa-solid fa-caret-right" : "fa-solid fa-caret-down";
+            if( isParent ) icon = node.closed ? "fa-solid fa-caret-right" : "fa-solid fa-caret-down";
             item.innerHTML = "<a class='" + icon + " hierarchy'></a>";
             
             // Add display icon
@@ -2745,18 +2855,20 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             item.innerHTML += (node.rename ? "" : node.id);
 
-            item.setAttribute('draggable', true);
-            item.style.paddingLeft = ((is_parent ? 0 : 3 ) + (3 + (level+1) * 15)) + "px";
-            list.appendChild(item);
+            item.setAttribute( 'draggable', true );
+            item.style.paddingLeft = ((isParent ? 0 : 3 ) + (3 + (level+1) * 15)) + "px";
+            list.appendChild( item );
 
             // Callbacks
             item.addEventListener("click", e => {
-                if( handled ) {
+                if( handled )
+                {
                     handled = false;
                     return;
                 }
 
-                if(!e.shiftKey) {
+                if( !e.shiftKey )
+                {
                     list.querySelectorAll("li").forEach( e => { e.classList.remove('selected'); } );
                     this.selected.length = 0;
                 }
@@ -2772,16 +2884,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
 
                 // Only Show children...
-                if(is_parent && node.id.length > 1 /* Strange case... */) {
+                if(isParent && node.id.length > 1 /* Strange case... */) {
                     node.closed = false;
-                    if(that.onevent) {
-                        const event = new TreeEvent(TreeEvent.NODE_CARETCHANGED, node, node.closed);
+                    if( that.onevent )
+                    {
+                        const event = new TreeEvent( TreeEvent.NODE_CARETCHANGED, node, node.closed );
                         that.onevent( event );
                     }
                     that.frefresh( node.id );
                 }
 
-                if(that.onevent) {
+                if( that.onevent )
+                {
                     const event = new TreeEvent(TreeEvent.NODE_SELECTED, e.shiftKey ? this.selected : node );
                     event.multiple = e.shiftKey;
                     that.onevent( event );
@@ -2789,37 +2903,110 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             });
 
             item.addEventListener("dblclick", function() {
+
                 if( that.options.rename ?? true )
                 {
                     // Trigger rename
                     node.rename = true;
                     that.refresh();
                 }
+
                 if( that.onevent )
                 {
-                    const event = new TreeEvent(TreeEvent.NODE_DBLCLICKED, node);
+                    const event = new TreeEvent( TreeEvent.NODE_DBLCLICKED, node );
                     that.onevent( event );
                 }
             });
 
-            item.addEventListener("contextmenu", e => {
+            item.addEventListener( "contextmenu", e => {
+
                 e.preventDefault();
-                if(that.onevent) {
-                    const event = new TreeEvent(TreeEvent.NODE_CONTEXTMENU, this.selected.length > 1 ? this.selected : node, e);
-                    event.multiple = this.selected.length > 1;
-                    that.onevent( event );
+
+                if( !that.onevent )
+                {
+                    return;
+                }
+
+                const event = new TreeEvent(TreeEvent.NODE_CONTEXTMENU, this.selected.length > 1 ? this.selected : node, e);
+                event.multiple = this.selected.length > 1;
+
+                LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.value, m => {
+                    event.panel = m;
+                });
+
+                that.onevent( event );
+
+                if( ( this.options.addDefault ?? false ) == true )
+                {
+                    if( event.panel.items )
+                    {
+                        event.panel.add( "" );
+                    }
+
+                    event.panel.add( "Select Children", () => {
+
+                        const selectChildren = ( n ) => {
+
+                            if( n.closed )
+                            {
+                                return;
+                            }
+
+                            for( let child of n.children ?? [] )
+                            {
+                                if( !child )
+                                {
+                                    continue;
+                                }
+
+                                let nodeItem = this.domEl.querySelector( '#' + child.id );
+                                nodeItem.classList.add('selected');
+                                this.selected.push( child );
+                                selectChildren( child );
+                            }
+                        };
+
+                        // Add childs of the clicked node
+                        selectChildren( node );
+                    } );
+
+                    event.panel.add( "Delete", { callback: () => {
+
+                        // It's the root node
+                        if( !node.parent )
+                        {
+                            return;
+                        }
+
+                        if( that.onevent ) {
+                            const event = new TreeEvent( TreeEvent.NODE_DELETED, node, e );
+                            that.onevent( event );
+                        }
+
+                        // Delete nodes now
+                        let childs = node.parent.children;
+                        const index = childs.indexOf( node );
+                        childs.splice( index, 1 );
+
+                        this.refresh();
+                    } } );
                 }
             });
 
             item.addEventListener("keydown", e => {
-                if(node.rename)
-                return;
+
+                if( node.rename )
+                {
+                    return;
+                }
+
                 e.preventDefault();
+
                 if( e.key == "Delete" )
                 {
                     // Send event now so we have the info in selected array..
-                    if(that.onevent) {
-                        const event = new TreeEvent(TreeEvent.NODE_DELETED, this.selected.length > 1 ? this.selected : node, e);
+                    if( that.onevent ) {
+                        const event = new TreeEvent( TreeEvent.NODE_DELETED, this.selected.length > 1 ? this.selected : node, e );
                         event.multiple = this.selected.length > 1;
                         that.onevent( event );
                     }
@@ -2837,10 +3024,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
                 else if( e.key == "ArrowUp" || e.key == "ArrowDown" ) // Unique or zero selected
                 {
-                    var selected = this.selected.length > 1 ? (e.key == "ArrowUp" ? this.selected.shift() : this.selected.pop()) : this.selected[0];
-                    var el = this.domEl.querySelector("#" + LX.getSupportedDOMName( selected.id ) );
+                    var selected = this.selected.length > 1 ? ( e.key == "ArrowUp" ? this.selected.shift() : this.selected.pop() ) : this.selected[ 0 ];
+                    var el = this.domEl.querySelector( "#" + LX.getSupportedDOMName( selected.id ) );
                     var sibling = e.key == "ArrowUp" ? el.previousSibling : el.nextSibling;
-                    if( sibling ) sibling.click();
+                    if( sibling )
+                    {
+                        sibling.click();
+                    }
                 }
             });
 
@@ -2946,7 +3136,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let handled = false;
 
             // Show/hide children
-            if(is_parent) {
+            if(isParent) {
                 item.querySelector('a.hierarchy').addEventListener("click", function(e) {
                     
                     handled = true;
@@ -3084,19 +3274,25 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         getValue( name ) {
 
             let widget = this.widgets[ name ];
-            if(!widget)
-                throw("No widget called " + name);
+
+            if( !widget )
+            {
+                throw( "No widget called " + name );
+            }
 
             return widget.value();
         }
 
-        setValue( name, value ) {
+        setValue( name, value, skipCallback ) {
 
             let widget = this.widgets[ name ];
-            if(!widget)
-                throw("No widget called " + name);
 
-            return widget.set(value);
+            if( !widget )
+            {
+                throw( "No widget called " + name );
+            }
+
+            return widget.set( value, skipCallback );
         }
 
         /**
@@ -3275,9 +3471,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             return (typeof arg == 'undefined' ? def : arg);
         }
 
-        static _dispatch_event( element, type, bubbles, cancelable ) {
-            let event = new Event(type, { 'bubbles': bubbles, 'cancelable': cancelable });
-            element.dispatchEvent(event);
+        static _dispatch_event( element, type, data, bubbles, cancelable ) {
+            let event = new CustomEvent( type, { 'detail': data, 'bubbles': bubbles, 'cancelable': cancelable } );
+            element.dispatchEvent( event );
         }
 
         static _add_reset_property( container, callback ) {
@@ -3285,8 +3481,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             domEl.style.display = "none";
             domEl.style.marginRight = "6px";
             domEl.className = "lexicon fa fa-rotate-left";
-            domEl.addEventListener("click", callback);
-            container.appendChild(domEl);
+            domEl.addEventListener( "click", callback );
+            container.appendChild( domEl );
             return domEl;
         }
 
@@ -3296,39 +3492,45 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         create_widget( name, type, options = {} ) {
 
-            let widget = new Widget(name, type, options);
+            let widget = new Widget( name, type, options );
 
-            let element = document.createElement('div');
+            let element = document.createElement( 'div' );
             element.className = "lexwidget";
-            if(options.id)
-                element.id = options.id;
-            if(options.className)
+            element.id = options.id ?? "";
+            element.title = options.title ?? "";
+
+            if( options.className )
+            {
                 element.className += " " + options.className;
-            if(options.title)
-                element.title = options.title;
+            }
 
             if( type != Widget.TITLE )
             {
                 element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE ? 10 : 20) + "px)";
-                if( options.width ) {
+
+                if( options.width )
+                {
                     element.style.width = element.style.minWidth = options.width;
                 }
-                if( options.maxWidth ) {
+                if( options.maxWidth )
+                {
                     element.style.maxWidth = options.maxWidth;
                 }
-                if( options.minWidth ) {
+                if( options.minWidth )
+                {
                     element.style.minWidth = options.minWidth;
                 }
-                if( options.height ) {
+                if( options.height )
+                {
                     element.style.height = element.style.minHeight = options.height;
                 }
             }
 
-            if(name != undefined) {
-
-                if(!(options.no_name ?? false) )
+            if( name != undefined )
+            {
+                if( !(options.no_name ?? false) )
                 {
-                    let domName = document.createElement('div');
+                    let domName = document.createElement( 'div' );
                     domName.className = "lexwidgetname";
                     if( options.justifyName )
                     {
@@ -3341,22 +3543,27 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     element.domName = domName;
     
                     // Copy-paste info
-                    domName.addEventListener('contextmenu', function(e) {
+                    domName.addEventListener('contextmenu', function( e ) {
                         e.preventDefault();
-                        widget.oncontextmenu(e);
+                        widget.oncontextmenu( e );
                     });
                 }
                 
                 this.widgets[ name ] = widget;
             }
 
-            if(options.signal)
+            if( options.signal )
             {
-                if(!name) {
-                    if(!this.signals)
+                if( !name )
+                {
+                    if( !this.signals )
+                    {
                         this.signals = [];
-                    this.signals.push({[options.signal]: widget})
+                    }
+
+                    this.signals.push( { [ options.signal ]: widget } )
                 }
+
                 LX.addSignal( options.signal, widget );
             }
 
@@ -4843,7 +5050,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";
@@ -5011,6 +5218,9 @@ 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
+         * onPress: Callback function on mouse down
+         * onRelease: Callback function on mouse is released
          */
 
         addNumber( name, value, callback, options = {} ) {
@@ -5020,8 +5230,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             widget.onGetValue = () => {
                 return +vecinput.value;
             };
+
             widget.onSetValue = ( newValue, skipCallback ) => {
-                vecinput.value = newValue;
+                vecinput.value = round( newValue, options.precision );
                 Panel._dispatch_event( vecinput, "change", skipCallback );
             };
 
@@ -5046,45 +5257,82 @@ 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 );
+            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 );
+            }
 
-            if( options.disabled ) {
+            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;
             }
 
-            // add slider below
-            if( !options.skipSlider && options.min !== undefined && options.max !== undefined ) {
+            // Add slider below
+            if( !options.skipSlider && options.min !== undefined && options.max !== undefined )
+            {
                 let slider = document.createElement( 'input' );
                 slider.className = "lexinputslider";
-                slider.step = options.step ?? 1;
                 slider.min = options.min;
                 slider.max = options.max;
+                slider.step = options.step ?? 1;
                 slider.type = "range";
                 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 );
+
+                slider.addEventListener( "mousedown", function( e ) {
+                    if( options.onPress )
+                    {
+                        options.onPress.bind( slider )( e, slider );
+                    }
+                }, false );
+
+                slider.addEventListener( "mouseup", function( e ) {
+                    if( options.onRelease )
+                    {
+                        options.onRelease.bind( slider )( e, slider );
+                    }
+                }, false );
+
                 box.appendChild( slider );
+
+                // Method to change min, max, step parameters
+                widget.setLimits = ( newMin, newMax, newStep ) => {
+                    vecinput.min = slider.min = newMin ?? vecinput.min;
+                    vecinput.max = slider.max = newMax ?? vecinput.max;
+                    vecinput.step = newStep ?? vecinput.step;
+                    slider.step = newStep ?? slider.step;
+                    Panel._dispatch_event( vecinput, "change", true );
+                };
             }
 
             // Add wheel input
@@ -5092,30 +5340,42 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             vecinput.addEventListener( "wheel", function( e ) {
                 e.preventDefault();
                 if( this !== document.activeElement )
+                {
                     return;
+                }
                 let mult = options.step ?? 1;
                 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 });
 
             vecinput.addEventListener( "change", e => {
 
                 if( isNaN( e.target.valueAsNumber ) )
+                {
                     return;
+                }
 
                 const skipCallback = e.detail;
 
                 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 )
                 {
@@ -5132,28 +5392,40 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             var that = this;
             var lastY = 0;
-            function inner_mousedown(e) {
-                if(document.activeElement == vecinput) return;
+
+            function inner_mousedown( e )
+            {
+                if( document.activeElement == vecinput )
+                {
+                    return;
+                }
+
                 var doc = that.root.ownerDocument;
-                doc.addEventListener("mousemove",inner_mousemove);
-                doc.addEventListener("mouseup",inner_mouseup);
+                doc.addEventListener( 'mousemove', inner_mousemove );
+                doc.addEventListener( 'mouseup', inner_mouseup );
                 lastY = e.pageY;
-                document.body.classList.add('nocursor');
-                document.body.classList.add('noevents');
-                drag_icon.classList.remove('hidden');
+                document.body.classList.add( 'nocursor' );
+                document.body.classList.add( 'noevents' );
+                dragIcon.classList.remove( 'hidden' );
                 e.stopImmediatePropagation();
                 e.stopPropagation();
+
+                if( options.onPress )
+                {
+                    options.onPress.bind( vecinput )( e, vecinput );
+                }
             }
 
-            function inner_mousemove(e) {
-                if (lastY != e.pageY) {
+            function inner_mousemove( e )
+            {
+                if ( lastY != e.pageY ) {
                     let dt = lastY - e.pageY;
                     let mult = options.step ?? 1;
-                    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");
+                    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" );
                 }
 
                 lastY = e.pageY;
@@ -5161,20 +5433,27 @@ 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');
+                doc.removeEventListener( 'mousemove', inner_mousemove );
+                doc.removeEventListener( 'mouseup', inner_mouseup );
+                document.body.classList.remove( 'nocursor' );
+                document.body.classList.remove( 'noevents' );
+                dragIcon.classList.add( 'hidden' );
+
+                if( options.onRelease )
+                {
+                    options.onRelease.bind( vecinput )( e, vecinput );
+                }
             }
             
-            container.appendChild(box);
-            element.appendChild(container);
+            container.appendChild( box );
+            element.appendChild( container );
 
             // Remove branch padding and margins
-            if(!widget.name) {
+            if( !widget.name )
+            {
                 element.className += " noname";
                 container.style.width = "100%";
             }
@@ -5182,14 +5461,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             return widget;
         }
 
-        static VECTOR_COMPONENTS = {0: 'x', 1: 'y', 2: 'z', 3: 'w'};
+        static VECTOR_COMPONENTS = { 0: 'x', 1: 'y', 2: 'z', 3: 'w' };
 
         _add_vector( num_components, name, value, callback, options = {} ) {
 
             num_components = clamp( num_components, 2, 4 );
             value = value ?? new Array( num_components ).fill( 0 );
 
-            if( !name ) {
+            if( !name )
+            {
                 throw( "Set Widget Name!" );
             }
 
@@ -5199,14 +5479,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 let inputs = element.querySelectorAll( "input" );
                 let value = [];
                 for( var v of inputs )
+                {
                     value.push( +v.value );
+                }
                 return value;
             };
+
             widget.onSetValue = ( newValue, skipCallback ) => {
                 const inputs = element.querySelectorAll( ".vecinput" );
-                for( var i = 0; i < inputs.length; ++i ) {
+                if( inputs.length == newValue.length )
+                {
+                    console.error( "Input length does not match vector length." );
+                    return;
+                }
+
+                for( let 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 );
                 }
             };
@@ -5224,7 +5513,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // Add widget value
 
-            var container = document.createElement('div');
+            var container = document.createElement( 'div' );
             container.className = "lexvector";        
             container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
@@ -5246,21 +5535,21 @@ 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 ) {
+                if( options.disabled )
+                {
                     vecinput.disabled = true;
                 }
 
                 // Add wheel input
-
                 vecinput.addEventListener( "wheel", function( e ) {
                     e.preventDefault();
                     if( this !== document.activeElement )
@@ -5269,14 +5558,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 );
-                            Panel._dispatch_event(v, "change");
+                        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 } );
@@ -5289,7 +5581,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 )
@@ -5298,13 +5590,14 @@ 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;
                             value[ v.idx ] = val;
                         }
-                    } else {
+                    } else
+                    {
                         vecinput.value = val;
                         value[ e.target.idx ] = val;
                     }
@@ -5318,35 +5611,48 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 var that = this;
                 var lastY = 0;
-                function inner_mousedown(e) {
-                    if(document.activeElement == vecinput) return;
+                function inner_mousedown( e )
+                {
+                    if( document.activeElement == vecinput )
+                    {
+                        return;
+                    }
+
                     var doc = that.root.ownerDocument;
-                    doc.addEventListener("mousemove",inner_mousemove);
-                    doc.addEventListener("mouseup",inner_mouseup);
+                    doc.addEventListener( 'mousemove', inner_mousemove );
+                    doc.addEventListener( 'mouseup', inner_mouseup );
                     lastY = e.pageY;
-                    document.body.classList.add('nocursor');
-                    document.body.classList.add('noevents');
-                    drag_icon.classList.remove('hidden');
+                    document.body.classList.add( 'nocursor' );
+                    document.body.classList.add( 'noevents' );
+                    dragIcon.classList.remove( 'hidden' );
                     e.stopImmediatePropagation();
                     e.stopPropagation();
+
+                    if( options.onPress )
+                    {
+                        options.onPress.bind( vecinput )( e, vecinput );
+                    }
                 }
 
-                function inner_mousemove(e) {
-                    if (lastY != e.pageY) {
+                function inner_mousemove( e )
+                {
+                    if ( lastY != e.pageY ) {
                         let dt = lastY - e.pageY;
                         let mult = options.step ?? 1;
-                        if(e.shiftKey) mult = 10;
-                        else if(e.altKey) mult = 0.1;
+                        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);
-                                Panel._dispatch_event(v, "change");
+                            for( let v of element.querySelectorAll( ".vecinput" ) ) {
+                                v.value = round( +v.valueAsNumber + mult * dt, options.precision );
+                                Panel._dispatch_event( v, "change" );
                             }
-                        } else {
-                            vecinput.value = (+vecinput.valueAsNumber + mult * dt).toPrecision(5);
-                            Panel._dispatch_event(vecinput, "change");
+                        }
+                        else
+                        {
+                            vecinput.value = round( +vecinput.valueAsNumber + mult * dt, options.precision );
+                            Panel._dispatch_event( vecinput, "change" );
                         }
                     }
 
@@ -5355,34 +5661,59 @@ 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');
+                    doc.removeEventListener( 'mousemove', inner_mousemove );
+                    doc.removeEventListener( 'mouseup', inner_mouseup );
+                    document.body.classList.remove( 'nocursor' );
+                    document.body.classList.remove( 'noevents' );
+                    dragIcon.classList.add('hidden');
+
+                    if( options.onRelease )
+                    {
+                        options.onRelease.bind( vecinput )( e, vecinput );
+                    }
                 }
-                
-                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) {
+            // Method to change min, max, step parameters
+            if( options.min !== undefined || options.max !== undefined )
+            {
+                widget.setLimits = ( newMin, newMax, newStep ) => {
+                    const inputs = element.querySelectorAll(".vecinput");
+                    for( let v of inputs )
+                    {
+                        v.min = newMin ?? v.min;
+                        v.max = newMax ?? v.max;
+                        v.step = newStep ?? v.step;
+                        Panel._dispatch_event( v, "change", true );
+                    }
+
+                    // To call onChange callback
+                    this._trigger( new IEvent( name, value ), callback );
+                };
+            }
+
+            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");
-                    this.classList.remove("fa-lock-open");
+                if( this.locked )
+                {
+                    this.classList.add( "fa-lock" );
+                    this.classList.remove( "fa-lock-open" );
                 } else {
-                    this.classList.add("fa-lock-open");
-                    this.classList.remove("fa-lock");
+                    this.classList.add( "fa-lock-open" );
+                    this.classList.remove( "fa-lock" );
                 }
-            }, false);
+            }, false );
             
-            element.appendChild(container);
+            element.appendChild( container );
 
             return widget;
         }
@@ -5396,21 +5727,231 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * disabled: Make the widget disabled [false]
          * step: Step of the inputs
          * min, max: Min and Max values for the inputs
+         * onPress: Callback function on mouse down
+         * onRelease: Callback function on mouse up
          */
 
         addVector2( name, value, callback, options ) {
 
-            return this._add_vector(2, name, value, callback, options);
+            return this._add_vector( 2, name, value, callback, options );
         }
 
         addVector3( name, value, callback, options ) {
 
-            return this._add_vector(3, name, value, callback, options);
+            return this._add_vector( 3, name, value, callback, options );
         }
 
         addVector4( name, value, callback, options ) {
 
-            return this._add_vector(4, name, value, callback, options);
+            return this._add_vector( 4, name, value, callback, options );
+        }
+
+        /**
+         * @method addSize
+         * @param {String} name Widget name
+         * @param {Number} value Default number value
+         * @param {Function} callback Callback function on change
+         * @param {*} options:
+         * disabled: Make the widget disabled [false]
+         * units: Unit as string added to the end of the value
+         */
+
+        addSize( name, value, callback, options = {} ) {
+
+            let widget = this.create_widget( name, Widget.SIZE, options );
+
+            widget.onGetValue = () => {
+                const value = [];
+                for( let i = 0; i < element.dimensions.length; ++i )
+                {
+                    value.push( element.dimensions[ i ].onGetValue() );
+                }
+                return value;
+            };
+
+            widget.onSetValue = ( newValue, skipCallback ) => {
+                for( let i = 0; i < element.dimensions.length; ++i )
+                {
+                    element.dimensions[ i ].onSetValue( newValue[ i ], skipCallback );
+                }
+            };
+
+            let element = widget.domEl;
+
+            this.queue( element );
+
+            element.dimensions = [];
+
+            for( let i = 0; i < value.length; ++i )
+            {
+                const size = measureRealWidth( JSON.stringify( value[ i ] ), 24 ) + 'px';
+                element.dimensions[ i ] = this.addNumber( null, value[ i ], ( v ) => {
+
+                    const value = [];
+
+                    for( let i = 0; i < element.dimensions.length; ++i )
+                    {
+                        value.push( element.dimensions[ i ].onGetValue() );
+                    }
+
+                    if( callback )
+                    {
+                        callback( value );
+                    }
+
+                }, { width: size, min: 0, disabled: options.disabled } );
+
+                if( ( i + 1 ) != value.length )
+                {
+                    let cross = document.createElement( 'a' );
+                    cross.className = "lexsizecross fa-solid fa-xmark";
+                    element.appendChild( cross );
+                }
+            }
+
+            this.clearQueue();
+
+            if( options.units )
+            {
+                let unitSpan = document.createElement( 'span' );
+                unitSpan.className = "lexunit";
+                unitSpan.innerText = options.units;
+                element.appendChild( unitSpan );
+            }
+
+            // Remove branch padding and margins
+            if( !widget.name )
+            {
+                element.className += " noname";
+                container.style.width = "100%";
+            }
+
+            return widget;
+        }
+
+        /**
+         * @method addPad
+         * @param {String} name Widget name
+         * @param {Number} value Pad value
+         * @param {Function} callback Callback function on change
+         * @param {*} options:
+         * disabled: Make the widget disabled [false]
+         * min, max: Min and Max values
+         * onPress: Callback function on mouse down
+         * onRelease: Callback function on mouse up
+         */
+
+        addPad( name, value, callback, options = {} ) {
+
+            if( !name )
+            {
+                throw( "Set Widget Name!" );
+            }
+
+            let widget = this.create_widget( name, Widget.PAD, options );
+
+            widget.onGetValue = () => {
+                return thumb.value.xy;
+            };
+
+            widget.onSetValue = ( newValue, skipCallback ) => {
+                thumb.value.set( newValue[ 0 ], newValue[ 1 ] );
+                _updateValue( thumb.value );
+                if( !skipCallback )
+                {
+                    this._trigger( new IEvent( name, thumb.value.xy ), callback );
+                }
+            };
+
+            let element = widget.domEl;
+
+            var container = document.createElement( 'div' );
+            container.className = "lexpad";
+            container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+
+            let pad = document.createElement('div');
+            pad.id = "lexpad-" + name;
+            pad.className = "lexinnerpad";
+            pad.style.width = options.padSize ?? '96px';
+            pad.style.height = options.padSize ?? '96px';
+
+            let thumb = document.createElement('div');
+            thumb.className = "lexpadthumb";
+            thumb.value = new LX.vec2( value[ 0 ], value[ 1 ] );
+            thumb.min = options.min ?? 0;
+            thumb.max = options.max ?? 1;
+
+            let _updateValue = v => {
+                const [ w, h ] = [ pad.offsetWidth, pad.offsetHeight ];
+                const value0to1 = new LX.vec2( remapRange( v.x, thumb.min, thumb.max, 0.0, 1.0 ), remapRange( v.y, thumb.min, thumb.max, 0.0, 1.0 ) );
+                thumb.style.transform = `translate(calc( ${ w * value0to1.x }px - 50% ), calc( ${ h * value0to1.y }px - 50%)`;
+            }
+
+            doAsync( () => {
+                _updateValue( thumb.value )
+            } );
+
+            pad.appendChild( thumb );
+            container.appendChild( pad );
+            element.appendChild( container );
+
+            pad.addEventListener( "mousedown", innerMouseDown );
+
+            let that = this;
+
+            function innerMouseDown( e )
+            {
+                if( document.activeElement == thumb )
+                {
+                    return;
+                }
+
+                var doc = that.root.ownerDocument;
+                doc.addEventListener( 'mousemove', innerMouseMove );
+                doc.addEventListener( 'mouseup', innerMouseUp );
+                document.body.classList.add( 'nocursor' );
+                document.body.classList.add( 'noevents' );
+                e.stopImmediatePropagation();
+                e.stopPropagation();
+
+                if( options.onPress )
+                {
+                    options.onPress.bind( thumb )( e, thumb );
+                }
+            }
+
+            function innerMouseMove( e )
+            {
+                const rect = pad.getBoundingClientRect();
+                const relativePosition = new LX.vec2( e.x - rect.x, e.y - rect.y );
+                relativePosition.clp( 0.0, pad.offsetWidth, relativePosition);
+                const [ w, h ] = [ pad.offsetWidth, pad.offsetHeight ];
+                const value0to1 = relativePosition.div( new LX.vec2( pad.offsetWidth, pad.offsetHeight ) );
+
+                thumb.style.transform = `translate(calc( ${ w * value0to1.x }px - 50% ), calc( ${ h * value0to1.y }px - 50%)`;
+                thumb.value = new LX.vec2( remapRange( value0to1.x, 0.0, 1.0, thumb.min, thumb.max ), remapRange( value0to1.y, 0.0, 1.0, thumb.min, thumb.max ) );
+
+                that._trigger( new IEvent( name, thumb.value.xy, e ), callback );
+
+                e.stopPropagation();
+                e.preventDefault();
+            }
+
+            function innerMouseUp( e )
+            {
+                var doc = that.root.ownerDocument;
+                doc.removeEventListener( 'mousemove', innerMouseMove );
+                doc.removeEventListener( 'mouseup', innerMouseUp );
+                document.body.classList.remove( 'nocursor' );
+                document.body.classList.remove( 'noevents' );
+
+                if( options.onRelease )
+                {
+                    options.onRelease.bind( thumb )( e, thumb );
+                }
+            }
+
+            return widget;
         }
 
         /**
@@ -5911,8 +6452,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.grabber = grabber;
 
-            function getBranchHeight(){
-                
+            function getBranchHeight() {
                 return that.root.offsetHeight - that.root.children[0].offsetHeight;
             }
 
@@ -5966,20 +6506,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             var size = this.grabber.style.marginLeft;
 
             // Update sizes of widgets inside
-            for(var i = 0; i < this.widgets.length;i++) {
+            for(var i = 0; i < this.widgets.length; i++) {
 
-                let widget = this.widgets[i];
+                let widget = this.widgets[ i ];
                 let element = widget.domEl;
 
-                if(element.children.length < 2)
+                if( element.children.length < 2 )
+                {
                     continue;
+                }
 
-                var name = element.children[0];
-                var value = element.children[1];
+                var name = element.children[ 0 ];
+                var value = element.children[ 1 ];
 
                 name.style.width = size;
                 let padding = "0px";
-                switch(widget.type) {
+                switch( widget.type )
+                {
                     case Widget.FILE:
                         padding = "10%";
                         break;
@@ -5992,7 +6535,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 value.style.width = "-webkit-calc( 100% - " + size + " - " + padding + " )";
                 value.style.width = "calc( 100% - " + size + " - " + padding + " )";
 
-                if(widget.onresize) widget.onresize();
+                if( widget.onresize )
+                {
+                    widget.onresize();
+                }
             }
         }
     };
@@ -6009,8 +6555,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         constructor( title, callback, options = {} ) {
             
-            if(!callback)
-            console.warn("Content is empty, add some widgets using 'callback' parameter!");
+            if( !callback )
+            {
+                console.warn("Content is empty, add some widgets using 'callback' parameter!");
+            }
 
             this._oncreate = callback;
             this.id = simple_guidGenerator();
@@ -6020,8 +6568,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 draggable = options.draggable ?? true,
                 modal = options.modal ?? false;
 
-            if(modal)
-                LX.modal.toggle(false);
+            if( modal )
+            {
+                LX.modal.toggle( false );
+            }
 
             var root = document.createElement('div');
             root.className = "lexdialog " + (options.class ?? "");
@@ -6032,8 +6582,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             var titleDiv = document.createElement('div');
 
-            if(title) {
-
+            if( title )
+            {
                 titleDiv.className = "lexdialogtitle";
                 titleDiv.innerHTML = title;
                 titleDiv.setAttribute('draggable', false);
@@ -6137,7 +6687,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.title = titleDiv;
 
             if( draggable )
-                makeDraggable( root, { targetClass: 'lexdialogtitle' } );
+            {
+                makeDraggable( root, Object.assign( { targetClass: 'lexdialogtitle' }, options ) );
+            }
 
             // Process position and size
             if(size.length && typeof(size[0]) != "string")
@@ -6302,7 +6854,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";
@@ -6311,28 +6864,42 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
         }
 
-        _adjust_position(div, margin, useAbsolute = false) {
-            
+        _adjust_position( div, margin, useAbsolute = false ) {
+
             let rect = div.getBoundingClientRect();
             
-            if(!useAbsolute)
+            if( !useAbsolute )
             {   
-                let width = rect.width + 36; // this has paddings
-                if(window.innerWidth - rect.right < 0)
+                let width = rect.width;
+                if( rect.left < 0 )
+                {
+                    div.style.left = margin + "px";
+                }
+                else if( window.innerWidth - rect.right < 0 )
+                {
                     div.style.left = (window.innerWidth - width - margin) + "px";
+                }
 
-                if(rect.top + rect.height > window.innerHeight)
+                if( rect.top < 0 )
+                {
+                    div.style.top = margin + "px";
+                }
+                else if( (rect.top + rect.height) > window.innerHeight )
+                {
                     div.style.top = (window.innerHeight - rect.height - margin) + "px";
+                }
             }
             else
             {
                 let dt = window.innerWidth - rect.right;
-                if(dt < 0) {
+                if( dt < 0 )
+                {
                     div.style.left = div.offsetLeft + (dt - margin) + "px";
                 }
                 
                 dt = window.innerHeight - (rect.top + rect.height);
-                if(dt < 0) {
+                if( dt < 0 )
+                {
                     div.style.top = div.offsetTop + (dt - margin + 20 ) + "px";
                 }
             }
@@ -6358,7 +6925,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 );
         }
 
@@ -6432,7 +6998,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 = {} ) {
@@ -6537,10 +7103,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();