lexgui 0.1.43 → 0.1.44

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.43",
+    version: "0.1.44",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -70,8 +70,22 @@ LX.setThemeColor = setThemeColor;
 
 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 )
+    {
+        if( window.matchMedia( "(prefers-color-scheme: light)" ).matches )
+        {
+            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;
@@ -589,6 +603,10 @@ function init( options = { } )
     {
         this.container.appendChild( root );
     }
+    else
+    {
+        this.root = document.body;
+    }
 
     // Disable drag icon
     root.addEventListener( 'dragover', function( e ) {
@@ -621,6 +639,11 @@ function init( options = { } )
         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;
 }
 
@@ -750,6 +773,25 @@ function prompt( text, title, callback, options = {} )
 
 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
 */
@@ -837,7 +879,9 @@ function emit( signalName, value, options = {} )
         }
         else
         {
-            obj[ signalName ].call( obj, value );
+            // This is a function callback!
+            const fn = obj;
+            fn( null, value );
         }
     }
 }
@@ -2631,27 +2675,29 @@ class Widget {
     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 NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -2724,6 +2770,7 @@ class Widget {
             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";
@@ -2739,8 +2786,11 @@ class Widget {
             case Widget.SIZE: return "Size";
             case Widget.PAD: return "Pad";
             case Widget.FORM: return "Form";
+            case Widget.DIAL: return "Dial";
             case Widget.CUSTOM: return this.customName;
         }
+
+        console.error( `Unknown Widget type: ${ this.type }` );
     }
 
     refresh() {
@@ -3913,41 +3963,50 @@ class Panel {
     /**
      * @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;
     }
 
@@ -3996,6 +4055,11 @@ class Panel {
         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;
 
@@ -4464,20 +4528,33 @@ class Panel {
 
         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" } );
+
+            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 ) => {
             if( callback )
             {
                 callback( container.formData, event );
             }
-        } );
+        }, { buttonClass: "accept", width: "calc(100% - 10px)" } );
 
         this.clearQueue();
 
@@ -4493,16 +4570,32 @@ class Panel {
 
     /**
      * @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;
     }
 
@@ -4607,7 +4700,7 @@ class Panel {
                 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 ) => {
@@ -4850,6 +4943,86 @@ class Panel {
         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
@@ -5257,29 +5430,36 @@ class Panel {
      * @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
@@ -5287,55 +5467,132 @@ class Panel {
         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";
+        container.appendChild( checkbox );
+        container.appendChild( valueName );
+
+        checkbox.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 = checkbox.checked != checkbox.iValue ? "block": "none";
+            }
+
+            // Open suboptions
+            let submenu = element.querySelector( ".lexcheckboxsubmenu" );
+            if( submenu ) submenu.toggleAttribute( 'hidden', !checkbox.checked );
+
+            if( !skipCallback ) this._trigger( new IEvent( name, checkbox.checked, e ), callback );
+        });
+
+        element.appendChild( container );
+
+        if( options.suboptions )
+        {
+            element.style.flexWrap = "wrap";
+            let suboptions = document.createElement('div');
+            suboptions.className = "lexcheckboxsubmenu";
+            suboptions.toggleAttribute( 'hidden', !checkbox.checked );
+
+            this.queue( suboptions );
+            options.suboptions.call(this, this);
+            this.clearQueue();
+
+            element.appendChild( suboptions );
         }
 
-        toggle.appendChild( flag );
+        return widget;
+    }
+
+    /**
+     * @method addToggle
+     * @param {String} name Widget name
+     * @param {Boolean} value Value of the checkbox
+     * @param {Function} callback Callback function on change
+     * @param {*} options:
+     * disabled: Make the widget disabled [false]
+     * suboptions: Callback to add widgets in case of TRUE value
+     * className: Customize colors
+     */
 
-        let value_name = document.createElement( 'span' );
-        value_name.id = "checkboxtext";
-        value_name.innerHTML = "On";
+    addToggle( name, value, callback, options = {} ) {
 
-        container.appendChild( toggle );
-        container.appendChild( value_name );
+        if( !name )
+        {
+            throw( "Set Widget Name!" );
+        }
 
-        toggle.addEventListener( "click" , e => {
+        let widget = this.create_widget( name, Widget.TOGGLE, options );
 
-            let flag = toggle.querySelector( ".checkbox" );
-            if( flag.disabled )
-                return;
+        widget.onGetValue = () => {
+            return toggle.checked;
+        };
+
+        widget.onSetValue = ( newValue, skipCallback ) => {
+            if( toggle.checked !== newValue )
+            {
+                toggle.checked = newValue;
+                Panel._dispatch_event( toggle, "change", skipCallback );
+            }
+        };
+
+        let element = widget.domEl;
+
+        // Add reset functionality
+        Panel._add_reset_property( element.domName, function() {
+            toggle.checked = !toggle.checked;
+            Panel._dispatch_event( toggle, "change" );
+        });
+
+        // Add widget value
+
+        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;
 
-            const skipCallback = ( e.detail.constructor == Number ? null : e.detail );
+        let valueName = document.createElement( 'span' );
+        valueName.className = "toggletext";
+        valueName.innerHTML = "On";
+
+        container.appendChild( toggle );
+        container.appendChild( valueName );
 
-            let check = toggle.querySelector( ".checkbox a" );
+        toggle.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 = toggle.checked != toggle.iValue ? "block": "none";
             }
 
             // Open suboptions
-            let submenu = element.querySelector( ".lexcheckboxsubmenu" );
-            if( submenu ) submenu.toggleAttribute( 'hidden', !flag.value );
+            let submenu = element.querySelector( ".lextogglesubmenu" );
+            if( submenu ) submenu.toggleAttribute( 'hidden', !toggle.checked );
 
-            if( !skipCallback ) this._trigger( new IEvent( name, flag.value, e ), callback );
+            if( !skipCallback ) this._trigger( new IEvent( name, toggle.checked, e ), callback );
         });
 
         element.appendChild( container );
@@ -5344,14 +5601,14 @@ class Panel {
         {
             element.style.flexWrap = "wrap";
             let suboptions = document.createElement('div');
-            suboptions.className = "lexcheckboxsubmenu";
-            suboptions.toggleAttribute('hidden', !flag.value);
+            suboptions.className = "lextogglesubmenu";
+            suboptions.toggleAttribute( 'hidden', !toggle.checked );
 
             this.queue( suboptions );
             options.suboptions.call(this, this);
             this.clearQueue();
 
-            element.appendChild(suboptions);
+            element.appendChild( suboptions );
         }
 
         return widget;
@@ -5580,7 +5837,14 @@ class Panel {
             };
         }
 
-        // 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();
@@ -6276,8 +6540,11 @@ class Panel {
         };
         widget.onSetValue = ( newValue, skipCallback ) => {
             element.querySelector("meter").value = newValue;
+            _updateColor();
             if( element.querySelector("span") )
+            {
                 element.querySelector("span").innerText = newValue;
+            }
         };
 
         let element = widget.domEl;
@@ -6294,14 +6561,26 @@ class Panel {
         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 srgb, ${backgroundColor} 20%, transparent)`;
+        };
 
         container.appendChild( progress );
         element.appendChild( container );
@@ -6367,6 +6646,8 @@ class Panel {
             }
         }
 
+        _updateColor();
+
         return widget;
     }
 
@@ -6376,6 +6657,7 @@ class Panel {
      * @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]
      */
@@ -6396,8 +6678,10 @@ class Panel {
 
         // 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 )
         {
@@ -7215,8 +7499,8 @@ class ContextMenu {
 
         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();
@@ -7505,7 +7789,7 @@ class Curve {
         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 || [];
@@ -7520,6 +7804,12 @@ class Curve {
         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" );
@@ -7823,39 +8113,368 @@ class Curve {
 
 LX.Curve = Curve;
 
-class AssetViewEvent {
-
-    static NONE             = 0;
-    static ASSET_SELECTED   = 1;
-    static ASSET_DELETED    = 2;
-    static ASSET_RENAMED    = 3;
-    static ASSET_CLONED     = 4;
-    static ASSET_DBLCLICKED = 5;
-    static ENTER_FOLDER     = 6;
-    static ASSET_CHECKED    = 7;
+/**
+ * @class Dial
+ */
 
-    constructor( type, item, value ) {
-        this.type = type || TreeEvent.NONE;
-        this.item = item;
-        this.value = value;
-        this.multiple = false; // Multiple selection
-    }
+class Dial {
 
-    string() {
-        switch(this.type) {
-            case AssetViewEvent.NONE: return "assetview_event_none";
-            case AssetViewEvent.ASSET_SELECTED: return "assetview_event_selected";
-            case AssetViewEvent.ASSET_DELETED: return "assetview_event_deleted";
-            case AssetViewEvent.ASSET_RENAMED: return "assetview_event_renamed";
-            case AssetViewEvent.ASSET_CLONED: return "assetview_event_cloned";
-            case AssetViewEvent.ASSET_DBLCLICKED: return "assetview_event_dblclicked";
-            case AssetViewEvent.ENTER_FOLDER: return "assetview_event_enter_folder";
-            case AssetViewEvent.ASSET_CHECKED: return "assetview_event_checked";
-        }
-    }
-};
+    constructor( panel, value, options = {} ) {
 
-LX.AssetViewEvent = AssetViewEvent;
+        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;
+    static ASSET_SELECTED   = 1;
+    static ASSET_DELETED    = 2;
+    static ASSET_RENAMED    = 3;
+    static ASSET_CLONED     = 4;
+    static ASSET_DBLCLICKED = 5;
+    static ENTER_FOLDER     = 6;
+    static ASSET_CHECKED    = 7;
+
+    constructor( type, item, value ) {
+        this.type = type || TreeEvent.NONE;
+        this.item = item;
+        this.value = value;
+        this.multiple = false; // Multiple selection
+    }
+
+    string() {
+        switch(this.type) {
+            case AssetViewEvent.NONE: return "assetview_event_none";
+            case AssetViewEvent.ASSET_SELECTED: return "assetview_event_selected";
+            case AssetViewEvent.ASSET_DELETED: return "assetview_event_deleted";
+            case AssetViewEvent.ASSET_RENAMED: return "assetview_event_renamed";
+            case AssetViewEvent.ASSET_CLONED: return "assetview_event_cloned";
+            case AssetViewEvent.ASSET_DBLCLICKED: return "assetview_event_dblclicked";
+            case AssetViewEvent.ENTER_FOLDER: return "assetview_event_enter_folder";
+            case AssetViewEvent.ASSET_CHECKED: return "assetview_event_checked";
+        }
+    }
+};
+
+LX.AssetViewEvent = AssetViewEvent;
 
 /**
  * @class AssetView
@@ -7898,6 +8517,7 @@ class AssetView {
         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;
@@ -8296,15 +8916,13 @@ class AssetView {
                 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 )
                     {
@@ -8314,10 +8932,9 @@ class AssetView {
                     }
                     e.stopPropagation();
                     e.stopImmediatePropagation();
-                })
-                span.appendChild(checkbox_input);
-                itemEl.appendChild(span);
+                });
 
+                itemEl.appendChild( checkbox );
             }
 
             let title = document.createElement('span');
@@ -8383,6 +9000,7 @@ class AssetView {
                     }
 
                     this.classList.add('selected');
+                    that.selectedItem = item;
 
                     if( !that.skipPreview )
                     {