lexgui 0.1.34 → 0.1.35

package/build/lexgui.css

@@ -6,6 +6,7 @@
   --global-font: "Figtree", sans-serif;
   --global-title-font: "Poppins", sans-serif;
   --global-font-size: 12px;
+  --global-font-size-big: 14px;
   --global-color-primary: #212121;
   --global-color-secondary: #2c2c2c;
   --global-color-terciary: #444;
@@ -828,7 +829,7 @@ body.noevents * {
 }
 
 .lexbutton.array a {
-	margin-top: 3px;
+	margin-top: 2px;
 }
 
 .lexbutton:hover {
@@ -873,7 +874,8 @@ body.noevents * {
 }
 
 .lexcombobuttons .lexbutton.combo {
-  margin-left: 0px;
+  margin-left: 1px;
+  margin-right: 1px;
   border-radius: 0px;
   display: flex;
   padding-top: 0.35em;
@@ -882,13 +884,15 @@ body.noevents * {
 }
 
 .lexcombobuttons .lexbutton.combo:first-child {
- border-top-left-radius: 5px;
- border-bottom-left-radius: 5px;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ margin-left: 0px;
 }
 
 .lexcombobuttons .lexbutton.combo:last-child {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  margin-right: 0px;
 }
 
 .lexcombobuttons .lexbutton.combo.selected {
@@ -1111,9 +1115,11 @@ input[type=checkbox]:checked:after {
 
 .lexcolor {
   display: flex;
+  /*
   flex-wrap: wrap;
   padding-left: 6px;
   padding-right: 6px;
+  */
   align-items: center;
 }
 
@@ -1146,6 +1152,10 @@ input[type=checkbox]:checked:after {
   cursor: pointer;
 }
 
+.lexcolor .lexwidget {
+  padding: 0px;
+}
+
 /* Vector Widgets */
 
 .lexvector {
@@ -2078,9 +2088,9 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexoverlaybuttons .lexbutton {
-  padding: 14px 10px;
-  font-size: var(--global-font-size);
-  border-radius: 6px;
+  padding: 18px 12px;
+  font-size: var(--global-font-size-big);
+  border-radius: 10px;
   justify-content: center;
   background-color: #313132a5;
   -webkit-backdrop-filter: blur(6px);
@@ -2088,9 +2098,13 @@ meter::-webkit-meter-even-less-good-value {
   color: #d1d1d3bd;
 }
 
+.lexoverlaybuttons .lexbutton span {
+  font-size: var(--global-font-size-big);
+}
+
 .lexoverlaybuttons .lexbutton a {
   line-height: 19px;
-  font-size: var(--global-font-size);
+  font-size: var(--global-font-size-big);
 }
 
 .lexoverlaybuttons .lexbutton img {
@@ -2201,11 +2215,11 @@ meter::-webkit-meter-even-less-good-value {
 }
 
 .lexareatabs.row .lexareatab {
-  background-color: var(--global-color-secondary);
+  background-color: var(--global-color-terciary);
   padding-left: 16px;
   padding-right: 16px;
   margin-right: 4px;
-  border-radius: 6px;
+  border-radius: 4px;
 }
 
 .lexareatabs.fit {

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.34",
+        version: "0.1.35",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -472,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
@@ -526,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;
     }
 
@@ -564,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;
     }
@@ -884,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;
@@ -923,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;
 
@@ -961,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 + " )";
@@ -987,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)
@@ -1014,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);
             }
@@ -1026,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;
         }
 
@@ -3220,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;
                 }
@@ -4294,10 +4323,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             element.appendChild( container );
 
             // Resize
-            curveInstance.canvas.width = container.offsetWidth;
-            curveInstance.redraw();
             widget.onresize = curveInstance.redraw.bind( curveInstance );
             widget.curveInstance = curveInstance;
+
+            doAsync(() => {
+                curveInstance.canvas.width = container.offsetWidth;
+                curveInstance.redraw();
+            });
+
             return widget;
         }
 
@@ -4850,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();
@@ -4891,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";
     
@@ -6611,11 +6644,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     
                 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 ];
@@ -6647,7 +6680,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     {
                         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[ 1 ] : element.xrange[ 0 ] );
+                        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 ] );
                     }
     

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.34",
+    version: "0.1.35",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -469,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
@@ -523,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;
 }
 
@@ -561,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 } );
+
+        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;
 }
@@ -896,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;
@@ -935,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;
 
@@ -973,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 + " )";
@@ -999,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";
@@ -1026,7 +1043,7 @@ class Area {
 
         this.root.appendChild( area1.root );
 
-        if(resize) 
+        if( resize )
         {
             this.root.appendChild(this.split_bar);
         }
@@ -1038,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;
     }
 
@@ -3303,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;
             }
@@ -3355,6 +3384,7 @@ class Panel {
         }
 
         widget.domEl = element;
+        element.jsIinstance = widget;
 
         const insert_widget = el => {
             if(options.container)
@@ -4380,10 +4410,14 @@ class Panel {
         element.appendChild( container );
 
         // Resize
-        curveInstance.canvas.width = container.offsetWidth;
-        curveInstance.redraw();
         widget.onresize = curveInstance.redraw.bind( curveInstance );
         widget.curveInstance = curveInstance;
+
+        doAsync(() => {
+            curveInstance.canvas.width = container.offsetWidth;
+            curveInstance.redraw();
+        });
+
         return widget;
     }
 
@@ -4936,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();
@@ -4977,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";
 
@@ -6702,11 +6736,11 @@ class Curve {
 
             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 ];
@@ -6738,7 +6772,7 @@ class Curve {
                 {
                     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[ 1 ] : element.xrange[ 0 ] );
+                    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 ] );
                 }
 
@@ -6833,6 +6867,7 @@ class Curve {
     }
 
     redraw( options = {} ) {
+        console.log("REDRAW!!");
         this.element.redraw( options );
     }
 }

package/changelog.md

@@ -1,5 +1,14 @@
 # lexgui.js changelog
 
+## 0.1.36 (dev)
+
+## 0.1.35
+
+Fix `moveOutAction` clamping X value.
+Add values in curve only with MOUSE_LEFT_CLICK.
+Curve redraw and color widget styling fixes.
+Minor general styling improvements.
+
 ## 0.1.34
 
 Fix setValue on Checkbox.

package/demo.js

@@ -32,7 +32,7 @@ area.addMenubar( m => {
     m.add( "Project/Export/DAE", { icon: "fa-solid fa-cube", short: "D", callback: () => { console.log("Exporting DAE...") }} );
     m.add( "Project/Export/GLTF", { short:  "G" } );
     m.add( "Editor/Autosave", { type: 'checkbox', icon: "fa fa-floppy-disk", callback: (v, name) => { console.log(name + ": " + v ) } });
-    m.add( "Editor/Test", () => LX.prompt("Editor", "Test?"));
+    m.add( "Editor/Test", () => LX.prompt("Write in the text area below the bml instructions to move the avatar from the web application. A sample of BML instructions can be tested through the helper tabs in the right panel.", "Test?"));
     m.add( "Editor/Settings", { icon: "fa-solid fa-gears", callback: () => {
         const dialog = new LX.Dialog( "Settings", p => {
             p.addText("A Text", "Testing first widget");

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.34",
+    "version": "0.1.35",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",