@netless/window-manager 0.4.0-canary.12 → 0.4.0-canary.16

package/src/App/MagixEvent/index.ts

@@ -50,13 +50,15 @@ export type MagixEventHandler<
   TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
 > = (message: MagixEventMessage<TPayloads, TEvent>) => void;
 
+export type MagixEventListenerDisposer = () => void
+
 export type MagixEventAddListener<TPayloads = any> = <
   TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
 >(
   event: TEvent,
   handler: MagixEventHandler<TPayloads, TEvent>,
   options?: MagixEventListenerOptions | undefined
-) => void;
+) => MagixEventListenerDisposer;
 
 export type MagixEventRemoveListener<TPayloads = any> = <
   TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>

package/src/App/Storage/index.ts

@@ -4,7 +4,7 @@ import { SideEffectManager } from "side-effect-manager";
 import type { AppContext } from "../../AppContext";
 import { safeListenPropsUpdated } from "../../Utils/Reactive";
 import { isRef, makeRef, plainObjectKeys } from "./utils";
-import type { Diff, MaybeRefValue, RefValue, StorageStateChangedEvent } from "./typings";
+import type { Diff, MaybeRefValue, RefValue, StorageStateChangedEvent, StorageStateChangedListener, StorageStateChangedListenerDisposer } from "./typings";
 import { StorageEvent } from "./StorageEvent";
 
 export * from './typings';
@@ -86,6 +86,11 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
   }
 
   readonly onStateChanged = new StorageEvent<StorageStateChangedEvent<TState>>();
