lexgui 0.1.2 → 0.1.4

package/build/components/codeeditor.js

@@ -530,43 +530,83 @@ class CodeEditor {
         return this.code.lines.join(min ? ' ' : '\n');
     }
 
-    setText(text)  {
-        const new_lines = text.split('\n');
-    
-        if (new_lines.length < 1) { return; }
-    
-        let num_lines = new_lines.length;
-        console.assert(num_lines > 0);
-        const first_line = new_lines.shift();
-        num_lines--;
+    setText( text ) {
+
+        console.assert( text.length > 0 );
+        let new_lines = text.split('\n');
     
+        this.code.lines = [].concat(new_lines);
+
+        let cursor = this.cursors.children[0];
+        let lastLine = new_lines.pop();
+
+        this.cursorToLine(cursor, new_lines.length); // Already substracted 1
+        this.cursorToPosition(cursor, lastLine.length);
+
+        this.processLines();
+    }
+
+    appendText( text ) {
+
         let cursor = this.cursors.children[0];
         let lidx = cursor.line;
-        const remaining = this.code.lines[lidx].slice(cursor.position);
-    
-        // Add first line
-        this.code.lines[lidx] = [
-            this.code.lines[lidx].slice(0, cursor.position),
-            first_line
-        ].join('');
-    
-        this.cursorToPosition(cursor, (cursor.position + first_line.length));
-    
-        // Enter next lines...
-        let _text = null;
-    
-        for (var i = 0; i < new_lines.length; ++i) {
-            _text = new_lines[i];
-            this.cursorToLine(cursor, cursor.line++, true);
-            // Add remaining...
-            if (i == (new_lines.length - 1))
-                _text += remaining;
-            this.code.lines.splice(1 + lidx + i, 0, _text);
+
+        if( this.selection ) {
+            this.deleteSelection(cursor);
+            lidx = cursor.line;
+        }
+
+        this.endSelection();
+
+        const new_lines = text.split('\n');
+
+        // Pasting Multiline...
+        if(new_lines.length != 1)
+        {
+            let num_lines = new_lines.length;
+            console.assert(num_lines > 0);
+            const first_line = new_lines.shift();
+            num_lines--;
+
+            const remaining = this.code.lines[lidx].slice(cursor.position);
+
+            // Add first line
+            this.code.lines[lidx] = [
+                this.code.lines[lidx].slice(0, cursor.position), 
+                first_line
+            ].join('');
+
+            this.cursorToPosition(cursor, (cursor.position + first_line.length));
+
+            // Enter next lines...
+
+            let _text = null;
+
+            for( var i = 0; i < new_lines.length; ++i ) {
+                _text = new_lines[i];
+                this.cursorToLine(cursor, cursor.line++, true);
+                // Add remaining...
+                if( i == (new_lines.length - 1) )
+                    _text += remaining;
+                this.code.lines.splice( 1 + lidx + i, 0, _text);
+            }
+
+            if(_text) this.cursorToPosition(cursor, _text.length);
+            this.cursorToLine(cursor, cursor.line + num_lines);
+            this.processLines(lidx);
+        }
+        // Pasting one line...
+        else
+        {
+            this.code.lines[lidx] = [
+                this.code.lines[lidx].slice(0, cursor.position), 
+                new_lines[0], 
+                this.code.lines[lidx].slice(cursor.position)
+            ].join('');
+
+            this.cursorToPosition(cursor, (cursor.position + new_lines[0].length));
+            this.processLine(lidx);
         }
-    
-        if (_text) this.cursorToPosition(cursor, _text.length);
-        this.cursorToLine(cursor, cursor.line + num_lines);
-        this.processLines(lidx);
     }
 
     loadFile( file ) {
@@ -1069,64 +1109,8 @@ class CodeEditor {
                 this.onsave( this.getText() );
                 return;
             case 'v': // paste
-
-                if( this.selection ) {
-                    this.deleteSelection(cursor);
-                    lidx = cursor.line;
-                }
-
-                this.endSelection();
-
                 let text = await navigator.clipboard.readText();
-                const new_lines = text.split('\n');
-
-                // Pasting Multiline...
-                if(new_lines.length != 1)
-                {
-                    let num_lines = new_lines.length;
-                    console.assert(num_lines > 0);
-                    const first_line = new_lines.shift();
-                    num_lines--;
-
-                    const remaining = this.code.lines[lidx].slice(cursor.position);
-
-                    // Add first line
-                    this.code.lines[lidx] = [
-                        this.code.lines[lidx].slice(0, cursor.position), 
-                        first_line
-                    ].join('');
-
-                    this.cursorToPosition(cursor, (cursor.position + first_line.length));
-
-                    // Enter next lines...
-
-                    let _text = null;
-
-                    for( var i = 0; i < new_lines.length; ++i ) {
-                        _text = new_lines[i];
-                        this.cursorToLine(cursor, cursor.line++, true);
-                        // Add remaining...
-                        if( i == (new_lines.length - 1) )
-                            _text += remaining;
-                        this.code.lines.splice( 1 + lidx + i, 0, _text);
-                    }
-
-                    if(_text) this.cursorToPosition(cursor, _text.length);
-                    this.cursorToLine(cursor, cursor.line + num_lines);
-                    this.processLines(lidx);
-                }
-                // Pasting one line...
-                else
-                {
-                    this.code.lines[lidx] = [
-                        this.code.lines[lidx].slice(0, cursor.position), 
-                        new_lines[0], 
-                        this.code.lines[lidx].slice(cursor.position)
-                    ].join('');
-
-                    this.cursorToPosition(cursor, (cursor.position + new_lines[0].length));
-                    this.processLine(lidx);
-                }
+                this.appendText(text);
                 return;
             case 'x': // cut line
                 const to_copy = this.code.lines.splice(lidx, 1)[0];

package/build/components/imui.js

@@ -56,6 +56,7 @@ class ImUI {
         // Mouse state
 
         this.mousePosition = new LX.vec2();
+        this.setPointerCursor = false;
 
         this.root = this.canvas = canvas;
     }
@@ -121,22 +122,17 @@ class ImUI {
 
         // Draw button
 
+        ctx.beginPath();
         ctx.fillStyle = active ? "#666" : (hovered ? "#444" : "#222");
-        ctx.fillRect( position.x, position.y, size.x + padding.x * 2.0, size.y + padding.y * 2.0 );
+        ctx.roundRect( position.x, position.y, size.x + padding.x * 2.0, size.y + padding.y * 2.0, [8, 8, 8, 8] );
+        ctx.fill();
 
         // Draw text
 
         ctx.fillStyle = hovered ? "#fff" : "#ddd";
         ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );
 
-        if( !hovered )
-        {
-            document.body.style.cursor = "default";
-            return false;
-        }
-
-        // Pointer cursor on hover
-        document.body.style.cursor = "pointer";
+        this.setPointerCursor |= hovered;
 
         if( this.eventClick )
         {
@@ -176,50 +172,53 @@ class ImUI {
 
         const metrics = ctx.measureText( text );
         let size = new LX.vec2( metrics.width, metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent );
+        let fullSize = size.add( padding.mul( 2.0 ) );
 
         // Get mouse state
 
-        const hovered = this.mousePosition.x >= position.x && this.mousePosition.x <= (position.x + size.x + padding.x * 2.0)
-        && this.mousePosition.y >= position.y && this.mousePosition.y <= (position.y + size.y + padding.y * 2.0);
+        const hovered = this.mousePosition.x >= position.x && this.mousePosition.x <= (position.x + fullSize.x)
+        && this.mousePosition.y >= position.y && this.mousePosition.y <= (position.y + fullSize.y);
 
         const active = hovered && this.mouseDown;
 
         // Draw box
 
+        ctx.beginPath();
         ctx.fillStyle = hovered ? "#444" : "#222";
-        ctx.fillRect( position.x, position.y, size.x + padding.x * 2.0, size.y + padding.y * 2.0 );
-
-        // Draw thumb
+        ctx.roundRect( position.x, position.y, fullSize.x, fullSize.y, [8, 8, 8, 8] );
+        ctx.fill();
 
-        let thumbSize = new LX.vec2( 12, size.y );
+        // Draw value
 
         const min = position.x;
-        const max = position.x + size.x + padding.x * 2.0 - thumbSize.x;
+        const max = position.x + fullSize.x;
 
         if(active)
         {
-            value = LX.UTILS.clamp((this.mousePosition.x - min - thumbSize.x * 0.5) / (max - min), 0.0, 1.0);
+            value = LX.UTILS.clamp((this.mousePosition.x - min) / (max - min), 0.0, 1.0);
             this.widgets[ text ].value = value;
         }
         
-        let thumbPos = new LX.vec2( min + (max - position.x) * value, position.y );
+        let valueSize = new LX.vec2( fullSize.x * value, size.y );
 
-        ctx.fillStyle = active ? "#bbb" : (hovered ? "#777" : "#888");
-        ctx.fillRect( thumbPos.x, thumbPos.y, thumbSize.x, thumbSize.y + padding.y * 2.0 );
+        ctx.beginPath();
+        ctx.fillStyle = hovered ? "#6074e7" : "#3e57e4";
+        if( valueSize.x > ( fullSize.x - 8 ) ) // 8: radius
+        {
+            ctx.roundRect( position.x, position.y, valueSize.x, valueSize.y + padding.y * 2.0, [8, 8, 8, 8] );
+            ctx.fill();    
+        }
+        else
+        {
+            ctx.fillRect( position.x, position.y, valueSize.x, valueSize.y + padding.y * 2.0 );
+        }
 
         // Draw text
 
         ctx.fillStyle = hovered ? "#fff" : "#ddd";
         ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );
 
-        if( !hovered )
-        {
-            document.body.style.cursor = "default";
-            return;
-        }
-
-        // Pointer cursor on hover
-        document.body.style.cursor = "pointer";
+        this.setPointerCursor |= hovered;
 
         if( active )
         {
@@ -259,7 +258,7 @@ class ImUI {
 
         let boxMargin = 12;
         let fullSize = new LX.vec2(boxMargin * 2.0, 0);
-        fullSize.add( size );
+        fullSize.add( size, fullSize );
 
         // Get mouse state
 
@@ -294,8 +293,7 @@ class ImUI {
         ctx.fillStyle = hovered ? "#fff" : "#ddd";
         ctx.fillText( text, position.x + padding.x, position.y + metrics.actualBoundingBoxAscent + padding.y );
 
-        // Pointer cursor on hover
-        document.body.style.cursor = hovered ? "pointer" : "default";
+        this.setPointerCursor |= hovered;
     }
 
     /**
@@ -307,6 +305,11 @@ class ImUI {
 
         this.eventClick = null;
 
+        // Pointer cursor on hover
+        document.body.style.cursor = this.setPointerCursor ? "pointer" : "default";
+
+        // Clear info
+        this.setPointerCursor = false;
     }
 }
 

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.2",
+        version: "0.1.4",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -126,17 +126,17 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         constructor(x, y) {
             this.x = x ?? 0;
-            this.y = y ?? 0;
+            this.y = y ?? (x ?? 0);
         }
-
+    
         get xy() { return [ this.x, this.y]; }
         get yx() { return [ this.y, this.x]; }
-
-        set( x, y ) { this.x = x; this.y = y; }
-        add( v ) { this.set( this.x + v.x, this.y + v.y ) }
-        sub( v ) { this.set( this.x - v.x, this.y - v.y ) }
-        mul( v ) { this.set( this.x * v.x, this.y * v.y ) }
-        div( v ) { this.set( this.x / v.x, this.y / v.y ) }
+    
+        set ( x, y ) { this.x = x; this.y = y; }
+        add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
+        sub ( v, v0 = new vec2() ) { v0.set( this.x - v.x, this.y - v.y ); return v0; }
+        mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2(v) } v = v0.set( this.x * v.x, this.y * v.y ); return v0; }
+        div ( v, v0 = new vec2() ) { v0.set( this.x / v.x, this.y / v.y ); return v0; }
     };
 
     LX.vec2 = vec2;
@@ -3049,6 +3049,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             options.placeholder = placeholder.constructor == String ? placeholder : "Filter properties..";
             options.skipWidget = options.skipWidget ?? true;
+            options.skipInlineCount = true;
 
             let widget = this.create_widget(null, Widget.TEXT, options);
             let element = widget.domEl;
@@ -3264,6 +3265,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * trigger: Choose onchange trigger (default, input) [default]
          * inputWidth: Width of the text input
          * float: Justify text
+         * skipReset: Don't add the reset value button when value changes
          */
 
         addText( name, value, callback, options = {} ) {
@@ -3280,7 +3282,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let element = widget.domEl;
 
             // Add reset functionality
-            if(widget.name && !(options.noreset ?? false)) {
+            if(widget.name && !(options.skipReset ?? false)) {
                 Panel._add_reset_property(element.domName, function() {
                     wValue.value = wValue.iValue;
                     this.style.display = "none";
@@ -3391,7 +3393,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let element = widget.domEl;
 
             // Add reset functionality
-            if(widget.name && !(options.noreset ?? false)) {
+            if(widget.name && !(options.skipReset ?? false)) {
                 Panel._add_reset_property(element.domName, function() {
                     wValue.value = wValue.iValue;
                     this.style.display = "none";
@@ -3719,6 +3721,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {*} options:
          * filter: Add a search bar to the widget [false]
          * disabled: Make the widget disabled [false]
+         * skipReset: Don't add the reset value button when value changes
          */
 
         addDropdown( name, values, value, callback, options = {} ) {
@@ -3739,7 +3742,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let that = this;
 
             // Add reset functionality
-            if(widget.name)
+            if(widget.name && !(options.skipReset ?? false))
             {
                 Panel._add_reset_property(element.domName, function() {
                     value = wValue.iValue;
@@ -3750,7 +3753,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             let container = document.createElement('div');
             container.className = "lexdropdown";
-            container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";            
+            container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
             
             // Add widget value
             let wValue = document.createElement('div');
@@ -3857,7 +3860,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     });
 
                     // Add string option
-                    if(typeof iValue == 'string' || !iValue) {
+                    if( iValue.constructor != Object ) {
                         option.style.flexDirection = 'unset';
                         option.innerHTML = "<a class='fa-solid fa-check'></a><span>" + iValue + "</span>";
                         option.value = iValue;
@@ -3910,6 +3913,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
          * @param {Array of Array} values Array of 2N Arrays of each value of the curve
          * @param {Function} callback Callback function on change
          * @param {*} options:
+         * skipReset: Don't add the reset value button when value changes
          */
 
         addCurve( name, values, callback, options = {} ) {
@@ -3935,12 +3939,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             let defaultValues = JSON.parse(JSON.stringify(values));
 
             // Add reset functionality
-            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 );
-            });
+            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 );
+                });
+            }
 
             // Add widget value
 
@@ -4134,23 +4141,29 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 for( let i = 0; i < values.length; ++i )
                 {
                     const value = values[i];
-                    const baseclass = value.constructor;
+                    let baseclass = options.innerValues ? 'dropdown' : value.constructor;
 
                     this.sameLine(2);
 
                     switch(baseclass)
                     {
                         case String:
-                            this.addText(i+"", value, function(value, event) {
+                            this.addText(i + "", value, function(value, event) {
                                 values[i] = value;
                                 callback( values );
-                            }, { nameWidth: itemNameWidth, inputWidth: "95%", noreset: true });
+                            }, { nameWidth: itemNameWidth, inputWidth: "95%", skipReset: true });
                             break;
                         case Number:
-                            this.addNumber(i+"", value, function(value, event) {
+                            this.addNumber(i + "", value, function(value, event) {
+                                values[i] = value;
+                                callback( values );
+                            }, { nameWidth: itemNameWidth, inputWidth: "95%", skipReset: true });
+                            break;
+                        case 'dropdown':
+                            this.addDropdown(i + "", options.innerValues, value, function(value, event) {
                                 values[i] = value;
                                 callback( values );
-                            }, { nameWidth: itemNameWidth, inputWidth: "95%", noreset: true });
+                            }, { nameWidth: itemNameWidth, inputWidth: "95%", skipReset: true });
                             break;
                     }
 
@@ -4158,11 +4171,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         values.splice(values.indexOf( value ), 1);
                         updateItems();
                         this._trigger( new IEvent(name, values, event), callback );
-                    }, { title: "Remove item", className: 'small'} );
+                    }, { title: "Remove item", className: 'micro'} );
                 }
 
                 buttonName = "Add item";
-                buttonName += "<a class='fa-solid fa-plus' style='float:right; margin-right: 6px;'></a>";
+                buttonName += "<a class='fa-solid fa-plus' style='float:right; margin-right: 6px; margin-top: 2px;'></a>";
                 this.addButton(null, buttonName, (v, event) => {
                     values.push( "" );
                     updateItems();

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.2",
+    version: "0.1.4",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -122,17 +122,17 @@ class vec2 {
 
     constructor(x, y) {
         this.x = x ?? 0;
-        this.y = y ?? 0;
+        this.y = y ?? (x ?? 0);
     }
 
     get xy() { return [ this.x, this.y]; }
     get yx() { return [ this.y, this.x]; }
 
-    set( x, y ) { this.x = x; this.y = y; }
-    add( v ) { this.set( this.x + v.x, this.y + v.y ) }
-    sub( v ) { this.set( this.x - v.x, this.y - v.y ) }
-    mul( v ) { this.set( this.x * v.x, this.y * v.y ) }
-    div( v ) { this.set( this.x / v.x, this.y / v.y ) }
+    set ( x, y ) { this.x = x; this.y = y; }
+    add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
+    sub ( v, v0 = new vec2() ) { v0.set( this.x - v.x, this.y - v.y ); return v0; }
+    mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2(v) } v = v0.set( this.x * v.x, this.y * v.y ); return v0; }
+    div ( v, v0 = new vec2() ) { v0.set( this.x / v.x, this.y / v.y ); return v0; }
 };
 
 LX.vec2 = vec2;
@@ -3045,6 +3045,7 @@ class Panel {
 
         options.placeholder = placeholder.constructor == String ? placeholder : "Filter properties..";
         options.skipWidget = options.skipWidget ?? true;
+        options.skipInlineCount = true;
 
         let widget = this.create_widget(null, Widget.TEXT, options);
         let element = widget.domEl;
@@ -3260,6 +3261,7 @@ class Panel {
      * trigger: Choose onchange trigger (default, input) [default]
      * inputWidth: Width of the text input
      * float: Justify text
+     * skipReset: Don't add the reset value button when value changes
      */
 
     addText( name, value, callback, options = {} ) {
@@ -3276,7 +3278,7 @@ class Panel {
         let element = widget.domEl;
 
         // Add reset functionality
-        if(widget.name && !(options.noreset ?? false)) {
+        if(widget.name && !(options.skipReset ?? false)) {
             Panel._add_reset_property(element.domName, function() {
                 wValue.value = wValue.iValue;
                 this.style.display = "none";
@@ -3387,7 +3389,7 @@ class Panel {
         let element = widget.domEl;
 
         // Add reset functionality
-        if(widget.name && !(options.noreset ?? false)) {
+        if(widget.name && !(options.skipReset ?? false)) {
             Panel._add_reset_property(element.domName, function() {
                 wValue.value = wValue.iValue;
                 this.style.display = "none";
@@ -3715,6 +3717,7 @@ class Panel {
      * @param {*} options:
      * filter: Add a search bar to the widget [false]
      * disabled: Make the widget disabled [false]
+     * skipReset: Don't add the reset value button when value changes
      */
 
     addDropdown( name, values, value, callback, options = {} ) {
@@ -3735,7 +3738,7 @@ class Panel {
         let that = this;
 
         // Add reset functionality
-        if(widget.name)
+        if(widget.name && !(options.skipReset ?? false))
         {
             Panel._add_reset_property(element.domName, function() {
                 value = wValue.iValue;
@@ -3746,7 +3749,7 @@ class Panel {
 
         let container = document.createElement('div');
         container.className = "lexdropdown";
-        container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";            
+        container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
         
         // Add widget value
         let wValue = document.createElement('div');
@@ -3853,7 +3856,7 @@ class Panel {
                 });
 
                 // Add string option
-                if(typeof iValue == 'string' || !iValue) {
+                if( iValue.constructor != Object ) {
                     option.style.flexDirection = 'unset';
                     option.innerHTML = "<a class='fa-solid fa-check'></a><span>" + iValue + "</span>";
                     option.value = iValue;
@@ -3906,6 +3909,7 @@ class Panel {
      * @param {Array of Array} values Array of 2N Arrays of each value of the curve
      * @param {Function} callback Callback function on change
      * @param {*} options:
+     * skipReset: Don't add the reset value button when value changes
      */
 
     addCurve( name, values, callback, options = {} ) {
@@ -3931,12 +3935,15 @@ class Panel {
         let defaultValues = JSON.parse(JSON.stringify(values));
 
         // Add reset functionality
-        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 );
-        });
+        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 );
+            });
+        }
 
         // Add widget value
 
@@ -4130,23 +4137,29 @@ class Panel {
             for( let i = 0; i < values.length; ++i )
             {
                 const value = values[i];
-                const baseclass = value.constructor;
+                let baseclass = options.innerValues ? 'dropdown' : value.constructor;
 
                 this.sameLine(2);
 
                 switch(baseclass)
                 {
                     case String:
-                        this.addText(i+"", value, function(value, event) {
+                        this.addText(i + "", value, function(value, event) {
                             values[i] = value;
                             callback( values );
-                        }, { nameWidth: itemNameWidth, inputWidth: "95%", noreset: true });
+                        }, { nameWidth: itemNameWidth, inputWidth: "95%", skipReset: true });
                         break;
                     case Number:
-                        this.addNumber(i+"", value, function(value, event) {
+                        this.addNumber(i + "", value, function(value, event) {
+                            values[i] = value;
+                            callback( values );
+                        }, { nameWidth: itemNameWidth, inputWidth: "95%", skipReset: true });
+                        break;
+                    case 'dropdown':
+                        this.addDropdown(i + "", options.innerValues, value, function(value, event) {
                             values[i] = value;
                             callback( values );
-                        }, { nameWidth: itemNameWidth, inputWidth: "95%", noreset: true });
+                        }, { nameWidth: itemNameWidth, inputWidth: "95%", skipReset: true });
                         break;
                 }
 
@@ -4154,11 +4167,11 @@ class Panel {
                     values.splice(values.indexOf( value ), 1);
                     updateItems();
                     this._trigger( new IEvent(name, values, event), callback );
-                }, { title: "Remove item", className: 'small'} );
+                }, { title: "Remove item", className: 'micro'} );
             }
 
             buttonName = "Add item";
-            buttonName += "<a class='fa-solid fa-plus' style='float:right; margin-right: 6px;'></a>";
+            buttonName += "<a class='fa-solid fa-plus' style='float:right; margin-right: 6px; margin-top: 2px;'></a>";
             this.addButton(null, buttonName, (v, event) => {
                 values.push( "" );
                 updateItems();

package/examples/area_tabs.html

@@ -3,13 +3,13 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Area Tabs Demo</title>
-    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
     <script type="importmap">
         {
           "imports": {
-            "lexgui": "https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.module.js",
-            "lexgui/components/": "https://cdn.skypack.dev/lexgui@^0.1.1/build/components/"
+            "lexgui": "../build/lexgui.module.js",
+            "lexgui/components/": "../build/components/"
           }
         }
     </script>

package/examples/asset_view.html

@@ -3,13 +3,13 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI AssetView Demo</title>
-    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
     <script type="importmap">
         {
           "imports": {
-            "lexgui": "https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.module.js",
-            "lexgui/components/": "https://cdn.skypack.dev/lexgui@^0.1.1/build/components/"
+            "lexgui": "../build/lexgui.module.js",
+            "lexgui/components/": "../build/components/"
           }
         }
     </script>

package/examples/code_editor.html

@@ -3,13 +3,13 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Code Editor Demo</title>
-    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
     <script type="importmap">
         {
           "imports": {
-            "lexgui": "https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.module.js",
-            "lexgui/components/": "https://cdn.skypack.dev/lexgui@^0.1.1/build/components/"
+            "lexgui": "../build/lexgui.module.js",
+            "lexgui/components/": "../build/components/"
           }
         }
     </script>

package/examples/dialogs.html

@@ -3,13 +3,13 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Dialogs Demo</title>
-    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
     <script type="importmap">
         {
           "imports": {
-            "lexgui": "https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.module.js",
-            "lexgui/components/": "https://cdn.skypack.dev/lexgui@^0.1.1/build/components/"
+            "lexgui": "../build/lexgui.module.js",
+            "lexgui/components/": "../build/components/"
           }
         }
     </script>

package/examples/node_graph.html

@@ -3,13 +3,13 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Node Graph Demo</title>
-    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
     <script type="importmap">
         {
           "imports": {
-            "lexgui": "https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.module.js",
-            "lexgui/components/": "https://cdn.skypack.dev/lexgui@^0.1.1/build/components/"
+            "lexgui": "../build/lexgui.module.js",
+            "lexgui/components/": "../build/components/"
           }
         }
     </script>

package/examples/overlay_area.html

@@ -3,13 +3,13 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Overlay Timeline Demo</title>
-    <link rel="stylesheet" href="https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.css">
+    <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
     <script type="importmap">
         {
           "imports": {
-            "lexgui": "https://cdn.skypack.dev/lexgui@^0.1.1/build/lexgui.module.js",
-            "lexgui/components/": "https://cdn.skypack.dev/lexgui@^0.1.1/build/components/"
+            "lexgui": "../build/lexgui.module.js",
+            "lexgui/components/": "../build/components/"
           }
         }
     </script>  

package/package.json

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