@netless/window-manager 0.4.0-canary.3 → 0.4.0-canary.30

package/src/App/Storage/typings.ts

@@ -0,0 +1,23 @@
+import type { StorageEventListener } from "./StorageEvent";
+
+export type RefValue<TValue = any> = { k: string; v: TValue; __isRef: true };
+
+export type ExtractRawValue<TValue> = TValue extends RefValue<infer TRefValue> ? TRefValue : TValue;
+
+export type AutoRefValue<TValue> = RefValue<ExtractRawValue<TValue>>;
+
+export type MaybeRefValue<TValue> = TValue | AutoRefValue<TValue>;
+
+export type DiffOne<T> = { oldValue?: T; newValue?: T };
+
+export type Diff<T> = { [K in keyof T]?: DiffOne<T[K]> };
+
+export type StorageOnSetStatePayload<TState = unknown> = {
+  [K in keyof TState]?: MaybeRefValue<TState[K]>;
+};
+
+export type StorageStateChangedEvent<TState = any> = Diff<TState>;
+
+export type StorageStateChangedListener<TState = any> = StorageEventListener<StorageStateChangedEvent<TState>>;
+
+export type StorageStateChangedListenerDisposer = () => void;

package/src/App/Storage/utils.ts

@@ -0,0 +1,17 @@
+import { has } from "lodash";
+import { genUID } from "side-effect-manager";
+import type { AutoRefValue, ExtractRawValue, RefValue } from "./typings";
+
+export const plainObjectKeys = Object.keys as <T>(o: T) => Array<Extract<keyof T, string>>;
+
+export function isRef<TValue = unknown>(e: unknown): e is RefValue<TValue> {
+  return Boolean(has(e, '__isRef'));
+}
+
+export function makeRef<TValue>(v: TValue): RefValue<TValue> {
+  return { k: genUID(), v, __isRef: true };
+}
+
+export function makeAutoRef<TValue>(v: TValue): AutoRefValue<TValue> {
+  return isRef<ExtractRawValue<TValue>>(v) ? v : makeRef(v as ExtractRawValue<TValue>);
+}

package/src/AppContext.ts

@@ -6,18 +6,20 @@ import {
     unlistenDisposed,
     unlistenUpdated,
     toJS
-    } from 'white-web-sdk';
+} 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";
 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';
 
-export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
-    public readonly emitter: Emittery<AppEmitterEvent<TAttrs>>;
+export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
+    public readonly emitter: Emittery<AppEmitterEvent<TAttributes>>;
     public readonly mobxUtils = {
         autorun,
         reaction,
@@ -39,45 +41,45 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
         private boxManager: BoxManager,
         public appId: string,
         private appProxy: AppProxy,
-        private appOptions?: AppOptions | (() => AppOptions),
+        private appOptions?: TAppOptions | (() => TAppOptions),
     ) {
         this.emitter = appProxy.appEmitter;
         this.isAddApp = appProxy.isAddApp;
     }
 
