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

package/docs/api.md

@@ -107,12 +107,13 @@ manager.closeApp(appId)
 
 <h2 id="prototypes">实例属性</h2>
 
-| name               | type    | default | desc   |
-| ------------------ | ------- | ------- | ------ |
-| mainView           | View    |         | 主白板    |
-| boxState           | string  |         | 当前窗口状态 |
-| darkMode           | boolean |         | 黑夜模式   |
-| prefersColorScheme | string  |         | 颜色主题   |
+| name               | type    | default | desc              |
+| ------------------ | ------- | ------- | ----------------- |
+| mainView           | View    |         | 主白板               |
+| mainViewSceneIndex | number  |         | 当前主白板的 SceneIndex |
+| boxState           | string  |         | 当前窗口状态            |
+| darkMode           | boolean |         | 黑夜模式              |
+| prefersColorScheme | string  |         | 颜色主题              |
 
 
 <h2 id="events">事件回调</h2>
@@ -124,6 +125,7 @@ manager.callbacks.on(events, listener)
 | name                     | type           | default | desc                       |
 | ------------------------ | -------------- | ------- | -------------------------- |
 | mainViewModeChange       | ViewVisionMode |         |                            |
+| mainViewSceneIndexChange | index: number  |         |                            |
 | boxStateChange           | string         |         | normal,minimized,maximized |
 | darkModeChange           | boolean        |         |                            |
 | prefersColorSchemeChange | string         |         | auto,light,dark            |

package/docs/concept.md

@@ -0,0 +1,4 @@
+# 概念
+
+## 同步区域
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.0-canary.11",
+  "version": "0.4.0-canary.15",
   "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

@@ -50,13 +50,15 @@ export type MagixEventHandler<
   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
-) => void;
+) => MagixEventListenerDisposer;
 
 export type MagixEventRemoveListener<TPayloads = any> = <
   TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>

package/src/App/Storage/index.ts

