lexgui 0.1.28 → 0.1.30

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.28",
+        version: "0.1.30",
         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)
@@ -144,6 +152,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         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 ) } 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;
@@ -156,46 +165,58 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         let offsetY;
         let currentTarget = null;
         let targetClass = options.targetClass;
-
-        const moveFunc = (e) => {
-            if(!currentTarget) return;
+    
+        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)
+            if( left > 3 && ( left + domEl.offsetWidth + 6 ) <= window.innerWidth )
                 domEl.style.left = left + 'px';
-            if(top > 3 && (top + domEl.offsetHeight + 6) <= window.innerHeight)
+            if( top > 3 && ( top + domEl.offsetHeight + 6 ) <= window.innerHeight )
                 domEl.style.top = top + 'px';
         };
-
-        let onMove = options.onMove ?? moveFunc;
     
-        domEl.setAttribute('draggable', true);
-        domEl.addEventListener("mousedown", function(e) {
+        const customMoveFunc = e => {
+            if( !currentTarget ) return;
+            if( options.onMove )
+                options.onMove( currentTarget );
+        };
+    
+        let onMove = options.onMove ? customMoveFunc : defaultMoveFunc;
+        let onDragStart = options.onDragStart;
+    
+        domEl.setAttribute( 'draggable', true );
+        domEl.addEventListener( "mousedown", function( e ) {
             currentTarget = (e.target.classList.contains(targetClass) || !targetClass) ? e.target : null;
-        });
+        } );
     
-        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", onMove );
-        }, false);
+            document.addEventListener( "mousemove", onMove );
+            if( onDragStart )
+                onDragStart( currentTarget, e );
+        }, false );
         
-        document.addEventListener('mouseup', () => {
-            if(currentTarget) {
+        document.addEventListener( 'mouseup', () => {
+            if( currentTarget ) {
                 currentTarget = null;
-                document.removeEventListener("mousemove", onMove );
+                document.removeEventListener( "mousemove", onMove );
             }
-        });
+        } );
     }
     
     LX.makeDraggable = makeDraggable;
@@ -400,33 +421,38 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     /**
      * @method init
-     * @param {*} options 
+     * @param {Object} options 
      * container: Root location for the gui (default is the document body)
+     * id: Id of the main area
      * skip_default_area: Skip creation of main area
      */
 
-    function init(options = {})
+    function init( options = { } )
     {
-        if(this.ready)
+        if( this.ready )
             return this.main_area;
 
-        // LexGUI root 
-		var root = document.createElement("div");
-		root.id = "lexroot";
+        // LexGUI root
+
+        var root = document.createElement( 'div' );
+        root.id = "lexroot";
         root.tabIndex = -1;
         
-        var modal = document.createElement("div");
+        var modal = document.createElement( 'div' );
         modal.id = "modal";
 
         this.modal = modal;
         this.root = root;
         this.container = document.body;
 
-        this.modal.toggleAttribute('hidden', true);
-        this.modal.toggle = function(force) { this.toggleAttribute('hidden', force); };
+        // this.modal.toggleAttribute( 'hidden', true );
+        // this.modal.toggle = function( force ) { this.toggleAttribute( 'hidden', force ); };
 
-        if(options.container)
-            this.container = document.getElementById(options.container);
+        this.modal.classList.add( 'hiddenOpacity' );
+        this.modal.toggle = function( force ) { this.classList.toggle( 'hiddenOpacity', force ); };  
+
+        if( options.container )
+            this.container = document.getElementById( options.container );
             
         this.global_search = create_global_searchbar( this.container );
 
@@ -434,17 +460,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         this.container.appendChild( root );
 
         // Disable drag icon
-        root.addEventListener("dragover", function(e) {
+        root.addEventListener( 'dragover', function( e ) {
             e.preventDefault();
         }, false );
 
         // CSS fontawesome
-        var head = document.getElementsByTagName('HEAD')[0];
-        var link = document.createElement('link');
+        var head = document.getElementsByTagName( 'HEAD' )[ 0 ];
+        var link = document.createElement( 'link' );
         link.rel = 'stylesheet';
         link.type = 'text/css';
-        link.href = 'https://use.fontawesome.com/releases/v6.4.2/css/all.css';
-        head.appendChild(link);
+        link.href = 'https://use.fontawesome.com/releases/v6.5.1/css/all.css';
+        head.appendChild( link );
 
         // Global vars
         this.DEFAULT_NAME_WIDTH     = "30%";
@@ -452,10 +478,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         this.OPEN_CONTEXTMENU_ENTRY = 'click';
 
         this.ready = true;
-        this.menubars = [];
+        this.menubars = [ ];
 
-        if(!options.skip_default_area)
-            this.main_area = new Area( {id: options.id ?? "mainarea"} );
+        if( !options.skip_default_area )
+            this.main_area = new Area( { id: options.id ?? 'mainarea' } );
 
         return this.main_area;
     }
@@ -1286,7 +1312,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     selectable: b.selectable,
                     selected: b.selected,
                     icon: b.icon,
-                    img: b.img
+                    img: b.img,
+                    className: b.class
                 };
 
                 if( group )
@@ -1496,7 +1523,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             let container = document.createElement('div');
             container.className = "lexareatabs " + (options.fit ? "fit" : "row");
-            
+
             const folding = options.folding ?? false;
             if(folding) container.classList.add("folding");
 
@@ -1531,7 +1558,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 // Show on drop
                 el.click();
-                
+
                 // Store info
                 that.tabs[ el.dataset["name"] ] = content;
             });
