CE: Custom editor font scale

jxarco · Jan 29, 2024 · 29068ad · 29068ad
1 parent da96e09
commit 29068ad
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/build/components/codeeditor.js b/build/components/codeeditor.js
@@ -201,7 +201,7 @@ class CodeEditor {
     static WORD_TYPE_METHOD = 0;
     static WORD_TYPE_CLASS  = 1;
 
-    static CODE_MAX_FONT_SIZE = 17;
+    static CODE_MAX_FONT_SIZE = 20;
     static CODE_MIN_FONT_SIZE = 11;
 
     /**
@@ -1588,6 +1588,7 @@ class CodeEditor {
             this.lastMouseDown = LX.getTime();
             this.state.selectingText = true;
             this.endSelection();
+            this.processClick( e );
         }
 
         else if( e.type == 'mouseup' )
@@ -1651,9 +1652,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();
         }
 
@@ -2974,8 +2974,6 @@ class CodeEditor {
 
             this.resizeScrollBars();
 
-            // console.warn("Resize editor viewport");
-
         }, 10 );
     }
 
@@ -3504,22 +3502,42 @@ 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?
     }
 

diff --git a/build/lexgui.css b/build/lexgui.css
@@ -19,6 +19,7 @@
   --global-blur-background: #28292ba9;
   --transition-time: 1000;
   --code-editor-font-size: 14px;
+  --code-editor-row-height: 20px;
 } 
 
 /* Some global colors */
@@ -2853,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;
 }
 
@@ -2872,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+ */
@@ -2920,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 {
@@ -2988,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;
 }