lexgui 0.1.33 → 0.1.35

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     */
 
     var LX = global.LX = {
-        version: "0.1.33",
+        version: "0.1.35",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -25,8 +25,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     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 )
     {
@@ -469,7 +472,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         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
@@ -523,26 +526,29 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
      * 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);
-      
-        dialog.root.classList.add("fadein");
+        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' );
         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;
     }
 
@@ -561,36 +567,45 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
      * 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 } );
+
+            if( options.input ?? true )
+            {
+                p.addText( null, options.input || value, v => value = v, { placeholder: "..." } );
+            }
 
-                    callback.call(this, value); 
-                    dialog.close() ;
+            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;
     }
@@ -881,35 +896,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         
         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;
@@ -920,23 +936,27 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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;
 
@@ -958,14 +978,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
             }
 
-            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 + " )";
@@ -984,20 +1004,20 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     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";
                     if(height2.constructor == Number)
@@ -1011,7 +1031,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.root.appendChild( area1.root );
 
-            if(resize) 
+            if( resize ) 
             {
                 this.root.appendChild(this.split_bar);
             }
@@ -1023,55 +1043,67 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // 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;
         }
 
@@ -3217,7 +3249,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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;
                 }
@@ -4033,37 +4065,39 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         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;
@@ -4074,14 +4108,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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 });
 
@@ -4225,7 +4260,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @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 = {} ) {
 
@@ -4235,34 +4277,36 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             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 + ")";
 
@@ -4271,16 +4315,22 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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;
         }
 
@@ -4729,19 +4779,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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 => {
 
@@ -4749,7 +4799,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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" );
     
@@ -4833,7 +4883,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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();
@@ -4874,7 +4924,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 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";
     
@@ -6404,78 +6454,80 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     class Curve {
 
-        constructor(panel, value, options = {}) {
-
-            let element = document.createElement("div");
-            element.className = "curve " + (options.className ? options.className : "");
+        constructor( panel, value, options = {} ) {
+    
+            let element = document.createElement( "div" );
+            element.className = "curve " + ( options.className ? options.className : "" );
             element.style.minHeight = "50px";
             element.style.width = options.width || "100%";
-
-            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_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.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");
+    
+            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.getValueAt = function(x) {
-
-                if(x < element.xrange[0] || x > element.xrange[1])
+    
+            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 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) );
                 }
                 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;
@@ -6483,231 +6535,247 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     redraw();
                     return;
                 }
-
+    
                 element.value.push(v);
                 redraw();
             }
-
+    
             //value to canvas
             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);
-
+    
                 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]];
-
+                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);
                 }
-
-                //draw points
-                for(var i = 0; i < element.value.length; i += 1) {
-                    var value = element.value[i];
-                    pos = convert(value);
-                    if(selected == i)
+                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 )
                         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();
                 }
-
+    
                 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] ];
+                        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];
-
-            function onmousedown(evt) {
-                document.addEventListener("mousemove",onmousemove);
-                document.addEventListener("mouseup",onmouseup);
-
+    
+            var last_mouse = [ 0, 0 ];
+    
+            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;
-
-                selected = computeSelected(mousex,canvas.height-mousey);
-
-                if(selected == -1 && element.allow_add_values) {
-                    var v = unconvert([mousex,canvas.height-mousey]);
-                    element.value.push(v);
+                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);
+                    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;
-
-                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 )
+                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 )
                 {
-                    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];
-
-                    if(element.no_trespassing)
+    
+                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];
+                        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);
-
-                evt.preventDefault();
-                evt.stopPropagation();
+                last_mouse[ 0 ] = mousex;
+                last_mouse[ 1 ] = mousey;
+                onchange( e );
+    
+                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) {
-
-                var min_dist = 100000;
-                var max_dist = 8; //pixels
+    
+            function computeSelected( x, y ) {
+    
+                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;
                     }
                 }
                 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);
+                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 = {} ) {
+            this.element.redraw( options );
         }
     }