lexgui 0.1.33 → 0.1.35

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.33",
+    version: "0.1.35",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -21,8 +21,11 @@ LX.MOUSE_RIGHT_CLICK    = 2;
 LX.MOUSE_DOUBLE_CLICK = 2;
 LX.MOUSE_TRIPLE_CLICK = 3;
 
-function clamp (num, min, max) { return Math.min(Math.max(num, min), max) }
-function round(num, n) { return +num.toFixed(n); }
+LX.CURVE_MOVEOUT_CLAMP = 0;
+LX.CURVE_MOVEOUT_DELETE = 1;
+
+function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
+function round( num, n ) { return +num.toFixed( n ); }
 
 function getSupportedDOMName( string )
 {
@@ -466,7 +469,7 @@ function init( options = { } )
     var link = document.createElement( 'link' );
     link.rel = 'stylesheet';
     link.type = 'text/css';
-    link.href = 'https://use.fontawesome.com/releases/v6.5.1/css/all.css';
+    link.href = 'https://use.fontawesome.com/releases/v6.6.0/css/all.css';
     head.appendChild( link );
 
     // Global vars
@@ -520,26 +523,29 @@ LX.message = message;
  * size: (Array) [width, height]
  */
 
-function popup(text, title, options = {})
+function popup( text, title, options = {} )
 {
-    if(!text)
+    if( !text )
+    {
         throw("No message to show");
+    }
 
-    options.size = options.size ?? ["auto", "auto"];
+    options.size = options.size ?? [ "auto", "auto" ];
     options.class = "lexpopup";
-    const time = options.timeout || 3000; 
 
-    const dialog = new Dialog(title, p => {
-        p.addTextArea(null, text, null, { disabled: true, fitHeight: true });
-    }, options);
+    const time = options.timeout || 3000; 
+    const dialog = new Dialog( title, p => {
+        p.addTextArea( null, text, null, { disabled: true, fitHeight: true } );
+    }, options );
     
-    dialog.root.classList.add("fadein");
+    dialog.root.classList.add( 'fadein' );
     setTimeout(() => {
-        dialog.root.classList.remove("fadein");
-        dialog.root.classList.add("fadeout");   
-    }, time - 1000);
+        dialog.root.classList.remove( 'fadein' );
+        dialog.root.classList.add( 'fadeout' );
+    }, time - 1000 );
     
-    setTimeout(dialog.close, time);
+    setTimeout( dialog.close, time );
+
     return dialog;
 }
 
@@ -558,36 +564,45 @@ LX.popup = popup;
  * required: Input has to be filled [true]. Default: false
  */
 
