lexgui 0.1.18 → 0.1.19

package/build/components/codeeditor.js

@@ -170,11 +170,74 @@ class CodeEditor {
         window.editor = this;
 
         CodeEditor.__instances.push( this );
+        
+        // File explorer
+        if( options.file_explorer ?? false )
+        {
+            var [explorerArea, codeArea] = area.split({ sizes:["15%","85%"] });
+            explorerArea.setLimitBox( 180, 20, 512 );
+            this.explorerArea = explorerArea;
+
+            let panel = new LX.Panel();
+
+            panel.addTitle( "EXPLORER" );
+
+            let sceneData = {
+                'id': 'WORKSPACE',
+                'skipVisibility': true,
+                'children': []
+            };
+        
+            this.explorer = panel.addTree( null, sceneData, { 
+                filter: false,
+                rename: false,
+                skip_default_icon: true,
+                onevent: (event) => { 
+                    switch(event.type) {
+                        // case LX.TreeEvent.NODE_SELECTED:
+                        //     if( !this.tabs.tabDOMs[ event.node.id ] ) break;
+                        case LX.TreeEvent.NODE_DBLCLICKED:
+                            this.loadTab( event.node.id );
+                            break;
+                        case LX.TreeEvent.NODE_DELETED: 
+                            this.tabs.delete( event.node.id );
+                            delete this.loadedTabs[ event.node.id ];
+                            break;
+                        // case LX.TreeEvent.NODE_CONTEXTMENU: 
+                        //     LX.addContextMenu( event.multiple ? "Selected Nodes" : event.node.id, event.value, m => {
+                        //          
+                        //     });
+                        //     break;
+                        // case LX.TreeEvent.NODE_DRAGGED: 
+                        //     console.log(event.node.id + " is now child of " + event.value.id); 
+                        //     break;
+                    }
+                }
+            });    
+
+            this.addExplorerItem = function( item ) 
+            {
+                if( !this.explorer.data.children.find( (value, index) => value.id === item.id ) )
+                    this.explorer.data.children.push( item );
+            };
+
+            explorerArea.attach( panel );
+
+            // Update area
+            area = codeArea;
+        }
 
         this.base_area = area;
         this.area = new LX.Area( { className: "lexcodeeditor", height: "auto", no_append: true } );
 
-        this.tabs = this.area.addTabs( { onclose: (name) => delete this.openedTabs[ name ] } );
+        this.tabs = this.area.addTabs( { onclose: (name) => {
+            delete this.openedTabs[ name ];
+            if( Object.keys( this.openedTabs ).length < 2 )
+            {
+                clearInterval( this.blinker );
+                this.cursors.classList.remove('show');
+            }
+        } } );
         this.tabs.root.addEventListener( 'dblclick', (e) => {
             if( options.allow_add_scripts ?? true ) {
                 e.preventDefault();
@@ -344,7 +407,7 @@ class CodeEditor {
 
         this.useAutoComplete = options.autocomplete ?? true;
         this.highlight = options.highlight ?? 'Plain Text';
-        this.onsave = options.onsave ?? ((code) => {  });
+        this.onsave = options.onsave ?? ((code) => { console.log( code, "save" ) });
         this.onrun = options.onrun ?? ((code) => { this.runScript(code) });
         this.actions = {};
         this.cursorBlinkRate = 550;
@@ -372,17 +435,17 @@ class CodeEditor {
         // setInterval( this.scanWordSuggestions.bind( this ), 2000 );
 
         this.languages = {
-            'Plain Text': { },
-            'JavaScript': { },
-            'C++': { },
-            'CSS': { },
-            'GLSL': { },
-            'WGSL': { },
-            'JSON': { },
-            'XML': { },
-            'Python': { singleLineCommentToken: '#' },
-            'HTML': { },
-            'Batch': { blockComments: false, singleLineCommentToken: '::' }
+            'Plain Text': { ext: 'txt' },
+            'JavaScript': { ext: 'js' },
+            'C++': { ext: 'cpp' },
+            'CSS': { ext: 'css' },
+            'GLSL': { ext: 'glsl' },
+            'WGSL': { ext: 'wgsl' },
+            'JSON': { ext: 'json' },
+            'XML': { ext: 'xml' },
+            'Python': { ext: 'py', singleLineCommentToken: '#' },
+            'HTML': { ext: 'html' },
+            'Batch': { ext: 'bat', blockComments: false, singleLineCommentToken: '::' }
         };
 
         this.specialKeys = [
@@ -475,7 +538,7 @@ class CodeEditor {
             if( this.selection ) {
                 this.deleteSelection( cursor );
                 // Remove entire line when selecting with triple click
-                if(this.code.lines[ ln ] != undefined && !this.code.lines[ ln ].length) 
+                if( this._tripleClickSelection ) 
                 {
                     this.actions['Backspace'].callback( ln, cursor, e );
                     this.lineDown( cursor, true );
@@ -845,6 +908,7 @@ class CodeEditor {
 
         // Default code tab
     
+        this.loadedTabs = { };
         this.openedTabs = { };
         
         if( options.allow_add_scripts ?? true )
@@ -862,6 +926,26 @@ class CodeEditor {
         return CodeEditor.__instances;
     }
 
+    // This received key inputs from the entire document...
+    onKeyPressed( e ) {
+        
+        // Toggle visibility of the file explorer
+        if( e.key == 'b' && e.ctrlKey && this.explorer )
+        {
+            this.explorerArea.root.classList.toggle( "hidden" );
+            if( this._lastBaseareaWidth )
+            {
+                this.base_area.root.style.width = this._lastBaseareaWidth;
+                delete this._lastBaseareaWidth;
+
+            } else
+            {
+                this._lastBaseareaWidth = this.base_area.root.style.width;
+                this.base_area.root.style.width = "100%";
+            }
+        }
+    }
+
     getText( min ) {
         return this.code.lines.join(min ? ' ' : '\n');
     }
@@ -951,11 +1035,22 @@ class CodeEditor {
     loadFile( file ) {
 
         const inner_add_tab = ( text, name, title ) => {
-            const existing = this.addTab(name, true, title);
-            if( !existing )
+
+            // Set current text and language
+            const lines = text.replaceAll( '\r', '' ).split( '\n' );
+
+            // Add item in the explorer if used
+            if( this.explorer )
+            {
+                this._storedLines = this._storedLines ?? {};
+                this._storedLines[ name ] = lines;
+                this.addExplorerItem( { 'id': name, 'skipVisibility': true, 'icon': this._getFileIcon( name ) } );
+                this.explorer.frefresh( name );
+            }
+            else
             {
-                text = text.replaceAll( '\r', '' );
-                this.code.lines = text.split( '\n' );
+                this.addTab(name, true, title);
+                this.code.lines = lines;
                 this._changeLanguageFromExtension( LX.getExtension( name ) );
             }
         };
@@ -1013,6 +1108,35 @@ class CodeEditor {
         this.highlight = lang;
         this._refreshCodeInfo();
         this.processLines();
+
+        const ext = this.languages[ lang ].ext;
+        const icon = this._getFileIcon( null, ext );
+
+        // Update tab icon
+        {
+            const tab = this.tabs.tabDOMs[ this.code.tabName ];
+            tab.firstChild.remove();
+            console.assert( tab != undefined );
+            var iconEl;
+            if( icon.includes( 'fa-' ) )
+            {
+                iconEl = document.createElement( 'i' );
+                iconEl.className = icon;
+            } else {
+                iconEl = document.createElement( 'img' );
+                iconEl.src = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/" + icon;
+            }
+            tab.prepend( iconEl );
+        }
+
+        // Update explorer icon
+        if( this.explorer )
+        {
+            const item = this.explorer.data.children.filter( (v) => v.id === this.code.tabName )[ 0 ];
+            console.assert( item != undefined );
+            item.icon = icon;
+            this.explorer.frefresh( this.code.tabName );
+        }
     }
 
     _changeLanguageFromExtension( ext ) {
@@ -1083,23 +1207,40 @@ class CodeEditor {
         }
     }
 
+    _getFileIcon( name, extension ) {
+
+        const isNewTabButton = name ? ( name === '+' ) : false;
+        const ext = extension ?? LX.getExtension( name );
+        return ext == 'html' ? "fa-solid fa-code orange" : 
+            ext == "css" ? "fa-solid fa-hashtag dodgerblue" : 
+            ext == "xml" ? "fa-solid fa-rss orange" : 
+            ext == "bat" ? "fa-brands fa-windows lightblue" : 
+            [ "js", "py", "json", "cpp" ].indexOf( ext ) > -1 ? "images/" + ext + ".png" : 
+            !isNewTabButton ? "fa-solid fa-align-left gray" : undefined;
+    }
+
     _onNewTab( e ) {
 
         this.processFocus(false);
 
         LX.addContextMenu( null, e, m => {
             m.add( "Create", this.addTab.bind( this, "unnamed.js", true ) );
-            m.add( "Load", this.loadTab.bind( this, "unnamed.js", true ) );
+            m.add( "Load", this.loadTabFromFile.bind( this, "unnamed.js", true ) );
         });
     }
 
     addTab( name, selected, title ) {
         
-        if(this.openedTabs[ name ])
-        {
-            this.tabs.select( this.code.tabName );
-            return true;
-        }
+        // If already loaded, set new name...
+        const repeats = Object.keys( editor.loadedTabs ).slice( 1 ).reduce( ( v, key ) => {
+            const noRepeatName = key.replace( /[_\d+]/g, '');
+            return v + ( noRepeatName == name );
+        }, 0 );
+
+        if( repeats > 0 )
+            name = name.split( '.' ).join( '_' + repeats + '.' );
+
+        const isNewTabButton = ( name === '+' );
 
         // Create code content
         let code = document.createElement( 'div' );
@@ -1129,20 +1270,25 @@ class CodeEditor {
                 this.loadFile( e.dataTransfer.files[ i ] );
         });
 
+        this.loadedTabs[ name ] = code;
         this.openedTabs[ name ] = code;
+        
+        const tabIcon = this._getFileIcon( name );
 
-        const ext = LX.getExtension( name );
+        if( this.explorer && !isNewTabButton )
+        {
+            this.addExplorerItem( { 'id': name, 'skipVisibility': true, 'icon': tabIcon } );
+            this.explorer.frefresh( name );
+        }
 
         this.tabs.add(name, code, { 
             selected: selected, 
-            fixed: (name === '+') , 
+            fixed: isNewTabButton, 
             title: code.title, 
-            icon:   ext == 'html' ? "fa-solid fa-code orange" : 
-                    ext == 'js' ? "images/js.png" :
-                    ext == 'py' ? "images/py.png" : undefined, 
+            icon: tabIcon, 
             onSelect: (e, tabname) => {
 
-                if(tabname == '+')
+                if( isNewTabButton )
                 {
                     this._onNewTab( e );
                     return;
@@ -1150,7 +1296,7 @@ class CodeEditor {
 
                 var cursor = cursor ?? this.cursors.children[ 0 ];
                 this.saveCursor( cursor, this.code.cursorState );    
-                this.code = this.openedTabs[ tabname ];
+                this.code = this.loadedTabs[ tabname ];
                 this.restoreCursor( cursor, this.code.cursorState );    
                 this.endSelection();
                 this._changeLanguageFromExtension( LX.getExtension( tabname ) );
@@ -1170,9 +1316,77 @@ class CodeEditor {
             this.processLines();
             doAsync( () => this._refreshCodeInfo( 0, 0 ), 50 );
         }
+
+        // Bc it could be overrided..
+        return name;
+    }
+
+    loadTab( name ) {
+
+        // Already open...
+        if( this.openedTabs[ name ] )
+        {
+            this.tabs.select( name );
+            return;
+        }
+
+        let code = this.loadedTabs[ name ]
+
+        if( !code )
+        {
+            this.addTab( name, true );
+            // Unload lines from file...
+            if( this._storedLines[ name ] )
+            {
+                this.code.lines = this._storedLines[ name ];
+                delete this._storedLines[ name ];
+            }
+            this._changeLanguageFromExtension( LX.getExtension( name ) );
+            return;
+        }
+
+        this.openedTabs[ name ] = code;
+        
+        const isNewTabButton = ( name === '+' );
+        const tabIcon = this._getFileIcon( name );
+
+        this.tabs.add(name, code, { 
+            selected: true, 
+            fixed: isNewTabButton, 
+            title: code.title, 
+            icon: tabIcon, 
+            onSelect: (e, tabname) => {
+
+                if( isNewTabButton )
+                {
+                    this._onNewTab( e );
+                    return;
+                }
+
+                var cursor = cursor ?? this.cursors.children[ 0 ];
+                this.saveCursor( cursor, this.code.cursorState );    
+                this.code = this.loadedTabs[ tabname ];
+                this.restoreCursor( cursor, this.code.cursorState );    
+                this.endSelection();
+                this._changeLanguageFromExtension( LX.getExtension( tabname ) );
+                this._refreshCodeInfo( cursor.line, cursor.position );
+            }
+        });
+
+        // Move into the sizer..
+        this.codeSizer.appendChild( code );
+        
+        this.endSelection();
+
+        // Select as current...
+        this.code = code;  
+        this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
+        this.processLines();
+        this._changeLanguageFromExtension( LX.getExtension( name ) );
+        doAsync( () => this._refreshCodeInfo( 0, 0 ), 50 );
     }
 
-    loadTab() {
+    loadTabFromFile() {
         const input = document.createElement( 'input' );
         input.type = 'file';
         document.body.appendChild( input );
@@ -1270,6 +1484,7 @@ class CodeEditor {
                     this.resetCursorPos( CodeEditor.CURSOR_LEFT );
                     e._shiftKey = true;
                     this.actions['End'].callback(cursor.line, cursor, e);
+                    this._tripleClickSelection = true;
                     break;
             }
         }
@@ -1571,7 +1786,6 @@ class CodeEditor {
         if( this.selection )
         {
             this.actions['Backspace'].callback(lidx, cursor, e);
-            lidx = cursor.line; // Update this, since it's from the old code
         }
 
         // Append key
@@ -2286,6 +2500,7 @@ class CodeEditor {
         this.selections.classList.remove('show');
         this.selections.innerHTML = "";
         delete this.selection;
+        delete this._tripleClickSelection;
     }
 
     cursorToRight( key, cursor ) {

package/build/lexgui.css

@@ -17,12 +17,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 +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%;
@@ -187,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;
@@ -1412,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;
 }
@@ -2697,9 +2736,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 +2748,7 @@ ul.lexassetscontent {
   height: 12px;
   margin-right: 4px;
   vertical-align: middle;
+  margin-top: -2px;
 }
 
 .lexcodeeditor ::-webkit-scrollbar {
@@ -2830,10 +2872,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+ */

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.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 )
@@ -1604,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"] );
                 }
             });
@@ -1617,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
@@ -1646,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 ];
@@ -2388,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
@@ -2445,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();
@@ -2492,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();
                 }
@@ -2520,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');
@@ -2671,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 );
         }
     }
 
@@ -5852,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) {
@@ -5999,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);
@@ -6015,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;

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.18",
+    version: "0.1.19",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -20,6 +20,13 @@ LX.MOUSE_TRIPLE_CLICK = 3;
 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);
@@ -254,7 +261,16 @@ function create_global_searchbar( root ) {
             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 );
+                }
         }
     });
 
@@ -339,17 +355,23 @@ function create_global_searchbar( root ) {
             const instances = LX.CodeEditor.getInstances();
             if(!instances.length) return;
 
-            const languages = Object.keys( instances[0].languages );
+            const languages = instances[ 0 ].languages;
+
+            for( let l of Object.keys( languages ) ) {
 
-            for( let l of languages ) {
+                const key = "Language: " + l;
+                const icon = instances[ 0 ]._getFileIcon( null, languages[ l ].ext );
 
-                const key = "Set language: " + l;
-                if( key.toLowerCase().includes(filter) ) {
-                    add_element(key, () => {
+                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 );
                         }
-                    }, "", {});
+                    }, "", {} );
                 }
             }
         }
@@ -1351,14 +1373,14 @@ class Area {
 
     _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;
@@ -1367,29 +1389,30 @@ class Area {
             // 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.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.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 )
@@ -1600,9 +1623,7 @@ class Tabs {
         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"] );
             }
         });
@@ -1613,7 +1634,7 @@ class Tabs {
                 e.preventDefault();
                 return;
             } 
-            e.dataTransfer.setData("source", e.target.id);
+            e.dataTransfer.setData( "source", e.target.id );
         });
         
         // Attach content
