lexgui 0.1.24 → 0.1.26

package/build/lexgui.css

@@ -3125,7 +3125,7 @@ pre .line-gutter {
 
 /* Common */
 .cm-str { color: #ca7d59; }   /* string */
-.cm-std { color: #cf6dcf; }   /* statements & declarations */
+.cm-std { color: #d181d1; }   /* statements & declarations */
 .cm-kwd { color: #2194ce; }   /* keyword */
 .cm-com { color: #5cab5a; }   /* comment */
 
@@ -3152,16 +3152,16 @@ pre .line-gutter {
 .cm-sym.json { color: #cf6dcf; }  /* symbol */
 
 .cm-typ.glsl { color: #36c0b0; }  /* type */
-.cm-bln.glsl { color: #cfc159; }  /* builtin */
 .cm-dec.glsl { color: #b1ce9b; }  /* decimal */
 .cm-sym.glsl { color: #f9cb20; }  /* symbol */
 .cm-mtd.glsl { color: #e0cc68; }  /* method */
 
 .cm-typ.wgsl { color: #36c0b0; }  /* type */
-.cm-bln.wgsl { color: #cfc159; }  /* builtin */
 .cm-dec.wgsl { color: #b1ce9b; }  /* decimal */
+.cm-mtd.wgsl { color: #dfe093; }  /* method */
 .cm-sym.wgsl { color: #f9cb20; }  /* symbol */
-.cm-mtd.wgsl { color: #e0cc68; }  /* method */
+.cm-ppc.wgsl { color: #99caf1; }  /* preprocessor */
+
 
 .cm-typ.rust { color: #36c0b0; }  /* type */
 .cm-dec.rust { color: #b1ce9b; }  /* decimal */

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.24",
+        version: "0.1.26",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -2178,7 +2178,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         set( value ) {
 
             if( this.onSetValue )
-                this.onSetValue( value );
+                return this.onSetValue( value );
+
+            console.warn("Can't set value of " + this.typeName());
         }
 
         oncontextmenu(e) {
@@ -3029,6 +3031,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     let domName = document.createElement('div');
                     domName.className = "lexwidgetname";
                     domName.innerHTML = name || "";
+                    domName.title = options.title ?? domName.innerHTML;
                     domName.style.width = options.nameWidth || LX.DEFAULT_NAME_WIDTH;
                     element.appendChild(domName);
                     element.domName = domName;
@@ -4288,47 +4291,70 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         addList( name, values, value, callback, options = {} ) {
 
-            let widget = this.create_widget(name, Widget.LIST, options);
-            let element = widget.domEl;
-
-            // Show list
-
-            let list_container = document.createElement('div');
-            list_container.className = "lexlist";
-            list_container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
-
-            for( let i = 0; i < values.length; ++i )
-            {
-                let icon = null;
-                let item_value = values[i];
-
-                if( item_value.constructor === Array )
+            let widget = this.create_widget( name, Widget.LIST, options );
+    
+            widget.onGetValue = () => {
+                return value;
+            };
+    
+            widget.onSetValue = ( newValue ) => {
+                listContainer.querySelectorAll( '.lexlistitem' ).forEach( e => e.classList.remove( 'selected' ) );
+                const idx = values.indexOf( newValue );
+                if( idx == -1 ) return;
+                listContainer.children[ idx ].classList.toggle( 'selected' );
+                value = newValue;
+                this._trigger( new IEvent( name, newValue ), callback );
+            };
+    
+            widget.updateValues = ( newValues ) => {
+    
+                values = newValues;
+                listContainer.innerHTML = "";
+                
+                for( let i = 0; i < values.length; ++i )
                 {
-                    icon = item_value[1];
-                    item_value = item_value[0];
+                    let icon = null;
+                    let itemValue = values[ i ];
+    
+                    if( itemValue.constructor === Array )
+                    {
+                        icon = itemValue[ 1 ];
+                        itemValue = itemValue[ 0 ];
+                    }
+    
+                    let listElement = document.createElement( 'div' );
+                    listElement.className = "lexlistitem" + ( value == itemValue ? " selected" : "" );
+                    listElement.innerHTML = "<span>" + itemValue + "</span>" + ( icon ? "<a class='" + icon + "'></a>" : "" );
+    
+                    listElement.addEventListener( 'click', e => {
+                        listContainer.querySelectorAll( '.lexlistitem' ).forEach( e => e.classList.remove( 'selected' ) );
+                        listElement.classList.toggle( 'selected' );
+                        value = itemValue;
+                        this._trigger( new IEvent( name, itemValue, e ), callback );
+                    });
+    
+                    listContainer.appendChild( listElement );
                 }
-
-                let list_item = document.createElement('div');
-                list_item.className = "lexlistitem" + (value == item_value ? " selected" : "");
-                list_item.innerHTML = "<span>" + item_value + "</span>" + (icon ? "<a class='" + icon + "'></a>" : "");
-
-                list_item.addEventListener('click', (e) => {
-                    list_container.querySelectorAll('.lexlistitem').forEach( e => e.classList.remove('selected'));
-                    list_item.classList.toggle( 'selected' );
-                    this._trigger( new IEvent(name, item_value, e), callback );
-                });
-
-                list_container.appendChild(list_item);
-            }
-
+            };
+    
+            let element = widget.domEl;
+    
+            // Show list
+    
+            let listContainer = document.createElement( 'div' );
+            listContainer.className = "lexlist";
+            listContainer.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+    
+            widget.updateValues( values );
+    
             // Remove branch padding and margins
-            if(!widget.name) {
+            if( !widget.name ) {
                 element.className += " noname";
-                list_container.style.width = "100%";
+                listContainer.style.width = "100%";
             }
-
-            element.appendChild(list_container);
-
+    
+            element.appendChild( listContainer );
+    
             return widget;
         }
 

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.24",
+    version: "0.1.26",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -2174,7 +2174,9 @@ class Widget {
     set( value ) {
 
         if( this.onSetValue )
-            this.onSetValue( value );
+            return this.onSetValue( value );
+
+        console.warn("Can't set value of " + this.typeName());
     }
 
     oncontextmenu(e) {
@@ -3025,6 +3027,7 @@ class Panel {
                 let domName = document.createElement('div');
                 domName.className = "lexwidgetname";
                 domName.innerHTML = name || "";
+                domName.title = options.title ?? domName.innerHTML;
                 domName.style.width = options.nameWidth || LX.DEFAULT_NAME_WIDTH;
                 element.appendChild(domName);
                 element.domName = domName;
@@ -4284,46 +4287,69 @@ class Panel {
 
     addList( name, values, value, callback, options = {} ) {
 
-        let widget = this.create_widget(name, Widget.LIST, options);
-        let element = widget.domEl;
+        let widget = this.create_widget( name, Widget.LIST, options );
 
-        // Show list
+        widget.onGetValue = () => {
+            return value;
+        };
 
-        let list_container = document.createElement('div');
-        list_container.className = "lexlist";
-        list_container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+        widget.onSetValue = ( newValue ) => {
+            listContainer.querySelectorAll( '.lexlistitem' ).forEach( e => e.classList.remove( 'selected' ) );
+            const idx = values.indexOf( newValue );
+            if( idx == -1 ) return;
+            listContainer.children[ idx ].classList.toggle( 'selected' );
+            value = newValue;
+            this._trigger( new IEvent( name, newValue ), callback );
+        };
 
-        for( let i = 0; i < values.length; ++i )
-        {
-            let icon = null;
-            let item_value = values[i];
+        widget.updateValues = ( newValues ) => {
 
-            if( item_value.constructor === Array )
+            values = newValues;
+            listContainer.innerHTML = "";
+            
+            for( let i = 0; i < values.length; ++i )
             {
-                icon = item_value[1];
-                item_value = item_value[0];
+                let icon = null;
+                let itemValue = values[ i ];
+
+                if( itemValue.constructor === Array )
+                {
+                    icon = itemValue[ 1 ];
+                    itemValue = itemValue[ 0 ];
+                }
+
+                let listElement = document.createElement( 'div' );
+                listElement.className = "lexlistitem" + ( value == itemValue ? " selected" : "" );
+                listElement.innerHTML = "<span>" + itemValue + "</span>" + ( icon ? "<a class='" + icon + "'></a>" : "" );
+
+                listElement.addEventListener( 'click', e => {
+                    listContainer.querySelectorAll( '.lexlistitem' ).forEach( e => e.classList.remove( 'selected' ) );
+                    listElement.classList.toggle( 'selected' );
+                    value = itemValue;
+                    this._trigger( new IEvent( name, itemValue, e ), callback );
+                });
+
+                listContainer.appendChild( listElement );
             }
+        };
 
-            let list_item = document.createElement('div');
-            list_item.className = "lexlistitem" + (value == item_value ? " selected" : "");
-            list_item.innerHTML = "<span>" + item_value + "</span>" + (icon ? "<a class='" + icon + "'></a>" : "");
+        let element = widget.domEl;
 
-            list_item.addEventListener('click', (e) => {
-                list_container.querySelectorAll('.lexlistitem').forEach( e => e.classList.remove('selected'));
-                list_item.classList.toggle( 'selected' );
-                this._trigger( new IEvent(name, item_value, e), callback );
-            });
+        // Show list
 
-            list_container.appendChild(list_item);
-        }
+        let listContainer = document.createElement( 'div' );
+        listContainer.className = "lexlist";
+        listContainer.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
+
+        widget.updateValues( values );
 
         // Remove branch padding and margins
-        if(!widget.name) {
+        if( !widget.name ) {
             element.className += " noname";
-            list_container.style.width = "100%";
+            listContainer.style.width = "100%";
         }
 
-        element.appendChild(list_container);
+        element.appendChild( listContainer );
 
         return widget;
     }

package/changelog.md

@@ -1,5 +1,27 @@
 # lexgui.js changelog
 
+## 0.1.26
+
+Code Editor:
+- Search Next Ocurrence using "Ctrl+D" (Duplicate line moved to "Alt+D")
+- Previous selection is restored on undo.
+- Get text to search from selection.
+- Reverse search bugfixes.
+- Pasting content now scrolls to follow cursor.
+
+Minor fixes.
+
+## 0.1.25
+
+Code Editor:
+- Added Ctrl+K + C/U Shortcuts to Comment/Uncomment lines.
+- Improved WGSL highlighting.
+- Minor bug fixes.
+
+Added title attribute by default to Widget Name Dom elements.
+Added value getter/setter for LIST widget.
+Added updateValues method for modify list options in LIST widget.
+
 ## 0.1.24
 
 Code Editor:

package/package.json

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