lexgui 0.1.26 → 0.1.28

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.26",
+    version: "0.1.28",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -138,24 +138,35 @@ class vec2 {
     set ( x, y ) { this.x = x; this.y = y; }
     add ( v, v0 = new vec2() ) { v0.set( this.x + v.x, this.y + v.y ); return v0; }
     sub ( v, v0 = new vec2() ) { v0.set( this.x - v.x, this.y - v.y ); return v0; }
-    mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2(v) } v = v0.set( this.x * v.x, this.y * v.y ); return v0; }
-    div ( v, v0 = new vec2() ) { v0.set( this.x / v.x, this.y / v.y ); return v0; }
+    mul ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x * v.x, this.y * v.y ); return v0; }
+    div ( v, v0 = new vec2() ) { if( v.constructor == Number ) { v = new vec2( v ) } v0.set( this.x / v.x, this.y / v.y ); return v0; }
 };
 
 LX.vec2 = vec2;
 
 // Other utils
 
-function makeDraggable( domEl, targetClass ) {
+function makeDraggable( domEl, options = { } ) {
 
     let offsetX;
     let offsetY;
     let currentTarget = null;
+    let targetClass = options.targetClass;
+
+    const moveFunc = (e) => {
+        if(!currentTarget) return;
+        let left = e.clientX - offsetX;
+        let top = e.clientY - offsetY;
+        if(left > 3 && (left + domEl.offsetWidth + 6) <= window.innerWidth)
+            domEl.style.left = left + 'px';
+        if(top > 3 && (top + domEl.offsetHeight + 6) <= window.innerHeight)
+            domEl.style.top = top + 'px';
+    };
+
+    let onMove = options.onMove ?? moveFunc;
 
     domEl.setAttribute('draggable', true);
     domEl.addEventListener("mousedown", function(e) {
-        // e.stopPropagation();
-        // e.stopImmediatePropagation();
         currentTarget = (e.target.classList.contains(targetClass) || !targetClass) ? e.target : null;
     });
 
@@ -172,23 +183,13 @@ function makeDraggable( domEl, targetClass ) {
         const rect = e.target.getBoundingClientRect();
         offsetX = e.clientX - rect.x;
         offsetY = e.clientY - rect.y;
-        document.addEventListener("mousemove", moveFunc );
+        document.addEventListener("mousemove", onMove );
     }, false);
     
-    const moveFunc = (e) => {
-        if(!currentTarget) return;
-        let left = e.clientX - offsetX;
-        let top = e.clientY - offsetY;
-        if(left > 3 && (left + domEl.offsetWidth + 6) <= window.innerWidth)
-            domEl.style.left = left + 'px';
-        if(top > 3 && (top + domEl.offsetHeight + 6) <= window.innerHeight)
-            domEl.style.top = top + 'px';
-    };
-
     document.addEventListener('mouseup', () => {
         if(currentTarget) {
             currentTarget = null;
-            document.removeEventListener("mousemove", moveFunc );
+            document.removeEventListener("mousemove", onMove );
         }
     });
 }
