feat(whiteboard): use fastboard (#1356)

* feat(whiteboard): use the fastboard

* refactor(classroom): remove AppStoreButton components

* refactor(classroom): change destroy methods

* chore(library): add the fastboard and remove unused package

Author: Cheerego7

cspell.config.js

@@ -50,6 +50,7 @@ module.exports = {
         // whiteboard
         "unban",
         "convertcdn",
+        "fastboard",
 
         // date-fns
         "Weekiii",

desktop/renderer-app/package.json

@@ -11,13 +11,12 @@
     "@netless/app-monaco": "^0.1.12",
     "@netless/app-slide": "0.0.56",
     "@netless/combine-player": "^1.1.4",
-    "@netless/cursor-tool": "^0.1.0",
+    "@netless/fastboard": "^0.2.4",
+    "@netless/fastboard-react": "^0.2.4",
     "@netless/fetch-middleware": "^1.0.7",
     "@netless/player-controller": "^0.0.9",
-    "@netless/redo-undo": "^0.1.9",
-    "@netless/tool-box": "^0.1.6",
     "@netless/video-js-plugin": "^0.3.6",
-    "@netless/window-manager": "0.4.0-canary.31",
+    "@netless/window-manager": "0.4.0-canary.33",
     "@videojs/vhs-utils": "^2.3.0",
     "agora-rtm-sdk": "^1.4.3",
     "antd": "^4.15.4",

desktop/renderer-app/src/components/Whiteboard.less

@@ -1,6 +1,30 @@
 .whiteboard-container {
     width: 100%;
     height: 100%;
+     background: #f3f6f9;
+
+    .telebox-collector {
+        position: absolute;
+        left: 220px;
+        bottom: 8px;
+        width: 40px;
+        height: 34px;
+        border-radius: 4px;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        transition: ease-out 0.2s;
+    }
+
+    .fastboard-toolbar-btn {
+        outline: 0;
+    }
+
+    .fastboard-bottom-left {
+        bottom: 0;
+    }
+
+    .fastboard-bottom-right {
+        bottom: 0px;
+    }
 
     &.is-readonly {
         .zoom-controller-box {
@@ -10,39 +34,16 @@
         .whiteboard-writable-area {
             display: none;
         }
-    }
-}
-
-.tool-box-out {
-    height: 100%;
-    width: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    position: absolute;
-    z-index: 3;
-    left: 8px;
-}
-
-.redo-undo-box {
-    position: absolute;
-    z-index: 3;
-    bottom: 8px;
-    left: 8px;
-
-    &.is-disabled {
-        display: none;
-    }
-}
-
-.page-controller-box {
-    position: absolute;
-    z-index: 3;
-    bottom: 8px;
-    right: 8px;
 
-    &.is-disabled {
-        display: none;
+        .telebox-collector {
+            position: absolute;
+            left: 8px;
+            width: 40px;
+            height: 32px;
+            border-radius: 4px;
+            border: 1px solid rgba(0, 0, 0, 0.15);
+            transition: ease-out 0.2s;
+        }
     }
 }
 
@@ -57,30 +58,6 @@
     background: #fff;
 }
 
-.collector-container {
-    > .telebox-collector {
-        position: absolute;
-        left: 80px;
-        width: 40px;
-        height: 32px;
-        border-radius: 4px;
-        border: 1px solid rgba(0, 0, 0, 0.15);
-        transition: ease-out 0.2s;
-    }
-}
-
-.collector-container-not-writable {
-    > .telebox-collector {
-        position: absolute;
-        left: 8px;
-        width: 40px;
-        height: 32px;
-        border-radius: 4px;
-        border: 1px solid rgba(0, 0, 0, 0.15);
-        transition: ease-out 0.2s;
-    }
-}
-
 .raise-hand-container {
     position: absolute;
     width: 48px;

desktop/renderer-app/src/components/Whiteboard.tsx

@@ -1,11 +1,9 @@
 import "@netless/window-manager/dist/style.css";
 import "./Whiteboard.less";
 
-import RedoUndo from "@netless/redo-undo";
-import ToolBox from "@netless/tool-box";
-import { WindowManager } from "@netless/window-manager";
+import { Fastboard, Language } from "@netless/fastboard-react";
 import classNames from "classnames";
-import { RaiseHand, ScenesController } from "flat-components";
+import { RaiseHand } from "flat-components";
 import { observer } from "mobx-react-lite";
 import React, { useCallback, useEffect, useState } from "react";
 import { message } from "antd";
@@ -32,7 +30,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
     disableHandRaising,
 }) {
     const { i18n, t } = useTranslation();
-    const { room, phase } = whiteboardStore;
+    const { room, phase, fastboardAPP } = whiteboardStore;
 
     const [whiteboardEl, setWhiteboardEl] = useState<HTMLElement | null>(null);
     const [collectorEl, setCollectorEl] = useState<HTMLElement | null>(null);
@@ -44,40 +42,10 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
     }, [isReconnecting, t]);
 
     useEffect(() => {
-        const mountWindowManager = async (): Promise<void> => {
-            if (whiteboardEl && collectorEl && room) {
-                const windowManager = await WindowManager.mount({
-                    room,
-                    container: whiteboardEl,
-                    collectorContainer: collectorEl,
-                    cursor: true,
-                    /* the containerSizeRatio config limit width and height ratio of windowManager
-                     for make sure windowManager sync in whiteboard. */
-                    containerSizeRatio: whiteboardStore.getWhiteboardRatio(),
-                    collectorStyles: {
-                        position: "absolute",
-                        bottom: "8px",
-                    },
-                    chessboard: false,
-                });
-
-                whiteboardStore.updateWindowManager(windowManager);
-                whiteboardStore.onMainViewSceneChange();
-                whiteboardStore.onMainViewSceneLengthChange();
-                whiteboardStore.onMainViewRedoUndoStepsChange();
-                whiteboardStore.onWindowManagerBoxStateChange(
-                    whiteboardStore.windowManager?.boxState,
-                );
-            }
-        };
-
-        void mountWindowManager();
-
-        return () => {
-            whiteboardStore.destroyWindowManager();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [whiteboardEl, collectorEl, room]);
+        if (fastboardAPP && collectorEl) {
+            fastboardAPP.bindCollector(collectorEl);
+        }
+    }, [collectorEl, fastboardAPP]);
 
     const whiteboardOnResize = useCallback(() => {
         if (whiteboardEl) {
@@ -200,54 +168,6 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                 onDragOver={onDragOver}
                 onDrop={onDrop}
             >
-                <div className="whiteboard-writable-area">
-                    <div className="tool-box-out">
-                        <ToolBox
-                            hotkeys={{
-                                arrow: "A",
-                                clear: "",
-                                clicker: "",
-                                ellipse: "C",
-                                eraser: "E",
-                                hand: "H",
-                                laserPointer: "Z",
-                                pencil: "P",
-                                rectangle: "R",
-                                selector: "S",
-                                shape: "",
-                                straight: "L",
-                                text: "T",
-                            }}
-                            i18nLanguage={i18n.language}
-                            room={room}
-                        />
-                    </div>
-                    <div
-                        className={classNames("redo-undo-box", {
-                            "is-disabled": whiteboardStore.isWindowMaximization,
-                        })}
-                    >
-                        <RedoUndo
-                            redoSteps={whiteboardStore.redoSteps}
-                            room={room}
-                            undoSteps={whiteboardStore.undoSteps}
-                        />
-                    </div>
-                    <div
-                        className={classNames("page-controller-box", {
-                            "is-disabled": whiteboardStore.isWindowMaximization,
-                        })}
-                    >
-                        <ScenesController
-                            addScene={whiteboardStore.addMainViewScene}
-                            currentSceneIndex={whiteboardStore.currentSceneIndex}
-                            disabled={false}
-                            nextScene={whiteboardStore.nextMainViewScene}
-                            preScene={whiteboardStore.preMainViewScene}
-                            scenesCount={whiteboardStore.scenesCount}
-                        />
-                    </div>
-                </div>
                 {!whiteboardStore.isCreator && !whiteboardStore.isWritable && (
                     <div className="raise-hand-container">
                         <RaiseHand
@@ -257,14 +177,13 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                         />
                     </div>
                 )}
-                <div
-                    ref={bindCollector}
-                    className={classNames("collector-container", {
-                        "collector-container-not-writable": !whiteboardStore.isWritable,
-                    })}
+                <div ref={bindCollector} />
+                <Fastboard
+                    ref={bindWhiteboard}
+                    app={fastboardAPP}
+                    language={i18n.language as Language}
+                    theme="light"
                 />
-
-                <div ref={bindWhiteboard} className="whiteboard-box" />
             </div>
         )
     );

desktop/renderer-app/src/pages/BigClassPage/index.tsx

@@ -40,7 +40,6 @@ import { BigClassAvatar } from "./BigClassAvatar";
 import { runtime } from "../../utils/runtime";
 import { ShareScreen, ShareScreenPicker } from "../../components/ShareScreen";
 import { generateAvatar } from "../../utils/generate-avatar";
-import { AppStoreButton } from "../../components/AppStoreButton";
 import shareScreenActiveSVG from "../../assets/image/share-screen-active.svg";
 import shareScreenSVG from "../../assets/image/share-screen.svg";
 import exitSVG from "../../assets/image/exit.svg";
@@ -248,8 +247,6 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
     function renderTopBarRight(): React.ReactNode {
         return (
             <>
-                {whiteboardStore.isWritable && <AppStoreButton addApp={whiteboardStore.addApp} />}
-
                 {whiteboardStore.isWritable && !shareScreenStore.existOtherShareScreen && (
                     <TopBarRightBtn
                         icon={

desktop/renderer-app/src/pages/OneToOnePage/index.tsx

@@ -40,7 +40,6 @@ import { runtime } from "../../utils/runtime";
 import { useTranslation } from "react-i18next";
 import { ShareScreen, ShareScreenPicker } from "../../components/ShareScreen";
 import { generateAvatar } from "../../utils/generate-avatar";
-import { AppStoreButton } from "../../components/AppStoreButton";
 import shareScreenActiveSVG from "../../assets/image/share-screen-active.svg";
 import shareScreenSVG from "../../assets/image/share-screen.svg";
 import exitSVG from "../../assets/image/exit.svg";
@@ -206,8 +205,6 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
     function renderTopBarRight(): React.ReactNode {
         return (
             <>
-                {whiteboardStore.isWritable && <AppStoreButton addApp={whiteboardStore.addApp} />}
-
                 {whiteboardStore.isWritable && !shareScreenStore.existOtherShareScreen && (
                     <TopBarRightBtn
                         icon={

desktop/renderer-app/src/pages/SmallClassPage/index.tsx

@@ -44,7 +44,6 @@ import { CloudStorageButton } from "../../components/CloudStorageButton";
 import { runtime } from "../../utils/runtime";
 import { ShareScreen, ShareScreenPicker } from "../../components/ShareScreen";
 import { generateAvatar } from "../../utils/generate-avatar";
-import { AppStoreButton } from "../../components/AppStoreButton";
 
 import shareScreenActiveSVG from "../../assets/image/share-screen-active.svg";
 import shareScreenSVG from "../../assets/image/share-screen.svg";
@@ -277,8 +276,6 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
     function renderTopBarRight(): React.ReactNode {
         return (
             <>
-                {whiteboardStore.isWritable && <AppStoreButton addApp={whiteboardStore.addApp} />}
-
                 {whiteboardStore.isWritable && !shareScreenStore.existOtherShareScreen && (
                     <TopBarRightBtn
                         icon={

desktop/renderer-app/src/stores/class-room-store.ts

@@ -596,9 +596,9 @@ export class ClassRoomStore {
 
         promises.push(this.shareScreenStore.destroy());
 
-        this.leaveRTC();
+        promises.push(this.whiteboardStore.destroy());
 
-        this.whiteboardStore.destroy();
+        this.leaveRTC();
 
         this.offRTCEvents();
         this.rtc.destroy();