lexgui 0.1.27 → 0.1.29

package/build/lexgui.module.js

@@ -8,12 +8,16 @@
 */
 
 var 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;
 
@@ -75,27 +79,31 @@ function getBase64Image(img) {
 
 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)
@@ -138,59 +146,73 @@ class vec2 {
     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;
@@ -294,6 +316,7 @@ function create_global_searchbar( root ) {
     }
 
     const add_element = (t, c, p, i) => {
+
         if(!t.length) return;
 
         if(ref_previous) ref_previous.classList.remove('last');
@@ -329,15 +352,20 @@ function create_global_searchbar( root ) {
 
     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 );
     };
 
@@ -347,7 +375,7 @@ function create_global_searchbar( root ) {
 
         for( let m of LX.menubars )
             for( let i of m.items ) {
-                propagate_add( i, filter, "");
+                propagate_add( i, filter, "" );
             }
 
         if( LX.has('CodeEditor') )
@@ -865,7 +893,7 @@ class Area {
         }
 
         // 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;
@@ -1186,25 +1214,40 @@ class Area {
     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});
         bar.attach( menubar );
         bar.is_menubar = true;
-        window.content = content;
         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
@@ -1778,7 +1821,7 @@ class Menubar {
             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 );	
             }	
@@ -1802,7 +1845,7 @@ class Menubar {
                 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();
@@ -1928,11 +1971,16 @@ class Menubar {
                     return;
                 } 
 
-                this.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
+                // 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());
             });
         }
@@ -2120,6 +2168,83 @@ class Menubar {
 
 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
  */
@@ -3339,99 +3464,105 @@ class Panel {
 
     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 ?? {});
+        Object.assign( wValue.style, options.style ?? {} );
 
-        container.appendChild(wValue);
-        element.appendChild(container);
+        container.appendChild( wValue );
+        element.appendChild( container );
         
         // Remove branch padding and margins
-        if(!widget.name) {
+        if( !widget.name ) {
             element.className += " noname";
             container.style.width = "100%";
         }
@@ -3844,7 +3975,7 @@ class Panel {
 
         // 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);
 
@@ -3853,11 +3984,8 @@ class Panel {
                 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 });
@@ -3873,24 +4001,24 @@ class Panel {
                 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
@@ -4187,7 +4315,7 @@ class Panel {
 
         // Add dropdown array button
 
-        const itemNameWidth = "3%";
+        const itemNameWidth = "4%";
 
         var container = document.createElement('div');
         container.className = "lexarray";
@@ -4195,7 +4323,7 @@ class Panel {
         
         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;
@@ -4263,7 +4391,7 @@ class Panel {
             }
 
             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();
@@ -4782,7 +4910,10 @@ class Panel {
             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) {
@@ -4806,6 +4937,7 @@ class Panel {
             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');
         }
         
@@ -4952,7 +5084,10 @@ class Panel {
                 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) {
@@ -4984,6 +5119,7 @@ class Panel {
                 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');
             }
             
@@ -5136,11 +5272,11 @@ class Panel {
 
     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;
@@ -5148,31 +5284,36 @@ class Panel {
         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 );
         
@@ -5180,9 +5321,9 @@ class Panel {
         {
             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 });
@@ -5713,8 +5854,8 @@ class Dialog {
         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")
@@ -5736,6 +5877,7 @@ class Dialog {
     }
 
     destroy() {
+
         this.root.remove();
     }
 
@@ -5750,6 +5892,14 @@ class Dialog {
         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;
@@ -5779,8 +5929,10 @@ class PocketDialog extends Dialog {
 
         // 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;
@@ -5819,7 +5971,7 @@ class PocketDialog extends Dialog {
                         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;
                     }
                 }
@@ -5924,7 +6076,7 @@ class ContextMenu {
         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 );
     }
 
@@ -6130,8 +6282,8 @@ class Curve {
         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 || [];
@@ -7372,9 +7524,15 @@ Object.defineProperty(String.prototype, 'lastChar', {
     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() {
@@ -7390,7 +7548,7 @@ LX.UTILS = {
     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
@@ -7415,7 +7573,6 @@ LX.UTILS = {
         
         return [p1x,p1y,p2x,p2y]
     },
-
     drawSpline( ctx, pts, t ) {
     
         ctx.save();