lexgui 0.1.17 → 0.1.19

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.17",
+    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 ) ) {
+
+                const key = "Language: " + l;
+                const icon = instances[ 0 ]._getFileIcon( null, languages[ l ].ext );
 
-            for( let l of languages ) {
+                let value = icon.includes( 'fa-' ) ? "<i class='" + icon + "'></i>" :
+                        "<img src='" + ( "https://raw.githubusercontent.com/jxarco/lexgui.js/master/" + icon ) + "'>";
 
-                const key = "Set language: " + l;
-                if( key.toLowerCase().includes(filter) ) {
-                    add_element(key, () => {
+                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 )
@@ -1537,11 +1560,23 @@ class Tabs {
         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;
@@ -1588,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"] );
             }
         });
@@ -1601,7 +1634,7 @@ class Tabs {
                 e.preventDefault();
                 return;
             } 
-            e.dataTransfer.setData("source", e.target.id);
+            e.dataTransfer.setData( "source", e.target.id );
         });
         
         // Attach content
@@ -1630,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 ];
@@ -2372,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
@@ -2429,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();
@@ -2476,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();
             }
@@ -2504,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;
@@ -2655,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 );
     }
 }
 
@@ -5836,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) {
@@ -5983,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);
@@ -5999,11 +6049,6 @@ class ContextMenu {
 
         this.colors[ token ] = color;
     }
-
-    _getSupportedDOMName( key ) {
-        return key.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_');
-    }
-
 };
 
 LX.ContextMenu = ContextMenu;

package/demo.js

@@ -487,7 +487,7 @@ function fillPanel( panel ) {
     panel.sameLine(2);
     panel.addFile("Img1", data => { console.log(data) }, {} );
     panel.addFile("Img2", data => { console.log(data) }, {} );
-    panel.addDropdown("Best Engine", ["Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot","Godot", "Unity", "Unreal Engine"], "Unity", (value, event) => {
+    panel.addDropdown("Best Engine", ["Godot", "Unity", "Unreal Engine"], "Unity", (value, event) => {
         console.log(value);
     });
 

package/examples/code_editor.html

@@ -24,59 +24,53 @@
         let area = LX.init();
 
         // split main area
-        var [leftArea, rightArea] = area.split({ sizes:["40%","60%"] });
+        // 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( "../data/test.json" );
-        // editor.loadFile( "../data/style.css" );
-        // editor.loadFile( "../data/script.js" );
-        // editor.loadFile( "../data/engine.cpp" );
-        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 button = document.createElement('button');
-        // button.value = "CLICK ME";
-        // button.style.width = "100px";
-        // button.style.height = "100px";
-        // button.style.position = "absolute";
-        // button.onclick = editor.processLines.bind(editor);
-        // document.body.appendChild( button );
+        // 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.17",
+    "version": "0.1.19",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",