@netless/window-manager 0.4.14 → 0.4.17

package/docs/app-context.md

@@ -0,0 +1,111 @@
+## AppContext
+
+- [api](#api)
+- [events](#events)
+
+<h2 id="api">API</h2>
+
+### appId
+
+插入 `app` 时生成的唯一 ID
+
+```ts
+const appId = context.appId
+```
+
+### getDisplayer
+
+在默认情况下 `Displayer` 为白板的 `room` 实例
+
+回放时则为 `Player` 实例
+
+```ts
+const displayer = context.getDisplayer()
+
+assert(displayer, room) // 互动房间
+assert(displayer, player) // 回放房间
+```
+
+### getScenes
+
+`scenes` 在 `addApp` 时传入 `scenePath` 会由 `WindowManager` 创建
+
+```ts
+const scenes = context.getScenes()
+```
+
+### getView
+
+`View` 为白板中一块可标注部分
+
+```ts
+const view = context.getView()
+```
+
+### getIsWritable
+
+获取当前状态是否可写
+
+```ts
+// isWritable === (room.isWritable && box.readonly)
+const isWritable = context.getIsWritable()
+```
+
+### getBox
+
+获取当前 app 的 box
+
+```ts
+const box = context.getBox()
+
+box.$content // box 的 main element
+box.$footer
+```
+
+### setScenePath
+
+切换当前 `view` 的 `scenePath`
+
+```ts
+context.setScenePath("/page/2")
+```
+
+### mountView
+
+挂载 view 到指定 dom
+
+```ts
+context.mountView(ref)
+```
+
+<h2 id="events">events</h2>
+
+### destroy
+
+app 被关闭时发送的事件
+
+```ts
+context.emitter.on("destroy", () => {
+    // release your listeners
+})
+```
+
+### writableChange
+
+白板可写状态切换时触发
+
+```ts
+context.emitter.on("writableChange", isWritable => {
+    //
+})
+```
+
+### focus
+
+当前 app 获得焦点或者失去焦点时触发
+
+```ts
+context.emitter.on("focus", focus => {
+    //
+})
+```

package/docs/develop-app.md

@@ -1,5 +1,7 @@
 # 开发自定义 APP
 
+- [AppContext](./app-context.md)
+
 ## official apps https://github.com/netless-io/netless-app
 
 <br>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.14",
+  "version": "0.4.17",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",

package/src/AppListener.ts

@@ -99,6 +99,8 @@ export class AppListeners {
     };
 
     private rootDirRemovedHandler = () => {
-        this.manager.onRootDirRemoved();
-    };
+        this.manager.createRootDirScenesCallback();
+        this.manager.mainViewProxy.rebind();
+        emitter.emit("rootDirRemoved");
+    }
 }

package/src/AppManager.ts

