@netless/window-manager 1.0.0-canary.4 → 1.0.0-canary.42

package/src/App/WhiteboardView.ts

@@ -1,36 +1,58 @@
 import { putScenes } from "../Utils/Common";
 import { Val } from "value-enhancer";
+import { pick } from "lodash";
 
 import type { ReadonlyVal } from "value-enhancer";
 import type { AddPageParams, PageController, PageState } from "../Page";
 import type { AppProxy } from "./AppProxy";
 import type { AppContext } from "./AppContext";
-import type { Camera } from "white-web-sdk";
+import type { Camera, View } from "white-web-sdk";
+import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { ICamera, ISize } from "../AttributesDelegate";
+
+export type WhiteBoardViewCamera = Omit<ICamera, "id">;
+export type WhiteBoardViewRect = Omit<ISize, "id">;
 
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;
+    public readonly baseCamera$: ReadonlyVal<WhiteBoardViewCamera>;
+    public readonly baseRect$: ReadonlyVal<WhiteBoardViewRect | undefined>;
 
     constructor(
+        public view: View,
         protected appContext: AppContext,
         protected appProxy: AppProxy,
-        private removeViewWrapper: () => void
+        public ensureSize: (size: number) => void
     ) {
         const pageState$ = new Val<PageState>(appProxy.pageState);
+        const baseRect$ = new Val<WhiteBoardViewRect | undefined>(appProxy.size$.value);
+        const pickCamera = (camera: Camera | ICamera) =>
+            pick(camera, ["centerX", "centerY", "scale"]);
+        const camera$ = new Val<WhiteBoardViewCamera>(pickCamera(this.view.camera));
+        this.baseRect$ = baseRect$;
         this.pageState$ = pageState$;
-        appProxy.appEmitter.on("pageStateChange", pageState => {
-            pageState$.setValue(pageState);
-        });
-    }
-
-    public get view() {
-        return this.appContext.view;
+        this.baseCamera$ = camera$;
+        this.appProxy.sideEffectManager.add(() => [
+            appProxy.appEmitter.on("pageStateChange", pageState => pageState$.setValue(pageState)),
+            appProxy.camera$.subscribe(camera => {
+                if (camera) {
+                    camera$.setValue(pickCamera(camera));
+                }
+            }),
+            appProxy.size$.subscribe(size => {
+                if (size) {
+                    baseRect$.setValue(pick(size, ["width", "height"]));
+                }
+            }),
+        ]);
+        view.disableCameraTransform = true;
     }
 
     public get pageState() {
         return this.pageState$.value;
     }
 
