lexgui 0.1.21 → 0.1.22

package/build/components/codeeditor.js

@@ -201,6 +201,9 @@ class CodeEditor {
     static WORD_TYPE_METHOD = 0;
     static WORD_TYPE_CLASS  = 1;
 
+    static CODE_MAX_FONT_SIZE = 20;
+    static CODE_MIN_FONT_SIZE = 11;
+
     /**
      * @param {*} options
      * skip_info, allow_add_scripts, name
@@ -413,8 +416,16 @@ class CodeEditor {
             });
 
             this.codeScroller.addEventListener( 'wheel', e => {
-                const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
-                if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
+                if( e.ctrlKey )
+                {
+                    e.preventDefault();
+                    ( e.deltaY > 0.0 ? this._decreaseFontSize() : this._increaseFontSize() );
+                }
+                else
+                {
+                    const dX = ( e.deltaY > 0.0 ? 10.0 : -10.0 ) * ( e.shiftKey ? 1.0 : 0.0 );
+                    if( dX != 0.0 ) this.setScrollBarValue( 'horizontal', dX );
+                }
             });
         }
 
@@ -470,6 +481,28 @@ class CodeEditor {
             this.tabs.area.attach( box );
         }
 
+        // Add search LINE box
+        {
+            var box = document.createElement( 'div' );
+            box.className = "searchbox gotoline";
+            
+            var searchPanel = new LX.Panel();
+            box.appendChild( searchPanel.root );
+
+            searchPanel.addText( null, "", ( value, event ) => {
+                input.value = ":" + value.replaceAll( ':', '' );
+                this.goToLine( input.value.slice( 1 ) );
+            }, { placeholder: "Go to line", trigger: "input" } );
+
+            let input = box.querySelector( 'input' );
+            input.addEventListener( 'keyup', e => {
+                if( e.key == 'Escape' ) this.hideSearchLineBox();
+            } );
+
+            this.searchlinebox = box;
+            this.tabs.area.attach( box );
+        }
+
         // Add code-sizer
         {
             this.codeSizer = document.createElement( 'div' );
@@ -503,7 +536,6 @@ class CodeEditor {
         this.lineHeight = 20;
         this.defaultSingleLineCommentToken = '//';
         this.defaultBlockCommentTokens = [ '/*', '*/' ];
-        this.charWidth = 7; //this._measureChar();
         this._lastTime = null;
 
         this.pairKeys = {
@@ -790,7 +822,7 @@ class CodeEditor {
                 return;
             }
 
-            this._addUndoStep( cursor );
+            this._addUndoStep( cursor, true );
 
             var _c0 = this.getCharAtPos( cursor, -1 );
             var _c1 = this.getCharAtPos( cursor );
@@ -1018,7 +1050,7 @@ class CodeEditor {
         if( options.allow_add_scripts ?? true )
             this.addTab("+", false, "New File");
 
-        this.addTab(options.name || "untitled", true, options.title);
+        this.addTab( options.name || "untitled", true, options.title );
 
         // Create inspector panel
         let panel = this._createPanelInfo();
@@ -1036,14 +1068,15 @@ class CodeEditor {
         );
         
         // Add to the document.fonts (FontFaceSet)
-        document.fonts.add(commitMono);
+        document.fonts.add( commitMono );
 
         // Load the font
         commitMono.load();
 
         // Wait until the fonts are all loaded
         document.fonts.ready.then(() => {
-            console.log("commitMono loaded")
+            // console.log("commitMono loaded")
+            this.charWidth = this._measureChar( "a", true );
         });
     }
 
@@ -1201,23 +1234,32 @@ class CodeEditor {
         }
     }
 
-    _addUndoStep( cursor )  {
+    _addUndoStep( cursor, force, deleteRedo = true )  {
 
         const d = new Date();
         const current = d.getTime();
 
-        if( !this._lastTime ) {
-            this._lastTime = current;
-        } else {
-            if( ( current - this._lastTime ) > 3000 ){
-                this._lastTime = null;
-            } else {
-                // If time not enough, reset timer
+        if( !force )
+        {
+            if( !this._lastTime ) {
                 this._lastTime = current;
-                return;
+            } else {
+                if( ( current - this._lastTime ) > 3000 ){
+                    this._lastTime = null;
+                } else {
+                    // If time not enough, reset timer
+                    this._lastTime = current;
+                    return;
+                }
             }
         }
 
+        if( deleteRedo ) 
+        {
+            // Remove all redo steps
+            this.code.redoSteps.length = 0;
+        }
+
         var cursor = cursor ?? this.cursors.children[ 0 ];
 
         this.code.undoSteps.push( {
@@ -1228,6 +1270,18 @@ class CodeEditor {
         } );
     }
 
+    _addRedoStep( cursor )  {
+
+        var cursor = cursor ?? this.cursors.children[ 0 ];
+
+        this.code.redoSteps.push( {
+            lines: LX.deepCopy( this.code.lines ),
+            cursor: this.saveCursor( cursor ),
+            line: cursor.line,
+            position: cursor.position
+        } );
+    }
+
     _changeLanguage( lang ) {
 
         this.code.language = lang;
@@ -1385,6 +1439,7 @@ class CodeEditor {
         code.language = "Plain Text";
         code.cursorState = {};
         code.undoSteps = [];
+        code.redoSteps = [];
         code.tabName = name;
         code.title = title ?? name;
         code.tokens = {};
@@ -1555,6 +1610,7 @@ class CodeEditor {
             this.lastMouseDown = LX.getTime();
             this.state.selectingText = true;
             this.endSelection();
+            this.processClick( e );
         }
         
         else if( e.type == 'mouseup' )
@@ -1618,9 +1674,8 @@ class CodeEditor {
 
     _onMouseUp( e ) {
 
-        if( (LX.getTime() - this.lastMouseDown) < 300 ) {
+        if( (LX.getTime() - this.lastMouseDown) < 120 ) {
             this.state.selectingText = false;
-            this.processClick( e );
             this.endSelection();
         }
 
@@ -1847,6 +1902,7 @@ class CodeEditor {
                 return;
             case 'd': // duplicate line
                 e.preventDefault();
+                this.endSelection();
                 this.code.lines.splice( lidx, 0, this.code.lines[ lidx ] );
                 this.lineDown( cursor );
                 this.processLines();
@@ -1856,6 +1912,10 @@ class CodeEditor {
                 e.preventDefault();
                 this.showSearchBox();
                 return;
+            case 'g': // find line
+                e.preventDefault();
+                this.showSearchLineBox();
+                return;
             case 's': // save
                 e.preventDefault();
                 this.onsave( this.getText() );
@@ -1867,13 +1927,31 @@ class CodeEditor {
                 this._cutContent();
                 this.hideAutoCompleteBox();
                 return;
+            case 'y': // redo
+                if(!this.code.redoSteps.length)
+                    return;
+                this._addUndoStep( cursor, true, false);
+                const redo_step = this.code.redoSteps.pop();
+                this.code.lines = redo_step.lines;
+                this.processLines();
+                this.restoreCursor( cursor, redo_step.cursor );
+                return;
             case 'z': // undo
                 if(!this.code.undoSteps.length)
                     return;
-                const step = this.code.undoSteps.pop();
-                this.code.lines = step.lines;
+                this._addRedoStep( cursor );
+                const undo_step = this.code.undoSteps.pop();
+                this.code.lines = undo_step.lines;
                 this.processLines();
-                this.restoreCursor( cursor, step.cursor );
+                this.restoreCursor( cursor, undo_step.cursor );
+                return;
+            case '+': // increase size
+                e.preventDefault();
+                this._increaseFontSize();
+                return;
+            case '-': // decrease size
+                e.preventDefault();
+                this._decreaseFontSize();
                 return;
             }
         }
@@ -2037,7 +2115,7 @@ class CodeEditor {
         let lidx = cursor.line;
         let text_to_cut = "";
 
-        this._addUndoStep( cursor );
+        this._addUndoStep( cursor, true );
 
         if( !this.selection ) {
             text_to_cut = "\n" + this.code.lines[ cursor.line ];
@@ -2840,9 +2918,9 @@ class CodeEditor {
         cursor.position = state.position ?? 0;
 
         cursor._left = state.left ?? 0;
-        cursor.style.left = "calc(" + ( cursor._left - this.getScrollLeft() ) + "px + " + this.xPadding + ")";
+        cursor.style.left = "calc(" + cursor._left + "px + " + this.xPadding + ")";
         cursor._top = state.top ?? 0;
-        cursor.style.top = "calc(" + ( cursor._top - this.getScrollTop() ) + "px)";
+        cursor.style.top = "calc(" + cursor._top + "px)";
     }
 
     resetCursorPos( flag, cursor ) {
@@ -2923,8 +3001,6 @@ class CodeEditor {
 
             this.resizeScrollBars();
 
-            // console.warn("Resize editor viewport");
-
         }, 10 );
     }
 
@@ -3089,15 +3165,16 @@ class CodeEditor {
         return [ word, from, to ];
     }
 
-    _measureChar( char = "a", get_bb = false ) {
+    _measureChar( char = "a", use_floating = false, get_bb = false ) {
         
-        var test = document.createElement( "pre" );
-        test.className = "codechar";
-        test.innerHTML = char;
-        document.body.appendChild( test );
-        var rect = test.getBoundingClientRect();
-        deleteElement( test );
-        const bb = [ Math.floor( rect.width ), Math.floor( rect.height ) ];
+        var line = document.createElement( "pre" );
+        var text = document.createElement( "span" );
+        line.appendChild( text );
+        text.innerText = char;
+        this.code.appendChild( line );
+        var rect = text.getBoundingClientRect();
+        deleteElement( line );
+        const bb = [ use_floating ? rect.width : Math.floor( rect.width ), use_floating ? rect.height : Math.floor( rect.height ) ];
         return get_bb ? bb : bb[ 0 ];
     }
 
@@ -3344,8 +3421,8 @@ class CodeEditor {
             return;
 
         let cursorData = new LX.vec2( this.position, this.line );
-        let found = null;
-        let idx = -1;
+        let line = null;
+        let char = -1;
 
         if( this._lastResult )
         {
@@ -3354,18 +3431,18 @@ class CodeEditor {
             delete this._lastResult;
         }
 
-        const getIndex = line => {
-            return this.code.lines[ line ].substr( line == cursorData.y ? cursorData.x : 0 ).indexOf( text );
+        const getIndex = l => {
+            return this.code.lines[ l ].substr( l == cursorData.y ? cursorData.x : 0 ).indexOf( text );
         };
 
         if( reverse )
         {
             for( var j = cursorData.y; j >= 0; --j )
             {
-                idx = getIndex( j );
-                if( idx > -1 )
+                char = getIndex( j );
+                if( char > -1 )
                 {
-                    found = j;
+                    line = j;
                     break;
                 }
             }
@@ -3374,30 +3451,36 @@ class CodeEditor {
         {
             for( var j = cursorData.y; j < this.code.lines.length; ++j )
             {
-                idx = getIndex( j );
-                if( idx > -1 )
+                char = getIndex( j );
+                if( char > -1 )
                 {
-                    found = j;
+                    line = j;
                     break;
                 }
             }
         }
 
-        if( found == null)
+        if( line == null)
         {
             alert("No results!")
             return;
         }
         
+        /*
+            Position idx is computed from last pos, which could be in same line,
+            so we search in the substring (first_ocurrence, end). That's why we 
+            have to add the length of the substring (0, first_ocurrence)
+        */
+
+        char += ( line == cursorData.y ? cursorData.x : 0 );
+
         // Text found..
 
         this._lastTextFound = text;
 
-        // console.warn("FOUND!! --", text, "-- at", "[" + idx + ", " + j + "]")
-
         this.codeScroller.scrollTo( 
-            Math.max( idx * this.charWidth - this.codeScroller.clientWidth ), 
-            Math.max( found - 10 ) * this.lineHeight 
+            Math.max( char * this.charWidth - this.codeScroller.clientWidth ), 
+            Math.max( line - 10 ) * this.lineHeight 
         );
 
         // Show elements
@@ -3405,14 +3488,41 @@ class CodeEditor {
 
         // Create new selection instance
         this.selection = new CodeSelection( this, 0, 0, "lexcodesearchresult" );
-        this.selection.selectInline( idx, found, this.measureString( text ) );
+        this.selection.selectInline( char, line, this.measureString( text ) );
         this._lastResult = {
             'dom': this.selections.lastChild,
-            'pos': new LX.vec2( idx + text.length, found )
+            'pos': new LX.vec2( char + text.length, line )
         };
 
     }
 
+    showSearchLineBox() {
+        
+        this.searchlinebox.classList.add( 'opened' );
+        this.searchlineboxActive = true;
+
+        const input = this.searchlinebox.querySelector( 'input' );
+        input.value = ":";
+        input.focus();
+    }
+
+    hideSearchLineBox() {
+
+        if( this.searchlineboxActive )
+        {
+            this.searchlinebox.classList.remove( 'opened' );
+            this.searchlineboxActive = false;
+        }
+    }
+
+    goToLine( line ) {
+
+        if( !this.isNumber( line ) )
+            return;
+
+        this.codeScroller.scrollTo( 0, Math.max( line - 15 ) * this.lineHeight );
+    }
+
     _updateDataInfoPanel( signal, value ) {
 
         if( !this.skipCodeInfo )
@@ -3445,6 +3555,46 @@ class CodeEditor {
         }
     }
 
+    _increaseFontSize() {
+
+        // Change font size
+
+        var r = document.querySelector( ':root' );
+        var s = getComputedStyle( r );
+        var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
+        pixels = LX.UTILS.clamp( pixels + 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
+        r.style.setProperty( "--code-editor-font-size", pixels + "px" );
+        this.charWidth = this._measureChar( "a", true );
+
+        // Change row size
+
+        var row_pixels = pixels + 6;
+        r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
+        this.lineHeight = row_pixels;
+
+        this.processLines(); // ... it's necessary?
+    }
+
+    _decreaseFontSize() {
+
+        // Change font size
+
+        var r = document.querySelector( ':root' );
+        var s = getComputedStyle( r );
+        var pixels = parseInt( s.getPropertyValue( "--code-editor-font-size" ) );
+        pixels = LX.UTILS.clamp( pixels - 1, CodeEditor.CODE_MIN_FONT_SIZE, CodeEditor.CODE_MAX_FONT_SIZE );
+        r.style.setProperty( "--code-editor-font-size", pixels + "px" );
+        this.charWidth = this._measureChar( "a", true );
+
+        // Change row size
+
+        var row_pixels = pixels + 6;
+        r.style.setProperty( "--code-editor-row-height", row_pixels + "px" );
+        this.lineHeight = row_pixels;
+
+        this.processLines(); // ... it's necessary?
+    }
+
     _clearTmpVariables() {
 
         delete this._currentLineString;

package/build/lexgui.css

@@ -18,6 +18,8 @@
   --global-dark-background: #14161a;
   --global-blur-background: #28292ba9;
   --transition-time: 1000;
+  --code-editor-font-size: 14px;
+  --code-editor-row-height: 20px;
 } 
 
 /* Some global colors */
@@ -2819,7 +2821,7 @@ ul.lexassetscontent {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "ss04", "ss05";
-  font-size: 0.8rem;
+  font-size: var(--code-editor-font-size);
   padding-right: 6px;
   position: relative;
 }
@@ -2829,7 +2831,7 @@ ul.lexassetscontent {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "ss04", "ss05";
-  font-size: 0.8rem;
+  font-size: var(--code-editor-font-size);
   position: absolute;
   top: 0;
   left: 0;
@@ -2852,7 +2854,7 @@ ul.lexassetscontent {
   position: relative;
   overflow: visible;
   -webkit-tap-highlight-color: transparent;
-  height: 20px;
+  height: var(--code-editor-row-height);
   pointer-events: none;
 }
 
@@ -2871,16 +2873,15 @@ ul.lexassetscontent {
   -webkit-tap-highlight-color: transparent;
   box-sizing: border-box;
   display: inline-block;
-  height: 16px;
 }
 
 pre .line-gutter {
   color: #8a8b97;
   width: 48px;
-  height: 20px;
-  font-size: 14px;
+  height: var(--code-editor-row-height);
+  font-size: var(--code-editor-font-size);
   font-weight: 400;
-  line-height: 20px;
+  line-height: var(--code-editor-row-height);
   text-align: center;
   -webkit-user-select: none; /* Safari 3.1+ */
   -moz-user-select: none; /* Firefox 2+ */
@@ -2919,12 +2920,12 @@ pre .line-gutter {
   padding: 0;
   border-right: none;
   width: 0;
+  height: var(--code-editor-row-height);
   position: absolute;
   border-left: 3px solid #fff !important;
   z-index: 0 !important;
   left: 0px;
   top: 0px;
-  height: 20px;
 }
 
 .lexcodescrollbar {
@@ -2987,7 +2988,7 @@ pre .line-gutter {
   left: 0px;
   top: 0px;
   width: 100px;
-  height: 20px;
+  height: var(--code-editor-row-height);
   background-color: var(--global-selected);
   opacity: 0.4;
 }
@@ -3012,6 +3013,10 @@ pre .line-gutter {
   transition: transform 0.2s ease-in;
 }
 
+.lexcodeeditor .searchbox.gotoline {
+  width: 124px;
+}
+
 .lexcodeeditor .searchbox.opened {
   transform: translateY(0px);
 }

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.21",
+        version: "0.1.22",
         ready: false,
         components: [], // specific pre-build components
         signals: {} // events and triggers

package/build/lexgui.module.js

@@ -8,7 +8,7 @@
 */
 
 var LX = {
-    version: "0.1.21",
+    version: "0.1.22",
     ready: false,
     components: [], // specific pre-build components
     signals: {} // events and triggers

package/changelog.md

@@ -1,5 +1,12 @@
 # lexgui.js changelog
 
+## 0.1.22
+
+Added REDO using "Ctrl+Y".
+Added FontSize customization. "Ctrl+PLUS", "Ctrl+MINUS" or "Ctrl+Wheel".
+Added "Ctrl+G" to scroll to specific line.
+General bug fixes.
+
 ## 0.1.21
 
 Added "Ctrl+F" to find text in code tabs.

package/examples/code_editor.html

@@ -23,7 +23,7 @@
         // init library and get main area
         let area = LX.init();
 
-        const file_explorer = false;
+        const file_explorer = true;
 
         if( !file_explorer )
         {
@@ -53,12 +53,12 @@
         });
 
         editor.loadFile( "../data/js_sample.js" );
-        // editor.loadFile( "../data/json_sample.json" );
-        // editor.loadFile( "../data/css_sample.css" );
-        // editor.loadFile( "../data/cpp_sample.cpp" );
-        // editor.loadFile( "../data/xml_sample.xml" );
-        // editor.loadFile( "../data/python_sample.py" );
-        // editor.loadFile( "../data/rust_sample.rs" );
+        editor.loadFile( "../data/json_sample.json" );
+        editor.loadFile( "../data/css_sample.css" );
+        editor.loadFile( "../data/cpp_sample.cpp" );
+        editor.loadFile( "../data/xml_sample.xml" );
+        editor.loadFile( "../data/python_sample.py" );
+        editor.loadFile( "../data/rust_sample.rs" );
         // editor.loadFile( "../localhost.bat" );
         
         if( !file_explorer )

package/package.json

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