@netless/window-manager 1.0.0-canary.24 → 1.0.0-canary.27

package/src/App/AppContext.ts

@@ -107,18 +107,26 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         const viewWrapper = document.createElement("div");
         this._viewWrapper = viewWrapper;
         viewWrapper.className = "window-manager-view-wrapper";
-        this.box.$content.parentElement?.appendChild(viewWrapper);
+        this.box.$main.appendChild(viewWrapper);
         view.divElement = viewWrapper;
         this.appProxy.fireMemberStateChange();
         if (this.isAddApp) {
             this.ensurePageSize(params?.size);
         }
         this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
-        this.appProxy.sideEffectManager.add(() => {
-            return () => {
-                this.whiteBoardView = undefined;
+        this.appProxy.sideEffectManager.add(() => [
+            this.box._stageRect$.subscribe(rect => {
+                viewWrapper.style.left = `${rect.x}px`;
+                viewWrapper.style.top = `${rect.y}px`;
+                viewWrapper.style.width = `${rect.width}px`;
+                viewWrapper.style.height = `${rect.height}px`;
+            }),
+            () => {
+                return () => {
+                    this.whiteBoardView = undefined;
+                }
             }
-        });
+        ]);
         this.appProxy.whiteBoardViewCreated$.setValue(true);
         return this.whiteBoardView;
     }
@@ -162,7 +170,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         return this.manager.members;
     }
 