@@ -1642,6 +1663,9 @@ class Tabs {
         if(!tabEl || tabEl.fixed)
         return;
 
+        if( this.onclose )
+            this.onclose( name );
+
         // Delete tab element
         this.tabDOMs[ name ].remove();
         delete this.tabDOMs[ name ];
@@ -2384,22 +2408,33 @@ class NodeTree {
 
         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
@@ -2441,16 +2476,19 @@ class NodeTree {
             }
         });
 
-        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();
@@ -2488,7 +2526,7 @@ class NodeTree {
             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();
             }
@@ -2516,10 +2554,10 @@ class NodeTree {
                     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');
+                list.querySelector("#" + node.id).classList.add('selected');
             }
             if(e.key == 'Escape') {
                 delete node.rename;
@@ -2667,21 +2705,21 @@ class NodeTree {
         }
     }
 
-    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 );
     }
 }
 
@@ -5848,7 +5886,7 @@ class ContextMenu {
         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) {
@@ -5995,7 +6033,7 @@ class ContextMenu {
         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);
@@ -6011,11 +6049,6 @@ class ContextMenu {
 
         this.colors[ token ] = color;
     }
-
-    _getSupportedDOMName( key ) {
-        return key.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_');
-    }
-
 };
 
 LX.ContextMenu = ContextMenu;

