lexgui 0.1.11 → 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);
         }
 
@@ -183,6 +186,7 @@ class CodeEditor {
 
         // Code
 
+        this.useAutoComplete = options.autocomplete ?? true;
         this.highlight = options.highlight ?? 'Plain Text';
         this.onsave = options.onsave ?? ((code) => {  });
         this.onrun = options.onrun ?? ((code) => { this.runScript(code) });
@@ -191,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 = [
@@ -203,28 +207,31 @@ class CodeEditor {
             'End', 'Tab', 'Escape'
         ];
         this.keywords = {
-            'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof'],
+            'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger'],
             'GLSL': ['true', 'false', 'function', 'int', 'float', 'vec2', 'vec3', 'vec4', 'mat2x2', 'mat3x3', 'mat4x4', 'struct'],
             'CSS': ['body', 'html', 'canvas', 'div', 'input', 'span', '.'],
             '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.types = {
+            'JavaScript': ['Object', 'String', 'Function', 'Boolean', 'Symbol', 'Error', 'Number']
         };
         this.builtin = {
-            'JavaScript': ['console', 'window', 'navigator'],
-            'CSS': ['*', '!important'],
-            'GLSL': [],
-            'WGSL': [],
-            'JSON': []
+            'JavaScript': ['document', 'console', 'window', 'navigator'],
+            'CSS': ['*', '!important']
         };
-        this.literals = {
-            'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do'],
+        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': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
@@ -256,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();
@@ -317,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 ) => {
@@ -337,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] );
@@ -394,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();
@@ -422,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 ) 
@@ -478,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 );
@@ -537,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();
@@ -553,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);
@@ -909,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' )
@@ -955,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;
         }
     }
 
@@ -1134,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();
@@ -1167,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)
@@ -1263,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 
@@ -1275,21 +1313,107 @@ 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 );
 
         // Manage autocomplete
 
