@netless/window-manager 1.0.0-canary.29 → 1.0.0-canary.31

package/src/AppManager.ts

@@ -69,6 +69,7 @@ export class AppManager {
     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();
 
@@ -121,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) => {
@@ -302,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) {
@@ -475,13 +473,17 @@ export class AppManager {
                 this.appCreateQueue.emitReady();
             }
             const appsWithCreatedAt = appIds.map(appId => {
-                return {
-                    id: appId,
-                    createdAt: apps[appId].createdAt,
-                };
+                if (apps[appId].setup) {
+                    return {
+                        id: appId,
+                        createdAt: apps[appId].createdAt,
+                    };
+                } else {
+                    return {}
+                }
             });
             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];
@@ -572,11 +574,11 @@ export class AppManager {
         // 延迟挂载 mainView 的 dom, 避免因为同步 camera 的闪动
         wait(30).then(() => {
             mainView.divElement = divElement;
+            emitter.emit("mainViewMounted");
         });
         if (!mainView.focusScenePath) {
             this.setMainViewFocusPath();
         }
-        emitter.emit("mainViewMounted");
     }
 
     public setMainViewFocusPath(scenePath?: string) {
@@ -596,6 +598,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);
@@ -607,6 +610,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) {
@@ -673,7 +677,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) {
@@ -841,5 +845,6 @@ export class AppManager {
         this.sideEffectManager.flushAll();
         this.sceneIndex$.destroy();
         this.focused$.destroy();
+        this.members$.destroy();
     }
 }

package/src/AttributesDelegate.ts

@@ -98,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;
         }

package/src/BoxManager.ts

@@ -14,6 +14,7 @@ import type {
     TeleBoxColorScheme,
     TeleBoxRect,
     TeleBoxConfig,
+    TeleBoxFullscreen
 } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
