lexgui 0.1.43 → 0.1.45

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.43",
+        version: "0.1.45",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -64,6 +64,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.deepCopy = deepCopy;
 
+    function setTheme( colorScheme )
+    {
+        colorScheme = ( colorScheme == "light" ) ? "light" : "dark";
+        document.documentElement.setAttribute( "data-theme", colorScheme );
+        LX.emit( "@on_new_color_scheme", colorScheme );
+    }
+
+    LX.setTheme = setTheme;
+
     function setThemeColor( colorName, color )
     {
         var r = document.querySelector( ':root' );
@@ -74,8 +83,24 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     function getThemeColor( colorName )
     {
-        var r = getComputedStyle( document.querySelector( ':root' ) );
-        return r.getPropertyValue( '--' + colorName );
+        const r = getComputedStyle( document.querySelector( ':root' ) );
+        const value = r.getPropertyValue( '--' + colorName );
+
+        if( value.includes( "light-dark" ) && window.matchMedia )
+        {
+            const currentScheme = r.getPropertyValue( "color-scheme" );
+
+            if( ( window.matchMedia( "(prefers-color-scheme: light)" ).matches ) || ( currentScheme == "light" ) )
+            {
+                return value.substring( value.indexOf( '(' ) + 1, value.indexOf( ',' ) ).replace( /\s/g, '' );
+            }
+            else
+            {
+                return value.substring( value.indexOf( ',' ) + 1, value.indexOf( ')' ) ).replace( /\s/g, '' );
+            }
+        }
+
+        return value;
     }
 
     LX.getThemeColor = getThemeColor;
@@ -132,6 +157,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.guidGenerator = simple_guidGenerator;
 
+    function buildTextPattern( options = {} ) {
+        let patterns = [];
+        if ( options.lowercase ) patterns.push("(?=.*[a-z])");
+        if ( options.uppercase ) patterns.push("(?=.*[A-Z])");
+        if ( options.digit ) patterns.push("(?=.*\\d)");
+        if ( options.specialChar ) patterns.push("(?=.*[@#$%^&+=!])");
+        if ( options.noSpaces ) patterns.push("(?!.*\\s)");
+
+        let minLength = options.minLength || 0;
+        let maxLength = options.maxLength || ""; // Empty means no max length restriction
+
+        let pattern = `^${ patterns.join("") }.{${ minLength },${ maxLength }}$`;
+        return options.asRegExp ? new RegExp( pattern ) : pattern;
+    }
+
+    LX.buildTextPattern = buildTextPattern;
+
     // Timer that works everywhere (from litegraph.js)
     if (typeof performance != "undefined") {
         LX.getTime = performance.now.bind(performance);
@@ -618,6 +660,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.main_area = new Area( { id: options.id ?? 'mainarea' } );
         }
 
+        window.matchMedia( "(prefers-color-scheme: dark)" ).addEventListener( "change", event => {
+            const newColorScheme = event.matches ? "dark" : "light";
+            LX.emit( "@on_new_color_scheme", newColorScheme );
+        });
+
         return this.main_area;
     }
 
@@ -730,7 +777,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if( callback ) callback.call( this, value );
                     dialog.close();
                 }
-            }, { buttonClass: "accept" });
+            }, { buttonClass: "primary" });
 
             p.addButton(null, "Cancel", () => {if(options.on_cancel) options.on_cancel(); dialog.close();} );
 
@@ -747,6 +794,25 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.prompt = prompt;
 
+    /**
+     * @method badge
+     * @param {String} text
+     * @param {String} className
+     * @param {*} options
+     * style: Style attributes to override
+     */
+
+    function badge( text, className, options = {} )
+    {
+        const container = document.createElement( "div" );
+        container.innerHTML = text;
+        container.className = "lexbadge " + ( className ?? "" );
+        Object.assign( container.style, options.style ?? {} );
+        return container.outerHTML;
+    }
+
+    LX.badge = badge;
+
     /*
     *   Events and Signals
     */
@@ -833,7 +899,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
             else
             {
-                obj[ signalName ].call( obj, value );
+                // This is a function callback!
+                const fn = obj;
+                fn( null, value );
             }
         }
     }
@@ -2158,18 +2226,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 entry.className = "lexmenuentry";
                 entry.id = pKey;
                 entry.innerHTML = "<span>" + key + "</span>";