-        this.showAutoCompleteBox( key, cursor );
+        if( this.useAutoComplete )
+            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 ) {
@@ -1421,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;
@@ -1447,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.literals[this.highlight] && this.literals[this.highlight].indexOf(token) > -1 )
-                span.classList.add("cm-lit");
+            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) == '//' )
@@ -1515,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 == '(');
@@ -1533,7 +1666,7 @@ class CodeEditor {
 
         if( !this.selection || (this.selection.fromY != this.selection.toY) )
         return false;
-                                    
+        
         const _lastLeft = cursor._left;
 
         // Insert first..
@@ -1544,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)
@@ -1878,7 +2010,7 @@ class CodeEditor {
 
     runScript( code ) {
         var script = document.createElement('script');
-        script.type = 'text/javascript';
+        script.type = 'module';
         script.innerHTML = code;
         // script.src = url[i] + ( version ? "?version=" + version : "" );
         script.async = false;
@@ -1921,23 +2053,27 @@ class CodeEditor {
 
     showAutoCompleteBox( key, cursor ) {
         
-        // Delimiter.. no autocomplete for this case
-        if( key == ' ' )
-        return;
-
         const [word, start, end] = this.getWordAtPos( cursor, -1 );
-        if(!word.length)
-        return;
+        if(key == ' ' || !word.length) {
+            this.hideAutoCompleteBox();
+            return;
+        }
 
         this.autocomplete.innerHTML = ""; // Clear all suggestions
 
         let suggestions = [];
 
         // Add language special keys...
-        suggestions = suggestions.concat( this.keywords[ this.highlight ] );
-        suggestions = suggestions.concat( this.literals[ this.highlight ] );
-        suggestions = suggestions.concat( this.builtin[ 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 );
@@ -1953,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 );
             } ); 
@@ -2033,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;
 
@@ -2052,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;
 }
 
@@ -2928,7 +2935,7 @@ ul.lexassetscontent {
 .cm-kwd { color: #218cce; } /* keyword */
 .cm-com { color: #5cab5a; } /* comment */
 .cm-typ { color: #36c0b0; } /* type */
-.cm-lit { color: #cf6dcf; } /* literal */
+.cm-std { color: #cf6dcf; } /* statements & declarations */
 .cm-bln { color: inherit; } /* builtin */
 .cm-dec { color: #b1ce9b; } /* decimal */
 .cm-sym { color: #e7ded2; } /* symbol */
@@ -2938,7 +2945,7 @@ ul.lexassetscontent {
 .cm-kwd.css { color: #e8be53; } /* keyword */
 .cm-com.css { color: #5cab5a; } /* comment */
 .cm-typ.css { color: #b7c3ec; } /* type */
-.cm-lit.css { color: #cf6dcf; } /* literal */
+.cm-std.css { color: #cf6dcf; } /* statements & declarations */
 .cm-bln.css { color: #2194ce; } /* builtin */
 .cm-dec.css { color: #b1ce9b; } /* decimal */
 .cm-sym.css { color: #f9d620; } /* symbol */
@@ -2948,7 +2955,7 @@ ul.lexassetscontent {
 .cm-kwd.json { color: inherit; } /* keyword */
 .cm-com.json { color: inherit; } /* comment */
 .cm-typ.json { color: inherit; } /* type */
-.cm-lit.json { color: inherit; } /* literal */
+.cm-std.json { color: inherit; } /* statements & declarations */
 .cm-bln.json { color: inherit; } /* builtin */
 .cm-dec.json { color: #b1ce9b; } /* decimal */
 .cm-sym.json { color: #cf6dcf; } /* symbol */
@@ -2958,7 +2965,7 @@ ul.lexassetscontent {
 .cm-kwd.glsl { color: #2194ce; } /* keyword */
 .cm-com.glsl { color: #5cab5a; } /* comment */
 .cm-typ.glsl { color: #36c0b0; } /* type */
-.cm-lit.glsl { color: #cf6dcf; } /* literal */
+.cm-std.glsl { color: #cf6dcf; } /* statements & declarations */
 .cm-bln.glsl { color: #cfc159; } /* builtin */
 .cm-dec.glsl { color: #b1ce9b; } /* decimal */
 .cm-sym.glsl { color: #f9cb20; } /* symbol */
@@ -2968,14 +2975,14 @@ ul.lexassetscontent {
 .cm-kwd.wgsl { color: #2194ce; } /* keyword */
 .cm-com.wgsl { color: #5cab5a; } /* comment */
 .cm-typ.wgsl { color: #36c0b0; } /* type */
-.cm-lit.wgsl { color: #cf6dcf; } /* literal */
+.cm-std.wgsl { color: #cf6dcf; } /* statements & declarations */
 .cm-bln.wgsl { color: #cfc159; } /* builtin */
 .cm-dec.wgsl { color: #b1ce9b; } /* decimal */
 .cm-sym.wgsl { color: #f9cb20; } /* symbol */
 .cm-mtd.wgsl { color: #e0cc68; } /* method */
 
 /* plain color */
-.cm-str.plaintext, .cm-kwd.plaintext, .cm-com.plaintext, .cm-typ.plaintext, .cm-lit.plaintext, 
+.cm-str.plaintext, .cm-kwd.plaintext, .cm-com.plaintext, .cm-typ.plaintext, .cm-std.plaintext, 
 .cm-bln.plaintext, .cm-dec.plaintext, .cm-sym.plaintext, .cm-mtd.plaintext { color: 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.11",
+        version: "0.1.13",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -143,7 +143,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
 
     // Other utils
 
-    function set_as_draggable(domEl) {
+    function makeDraggable( domEl, targetClass ) {
 
         let offsetX;
         let offsetY;
@@ -153,7 +153,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
         domEl.addEventListener("mousedown", function(e) {
             // e.stopPropagation();
             // e.stopImmediatePropagation();
-            currentTarget = e.target.classList.contains('lexdialogtitle') ? e.target : null;
+            currentTarget = (e.target.classList.contains(targetClass) || !targetClass) ? e.target : null;
         });
     
         domEl.addEventListener("dragstart", function(e) {
@@ -169,12 +169,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             const rect = e.target.getBoundingClientRect();
             offsetX = e.clientX - rect.x;
             offsetY = e.clientY - rect.y;
-            e.dataTransfer.setData('branch_title', e.target.querySelector(".lexdialogtitle").innerText);
-            e.dataTransfer.setData('dialog_id', e.target.id);
-    
             document.addEventListener("mousemove", moveFunc );
-            console.log("wefwef");
-    
         }, false);
         
         const moveFunc = (e) => {
@@ -194,6 +189,8 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             }
         });
     }
+    
+    LX.makeDraggable = makeDraggable;
 
     function create_global_searchbar( root ) {
 
@@ -3838,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);
                 });
             }
@@ -5626,7 +5625,7 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             this.title = titleDiv;
 
             if(draggable)
-                set_as_draggable(root);
+                makeDraggable( root, 'lexdialogtitle' );
 
             // Process position and size
             if(size.length && typeof(size[0]) != "string")
@@ -6418,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 )
             {
@@ -6804,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.11",
+    version: "0.1.13",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -139,7 +139,7 @@ LX.vec2 = vec2;
 
 // Other utils
 
-function set_as_draggable(domEl) {
+function makeDraggable( domEl, targetClass ) {
 
     let offsetX;
     let offsetY;
@@ -149,7 +149,7 @@ function set_as_draggable(domEl) {
     domEl.addEventListener("mousedown", function(e) {
         // e.stopPropagation();
         // e.stopImmediatePropagation();
-        currentTarget = e.target.classList.contains('lexdialogtitle') ? e.target : null;
+        currentTarget = (e.target.classList.contains(targetClass) || !targetClass) ? e.target : null;
     });
 
     domEl.addEventListener("dragstart", function(e) {
@@ -165,12 +165,7 @@ function set_as_draggable(domEl) {
         const rect = e.target.getBoundingClientRect();
         offsetX = e.clientX - rect.x;
         offsetY = e.clientY - rect.y;
-        e.dataTransfer.setData('branch_title', e.target.querySelector(".lexdialogtitle").innerText);
-        e.dataTransfer.setData('dialog_id', e.target.id);
-
         document.addEventListener("mousemove", moveFunc );
-        console.log("wefwef");
-
     }, false);
     
     const moveFunc = (e) => {
@@ -191,6 +186,8 @@ function set_as_draggable(domEl) {
     });
 }
 
+LX.makeDraggable = makeDraggable;
+
 function create_global_searchbar( root ) {
 
     let global_search = document.createElement("div");
@@ -3834,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);
             });
         }
@@ -5622,7 +5621,7 @@ class Dialog {
         this.title = titleDiv;
 
         if(draggable)
-            set_as_draggable(root);
+            makeDraggable( root, 'lexdialogtitle' );
 
         // Process position and size
         if(size.length && typeof(size[0]) != "string")
@@ -6414,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 )
         {
@@ -6800,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

@@ -42,25 +42,23 @@
         };
 
         let editor = new LX.CodeEditor(rightArea, {
-            // allow_add_scripts: false
+            // allow_add_scripts: false,
+            // autocomplete: false
         });
 
-        editor.loadFile( "../data/test.json" );
-        editor.loadFile( "../data/style.css" );
         editor.loadFile( "../data/script.js" );
         
+        var ctx = canvas.getContext("2d");
+        ctx.fillStyle = "#b7a9b1";
+        ctx.font = "48px Monospace";
+        ctx.strokeStyle = "#ff1999";
+
         function loop(dt) {
             
             var ctx = canvas.getContext("2d");
 
-            ctx.fillStyle = "#b7a9b1";
             ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-            ctx.font = "48px Monospace";
-            ctx.fillStyle = "#ff1999";
-
-            const text = "Lexgui.js @jxarco";
-            ctx.fillText(text, 300, 300);
+            ctx.strokeText("Lexgui.js @jxarco", 200, 300);
 
             requestAnimationFrame(loop);
         }

package/package.json

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