@netless/window-manager 0.4.0-canary.10 → 0.4.0-canary.11

package/dist/typings.d.ts

@@ -2,7 +2,7 @@ import type Emittery from "emittery";
 import type { AnimationMode, Displayer, DisplayerState, Player, Room, SceneDefinition, SceneState, View } from "white-web-sdk";
 import type { AppContext } from "./AppContext";
 import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
-export interface NetlessApp<Attributes = any, SetupResult = any, AppOptions = any> {
+export interface NetlessApp<Attributes = any, MagixEventPayloads = any, AppOptions = any, SetupResult = any> {
     kind: string;
     config?: {
         /** Box width relative to whiteboard. 0~1. Default 0.5. */
@@ -16,7 +16,7 @@ export interface NetlessApp<Attributes = any, SetupResult = any, AppOptions = an
         /** App only single instance. */
         singleton?: boolean;
     };
-    setup: (context: AppContext<Attributes, AppOptions>) => SetupResult;
+    setup: (context: AppContext<Attributes, MagixEventPayloads, AppOptions>) => SetupResult;
 }
 export declare type AppEmitterEvent<T = any> = {
     /**

package/package.json

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

package/src/App/MagixEvent/index.ts

@@ -0,0 +1,66 @@
+import type {
+  MagixEventListenerOptions as WhiteMagixListenerOptions,
+  Event as WhiteEvent,
+  EventPhase as WhiteEventPhase,
+  Scope as WhiteScope,
+} from "white-web-sdk";
+
+export interface MagixEventListenerOptions extends WhiteMagixListenerOptions {
+  /**
+   * Rapid emitted callbacks will be slowed down to this interval (in ms).
+   */
+  fireInterval?: number;
+  /**
+   * If `true`, sent events will reach self-listeners after committed to server.
+   * Otherwise the events will reach self-listeners immediately.
+   */
+  fireSelfEventAfterCommit?: boolean;
+}
+
+export interface MagixEventMessage<
+  TPayloads = any,
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+> extends Omit<WhiteEvent, "scope" | "phase"> {
+  /** Event name */
+  event: TEvent;
+  /** Event Payload */
+  payload: TPayloads[TEvent];
+  /** Whiteboard ID of the client who dispatched the event. It will be AdminObserverId for system events. */
+  authorId: number;
+  scope: `${WhiteScope}`;
+  phase: `${WhiteEventPhase}`;
+}
+
+export type MagixEventTypes<TPayloads = any> = Extract<keyof TPayloads, string>;
+
+export type MagixEventPayload<
+  TPayloads = any,
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+> = TPayloads[TEvent];
+
+export type MagixEventDispatcher<TPayloads = any> = <
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+>(
+  event: TEvent,
+  payload: TPayloads[TEvent]
+) => void;
+
+export type MagixEventHandler<
+  TPayloads = any,
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+> = (message: MagixEventMessage<TPayloads, TEvent>) => void;
+
+export type MagixEventAddListener<TPayloads = any> = <
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+>(
+  event: TEvent,
+  handler: MagixEventHandler<TPayloads, TEvent>,
+  options?: MagixEventListenerOptions | undefined
+) => void;
+
+export type MagixEventRemoveListener<TPayloads = any> = <
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+>(
+  event: TEvent,
+  handler?: MagixEventHandler<TPayloads, TEvent>
+) => void;

package/src/App/Storage/index.ts

@@ -1,5 +1,5 @@
 import type { AkkoObjectUpdatedProperty } from "white-web-sdk";
-import { get, has, isObject } from "lodash";
+import { get, has, mapValues, isObject, size, noop } from "lodash";
 import { SideEffectManager } from "side-effect-manager";
 import type { AppContext } from "../../AppContext";
 import { safeListenPropsUpdated } from "../../Utils/Reactive";
@@ -9,12 +9,12 @@ import { StorageEvent } from "./StorageEvent";
 
 export * from './typings';
 
-const STORAGE_NS = "_WM-STORAGE_";
+export const STORAGE_NS = "_WM-STORAGE_";
 
-export class Storage<TState = any> implements Storage<TState> {
-  readonly id: string;
+export class Storage<TState extends Record<string, any> = any> implements Storage<TState> {
+  readonly id: string | null;
 
-  private readonly _context: AppContext<{ [STORAGE_NS]: TState }>;
+  private readonly _context: AppContext;
   private readonly _sideEffect = new SideEffectManager();
   private _state: TState;
   private _destroyed = false;
@@ -26,54 +26,52 @@ export class Storage<TState = any> implements Storage<TState> {
    */
   private _lastValue = new Map<string | number | symbol, TState[Extract<keyof TState, string>]>();
 
-  constructor(context: AppContext<any>, id: string, defaultState?: TState) {
-    if (id == null) {
-      throw new Error("Cannot create Storage with empty id.");
-    }
-
+  constructor(context: AppContext, id?: string, defaultState?: TState) {
     if (defaultState && !isObject(defaultState)) {
       throw new Error(`Default state for Storage ${id} is not an object.`);
     }
 
     this._context = context;
-    this.id = id;
+    this.id = id || null;
 
-    const attrs = context.getAttributes();
     this._state = {} as TState;
-    const rawState = get<TState>(attrs, [STORAGE_NS, id], this._state);
+    const rawState = this._getRawState(this._state);
 
-    if (this._context.getIsWritable()) {
-      if (!isObject(rawState) || rawState === this._state) {
-        if (!attrs[STORAGE_NS]) {
+    if (this.id !== null && this._context.getIsWritable()) {
+      if (rawState === this._state || !isObject(rawState)) {
+        if (!get(this._context.getAttributes(), [STORAGE_NS])) {
           this._context.updateAttributes([STORAGE_NS], {});
         }
         this._context.updateAttributes([STORAGE_NS, this.id], this._state);
-        if (defaultState) {
-          this.setState(defaultState);
-        }
-      } else {
-        // strip mobx
-        plainObjectKeys(rawState).forEach(key => {
-          try {
-            const rawValue = isObject(rawState[key]) ? JSON.parse(JSON.stringify(rawState[key])) : rawState[key];
-            if (isRef<TState[Extract<keyof TState, string>]>(rawValue)) {
-              this._state[key] = rawValue.v;
-              if (isObject(rawValue.v)) {
-                this._refMap.set(rawValue.v, rawValue);
-              }
-            } else {
-              this._state[key] = rawValue;
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        });
+      }
+      if (defaultState) {
+        this.setState(defaultState);
       }
     }
 
+    // strip mobx
+    plainObjectKeys(rawState).forEach(key => {
+      if (this.id === null && key === STORAGE_NS) {
+        return;
+      }
+      try {
+        const rawValue = isObject(rawState[key]) ? JSON.parse(JSON.stringify(rawState[key])) : rawState[key];
+        if (isRef<TState[Extract<keyof TState, string>]>(rawValue)) {
+          this._state[key] = rawValue.v;
+          if (isObject(rawValue.v)) {
+            this._refMap.set(rawValue.v, rawValue);
+          }
+        } else {
+          this._state[key] = rawValue;
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    });
+
     this._sideEffect.addDisposer(
       safeListenPropsUpdated(
-        () => get(context.getAttributes(), [STORAGE_NS, this.id]),
+        () => this.id === null ? context.getAttributes() : get(context.getAttributes(), [STORAGE_NS, this.id]),
         this._updateProperties.bind(this),
         this.destroy.bind(this)
       )
@@ -122,7 +120,7 @@ export class Storage<TState = any> implements Storage<TState> {
         if (value === void 0) {
           this._lastValue.set(key, this._state[key]);
           delete this._state[key];
-          this._context.updateAttributes([STORAGE_NS, this.id, key], value);
+          this._setRawState(key, value);
         } else {
           this._lastValue.set(key, this._state[key]);
           this._state[key] = value as TState[Extract<keyof TState, string>];
@@ -137,13 +135,20 @@ export class Storage<TState = any> implements Storage<TState> {
             payload = refValue;
           }
 
-          this._context.updateAttributes([STORAGE_NS, this.id, key], payload);
+          this._setRawState(key, payload)
         }
       });
     }
   }
 
-  emptyStore(): void {
+  /**
+   * Empty storage data.
+   */
+  emptyStorage(): void {
+    if (size(this._state) <= 0) {
+      return;
+    }
+
     if (this._destroyed) {
       console.error(new Error(`Cannot empty destroyed Storage "${this.id}".`));
       return;
@@ -154,10 +159,17 @@ export class Storage<TState = any> implements Storage<TState> {
       return;
     }
 
-    this._context.updateAttributes([STORAGE_NS, this.id], {});
+    this.setState(mapValues(this._state, noop as () => undefined));
   }
 
-  deleteStore(): void {
+  /**
+   * Delete storage index with all of its data and destroy the Storage instance.
+   */
+  deleteStorage(): void {
+    if (this.id === null) {
+      throw new Error(`Cannot delete main Storage`);
+    }
+
     if (!this._context.getIsWritable()) {
       console.error(new Error(`Cannot delete Storage "${this.id}" without writable access.`));
       return;
@@ -172,11 +184,35 @@ export class Storage<TState = any> implements Storage<TState> {
     return this._destroyed;
   }
 
+  /**
+   * Destroy the Storage instance. The data will be kept.
+   */
   destroy() {
     this._destroyed = true;
     this._sideEffect.flushAll();
   }
 
+  private _getRawState(): TState | undefined
+  private _getRawState(defaultValue: TState): TState
+  private _getRawState(defaultValue?: TState): TState | undefined {
+    if (this.id === null) {
+      return get(this._context.getAttributes(), [], defaultValue);
+    } else {
+      return get(this._context.getAttributes(), [STORAGE_NS, this.id], defaultValue);
+    }
+  }
+
+  private _setRawState(key: string, value: any): void {
+    if (this.id === null) {
+      if (key === STORAGE_NS) {
+        throw new Error(`Cannot set attribute internal filed "${STORAGE_NS}"`)
+      }
+      return this._context.updateAttributes([key], value);
+    } else {
+      return this._context.updateAttributes([STORAGE_NS, this.id, key], value);
+    }
+  }
+
   private _updateProperties(actions: ReadonlyArray<AkkoObjectUpdatedProperty<TState, string>>): void {
     if (this._destroyed) {
       console.error(new Error(`Cannot call _updateProperties on destroyed Storage "${this.id}".`));
@@ -190,6 +226,11 @@ export class Storage<TState = any> implements Storage<TState> {
         try {
           const action = actions[i]
           const key = action.key as Extract<keyof TState, string>;
+
+          if (this.id === null && key === STORAGE_NS) {
+            continue
+          }
+
           const value = isObject(action.value) ? JSON.parse(JSON.stringify(action.value)) : action.value;
           let oldValue: TState[Extract<keyof TState, string>] | undefined;
           if (this._lastValue.has(key)) {

package/src/AppContext.ts

@@ -6,7 +6,7 @@ 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 { ReadonlyTeleBox } from "@netless/telebox-insider";
@@ -16,9 +16,10 @@ 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> = 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,
@@ -40,21 +41,22 @@ export class AppContext<TAttrs extends Record<string, any> = any, AppOptions = a
         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);
@@ -66,19 +68,21 @@ export class AppContext<TAttrs extends Record<string, any> = any, AppOptions = a
         }
     }
 
-    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;
@@ -87,26 +91,28 @@ export class AppContext<TAttrs extends Record<string, any> = any, AppOptions = a
         }
     }
 
-    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);
     }
 
-    public mountView(dom: HTMLDivElement): void {
+    public mountView = (dom: HTMLDivElement): void => {
         const view = this.getView();
         if (view) {
             view.divElement = dom;
@@ -117,15 +123,41 @@ export class AppContext<TAttrs extends Record<string, any> = any, AppOptions = a
         }
     }
 
-    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
     }
 
-    public createStorage<TState>(storeId: string, defaultState?: TState): Storage<TState> {
+    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> = (this.manager.displayer as Room).dispatchMagixEvent.bind(this.manager.displayer)
+
+    /** Listen to events from others clients (and self messages). */
+    public addMagixEventListener: MagixEventAddListener<TMagixEventPayloads> = this.manager.displayer.addMagixEventListener.bind(this.manager.displayer)
+
+    /** Remove a Magix event listener. */
+    public removeMagixEventListener = this.manager.displayer.removeMagixEventListener.bind(this.manager.displayer) as MagixEventRemoveListener<TMagixEventPayloads>
 }

package/src/AppManager.ts

@@ -30,6 +30,7 @@ export class AppManager {
     public boxManager?: BoxManager;
 
     private _prevSceneIndex: number | undefined;
+    private _prevFocused: string | undefined;
 
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
@@ -106,6 +107,15 @@ export class AppManager {
                 }
             });
         });
+        this.refresher?.add("focusedChange", () => {
+            return autorun(() => {
+                const focused = get(this.attributes, "focus");
+                if (this._prevFocused !== focused) {
+                    callbacks.emit("focusedChange", focused);
+                    this._prevFocused = focused;
+                }
+            });
+        })
         if (!this.attributes.apps || Object.keys(this.attributes.apps).length === 0) {
             const mainScenePath = this.store.getMainViewScenePath();
             if (!mainScenePath) return;
@@ -116,6 +126,7 @@ export class AppManager {
         }
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
+        this._prevFocused = this.attributes.focus;
     }
 
     /**

package/src/index.ts

@@ -151,6 +151,7 @@ export type PublicEvent = {
     cameraStateChange: CameraState;
     mainViewScenePathChange: string;
     mainViewSceneIndexChange: number;
+    focusedChange: string | undefined;
 };
 
 export type MountParams = {

package/src/typings.ts

@@ -12,7 +12,7 @@ import type {
 import type { AppContext } from "./AppContext";
 import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
 
-export interface NetlessApp<Attributes = any, SetupResult = any, AppOptions = any> {
+export interface NetlessApp<Attributes = any, MagixEventPayloads = any, AppOptions = any, SetupResult = any> {
     kind: string;
     config?: {
         /** Box width relative to whiteboard. 0~1. Default 0.5. */
@@ -28,7 +28,7 @@ export interface NetlessApp<Attributes = any, SetupResult = any, AppOptions = an
         /** App only single instance. */
         singleton?: boolean;
     };
-    setup: (context: AppContext<Attributes, AppOptions>) => SetupResult;
+    setup: (context: AppContext<Attributes, MagixEventPayloads, AppOptions>) => SetupResult;
 }
 
 export type AppEmitterEvent<T = any> = {