lexgui 0.1.28 → 0.1.30

package/build/lexgui.module.js

@@ -8,12 +8,16 @@
 */
 
 var 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;
 
@@ -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)
@@ -140,6 +148,7 @@ class vec2 {
     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;
@@ -153,45 +162,57 @@ function makeDraggable( domEl, options = { } ) {
     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;
+    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) {
+    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;
@@ -397,33 +418,38 @@ function create_global_searchbar( root ) {
 
 /**
  * @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");
+    // 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 ); };
+
+    this.modal.classList.add( 'hiddenOpacity' );
+    this.modal.toggle = function( force ) { this.classList.toggle( 'hiddenOpacity', force ); };
 
-    if(options.container)
-        this.container = document.getElementById(options.container);
+    if( options.container )
+        this.container = document.getElementById( options.container );
         
     this.global_search = create_global_searchbar( this.container );
 
@@ -431,17 +457,17 @@ function init(options = {})
     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%";
@@ -449,10 +475,10 @@ function init(options = {})
     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;
 }
@@ -1282,7 +1308,8 @@ class Area {
                 selectable: b.selectable,
                 selected: b.selected,
                 icon: b.icon,
-                img: b.img
+                img: b.img,
+                className: b.class
             };
 
             if( group )
@@ -1492,7 +1519,7 @@ class Tabs {
 
         let container = document.createElement('div');
         container.className = "lexareatabs " + (options.fit ? "fit" : "row");
-        
+
         const folding = options.folding ?? false;
         if(folding) container.classList.add("folding");
 
@@ -1544,6 +1571,29 @@ class Tabs {
         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) 
         {
@@ -1641,6 +1691,14 @@ class Tabs {
 
             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 => {
@@ -1669,13 +1727,26 @@ class Tabs {
         });
         
         // 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 );
     }
 
@@ -2170,6 +2241,7 @@ class SideBar {
      * @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 = {} ) {
@@ -2186,14 +2258,14 @@ class SideBar {
         }
 
         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 );
         }
@@ -2205,6 +2277,11 @@ class SideBar {
         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;
@@ -2220,6 +2297,23 @@ class SideBar {
 
         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;
@@ -3112,7 +3206,7 @@ class Panel {
 
         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;
             }
@@ -3443,99 +3537,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%";
         }
@@ -3957,10 +4057,7 @@ 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.top = (selectedOption.offsetTop + selectedOption.offsetHeight) + 'px';
             element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 'px';
             element.querySelector(".lexoptions").toggleAttribute('hidden');
             list.focus();
@@ -4369,7 +4466,7 @@ class Panel {
             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' });
@@ -4888,6 +4985,8 @@ class Panel {
             document.body.classList.add('nocursor');
             document.body.classList.add('noevents');
             drag_icon.classList.remove('hidden');
+            e.stopImmediatePropagation();
+            e.stopPropagation();
         }
 
         function inner_mousemove(e) {
@@ -5060,6 +5159,8 @@ class Panel {
                 document.body.classList.add('nocursor');
                 document.body.classList.add('noevents');
                 drag_icon.classList.remove('hidden');
+                e.stopImmediatePropagation();
+                e.stopPropagation();
             }
 
             function inner_mousemove(e) {
@@ -5239,16 +5340,17 @@ class Panel {
      * @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;
@@ -5256,31 +5358,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 );
         
@@ -5288,9 +5395,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 });
@@ -5844,6 +5951,7 @@ class Dialog {
     }
 
     destroy() {
+
         this.root.remove();
     }
 
@@ -5858,6 +5966,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;
@@ -5887,8 +6003,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;
@@ -5927,7 +6045,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;
                     }
                 }
@@ -6032,7 +6150,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 );
     }
 
@@ -7480,9 +7598,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() {
@@ -7498,7 +7622,14 @@ 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,
+    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
@@ -7523,7 +7654,6 @@ LX.UTILS = {
         
         return [p1x,p1y,p2x,p2y]
     },
-
     drawSpline( ctx, pts, t ) {
     
         ctx.save();