+  
+  addStateChangedListener(handler: StorageStateChangedListener<TState>): StorageStateChangedListenerDisposer {
+    this.onStateChanged.addListener(handler);
+    return () => this.onStateChanged.removeListener(handler);
+  }
 
   ensureState(state: Partial<TState>): void {
     return this.setState(

package/src/App/Storage/typings.ts

@@ -16,6 +16,8 @@ export type StorageOnSetStatePayload<TState = unknown> = {
   [K in keyof TState]?: MaybeRefValue<TState[K]>;
 };
 
-export type StorageStateChangedEvent<TState = any> = Diff<TState>
+export type StorageStateChangedEvent<TState = any> = Diff<TState>;
 
-export type StorageStateChangedListener<TState = any> = StorageEventListener<StorageStateChangedEvent<TState>>
+export type StorageStateChangedListener<TState = any> = StorageEventListener<StorageStateChangedEvent<TState>>;
+
+export type StorageStateChangedListenerDisposer = () => void;

package/src/AppContext.ts

@@ -8,7 +8,7 @@ import {
     toJS
 } from 'white-web-sdk';
 import { BoxNotCreatedError } from './Utils/error';
-import type { Room, SceneDefinition, View } from "white-web-sdk";
+import type { Room, SceneDefinition, View, EventListener as WhiteEventListener } from "white-web-sdk";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { BoxManager } from "./BoxManager";
@@ -59,10 +59,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     public getScenes = (): SceneDefinition[] | undefined => {
         const appAttr = this.store.getAppAttributes(this.appId);
         if (appAttr?.isDynamicPPT) {
-            const appProxy = this.manager.appProxies.get(this.appId);
-            if (appProxy) {
-                return appProxy.scenes;
-            }
+            return this.appProxy.scenes;
         } else {
             return appAttr?.options["scenes"];
         }
@@ -158,7 +155,10 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     public dispatchMagixEvent: MagixEventDispatcher<TMagixEventPayloads> = (this.manager.displayer as Room).dispatchMagixEvent.bind(this.manager.displayer)
 
     /** Listen to events from others clients (and self messages). */
-    public addMagixEventListener: MagixEventAddListener<TMagixEventPayloads> = this.manager.displayer.addMagixEventListener.bind(this.manager.displayer)
+    public addMagixEventListener: MagixEventAddListener<TMagixEventPayloads> = (event, handler, options) => {
+        this.manager.displayer.addMagixEventListener(event, handler as WhiteEventListener, options);
+        return () => this.manager.displayer.removeMagixEventListener(event, handler as WhiteEventListener);
+    }
 
     /** Remove a Magix event listener. */
     public removeMagixEventListener = this.manager.displayer.removeMagixEventListener.bind(this.manager.displayer) as MagixEventRemoveListener<TMagixEventPayloads>

package/src/AppManager.ts

@@ -4,11 +4,11 @@ import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
 import { callbacks, emitter, WindowManager, reconnectRefresher } from "./index";
-import { genAppId, makeValidScenePath, setScenePath, setViewFocusScenePath } from "./Utils/Common";
+import { entireScenes, genAppId, makeValidScenePath, parseSceneDir, setScenePath, setViewFocusScenePath } from "./Utils/Common";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
-import { get, sortBy } from "lodash";
+import { get, isInteger, sortBy } from "lodash";
 import { store } from "./AttributesDelegate";
 import { ViewManager } from "./View/ViewManager";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
@@ -212,10 +212,11 @@ export class AppManager {
         emitter.emit("mainViewMounted");
     }
 
-    public setMainViewFocusPath() {
-        const scenePath = this.store.getMainViewScenePath();
-        if (scenePath) {
-            setViewFocusScenePath(this.mainView, scenePath);
+    public setMainViewFocusPath(scenePath?: string) {
+        const focusScenePath = scenePath || this.store.getMainViewScenePath();
+        if (focusScenePath) {
+            const view = setViewFocusScenePath(this.mainView, focusScenePath);
+            return view?.focusScenePath === focusScenePath;
         }
     }
 
@@ -377,27 +378,44 @@ export class AppManager {
     }
 
     private async _setMainViewScenePath(scenePath: string) {
-        this.safeSetAttributes({ _mainScenePath: scenePath });
-        this.setMainViewFocusPath();
-        this.store.setMainViewFocusPath(this.mainView);
-        this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
+        const success = this.setMainViewFocusPath(scenePath);
+        if (success) {
+            this.safeSetAttributes({ _mainScenePath: scenePath });
+            this.store.setMainViewFocusPath(this.mainView);
+            this.updateSceneIndex();
+            this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
+        }
+    }
+
+    private updateSceneIndex = () => {
+        const scenePath = this.store.getMainViewScenePath() as string;
+        const sceneDir = parseSceneDir(scenePath);
+        const scenes = entireScenes(this.displayer)[sceneDir];
+        if (scenes.length) {
+            // "/ppt3/1" -> "1"
+            const pageName = scenePath.replace(sceneDir, "").replace("/", "");
+            const index = scenes.findIndex(scene => scene.name === pageName);
+            if (isInteger(index) && index >= 0) {
+                this.safeSetAttributes({ _mainSceneIndex: index });
+            }
+        }
     }
 
     public async setMainViewSceneIndex(index: number) {
         if (this.room) {
-            this.safeSetAttributes({ _mainSceneIndex: index });
+            if (this.store.getMainViewSceneIndex() === index) return;
             const mainViewScenePath = this.store.getMainViewScenePath() as string;
             if (mainViewScenePath) {
-                const sceneList = mainViewScenePath.split("/");
-                sceneList.pop();
-                let sceneDir = sceneList.join("/");
-                if (sceneDir === "") {
-                    sceneDir = "/";
-                }
+                const sceneDir = parseSceneDir(mainViewScenePath);
                 const scenePath = makeValidScenePath(this.displayer, sceneDir, index);
                 if (scenePath) {
-                    this.store.setMainViewScenePath(scenePath);
-                    this.setMainViewFocusPath();
+                    const success = this.setMainViewFocusPath(scenePath);
+                    if (success) {
+                        this.store.setMainViewScenePath(scenePath);
+                        this.safeSetAttributes({ _mainSceneIndex: index });
+                    }
+                } else {
+                    throw new Error(`[WindowManager]: ${sceneDir}: ${index} not valid index`);
                 }
             }
         }

package/src/AppProxy.ts

@@ -7,7 +7,7 @@ import { emitter } from "./index";
 import { Fields } from "./AttributesDelegate";
 import { debounce, get } from "lodash";
 import { log } from "./Utils/log";
-import { setScenePath, setViewFocusScenePath, getScenePath } from "./Utils/Common";
+import { setScenePath, setViewFocusScenePath, getScenePath, removeScenes } from "./Utils/Common";
 import type {
     AppEmitterEvent,
     AppInitState,
@@ -327,7 +327,7 @@ export class AppProxy extends Base {
         });
         this.manager.refresher?.add(`${appId}-fullPath`, () => {
             return autorun(() => {
-                const fullPath = this.appAttributes.fullPath;
+                const fullPath = this.appAttributes?.fullPath;
                 this.setFocusScenePathHandler(fullPath);
             });
         });
@@ -377,6 +377,9 @@ export class AppProxy extends Base {
         }
         if (cleanAttrs) {
             this.store.cleanAppAttributes(this.id);
+            if (this.scenePath) {
+                removeScenes(this.manager.room, this.scenePath);
+            }
         }
         this.appProxies.delete(this.id);
 

package/src/BoxManager.ts

@@ -5,6 +5,7 @@ import {
     TELE_BOX_STATE,
     TeleBoxCollector,
     TeleBoxManager,
+    TeleBoxConfig,
 } from "@netless/telebox-insider";
 import { emitter, WindowManager } from "./index";
 import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
@@ -379,6 +380,10 @@ export class BoxManager {
         }
     }
 
+    public updateBox(id: string, payload: TeleBoxConfig, skipUpdate = true): void {
+        this.teleBoxManager.update(id, payload, skipUpdate);
+    }
+
     public setReadonly(readonly: boolean) {
         this.teleBoxManager.setReadonly(readonly);
     }

package/src/Register/index.ts

@@ -10,34 +10,39 @@ class AppRegister {
 
     public async register(params: RegisterParams): Promise<void> {
         this.registered.set(params.kind, params);
-        
-        const srcOrAppOrFunction = params.src
-        let downloadApp: () => Promise<NetlessApp>
-        
+
+        const srcOrAppOrFunction = params.src;
+        let downloadApp: () => Promise<NetlessApp>;
+
         if (typeof srcOrAppOrFunction === "string") {
             downloadApp = async () => {
-                const appClass = await loadApp(srcOrAppOrFunction, params.kind);
+                let appClass = (await loadApp(srcOrAppOrFunction, params.kind)) as any;
                 if (appClass) {
-                    return appClass
+                    if (appClass.__esModule) {
+                        appClass = appClass.default;
+                    }
+                    return appClass;
                 } else {
-                    throw new Error(`[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`);
+                    throw new Error(
+                        `[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`
+                    );
                 }
-            }
+            };
         } else if (typeof srcOrAppOrFunction === "function") {
-            downloadApp = srcOrAppOrFunction
+            downloadApp = srcOrAppOrFunction;
         } else {
-            downloadApp = async () => srcOrAppOrFunction
+            downloadApp = async () => srcOrAppOrFunction;
         }
 
         this.appClasses.set(params.kind, async () => {
-            let app = this.appClassesCache.get(params.kind)
+            let app = this.appClassesCache.get(params.kind);
             if (!app) {
-                app = downloadApp()
-                this.appClassesCache.set(params.kind, app)
+                app = downloadApp();
+                this.appClassesCache.set(params.kind, app);
             }
-            return app
+            return app;
         });
-        
+
         if (params.addHooks) {
             const emitter = this.createKindEmitter(params.kind);
             if (emitter) {
@@ -46,7 +51,11 @@ class AppRegister {
         }
     }
 
-    public async notifyApp<T extends keyof RegisterEvents>(kind: string, event: T, payload: RegisterEvents[T]) {
+    public async notifyApp<T extends keyof RegisterEvents>(
+        kind: string,
+        event: T,
+        payload: RegisterEvents[T]
+    ) {
         const emitter = this.kindEmitters.get(kind);
         await emitter?.emit(event, payload);
     }

package/src/Register/loader.ts

@@ -8,7 +8,7 @@ const TIMEOUT = 10000; // 10 秒超时
 export const getScript = async (url: string): Promise<string> => {
     const item = await getItem(url);
     if (item) {
-        return item;
+        return item.sourceCode;
     } else {
         const result = await fetchWithTimeout(url, { timeout: TIMEOUT });
         const text = await result.text();

package/src/Register/storage.ts

@@ -3,6 +3,11 @@ const DatabaseName = "__WindowManagerAppCache";
 let db: IDBDatabase;
 let store: IDBObjectStore;
 
+export type Item = {
+    kind: string;
+    sourceCode: string;
+}
+
 export const initDb = async () => {
     db = await createDb();
 }
@@ -12,7 +17,7 @@ export const setItem = (key: string, val: any) => {
     return addRecord(db, { kind: key, sourceCode: val })
 };
 
-export const getItem = async (key: string): Promise<string | null> => {
+export const getItem = async (key: string): Promise<Item | null> => {
     if (!db) return null;
     return await query(db, key);
 };

package/src/Utils/Common.ts

@@ -1,6 +1,7 @@
 import { appRegister } from "../Register";
 import { debounce } from "lodash";
 import { emitter } from "../index";
+import { ScenePathType } from "white-web-sdk";
 import { v4 } from "uuid";
 import type { PublicEvent } from "../index";
 import type { Displayer, ViewVisionMode, Room, View } from "white-web-sdk";
@@ -17,6 +18,14 @@ export const genAppId = async (kind: string) => {
 export const setViewFocusScenePath = (view: View, focusScenePath: string) => {
     if (view.focusScenePath !== focusScenePath) {
         view.focusScenePath = focusScenePath;
+        return view;
+    }
+};
+
+export const setViewSceneIndex = (view: View, index: number) => {
+    if (view.focusSceneIndex !== index) {
+        view.focusSceneIndex = index;
+        return view;
     }
 };
 
@@ -42,6 +51,15 @@ export const getScenePath = (
     }
 };
 
+export const removeScenes = (room: Room | undefined, scenePath: string) => {
+    if (room) {
+        const type = room.scenePathType(scenePath);
+        if (type !== ScenePathType.None) {
+            room.removeScenes(scenePath);
+        }
+    }
+};
+
 export const setViewMode = (view: View, mode: ViewVisionMode) => {
     if (!(view as any).didRelease && view.mode !== mode) {
         view.mode = mode;
@@ -70,7 +88,9 @@ export const notifyMainViewModeChange = debounce(
 export const makeValidScenePath = (displayer: Displayer, scenePath: string, index = 0) => {
     const scenes = entireScenes(displayer)[scenePath];
     if (!scenes) return;
-    const firstSceneName = scenes[index].name;
+    const scene = scenes[index];
+    if (!scene) return;
+    const firstSceneName = scene.name;
     if (scenePath === "/") {
         return `/${firstSceneName}`;
     } else {
@@ -86,6 +106,17 @@ export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");
 };
 
+export const parseSceneDir = (scenePath: string) => {
+    const sceneList = scenePath.split("/");
+    sceneList.pop();
+    let sceneDir = sceneList.join("/");
+    // "/page1" 的 dir 为 "/"
+    if (sceneDir === "") {
+        sceneDir = "/";
+    }
+    return sceneDir;
+};
+
 export const ensureValidScenePath = (scenePath: string) => {
     if (scenePath.endsWith("/")) {
         return scenePath.slice(0, -1);

package/src/Utils/RoomHacker.ts

@@ -51,6 +51,7 @@ export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
         room.setMemberState = (...args) => manager.mainView.setMemberState(...args);
         room.redo = () => manager.mainView.redo();
         room.undo = () => manager.mainView.undo();
+        room.cleanCurrentScene = () => manager.mainView.cleanCurrentScene();
     }
 
 };

package/src/View/ViewManager.ts

@@ -1,4 +1,4 @@
-import type { View , Displayer} from "white-web-sdk";
+import type { View, Displayer } from "white-web-sdk";
 
 export class ViewManager {
     public views: Map<string, View> = new Map();
@@ -38,7 +38,6 @@ export class ViewManager {
     }
 }
 
-
 export const createView = (displayer: Displayer): View => {
     const view = displayer.views.createView();
     setDefaultCameraBound(view);

package/src/index.ts

@@ -21,6 +21,7 @@ import {
     ensureValidScenePath,
     getVersionNumber,
     isValidScenePath,
+    parseSceneDir,
     wait,
 } from "./Utils/Common";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
@@ -427,6 +428,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                     const appScenePath = appManager.store.getAppScenePath(appId);
                     if (appScenePath && appScenePath === scenePath) {
                         console.warn(`[WindowManager]: ScenePath ${scenePath} Already opened`);
+                        if (this.boxManager) {
+                            const topBox = this.boxManager.getTopBox();
+                            if (topBox) {
+                                this.boxManager.setZIndex(appId, topBox.zIndex + 1, false);
+                            }
+                        }
                         return;
                     }
                 }
@@ -571,6 +578,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return this.attributes.focus;
     }
 
+    public get mainViewSceneIndex(): number {
+        return this.appManager?.store.getMainViewSceneIndex();
+    }
+
+    public get mainViewSceneDir(): string {
+        const scenePath = this.appManager?.store.getMainViewScenePath();
+        if (scenePath) {
+            return parseSceneDir(scenePath);
+        } else {
+            throw new Error("[WindowManager]: mainViewSceneDir not found");
+        }
+    }  
+
     /**
      * 查询所有的 App
      */