sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Do not store cursor position in state (#557)

Browse Source 
* Do not store cursor position in state

Storing it in state causes a full re-render. The only time we use the cursor position is for pasting. This halves the number of renders on drag.

* remove passive change
This commit is contained in:
Christopher Chedeau 2020-01-25 11:38:08 -08:00 committed by GitHub
parent 5b19aeafe9
commit c697938350
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/index.tsx
View File

@ -136,6 +136,9 @@ function pickAppStatePropertiesForHistory(
};
}
let cursorX = 0;
let cursorY = 0;
export class App extends React.Component<any, AppState> {
canvas: HTMLCanvasElement | null = null;
rc: RoughCanvas | null = null;
@ -229,7 +232,7 @@ export class App extends React.Component<any, AppState> {
document.addEventListener("cut", this.onCut);
document.addEventListener("keydown", this.onKeyDown, false);
document.addEventListener("mousemove", this.getCurrentCursorPosition);
document.addEventListener("mousemove", this.updateCurrentCursorPosition);
window.addEventListener("resize", this.onResize, false);
window.addEventListener("unload", this.onUnload, false);
@ -262,7 +265,7 @@ export class App extends React.Component<any, AppState> {
document.removeEventListener("keydown", this.onKeyDown, false);
document.removeEventListener(
"mousemove",
this.getCurrentCursorPosition,
this.updateCurrentCursorPosition,
false,
);
window.removeEventListener("resize", this.onResize, false);
@ -275,8 +278,9 @@ export class App extends React.Component<any, AppState> {
this.forceUpdate();
};
private getCurrentCursorPosition = (e: MouseEvent) => {
this.setState({ cursorX: e.x, cursorY: e.y });
private updateCurrentCursorPosition = (e: MouseEvent) => {
cursorX = e.x;
cursorY = e.y;
};
private onKeyDown = (event: KeyboardEvent) => {
@ -1397,12 +1401,12 @@ export class App extends React.Component<any, AppState> {
const elementsCenterY = distance(subCanvasY1, subCanvasY2) / 2;
const dx =
this.state.cursorX -
cursorX -
this.state.scrollX -
CANVAS_WINDOW_OFFSET_LEFT -
elementsCenterX;
const dy =
this.state.cursorY -
cursorY -
this.state.scrollY -
CANVAS_WINDOW_OFFSET_TOP -
elementsCenterY;