lexgui 0.1.37 → 0.1.40

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.37",
+        version: "0.1.40",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -30,6 +30,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
     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);
@@ -167,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();
@@ -218,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 );
             }
@@ -665,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";
@@ -819,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");
@@ -1141,7 +1200,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 // Send area resize to every widget in the area
                 for( let widget of widgets )
                 {
-                    const jsInstance = widget.jsIinstance;
+                    const jsInstance = widget.jsInstance;
 
                     if( jsInstance.onresize )
                     {
@@ -1181,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" );
         }
 
         /**
@@ -1207,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;
@@ -1877,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();
@@ -1892,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;
@@ -2463,6 +2539,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         static CUSTOM       = 21;
         static SEPARATOR    = 22;
         static KNOB         = 23;
+        static SIZE         = 24;
+        static PAD          = 25;
+        static FORM         = 26;
 
         static NO_CONTEXT_TYPES = [
             Widget.BUTTON,
@@ -2520,14 +2599,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";
@@ -2545,6 +2626,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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.FORM: return "Form";
                 case Widget.CUSTOM: return this.customName;
             }
         }
@@ -2639,40 +2723,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;
                         }
                     }
@@ -2710,37 +2804,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
@@ -2760,18 +2857,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;
                 }
@@ -2787,16 +2886,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 );
@@ -2804,37 +2905,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 );
                     }
@@ -2852,10 +3026,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();
+                    }
                 }
             });
 
@@ -2961,7 +3138,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;
@@ -3099,19 +3276,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 );
         }
 
         /**
@@ -3290,9 +3473,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 ) {
@@ -3300,8 +3483,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;
         }
 
@@ -3311,39 +3494,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.hideName ?? false) )
                 {
-                    let domName = document.createElement('div');
+                    let domName = document.createElement( 'div' );
                     domName.className = "lexwidgetname";
                     if( options.justifyName )
                     {
@@ -3356,26 +3545,32 @@ 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 );
             }
 
             widget.domEl = element;
+            element.jsInstance = widget;
 
             const insert_widget = el => {
                 if(options.container)
@@ -3445,7 +3640,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.className += " lexfilter noname";
             
             let input = document.createElement('input');
-            input.id = 'input-filter';
+            input.className = 'lexinput-filter';
             input.setAttribute("placeholder", options.placeholder);
             input.style.width =  "calc( 100% - 17px )";
             input.value = options.filterValue || "";
@@ -4030,7 +4225,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addCard( name, options = {} ) {
 
-            options.no_name = true;
+            options.hideName = true;
             let widget = this.create_widget(name, Widget.CARD, options);
             let element = widget.domEl;
 
@@ -4081,6 +4276,89 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             return widget;
         }
 
+        /**
+         * @method addForm
+         * @param {String} name Widget name
+         * @param {Object} data Form data
+         * @param {Function} callback Callback function on submit form
+         * @param {*} options:
+         * actionName: Text to be shown in the button
+         */
+
+        addForm( name, data, callback, options = {} ) {
+
+            if( data.constructor != Object )
+            {
+                console.error( "Form data must be an Object" );
+                return;
+            }
+
+            // Always hide name for this one
+            options.hideName = true;
+
+            let widget = this.create_widget( name, Widget.FORM, options );
+
+            widget.onGetValue = () => {
+                return container.formData;
+            };
+
+            widget.onSetValue = ( newValue, skipCallback ) => {
+                container.formData = newValue;
+                const entries = container.querySelectorAll( ".lexwidget" );
+                for( let i = 0; i < entries.length; ++i )
+                {
+                    const entry = entries[ i ];
+                    if( entry.jsInstance.type != LX.Widget.TEXT )
+                    {
+                        continue;
+                    }
+                    let entryName = entries[ i ].querySelector( ".lexwidgetname" ).innerText;
+                    let entryInput = entries[ i ].querySelector( ".lextext input" );
+                    entryInput.value = newValue[ entryName ] ?? "";
+                    Panel._dispatch_event( entryInput, "focusout", skipCallback );
+                }
+            };
+
+            // Add widget value
+
+            let element = widget.domEl;
+
+            let container = document.createElement( 'div' );
+            container.className = "lexformdata";
+
+            this.queue( container );
+
+            container.formData = {};
+
+            for( let entry in data )
+            {
+                const entryData = data[ entry ];
+                this.addText( entry, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
+                    container.formData[ entry ] = value;
+                }, entryData );
+
+                container.formData[ entry ] = entryData.constructor == Object ? entryData.value : entryData;
+            }
+
+            this.addButton( null, options.actionName ?? "Submit", ( value, event ) => {
+                if( callback )
+                {
+                    callback( container.formData, event );
+                }
+            } );
+
+            this.clearQueue();
+
+            element.appendChild( container );
+
+            if( !widget.name || options.hideName ) {
+                element.className += " noname";
+                container.style.width = "100%";
+            }
+
+            return widget;
+        }
+
         /**
          * @method addContent
          * @param {HTMLElement} element
@@ -4105,27 +4383,29 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         async addImage( url, options = {} ) {
 
             if( !url )
-            return;
+            {
+                return;
+            }
 
-            options.no_name = true;
-            let widget = this.create_widget(null, Widget.IMAGE, options);
+            options.hideName = true;
+            let widget = this.create_widget( null, Widget.IMAGE, options );
             let element = widget.domEl;
 
-            let container = document.createElement('div');
+            let container = document.createElement( 'div' );
             container.className = "leximage";
             container.style.width = "100%";
 
-            let img = document.createElement('img');
+            let img = document.createElement( 'img' );
             img.src = url;
 
-            for(let s in options.style) {
-
-                img.style[s] = options.style[s];
+            for( let s in options.style )
+            {
+                img.style[ s ] = options.style[ s ];
             }
 
             await img.decode();
-            container.appendChild(img);
-            element.appendChild(container);
+            container.appendChild( img );
+            element.appendChild( container );
 
             return widget;
         }
@@ -4224,7 +4504,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     setTimeout( () => delete this.unfocus_event, 200 );
                 } else if ( e.relatedTarget && e.relatedTarget.tagName == "INPUT" ) {
                     return;
-                }else if ( e.target.id == 'input-filter' ) {
+                }else if ( e.target.id == 'lexinput-filter' ) {
                     return;
                 }
                 this.toggleAttribute( 'hidden', true );
@@ -5027,6 +5307,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * 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 = {} ) {
@@ -5036,6 +5318,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             widget.onGetValue = () => {
                 return +vecinput.value;
             };
+
             widget.onSetValue = ( newValue, skipCallback ) => {
                 vecinput.value = round( newValue, options.precision );
                 Panel._dispatch_event( vecinput, "change", skipCallback );
@@ -5078,16 +5361,6 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             vecinput.value = vecinput.iValue = value;
             box.appendChild( vecinput );
 
-            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.units )
             {
                 let unitSpan = document.createElement( 'span' );
@@ -5107,21 +5380,47 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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 = 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
@@ -5129,7 +5428,9 @@ 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;
@@ -5141,7 +5442,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             vecinput.addEventListener( "change", e => {
 
                 if( isNaN( e.target.valueAsNumber ) )
+                {
                     return;
+                }
 
                 const skipCallback = e.detail;
 
@@ -5176,50 +5479,76 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             vecinput.addEventListener( "mousedown", inner_mousedown );
 
             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);
-                lastY = e.pageY;
-                document.body.classList.add('nocursor');
-                document.body.classList.add('noevents');
-                dragIcon.classList.remove('hidden');
+                doc.addEventListener( 'mousemove', inner_mousemove );
+                doc.addEventListener( 'mouseup', inner_mouseup );
+                document.body.classList.add( 'noevents' );
+                dragIcon.classList.remove( 'hidden' );
                 e.stopImmediatePropagation();
                 e.stopPropagation();
+
+                if( !document.pointerLockElement )
+                {
+                    vecinput.requestPointerLock();
+                }
+
+                if( options.onPress )
+                {
+                    options.onPress.bind( vecinput )( e, vecinput );
+                }
             }
 
-            function inner_mousemove(e) {
-                if (lastY != e.pageY) {
-                    let dt = lastY - e.pageY;
+            function inner_mousemove( e )
+            {
+                let dt = -e.movementY;
+
+                if ( dt != 0 )
+                {
                     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');
+                    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;
                 e.stopPropagation();
                 e.preventDefault();
             }
 
-            function inner_mouseup(e) {
+            function inner_mouseup( e )
+            {
                 var doc = that.root.ownerDocument;
-                doc.removeEventListener("mousemove",inner_mousemove);
-                doc.removeEventListener("mouseup",inner_mouseup);
-                document.body.classList.remove('nocursor');
-                document.body.classList.remove('noevents');
-                dragIcon.classList.add('hidden');
+                doc.removeEventListener( 'mousemove', inner_mousemove );
+                doc.removeEventListener( 'mouseup', inner_mouseup );
+                document.body.classList.remove( 'noevents' );
+                dragIcon.classList.add( 'hidden' );
+
+                if( document.pointerLockElement )
+                {
+                    document.exitPointerLock();
+                }
+
+                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%";
             }
@@ -5227,14 +5556,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!" );
             }
 
@@ -5244,9 +5574,12 @@ 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" );
                 if( inputs.length == newValue.length )
@@ -5255,7 +5588,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     return;
                 }
 
-                for( var i = 0; i < inputs.length; ++i ) {
+                for( let i = 0; i < inputs.length; ++i ) {
                     let value = newValue[ i ];
                     inputs[ i ].value = round( value, options.precision ) ?? 0;
                     Panel._dispatch_event( inputs[ i ], "change", skipCallback );
@@ -5275,7 +5608,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 + ")";
 
@@ -5296,7 +5629,7 @@ 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 ] = clamp( value[ i ], +vecinput.min, +vecinput.max );
                     value[ i ] = round( value[ i ], options.precision );
                 }
 
@@ -5306,12 +5639,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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 )
@@ -5325,7 +5658,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         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");
+                            Panel._dispatch_event( v, "change" );
                         }
                     }
                     else
@@ -5338,7 +5671,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 vecinput.addEventListener( "change", e => {
 
                     if( isNaN( e.target.value ) )
+                    {
                         return;
+                    }
 
                     const skipCallback = e.detail;
 
@@ -5349,7 +5684,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if( !skipCallback )
                     {
                         let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                        if( btn ) btn.style.display = val != vecinput.iValue ? "block": "none";
+                        if( btn ) btn.style.display = val != vecinput.iValue ? "block" : "none";
                     }
 
                     if( locker.locked )
@@ -5358,7 +5693,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                             v.value = val;
                             value[ v.idx ] = val;
                         }
-                    } else {
+                    }
+                    else
+                    {
                         vecinput.value = val;
                         value[ e.target.idx ] = val;
                     }
@@ -5371,70 +5708,118 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 vecinput.addEventListener( "mousedown", inner_mousedown );
 
                 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);
-                    lastY = e.pageY;
-                    document.body.classList.add('nocursor');
-                    document.body.classList.add('noevents');
-                    dragIcon.classList.remove('hidden');
+                    doc.addEventListener( 'mousemove', inner_mousemove );
+                    doc.addEventListener( 'mouseup', inner_mouseup );
+                    document.body.classList.add( 'nocursor' );
+                    document.body.classList.add( 'noevents' );
+                    dragIcon.classList.remove( 'hidden' );
                     e.stopImmediatePropagation();
                     e.stopPropagation();
+
+                    if( !document.pointerLockElement )
+                    {
+                        vecinput.requestPointerLock();
+                    }
+
+                    if( options.onPress )
+                    {
+                        options.onPress.bind( vecinput )( e, vecinput );
+                    }
                 }
 
-                function inner_mousemove(e) {
-                    if (lastY != e.pageY) {
-                        let dt = lastY - e.pageY;
+                function inner_mousemove( e )
+                {
+                    let dt = -e.movementY;
+
+                    if ( dt != 0 )
+                    {
                         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( locker.locked )
                         {
-                            for( let v of element.querySelectorAll(".vecinput") ) {
+                            for( let v of element.querySelectorAll( ".vecinput" ) ) {
                                 v.value = round( +v.valueAsNumber + mult * dt, options.precision );
-                                Panel._dispatch_event(v, "change");
+                                Panel._dispatch_event( v, "change" );
                             }
-                        } else {
+                        }
+                        else
+                        {
                             vecinput.value = round( +vecinput.valueAsNumber + mult * dt, options.precision );
-                            Panel._dispatch_event(vecinput, "change");
+                            Panel._dispatch_event( vecinput, "change" );
                         }
                     }
 
-                    lastY = e.pageY;
                     e.stopPropagation();
                     e.preventDefault();
                 }
 
-                function inner_mouseup( e ) {
+                function inner_mouseup( e )
+                {
                     var doc = that.root.ownerDocument;
-                    doc.removeEventListener("mousemove",inner_mousemove);
-                    doc.removeEventListener("mouseup",inner_mouseup);
-                    document.body.classList.remove('nocursor');
-                    document.body.classList.remove('noevents');
+                    doc.removeEventListener( 'mousemove', inner_mousemove );
+                    doc.removeEventListener( 'mouseup', inner_mouseup );
+                    document.body.classList.remove( 'noevents' );
                     dragIcon.classList.add('hidden');
+
+                    if( document.pointerLockElement )
+                    {
+                        document.exitPointerLock();
+                    }
+
+                    if( options.onRelease )
+                    {
+                        options.onRelease.bind( vecinput )( e, vecinput );
+                    }
                 }
 
                 box.appendChild( vecinput );
                 container.appendChild( box );
             }
 
-            let locker = document.createElement('a');
+            // 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) {
+            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");
-                } else {
-                    this.classList.add("fa-lock-open");
-                    this.classList.remove("fa-lock");
-                }
-            }, false);
+                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" );
+                }
+            }, false );
             
             element.appendChild( container );
 
@@ -5450,21 +5835,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;
         }
 
         /**
@@ -5965,8 +6560,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;
             }
 
@@ -6020,20 +6614,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;
@@ -6046,7 +6643,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();
+                }
             }
         }
     };
@@ -6063,8 +6663,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();
@@ -6074,8 +6676,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 ?? "");
@@ -6086,8 +6690,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);
@@ -6191,7 +6795,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")
@@ -6366,28 +6972,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;
-                if(window.innerWidth - rect.right < 0)
+                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";
                 }
             }