feat(whiteboard): bring back scroll mode (#1671)

* feat(whiteboard): bring back scroll mode * fix listen element
netless-io · Sep 1, 2022 · 9f9cfcb · 9f9cfcb
1 parent 75870a3
commit 9f9cfcb
Show file tree

Hide file tree

Showing 11 changed files with 275 additions and 65 deletions.
diff --git a/packages/flat-pages/src/HomePage/MainRoomMenu/CreateRoomBox.tsx b/packages/flat-pages/src/HomePage/MainRoomMenu/CreateRoomBox.tsx
@@ -84,7 +84,7 @@ export const CreateRoomBox = observer<CreateRoomBoxProps>(function CreateRoomBox
                 }}
             />
             <Modal
-                destroyOnClose
+                forceRender // make "form" usable
                 footer={[
                     <Button key="cancel" onClick={handleCancel}>
                         {t("cancel")}

diff --git a/packages/flat-pages/src/components/Whiteboard.less b/packages/flat-pages/src/components/Whiteboard.less
@@ -19,7 +19,8 @@
         position: static;
     }
 
-    .fastboard-toolbar-btn, .fastboard-toolbar-handler {
+    .fastboard-toolbar-btn,
+    .fastboard-toolbar-handler {
         outline: 0;
     }
 
@@ -73,6 +74,24 @@
     z-index: 3;
 }
 
+.whiteboard-scroll-page {
+    position: absolute;
+    right: 140px;
+    bottom: 9px;
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    padding: 4px 8px;
+    transition: ease-out 0.2s;
+    z-index: 3;
+    font-variant-numeric: tabular-nums;
+    background: #fff;
+    opacity: 0.9;
+}
+
+.is-readonly .whiteboard-scroll-page {
+    opacity: 0;
+}
+
 .flat-color-scheme-dark {
     .whiteboard-container {
         background: #15181d;
@@ -82,4 +101,8 @@
     .netless-window-manager-sizer::after {
         background: #15181d;
     }
+
+    .whiteboard-scroll-page {
+        background: #15181d;
+    }
 }
diff --git a/packages/flat-pages/src/components/Whiteboard.tsx b/packages/flat-pages/src/components/Whiteboard.tsx
@@ -37,16 +37,16 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
     disableHandRaising,
 }) {
     const t = useTranslate();
-    const { room, phase, fastboardAPP, whiteboard } = whiteboardStore;
+    const { room, phase, whiteboard } = whiteboardStore;
     const isDark = useContext(DarkModeContext);
 
     const [whiteboardEl, setWhiteboardEl] = useState<HTMLElement | null>(null);
-    const [collectorEl, setCollectorEl] = useState<HTMLElement | null>(null);
     const [saveAnnotationVisible, showSaveAnnotation] = useState(false);
     const [saveAnnotationImages, setSaveAnnotationImages] = useState<
         SaveAnnotationModalProps["images"]
     >([]);
     const [presetsVisible, showPresets] = useState(false);
+    const [page, setPage] = useState(0);
 
     const isReconnecting = phase === RoomPhase.Reconnecting;
 
@@ -58,6 +58,10 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         return whiteboard.events.on("insertPresets", () => showPresets(true));
     }, [whiteboard]);
 
+    useEffect(() => {
+        return whiteboard.events.on("scrollPage", setPage);
+    }, [whiteboard]);
+
     useEffect(() => {
         whiteboard.setTheme(isDark ? "dark" : "light");
     }, [isDark, whiteboard]);
@@ -66,12 +70,6 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         return isReconnecting ? message.info(t("reconnecting"), 0) : noop;
     }, [isReconnecting, t]);
 
-    useEffect(() => {
-        if (fastboardAPP && collectorEl) {
-            fastboardAPP.bindCollector(collectorEl);
-        }
-    }, [collectorEl, fastboardAPP]);
-
     useEffect(() => {
         if (whiteboardEl) {
             whiteboardOnResize();
@@ -104,12 +102,6 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         [whiteboard],
     );
 
-    const bindCollector = useCallback((ref: HTMLDivElement | null) => {
-        if (ref) {
-            setCollectorEl(ref);
-        }
-    }, []);
-
     const insertPresetImage = useCallback(async (fileURL: string) => {
         const fileService = await FlatServices.getInstance().requestService("file");
         if (fileService) {
@@ -224,8 +216,8 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                                 />
                             </div>
                         )}
-                    <div ref={bindCollector} />
                     <div ref={bindWhiteboard} className="whiteboard" />
+                    <div className="whiteboard-scroll-page">{renderScrollPage(page)}</div>
                 </div>
             )}
             <SaveAnnotationModal
@@ -242,3 +234,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         </>
     );
 });
