0.1.4: customizable debouce/throttle on left line numbers

Author: alastairsounds

CHANGELOG.md

@@ -61,3 +61,8 @@ This version doesn't work
 
 - Add customizable font settings
 - New extension icon!
+
+## [0.1.4] - 2025-01-03
+
+- Added delay functionality to prevent re-rendering on repeated vim motions (e.g. `9j` or `12k`)
+- Added delay configuration option to extension settings

README.md

@@ -2,7 +2,7 @@
 
 This is a Visual Studio Code extension that allows you adjust the display of line numbers to a combination of absolute and relative settings.
 
-This should be helpful if you use one of the Vim plugins [VSCodeVim](#https://github.com/VSCodeVim/Vim), or are learning Vim like me.
+This should be helpful if you use one of the Vim plugins [VSCodeVim](https://github.com/VSCodeVim/Vim), or are learning Vim like me.
 
 The Visual Studio Code API doesn't support a great way to display anything on the left of the built-in line numbers. Therefore, "gutterIcon" is used to display the left line numbers as SVGs.
 

package.json

@@ -4,7 +4,7 @@
   "description": "Display both absolute and relative line numbers.",
   "license": "GPL-3.0-or-later",
   "icon": "icon.png",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "publisher": "slhsxcmy",
   "extensionKind": [
     "ui"
@@ -22,6 +22,11 @@
   "contributes": {
     "configuration": {
       "properties": {
+        "vscode-double-line-numbers.delay": {
+          "type": "number",
+          "default": 50,
+          "markdownDescription": "Delay in milliseconds for throttling line number updates. Default is 50ms."
+        },
         "vscode-double-line-numbers.font.color": {
           "type": "string",
           "default": "#858585",
@@ -88,23 +93,24 @@
     "test": "node ./out/test/runTest.js"
   },
   "devDependencies": {
-    "@types/vscode": "^1.60.0",
     "@types/glob": "^7.1.4",
     "@types/mocha": "^9.0.0",
     "@types/node": "14.x",
+    "@types/vscode": "^1.60.0",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
+    "@vscode/test-electron": "^2.4.1",
     "eslint": "^7.32.0",
     "glob": "^7.1.7",
     "mocha": "^9.1.1",
-    "typescript": "^4.4.3",
     "ts-loader": "^9.2.5",
-    "webpack": "^5.52.1",
-    "webpack-cli": "^4.8.0",
-    "@vscode/test-electron": "^1.6.2"
+    "typescript": "^4.4.3",
+    "webpack": "^5.97.1",
+    "webpack-cli": "^6.0.1"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/slhsxcmy/vscode-double-line-numbers/"
-  }
+  },
+  "packageManager": "[email protected]"
 }

src/extension.ts

@@ -30,7 +30,6 @@ class LineNumberManager {
   readonly NO_DECOR = -1;
 
   context: vscode.ExtensionContext;
-
   /* decorTypeMap
     {
       editor0: {
@@ -52,6 +51,7 @@ class LineNumberManager {
     Map<number, vscode.TextEditorDecorationType>
   >;
   decorNumMap: Map<vscode.TextEditor, Map<number, number>>;
+  updateDecorDebounced!: (editor: vscode.TextEditor) => void;
 
   /**
    * Constructor of LineNumberManager
@@ -63,9 +63,30 @@ class LineNumberManager {
     this.decorTypeMap = new Map();
     this.decorNumMap = new Map();
 
+    this.initializeUpdateDecorDebounced();
+
+    vscode.workspace.onDidChangeConfiguration((e) => {
+      if (e.affectsConfiguration("vscode-double-line-numbers.delay")) {
+        this.initializeUpdateDecorDebounced();
+      }
+    });
+
     this.updateAllDecor();
   }
 
+  /**
+   * Updates the delay time and debounced function based on configuration
+   */
+  private initializeUpdateDecorDebounced() {
+    const delayTime = vscode.workspace
+      .getConfiguration()
+      .get("vscode-double-line-numbers.delay", 50);
+    this.updateDecorDebounced = this.debounce(
+      this.updateDecor.bind(this),
+      delayTime
+    );
+  }
+
   /**
    * Getter of right state
    * @returns {vscode.TextEditorLineNumbersStyle} right state
@@ -114,7 +135,9 @@ class LineNumberManager {
    * @param {string} key left state key, one of "abs_rel", "rel_abs", "abs", "rel", "off"
    */
   setLeftState(key: string) {
-    if (this.getLeftState() === leftStateMap[key]) return; // Optimization
+    if (this.getLeftState() === leftStateMap[key]) {
+      return;
+    }
     this.context.globalState.update(this.LEFT_STATE_STORE, leftStateMap[key]);
     this.updateAllDecor();
   }
@@ -124,7 +147,7 @@ class LineNumberManager {
    */
   updateAllDecor() {
     vscode.window.visibleTextEditors.forEach((editor) => {
-      this.updateDecor(editor);
+      this.updateDecorDebounced(editor);
     });
   }
 
@@ -141,9 +164,12 @@ class LineNumberManager {
     const activeLine = editor.selection.active.line;
 
     // Create new map
-    if (!this.decorTypeMap.has(editor))
+    if (!this.decorTypeMap.has(editor)) {
       this.decorTypeMap.set(editor, new Map());
-    if (!this.decorNumMap.has(editor)) this.decorNumMap.set(editor, new Map());
+    }
+    if (!this.decorNumMap.has(editor)) {
+      this.decorNumMap.set(editor, new Map());
+    }
 
     for (let i = start; i <= end; ++i) {
       let num: number;
@@ -167,10 +193,11 @@ class LineNumberManager {
 
     // apply decor
     for (let i = start; i <= end; ++i) {
-      if (this.decorNumMap.get(editor)!.has(i))
+      if (this.decorNumMap.get(editor)!.has(i)) {
         editor.setDecorations(this.decorTypeMap.get(editor)!.get(i)!, [
           new vscode.Range(i, 0, i, 0),
         ]);
+      }
     }
   }
 
@@ -189,6 +216,35 @@ class LineNumberManager {
       return vscode.window.createTextEditorDecorationType({});
     }
   }
+
+  /**
+   * Creates a debounced function that delays invoking the provided function until after a specified wait time has elapsed
+   * since the last time the debounced function was invoked. Optionally, the function can be invoked immediately on the first call.
+   *
+   * @param func - The function to debounce.
+   * @param wait - The number of milliseconds to delay.
+   * @param immediate - If `true`, the function will be invoked on the leading edge of the timeout, instead of the trailing.
+   * @returns A new debounced function.
+   */
+  debounce(func: Function, wait: number, immediate: boolean = false) {
+    let timeout: NodeJS.Timeout | null = null;
+    return (...args: any[]) => {
+      const later = () => {
+        timeout = null;
+        if (!immediate) {
+          func(...args);
+        }
+      };
+      const callNow = immediate && !timeout;
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(later, wait);
+      if (callNow) {
+        func(...args);
+      }
+    };
+  }
 }
 
 /**
@@ -271,17 +327,19 @@ export function activate(context: vscode.ExtensionContext) {
 
   // scroll; create/delete new lines
   vscode.window.onDidChangeTextEditorVisibleRanges((event) => {
-    mgr.updateDecor(event.textEditor);
+    mgr.updateDecorDebounced(event.textEditor);
   });
 
   // click into different editor
   vscode.window.onDidChangeActiveTextEditor((editor) => {
-    if (editor) mgr.updateDecor(editor);
+    if (editor) {
+      mgr.updateDecorDebounced(editor);
+    }
   });
 
   // select new lines in editor
   vscode.window.onDidChangeTextEditorSelection((event) => {
-    mgr.updateDecor(event.textEditor);
+    mgr.updateDecorDebounced(event.textEditor);
   });
 
   // open/close editors