@netless/window-manager 0.4.8 → 0.4.9-canary.2

package/docs/advanced.md

@@ -3,6 +3,7 @@
 - 目录
   - [撤销重做](#redo-undo)
   - [清屏](#clean-current-scene)
+  - [判断是否打开某种 APP](#has-kind)
 
 
 <h3 id="redo-undo">撤销重做</h3>
@@ -51,3 +52,15 @@ manager.cleanCurrentScene()
 ```ts
 manager.mainView.cleanCurrentScene()
 ```
+
+
+<br>
+
+<h3 id="has-kind">判断是否打开某种 APP</h3>
+
+```ts
+manager.emitter.on("ready", () => { // ready 事件在所有 app 创建完成后触发
+    const apps = manager.queryAll(); //  获取所有已经打开的 App
+    const hasSlide = apps.some(app => app.kind === "Slide"); // 判断已经打开的 APP 中是否有 Slide
+});
+```

package/docs/api.md

@@ -4,6 +4,7 @@
   - [静态方法](#static-methods)
     - [`mount`](#mount)
     - [`register`](#register)
+    - [`registered`](#registered)
     - [`setContainer`](#set-container)
     - [`setCollectorContainer`](#set-collector-container)
   - [实例方法](#instance-methods)
@@ -85,6 +86,18 @@ WindowManager.register({
 })
 ```
 
+<br>
+
+<h3 id="registered">WindowManager.registered</h3>
+
+> 获取已经注册过的 `App`
+
+```ts
+WindowManager.registered
+```
+
+<br>
+
 <h3 id="set-container">setContainer</h3>
 
 > 设置白板挂载容器
@@ -215,6 +228,7 @@ manager.addPage({ scene: { name: "page2" } }) // 传入 page 信息
 | focused            | string |          | focus 的 app            |
 | canRedoSteps       | number  |         | 当前 focus 的 view 可以重做的步数 |
 | canRedoSteps       | number  |         | 当前 focus 的 view 可以撤销的步数 |
+| sceneState         | SceneState |      | 兼容原本 SDK 的 sceneState 属性, 只对 mainView 生效 |
 
 <br>
 
@@ -237,7 +251,8 @@ manager.callbacks.on(events, listener)
 | canRedoStepsChange       | number         |         | 当前 focus 的 view 可重做步数改变 |
 | canUndoStepsChange       | number         |         | 当前 focus 的 view 可撤销步数改变 |
 | loadApp                  | LoadAppEvent   |         | 加载远程APP 事件                |
-
+| ready                    | undefined      |         | 当所有 APP 创建完毕时触发      ｜
+| sceneStateChange         | SceneState     |         | 当 sceneState 修改时触发     |
 
 ```ts
 type LoadAppEvent = {

package/docs/develop-app.md

@@ -0,0 +1,50 @@
+# 开发自定义 APP
+
+## official apps https://github.com/netless-io/netless-app
+
+<br>
+
+```ts
+import type { NetlessApp, AppContext } from "@netless/window-manager";
+
+const HelloWorld: NetlessApp = {
+    kind: "HelloWorld",
+    setup: (context: AppContext) => {
+        context.mountView(context.getBox().$content); // 可选: 挂载 View 到 box 上
+
+        const storage = context.createStorage<{ a: number }>("HelloWorld", { a: 1 });
+        console.log(storage.state === { a: 1 });
+
+        storage.addStateChangedListener(diff => {
+            if (diff.a) {
+                console.log(diff.a.oldValue === 1);
+                console.log(diff.a.newValue === 2);
+            }
+        });
+
+        if (context.getIsWritable()) {
+            // 只有在可写状态才可以调用 setState
+            storage.setState({ a: 2 });
+        }
+
+        // magixEvent 事件是房间内范围的, 建议 app 内使用需要添加自己的 prefix
+        context.addMagixEventListener(`${context.appId}_event1`, message => {
+            console.log("MagixEvent", message);
+        });
+
+        context.dispatchMagixEvent(`${context.appId}_event1`, { count: 1 });
+    },
+};
+
+WindowManager.register({
+    kind: HelloWorld.kind,
+    src: HelloWorld,
+});
+
+manager.addApp({
+    kind: "HelloWorld",
+    options: {
+        scenePath: "/hello-world", // 如果需要在 App 中使用白板则必须声明 scenePath
+    },
+});
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.8",
+  "version": "0.4.9-canary.2",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",

package/src/AppContext.ts

@@ -1,3 +1,5 @@
+import { BoxNotCreatedError } from "./Utils/error";
+import { Storage } from "./App/Storage";
 import {
     autorun,
     listenDisposed,
@@ -5,31 +7,38 @@ import {
     reaction,
     unlistenDisposed,
     unlistenUpdated,
-    toJS
-} from 'white-web-sdk';
-import { BoxNotCreatedError } from './Utils/error';
-import type { Room, SceneDefinition, View, EventListener as WhiteEventListener } from "white-web-sdk";
+    toJS,
+} 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";
 import type { AppEmitterEvent } from "./index";
 import type { AppManager } from "./AppManager";
 import type { AppProxy } from "./AppProxy";
-import { Storage } from './App/Storage';
-import type { MagixEventAddListener, MagixEventDispatcher, MagixEventRemoveListener } from './App/MagixEvent';
+import type {
+    MagixEventAddListener,
+    MagixEventDispatcher,
+    MagixEventRemoveListener,
+} from "./App/MagixEvent";
 
 export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
     public readonly emitter: Emittery<AppEmitterEvent<TAttributes>>;
     public readonly mobxUtils = {
         autorun,
         reaction,
-        toJS
+        toJS,
     };
     public readonly objectUtils = {
         listenUpdated,
         unlistenUpdated,
         listenDisposed,
-        unlistenDisposed
+        unlistenDisposed,
     };
 
     private store = this.manager.store;
@@ -41,7 +50,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         private boxManager: BoxManager,
         public appId: string,
         private appProxy: AppProxy,
-        private appOptions?: TAppOptions | (() => TAppOptions),
+        private appOptions?: TAppOptions | (() => TAppOptions)
     ) {
         this.emitter = appProxy.appEmitter;
         this.isAddApp = appProxy.isAddApp;
@@ -49,12 +58,12 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
 
     public getDisplayer = () => {
         return this.manager.displayer;
-    }
+    };
 
     /** @deprecated Use context.storage.state instead. */
     public getAttributes = (): TAttributes | undefined => {
         return this.appProxy.attributes;
-    }
+    };
 
     public getScenes = (): SceneDefinition[] | undefined => {
         const appAttr = this.store.getAppAttributes(this.appId);
@@ -63,20 +72,20 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         } else {
             return appAttr?.options["scenes"];
         }
-    }
+    };
 
     public getView = (): View | undefined => {
         return this.appProxy.view;
-    }
+    };
 
     public getInitScenePath = () => {
         return this.manager.getAppInitPath(this.appId);
-    }
+    };
 
     /** Get App writable status. */
     public getIsWritable = (): boolean => {
         return this.manager.canOperate;
-    }
+    };
 
     /** Get the App Window UI box. */
     public getBox = (): ReadonlyTeleBox => {
@@ -86,48 +95,50 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         } else {
             throw new BoxNotCreatedError();
         }
-    }
+    };
 
     public getRoom = (): Room | undefined => {
         return this.manager.room;
-    }
+    };
 
     /** @deprecated Use context.storage.setState instead. */
     public setAttributes = (attributes: TAttributes) => {
         this.manager.safeSetAttributes({ [this.appId]: attributes });
-    }
+    };
 
     /** @deprecated Use context.storage.setState instead. */
     public updateAttributes = (keys: string[], value: any) => {
         if (this.manager.attributes[this.appId]) {
             this.manager.safeUpdateAttributes([this.appId, ...keys], value);
         }
-    }
+    };
 
     public setScenePath = async (scenePath: string): Promise<void> => {
         if (!this.appProxy.box) return;
         this.appProxy.setFullPath(scenePath);
         // 兼容 15 版本 SDK 的切页
         this.getRoom()?.setScenePath(scenePath);
-    }
+    };
 
-    public mountView = (dom: HTMLDivElement): void => {
+    public mountView = (dom: HTMLElement): void => {
         const view = this.getView();
         if (view) {
-            view.divElement = dom;
+            view.divElement = dom as HTMLDivElement;
             setTimeout(() => {
                 // 渲染需要时间，延迟 refresh
                 this.getRoom()?.refreshViewSize();
             }, 1000);
         }
-    }
+    };
 
     /** Get the local App options. */
     public getAppOptions = (): TAppOptions | undefined => {
-        return typeof this.appOptions === 'function' ? (this.appOptions as () => TAppOptions)() : this.appOptions
-    }
+        return typeof this.appOptions === "function"
+            ? (this.appOptions as () => TAppOptions)()
+            : this.appOptions;
+    };
 
-    private _storage?: Storage<TAttributes>
+    private _storage?: Storage<TAttributes>;
 
     /** Main Storage for attributes. */
     public get storage(): Storage<TAttributes> {
@@ -141,7 +152,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
      * Create separated storages for flexible state management.
      * @param storeId Namespace for the storage. Storages of the same namespace share the same data.
      * @param defaultState Default state for initial storage creation.
-     * @returns 
+     * @returns
      */
     public createStorage = <TState>(storeId: string, defaultState?: TState): Storage<TState> => {
         const storage = new Storage(this, storeId, defaultState);
@@ -149,20 +160,27 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
             storage.destroy();
         });
         return storage;
-    }
+    };
 
     /** Dispatch events to other clients (and self). */
     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) => {
+    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);
-    }
+        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>
+    public removeMagixEventListener = this.manager.displayer.removeMagixEventListener.bind(
+        this.manager.displayer
+    ) as MagixEventRemoveListener<TMagixEventPayloads>;
 }

package/src/AppListener.ts

@@ -1,4 +1,5 @@
-import { callbacks, emitter } from "./index";
+import { callbacks } from "./callback";
+import { emitter } from "./InternalEmitter";
 import { Events, MagixEventName } from "./constants";
 import { isEqual, omit } from "lodash";
 import { setViewFocusScenePath } from "./Utils/Common";

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/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";