-                if(options.position == "left") {	
-                    this.root.prepend( entry );	
-                }	
-                else {	
-                    if(options.position == "right") 	
-                        entry.right = true;	
-                    if(this.root.lastChild && this.root.lastChild.right) {	
-                        this.root.lastChild.before( entry );	
-                    }	
-                    else {	
-                        this.root.appendChild( entry );	
-                    }	
+                if(options.position == "left") {
+                    this.root.prepend( entry );
+                }
+                else {
+                    if(options.position == "right")
+                        entry.right = true;
+                    if(this.root.lastChild && this.root.lastChild.right) {
+                        this.root.lastChild.before( entry );
+                    }
+                    else {
+                        this.root.appendChild( entry );
+                    }
                 }
 
                 const create_submenu = function( o, k, c, d ) {
@@ -2390,16 +2458,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 button.style.maxHeight = "calc(100% - 10px)";
                 button.style.alignItems = "center";
 
-                if(options.float == "right")	
-                    button.right = true;	
-                if(this.root.lastChild && this.root.lastChild.right) {	
-                    this.root.lastChild.before( button );	
+                if(options.float == "right")
+                    button.right = true;
+                if(this.root.lastChild && this.root.lastChild.right) {
+                    this.root.lastChild.before( button );
                 }
                 else if(options.float == "left") {
                     this.root.prepend(button);
-                }	
-                else {	
-                    this.root.appendChild( button );	
+                }
+                else {
+                    this.root.appendChild( button );
                 }
 
                 const _b = button.querySelector('a');
@@ -2431,16 +2499,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 button.style.padding = "5px";
                 button.style.alignItems = "center";
 
-                if(options.float == "right")	
-                    button.right = true;	
-                if(this.root.lastChild && this.root.lastChild.right) {	
-                    this.root.lastChild.before( button );	
-                }	
+                if(options.float == "right")
+                    button.right = true;
+                if(this.root.lastChild && this.root.lastChild.right) {
+                    this.root.lastChild.before( button );
+                }
                 else if(options.float == "left") {
                     this.root.prepend(button);
                 }
-                else {	
-                    this.root.appendChild( button );	
+                else {
+                    this.root.appendChild( button );
                 }
 
                 const _b = button.querySelector('a');
@@ -2460,44 +2528,75 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addButtons( buttons, options = {} ) {
 
-            if(!buttons)
-                throw("No buttons to add!");
+            if( !buttons )
+            {
+                throw( "No buttons to add!" );
+            }
 
-            if(!this.buttonContainer)
+            if( !this.buttonContainer )
             {
-                this.buttonContainer = document.createElement('div');
+                this.buttonContainer = document.createElement( "div" );
                 this.buttonContainer.className = "lexmenubuttons";
-                this.buttonContainer.classList.add(options.float ?? 'center');
-                if(options.position == "right")	
-                    this.buttonContainer.right = true;	
-                if(this.root.lastChild && this.root.lastChild.right) {	
-                    this.root.lastChild.before( this.buttonContainer );	
-                }	
-                else {	
-                    this.root.appendChild( this.buttonContainer );	
+                this.buttonContainer.classList.add( options.float ?? "center" );
+
+                if( options.position == "right" )
+                {
+                    this.buttonContainer.right = true;
+                }
+
+                if( this.root.lastChild && this.root.lastChild.right )
+                {
+                    this.root.lastChild.before( this.buttonContainer );
+                }
+                else
+                {
+                    this.root.appendChild( this.buttonContainer );
                 }
             }
 
             for( let i = 0; i < buttons.length; ++i )
             {
-                let data = buttons[i];
-                let button = document.createElement('div');
+                let data = buttons[ i ];
+                let button = document.createElement( "label" );
                 const title = data.title;
                 let disabled = data.disabled ?? false;
                 button.className = "lexmenubutton" + (disabled ? " disabled" : "");
                 button.title = title ?? "";
-                button.innerHTML = "<a class='" + data.icon + " lexicon'></a>";
                 this.buttonContainer.appendChild( button );
 
-                const _b = button.querySelector('a');
-                _b.addEventListener("click", (e) => {
-                    disabled = e.target.parentElement.classList.contains("disabled");
-                    if(data.callback && !disabled)
-                        data.callback.call( this, _b, e );
+                const icon = document.createElement( "a" );
+                icon.className = data.icon + " lexicon";
+                button.appendChild( icon );
+
+                let trigger = icon;
+
+                if( data.swap )
+                {
+                    button.classList.add( "swap" );
+                    icon.classList.add( "swap-off" );
+
+                    const input = document.createElement( "input" );
+                    input.type = "checkbox";
+                    button.prepend( input );
+                    trigger = input;
+
+                    const swapIcon = document.createElement( "a" );
+                    swapIcon.className = data.swap + " swap-on lexicon";
+                    button.appendChild( swapIcon );
+                }
+
+                trigger.addEventListener("click", e => {
+                    if( data.callback && !disabled )
+                    {
+                        const swapInput = button.querySelector( "input" );
+                        data.callback.call( this, e, swapInput?.checked );
+                    }
                 });
 
-                if(title)
+                if( title )
+                {
                     this.buttons[ title ] = button;
+                }
             }
         }
     };
@@ -2628,27 +2727,30 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         static BUTTON       = 3;
         static DROPDOWN     = 4;
         static CHECKBOX     = 5;
-        static COLOR        = 6;
-        static NUMBER       = 7;
-        static TITLE        = 8;
-        static VECTOR       = 9;
-        static TREE         = 10;
-        static PROGRESS     = 11;
-        static FILE         = 12;
-        static LAYERS       = 13;
-        static ARRAY        = 14;
-        static LIST         = 15;
-        static TAGS         = 16;
-        static CURVE        = 17;
-        static CARD         = 18;
-        static IMAGE        = 19;
-        static CONTENT      = 20;
-        static CUSTOM       = 21;
-        static SEPARATOR    = 22;
-        static KNOB         = 23;
-        static SIZE         = 24;
-        static PAD          = 25;
-        static FORM         = 26;
+        static TOGGLE       = 6;
+        static COLOR        = 7;
+        static NUMBER       = 8;
+        static TITLE        = 9;
+        static VECTOR       = 10;
+        static TREE         = 11;
+        static PROGRESS     = 12;
+        static FILE         = 13;
+        static LAYERS       = 14;
+        static ARRAY        = 15;
+        static LIST         = 16;
+        static TAGS         = 17;
+        static CURVE        = 18;
+        static CARD         = 19;
+        static IMAGE        = 20;
+        static CONTENT      = 21;
+        static CUSTOM       = 22;
+        static SEPARATOR    = 23;
+        static KNOB         = 24;
+        static SIZE         = 25;
+        static PAD          = 26;
+        static FORM         = 27;
+        static DIAL         = 28;
+        static COUNTER      = 29;
 
         static NO_CONTEXT_TYPES = [
             Widget.BUTTON,
@@ -2721,6 +2823,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 case Widget.BUTTON: return "Button";
                 case Widget.DROPDOWN: return "Dropdown";
                 case Widget.CHECKBOX: return "Checkbox";
+                case Widget.TOGGLE: return "Toggle";
                 case Widget.COLOR: return "Color";
                 case Widget.NUMBER: return "Number";
                 case Widget.VECTOR: return "Vector";
@@ -2736,8 +2839,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 case Widget.SIZE: return "Size";
                 case Widget.PAD: return "Pad";
                 case Widget.FORM: return "Form";
+                case Widget.DIAL: return "Dial";
+                case Widget.COUNTER: return "Counter";
                 case Widget.CUSTOM: return this.customName;
             }
+
+            console.error( `Unknown Widget type: ${ this.type }` );
         }
 
         refresh() {
@@ -3909,41 +4016,50 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         /**
          * @method addTitle
          * @param {String} name Title name
+         * @param {*} options:
+         * link: Href in case title is an hyperlink
+         * target: Target name of the iframe (if any)
+         * icon: FA class of the icon (if any)
+         * iconColor: Color of title icon (if any)
+         * style: CSS to override
          */
 
         addTitle( name, options = {} ) {
 
-            if(!name) {
-                throw("Set Widget Name!");
+            if( !name )
+            {
+                throw( "Can't create Title without text!" );
             }
 
-            let widget = this.create_widget(null, Widget.TITLE, options);
+            let widget = this.create_widget( null, Widget.TITLE, options );
             let element = widget.domEl;
             element.className = "lextitle";
 
-            if(options.icon) {
-                let icon = document.createElement('a');
+            if( options.icon )
+            {
+                let icon = document.createElement( 'a' );
                 icon.className = options.icon;
-                icon.style.color = options.icon_color || "";
-                element.appendChild(icon);
+                icon.style.color = options.iconColor || "";
+                element.appendChild( icon );
             }
 
-            let text = document.createElement('span');
+            let text = document.createElement( "span");
             text.innerText = name;
-            element.appendChild(text);
+            element.appendChild( text );
 
-            Object.assign(element.style, options.style ?? {});
+            Object.assign( element.style, options.style ?? {} );
 
-            if(options.link != undefined)
+            if( options.link != undefined )
             {
-                let link_el = document.createElement('a');
-                link_el.innerText = name;
-                link_el.href = options.link;
-                link_el.target = options.target ?? "";
-                link_el.className = "lextitle link";
-                Object.assign(link_el.style, options.style ?? {});
-                element.replaceWith(link_el);
+                let linkDom = document.createElement('a');
+                linkDom.innerText = name;
+                linkDom.href = options.link;
+                linkDom.target = options.target ?? "";
+                linkDom.className = "lextitle link";
+                Object.assign( linkDom.style, options.style ?? {} );
+                element.replaceWith( linkDom );
             }
+
             return element;
         }
 
@@ -3954,7 +4070,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {Function} callback Callback function on change
          * @param {*} options:
          * disabled: Make the widget disabled [false]
+         * required: Make the input required
          * placeholder: Add input placeholder
+         * pattern: Regular expression that value must match
          * trigger: Choose onchange trigger (default, input) [default]
          * inputWidth: Width of the text input
          * skipReset: Don't add the reset value button when value changes
@@ -3969,11 +4087,18 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             widget.onGetValue = () => {
                 return wValue.value;
             };
+
             widget.onSetValue = ( newValue, skipCallback ) => {
                 this.disabled ? wValue.innerText = newValue : wValue.value = newValue;
                 Panel._dispatch_event( wValue, "focusout", skipCallback );
             };
 
+            widget.valid = () => {
+                if( wValue.pattern == "" ) { return true; }
+                const regexp = new RegExp( wValue.pattern );
+                return regexp.test( wValue.value );
+            };
+
             let element = widget.domEl;
 
             // Add reset functionality
@@ -3992,6 +4117,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " )";
             container.style.display = "flex";
 
+            if( options.textClass )
+            {
+                container.classList.add( options.textClass );
+            }
+
             this.disabled = ( options.disabled || options.warning ) ?? ( options.url ? true : false );
             let wValue = null;
 
@@ -4003,14 +4133,33 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 wValue.style.width = "100%";
                 wValue.style.textAlign = options.float ?? "";
 
-                if( options.placeholder )
-                    wValue.setAttribute( "placeholder", options.placeholder );
+                wValue.setAttribute( "placeholder", options.placeholder ?? "" );
+
+                if( options.required )
+                {
+                    wValue.setAttribute( "required", options.required );
+                }
+
+                if( options.pattern )
+                {
+                    wValue.setAttribute( "pattern", options.pattern );
+                }
 
                 var resolve = ( function( val, event ) {
+
+                    if( !widget.valid() )
+                    {
+                        return;
+                    }
+
                     const skipCallback = event.detail;
                     let btn = element.querySelector( ".lexwidgetname .lexicon" );
                     if( btn ) btn.style.display = ( val != wValue.iValue ? "block" : "none" );
-                    if( !skipCallback ) this._trigger( new IEvent( name, val, event ), callback );
+                    if( !skipCallback )
+                    {
+                        this._trigger( new IEvent( name, val, event ), callback );
+                    }
+
                 }).bind( this );
 
                 const trigger = options.trigger ?? 'default';
@@ -4222,18 +4371,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             var wValue = document.createElement( 'button' );
             wValue.title = options.title ?? "";
-            wValue.className = "lexbutton";
+            wValue.className = "lexbutton " + ( options.buttonClass ?? "" );
 
             if( options.selected )
             {
                 wValue.classList.add( "selected" );
             }
 
-            if( options.buttonClass )
-            {
-                wValue.classList.add( options.buttonClass );
-            }
-
             wValue.innerHTML =
                 (options.icon ? "<a class='" + options.icon + "'></a>" :
                 ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (value || "") + "</span>" ));
@@ -4457,20 +4601,44 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             for( let entry in data )
             {
-                const entryData = data[ entry ];
-                this.addText( entry, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
+                let entryData = data[ entry ];
+
+                if( entryData.constructor != Object )
+                {
+                    entryData = { };
+                }
+
+                entryData.placeholder = entryData.placeholder ?? entry;
+                entryData.width = "calc(100% - 10px)";
+
+                this.addLabel( entry, { textClass: "formlabel" } );
+
+                entryData.textWidget = this.addText( null, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
                     container.formData[ entry ] = value;
                 }, entryData );
 
                 container.formData[ entry ] = entryData.constructor == Object ? entryData.value : entryData;
             }
 
+            this.addBlank( );
+
             this.addButton( null, options.actionName ?? "Submit", ( value, event ) => {
+
+                for( let entry in data )
+                {
+                    let entryData = data[ entry ];
+
+                    if( !entryData.textWidget.valid() )
+                    {
+                        return;
+                    }
+                }
+
                 if( callback )
                 {
                     callback( container.formData, event );
                 }
-            } );
+            }, { buttonClass: "primary", width: "calc(100% - 10px)" } );
 
             this.clearQueue();
 
@@ -4486,16 +4654,32 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         /**
          * @method addContent
-         * @param {HTMLElement} element
+         * @param {HTMLElement/String} element
          */
 
         addContent( element, options = {} ) {
 
             if( !element )
-            return;
+            {
+                return;
+            }
+
+            if( element.constructor == String )
+            {
+                const tmp = document.createElement( "div" );
+                tmp.innerHTML = element;
+                if( tmp.childElementCount > 1 )
+                {
+                    element = tmp;
+                }
+                else
+                {
+                    element = tmp.firstElementChild;
+                }
+            }
 
-            let widget = this.create_widget(null, Widget.CONTENT, options);
-            widget.domEl.appendChild(element);
+            let widget = this.create_widget( null, Widget.CONTENT, options );
+            widget.domEl.appendChild( element );
             return widget;
         }
 
@@ -4600,7 +4784,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     const iString = String( i );
                     maxWidth = Math.max( iString.length, maxWidth );
                 }
-                return maxWidth * 9;
+                return Math.max( maxWidth * 10, 80 );
             };
 
             let selectedOption = this.addButton( null, buttonName, ( value, event ) => {
@@ -4609,13 +4793,35 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     delete list.unfocus_event;
                     return;
                 }
-                const topPosition = selectedOption.getBoundingClientRect().y;
-                list.style.top = (topPosition + selectedOption.offsetHeight) + 'px';
+
+                list.toggleAttribute( "hidden" );
+                list.classList.remove( "place-above" );
+
+                const listHeight = 26 * values.length;
+                const rect = selectedOption.getBoundingClientRect();
+                const topPosition = rect.y;
+
+                let maxY = window.innerHeight;
+
+                if( this.mainContainer )
+                {
+                    const parentRect = this.mainContainer.getBoundingClientRect();
+                    maxY = parentRect.y + parentRect.height;
+                }
+
+                list.style.top = ( topPosition + selectedOption.offsetHeight ) + 'px';
+
+                const showAbove = ( topPosition + listHeight ) > maxY;
+                if( showAbove )
+                {
+                    list.style.top = ( topPosition - listHeight ) + 'px';
+                    list.classList.add( "place-above" );
+                }
+
                 list.style.width = (event.currentTarget.clientWidth) + 'px';
                 list.style.minWidth = (_getMaxListWidth()) + 'px';
-                list.toggleAttribute('hidden');
                 list.focus();
-            }, { buttonClass: 'array', skipInlineCount: true });
+            }, { buttonClass: "array", skipInlineCount: true });
 
             this.clearQueue();
 