@@ -51,6 +52,7 @@ export type CreateTeleBoxManagerConfig = {
     stageRatio?: number;
     containerStyle?: string;
     stageStyle?: string;
+    fullscreen?: TeleBoxFullscreen;
 };
 
 export type BoxManagerContext = {
@@ -262,6 +264,10 @@ export class BoxManager {
             initManagerState.stageStyle = createTeleBoxManagerConfig.stageStyle;
         }
 
+        if (createTeleBoxManagerConfig?.fullscreen) {
+            initManagerState.fullscreen = createTeleBoxManagerConfig.fullscreen;
+        }
+
         const manager = new TeleBoxManager(initManagerState);
         if (this.teleBoxManager) {
             this.teleBoxManager.destroy();

package/src/Cursor/Cursor.ts

@@ -31,7 +31,7 @@ export class Cursor {
 
     public move = (position: Position) => {
         if (position.type === "main") {
-            const rect = this.cursorManager.wrapperRect;
+            const rect = this.manager.boxManager?.stageRect;
             if (this.component && rect) {
                 this.autoHidden();
                 this.moveCursor(position, rect, this.manager.mainView);

package/src/Cursor/index.ts

@@ -89,6 +89,7 @@ export class CursorManager {
                 wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
             };
         });
+        this.updateContainerRect();
     }
 
     public setMainViewDivElement(div: HTMLDivElement) {
@@ -108,7 +109,7 @@ export class CursorManager {
             if (!event.isPrimary) return;
         }
         this.updateCursor(this.getType(event), event.clientX, event.clientY);
-    }, 16);
+    }, 48);
 
     private updateCursor(event: EventType, clientX: number, clientY: number) {
         if (this.wrapperRect && this.manager.canOperate) {
@@ -166,7 +167,7 @@ export class CursorManager {
     };
 
     public updateContainerRect() {
-        this.wrapperRect = this.manager.boxManager?.teleBoxManager.stageRect;
+        this.wrapperRect = this.manager.boxManager?.stageRect;
         this.playgroundRect = WindowManager.playground?.getBoundingClientRect();
     }
 

package/src/Helper.ts

@@ -1,7 +1,7 @@
 import { getVersionNumber, wait } from "./Utils/Common";
 import { log } from "./Utils/log";
 import { REQUIRE_VERSION } from "./constants";
-import { WhiteVersion } from "white-web-sdk";
+import { toJS, WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
 import { WindowManager } from "./index";
 import type { Room, RoomMember } from "white-web-sdk";
@@ -41,7 +41,7 @@ export type Member = RoomMember & { uid: string };
 export const serializeRoomMembers = (members: readonly RoomMember[]) => {
     return members.map(member => ({
         uid: member.payload?.uid || "",
-        ...member,
+        ...toJS(member),
     }));
 };
 

package/src/InternalEmitter.ts

@@ -1,7 +1,6 @@
 import Emittery from "emittery";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { CursorMovePayload } from "./index";
-import type { Member } from "./Helper";
 import type { MemberState } from "white-web-sdk";
 
 export type RemoveSceneParams = {
@@ -30,7 +29,6 @@ export type EmitterEvent = {
     changePageState: undefined;
     writableChange: boolean;
     containerSizeRatioUpdate: number;
-    roomMembersChange: Member[];
     memberStateChange: MemberState;
 };
 

package/src/View/CameraSynchronizer.ts

@@ -43,7 +43,7 @@ export class CameraSynchronizer {
             if (camera.centerY !== null) {
                 config.centerY = camera.centerY;
             }
-            this.view?.moveCamera(config);
+            this.moveCamera(config);
         }
     }, 10);
 
@@ -53,9 +53,8 @@ export class CameraSynchronizer {
         if (this.rect && this.remoteCamera && needMoveCamera) {
             const scale = this.rect.width / size.width;
             const nextScale = this.remoteCamera.scale * scale;
-            this.view?.moveCamera({
+            this.moveCamera({
                 scale: nextScale,
-                animationMode: AnimationMode.Continuous,
             })
         }
     }
@@ -64,4 +63,8 @@ export class CameraSynchronizer {
         this.saveCamera(camera);
         this.remoteCamera = camera;
     }
+
+    private moveCamera(camera: Partial<Camera>) {
+        this.view?.moveCamera({ ...camera, animationMode: AnimationMode.Continuous });
+    }
 }

package/src/View/ViewSync.ts

@@ -1,4 +1,4 @@
-import { AnimationMode, ViewMode } from "white-web-sdk";
+import { ViewMode, AnimationMode } from "white-web-sdk";
 import { CameraSynchronizer } from "./CameraSynchronizer";
 import { combine } from "value-enhancer";
 import { isEqual } from "lodash";

package/src/constants.ts

@@ -14,6 +14,7 @@ export enum Events {
     RootDirRemoved = "RootDirRemoved",
     Refresh = "Refresh",
     InitMainViewCamera = "InitMainViewCamera",
+    InvokeAttributesUpdateCallback = "InvokeAttributesUpdateCallback",
 }
 
 export const MagixEventName = "__WindowManger";

package/src/index.ts

@@ -48,7 +48,7 @@ import type {
  Rectangle} from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { ApplianceIcons, NetlessApp, RegisterParams } from "./typings";
-import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
+import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
@@ -105,6 +105,7 @@ export type AppSyncAttributes = {
     createdAt?: number;
     camera?: ICamera;
     size?: ISize;
+    setup: boolean;
 };
 
 export type AppInitState = {
@@ -147,6 +148,7 @@ export type MountParams = {
     disableCameraTransform?: boolean;
     prefersColorScheme?: TeleBoxColorScheme;
     applianceIcons?: ApplianceIcons;
+    fullscreen?: TeleBoxFullscreen;
 };
 
 export const reconnectRefresher = new ReconnectRefresher({ emitter });
@@ -251,6 +253,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             stageRatio: WindowManager.containerSizeRatio,
             containerStyle: params.containerStyle,
             stageStyle: params.stageStyle,
+            fullscreen: params.fullscreen,
         });
         manager.appManager?.setBoxManager(manager.boxManager);
         if (params.container) {
@@ -1007,3 +1010,4 @@ export * from "./typings";
 
 export { BuiltinApps, BuiltinAppsMap } from "./BuiltinApps";
 export type { PublicEvent } from "./callback";
+export type { Member } from "./Helper";

package/src/style.css

@@ -83,7 +83,7 @@
     left: 0;
     top: 0;
     will-change: transform;
-    transition: transform 0.1s;
+    transition: transform 0.12s;
     transform-origin: 0 0;
     user-select: none;
 }

package/src/typings.ts

@@ -11,7 +11,7 @@ import type {
     View,
 } from "white-web-sdk";
 import type { AppContext } from "./App";
-import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
+import type { ReadonlyTeleBox, TeleBoxRect, TeleBoxFullscreen } from "@netless/telebox-insider";
 import type { PageState } from "./Page";
 import type { Member } from "./Helper";
 
@@ -88,7 +88,7 @@ export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 
 export type { AppContext } from "./App/AppContext";
 export type { WhiteBoardView } from "./App";
-export type { ReadonlyTeleBox, TeleBoxRect };
+export type { ReadonlyTeleBox, TeleBoxRect, TeleBoxFullscreen };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
 export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";
 export * from "./Page";