lexgui 0.1.12 → 0.1.14

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.12",
+        version: "0.1.14",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -2883,9 +2883,11 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // Create new branch
             var branch = new Branch(name, options);
             branch.panel = this;
+
             // Declare new open
             this.branch_open = true;
             this.current_branch = branch;
+
             // Append to panel
             if(this.branches.length == 0)
                 branch.root.classList.add('first');
@@ -2899,7 +2901,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             // Add widget filter
             if(options.filter) {
-                this._add_filter( options.filter, {callback: this._search_widgets.bind(this, branch.name)} );
+                this._addFilter( options.filter, {callback: this._searchWidgets.bind(this, branch.name)} );
             }
 
             return branch;
@@ -3051,7 +3053,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             return widget;
         }
 
-        _add_filter( placeholder, options = {} ) {
+        _addFilter( placeholder, options = {} ) {
 
             options.placeholder = placeholder.constructor == String ? placeholder : "Filter properties..";
             options.skipWidget = options.skipWidget ?? true;
@@ -3080,7 +3082,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             return element;
         }
 
-        _search_widgets(branchName, value) {
+        _searchWidgets(branchName, value) {
 
             for( let b of this.branches ) {
 
@@ -3474,7 +3476,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     // Update height depending on the content
                     wValue.style.height = wValue.scrollHeight + "px";
                 }
-            }, 100);
+            }, 10);
 
             return widget;
         }
@@ -3824,7 +3826,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             // Add filter options
             let filter = null;
             if(options.filter ?? false)
-                filter = this._add_filter("Search option", {container: list, callback: this._search_options.bind(list, values)});
+                filter = this._addFilter("Search option", {container: list, callback: this._search_options.bind(list, values)});
 
             // Create option list to empty it easily..
             const list_options = document.createElement('span');
@@ -3835,6 +3837,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 list_options.style.height = "calc(100% - 25px)";
     
                 filter.addEventListener('focusout', function(e) {
+                    if (e.relatedTarget && e.relatedTarget.tagName == "UL" && e.relatedTarget.classList.contains("lexoptions"))
+                        return;
                     list.toggleAttribute('hidden', true);
                 });
             }
@@ -4636,8 +4640,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 slider.value = value;
                 slider.addEventListener("input", function(e) {
                     let new_value = +this.valueAsNumber;
-                    let fract = new_value % 1;
-                    vecinput.value = Math.trunc(new_value) + (+fract.toPrecision(5));
+                    vecinput.value = (+new_value).toFixed(4).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
                     Panel._dispatch_event(vecinput, "change");
                 }, false);
                 box.appendChild(slider);
@@ -4653,8 +4656,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                 if(e.shiftKey) mult *= 10;
                 else if(e.altKey) mult *= 0.1;
                 let new_value = (+this.valueAsNumber - mult * (e.deltaY > 0 ? 1 : -1));
-                let fract = new_value % 1;
-                this.value = Math.trunc(new_value) + (+fract.toPrecision(5));
+                this.value = (+new_value).toFixed(4).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
                 Panel._dispatch_event(vecinput, "change");
             }, {passive:false});
 
@@ -4697,8 +4699,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     if(e.shiftKey) mult *= 10;
                     else if(e.altKey) mult *= 0.1;
                     let new_value = (+vecinput.valueAsNumber + mult * dt);
-                    let fract = new_value % 1;
-                    vecinput.value = Math.trunc(new_value) + (+fract.toPrecision(5));
+                    vecinput.value = (+new_value).toFixed(4).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
                     Panel._dispatch_event(vecinput, "change");
                 }
 
@@ -5312,11 +5313,13 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
             this._addBranchSeparator();
 
