lexgui 0.1.17 → 0.1.19

package/build/lexgui.css

@@ -9,7 +9,7 @@
   --global-color-primary: #232323;
   --global-color-secondary: #343434;
   --global-color-terciary: #444;
-	--global-branch-darker: #28282a;
+	--global-branch-darker: #252525;
 	--branch-title-background: #2e3338;
   --branch-title-inactive-background: #42484e;
   --global-button-color: #4e4e4e;
@@ -17,10 +17,16 @@
   --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;
   width: 4px;
@@ -126,7 +132,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%;
@@ -184,6 +190,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;
@@ -1409,6 +1435,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;
 }
@@ -2002,6 +2044,7 @@ meter::-webkit-meter-even-less-good-value {
   -ms-user-select: none; /* IE 10+ */
   user-select: none; /* Standard syntax */
   transition: 0.2s;
+  line-height: 16px;
 }
 
 .lexareatabs.row {
@@ -2692,6 +2735,22 @@ ul.lexassetscontent {
   padding: 0px;
 }
 
+.codebasearea .lexareatab i {
+  width: 12px;
+  font-size: 10px;
+  margin-right: 4px;
+  vertical-align: middle;
+  margin-top: -3px;
+}
+
+.codebasearea .lexareatab img {
+  width: 12px;
+  height: 12px;
+  margin-right: 4px;
+  vertical-align: middle;
+  margin-top: -2px;
+}
+
 .lexcodeeditor ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -2751,10 +2810,6 @@ ul.lexassetscontent {
   width: calc( 100% - 10px ) !important;
 }
 
-/* .lexcodeeditor .codetabsarea.with-hscrollbar {
-  height: calc( 100% - 72px ) !important;
-} */
-
 .lexcodeeditor .codetabsarea.dragging {
   background-color: var(--global-color-secondary);
 }
@@ -2786,7 +2841,7 @@ ul.lexassetscontent {
   font-family: 'Inconsolata', monospace;
   font-size: inherit;
   font-weight: bold;
-  margin: 4px 0px;
+  margin: 0px 0px;
   white-space: pre;
   word-wrap: normal;
   line-height: inherit;
@@ -2794,7 +2849,7 @@ ul.lexassetscontent {
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
-  height: 16px;
+  height: 20px;
   pointer-events: none;
 }
 
@@ -2817,11 +2872,12 @@ ul.lexassetscontent {
 }
 
 pre .line-gutter {
-  color: #888;
+  color: #8a8b97;
   width: 48px;
-  height: 16px;
+  height: 20px;
   font-size: 14px;
-  line-height: 22px;
+  font-weight: 400;
+  line-height: 20px;
   text-align: center;
   -webkit-user-select: none; /* Safari 3.1+ */
   -moz-user-select: none; /* Firefox 2+ */
@@ -2843,7 +2899,6 @@ pre .line-gutter {
   margin: 0;
   padding: 0;
   position: relative;
-  z-index: 3;
   pointer-events: none;
 }
 
@@ -2867,7 +2922,7 @@ pre .line-gutter {
   z-index: 0 !important;
   left: 0px;
   top: 0px;
-  height: 18px;
+  height: 20px;
 }
 
 .lexcodescrollbar {
@@ -2881,6 +2936,7 @@ pre .line-gutter {
   margin-top: 26px;
   z-index: 1 !important;
   right: 0px;
+  pointer-events: none;
 }
 
 .lexcodescrollbar.horizontal {
@@ -2906,6 +2962,7 @@ pre .line-gutter {
   width: 10px;
   height: 10px;
   transition: linear 0.1s background-color;
+  pointer-events: all;
 }
 
 .lexcodescrollbar div:hover { /* thumb */
@@ -2961,7 +3018,7 @@ pre .line-gutter {
   margin: 0;
   pointer-events: unset;
   cursor: default;
-  height: 18px;
+  height: 22px;
 }
 
 .lexcodeeditor .autocomplete pre a {
@@ -3073,9 +3130,10 @@ pre .line-gutter {
 .cm-sym.batch { color: #dfd85e; } /* symbol */
 .cm-mtd.batch { color: inherit } /* method */
 
-/* plain color */
-.cm-str.plaintext, .cm-kwd.plaintext, .cm-com.plaintext, .cm-typ.plaintext, .cm-std.plaintext, 
-.cm-bln.plaintext, .cm-dec.plaintext, .cm-sym.plaintext, .cm-mtd.plaintext { color: inherit; }
+.cm-str.html { color: #ca7d59; } /* string */
+.cm-kwd.html { color: #2194ce; } /* keyword */
+.cm-bln.html { color: #b4d7ec; } /* builtin */
+.cm-sym.html { color: #929292; } /* symbol */
 
 
 /* Node Graph */

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.17",
+        version: "0.1.19",
         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 )
@@ -1541,11 +1564,23 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             contentEl.style.display = isSelected ? "block" : "none";
             contentEl.classList.add("lextabcontent");
 
+            // Process icon
+            if( options.icon )
+            {
+                if( options.icon.includes( 'fa-' ) ) // It's fontawesome icon...
+                    options.icon = "<i class='" + options.icon + "'></i>";
+                else // an image..
+                {
+                    const rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
+                    options.icon = "<img src='" + ( rootPath + options.icon ) + "'>";
+                }
+            }
+
             // Create tab
             let tabEl = document.createElement('span');
             tabEl.dataset["name"] = name;
             tabEl.className = "lexareatab" + (isSelected ? " selected" : "");
-            tabEl.innerHTML = name;
+            tabEl.innerHTML = (options.icon ?? "") + name;
             tabEl.id = name.replace(/\s/g, '') + Tabs.TAB_ID++;
             tabEl.title = options.title;
             tabEl.selected = isSelected ?? false;
@@ -1592,9 +1627,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             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"] );
                 }
             });
@@ -1605,7 +1638,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
@@ -1634,6 +1667,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 ];
@@ -2376,22 +2412,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
@@ -2433,16 +2480,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();
@@ -2480,7 +2530,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();
                 }
@@ -2508,7 +2558,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');
@@ -2659,21 +2709,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 );
         }
     }
 
@@ -5840,7 +5890,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) {
@@ -5987,7 +6037,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);
@@ -6003,10 +6053,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;