@netless/window-manager 0.4.0-canary.14 → 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.14",
+  "version": "0.4.0-canary.15",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",

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;
         }
     }
 
@@ -377,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/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/index.ts

@@ -21,6 +21,7 @@ import {
     ensureValidScenePath,
     getVersionNumber,
     isValidScenePath,
+    parseSceneDir,
     wait,
 } from "./Utils/Common";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
@@ -575,6 +576,15 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         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
      */