refactor(whiteboard): disable scale behavior, instead do scroll

netless-io · Jun 7, 2022 · 8f81d79 · 8f81d79
1 parent 4663833
commit 8f81d79
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 20 deletions.
diff --git a/desktop/renderer-app/src/components/Whiteboard.tsx b/desktop/renderer-app/src/components/Whiteboard.tsx
@@ -3,7 +3,7 @@ import "./Whiteboard.less";
 
 import classNames from "classnames";
 import React, { useCallback, useContext, useEffect, useState } from "react";
-import { Fastboard, Language } from "@netless/fastboard-react";
+import { Fastboard, FastboardUIConfig, Language } from "@netless/fastboard-react";
 import {
     DarkModeContext,
     PresetsModal,
@@ -22,6 +22,7 @@ import { isSupportedImageType, onDropImage } from "../utils/drag-and-drop/image"
 import { ClassRoomStore } from "../stores/class-room-store";
 import { refreshApps } from "../utils/toolbar-apps";
 import { PRESETS } from "../constants/presets";
+import { mousewheelToScroll } from "../utils/mousewheel-to-scroll";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
@@ -33,6 +34,12 @@ const noop = (): void => {
     // noop
 };
 
+// Hide zoom control.
+const config: FastboardUIConfig = {
+    zoom_control: { enable: false },
+    toolbar: { apps: { enable: true } },
+};
+
 export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
     whiteboardStore,
     classRoomStore,
@@ -62,6 +69,13 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         }
     }, [collectorEl, fastboardAPP]);
 
+    useEffect(() => {
+        if (whiteboardEl && fastboardAPP) {
+            return mousewheelToScroll(whiteboardEl, fastboardAPP.manager);
+        }
+        return;
+    }, [whiteboardEl, fastboardAPP]);
+
     const whiteboardOnResize = useCallback(() => {
         if (whiteboardEl) {
             const whiteboardRatio = whiteboardStore.getWhiteboardRatio();
@@ -222,6 +236,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                     <div ref={bindCollector} />
                     <Fastboard
                         app={fastboardAPP}
+                        config={config}
                         containerRef={bindWhiteboard}
                         language={i18n.language as Language}
                         theme={isDark ? "dark" : "light"}

diff --git a/desktop/renderer-app/src/stores/whiteboard-store.ts b/desktop/renderer-app/src/stores/whiteboard-store.ts
@@ -341,6 +341,17 @@ export class WhiteboardStore {
             },
         });
 
+        // Disable scale, fix height.
+        fastboardAPP.manager.mainView.setCameraBound({
+            damping: 0,
+            centerX: 0,
+            centerY: 0,
+            minContentMode: () => 1,
+            maxContentMode: () => 1,
+            width: 0,
+            height: 2400,
+        });
+
         this.updateFastboardAPP(fastboardAPP);
 
         const { room, manager } = fastboardAPP;
@@ -501,15 +512,16 @@ export class WhiteboardStore {
         });
         this.windowManager?.mainView.completeImageUpload(uuid, file.fileURL);
 
-        // 2. move camera to fit image height
-        width /= 0.8;
-        height /= 0.8;
-        this.windowManager?.moveCameraToContain({
-            originX: centerX - width / 2,
-            originY: centerY - height / 2,
-            width: width,
-            height: height,
-        });
+        // Prevent scale.
+        // // 2. move camera to fit image height
+        // width /= 0.8;
+        // height /= 0.8;
+        // this.windowManager?.moveCameraToContain({
+        //     originX: centerX - width / 2,
+        //     originY: centerY - height / 2,
+        //     width: width,
+        //     height: height,
+        // });
     };
 
     public insertMediaFile = async (file: CloudStorageFile): Promise<void> => {

diff --git a/desktop/renderer-app/src/utils/mousewheel-to-scroll.ts b/desktop/renderer-app/src/utils/mousewheel-to-scroll.ts
@@ -0,0 +1,16 @@
+import type { AnimationMode, WindowManager } from "@netless/window-manager";
+
+// Let mouse wheel act as scrolling the whiteboard
+export function mousewheelToScroll(root: HTMLElement, manager: WindowManager): () => void {
+    const listener = (ev: Event): void => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const dy = (ev as WheelEvent).deltaY || 0;
+        manager.moveCamera({
+            centerY: manager.camera.centerY + dy * manager.camera.scale,
+            animationMode: "immediately" as AnimationMode.Immediately,
+        });
+    };
+    root.addEventListener("wheel", listener, true);
+    return () => root.removeEventListener("wheel", listener, true);
+}
diff --git a/web/flat-web/src/components/Whiteboard.tsx b/web/flat-web/src/components/Whiteboard.tsx
@@ -3,7 +3,7 @@ import "./Whiteboard.less";
 
 import classNames from "classnames";
 import React, { useCallback, useContext, useEffect, useState } from "react";
