@netless/window-manager 1.0.0-canary.3 → 1.0.0-canary.32

package/src/BoxManager.ts

@@ -1,9 +1,11 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 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, AppInitState } from "./index";
+import type { AddAppOptions } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
     TeleBoxManagerCreateConfig,
@@ -12,13 +14,14 @@ import type {
     TeleBoxColorScheme,
     TeleBoxRect,
     TeleBoxConfig,
+    TeleBoxFullscreen
 } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
 import type { CallbacksType } from "./callback";
 import type { EmitterType } from "./InternalEmitter";
-import { SideEffectManager } from "side-effect-manager";
+import type { AppState } from "./App/type";
 
 export { TELE_BOX_STATE };
 
@@ -47,11 +50,13 @@ export type CreateTeleBoxManagerConfig = {
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
     stageRatio?: number;
+    containerStyle?: string;
+    stageStyle?: string;
+    fullscreen?: TeleBoxFullscreen;
 };
 
 export type BoxManagerContext = {
     safeSetAttributes: (attributes: any) => void;
-    getMainView: () => View;
     updateAppState: (appId: string, field: AppAttributes, value: any) => void;
     emitter: EmitterType;
     boxEmitter: BoxEmitterType;
@@ -72,7 +77,6 @@ export const createBoxManager = (
     return new BoxManager(
         {
             safeSetAttributes: (attributes: any) => manager.safeSetAttributes(attributes),
-            getMainView: () => manager.mainView,
             updateAppState: (...args) => manager.appManager?.store.updateAppState(...args),
             canOperate: () => manager.canOperate,
             notifyContainerRectUpdate: (rect: TeleBoxRect) =>
@@ -81,7 +85,7 @@ export const createBoxManager = (
             setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
-            boxEmitter
+            boxEmitter,
         },
         options
     );
@@ -100,17 +104,17 @@ export class BoxManager {
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
         this.sideEffectManager.add(() => [
             // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
-            this.teleBoxManager._state$.reaction(state => {
+            this.teleBoxManager.onValChanged("state", state => {
                 callbacks.emit("boxStateChange", state);
                 emitter.emit("boxStateChange", state);
             }),
-            this.teleBoxManager._darkMode$.reaction(darkMode => {
+            this.teleBoxManager.onValChanged("darkMode", darkMode => {
                 callbacks.emit("darkModeChange", darkMode);
             }),
-            this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+            this.teleBoxManager.onValChanged("prefersColorScheme", colorScheme => {
                 callbacks.emit("prefersColorSchemeChange", colorScheme);
             }),
-            this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
+            this.teleBoxManager.onValChanged("minimized", (minimized, skipUpdate) => {
                 if (skipUpdate) {
                     return;
                 }
@@ -126,7 +130,7 @@ export class BoxManager {
                     }
                 }
             }),
-            this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+            this.teleBoxManager.onValChanged("maximized", (maximized, skipUpdate) => {
                 if (skipUpdate) {
                     return;
                 }
@@ -140,7 +144,11 @@ export class BoxManager {
             this.teleBoxManager.events.on(
                 "intrinsic_move",
                 debounce((box: ReadonlyTeleBox): void => {
-                    boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+                    boxEmitter.emit("move", {
+                        appId: box.id,
+                        x: box.intrinsicX,
+                        y: box.intrinsicY,
+                    });
                 }, 50)
             ),
             this.teleBoxManager.events.on(
@@ -165,23 +173,12 @@ 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);
             }),
         ]);
     }
 
-    private get mainView() {
-        return this.context.getMainView();
-    }
-
     private get canOperate() {
         return this.context.canOperate();
     }
@@ -214,9 +211,14 @@ export class BoxManager {
         return this.teleBoxManager.stageRect;
     }
 
-    public createBox(params: CreateBoxParams): void {
+    public get stageRect$() {
+        return this.teleBoxManager._stageRect$;
+    }
+
+    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;
@@ -236,22 +238,36 @@ export class BoxManager {
             width,
             height,
             id: params.appId,
+            enableShadowDOM,
         };
-        this.teleBoxManager.create(createBoxConfig, params.smartPosition);
+        const box = this.teleBoxManager.create(createBoxConfig, params.smartPosition);
         this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
+        return box;
     }
 
     public setupBoxManager(
         createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ): TeleBoxManager {
         const root = WindowManager.playground;
-        const initManagerState: TeleBoxManagerConfig = {
+        const initManagerState: Writeable<TeleBoxManagerConfig> = {
             stageRatio: createTeleBoxManagerConfig?.stageRatio,
             root: root,
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
         };
 
+        if (createTeleBoxManagerConfig?.containerStyle) {
+            initManagerState.containerStyle = createTeleBoxManagerConfig.containerStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.stageStyle) {
+            initManagerState.stageStyle = createTeleBoxManagerConfig.stageStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.fullscreen) {
+            initManagerState.fullscreen = createTeleBoxManagerConfig.fullscreen;
+        }
+
         const manager = new TeleBoxManager(initManagerState);
         if (this.teleBoxManager) {
             this.teleBoxManager.destroy();
@@ -289,21 +305,19 @@ export class BoxManager {
         return this.teleBoxManager.topBox;
     }
 
-    public updateBoxState(state?: AppInitState): void {
+    public updateBoxState(state?: AppState): void {
         if (!state) return;
         const box = this.getBox(state.id);
         if (box) {
-            this.teleBoxManager.update(
-                box.id,
-                {
-                    x: state.x,
-                    y: state.y,
-                    width: state.width || 0.5,
-                    height: state.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);
@@ -320,7 +334,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 {
@@ -328,7 +345,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;
@@ -30,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);
@@ -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,8 +23,8 @@ export type MoveCursorParams = {
 };
 
 export class CursorManager {
-    public containerRect?: DOMRect;
-    public wrapperRect?: DOMRect;
+    public wrapperRect?: TeleBoxRect;
+    public playgroundRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
     private mainViewElement?: HTMLDivElement;
@@ -89,8 +89,7 @@ export class CursorManager {
                 wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
             };
         });
-
-        this.wrapperRect = wrapper.getBoundingClientRect();
+        this.updateContainerRect();
     }
 
     public setMainViewDivElement(div: HTMLDivElement) {
@@ -110,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) {
@@ -168,8 +167,8 @@ export class CursorManager {
     };
 
     public updateContainerRect() {
-        this.containerRect = WindowManager.container?.getBoundingClientRect();
-        this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
+        this.wrapperRect = this.manager.boxManager?.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 { toJS, 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 };
@@ -38,6 +41,21 @@ export type Member = RoomMember & { uid: string };
 export const serializeRoomMembers = (members: readonly RoomMember[]) => {
     return members.map(member => ({
         uid: member.payload?.uid || "",
-        ...member,
+        ...toJS(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/InternalEmitter.ts

@@ -1,7 +1,7 @@
 import Emittery from "emittery";
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { AppInitState, CursorMovePayload } from "./index";
-import type { Member } from "./Helper";
+import type { CursorMovePayload } from "./index";
+import type { MemberState } from "white-web-sdk";
 
 export type RemoveSceneParams = {
     scenePath: string;
@@ -10,7 +10,6 @@ export type RemoveSceneParams = {
 
 export type EmitterEvent = {
     onCreated: undefined;
-    InitReplay: AppInitState;
     error: Error;
     seekStart: undefined;
     seek: number;
@@ -30,7 +29,7 @@ export type EmitterEvent = {
     changePageState: undefined;
     writableChange: boolean;
     containerSizeRatioUpdate: number;
-    roomMembersChange: Member[];
+    memberStateChange: MemberState;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/Page/PageController.ts

@@ -13,6 +13,7 @@ export type PageState = {
 export interface PageController {
     nextPage: () => Promise<boolean>;
     prevPage: () => Promise<boolean>;
+    jumpPage: (index: number) => Promise<boolean>;
     addPage: (params?: AddPageParams) => Promise<void>;
     removePage: (index: number) => Promise<boolean>;
     pageState: PageState;

package/src/PageState.ts

@@ -6,7 +6,7 @@ import type { PageState } from "./Page";
 export class PageStateImpl {
     constructor(private manager: AppManager) {
         emitter.on("changePageState", () => {
-            callbacks.emit("pageStateChange", this.toObject());
+          callbacks.emit("pageStateChange", this.toObject());
         });
     }
 

package/src/ReconnectRefresher.ts

@@ -46,14 +46,18 @@ export class ReconnectRefresher {
             this.ctx.emitter.emit("startReconnect");
         }
         if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
-            this.room?.dispatchMagixEvent(EnsureReconnectEvent, {});
+            if (this.room?.isWritable) {
+                this.room?.dispatchMagixEvent(EnsureReconnectEvent, {});
+            } else {
+                this.onReconnected();
+            }
         }
         this.phase = phase;
     };
 
     private onReconnected = debounce(() => {
         this._onReconnected();
-    }, 3000);
+    }, 1000);
 
     private _onReconnected = () => {
         log("onReconnected refresh reactors");
@@ -88,6 +92,7 @@ export class ReconnectRefresher {
             this.reactors.set(id, func);
             this.disposers.set(id, func());
         }
+        return () => this.remove(id);
     }
 
     public remove(id: string) {

package/src/Utils/Common.ts

@@ -17,6 +17,9 @@ export const genAppId = async (kind: string) => {
 };
 
 export const setViewFocusScenePath = (view: View, focusScenePath: string) => {
+    if ((view as any).didRelease) {
+        return;
+    }
     if (view.focusScenePath !== focusScenePath) {
         view.focusScenePath = focusScenePath;
         return view;
@@ -30,6 +33,12 @@ export const setViewSceneIndex = (view: View, index: number) => {
     }
 };
 
+export const releaseView = (view: View) => {
+    if (!(view as any).didRelease) {
+        view.release();
+    }
+}
+
 export const setScenePath = (room: Room | undefined, scenePath: string) => {
     if (room && room.isWritable) {
         if (room.state.sceneState.scenePath !== scenePath) {

package/src/Utils/Reactive.ts

@@ -1,6 +1,6 @@
-import { listenUpdated, unlistenUpdated, reaction, UpdateEventKind } from "white-web-sdk";
-import type { AkkoObjectUpdatedProperty , AkkoObjectUpdatedListener } from "white-web-sdk";
 import { isObject } from "lodash";
+import { listenUpdated, reaction, unlistenUpdated, UpdateEventKind } from "white-web-sdk";
+import type { AkkoObjectUpdatedProperty, AkkoObjectUpdatedListener } from "white-web-sdk";
 
 // 兼容 13 和 14 版本 SDK
 export const onObjectByEvent = (event: UpdateEventKind) => {
@@ -12,7 +12,7 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
                 if (kinds.includes(event)) {
                     func();
                 }
-            }
+            };
             listenUpdated(object, listener);
             func();
             return () => unlistenUpdated(object, listener);
@@ -21,43 +21,44 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
                 () => object,
                 () => {
                     func();
-                }, {
+                },
+                {
                     fireImmediately: true,
                 }
-            )
+            );
         }
-    }
-}
+    };
+};
 
 export const safeListenPropsUpdated = <T>(
     getProps: () => T,
     callback: AkkoObjectUpdatedListener<T>,
     onDestroyed?: (props: unknown) => void
-  ) => {
+) => {
     let disposeListenUpdated: (() => void) | null = null;
     const disposeReaction = reaction(
-      getProps,
-      () => {
-        if (disposeListenUpdated) {
-          disposeListenUpdated();
-          disposeListenUpdated = null;
-        }
-        const props = getProps();
-        if (isObject(props)) {
-          disposeListenUpdated = () => unlistenUpdated(props, callback);
-          listenUpdated(props, callback);
-        } else {
-          onDestroyed?.(props);
-        }
-      },
-      { fireImmediately: true }
+        getProps,
+        () => {
+            if (disposeListenUpdated) {
+                disposeListenUpdated();
+                disposeListenUpdated = null;
+            }
+            const props = getProps();
+            if (isObject(props)) {
+                disposeListenUpdated = () => unlistenUpdated(props, callback);
+                listenUpdated(props, callback);
+            } else {
+                onDestroyed?.(props);
+            }
+        },
+        { fireImmediately: true }
     );
 
     return () => {
-      disposeListenUpdated?.();
-      disposeReaction();
+        disposeListenUpdated?.();
+        disposeReaction();
     };
-}
+};
 
 export const onObjectRemoved = onObjectByEvent(UpdateEventKind.Removed);
 export const onObjectInserted = onObjectByEvent(UpdateEventKind.Inserted);

package/src/Utils/RoomHacker.ts

@@ -56,6 +56,9 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
         room.lockImages = (...args) => manager.lockImages(...args);
 
         delegateRemoveScenes(room, manager);
+        if (!(room as any).dynamicPpt.slideStateAdapter.pptHandler) {
+            (room as any).dynamicPpt.slideStateAdapter.pptHandler = manager.createPPTHandler();
+        }
     }
 };