@@ -1548,6 +1575,29 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.tabs = {};
             this.tabDOMs = {};
 
+            if( options.fit )
+            {
+                // Create movable element
+                let mEl = document.createElement('span');
+                mEl.className = "lexareatab thumb";
+                this.thumb = mEl;
+                this.root.appendChild( mEl );
+
+                const resizeObserver = new ResizeObserver((entries) => {
+                    const tabEl = this.thumb.item;
+                    if( !tabEl ) return;
+                    var transition = this.thumb.style.transition;
+                    this.thumb.style.transition = "none";
+                    this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
+                    this.thumb.style.width = ( tabEl.offsetWidth - 5 ) + "px";
+                    this.thumb.style.height = ( tabEl.offsetHeight - 6 ) + "px";
+                    flushCss( this.thumb );
+                    this.thumb.style.transition = transition;
+                });
+
+                resizeObserver.observe( this.area.root );
+            }
+
             // debug
             if(folding) 
             {
@@ -1645,6 +1695,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
                 if(options.onSelect)
                     options.onSelect(e, tabEl.dataset.name);
+
+                if( this.thumb )
+                {
+                    this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
+                    this.thumb.style.width = ( tabEl.offsetWidth - 5 ) + "px";
+                    this.thumb.style.height = ( tabEl.offsetHeight - 6 ) + "px";
+                    this.thumb.item = tabEl;
+                }
             });
 
             tabEl.addEventListener("contextmenu", e => {
@@ -1673,13 +1731,26 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             });
             
             // Attach content
+            tabEl.childIndex = ( this.root.childElementCount - 1 );
             this.root.appendChild( tabEl );
             this.area.attach( contentEl );
             this.tabDOMs[ name ] = tabEl;
             this.tabs[ name ] = content;
 
             setTimeout( () => {
-                if( options.onCreate ) options.onCreate.call(this, this.area.root.getBoundingClientRect());
+
+                if( options.onCreate ) {
+                    options.onCreate.call(this, this.area.root.getBoundingClientRect());
+                }
+
+                if( isSelected && this.thumb )
+                {
+                    this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
+                    this.thumb.style.width = ( tabEl.offsetWidth - 5 ) + "px";
+                    this.thumb.style.height = ( tabEl.offsetHeight - 6 ) + "px";
+                    this.thumb.item = tabEl;
+                }
+
             }, 10 );
         }
 
@@ -2174,6 +2245,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {*} options:
          * callback: Function to call on each item
          * bottom: Bool to set item at the bottom as helper button (not selectable)