-function prompt(text, title, callback, options = {})
+function prompt( text, title, callback, options = {} )
 {
     options.modal = true;
 
     let value = "";
 
-    const dialog = new Dialog(title, p => {
-        p.addTextArea(null, text, null, { disabled: true });
-        if(options.input !== false)
-            p.addText(null, options.input || value, (v) => value = v, {placeholder: "..."} );
-        p.sameLine(2);
-        p.addButton(null, options.accept || "OK", () => { 
-            if(options.required && value === '') {
+    const dialog = new Dialog( title, p => {
 
-                text += text.includes("You must fill the input text.") ? "": "\nYou must fill the input text.";
-                dialog.close() ;
-                prompt(text, title, callback, options);
-            }else {
+        p.addTextArea( null, text, null, { disabled: true, fitHeight: true } );
 
-                callback.call(this, value); 
-                dialog.close() ;
+        if( options.input ?? true )
+        {
+            p.addText( null, options.input || value, v => value = v, { placeholder: "..." } );
+        }
+
+        p.sameLine( 2 );
+
+        p.addButton( null, options.accept || "OK", () => {
+            if( options.required && value === '' )
+            {
+                text += text.includes("You must fill the input text.") ? "": "\nYou must fill the input text.";
+                dialog.close();
+                prompt( text, title, callback, options );
+            }else
+            {
+                if( callback ) callback.call( this, value );
+                dialog.close();
             }
-            
         }, { buttonClass: "accept" });
+
         p.addButton(null, "Cancel", () => {if(options.on_cancel) options.on_cancel(); dialog.close();} );
-    }, options);
+
+    }, options );
 
     // Focus text prompt
-    if(options.input !== false)
-        dialog.root.querySelector('input').focus();
+    if( options.input ?? true )
+    {
+        dialog.root.querySelector( 'input' ).focus();
+    }
     
     return dialog;
 }
@@ -624,6 +639,7 @@ class TreeEvent {
         this.node = node;
         this.value = value;
         this.multiple = false; // Multiple selection
+        this.panel = null;
     }
     
     string() {
@@ -892,35 +908,36 @@ class Area {
     
     split( options = {} ) {
 
-        if(this.sections.length)
+        if( this.sections.length )
         {
             // In case Area has been split before, get 2nd section as root
-            this.offset = this.root.childNodes[0].offsetHeight; // store offset to take into account when resizing
-            this._root = this.sections[0].root;
-            this.root = this.sections[1].root;
+            this.offset = this.root.childNodes[ 0 ].offsetHeight; // store offset to take into account when resizing
+            this._root = this.sections[ 0 ].root;
+            this.root = this.sections[ 1 ].root;
         }
 
         var type = options.type || "horizontal";
-        var sizes = options.sizes || ["50%", "50%"];
+        var sizes = options.sizes || [ "50%", "50%" ];
         var infer_height = false;
-        var auto = options.sizes === 'auto';
+        var auto = (options.sizes === 'auto');
 
-        if( !sizes[1] )
+        if( !sizes[ 1 ] )
         {
-            let size = sizes[0];
+            let size = sizes[ 0 ];
             let margin = options.top ? options.top : 0;
-            if(size.constructor == Number) {
+            if( size.constructor == Number )
+            {
                 size += margin;
                 size += "px";
             }
             
-            sizes[1] = "calc( 100% - " + size + " )";
+            sizes[ 1 ] = "calc( 100% - " + size + " )";
             infer_height = true;
         }
 
         // Create areas
-        var area1 = new Area({ no_append: true, className: "split" + (options.menubar || options.sidebar ? "" : " origin") });
-        var area2 = new Area({ no_append: true, className: "split"});
+        var area1 = new Area( { no_append: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
+        var area2 = new Area( { no_append: true, className: "split"} );
 
         area1.parentArea = this;
         area2.parentArea = this;
@@ -931,23 +948,27 @@ class Area {
         var data = "0px";
         this.offset = 0;
 
-        if(resize)
+        if( resize )
         {
             this.resize = resize;
-            this.split_bar = document.createElement("div");
+            this.split_bar = document.createElement( "div" );
             this.split_bar.className = "lexsplitbar " + type;
 
-            if(type == "horizontal") {
+            if( type == "horizontal" )
+            {
                 this.split_bar.style.width = LX.DEFAULT_SPLITBAR_SIZE + "px";
             }
-            else {
+            else
+            {
                 this.split_bar.style.height = LX.DEFAULT_SPLITBAR_SIZE + "px";
             }
-            this.split_bar.addEventListener("mousedown", inner_mousedown);
-            data = LX.DEFAULT_SPLITBAR_SIZE/2 + "px"; // updates
+
+            this.split_bar.addEventListener( 'mousedown', inner_mousedown );
+
+            data = ( LX.DEFAULT_SPLITBAR_SIZE / 2 ) + "px"; // updates
 
             // Being minimizable means it's also resizeable!
-            if(minimizable)
+            if( minimizable )
             {
                 this.split_extended = false;
 
@@ -969,14 +990,14 @@ class Area {
             }
         }
 
-        if(type == "horizontal")
+        if( type == "horizontal" )
         {
-            var width1 = sizes[0],
-                width2 = sizes[1];
+            var width1 = sizes[ 0 ],
+                width2 = sizes[ 1 ];
 
-            if(width1.constructor == Number)
+            if( width1.constructor == Number )
                 width1 += "px";
-            if(width2.constructor == Number)
+            if( width2.constructor == Number )
                 width2 += "px";
 
             area1.root.style.width = "calc( " + width1 + " - " + data + " )";
@@ -995,19 +1016,19 @@ class Area {
                 area1.root.style.height = "auto";
 
                 // Listen resize event on first area
-                const resizeObserver = new ResizeObserver((entries) => {
+                const resizeObserver = new ResizeObserver( entries => {
                     for (const entry of entries) {
                         const bb = entry.contentRect;
                         area2.root.style.height = "calc(100% - " + ( bb.height + 4) + "px )";
                     }
                 });
 
-                resizeObserver.observe(area1.root);
+                resizeObserver.observe( area1.root );
             }
             else
             {
-                var height1 = sizes[0],
-                    height2 = sizes[1];
+                var height1 = sizes[ 0 ],
+                    height2 = sizes[ 1 ];
 
                 if(height1.constructor == Number)
                     height1 += "px";
@@ -1022,7 +1043,7 @@ class Area {
 
         this.root.appendChild( area1.root );
 
-        if(resize) 
+        if( resize )
         {
             this.root.appendChild(this.split_bar);
         }
@@ -1034,55 +1055,67 @@ class Area {
         // Update sizes
         this._update();
 
-        if(!resize)
+        if( !resize )
         {
             return this.sections;
         }
 
-        // from litegui.js @jagenjo
-
         var that = this;
-        var last_pos = [0,0];
-        function inner_mousedown(e)
+        var last_pos = [ 0, 0 ];
+
+        function inner_mousedown( e )
         {
             var doc = that.root.ownerDocument;
-            doc.addEventListener("mousemove",inner_mousemove);
-            doc.addEventListener("mouseup",inner_mouseup);
+            doc.addEventListener( 'mousemove', inner_mousemove );
+            doc.addEventListener( 'mouseup', inner_mouseup );
             last_pos[0] = e.x;
             last_pos[1] = e.y;
             e.stopPropagation();
             e.preventDefault();
-            document.body.classList.add("nocursor");
-            that.split_bar.classList.add("nocursor");
+            document.body.classList.add( 'nocursor' );
+            that.split_bar.classList.add( 'nocursor' );
         }
 
-        function inner_mousemove(e)
+        function inner_mousemove( e )
         {
-            if(that.type == "horizontal") {
-                that._moveSplit(last_pos[0] - e.x);
+            if(that.type == "horizontal")
+            {
+                that._moveSplit( last_pos[ 0 ] - e.x );
             }
-            else {
-                that._moveSplit(last_pos[1] - e.y);
+            else
+            {
+                that._moveSplit( last_pos[ 1 ] - e.y );
             }
             
-            last_pos[0] = e.x;
-            last_pos[1] = e.y;
+            last_pos[ 0 ] = e.x;
+            last_pos[ 1 ] = e.y;
+
+            const widgets = that.root.querySelectorAll( ".lexwidget" );
+
+            // Send area resize to every widget in the area
+            for( let widget of widgets )
+            {
+                const jsInstance = widget.jsIinstance;
+
+                if( jsInstance.onresize )
+                {
+                    jsInstance.onresize();
+                }
+            }
+
             e.stopPropagation();
             e.preventDefault();
         }
 
-        function inner_mouseup(e)
+        function inner_mouseup( e )
         {
             var doc = that.root.ownerDocument;
-            doc.removeEventListener("mousemove",inner_mousemove);
-            doc.removeEventListener("mouseup",inner_mouseup);
-            document.body.classList.remove("nocursor");
-            that.split_bar.classList.remove("nocursor");
+            doc.removeEventListener( 'mousemove', inner_mousemove );
+            doc.removeEventListener( 'mouseup', inner_mouseup );
+            document.body.classList.remove( 'nocursor' );
+            that.split_bar.classList.remove( 'nocursor' );
         }
 
-        // Is this necessary?..
-        // setTimeout( () => this._moveSplit(0), 100);
-
         return this.sections;
     }
 
@@ -2596,7 +2629,8 @@ LX.ADD_CUSTOM_WIDGET = ADD_CUSTOM_WIDGET;
 
 class NodeTree {
         
-    constructor(domEl, data, options) {
+    constructor( domEl, data, options ) {
+
         this.domEl = domEl;
         this.data = data;
         this.onevent = options.onevent;
@@ -2604,10 +2638,10 @@ class NodeTree {
         this.selected = [];
 
         if(data.constructor === Object)
-            this._create_item(null, data);
+            this._create_item( null, data );
         else
             for( let d of data )
-                this._create_item(null, d);
+                this._create_item( null, d );
     }
 
     _create_item( parent, node, level = 0, selectedId ) {
@@ -2674,32 +2708,32 @@ class NodeTree {
                 return;
             }
 
-            if(!e.shiftKey) {
-                list.querySelectorAll("li").forEach( e => { e.classList.remove('selected'); } );
+            if( !e.shiftKey ) {
+                list.querySelectorAll( "li" ).forEach( e => { e.classList.remove( 'selected' ); } );
                 this.selected.length = 0;
             }
             
             // Add or remove
             const idx = this.selected.indexOf( node );
             if( idx > -1 ) {
-                item.classList.remove('selected');
-                this.selected.splice(idx, 1);
+                item.classList.remove( 'selected' );
+                this.selected.splice( idx, 1 );
             }else {
-                item.classList.add('selected');
+                item.classList.add( 'selected' );
                 this.selected.push( node );
             }
 
             // Only Show children...
-            if(is_parent && node.id.length > 1 /* Strange case... */) {
+            if( is_parent && node.id.length > 1 /* Strange case... */) {
                 node.closed = false;
-                if(that.onevent) {
+                if( that.onevent ) {
                     const event = new TreeEvent(TreeEvent.NODE_CARETCHANGED, node, node.closed);
                     that.onevent( event );
                 }
                 that.frefresh( node.id );
             }
 
-            if(that.onevent) {
+            if( that.onevent ) {
                 const event = new TreeEvent(TreeEvent.NODE_SELECTED, e.shiftKey ? this.selected : node );
                 event.multiple = e.shiftKey;
                 that.onevent( event );
@@ -2707,15 +2741,17 @@ class NodeTree {
         });
 
         item.addEventListener("dblclick", function() {
+
             if( that.options.rename ?? true )
             {
                 // Trigger rename
                 node.rename = true;
                 that.refresh();
             }
+
             if( that.onevent )
             {
-                const event = new TreeEvent(TreeEvent.NODE_DBLCLICKED, node);
+                const event = new TreeEvent( TreeEvent.NODE_DBLCLICKED, node );
                 that.onevent( event );
             }
         });
@@ -2725,19 +2761,88 @@ class NodeTree {
             if(that.onevent) {
                 const event = new TreeEvent(TreeEvent.NODE_CONTEXTMENU, this.selected.length > 1 ? this.selected : node, e);
                 event.multiple = this.selected.length > 1;
+
+                LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.value, m => {
+                    event.panel = m;
+                });
+
                 that.onevent( event );
+
+                if( ( this.options.addDefault ?? false ) == true )
+                {
+                    if( event.panel.items )
+                    {
+                        event.panel.add( "" );
+                    }
+    
+                    event.panel.add( "Select Children", () => {
+    
+                        const selectChildren = ( n ) => {
+                            
+                            if( n.closed )
+                            {
+                                return;
+                            }
+    
+                            for( let child of n.children ?? [] )
+                            {
+                                if( !child )
+                                {
+                                    continue;   
+                                }
+    
+                                let nodeItem = this.domEl.querySelector( '#' + child.id );
+                                nodeItem.classList.add('selected');
+                                this.selected.push( child ); 
+                                selectChildren( child );
+                            }
+                        };
+    
+                        // Add childs of the clicked node
+                        selectChildren( node );
+    
+                    } );
+                    
+                    // event.panel.add( "Clone", { callback: () => {
+    
+                    // } } );
+    
+                    event.panel.add( "Delete", { callback: () => {
+    
+                        // It's the root node
+                        if( !node.parent )
+                        {
+                            return;
+                        }
+    
+                        if( that.onevent ) {
+                            const event = new TreeEvent( TreeEvent.NODE_DELETED, node, e );
+                            that.onevent( event );
+                        }
+    
+                        // Delete nodes now
+                        let childs = node.parent.children;
+                        const index = childs.indexOf( node );
+                        childs.splice( index, 1 );
+    
+                        this.refresh();
+                    } } );
+                }
             }
         });
 
         item.addEventListener("keydown", e => {
-            if(node.rename)
-            return;
+
+            if( node.rename )
+                return;
+
             e.preventDefault();
+
             if( e.key == "Delete" )
             {
                 // Send event now so we have the info in selected array..
-                if(that.onevent) {
-                    const event = new TreeEvent(TreeEvent.NODE_DELETED, this.selected.length > 1 ? this.selected : node, e);
+                if( that.onevent ) {
+                    const event = new TreeEvent( TreeEvent.NODE_DELETED, this.selected.length > 1 ? this.selected : node, e );
                     event.multiple = this.selected.length > 1;
                     that.onevent( event );
                 }
@@ -2755,8 +2860,8 @@ class NodeTree {
             }
             else if( e.key == "ArrowUp" || e.key == "ArrowDown" ) // Unique or zero selected
             {
-                var selected = this.selected.length > 1 ? (e.key == "ArrowUp" ? this.selected.shift() : this.selected.pop()) : this.selected[0];
-                var el = this.domEl.querySelector("#" + LX.getSupportedDOMName( selected.id ) );
+                var selected = this.selected.length > 1 ? ( e.key == "ArrowUp" ? this.selected.shift() : this.selected.pop() ) : this.selected[ 0 ];
+                var el = this.domEl.querySelector( "#" + LX.getSupportedDOMName( selected.id ) );
                 var sibling = e.key == "ArrowUp" ? el.previousSibling : el.nextSibling;
                 if( sibling ) sibling.click();
             }
@@ -3227,7 +3332,7 @@ class Panel {
 
         if( type != Widget.TITLE )
         {
-            element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE || ( type == Widget.BUTTON && !name ) ? 10 : 20) + "px)";
+            element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE ? 10 : 20) + "px)";
             if( options.width ) {
                 element.style.width = element.style.minWidth = options.width;
             }
@@ -3279,6 +3384,7 @@ class Panel {
         }
 
         widget.domEl = element;
+        element.jsIinstance = widget;
 
         const insert_widget = el => {
             if(options.container)
@@ -4046,37 +4152,39 @@ class Panel {
 
     addDropdown( name, values, value, callback, options = {} ) {
 
-        let widget = this.create_widget(name, Widget.DROPDOWN, options);
+        let widget = this.create_widget( name, Widget.DROPDOWN, options );
+
         widget.onGetValue = () => {
-            return element.querySelector("li.selected").getAttribute('value');
+            return element.querySelector( "li.selected" ).getAttribute( 'value' );
         };
+
         widget.onSetValue = ( newValue, skipCallback ) => {
-            let btn = element.querySelector(".lexwidgetname .lexicon");
-            if(btn) btn.style.display = (newValue != wValue.iValue ? "block" : "none");
+            let btn = element.querySelector( ".lexwidgetname .lexicon" );
+            if( btn ) btn.style.display = ( newValue != wValue.iValue ? "block" : "none" );
             value = newValue;
-            list.querySelectorAll('li').forEach( e => { if( e.getAttribute('value') == value ) e.click() } );
-            if( !skipCallback ) this._trigger( new IEvent(name, value, null), callback ); 
+            list.querySelectorAll( 'li' ).forEach( e => { if( e.getAttribute('value') == value ) e.click() } );
+            if( !skipCallback ) this._trigger( new IEvent( name, value, null ), callback );
         };
 
         let element = widget.domEl;
         let that = this;
 
         // Add reset functionality
-        if(widget.name && !(options.skipReset ?? false))
+        if(widget.name && !( options.skipReset ?? false ))
         {
-            Panel._add_reset_property(element.domName, function() {
+            Panel._add_reset_property( element.domName, function() {
                 value = wValue.iValue;
-                list.querySelectorAll('li').forEach( e => { if( e.getAttribute('value') == value ) e.click() } );
+                list.querySelectorAll( 'li' ).forEach( e => { if( e.getAttribute('value') == value ) e.click() } );
                 this.style.display = "none";
             });
         }
 
-        let container = document.createElement('div');
+        let container = document.createElement( 'div' );
         container.className = "lexdropdown";
         container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
         
         // Add widget value
-        let wValue = document.createElement('div');
+        let wValue = document.createElement( 'div' );
         wValue.className = "lexdropdown lexoption";
         wValue.name = name;
         wValue.iValue = value;
@@ -4087,14 +4195,15 @@ class Panel {
 
         this.queue(container);
 
-        let selectedOption = this.addButton(null, buttonName, (value, event) => {
+        let selectedOption = this.addButton( null, buttonName, (value, event) => {
             if( list.unfocus_event ) {
                 delete list.unfocus_event;
                 return;
             }
-            element.querySelector(".lexoptions").style.top = (selectedOption.offsetTop + selectedOption.offsetHeight) + 'px';
-            element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 'px';
-            element.querySelector(".lexoptions").toggleAttribute('hidden');
+            const topPosition = selectedOption.getBoundingClientRect().y;
+            list.style.top = (topPosition + selectedOption.offsetHeight) + 'px';
+            list.style.width = (event.currentTarget.clientWidth) + 'px';
+            list.toggleAttribute('hidden');
             list.focus();
         }, { buttonClass: 'array', skipInlineCount: true });
 
@@ -4238,7 +4347,14 @@ class Panel {
      * @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)
+    */
 
     addCurve( name, values, callback, options = {} ) {
 
@@ -4248,34 +4364,36 @@ class Panel {
 
         let that = this;
         let widget = this.create_widget(name, Widget.CURVE, options);
+
         widget.onGetValue = () => {
-            return JSON.parse(JSON.stringify(curve_instance.element.value));
+            return JSON.parse(JSON.stringify(curveInstance.element.value));
         };
+
         widget.onSetValue = ( newValue, skipCallback ) => {
-            let btn = element.querySelector(".lexwidgetname .lexicon");
-            if(btn) btn.style.display = (newValue != curve_instance.element.value ? "block" : "none");
-            curve_instance.element.value = JSON.parse(JSON.stringify(newValue));
-            curve_instance.redraw();
-            if( !skipCallback ) that._trigger( new IEvent(name, curve_instance.element.value, null), callback );
+            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));
+        let defaultValues = JSON.parse( JSON.stringify( values ) );
 
         // Add reset functionality
         if( !(options.skipReset ?? false) )
         {
             Panel._add_reset_property(element.domName, function(e) {
                 this.style.display = "none";
-                curve_instance.element.value = JSON.parse(JSON.stringify(defaultValues));
-                curve_instance.redraw();
-                that._trigger( new IEvent(name, curve_instance.element.value, e), callback );
+                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');
+        var container = document.createElement( 'div' );
         container.className = "lexcurve";
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
@@ -4284,16 +4402,22 @@ class Panel {
             if(btn) btn.style.display = (v != defaultValues ? "block" : "none");
             that._trigger( new IEvent(name, v, e), callback );
         };
+
         options.name = name;
-        let curve_instance = new Curve(this, values, options);
-        container.appendChild(curve_instance.element);
-        element.appendChild(container);
+
+        let curveInstance = new Curve( this, values, options );
+        container.appendChild( curveInstance.element );
+        element.appendChild( container );
 
         // Resize
-        curve_instance.canvas.width = container.offsetWidth;
-        curve_instance.redraw();
-        widget.onresize = curve_instance.redraw.bind(curve_instance);
-        widget.curve_instance = curve_instance;
+        widget.onresize = curveInstance.redraw.bind( curveInstance );
+        widget.curveInstance = curveInstance;
+
+        doAsync(() => {
+            curveInstance.canvas.width = container.offsetWidth;
+            curveInstance.redraw();
+        });
+
         return widget;
     }
 
@@ -4742,19 +4866,19 @@ class Panel {
         flag.id = "checkbox"+simple_guidGenerator();
         flag.innerHTML = "<a class='fa-solid fa-check' style='display: " + (flag.value ? "block" : "none") + "'></a>";
         
-        if(options.disabled) {
+        if( options.disabled ) {
             flag.disabled = true;
             toggle.className += " disabled";
         }
 
-        toggle.appendChild(flag);
+        toggle.appendChild( flag );
 
-        let value_name = document.createElement('span');
+        let value_name = document.createElement( 'span' );
         value_name.id = "checkboxtext";
         value_name.innerHTML = "On";
 
-        container.appendChild(toggle);
-        container.appendChild(value_name);
+        container.appendChild( toggle );
+        container.appendChild( value_name );
 
         toggle.addEventListener( "click" , e => {
 
@@ -4762,7 +4886,7 @@ class Panel {
             if( flag.disabled )
                 return;
 
-            const skipCallback = (e.detail.constructor == Number ? null : skipCallback);
+            const skipCallback = ( e.detail.constructor == Number ? null : e.detail );
 
             let check = toggle.querySelector( ".checkbox a" );
 
@@ -4846,7 +4970,7 @@ class Panel {
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
         let color = document.createElement( 'input' );
-        color.style.width = "calc(30% - 6px)";
+        color.style.width = "32px";
         color.type = 'color';
         color.className = "colorinput";
         color.id = "color" + simple_guidGenerator();
@@ -4887,7 +5011,7 @@ class Panel {
             change_from_input = true;
             widget.set( v );
             change_from_input = false;
-        }, { width: "calc(70% - 4px)" });
+        }, { width: "calc( 100% - 32px )"});
         
         text_widget.domEl.style.marginLeft = "4px";
 
@@ -6422,69 +6546,71 @@ LX.addContextMenu = addContextMenu;
 
 class Curve {
 
-    constructor(panel, value, options = {}) {
+    constructor( panel, value, options = {} ) {
 
-        let element = document.createElement("div");
-        element.className = "curve " + (options.className ? options.className : "");
+        let element = document.createElement( "div" );
+        element.className = "curve " + ( options.className ? options.className : "" );
         element.style.minHeight = "50px";
         element.style.width = options.width || "100%";
+        element.style.minWidth = "50px";
+        element.style.minHeight = "20px";
 
-        element.bgcolor = options.bgcolor || LX.getThemeColor("global-dark-background");
-        element.pointscolor = options.pointscolor || LX.getThemeColor("global-selected-light");
-        element.linecolor = options.linecolor || "#555";
-
+        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.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_trespassing = options.no_trespassing || false;
-        element.show_samples = options.show_samples || 0;
-        element.allow_add_values = options.allow_add_values ?? true;
-        element.draggable_x = options.draggable_x ?? true;
-        element.draggable_y = options.draggable_y ?? true;
-        element.smooth = (options.smooth && typeof(options.smooth) == 'number' ? options.smooth : 0.3) || false;
-        element.options = options;
-        element.style.minWidth = "50px";
-        element.style.minHeight = "20px";
+        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");
+        let canvas = document.createElement( "canvas" );
         canvas.width = options.width || 200;
         canvas.height = options.height || 50;
         element.appendChild( canvas );
         this.canvas = canvas;
 
-        element.addEventListener("mousedown", onmousedown);
+        element.addEventListener( "mousedown", onmousedown );
 
-        element.getValueAt = function(x) {
+        element.getValueAt = function( x ) {
 
-            if(x < element.xrange[0] || x > element.xrange[1])
+            if( x < element.xrange[ 0 ] || x > element.xrange[ 1 ] )
+            {
                 return element.defaulty;
+            }
 
-            var last = [ element.xrange[0], element.defaulty ];
+            var last = [ element.xrange[ 0 ], element.defaulty ];
             var f = 0;
-            for(var i = 0; i < element.value.length; i += 1)
+            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])
+                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;
+                    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;
+            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) {
+        element.resample = function( samples ) {
 
             var r = [];
-            var dx = (element.xrange[1] - element.xrange[0]) / samples;
+            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) );
@@ -6510,37 +6636,33 @@ class Curve {
         function convert(v) {
             return [ canvas.width * ( v[0] - element.xrange[0])/ (element.xrange[1]),
                 canvas.height * (v[1] - element.yrange[0])/ (element.yrange[1])];
-            // return [ canvas.width * ( (element.xrange[1] - element.xrange[0]) * v[0] + element.xrange[0]),
-            //     canvas.height * ((element.yrange[1] - element.yrange[0]) * v[1] + element.yrange[0])];
         }
 
         //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])];
-            // return [(v[0] / canvas.width - element.xrange[0]) / (element.xrange[1] - element.xrange[0]),
-            //         (v[1] / canvas.height - element.yrange[0]) / (element.yrange[1] - element.yrange[0])];
         }
 
         var selected = -1;
 
-        element.redraw = function(o = {} )  {
+        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;
+            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)
+            if( canvas.parentElement.parentElement ) rect = canvas.parentElement.parentElement.getBoundingClientRect();
+            if( rect && canvas.width != rect.width && rect.width && rect.width < 1000 )
+            {
                 canvas.width = rect.width;
-            // if(rect && canvas.height != rect.height && rect.height && rect.height < 1000)
-            //     canvas.height = rect.height;
+            }
 
-            var ctx = canvas.getContext("2d");
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.translate(0,canvas.height);
-            ctx.scale(1,-1);
+            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);
@@ -6549,40 +6671,42 @@ class Curve {
             ctx.beginPath();
 
             //draw line
-            var pos = convert([element.xrange[0],element.defaulty]);
-            ctx.moveTo( pos[0], pos[1] );
-            let values = [pos[0], pos[1]];
+            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]);
+                values.push(pos[ 0 ]);
+                values.push(pos[ 1 ]);
                 if(!element.smooth)
-                    ctx.lineTo( pos[0], pos[1] );
+                    ctx.lineTo( pos[ 0 ], pos[ 1 ] );
             }
 
-            pos = convert([element.xrange[1],element.defaulty]);
-            values.push(pos[0]);
-            values.push(pos[1]);
-            if(!element.smooth) {
-                ctx.lineTo( pos[0], pos[1] );
+            pos = convert([ element.xrange[ 1 ], element.defaulty ]);
+            values.push(pos[ 0 ]);
+            values.push(pos[ 1 ]);
+            if( !element.smooth )
+            {
+                ctx.lineTo( pos[ 0 ], pos[ 1 ] );
                 ctx.stroke();
-            } else {
-
-                LX.UTILS.drawSpline(ctx, values, element.smooth);
+            }
+            else
+            {
+                LX.UTILS.drawSpline( ctx, values, element.smooth );
             }
 
-            //draw points
-            for(var i = 0; i < element.value.length; i += 1) {
-                var value = element.value[i];
-                pos = convert(value);
-                if(selected == i)
+            // Draw points
+            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.arc( pos[ 0 ], pos[ 1 ], selected == i ? 4 : 3, 0, Math.PI * 2);
                 ctx.fill();
             }
 
@@ -6591,120 +6715,134 @@ class Curve {
                 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] ];
+                    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.arc( pos[ 0 ], pos[ 1 ], 2, 0, Math.PI * 2);
                     ctx.fill();
                 }
             }
         }
 
-        var last_mouse = [0,0];
+        var last_mouse = [ 0, 0 ];
 
-        function onmousedown(evt) {
-            document.addEventListener("mousemove",onmousemove);
-            document.addEventListener("mouseup",onmouseup);
+        function onmousedown( e ) {
+            document.addEventListener( "mousemove", onmousemove );
+            document.addEventListener( "mouseup", onmouseup );
 
             var rect = canvas.getBoundingClientRect();
-            var mousex = evt.clientX - rect.left;
-            var mousey = evt.clientY - rect.top;
+            var mousex = e.clientX - rect.left;
+            var mousey = e.clientY - rect.top;
 
-            selected = computeSelected(mousex,canvas.height-mousey);
+            selected = computeSelected( mousex, canvas.height - mousey );
 
-            if(selected == -1 && element.allow_add_values) {
-                var v = unconvert([mousex,canvas.height-mousey]);
-                element.value.push(v);
+            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);
+                selected = element.value.indexOf( v );
             }
 
-            last_mouse = [mousex,mousey];
+            last_mouse = [ mousex, mousey ];
             element.redraw();
-            evt.preventDefault();
-            evt.stopPropagation();
+            e.preventDefault();
+            e.stopPropagation();
         }
 
-        function onmousemove(evt) {
+        function onmousemove( e ) {
+
             var rect = canvas.getBoundingClientRect();
-            var mousex = evt.clientX - rect.left;
-            var mousey = evt.clientY - rect.top;
+            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;
+            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
-            if( selected != -1 && distance( [evt.clientX - rect.left, evt.clientY - rect.top], [mousex,mousey] ) > canvas.height * 0.5 )
+            // Dragging to remove
+            const currentMouseDiff = [ e.clientX - rect.left, e.clientY - rect.top ];
+            if( selected != -1 && distance( currentMouseDiff, [ mousex, mousey ] ) > canvas.height * 0.5 )
             {
-                element.value.splice(selected,1);
-                onmouseup(evt);
+                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];
+            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(element.no_trespassing)
+            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];
+                    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];
+                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(evt);
+            last_mouse[ 0 ] = mousex;
+            last_mouse[ 1 ] = mousey;
+            onchange( e );
 
-            evt.preventDefault();
-            evt.stopPropagation();
+            e.preventDefault();
+            e.stopPropagation();
         }
 
-        function onmouseup(evt) {
+        function onmouseup( e ) {
             selected = -1;
             element.redraw();
             document.removeEventListener("mousemove", onmousemove);
             document.removeEventListener("mouseup", onmouseup);
-            onchange(evt);
-            evt.preventDefault();
-            evt.stopPropagation();
+            onchange(e);
+            e.preventDefault();
+            e.stopPropagation();
         }
         
-        function onchange(e) {
-            if(options.callback)
-                options.callback.call(element, element.value, e);
+        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) {
+        function computeSelected( x, y ) {
 
-            var min_dist = 100000;
-            var max_dist = 8; //pixels
+            var minDistance = 100000;
+            var maxDistance = 8; //pixels
             var selected = -1;
-            for(var i=0; i < element.value.length; i++)
+            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 < min_dist && dist < max_dist)
+                var value = element.value[ i ];
+                var pos = convert( value );
+                var dist = distance( [ x,y ], pos );
+                if( dist < minDistance && dist < maxDistance )
                 {
-                    min_dist = dist;
+                    minDistance = dist;
                     selected = i;
                 }
             }
@@ -6713,19 +6851,24 @@ class Curve {
 
         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);
+            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);
+    redraw( options = {} ) {
+        console.log("REDRAW!!");
+        this.element.redraw( options );
     }
 }