lexgui 0.1.12 → 0.1.13

package/build/components/codeeditor.js

@@ -102,6 +102,8 @@ class CodeEditor {
 
     constructor( area, options = {} ) {
 
+        window.editor = this;
+
         CodeEditor.__instances.push( this );
 
         this.disable_edition = options.disable_edition ?? false;
@@ -160,6 +162,7 @@ class CodeEditor {
             cursor.style.top = "4px";
             cursor.position = 0;
             cursor.line = 0;
+            cursor.print = (function() { console.log( this.line, this.position ) }).bind(cursor);
             this.cursors.appendChild(cursor);
         }
 
@@ -192,7 +195,7 @@ class CodeEditor {
         this.tabSpaces = 4;
         this.maxUndoSteps = 16;
         this.lineHeight = 20;
-        this.charWidth = 8;//this.measureChar();
+        this.charWidth = 8; //this.measureChar();
         this._lastTime = null;
 
         this.languages = [
@@ -210,30 +213,25 @@ class CodeEditor {
             'WGSL': ['var', 'let', 'true', 'false', 'fn', 'bool', 'u32', 'i32', 'f16', 'f32', 'vec2f', 'vec3f', 'vec4f', 'mat2x2f', 'mat3x3f', 'mat4x4f', 'array', 'atomic', 'struct',
                     'sampler', 'sampler_comparison', 'texture_depth_2d', 'texture_depth_2d_array', 'texture_depth_cube', 'texture_depth_cube_array', 'texture_depth_multisampled_2d',
                     'texture_external', 'texture_1d', 'texture_2d', 'texture_2d_array', 'texture_3d', 'texture_cube', 'texture_cube_array', 'texture_storage_1d', 'texture_storage_2d',
-                    'texture_storage_2d_array', 'texture_storage_3d'],
-            'JSON': []
+                    'texture_storage_2d_array', 'texture_storage_3d']
+        };
+        this.utils = { // These ones don't have hightlight, used as suggestions to autocomplete only...
+            'JavaScript': ['querySelector', 'body', 'addEventListener', 'removeEventListener', 'remove', 'sort', 'keys', 'filter', 'isNaN', 'parseFloat', 'parseInt', 'EPSILON', 'isFinite',
+                          'bind', 'prototype', 'length', 'assign', 'entries', 'values', 'concat', 'substring', 'substr', 'splice', 'slice', 'buffer', 'appendChild', 'createElement'],
+            'WGSL': ['textureSample']
         };
-        this.utils = {
-            'JavaScript': ['querySelector', 'body', 'addEventListener', 'removeEventListener', 'remove', 'sort', 'filter', 'isNaN', 'parseFloat', 'parseInt'],
-            'GLSL': [],
-            'CSS': [],
-            'WGSL': [],
-            'JSON': []
+        this.types = {
+            'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number']
         };
         this.builtin = {
-            'JavaScript': ['document', 'console', 'window', 'navigator', 'Object', 'Function', 'Boolean', 'Symbol', 'Error'],
-            'CSS': ['*', '!important'],
-            'GLSL': [],
-            'WGSL': [],
-            'JSON': []
+            'JavaScript': ['document', 'console', 'window', 'navigator'],
+            'CSS': ['*', '!important']
         };
         this.statementsAndDeclarations = {
             'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import',
                             'from', 'throw', 'async', 'try', 'catch'],
             'GLSL': ['for', 'if', 'else', 'return', 'continue', 'break'],
-            'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'uniform'],
-            'JSON': [],
-            'CSS': []
+            'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'uniform']
         };
         this.symbols = {
             'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
@@ -265,6 +263,8 @@ class CodeEditor {
                     this.code.lines[ln] = sliceChar( this.code.lines[ln], cursor.position - 1 );
                     this.cursorToLeft( letter );
                     this.processLine(ln);
+                    if( this.useAutoComplete )
+                        this.showAutoCompleteBox( 'foo', cursor );
                 } 
                 else if(this.code.lines[ln - 1] != undefined) {
                     this.lineUp();
@@ -326,16 +326,17 @@ class CodeEditor {
             this._refreshCodeInfo(cursor.line + 1, cursor.position);
             this.code.scrollLeft = 0;
 
-            if( !e.shiftKey || e.cancelShift )
-            return;
-        
-            // Get last selection range
-            if(this.selection) 
+            if( e.shiftKey && !e.cancelShift )
+            {
+                // Get last selection range
+                if(this.selection) 
                 last_pos += this.selection.chars;
 
-            this.startSelection(cursor);
-            var string = this.code.lines[ln].substring(idx, last_pos);
-            this.selection.selectInline(idx, cursor.line, this.measureString(string));
+                this.startSelection(cursor);
+                var string = this.code.lines[ln].substring(idx, last_pos);
+                this.selection.selectInline(idx, cursor.line, this.measureString(string));
+            } else
+                this.endSelection();
         });
 
         this.action('End', false, ( ln, cursor, e ) => {
@@ -346,7 +347,8 @@ class CodeEditor {
                 if(!this.selection)
                     this.startSelection(cursor);
                 this.selection.selectInline(cursor.position, cursor.line, this.measureString(string));
-            }
+            } else 
+                this.endSelection();
 
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
             this.cursorToString( cursor, this.code.lines[ln] );
@@ -403,11 +405,18 @@ class CodeEditor {
                 if( e.shiftKey ) {
                     if(!this.selection)
                         this.startSelection(cursor);
-                    this.selection.fromX = cursor.position;
-                    this.selection.toY = this.selection.toY > 0 ? this.selection.toY - 1 : 0;
-                    this.processSelection(null, true);
-                    this.cursorToPosition(cursor, this.selection.fromX);
+
+                    this.selection.toY = (this.selection.toY > 0) ? (this.selection.toY - 1) : 0;
                     this.cursorToLine(cursor, this.selection.toY);
+
+                    var letter = this.getCharAtPos( cursor );
+                    if(!letter) {
+                        this.selection.toX = (this.code.lines[cursor.line].length - 1);
+                        this.cursorToPosition(cursor, this.selection.toX);
+                    }
+                    
+                    this.processSelection(null, true);
+
                 } else {
                     this.endSelection();
                     this.lineUp();
@@ -431,11 +440,17 @@ class CodeEditor {
                 if( e.shiftKey ) {
                     if(!this.selection)
                         this.startSelection(cursor);
-                    this.selection.toX = cursor.position;
+
                     this.selection.toY = this.selection.toY < this.code.lines.length - 1 ? this.selection.toY + 1 : this.code.lines.length - 1;
-                    this.processSelection(null, true);
-                    this.cursorToPosition(cursor, this.selection.toX);
                     this.cursorToLine(cursor, this.selection.toY);
+                    
+                    var letter = this.getCharAtPos( cursor );
+                    if(!letter) {
+                        this.selection.toX = Math.max(this.code.lines[cursor.line].length - 1, 0);
+                        this.cursorToPosition(cursor, this.selection.toX);
+                    }
+
+                    this.processSelection(null, true);
                 } else {
     
                     if( this.code.lines[ ln + 1 ] == undefined ) 
@@ -487,7 +502,11 @@ class CodeEditor {
                         this.processSelection(null, true);
                     }
                     else {
-                        if(!this.selection) this.cursorToLeft( letter, cursor );
+                        if(!this.selection) {
+                            this.cursorToLeft( letter, cursor );
+                            if( this.useAutoComplete && this.isAutoCompleteActive )
+                                this.showAutoCompleteBox( 'foo', cursor );
+                        }
                         else {
                             this.selection.invertIfNecessary();
                             this.resetCursorPos( CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP );
@@ -546,7 +565,11 @@ class CodeEditor {
                         this.cursorToRight( letter, cursor );
                         this.processSelection(null, keep_range);
                     }else{
-                        if(!this.selection) this.cursorToRight( letter, cursor );
+                        if(!this.selection) {
+                            this.cursorToRight( letter, cursor );
+                            if( this.useAutoComplete && this.isAutoCompleteActive )
+                                this.showAutoCompleteBox( 'foo', cursor );
+                        }
                         else 
                         {
                             this.selection.invertIfNecessary();
@@ -562,6 +585,7 @@ class CodeEditor {
                     this.lineDown( cursor );
                     e.cancelShift = true;
                     this.actions['Home'].callback(cursor.line, cursor, e);
+                    this.hideAutoCompleteBox();
 
                     if( e.shiftKey ) {
                         if(!this.selection) this.startSelection(cursor);
@@ -918,10 +942,26 @@ class CodeEditor {
         {
             if( mouse_pos[0] > this.code.scrollWidth || mouse_pos[1] > this.code.scrollHeight )
                 return; // Scrollbar click
+
+            // Left click only...
+            if( e.button === 2 )
+            {
+                this.processClick(e);
+
+                this.canOpenContextMenu = !this.selection;
+
+                if( this.selection )
+                {
+                    this.canOpenContextMenu |= (cursor.line >= this.selection.fromY && cursor.line <= this.selection.toY 
+                                                && cursor.position >= this.selection.fromX && cursor.position <= this.selection.toX);
+                    if( this.canOpenContextMenu )
+                        return;
+                }
+            }
+
             this.lastMouseDown = LX.getTime();
             this.state.selectingText = true;
             this.endSelection();
-            return;
         }
         
         else if( e.type == 'mouseup' )
@@ -964,15 +1004,26 @@ class CodeEditor {
             }
         }
 
-        else if ( e.type == 'contextmenu' ) {
-            e.preventDefault()
-            LX.addContextMenu( "Format code", e, m => {
-                m.add( "JSON", () => { 
+        else if ( e.type == 'contextmenu' )
+        {
+            e.preventDefault();
+
+            if( !this.canOpenContextMenu )
+                return;
+
+            LX.addContextMenu( null, e, m => {
+                m.add( "Format/JSON", () => { 
                     let json = this.toJSONFormat(this.getText());
                     this.code.lines = json.split("\n"); 
                     this.processLines();
                 } );
+                m.add( "" )
+                m.add( "Cut", () => {  this._cutContent(); } );
+                m.add( "Copy", () => {  this._copyContent(); } );
+                m.add( "Paste", () => {  this._pasteContent(); } );
             });
+
+            this.canOpenContextMenu = false;
         }
     }
 
@@ -1143,27 +1194,7 @@ class CodeEditor {
                 this.cursorToLine(cursor, this.selection.toY);
                 break;
             case 'c': // copy
-                let text_to_copy = "";
-                if( !this.selection ) {
-                    text_to_copy = "\n" + this.code.lines[cursor.line];
-                }
-                else {
-                    const separator = "_NEWLINE_";
-                    let code = this.code.lines.join(separator);
-
-                    // Get linear start index
-                    let index = 0;
-                    
-                    for(let i = 0; i <= this.selection.fromY; i++)
-                        index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[i].length);
-
-                    index += this.selection.fromY * separator.length; 
-                    const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
-                    const text = code.substr(index, num_chars);
-                    const lines = text.split(separator);
-                    text_to_copy = lines.join('\n');
-                }
-                navigator.clipboard.writeText(text_to_copy).then(() => console.log("Successfully copied"), (err) => console.error("Error"));
+                this._copyContent();
                 return;
             case 'd': // duplicate line
                 e.preventDefault();
@@ -1176,13 +1207,10 @@ class CodeEditor {
                 this.onsave( this.getText() );
                 return;
             case 'v': // paste
-                let text = await navigator.clipboard.readText();
-                this.appendText(text);
+                this._pasteContent();
                 return;
             case 'x': // cut line
-                const to_copy = this.code.lines.splice(lidx, 1)[0];
-                this.processLines(lidx);
-                navigator.clipboard.writeText(to_copy + '\n');
+                this._cutContent();
                 return;
             case 'z': // undo
                 if(!this.code.undoSteps.length)
@@ -1272,6 +1300,7 @@ class CodeEditor {
         if( this.selection )
         {
             this.actions['Backspace'].callback(lidx, cursor, e);
+            lidx = cursor.line; // Update this, since it's from the old code
         }
 
         // Append key 
@@ -1284,15 +1313,33 @@ class CodeEditor {
 
         this.cursorToRight( key );
 
-        // Other special char cases...
+        //  Some custom cases for auto key pair (), {}, "", '', ...
 
-        if( key == '{' )
+        const pairKeys = ["\"", "'", "(", "{"];
+        if( pairKeys.indexOf( key ) > -1 && !this.wasKeyPaired )
         {
-            this.root.dispatchEvent(new KeyboardEvent('keydown', {'key': '}'}));
+            // Find pair key
+            let pair = key;
+            switch(key)
+            {
+                case "'":
+                case "\"":
+                    break;
+                case "(": pair = ")"; break;
+                case "{": pair = "}"; break;
+            }
+
+            // Make sure to detect later that the key is paired automatically to avoid loops...
+            this.wasKeyPaired = true;
+
+            this.root.dispatchEvent(new KeyboardEvent('keydown', { 'key': pair }));
             this.cursorToLeft( key, cursor );
-            return; // It will be processed with the above event
+            return;
         }
 
+        // Once here we can pair keys again
+        delete this.wasKeyPaired;
+
         // Update only the current line, since it's only an appended key
         this.processLine( lidx );
 
@@ -1302,6 +1349,73 @@ class CodeEditor {
             this.showAutoCompleteBox( key, cursor );
     }
 
+    async _pasteContent() {
+        let text = await navigator.clipboard.readText();
+        this.appendText(text);
+    }
+
+    async _copyContent() {
+
+        let cursor = this.cursors.children[0];
+        let text_to_copy = "";
+
+        if( !this.selection ) {
+            text_to_copy = "\n" + this.code.lines[cursor.line];
+        }
+        else {
+            const separator = "_NEWLINE_";
+            let code = this.code.lines.join(separator);
+
+            // Get linear start index
+            let index = 0;
+            
+            for(let i = 0; i <= this.selection.fromY; i++)
+                index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[i].length);
+
+            index += this.selection.fromY * separator.length; 
+            const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
+            const text = code.substr(index, num_chars);
+            const lines = text.split(separator);
+            text_to_copy = lines.join('\n');
+        }
+
+        navigator.clipboard.writeText(text_to_copy).then(() => console.log("Successfully copied"), (err) => console.error("Error"));
+    }
+
+    async _cutContent() {
+
+        let cursor = this.cursors.children[0];
+        let lidx = cursor.line;
+        let text_to_cut = "";
+
+        if( !this.selection ) {
+            text_to_cut = "\n" + this.code.lines[cursor.line];
+            this.code.lines.splice(lidx, 1);
+            this.processLines(lidx);
+            this.resetCursorPos( CodeEditor.CURSOR_LEFT );
+        }
+        else {
+            const separator = "_NEWLINE_";
+            let code = this.code.lines.join(separator);
+
+            // Get linear start index
+            let index = 0;
+            
+            for(let i = 0; i <= this.selection.fromY; i++)
+                index += (i == this.selection.fromY ? this.selection.fromX : this.code.lines[i].length);
+
+            index += this.selection.fromY * separator.length; 
+            const num_chars = this.selection.chars + (this.selection.toY - this.selection.fromY) * separator.length;
+            const text = code.substr(index, num_chars);
+            const lines = text.split(separator);
+            text_to_cut = lines.join('\n');
+
+            this.deleteSelection( cursor );
+        }
+
+        navigator.clipboard.writeText(text_to_cut).then(() => console.log("Successfully cut"), (err) => console.error("Error"));
+    }
+
     action( key, deleteSelection, fn ) {
 
         this.actions[ key ] = {
@@ -1431,6 +1545,11 @@ class CodeEditor {
         }
     }
 
+    _mustHightlightWord( token, kindArray ) {
+
+        return kindArray[this.highlight] && kindArray[this.highlight].indexOf(token) > -1;
+    }
+
     processToken(token, linespan, prev, next) {
 
         let sString = false;
@@ -1457,16 +1576,16 @@ class CodeEditor {
             else if( this._building_string  )
                 span.classList.add("cm-str");
             
-            else if( this.keywords[this.highlight] && this.keywords[this.highlight].indexOf(token) > -1 )
+            else if( this._mustHightlightWord( token, this.keywords ) )
                 span.classList.add("cm-kwd");
 
-            else if( this.builtin[this.highlight] && this.builtin[this.highlight].indexOf(token) > -1 )
+            else if( this._mustHightlightWord( token, this.builtin ) )
                 span.classList.add("cm-bln");
 
-            else if( this.statementsAndDeclarations[this.highlight] && this.statementsAndDeclarations[this.highlight].indexOf(token) > -1 )
+            else if( this._mustHightlightWord( token, this.statementsAndDeclarations ) )
                 span.classList.add("cm-std");
 
-            else if( this.symbols[this.highlight] && this.symbols[this.highlight].indexOf(token) > -1 )
+                else if( this._mustHightlightWord( token, this.symbols ) )
                 span.classList.add("cm-sym");
 
             else if( token.substr(0, 2) == '//' )
@@ -1525,6 +1644,10 @@ class CodeEditor {
 
     isType( token, prev, next ) {
         
+        // Common case
+        if( this._mustHightlightWord( token, this.types ) )
+            return true;
+
         if( this.highlight == 'JavaScript' )
         {
             return (prev == 'class' && next == '{') || (prev == 'new' && next == '(');
@@ -1543,7 +1666,7 @@ class CodeEditor {
 
         if( !this.selection || (this.selection.fromY != this.selection.toY) )
         return false;
-                                    
+        
         const _lastLeft = cursor._left;
 
         // Insert first..
@@ -1554,8 +1677,7 @@ class CodeEditor {
         ].join('');
 
         // Go to the end of the word
-        this.cursorToString(cursor, 
-            this.code.lines[lidx].slice(this.selection.fromX, this.selection.toX + 1));
+        this.cursorToPosition(cursor, this.selection.toX + 1);
 
         // Change next key?
         switch(key)
@@ -1942,11 +2064,16 @@ class CodeEditor {
         let suggestions = [];
 
         // Add language special keys...
-        suggestions = suggestions.concat( this.keywords[ this.highlight ] );
-        suggestions = suggestions.concat( this.statementsAndDeclarations[ this.highlight ] );
-        suggestions = suggestions.concat( this.builtin[ this.highlight ] );
-        suggestions = suggestions.concat( this.utils[ this.highlight ] );
-        suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
+        suggestions = suggestions.concat(   
+            this.builtin[ this.highlight ] ?? [],
+            this.keywords[ this.highlight ] ?? [],
+            this.statementsAndDeclarations[ this.highlight ] ?? [],
+            this.types[ this.highlight ] ?? [],
+            this.utils[ this.highlight ] ?? []
+        );
+
+        // Add words in current tab plus remove current word
+        // suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
 
         // Remove single chars and duplicates...        
         suggestions = suggestions.filter( (value, index) => value.length > 1 && suggestions.indexOf(value) === index );
@@ -1962,6 +2089,17 @@ class CodeEditor {
             var pre = document.createElement('pre');
             this.autocomplete.appendChild(pre);
 
+            var icon = document.createElement('a');
+            
+            if( this._mustHightlightWord( s, this.utils ) )
+                icon.className = "fa fa-cube";
+            else if( this._mustHightlightWord( s, this.types ) )
+                icon.className = "fa fa-code";
+            else
+                icon.className = "fa fa-font";
+
+            pre.appendChild(icon);
+
             pre.addEventListener( 'click', () => {
                 this.autoCompleteWord( cursor, s );
             } ); 
@@ -2042,13 +2180,13 @@ class CodeEditor {
                 for( let childSpan of child.childNodes )
                     word += childSpan.innerHTML;
 
-                return [word, i ]; // Get text of the span inside the 'pre' element
+                return [ word, i ]; // Get text of the span inside the 'pre' element
             }
         }
     }
 
     moveArrowSelectedAutoComplete( dir ) {
-        
+
         if( !this.isAutoCompleteActive )
         return;
 
@@ -2061,7 +2199,7 @@ class CodeEditor {
             if( (idx + offset) < 0 ) return;
         }
 
-        this.autocomplete.scrollTop += offset * 20;
+        this.autocomplete.scrollTop += offset * 18;
 
         // Remove selected from the current word and add it to the next one
         this.autocomplete.childNodes[ idx ].classList.remove('selected');

package/build/components/timeline.js

@@ -787,7 +787,7 @@ class Timeline {
         for(var i = this.tracksDrawn.length - 1; i >= 0; --i)
         {
             var t = this.tracksDrawn[i];
-            if( localY >= t[1] && localY < (t[1] + t[2]) )
+            if( t[1] >= this.topMargin && localY >= t[1] && localY < (t[1] + t[2]) )
             {
                 track = t[0];
                 break;
@@ -820,10 +820,6 @@ class Timeline {
             const discard = this.movingKeys || (LX.UTILS.getTime() - this.clickTime) > 420; // ms
             this.movingKeys ? innerSetTime( this.currentTime ) : 0;
 
-            if(e.button == 0 && this.grabbing && this.onClipMoved && this.lastClipsSelected.length){
-                this.onClipMoved(this.lastClipsSelected);
-            }
-
             this.grabbing_timeline = false;
             this.grabbing = false;
             this.grabbingScroll = false;

package/build/lexgui.css

@@ -2900,6 +2900,14 @@ ul.lexassetscontent {
   margin: 0;
   pointer-events: unset;
   cursor: default;
+  height: 18px;
+}
+
+.lexcodeeditor .autocomplete pre a {
+  font-size: 11px;
+  margin-top: 4px;
+  margin-right: 6px;
+  margin-left: 2px;
 }
 
 .lexcodeeditor .autocomplete pre:hover {
@@ -2912,7 +2920,6 @@ ul.lexassetscontent {
 }
 
 .lexcodeeditor .autocomplete pre span {
-  margin: 2px 0px;
   cursor: inherit;
 }
 

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.13",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -3835,6 +3835,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);
                 });
             }
@@ -6415,6 +6417,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 +6804,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.13",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -3831,6 +3831,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);
             });
         }
@@ -6411,6 +6413,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 +6800,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/examples/code_editor.html

@@ -46,8 +46,6 @@
             // autocomplete: false
         });
 
-        editor.loadFile( "../data/test.json" );
-        editor.loadFile( "../data/style.css" );
         editor.loadFile( "../data/script.js" );
         
         var ctx = canvas.getContext("2d");

package/package.json

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