fix(whiteboard): scroll mode initial position (#1681)

* fix(whiteboard): scroll mode initial position, capture wheel events - upgrade window-manager (fix an NaN bug) * fix(whiteboard): handle touch input on mobile devices
netless-io · Sep 8, 2022 · c04a9b4 · c04a9b4
1 parent a2a7b98
commit c04a9b4
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 26 deletions.
diff --git a/packages/flat-pages/src/components/Whiteboard.less b/packages/flat-pages/src/components/Whiteboard.less
@@ -85,6 +85,10 @@
     z-index: 3;
     font-variant-numeric: tabular-nums;
     background: #fff;
+    opacity: 0;
+}
+
+.whiteboard-scroll-page.is-active {
     opacity: 0.9;
 }
 

diff --git a/packages/flat-pages/src/components/Whiteboard.tsx b/packages/flat-pages/src/components/Whiteboard.tsx
@@ -15,10 +15,10 @@ import { useTranslate } from "@netless/flat-i18n";
 import { observer } from "mobx-react-lite";
 import { message } from "antd";
 import { WhiteboardStore, ClassroomStore } from "@netless/flat-stores";
+import { FlatServices } from "@netless/flat-services";
 import { isSupportedFileExt } from "../utils/drag-and-drop";
 import { isSupportedImageType, onDropImage } from "../utils/drag-and-drop/image";
 import { PRESETS } from "../constants/presets";
-import { FlatServices } from "@netless/flat-services";
 import { createCloudFile } from "../utils/create-cloud-file";
 
 export interface WhiteboardProps {
@@ -47,6 +47,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
     >([]);
     const [presetsVisible, showPresets] = useState(false);
     const [page, setPage] = useState(0);
+    const [showPage, setShowPage] = useState(false);
 
     const isReconnecting = phase === RoomPhase.Reconnecting;
 
@@ -62,6 +63,18 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         return whiteboard.events.on("scrollPage", setPage);
     }, [whiteboard]);
 
+    useEffect(() => {
+        let isMounted = true;
+        setShowPage(true);
+        const timer = setTimeout(() => {
+            isMounted && setShowPage(false);
+        }, 3000);
+        return () => {
+            clearTimeout(timer);
+            isMounted = false;
+        };
+    }, [page]);
+
     useEffect(() => {
         whiteboard.setTheme(isDark ? "dark" : "light");
     }, [isDark, whiteboard]);
@@ -217,7 +230,11 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                             </div>
                         )}
                     <div ref={bindWhiteboard} className="whiteboard" />
-                    <div className="whiteboard-scroll-page">{renderScrollPage(page)}</div>
+                    <div
+                        className={classNames("whiteboard-scroll-page", { "is-active": showPage })}
+                    >
+                        {renderScrollPage(page)}
+                    </div>
                 </div>
             )}
             <SaveAnnotationModal

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.51",
+    "@netless/window-manager": "1.0.0-canary.52",
     "mobx": "^6.6.1",
     "prettier": "^2.3.0",
     "react": "^17.0.2",

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.51",
+    "@netless/window-manager": "1.0.0-canary.52",
     "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/scroll-mode.ts b/service-providers/fastboard/src/scroll-mode.ts
@@ -1,5 +1,5 @@
-import type { AnimationMode, Size, ViewMode } from "white-web-sdk";
-import type { FastboardApp, Storage } from "@netless/fastboard";
+import type { AnimationMode, Camera, Size, ViewMode } from "white-web-sdk";
+import type { Storage, SyncedStore, WindowManager } from "@netless/fastboard";
 import type { IServiceWhiteboardEvents } from "@netless/flat-services";
 
 import { SideEffectManager } from "side-effect-manager";
@@ -52,7 +52,7 @@ export class ScrollMode {
     }
 
     public constructor(
-        public readonly fastboard: FastboardApp,
+        public readonly fastboard: { manager: WindowManager; syncedStore: SyncedStore },
         public readonly events: IServiceWhiteboardEvents,
     ) {
         this._root$ = new Val<HTMLElement | null>(null);
@@ -93,6 +93,22 @@ export class ScrollMode {
             return () => fastboard.manager.mainView.callbacks.off("onSizeUpdated", onSizeUpdated);
         });
 
+        this.sideEffect.add(() => {
+            const onCameraUpdated = (camera: Camera): void => {
+                const halfWbHeight = this._size$.value.height / 2 / this._scale$.value;
+                const scrollTop = camera.centerY;
+                this.storage.setState({
+                    scrollTop: clamp(scrollTop, halfWbHeight, BASE_HEIGHT - halfWbHeight),
+                });
+            };
+            fastboard.manager.mainView.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
+            return () =>
+                fastboard.manager.mainView.callbacks.off(
+                    "onCameraUpdatedByDevice",
+                    onCameraUpdated,
+                );
+        });
+
         // 4. scale$ = size$.width / BASE_WIDTH
         const scale$ = derive(size$, size => size.width / BASE_WIDTH);
         this._scale$ = scale$;
@@ -147,8 +163,10 @@ export class ScrollMode {
     }
 
     private initScroll = (): void => {
-        // HACK: set a different number to trigger all listeners above
-        this._scrollTop$.setValue(this.scrollTop + 0.5);
+        const halfWbHeight = this._size$.value.height / 2 / this._scale$.value;
+        const scrollTop = this._scrollTop$.value;
+        // HACK: set a different value (+0.5) to trigger all effects above
+        this._scrollTop$.setValue(clamp(scrollTop, halfWbHeight, BASE_HEIGHT - halfWbHeight) + 0.5);
     };
 
     private updateBound(scrollTop: number, { height }: Size, scale: number): void {
@@ -185,10 +203,10 @@ export class ScrollMode {
     };
 
     private onWheel = (ev: WheelEvent): void => {
-        ev.preventDefault();
-        ev.stopPropagation();
         const target = ev.target as HTMLElement | null;
-        if (this.fastboard.writable.value && this._whiteboard$.value?.contains(target)) {
+        if (this.fastboard.manager.canOperate && this._whiteboard$.value?.contains(target)) {
+            ev.preventDefault();
+            ev.stopPropagation();
             const dy = ev.deltaY || 0;
             const { width } = this._size$.value;
             if (dy && width > 0) {