lexgui 0.1.27 → 0.1.29

package/build/lexgui.js

@@ -12,12 +12,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.27",
+        version: "0.1.29",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
     };
 
+    LX.MOUSE_LEFT_CLICK     = 0;
+    LX.MOUSE_MIDDLE_CLICK   = 1;
+    LX.MOUSE_RIGHT_CLICK    = 2;
+
     LX.MOUSE_DOUBLE_CLICK = 2;
     LX.MOUSE_TRIPLE_CLICK = 3;
 
@@ -79,27 +83,31 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.getBase64Image = getBase64Image;
 
-    function hexToRgb(string) {
-        const red = parseInt(string.substring(1, 3), 16) / 255;
-        const green = parseInt(string.substring(3, 5), 16) / 255;
-        const blue = parseInt(string.substring(5, 7), 16) / 255;
-        return [red, green, blue];
+    function hexToRgb( hexStr ) {
+        const red = parseInt( hexStr.substring( 1, 3 ), 16 ) / 255;
+        const green = parseInt( hexStr.substring( 3, 5 ), 16 ) / 255;
+        const blue = parseInt( hexStr.substring( 5, 7 ), 16 ) / 255;
+        return [ red, green, blue ];
     }
-
-    function rgbToHex(rgb) {
+    
+    LX.hexToRgb = hexToRgb;
+    
+    function rgbToHex( rgb ) {
         let hex = "#";
-        for(let c of rgb) {
-            c = Math.floor(c * 255);
-            hex += c.toString(16);
+        for( let c of rgb ) {
+            c = Math.floor( c * 255 );
+            hex += c.toString( 16 );
         }
         return hex;
     }
+    
+    LX.rgbToHex = rgbToHex;
 
     function simple_guidGenerator() {
         var S4 = function() {
            return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
         };
-        return (S4()+"-"+S4());
+        return (S4()+"-"+S4()+"-"+S4());
     }
 
     // Timer that works everywhere (from litegraph.js)
@@ -142,59 +150,73 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         set ( x, y ) { this.x = x; this.y = y; }
         add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
         sub ( v, v0 = new vec2() ) { v0.set( this.x - v.x, this.y - v.y ); return v0; }
-        mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2(v) } v = v0.set( this.x * v.x, this.y * v.y ); return v0; }
-        div ( v, v0 = new vec2() ) { v0.set( this.x / v.x, this.y / v.y ); return v0; }
+        mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x * v.x, this.y * v.y ); return v0; }
+        div ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x / v.x, this.y / v.y ); return v0; }
+        abs ( v0 = new vec2() ) { v0.set( Math.abs( this.x ), Math.abs( this.y ) ); return v0; }
     };
 
     LX.vec2 = vec2;
 
     // Other utils
 
-    function makeDraggable( domEl, targetClass ) {
+    function makeDraggable( domEl, options = { } ) {
 
         let offsetX;
         let offsetY;
         let currentTarget = null;
+        let targetClass = options.targetClass;
+    
+        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';
+        };
+    
+        const customMoveFunc = e => {
+            if( !currentTarget ) return;
+            if( options.onMove )
+                options.onMove( currentTarget );
+        };
     
-        domEl.setAttribute('draggable', true);
-        domEl.addEventListener("mousedown", function(e) {
-            // e.stopPropagation();
-            // e.stopImmediatePropagation();
+        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;
-        });
+        } );
     
-        domEl.addEventListener("dragstart", function(e) {
+        domEl.addEventListener( "dragstart", function( e ) {
             e.preventDefault();
             e.stopPropagation();
             e.stopImmediatePropagation();
-            if(!currentTarget) return;
+            if( !currentTarget ) return;
             // Remove image when dragging
             var img = new Image();
             img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
-            e.dataTransfer.setDragImage(img, 0, 0);
+            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;
-            document.addEventListener("mousemove", moveFunc );
-        }, false);
+            document.addEventListener( "mousemove", onMove );
+            if( onDragStart )
+                onDragStart( currentTarget, e );
+        }, false );
         