@@ -59,6 +59,8 @@ export class AppManager {
 
     public sceneState: SceneState | null = null;
 
+    public rootDirRemoving = false;
+
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
         this.store.setContext({
@@ -106,10 +108,10 @@ export class AppManager {
         });
     }
 
-    private onRemoveScenes = (scenePath: string) => {
+    private onRemoveScenes = async (scenePath: string) => {
         // 如果移除根目录就把 scenePath 设置为初始值
         if (scenePath === ROOT_DIR) {
-            this.onRootDirRemoved();
+            await this.onRootDirRemoved();
             this.dispatchInternalEvent(Events.RootDirRemoved);
             return;
         }
@@ -127,19 +129,19 @@ export class AppManager {
      * 根目录被删除时所有的 scene 都会被删除.
      * 所以需要关掉所有开启了 view 的 app
      */
-    public onRootDirRemoved() {
+    public async onRootDirRemoved(needClose = true) {
         this.setMainViewScenePath(INIT_DIR);
         this.createRootDirScenesCallback();
-
-        this.appProxies.forEach(appProxy => {
+        
+        for (const [id, appProxy] of this.appProxies.entries()) {
             if (appProxy.view) {
-                this.closeApp(appProxy.id);
+                await this.closeApp(id, needClose);
             }
-        });
+        }
         // 删除了根目录的 scenes 之后 mainview 需要重新绑定, 否则主白板会不能渲染
         this.mainViewProxy.rebind();
-
         emitter.emit("rootDirRemoved");
+        this.updateRootDirRemoving(false);
     }
 
     private onReadonlyChanged = () => {
@@ -159,7 +161,7 @@ export class AppManager {
         });
     };
 
-    private createRootDirScenesCallback = () => {
+    public createRootDirScenesCallback = () => {
         let isRecreate = false;
         if (this.callbacksNode) {
             this.callbacksNode.dispose();
@@ -361,14 +363,13 @@ export class AppManager {
             for (const { id } of orderBy(appsWithCreatedAt, "createdAt", "asc")) {
                 if (!this.appProxies.has(id) && !this.appStatus.has(id)) {
                     const app = apps[id];
-
-                    this.appStatus.set(id, AppStatus.StartCreate);
                     try {
                         const appAttributes = this.attributes[id];
                         if (!appAttributes) {
                             throw new Error("appAttributes is undefined");
                         }
                         this.appCreateQueue.push(() => {
+                            this.appStatus.set(id, AppStatus.StartCreate);
                             return this.baseInsertApp(
                                 {
                                     kind: app.kind,
@@ -505,10 +506,10 @@ export class AppManager {
         }
     }
 
-    public async closeApp(appId: string) {
+    public async closeApp(appId: string, needClose = true) {
         const appProxy = this.appProxies.get(appId);
         if (appProxy) {
-            appProxy.destroy(true, true, false);
+            appProxy.destroy(true, needClose, false);
         }
     }
 
@@ -728,6 +729,10 @@ export class AppManager {
         });
     }
 
+    public updateRootDirRemoving = (removing: boolean) => {
+        this.rootDirRemoving = removing;
+    }
+
     public dispatchInternalEvent(event: Events, payload?: any) {
         this.safeDispatchMagixEvent(MagixEventName, {
             eventName: event,

package/src/AppProxy.ts

@@ -1,5 +1,5 @@
 import Emittery from "emittery";
-import { AppAttributes, AppEvents, Events } from "./constants";
+import { AppAttributes, AppEvents, Events, SETUP_APP_DELAY } from "./constants";
 import { AppContext } from "./AppContext";
 import { appRegister } from "./Register";
 import { autorun } from "white-web-sdk";
@@ -168,7 +168,7 @@ export class AppProxy {
                     appRegister.notifyApp(this.kind, "created", { appId, result });
                     this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
-                }, 50);
+                }, SETUP_APP_DELAY);
             });
             this.boxManager?.createBox({
                 appId: appId,
@@ -346,6 +346,7 @@ export class AppProxy {
 
     public setViewFocusScenePath() {
         const fullPath = this.getFullScenePath();
+        console.log("setViewFocusScenePath", this.kind, this.id, fullPath)
         if (fullPath && this.view) {
             setViewFocusScenePath(this.view, fullPath);
         }
@@ -380,6 +381,7 @@ export class AppProxy {
         if (cleanAttrs) {
             this.store.cleanAppAttributes(this.id);
             if (this.scenePath) {
+                console.log("put closeApp", this.scenePath);
                 removeScenes(this.manager.room, this.scenePath);
             }
         }

package/src/InternalEmitter.ts

@@ -27,4 +27,4 @@ export type EmitterEvent = {
 };
 
 export type EmitterType = Emittery<EmitterEvent>;
-export const emitter: EmitterType = new Emittery();
+export const emitter: EmitterType = new Emittery();

package/src/Utils/AppCreateQueue.ts

@@ -1,5 +1,6 @@
 import { callbacks } from "../callback";
 import type { AppProxy } from "../AppProxy";
+import { SETUP_APP_DELAY } from "../constants";
 
 export type Invoker = () => Promise<AppProxy | undefined>;
 
@@ -60,11 +61,18 @@ export class AppCreateQueue {
 
     public emitReady() {
         if (!this.isEmit) {
-            callbacks.emit("ready");
+            setTimeout(() => {
+                callbacks.emit("ready");
+            }, SETUP_APP_DELAY);
         }
         this.isEmit = true;
     }
 
+    public empty() {
+        this.list = [];
+        this.clear();
+    }
+
     public destroy() {
         if (this.timer) {
             this.clear();

package/src/Utils/Common.ts

@@ -1,12 +1,12 @@
 import { appRegister } from "../Register";
 import { debounce } from "lodash";
 import { emitter } from "../InternalEmitter";
+import { ROOT_DIR } from "../constants";
 import { ScenePathType } from "white-web-sdk";
 import { v4 } from "uuid";
 import type { PublicEvent } from "../callback";
-import type { Displayer, ViewVisionMode, Room, View } from "white-web-sdk";
+import type { Displayer, ViewVisionMode, Room, View , SceneDefinition} from "white-web-sdk";
 import type Emittery from "emittery";
-import { ROOT_DIR } from "../constants";
 
 export const genAppId = async (kind: string) => {
     const impl = await appRegister.appClasses.get(kind)?.();
@@ -104,6 +104,9 @@ export const entireScenes = (displayer: Displayer) => {
     return displayer.entireScenes();
 };
 
+export const putScenes = (room: Room | undefined, path: string, scenes: SceneDefinition[]) => {
+    return room?.putScenes(path, scenes);
+}
 
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");

package/src/Utils/RoomHacker.ts

@@ -2,6 +2,7 @@ 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";
+import { ROOT_DIR } from "../constants";
 
 // 修改多窗口状态下一些失效的方法实现到 manager 的 mainview 上, 降低迁移成本
 export const replaceRoomFunction = (room: Room | Player, manager: WindowManager) => {
@@ -54,13 +55,16 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
         room.lockImage = (...args) => manager.lockImage(...args);
         room.lockImages = (...args) => manager.lockImages(...args);
 
-        delegateRemoveScenes(room);
+        delegateRemoveScenes(room, manager);
     }
 };
 
-const delegateRemoveScenes = (room: Room) => {
+const delegateRemoveScenes = (room: Room, manager: WindowManager) => {
     const originRemoveScenes = room.removeScenes;
     room.removeScenes = (scenePath: string) => {
+        if (scenePath === ROOT_DIR) {
+            manager.appManager?.updateRootDirRemoving(true);
+        }
         const result = originRemoveScenes.call(room, scenePath);
         emitter.emit("removeScenes", scenePath);
         return result;

package/src/View/MainView.ts

@@ -22,7 +22,6 @@ export class MainViewProxy {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
-            this.addMainViewListener();
             setTimeout(() => {
                 this.start();
                 if (!this.mainViewCamera || !this.mainViewSize) {
@@ -55,6 +54,7 @@ export class MainViewProxy {
     public start() {
         if (this.started) return;
         this.sizeChangeHandler(this.mainViewSize);
+        this.addMainViewListener();
         this.addCameraListener();
         this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
         this.started = true;
@@ -143,6 +143,7 @@ export class MainViewProxy {
             this.view.divElement.removeEventListener("click", this.mainViewClickListener);
             this.view.divElement.removeEventListener("touchend", this.mainViewClickListener);
         }
+        this.mainViewIsAddListener = false;
     }
 
     private mainViewClickListener = () => {

package/src/constants.ts

@@ -51,3 +51,5 @@ export const DEFAULT_CONTAINER_RATIO = 9 / 16;
 
 export const ROOT_DIR = "/";
 export const INIT_DIR = "/init";
+
+export const SETUP_APP_DELAY = 50;

package/src/index.ts

@@ -25,6 +25,7 @@ import {
     ensureValidScenePath,
     entireScenes,
     isValidScenePath,
+    putScenes,
     wait,
 } from "./Utils/Common";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
@@ -387,6 +388,28 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
      * 创建一个 app 至白板
      */
     public async addApp<T = any>(params: AddAppParams<T>): Promise<string | undefined> {
+        if (this.appManager) {
+            // 移除根目录时需要做一些异步的释放操作 addApp 需要等待释放完成才可以继续添加
+            if (this.appManager.rootDirRemoving) {
+                return new Promise((resolve, reject) => {
+                    emitter.once("rootDirRemoved").then(async () => {
+                        try {
+                            const appId = await this._addApp(params);
+                            resolve(appId);
+                        } catch (error) {
+                            reject(error.message);
+                        }
+                    });
+                });
+            } else {
+                return this._addApp(params);
+            }
+        } else {
+            throw new AppManagerNotInitError();
+        }
+    }
+
+    private async _addApp<T = any>(params: AddAppParams<T>): Promise<string | undefined> {
         if (this.appManager) {
             if (!params.kind || typeof params.kind !== "string") {
                 throw new ParamsInvalidError();
@@ -438,16 +461,16 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                 if (this.isDynamicPPT(scenes)) {
                     isDynamicPPT = true;
                     if (!entireScenes(this.displayer)[scenePath]) {
-                        this.room?.putScenes(scenePath, scenes);
+                        putScenes(this.room, scenePath, scenes);
                     }
                 } else {
                     if (!entireScenes(this.displayer)[scenePath]) {
-                        this.room?.putScenes(scenePath, [{ name: scenes[0].name }]);
+                        putScenes(this.room, scenePath, [{ name: scenes[0].name }]);
                     }
                 }
             }
             if (scenePath && scenes === undefined) {
-                this.room?.putScenes(scenePath, [{}]);
+                putScenes(this.room, scenePath, [{}]);
             }
         }
         return isDynamicPPT;

package/.eslintignore

@@ -1,4 +0,0 @@
-node_modules/
-dist/
-public/
-test/

package/.eslintrc.js

@@ -1,28 +0,0 @@
-/** @type {import("eslint").Linter.Config */
-const config = {
-    root: true,
-    env: {
-        browser: true,
-    },
-    parser: "@typescript-eslint/parser",
-    plugins: ["svelte3", "@typescript-eslint"],
-    extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
-    rules: {
-        "@typescript-eslint/consistent-type-imports": ["warn"],
-        "@typescript-eslint/no-empty-interface": "off",
-        "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/explicit-module-boundary-types": "off",
-    },
-    overrides: [
-        {
-            files: ["*.svelte"],
-            processor: "svelte3/svelte3",
-        },
-    ],
-    settings: {
-        "svelte3/typescript": true,
-    },
-};
-
-// eslint-disable-next-line no-undef
-module.exports = config;

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,7 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="ES6UnusedImports" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/window-manager.iml" filepath="$PROJECT_DIR$/.idea/window-manager.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/.idea/window-manager.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.vscode/settings.json

@@ -1,22 +0,0 @@
-{
-    "cSpell.words": [
-        "autorun",
-        "Contian",
-        "Dexie",
-        "Displayer",
-        "Emittery",
-        "esbuild",
-        "loadjs",
-        "localforge",
-        "Magix",
-        "mainview",
-        "minheight",
-        "minwidth",
-        "predev",
-        "SCENEPATH",
-        "sveltejs",
-        "telebox",
-        "titlebar",
-        "vite"
-    ]
-}