+
+function renderScrollPage(page: number): string {
+    return `${(page * 100) | 0}%`;
+}
diff --git a/packages/flat-services/src/services/whiteboard/events.ts b/packages/flat-services/src/services/whiteboard/events.ts
@@ -10,6 +10,7 @@ export interface IServiceWhiteboardEventData {
     kicked: IServiceWhiteboardKickedReason;
     exportAnnotations: void;
     insertPresets: void;
+    scrollPage: number;
 }
 
 export type IServiceWhiteboardEventName = Extract<keyof IServiceWhiteboardEventData, string>;

diff --git a/packages/flat-stores/package.json b/packages/flat-stores/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@netless/fastboard": "1.0.0-canary.5",
-    "@netless/window-manager": "1.0.0-canary.50",
+    "@netless/window-manager": "1.0.0-canary.51",
     "mobx": "^6.6.1",
     "prettier": "^2.3.0",
     "react": "^17.0.2",

diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
@@ -381,7 +381,9 @@ export class ClassroomStore {
                 userUUID => onStageUsersStorage.state[userUUID],
             );
             await this.users.syncExtraUsersInfo(onStageUsers);
-            this.onStageUserUUIDs.replace(onStageUsers);
+            runInAction(() => {
+                this.onStageUserUUIDs.replace(onStageUsers);
+            });
             this.users.updateUsers(user => {
                 if (user.userUUID === this.ownerUUID) {
                     return;

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/service-providers/fastboard/package.json b/service-providers/fastboard/package.json
@@ -16,7 +16,7 @@
     "@netless/flat-service-provider-file-convert-netless": "workspace:*",
     "@netless/flat-services": "workspace:*",
     "@netless/white-snapshot": "^0.4.2",
-    "@netless/window-manager": "1.0.0-canary.50",
+    "@netless/window-manager": "1.0.0-canary.51",
     "side-effect-manager": "^1.2.1",
     "value-enhancer": "^1.3.2",
     "white-web-sdk": "npm:white-web-sdk-esm@2.16.34"

diff --git a/service-providers/fastboard/src/index.ts b/service-providers/fastboard/src/index.ts
@@ -15,6 +15,7 @@ import { AsyncSideEffectManager } from "side-effect-manager";
 
 import { registerColorShortcut } from "./color-shortcut";
 import { injectCursor } from "./inject-cursor";
+import { ScrollMode } from "./scroll-mode";
 
 export { register, apps as stockedApps } from "@netless/fastboard";
 export { FastboardFileInsert } from "./file-insert";
@@ -46,6 +47,7 @@ export class Fastboard extends IServiceWhiteboard {
     private flatInfo: FlatInfo;
     private APP_ID?: string;
     private ui = createUI();
+    private scrollMode: ScrollMode | null;
 
     public readonly _app$: Val<FastboardApp | null>;
     public readonly _el$: Val<HTMLElement | null>;
@@ -85,6 +87,8 @@ export class Fastboard extends IServiceWhiteboard {
         this._roomPhase$ = new Val<RoomPhase>(RoomPhase.Disconnected);
         const allowDrawing$ = new Val(false);
 
+        this.scrollMode = null;
+
         const phase$ = combine([this._app$, this._roomPhase$], ([app, phase]) =>
             app ? convertRoomPhase(phase) : IServiceWhiteboardPhase.Disconnected,
         );
@@ -145,12 +149,26 @@ export class Fastboard extends IServiceWhiteboard {
                             zoom_control: { enable: false },
                         },
                     });
+                    if (this.scrollMode) {
+                        this.scrollMode.setRoot(el);
+                    }
                 } else {
                     this.ui.destroy();
                 }
             }),
             this._app$.subscribe(app => {
                 this.ui.update({ app });
+                if (app) {
+                    if (this.scrollMode) {
+                        this.scrollMode.dispose();
+                    }
+                    this.scrollMode = new ScrollMode(app, this.events);
+                    if (this._el$.value) {
+                        this.scrollMode.setRoot(this._el$.value);
+                    }
+                } else if (this.scrollMode) {
+                    this.scrollMode.dispose();
+                }
             }),
             this.flatI18n.$Val.language$.subscribe(language => {
                 this.ui.update({ language });

diff --git a/service-providers/fastboard/src/mousewheel-to-scroll.ts b/service-providers/fastboard/src/mousewheel-to-scroll.ts