-    public getDisplayer() {
+    public getDisplayer = () => {
         return this.manager.displayer;
     }
 
-    public getAttributes(): TAttrs | undefined {
+    /** @deprecated Use context.storage.state instead. */
+    public getAttributes = (): TAttributes | undefined => {
         return this.appProxy.attributes;
     }
 
-    public getScenes(): SceneDefinition[] | undefined {
+    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"];
         }
     }
 
-    public getView(): View | undefined {
+    public getView = (): View | undefined => {
         return this.appProxy.view;
     }
 
-    public getInitScenePath() {
+    public getInitScenePath = () => {
         return this.manager.getAppInitPath(this.appId);
     }
 
-    public getIsWritable(): boolean {
+    /** Get App writable status. */
+    public getIsWritable = (): boolean => {
         return this.manager.canOperate;
     }
 
-    public getBox(): ReadonlyTeleBox {
+    /** Get the App Window UI box. */
+    public getBox = (): ReadonlyTeleBox => {
         const box = this.boxManager.getBox(this.appId);
         if (box) {
             return box;
@@ -86,27 +88,30 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
         }
     }
 
-    public getRoom(): Room | undefined {
+    public getRoom = (): Room | undefined => {
         return this.manager.room;
     }
 
-    public setAttributes(attributes: TAttrs) {
+    /** @deprecated Use context.storage.setState instead. */
+    public setAttributes = (attributes: TAttributes) => {
         this.manager.safeSetAttributes({ [this.appId]: attributes });
     }
 
-    public updateAttributes(keys: string[], value: any) {
+    /** @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 async setScenePath(scenePath: string): Promise<void> {
+    public setScenePath = async (scenePath: string): Promise<void> => {
         if (!this.appProxy.box) return;
         this.appProxy.setFullPath(scenePath);
-        this.appProxy.context.switchAppToWriter(this.appId);
+        // 兼容 15 版本 SDK 的切页
+        this.getRoom()?.setScenePath(scenePath);
     }
 
-    public mountView(dom: HTMLDivElement): void {
+    public mountView = (dom: HTMLDivElement): void => {
         const view = this.getView();
         if (view) {
             view.divElement = dom;
@@ -117,7 +122,47 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
         }
     }
 
-    public getAppOptions(): AppOptions | undefined {
-        return typeof this.appOptions === 'function' ? (this.appOptions as () => AppOptions)() : this.appOptions
+    /** Get the local App options. */
+    public getAppOptions = (): TAppOptions | undefined => {
+        return typeof this.appOptions === 'function' ? (this.appOptions as () => TAppOptions)() : this.appOptions
     }
+
+    private _storage?: Storage<TAttributes>
+
+    /** Main Storage for attributes. */
+    public get storage(): Storage<TAttributes> {
+        if (!this._storage) {
+            this._storage = new Storage(this);
+        }
+        return this._storage;
+    }
+
+    /**
+     * 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 
+     */
+    public createStorage = <TState>(storeId: string, defaultState?: TState): Storage<TState> => {
+        const storage = new Storage(this, storeId, defaultState);
+        this.emitter.on("destroy", () => {
+            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) => {
+        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/AppListener.ts

@@ -1,9 +1,9 @@
-import { callbacks } from './index';
-import { Events, MagixEventName } from './constants';
+import { callbacks, emitter } from "./index";
+import { Events, MagixEventName } from "./constants";
+import { setViewFocusScenePath } from "./Utils/Common";
 import type { Event } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { TeleBoxState } from "@netless/telebox-insider";
-import { setViewFocusScenePath } from './Utils/Common';
 
 export class AppListeners {
     private displayer = this.manager.displayer;
@@ -34,10 +34,6 @@ export class AppListeners {
                     this.appResizeHandler(data.payload);
                     break;
                 }
-                case Events.SwitchViewsToFreedom: {
-                    this.switchViewsToFreedomHandler();
-                    break;
-                }
                 case Events.AppBoxStateChange: {
                     this.boxStateChangeHandler(data.payload);
                     break;
@@ -50,6 +46,10 @@ export class AppListeners {
                     this.moveCameraToContainHandler(data.payload);
                     break;
                 }
+                case Events.CursorMove: {
+                    this.cursorMoveHandler(data.payload);
+                    break;
+                }
                 default:
                     break;
             }
@@ -65,19 +65,20 @@ export class AppListeners {
         this.manager.room?.refreshViewSize();
     };
 
-    private switchViewsToFreedomHandler = () => {
-        this.manager.viewManager.freedomAllViews();
-    };
-
     private boxStateChangeHandler = (state: TeleBoxState) => {
         callbacks.emit("boxStateChange", state);
-    }
+    };
 
     private setMainViewScenePathHandler = ({ nextScenePath }: { nextScenePath: string }) => {
         setViewFocusScenePath(this.manager.mainView, nextScenePath);
-    }
+        callbacks.emit("mainViewScenePathChange", nextScenePath);
+    };
 
     private moveCameraToContainHandler = (payload: any) => {
         this.manager.mainView.moveCameraToContain(payload);
-    }
+    };
+
+    private cursorMoveHandler = (payload: any) => {
+        emitter.emit("cursorMove", payload);
+    };
 }