-    public moveCamera(camera: Camera) {
+    public moveCamera(camera: Partial<WhiteBoardViewCamera>) {
         this.appProxy.moveCamera(camera);
     }
 
@@ -79,7 +101,7 @@ export class WhiteBoardView implements PageController {
         return this.appProxy.removeSceneByIndex(needRemoveIndex);
     };
 
-    public destroy() {
-        this.removeViewWrapper();
+    public setBaseRect(rect: Omit<TeleBoxRect, "x" | "y">) {
+        this.appProxy.updateSize(rect.width, rect.height);
     }
 }

package/src/App/index.ts

@@ -1,3 +1,4 @@
 export * from "./AppProxy";
 export * from "./AppContext";
 export * from "./WhiteboardView";
+export * from "./type";

package/src/App/type.ts

@@ -0,0 +1,22 @@
+
+export type AppState = {
+    id: string;
+    focus?: boolean;
+    SceneIndex?: number;
+    draggable?: boolean;
+    position?: {
+        x: number;
+        y: number;
+    }
+    ratio?: number;
+    resizable?: boolean;
+    size?: {
+        width: number;
+        height: number;
+    }
+    stageRatio?: number;
+    visible?: boolean;
+    zIndex?: number;
+    maximized: boolean | null;
+    minimized: boolean | null;
+}

package/src/AppListener.ts

@@ -1,11 +1,11 @@
 import { callbacks } from "./callback";
 import { emitter } from "./InternalEmitter";
 import { Events, MagixEventName } from "./constants";
-import { isEqual, omit } from "lodash";
 import { setViewFocusScenePath } from "./Utils/Common";
-import type { AnimationMode, Camera, Event } from "white-web-sdk";
+import type { AnimationMode, Camera, Event, Rectangle } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { TeleBoxState } from "@netless/telebox-insider";
+import { computedMinScale } from "./View/CameraSynchronizer";
 
 type SetAppFocusIndex = {
     type: "main" | "app";
@@ -50,14 +50,6 @@ export class AppListeners {
                     this.setMainViewScenePathHandler(data.payload);
                     break;
                 }
-                case Events.MoveCamera: {
-                    this.moveCameraHandler(data.payload);
-                    break;
-                }
-                case Events.MoveCameraToContain: {
-                    this.moveCameraToContainHandler(data.payload);
-                    break;
-                }
                 case Events.CursorMove: {
                     this.cursorMoveHandler(data.payload);
                     break;
@@ -78,6 +70,18 @@ export class AppListeners {
                     this.setAppFocusViewIndexHandler(data.payload);
                     break;
                 }
+                case Events.InvokeAttributesUpdateCallback: {
+                    this.manager.attributesUpdateCallback(this.manager.attributes.apps);
+                    break;
+                }
+                case Events.MoveCamera: {
+                    this.moveCameraHandler(data.payload);
+                    break;
+                }
+                case Events.MoveCameraToContain: {
+                    this.moveCameraToContainHandler(data.payload);
+                    break;
+                }
                 default:
                     break;
             }
@@ -102,17 +106,6 @@ export class AppListeners {
         callbacks.emit("mainViewScenePathChange", nextScenePath);
     };
 
-    private moveCameraHandler = (
-        payload: Camera & { animationMode?: AnimationMode | undefined }
-    ) => {
-        if (isEqual(omit(payload, ["animationMode"]), { ...this.manager.mainView.camera })) return;
-        this.manager.mainView.moveCamera(payload);
-    };
-
-    private moveCameraToContainHandler = (payload: any) => {
-        this.manager.mainView.moveCameraToContain(payload);
-    };
-
     private cursorMoveHandler = (payload: any) => {
         emitter.emit("cursorMove", payload);
     };
@@ -141,4 +134,20 @@ export class AppListeners {
             }
         }
     }
+
+    private moveCameraHandler = (payload: Camera) => {
+        const cameraPayload = payload;
+        if (payload.scale) {
+            const remoteSize = this.manager.mainViewProxy.size$.value;
+            const currentSize = this.manager.boxManager?.stageRect;
+            if (remoteSize && currentSize) {
+                cameraPayload.scale = payload.scale * computedMinScale(remoteSize, currentSize);
+            }
+        }
+        this.manager.mainView.moveCamera(cameraPayload);
+    }
+
+    private moveCameraToContainHandler = (payload: Rectangle & { animationMode?: AnimationMode }) => {
+        this.manager.mainView.moveCameraToContain(payload);
+    }
 }

package/src/AppManager.ts

@@ -3,7 +3,7 @@ import { AppCreateQueue } from "./Utils/AppCreateQueue";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./App";
 import { appRegister } from "./Register";
-import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
+import { autorun, isPlayer, isRoom, ScenePathType, toJS } from "white-web-sdk";
 import { boxEmitter } from "./BoxEmitter";
 import { calculateNextIndex } from "./Page";
 import { callbacks } from "./callback";
@@ -18,6 +18,7 @@ import { RedoUndo } from "./RedoUndo";
 import { serializeRoomMembers } from "./Helper";
 import { SideEffectManager } from "side-effect-manager";
 import { ViewManager } from "./View/ViewManager";