@@ -4843,6 +5049,86 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             return widget;
         }
 
+        /**
+         * @method addDial
+         * @param {String} name Widget name
+         * @param {Array of Array} values Array of 2N Arrays of each value of the dial
+         * @param {Function} callback Callback function on change
+         * @param {*} options:
+         * skipReset: Don't add the reset value button when value changes
+         * bgColor: Widget background color
+         * pointsColor: Curve points color
+         * lineColor: Curve line color
+         * noOverlap: Points do not overlap, replacing themselves if necessary
+         * allowAddValues: Support adding values on click
+         * smooth: Curve smoothness
+         * moveOutAction: Clamp or delete points moved out of the curve (LX.CURVE_MOVEOUT_CLAMP, LX.CURVE_MOVEOUT_DELETE)
+        */
+
+        addDial( name, values, callback, options = {} ) {
+
+            let that = this;
+            let widget = this.create_widget(name, Widget.DIAL, options);
+
+            widget.onGetValue = () => {
+                return JSON.parse(JSON.stringify(curveInstance.element.value));
+            };
+
+            widget.onSetValue = ( newValue, skipCallback ) => {
+                let btn = element.querySelector( ".lexwidgetname .lexicon" );
+                if( btn ) btn.style.display = ( newValue != curveInstance.element.value ? "block" : "none" );
+                curveInstance.element.value = JSON.parse( JSON.stringify( newValue ) );
+                curveInstance.redraw();
+                if( !skipCallback ) that._trigger( new IEvent( name, curveInstance.element.value, null ), callback );
+            };
+
+            let element = widget.domEl;
+            let defaultValues = JSON.parse( JSON.stringify( values ) );
+
+            // Add reset functionality
+            if( widget.name && !(options.skipReset ?? false) )
+            {
+                Panel._add_reset_property(element.domName, function(e) {
+                    this.style.display = "none";
+                    curveInstance.element.value = JSON.parse( JSON.stringify( defaultValues ) );
+                    curveInstance.redraw();
+                    that._trigger( new IEvent( name, curveInstance.element.value, e ), callback );
+                });
+            }
+
+            // Add widget value
+
+            var container = document.createElement( 'div' );
+            container.className = "lexcurve";
+            container.style.width = widget.name ? "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")" : '100%';
+
+            options.callback = (v, e) => {
+                let btn = element.querySelector(".lexwidgetname .lexicon");
+                if(btn) btn.style.display = (v != defaultValues ? "block" : "none");
+                that._trigger( new IEvent(name, v, e), callback );
+            };
+
+            options.name = name;
+
+            let curveInstance = new Dial( this, values, options );
+            container.appendChild( curveInstance.element );
+            element.appendChild( container );
+
+            // Resize
+            widget.onresize = curveInstance.redraw.bind( curveInstance );
+            widget.curveInstance = curveInstance;
+
+            doAsync(() => {
+                curveInstance.element.style.height = curveInstance.element.offsetWidth + "px";
+                curveInstance.canvas.width = curveInstance.element.offsetWidth;
+                container.style.width = curveInstance.element.offsetWidth + "px";
+                curveInstance.canvas.height = curveInstance.canvas.width;
+                curveInstance.redraw();
+            });
+
+            return widget;
+        }
+
         /**
          * @method addLayers
          * @param {String} name Widget name
@@ -5181,40 +5467,45 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // Show tags
 
-            let tags_container = document.createElement('div');
-            tags_container.className = "lextags";
-            tags_container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+            const tagsContainer = document.createElement('div');
+            tagsContainer.className = "lextags";
+            tagsContainer.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
             const create_tags = () => {
 
-                tags_container.innerHTML = "";
+                tagsContainer.innerHTML = "";
 
                 for( let i = 0; i < value.length; ++i )
                 {
-                    let tag_name = value[i];
-                    let tag = document.createElement('span');
+                    const tagName = value[i];
+                    const tag = document.createElement('span');
                     tag.className = "lextag";
-                    tag.innerHTML = tag_name;
+                    tag.innerHTML = tagName;
+
+                    const removeButton = document.createElement('a');
+                    removeButton.className = "lextagrmb fa-solid fa-xmark lexicon";
+                    tag.appendChild( removeButton );
 
-                    tag.addEventListener('click', function( e ) {
-                        this.remove();
-                        value.splice( value.indexOf( tag_name ), 1 );
+                    removeButton.addEventListener( 'click', e => {
+                        tag.remove();
+                        value.splice( value.indexOf( tagName ), 1 );
                         let btn = element.querySelector( ".lexwidgetname .lexicon" );
                         if( btn ) btn.style.display = ( value != defaultValue ? "block" : "none" );
                         that._trigger( new IEvent( name, value, e ), callback );
-                    });
+                    } );
 
-                    tags_container.appendChild( tag );
+                    tagsContainer.appendChild( tag );
                 }
 
-                let tag_input = document.createElement( 'input' );
-                tag_input.value = "";
-                tag_input.placeholder = "Tag...";
-                tags_container.insertChildAtIndex( tag_input, 0 );
+                let tagInput = document.createElement( 'input' );
+                tagInput.value = "";
+                tagInput.placeholder = "Add tag...";
+                tagsContainer.appendChild( tagInput );
 
-                tag_input.onkeydown = function( e ) {
+                tagInput.onkeydown = function( e ) {
                     const val = this.value.replace(/\s/g, '');
-                    if( e.key == ' ') {
+                    if( e.key == ' ' || e.key == 'Enter' )
+                    {
                         e.preventDefault();
                         if( !val.length || value.indexOf( val ) > -1 )
                             return;
@@ -5226,18 +5517,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     }
                 };
 
-                tag_input.focus();
+                tagInput.focus();
             }
 
             create_tags();
 
             // Remove branch padding and margins
-            if(!widget.name) {
+            if( !widget.name )
+            {
                 element.className += " noname";
-                tags_container.style.width = "100%";
+                tagsContainer.style.width = "100%";
             }
 
-            element.appendChild(tags_container);
+            element.appendChild( tagsContainer );
 
             return widget;
         }
@@ -5250,29 +5542,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {*} options:
          * disabled: Make the widget disabled [false]
          * suboptions: Callback to add widgets in case of TRUE value
+         * className: Customize colors
          */
 
         addCheckbox( name, value, callback, options = {} ) {
 
-            if( !name ) {
+            if( !name )
+            {
                 throw( "Set Widget Name!" );
             }
 
             let widget = this.create_widget( name, Widget.CHECKBOX, options );
 
             widget.onGetValue = () => {
-                return flag.value;
+                return checkbox.checked;
             };
+
             widget.onSetValue = ( newValue, skipCallback ) => {
-                if( flag.value !== newValue )
-                    Panel._dispatch_event( toggle, "click", skipCallback );
+                if( checkbox.checked !== newValue )
+                {
+                    checkbox.checked = newValue;
+                    Panel._dispatch_event( checkbox, "change", skipCallback );
+                }
             };
 
             let element = widget.domEl;
 
             // Add reset functionality
             Panel._add_reset_property( element.domName, function() {
-                Panel._dispatch_event( toggle, "click" );
+                checkbox.checked = !checkbox.checked;
+                Panel._dispatch_event( checkbox, "change" );
             });
 
             // Add widget value
@@ -5280,55 +5579,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             var container = document.createElement('div');
             container.className = "lexcheckboxcont";
 
-            let toggle = document.createElement('span');
-            toggle.className = "lexcheckbox";
+            let checkbox = document.createElement('input');
+            checkbox.type = "checkbox";
+            checkbox.className = "lexcheckbox " + ( options.className ?? "" );
+            checkbox.checked = value;
+            checkbox.iValue = value;
+            checkbox.disabled = options.disabled ?? false;
 
-            let flag = document.createElement('span');
-            flag.value = flag.iValue = value || false;
-            flag.className = "checkbox " + (flag.value ? "on" : "");
-            flag.id = "checkbox"+simple_guidGenerator();
-            flag.innerHTML = "<a class='fa-solid fa-check' style='display: " + (flag.value ? "block" : "none") + "'></a>";
+            let valueName = document.createElement( 'span' );
+            valueName.className = "checkboxtext";
+            valueName.innerHTML = "On";
 
-            if( options.disabled ) {
-                flag.disabled = true;
-                toggle.className += " disabled";
-            }
-
-            toggle.appendChild( flag );
-
-            let value_name = document.createElement( 'span' );
-            value_name.id = "checkboxtext";
-            value_name.innerHTML = "On";
-
-            container.appendChild( toggle );
-            container.appendChild( value_name );
-
-            toggle.addEventListener( "click" , e => {
-
-                let flag = toggle.querySelector( ".checkbox" );
-                if( flag.disabled )
-                    return;
-
-                const skipCallback = ( e.detail.constructor == Number ? null : e.detail );
+            container.appendChild( checkbox );
+            container.appendChild( valueName );
 
-                let check = toggle.querySelector( ".checkbox a" );
+            checkbox.addEventListener( "change" , e => {
 
-                flag.value = !flag.value;
-                flag.className = "checkbox " + ( flag.value ? "on" : "" );
-                check.style.display = flag.value ? "block" : "none";
+                const skipCallback = ( e.detail?.constructor == Number ? null : e.detail );
 
                 // Reset button (default value)
                 if( !skipCallback )
                 {
                     let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                    if( btn ) btn.style.display = flag.value != flag.iValue ? "block": "none";
+                    if( btn ) btn.style.display = checkbox.checked != checkbox.iValue ? "block": "none";
                 }
 
                 // Open suboptions
                 let submenu = element.querySelector( ".lexcheckboxsubmenu" );
-                if( submenu ) submenu.toggleAttribute( 'hidden', !flag.value );
+                if( submenu ) submenu.toggleAttribute( 'hidden', !checkbox.checked );
 
-                if( !skipCallback ) this._trigger( new IEvent( name, flag.value, e ), callback );
+                if( !skipCallback ) this._trigger( new IEvent( name, checkbox.checked, e ), callback );
             });
 
             element.appendChild( container );
@@ -5338,58 +5618,154 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 element.style.flexWrap = "wrap";
                 let suboptions = document.createElement('div');
                 suboptions.className = "lexcheckboxsubmenu";
-                suboptions.toggleAttribute('hidden', !flag.value);
+                suboptions.toggleAttribute( 'hidden', !checkbox.checked );
 
                 this.queue( suboptions );
                 options.suboptions.call(this, this);
                 this.clearQueue();
 
-                element.appendChild(suboptions);
+                element.appendChild( suboptions );
             }
 
             return widget;
         }
 
         /**
-         * @method addColor
+         * @method addToggle
          * @param {String} name Widget name
-         * @param {String} value Default color (hex)
+         * @param {Boolean} value Value of the checkbox
          * @param {Function} callback Callback function on change
          * @param {*} options:
          * disabled: Make the widget disabled [false]
-         * useRGB: The callback returns color as Array (r, g, b) and not hex [false]
+         * suboptions: Callback to add widgets in case of TRUE value
+         * className: Customize colors
          */
 
-        addColor( name, value, callback, options = {} ) {
+        addToggle( name, value, callback, options = {} ) {
 
-            if( !name ) {
+            if( !name )
+            {
                 throw( "Set Widget Name!" );
             }
 
-            let widget = this.create_widget( name, Widget.COLOR, options );
+            let widget = this.create_widget( name, Widget.TOGGLE, options );
 
             widget.onGetValue = () => {
-                return color.value;
+                return toggle.checked;
             };
+
             widget.onSetValue = ( newValue, skipCallback ) => {
-                color.value = newValue;
-                Panel._dispatch_event( color, "input", skipCallback );
+                if( toggle.checked !== newValue )
+                {
+                    toggle.checked = newValue;
+                    Panel._dispatch_event( toggle, "change", skipCallback );
+                }
             };
 
             let element = widget.domEl;
-            let change_from_input = false;
 
             // Add reset functionality
             Panel._add_reset_property( element.domName, function() {
-                this.style.display = "none";
-                color.value = color.iValue;
-                Panel._dispatch_event( color, "input" );
+                toggle.checked = !toggle.checked;
+                Panel._dispatch_event( toggle, "change" );
             });
 
             // Add widget value
 
-            var container = document.createElement( 'span' );
-            container.className = "lexcolor";
+            var container = document.createElement('div');
+            container.className = "lextogglecont";
+
+            let toggle = document.createElement('input');
+            toggle.type = "checkbox";
+            toggle.className = "lextoggle " + ( options.className ?? "" );
+            toggle.checked = value;
+            toggle.iValue = value;
+            toggle.disabled = options.disabled ?? false;
+
+            let valueName = document.createElement( 'span' );
+            valueName.className = "toggletext";
+            valueName.innerHTML = "On";
+
+            container.appendChild( toggle );
+            container.appendChild( valueName );
+
+            toggle.addEventListener( "change" , e => {
+
+                const skipCallback = ( e.detail?.constructor == Number ? null : e.detail );
+
+                // Reset button (default value)
+                if( !skipCallback )
+                {
+                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
+                    if( btn ) btn.style.display = toggle.checked != toggle.iValue ? "block": "none";
+                }
+
+                // Open suboptions
+                let submenu = element.querySelector( ".lextogglesubmenu" );
+                if( submenu ) submenu.toggleAttribute( 'hidden', !toggle.checked );
+
+                if( !skipCallback ) this._trigger( new IEvent( name, toggle.checked, e ), callback );
+            });
+
+            element.appendChild( container );
+
+            if( options.suboptions )
+            {
+                element.style.flexWrap = "wrap";
+                let suboptions = document.createElement('div');
+                suboptions.className = "lextogglesubmenu";
+                suboptions.toggleAttribute( 'hidden', !toggle.checked );
+
+                this.queue( suboptions );
+                options.suboptions.call(this, this);
+                this.clearQueue();
+
+                element.appendChild( suboptions );
+            }
+
+            return widget;
+        }
+
+        /**
+         * @method addColor
+         * @param {String} name Widget name
+         * @param {String} value Default color (hex)
+         * @param {Function} callback Callback function on change
+         * @param {*} options:
+         * disabled: Make the widget disabled [false]
+         * useRGB: The callback returns color as Array (r, g, b) and not hex [false]
+         */
+
+        addColor( name, value, callback, options = {} ) {
+
+            if( !name ) {
+                throw( "Set Widget Name!" );
+            }
+
+            let widget = this.create_widget( name, Widget.COLOR, options );
+
+            widget.onGetValue = () => {
+                return color.value;
+            };
+            widget.onSetValue = ( newValue, skipCallback ) => {
+                color.value = newValue;
+                Panel._dispatch_event( color, "input", skipCallback );
+            };
+
+            let element = widget.domEl;
+            let change_from_input = false;
+
+            // Add reset functionality
+            Panel._add_reset_property( element.domName, function() {
+                this.style.display = "none";
+                color.value = color.iValue;
+                Panel._dispatch_event( color, "input" );
+            });
+
+            // Add widget value
+
+            var container = document.createElement( 'span' );
+            container.className = "lexcolor";
             container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
             let color = document.createElement( 'input' );
@@ -5573,7 +5949,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 };
             }
 
-            // Add wheel input
+            vecinput.addEventListener( "input", function( e ) {
+                let new_value = +this.valueAsNumber;
+                vecinput.value = round( new_value, options.precision );
+                if( options.units )
+                {
+                    vecinput.unitSpan.style.left = measureRealWidth( vecinput.value ) + "px";
+                }
+            }, false );
 
             vecinput.addEventListener( "wheel", function( e ) {
                 e.preventDefault();
@@ -6267,10 +6650,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             widget.onGetValue = () => {
                 return progress.value;
             };
+
             widget.onSetValue = ( newValue, skipCallback ) => {
                 element.querySelector("meter").value = newValue;
+                _updateColor();
                 if( element.querySelector("span") )
+                {
                     element.querySelector("span").innerText = newValue;
+                }
             };
 
             let element = widget.domEl;
@@ -6287,14 +6674,26 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             progress.step = "any";
             progress.min = options.min ?? 0;
             progress.max = options.max ?? 1;
+            progress.low = options.low ?? progress.low;
+            progress.high = options.high ?? progress.high;
+            progress.optimum = options.optimum ?? progress.optimum;
             progress.value = value;
 
-            if( options.low )
-                progress.low = options.low;
-            if( options.high )
-                progress.high = options.high;
-            if( options.optimum )
-                progress.optimum = options.optimum;
+            const _updateColor = () => {
+
+                let backgroundColor = LX.getThemeColor( "global-selected" );
+
+                if( progress.low != undefined && progress.value < progress.low )
+                {
+                    backgroundColor = LX.getThemeColor( "global-color-error" );
+                }
+                else if( progress.high != undefined && progress.value < progress.high )
+                {
+                    backgroundColor = LX.getThemeColor( "global-color-warning" );
+                }
+
+                progress.style.background = `color-mix(in oklab, ${backgroundColor} 20%, transparent)`;
+            };
 
             container.appendChild( progress );
             element.appendChild( container );
@@ -6318,7 +6717,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 progress.classList.add( "editable" );
                 progress.addEventListener( "mousedown", inner_mousedown );
 
-                var that = this;
+                const that = this;
 
                 function inner_mousedown( e )
                 {
@@ -6326,24 +6725,28 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     doc.addEventListener( 'mousemove', inner_mousemove );
                     doc.addEventListener( 'mouseup', inner_mouseup );
                     document.body.classList.add( 'noevents' );
+                    progress.classList.add( "grabbing" );
                     e.stopImmediatePropagation();
                     e.stopPropagation();
+
+                    const rect = progress.getBoundingClientRect();
+                    const newValue = round( remapRange( e.offsetX, 0, rect.width, progress.min, progress.max ) );
+                    that.setValue( name, newValue );
                 }
 
                 function inner_mousemove( e )
                 {
-                    let dt = -e.movementX;
+                    let dt = e.movementX;
 
                     if ( dt != 0 )
                     {
-                        let v = that.getValue( name, value );
-                        v += e.movementX / 100;
-                        v = round( v );
-                        that.setValue( name, v );
+                        const rect = progress.getBoundingClientRect();
+                        const newValue = round( remapRange( e.offsetX - rect.x, 0, rect.width, progress.min, progress.max ) );
+                        that.setValue( name, newValue );
 
                         if( options.callback )
                         {
-                            options.callback( v, e );
+                            options.callback( newValue, e );
                         }
                     }
 
@@ -6357,9 +6760,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     doc.removeEventListener( 'mousemove', inner_mousemove );
                     doc.removeEventListener( 'mouseup', inner_mouseup );
                     document.body.classList.remove( 'noevents' );
+                    progress.classList.remove( "grabbing" );
                 }
             }
 
+            _updateColor();
+
             return widget;
         }
 
@@ -6369,6 +6775,7 @@ 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
+         * disabled: Make the widget disabled [false]
          * read: Return the file itself (False) or the contents (True)
          * type: type to read as [text (Default), buffer, bin, url]
          */
@@ -6389,8 +6796,10 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // Create hidden input
             let input = document.createElement( 'input' );
+            input.className = "lexfileinput";
             input.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " - 10%)";
             input.type = 'file';
+            input.disabled = options.disabled ?? false;
 
             if( options.placeholder )
             {
@@ -6636,6 +7045,91 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.addSeparator();
         }
+
+        /**
+         * @method addCounter
+         * @param {String} name Widget name
+         * @param {Number} value Counter value
+         * @param {Function} callback Callback function on change
+         * @param {*} options:
+         * disabled: Make the widget disabled [false]
+         * min, max: Min and Max values
+         * step: Step for adding/substracting
+         * label: Text to show below the counter
+         */
+
+        addCounter( name, value, callback, options = { } ) {
+
+            let widget = this.create_widget( name, Widget.COUNTER, options );
+
+            widget.onGetValue = () => {
+                return counterText.count;
+            };
+
+            widget.onSetValue = ( newValue, skipCallback ) => {
+                _onChange( newValue, skipCallback );
+            };
+
+            let element = widget.domEl;
+
+            const min = options.min ?? 0;
+            const max = options.max ?? 100;
+            const step = options.step ?? 1;
+
+            const _onChange = ( value, skipCallback, event ) => {
+                value = clamp( value, min, max );
+                counterText.count = value;
+                counterText.innerHTML = value;
+                if( !skipCallback )
+                {
+                    this._trigger( new IEvent( name, value, event ), callback );
+                }
+            }
+
+            const container = document.createElement( 'div' );
+            container.className = "lexcounter";
+            element.appendChild( container );
+
+            this.queue( container );
+
+            this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-minus'></a>", (value, e) => {
+                let mult = step ?? 1;
+                if( e.shiftKey ) mult *= 10;
+                _onChange( counterText.count - mult, false, e );
+            }, { className: "micro", skipInlineCount: true, title: "Minus" });
+
+            this.clearQueue();
+
+            const containerBox = document.createElement( 'div' );
+            containerBox.className = "lexcounterbox";
+            container.appendChild( containerBox );
+
+            const counterText = document.createElement( 'span' );
+            counterText.className = "lexcountervalue";
+            counterText.innerHTML = value;
+            counterText.count = value;
+            containerBox.appendChild( counterText );
+
+            if( options.label )
+            {
+                const counterLabel = document.createElement( 'span' );
+                counterLabel.className = "lexcounterlabel";
+                counterLabel.innerHTML = options.label;
+                containerBox.appendChild( counterLabel );
+            }
+
+            this.queue( container );
+
+            this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-plus'></a>", (value, e) => {
+                let mult = step ?? 1;
+                if( e.shiftKey ) mult *= 10;
+                _onChange( counterText.count + mult, false, e );
+            }, { className: "micro", skipInlineCount: true, title: "Plus" });
+
+            this.clearQueue();
+
+            return widget;
+        }
     }
 
     LX.Panel = Panel;
