@netless/window-manager 0.4.8-canary.0 → 0.4.9-canary.1

package/src/AppManager.ts

@@ -4,15 +4,18 @@ import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
 import { appRegister } from "./Register";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
-import { callbacks, emitter, reconnectRefresher, WindowManager } from "./index";
+import { callbacks } from "./callback";
+import { emitter } from "./InternalEmitter";
 import { get, isInteger, orderBy } from "lodash";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
+import { reconnectRefresher, WindowManager } from "./index";
 import { RedoUndo } from "./RedoUndo";
 import { SideEffectManager } from "side-effect-manager";
 import { store } from "./AttributesDelegate";
 import { ViewManager } from "./View/ViewManager";
+import type { EmitterEvent } from "./InternalEmitter";
 import {
     entireScenes,
     genAppId,
@@ -23,9 +26,14 @@ import {
 } from "./Utils/Common";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
-import type { Displayer, DisplayerState, Room, ScenesCallbacksNode } from "white-web-sdk";
-import type { AddAppParams, BaseInsertParams, TeleBoxRect, EmitterEvent } from "./index";
-
+import type {
+    Displayer,
+    DisplayerState,
+    Room,
+    ScenesCallbacksNode,
+    SceneState,
+} from "white-web-sdk";
+import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 export class AppManager {
     public displayer: Displayer;
     public viewManager: ViewManager;
@@ -47,6 +55,8 @@ export class AppManager {
 
     private sideEffectManager = new SideEffectManager();
 
+    public sceneState: SceneState | null = null;
+
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
         this.store.setContext({
@@ -126,16 +136,11 @@ export class AppManager {
             isRecreate = true;
         }
         this.callbacksNode = this.displayer.createScenesCallback(ROOT_DIR, {
-            onAddScene: scenesCallback => {
-                this.mainViewScenesLength = scenesCallback.scenes.length;
-                callbacks.emit("mainViewScenesLengthChange", this.mainViewScenesLength);
-            },
-            onRemoveScene: scenesCallback => {
-                this.mainViewScenesLength = scenesCallback.scenes.length;
-                callbacks.emit("mainViewScenesLengthChange", this.mainViewScenesLength);
-            },
+            onAddScene: this.onSceneChange,
+            onRemoveScene: this.onSceneChange,
         });
         if (this.callbacksNode) {
+            this.updateSceneState(this.callbacksNode);
             this.mainViewScenesLength = this.callbacksNode.scenes.length;
             if (isRecreate) {
                 callbacks.emit("mainViewScenesLengthChange", this.callbacksNode.scenes.length);
@@ -143,6 +148,29 @@ export class AppManager {
         }
     };
 
+    private onSceneChange = (node: ScenesCallbacksNode) => {
+        this.mainViewScenesLength = node.scenes.length;
+        this.updateSceneState(node);
+        callbacks.emit("mainViewScenesLengthChange", this.mainViewScenesLength);
+    };
+
+    private updateSceneState = (node: ScenesCallbacksNode) => {
+        const currentIndex = this.store.getMainViewSceneIndex() || 0;
+        const sceneName = node.scenes[currentIndex];
+        this.sceneState = {
+            scenePath: `${ROOT_DIR}${sceneName}`,
+            contextPath: node.path,
+            index: currentIndex,
+            scenes: node.scenes.map(scene => {
+                return {
+                    name: scene,
+                };
+            }),
+            sceneName: sceneName,
+        };
+        callbacks.emit("sceneStateChange", this.sceneState);
+    };
+
     private get eventName() {
         return isRoom(this.displayer) ? "onRoomStateChanged" : "onPlayerStateChanged";
     }
@@ -223,6 +251,9 @@ export class AppManager {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
                 if (mainSceneIndex !== undefined && this._prevSceneIndex !== mainSceneIndex) {
                     callbacks.emit("mainViewSceneIndexChange", mainSceneIndex);
+                    if (this.callbacksNode) {
+                        this.updateSceneState(this.callbacksNode);
+                    }
                     this._prevSceneIndex = mainSceneIndex;
                 }
             });
@@ -278,6 +309,9 @@ export class AppManager {
     public async attributesUpdateCallback(apps: any) {
         if (apps && WindowManager.container) {
             const appIds = Object.keys(apps);
+            if (appIds.length === 0) {
+                this.appCreateQueue.emitReady();
+            }
             const appsWithCreatedAt = appIds.map(appId => {
                 return {
                     id: appId,

package/src/AppProxy.ts

@@ -5,7 +5,7 @@ import { appRegister } from "./Register";
 import { autorun } from "white-web-sdk";
 import { BoxManagerNotFoundError } from "./Utils/error";
 import { debounce, get } from "lodash";
-import { emitter } from "./index";
+import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { entireScenes, getScenePath, removeScenes, setScenePath, setViewFocusScenePath } from "./Utils/Common";
 import { log } from "./Utils/log";

package/src/BoxManager.ts

@@ -2,7 +2,7 @@ import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
 import { TELE_BOX_STATE, TeleBoxCollector, TeleBoxManager } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
-import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
+import type { AddAppOptions, AppInitState } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
     TeleBoxManagerCreateConfig,
@@ -15,6 +15,8 @@ import type {
 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";
 
 export { TELE_BOX_STATE };
 

package/src/ContainerResizeObserver.ts

@@ -1,6 +1,6 @@
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
 import { WindowManager } from "./index";
-import type { EmitterType } from "./index";
+import type { EmitterType } from "./InternalEmitter";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 

package/src/Cursor/index.ts

@@ -1,9 +1,10 @@
 import { ApplianceNames } from "white-web-sdk";
 import { Cursor } from "./Cursor";
 import { CursorState, Events } from "../constants";
-import { emitter, WindowManager } from "../index";
+import { emitter } from "../InternalEmitter";
 import { SideEffectManager } from "side-effect-manager";
 import { throttle } from "lodash";
+import { WindowManager } from "../index";
 import type { CursorMovePayload } from "../index";
 import type { PositionType } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
@@ -65,7 +66,8 @@ export class CursorManager {
     };
 
     private canMoveCursor(member: RoomMember | undefined) {
-        const isLaserPointer = member?.memberState.currentApplianceName === ApplianceNames.laserPointer;
+        const isLaserPointer =
+            member?.memberState.currentApplianceName === ApplianceNames.laserPointer;
         // 激光笔教具在不开启光标的情况下也要显示
         return this.enableCursor || isLaserPointer;
     }

package/src/InternalEmitter.ts

@@ -0,0 +1,27 @@
+import Emittery from "emittery";
+import type { AppInitState, CursorMovePayload } from "./index";
+
+
+export type EmitterEvent = {
+    onCreated: undefined;
+    InitReplay: AppInitState;
+    move: { appId: string; x: number; y: number };
+    focus: { appId: string };
+    close: { appId: string };
+    resize: { appId: string; width: number; height: number; x?: number; y?: number };
+    error: Error;
+    seek: number;
+    mainViewMounted: undefined;
+    observerIdChange: number;
+    boxStateChange: string;
+    playgroundSizeChange: DOMRect;
+    onReconnected: void;
+    removeScenes: string;
+    cursorMove: CursorMovePayload;
+    updateManagerRect: undefined;
+    focusedChange: { focused: string | undefined; prev: string | undefined };
+    rootDirRemoved: undefined;
+};
+
+export type EmitterType = Emittery<EmitterEvent>;
+export const emitter: EmitterType = new Emittery();

package/src/ReconnectRefresher.ts

@@ -2,7 +2,7 @@ import { debounce, isFunction } from "lodash";
 import { log } from "./Utils/log";
 import { RoomPhase } from "white-web-sdk";
 import type { Room } from "white-web-sdk";
-import type { EmitterType } from "./index";
+import type { EmitterType } from "./InternalEmitter";
 
 export type ReconnectRefresherContext = {
     emitter: EmitterType;

package/src/RedoUndo.ts

@@ -1,4 +1,5 @@
-import { callbacks, emitter } from "./index";
+import { callbacks } from "./callback";
+import { emitter } from "./InternalEmitter";
 import type { View } from "white-web-sdk";
 import type { AppProxy } from "./AppProxy";
 

package/src/Register/index.ts

@@ -15,6 +15,7 @@ class AppRegister {
     public appClasses: Map<string, () => Promise<NetlessApp>> = new Map();
 
     public async register(params: RegisterParams): Promise<void> {
+        this.appClassesCache.delete(params.kind);
         this.registered.set(params.kind, params);
 
         const srcOrAppOrFunction = params.src;

package/src/Register/loader.ts

@@ -1,4 +1,4 @@
-import { callbacks } from "../index";
+import { callbacks } from "../callback";
 import { getItem, setItem } from "./storage";
 import type { NetlessApp } from "../typings";
 

package/src/Utils/AppCreateQueue.ts

@@ -1,3 +1,4 @@
+import { callbacks } from "../callback";
 import type { AppProxy } from "../AppProxy";
 
 export type Invoker = () => Promise<AppProxy | undefined>;
@@ -6,6 +7,7 @@ export class AppCreateQueue {
     private list: Invoker[] = [];
     private currentInvoker: Invoker | undefined;
     private timer: number | undefined;
+    public isEmit = false;
 
     private initInterval() {
         return setInterval(() => {
@@ -37,6 +39,7 @@ export class AppCreateQueue {
                     this.currentInvoker = undefined;
                     if (this.list.length === 0) {
                         clearInterval(this.timer);
+                        this.emitReady();
                     }
                 })
                 .catch(error => {
@@ -46,6 +49,13 @@ export class AppCreateQueue {
         }
     }
 
+    public emitReady() {
+        if (!this.isEmit) {
+            callbacks.emit("ready");
+        }
+        this.isEmit = true;
+    }
+
     public destroy() {
         if (this.timer) {
             clearInterval(this.timer);

package/src/Utils/Common.ts

@@ -1,9 +1,9 @@
 import { appRegister } from "../Register";
 import { debounce } from "lodash";
-import { emitter } from "../index";
+import { emitter } from "../InternalEmitter";
 import { ScenePathType } from "white-web-sdk";
 import { v4 } from "uuid";
-import type { PublicEvent } from "../index";
+import type { PublicEvent } from "../callback";
 import type { Displayer, ViewVisionMode, Room, View } from "white-web-sdk";
 import type Emittery from "emittery";
 import { ROOT_DIR } from "../constants";

package/src/Utils/RoomHacker.ts

@@ -1,4 +1,4 @@
-import { emitter } from "../index";
+import { emitter } from "../InternalEmitter";
 import { isPlayer } from "white-web-sdk";
 import type { WindowManager } from "../index";
 import type { Camera, Room, Player, PlayerSeekingResult } from "white-web-sdk";
@@ -23,13 +23,13 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
 
         Object.defineProperty(room, "canUndoSteps", {
             get() {
-                return manager.mainView.canUndoSteps;
+                return manager.canUndoSteps;
             },
         });
 
         Object.defineProperty(room, "canRedoSteps", {
             get() {
-                return manager.mainView.canRedoSteps;
+                return manager.canRedoSteps;
             },
         });
 

package/src/View/MainView.ts

@@ -1,7 +1,8 @@
 import { AnimationMode, reaction } from "white-web-sdk";
-import { callbacks, emitter } from "../index";
+import { callbacks } from "../callback";
 import { createView } from "./ViewManager";
 import { debounce, isEmpty, isEqual } from "lodash";
+import { emitter } from "../InternalEmitter";
 import { Fields } from "../AttributesDelegate";
 import { setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";

package/src/callback.ts

@@ -0,0 +1,24 @@
+import Emittery from "emittery";
+import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
+import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
+import type { LoadAppEvent } from "./Register";
+
+export type PublicEvent = {
+    mainViewModeChange: ViewVisionMode;
+    boxStateChange: `${TELE_BOX_STATE}`;
+    darkModeChange: boolean;
+    prefersColorSchemeChange: TeleBoxColorScheme;
+    cameraStateChange: CameraState;
+    mainViewScenePathChange: string;
+    mainViewSceneIndexChange: number;
+    focusedChange: string | undefined;
+    mainViewScenesLengthChange: number;
+    canRedoStepsChange: number;
+    canUndoStepsChange: number;
+    loadApp: LoadAppEvent;
+    ready: undefined; // 所有 APP 创建完毕时触发
+    sceneStateChange: SceneState;
+};
+
+export type CallbacksType = Emittery<PublicEvent>;
+export const callbacks: CallbacksType = new Emittery();

package/src/index.ts

@@ -1,12 +1,13 @@
-import Emittery from "emittery";
 import pRetry from "p-retry";
 import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
+import { callbacks } from "./callback";
 import { checkVersion, setupWrapper } from "./Helper";
 import { ContainerResizeObserver } from "./ContainerResizeObserver";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
 import { DEFAULT_CONTAINER_RATIO, Events, ROOT_DIR } from "./constants";
+import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
@@ -18,7 +19,6 @@ import { setupBuiltin } from "./BuiltinApps";
 import "video.js/dist/video-js.css";
 import "./style.css";
 import "@netless/telebox-insider/dist/style.css";
-import type { LoadAppEvent } from "./Register";
 import {
     addEmitterOnceListener,
     ensureValidScenePath,
@@ -45,15 +45,17 @@ import type {
     CameraBound,
     Point,
     Rectangle,
-    ViewVisionMode,
     CameraState,
     Player,
     ImageInformation,
+    SceneState,
 } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./AppProxy";
+import type { PublicEvent } from "./Callback";
+import type Emittery from "emittery";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -122,45 +124,6 @@ export type AppInitState = {
 
 export type CursorMovePayload = { uid: string; state?: "leave"; position: Position };
 
-export type EmitterEvent = {
-    onCreated: undefined;
-    InitReplay: AppInitState;
-    move: { appId: string; x: number; y: number };
-    focus: { appId: string };
-    close: { appId: string };
-    resize: { appId: string; width: number; height: number; x?: number; y?: number };
-    error: Error;
-    seek: number;
-    mainViewMounted: undefined;
-    observerIdChange: number;
-    boxStateChange: string;
-    playgroundSizeChange: DOMRect;
-    onReconnected: void;
-    removeScenes: string;
-    cursorMove: CursorMovePayload;
-    updateManagerRect: undefined;
-    focusedChange: { focused: string | undefined, prev: string | undefined };
-    rootDirRemoved: undefined;
-};
-
-export type EmitterType = Emittery<EmitterEvent>;
-export const emitter: EmitterType = new Emittery();
-
-export type PublicEvent = {
-    mainViewModeChange: ViewVisionMode;
-    boxStateChange: `${TELE_BOX_STATE}`;
-    darkModeChange: boolean;
-    prefersColorSchemeChange: TeleBoxColorScheme;
-    cameraStateChange: CameraState;
-    mainViewScenePathChange: string;
-    mainViewSceneIndexChange: number;
-    focusedChange: string | undefined;
-    mainViewScenesLengthChange: number;
-    canRedoStepsChange: number;
-    canUndoStepsChange: number;
-    loadApp: LoadAppEvent;
-};
-
 export type MountParams = {
     room: Room | Player;
     container?: HTMLElement;
@@ -177,15 +140,12 @@ export type MountParams = {
     prefersColorScheme?: TeleBoxColorScheme;
 };
 
-export type CallbacksType = Emittery<PublicEvent>;
-export const callbacks: CallbacksType = new Emittery();
-
 export const reconnectRefresher = new ReconnectRefresher({ emitter });
 
 export type AddPageParams = {
     after?: boolean;
     scene?: SceneDefinition;
-}
+};
 
 export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static kind = "WindowManager";
@@ -350,6 +310,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return mainViewElement;
     }
 
+    public static get registered() {
+        return appRegister.registered;
+    }
+
     public bindContainer(container: HTMLElement) {
         if (WindowManager.isCreated && WindowManager.container) {
             if (WindowManager.container.firstChild) {
@@ -495,10 +459,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public async nextPage(): Promise<boolean> {
         if (this.appManager) {
             const nextIndex = this.mainViewSceneIndex + 1;
-            if (nextIndex >= this.mainViewScenesLength)  {
+            if (nextIndex >= this.mainViewScenesLength) {
                 console.warn(`[WindowManager]: current page is the last page`);
                 return false;
-            };
+            }
             await this.appManager.setMainViewSceneIndex(nextIndex);
             return true;
         } else {
@@ -512,7 +476,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             if (prevIndex < 0) {
                 console.warn(`[WindowManager]: current page is the first page`);
                 return false;
-            };
+            }
             await this.appManager.setMainViewSceneIndex(prevIndex);
             return true;
         } else {
@@ -690,20 +654,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     }
 
     public get canRedoSteps(): number {
-        const focused = this.focused;
-        if (focused) {
-            return this.appManager?.focusApp?.view?.canRedoSteps || 0;
-        } else {
-            return this.mainView.canRedoSteps;
-        }
+        return this.focusedView?.canRedoSteps || 0;
     }
 
     public get canUndoSteps(): number {
-        const focused = this.focused;
-        if (focused) {
-            return this.appManager?.focusApp?.view?.canUndoSteps || 0;
+        return this.focusedView?.canUndoSteps || 0;
+    }
+
+    public get sceneState(): SceneState {
+        if (this.appManager) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            return this.appManager.sceneState!;
         } else {
-            return this.mainView.canUndoSteps;
+            throw new AppManagerNotInitError();
         }
     }