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

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.14",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -19,7 +19,7 @@
   "license": "ISC",
   "peerDependencies": {
     "video.js": ">=7",
-    "white-web-sdk": "^2.13.16"
+    "white-web-sdk": "^2.16.0"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",

package/src/App/MagixEvent/index.ts

@@ -0,0 +1,68 @@
+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 MagixEventListenerDisposer = () => void
+
+export type MagixEventAddListener<TPayloads = any> = <
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+>(
+  event: TEvent,
+  handler: MagixEventHandler<TPayloads, TEvent>,
+  options?: MagixEventListenerOptions | undefined
+) => MagixEventListenerDisposer;
+
+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,20 +1,20 @@
 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";
 import { isRef, makeRef, plainObjectKeys } from "./utils";
-import type { Diff, MaybeRefValue, RefValue, StorageStateChangedEvent } from "./typings";
+import type { Diff, MaybeRefValue, RefValue, StorageStateChangedEvent, StorageStateChangedListener, StorageStateChangedListenerDisposer } from "./typings";
 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)
       )
@@ -88,6 +86,11 @@ export class Storage<TState = any> implements Storage<TState> {
   }
 
   readonly onStateChanged = new StorageEvent<StorageStateChangedEvent<TState>>();
+  
+  addStateChangedListener(handler: StorageStateChangedListener<TState>): StorageStateChangedListenerDisposer {
+    this.onStateChanged.addListener(handler);
+    return () => this.onStateChanged.removeListener(handler);
+  }
 
   ensureState(state: Partial<TState>): void {
     return this.setState(
@@ -122,7 +125,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 +140,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 +164,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 +189,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 +231,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/App/Storage/typings.ts

@@ -16,6 +16,8 @@ export type StorageOnSetStatePayload<TState = unknown> = {
   [K in keyof TState]?: MaybeRefValue<TState[K]>;
 };
 
-export type StorageStateChangedEvent<TState = any> = Diff<TState>
+export type StorageStateChangedEvent<TState = any> = Diff<TState>;
 
-export type StorageStateChangedListener<TState = any> = StorageEventListener<StorageStateChangedEvent<TState>>
+export type StorageStateChangedListener<TState = any> = StorageEventListener<StorageStateChangedEvent<TState>>;
+
+export type StorageStateChangedListenerDisposer = () => void;

package/src/AppContext.ts

@@ -6,9 +6,9 @@ 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";
@@ -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,30 @@ 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);
+        // 兼容 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,15 +125,44 @@ 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> = (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/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;
     }
 
     /**
@@ -307,6 +318,9 @@ export class AppManager {
         });
         if (isWritable === true) {
             this.mainView.disableCameraTransform = false;
+            if (this.room && this.room.disableSerialization === true) {
+                this.room.disableSerialization = false;
+            }
         } else {
             this.mainView.disableCameraTransform = true;
         }

package/src/AppProxy.ts

@@ -5,13 +5,9 @@ import { appRegister } from "./Register";
 import { autorun } from "white-web-sdk";
 import { emitter } from "./index";
 import { Fields } from "./AttributesDelegate";
-import { get } from "lodash";
+import { debounce, get } from "lodash";
 import { log } from "./Utils/log";
-import {
-    setScenePath,
-    setViewFocusScenePath,
-    getScenePath
-} from "./Utils/Common";
+import { setScenePath, setViewFocusScenePath, getScenePath } from "./Utils/Common";
 import type {
     AppEmitterEvent,
     AppInitState,
@@ -113,9 +109,7 @@ export class AppProxy extends Base {
         this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
     }
 
-    public async baseInsertApp(
-        skipUpdate = false,
-    ): Promise<{ appId: string; app: NetlessApp }> {
+    public async baseInsertApp(skipUpdate = false): Promise<{ appId: string; app: NetlessApp }> {
         const params = this.params;
         if (!params.kind) {
             throw new Error("[WindowManager]: kind require");
@@ -123,7 +117,13 @@ export class AppProxy extends Base {
         const appImpl = await appRegister.appClasses.get(params.kind)?.();
         const appParams = appRegister.registered.get(params.kind);
         if (appImpl) {
-            await this.setupApp(this.id, skipUpdate, appImpl, params.options, appParams?.appOptions);
+            await this.setupApp(
+                this.id,
+                skipUpdate,
+                appImpl,
+                params.options,
+                appParams?.appOptions
+            );
         } else {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
@@ -317,7 +317,7 @@ export class AppProxy extends Base {
                 }
             });
         });
-        this.manager.refresher?.add(this.stateKey,() => {
+        this.manager.refresher?.add(this.stateKey, () => {
             return autorun(() => {
                 const appState = this.appAttributes?.state;
                 if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
@@ -325,8 +325,20 @@ export class AppProxy extends Base {
                 }
             });
         });
+        this.manager.refresher?.add(`${appId}-fullPath`, () => {
+            return autorun(() => {
+                const fullPath = this.appAttributes?.fullPath;
+                this.setFocusScenePathHandler(fullPath);
+            });
+        });
     };
 
+    private setFocusScenePathHandler = debounce((fullPath: string | undefined) => {
+        if (this.view && fullPath && fullPath !== this.view?.focusScenePath) {
+            setViewFocusScenePath(this.view, fullPath);
+        }
+    }, 50);
+
     public setScenePath(): void {
         if (!this.manager.canOperate) return;
         const fullScenePath = this.getFullScenePath();
@@ -372,6 +384,7 @@ export class AppProxy extends Base {
         this.manager.appStatus.delete(this.id);
         this.manager.refresher?.remove(this.id);
         this.manager.refresher?.remove(this.stateKey);
+        this.manager.refresher?.remove(`${this.id}-fullPath`);
     }
 
     public close(): Promise<void> {

package/src/Utils/RoomHacker.ts

@@ -51,6 +51,7 @@ export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
         room.setMemberState = (...args) => manager.mainView.setMemberState(...args);
         room.redo = () => manager.mainView.redo();
         room.undo = () => manager.mainView.undo();
+        room.cleanCurrentScene = () => manager.mainView.cleanCurrentScene();
     }
 
 };

package/src/View/ViewManager.ts

@@ -1,4 +1,4 @@
-import type { View , Displayer} from "white-web-sdk";
+import type { View, Displayer } from "white-web-sdk";
 
 export class ViewManager {
     public views: Map<string, View> = new Map();
@@ -38,7 +38,6 @@ export class ViewManager {
     }
 }
 
-
 export const createView = (displayer: Displayer): View => {
     const view = displayer.views.createView();
     setDefaultCameraBound(view);

package/src/index.ts

@@ -151,6 +151,7 @@ export type PublicEvent = {
     cameraStateChange: CameraState;
     mainViewScenePathChange: string;
     mainViewSceneIndexChange: number;
+    focusedChange: string | undefined;
 };
 
 export type MountParams = {
@@ -219,7 +220,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             if (room.phase !== RoomPhase.Connected) {
                 throw new Error("[WindowManager]: Room only Connected can be mount");
             }
-            if (room.phase === RoomPhase.Connected) {
+            if (room.phase === RoomPhase.Connected && room.isWritable) {
                 // redo undo 需要设置这个属性
                 room.disableSerialization = false;
             }
@@ -570,6 +571,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return this.attributes.focus;
     }
 
+    public get mainViewSceneIndex(): number {
+        return this.appManager?.store.getMainViewSceneIndex();
+    }
+
     /**
      * 查询所有的 App
      */