lexgui 0.1.29 → 0.1.30

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.29",
+    version: "0.1.30",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -418,33 +418,38 @@ function create_global_searchbar( root ) {
 
 /**
  * @method init
- * @param {*} options 
+ * @param {Object} options 
  * container: Root location for the gui (default is the document body)
+ * id: Id of the main area
  * skip_default_area: Skip creation of main area
  */
 
-function init(options = {})
+function init( options = { } )
 {
-    if(this.ready)
+    if( this.ready )
         return this.main_area;
 
-    // LexGUI root 
-    var root = document.createElement("div");
+    // LexGUI root
+
+    var root = document.createElement( 'div' );
     root.id = "lexroot";
     root.tabIndex = -1;
     
-    var modal = document.createElement("div");
+    var modal = document.createElement( 'div' );
     modal.id = "modal";
 
     this.modal = modal;
     this.root = root;
     this.container = document.body;
 
-    this.modal.toggleAttribute('hidden', true);
-    this.modal.toggle = function(force) { this.toggleAttribute('hidden', force); };
+    // this.modal.toggleAttribute( 'hidden', true );
+    // this.modal.toggle = function( force ) { this.toggleAttribute( 'hidden', force ); };
+
+    this.modal.classList.add( 'hiddenOpacity' );
+    this.modal.toggle = function( force ) { this.classList.toggle( 'hiddenOpacity', force ); };
 
-    if(options.container)
-        this.container = document.getElementById(options.container);
+    if( options.container )
+        this.container = document.getElementById( options.container );
         
     this.global_search = create_global_searchbar( this.container );
 
@@ -452,17 +457,17 @@ function init(options = {})
     this.container.appendChild( root );
 
     // Disable drag icon
-    root.addEventListener("dragover", function(e) {
+    root.addEventListener( 'dragover', function( e ) {
         e.preventDefault();
     }, false );
 
     // CSS fontawesome
-    var head = document.getElementsByTagName('HEAD')[0];
-    var link = document.createElement('link');
+    var head = document.getElementsByTagName( 'HEAD' )[ 0 ];
+    var link = document.createElement( 'link' );
     link.rel = 'stylesheet';
     link.type = 'text/css';
-    link.href = 'https://use.fontawesome.com/releases/v6.4.2/css/all.css';
-    head.appendChild(link);
+    link.href = 'https://use.fontawesome.com/releases/v6.5.1/css/all.css';
+    head.appendChild( link );
 
     // Global vars
     this.DEFAULT_NAME_WIDTH     = "30%";
@@ -470,10 +475,10 @@ function init(options = {})
     this.OPEN_CONTEXTMENU_ENTRY = 'click';
 
     this.ready = true;
-    this.menubars = [];
+    this.menubars = [ ];
 
-    if(!options.skip_default_area)
-        this.main_area = new Area( {id: options.id ?? "mainarea"} );
+    if( !options.skip_default_area )
+        this.main_area = new Area( { id: options.id ?? 'mainarea' } );
 
     return this.main_area;
 }
@@ -1303,7 +1308,8 @@ class Area {
                 selectable: b.selectable,
                 selected: b.selected,
                 icon: b.icon,
-                img: b.img
+                img: b.img,
+                className: b.class
             };
 
             if( group )
@@ -1513,7 +1519,7 @@ class Tabs {
 
         let container = document.createElement('div');
         container.className = "lexareatabs " + (options.fit ? "fit" : "row");
-        
+
         const folding = options.folding ?? false;
         if(folding) container.classList.add("folding");
 
@@ -1565,6 +1571,29 @@ class Tabs {
         this.tabs = {};
         this.tabDOMs = {};
 
+        if( options.fit )
+        {
+            // Create movable element
+            let mEl = document.createElement('span');
+            mEl.className = "lexareatab thumb";
+            this.thumb = mEl;
+            this.root.appendChild( mEl );
+
+            const resizeObserver = new ResizeObserver((entries) => {
+                const tabEl = this.thumb.item;
+                if( !tabEl ) return;
+                var transition = this.thumb.style.transition;
+                this.thumb.style.transition = "none";
+                this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
+                this.thumb.style.width = ( tabEl.offsetWidth - 5 ) + "px";
+                this.thumb.style.height = ( tabEl.offsetHeight - 6 ) + "px";
+                flushCss( this.thumb );
+                this.thumb.style.transition = transition;
+            });
+
+            resizeObserver.observe( this.area.root );
+        }
+
         // debug
         if(folding) 
         {
@@ -1662,6 +1691,14 @@ class Tabs {
 
             if(options.onSelect)
                 options.onSelect(e, tabEl.dataset.name);
+
+            if( this.thumb )
+            {
+                this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
+                this.thumb.style.width = ( tabEl.offsetWidth - 5 ) + "px";
+                this.thumb.style.height = ( tabEl.offsetHeight - 6 ) + "px";
+                this.thumb.item = tabEl;
+            }
         });
 
         tabEl.addEventListener("contextmenu", e => {
@@ -1690,13 +1727,26 @@ class Tabs {
         });
         
         // Attach content
+        tabEl.childIndex = ( this.root.childElementCount - 1 );
         this.root.appendChild( tabEl );
         this.area.attach( contentEl );
         this.tabDOMs[ name ] = tabEl;
         this.tabs[ name ] = content;
 
         setTimeout( () => {
-            if( options.onCreate ) options.onCreate.call(this, this.area.root.getBoundingClientRect());
+
+            if( options.onCreate ) {
+                options.onCreate.call(this, this.area.root.getBoundingClientRect());
+            }
+
+            if( isSelected && this.thumb )
+            {
+                this.thumb.style.transform = "translate( " + ( tabEl.childIndex * tabEl.offsetWidth ) + "px )";
+                this.thumb.style.width = ( tabEl.offsetWidth - 5 ) + "px";
+                this.thumb.style.height = ( tabEl.offsetHeight - 6 ) + "px";
+                this.thumb.item = tabEl;
+            }
+
         }, 10 );
     }
 
@@ -2191,6 +2241,7 @@ class SideBar {
      * @param {*} options:
      * callback: Function to call on each item
      * bottom: Bool to set item at the bottom as helper button (not selectable)
+     * className: Add class to the entry DOM element
      */
 
     add( key, options = {} ) {
@@ -2207,14 +2258,14 @@ class SideBar {
         }
 
         let entry = document.createElement( 'div' );
-        entry.className = "lexsidebarentry";
+        entry.className = "lexsidebarentry " + ( options.className ?? "" );
         entry.id = pKey;
-        entry.title = key;
 
         if( options.bottom )
         {
             this.footer.appendChild( entry );
-        }else
+        }
+        else
         {
             this.root.appendChild( entry );
         }
@@ -2226,6 +2277,11 @@ class SideBar {
         button.innerHTML = "<i class='"+ (options.icon ?? "") + "'></i>";
         entry.appendChild( button );
 
+        let desc = document.createElement( 'span' );
+        desc.className = 'lexsidebarentrydesc';
+        desc.innerHTML = key;
+        entry.appendChild( desc );
+
         entry.addEventListener("click", () => {
 
             const f = options.callback;
@@ -2241,6 +2297,23 @@ class SideBar {
 
         this.items.push( { name: pKey, domEl: entry, callback: options.callback } );
     }
+
+    /**
+     * @method select
+     * @param {String} name Element name to select
+     */
+
+    select( name ) {
+
+        let pKey = name.replace( /\s/g, '' ).replaceAll( '.', '' );
+
+        const entry = this.items.find( v => v.name === pKey );
+
+        if( !entry )
+            return;
+
+        entry.domEl.click();
+    }
 };
 
 LX.SideBar = SideBar;
@@ -3133,7 +3206,7 @@ class Panel {
 
         if( type != Widget.TITLE )
         {
-            element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE ? 10 : 20) + "px)";
+            element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE || ( type == Widget.BUTTON && !name ) ? 10 : 20) + "px)";
             if( options.width ) {
                 element.style.width = element.style.minWidth = options.width;
             }
@@ -4393,7 +4466,7 @@ class Panel {
             buttonName = "Add item";
             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( "" );
+                values.push( options.innerValues ? options.innerValues[ 0 ] : "" );
                 updateItems();
                 this._trigger( new IEvent(name, values, event), callback );
             }, { buttonClass: 'array' });
@@ -5267,6 +5340,7 @@ class Panel {
      * @param {Function} callback Callback function on change
      * @param {*} options:
      * local: Ask for local file
+     * read: Return the file itself (False) or the contents (True)
      * type: type to read as [text (Default), buffer, bin, url]
      */
 
@@ -7549,6 +7623,13 @@ LX.UTILS = {
     compareThresholdRange( v0, v1, t0, t1 ) { return v0 >= t0 && v0 <= t1 || v1 >= t0 && v1 <= t1 || v0 <= t0 && v1 >= t1},
     clamp (num, min, max) { return Math.min(Math.max(num, min), max) },
     uidGenerator: simple_guidGenerator,
+    deleteElement( el ) { if( el ) el.remove(); },
+    flushCss(element) {
+        // By reading the offsetHeight property, we are forcing
+        // the browser to flush the pending CSS changes (which it
+        // does to ensure the value obtained is accurate).
+        element.offsetHeight;
+    },
     getControlPoints( x0, y0, x1, y1, x2, y2, t ) {
         
         //  x0,y0,x1,y1 are the coordinates of the end (knot) pts of this segment

package/changelog.md

@@ -1,5 +1,24 @@
 # lexgui.js changelog
 
+## 0.1.30
+
+GraphEditor:
+- Snap Multiplier (x1, x2, x3)
+- Added Sidebar to change between graphs/functions.
+- Start/Stop graph buttons in top buttons.
+- Initial support for creating Graph Functions.
+- Improved performance hiding nodes outside the viewport.
+- Groundwork for graph/function renaming.
+- Support "Autoconnect" nodes.
+- Import/Export Groups + Move groups inside groups.
+
+Support adding class to overlay buttons.
+Add custom "title" on hover for Sidebar elements.
+Added Sidebar.select method.
+Improved select animation "fit" tabs.
+Doc updates.
+Minor bug fixes.
+
 ## 0.1.29
 
 GraphEditor:

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";
@@ -55,14 +52,14 @@
             file_explorer: file_explorer
         });
 
-        editor.loadFile( "../demo.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/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" );
         
         if( !file_explorer )
         {

package/examples/index.html

@@ -48,7 +48,7 @@
             'Asset View',
             'Code Editor',
             'Dialogs',
-            'Immediate UI',
+            // 'Immediate UI',
             'Node Graph',
             'Side Bar'
         ];

package/examples/node_graph.html

@@ -45,6 +45,7 @@
            
         } );
 
+        graph_editor.loadGraph( "../data/function_sample.json" );
         graph_editor.loadGraph( "../data/graph_sample.json" );
 
         function loop(dt) {

package/package.json

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