+import { Val } from "value-enhancer";
 import type { SyncRegisterAppPayload } from "./Register";
 import type { RemoveSceneParams } from "./InternalEmitter";
 import {
@@ -29,15 +30,16 @@ import {
     removeScenes,
     setScenePath,
     setViewFocusScenePath,
+    wait,
 } from "./Utils/Common";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
 import type {
     Displayer,
-    DisplayerState,
     Room,
     ScenesCallbacksNode,
     SceneState,
+    RoomState,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 import type {
@@ -63,10 +65,11 @@ export class AppManager {
     private appListeners: AppListeners;
     public boxManager?: BoxManager;
 
-    private _prevSceneIndex: number | undefined;
-    private _prevFocused: string | undefined;
     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[]>([]);
 
     private sideEffectManager = new SideEffectManager();
 
@@ -119,6 +122,7 @@ export class AppManager {
         appRegister.setSyncRegisterApp(payload => {
             this.safeUpdateAttributes([Fields.Registered, payload.kind], payload);
         });
+        this.members$.setValue(serializeRoomMembers(this.displayer.state.roomMembers));
     }
 
     private onRemoveScenes = async (params: RemoveSceneParams) => {
@@ -137,7 +141,7 @@ export class AppManager {
                 sceneName = this.callbacksNode?.scenes[nextIndex];
             }
             if (sceneName) {
-                this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
+                await this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
             }
             await this.setMainViewSceneIndex(nextIndex);
         } else {
@@ -152,7 +156,7 @@ export class AppManager {
      * 所以需要关掉所有开启了 view 的 app
      */
     public async onRootDirRemoved(needClose = true) {
-        this.setMainViewScenePath(INIT_DIR);
+        await this.setMainViewScenePath(INIT_DIR);
         this.createRootDirScenesCallback();
 
         for (const [id, appProxy] of this.appProxies.entries()) {
@@ -160,9 +164,9 @@ export class AppManager {
                 await this.closeApp(id, needClose);
             }
         }
-        // 删除了根目录的 scenes 之后 mainview 需要重新绑定, 否则主白板会不能渲染
+        // 删除了根目录的 scenes 之后 main-view 需要重新绑定, 否则主白板会不能渲染
         this.mainViewProxy.rebind();
-        emitter.emit("rootDirRemoved");
+        await emitter.emit("rootDirRemoved");
         this.updateRootDirRemoving(false);
     }
 
@@ -300,10 +304,6 @@ export class AppManager {
         return this.room?.uid || "";
     }
 
-    public get members(): Member[] {
-        return serializeRoomMembers(this.displayer.state.roomMembers);
-    }
-
     public getMainViewSceneDir() {
         const scenePath = this.store.getMainViewScenePath();
         if (scenePath) {
@@ -324,31 +324,31 @@ export class AppManager {
 
         this.addAppsChangeListener();
         this.addAppCloseListener();
-        this.refresher?.add("maximized", () => {
+        this.refresher.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
                 this.boxManager?.setMaximized(Boolean(maximized));
             });
         });
-        this.refresher?.add("minimized", () => {
+        this.refresher.add("minimized", () => {
             return autorun(() => {
                 const minimized = this.attributes.minimized;
                 this.onMinimized(minimized);
             });
         });
-        this.refresher?.add("mainViewIndex", () => {
+        this.refresher.add("mainViewIndex", () => {
             return autorun(() => {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
                 this.onMainViewIndexChange(mainSceneIndex);
             });
         });
-        this.refresher?.add("focusedChange", () => {
+        this.refresher.add("focusedChange", () => {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
                 this.onFocusChange(focused);
             });
         });
-        this.refresher?.add("registeredChange", () => {
+        this.refresher.add("registeredChange", () => {
             return autorun(() => {
                 const registered = get(this.attributes, Fields.Registered);
                 this.onRegisteredChange(registered);
@@ -361,7 +361,7 @@ export class AppManager {
         }
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
-        this._prevFocused = this.attributes.focus;
+        this.focused$.setValue(this.attributes.focus);
 
         this.sideEffectManager.add(() => {
             const redoUndo = new RedoUndo({
@@ -407,7 +407,7 @@ export class AppManager {
     };
 
     public addAppsChangeListener = () => {
-        this.refresher?.add("apps", () => {
+        this.refresher.add("apps", () => {
             return safeListenPropsUpdated(
                 () => this.attributes.apps,
                 () => {
@@ -426,27 +426,28 @@ export class AppManager {
     };
 
     private onMainViewIndexChange = (index: number) => {
-        if (index !== undefined && this._prevSceneIndex !== index) {
+        if (index !== undefined && this.sceneIndex$.value !== index) {
             callbacks.emit("mainViewSceneIndexChange", index);
             emitter.emit("changePageState");
             if (this.callbacksNode) {
                 this.updateSceneState(this.callbacksNode);
             }
-            this._prevSceneIndex = index;
+            this.sceneIndex$.setValue(index);
         }
     };
 
     private onFocusChange = (focused: string | undefined) => {
-        if (this._prevFocused !== focused) {
+        if (this.focused$.value !== focused) {
             callbacks.emit("focusedChange", focused);
-            emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-            this._prevFocused = focused;
+            emitter.emit("focusedChange", { focused, prev: this.focused$.value });
+            this.focused$.setValue(focused);
             if (focused !== undefined) {
                 this.boxManager?.focusBox({ appId: focused });
                 // 确保 focus 修改的时候, appProxy 已经创建
                 setTimeout(() => {
                     const appProxy = this.appProxies.get(focused);
                     if (appProxy) {
+                        appProxy.onFocus();
                         appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
                     }
                 }, 0);
@@ -460,9 +461,9 @@ export class AppManager {
     );
 
     /**
-     * 插件更新 attributes 时的回调
+     * 插件更新 apps 时的回调
      *
-     * @param {*} attributes
+     * @param {*} apps
      * @memberof WindowManager
      */
     public async _attributesUpdateCallback(apps: any) {
@@ -471,14 +472,27 @@ export class AppManager {
             if (appIds.length === 0) {
                 this.appCreateQueue.emitReady();
             }
-            const appsWithCreatedAt = appIds.map(appId => {
-                return {
-                    id: appId,
-                    createdAt: apps[appId].createdAt,
-                };
+            let appsWithCreatedAt = appIds.map(appId => {
+                if (apps[appId].setup) {
+                    return {
+                        id: appId,
+                        createdAt: apps[appId].createdAt,
+                    };
+                } else {
+                    return {};
+                }
             });
+            // 兼容 1.0 之前版本的回放, 回放时直接过判断 setup 直接创建 app
+            if (this.isReplay) {
+                appsWithCreatedAt = appIds.map(appId => {
+                    return {
+                        id: appId,
+                        createdAt: apps[appId].createdAt,
+                    };
+                });
+            }
             for (const { id } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
-                if (!this.appProxies.has(id) && !this.appStatus.has(id)) {
+                if (id && !this.appProxies.has(id) && !this.appStatus.has(id)) {
                     const app = apps[id];
                     try {
                         const appAttributes = this.attributes[id];
@@ -536,6 +550,7 @@ export class AppManager {
 
     public setBoxManager(boxManager: BoxManager) {
         this.boxManager = boxManager;
+        this.mainViewProxy.createViewSync();
     }
 
     public resetMaximized() {
@@ -565,11 +580,14 @@ export class AppManager {
     public bindMainView(divElement: HTMLDivElement, disableCameraTransform: boolean) {
         const mainView = this.mainViewProxy.view;
         mainView.disableCameraTransform = disableCameraTransform;
-        mainView.divElement = divElement;
+        // 延迟挂载 mainView 的 dom, 避免因为同步 camera 的闪动
+        wait(30).then(() => {
+            mainView.divElement = divElement;
+            emitter.emit("mainViewMounted");
+        });
         if (!mainView.focusScenePath) {
             this.setMainViewFocusPath();
         }
-        emitter.emit("mainViewMounted");
     }
 
     public setMainViewFocusPath(scenePath?: string) {
@@ -589,6 +607,7 @@ export class AppManager {
 
     public async addApp(params: AddAppParams, isDynamicPPT: boolean): Promise<string | undefined> {
         log("addApp", params);
+        // 初始化 app 的属性创建
         const { appId, needFocus } = await this.beforeAddApp(params, isDynamicPPT);
         const appProxy = await this.baseInsertApp(params, appId, true, needFocus);
         this.afterAddApp(appProxy);
@@ -600,6 +619,7 @@ export class AppManager {
         this.appStatus.set(appId, AppStatus.StartCreate);
         const attrs = params.attributes ?? {};
         this.safeUpdateAttributes([appId], attrs);
+        // 初始化的时候时需要一些异步的工作, 完成后其他端才可以创建
         this.store.setupAppAttributes(params, appId, isDynamicPPT);
         const needFocus = !this.boxManager?.minimized;
         if (needFocus) {
@@ -651,7 +671,7 @@ export class AppManager {
         }
     }
 
-    private displayerStateListener = (state: Partial<DisplayerState>) => {
+    private displayerStateListener = (state: Partial<RoomState>) => {
         const sceneState = state.sceneState;
         if (sceneState) {
             const scenePath = sceneState.scenePath;
@@ -666,15 +686,18 @@ export class AppManager {
             appProxy.appEmitter.emit("roomStateChange", state);
         });
         if (state.roomMembers) {
-            emitter.emit("roomMembersChange", this.members);
+            this.members$.setValue(serializeRoomMembers(state.roomMembers));
         }
         emitter.emit("observerIdChange", this.displayer.observerId);
+        if (state.memberState) {
+            emitter.emit("memberStateChange", toJS(state.memberState));
+        }
     };
 
     public displayerWritableListener = (isReadonly: boolean) => {
         const isWritable = !isReadonly;
         const isManualWritable =
-            this.windowManger.readonly === undefined || this.windowManger.readonly === false;
+            this.windowManger.readonly === undefined || !this.windowManger.readonly;
         if (this.windowManger.readonly === undefined) {
             this.boxManager?.setReadonly(isReadonly);
         } else {
@@ -683,13 +706,10 @@ export class AppManager {
         this.appProxies.forEach(appProxy => {
             appProxy.emitAppIsWritableChange();
         });
-        if (isWritable === true) {
-            this.mainView.disableCameraTransform = false;
+        if (isWritable) {
             if (this.room && this.room.disableSerialization === true) {
                 this.room.disableSerialization = false;
             }
-        } else {
-            this.mainView.disableCameraTransform = true;
         }
         emitter.emit("writableChange", isWritable);
     };
@@ -793,6 +813,7 @@ export class AppManager {
     }
 
     public async onReconnected() {
+        this.attributesUpdateCallback(this.attributes.apps);
         const appProxies = Array.from(this.appProxies.values());
         const reconnected = appProxies.map(appProxy => {
             return appProxy.onReconnected();
@@ -831,7 +852,8 @@ export class AppManager {
         }
         callbacks.clearListeners();
         this.sideEffectManager.flushAll();
-        this._prevFocused = undefined;
-        this._prevSceneIndex = undefined;
+        this.sceneIndex$.destroy();
+        this.focused$.destroy();
+        this.members$.destroy();
     }
 }

package/src/AttributesDelegate.ts

@@ -2,7 +2,7 @@ import { AppAttributes } from "./constants";
 import { get, pick } from "lodash";
 import { setViewFocusScenePath } from "./Utils/Common";
 import type { AddAppParams, AppSyncAttributes } from "./index";
-import type { Camera, Size, View } from "white-web-sdk";
+import type { Size, View } from "white-web-sdk";
 import type { Cursor } from "./Cursor/Cursor";
 
 export enum Fields {
@@ -41,8 +41,11 @@ export type StoreContext = {
     safeSetAttributes: (attributes: any) => void;
 }
 
-export type ICamera = Camera & { 
+export type ICamera =  & {
     id: string; // room uid
+    centerX: number | null,
+    centerY: number | null,
+    scale: number
 };
 
 export type ISize = Size & {
@@ -95,7 +98,7 @@ export class AttributesDelegate {
             attrNames.push("scenes");
         }
         const options = pick(params.options, attrNames);
-        const attrs: AppSyncAttributes = { kind: params.kind, options, isDynamicPPT };
+        const attrs: AppSyncAttributes = { kind: params.kind, options, isDynamicPPT, setup: false };
         if (typeof params.src === "string") {
             attrs.src = params.src;
         }