lexgui 0.1.23 → 0.1.25

package/build/lexgui.css

@@ -5,6 +5,7 @@
   --global-font: 'Noto Sans', sans-serif; /*'Rubik', sans-serif; */
   --global-selected: #3e57e4;
   --global-selected-light: #7b8ae2;
+  --global-selected-dark: #344bccb7;
   --global-color-primary: #232323;
   --global-color-secondary: #343434;
   --global-color-terciary: #444;
@@ -1786,10 +1787,10 @@ meter::-webkit-meter-even-less-good-value {
   z-index: 102;
   position: absolute;
   padding-right: 20px;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-  box-shadow: 0 0 6px black !important;
+  border-radius: 4px;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.63) !important;
   background-color: var(--global-blur-background);
+  border: 1px solid #91909036;
 }
 
 .lexcontextmenubox:before {
@@ -1802,13 +1803,14 @@ meter::-webkit-meter-even-less-good-value {
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   z-index:-1;
+  border-radius: 4px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry {
   width: 100%;
   color: #c0c4cbe3;
   padding: 3px;
-  padding-left: 8px;
+  padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 4px;
   cursor: pointer;
@@ -1816,7 +1818,16 @@ meter::-webkit-meter-even-less-good-value {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  border-left: 2px solid var(--global-selected-light);
+}
+
+.lexcontextmenubox .lexcontextmenuentry:first-child {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+.lexcontextmenubox .lexcontextmenuentry:last-child {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry.cmtitle {
@@ -1848,17 +1859,17 @@ meter::-webkit-meter-even-less-good-value {
   float: right;
   margin-right: 0px;
   margin-top: 10px;
-  font-size: 11px;
+  font-size: 10px;
 }
 
 /* submenu specified arrow  */
 .lexcontextmenubox .lexcontextmenuentry a.fa-xs {
   float: right;
-  margin-top: -7px;
+  margin-top: -8px;
 }
 
 .lexcontextmenubox .lexcontextmenuentry:hover:not(.cmtitle) {
-  background-color: var(--global-selected);
+  background-color: var(--global-selected-dark);
   color: #f5f5f5;
 }
 
@@ -2950,7 +2961,8 @@ pre .line-gutter {
   height: var(--code-editor-row-height);
   position: absolute;
   border-left: 3px solid #fff !important;
-  z-index: 0 !important;
+  z-index: 1 !important;
+  opacity: 0.6;
   left: 0px;
   top: 0px;
 }
@@ -3113,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 */
 
@@ -3140,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.23",
+        version: "0.1.25",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -2179,6 +2179,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             if( this.onSetValue )
                 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.23",
+    version: "0.1.25",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -2175,6 +2175,8 @@ class Widget {
 
         if( this.onSetValue )
             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,38 +1,66 @@
 # lexgui.js changelog
 
+## 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:
+- Improved single and multiple cursor usability.
+- Cursor can be added or removed using "Alt+LeftClick".
+- Fixed clicks outside the code area.
+- Minor bug fixes.
+
 ## 0.1.23
 
-Begin integration of multiple cursors ("Ctrl+ArrowDown").
-Code tabs have new VS Code-alike style.
-Improved CSS highlighting.
-Add Undo Steps to some actions that were missing.
-When using Ctrl+G, the selected line is now highlighted.
-General bug fixes.
+Code Editor:
+- Begin integration of multiple cursors ("Ctrl+ArrowDown").
+- Code tabs have new VS Code-alike style.
+- Improved CSS highlighting.
+- Add Undo Steps to some actions that were missing.
+- When using Ctrl+G, the selected line is now highlighted.
+
+Minor fixes.
 
 ## 0.1.22
 
-Added REDO using "Ctrl+Y".
-Added FontSize customization. "Ctrl+PLUS", "Ctrl+MINUS" or "Ctrl+Wheel".
-Added "Ctrl+G" to scroll to specific line.
-General bug fixes.
+Code Editor:
+- Added REDO using "Ctrl+Y".
+- Added FontSize customization. "Ctrl+PLUS", "Ctrl+MINUS" or "Ctrl+Wheel".
+- Added "Ctrl+G" to scroll to specific line.
+
+Minor fixes.
 
 ## 0.1.21
 
-Added "Ctrl+F" to find text in code tabs.
-"Shift+Backspace" deletes word at current position.
-Added "Markdown" syntax highlighting. 
-Improved hightlighting of tag languages (HTML, Markdown, XML).
+Code Editor:
+- Added "Ctrl+F" to find text in code tabs.
+- "Shift+Backspace" deletes word at current position.
+- Added "Markdown" syntax highlighting. 
+- Improved hightlighting of tag languages (HTML, Markdown, XML).
 
 ## 0.1.20
 
-Active line is now hightlighted.
-Using CommitMono font (https://commitmono.com/) as the font for the Code Editor. 
-Added "Rust" syntax highlighting. 
-Improved all code selections (and some bugs fixed).
-Block comments are now working again (with bugs probably). 
+Code Editor:
+- Active line is now hightlighted.
+- Using CommitMono font (https://commitmono.com/) as the font for the Code Editor. 
+- Added "Rust" syntax highlighting. 
+- Improved all code selections (and some bugs fixed).
+- Block comments are now working again (with bugs probably).
+
 Minor fixes.
 
 ## 0.1.19
 
-Add file explorer to Code Editor component. 
+Code Editor:
+- Add file explorer to Code Editor component. 
+
 Minor fixes.

package/examples/code_editor.html

@@ -55,7 +55,7 @@
             file_explorer: file_explorer
         });
 
-        editor.loadFile( "../demo.js" );
+        editor.loadFile( "../data/js_sample.js" );
         // editor.loadFile( "../data/json_sample.json" );
         // editor.loadFile( "../data/css_sample.css" );
         // editor.loadFile( "../data/cpp_sample.cpp" );

package/package.json

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