@netless/window-manager 1.0.0-canary.52 → 1.0.0-canary.54

package/src/AppManager.ts

@@ -40,7 +40,7 @@ import type {
     ScenesCallbacksNode,
     SceneState,
     RoomState,
-} from "white-web-sdk";
+ Size} from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 import type {
     BoxClosePayload,
@@ -50,6 +50,7 @@ import type {
     BoxStateChangePayload,
 } from "./BoxEmitter";
 import type { Member } from "./Helper";
+import { ScrollMode } from "./View/ScrollMode";
 
 export class AppManager {
     public displayer: Displayer;
@@ -64,12 +65,15 @@ export class AppManager {
 
     private appListeners: AppListeners;
     public boxManager?: BoxManager;
+    public scrollMode?: ScrollMode;
+    public scrollBaseSize$ = new Val<Size | null>(null);
 
     private callbacksNode: ScenesCallbacksNode | null = null;
     private appCreateQueue = new AppCreateQueue();
     private sceneIndex$ = new Val<number | undefined>(undefined);
     private focused$ = new Val<string | undefined>(undefined);
     public members$ = new Val<Member[]>([]);
+    public isWritable$ = new Val<boolean>(Boolean(this.room?.isWritable));
 
     private sideEffectManager = new SideEffectManager();
 
@@ -77,6 +81,7 @@ export class AppManager {
 
     public rootDirRemoving = false;
 
+
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
         this.store.setContext({
@@ -123,6 +128,17 @@ export class AppManager {
             this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
         });
         this.members$.setValue(serializeRoomMembers(this.displayer.state.roomMembers));
+
+        emitter.on("mainViewMounted", () => {
+            this.windowManger.viewMode$.subscribe(viewMode => {
+                const playground = this.windowManger.playground$.value;
+                if (viewMode === "scroll" && playground) {
+                    const scrollMode = new ScrollMode(this);
+                    this.scrollMode = scrollMode;
+                    scrollMode.setRoot(playground);
+                }
+            });
+        });
     }
 
     private onRemoveScenes = async (params: RemoveSceneParams) => {
@@ -581,6 +597,7 @@ export class AppManager {
     public bindMainView(divElement: HTMLDivElement, disableCameraTransform: boolean) {
         const mainView = this.mainViewProxy.view;
         mainView.disableCameraTransform = disableCameraTransform;
+        console.log("bindMainView", mainView.disableCameraTransform);
         // 延迟挂载 mainView 的 dom, 避免因为同步 camera 的闪动
         wait(30).then(() => {
             mainView.divElement = divElement;
@@ -713,6 +730,7 @@ export class AppManager {
             }
         }
         emitter.emit("writableChange", isWritable);
+        this.isWritable$.setValue(isWritable);
     };
 
     public safeSetAttributes(attributes: any) {

package/src/Cursor/index.ts

@@ -32,9 +32,13 @@ export class CursorManager {
     private store = this.manager.store;
     public applianceIcons: ApplianceIcons = ApplianceMap;
 
+    public get playground$() {
+        return this.manager.windowManger.playground$;
+    }
+
     constructor(private manager: AppManager, private enableCursor: boolean, applianceIcons?: ApplianceIcons) {
         this.roomMembers = this.manager.room?.state.roomMembers;
-        const playground = WindowManager.playground;
+        const playground = this.playground$.value;
         if (playground) {
             this.setupWrapper(playground);
         }
@@ -65,7 +69,7 @@ export class CursorManager {
     private initCursorInstance = (uid: string) => {
         let cursorInstance = this.cursorInstances.get(uid);
         if (!cursorInstance) {
-            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.playground);
+            cursorInstance = new Cursor(this.manager, uid, this, this.playground$.value);
             this.cursorInstances.set(uid, cursorInstance);
         }
         return cursorInstance;

package/src/Utils/Reactive.ts

@@ -30,7 +30,8 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
     };
 };
 
-export const safeListenPropsUpdated = <T>(
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const safeListenPropsUpdated = <T extends Object>(
     getProps: () => T,
     callback: AkkoObjectUpdatedListener<T>,
     onDestroyed?: (props: unknown) => void

package/src/View/CameraSynchronizer.ts

@@ -1,7 +1,7 @@
 import { AnimationMode } from "white-web-sdk";
-import { isEqual, pick, throttle } from "lodash";
+import { isEmpty, isEqual, pick, throttle } from "lodash";
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { Camera, View, Size } from "white-web-sdk";
+import type { View, Size } from "white-web-sdk";
 import type { ICamera, ISize } from "../AttributesDelegate";
 
 export type SaveCamera = (camera: ICamera) => void;
@@ -11,12 +11,13 @@ export class CameraSynchronizer {
     public remoteSize?: ISize;
     protected rect?: TeleBoxRect;
     protected view?: View;
+    protected scale = 1;
 
     constructor(protected saveCamera: SaveCamera) {}
 
-    public setRect = (rect: TeleBoxRect) => {
+    public setRect = (rect: TeleBoxRect, updateCamera = true) => {
         this.rect = rect;
-        if (this.remoteCamera && this.remoteSize) {
+        if (this.remoteCamera && this.remoteSize && updateCamera) {
             this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
         }
     }
@@ -30,19 +31,12 @@ export class CameraSynchronizer {
         this.remoteCamera = camera;
         this.remoteSize = size;
         if (this.remoteSize && this.rect) {
-            const nextScale = camera.scale * computedMinScale(size, this.rect);
-            const config: Partial<Camera> = {
-                scale: nextScale,
-            }
-            if (camera.centerX !== null) {
-                config.centerX = camera.centerX;
-            }
-            if (camera.centerY !== null) {
-                config.centerY = camera.centerY;
-            }
-            this.moveCamera(config);
+            requestAnimationFrame(() => {
+                this.moveCameraToContian(size);
+                this.moveCamera(camera);
+            });
         }
-    }, 10);
+    }, 32);
 
     public onRemoteSizeUpdate(size: ISize) {
         this.remoteSize = size;
@@ -64,13 +58,31 @@ export class CameraSynchronizer {
         this.remoteCamera = camera;
     }
 
-    private moveCamera(camera: Partial<Camera>) {
-        this.view?.moveCamera({ ...camera, animationMode: AnimationMode.Immediately });
+    private moveCameraToContian(size: Size): void {
+        if (!isEmpty(size) && this.view) {
+            this.view.moveCameraToContain({
+                width: size.width,
+                height: size.height,
+                originX: -size.width / 2,
+                originY: -size.height / 2,
+                animationMode: AnimationMode.Immediately,
+            });
+            this.scale = this.view.camera.scale;
+        }
+    }
+
+    private moveCamera(camera: ICamera): void {
+        if (!isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
+            if (isEqual(camera, this.view.camera)) return;
+            const { centerX, centerY, scale } = camera;
+            const needScale = scale * (this.scale || 1);
+            this.view.moveCamera({
+                centerX: centerX,
+                centerY: centerY,
+                scale: needScale,
+                animationMode: AnimationMode.Immediately,
+            });
+        }
     }
 }
 
-export const computedMinScale = (remoteSize: Size, currentSize: Size) => {
-    const wScale = currentSize.width / remoteSize.width;
-    const hScale = currentSize.height / remoteSize.height;
-    return Math.min(wScale, hScale);
-}

package/src/View/MainView.ts

@@ -93,6 +93,7 @@ export class MainViewProxy {
                 id: this.manager.uid,
                 ...this.view.camera
             });
+            // FIX 没有 mainViewSize 需要初始化一个 baseSize
             const stageRect = this.manager.boxManager?.stageRect;
             if (stageRect && !this.mainViewSize) {
                 this.storeSize({

package/src/View/ScrollMode.ts

@@ -0,0 +1,229 @@
+import { AnimationMode } from "white-web-sdk";
+import { callbacks } from "../callback";
+import { combine, derive, Val } from "value-enhancer";
+import { createScrollStorage } from "../storage";
+import { SCROLL_MODE_BASE_HEIGHT, SCROLL_MODE_BASE_WIDTH } from "../constants";
+import { SideEffectManager } from "side-effect-manager";
+import type { ReadonlyVal } from "value-enhancer";
+import type { AppManager } from "../AppManager";
+import type { ScrollStorage } from "../storage";
+import type { Camera, Size, View } from "white-web-sdk";
+
+function clamp(x: number, min: number, max: number): number {
+    return x < min ? min : x > max ? max : x;
+}
+
+export type ScrollState = {
+    scrollTop: number;
+    page: number;
+    maxScrollPage: number;
+};
+
+export class ScrollMode {
+    public readonly sideEffect = new SideEffectManager();
+
+    private readonly _root$: Val<HTMLElement | null>;
+    private readonly _whiteboard$: ReadonlyVal<HTMLElement | null>;
+    private readonly _scrollTop$: Val<number>;
+    public readonly _page$: ReadonlyVal<number>;
+    private readonly _scale$: ReadonlyVal<number>;
+    private readonly _size$: Val<Size>;
+    private readonly _mainView$: Val<View>;
+
+    private baseWidth = SCROLL_MODE_BASE_WIDTH;
+    private baseHeight = SCROLL_MODE_BASE_HEIGHT;
+
+    public scrollStorage: ScrollStorage;
+    public readonly scrollState$: ReadonlyVal<ScrollState>;
+
+    public setRoot(root: HTMLElement): void {
+        this._root$.setValue(root);
+    }
+
+    constructor(private manager: AppManager) {
+        this._root$ = new Val<HTMLElement | null>(null);
+        this._mainView$ = new Val<View>(this.manager.mainView);
+        this._mainView$.value.disableCameraTransform = true;
+
+        if (manager.scrollBaseSize$?.value) {
+            this.baseWidth = manager.scrollBaseSize$.value.width;
+            this.baseHeight = manager.scrollBaseSize$.value.height;
+        }
+
+        this.scrollStorage = createScrollStorage(manager);
+        const scrollTop$ = new Val(this.scrollStorage.state.scrollTop);
+        this._scrollTop$ = scrollTop$;
+
+        this.sideEffect.push(
+            this.scrollStorage.on("stateChanged", () => {
+                this._scrollTop$.setValue(this.scrollStorage.state.scrollTop);
+            })
+        );
+
+        const size$ = new Val<Size>(
+            { width: 0, height: 0 },
+            { compare: (a, b) => a.width === b.width && a.height === b.height }
+        );
+        this._size$ = size$;
+        this.sideEffect.add(() => {
+            const onSizeUpdated = size$.setValue.bind(size$);
+            onSizeUpdated(this._mainView$.value.size);
+            this._mainView$.value.callbacks.on("onSizeUpdated", onSizeUpdated);
+            return () => this._mainView$.value.callbacks.off("onSizeUpdated", onSizeUpdated);
+        });
+
+        this.sideEffect.add(() => {
+            const onCameraUpdated = (camera: Camera): void => {
+                const halfWbHeight = size$.value.height / 2 / scale$.value;
+                const scrollTop = camera.centerY;
+                this.scrollStorage.setState({
+                    scrollTop: clamp(scrollTop, halfWbHeight, this.baseHeight - halfWbHeight),
+                });
+                callbacks.emit("userScroll");
+            };
+            this._mainView$.value.callbacks.on("onCameraUpdatedByDevice", onCameraUpdated);
+            return () =>
+                this._mainView$.value.callbacks.off("onCameraUpdatedByDevice", onCameraUpdated);
+        });
+
+        const scale$ = derive(size$, size => size.width / this.baseWidth);
+        this._scale$ = scale$;
+
+        const page$ = new Val(0);
+        this.sideEffect.push(
+            combine([scrollTop$, size$, scale$]).subscribe(([scrollTop, size, scale]) => {
+                if (scale > 0) {
+                    const wbHeight = size.height / scale;
+                    page$.setValue(Math.max(scrollTop / wbHeight - 0.5, 0));
+                }
+            })
+        );
+        this._page$ = page$;
+
+        // 5. bound$ = { contentMode: () => scale$, centerX: W / 2, centerY: H / 2, width: W, height: H }
+        this.sideEffect.push(
+            combine([scrollTop$, scale$]).subscribe(([scrollTop, scale]) => {
+                this.updateBound(scrollTop, size$.value, scale);
+            })
+        );
+
+        this.sideEffect.push(
+            size$.reaction(() => {
+                this.updateScroll(scrollTop$.value);
+            })
+        );
+
+        const whiteboard$ = derive(this._root$, this.getWhiteboardElement);
+        this._whiteboard$ = whiteboard$;
+        this.sideEffect.push(
+            whiteboard$.reaction(el => {
+                if (el?.parentElement) {
+                    this.sideEffect.addEventListener(
+                        el.parentElement,
+                        "wheel",
+                        this.onWheel,
+                        { capture: true, passive: false },
+                        "wheel"
+                    );
+                }
+            })
+        );
+
+        this.sideEffect.push(
+            scale$.reaction(scale => {
+                if (scale > 0) {
+                    this.sideEffect.flush("initScroll");
+                    // XXX: wait window-manager's sync behavior then we reset the camera
+                    this.sideEffect.setTimeout(this.initScroll, 0);
+                }
+            }),
+            "initScroll"
+        );
+
+        const maxScrollPage$ = combine([this._size$, this._scale$], ([size, scale]) => {
+            const halfWbHeight = size.height / 2 / scale;
+            return (this.baseHeight - halfWbHeight) / halfWbHeight / 2 - 0.51;
+        });
+
+        this.scrollState$ = combine(
+            [this._scrollTop$, this._page$, maxScrollPage$],
+            ([scrollTop, page, maxScrollPage]) => {
+                return {
+                    scrollTop,
+                    page,
+                    maxScrollPage,
+                };
+            }
+        );
+
+        this.updateScroll(scrollTop$.value);
+        this.sideEffect.push(
+            this.scrollState$.subscribe(state => callbacks.emit("scrollStateChange", state))
+        );
+    }
+
+    private initScroll = (): void => {
+        const halfWbHeight = this._size$.value.height / 2 / this._scale$.value;
+        const scrollTop = this._scrollTop$.value;
+        // HACK: set a different value (+0.01) to trigger all effects above
+        this._scrollTop$.setValue(
+            clamp(scrollTop, halfWbHeight, this.baseHeight - halfWbHeight) - 0.01
+        );
+    };
+
+    private updateScroll(scrollTop: number): void {
+        this._mainView$.value.moveCamera({
+            centerY: scrollTop,
+            animationMode: AnimationMode.Immediately,
+        });
+    }
+
+    private updateBound(scrollTop: number, { height }: Size, scale: number): void {
+        if (scale > 0) {
+            this._mainView$.value.moveCameraToContain({
+                originX: 0,
+                originY: scrollTop - height / scale / 2,
+                width: this.baseWidth,
+                height: height / scale,
+                animationMode: AnimationMode.Immediately,
+            });
+
+            this._mainView$.value.setCameraBound({
+                damping: 1,
+                maxContentMode: () => scale,
+                minContentMode: () => scale,
+                centerX: this.baseWidth / 2,
+                centerY: this.baseHeight / 2,
+                width: this.baseWidth,
+                height: this.baseHeight,
+            });
+        }
+    }
+
+    public dispose(): void {
+        this.sideEffect.flushAll();
+    }
+
+    private getWhiteboardElement = (root: HTMLElement | null): HTMLElement | null => {
+        const className = ".netless-window-manager-main-view";
+        return root && root.querySelector(className);
+    };
+
+    private onWheel = (ev: WheelEvent): void => {
+        const target = ev.target as HTMLElement | null;
+        if (this.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) {
+                const halfWbHeight = this._size$.value.height / 2 / this._scale$.value;
+                const scrollTop = this._scrollTop$.value + dy / this._scale$.value;
+                this.scrollStorage.setState({
+                    scrollTop: clamp(scrollTop, halfWbHeight, this.baseHeight - halfWbHeight),
+                });
+                callbacks.emit("userScroll");
+            }
+        }
+    };
+}

package/src/View/ViewSync.ts

@@ -1,11 +1,13 @@
-import { ViewMode, AnimationMode } from "white-web-sdk";
-import { CameraSynchronizer, computedMinScale } from "./CameraSynchronizer";
-import { combine } from "value-enhancer";
+import { AnimationMode, ViewMode } from "white-web-sdk";
+import { CameraSynchronizer } from "./CameraSynchronizer";
+import { combine, derive } from "value-enhancer";
+import { isEqual } from "lodash";
 import { SideEffectManager } from "side-effect-manager";
 import type { Camera, View } from "white-web-sdk";
 import type { Val, ReadonlyVal } from "value-enhancer";
 import type { ICamera, ISize } from "../AttributesDelegate";
 import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { ManagerViewMode } from "../typings";
 
 export type ViewSyncContext = {
     uid: string;
@@ -16,7 +18,7 @@ export type ViewSyncContext = {
 
     stageRect$: ReadonlyVal<TeleBoxRect>;
 
-    viewMode$?: Val<ViewMode>;
+    viewMode$?: Val<ManagerViewMode>;
 
     storeCamera: (camera: ICamera) => void;
 
@@ -28,6 +30,7 @@ export type ViewSyncContext = {
 export class ViewSync {
     private sem = new SideEffectManager();
     private synchronizer: CameraSynchronizer;
+    private needRecoverCamera$?: ReadonlyVal<boolean>;
 
     constructor(private context: ViewSyncContext) {
         this.synchronizer = this.createSynchronizer();
@@ -38,15 +41,22 @@ export class ViewSync {
             this.subscribeSize(),
             this.subscribeStageRect(),
         ]);
+        if (context.viewMode$) {
+            this.needRecoverCamera$ = derive(context.viewMode$, mode => mode !== "scroll");
+        }
         const camera$size$ = combine([this.context.camera$, this.context.size$]);
         camera$size$.reaction(([camera, size]) => {
-            if (camera && size) {
+            if (camera && size && this.needRecoverCamera$?.value) {
                 this.synchronizer.onRemoteUpdate(camera, size);
                 camera$size$.destroy();
             }
         });
     }
 
+    private get isBroadcastMode() {
+        return this.context.viewMode$?.value === ViewMode.Broadcaster;
+    }
+
     private createSynchronizer = () => {
         return new CameraSynchronizer((camera: ICamera) => {
             this.context.camera$.setValue(camera, true);
@@ -58,12 +68,12 @@ export class ViewSync {
                 this.context.storeCamera(camera);
             }
         });
-    }
+    };
 
     private subscribeView = () => {
         return this.context.view$.subscribe(view => {
             const currentCamera = this.context.camera$.value;
-            if (currentCamera && this.context.size$.value) {
+            if (currentCamera && this.context.size$.value && this.needRecoverCamera$?.value) {
                 view?.moveCamera({
                     scale: 1,
                     animationMode: AnimationMode.Immediately,
@@ -72,7 +82,7 @@ export class ViewSync {
             }
             this.bindView(view);
         });
-    }
+    };
 
     private subscribeCamera = () => {
         return this.context.camera$.subscribe((camera, skipUpdate) => {
@@ -82,23 +92,23 @@ export class ViewSync {
                 this.synchronizer.onRemoteUpdate(camera, size);
             }
         });
-    }
+    };
 
     private subscribeSize = () => {
         return this.context.size$.subscribe(size => {
-            if (size) {
+            if (size && this.isBroadcastMode) {
                 this.synchronizer.onRemoteSizeUpdate(size);
             }
         });
-    }
+    };
 
     private subscribeStageRect = () => {
         return this.context.stageRect$.subscribe(rect => {
             if (rect) {
-                this.synchronizer.setRect(rect);
+                this.synchronizer.setRect(rect, this.isBroadcastMode);
             }
         });
-    }
+    };
 
     public bindView = (view?: View) => {
         if (!view) return;
@@ -113,11 +123,14 @@ export class ViewSync {
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
         if (!camera) return;
-        if (this.context.size$.value && this.context.stageRect$.value) {
-            // 始终以远端的 size 为标准, 设置到 attributes 时根据尺寸的大小还原回去
-            const diffScale = computedMinScale(this.context.size$.value, this.context.stageRect$.value);
-            const remoteScale = camera.scale / diffScale;
-            this.synchronizer.onLocalCameraUpdate({ ...camera, scale: remoteScale, id: this.context.uid });
+        if (!this.isBroadcastMode) return;
+        const { size$, stageRect$, view$ } = this.context;
+        if (size$.value && stageRect$.value && view$.value) {
+            this.synchronizer.onLocalCameraUpdate({ ...camera, id: this.context.uid });
+            const newSize = { ...view$.value.size, id: this.context.uid };
+            if (!isEqual(size$.value, newSize)) {
+                this.context.storeSize(newSize);
+            }
         }
     };
 

package/src/callback.ts

@@ -4,6 +4,7 @@ import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
 import type { ICamera, ISize } from "./AttributesDelegate";
+import type { ScrollState } from "./View/ScrollMode";
 
 export type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
@@ -25,6 +26,8 @@ export type PublicEvent = {
     baseCameraChange: ICamera;
     baseSizeChange: ISize;
     fullscreenChange: TeleBoxFullscreen;
+    userScroll: undefined;
+    scrollStateChange: ScrollState;
 };
 
 export type CallbacksType = Emittery<PublicEvent>;

package/src/constants.ts

@@ -64,3 +64,6 @@ export const INIT_DIR = "/init";
 export const SETUP_APP_DELAY = 50;
 
 export const MAX_PAGE_SIZE = 500;
+
+export const SCROLL_MODE_BASE_WIDTH = 1600;
+export const SCROLL_MODE_BASE_HEIGHT = SCROLL_MODE_BASE_WIDTH * 3;