-    public get memberState(): Member {
+    public get currentMember(): Member {
         const self = findMemberByUid(this.room, this.manager.uid);
         if (!self) {
             throw new Error(`Member ${this.manager.uid} not found.`);

package/src/App/AppProxy.ts

@@ -32,9 +32,10 @@ import type {
 import type { SceneState, View, SceneDefinition,  MemberState} from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import type { NetlessApp } from "../typings";
-import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
+import type { ReadonlyTeleBox, TeleBox, TeleBoxRect } from "@netless/telebox-insider";
 import type { PageRemoveService, PageState } from "../Page";
 import type { AppState } from "./type";
+import { callbacks } from "../callback";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -142,10 +143,10 @@ export class AppProxy implements PageRemoveService {
                                 });
                                 this.camera$.setValue(toJS(this.appAttributes.camera));
                             }
-                            if (!this.size$.value && box.contentStageRect) {
-                                const initialRect = this.computedInitialRect(box.contentStageRect);
-                                const width = initialRect?.width || box.contentStageRect.width;
-                                const height = initialRect?.height || box.contentStageRect.height;
+                            if (!this.size$.value && box.stageRect) {
+                                const initialRect = this.computedInitialRect(box.stageRect);
+                                const width = initialRect?.width || box.stageRect.width;
+                                const height = initialRect?.height || box.stageRect.height;
                                 this.storeSize({
                                     id: this.uid,
                                     width,
@@ -158,7 +159,7 @@ export class AppProxy implements PageRemoveService {
                                 view$: this.view$,
                                 camera$: this.camera$,
                                 size$: this.size$,
-                                stageRect$: box._contentStageRect$,
+                                stageRect$: box._stageRect$,
                                 storeCamera: this.storeCamera,
                                 storeSize: this.storeSize
                             });
@@ -341,10 +342,18 @@ export class AppProxy implements PageRemoveService {
                 options,
                 canOperate: this.manager.canOperate,
                 smartPosition: this.isAddApp,
-            });
+            }) as TeleBox;
+            const registerParams = appRegister.registered.get(this.kind);
+            if (registerParams?.contentStyles) {
+                box?.mountUserStyles(registerParams.contentStyles);
+            }
             this.box$.setValue(box);
             if (this.isAddApp && this.box) {
                 this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
+                this.store.updateAppState(appId, AppAttributes.Size, {
+                    width: this.box.intrinsicWidth,
+                    height: this.box.intrinsicHeight,
+                });
                 this.boxManager.focusBox({ appId }, false);
             }
         } catch (error: any) {
@@ -622,6 +631,7 @@ export class AppProxy implements PageRemoveService {
         this.status = "destroyed";
         try {
             await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
+            callbacks.emit("appClose", { appId: this.id, kind: this.kind, error });
             await this.appEmitter.emit("destroy", { error });
         } catch (error) {
             console.error("[WindowManager]: notifyApp error", error.message, error.stack);

package/src/App/WhiteboardView.ts

@@ -6,15 +6,17 @@ 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 { View } from "white-web-sdk";
+import type { Camera, View } from "white-web-sdk";
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { ICamera } from "../AttributesDelegate";
+import type { ICamera, ISize } from "../AttributesDelegate";
 
-export type WhiteBoardViewCamera = Omit<ICamera, "scale" | "id">;
+export type WhiteBoardViewCamera = Omit<ICamera, "id">;
+export type WhiteBoardViewRect = Omit<ISize, "id">;
 
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;
-    public readonly camera$: ReadonlyVal<WhiteBoardViewCamera>;
+    public readonly baseCamera$: ReadonlyVal<WhiteBoardViewCamera>;
+    public readonly baseRect$: ReadonlyVal<WhiteBoardViewRect | undefined>;
 
     constructor(
         public view: View,
@@ -23,23 +25,26 @@ export class WhiteBoardView implements PageController {
         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$;
-        this.appProxy.sideEffectManager.add(() =>
-            appProxy.appEmitter.on("pageStateChange", pageState => {
-                pageState$.setValue(pageState);
-            })
-        );
-        const camera$ = new Val<WhiteBoardViewCamera>(
-            pick(this.view.camera, ["centerX", "centerY"])
-        );
-        this.camera$ = camera$;
-        this.appProxy.sideEffectManager.add(() =>
+        this.baseCamera$ = camera$;
+        this.appProxy.sideEffectManager.add(() => [
+            appProxy.appEmitter.on("pageStateChange", pageState => pageState$.setValue(pageState)),
             appProxy.camera$.subscribe(camera => {
                 if (camera) {
-                    camera$.setValue(pick(camera, ["centerX", "centerY"]));
+                    camera$.setValue(pickCamera(camera));
                 }
-            })
-        );
+            }),
+            appProxy.size$.subscribe(size => {
+                if (size) {
+                    baseRect$.setValue(pick(size, ["width", "height"]));
+                }
+            }),
+        ]);
         view.disableCameraTransform = true;
     }
 
@@ -96,7 +101,7 @@ export class WhiteBoardView implements PageController {
         return this.appProxy.removeSceneByIndex(needRemoveIndex);
     };
 
-    public setRect(rect: Omit<TeleBoxRect, "x" | "y">) {
+    public setBaseRect(rect: Omit<TeleBoxRect, "x" | "y">) {
         this.appProxy.updateSize(rect.width, rect.height);
     }
 }

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 { Event } 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;
@@ -102,17 +93,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);
     };

package/src/AppManager.ts

@@ -409,7 +409,7 @@ export class AppManager {
     };
 
     public addAppsChangeListener = () => {
-        this.refresher?.add("apps", () => {
+        this.refresher.add("apps", () => {
             return safeListenPropsUpdated(
                 () => this.attributes.apps,
                 () => {
@@ -800,6 +800,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();

package/src/BoxManager.ts

@@ -3,6 +3,7 @@ import { debounce } from "lodash";
 import { SideEffectManager } from "side-effect-manager";
 import { TELE_BOX_STATE, TeleBoxManager } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
+import type { Writeable } from "./typings";
 import type { BoxEmitterType } from "./BoxEmitter";
 import type { AddAppOptions } from "./index";
 import type {
@@ -48,7 +49,8 @@ export type CreateTeleBoxManagerConfig = {
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
     stageRatio?: number;
-    highlightStage?: boolean;
+    containerStyle?: string;
+    stageStyle?: string;
 };
 
 export type BoxManagerContext = {
@@ -169,13 +171,6 @@ export class BoxManager {
             this.teleBoxManager.events.on("z_index", box => {
                 this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
             }),
-            this.teleBoxManager._stageRect$.subscribe(stage => {
-                emitter.emit("playgroundSizeChange", stage);
-                this.context.notifyContainerRectUpdate(stage);
-            }),
-            emitter.on("writableChange", isWritable => {
-                this.teleBoxManager.setHighlightStage(isWritable);
-            }),
             emitter.on("containerSizeRatioUpdate", ratio => {
                 this.teleBoxManager._stageRatio$.setValue(ratio);
             }),
@@ -220,7 +215,8 @@ export class BoxManager {
 
     public createBox(params: CreateBoxParams): ReadonlyTeleBox | undefined {
         if (!this.teleBoxManager) return;
-        let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = params.app.config ?? {};
+        // eslint-disable-next-line prefer-const
+        let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT, enableShadowDOM = true } = params.app.config ?? {};
         const { width, height } = params.app.config ?? {};
         const title = params.options?.title || params.appId;
         const rect = this.teleBoxManager.rootRect;
@@ -240,6 +236,7 @@ export class BoxManager {
             width,
             height,
             id: params.appId,
+            enableShadowDOM,
         };
         const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
@@ -250,14 +247,21 @@ export class BoxManager {
         createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ): TeleBoxManager {
         const root = WindowManager.playground;
-        const initManagerState: TeleBoxManagerConfig = {
+        const initManagerState: Writeable<TeleBoxManagerConfig> = {
             stageRatio: createTeleBoxManagerConfig?.stageRatio,
             root: root,
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
-            highlightStage: createTeleBoxManagerConfig?.highlightStage,
         };
 
+        if (createTeleBoxManagerConfig?.containerStyle) {
+            initManagerState.containerStyle = createTeleBoxManagerConfig.containerStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.stageStyle) {
+            initManagerState.stageStyle = createTeleBoxManagerConfig.stageStyle;
+        }
+
         const manager = new TeleBoxManager(initManagerState);
         if (this.teleBoxManager) {
             this.teleBoxManager.destroy();
@@ -299,17 +303,15 @@ export class BoxManager {
         if (!state) return;
         const box = this.getBox(state.id);
         if (box) {
-            this.teleBoxManager.update(
-                box.id,
-                {
-                    x: state.position?.x,
-                    y: state.position?.y,
-                    width: state.size?.width || 0.5,
-                    height: state.size?.height || 0.5,
-                    zIndex: state.zIndex,
-                },
-                true
-            );
+            if (state.size) {
+                box._intrinsicSize$.setValue(state.size, true);
+            }
+            if (state.position) {
+                box._intrinsicCoord$.setValue(state.position, true);
+            }
+            if (state.zIndex) {
+                box._zIndex$.setValue(state.zIndex, true);
+            }
             setTimeout(() => {
                 if (state.focus) {
                     this.teleBoxManager.focusBox(box.id, true);
@@ -326,7 +328,10 @@ export class BoxManager {
     }
 
     public moveBox({ appId, x, y }: MoveBoxParams): void {
-        this.teleBoxManager.update(appId, { x, y }, true);
+        const box = this.getBox(appId);
+        if (box) {
+            box._intrinsicCoord$.setValue({ x, y}, true);
+        }
     }
 
     public focusBox({ appId }: AppId, skipUpdate = true): void {
@@ -334,7 +339,10 @@ export class BoxManager {
     }
 
     public resizeBox({ appId, width, height, skipUpdate }: ResizeBoxParams): void {
-        this.teleBoxManager.update(appId, { width, height }, skipUpdate);
+        const box = this.getBox(appId);
+        if (box) {
+            box._intrinsicSize$.setValue({ width, height }, skipUpdate);
+        }
     }
 
     public setBoxMinSize(params: SetBoxMinSizeParams): void {

package/src/BuiltinApps.ts

@@ -21,3 +21,8 @@ export const BuiltinApps = {
     DocsViewer: AppDocsViewer.kind as string,
     MediaPlayer: AppMediaPlayer.kind as string,
 };
+
+export const BuiltinAppsMap = {
+    [BuiltinApps.DocsViewer]: AppDocsViewer,
+    [BuiltinApps.MediaPlayer]: AppMediaPlayer,
+}

package/src/Cursor/Cursor.ts

@@ -7,6 +7,7 @@ import type { RoomMember } from "white-web-sdk";
 import type { CursorManager } from "./index";
 import type { SvelteComponent } from "svelte";
 import type { AppManager } from "../AppManager";
+import type { TeleBoxRect } from "@netless/telebox-insider";
 
 export type Payload = {
     [key: string]: any;
@@ -50,18 +51,21 @@ export class Cursor {
         this.hide();
     };
 
-    private moveCursor(cursor: Position, rect: DOMRect, view: any) {
+    private moveCursor(cursor: Position, rect: TeleBoxRect, view: any) {
         const { x, y, type } = cursor;
         const point = view?.screen.convertPointToScreen(x, y);
         if (point) {
             let translateX = point.x - 2;
             let translateY = point.y - 18;
             if (type === "app") {
-                const wrapperRect = this.cursorManager.wrapperRect;
+                const wrapperRect = this.cursorManager.playgroundRect;
                 if (wrapperRect) {
                     translateX = translateX + rect.x - wrapperRect.x;
                     translateY = translateY + rect.y - wrapperRect.y;
                 }
+            } else {
+                translateX = translateX + rect.x;
+                translateY = translateY + rect.y;
             }
             if (point.x < 0 || point.x > rect.width || point.y < 0 || point.y > rect.height) {
                 this.component?.$set({ visible: false, x: translateX, y: translateY });

package/src/Cursor/index.ts

@@ -5,7 +5,7 @@ import { emitter } from "../InternalEmitter";
 import { SideEffectManager } from "side-effect-manager";
 import { throttle } from "lodash";
 import { WindowManager } from "../index";
-import type { CursorMovePayload , ApplianceIcons} from "../index";
+import type { CursorMovePayload , ApplianceIcons, TeleBoxRect } from "../index";
 import type { PositionType } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
@@ -23,7 +23,8 @@ export type MoveCursorParams = {
 };
 
 export class CursorManager {
-    public wrapperRect?: DOMRect;
+    public wrapperRect?: TeleBoxRect;
+    public playgroundRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
     private mainViewElement?: HTMLDivElement;
@@ -88,8 +89,6 @@ export class CursorManager {
                 wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
             };
         });
-
-        this.wrapperRect = wrapper.getBoundingClientRect();
     }
 
     public setMainViewDivElement(div: HTMLDivElement) {
@@ -167,7 +166,8 @@ export class CursorManager {
     };
 
     public updateContainerRect() {
-        this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
+        this.wrapperRect = this.manager.boxManager?.teleBoxManager.stageRect;
+        this.playgroundRect = WindowManager.playground?.getBoundingClientRect();
     }
 
     public deleteCursor(uid: string) {

package/src/Helper.ts

@@ -1,11 +1,14 @@
-import { getVersionNumber } from "./Utils/Common";
+import { getVersionNumber, wait } from "./Utils/Common";
+import { log } from "./Utils/log";
 import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
-import type { Room , RoomMember} from "white-web-sdk";
+import { WindowManager } from "./index";
+import type { Room, RoomMember } from "white-web-sdk";
 
 export const setupWrapper = (
-    root: HTMLElement
+    root: HTMLElement,
+    target: HTMLElement
 ): {
     playground: HTMLDivElement;
     mainViewElement: HTMLDivElement;
@@ -15,7 +18,7 @@ export const setupWrapper = (
 
     const mainViewElement = document.createElement("div");
     mainViewElement.className = "netless-window-manager-main-view";
-    playground.appendChild(mainViewElement);
+    target.appendChild(mainViewElement);
     root.appendChild(playground);
 
     return { playground, mainViewElement };
@@ -40,4 +43,19 @@ export const serializeRoomMembers = (members: readonly RoomMember[]) => {
         uid: member.payload?.uid || "",
         ...member,
     }));
-}
+};
+
+export const createInvisiblePlugin = async (room: Room) => {
+    try {
+        const manager = (await room.createInvisiblePlugin(WindowManager, {})) as WindowManager;
+        return manager;
+    } catch (error) {
+        // 如果有两个用户同时调用 WindowManager.mount 有概率出现这个错误
+        if (error.message === `invisible plugin "WindowManager" exits`) {
+            await wait(200);
+            return room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
+        } else {
+            log("createInvisiblePlugin failed", error);
+        }
+    }
+};

package/src/View/CameraSynchronizer.ts

@@ -30,16 +30,12 @@ export class CameraSynchronizer {
         this.remoteCamera = camera;
         this.remoteSize = size;
         if (this.remoteSize && this.rect) {
-            let scale: number;
-            if (size.width < size.height) {
-                scale = this.rect.width / size.width;
-            } else {
-                scale = this.rect.height / size.height;
-            }
-            const nextScale = camera.scale * scale;
+            const wScale = this.rect.width / size.width;
+            const hScale = this.rect.height / size.height;
+            const nextScale = camera.scale * Math.min(wScale, hScale);
             const config: Partial<Camera> & { animationMode: AnimationMode } = {
                 scale: nextScale,
-                animationMode: AnimationMode.Immediately,
+                animationMode: AnimationMode.Continuous,
             }
             if (camera.centerX !== null) {
                 config.centerX = camera.centerX;
@@ -59,7 +55,7 @@ export class CameraSynchronizer {
             const nextScale = this.remoteCamera.scale * scale;
             this.view?.moveCamera({
                 scale: nextScale,
-                animationMode: AnimationMode.Immediately,
+                animationMode: AnimationMode.Continuous,
             })
         }
     }

package/src/View/MainView.ts

@@ -4,7 +4,7 @@ import { debounce, get, isEqual } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Events } from "../constants";
 import { Fields } from "../AttributesDelegate";
-import { reaction, toJS } from "white-web-sdk";
+import { AnimationMode, reaction, toJS } from "white-web-sdk";
 import { releaseView, setScenePath, setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
 import { Val } from "value-enhancer";
@@ -211,12 +211,14 @@ 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();
     }

package/src/callback.ts

@@ -20,6 +20,7 @@ export type PublicEvent = {
     ready: undefined; // 所有 APP 创建完毕时触发
     sceneStateChange: SceneState;
     pageStateChange: PageState;
+    appClose: { appId: string; kind: string, error?: Error };
 };
 
 export type CallbacksType = Emittery<PublicEvent>;

package/src/constants.ts

@@ -10,8 +10,6 @@ export enum Events {
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SetAppFocusIndex = "SetAppFocusIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
-    MoveCamera = "MoveCamera",
-    MoveCameraToContain = "MoveCameraToContain",
     CursorMove = "CursorMove",
     RootDirRemoved = "RootDirRemoved",
     Refresh = "Refresh",