lexgui 0.1.15 → 0.1.16

package/build/components/codeeditor.js

@@ -106,10 +106,31 @@ class CodeEditor {
 
     constructor( area, options = {} ) {
 
+        // var a = [];
+
+        // var map = {};
+
+        // for( var i = 0; i < 1000000; ++i )
+        // map[i] = 1;
+
+        // const start = performance.now();
+
+        // for( var i = 0; i < 3000; ++i ) {
+        //     const b = map[Math.floor( Math.random() * 1000000 )];
+        // }
+
+        // console.log( performance.now() - start );
+
+
+        // debugger;
+
+
         window.editor = this;
 
         CodeEditor.__instances.push( this );
 
+        var that = this;
+
         this.base_area = area;
         this.area = new LX.Area( { className: "lexcodeeditor", height: "auto", no_append: true } );
 
@@ -146,6 +167,9 @@ class CodeEditor {
         this.root.addEventListener( 'click', this.processMouse.bind(this) );
         this.root.addEventListener( 'contextmenu', this.processMouse.bind(this) );
 
+        // Take into account the scrollbar..
+        this.tabs.area.root.classList.add( 'codetabsarea' );
+
         // Cursors and selection
 
         this.cursors = document.createElement('div');
@@ -174,6 +198,96 @@ class CodeEditor {
             this.cursors.appendChild(cursor);
         }
 
+        // Add custom vertical scroll bar
+        {
+            var scrollbar = document.createElement('div');
+            scrollbar.className = "lexcodescrollbar";
+            this.scrollbar = scrollbar;
+            area.attach(this.scrollbar);
+
+            var scrollbarThumb = document.createElement('div');
+            this.scrollbarThumb = scrollbarThumb;
+            this.scrollbarThumb._top = 0;
+            scrollbar.appendChild(scrollbarThumb);
+
+            this.scrollbarThumb.addEventListener("mousedown", inner_mousedown);
+            
+            var last_pos = 0;
+            
+            function inner_mousedown(e)
+            {
+                var doc = that.root.ownerDocument;
+                doc.addEventListener("mousemove",inner_mousemove);
+                doc.addEventListener("mouseup",inner_mouseup);
+                last_pos = e.y;
+                e.stopPropagation();
+                e.preventDefault();
+            }
+
+            function inner_mousemove(e)
+            {
+                var dt = (last_pos - e.y);
+                
+                that.applyVerticalScrollFromScrollBar( that.scrollbarThumb._top - dt )
+
+                last_pos = e.y;
+                e.stopPropagation();
+                e.preventDefault();
+            }
+
+            function inner_mouseup(e)
+            {
+                var doc = that.root.ownerDocument;
+                doc.removeEventListener("mousemove", inner_mousemove);
+                doc.removeEventListener("mouseup", inner_mouseup);
+            }
+        }
+
+        // Add custom horizontal scroll bar
+        {
+            var hScrollbar = document.createElement('div');
+            hScrollbar.className = "lexcodescrollbar horizontal";
+            this.hScrollbar = hScrollbar;
+            area.attach(this.hScrollbar);
+
+            var hScrollbarThumb = document.createElement('div');
+            this.hScrollbarThumb = hScrollbarThumb;
+            this.hScrollbarThumb._left = 0;
+            hScrollbar.appendChild(hScrollbarThumb);
+
+            this.hScrollbarThumb.addEventListener("mousedown", inner_mousedown);
+            
+            var last_pos = 0;
+            
+            function inner_mousedown(e)
+            {
+                var doc = that.root.ownerDocument;
+                doc.addEventListener("mousemove",inner_mousemove);
+                doc.addEventListener("mouseup",inner_mouseup);
+                last_pos = e.x;
+                e.stopPropagation();
+                e.preventDefault();
+            }
+
+            function inner_mousemove(e)
+            {
+                var dt = (last_pos - e.x);
+                
+                that.applyHorizontalScrollFromScrollBar( that.hScrollbarThumb._left - dt )
+
+                last_pos = e.x;
+                e.stopPropagation();
+                e.preventDefault();
+            }
+
+            function inner_mouseup(e)
+            {
+                var doc = that.root.ownerDocument;
+                doc.removeEventListener("mousemove", inner_mousemove);
+                doc.removeEventListener("mouseup", inner_mouseup);
+            }
+        }
+
         // Add autocomplete box
         {
             var box = document.createElement('div');
@@ -241,11 +355,13 @@ class CodeEditor {
             'ArrowRight', 'ArrowLeft', 'Delete', 'Home',
             'End', 'Tab', 'Escape'
         ];
+
         this.keywords = {
             'JavaScript': ['var', 'let', 'const', 'this', 'in', 'of', 'true', 'false', 'new', 'function', 'NaN', 'static', 'class', 'constructor', 'null', 'typeof', 'debugger', 'abstract',
                           'arguments', 'extends', 'instanceof'],
             'C++': ['int', 'float', 'double', 'bool', 'char', 'wchar_t', 'const', 'static_cast', 'dynamic_cast', 'new', 'delete', 'void', 'true', 'false', 'auto', 'struct', 'typedef', 'nullptr', 
                     'NULL', 'unsigned'],
+            'JSON': ['true', 'false'],
             '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',
@@ -281,7 +397,7 @@ class CodeEditor {
         };
         this.statementsAndDeclarations = {
             'JavaScript': ['for', 'if', 'else', 'case', 'switch', 'return', 'while', 'continue', 'break', 'do', 'import', 'from', 'throw', 'async', 'try', 'catch', 'await'],
-            'C++': ['std', 'for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'glm'],
+            'C++': ['std', 'for', 'if', 'else', 'return', 'continue', 'break', 'case', 'switch', 'while', 'glm', 'spdlog'],
             'GLSL': ['for', 'if', 'else', 'return', 'continue', 'break'],
             'WGSL': ['const','for', 'if', 'else', 'return', 'continue', 'break', 'storage', 'read', 'uniform'],
             'Python': ['if', 'raise', 'del', 'import', 'return', 'elif', 'try', 'else', 'while', 'as', 'except', 'with', 'assert', 'finally', 'yield', 'break', 'for', 'class', 'continue', 
@@ -290,7 +406,7 @@ class CodeEditor {
         };
         this.symbols = {
             'JavaScript': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '??'],
-            'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::'],
+            'C++': ['<', '>', '[', ']', '{', '}', '(', ')', ';', '=', '|', '||', '&', '&&', '?', '::', '*', '-', '+'],
             'JSON': ['[', ']', '{', '}', '(', ')'],
             'GLSL': ['[', ']', '{', '}', '(', ')'],
             'WGSL': ['[', ']', '{', '}', '(', ')', '->'],
@@ -299,6 +415,15 @@ class CodeEditor {
             'Batch': ['[', ']', '(', ')', '%'],
         };
 
+        // Convert reserved word arrays to maps so we can search tokens faster
+
+        for( let lang in this.keywords ) this.keywords[lang] = this.keywords[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in this.utils ) this.utils[lang] = this.utils[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in this.types ) this.types[lang] = this.types[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in this.builtin ) this.builtin[lang] = this.builtin[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in this.statementsAndDeclarations ) this.statementsAndDeclarations[lang] = this.statementsAndDeclarations[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+        for( let lang in this.symbols ) this.symbols[lang] = this.symbols[lang].reduce((a, v) => ({ ...a, [v]: true}), {});
+
         // Action keys
 
         this.action('Escape', false, ( ln, cursor, e ) => {
@@ -382,7 +507,7 @@ class CodeEditor {
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
             if(idx > 0) this.cursorToString(cursor, prestring);
             this._refreshCodeInfo(cursor.line, cursor.position);
-            this.code.scrollLeft = 0;
+            this.setScrollLeft( 0 );
 
             if( e.shiftKey && !e.cancelShift )
             {
@@ -411,8 +536,8 @@ class CodeEditor {
             this.resetCursorPos( CodeEditor.CURSOR_LEFT );
             this.cursorToString( cursor, this.code.lines[ln] );
 
-            const last_char = ((this.code.scrollLeft + this.code.clientWidth) / this.charWidth)|0;
-            this.code.scrollLeft = cursor.position >= last_char ? (cursor.position - last_char) * this.charWidth : 0;
+            const last_char = (this.code.clientWidth / this.charWidth)|0;
+            this.setScrollLeft( cursor.position >= last_char ? (cursor.position - last_char) * this.charWidth : 0 );
         });
 
         this.action('Enter', true, ( ln, cursor, e ) => {
@@ -531,7 +656,7 @@ class CodeEditor {
 
             if(e.metaKey) { // Apple devices (Command)
                 e.preventDefault();
-                this.actions[ 'Home' ].callback( ln, cursor );
+                this.actions[ 'Home' ].callback( ln, cursor, e );
             }
             else if(e.ctrlKey) {
                 // Get next word
@@ -581,8 +706,7 @@ class CodeEditor {
                     }
                         
                     this.lineUp( cursor );
-                    this.resetCursorPos( CodeEditor.CURSOR_LEFT );
-                    this.cursorToPosition( cursor, this.code.lines[cursor.line].length );
+                    this.actions[ 'End' ].callback( cursor.line, cursor, e );
 
                     if( e.shiftKey ) {
                         this.selection.toX = cursor.position;
@@ -771,12 +895,13 @@ class CodeEditor {
     loadFile( file ) {
 
         const inner_add_tab = ( text, name, title ) => {
-            this.addTab(name, true, title);
-            text = text.replaceAll('\r', '');
-            this.code.lines = text.split('\n');
-            this._refreshCodeInfo();
-            this._changeLanguageFromExtension( LX.getExtension(name) );
-            this.processLines();
+            const existing = this.addTab(name, true, title);
+            if( !existing )
+            {
+                text = text.replaceAll('\r', '');
+                this.code.lines = text.split('\n');
+                this._changeLanguageFromExtension( LX.getExtension(name) );
+            }
         };
 
         if(file.constructor == String)
@@ -797,7 +922,6 @@ class CodeEditor {
                 inner_add_tab( text, file.name );
             };
         }
-        
     }
 
     _addUndoStep( cursor )  {
@@ -901,7 +1025,7 @@ class CodeEditor {
         if(this.openedTabs[name])
         {
             this.tabs.select( this.code.tabName );
-            return;
+            return true;
         }
 
         // Create code content
@@ -913,37 +1037,36 @@ class CodeEditor {
         code.undoSteps = [];
         code.tabName = name;
         code.title = title ?? name;
-        code.tokens = {}; 
+        code.tokens = {};
+        code.customScroll = new LX.vec2;
 
         code.addEventListener('dragenter', function(e) {
             e.preventDefault();
-            this.classList.add('dragging');
+            this.parentElement.classList.add('dragging');
         });
         code.addEventListener('dragleave', function(e) {
             e.preventDefault();
-            this.classList.remove('dragging');
+            this.parentElement.remove('dragging');
         });
         code.addEventListener('drop', (e) => {
             e.preventDefault();
-            code.classList.remove('dragging');
+            code.parentElement.classList.remove('dragging');
             for( let i = 0; i < e.dataTransfer.files.length; ++i )
                 this.loadFile( e.dataTransfer.files[i] );
         });
+        code.addEventListener('wheel', (e) => {
 
-        code.addEventListener('scroll', (e) => {
-            this.gutter.scrollTop = code.scrollTop;
-            this.gutter.scrollLeft = code.scrollLeft;
+            // Get scroll data
 
-            // Update cursor
-            var cursor = this.cursors.children[0];
-            cursor.style.top = (cursor._top - code.scrollTop) + "px";
-            cursor.style.left = "calc( " + (cursor._left - code.scrollLeft) + "px + " + this.xPadding + ")";
+            const dX = (e.deltaY > 0.0 ? 1.0 : -1.0) * 20.0 * ( e.shiftKey ? 1.0 : 0.0 );
+            const dY = (e.deltaY > 0.0 ? 1.0 : -1.0) * 40.0 * ( e.shiftKey ? 0.0 : 1.0 );
 
-            // Update selection
-            for( let s of this.selections.childNodes ) {
-                s.style.top = (s._top - code.scrollTop) + "px";
-                s.style.left = "calc( " + (s._left - code.scrollLeft) + "px + " + this.xPadding + ")";
-            }
+            var new_scroll = code.customScroll.add( new LX.vec2( dX, dY ), new LX.vec2() );
+            
+            // Update state
+            
+            if( new_scroll.x != this.getScrollLeft()) this.setScrollLeft( new_scroll.x );
+            if( new_scroll.y != this.getScrollTop()) this.setScrollTop( new_scroll.y );
         });
 
         this.openedTabs[name] = code;
@@ -965,13 +1088,14 @@ class CodeEditor {
             this._refreshCodeInfo(cursor.line, cursor.position);
 
             // Restore scroll
-            this.gutter.scrollTop = this.code.scrollTop;
-            this.gutter.scrollLeft = this.code.scrollLeft;
+            this.gutter.scrollLeft = this.getScrollLeft();
+            this.gutter.scrollTop = this.getScrollTop();
         }});
         
         this.endSelection();
 
-        if(selected){
+        if( selected )
+        {
             this.code = code;  
             this.resetCursorPos(CodeEditor.CURSOR_LEFT | CodeEditor.CURSOR_TOP);
             this.processLines();
@@ -1009,7 +1133,7 @@ class CodeEditor {
 
         var cursor = this.cursors.children[0];
         var code_rect = this.code.getBoundingClientRect();
-        var mouse_pos = [(e.clientX - code_rect.x) + this.getScrollLeft(), (e.clientY - code_rect.y) + this.getScrollTop()];
+        var mouse_pos = [(e.clientX - code_rect.x), (e.clientY - code_rect.y)];
 
         // Discard out of lines click...
         if( e.type != 'contextmenu' )
@@ -1020,9 +1144,6 @@ class CodeEditor {
 
         if( e.type == 'mousedown' )
         {
-            if( mouse_pos[0] > this.code.scrollWidth || mouse_pos[1] > this.code.scrollHeight )
-                return; // Scrollbar click
-
             // Left click only...
             if( e.button === 2 )
             {
@@ -1113,7 +1234,7 @@ class CodeEditor {
     processClick(e, skip_refresh = false) {
 
         var code_rect = this.code.getBoundingClientRect();
-        var position = [(e.clientX - code_rect.x) + this.getScrollLeft(), (e.clientY - code_rect.y) + this.getScrollTop()];
+        var position = [(e.clientX - code_rect.x), (e.clientY - code_rect.y)];
         var ln = (position[1] / this.lineHeight)|0;
 
         if(this.code.lines[ln] == undefined) return;
@@ -1125,7 +1246,6 @@ class CodeEditor {
         
         var ch = (position[0] / this.charWidth)|0;
         var string = this.code.lines[ln].slice(0, ch);
-        // this.cursorToString(cursor, string);
         this.cursorToPosition(cursor, string.length);
 
         this.hideAutoCompleteBox();
@@ -1516,19 +1636,37 @@ class CodeEditor {
         }
     }
 
-    processLines( from ) {
+    processLines( from__legacy ) {
 
-        // const start = performance.now();
+        const start = performance.now();
+
+        var gutter_html = "";
+        var code_html = "";
+
+        this.resizeScrollBars();
 
-        this.gutter.innerHTML = "";
         this.code.innerHTML = "";
+        this.gutter.innerHTML = "";
 
-        for( let i = 0; i < this.code.lines.length; ++i )
+        // Get info about lines in viewport
+        const margin = 20;
+        const firstLineInViewport = (this.getScrollTop() / this.lineHeight)|0;
+        const totalLinesInViewport = ((this.code.parentElement.offsetHeight - 36) / this.lineHeight)|0;
+        const viewportRange = new LX.vec2( 
+            Math.max( firstLineInViewport - margin, 0 ), 
+            Math.min( firstLineInViewport + totalLinesInViewport + margin, this.code.lines.length )
+        );
+
+        for( let i = viewportRange.x; i < viewportRange.y; ++i )
         {
-            this.processLine( i, true );
+            gutter_html += "<span>" + (i + 1) + "</span>";
+            code_html += this.processLine( i, true );
         }
 
-        // console.log( performance.now() - start );
+        this.code.innerHTML = code_html;
+        this.gutter.innerHTML = gutter_html;
+        
+        console.log( "Num lines processed: " + (viewportRange.y - viewportRange.x), performance.now() - start );
     }
 
     processLine( linenum, force ) {
@@ -1538,31 +1676,27 @@ class CodeEditor {
         // It's allowed to process only 1 line to optimize
         let linestring = this.code.lines[ linenum ];
 
-        var pre = document.createElement('pre');
-        pre.dataset['linenum'] = linenum;
-
-        // Line gutter
-        var linenumspan = document.createElement('span');
-        linenumspan.innerHTML = (linenum + 1);
-
-        if( force )
+        if( !force )
         {
-            this.gutter.appendChild(linenumspan);
-            this.code.appendChild( pre );
-        } else
-        {
-            deleteElement( this.gutter.childNodes[ linenum ] );
+            var pre = document.createElement('pre');
+
+            // Single code line
             deleteElement( this.code.childNodes[ linenum ] );
-            this.gutter.insertChildAtIndex( linenumspan, linenum );
             this.code.insertChildAtIndex( pre, linenum );
+            
+            // Gutter
+            deleteElement( this.gutter.childNodes[ linenum ] );
+            var linenumspan = document.createElement('span');
+            linenumspan.innerHTML = (linenum + 1);
+            this.gutter.insertChildAtIndex( linenumspan, linenum );
         }
 
-        var linespan = document.createElement('span');
-        pre.appendChild(linespan);
-
         const tokensToEvaluate = this._getTokensFromString( linestring );
 
-        let line_inner_html = "";
+        if( !tokensToEvaluate.length )
+        return "<pre></pre>";
+
+        var line_inner_html = "";
 
         // Process all tokens
         for( var i = 0; i < tokensToEvaluate.length; ++i )
@@ -1576,12 +1710,12 @@ class CodeEditor {
             
             it = i + 1;
             let next = tokensToEvaluate[it];
-            while( next == ' ' || next == '"') {
+            while( next == ' ' || next == '"' ) {
                 it++;
                 next = tokensToEvaluate[it];
             }
             
-            let token = tokensToEvaluate[i];
+            const token = tokensToEvaluate[i];
 
             if( this.languages[ this.highlight ].blockComments ?? true )
             {
@@ -1594,7 +1728,16 @@ class CodeEditor {
             line_inner_html += this.evaluateToken(token, prev, next);
         }
 
-        linespan.innerHTML = line_inner_html;
+        // Single line update
+        if( !force )
+        {
+            this.code.childNodes[ linenum ].innerHTML = line_inner_html;
+        }
+        // Update all lines at once
+        else
+        {
+            return "<pre>" + line_inner_html + "</pre>";
+        }
     }
 
     _processTokens( tokens, offset = 0 ) {
@@ -1624,145 +1767,168 @@ class CodeEditor {
 
         // Check if line comment
         const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
-        const is_comment = linestring.split(singleLineCommentToken);
-        linestring = ( is_comment.length > 1 ) ? is_comment[0] : linestring;
+        const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
+        const has_comment = linestring.split(singleLineCommentToken);
+        linestring = ( has_comment.length > 1 ) ? has_comment[0] : linestring;
 
-        const tokens = linestring.split(' ').join('¬ ¬').split('¬'); // trick to split without losing spaces
+       //  const tokens = linestring.split(' ').join('¬ ¬').split('¬'); // trick to split without losing spaces
+        
         let tokensToEvaluate = []; // store in a temp array so we know prev and next tokens...
 
-        for( let t of tokens )
-        {
-            if( !t.length || (skipNonWords && ( t.includes('"') || t.length < 3 )) )
-                continue;
-
-            if( t == ' ' ) {
-                tokensToEvaluate.push( t );
-                continue;
-            }
+        const pushToken = function( t ) {
+            if( (skipNonWords && ( t.includes('"') || t.length < 3 )) )
+                return;
+            tokensToEvaluate.push( t );
+        };
 
-            let iter = t.matchAll(/(::|[\[\](){}<>.,;:"'])/g);
-            let subtokens = iter.next();
-            if( subtokens.value )
+        let iter = linestring.matchAll(/(::|[\[\](){}<>.,;:*"'%@ ])/g);
+        let subtokens = iter.next();
+        if( subtokens.value )
+        {
+            let idx = 0;
+            while( subtokens.value != undefined )
             {
-                let idx = 0;
-                while( subtokens.value != undefined )
-                {
-                    const _pt = t.substring(idx, subtokens.value.index);
-                    if( _pt.length ) tokensToEvaluate.push( _pt );
-                    tokensToEvaluate.push( subtokens.value[0] );
-                    idx = subtokens.value.index + subtokens.value[0].length;
-                    subtokens = iter.next();
-                    if(!subtokens.value) {
-                        const _at = t.substring(idx);
-                        if( _at.length ) tokensToEvaluate.push( _at );
-                    }
+                const _pt = linestring.substring(idx, subtokens.value.index);
+                if( _pt.length ) pushToken( _pt );
+                pushToken( subtokens.value[0] );
+                idx = subtokens.value.index + subtokens.value[0].length;
+                subtokens = iter.next();
+                if(!subtokens.value) {
+                    const _at = linestring.substring(idx);
+                    if( _at.length ) pushToken( _at );
                 }
             }
-            else tokensToEvaluate.push( t );
         }
+        else tokensToEvaluate.push( linestring );
+
+        // if( usesBlockComments )
+        // {
+        //     var block = false;
+
+        //     if( t.includes('/*') )
+        //     {
+        //         const idx = t.indexOf( '/*' );
+        //         tokensToEvaluate.push( t.substring( 0, idx ), '/*', t.substring( idx + 2 ) );
+        //         block |= true;
+        //     }
+        //     else if( t.includes('*/') )
+        //     {
+        //         const idx = t.indexOf( '*/' );
+        //         tokensToEvaluate.push( t.substring( 0, idx ), '*/', t.substring( idx + 2 ) );
+        //         block |= true;
+        //     }
+
+        //     if( block ) continue;
+        // }
 
-        if( is_comment.length > 1 && !skipNonWords )
-            tokensToEvaluate.push( singleLineCommentToken + is_comment[1] );
+        if( has_comment.length > 1 && !skipNonWords )
+            pushToken( singleLineCommentToken + has_comment[1] );
+
+        // console.log( tokensToEvaluate );
 
         return this._processTokens( tokensToEvaluate );
     }
 
     _mustHightlightWord( token, kindArray ) {
 
-        return kindArray[this.highlight] && kindArray[this.highlight].indexOf(token) > -1;
+        return kindArray[this.highlight] && kindArray[this.highlight][token] != undefined;
     }
 
     evaluateToken( token, prev, next ) {
 
-        let stringEnded = false;
-        let highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
-        let inner_html = "", token_classname = "";
-
-        const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
-        const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
-        const customStringKeys = Object.assign( {}, this.stringKeys );
-
-        if( highlight == 'cpp' && prev && prev.includes('#') ) // preprocessor code..
-        {
-            customStringKeys['@<'] = '>';
-        }
-
-        // Manage strings
-        if( this._buildingString != undefined )
-        {
-            const idx = Object.values(customStringKeys).indexOf( token );
-            stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
-        } 
-        else if( customStringKeys[ '@' + token ] )
-        {   
-            // Start new string
-            this._buildingString = token;
-        }
-
         if(token == ' ')
         {
-            inner_html += token;
+            return token;
         }
         else
         {
+            let stringEnded = false;
+            let highlight = this.highlight.replace(/\s/g, '').replaceAll("+", "p").toLowerCase();
+
+            const singleLineCommentToken = this.languages[ this.highlight ].singleLineCommentToken ?? this.defaultSingleLineCommentToken;
+            const usesBlockComments = this.languages[ this.highlight ].blockComments ?? true;
+            const customStringKeys = Object.assign( {}, this.stringKeys );
+
+            if( highlight == 'cpp' && prev && prev.includes('#') ) // preprocessor code..
+            {
+                customStringKeys['@<'] = '>';
+            }
+
+            // Manage strings
+            if( this._buildingString != undefined )
+            {
+                const idx = Object.values(customStringKeys).indexOf( token );
+                stringEnded = (idx > -1) && (idx == Object.values(customStringKeys).indexOf( customStringKeys[ '@' + this._buildingString ] ));
+            } 
+            else if( customStringKeys[ '@' + token ] )
+            {   
+                // Start new string
+                this._buildingString = token;
+            }
+
+            let token_classname = "";
+
             if( this._buildingBlockComment != undefined )
-                token_classname += "cm-com";
+                token_classname = "cm-com";
             
             else if( this._buildingString != undefined )
-                token_classname += "cm-str";
+                token_classname = "cm-str";
             
             else if( this._mustHightlightWord( token, this.keywords ) )
-                token_classname += "cm-kwd";
+                token_classname = "cm-kwd";
 
             else if( this._mustHightlightWord( token, this.builtin ) )
-                token_classname += "cm-bln";
+                token_classname = "cm-bln";
 
             else if( this._mustHightlightWord( token, this.statementsAndDeclarations ) )
-                token_classname += "cm-std";
+                token_classname = "cm-std";
 
             else if( this._mustHightlightWord( token, this.symbols ) )
-                token_classname += "cm-sym";
+                token_classname = "cm-sym";
 
             else if( token.substr(0, 2) == singleLineCommentToken )
-                token_classname += "cm-com";
+                token_classname = "cm-com";
 
             else if( usesBlockComments && token.substr(0, 2) == '/*' )
-                token_classname += "cm-com";
+                token_classname = "cm-com";
 
             else if( usesBlockComments && token.substr(token.length - 2) == '*/' )
-                token_classname += "cm-com";
+                token_classname = "cm-com";
 
-            else if(  this.isNumber(token) || this.isNumber( token.replace(/[px]|[em]|%/g,'') ) )
-                token_classname += "cm-dec";
+            else if( this.isNumber(token) || this.isNumber( token.replace(/[px]|[em]|%/g,'') ) )
+                token_classname = "cm-dec";
 
             else if( this.isCSSClass(token, prev, next) )
-                token_classname += "cm-kwd";
+                token_classname = "cm-kwd";
 
             else if ( this.isType(token, prev, next) )
-                token_classname += "cm-typ";
+                token_classname = "cm-typ";
 
-            else if ( token[0] != '@' && next == '(' )
-                token_classname += "cm-mtd";
+            else if ( highlight == 'batch' && (token == '@' || prev == ':' || prev == '@') )
+                token_classname = "cm-kwd";
 
             else if ( highlight == 'cpp' && token.includes('#') ) // C++ preprocessor
-                token_classname += "cm-ppc";
+                token_classname = "cm-ppc";
+
+            else if ( highlight == 'cpp' && prev == '<' && (next == '>' || next == '*') ) // Defining template type in C++
+                token_classname = "cm-typ";
 
-            else if ( highlight == 'cpp' && prev != 'WDWD:' && next == '::' ) // C++ Class
-                token_classname += "cm-typ";
+            else if ( highlight == 'cpp' && (next == '::' || prev == '::' && next != '(' )) // C++ Class
+                token_classname = "cm-typ";
 
             else if ( highlight == 'css' && prev == ':' && (next == ';' || next == '!important') ) // CSS value
-                token_classname += "cm-str";
+                token_classname = "cm-str";
 
             else if ( highlight == 'css' && prev == undefined && next == ':' ) // CSS attribute
-                token_classname += "cm-typ";
+                token_classname = "cm-typ";
 
-            token_classname += " " + highlight;
-            inner_html += "<span class=' " + token_classname + "'>" + token + "</span>";
-        }
+            else if ( token[0] != '@' && next == '(' )
+                token_classname = "cm-mtd";
 
-        if(stringEnded) delete this._buildingString;
+            this._buildingString = stringEnded ? undefined : this._buildingString;
 
-        return inner_html;
+            return "<span class='" + highlight + " " + token_classname + "'>" + token + "</span>";
+        }
     }
 
     isCSSClass( token, prev, next ) {
@@ -1798,7 +1964,7 @@ class CodeEditor {
         }
         else if ( this.highlight == 'WGSL' )
         {
-            const is_kwd = (this.keywords[this.highlight] && this.keywords[this.highlight].indexOf(token) == -1);
+            const is_kwd = !this._mustHightlightWord( token, this.keywords );
             return (prev == 'struct' && next == '{') || 
             ( is_kwd && 
                 ( prev == ':' && next == ')' || prev == ':' && next == ',' || prev == '>' && next == '{' 
@@ -1947,9 +2113,9 @@ class CodeEditor {
         // Add horizontal scroll
 
         doAsync(() => {
-            var last_char = ((this.code.scrollLeft + this.code.clientWidth) / this.charWidth)|0;
+            var last_char = ((this.code.clientWidth) / this.charWidth)|0;
             if( cursor.position >= last_char )
-                this.code.scrollLeft += this.charWidth;
+                this.setScrollLeft( this.getScrollLeft() + this.charWidth );
         });
     }
 
@@ -1965,10 +2131,12 @@ class CodeEditor {
         this.restartBlink();
         this._refreshCodeInfo( cursor.line, cursor.position );
 
+        // Add horizontal scroll
+
         doAsync(() => {
-            var first_char = (this.code.scrollLeft / this.charWidth)|0;
+            var first_char = (this.getScrollLeft() / this.charWidth)|0;
             if( (cursor.position - 1) < first_char )
-                this.code.scrollLeft -= this.charWidth;
+                this.setScrollLeft( this.getScrollLeft() - this.charWidth );
         });
     }
 
@@ -1986,9 +2154,9 @@ class CodeEditor {
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
-            var first_line = (this.code.scrollTop / this.lineHeight)|0;
+            var first_line = (this.getScrollTop() / this.lineHeight)|0;
             if( (cursor.line - 1) < first_line )
-                this.code.scrollTop -= this.lineHeight;
+                this.setScrollTop( this.getScrollTop() - this.lineHeight );
         });
     }
 
@@ -2005,9 +2173,9 @@ class CodeEditor {
         this._refreshCodeInfo( cursor.line, cursor.position );
 
         doAsync(() => {
-            var last_line = ((this.code.scrollTop  + this.code.offsetHeight) / this.lineHeight)|0;
+            var last_line = ((this.code.parentElement.offsetHeight - 32) / this.lineHeight)|0;
             if( cursor.line >= last_line )
-                this.code.scrollTop += this.lineHeight;
+                this.setScrollTop( this.getScrollTop() + this.lineHeight );
         });
     }
 
@@ -2094,13 +2262,148 @@ class CodeEditor {
     getScrollLeft() {
         
         if(!this.code) return 0;
-        return this.code.scrollLeft;
+        return this.code.customScroll.x;
     }
 
     getScrollTop() {
         
         if(!this.code) return 0;
-        return this.code.scrollTop;
+        return this.code.customScroll.y;
+    }
+
+    setScrollLeft( value, keepScrollBar ) {
+        
+        if(!this.code) return;
+        
+        const realClientWidth = (this.code.clientWidth - this.code.customScroll.x);
+        const maxWidth = Math.max( this.code.scrollWidth - realClientWidth, 0 );
+
+        value = LX.UTILS.clamp( value, 0, maxWidth );
+
+        this.code.style.marginLeft = (-value) + "px";
+
+        if( !keepScrollBar )
+        {
+            const scrollWidth = this.hScrollbarThumb.parentElement.offsetWidth;
+            const scrollBarWidth = this.hScrollbarThumb.offsetWidth;
+            this.setScrollBarValue( ( scrollWidth - scrollBarWidth ) * ( value / maxWidth ), 'horizontal' );
+        }
+
+        // Update cursor
+        var cursor = this.cursors.children[0];
+        cursor.style.left = "calc( " + (cursor._left - value) + "px + " + this.xPadding + ")";
+
+        // Update selection
+        for( let s of this.selections.childNodes ) {
+            s.style.left = "calc( " + (s._left - value) + "px + " + this.xPadding + ")";
+        }
+
+        this.code.customScroll.x = value;
+    }
+
+    setScrollTop( value, keepScrollBar ) {
+        
+        if(!this.code) return;
+
+        const realClientHeight = this.code.parentElement.offsetHeight - 36;
+        const maxHeight = Math.max( this.code.scrollHeight - realClientHeight, 0 );
+        
+        value = LX.UTILS.clamp( value, 0, maxHeight );
+        
+        this.gutter.scrollTop = value;
+        
+        this.code.style.marginTop = (-value) + "px";
+
+        if( !keepScrollBar )
+        {
+            const scrollHeight = this.scrollbarThumb.parentElement.offsetHeight;
+            const scrollBarHeight = this.scrollbarThumb.offsetHeight;
+            // this.setScrollBarValue( ( scrollHeight - scrollBarHeight ) * ( value / maxHeight ) )
+            const firstLineInViewport = (this.getScrollTop() / this.lineHeight)|0;
+            this.setScrollBarValue( ( scrollHeight - scrollBarHeight ) * ( firstLineInViewport / this.code.lines.length ) )
+        }
+
+        // Update cursor
+        var cursor = this.cursors.children[0];
+        cursor.style.top = (cursor._top - value) + "px";
+        
+        // Update selection
+        for( let s of this.selections.childNodes ) {
+            s.style.top = (s._top - value) + "px";
+        }
+        
+        this.code.customScroll.y = value;
+    }
+
+    resizeScrollBars() {
+
+        const numViewportLines = Math.floor( (this.code.parentElement.offsetHeight - 36) / this.lineHeight );
+
+        if( numViewportLines > this.code.lines.length )
+        {
+            this.scrollbar.classList.add( 'scrollbar-unused' );
+            this.tabs.area.root.classList.remove( 'with-vscrollbar' );
+        }
+        else
+        {
+            this.scrollbar.classList.remove( 'scrollbar-unused' );
+            this.tabs.area.root.classList.add( 'with-vscrollbar' );
+            this.scrollbarThumb.size = (numViewportLines / this.code.lines.length);
+            this.scrollbarThumb.style.height = (this.scrollbarThumb.size * 100.0) + "%";
+        }
+
+        const numViewportChars = Math.floor( this.code.clientWidth / this.charWidth );
+        const line_lengths = this.code.lines.map( value => value.length );
+        const maxLineLength = Math.max(...line_lengths);
+
+        if( numViewportChars > maxLineLength )
+        {
+            this.hScrollbar.classList.add( 'scrollbar-unused' );
+            this.tabs.area.root.classList.remove( 'with-hscrollbar' );
+        }
+        else
+        {
+            this.hScrollbar.classList.remove( 'scrollbar-unused' );
+            this.tabs.area.root.classList.add( 'with-hscrollbar' );
+            this.hScrollbarThumb.size = (numViewportChars / maxLineLength);
+            this.hScrollbarThumb.style.width = (this.hScrollbarThumb.size * 100.0) + "%";
+        }
+    }
+
+    setScrollBarValue( value, type = 'vertical' ) {
+
+        if( type == 'vertical' )
+        {
+            const scrollHeight = this.scrollbarThumb.parentElement.offsetHeight;
+            const scrollBarHeight = this.scrollbarThumb.offsetHeight;
+    
+            value = LX.UTILS.clamp( value, 0, ( scrollHeight - scrollBarHeight ) );
+    
+            this.scrollbarThumb._top = value;
+            this.scrollbarThumb.style.top = this.scrollbarThumb._top + "px";
+        }
+        else
+        {
+            const scrollWidth = this.hScrollbarThumb.parentElement.offsetWidth;
+            const scrollBarWidth = this.hScrollbarThumb.offsetWidth;
+    
+            value = LX.UTILS.clamp( value, 0, ( scrollWidth - scrollBarWidth ) );
+    
+            this.hScrollbarThumb._left = value;
+            this.hScrollbarThumb.style.left = this.hScrollbarThumb._left + "px";
+        }
+    }
+
+    applyHorizontalScrollFromScrollBar( value ) {
+
+        this.setScrollBarValue( value, 'horizontal');
+        this.setScrollLeft( value / this.hScrollbarThumb.size, true );
+    }
+
+    applyVerticalScrollFromScrollBar( value ) {
+
+        this.setScrollBarValue( value );
+        this.setScrollTop( value / this.scrollbarThumb.size, true );
     }
 
     getCharAtPos( cursor, offset = 0 ) {
@@ -2155,6 +2458,7 @@ class CodeEditor {
     }
 
     runScript( code ) {
+
         var script = document.createElement('script');
         script.type = 'module';
         script.innerHTML = code;
@@ -2211,15 +2515,15 @@ class CodeEditor {
 
         // Add language special keys...
         suggestions = suggestions.concat(   
-            this.builtin[ this.highlight ] ?? [],
-            this.keywords[ this.highlight ] ?? [],
-            this.statementsAndDeclarations[ this.highlight ] ?? [],
-            this.types[ this.highlight ] ?? [],
-            this.utils[ this.highlight ] ?? []
+            Object.keys( this.builtin[ this.highlight ] ) ?? [],
+            Object.keys( this.keywords[ this.highlight ] ) ?? [],
+            Object.keys( this.statementsAndDeclarations[ this.highlight ] ) ?? [],
+            Object.keys( this.types[ this.highlight ] ) ?? [],
+            Object.keys( 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 ) );
+        // suggestions = suggestions.concat( Object.keys(this.code.tokens).filter( a => a != word ) );
 
         // Remove 1/2 char words and duplicates...        
         suggestions = suggestions.filter( (value, index) => value.length > 2 && suggestions.indexOf(value) === index );
@@ -2279,9 +2583,8 @@ class CodeEditor {
         // Show box
         this.autocomplete.classList.toggle('show', true);
         this.autocomplete.classList.toggle('no-scrollbar', !(this.autocomplete.scrollHeight > this.autocomplete.offsetHeight));
-        this.autocomplete.style.left = (cursor._left + 36) + "px";
-        this.autocomplete.style.top = (cursor._top + 48) + "px";
-
+        this.autocomplete.style.left = (cursor._left + 36 - this.getScrollLeft()) + "px";
+        this.autocomplete.style.top = (cursor._top + 48 - this.getScrollTop()) + "px";
 
         this.isAutoCompleteActive = true;
     }

package/build/lexgui.css

@@ -2709,7 +2709,7 @@ ul.lexassetscontent {
 .lexcodeeditor {
   outline: none;
   overflow: hidden;
-  width: calc(100% );
+  width: calc(100%);
   -webkit-user-select: none; /* Safari 3.1+ */
   -moz-user-select: none; /* Firefox 2+ */
   -ms-user-select: none; /* IE 10+ */
@@ -2730,9 +2730,9 @@ ul.lexassetscontent {
 
 .lexcodegutter {
   width: 32px;
-  height: calc(100% - 69px); /* 6px of the vertical scrollbar */
+  height: calc(100% - 70px);
   background-color: var(--global-branch-darker);
-  margin-top: 25px;
+  margin-top: 24px;
   text-align: center;
   overflow: hidden;
   -webkit-user-select: none; /* Safari 3.1+ */
@@ -2753,19 +2753,29 @@ ul.lexassetscontent {
   line-height: 22px;
 }
 
-.lexcodeeditor .code {
-  height: calc(100% - 30px);
-  cursor: text;
-  font-size: 16px;
-  overflow: scroll;
+.lexcodeeditor .codetabsarea {
   background-color: var(--global-branch-darker);
-  padding-right: 6px;
 }
 
-.lexcodeeditor .code.dragging {
+.lexcodeeditor .codetabsarea.with-vscrollbar {
+  width: calc( 100% - 10px ) !important;
+}
+
+.lexcodeeditor .codetabsarea.with-hscrollbar {
+  height: calc( 100% - 40px ) !important;
+}
+
+.lexcodeeditor .codetabsarea.dragging {
   background-color: var(--global-color-secondary);
 }
 
+.lexcodeeditor .code {
+  cursor: text;
+  font-size: 16px;
+  overflow: hidden;
+  padding-right: 6px;
+}
+
 .codechar {
   font-size: 16px;
   font-family: 'Inconsolata', monospace;
@@ -2797,6 +2807,7 @@ ul.lexassetscontent {
   -webkit-tap-highlight-color: transparent;
   z-index: 0 !important;
   pointer-events: none;
+  height: 16px;
 }
 
 .lexcodeeditor span {
@@ -2852,6 +2863,56 @@ ul.lexassetscontent {
   height: 18px;
 }
 
+.lexcodescrollbar {
+  position: absolute;
+  background-color: var(--global-branch-darker);
+  filter: brightness(0.9);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  margin-top: 26px;
+  z-index: 1 !important;
+  right: 0px;
+  width: 10px;
+  height: calc(100% - 62px);
+}
+
+.lexcodescrollbar.horizontal {
+  position: absolute;
+  background-color: var(--global-branch-darker);
+  filter: brightness(0.9);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  z-index: 1 !important;
+  bottom: 36px;
+  right: 10px;
+  width: calc( 100% - 40px );
+  height: 10px;
+}
+
+.lexcodescrollbar.scrollbar-unused {
+  display: none;
+}
+
+.lexcodescrollbar div { /* thumb */
+  background-color: #bbbbbb57 !important;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border-right: none;
+  position: absolute;
+  z-index: 0 !important;
+  top: 0px;
+  width: 10px;
+  height: 10px;
+  transition: linear 0.1s background-color;
+}
+
+.lexcodescrollbar div:hover { /* thumb */
+  background-color: #bbbbbb8c !important;
+}
+
 .lexcodeeditor .lexcodeselection {
   -webkit-text-size-adjust: 100%;
   font-family: monospace;
@@ -3010,7 +3071,7 @@ ul.lexassetscontent {
 .cm-std.batch { color: #cf6dcf; } /* statements & declarations */
 .cm-bln.batch { color: inherit; } /* builtin */
 .cm-dec.batch { color: #b1ce9b; } /* decimal */
-.cm-sym.batch { color: #e6dc20; } /* symbol */
+.cm-sym.batch { color: #dfd85e; } /* symbol */
 .cm-mtd.batch { color: inherit } /* method */
 
 /* plain color */

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.15",
+        version: "0.1.16",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers
@@ -5046,50 +5046,45 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
             if(!name) {
                 throw("Set Widget Name!");
             }
-
+    
             let widget = this.create_widget(name, Widget.FILE, options);
             let element = widget.domEl;
-
+    
             let local = options.local ?? true;
             let type = options.type ?? 'text';
             let read = options.read ?? true; 
-
+    
             // Create hidden input
             let input = document.createElement('input');
             input.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " - 10%)";
             input.type = 'file';
             if(options.placeholder)
                 input.placeholder = options.placeholder;
-
+    
             input.addEventListener('change', function(e) {
                 const files = e.target.files;
-                if(!files.length) return;
-                if(read) {
+                if( !files.length ) return;
+                if(read)
+                {
                     const reader = new FileReader();
-
-                    if(type === 'text') {
-                        reader.readAsText(files[0]);
-                    }else if(type === 'buffer') {
-                        reader.readAsArrayBuffer(files[0])
-                    }else if(type === 'bin') {
-                        reader.readAsBinaryString(files[0])
-                    }else if(type === 'url') {
-                        reader.readAsDataURL(files[0])
-                    }
-
-                    reader.onload = (e) => { callback.call(this, e.target.result) } ;
+    
+                    if(type === 'text') reader.readAsText(files[0]);
+                    else if(type === 'buffer') reader.readAsArrayBuffer(files[0]);
+                    else if(type === 'bin') reader.readAsBinaryString(files[0]);
+                    else if(type === 'url') reader.readAsDataURL(files[0]);
+    
+                    reader.onload = (e) => { callback.call( this, e.target.result, files[0] ) } ;
                 }
-                else 
-                    callback(files[0]);
+                else callback(files[0]);
                 
             });
-
+    
             element.appendChild(input);
-
+    
             this.queue( element );
             
-            if(local) {
-
+            if( local )
+            {
                 this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-gear'></a>", () => {
                     
                     new Dialog("Load Settings", p => {
@@ -5099,9 +5094,9 @@ console.warn( 'Script "build/lexgui.js" is depracated and will be removed soon.
                     
                 }, { className: "micro", skipInlineCount: true });
             }
-
+    
             this.clearQueue();
-
+    
             return widget;
         }
 

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.15",
+    version: "0.1.16",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers
@@ -5059,24 +5059,19 @@ class Panel {
 
         input.addEventListener('change', function(e) {
             const files = e.target.files;
-            if(!files.length) return;
-            if(read) {
+            if( !files.length ) return;
+            if(read)
+            {
                 const reader = new FileReader();
 
-                if(type === 'text') {
-                    reader.readAsText(files[0]);
-                }else if(type === 'buffer') {
-                    reader.readAsArrayBuffer(files[0])
-                }else if(type === 'bin') {
-                    reader.readAsBinaryString(files[0])
-                }else if(type === 'url') {
-                    reader.readAsDataURL(files[0])
-                }
+                if(type === 'text') reader.readAsText(files[0]);
+                else if(type === 'buffer') reader.readAsArrayBuffer(files[0]);
+                else if(type === 'bin') reader.readAsBinaryString(files[0]);
+                else if(type === 'url') reader.readAsDataURL(files[0]);
 
-                reader.onload = (e) => { callback.call(this, e.target.result) } ;
+                reader.onload = (e) => { callback.call( this, e.target.result, files[0] ) } ;
             }
-            else 
-                callback(files[0]);
+            else callback(files[0]);
             
         });
 
@@ -5084,8 +5079,8 @@ class Panel {
 
         this.queue( element );
         
-        if(local) {
-
+        if( local )
+        {
             this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-gear'></a>", () => {
                 
                 new Dialog("Load Settings", p => {

package/examples/code_editor.html

@@ -51,8 +51,16 @@
         // editor.loadFile( "../data/style.css" );
         // editor.loadFile( "../data/script.js" );
         // editor.loadFile( "../data/engine.cpp" );
-        editor.loadFile( "../localhost.bat" );
+        editor.loadFile( "../demo.js" );
         
+        // var button = document.createElement('button');
+        // button.value = "CLICK ME";
+        // button.style.width = "100px";
+        // button.style.height = "100px";
+        // button.style.position = "absolute";
+        // button.onclick = editor.processLines.bind(editor);
+        // document.body.appendChild( button );
+
         var ctx = canvas.getContext("2d");
         ctx.fillStyle = "#b7a9b1";
         ctx.font = "48px Monospace";

package/package.json

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