@netless/window-manager 1.0.0-canary.8 → 1.0.0

package/src/View/MainView.ts

@@ -1,68 +1,78 @@
+import { AnimationMode, reaction, ViewMode } from "white-web-sdk";
 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 { debounce, get, isEmpty, isEqual } from "lodash";
+import { internalEmitter } from "../InternalEmitter";
 import { Fields } from "../AttributesDelegate";
-import { reaction } from "white-web-sdk";
-import { releaseView, setViewFocusScenePath } from "../Utils/Common";
+import { setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
-import type { Camera, Size, View } from "white-web-sdk";
+import type { Camera, Room, Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
+import { Events } from "../constants";
 
 export class MainViewProxy {
+    /** Refresh the view's camera in an interval of 1.5s. */
+    public polling = false;
+
+    private scale?: number;
     private started = false;
     private mainViewIsAddListener = false;
     private mainView: View;
     private store = this.manager.store;
-    private synchronizer: CameraSynchronizer;
+    private viewMode = this.manager.windowManger.viewMode;
 
     private sideEffectManager = new SideEffectManager();
 
     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(() => {
+        internalEmitter.once("mainViewMounted").then(() => {
             this.addMainViewListener();
             this.start();
             this.ensureCameraAndSize();
             this.startListenWritableChange();
         });
+        const playgroundSizeChangeListener = () => {
+            this.sizeChangeHandler(this.mainViewSize);
+        };
         this.sideEffectManager.add(() => {
-            return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
+            return internalEmitter.on("playgroundSizeChange", playgroundSizeChangeListener);
         });
         this.sideEffectManager.add(() => {
-            return emitter.on("startReconnect", () => {
-                releaseView(this.mainView);
-            });
+            return internalEmitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
         });
-        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);
+            return internalEmitter.on("startReconnect", () => {
+                if (!this.didRelease) {
+                    this.mainView.release();
+                }
             });
         });
+        this.sideEffectManager.setInterval(this.syncCamera, 1500);
     }
 
+    // Guard function when the camera is not synced
+    private syncCamera = () => {
+        if (!this.polling || this.viewMode !== ViewMode.Broadcaster) return;
+        const { mainViewCamera } = this;
+        if (mainViewCamera && mainViewCamera.id !== this.manager.uid) {
+            this.moveCameraSizeByAttributes();
+        }
+    };
+
     private startListenWritableChange = () => {
         this.sideEffectManager.add(() => {
-            return emitter.on("writableChange", isWritable => {
+            return internalEmitter.on("writableChange", isWritable => {
                 if (isWritable) {
                     this.ensureCameraAndSize();
                 }
+                if (this.manager.room) this.syncMainView(this.manager.room);
             });
         });
     };
 
     public ensureCameraAndSize() {
+        if (this.viewMode !== ViewMode.Broadcaster) return;
         if (!this.mainViewCamera || !this.mainViewSize) {
             this.manager.dispatchInternalEvent(Events.InitMainViewCamera);
             this.setCameraAndSize();
@@ -82,28 +92,27 @@ export class MainViewProxy {
     }
 
     private moveCameraSizeByAttributes() {
-        this.synchronizer.onRemoteUpdate(this.mainViewCamera, this.mainViewSize);
+        this.moveCameraToContian(this.mainViewSize);
+        this.moveCamera(this.mainViewCamera);
     }
 
     public start() {
-        if (this.started) return;
         this.sizeChangeHandler(this.mainViewSize);
+        if (this.started) return;
         this.addCameraListener();
         this.addCameraReaction();
+        if (this.manager.room) this.syncMainView(this.manager.room);
         this.started = true;
     }
 
     public addCameraReaction = () => {
-        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
+        this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
     };
 
     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);
-        }
+        const camera = { ...this.mainView.camera, id: this.manager.uid };
+        const size = { ...this.mainView.size, id: this.manager.uid };
+        this.store.setMainViewCameraAndSize(camera, size);
     }
 
     private cameraReaction = () => {
@@ -111,7 +120,8 @@ export class MainViewProxy {
             () => this.mainViewCamera,
             camera => {
                 if (camera && camera.id !== this.manager.uid) {
-                    this.synchronizer.onRemoteUpdate(camera, this.mainViewSize);
+                    this.moveCameraToContian(this.mainViewSize);
+                    this.moveCamera(camera);
                 }
             },
             { fireImmediately: true }
@@ -120,16 +130,15 @@ export class MainViewProxy {
 
     public sizeChangeHandler = debounce((size: Size) => {
         if (size) {
-            // this.synchronizer.onLocalSizeUpdate(size);
+            this.moveCameraToContian(size);
+            this.moveCamera(this.mainViewCamera);
         }
+        this.ensureMainViewSize();
     }, 30);
 
     public onUpdateContainerSizeRatio = () => {
         const size = this.store.getMainViewSize();
         this.sizeChangeHandler(size);
-        if (size.id === this.manager.uid) {
-            this.setCameraAndSize();
-        }
     };
 
     public get view(): View {
@@ -146,7 +155,6 @@ export class MainViewProxy {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
-        this.synchronizer.setView(mainView);
         return mainView;
     }
 
@@ -169,30 +177,26 @@ export class MainViewProxy {
         const divElement = this.mainView.divElement;
         const disableCameraTransform = this.mainView.disableCameraTransform;
         this.stop();
-        releaseView(this.mainView);
+        if (!this.didRelease) {
+            this.mainView.release();
+        }
         this.removeMainViewListener();
         this.mainView = this.createMainView();
         this.mainView.disableCameraTransform = disableCameraTransform;
         this.mainView.divElement = divElement;
         this.addMainViewListener();
         this.start();
+        callbacks.emit("onMainViewRebind", this.mainView);
     }
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.synchronizer.onLocalCameraUpdate(camera);
-        const size = this.getStageSize();
-        if (size && !isEqual(size, this.mainViewSize)) {
-            this.setMainViewSize(size);
+        if (this.viewMode === ViewMode.Follower) return;
+        this.store.setMainViewCamera({ ...camera, id: this.manager.uid });
+        if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.manager.uid })) {
+            this.setMainViewSize(this.view.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) {
@@ -236,17 +240,74 @@ export class MainViewProxy {
         this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
     }
 
+    private _syncMainViewTimer = 0;
     private onCameraOrSizeUpdated = () => {
         callbacks.emit("cameraStateChange", this.cameraState);
+        // sdk >= 2.16.43 的 syncMainView() 可以写入当前 main view 的 camera, 以修复复制粘贴元素的位置
+        // 注意到这个操作会发送信令，应当避免频繁调用
+        if (this.manager.room && (this.manager.room as any).syncMainView) {
+            clearTimeout(this._syncMainViewTimer);
+            this._syncMainViewTimer = setTimeout(this.syncMainView, 100, this.manager.room);
+        }
+        this.ensureMainViewSize();
     };
 
+    private ensureMainViewSize() {
+        if (
+            (!this.mainViewSize ||
+                this.mainViewSize.width === 0 ||
+                this.mainViewSize.height === 0) &&
+            this.mainView.size.width > 0 &&
+            this.mainView.size.height > 0
+        ) {
+            this.setMainViewSize(this.mainView.size);
+        }
+    }
+
+    private syncMainView = (room: Room) => {
+        if (room.isWritable) {
+            room.syncMainView(this.mainView);
+        }
+    };
+
+    public moveCameraToContian(size: Size): void {
+        if (!isEmpty(size)) {
+            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;
+        }
+    }
+
+    public moveCamera(camera: Camera): void {
+        if (!isEmpty(camera)) {
+            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,
+            });
+        }
+    }
+
     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 setViewMode = (mode: ViewMode) => {
+        this.viewMode = mode;
+    };
+
     public destroy() {
         this.removeMainViewListener();
         this.stop();

package/src/callback.ts

@@ -1,8 +1,16 @@
 import Emittery from "emittery";
 import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
-import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
+import type { CameraState, SceneState, View, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
+import type {
+    BoxClosePayload,
+    BoxFocusPayload,
+    BoxMovePayload,
+    BoxResizePayload,
+    BoxStateChangePayload,
+} from "./BoxEmitter";
+import type { AppPayload } from "./typings";
 
 export type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
@@ -20,6 +28,18 @@ export type PublicEvent = {
     ready: undefined; // 所有 APP 创建完毕时触发
     sceneStateChange: SceneState;
     pageStateChange: PageState;
+    fullscreenChange: boolean;
+    appsChange: string[]; // APP 列表变化时触发
+    onBoxMove: BoxMovePayload;
+    onBoxResize: BoxResizePayload;
+    onBoxFocus: BoxFocusPayload;
+    onBoxClose: BoxClosePayload;
+    onBoxStateChange: BoxStateChangePayload;
+    onMainViewMounted: View;
+    onMainViewRebind: View;
+    onAppViewMounted: AppPayload;
+    onAppSetup: string;
+    onAppScenePathChange: AppPayload;
 };
 
 export type CallbacksType = Emittery<PublicEvent>;

package/src/constants.ts

@@ -57,5 +57,3 @@ export const ROOT_DIR = "/";
 export const INIT_DIR = "/init";
 
 export const SETUP_APP_DELAY = 50;
-
-export const MAX_PAGE_SIZE = 500;

package/src/image/pencil-eraser-1.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="26" viewBox="0 0 18 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="17" height="25" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
+</svg>

package/src/image/pencil-eraser-2.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="34" viewBox="0 0 26 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="25" height="33" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
+</svg>

package/src/image/pencil-eraser-3.svg

@@ -0,0 +1,3 @@
+<svg width="34" height="50" viewBox="0 0 34 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="33" height="49" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
+</svg>