package/examples/code_editor.html

@@ -24,47 +24,53 @@
         let area = LX.init();
 
         // split main area
-        var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
+        // var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
 
         // add canvas to leftArea
-        var canvas = document.createElement('canvas');
-        canvas.id = "mycanvas";
-        canvas.width = leftArea.root.clientWidth;
-        canvas.height = leftArea.root.clientHeight;
-        canvas.style.width = "100%";
-        canvas.style.height = "100%";
-        leftArea.attach( canvas );
+        // var canvas = document.createElement('canvas');
+        // canvas.id = "mycanvas";
+        // canvas.width = leftArea.root.clientWidth;
+        // canvas.height = leftArea.root.clientHeight;
+        // canvas.style.width = "100%";
+        // canvas.style.height = "100%";
+        // leftArea.attach( canvas );
 
         // add on resize event to control canvas size
-        leftArea.onresize = function( bounding ) {
-            canvas.width = bounding.width;
-            canvas.height = bounding.height;
-        };
+        // leftArea.onresize = function( bounding ) {
+        //     canvas.width = bounding.width;
+        //     canvas.height = bounding.height;
+        // };
 
-        let editor = new LX.CodeEditor(rightArea, {
+        let editor = new LX.CodeEditor(area, {
             // allow_add_scripts: false,
             // autocomplete: false,
-            // disable_edition: true
+            // disable_edition: true,
+            file_explorer: true
         });
 
-        editor.loadFile( "../demo.js" );
+        editor.loadFile( "../data/test.json" );
+        editor.loadFile( "../data/style.css" );
+        editor.loadFile( "../data/engine.cpp" );
+        editor.loadFile( "../data/script.js" );
+        editor.loadFile( "../data/xml_test.xml" );
+        editor.loadFile( "../localhost.bat" );
         
-        var ctx = canvas.getContext("2d");
-        ctx.fillStyle = "#b7a9b1";
-        ctx.font = "48px Monospace";
-        ctx.strokeStyle = "#ff1999";
+        // var ctx = canvas.getContext("2d");
+        // ctx.fillStyle = "#b7a9b1";
+        // ctx.font = "48px Monospace";
+        // ctx.strokeStyle = "#ff1999";
 
-        function loop(dt) {
+        // function loop(dt) {
             
-            var ctx = canvas.getContext("2d");
+        //     var ctx = canvas.getContext("2d");
 
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            ctx.strokeText("Lexgui.js @jxarco", 200, 300);
+        //     ctx.fillRect(0, 0, canvas.width, canvas.height);
+        //     ctx.strokeText("Lexgui.js @jxarco", 200, 300);
 
-            requestAnimationFrame(loop);
-        }
+        //     requestAnimationFrame(loop);
+        // }
 
-        requestAnimationFrame(loop);
+        // requestAnimationFrame(loop);
 
     </script>
 </html>

package/package.json

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