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