-import { Fastboard, Language } from "@netless/fastboard-react";
+import { Fastboard, FastboardUIConfig, Language } from "@netless/fastboard-react";
 import { RoomPhase } from "white-web-sdk";
 import {
     DarkModeContext,
@@ -22,6 +22,7 @@ import { isSupportedImageType, onDropImage } from "../utils/drag-and-drop/image"
 import { ClassRoomStore } from "../stores/class-room-store";
 import { refreshApps } from "../utils/toolbar-apps";
 import { PRESETS } from "../constants/presets";
+import { mousewheelToScroll } from "../utils/mousewheel-to-scroll";
 
 export interface WhiteboardProps {
     whiteboardStore: WhiteboardStore;
@@ -33,6 +34,12 @@ const noop = (): void => {
     // noop
 };
 
+// Hide zoom control.
+const config: FastboardUIConfig = {
+    zoom_control: { enable: false },
+    toolbar: { apps: { enable: true } },
+};
+
 export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
     whiteboardStore,
     classRoomStore,
@@ -73,6 +80,13 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [whiteboardEl]);
 
+    useEffect(() => {
+        if (whiteboardEl && fastboardAPP) {
+            return mousewheelToScroll(whiteboardEl, fastboardAPP.manager);
+        }
+        return;
+    }, [whiteboardEl, fastboardAPP]);
+
     useEffect(() => {
         refreshApps({
             t,
@@ -223,6 +237,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({
                     <div ref={bindCollector} />
                     <Fastboard
                         app={fastboardAPP}
+                        config={config}
                         containerRef={bindWhiteboard}
                         language={i18n.language as Language}
                         theme={isDark ? "dark" : "light"}

diff --git a/web/flat-web/src/stores/whiteboard-store.ts b/web/flat-web/src/stores/whiteboard-store.ts
@@ -309,6 +309,17 @@ export class WhiteboardStore {
             },
         });
 
+        // Disable scale, fix height.
+        fastboardAPP.manager.mainView.setCameraBound({
+            damping: 0,
+            centerX: 0,
+            centerY: 0,
+            minContentMode: () => 1,
+            maxContentMode: () => 1,
+            width: 0,
+            height: 2400,
+        });
+
         this.updateFastboardAPP(fastboardAPP);
 
         const { room, manager } = fastboardAPP;
@@ -470,15 +481,16 @@ export class WhiteboardStore {
 
         this.windowManager?.mainView.completeImageUpload(uuid, file.fileURL);
 
-        // 2. move camera to fit image height
-        width /= 0.8;
-        height /= 0.8;
-        this.windowManager?.moveCameraToContain({
-            originX: centerX - width / 2,
-            originY: centerY - height / 2,
-            width: width,
-            height: height,
-        });
+        // Prevent scale.
+        // // 2. move camera to fit image height
+        // width /= 0.8;
+        // height /= 0.8;
+        // this.windowManager?.moveCameraToContain({
+        //     originX: centerX - width / 2,
+        //     originY: centerY - height / 2,
+        //     width: width,
+        //     height: height,
+        // });
     };
 
     public insertMediaFile = async (file: CloudStorageFile): Promise<void> => {

diff --git a/web/flat-web/src/utils/mousewheel-to-scroll.ts b/web/flat-web/src/utils/mousewheel-to-scroll.ts
@@ -0,0 +1,16 @@
+import type { AnimationMode, WindowManager } from "@netless/window-manager";
+
+// Let mouse wheel act as scrolling the whiteboard
+export function mousewheelToScroll(root: HTMLElement, manager: WindowManager): () => void {
+    const listener = (ev: Event): void => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const dy = (ev as WheelEvent).deltaY || 0;
+        manager.moveCamera({
+            centerY: manager.camera.centerY + dy * manager.camera.scale,
+            animationMode: "immediately" as AnimationMode.Immediately,
+        });
+    };
+    root.addEventListener("wheel", listener, true);
+    return () => root.removeEventListener("wheel", listener, true);
+}