@netless/window-manager 1.0.0-canary.5 → 1.0.0-canary.52

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,15 @@ import type {
     TeleBoxColorScheme,
     TeleBoxRect,
     TeleBoxConfig,
+    TeleBoxFullscreen,
+    TeleBoxManagerThemeConfig,
 } 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 +51,16 @@ export type CreateTeleBoxManagerConfig = {
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
     stageRatio?: number;
+    containerStyle?: string;
+    stageStyle?: string;
+    fullscreen?: TeleBoxFullscreen;
+    defaultBoxBodyStyle?: string | null;
+    defaultBoxStageStyle?: string | null;
+    theme?: TeleBoxManagerThemeConfig;
 };
 
 export type BoxManagerContext = {
     safeSetAttributes: (attributes: any) => void;
-    getMainView: () => View;
     updateAppState: (appId: string, field: AppAttributes, value: any) => void;
     emitter: EmitterType;
     boxEmitter: BoxEmitterType;
@@ -72,7 +81,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 +89,7 @@ export const createBoxManager = (
             setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
-            boxEmitter
+            boxEmitter,
         },
         options
     );
@@ -100,17 +108,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 +134,7 @@ export class BoxManager {
                     }
                 }
             }),
-            this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+            this.teleBoxManager.onValChanged("maximized", (maximized, skipUpdate) => {
                 if (skipUpdate) {
                     return;
                 }
@@ -140,7 +148,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 +177,15 @@ 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);
             }),
+            this.teleBoxManager._fullscreen$.reaction(fullscreen => {
+                callbacks.emit("fullscreenChange", fullscreen);
+            }),
         ]);
     }
 
-    private get mainView() {
-        return this.context.getMainView();
-    }
-
     private get canOperate() {
         return this.context.canOperate();
     }
@@ -214,9 +218,14 @@ export class BoxManager {
         return this.teleBoxManager.stageRect;
     }
 
+    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,6 +245,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);
@@ -246,13 +256,37 @@ 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,
         };
 
