From 17e9cc450626e4c709b7f40a9ac2ac6e7c173e39 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Sat, 30 May 2020 18:56:17 +0530 Subject: [PATCH] Some cleanup in App.tsx (#1681) --- src/components/App.tsx | 124 +++++++++++++++++++++-------------------- src/constants.ts | 2 + src/time_constants.ts | 1 + 3 files changed, 67 insertions(+), 60 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 3dab6d6d..ce24405f 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -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 { canvas: HTMLCanvasElement | null = null; rc: RoughCanvas | null = null; @@ -178,9 +178,8 @@ class App extends React.Component { lastBroadcastedOrReceivedSceneVersion: number = -1; broadcastedElementVersions: Map = 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 { } }; - 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 { 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 { 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 { ); }; - private resetTapTwice() { + private static resetTapTwice() { didTapTwice = false; } @@ -649,7 +653,7 @@ class App extends React.Component { didTapTwice = true; clearTimeout(tappedTwiceTimer); tappedTwiceTimer = window.setTimeout( - this.resetTapTwice, + App.resetTapTwice, TAP_TWICE_TIMEOUT, ); return; @@ -932,7 +936,7 @@ class App extends React.Component { // 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 { 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 { action: this.copyToClipboardAsSvg, }, ...this.actionManager.getContextMenuItems( - (action) => !this.canvasOnlyActions.includes(action.name), + (action) => !CANVAS_ONLY_ACTIONS.includes(action.name), ), ], top: event.clientY, diff --git a/src/constants.ts b/src/constants.ts index 1e1c33b1..b5d884d2 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -65,3 +65,5 @@ export const FONT_FAMILY = { 2: "Helvetica", 3: "Cascadia", } as const; + +export const CANVAS_ONLY_ACTIONS = ["selectAll"]; diff --git a/src/time_constants.ts b/src/time_constants.ts index c673274d..739dbf95 100644 --- a/src/time_constants.ts +++ b/src/time_constants.ts @@ -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;