lexgui 0.1.18 → 0.1.20

package/build/lexgui.css

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700;800;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=swap');
 
@@ -17,12 +16,15 @@
   --global-text-primary: #f4f4ffe6;
   --global-text-secondary: #c6c6cfd9;
   --global-dark-background: #14161a;
-  --global-blur-background: #292b2da9;
+  --global-blur-background: #28292ba9;
   --transition-time: 1000;
 } 
 
 /* Some global colors */
 .orange { color: orange }
+.gray { color: gray }
+.dodgerblue { color: dodgerblue }
+.lightblue { color: rgb(90, 168, 247) }
 
 ::-webkit-scrollbar {
   height: 3px;
@@ -129,7 +131,7 @@ body.nocursor * {
   background-color: var(--global-blur-background);
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
-  border-radius: 12px;
+  border-radius: 8px;
   border: 1px solid #d0d0ec6b;
   width: 30%;
   top: 15%;
@@ -187,6 +189,26 @@ body.nocursor * {
   float: left;
 }
 
+#global_search .searchitembox .searchitem i {
+  width: 12px;
+  font-size: 11px;
+  margin-right: 4px;
+  margin-top: -2px;
+  vertical-align: middle;
+}
+
+#global_search .searchitembox .searchitem img {
+  width: 12px;
+  margin-right: 4px;
+  margin-top: -2px;
+  vertical-align: middle;
+}
+
+#global_search .searchitembox .searchitem .lang-ext {
+  color: #676e75;
+  font-size: 12px;
+}
+
 #global_search .searchitembox .searchitem.last {
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -729,7 +751,7 @@ body.nocursor * {
   display: grid;
   align-content: center;
 	background-color: var(--global-button-color);
-  border-radius: 8px;
+  border-radius: 6px;
   border: none;
   margin-top: 2px;
   height: 22px !important;
@@ -1248,7 +1270,7 @@ input[type="range"] {
   margin-top: -4px;
   width: 8px;
   height: 8px;
-  border-radius: 8px;
+  border-radius: 6px;
   background: #c9c7de;
   cursor: pointer;
 }
@@ -1257,7 +1279,7 @@ input[type="range"] {
   margin-top: -8px;
   width: 8px;
   height: 8px;
-  border-radius: 8px;
+  border-radius: 6px;
   background: #a19dc9;
   cursor: pointer;
 }
@@ -1412,6 +1434,22 @@ input[type="range"] {
   user-select: none; /* Standard syntax */
 }
 
+.lextree .lextreeitem img {
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  vertical-align: middle;
+  margin-top: -1px;
+}
+
+.lextree .lextreeitem .tree-item-icon {
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  vertical-align: middle;
+  margin-top: -1px;
+}
+
 .lextree .lextreeitem.draggingover {
   background: #7b8ae27b;
 }
@@ -1700,7 +1738,7 @@ meter::-webkit-meter-even-less-good-value {
   background-color: var(--global-color-secondary);
   margin-top: 10px;
   margin-bottom: 8px;
-  border-radius: 10px;
+  border-radius: 8px;
   padding-left: 4px;
   padding-right: 4px;
 }
@@ -2697,9 +2735,11 @@ ul.lexassetscontent {
 }
 
 .codebasearea .lexareatab i {
+  width: 12px;
   font-size: 10px;
   margin-right: 4px;
   vertical-align: middle;
+  margin-top: -3px;
 }
 
 .codebasearea .lexareatab img {
@@ -2707,6 +2747,7 @@ ul.lexassetscontent {
   height: 12px;
   margin-right: 4px;
   vertical-align: middle;
+  margin-top: -2px;
 }
 
 .lexcodeeditor ::-webkit-scrollbar {
@@ -2774,14 +2815,21 @@ ul.lexassetscontent {
 
 .lexcodeeditor .code {
   cursor: text;
-  font-size: 16px;
+  font-family: "CommitMono", monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "ss04", "ss05";
+  font-size: 0.8rem;
   padding-right: 6px;
   position: relative;
 }
 
 .codechar {
-  font-size: 16px;
-  font-family: 'Inconsolata', monospace;
+  font-family: "CommitMono", monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "ss04", "ss05";
+  font-size: 0.8rem;
   position: absolute;
   top: 0;
   left: 0;
@@ -2796,9 +2844,6 @@ ul.lexassetscontent {
   border-radius: 0;
   border-width: 0;
   background: transparent;
-  font-family: 'Inconsolata', monospace;
-  font-size: inherit;
-  font-weight: bold;
   margin: 0px 0px;
   white-space: pre;
   word-wrap: normal;
@@ -2812,7 +2857,7 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor pre.active-line {
-  background-color: var(--global-blur-background);
+  background-color: #333437a9;
 }
 
 .lexcodeeditor span {
@@ -2830,10 +2875,11 @@ ul.lexassetscontent {
 }
 
 pre .line-gutter {
-  color: #888;
+  color: #8a8b97;
   width: 48px;
   height: 20px;
   font-size: 14px;
+  font-weight: 400;
   line-height: 20px;
   text-align: center;
   -webkit-user-select: none; /* Safari 3.1+ */
@@ -2866,7 +2912,6 @@ pre .line-gutter {
 .lexcodeeditor .cursors .cursor {
   -webkit-text-size-adjust: 100%;
   font-family: monospace;
-  color: #AAA !important;
   font-size: 16px;
   cursor: text;
   box-sizing: border-box;
@@ -2875,7 +2920,7 @@ pre .line-gutter {
   border-right: none;
   width: 0;
   position: absolute;
-  border-left: 3px solid #c5c5c5d6 !important;
+  border-left: 3px solid #fff !important;
   z-index: 0 !important;
   left: 0px;
   top: 0px;
@@ -2943,9 +2988,8 @@ pre .line-gutter {
   top: 0px;
   width: 100px;
   height: 20px;
-  margin-top: -2px;
   background-color: var(--global-selected);
-  opacity: 0.3;
+  opacity: 0.4;
 }
 
 .lexcodeeditor .autocomplete {
@@ -3067,6 +3111,16 @@ pre .line-gutter {
 .cm-sym.wgsl { color: #f9cb20; } /* symbol */
 .cm-mtd.wgsl { color: #e0cc68; } /* method */
 
+.cm-str.rust { color: #ca7d59; } /* string */
+.cm-kwd.rust { color: #218cce; } /* keyword */
+.cm-com.rust { color: #5cab5a; } /* comment */
+.cm-typ.rust { color: #36c0b0; } /* type */
+.cm-std.rust { color: #cf6dcf; } /* statements & declarations */
+.cm-bln.rust { color: inherit; } /* builtin */
+.cm-dec.rust { color: #b1ce9b; } /* decimal */
+.cm-sym.rust { color: #e7ded2; } /* symbol */
+.cm-mtd.rust { color: #e0cc68 } /* method */
+
 .cm-str.python { color: #ca7d59; } /* string */
 .cm-kwd.python { color: #218cce; } /* keyword */
 .cm-com.python { color: #5cab5a; } /* comment */

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.18",
+        version: "0.1.20",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -24,6 +24,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
     function clamp (num, min, max) { return Math.min(Math.max(num, min), max) }
     function round(num, n) { return +num.toFixed(n); }
     
+    function getSupportedDOMName( string )
+    {
+        return string.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_').replaceAll('.', ''); 
+    }
+
+    LX.getSupportedDOMName = getSupportedDOMName;
+
     function has( component_name )
     {
         return (LX.components.indexOf( component_name ) > -1);
@@ -258,7 +265,16 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 e.stopPropagation();
                 global_search.classList.toggle('hidden');
                 global_search.querySelector('input').focus();
-                add_elements(undefined);
+                add_elements( undefined );
+            }
+            else
+            {
+                for( let c of LX.components )
+                    if( LX[c].prototype.onKeyPressed ) 
+                    {
+                        const instances = LX.CodeEditor.getInstances();
+                        for( let i of instances ) i.onKeyPressed( e );
+                    }
             }
         });
 
@@ -342,18 +358,24 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             {
                 const instances = LX.CodeEditor.getInstances();
                 if(!instances.length) return;
-
-                const languages = Object.keys( instances[0].languages );
-
-                for( let l of languages ) {
-
-                    const key = "Set language: " + l;
-                    if( key.toLowerCase().includes(filter) ) {
-                        add_element(key, () => {
+    
+                const languages = instances[ 0 ].languages;
+    
+                for( let l of Object.keys( languages ) ) {
+    
+                    const key = "Language: " + l;
+                    const icon = instances[ 0 ]._getFileIcon( null, languages[ l ].ext );
+    
+                    let value = icon.includes( 'fa-' ) ? "<i class='" + icon + "'></i>" :
+                            "<img src='" + ( "https://raw.githubusercontent.com/jxarco/lexgui.js/master/" + icon ) + "'>";
+    
+                    value += key + " <span class='lang-ext'>(" + languages[ l ].ext + ")</span>";
+                    if( key.toLowerCase().includes( filter ) ) {
+                        add_element( value, () => {
                             for( let i of instances ) {
                                 i._changeLanguage( l );
                             }
-                        }, "", {});
+                        }, "", {} );
                     }
                 }
             }
@@ -1355,14 +1377,14 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         _moveSplit( dt, force_animation = false, force_width = 0 ) {
 
-            if(!this.type)
-                throw("No split area");
+            if( !this.type )
+                throw( "No split area" );
 
-            if(dt === undefined) // splitbar didn't move!
+            if( dt === undefined ) // Splitbar didn't move!
                 return;
 
-            var a1 = this.sections[0];
-            var a2 = this.sections[1];
+            var a1 = this.sections[ 0 ];
+            var a2 = this.sections[ 1 ];
             var splitinfo = " - "+ LX.DEFAULT_SPLITBAR_SIZE + "px";
 
             let transition = null;
@@ -1371,29 +1393,30 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 // Remove transitions for this change..
                 transition = a1.root.style.transition;
                 a1.root.style.transition = a2.root.style.transition = "none";
-                flushCss(a1.root);
-                flushCss(a2.root);
+                flushCss( a1.root );
+                flushCss( a2.root );
             }
 
-            if(this.type == "horizontal") {
-
-                var size = Math.max(a2.root.offsetWidth + dt, parseInt(a2.minWidth));
+            if( this.type == "horizontal" )
+            {
+                var size = Math.max( a2.root.offsetWidth + dt, parseInt( a2.minWidth ) );
                 if( force_width ) size = force_width;
-				a1.root.style.width = "-moz-calc( 100% - " + size + "px " + splitinfo + " )";
-				a1.root.style.width = "-webkit-calc( 100% - " + size + "px " + splitinfo + " )";
-				a1.root.style.width = "calc( 100% - " + size + "px " + splitinfo + " )";
-                a1.root.style.minWidth = a1.minWidth + "px";
-				a2.root.style.width = size + "px"; //other split
+                a1.root.style.width = "-moz-calc( 100% - " + size + "px " + splitinfo + " )";
+                a1.root.style.width = "-webkit-calc( 100% - " + size + "px " + splitinfo + " )";
+                a1.root.style.width = "calc( 100% - " + size + "px " + splitinfo + " )";
+                a1.root.style.minWidth = parseInt( a1.minWidth ) + "px";
+                a2.root.style.width = size + "px";
+                if( a1.maxWidth != Infinity ) a2.root.style.minWidth = "calc( 100% - " + parseInt( a1.maxWidth ) + "px" + " )";
             }
-            else {
-
+            else
+            {
                 var size = Math.max((a2.root.offsetHeight + dt) + a2.offset, parseInt(a2.minHeight));
                 if( force_width ) size = force_width;
-				a1.root.style.height = "-moz-calc( 100% - " + size + "px " + splitinfo + " )";
-				a1.root.style.height = "-webkit-calc( 100% - " + size + "px " + splitinfo + " )";
-				a1.root.style.height = "calc( 100% - " + size + "px " + splitinfo + " )";
+                a1.root.style.height = "-moz-calc( 100% - " + size + "px " + splitinfo + " )";
+                a1.root.style.height = "-webkit-calc( 100% - " + size + "px " + splitinfo + " )";
+                a1.root.style.height = "calc( 100% - " + size + "px " + splitinfo + " )";
                 a1.root.style.minHeight = a1.minHeight + "px";
-				a2.root.style.height = ( size - a2.offset ) + "px"; //other split
+                a2.root.style.height = ( size - a2.offset ) + "px";
             }
                 
             if( !force_animation )
@@ -1598,15 +1621,22 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     this.area.root.classList.toggle('folded', !this.folded);
                 }
 
-                if(options.onSelect) options.onSelect(e, tabEl.dataset.name);
+                if(options.onSelect)
+                    options.onSelect(e, tabEl.dataset.name);
+            });
+
+            tabEl.addEventListener("contextmenu", e => {
+                e.preventDefault();
+                e.stopPropagation();
+    
+                if(options.onContextMenu) 
+                    options.onContextMenu( e, tabEl.dataset.name );
             });
 
             tabEl.addEventListener("mouseup", e => {
                 e.preventDefault();
                 e.stopPropagation();
-                if(e.button == 1 ) {
-                    if(this.onclose)
-                        this.onclose( tabEl.dataset["name"] );
+                if( e.button == 1 ) {
                     this.delete( tabEl.dataset["name"] );
                 }
             });
@@ -1617,7 +1647,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     e.preventDefault();
                     return;
                 } 
-                e.dataTransfer.setData("source", e.target.id);
+                e.dataTransfer.setData( "source", e.target.id );
             });
             
             // Attach content
@@ -1646,6 +1676,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             if(!tabEl || tabEl.fixed)
             return;
 
+            if( this.onclose )
+                this.onclose( name );
+
             // Delete tab element
             this.tabDOMs[ name ].remove();
             delete this.tabDOMs[ name ];
@@ -2144,8 +2177,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
         set( value ) {
 
-            if(this.onSetValue)
-                this.onSetValue(value);
+            if( this.onSetValue )
+                this.onSetValue( value );
         }
 
         oncontextmenu(e) {
@@ -2388,22 +2421,33 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             let item = document.createElement('li');
             item.className = "lextreeitem " + "datalevel" + level + (is_parent ? " parent" : "") + (is_selected ? " selected" : "");
-            item.id = node.id;
+            item.id = LX.getSupportedDOMName( node.id );
             item.tabIndex = "0";
 
             // Select hierarchy icon
-            let icon = "fa-solid fa-square"; // Default: no childs
+            let icon = (this.options.skip_default_icon ?? true) ? "" : "fa-solid fa-square"; // Default: no childs
             if( is_parent ) icon = node.closed ? "fa-solid fa-caret-right" : "fa-solid fa-caret-down";
             item.innerHTML = "<a class='" + icon + " hierarchy'></a>";
             
             // Add display icon
             icon = node.icon;
-            if( icon ) item.innerHTML += "<a class='" + icon + "'></a>";
+            
+            // Process icon
+            if( node.icon )
+            {
+                if( node.icon.includes( 'fa-' ) ) // It's fontawesome icon...
+                    item.innerHTML += "<a class='" + node.icon + " tree-item-icon'></a>";
+                else // an image..
+                {
+                    const rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
+                    item.innerHTML += "<img src='" + ( rootPath + node.icon ) + "'>";
+                }
+            }
 
             item.innerHTML += (node.rename ? "" : node.id);
 
             item.setAttribute('draggable', true);
-            item.style.paddingLeft = ((is_parent ? 0 : 3 ) + (3 + (level+1) * 25)) + "px";
+            item.style.paddingLeft = ((is_parent ? 0 : 3 ) + (3 + (level+1) * 15)) + "px";
             list.appendChild(item);
 
             // Callbacks
@@ -2445,16 +2489,19 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 }
             });
 
-            if( this.options.rename ?? true )
-                item.addEventListener("dblclick", function() {
+            item.addEventListener("dblclick", function() {
+                if( that.options.rename ?? true )
+                {
                     // Trigger rename
                     node.rename = true;
                     that.refresh();
-                    if(that.onevent) {
-                        const event = new TreeEvent(TreeEvent.NODE_DBLCLICKED, node);
-                        that.onevent( event );
-                    }
-                });
+                }
+                if( that.onevent )
+                {
+                    const event = new TreeEvent(TreeEvent.NODE_DBLCLICKED, node);
+                    that.onevent( event );
+                }
+            });
 
             item.addEventListener("contextmenu", e => {
                 e.preventDefault();
@@ -2492,7 +2539,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 else if( e.key == "ArrowUp" || e.key == "ArrowDown" ) // Unique or zero selected
                 {
                     var selected = this.selected.length > 1 ? (e.key == "ArrowUp" ? this.selected.shift() : this.selected.pop()) : this.selected[0];
-                    var el = this.domEl.querySelector("#" + selected.id);
+                    var el = this.domEl.querySelector("#" + LX.getSupportedDOMName( selected.id ) );
                     var sibling = e.key == "ArrowUp" ? el.previousSibling : el.nextSibling;
                     if( sibling ) sibling.click();
                 }
@@ -2520,7 +2567,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                         that.onevent( event );
                     }
 
-                    node.id = this.value;
+                    node.id = LX.getSupportedDOMName( this.value );
                     delete node.rename;
                     that.frefresh( node.id );
                     list.querySelector("#" + this.value).classList.add('selected');
@@ -2671,21 +2718,21 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
         }
 
-        refresh(newData, selectedId) {
+        refresh( newData, selectedId ) {
             this.data = newData ?? this.data;
-            this.domEl.querySelector("ul").innerHTML = "";
+            this.domEl.querySelector( "ul" ).innerHTML = "";
             this._create_item( null, this.data, 0, selectedId );
         }
-
+    
         /* Refreshes the tree and focuses current element */
         frefresh( id ) {
             this.refresh();
-            var el = this.domEl.querySelector("#" + id);
-            if(el) el.focus();
+            var el = this.domEl.querySelector( "#" + id );
+            if( el ) el.focus();
         }
-
-        select(id) {
-            this.refresh(null, id);
+    
+        select( id ) {
+            this.refresh( null, id );
         }
     }
 
@@ -3517,6 +3564,15 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         addButton( name, value, callback, options = {} ) {
 
             let widget = this.create_widget(name, Widget.BUTTON, options);
+            widget.onGetValue = () => {
+                return wValue.innerText;
+            };
+            widget.onSetValue = (new_value) => {
+                wValue.innerHTML = "<span>" + 
+                (options.icon ? "<a class='" + options.icon + "'></a>" : 
+                ( options.img  ? "<img src='" + options.img + "'>" : (new_value || ""))) + "</span>";
+            };
+            
             let element = widget.domEl;
 
             var wValue = document.createElement('button');
@@ -5852,7 +5908,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             const hasSubmenu = o[ k ].length;
             let entry = document.createElement('div');
             entry.className = "lexcontextmenuentry" + (o[ 'className' ] ? " " + o[ 'className' ] : "" );
-            entry.id = o.id ?? ("eId" + this._getSupportedDOMName( k ));
+            entry.id = o.id ?? ("eId" + getSupportedDOMName( k ));
             entry.innerHTML = "";
             const icon = o[ 'icon' ];
             if(icon) {
@@ -5999,7 +6055,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             for( let item of this.items )
             {
                 let key = Object.keys(item)[0];
-                let pKey = "eId" + this._getSupportedDOMName( key );
+                let pKey = "eId" + getSupportedDOMName( key );
 
                 // Item already created
                 const id = "#" + (item.id ?? pKey);
@@ -6015,10 +6071,6 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this.colors[ token ] = color;
         }
-
-        _getSupportedDOMName( key ) {
-            return key.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_');
-        }
     };
 
     LX.ContextMenu = ContextMenu;