+         * className: Add class to the entry DOM element
          */
 
         add( key, options = {} ) {
@@ -2190,14 +2262,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
 
             let entry = document.createElement( 'div' );
-            entry.className = "lexsidebarentry";
+            entry.className = "lexsidebarentry " + ( options.className ?? "" );
             entry.id = pKey;
-            entry.title = key;
 
             if( options.bottom )
             {
                 this.footer.appendChild( entry );
-            }else
+            }
+            else
             {
                 this.root.appendChild( entry );
             }
@@ -2209,6 +2281,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             button.innerHTML = "<i class='"+ (options.icon ?? "") + "'></i>";
             entry.appendChild( button );
 
+            let desc = document.createElement( 'span' );
+            desc.className = 'lexsidebarentrydesc';
+            desc.innerHTML = key;
+            entry.appendChild( desc );
+
             entry.addEventListener("click", () => {
 
                 const f = options.callback;
@@ -2224,6 +2301,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.items.push( { name: pKey, domEl: entry, callback: options.callback } );
         }
+
+        /**
+         * @method select
+         * @param {String} name Element name to select
+         */
+
+        select( name ) {
+
+            let pKey = name.replace( /\s/g, '' ).replaceAll( '.', '' );
+
+            const entry = this.items.find( v => v.name === pKey );
+
+            if( !entry )
+                return;
+
+            entry.domEl.click();
+        }
     };
 
     LX.SideBar = SideBar;
@@ -3116,7 +3210,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             if( type != Widget.TITLE )
             {
-                element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE ? 10 : 20) + "px)";
+                element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE || ( type == Widget.BUTTON && !name ) ? 10 : 20) + "px)";
                 if( options.width ) {
                     element.style.width = element.style.minWidth = options.width;
                 }
@@ -3447,103 +3541,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;
         }
 
@@ -3961,10 +4061,7 @@ 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.top = (selectedOption.offsetTop + selectedOption.offsetHeight) + 'px';
                 element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 'px';
                 element.querySelector(".lexoptions").toggleAttribute('hidden');
                 list.focus();
@@ -4373,7 +4470,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: 3px; margin-top: 2px;'></a>";
                 this.addButton(null, buttonName, (v, event) => {
-                    values.push( "" );
+                    values.push( options.innerValues ? options.innerValues[ 0 ] : "" );
                     updateItems();
                     this._trigger( new IEvent(name, values, event), callback );
                 }, { buttonClass: 'array' });
@@ -4892,6 +4989,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 document.body.classList.add('nocursor');
                 document.body.classList.add('noevents');
                 drag_icon.classList.remove('hidden');
+                e.stopImmediatePropagation();
+                e.stopPropagation();
             }
 
             function inner_mousemove(e) {
@@ -5064,6 +5163,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     document.body.classList.add('nocursor');
                     document.body.classList.add('noevents');
                     drag_icon.classList.remove('hidden');
+                    e.stopImmediatePropagation();
+                    e.stopPropagation();
                 }
 
                 function inner_mousemove(e) {
@@ -5243,16 +5344,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {Function} callback Callback function on change
          * @param {*} options:
          * local: Ask for local file
+         * read: Return the file itself (False) or the contents (True)
          * type: type to read as [text (Default), buffer, bin, url]
          */
 
         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;
@@ -5260,31 +5362,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 );
             
@@ -5292,9 +5399,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 });
@@ -5848,6 +5955,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         }
 
         destroy() {
+            
             this.root.remove();
         }
 
@@ -5862,6 +5970,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;
@@ -5891,8 +6007,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;
@@ -5931,7 +6049,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;
                         }
                     }
@@ -6036,7 +6154,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 );
         }
 
@@ -7484,9 +7602,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() {
@@ -7502,7 +7626,14 @@ 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,
+        deleteElement( el ) { if( el ) el.remove(); },
+        flushCss(element) {
+            // By reading the offsetHeight property, we are forcing
+            // the browser to flush the pending CSS changes (which it
+            // does to ensure the value obtained is accurate).
+            element.offsetHeight;
+        },
         getControlPoints( x0, y0, x1, y1, x2, y2 ,t ) {
             
             //  x0,y0,x1,y1 are the coordinates of the end (knot) pts of this segment
@@ -7527,7 +7658,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();