fix(whiteboard): window-manager repeat mount when whiteboard unMount

netless-io · Oct 19, 2021 · ab627cf · ab627cf
1 parent a87b1e5
commit ab627cf
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/desktop/renderer-app/src/components/Whiteboard.tsx b/desktop/renderer-app/src/components/Whiteboard.tsx
@@ -11,18 +11,21 @@ import { WhiteboardStore } from "../stores/whiteboard-store";
 import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
 import { ScenesController } from "flat-components";
 import { AppStoreButton } from "./AppStoreButton";
+import { useIsUnMounted } from "../utils/hooks/lifecycle";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
 }
 
 export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteboardStore }) {
     const { room } = whiteboardStore;
+    const isUnMountedRef = useIsUnMounted();
 
     const [whiteboardEl, setWhiteboardEl] = useState<HTMLElement | null>(null);
     const [collectorEl, setCollectorEl] = useState<HTMLElement | null>(null);
 
     useEffect(() => {
+        let isLoaded = false;
         const mountWindowManager = async (): Promise<void> => {
             if (whiteboardEl && collectorEl && room) {
                 await WindowManager.mount({
@@ -40,12 +43,23 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
                     },
                     chessboard: false,
                 });
-                whiteboardStore.onMainViewModeChange();
-                whiteboardStore.onWindowManagerBoxStateChange();
+                if (isUnMountedRef.current) {
+                    whiteboardStore.destroyWindowManager();
+                } else {
+                    isLoaded = true;
+                    whiteboardStore.onMainViewModeChange();
+                    whiteboardStore.onWindowManagerBoxStateChange();
+                }
             }
         };
 
         void mountWindowManager();
+
+        return () => {
+            if (isLoaded) {
+                whiteboardStore.destroyWindowManager();
+            }
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [whiteboardEl, collectorEl, room]);
 

diff --git a/desktop/renderer-app/src/stores/whiteboard-store.ts b/desktop/renderer-app/src/stores/whiteboard-store.ts
@@ -217,6 +217,10 @@ export class WhiteboardStore {
         });
     };
 
+    public destroyWindowManager = (): void => {
+        this.windowManager?.destroy();
+    };
+
     public async joinWhiteboardRoom(): Promise<void> {
         if (!globalStore.userUUID) {
             throw new Error("Missing userUUID");
@@ -372,7 +376,7 @@ export class WhiteboardStore {
 
     public destroy(): void {
         this.preloadPPTResource.cancel();
-        this.windowManager?.destroy();
+        this.destroyWindowManager();
         this.room?.callbacks.off();
 
         if (NODE_ENV === "development") {

diff --git a/web/flat-web/src/components/Whiteboard.tsx b/web/flat-web/src/components/Whiteboard.tsx
@@ -11,18 +11,21 @@ import { WhiteboardStore } from "../stores/whiteboard-store";
 import { isSupportedImageType, onDropImage } from "../utils/dnd/image";
 import { ScenesController } from "../../../../packages/flat-components/src";
 import { AppStoreButton } from "./AppStoreButton";
+import { useIsUnMounted } from "../utils/hooks/lifecycle";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
 }
 
 export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteboardStore }) {
     const { room } = whiteboardStore;
+    const isUnMountedRef = useIsUnMounted();
 
     const [whiteboardEl, setWhiteboardEl] = useState<HTMLElement | null>(null);
     const [collectorEl, setCollectorEl] = useState<HTMLElement | null>(null);
 
     useEffect(() => {
+        let isLoaded = false;
         const mountWindowManager = async (): Promise<void> => {
             if (whiteboardEl && collectorEl && room) {
                 await WindowManager.mount({
@@ -40,12 +43,23 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
                     },
                     chessboard: false,
                 });
-                whiteboardStore.onMainViewModeChange();
-                whiteboardStore.onWindowManagerBoxStateChange();
+                if (isUnMountedRef.current) {
+                    whiteboardStore.destroyWindowManager();
+                } else {
+                    isLoaded = true;
+                    whiteboardStore.onMainViewModeChange();
+                    whiteboardStore.onWindowManagerBoxStateChange();
+                }
             }
         };
 
         void mountWindowManager();
+
+        return () => {
+            if (isLoaded) {
+                whiteboardStore.destroyWindowManager();
+            }
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [whiteboardEl, collectorEl, room]);
 

diff --git a/web/flat-web/src/stores/whiteboard-store.ts b/web/flat-web/src/stores/whiteboard-store.ts
@@ -230,6 +230,10 @@ export class WhiteboardStore {
         });
     };
 
+    public destroyWindowManager = (): void => {
+        this.windowManager?.destroy();
+    };
+
     public async joinWhiteboardRoom(): Promise<void> {
         if (!globalStore.userUUID) {
             throw new Error("Missing userUUID");
@@ -380,7 +384,7 @@ export class WhiteboardStore {
 
     public destroy(): void {
         this.preloadPPTResource.cancel();
-        this.windowManager?.destroy();
+        this.destroyWindowManager();
         this.room?.callbacks.off();
 
         if (NODE_ENV === "development") {