Просмотр исходного кода

Optimization: debounce user cursor updates by 20ms (#26)

* Optimization: debounce user cursor updates by 20ms

This noticeably improves performance on initial page load for documents
with large histories, as previously, the user sent one cursor update message
for every past edit to the document upon joining. Now, they only send a
single cursor update at the end of the update sequence, due to the
20ms debouncing operation.

* Update NPM dependency versions
Eric Zhang 3 лет назад
Родитель
Сommit
503a189893
3 измененных файлов с 512 добавлено и 354 удалено
  1. 491 337
      package-lock.json
  2. 11 9
      package.json
  3. 10 8
      src/rustpad.ts

Разница между файлами не показана из-за своего большого размера
+ 491 - 337
package-lock.json


+ 11 - 9
package.json

@@ -10,26 +10,28 @@
     "format": "prettier --write ."
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.6.3",
-    "@emotion/react": "^11.4.0",
+    "@chakra-ui/react": "^1.6.7",
+    "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@monaco-editor/react": "^4.1.3",
+    "@monaco-editor/react": "^4.2.2",
     "framer-motion": "^4.1.17",
+    "lodash.debounce": "^4.0.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.2.0",
     "react-scripts": "4.0.3",
     "rustpad-wasm": "file:./rustpad-wasm/pkg",
-    "use-local-storage-state": "^10.0.0"
+    "use-local-storage-state": "^11.0.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5",
-    "monaco-editor": "^0.23.0",
-    "prettier": "2.3.0",
+    "@types/lodash.debounce": "^4.0.6",
+    "@types/react": "^17.0.21",
+    "@types/react-dom": "^17.0.9",
+    "monaco-editor": "^0.27.0",
+    "prettier": "2.4.1",
     "raw.macro": "^0.4.2",
     "react-app-rewired": "^2.1.8",
-    "typescript": "^4.3.2",
+    "typescript": "^4.4.3",
     "wasm-loader": "^1.3.0"
   },
   "eslintConfig": {

+ 10 - 8
src/rustpad.ts

@@ -4,6 +4,7 @@ import type {
   IDisposable,
   IPosition,
 } from "monaco-editor/esm/vs/editor/editor.api";
+import debounce from "lodash.debounce";
 
 /** Options passed in to the Rustpad constructor. */
 export type RustpadOptions = {
@@ -56,12 +57,15 @@ class Rustpad {
     this.onChangeHandle = options.editor.onDidChangeModelContent((e) =>
       this.onChange(e)
     );
-    this.onCursorHandle = options.editor.onDidChangeCursorPosition((e) =>
-      this.onCursor(e)
-    );
-    this.onSelectionHandle = options.editor.onDidChangeCursorSelection((e) =>
-      this.onSelection(e)
-    );
+    const cursorUpdate = debounce(() => this.sendCursorData(), 20);
+    this.onCursorHandle = options.editor.onDidChangeCursorPosition((e) => {
+      this.onCursor(e);
+      cursorUpdate();
+    });
+    this.onSelectionHandle = options.editor.onDidChangeCursorSelection((e) => {
+      this.onSelection(e);
+      cursorUpdate();
+    });
     this.beforeUnload = (event: BeforeUnloadEvent) => {
       if (this.outstanding) {
         event.preventDefault();
@@ -412,7 +416,6 @@ class Rustpad {
   private onCursor(event: editor.ICursorPositionChangedEvent) {
     const cursors = [event.position, ...event.secondaryPositions];
     this.cursorData.cursors = cursors.map((p) => unicodeOffset(this.model, p));
-    this.sendCursorData();
   }
 
   private onSelection(event: editor.ICursorSelectionChangedEvent) {
@@ -421,7 +424,6 @@ class Rustpad {
       unicodeOffset(this.model, s.getStartPosition()),
       unicodeOffset(this.model, s.getEndPosition()),
     ]);
-    this.sendCursorData();
   }
 }
 

Некоторые файлы не были показаны из-за большого количества измененных файлов