@netless/window-manager 0.4.0-canary.25 → 0.4.0-canary.29

package/docs/api.md

@@ -11,6 +11,7 @@
     - [`closeApp`](#closeApp)
     - [`setMainViewSceneIndex`](#setMainViewSceneIndex)
     - [`setBoxState`](#setBoxState)
+    - [`cleanCurrentScene`](#cleanCurrentScene)
   - [实例属性](#prototypes)
   - [事件回调](#events)
 
@@ -128,6 +129,14 @@ manager.setMainViewSceneIndex(1)
 manager.setBoxState("normal") // boxState: normal | maximized | minimized
 ```
 
+<h3 id="cleanCurrentScene">cleanCurrentScene</h3>
+
+> 清除当前 focus 的 view 的笔迹
+
+```ts
+manager.cleanCurrentScene()
+```
+
 <br>
 
 <h2 id="prototypes">实例属性</h2>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.0-canary.25",
+  "version": "0.4.0-canary.29",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@netless/app-docs-viewer": "^0.2.6",
     "@netless/app-media-player": "0.1.0-beta.5",
-    "@netless/telebox-insider": "0.2.21",
+    "@netless/telebox-insider": "0.2.22",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-url": "^6.1.0",
@@ -58,6 +58,6 @@
     "typescript": "^4.3.5",
     "video.js": "^7.14.3",
     "vite": "^2.5.3",
-    "white-web-sdk": "^2.16.1"
+    "white-web-sdk": "^2.16.3"
   }
 }

package/src/AppContext.ts

@@ -152,7 +152,10 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     }
 
     /** Dispatch events to other clients (and self). */
-    public dispatchMagixEvent: MagixEventDispatcher<TMagixEventPayloads> = (this.manager.displayer as Room).dispatchMagixEvent.bind(this.manager.displayer)
+    public dispatchMagixEvent: MagixEventDispatcher<TMagixEventPayloads> = (...args) => {
+        // can't dispatch events on replay mode
+        return this.manager.room?.dispatchMagixEvent(...args);
+    }
 
     /** Listen to events from others clients (and self messages). */
     public addMagixEventListener: MagixEventAddListener<TMagixEventPayloads> = (event, handler, options) => {

package/src/AppManager.ts

@@ -1,9 +1,15 @@
-import pRetry from "p-retry";
 import { AppAttributes, AppStatus, Events, MagixEventName, ROOT_DIR } from "./constants";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
+import { appRegister } from "./Register";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
-import { callbacks, emitter, WindowManager, reconnectRefresher } from "./index";
+import { callbacks, emitter, reconnectRefresher, WindowManager } from "./index";
+import { get, isInteger, orderBy } from "lodash";
+import { log } from "./Utils/log";
+import { MainViewProxy } from "./View/MainView";
+import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
+import { store } from "./AttributesDelegate";
+import { ViewManager } from "./View/ViewManager";
 import {
     entireScenes,
     genAppId,
@@ -12,17 +18,11 @@ import {
     setScenePath,
     setViewFocusScenePath,
 } from "./Utils/Common";
-import { log } from "./Utils/log";
-import { MainViewProxy } from "./View/MainView";
-import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
-import { get, isInteger, sortBy } from "lodash";
-import { store } from "./AttributesDelegate";
-import { ViewManager } from "./View/ViewManager";
 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 { appRegister } from "./Register";
+import { AppCreateQueue } from "./Utils/AppCreateQueue";
 
 export class AppManager {
     public displayer: Displayer;
@@ -41,6 +41,7 @@ export class AppManager {
     private _prevSceneIndex: number | undefined;
     private _prevFocused: string | undefined;
     private callbacksNode: ScenesCallbacksNode | null;
+    private appCreateQueue = new AppCreateQueue();
 
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
@@ -185,13 +186,18 @@ export class AppManager {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
                 if (this._prevFocused !== focused) {
-                    this.boxManager?.focusBox({ appId: focused });
-                    const appProxy = this.appProxies.get(focused);
-                    if (appProxy) {
-                        appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
-                    }
                     callbacks.emit("focusedChange", focused);
                     this._prevFocused = focused;
+                    if (focused !== undefined) {
+                        this.boxManager?.focusBox({ appId: focused });
+                        // 确保 focus 修改的时候, appProxy 已经创建
+                        setTimeout(() => {
+                            const appProxy = this.appProxies.get(focused);
+                            if (appProxy) {
+                                appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
+                            }
+                        }, 0);
+                    }
                 }
             });
         });
@@ -223,19 +229,18 @@ export class AppManager {
                     createdAt: apps[appId].createdAt,
                 };
             });
-            for (const { id } of sortBy(appsWithCreatedAt, "createdAt")) {
+            for (const { id } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
                 if (!this.appProxies.has(id) && !this.appStatus.has(id)) {
                     const app = apps[id];
 
-                    pRetry(
-                        async () => {
-                            this.appStatus.set(id, AppStatus.StartCreate);
-                            // 防御 appAttributes 有可能为 undefined 的情况，这里做一个重试
-                            const appAttributes = this.attributes[id];
-                            if (!appAttributes) {
-                                throw new Error("appAttributes is undefined");
-                            }
-                            await this.baseInsertApp(
+                    this.appStatus.set(id, AppStatus.StartCreate);
+                    try {
+                        const appAttributes = this.attributes[id];
+                        if (!appAttributes) {
+                            throw new Error("appAttributes is undefined");
+                        }
+                        this.appCreateQueue.push(() => {
+                            return this.baseInsertApp(
                                 {
                                     kind: app.kind,
                                     options: app.options,
@@ -244,13 +249,11 @@ export class AppManager {
                                 id,
                                 false
                             );
-                            this.focusByAttributes(apps);
-                        },
-                        { retries: 3 }
-                    ).catch(err => {
-                        console.warn(`[WindowManager]: Insert App Error`, err);
-                        this.appStatus.delete(id);
-                    });
+                        });
+                        this.focusByAttributes(apps);
+                    } catch (error) {
+                        console.warn(`[WindowManager]: Insert App Error`, error);
+                    }
                 }
             }
         }
@@ -436,7 +439,7 @@ export class AppManager {
             this.safeSetAttributes({ _mainScenePath: scenePath });
             this.store.setMainViewFocusPath(this.mainView);
             this.updateSceneIndex();
-            this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
+            this.dispatchSetMainViewScenePath(scenePath);
         }
     }
 
@@ -466,9 +469,7 @@ export class AppManager {
                     if (success) {
                         this.store.setMainViewScenePath(scenePath);
                         this.safeSetAttributes({ _mainSceneIndex: index });
-                        this.dispatchInternalEvent(Events.SetMainViewScenePath, {
-                            nextScenePath: scenePath,
-                        });
+                        this.dispatchSetMainViewScenePath(scenePath);
                     }
                 } else {
                     throw new Error(`[WindowManager]: ${sceneDir}: ${index} not valid index`);
@@ -477,6 +478,12 @@ export class AppManager {
         }
     }
 
+    private dispatchSetMainViewScenePath(scenePath: string): void {
+        this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
+        // 兼容 15 的 SDK, 需要 room 的当前 ScenePath
+        setScenePath(this.room, scenePath);
+    }
+
     public getAppInitPath(appId: string): string | undefined {
         const attrs = this.store.getAppAttributes(appId);
         if (attrs) {
@@ -583,6 +590,7 @@ export class AppManager {
         this.mainViewProxy.destroy();
         callbacks.clearListeners();
         this.callbacksNode?.dispose();
+        this.appCreateQueue.destroy();
         this._prevSceneIndex = undefined;
     }
 }

package/src/AppProxy.ts

@@ -165,7 +165,7 @@ export class AppProxy {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
                     const result = await app.setup(context);
                     this.appResult = result;
-                    appRegister.notifyApp(app.kind, "created", { appId, result });
+                    appRegister.notifyApp(this.kind, "created", { appId, result });
                     this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
                 }, 50);

package/src/Helper.ts

@@ -1,3 +1,7 @@
+import { getVersionNumber } from "./Utils/Common";
+import { REQUIRE_VERSION } from "./constants";
+import { WhiteVersion } from "white-web-sdk";
+import { WhiteWebSDKInvalidError } from "./Utils/error";
 import { WindowManager } from "./index";
 
 export const setupWrapper = (
@@ -27,4 +31,11 @@ export const setupWrapper = (
     WindowManager.wrapper = wrapper;
 
     return { playground, wrapper, sizer, mainViewElement };
-};
+};
+
+export const checkVersion = () => {
+    const version = getVersionNumber(WhiteVersion);
+    if (version < getVersionNumber(REQUIRE_VERSION)) {
+        throw new WhiteWebSDKInvalidError(REQUIRE_VERSION);
+    }
+};

package/src/Utils/AppCreateQueue.ts

@@ -0,0 +1,54 @@
+import type { AppProxy } from "../AppProxy";
+
+export type Invoker = () => Promise<AppProxy | undefined>;
+
+export class AppCreateQueue {
+    private list: Invoker[] = [];
+    private currentInvoker: Invoker | undefined;
+    private timer: number | undefined;
+
+    private initInterval() {
+        return setInterval(() => {
+            this.invoke();
+        }, 50);
+    }
+
+    public push(item: Invoker) {
+        this.list.push(item);
+        this.invoke();
+        if (this.timer === undefined && this.list.length > 0) {
+            this.timer = this.initInterval();
+        }
+    }
+
+    public invoke() {
+        if (this.list.length === 0) {
+            return;
+        }
+        if (this.currentInvoker !== undefined) {
+            return;
+        }
+
+        const item = this.list.shift();
+        if (item) {
+            this.currentInvoker = item;
+            item()
+                .then(() => {
+                    this.currentInvoker = undefined;
+                    if (this.list.length === 0) {
+                        clearInterval(this.timer);
+                    }
+                })
+                .catch(error => {
+                    console.error(`[WindowManager]: create app error: ${error.message}`);
+                    clearInterval(this.timer);
+                });
+        }
+    }
+
+    public destroy() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+    }
+}

package/src/Utils/Common.ts

@@ -1,12 +1,11 @@
 import { appRegister } from "../Register";
-import { debounce, memoize } from "lodash";
+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";
 import type Emittery from "emittery";
-import { log } from "./log";
 import { ROOT_DIR } from "../constants";
 
 export const genAppId = async (kind: string) => {
@@ -101,15 +100,9 @@ export const makeValidScenePath = (displayer: Displayer, scenePath: string, inde
 };
 
 export const entireScenes = (displayer: Displayer) => {
-    // 缓存 entireScenes 结果, 避免频繁调用
-    const cacheKey = Math.round(Date.now() / 1000);
-    return invokeEntireScenes(cacheKey, displayer);
+    return displayer.entireScenes();
 };
 
-const invokeEntireScenes = memoize((cacheKey: number, displayer: Displayer) => {
-    log("invokeEntireScenes", cacheKey);
-    return displayer.entireScenes();
-});
 
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");

package/src/Utils/RoomHacker.ts

@@ -4,11 +4,12 @@ import type { WindowManager } from "../index";
 import type { Camera, Room, Player, PlayerSeekingResult } from "white-web-sdk";
 
 // 修改多窗口状态下一些失效的方法实现到 manager 的 mainview 上, 降低迁移成本
-export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
+export const replaceRoomFunction = (room: Room | Player, manager: WindowManager) => {
     if (isPlayer(room)) {
         const player = room as unknown as Player;
         delegateSeekToProgressTime(player);
     } else {
+        room = room as unknown as Room;
         const descriptor = Object.getOwnPropertyDescriptor(room, "disableCameraTransform");
         if (descriptor) return;
         Object.defineProperty(room, "disableCameraTransform", {

package/src/index.ts

@@ -2,25 +2,25 @@ import Emittery from "emittery";
 import pRetry from "p-retry";
 import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
+import { checkVersion, setupWrapper } from "./Helper";
 import { ContainerResizeObserver } from "./ContainerResizeObserver";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
-import { DEFAULT_CONTAINER_RATIO, Events, REQUIRE_VERSION } from "./constants";
+import { DEFAULT_CONTAINER_RATIO, Events } from "./constants";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
+import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
 import { isNull, isObject } from "lodash";
 import { log } from "./Utils/log";
 import { ReconnectRefresher } from "./ReconnectRefresher";
 import { replaceRoomFunction } from "./Utils/RoomHacker";
 import { setupBuiltin } from "./BuiltinApps";
-import { setupWrapper } from "./Helper";
 import "./style.css";
 import "@netless/telebox-insider/dist/style.css";
 import {
     addEmitterOnceListener,
     ensureValidScenePath,
     entireScenes,
-    getVersionNumber,
     isValidScenePath,
     wait,
 } from "./Utils/Common";
@@ -30,17 +30,8 @@ import {
     AppManagerNotInitError,
     InvalidScenePath,
     ParamsInvalidError,
-    WhiteWebSDKInvalidError,
 } from "./Utils/error";
 import type { Apps, Position } from "./AttributesDelegate";
-import {
-    InvisiblePlugin,
-    isPlayer,
-    isRoom,
-    RoomPhase,
-    ViewMode,
-    WhiteVersion,
-} from "white-web-sdk";
 import type {
     Displayer,
     SceneDefinition,
@@ -54,6 +45,7 @@ import type {
     Rectangle,
     ViewVisionMode,
     CameraState,
+    Player,
 } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { NetlessApp, RegisterParams } from "./typings";
@@ -161,7 +153,7 @@ export type PublicEvent = {
 };
 
 export type MountParams = {
-    room: Room;
+    room: Room | Player;
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
@@ -223,7 +215,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         const cursor = params.cursor;
         WindowManager.params = params;
 
-        this.checkVersion();
+        checkVersion();
+        let manager: WindowManager | undefined = undefined;
         if (isRoom(room)) {
             if (room.phase !== RoomPhase.Connected) {
                 throw new Error("[WindowManager]: Room only Connected can be mount");
@@ -232,11 +225,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                 // redo undo 需要设置这个属性
                 room.disableSerialization = false;
             }
+            manager = await this.initManager(room);
         }
         if (WindowManager.isCreated) {
             throw new Error("[WindowManager]: Already created cannot be created again");
         }
-        let manager = await this.initManager(room);
+
         this.debug = Boolean(debug);
         log("Already insert room", manager);
 
@@ -247,7 +241,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         } else {
             await pRetry(
                 async count => {
-                    manager = await this.initManager(room);
+                    manager = (await room.getInvisiblePlugin(WindowManager.kind)) as WindowManager;
                     if (!manager) {
                         log(`manager is empty. retrying ${count}`);
                         throw new Error();
@@ -257,6 +251,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             );
         }
 
+        if (!manager) {
+            throw new Error("[WindowManager]: create manager failed");
+        }
+
         if (containerSizeRatio) {
             WindowManager.containerSizeRatio = containerSizeRatio;
         }
@@ -742,18 +740,20 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         this.appManager?.boxManager?.setPrefersColorScheme(scheme);
     }
 
+    public cleanCurrentScene(): void {
+        const focused = this.focused;
+        if (focused) {
+            this.appManager?.focusApp?.view?.cleanCurrentScene();
+        } else {
+            this.mainView.cleanCurrentScene();
+        }
+    }
+
     private isDynamicPPT(scenes: SceneDefinition[]) {
         const sceneSrc = scenes[0]?.ppt?.src;
         return sceneSrc?.startsWith("pptx://");
     }
 
-    private static checkVersion() {
-        const version = getVersionNumber(WhiteVersion);
-        if (version < getVersionNumber(REQUIRE_VERSION)) {
-            throw new WhiteWebSDKInvalidError(REQUIRE_VERSION);
-        }
-    }
-
     private async ensureAttributes() {
         if (isNull(this.attributes)) {
             await wait(50);