lexgui 0.1.37 → 0.1.40

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.37",
+    version: "0.1.40",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -26,9 +26,11 @@ LX.CURVE_MOVEOUT_DELETE = 1;
 
 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 )
 {
@@ -105,6 +107,18 @@ function rgbToHex( rgb ) {
 
 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);
@@ -166,36 +180,69 @@ class vec2 {
     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;
@@ -203,7 +250,7 @@ function makeDraggable( domEl, options = { } ) {
 
     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 ) {
@@ -217,15 +264,21 @@ function makeDraggable( domEl, options = { } ) {
         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 );
         }
@@ -666,7 +719,8 @@ class TreeEvent {
     }
     
     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";
@@ -820,7 +874,9 @@ class Area {
             
             const draggable = options.draggable ?? true;
             if( draggable )
-                makeDraggable( root );
+            {
+                makeDraggable( root, options );
+            }
 
             if( options.resizeable ) {
                 root.classList.add("resizeable");
@@ -1142,7 +1198,7 @@ class Area {
             // 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 )
                 {
@@ -1182,23 +1238,33 @@ class Area {
     * @method resize
     * Resize element
     */
-    setSize(size) {
+    setSize( size ) {
         
-        let [width, height] = size;
+        let [ width, height ] = size;
 
-        if(width != undefined && width.constructor == Number)
+        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" );
     }
 
     /**
@@ -1208,7 +1274,9 @@ class Area {
     extend() {
 
         if( this.split_extended )
-        return;
+        {
+            return;
+        }
 
         let [area1, area2] = this.sections;
         this.split_extended = true;
@@ -1877,11 +1945,15 @@ class Tabs {
 
         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 +1964,12 @@ class Tabs {
         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 +2536,9 @@ class Widget {
     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 +2596,16 @@ class Widget {
 
     paste() {
         if( !this._can_paste() )
-        return;
+        {
+            return;
+        }
 
-        this.set(navigator.clipboard.data);
+        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 +2623,9 @@ class Widget {
             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 +2720,50 @@ function ADD_CUSTOM_WIDGET( custom_widget_name, options = {} )
             custom_widgets.className = "lexcustomitems";
             custom_widgets.toggleAttribute('hidden', true);
             
-            element.appendChild(container);
-            element.appendChild(custom_widgets);
+            element.appendChild( container );
+            element.appendChild( custom_widgets );
+
+            if( instance )
+            {
 
-            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;
                     }
                 }
@@ -2711,37 +2802,40 @@ class NodeTree {
     _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 || node.selected;
+        let isParent = node.children.length > 0;
+        let isSelected = this.selected.indexOf( node ) > -1 || node.selected;
         
-        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
@@ -2761,18 +2855,20 @@ class NodeTree {
 
         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;
             }
@@ -2788,16 +2884,18 @@ class NodeTree {
             }
 
             // 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 );
@@ -2820,85 +2918,87 @@ class NodeTree {
             }
         });
 
-        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;
 
-                LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.value, m => {
-                    event.panel = m;
-                });
+            if( that.onevent )
+            {
+                return;
+            }
 
-                that.onevent( event );
+            const event = new TreeEvent(TreeEvent.NODE_CONTEXTMENU, this.selected.length > 1 ? this.selected : node, e);
+            event.multiple = this.selected.length > 1;
 
-                if( ( this.options.addDefault ?? false ) == true )
+            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 )
                 {
-                    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( "Clone", { callback: () => {
-    
-                    // } } );
-    
-                    event.panel.add( "Delete", { callback: () => {
-    
-                        // It's the root node
-                        if( !node.parent )
+                    event.panel.add( "" );
+                }
+
+                event.panel.add( "Select Children", () => {
+
+                    const selectChildren = ( n ) => {
+
+                        if( n.closed )
                         {
                             return;
                         }
-    
-                        if( that.onevent ) {
-                            const event = new TreeEvent( TreeEvent.NODE_DELETED, node, e );
-                            that.onevent( event );
+
+                        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 );
                         }
-    
-                        // Delete nodes now
-                        let childs = node.parent.children;
-                        const index = childs.indexOf( node );
-                        childs.splice( index, 1 );
-    
-                        this.refresh();
-                    } } );
-                }
+                    };
+
+                    // 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;
+            }
 
             e.preventDefault();
 
@@ -2927,7 +3027,10 @@ class NodeTree {
                 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();
+                }
             }
         });
 
@@ -3033,7 +3136,7 @@ class NodeTree {
         let handled = false;
 
         // Show/hide children
-        if(is_parent) {
+        if(isParent) {
             item.querySelector('a.hierarchy').addEventListener("click", function(e) {
                 
                 handled = true;
@@ -3171,19 +3274,25 @@ class Panel {
     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 );
     }
 
     /**
@@ -3363,8 +3472,8 @@ class Panel {
     }
 
     static _dispatch_event( element, type, data, bubbles, cancelable ) {
-        let event = new CustomEvent(type, { 'detail': data, 'bubbles': bubbles, 'cancelable': cancelable });
-        element.dispatchEvent(event);
+        let event = new CustomEvent( type, { 'detail': data, 'bubbles': bubbles, 'cancelable': cancelable } );
+        element.dispatchEvent( event );
     }
 
     static _add_reset_property( container, callback ) {
@@ -3372,8 +3481,8 @@ class Panel {
         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;
     }
 
@@ -3383,39 +3492,45 @@ class Panel {
 
     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 )
                 {
@@ -3428,27 +3543,32 @@ class Panel {
                 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.jsIinstance = widget;
+        element.jsInstance = widget;
 
         const insert_widget = el => {
             if(options.container)
@@ -3518,7 +3638,7 @@ class Panel {
         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 || "";
@@ -4106,7 +4226,7 @@ class Panel {
 
     addCard( name, options = {} ) {
 
-        options.no_name = true;
+        options.hideName = true;
         let widget = this.create_widget(name, Widget.CARD, options);
         let element = widget.domEl;
 
@@ -4157,6 +4277,89 @@ class Panel {
         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
@@ -4181,27 +4384,29 @@ class Panel {
     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;
     }
@@ -4300,7 +4505,7 @@ class Panel {
                 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.className == 'lexinput-filter' ) {
                 return;
             }
             this.toggleAttribute( 'hidden', true );
@@ -5103,6 +5308,8 @@ class Panel {
      * 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 up
      */
 
     addNumber( name, value, callback, options = {} ) {
@@ -5112,6 +5319,7 @@ class Panel {
         widget.onGetValue = () => {
             return +vecinput.value;
         };
+
         widget.onSetValue = ( newValue, skipCallback ) => {
             vecinput.value = round( newValue, options.precision );
             Panel._dispatch_event( vecinput, "change", skipCallback );
@@ -5154,16 +5362,6 @@ class Panel {
         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' );
@@ -5183,21 +5381,47 @@ class Panel {
             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
@@ -5205,7 +5429,9 @@ class Panel {
         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;
@@ -5217,7 +5443,9 @@ class Panel {
         vecinput.addEventListener( "change", e => {
 
             if( isNaN( e.target.valueAsNumber ) )
+            {
                 return;
+            }
 
             const skipCallback = e.detail;
 
@@ -5252,50 +5480,76 @@ class Panel {
         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%";
         }
@@ -5303,14 +5557,15 @@ class Panel {
         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!" );
         }
 
@@ -5320,9 +5575,12 @@ class Panel {
             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 )
@@ -5331,7 +5589,7 @@ class Panel {
                 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 );
@@ -5351,7 +5609,7 @@ class Panel {
 
         // 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 + ")";
 
@@ -5372,7 +5630,7 @@ class Panel {
 
             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 );
             }
 
@@ -5382,12 +5640,12 @@ class Panel {
             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 )
@@ -5401,7 +5659,7 @@ class Panel {
                     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
@@ -5414,7 +5672,9 @@ class Panel {
             vecinput.addEventListener( "change", e => {
 
                 if( isNaN( e.target.value ) )
+                {
                     return;
+                }
 
                 const skipCallback = e.detail;
 
@@ -5425,7 +5685,7 @@ class Panel {
                 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 )
@@ -5434,7 +5694,9 @@ class Panel {
                         v.value = val;
                         value[ v.idx ] = val;
                     }
-                } else {
+                }
+                else
+                {
                     vecinput.value = val;
                     value[ e.target.idx ] = val;
                 }
@@ -5447,70 +5709,118 @@ class Panel {
             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;
+                    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 );
 
@@ -5526,21 +5836,231 @@ class Panel {
      * 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 is released
      */
 
     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;
     }
 
     /**
@@ -6046,8 +6566,7 @@ class Branch {
 
         this.grabber = grabber;
 
-        function getBranchHeight(){
-            
+        function getBranchHeight() {
             return that.root.offsetHeight - that.root.children[0].offsetHeight;
         }
 
@@ -6101,20 +6620,23 @@ class Branch {
         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;
@@ -6127,7 +6649,10 @@ class Branch {
             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();
+            }
         }
     }
 };
@@ -6144,8 +6669,10 @@ class Dialog {
 
     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();
@@ -6155,8 +6682,10 @@ class Dialog {
             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 ?? "");
@@ -6167,8 +6696,8 @@ class Dialog {
 
         var titleDiv = document.createElement('div');
 
-        if(title) {
-
+        if( title )
+        {
             titleDiv.className = "lexdialogtitle";
             titleDiv.innerHTML = title;
             titleDiv.setAttribute('draggable', false);
@@ -6272,7 +6801,9 @@ class Dialog {
         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")
@@ -6447,28 +6978,42 @@ class ContextMenu {
         }
     }
 
-    _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";
             }
         }