-        const moveFunc = (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';
-        };
-    
-        document.addEventListener('mouseup', () => {
-            if(currentTarget) {
+        document.addEventListener( 'mouseup', () => {
+            if( currentTarget ) {
                 currentTarget = null;
-                document.removeEventListener("mousemove", moveFunc );
+                document.removeEventListener( "mousemove", onMove );
             }
-        });
+        } );
     }
     
     LX.makeDraggable = makeDraggable;
@@ -333,15 +355,20 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         const propagate_add = ( item, filter, path ) => {
 
-            const key = Object.keys(item)[0];
-            if( (path + key).toLowerCase().includes(filter) ) {
-                if(item.callback)
-                    add_element(key, item.callback, path, item);
+            const key = Object.keys( item )[ 0 ];
+            let name = item.name ?? path + key;
+            if( name.toLowerCase().includes( filter ) ) {
+                if( item.callback )
+                    add_element( item.name ?? key, item.callback, path, item );
             }
 
+            // is sidebar..
+            if( item.name )
+            return;
+
             path += key + " > ";
 
-            for( let c of item[key] )
+            for( let c of item[ key ] )
                 propagate_add( c, filter, path );
         };
 
@@ -351,7 +378,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             for( let m of LX.menubars )
                 for( let i of m.items ) {
-                    propagate_add( i, filter, "");
+                    propagate_add( i, filter, "" );
                 }
 
             if( LX.has('CodeEditor') )
@@ -869,7 +896,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             // Create areas
-            var area1 = new Area({ no_append: true, className: "split" + (options.menubar ? "" : " origin") });
+            var area1 = new Area({ no_append: true, className: "split" + (options.menubar || options.sidebar ? "" : " origin") });
             var area2 = new Area({ no_append: true, className: "split"});
 
             area1.parentArea = this;
@@ -1190,16 +1217,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         addMenubar( callback, options = {} ) {
             
             let menubar = new Menubar(options);
-            LX.menubars.push( menubar );
 
             if(callback) callback( menubar );
 
-            // Hack to get content height
-            // let d = document.createElement('div');
-            // d.appendChild(menubar.root);
-            // document.body.appendChild(d);
-            // const height = menubar.root.clientHeight;
-            // d.remove();
+            LX.menubars.push( menubar );
+
             const height = 48; // pixels
 
             const [bar, content] = this.split({type: 'vertical', sizes: [height, null], resize: false, menubar: true});
@@ -1209,6 +1231,27 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             return menubar;
         }
 
+        /**
+         * @method addSidebar
+         * @param {Function} callback Function to fill the sidebar
+         */
+
+        addSidebar( callback, options = {} ) {
+
+            let sidebar = new SideBar( options );
+
+            if( callback ) callback( sidebar );
+
+            LX.menubars.push( sidebar );
+
+            const width = 64; // pixels
+
+            const [bar, content] = this.split( { type: 'horizontal', sizes: [ width, null ], resize: false, sidebar: true } );
+            bar.attach( sidebar );
+            bar.is_sidebar = true;
+            return sidebar;
+        }
+
         /**
          * @method addOverlayButtons
          * @param {Array} buttons Buttons info
@@ -1782,7 +1825,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 let entry = document.createElement('div');
                 entry.className = "lexmenuentry";
                 entry.id = pKey;
-                entry.innerText = key;
+                entry.innerHTML = "<span>" + key + "</span>";
                 if(options.position == "left") {	
                     this.root.prepend( entry );	
                 }	
@@ -1806,7 +1849,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     var rect = c.getBoundingClientRect();
                     contextmenu.style.left = (isSubMenu ? rect.width : rect.left) + "px";
                     // Entries use css to set top relative to parent
-                    contextmenu.style.top = (isSubMenu ? 0 : rect.bottom) + "px";
+                    contextmenu.style.top = (isSubMenu ? 0 : rect.bottom - 4) + "px";
                     c.appendChild( contextmenu );
 
                     contextmenu.focus();
@@ -1932,11 +1975,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         return;
                     } 
 
+                    // Manage selected
+                    this.root.querySelectorAll(".lexmenuentry").forEach( e => e.classList.remove( 'selected' ) );
+                    entry.classList.add( "selected" );
+
                     this.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
                     create_submenu( item, key, entry, -1 );
                 });
 
                 entry.addEventListener("mouseleave", () => {
+                    this.root.querySelectorAll(".lexmenuentry").forEach( e => e.classList.remove( 'selected' ) );
                     this.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
                 });
             }
@@ -2124,6 +2172,83 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.Menubar = Menubar;
 
+    /**
+     * @class SideBar
+     */
+
+    class SideBar {
+
+        constructor( options = {} )  {
+
+            this.root = document.createElement( 'div' );
+            this.root.className = "lexsidebar";
+
+            this.footer = document.createElement( 'div' );
+            this.footer.className = "lexsidebarfooter";
+            this.root.appendChild( this.footer );
+
+            this.items = [ ];
+        }
+
+        /**
+         * @method add
+         * @param {*} options:
+         * callback: Function to call on each item
+         * bottom: Bool to set item at the bottom as helper button (not selectable)
+         */
+
+        add( key, options = {} ) {
+
+            if( options.constructor == Function )
+                options = { callback: options };
+
+            let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
+
+            if( this.items.findIndex( (v, i) => v.key == pKey ) > -1 )
+            {
+                console.warn( `'${key}' already created in Sidebar` );
+                return;
+            }
+
+            let entry = document.createElement( 'div' );
+            entry.className = "lexsidebarentry";
+            entry.id = pKey;
+            entry.title = key;
+
+            if( options.bottom )
+            {
+                this.footer.appendChild( entry );
+            }else
+            {
+                this.root.appendChild( entry );
+            }
+
+            // Reappend footer in root
+            this.root.appendChild( this.footer );
+
+            let button = document.createElement( 'button' );
+            button.innerHTML = "<i class='"+ (options.icon ?? "") + "'></i>";
+            entry.appendChild( button );
+
+            entry.addEventListener("click", () => {
+
+                const f = options.callback;
+                if( f ) f.call( this, key, entry );
+
+                // Manage selected
+                if( !options.bottom )
+                {
+                    this.root.querySelectorAll(".lexsidebarentry").forEach( e => e.classList.remove( 'selected' ) );
+                    entry.classList.add( "selected" );
+                }
+            });
+
+            this.items.push( { name: pKey, domEl: entry, callback: options.callback } );
+        }
+    };
+
+    LX.SideBar = SideBar;
+
     /**
      * @class Widget
      */
@@ -3343,103 +3468,109 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addText( name, value, callback, options = {} ) {
 
-            let widget = this.create_widget(name, Widget.TEXT, options);
+            let widget = this.create_widget( name, Widget.TEXT, options );
             widget.onGetValue = () => {
                 return wValue.value;
             };
-            widget.onSetValue = (new_value) => {
-                this.disabled ? wValue.innerText = new_value : wValue.value = new_value;
-                Panel._dispatch_event(wValue, "focusout");
+            widget.onSetValue = newValue => {
+                this.disabled ? wValue.innerText = newValue : wValue.value = newValue;
+                Panel._dispatch_event( wValue, "focusout" );
             };
-
+    
             let element = widget.domEl;
-
+    
             // Add reset functionality
-            if(widget.name && !(options.skipReset ?? false)) {
-                Panel._add_reset_property(element.domName, function() {
+            if( widget.name && !( options.skipReset ?? false ) ) {
+                Panel._add_reset_property( element.domName, function() {
                     wValue.value = wValue.iValue;
                     this.style.display = "none";
-                    Panel._dispatch_event(wValue, "focusout");
-                });
+                    Panel._dispatch_event( wValue, "focusout" );
+                } );
             }
             
             // Add widget value
-
-            let container = document.createElement('div');
-            container.className = "lextext" + (options.warning ? " lexwarning" : "");
+    
+            let container = document.createElement( 'div' );
+            container.className = "lextext" + ( options.warning ? " lexwarning" : "" );
             container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " )";
             container.style.display = "flex";
-
-            this.disabled = (options.disabled || options.warning) ?? ( options.url ? true : false );
+    
+            this.disabled = ( options.disabled || options.warning ) ?? ( options.url ? true : false );
             let wValue = null;
-
+    
             if( !this.disabled )
             {
-                wValue = document.createElement('input');
+                wValue = document.createElement( 'input' );
                 wValue.type = options.type || "";
                 wValue.value = wValue.iValue = value || "";
                 wValue.style.width = "100%";
                 wValue.style.textAlign = options.float ?? "";
     
-                if(options.placeholder) wValue.setAttribute("placeholder", options.placeholder);
+                if( options.placeholder )
+                    wValue.setAttribute( "placeholder", options.placeholder );
     
-                var resolve = (function(val, event) {
-                    let btn = element.querySelector(".lexwidgetname .lexicon");
-                    if(btn) btn.style.display = (val != wValue.iValue ? "block" : "none");
-                    this._trigger( new IEvent(name, val, event), callback );
-                }).bind(this);
+                var resolve = ( function( val, event ) {
+                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
+                    if( btn ) btn.style.display = ( val != wValue.iValue ? "block" : "none" );
+                    this._trigger( new IEvent( name, val, event ), callback );
+                }).bind( this );
     
                 const trigger = options.trigger ?? 'default';
     
-                if(trigger == 'default')
+                if( trigger == 'default' )
                 {
-                    wValue.addEventListener("keyup", function(e){
+                    wValue.addEventListener( "keyup", function( e ){
                         if(e.key == 'Enter')
-                            resolve(e.target.value, e);
+                            resolve( e.target.value, e );
                     });
-                    wValue.addEventListener("focusout", function(e){
-                        resolve(e.target.value, e);
+                    wValue.addEventListener( "focusout", function( e ){
+                        resolve( e.target.value, e );
                     });
                 }
-                else if(trigger == 'input')
+                else if( trigger == 'input' )
                 {
-                    wValue.addEventListener("input", function(e){
-                        resolve(e.target.value, e);
+                    wValue.addEventListener("input", function( e ){
+                        resolve( e.target.value, e );
                     });
                 }
     
-                if(options.icon)
+                wValue.addEventListener( "mousedown", function( e ){
+                    e.stopImmediatePropagation();
+                    e.stopPropagation();
+                });
+    
+                if( options.icon )
                 {
-                    let icon = document.createElement('a');
+                    let icon = document.createElement( 'a' );
                     icon.className = "inputicon " + options.icon;
-                    container.appendChild(icon);
+                    container.appendChild( icon );
                 }
-
+    
             } else
             {
-                wValue = document.createElement(options.url ? 'a' : 'div');
-                if(options.url)
+                wValue = document.createElement( options.url ? 'a' : 'div' );
+                if( options.url )
                 {
                     wValue.href = options.url;
                     wValue.target = "_blank";
                 }
                 const icon = options.warning ? '<i class="fa-solid fa-triangle-exclamation"></i>' : '';
-                wValue.innerHTML = (icon + value) || "";
+                wValue.innerHTML = ( icon + value ) || "";
                 wValue.style.width = "100%";
                 wValue.style.textAlign = options.float ?? "";
             }
-
-            Object.assign(wValue.style, options.style ?? {});
-
-            container.appendChild(wValue);
-            element.appendChild(container);
+    
+            Object.assign( wValue.style, options.style ?? {} );
+    
+            container.appendChild( wValue );
+            element.appendChild( container );
             
             // Remove branch padding and margins
-            if(!widget.name) {
+            if( !widget.name ) {
                 element.className += " noname";
                 container.style.width = "100%";
             }
-
+    
             return widget;
         }
 
@@ -3848,7 +3979,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // Add dropdown widget button  
             let buttonName = value;
-            buttonName += "<a class='fa-solid fa-angle-down' style='float:right; margin-right: 6px;'></a>";
+            buttonName += "<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>";
 
             this.queue(container);
 
@@ -3857,11 +3988,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     delete list.unfocus_event;
                     return;
                 }
-                let container = selectedOption.parentElement.parentElement.parentElement.parentElement; // there must be a nicer way...
-                let rect = event.currentTarget.getBoundingClientRect();
-                let y_pos = container.classList.contains('lexdialog') ? rect.top - 5 + rect.height : rect.y + rect.height - 5;
-                element.querySelector(".lexoptions").style.top = y_pos + 'px';
-                element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 2 + 'px';
+                element.querySelector(".lexoptions").style.top = (selectedOption.offsetTop + selectedOption.offsetHeight) + 'px';
+                element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 'px';
                 element.querySelector(".lexoptions").toggleAttribute('hidden');
                 list.focus();
             }, { buttonClass: 'array', skipInlineCount: true });
@@ -3877,24 +4005,24 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     selectedOption.querySelector("span").innerHTML = selectedOption.querySelector("span").innerHTML.replaceAll(selectedOption.querySelector("span").innerText, v); 
             }
 
-            //Add dropdown options container
-            let list = document.createElement('ul');
+            // Add dropdown options container
+            let list = document.createElement( 'ul' );
             list.tabIndex = -1;
             list.className = "lexoptions";
             list.hidden = true;
 
-            list.addEventListener('focusout', function(e) {
+            list.addEventListener( 'focusout', function( e ) {
                 e.stopPropagation();
                 e.stopImmediatePropagation();
-                if(e.relatedTarget === selectedOption.querySelector("button")) {
+                if(e.relatedTarget === selectedOption.querySelector( 'button' )) {
                     this.unfocus_event = true;
-                    setTimeout(() => delete this.unfocus_event, 200);
-                } else if (e.relatedTarget && e.relatedTarget.tagName == "INPUT") {
+                    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 == 'input-filter' ) {
                     return;
                 }
-                this.toggleAttribute('hidden', true);
+                this.toggleAttribute( 'hidden', true );
             });
 
             // Add filter options
@@ -4191,7 +4319,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // Add dropdown array button
 
-            const itemNameWidth = "3%";
+            const itemNameWidth = "4%";
 
             var container = document.createElement('div');
             container.className = "lexarray";
@@ -4199,7 +4327,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             
             this.queue( container );
 
-            const angle_down = `<a class='fa-solid fa-angle-down' style='float:right; margin-right: 6px;'></a>`;
+            const angle_down = `<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>`;
 
             let buttonName = "Array (size " + values.length + ")";
             buttonName += angle_down;
@@ -4267,7 +4395,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
 
                 buttonName = "Add item";
-                buttonName += "<a class='fa-solid fa-plus' style='float:right; margin-right: 6px; margin-top: 2px;'></a>";
+                buttonName += "<a class='fa-solid fa-plus' style='float:right; margin-right: 3px; margin-top: 2px;'></a>";
                 this.addButton(null, buttonName, (v, event) => {
                     values.push( "" );
                     updateItems();
@@ -4786,7 +4914,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 doc.addEventListener("mouseup",inner_mouseup);
                 lastY = e.pageY;
                 document.body.classList.add('nocursor');
+                document.body.classList.add('noevents');
                 drag_icon.classList.remove('hidden');
+                e.stopImmediatePropagation();
+                e.stopPropagation();
             }
 
             function inner_mousemove(e) {
@@ -4810,6 +4941,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 doc.removeEventListener("mousemove",inner_mousemove);
                 doc.removeEventListener("mouseup",inner_mouseup);
                 document.body.classList.remove('nocursor');
+                document.body.classList.remove('noevents');
                 drag_icon.classList.add('hidden');
             }
             
@@ -4956,7 +5088,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     doc.addEventListener("mouseup",inner_mouseup);
                     lastY = e.pageY;
                     document.body.classList.add('nocursor');
+                    document.body.classList.add('noevents');
                     drag_icon.classList.remove('hidden');
+                    e.stopImmediatePropagation();
+                    e.stopPropagation();
                 }
 
                 function inner_mousemove(e) {
@@ -4988,6 +5123,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     doc.removeEventListener("mousemove",inner_mousemove);
                     doc.removeEventListener("mouseup",inner_mouseup);
                     document.body.classList.remove('nocursor');
+                    document.body.classList.remove('noevents');
                     drag_icon.classList.add('hidden');
                 }
                 
@@ -5140,11 +5276,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addFile( name, callback, options = { } ) {
 
-            if(!name) {
-                throw("Set Widget Name!");
+            if( !name ) {
+                throw( "Set Widget Name!" );
             }
     
-            let widget = this.create_widget(name, Widget.FILE, options);
+            let widget = this.create_widget( name, Widget.FILE, options );
             let element = widget.domEl;
     
             let local = options.local ?? true;
@@ -5152,31 +5288,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let read = options.read ?? true; 
     
             // Create hidden input
-            let input = document.createElement('input');
+            let input = document.createElement( 'input' );
             input.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " - 10%)";
             input.type = 'file';
-            if(options.placeholder)
+    
+            if( options.placeholder )
                 input.placeholder = options.placeholder;
     
-            input.addEventListener('change', function(e) {
+            input.addEventListener( 'change', function( e ) {
+    
                 const files = e.target.files;
                 if( !files.length ) return;
-                if(read)
+                if( read )
                 {
+                    if( options.onBeforeRead )
+                        options.onBeforeRead();
+    
                     const reader = new FileReader();
     
-                    if(type === 'text') reader.readAsText(files[0]);
-                    else if(type === 'buffer') reader.readAsArrayBuffer(files[0]);
-                    else if(type === 'bin') reader.readAsBinaryString(files[0]);
-                    else if(type === 'url') reader.readAsDataURL(files[0]);
+                    if( type === 'text' ) reader.readAsText( files[ 0 ] );
+                    else if( type === 'buffer' ) reader.readAsArrayBuffer( files[ 0 ] );
+                    else if( type === 'bin' ) reader.readAsBinaryString( files[ 0 ] );
+                    else if( type === 'url' ) reader.readAsDataURL( files[ 0 ] );
     
-                    reader.onload = (e) => { callback.call( this, e.target.result, files[0] ) } ;
+                    reader.onload = e => { callback.call( this, e.target.result, files[ 0 ] ) } ;
                 }
-                else callback(files[0]);
-                
+                else
+                    callback( files[ 0 ] );
             });
     
-            element.appendChild(input);
+            element.appendChild( input );
     
             this.queue( element );
             
@@ -5184,9 +5325,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             {
                 this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-gear'></a>", () => {
                     
-                    new Dialog("Load Settings", p => {
-                        p.addDropdown("Type", ['text', 'buffer', 'bin', 'url'], type, v => { type = v } );
-                        p.addButton(null, "Reload", v => { input.dispatchEvent( new Event('change') ) } );
+                    new Dialog( "Load Settings", p => {
+                        p.addDropdown( "Type", [ 'text', 'buffer', 'bin', 'url' ], type, v => { type = v } );
+                        p.addButton( null, "Reload", v => { input.dispatchEvent( new Event( 'change' ) ) } );
                     });
                     
                 }, { className: "micro", skipInlineCount: true });
@@ -5717,8 +5858,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.root = root;
             this.title = titleDiv;
 
-            if(draggable)
-                makeDraggable( root, 'lexdialogtitle' );
+            if( draggable )
+                makeDraggable( root, { targetClass: 'lexdialogtitle' } );
 
             // Process position and size
             if(size.length && typeof(size[0]) != "string")
@@ -5740,6 +5881,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
 
         destroy() {
+            
             this.root.remove();
         }
 
@@ -5754,6 +5896,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.root.style.left = x + "px";
             this.root.style.top = y + "px";
         }
+
+        setTitle( title ) {
+
+            const titleDOM = this.root.querySelector( '.lexdialogtitle' );
+            if( !titleDOM )
+                return;
+            titleDOM.innerText = title;
+        }
     }
 
     LX.Dialog = Dialog;
@@ -5783,8 +5933,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // Custom 
             this.root.classList.add( "pocket" );
-            this.root.style.left = "calc(100% - " + (this.root.offsetWidth + 6) + "px)";
-            this.root.style.top = "0px";
+            if( !options.position ) {
+                this.root.style.left = "calc(100% - " + (this.root.offsetWidth + 6) + "px)";
+                this.root.style.top = "0px";
+            }
             this.panel.root.style.width = "calc( 100% - 12px )";
             this.panel.root.style.height = "calc( 100% - 40px )";
             this.dock_pos = PocketDialog.TOP;
@@ -5823,7 +5975,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                             this.root.style.top = "calc(100% - " + (this.root.offsetHeight + 6) + "px)";
                             break;
                         case 'l': 
-                            this.root.style.left = "0px";
+                            this.root.style.left = options.position ? options.position[ 1 ] : "0px";
                             break;
                         }
                     }
@@ -5928,7 +6080,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             contextmenu.style.marginTop =  3.5 - c.offsetHeight + "px";
 
             // Set final width
-            contextmenu.style.width = contextmenu.offsetWidth + "px";
+            // contextmenu.style.width = contextmenu.offsetWidth + "px";
             this._adjust_position( contextmenu, 6, true );
         }
 
@@ -6134,8 +6286,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.style.minHeight = "50px";
             element.style.width = options.width || "100%";
 
-            element.bgcolor = options.bgcolor || "#15181c";
-            element.pointscolor = options.pointscolor || "#7b8ae2";
+            element.bgcolor = options.bgcolor || LX.getThemeColor("global-dark-background");
+            element.pointscolor = options.pointscolor || LX.getThemeColor("global-selected-light");
             element.linecolor = options.linecolor || "#555";
 
             element.value = value || [];
@@ -7376,9 +7528,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         configurable: true
     });
 
-    Element.prototype.insertChildAtIndex = function(child, index = Infinity) {
-        if (index >= this.children.length) this.appendChild(child);
-        else this.insertBefore(child, this.children[index]);
+    Element.prototype.insertChildAtIndex = function( child, index = Infinity ) {
+        if ( index >= this.children.length ) this.appendChild( child );
+        else this.insertBefore( child, this.children[index] );
+    }
+
+    Element.prototype.hasClass = function( list ) {
+        list = [].concat( list );
+        var r = list.filter( v => this.classList.contains( v ) );
+        return !!r.length;
     }
 
     Element.prototype.getComputedSize = function() {
@@ -7394,7 +7552,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         compareThreshold( v, p, n, t ) { return Math.abs(v - p) >= t || Math.abs(v - n) >= t },
         compareThresholdRange( v0, v1, t0, t1 ) { return v0 >= t0 && v0 <= t1 || v1 >= t0 && v1 <= t1 || v0 <= t0 && v1 >= t1},
         clamp (num, min, max) { return Math.min(Math.max(num, min), max) },
-
+        uidGenerator: simple_guidGenerator,
         getControlPoints( x0, y0, x1, y1, x2, y2 ,t ) {
             
             //  x0,y0,x1,y1 are the coordinates of the end (knot) pts of this segment
@@ -7419,7 +7577,6 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             
             return [p1x,p1y,p2x,p2y]
         },
-   
         drawSpline( ctx, pts, t ) {
         
             ctx.save();