@@ -4,7 +4,7 @@ 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';
@@ -86,6 +86,11 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
   }
 
   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(

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

@@ -8,7 +8,7 @@ import {
     toJS
 } 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";
@@ -110,6 +110,8 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     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 => {
@@ -156,7 +158,10 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     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)
+    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

@@ -4,11 +4,11 @@ import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
 import { callbacks, emitter, WindowManager, reconnectRefresher } from "./index";
-import { genAppId, makeValidScenePath, setScenePath, setViewFocusScenePath } from "./Utils/Common";
+import { entireScenes, genAppId, makeValidScenePath, parseSceneDir, setScenePath, setViewFocusScenePath } from "./Utils/Common";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
-import { get, sortBy } from "lodash";
+import { get, isInteger, sortBy } from "lodash";
 import { store } from "./AttributesDelegate";
 import { ViewManager } from "./View/ViewManager";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
@@ -212,10 +212,11 @@ export class AppManager {
         emitter.emit("mainViewMounted");
     }
 
-    public setMainViewFocusPath() {
-        const scenePath = this.store.getMainViewScenePath();
-        if (scenePath) {
-            setViewFocusScenePath(this.mainView, scenePath);
+    public setMainViewFocusPath(scenePath?: string) {
+        const focusScenePath = scenePath || this.store.getMainViewScenePath();
+        if (focusScenePath) {
+            const view = setViewFocusScenePath(this.mainView, focusScenePath);
+            return view?.focusScenePath === focusScenePath;
         }
     }
 
@@ -318,6 +319,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;
         }
@@ -374,27 +378,44 @@ export class AppManager {
     }
 
     private async _setMainViewScenePath(scenePath: string) {
-        this.safeSetAttributes({ _mainScenePath: scenePath });
-        this.setMainViewFocusPath();
-        this.store.setMainViewFocusPath(this.mainView);
-        this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
+        const success = this.setMainViewFocusPath(scenePath);
+        if (success) {
+            this.safeSetAttributes({ _mainScenePath: scenePath });
+            this.store.setMainViewFocusPath(this.mainView);
+            this.updateSceneIndex();
+            this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
+        }
+    }
+
+    private updateSceneIndex = () => {
+        const scenePath = this.store.getMainViewScenePath() as string;
+        const sceneDir = parseSceneDir(scenePath);
+        const scenes = entireScenes(this.displayer)[sceneDir];
+        if (scenes.length) {
+            // "/ppt3/1" -> "1"
+            const pageName = scenePath.replace(sceneDir, "").replace("/", "");
+            const index = scenes.findIndex(scene => scene.name === pageName);
+            if (isInteger(index) && index >= 0) {
+                this.safeSetAttributes({ _mainSceneIndex: index });
+            }
+        }
     }
 
     public async setMainViewSceneIndex(index: number) {
         if (this.room) {
-            this.safeSetAttributes({ _mainSceneIndex: index });
+            if (this.store.getMainViewSceneIndex() === index) return;
             const mainViewScenePath = this.store.getMainViewScenePath() as string;
             if (mainViewScenePath) {
-                const sceneList = mainViewScenePath.split("/");
-                sceneList.pop();
-                let sceneDir = sceneList.join("/");
-                if (sceneDir === "") {
-                    sceneDir = "/";
-                }
+                const sceneDir = parseSceneDir(mainViewScenePath);
                 const scenePath = makeValidScenePath(this.displayer, sceneDir, index);
                 if (scenePath) {
-                    this.store.setMainViewScenePath(scenePath);
-                    this.setMainViewFocusPath();
+                    const success = this.setMainViewFocusPath(scenePath);
+                    if (success) {
+                        this.store.setMainViewScenePath(scenePath);
+                        this.safeSetAttributes({ _mainSceneIndex: index });
+                    }
+                } else {
+                    throw new Error(`[WindowManager]: ${sceneDir}: ${index} not valid index`);
                 }
             }
         }

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/Common.ts

@@ -17,9 +17,17 @@ export const genAppId = async (kind: string) => {
 export const setViewFocusScenePath = (view: View, focusScenePath: string) => {
     if (view.focusScenePath !== focusScenePath) {
         view.focusScenePath = focusScenePath;
+        return view;
     }
 };
 
+export const setViewSceneIndex = (view: View, index: number) => {
+    if (view.focusSceneIndex !== index) {
+        view.focusSceneIndex = index;
+        return view;
+    }
+}
+
 export const setScenePath = (room: Room | undefined, scenePath: string) => {
     if (room && room.isWritable) {
         if (room.state.sceneState.scenePath !== scenePath) {
@@ -70,7 +78,9 @@ export const notifyMainViewModeChange = debounce(
 export const makeValidScenePath = (displayer: Displayer, scenePath: string, index = 0) => {
     const scenes = entireScenes(displayer)[scenePath];
     if (!scenes) return;
-    const firstSceneName = scenes[index].name;
+    const scene = scenes[index];
+    if (!scene) return;
+    const firstSceneName = scene.name;
     if (scenePath === "/") {
         return `/${firstSceneName}`;
     } else {
@@ -86,6 +96,17 @@ export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");
 };
 
+export const parseSceneDir = (scenePath: string) => {
+    const sceneList = scenePath.split("/");
+    sceneList.pop();
+    let sceneDir = sceneList.join("/");
+    // "/page1" 的 dir 为 "/"
+    if (sceneDir === "") {
+        sceneDir = "/";
+    }
+    return sceneDir;
+} 
+
 export const ensureValidScenePath = (scenePath: string) => {
     if (scenePath.endsWith("/")) {
         return scenePath.slice(0, -1);

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

@@ -21,6 +21,7 @@ import {
     ensureValidScenePath,
     getVersionNumber,
     isValidScenePath,
+    parseSceneDir,
     wait,
 } from "./Utils/Common";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
@@ -220,7 +221,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;
             }
@@ -571,6 +572,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return this.attributes.focus;
     }
 
+    public get mainViewSceneIndex(): number {
+        return this.appManager?.store.getMainViewSceneIndex();
+    }
+
+    public get mainViewSceneDir(): string {
+        const scenePath = this.appManager?.store.getMainViewScenePath();
+        if (scenePath) {
+            return parseSceneDir(scenePath);
+        } else {
+            throw new Error("[WindowManager]: mainViewSceneDir not found");
+        }
+    }  
+
     /**
      * 查询所有的 App
      */