-            if(options.closed) {
+            if( options.closed ) {
                 title.className += " closed";
                 root.className += " closed";
-                this.content.setAttribute('hidden', true);
                 this.grabber.setAttribute('hidden', true);
+                doAsync( () => {
+                    this.content.setAttribute('hidden', true);
+                }, 15);
             }
 
             this.onclick = function(e){
@@ -5842,7 +5845,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" + k.replace(/\s/g, '').replace('@', '_'));
+            entry.id = o.id ?? ("eId" + this._getSupportedDOMName( k ));
             entry.innerHTML = "";
             const icon = o[ 'icon' ];
             if(icon) {
@@ -5989,7 +5992,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" + key.replace(/\s/g, '').replace('@', '_');
+                let pKey = "eId" + this._getSupportedDOMName( key );
 
                 // Item already created
                 const id = "#" + (item.id ?? pKey);
@@ -6005,7 +6008,10 @@ 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;
@@ -6415,6 +6421,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.skip_preview = options.skip_preview ?? false;
             this.only_folders = options.only_folders ?? true;
             this.preview_actions = options.preview_actions ?? [];
+            this.context_menu = options.context_menu ?? [];
 
             if( !this.skip_browser )
             {
@@ -6801,23 +6808,26 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     }
                 });
 
-                itemEl.addEventListener('contextmenu', function(e) {
-                    e.preventDefault();
-
-                    const multiple = that.content.querySelectorAll('.selected').length;
-
-                    LX.addContextMenu( multiple > 1 ? (multiple + " selected") : 
-                                is_folder ? item.id : item.type, e, m => {
-                        if(multiple <= 1)   
-                            m.add("Rename");
-                        if( !is_folder )
-                            m.add("Clone", that._cloneItem.bind(that, item));
-                        if(multiple <= 1)
-                            m.add("Properties");
-                        m.add("");
-                        m.add("Delete", that._deleteItem.bind(that, item));
+                if( that.context_menu )
+                {
+                    itemEl.addEventListener('contextmenu', function(e) {
+                        e.preventDefault();
+    
+                        const multiple = that.content.querySelectorAll('.selected').length;
+    
+                        LX.addContextMenu( multiple > 1 ? (multiple + " selected") : 
+                                    is_folder ? item.id : item.type, e, m => {
+                            if(multiple <= 1)   
+                                m.add("Rename");
+                            if( !is_folder )
+                                m.add("Clone", that._clone_item.bind(that, item));
+                            if(multiple <= 1)
+                                m.add("Properties");
+                            m.add("");
+                            m.add("Delete", that._delete_item.bind(that, item));
+                        });
                     });
-                });
+                }
 
                 itemEl.addEventListener("dragstart", function(e) {
                     e.preventDefault();

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.12",
+    version: "0.1.14",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -2879,9 +2879,11 @@ class Panel {
         // Create new branch
         var branch = new Branch(name, options);
         branch.panel = this;
+
         // Declare new open
         this.branch_open = true;
         this.current_branch = branch;
+
         // Append to panel
         if(this.branches.length == 0)
             branch.root.classList.add('first');
@@ -2895,7 +2897,7 @@ class Panel {
 
         // Add widget filter
         if(options.filter) {
-            this._add_filter( options.filter, {callback: this._search_widgets.bind(this, branch.name)} );
+            this._addFilter( options.filter, {callback: this._searchWidgets.bind(this, branch.name)} );
         }
 
         return branch;
@@ -3047,7 +3049,7 @@ class Panel {
         return widget;
     }
 
-    _add_filter( placeholder, options = {} ) {
+    _addFilter( placeholder, options = {} ) {
 
         options.placeholder = placeholder.constructor == String ? placeholder : "Filter properties..";
         options.skipWidget = options.skipWidget ?? true;
@@ -3076,7 +3078,7 @@ class Panel {
         return element;
     }
 
-    _search_widgets(branchName, value) {
+    _searchWidgets(branchName, value) {
 
         for( let b of this.branches ) {
 
@@ -3470,7 +3472,7 @@ class Panel {
                 // Update height depending on the content
                 wValue.style.height = wValue.scrollHeight + "px";
             }
-        }, 100);
+        }, 10);
 
         return widget;
     }
@@ -3820,7 +3822,7 @@ class Panel {
         // Add filter options
         let filter = null;
         if(options.filter ?? false)
-            filter = this._add_filter("Search option", {container: list, callback: this._search_options.bind(list, values)});
+            filter = this._addFilter("Search option", {container: list, callback: this._search_options.bind(list, values)});
 
         // Create option list to empty it easily..
         const list_options = document.createElement('span');
@@ -3831,6 +3833,8 @@ class Panel {
             list_options.style.height = "calc(100% - 25px)";
 
             filter.addEventListener('focusout', function(e) {
+                if (e.relatedTarget && e.relatedTarget.tagName == "UL" && e.relatedTarget.classList.contains("lexoptions"))
+                    return;
                 list.toggleAttribute('hidden', true);
             });
         }
@@ -4632,8 +4636,7 @@ class Panel {
             slider.value = value;
             slider.addEventListener("input", function(e) {
                 let new_value = +this.valueAsNumber;
-                let fract = new_value % 1;
-                vecinput.value = Math.trunc(new_value) + (+fract.toPrecision(5));
+                vecinput.value = (+new_value).toFixed(4).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
                 Panel._dispatch_event(vecinput, "change");
             }, false);
             box.appendChild(slider);
@@ -4649,8 +4652,7 @@ class Panel {
             if(e.shiftKey) mult *= 10;
             else if(e.altKey) mult *= 0.1;
             let new_value = (+this.valueAsNumber - mult * (e.deltaY > 0 ? 1 : -1));
-            let fract = new_value % 1;
-            this.value = Math.trunc(new_value) + (+fract.toPrecision(5));
+            this.value = (+new_value).toFixed(4).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
             Panel._dispatch_event(vecinput, "change");
         }, {passive:false});
 
@@ -4693,8 +4695,7 @@ class Panel {
                 if(e.shiftKey) mult *= 10;
                 else if(e.altKey) mult *= 0.1;
                 let new_value = (+vecinput.valueAsNumber + mult * dt);
-                let fract = new_value % 1;
-                vecinput.value = Math.trunc(new_value) + (+fract.toPrecision(5));
+                vecinput.value = (+new_value).toFixed(4).replace(/([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/,'$1');
                 Panel._dispatch_event(vecinput, "change");
             }
 
@@ -5308,11 +5309,13 @@ class Branch {
 
         this._addBranchSeparator();
 
-        if(options.closed) {
+        if( options.closed ) {
             title.className += " closed";
             root.className += " closed";
-            this.content.setAttribute('hidden', true);
             this.grabber.setAttribute('hidden', true);
+            doAsync( () => {
+                this.content.setAttribute('hidden', true);
+            }, 15);
         }
 
         this.onclick = function(e){
@@ -5838,7 +5841,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" + k.replace(/\s/g, '').replace('@', '_'));
+        entry.id = o.id ?? ("eId" + this._getSupportedDOMName( k ));
         entry.innerHTML = "";
         const icon = o[ 'icon' ];
         if(icon) {
@@ -5985,7 +5988,7 @@ class ContextMenu {
         for( let item of this.items )
         {
             let key = Object.keys(item)[0];
-            let pKey = "eId" + key.replace(/\s/g, '').replace('@', '_');
+            let pKey = "eId" + this._getSupportedDOMName( key );
 
             // Item already created
             const id = "#" + (item.id ?? pKey);
@@ -6001,7 +6004,11 @@ class ContextMenu {
 
         this.colors[ token ] = color;
     }
-    
+
+    _getSupportedDOMName( key ) {
+        return key.replace(/\s/g, '').replaceAll('@', '_').replaceAll('+', '_plus_');
+    }
+
 };
 
 LX.ContextMenu = ContextMenu;
@@ -6411,6 +6418,7 @@ class AssetView {
         this.skip_preview = options.skip_preview ?? false;
         this.only_folders = options.only_folders ?? true;
         this.preview_actions = options.preview_actions ?? [];
+        this.context_menu = options.context_menu ?? [];
 
         if( !this.skip_browser )
         {
@@ -6797,23 +6805,26 @@ class AssetView {
                 }
             });
 
-            itemEl.addEventListener('contextmenu', function(e) {
-                e.preventDefault();
+            if( that.context_menu )
+            {
+                itemEl.addEventListener('contextmenu', function(e) {
+                    e.preventDefault();
 
-                const multiple = that.content.querySelectorAll('.selected').length;
-
-                LX.addContextMenu( multiple > 1 ? (multiple + " selected") : 
-                            is_folder ? item.id : item.type, e, m => {
-                    if(multiple <= 1)   
-                        m.add("Rename");
-                    if( !is_folder )
-                        m.add("Clone", that._cloneItem.bind(that, item));
-                    if(multiple <= 1)
-                        m.add("Properties");
-                    m.add("");
-                    m.add("Delete", that._deleteItem.bind(that, item));
+                    const multiple = that.content.querySelectorAll('.selected').length;
+
+                    LX.addContextMenu( multiple > 1 ? (multiple + " selected") : 
+                                is_folder ? item.id : item.type, e, m => {
+                        if(multiple <= 1)   
+                            m.add("Rename");
+                        if( !is_folder )
+                            m.add("Clone", that._clone_item.bind(that, item));
+                        if(multiple <= 1)
+                            m.add("Properties");
+                        m.add("");
+                        m.add("Delete", that._delete_item.bind(that, item));
+                    });
                 });
-            });
+            }
 
             itemEl.addEventListener("dragstart", function(e) {
                 e.preventDefault();

package/demo.js

@@ -693,6 +693,9 @@ function fillBottomPanel( panel ) {
     panel.addText("Serial number", "194E283DD", (value, event) => {
         console.log(value);
     });
+
+    panel.addNumber( "Decimal Point", 1, null, { min: 0, max: 2, step: 0.001 } )
+
     panel.addTextArea("Notes", "", (value, event) => {
         console.log(value);
     }, { placeholder: 'Some notes...' });

package/examples/code_editor.html

@@ -43,12 +43,14 @@
 
         let editor = new LX.CodeEditor(rightArea, {
             // allow_add_scripts: false,
-            // autocomplete: false
+            // autocomplete: false,
+            // disable_edition: true
         });
 
         editor.loadFile( "../data/test.json" );
         editor.loadFile( "../data/style.css" );
         editor.loadFile( "../data/script.js" );
+        editor.loadFile( "../data/engine.cpp" );
         
         var ctx = canvas.getContext("2d");
         ctx.fillStyle = "#b7a9b1";

package/package.json

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