@@ -6871,6 +7365,104 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.Branch = Branch;
 
+    /**
+     * @class Footer
+     */
+
+    class Footer {
+        /**
+         * @param {*} options:
+         * columns: Array with data per column { title, items: [ { title, link } ]  }
+         * credits: html string
+         * socials: Array with data per item { title, link, iconHtml }
+        */
+        constructor( options = {} ) {
+
+            const root = document.createElement( "footer" );
+            root.className = "lexfooter";
+
+            const wrapper = document.createElement( "div" );
+            wrapper.className = "wrapper";
+            root.appendChild( wrapper );
+
+            if( options.columns && options.columns.constructor == Array )
+            {
+                const cols = document.createElement( "div" );
+                cols.className = "columns";
+                cols.style.gridTemplateColumns = "1fr ".repeat( options.columns.length );
+                wrapper.appendChild( cols );
+
+                for( let col of options.columns )
+                {
+                    const colDom = document.createElement( "div" );
+                    colDom.className = "col";
+                    cols.appendChild( colDom );
+
+                    const colTitle = document.createElement( "h2" );
+                    colTitle.innerHTML = col.title;
+                    colDom.appendChild( colTitle );
+
+                    if( !col.items || !col.items.length )
+                    {
+                        continue;
+                    }
+
+                    const itemListDom = document.createElement( "ul" );
+                    colDom.appendChild( itemListDom );
+
+                    for( let item of col.items )
+                    {
+                        const itemDom = document.createElement( "li" );
+                        itemDom.innerHTML = `<a class="" href="${ item.link }">${ item.title }</a>`;
+                        itemListDom.appendChild( itemDom );
+                    }
+                }
+            }
+
+            if( options.credits || options.socials )
+            {
+                const hr = document.createElement( "hr" );
+                wrapper.appendChild( hr );
+
+                const creditsSocials = document.createElement( "div" );
+                creditsSocials.className = "credits-and-socials";
+                wrapper.appendChild( creditsSocials );
+
+                if( options.credits )
+                {
+                    const credits = document.createElement( "p" );
+                    credits.innerHTML = options.credits;
+                    creditsSocials.appendChild( credits );
+                }
+
+                if( options.socials )
+                {
+                    const socials = document.createElement( "div" );
+                    socials.className = "social";
+
+                    for( let social of options.socials )
+                    {
+                        const itemDom = document.createElement( "a" );
+                        itemDom.title = social.title;
+                        itemDom.innerHTML = social.icon;
+                        itemDom.href = social.link;
+                        itemDom.target = "_blank";
+                        socials.appendChild( itemDom );
+                    }
+
+                    creditsSocials.appendChild( socials );
+                }
+            }
+
+            // Append directly to body
+            const parent = options.parent ?? document.body;
+            parent.appendChild( root );
+        }
+
+    }
+
+    LX.Footer = Footer;
+
     /**
      * @class Dialog
      */
