lexgui 0.1.18 → 0.1.20

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.18",
+    version: "0.1.20",
     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 )
@@ -1594,15 +1617,22 @@ class Tabs {
                 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"] );
             }
         });
@@ -1613,7 +1643,7 @@ class Tabs {
                 e.preventDefault();
                 return;
             } 
-            e.dataTransfer.setData("source", e.target.id);
+            e.dataTransfer.setData( "source", e.target.id );
         });
         
         // Attach content
@@ -1642,6 +1672,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 ];
@@ -2140,8 +2173,8 @@ class Widget {
 
     set( value ) {
 
-        if(this.onSetValue)
-            this.onSetValue(value);
+        if( this.onSetValue )
+            this.onSetValue( value );
     }
 
     oncontextmenu(e) {
@@ -2384,22 +2417,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 +2485,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 +2535,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 +2563,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 +2714,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 );
     }
 }
 
@@ -3513,6 +3560,15 @@ class Panel {
     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');
@@ -5848,7 +5904,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 +6051,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 +6067,6 @@ class ContextMenu {
 
         this.colors[ token ] = color;
     }
-
-    _getSupportedDOMName( key ) {
-        return key.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_');
-    }
-
 };
 
 LX.ContextMenu = ContextMenu;

package/changelog.md

@@ -0,0 +1,15 @@
+# lexgui.js changelog
+
+## 0.1.20
+
+Active line is now hightlighted.
+Using CommitMono font (https://commitmono.com/) as the font for the Code Editor. 
+Added "Rust" syntax highlighting. 
+Improved all code selections (and some bugs fixed).
+Block comments are now working again (with bugs probably). 
+Minor fixes.
+
+## 0.1.19
+
+Add file explorer to Code Editor component. 
+Minor fixes.

package/examples/code_editor.html

@@ -23,48 +23,63 @@
         // init library and get main area
         let area = LX.init();
 
-        // split main area
-        var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
+        const file_explorer = false;
 
-        // 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 );
+        if( !file_explorer )
+        {
+            var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
+
+            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, {
+            area = rightArea;
+        }
+
+        let editor = new LX.CodeEditor(area, {
             // allow_add_scripts: false,
             // autocomplete: false,
-            // disable_edition: true
+            // disable_edition: true,
+            file_explorer: file_explorer
         });
 
-        editor.loadFile( "../demo.js" );
+        editor.loadFile( "../data/js_sample.js" );
+        // editor.loadFile( "../data/json_sample.json" );
+        // editor.loadFile( "../data/css_sample.css" );
+        // editor.loadFile( "../data/cpp_sample.cpp" );
+        // editor.loadFile( "../data/xml_sample.xml" );
+        // editor.loadFile( "../data/python_sample.py" );
+        // editor.loadFile( "../data/rust_sample.rs" );
+        // editor.loadFile( "../localhost.bat" );
         
-        var ctx = canvas.getContext("2d");
-        ctx.fillStyle = "#b7a9b1";
-        ctx.font = "48px Monospace";
-        ctx.strokeStyle = "#ff1999";
-
-        function loop(dt) {
-            
+        if( !file_explorer )
+        {
             var ctx = canvas.getContext("2d");
+            ctx.fillStyle = "#b7a9b1";
+            ctx.font = "48px Monospace";
+            ctx.strokeStyle = "#ff1999";
+
+            function loop(dt) {
+                
+                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);
-
     </script>
 </html>

package/examples/index.html

@@ -49,8 +49,7 @@
             'Code Editor',
             'Dialogs',
             'Immediate UI',
-            'Node Graph',
-            'Overlay Area'
+            'Node Graph'
         ];
 
         let panel = leftArea.addPanel({ className: "lexexamplespanel" });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lexgui",
-    "version": "0.1.18",
+    "version": "0.1.20",
     "description": "JS library to create web graphical user interfaces",
     "type": "module",
     "main": "./build/lexgui.js",
@@ -15,6 +15,7 @@
       "examples",
       "LICENSE",
       "package.json",
+      "changelog.md",
       "README.md",
       "demo.js"
     ],

package/examples/overlay_area.html

@@ -1,61 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-    <title>LexGUI Overlay Timeline Demo</title>
-    <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
-    <script type="importmap">
-        {
-          "imports": {
-            "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
-          }
-        }
-    </script>  
-</head>
-<body></body>
-    <script type="module">
-
-        import { LX } from 'lexgui';
-        import 'lexgui/components/timeline.js';
-
-        // init library and get main area
-        let area = LX.init();
-       
-        // add canvas
-        var canvas = document.createElement('canvas');
-        canvas.id = "mycanvas";
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight
-        canvas.style.width = "100%";
-        canvas.style.height = "100%";
-        area.attach( canvas );
-        
-        let timeline = new LX.KeyFramesTimeline("kf-timeline", {opacity: 0.8});
-        // timeline.setSelectedItems(["Item 1", "Item 2", "Item 3"]);
-        // timeline.setAnimationClip({tracks: [{name: "Item 1.position", values: [0,1,0, 1], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 1.scale", values: [0,1,0, 0.5], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 2", values: [0,1,0,1], times: [0.1, 0.2, 0.3, 0.8]}, {name: "Item 3.position", values: [0,1,0], times: [0, 0.1, 0.2, 0.3]}, {name: "Item 3.scale", values: [0,1,0], times: [0, 0.1, 0.2, 0.3]}], duration: 1});
-        let timelinearea = new LX.Area({ height: 400, overlay:"bottom", resize: true});
-        timelinearea.attach(timeline.root);
-
-        timelinearea.onresize = (bounding) => {timeline.resize( [ bounding.width, bounding.height ] );}
-        area.attach(timelinearea)
-        
-        timeline.draw(0);
-
-        function loop(dt) {
-            
-            var ctx = canvas.getContext("2d");
-            ctx.fillStyle = "cyan";
-            ctx.fillRect(0,0,1000,800);
-            ctx.fillStyle = "black";
-            ctx.font = "bold 48px serif"
-            ctx.fillText("Overlay timeline area", 400, 400);
-            timeline.draw();
-
-            requestAnimationFrame(loop);
-        }
-
-        requestAnimationFrame(loop);
-    </script>
-</html>