@@ -294,6 +295,7 @@ function create_global_searchbar( root ) {
     }
 
     const add_element = (t, c, p, i) => {
+
         if(!t.length) return;
 
         if(ref_previous) ref_previous.classList.remove('last');
@@ -329,15 +331,20 @@ function create_global_searchbar( root ) {
 
     const propagate_add = ( item, filter, path ) => {
 
-        const key = Object.keys(item)[0];
-        if( (path + key).toLowerCase().includes(filter) ) {
-            if(item.callback)
-                add_element(key, item.callback, path, item);
+        const key = Object.keys( item )[ 0 ];
+        let name = item.name ?? path + key;
+        if( name.toLowerCase().includes( filter ) ) {
+            if( item.callback )
+                add_element( item.name ?? key, item.callback, path, item );
         }
 
+        // is sidebar..
+        if( item.name )
+        return;
+
         path += key + " > ";
 
-        for( let c of item[key] )
+        for( let c of item[ key ] )
             propagate_add( c, filter, path );
     };
 
@@ -347,7 +354,7 @@ function create_global_searchbar( root ) {
 
         for( let m of LX.menubars )
             for( let i of m.items ) {
-                propagate_add( i, filter, "");
+                propagate_add( i, filter, "" );
             }
 
         if( LX.has('CodeEditor') )
@@ -865,7 +872,7 @@ class Area {
         }
 
         // Create areas
-        var area1 = new Area({ no_append: true, className: "split" + (options.menubar ? "" : " origin") });
+        var area1 = new Area({ no_append: true, className: "split" + (options.menubar || options.sidebar ? "" : " origin") });
         var area2 = new Area({ no_append: true, className: "split"});
 
         area1.parentArea = this;
@@ -1186,25 +1193,40 @@ class Area {
     addMenubar( callback, options = {} ) {
         
         let menubar = new Menubar(options);
-        LX.menubars.push( menubar );
 
         if(callback) callback( menubar );
 
-        // Hack to get content height
-        // let d = document.createElement('div');
-        // d.appendChild(menubar.root);
-        // document.body.appendChild(d);
-        // const height = menubar.root.clientHeight;
-        // d.remove();
+        LX.menubars.push( menubar );
+
         const height = 48; // pixels
 
         const [bar, content] = this.split({type: 'vertical', sizes: [height, null], resize: false, menubar: true});
         bar.attach( menubar );
         bar.is_menubar = true;
-        window.content = content;
         return menubar;
     }
 
+    /**
+     * @method addSidebar
+     * @param {Function} callback Function to fill the sidebar
+     */
+
+    addSidebar( callback, options = {} ) {
+
+        let sidebar = new SideBar( options );
+
+        if( callback ) callback( sidebar );
+
+        LX.menubars.push( sidebar );
+
+        const width = 64; // pixels
+
+        const [bar, content] = this.split( { type: 'horizontal', sizes: [ width, null ], resize: false, sidebar: true } );
+        bar.attach( sidebar );
+        bar.is_sidebar = true;
+        return sidebar;
+    }
+
     /**
      * @method addOverlayButtons
      * @param {Array} buttons Buttons info
@@ -1778,7 +1800,7 @@ class Menubar {
             let entry = document.createElement('div');
             entry.className = "lexmenuentry";
             entry.id = pKey;
-            entry.innerText = key;
+            entry.innerHTML = "<span>" + key + "</span>";
             if(options.position == "left") {	
                 this.root.prepend( entry );	
             }	
@@ -1802,7 +1824,7 @@ class Menubar {
                 var rect = c.getBoundingClientRect();
                 contextmenu.style.left = (isSubMenu ? rect.width : rect.left) + "px";
                 // Entries use css to set top relative to parent
-                contextmenu.style.top = (isSubMenu ? 0 : rect.bottom) + "px";
+                contextmenu.style.top = (isSubMenu ? 0 : rect.bottom - 4) + "px";
                 c.appendChild( contextmenu );
 
                 contextmenu.focus();
@@ -1928,11 +1950,16 @@ class Menubar {
                     return;
                 } 
 
-                this.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
+                // Manage selected
+                this.root.querySelectorAll(".lexmenuentry").forEach( e => e.classList.remove( 'selected' ) );
+                entry.classList.add( "selected" );
+
+                this.root.querySelectorAll(".lexcontextmenu").forEach( e => e.remove() );
                 create_submenu( item, key, entry, -1 );
             });
 
             entry.addEventListener("mouseleave", () => {
+                this.root.querySelectorAll(".lexmenuentry").forEach( e => e.classList.remove( 'selected' ) );
                 this.root.querySelectorAll(".lexcontextmenu").forEach(e => e.remove());
             });
         }
@@ -2120,6 +2147,83 @@ class Menubar {
 
 LX.Menubar = Menubar;
 
+/**
+ * @class SideBar
+ */
+
+class SideBar {
+
+    constructor( options = {} )  {
+
+        this.root = document.createElement( 'div' );
+        this.root.className = "lexsidebar";
+
+        this.footer = document.createElement( 'div' );
+        this.footer.className = "lexsidebarfooter";
+        this.root.appendChild( this.footer );
+
+        this.items = [ ];
+    }
+
+    /**
+     * @method add
+     * @param {*} options:
+     * callback: Function to call on each item
+     * bottom: Bool to set item at the bottom as helper button (not selectable)
+     */
+
+    add( key, options = {} ) {
+
+        if( options.constructor == Function )
+            options = { callback: options };
+
+        let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
+
+        if( this.items.findIndex( (v, i) => v.key == pKey ) > -1 )
+        {
+            console.warn( `'${key}' already created in Sidebar` );
+            return;
+        }
+
+        let entry = document.createElement( 'div' );
+        entry.className = "lexsidebarentry";
+        entry.id = pKey;
+        entry.title = key;
+
+        if( options.bottom )
+        {
+            this.footer.appendChild( entry );
+        }else
+        {
+            this.root.appendChild( entry );
+        }
+
+        // Reappend footer in root
+        this.root.appendChild( this.footer );
+
+        let button = document.createElement( 'button' );
+        button.innerHTML = "<i class='"+ (options.icon ?? "") + "'></i>";
+        entry.appendChild( button );
+
+        entry.addEventListener("click", () => {
+
+            const f = options.callback;
+            if( f ) f.call( this, key, entry );
+
+            // Manage selected
+            if( !options.bottom )
+            {
+                this.root.querySelectorAll(".lexsidebarentry").forEach( e => e.classList.remove( 'selected' ) );
+                entry.classList.add( "selected" );
+            }
+        });
+
+        this.items.push( { name: pKey, domEl: entry, callback: options.callback } );
+    }
+};
+
+LX.SideBar = SideBar;
+
 /**
  * @class Widget
  */
@@ -3012,6 +3116,9 @@ class Panel {
             if( options.width ) {
                 element.style.width = element.style.minWidth = options.width;
             }
+            if( options.maxWidth ) {
+                element.style.maxWidth = options.maxWidth;
+            }
             if( options.minWidth ) {
                 element.style.minWidth = options.minWidth;
             }
@@ -3841,7 +3948,7 @@ class Panel {
 
         // Add dropdown widget button  
         let buttonName = value;
-        buttonName += "<a class='fa-solid fa-angle-down' style='float:right; margin-right: 6px;'></a>";
+        buttonName += "<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>";
 
         this.queue(container);
 
@@ -3854,7 +3961,7 @@ class Panel {
             let rect = event.currentTarget.getBoundingClientRect();
             let y_pos = container.classList.contains('lexdialog') ? rect.top - 5 + rect.height : rect.y + rect.height - 5;
             element.querySelector(".lexoptions").style.top = y_pos + 'px';
-            element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 2 + 'px';
+            element.querySelector(".lexoptions").style.width = (event.currentTarget.clientWidth) + 'px';
             element.querySelector(".lexoptions").toggleAttribute('hidden');
             list.focus();
         }, { buttonClass: 'array', skipInlineCount: true });
@@ -3870,24 +3977,24 @@ class Panel {
                 selectedOption.querySelector("span").innerHTML = selectedOption.querySelector("span").innerHTML.replaceAll(selectedOption.querySelector("span").innerText, v); 
         }
 
-        //Add dropdown options container
-        let list = document.createElement('ul');
+        // Add dropdown options container
+        let list = document.createElement( 'ul' );
         list.tabIndex = -1;
         list.className = "lexoptions";
         list.hidden = true;
 
-        list.addEventListener('focusout', function(e) {
+        list.addEventListener( 'focusout', function( e ) {
             e.stopPropagation();
             e.stopImmediatePropagation();
-            if(e.relatedTarget === selectedOption.querySelector("button")) {
+            if(e.relatedTarget === selectedOption.querySelector( 'button' )) {
                 this.unfocus_event = true;
-                setTimeout(() => delete this.unfocus_event, 200);
-            } else if (e.relatedTarget && e.relatedTarget.tagName == "INPUT") {
+                setTimeout( () => delete this.unfocus_event, 200 );
+            } else if ( e.relatedTarget && e.relatedTarget.tagName == "INPUT" ) {
                 return;
-            }else if (e.target.id == 'input-filter') {
+            }else if ( e.target.id == 'input-filter' ) {
                 return;
             }
-            this.toggleAttribute('hidden', true);
+            this.toggleAttribute( 'hidden', true );
         });
 
         // Add filter options
@@ -4184,7 +4291,7 @@ class Panel {
 
         // Add dropdown array button
 
-        const itemNameWidth = "3%";
+        const itemNameWidth = "4%";
 
         var container = document.createElement('div');
         container.className = "lexarray";
@@ -4192,7 +4299,7 @@ class Panel {
         
         this.queue( container );
 
-        const angle_down = `<a class='fa-solid fa-angle-down' style='float:right; margin-right: 6px;'></a>`;
+        const angle_down = `<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>`;
 
         let buttonName = "Array (size " + values.length + ")";
         buttonName += angle_down;
@@ -4260,7 +4367,7 @@ class Panel {
             }
 
             buttonName = "Add item";
-            buttonName += "<a class='fa-solid fa-plus' style='float:right; margin-right: 6px; margin-top: 2px;'></a>";
+            buttonName += "<a class='fa-solid fa-plus' style='float:right; margin-right: 3px; margin-top: 2px;'></a>";
             this.addButton(null, buttonName, (v, event) => {
                 values.push( "" );
                 updateItems();
@@ -4779,6 +4886,7 @@ class Panel {
             doc.addEventListener("mouseup",inner_mouseup);
             lastY = e.pageY;
             document.body.classList.add('nocursor');
+            document.body.classList.add('noevents');
             drag_icon.classList.remove('hidden');
         }
 
@@ -4803,6 +4911,7 @@ class Panel {
             doc.removeEventListener("mousemove",inner_mousemove);
             doc.removeEventListener("mouseup",inner_mouseup);
             document.body.classList.remove('nocursor');
+            document.body.classList.remove('noevents');
             drag_icon.classList.add('hidden');
         }
         
@@ -4949,6 +5058,7 @@ class Panel {
                 doc.addEventListener("mouseup",inner_mouseup);
                 lastY = e.pageY;
                 document.body.classList.add('nocursor');
+                document.body.classList.add('noevents');
                 drag_icon.classList.remove('hidden');
             }
 
@@ -4981,6 +5091,7 @@ class Panel {
                 doc.removeEventListener("mousemove",inner_mousemove);
                 doc.removeEventListener("mouseup",inner_mouseup);
                 document.body.classList.remove('nocursor');
+                document.body.classList.remove('noevents');
                 drag_icon.classList.add('hidden');
             }
             
@@ -5710,8 +5821,8 @@ class Dialog {
         this.root = root;
         this.title = titleDiv;
 
-        if(draggable)
-            makeDraggable( root, 'lexdialogtitle' );
+        if( draggable )
+            makeDraggable( root, { targetClass: 'lexdialogtitle' } );
 
         // Process position and size
         if(size.length && typeof(size[0]) != "string")
@@ -6127,8 +6238,8 @@ class Curve {
         element.style.minHeight = "50px";
         element.style.width = options.width || "100%";
 
-        element.bgcolor = options.bgcolor || "#15181c";
-        element.pointscolor = options.pointscolor || "#7b8ae2";
+        element.bgcolor = options.bgcolor || LX.getThemeColor("global-dark-background");
+        element.pointscolor = options.pointscolor || LX.getThemeColor("global-selected-light");
         element.linecolor = options.linecolor || "#555";
 
         element.value = value || [];

package/changelog.md

@@ -1,5 +1,23 @@
 # lexgui.js changelog
 
+## 0.1.28
+
+GraphEditor:
+- Big refactor. Almost start from scratch.
+
+Support for adding big icons Sidebars.
+General CSS fixes and improvements.
+
+## 0.1.27
+
+Code Editor:
+- Tab key follows fixed 4 space layout indentation.
+- Support for removing indentation using "Shift+Tab".
+- Support for changing number of tab spaces from the info panel.
+- Minor bugfixes.
+
+Support "maxWidth" as options when creating a widget.
+
 ## 0.1.26
 
 Code Editor:

package/demo.js

@@ -491,7 +491,7 @@ function fillPanel( panel ) {
         console.log(value);
     });
 
-    panel.addDropdown("Best Logo", [{value:"Godot", src: "https://pbs.twimg.com/profile_images/1631591220630757377/nKSCjeS3_400x400.png"}, {value: "Unity", src: "https://logos-world.net/wp-content/uploads/2023/01/Unity-Logo.png"}, {value:"Unreal Engine", src: "https://cdn2.unrealengine.com/ue-logo-stacked-unreal-engine-w-677x545-fac11de0943f.png"}], "Godot", (value, event) => {
+    panel.addDropdown("Best Logo", [{value:"Godot", src: "https://godotengine.org/assets/press/logo_vertical_color_light.webp"}, {value: "Unity", src: "https://logos-world.net/wp-content/uploads/2023/01/Unity-Logo.png"}, {value:"Unreal Engine", src: "https://cdn2.unrealengine.com/ue-logo-stacked-unreal-engine-w-677x545-fac11de0943f.png"}], "Godot", (value, event) => {
         console.log(value);
     }, {filter: true});
 

package/examples/code_editor.html

@@ -2,7 +2,6 @@
 <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" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>LexGUI Code Editor Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
     <link rel="icon" href="../images/icon.png">
@@ -21,16 +20,14 @@
         import { LX } from 'lexgui';
         import 'lexgui/components/codeeditor.js';
 
-        window.LX = LX;
-        
         // init library and get main area
         let area = LX.init();
 
-        const file_explorer = false;
+        const file_explorer = true;
 
         if( !file_explorer )
         {
-            var [leftArea, rightArea] = area.split({ sizes:["40%","60%"] });
+            var [leftArea, rightArea] = area.split({ sizes:["55%","45%"] });
 
             var canvas = document.createElement('canvas');
             canvas.id = "mycanvas";
@@ -56,13 +53,13 @@
         });
 
         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" );
+        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" );
         
         if( !file_explorer )
         {

package/examples/index.html

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

package/examples/node_graph.html

@@ -41,11 +41,11 @@
             canvas.height = bounding.height;
         };
 
-        let graph_canvas = new LX.GraphCanvas(bottomArea, {
-            // allow_add_scripts: false
-        });
+        let graph_editor = new LX.GraphEditor( bottomArea, {
+           
+        } );
 
-        graph_canvas.setGraph( new LX.Graph() );
+        graph_editor.setGraph( new LX.Graph() );
 
         function loop(dt) {
             

package/examples/side_bar.html

@@ -0,0 +1,80 @@
+<!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 Area Tabs 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/codeeditor.js';
+
+        // init library and get main area
+        let area = LX.init();
+
+        area.root.style.width = "100%";
+        area.root.style.height = "100%";
+
+        function hide( el ) {
+            el.style.display = 'none';
+        }
+
+        function show( el ) {
+            el.style.display = 'block';
+        }
+
+        area.addSidebar( m => {
+            m.add( "Scene", { icon: "fa fa-cube", callback: () => { codeArea.hide(); show( canvas ); } } );
+            m.add( "Code", { icon: "fa fa-code", callback: () => { hide( canvas ); codeArea.show(); } } );
+
+            m.add( "Search", { icon: "fa fa-search", bottom: true, callback: () => { } } );
+        });
+        
+        let codeArea = new LX.Area( { width: "100%", height: "100%" } );
+        let editor = new LX.CodeEditor( codeArea );
+        editor.loadFile( "../data/js_sample.js" );
+
+        // add canvas to left upper part
+        var canvas = document.createElement('canvas');
+        canvas.id = "mycanvas";
+        canvas.width = area.root.clientWidth;
+        canvas.height = area.root.clientHeight;
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+
+        area.attach( canvas );
+        area.attach( codeArea );
+
+        function loop(dt) {
+            
+            var ctx = canvas.getContext("2d");
+
+            ctx.fillStyle =  "#def698";
+
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.font = "44px Monospace";
+
+            ctx.fillStyle = "#f13523";
+
+            const text = "lexgui @jxarco";
+            const pos2D = [200, 200];
+            ctx.fillText(text, pos2D[0], pos2D[1]);
+
+            requestAnimationFrame(loop);
+        }
+
+        requestAnimationFrame(loop);
+
+    </script>
+</html>

package/package.json

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