@netless/window-manager 1.0.0-canary.6 → 1.0.0-canary.61

package/src/View/MainView.ts

@@ -1,14 +1,16 @@
 import { callbacks } from "../callback";
-import { CameraSynchronizer } from "./CameraSynchronizer";
 import { createView } from "./ViewManager";
 import { debounce, get, isEqual } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Events } from "../constants";
 import { Fields } from "../AttributesDelegate";
-import { reaction } from "white-web-sdk";
-import { releaseView, setViewFocusScenePath } from "../Utils/Common";
+import { AnimationMode, reaction, toJS } from "white-web-sdk";
+import { releaseView, setScenePath, setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
-import type { Camera, Size, View } from "white-web-sdk";
+import { Val } from "value-enhancer";
+import { ViewSync } from "./ViewSync";
+import type { ICamera, ISize } from "../AttributesDelegate";
+import type { Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 
 export class MainViewProxy {
@@ -16,56 +18,90 @@ export class MainViewProxy {
     private mainViewIsAddListener = false;
     private mainView: View;
     private store = this.manager.store;
-    private synchronizer: CameraSynchronizer;
 
     private sideEffectManager = new SideEffectManager();
 
+    public camera$ = new Val<ICamera | undefined>(undefined);
+    public size$ = new Val<ISize | undefined>(undefined);
+    public view$ = new Val<View | undefined>(undefined);
+
+    public viewSync?: ViewSync;
+
     constructor(private manager: AppManager) {
-        this.synchronizer = new CameraSynchronizer(camera =>
-            this.store.setMainViewCamera({ ...camera, id: this.manager.uid })
-        );
         this.mainView = this.createMainView();
-        this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
             this.addMainViewListener();
             this.start();
             this.ensureCameraAndSize();
             this.startListenWritableChange();
         });
-        this.sideEffectManager.add(() => {
-            return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
-        });
-        this.sideEffectManager.add(() => {
-            return emitter.on("startReconnect", () => {
+        this.sideEffectManager.add(() => [
+            emitter.on("startReconnect", () => {
                 releaseView(this.mainView);
-            });
+            }),
+        ]);
+        this.createViewSync();
+        this.sideEffectManager.add(() => emitter.on("focusedChange", ({ focused }) => {
+            if (focused === undefined) {
+                const scenePath = this.store.getMainViewScenePath();
+                if (scenePath) {
+                    setScenePath(this.manager.room, scenePath);
+                }
+            }
+        }));
+        this.camera$.reaction(camera => {
+            if (camera) {
+                callbacks.emit("baseCameraChange", camera);
+            }
         });
-        const rect = this.manager.boxManager?.stageRect;
-        if (rect) {
-            this.synchronizer.setRect(rect);
-        }
-        this.sideEffectManager.add(() => {
-            return emitter.on("playgroundSizeChange", rect => {
-                this.synchronizer.setRect(rect);
-                // this.synchronizer.onLocalSizeUpdate(rect);
-            });
+        this.size$.reaction(size => {
+            if (size) {
+                callbacks.emit("baseSizeChange", size);
+            }
         });
     }
 
+    public createViewSync = () => {
+        if (this.manager.boxManager && !this.viewSync) {
+            this.viewSync = new ViewSync({
+                uid: this.manager.uid,
+                view$: this.view$,
+                camera$: this.camera$,
+                size$: this.size$,
+                stageRect$: this.manager.boxManager?.stageRect$,
+                viewMode$: this.manager.windowManger.viewMode$,
+                storeCamera: this.storeCamera,
+                storeSize: this.storeSize,
+            });
+        }
+    };
+
     private startListenWritableChange = () => {
-        this.sideEffectManager.add(() => {
-            return emitter.on("writableChange", isWritable => {
+        this.sideEffectManager.add(() =>
+            emitter.on("writableChange", isWritable => {
                 if (isWritable) {
                     this.ensureCameraAndSize();
                 }
-            });
-        });
+            })
+        );
     };
 
     public ensureCameraAndSize() {
         if (!this.mainViewCamera || !this.mainViewSize) {
             this.manager.dispatchInternalEvent(Events.InitMainViewCamera);
-            this.setCameraAndSize();
+            this.storeCamera({
+                id: this.manager.uid,
+                ...this.view.camera
+            });
+            // FIX 没有 mainViewSize 需要初始化一个 baseSize
+            const stageRect = this.manager.boxManager?.stageRect;
+            if (stageRect && !this.mainViewSize) {
+                this.storeSize({
+                    id: this.manager.uid,
+                    width: stageRect.width,
+                    height: stageRect.height
+                });
+            }
         }
     }
 
@@ -81,55 +117,74 @@ export class MainViewProxy {
         return get(this.view, ["didRelease"]);
     }
 
-    private moveCameraSizeByAttributes() {
-        this.synchronizer.onRemoteUpdate(this.mainViewCamera, this.mainViewSize);
-    }
-
     public start() {
         if (this.started) return;
-        this.sizeChangeHandler(this.mainViewSize);
+        this.removeCameraListener();
         this.addCameraListener();
         this.addCameraReaction();
         this.started = true;
     }
 
     public addCameraReaction = () => {
-        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
+        this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
+        this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
     };
 
-    public setCameraAndSize(): void {
-        const stageSize = this.getStageSize();
-        if (stageSize) {
-            const camera = { ...this.mainView.camera, id: this.manager.uid };
-            const size = { ...stageSize, id: this.manager.uid };
-            this.store.setMainViewCameraAndSize(camera, size);
+    public storeCurrentCamera = () => {
+        const iCamera = this.view.camera;
+        this.storeCamera({
+            id: this.manager.uid,
+            ...iCamera
+        });
+    }
+
+    public storeCurrentSize = () => {
+        const rect = this.manager.boxManager?.stageRect;
+        if (rect) {
+            this.storeSize({
+                id: this.manager.uid,
+                width: rect.width,
+                height: rect.height
+            });
         }
     }
 
+    public storeCamera = (camera: ICamera) => {
+        this.store.setMainViewCamera(camera);
+    };
+
+    public storeSize = (size: ISize) => {
+        this.store.setMainViewSize(size);
+    };
+
     private cameraReaction = () => {
         return reaction(
             () => this.mainViewCamera,
             camera => {
-                if (camera && camera.id !== this.manager.uid) {
-                    this.synchronizer.onRemoteUpdate(camera, this.mainViewSize);
+                if (camera) {
+                    const rawCamera = toJS(camera);
+                    if (!isEqual(rawCamera, this.camera$.value)) {
+                        this.camera$.setValue(rawCamera);
+                    }
                 }
             },
             { fireImmediately: true }
         );
     };
 
-    public sizeChangeHandler = debounce((size: Size) => {
-        if (size) {
-            // this.synchronizer.onLocalSizeUpdate(size);
-        }
-    }, 30);
-
-    public onUpdateContainerSizeRatio = () => {
-        const size = this.store.getMainViewSize();
-        this.sizeChangeHandler(size);
-        if (size.id === this.manager.uid) {
-            this.setCameraAndSize();
-        }
+    private sizeReaction = () => {
+        return reaction(
+            () => this.mainViewSize,
+            size => {
+                if (size) {
+                    const rawSize = toJS(size);
+                    if (!isEqual(rawSize, this.size$.value)) {
+                        this.size$.setValue(rawSize);
+                    }
+                }
+            },
+            { fireImmediately: true }
+        );
     };
 
     public get view(): View {
@@ -146,7 +201,7 @@ export class MainViewProxy {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
-        this.synchronizer.setView(mainView);
+        this.view$.setValue(mainView);
         return mainView;
     }
 
@@ -168,31 +223,18 @@ export class MainViewProxy {
     public rebind(): void {
         const divElement = this.mainView.divElement;
         const disableCameraTransform = this.mainView.disableCameraTransform;
+        const camera = { ...this.mainView.camera };
         this.stop();
         releaseView(this.mainView);
         this.removeMainViewListener();
         this.mainView = this.createMainView();
         this.mainView.disableCameraTransform = disableCameraTransform;
         this.mainView.divElement = divElement;
+        this.mainView.moveCamera({ ...camera, animationMode: AnimationMode.Immediately });
         this.addMainViewListener();
         this.start();
     }
 
-    private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.synchronizer.onLocalCameraUpdate(camera);
-        const size = this.getStageSize();
-        if (size && !isEqual(size, this.mainViewSize)) {
-            this.setMainViewSize(size);
-        }
-    };
-
-    private getStageSize(): Size | undefined {
-        const stage = this.manager.boxManager?.stageRect;
-        if (stage) {
-            return { width: stage.width, height: stage.height };
-        }
-    }
-
     public addMainViewListener(): void {
         if (this.mainViewIsAddListener) return;
         if (this.view.divElement) {
@@ -225,13 +267,11 @@ export class MainViewProxy {
     }, 50);
 
     private addCameraListener() {
-        this.view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
         this.view.callbacks.on("onCameraUpdated", this.onCameraOrSizeUpdated);
         this.view.callbacks.on("onSizeUpdated", this.onCameraOrSizeUpdated);
     }
 
     private removeCameraListener() {
-        this.view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
         this.view.callbacks.off("onCameraUpdated", this.onCameraOrSizeUpdated);
         this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
     }
@@ -241,13 +281,15 @@ export class MainViewProxy {
     };
 
     public stop() {
-        this.removeCameraListener();
-        this.manager.refresher?.remove(Fields.MainViewCamera);
-        this.manager.refresher?.remove(Fields.MainViewSize);
+        this.manager.refresher.remove(Fields.MainViewCamera);
+        this.manager.refresher.remove(Fields.MainViewSize);
         this.started = false;
     }
 
     public destroy() {
+        this.camera$.destroy();
+        this.size$.destroy();
+        this.view$.destroy();
         this.removeMainViewListener();
         this.stop();
         this.sideEffectManager.flushAll();

package/src/View/ScrollMode.ts

@@ -0,0 +1,239 @@
+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 { round } from "lodash";
+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);
+        // 滚动模式下确保 disableCameraTransform 为 false, 否则触摸屏无法滚动
+        this._mainView$.value.disableCameraTransform = false;
+
+        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"
+                    );
+                }
+            })
+        );
+
+        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: round(scrollTop, 2),
+                    page: round(page, 2),
+                    maxScrollPage: round(maxScrollPage, 2),
+                };
+            }
+        );
+
+        this.updateScroll(scrollTop$.value);
+        this.sideEffect.push(
+            this.scrollState$.subscribe(state => callbacks.emit("scrollStateChange", state))
+        );
+
+        this.sideEffect.push(
+            combine([this._size$, this._scale$]).subscribe(([size, scale]) => {
+                if (size.height > 0 && scale > 0) {
+                    this.initScroll();
+                    this.sideEffect.flush("initScroll");
+                }
+            }),
+            "initScroll"
+        );
+    }
+
+    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();
+        this.scrollStorage.disconnect();
+        this._root$.destroy();
+        this._scale$.destroy();
+        this._scrollTop$.destroy();
+        this._whiteboard$.destroy();
+        this.scrollState$.destroy();
+        this._page$.destroy();
+        this._size$.destroy();
+        this._mainView$.destroy();
+    }
+
+    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");
+            }
+        }
+    };
+}