From b073b65c8a425c50dc111061d703284f0b48e6bf Mon Sep 17 00:00:00 2001
From: cheerchen <meetcheerego@gmail.com>
Date: Tue, 19 Oct 2021 10:31:57 +0800
Subject: [PATCH] fix(whiteboard): window-manager repeat mount when whiteboard
 unMount

---
 desktop/renderer-app/src/components/Whiteboard.tsx | 14 ++++++++++++--
 .../renderer-app/src/stores/whiteboard-store.ts    |  7 ++++++-
 web/flat-web/src/components/Whiteboard.tsx         | 14 ++++++++++++--
 web/flat-web/src/stores/whiteboard-store.ts        |  7 ++++++-
 4 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/desktop/renderer-app/src/components/Whiteboard.tsx b/desktop/renderer-app/src/components/Whiteboard.tsx
index 8d23159224d..322ed949302 100644
--- a/desktop/renderer-app/src/components/Whiteboard.tsx
+++ b/desktop/renderer-app/src/components/Whiteboard.tsx
@@ -11,6 +11,7 @@ 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;
@@ -18,6 +19,7 @@ export interface WhiteboardProps {
 
 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);
@@ -40,12 +42,20 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
                     },
                     chessboard: false,
                 });
-                whiteboardStore.onMainViewModeChange();
-                whiteboardStore.onWindowManagerBoxStateChange();
+                if (isUnMountedRef.current) {
+                    whiteboardStore.destroyWindowManager();
+                } else {
+                    whiteboardStore.onMainViewModeChange();
+                    whiteboardStore.onWindowManagerBoxStateChange();
+                }
             }
         };
 
         void mountWindowManager();
+
+        return () => {
+            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
index 831cabcd2c6..3ef9fcdb1ad 100644
--- a/desktop/renderer-app/src/stores/whiteboard-store.ts
+++ b/desktop/renderer-app/src/stores/whiteboard-store.ts
@@ -217,6 +217,11 @@ export class WhiteboardStore {
         });
     };
 
+    public destroyWindowManager = (): void => {
+        this.windowManager?.destroy();
+        this.windowManager = null;
+    };
+
     public async joinWhiteboardRoom(): Promise<void> {
         if (!globalStore.userUUID) {
             throw new Error("Missing userUUID");
@@ -372,7 +377,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
index e5cccbb5062..7b421004fad 100644
--- a/web/flat-web/src/components/Whiteboard.tsx
+++ b/web/flat-web/src/components/Whiteboard.tsx
@@ -11,6 +11,7 @@ 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;
@@ -18,6 +19,7 @@ export interface WhiteboardProps {
 
 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);
@@ -40,12 +42,20 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
                     },
                     chessboard: false,
                 });
-                whiteboardStore.onMainViewModeChange();
-                whiteboardStore.onWindowManagerBoxStateChange();
+                if (isUnMountedRef.current) {
+                    whiteboardStore.destroyWindowManager();
+                } else {
+                    whiteboardStore.onMainViewModeChange();
+                    whiteboardStore.onWindowManagerBoxStateChange();
+                }
             }
         };
 
         void mountWindowManager();
+
+        return () => {
+            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
index e275dd0b700..4221ac828b9 100644
--- a/web/flat-web/src/stores/whiteboard-store.ts
+++ b/web/flat-web/src/stores/whiteboard-store.ts
@@ -230,6 +230,11 @@ export class WhiteboardStore {
         });
     };
 
+    public destroyWindowManager = (): void => {
+        this.windowManager?.destroy();
+        this.windowManager = null;
+    };
+
     public async joinWhiteboardRoom(): Promise<void> {
         if (!globalStore.userUUID) {
             throw new Error("Missing userUUID");
@@ -380,7 +385,7 @@ export class WhiteboardStore {
 
     public destroy(): void {
         this.preloadPPTResource.cancel();
-        this.windowManager?.destroy();
+        this.destroyWindowManager();
         this.room?.callbacks.off();
 
         if (NODE_ENV === "development") {