+        if (createTeleBoxManagerConfig?.containerStyle) {
+            initManagerState.containerStyle = createTeleBoxManagerConfig.containerStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.stageStyle) {
+            initManagerState.stageStyle = createTeleBoxManagerConfig.stageStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.fullscreen) {
+            initManagerState.fullscreen = createTeleBoxManagerConfig.fullscreen;
+        }
+
+        if (createTeleBoxManagerConfig?.defaultBoxBodyStyle !== undefined) {
+            initManagerState.defaultBoxBodyStyle = createTeleBoxManagerConfig.defaultBoxBodyStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.defaultBoxStageStyle !== undefined) {
+            initManagerState.defaultBoxStageStyle = createTeleBoxManagerConfig.defaultBoxStageStyle;
+        }
+
+        if (createTeleBoxManagerConfig?.theme) {
+            initManagerState.theme = createTeleBoxManagerConfig.theme;
+        }
+
         const manager = new TeleBoxManager(initManagerState);
         if (this.teleBoxManager) {
             this.teleBoxManager.destroy();
@@ -290,21 +324,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);
@@ -321,7 +353,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 {
@@ -329,7 +364,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

@@ -1,23 +1,24 @@
 import AppDocsViewer from "@netless/app-docs-viewer";
-import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
+import Plyr from "@netless/app-plyr";
 import { WindowManager } from "./index";
 
 export const setupBuiltin = () => {
-    if (WindowManager.debug) {
-        setOptions({ verbose: true });
-    }
-
     WindowManager.register({
         kind: AppDocsViewer.kind,
         src: AppDocsViewer,
     });
     WindowManager.register({
-        kind: AppMediaPlayer.kind,
-        src: AppMediaPlayer,
+        kind: Plyr.kind,
+        src: Plyr,
     });
 };
 
 export const BuiltinApps = {
     DocsViewer: AppDocsViewer.kind as string,
-    MediaPlayer: AppMediaPlayer.kind as string,
+    MediaPlayer: Plyr.kind as string,
 };
+
+export const BuiltinAppsMap = {
+    [BuiltinApps.DocsViewer]: AppDocsViewer,
+    [BuiltinApps.MediaPlayer]: Plyr,
+}

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

@@ -2,7 +2,7 @@ import type { SceneDefinition } from "white-web-sdk";
 
 export type AddPageParams = {
     after?: boolean;
-    scene?: SceneDefinition;
+    scene?: SceneDefinition | SceneDefinition[];
 };
 
 export type PageState = {
@@ -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");

package/src/Register/index.ts

@@ -1,6 +1,7 @@
 import Emittery from "emittery";
 import { loadApp } from "./loader";
 import type { NetlessApp, RegisterEvents, RegisterParams } from "../typings";
+import { removeItem } from "./storage";
 
 export type LoadAppEvent = {
     kind: string;
@@ -11,11 +12,12 @@ export type LoadAppEvent = {
 export type SyncRegisterAppPayload =  { kind: string, src: string, name: string | undefined };
 export type SyncRegisterApp = (payload: SyncRegisterAppPayload) => void;
 
-class AppRegister {
+export class AppRegister {
     public kindEmitters: Map<string, Emittery<RegisterEvents>> = new Map();
     public registered: Map<string, RegisterParams> = new Map();
     public appClassesCache: Map<string, Promise<NetlessApp>> = new Map();
     public appClasses: Map<string, () => Promise<NetlessApp>> = new Map();
+    public downloaded: Map<string, string> = new Map();
 
     private syncRegisterApp: SyncRegisterApp | null = null;
 
@@ -31,32 +33,39 @@ class AppRegister {
         this.appClassesCache.delete(params.kind);
         this.registered.set(params.kind, params);
 
-        const srcOrAppOrFunction = params.src;
+        const paramSrc = params.src;
         let downloadApp: () => Promise<NetlessApp>;
 
-        if (typeof srcOrAppOrFunction === "string") {
+        if (typeof paramSrc === "string") {
             downloadApp = async () => {
-                let appClass = (await loadApp(srcOrAppOrFunction, params.kind, params.name)) as any;
+                const result = await loadApp(paramSrc, params.kind, params.name) as any;
+                if (result.__esModule) {
+                    return result.default;
+                }
+                return result;
+            };
+            if (this.syncRegisterApp) {
+                this.syncRegisterApp({ kind: params.kind, src: paramSrc, name: params.name });
+            }
+        }
+        if (typeof paramSrc === "function") {
+            downloadApp = async () => {
+                let appClass = await paramSrc() as any;
                 if (appClass) {
-                    if (appClass.__esModule) {
+                    if (appClass.__esModule || appClass.default) {
                         appClass = appClass.default;
                     }
                     return appClass;
                 } else {
                     throw new Error(
-                        `[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`
+                        `[WindowManager]: load remote script failed, ${paramSrc}`
                     );
                 }
             };
-            if (this.syncRegisterApp) {
-                this.syncRegisterApp({ kind: params.kind, src: srcOrAppOrFunction, name: params.name });
-            }
-        } else if (typeof srcOrAppOrFunction === "function") {
-            downloadApp = srcOrAppOrFunction;
-        } else {
-            downloadApp = async () => srcOrAppOrFunction;
         }
-
+        if (typeof paramSrc === "object") {
+            downloadApp = async () => paramSrc;
+        }
         this.appClasses.set(params.kind, async () => {
             let app = this.appClassesCache.get(params.kind);
             if (!app) {
@@ -74,10 +83,23 @@ class AppRegister {
         }
     }
 
+    public downloadApp(kind: string) {
+        const src = this.registered.get(kind);
+        if (src && typeof src.src === "string") {
+            return loadApp(src.src, src.kind, src.name)
+        }
+    }
+
+    public async removeDownloaded(kind: string) {
+        await removeItem(kind);
+        this.downloaded.delete(kind);
+    }
+
     public unregister(kind: string) {
         this.appClasses.delete(kind);
         this.appClassesCache.delete(kind);
         this.registered.delete(kind);
+        this.removeDownloaded(kind);
         const kindEmitter = this.kindEmitters.get(kind);
         if (kindEmitter) {
             kindEmitter.clearListeners();