0ct0pu5/rustpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* 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
This commit is contained in:
Eric Zhang 2021-09-18 23:10:07 -04:00 • committed by GitHub
parent 403f36cd36
commit 503a189893
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 4204 additions and 4203 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8369
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

20
package.json
View file

@ -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": {

18
src/rustpad.ts
View file

@ -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();
}
}