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

Some cleanup in App.tsx (#1681)

Browse Source
This commit is contained in:
Aakansha Doshi 2020-05-30 18:56:17 +05:30 committed by GitHub
parent fa359034c5
commit 17e9cc4506
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/App.tsx
View File

@ -110,10 +110,12 @@ import {
SCENE,
EVENT,
ENV,
CANVAS_ONLY_ACTIONS,
} from "../constants";
import {
INITAL_SCENE_UPDATE_TIMEOUT,
TAP_TWICE_TIMEOUT,
SYNC_FULL_SCENE_INTERVAL_MS,
} from "../time_constants";
import LayerUI from "./LayerUI";
@ -169,8 +171,6 @@ const gesture: Gesture = {
initialScale: null,
};
const SYNC_FULL_SCENE_INTERVAL_MS = 20000;
class App extends React.Component<any, AppState> {
canvas: HTMLCanvasElement | null = null;
rc: RoughCanvas | null = null;
@ -178,9 +178,8 @@ class App extends React.Component<any, AppState> {
lastBroadcastedOrReceivedSceneVersion: number = -1;
broadcastedElementVersions: Map<string, number> = new Map();
removeSceneCallback: SceneStateCallbackRemover | null = null;
unmounted: boolean = false;
actionManager: ActionManager;
canvasOnlyActions = ["selectAll"];
public state: AppState = {
...getDefaultAppState(),
@ -362,12 +361,10 @@ class App extends React.Component<any, AppState> {
}
};
private unmounted = false;
public async componentDidMount() {
if (
process.env.NODE_ENV === "test" ||
process.env.NODE_ENV === "development"
process.env.NODE_ENV === ENV.TEST ||
process.env.NODE_ENV === ENV.DEVELOPMENT
) {
const setState = this.setState.bind(this);
Object.defineProperties(window.h, {
@ -394,6 +391,60 @@ class App extends React.Component<any, AppState> {
this.onSceneUpdated,
);
this.addEventListeners();
this.initializeScene();
}
public componentWillUnmount() {
this.unmounted = true;
this.removeSceneCallback!();
this.removeEventListeners();
}
private onResize = withBatchedUpdates(() => {
globalSceneState
.getElementsIncludingDeleted()
.forEach((element) => invalidateShapeForElement(element));
this.setState({});
});
private removeEventListeners() {
document.removeEventListener(EVENT.COPY, this.onCopy);
document.removeEventListener(EVENT.PASTE, this.pasteFromClipboard);
document.removeEventListener(EVENT.CUT, this.onCut);
document.removeEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
document.removeEventListener(
EVENT.MOUSE_MOVE,
this.updateCurrentCursorPosition,
false,
);
document.removeEventListener(EVENT.KEYUP, this.onKeyUp);
window.removeEventListener(EVENT.RESIZE, this.onResize, false);
window.removeEventListener(EVENT.UNLOAD, this.onUnload, false);
window.removeEventListener(EVENT.BLUR, this.onBlur, false);
window.removeEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
window.removeEventListener(EVENT.DROP, this.disableEvent, false);
document.removeEventListener(
EVENT.GESTURE_START,
this.onGestureStart as any,
false,
);
document.removeEventListener(
EVENT.GESTURE_CHANGE,
this.onGestureChange as any,
false,
);
document.removeEventListener(
EVENT.GESTURE_END,
this.onGestureEnd as any,
false,
);
window.removeEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload);
}
private addEventListeners() {
document.addEventListener(EVENT.COPY, this.onCopy);
document.addEventListener(EVENT.PASTE, this.pasteFromClipboard);
document.addEventListener(EVENT.CUT, this.onCut);
@ -430,55 +481,8 @@ class App extends React.Component<any, AppState> {
false,
);
window.addEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload);
this.initializeScene();
}
public componentWillUnmount() {
this.unmounted = true;
this.removeSceneCallback!();
document.removeEventListener(EVENT.COPY, this.onCopy);
document.removeEventListener(EVENT.PASTE, this.pasteFromClipboard);
document.removeEventListener(EVENT.CUT, this.onCut);
document.removeEventListener(EVENT.KEYDOWN, this.onKeyDown, false);
document.removeEventListener(
EVENT.MOUSE_MOVE,
this.updateCurrentCursorPosition,
false,
);
document.removeEventListener(EVENT.KEYUP, this.onKeyUp);
window.removeEventListener(EVENT.RESIZE, this.onResize, false);
window.removeEventListener(EVENT.UNLOAD, this.onUnload, false);
window.removeEventListener(EVENT.BLUR, this.onBlur, false);
window.removeEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
window.removeEventListener(EVENT.DROP, this.disableEvent, false);
document.removeEventListener(
EVENT.GESTURE_START,
this.onGestureStart as any,
false,
);
document.removeEventListener(
EVENT.GESTURE_CHANGE,
this.onGestureChange as any,
false,
);
document.removeEventListener(
EVENT.GESTURE_END,
this.onGestureEnd as any,
false,
);
window.removeEventListener(EVENT.BEFORE_UNLOAD, this.beforeUnload);
}
private onResize = withBatchedUpdates(() => {
globalSceneState
.getElementsIncludingDeleted()
.forEach((element) => invalidateShapeForElement(element));
this.setState({});
});
private beforeUnload = withBatchedUpdates((event: BeforeUnloadEvent) => {
if (
this.state.isCollaborating &&
@ -640,7 +644,7 @@ class App extends React.Component<any, AppState> {
);
};
private resetTapTwice() {
private static resetTapTwice() {
didTapTwice = false;
}
@ -649,7 +653,7 @@ class App extends React.Component<any, AppState> {
didTapTwice = true;
clearTimeout(tappedTwiceTimer);
tappedTwiceTimer = window.setTimeout(
this.resetTapTwice,
App.resetTapTwice,
TAP_TWICE_TIMEOUT,
);
return;
@ -932,7 +936,7 @@ class App extends React.Component<any, AppState> {
// undo, a user makes a change, and then try to redo, your element(s) will be lost. However,
// right now we think this is the right tradeoff.
history.clear();
if (this.portal.socketInitialized === false) {
if (!this.portal.socketInitialized) {
initialize();
}
};
@ -2704,7 +2708,7 @@ class App extends React.Component<any, AppState> {
action: this.copyToClipboardAsSvg,
},
...this.actionManager.getContextMenuItems((action) =>
this.canvasOnlyActions.includes(action.name),
CANVAS_ONLY_ACTIONS.includes(action.name),
),
],
top: event.clientY,
@ -2736,7 +2740,7 @@ class App extends React.Component<any, AppState> {
action: this.copyToClipboardAsSvg,
},
...this.actionManager.getContextMenuItems(
(action) => !this.canvasOnlyActions.includes(action.name),
(action) => !CANVAS_ONLY_ACTIONS.includes(action.name),
),
],
top: event.clientY,

2
src/constants.ts
View File

@ -65,3 +65,5 @@ export const FONT_FAMILY = {
2: "Helvetica",
3: "Cascadia",
} as const;
export const CANVAS_ONLY_ACTIONS = ["selectAll"];

1
src/time_constants.ts
View File

@ -1,3 +1,4 @@
// time in milliseconds
export const TAP_TWICE_TIMEOUT = 300;
export const INITAL_SCENE_UPDATE_TIMEOUT = 5000;
export const SYNC_FULL_SCENE_INTERVAL_MS = 20000;