@@ -7203,8 +7795,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.root = document.createElement('div');
             this.root.className = "lexcontextmenubox";
-            this.root.style.left = (event.x - 48) + "px";
-            this.root.style.top = (event.y - 8) + "px";
+            this.root.style.left = (event.x - 48 + document.scrollingElement.scrollLeft) + "px";
+            this.root.style.top = (event.y - 8 + document.scrollingElement.scrollTop) + "px";
 
             this.root.addEventListener("mouseleave", function() {
                 this.remove();
@@ -7493,7 +8085,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.style.minWidth = "50px";
             element.style.minHeight = "20px";
 
-            element.bgcolor = options.bgColor || LX.getThemeColor( "global-dark-background" );
+            element.bgcolor = options.bgColor || LX.getThemeColor( "global-intense-background" );
             element.pointscolor = options.pointsColor || LX.getThemeColor( "global-selected-light" );
             element.linecolor = options.lineColor || "#555";
             element.value = value || [];
@@ -7508,6 +8100,12 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.smooth = (options.smooth && typeof( options.smooth ) == 'number' ? options.smooth : 0.3) || false;
             element.move_out = options.moveOutAction ?? LX.CURVE_MOVEOUT_DELETE;
 
+            LX.addSignal( "@on_new_color_scheme", (el, value) => {
+                element.bgcolor = options.bgColor || LX.getThemeColor( "global-intense-background" );
+                element.pointscolor = options.pointsColor || LX.getThemeColor( "global-selected-light" );
+                this.redraw();
+            } );
+
             this.element = element;
 
             let canvas = document.createElement( "canvas" );
@@ -7811,6 +8409,335 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     LX.Curve = Curve;
 
+    /**
+     * @class Dial
+     */
+
+    class Dial {
+
+        constructor( panel, value, options = {} ) {
+
+            let element = document.createElement( "div" );
+            element.className = "dial " + ( options.className ? options.className : "" );
+            element.style.width = element.style.height = options.size || "100%";
+            element.style.minWidth = element.style.minHeight = "50px";
+
+            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 || [];
+            element.xrange = options.xrange || [ 0, 1 ]; // min, max
+            element.yrange = options.yrange || [ 0, 1 ]; // min, max
+            element.defaulty = options.defaulty != null ? options.defaulty : 0.0;
+            element.no_overlap = options.noOverlap || false;
+            element.show_samples = options.showSamples || 0;
+            element.allow_add_values = options.allowAddValues ?? true;
+            element.draggable_x = options.draggableX ?? true;
+            element.draggable_y = options.draggableY ?? true;
+            element.smooth = (options.smooth && typeof( options.smooth ) == 'number' ? options.smooth : 0.3) || false;
+            element.move_out = options.moveOutAction ?? LX.CURVE_MOVEOUT_DELETE;
+
+            this.element = element;
+
+            let canvas = document.createElement( "canvas" );
+            canvas.width = canvas.height = options.size || 200;
+            element.appendChild( canvas );
+            this.canvas = canvas;
+
+            element.addEventListener( "mousedown", onmousedown );
+
+            element.getValueAt = function( x ) {
+
+                if( x < element.xrange[ 0 ] || x > element.xrange[ 1 ] )
+                {
+                    return element.defaulty;
+                }
+
+                var last = [ element.xrange[ 0 ], element.defaulty ];
+                var f = 0;
+                for( var i = 0; i < element.value.length; i += 1 )
+                {
+                    var v = element.value[ i ];
+                    if( x == v[ 0 ] ) return v[ 1 ];
+                    if( x < v[ 0 ] )
+                    {
+                        f = ( x - last[ 0 ] ) / (v[ 0 ] - last[ 0 ]);
+                        return last[ 1 ] * ( 1 - f ) + v[ 1 ] * f;
+                    }
+
+                    last = v;
+                }
+
+                v = [ element.xrange[ 1 ], element.defaulty ];
+                f = (x - last[ 0 ]) / (v[ 0 ] - last[ 0 ]);
+                return last[ 1 ] * ( 1 - f ) + v[ 1 ] * f;
+            }
+
+            element.resample = function( samples ) {
+
+                var r = [];
+                var dx = (element.xrange[1] - element.xrange[ 0 ]) / samples;
+                for(var i = element.xrange[0]; i <= element.xrange[1]; i += dx)
+                {
+                    r.push( element.getValueAt(i) );
+                }
+                return r;
+            }
+
+            element.addValue = function(v) {
+
+                for(var i = 0; i < element.value; i++) {
+                    var value = element.value[i];
+                    if(value[0] < v[0]) continue;
+                    element.value.splice(i,0,v);
+                    redraw();
+                    return;
+                }
+
+                element.value.push(v);
+                redraw();
+            }
+
+            //value to canvas
+            function convert(v, r) {
+
+                Math.pow(v[0],2)
+                return [ canvas.width * ( v[0] - element.xrange[0])/ (element.xrange[1]),
+                    canvas.height * (v[1] - element.yrange[0])/ (element.yrange[1])];
+            }
+
+            //canvas to value
+            function unconvert(v) {
+                return [(v[0] * element.xrange[1] / canvas.width + element.xrange[0]),
+                        (v[1] * element.yrange[1] / canvas.height + element.yrange[0])];
+            }
+
+            var selected = -1;
+
+            element.redraw = function( o = {} )  {
+
+                if( o.value ) element.value = o.value;
+                if( o.xrange ) element.xrange = o.xrange;
+                if( o.yrange ) element.yrange = o.yrange;
+                if( o.smooth ) element.smooth = o.smooth;
+                var rect = canvas.parentElement.getBoundingClientRect();
+                if( canvas.parentElement.parentElement ) rect = canvas.parentElement.parentElement.getBoundingClientRect();
+                if( rect && canvas.width != rect.width && rect.width && rect.width < 1000 )
+                {
+                    canvas.width = rect.width;
+                }
+
+                var ctx = canvas.getContext( "2d" );
+                ctx.setTransform( 1, 0, 0, 1, 0, 0 );
+                ctx.translate( 0, canvas.height );
+                ctx.scale( 1, -1 );
+
+                ctx.fillStyle = element.bgcolor;
+                ctx.fillRect(0,0,canvas.width,canvas.height);
+
+                ctx.strokeStyle = element.linecolor;
+                ctx.beginPath();
+
+                //draw line
+                var pos = convert([ element.xrange[ 0 ],element.defaulty ]);
+                ctx.moveTo( pos[ 0 ], pos[ 1 ] );
+                let values = [pos[ 0 ], pos[ 1 ]];
+
+                for(var i in element.value) {
+                    var value = element.value[i];
+                    pos = convert(value);
+                    values.push(pos[ 0 ]);
+                    values.push(pos[ 1 ]);
+
+                }
+
+                pos = convert([ element.xrange[ 1 ], element.defaulty ]);
+                values.push(pos[ 0 ]);
+                values.push(pos[ 1 ]);
+
+                // Draw points
+                const center =  [0,0];
+                pos = convert(center)
+                ctx.fillStyle = "gray";
+                ctx.beginPath();
+                ctx.arc( pos[ 0 ], pos[ 1 ], 3, 0, Math.PI * 2);
+                ctx.fill();
+
+                for( var i = 0; i < element.value.length; i += 1 ) {
+                    var value = element.value[ i ];
+                    pos = convert( value );
+                    if( selected == i )
+                        ctx.fillStyle = "white";
+                    else
+                        ctx.fillStyle = element.pointscolor;
+                    ctx.beginPath();
+                    ctx.arc( pos[ 0 ], pos[ 1 ], selected == i ? 4 : 3, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+
+                if(element.show_samples) {
+                    var samples = element.resample(element.show_samples);
+                    ctx.fillStyle = "#888";
+                    for(var i = 0; i < samples.length; i += 1)
+                    {
+                        var value = [ i * ((element.xrange[ 1 ] - element.xrange[ 0 ]) / element.show_samples) + element.xrange[ 0 ], samples[ i ] ];
+                        pos = convert(value);
+                        ctx.beginPath();
+                        ctx.arc( pos[ 0 ], pos[ 1 ], 2, 0, Math.PI * 2);
+                        ctx.fill();
+                    }
+                }
+            }
+
+            var last_mouse = [ 0, 0 ];
+
+            function onmousedown( e ) {
+                document.addEventListener( "mousemove", onmousemove );
+                document.addEventListener( "mouseup", onmouseup );
+
+                var rect = canvas.getBoundingClientRect();
+                var mousex = e.clientX - rect.left;
+                var mousey = e.clientY - rect.top;
+
+                selected = computeSelected( mousex, canvas.height - mousey );
+
+                if( e.button == LX.MOUSE_LEFT_CLICK && selected == -1 && element.allow_add_values ) {
+                    var v = unconvert([ mousex, canvas.height - mousey ]);
+                    element.value.push( v );
+                    sortValues();
+                    selected = element.value.indexOf( v );
+                }
+
+                last_mouse = [ mousex, mousey ];
+                element.redraw();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            function onmousemove( e ) {
+
+                var rect = canvas.getBoundingClientRect();
+                var mousex = e.clientX - rect.left;
+                var mousey = e.clientY - rect.top;
+
+                if( mousex < 0 ) mousex = 0;
+                else if( mousex > canvas.width ) mousex = canvas.width;
+                if( mousey < 0 ) mousey = 0;
+                else if( mousey > canvas.height ) mousey = canvas.height;
+
+                // Dragging to remove
+                const currentMouseDiff = [ e.clientX - rect.left, e.clientY - rect.top ];
+                if( selected != -1 && distance( currentMouseDiff, [ mousex, mousey ] ) > canvas.height * 0.5 )
+                {
+                    if( element.move_out == LX.CURVE_MOVEOUT_DELETE)
+                    {
+                        element.value.splice( selected, 1 );
+                    }
+                    else
+                    {
+                        const d = [ currentMouseDiff[ 0 ] - mousex, currentMouseDiff[ 1 ] - mousey ];
+                        let value = element.value[ selected ];
+                        value[ 0 ] = ( d[ 0 ] == 0.0 ) ? value[ 0 ] : ( d[ 0 ] < 0.0 ? element.xrange[ 0 ] : element.xrange[ 1 ] );
+                        value[ 1 ] = ( d[ 1 ] == 0.0 ) ? value[ 1 ] : ( d[ 1 ] < 0.0 ? element.yrange[ 1 ] : element.yrange[ 0 ] );
+                    }
+
+                    onmouseup( e );
+                    return;
+                }
+
+                var dx = element.draggable_x ? last_mouse[ 0 ] - mousex : 0;
+                var dy = element.draggable_y ? last_mouse[ 1 ] - mousey : 0;
+                var delta = unconvert([ -dx, dy ]);
+
+                if( selected != -1 ) {
+                    var minx = element.xrange[ 0 ];
+                    var maxx = element.xrange[ 1 ];
+
+                    if( element.no_overlap )
+                    {
+                        if( selected > 0) minx = element.value[ selected - 1 ][ 0 ];
+                        if( selected < ( element.value.length - 1 ) ) maxx = element.value[ selected + 1 ][ 0 ];
+                    }
+
+                    var v = element.value[selected];
+                    v[ 0 ] += delta[ 0 ];
+                    v[ 1 ] += delta[ 1 ];
+                    if(v[ 0 ] < minx) v[ 0 ] = minx;
+                    else if(v[ 0 ] > maxx) v[ 0 ] = maxx;
+                    if(v[ 1 ] < element.yrange[ 0 ]) v[ 1 ] = element.yrange[ 0 ];
+                    else if(v[ 1 ] > element.yrange[ 1 ]) v[ 1 ] = element.yrange[ 1 ];
+                }
+
+                sortValues();
+                element.redraw();
+                last_mouse[ 0 ] = mousex;
+                last_mouse[ 1 ] = mousey;
+                onchange( e );
+
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            function onmouseup( e ) {
+                selected = -1;
+                element.redraw();
+                document.removeEventListener("mousemove", onmousemove);
+                document.removeEventListener("mouseup", onmouseup);
+                onchange(e);
+                e.preventDefault();
+                e.stopPropagation();
+            }
+
+            function onchange( e ) {
+                if( options.callback )
+                    options.callback.call( element, element.value, e );
+            }
+
+            function distance(a,b) { return Math.sqrt( Math.pow(b[0]-a[0],2) + Math.pow(b[1]-a[1],2) ); };
+
+            function computeSelected( x, y ) {
+
+                var minDistance = 100000;
+                var maxDistance = 8; //pixels
+                var selected = -1;
+                for( var i = 0; i < element.value.length; i++ )
+                {
+                    var value = element.value[ i ];
+                    var pos = convert( value );
+                    var dist = distance( [ x,y ], pos );
+                    if( dist < minDistance && dist < maxDistance )
+                    {
+                        minDistance = dist;
+                        selected = i;
+                    }
+                }
+                return selected;
+            }
+
+            function sortValues() {
+                var v = null;
+                if( selected != -1 )
+                {
+                    v = element.value[ selected ];
+                }
+                element.value.sort(function( a,b ) { return a[ 0 ] - b[ 0 ]; });
+                if( v )
+                {
+                    selected = element.value.indexOf( v );
+                }
+            }
+
+            element.redraw();
+            return this;
+        }
+
+        redraw( options = {} ) {
+            this.element.redraw( options );
+        }
+    }
+
+    LX.Dial = Dial;
+
     class AssetViewEvent {
 
         static NONE             = 0;
@@ -7886,6 +8813,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.skipPreview = options.skipPreview ?? false;
             this.useNativeTitle = options.useNativeTitle ?? false;
             this.onlyFolders = options.onlyFolders ?? true;
+            this.allowMultipleSelection = options.allowMultipleSelection ?? false;
             this.previewActions = options.previewActions ?? [];
             this.contextMenu = options.contextMenu ?? [];
             this.onRefreshContent = options.onRefreshContent;
@@ -8284,15 +9212,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     itemEl.title = type + ": " + item.id;
                 }
 
-                if( item.selected != undefined )
+                if( that.allowMultipleSelection )
                 {
-                    let span = document.createElement('span');
-                    span.className = "lexcheckbox";
-                    let checkbox_input = document.createElement('input');
-                    checkbox_input.type = "checkbox";
-                    checkbox_input.className = "checkbox";
-                    checkbox_input.checked = item.selected;
-                    checkbox_input.addEventListener('change', ( e, v ) => {
+                    let checkbox = document.createElement( 'input' );
+                    checkbox.type = "checkbox";
+                    checkbox.className = "lexcheckbox";
+                    checkbox.checked = item.selected;
+                    checkbox.addEventListener('change', ( e, v ) => {
                         item.selected = !item.selected;
                         if( that.onevent )
                         {
@@ -8302,10 +9228,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         }
                         e.stopPropagation();
                         e.stopImmediatePropagation();
-                    })
-                    span.appendChild(checkbox_input);
-                    itemEl.appendChild(span);
+                    });
 
+                    itemEl.appendChild( checkbox );
                 }
 
                 let title = document.createElement('span');
@@ -8371,6 +9296,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         }
 
                         this.classList.add('selected');
+                        that.selectedItem = item;
 
                         if( !that.skipPreview )
                         {
@@ -8682,7 +9608,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 //request.mimeType = "text/plain; charset=x-user-defined";
                 dataType = "arraybuffer";
                 request.mimeType = "application/octet-stream";
-            }	
+            }
 
             //regular case, use AJAX call
             var xhr = new XMLHttpRequest();