@netless/window-manager 1.0.0-canary.7 → 1.0.0-canary.71

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,9 +1,8 @@
 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";
 
@@ -50,14 +49,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 +69,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 +105,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 +133,18 @@ export class AppListeners {
             }
         }
     }
+
+    private moveCameraHandler = (payload: Camera) => {
+        const size$ = this.manager.mainViewProxy.size$;
+        if (size$.value) {
+            const size = this.manager.mainView.size;
+            const diff = Math.max(size.height / size$.value.height, size.width / size$.value.width);
+            const nextCamera = { ...payload, scale: payload.scale * diff };
+            this.manager.mainView.moveCamera(nextCamera);
+        }
+    }
+
+    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, toJS } from "white-web-sdk";
+import { autorun, isPlayer, isRoom, ScenePathType, toJS, UpdateEventKind } from "white-web-sdk";
 import { boxEmitter } from "./BoxEmitter";
 import { calculateNextIndex } from "./Page";
 import { callbacks } from "./callback";
@@ -12,12 +12,13 @@ import { emitter } from "./InternalEmitter";
 import { Fields, store } from "./AttributesDelegate";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
-import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
+import { safeListenPropsUpdated } from "./Utils/Reactive";
 import { reconnectRefresher, WindowManager } from "./index";
 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,6 +30,7 @@ import {
     removeScenes,
     setScenePath,
     setViewFocusScenePath,
+    wait,
 } from "./Utils/Common";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
@@ -38,6 +40,7 @@ import type {
     ScenesCallbacksNode,
     SceneState,
     RoomState,
+    Size,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 import type {
@@ -48,6 +51,7 @@ import type {
     BoxStateChangePayload,
 } from "./BoxEmitter";
 import type { Member } from "./Helper";
+import { ScrollMode } from "./View/ScrollMode";
 
 export class AppManager {
     public displayer: Displayer;
@@ -62,11 +66,15 @@ export class AppManager {
 
     private appListeners: AppListeners;
     public boxManager?: BoxManager;
+    public scrollMode?: ScrollMode;
+    public scrollBaseSize$ = new Val<Size | null>(null);
 
-    private _prevSceneIndex: number | undefined;
-    private _prevFocused: string | undefined;
-    private callbacksNode: ScenesCallbacksNode | null = null;
+    public 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();
 
@@ -119,6 +127,21 @@ export class AppManager {
         appRegister.setSyncRegisterApp(payload => {
             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);
+                } else {
+                    this.scrollMode?.dispose();
+                    this.scrollMode = undefined;
+                }
+            });
+        });
     }
 
     private onRemoveScenes = async (params: RemoveSceneParams) => {
@@ -137,7 +160,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 +175,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 +183,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 +323,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 +343,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 +380,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({
@@ -376,8 +395,8 @@ export class AppManager {
     private onBoxMove = (payload: BoxMovePayload) => {
         this.dispatchInternalEvent(Events.AppMove, payload);
         this.store.updateAppState(payload.appId, AppAttributes.Position, {
-            x: payload.x,
-            y: payload.y,
+            x: payload.x || 0,
+            y: payload.y || 0,
         });
     };
 
@@ -407,7 +426,7 @@ export class AppManager {
     };
 
     public addAppsChangeListener = () => {
-        this.refresher?.add("apps", () => {
+        this.refresher.add("apps", () => {
             return safeListenPropsUpdated(
                 () => this.attributes.apps,
                 () => {
@@ -419,34 +438,40 @@ export class AppManager {
 
     public addAppCloseListener = () => {
         this.refresher?.add("appsClose", () => {
-            return onObjectRemoved(this.attributes.apps, () => {
-                this.onAppDelete(this.attributes.apps);
-            });
+            return safeListenPropsUpdated(
+                () => this.attributes.apps,
+                events => {
+                    if (events.some(e => e.kind === UpdateEventKind.Removed)) {
+                        this.onAppDelete(this.attributes.apps);
+                    }
+                }
+            );
         });
     };
 
     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 +485,9 @@ export class AppManager {
     );
 
     /**
-     * 插件更新 attributes 时的回调
+     * 插件更新 apps 时的回调
      *
-     * @param {*} attributes
+     * @param {*} apps
      * @memberof WindowManager
      */
     public async _attributesUpdateCallback(apps: any) {
@@ -471,14 +496,28 @@ 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 => {
+                // 兼容 1.0 之前创建的应用
+                if (apps[appId].setup === true || apps[appId].setup === undefined) {
+                    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 +575,7 @@ export class AppManager {
 
     public setBoxManager(boxManager: BoxManager) {
         this.boxManager = boxManager;
+        this.mainViewProxy.createViewSync();
     }
 
     public resetMaximized() {
@@ -565,11 +605,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 +632,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 +644,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) {
@@ -613,8 +658,8 @@ export class AppManager {
             const box = appProxy.box;
             boxEmitter.emit("move", {
                 appId: appProxy.id,
-                x: box?.intrinsicX,
-                y: box?.intrinsicY,
+                x: box.intrinsicX || 0,
+                y: box.intrinsicY || 0,
             });
             this.store.updateAppState(appProxy.id, AppAttributes.ZIndex, box.zIndex);
         }
@@ -666,7 +711,7 @@ 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) {
@@ -677,7 +722,7 @@ export class AppManager {
     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 {
@@ -686,15 +731,13 @@ 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);
+        this.isWritable$.setValue(isWritable);
     };
 
     public safeSetAttributes(attributes: any) {
@@ -796,6 +839,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();
@@ -834,7 +878,9 @@ export class AppManager {
         }
         callbacks.clearListeners();
         this.sideEffectManager.flushAll();
-        this._prevFocused = undefined;
-        this._prevSceneIndex = undefined;
+        this.sceneIndex$.destroy();
+        this.focused$.destroy();
+        this.members$.destroy();
+        this.scrollMode?.dispose();
     }
 }

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;
         }