@netless/window-manager 0.4.25 → 0.4.27

package/dist/index.d.ts

@@ -144,6 +144,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     nextPage(): Promise<boolean>;
     prevPage(): Promise<boolean>;
     addPage(params?: AddPageParams): Promise<void>;
+    removePage(index: number): Promise<boolean>;
     /**
      * 返回 mainView 的 ScenePath
      */

package/dist/index.es.js

@@ -36,6 +36,7 @@ var Events = /* @__PURE__ */ ((Events2) => {
   Events2["WindowCreated"] = "WindowCreated";
   Events2["SetMainViewScenePath"] = "SetMainViewScenePath";
   Events2["SetMainViewSceneIndex"] = "SetMainViewSceneIndex";
+  Events2["SetAppFocusIndex"] = "SetAppFocusIndex";
   Events2["SwitchViewsToFreedom"] = "SwitchViewsToFreedom";
   Events2["MoveCamera"] = "MoveCamera";
   Events2["MoveCameraToContain"] = "MoveCameraToContain";
@@ -369,11 +370,11 @@ const getScenePath = (room, dir, index) => {
     }
   }
 };
-const removeScenes = (room, scenePath) => {
+const removeScenes = (room, scenePath, index) => {
   if (room) {
     const type = room.scenePathType(scenePath);
     if (type !== ScenePathType.None) {
-      room.removeScenes(scenePath);
+      room.removeScenes(scenePath, index);
     }
   }
 };
@@ -427,6 +428,15 @@ const getVersionNumber = (version) => {
   return parseInt(versionString);
 };
 const wait = (time2) => new Promise((resolve) => setTimeout(resolve, time2));
+const isRootDirPage = (scenePath) => {
+  const delimiterCount = scenePath.split("").reduce((prev, cur) => {
+    if (cur === ROOT_DIR) {
+      prev += 1;
+    }
+    return prev;
+  }, 0);
+  return delimiterCount === 1;
+};
 class AppListeners {
   constructor(manager) {
     this.manager = manager;
@@ -475,6 +485,10 @@ class AppListeners {
             this.initMainViewCameraHandler();
             break;
           }
+          case Events.SetAppFocusIndex: {
+            this.setAppFocusViewIndexHandler(data.payload);
+            break;
+          }
         }
       }
     };
@@ -516,6 +530,16 @@ class AppListeners {
     this.initMainViewCameraHandler = () => {
       this.manager.mainViewProxy.addCameraReaction();
     };
+    this.setAppFocusViewIndexHandler = (payload) => {
+      if (payload.type === "main") {
+        this.manager.setSceneIndexWithoutSync(payload.index);
+      } else if (payload.type === "app" && payload.appID) {
+        const app = this.manager.appProxies.get(payload.appID);
+        if (app) {
+          app.setSceneIndexWithoutSync(payload.index);
+        }
+      }
+    };
   }
   get boxManager() {
     return this.manager.boxManager;
@@ -533,6 +557,11 @@ class AppCreateError extends Error {
     this.message = "[WindowManager]: app duplicate exists and cannot be created again";
   }
 }
+class AppNotRegisterError extends Error {
+  constructor(kind2) {
+    super(`[WindowManager]: app ${kind2} need register or provide src`);
+  }
+}
 class AppManagerNotInitError extends Error {
   constructor() {
     super(...arguments);
@@ -568,6 +597,12 @@ class BoxManagerNotFoundError extends Error {
     this.message = "[WindowManager]: boxManager not found";
   }
 }
+class BindContainerRoomPhaseInvalidError extends Error {
+  constructor() {
+    super(...arguments);
+    this.message = "[WindowManager]: room phase only Connected can be bindContainer";
+  }
+}
 const onObjectByEvent = (event) => {
   return (object, func) => {
     if (object === void 0)
@@ -652,15 +687,21 @@ class Storage {
     this.id = id2 || null;
     this._state = {};
     const rawState = this._getRawState(this._state);
-    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], {});
+    if (this._context.getIsWritable()) {
+      if (this.id === null) {
+        if (context.isAddApp && defaultState) {
+          this.setState(defaultState);
+        }
+      } else {
+        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);
+          }
         }
-        this._context.updateAttributes([STORAGE_NS, this.id], this._state);
-      }
-      if (defaultState) {
-        this.setState(defaultState);
       }
     }
     plainObjectKeys(rawState).forEach((key) => {
@@ -885,6 +926,16 @@ class AppContext {
     this.getView = () => {
       return this.appProxy.view;
     };
+    this.mountView = (dom) => {
+      const view = this.getView();
+      if (view) {
+        view.divElement = dom;
+        setTimeout(() => {
+          var _a;
+          (_a = this.getRoom()) == null ? void 0 : _a.refreshViewSize();
+        }, 1e3);
+      }
+    };
     this.getInitScenePath = () => {
       return this.manager.getAppInitPath(this.appId);
     };
@@ -917,16 +968,6 @@ class AppContext {
       this.appProxy.setFullPath(scenePath);
       (_a = this.getRoom()) == null ? void 0 : _a.setScenePath(scenePath);
     };
-    this.mountView = (dom) => {
-      const view = this.getView();
-      if (view) {
-        view.divElement = dom;
-        setTimeout(() => {
-          var _a;
-          (_a = this.getRoom()) == null ? void 0 : _a.refreshViewSize();
-        }, 1e3);
-      }
-    };
     this.getAppOptions = () => {
       return typeof this.appOptions === "function" ? this.appOptions() : this.appOptions;
     };
@@ -979,6 +1020,14 @@ class AppContext {
         putScenes(this.manager.room, scenePath, [scene || {}]);
       }
     };
+    this.removePage = async (index) => {
+      if (index < 0 || index >= this.pageState.length) {
+        console.warn(`[WindowManager]: page index ${index} out of range`);
+        return false;
+      }
+      this.appProxy.removeSceneByIndex(index);
+      return true;
+    };
     this.emitter = appProxy.appEmitter;
     this.isAddApp = appProxy.isAddApp;
   }
@@ -1203,6 +1252,20 @@ const log = (...args) => {
     console.log(`[WindowManager]:`, ...args);
   }
 };
+const calculateNextIndex = (index, pageState) => {
+  let nextIndex = 0;
+  const maxIndex = pageState.length - 1;
+  if (index === pageState.index) {
+    if (index === maxIndex) {
+      nextIndex = index - 1;
+    } else {
+      nextIndex = pageState.index + 1;
+    }
+  } else {
+    nextIndex = pageState.index;
+  }
+  return nextIndex;
+};
 class AppProxy {
   constructor(params, manager, appId, isAddApp) {
     var _a;
@@ -1264,7 +1327,10 @@ class AppProxy {
           var _a3;
           const fullPath = (_a3 = this.appAttributes) == null ? void 0 : _a3.fullPath;
           this.setFocusScenePathHandler(fullPath);
-          this.notifyPageStateChange();
+          if (this._prevFullPath !== fullPath) {
+            this.notifyPageStateChange();
+            this._prevFullPath = fullPath;
+          }
         });
       });
     };
@@ -1274,9 +1340,9 @@ class AppProxy {
         setViewFocusScenePath(this.view, fullPath);
       }
     }, 50);
-    this.notifyPageStateChange = () => {
+    this.notifyPageStateChange = debounce(() => {
       this.appEmitter.emit("pageStateChange", this.pageState);
-    };
+    }, 50);
     this.kind = params.kind;
     this.id = appId;
     this.stateKey = `${this.id}_state`;
@@ -1444,6 +1510,23 @@ class AppProxy {
     await appProxy.baseInsertApp(true);
     (_a = this.boxManager) == null ? void 0 : _a.updateBoxState(currentAppState);
   }
+  async onRemoveScene(scenePath) {
+    if (this.scenePath && scenePath.startsWith(this.scenePath + "/")) {
+      let nextIndex = this.pageState.index;
+      let fullPath = this._pageState.getFullPath(nextIndex);
+      if (!fullPath) {
+        nextIndex = 0;
+        fullPath = this._pageState.getFullPath(nextIndex);
+      }
+      if (fullPath) {
+        this.setFullPath(fullPath);
+      }
+      this.setViewFocusScenePath();
+      if (this.view) {
+        this.view.focusSceneIndex = nextIndex;
+      }
+    }
+  }
   emitAppSceneStateChange(sceneState) {
     this.appEmitter.emit("sceneStateChange", sceneState);
   }
@@ -1517,6 +1600,32 @@ class AppProxy {
   get pageState() {
     return this._pageState.toObject();
   }
+  async removeSceneByIndex(index) {
+    const scenePath = this._pageState.getFullPath(index);
+    if (scenePath) {
+      if (this.pageState.length <= 1) {
+        return false;
+      }
+      const nextIndex = calculateNextIndex(index, this.pageState);
+      this.setSceneIndexWithoutSync(nextIndex);
+      this.manager.dispatchInternalEvent(Events.SetAppFocusIndex, {
+        type: "app",
+        appID: this.id,
+        index: nextIndex
+      });
+      setTimeout(() => {
+        removeScenes(this.manager.room, scenePath, index);
+      }, 100);
+      return true;
+    } else {
+      return false;
+    }
+  }
+  setSceneIndexWithoutSync(index) {
+    if (this.view) {
+      this.view.focusSceneIndex = index;
+    }
+  }
   setSceneIndex(index) {
     if (this.view) {
       this.view.focusSceneIndex = index;
@@ -1555,6 +1664,7 @@ class AppProxy {
     (_b = this.manager.refresher) == null ? void 0 : _b.remove(this.id);
     (_c = this.manager.refresher) == null ? void 0 : _c.remove(this.stateKey);
     (_d = this.manager.refresher) == null ? void 0 : _d.remove(`${this.id}-fullPath`);
+    this._prevFullPath = void 0;
   }
   close() {
     return this.destroy(true, true, false);
@@ -1683,6 +1793,11 @@ class MainViewProxy {
     this.sideEffectManager.add(() => {
       return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
     });
+    this.sideEffectManager.add(() => {
+      return emitter.on("startReconnect", () => {
+        this.mainView.release();
+      });
+    });
   }
   ensureCameraAndSize() {
     if (!this.mainViewCamera || !this.mainViewSize) {
@@ -1696,6 +1811,9 @@ class MainViewProxy {
   get mainViewSize() {
     return this.store.getMainViewSize();
   }
+  get didRelease() {
+    return get(this.view, ["didRelease"]);
+  }
   moveCameraSizeByAttributes() {
     this.moveCameraToContian(this.mainViewSize);
     this.moveCamera(this.mainViewCamera);
@@ -1728,16 +1846,25 @@ class MainViewProxy {
     return mainView;
   }
   onReconnect() {
-    const mainViewScenePath = this.store.getMainViewScenePath();
-    if (mainViewScenePath) {
-      setViewFocusScenePath(this.view, mainViewScenePath);
+    if (this.didRelease) {
+      this.rebind();
+    } else {
+      const mainViewScenePath = this.store.getMainViewScenePath();
+      this.setFocusScenePath(mainViewScenePath);
+    }
+  }
+  setFocusScenePath(path) {
+    if (path) {
+      return setViewFocusScenePath(this.view, path);
     }
   }
   rebind() {
     const divElement = this.mainView.divElement;
     const disableCameraTransform = this.mainView.disableCameraTransform;
     this.stop();
-    this.mainView.release();
+    if (!this.didRelease) {
+      this.mainView.release();
+    }
     this.removeMainViewListener();
     this.mainView = this.createMainView();
     this.mainView.disableCameraTransform = disableCameraTransform;
@@ -1889,19 +2016,29 @@ class AppManager {
     this.sideEffectManager = new SideEffectManager();
     this.sceneState = null;
     this.rootDirRemoving = false;
-    this.onRemoveScenes = async (scenePath) => {
-      var _a;
+    this.onRemoveScenes = async (params) => {
+      var _a, _b;
+      const { scenePath } = params;
       if (scenePath === ROOT_DIR) {
         await this.onRootDirRemoved();
         this.dispatchInternalEvent(Events.RootDirRemoved);
         return;
       }
-      const mainViewScenePath = this.store.getMainViewScenePath();
-      if (this.room && mainViewScenePath) {
-        if (mainViewScenePath === scenePath) {
-          const nextPath = (_a = this.callbacksNode) == null ? void 0 : _a.scenes[this.store.getMainViewSceneIndex()];
-          this.setMainViewScenePath(`/${nextPath}` || INIT_DIR);
+      if (isRootDirPage(scenePath)) {
+        let nextIndex = this.mainView.focusSceneIndex || 0;
+        let sceneName = (_a = this.callbacksNode) == null ? void 0 : _a.scenes[nextIndex];
+        if (!sceneName) {
+          nextIndex = 0;
+          sceneName = (_b = this.callbacksNode) == null ? void 0 : _b.scenes[nextIndex];
         }
+        if (sceneName) {
+          this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
+        }
+        await this.setMainViewSceneIndex(nextIndex);
+      } else {
+        this.appProxies.forEach((app) => {
+          app.onRemoveScene(scenePath);
+        });
       }
     };
     this.onReadonlyChanged = () => {
@@ -1936,6 +2073,26 @@ class AppManager {
         }
       }
     };
+    this.removeSceneByIndex = async (index) => {
+      const nextIndex = calculateNextIndex(index, this.windowManger.pageState);
+      this.setSceneIndexWithoutSync(nextIndex);
+      this.dispatchInternalEvent(Events.SetAppFocusIndex, { type: "main", index: nextIndex });
+      setTimeout(() => {
+        var _a;
+        const scene = (_a = this.callbacksNode) == null ? void 0 : _a.scenes[index];
+        if (scene) {
+          removeScenes(this.room, `${ROOT_DIR}${scene}`, index);
+        }
+      }, 100);
+      return true;
+    };
+    this.setSceneIndexWithoutSync = (index) => {
+      var _a;
+      const sceneName = (_a = this.callbacksNode) == null ? void 0 : _a.scenes[index];
+      if (sceneName) {
+        this.mainViewProxy.setFocusScenePath(`${ROOT_DIR}${sceneName}`);
+      }
+    };
     this.onSceneChange = (node) => {
       this.mainViewScenesLength = node.scenes.length;
       this.updateSceneState(node);
@@ -1947,7 +2104,10 @@ class AppManager {
     };
     this.updateSceneState = (node) => {
       const currentIndex = this.store.getMainViewSceneIndex() || 0;
-      const sceneName = node.scenes[currentIndex];
+      let sceneName = node.scenes[currentIndex];
+      if (!sceneName) {
+        sceneName = node.scenes[this.mainView.focusSceneIndex || 0];
+      }
       this.sceneState = {
         scenePath: `${ROOT_DIR}${sceneName}`,
         contextPath: node.path,
@@ -2331,10 +2491,11 @@ class AppManager {
     emitter.emit("mainViewMounted");
   }
   setMainViewFocusPath(scenePath) {
+    var _a;
     const focusScenePath = scenePath || this.store.getMainViewScenePath();
     if (focusScenePath) {
-      const view = setViewFocusScenePath(this.mainView, focusScenePath);
-      return (view == null ? void 0 : view.focusScenePath) === focusScenePath;
+      setViewFocusScenePath(this.mainView, focusScenePath);
+      return ((_a = this.mainView) == null ? void 0 : _a.focusScenePath) === focusScenePath;
     }
   }
   resetScenePath(scenePath) {
@@ -2434,23 +2595,21 @@ class AppManager {
     }
   }
   async setMainViewSceneIndex(index) {
+    var _a;
     if (this.room) {
       if (this.store.getMainViewSceneIndex() === index)
         return;
-      const mainViewScenePath = this.store.getMainViewScenePath();
-      if (mainViewScenePath) {
-        const sceneDir = parseSceneDir(mainViewScenePath);
-        const scenePath = makeValidScenePath(this.displayer, sceneDir, index);
-        if (scenePath) {
-          const success = this.setMainViewFocusPath(scenePath);
-          if (success) {
-            this.store.setMainViewScenePath(scenePath);
-            this.safeSetAttributes({ _mainSceneIndex: index });
-            this.dispatchSetMainViewScenePath(scenePath);
-          }
-        } else {
-          throw new Error(`[WindowManager]: ${sceneDir}: ${index} not valid index`);
+      const sceneName = (_a = this.callbacksNode) == null ? void 0 : _a.scenes[index];
+      const scenePath = `${ROOT_DIR}${sceneName}`;
+      if (sceneName) {
+        const success = this.setMainViewFocusPath(scenePath);
+        if (success) {
+          this.store.setMainViewScenePath(scenePath);
+          this.safeSetAttributes({ _mainSceneIndex: index });
+          this.dispatchSetMainViewScenePath(scenePath);
         }
+      } else {
+        throw new Error(`[WindowManager]: ${index} not valid index`);
       }
     }
   }
@@ -5561,8 +5720,9 @@ class PageStateImpl {
     return ((_a = this.manager) == null ? void 0 : _a.mainViewScenesLength) || 0;
   }
   toObject() {
+    const index = this.index >= this.length ? this.length - 1 : this.index;
     return {
-      index: this.index,
+      index,
       length: this.length
     };
   }
@@ -5573,6 +5733,9 @@ class ReconnectRefresher {
     this.reactors = /* @__PURE__ */ new Map();
     this.disposers = /* @__PURE__ */ new Map();
     this.onPhaseChanged = (phase) => {
+      if (phase === RoomPhase.Reconnecting) {
+        this.ctx.emitter.emit("startReconnect");
+      }
       if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
         this.onReconnected();
       }
@@ -5589,7 +5752,7 @@ class ReconnectRefresher {
           this.disposers.set(id2, func());
         }
       });
-      this.ctx.emitter.emit("onReconnected", void 0);
+      this.ctx.emitter.emit("onReconnected");
     };
   }
   setRoom(room) {
@@ -5695,13 +5858,13 @@ const replaceRoomFunction = (room, manager) => {
 };
 const delegateRemoveScenes = (room, manager) => {
   const originRemoveScenes = room.removeScenes;
-  room.removeScenes = (scenePath) => {
+  room.removeScenes = (scenePath, index) => {
     var _a;
     if (scenePath === ROOT_DIR) {
       (_a = manager.appManager) == null ? void 0 : _a.updateRootDirRemoving(true);
     }
     const result = originRemoveScenes.call(room, scenePath);
-    emitter.emit("removeScenes", scenePath);
+    emitter.emit("removeScenes", { scenePath, index });
     return result;
   };
 };
@@ -14884,7 +15047,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "0.4.25";
+    this.version = "0.4.27";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.26", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.12.4", "white-web-sdk": "2.16.10" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
@@ -15001,6 +15164,9 @@ const _WindowManager = class extends InvisiblePlugin {
   }
   bindContainer(container) {
     var _a, _b, _c, _d, _e2, _f;
+    if (this.room.phase !== RoomPhase.Connected) {
+      throw new BindContainerRoomPhaseInvalidError();
+    }
     if (_WindowManager.isCreated && _WindowManager.container) {
       if (_WindowManager.container.firstChild) {
         container.appendChild(_WindowManager.container.firstChild);
@@ -15181,6 +15347,17 @@ const _WindowManager = class extends InvisiblePlugin {
       }
     }
   }
+  async removePage(index) {
+    if (this.appManager) {
+      if (index < 0 || index >= this.pageState.length) {
+        console.warn(`[WindowManager]: index ${index} out of range`);
+        return false;
+      }
+      return this.appManager.removeSceneByIndex(index);
+    } else {
+      return false;
+    }
+  }
   getMainViewScenePath() {
     var _a;
     return (_a = this.appManager) == null ? void 0 : _a.store.getMainViewScenePath();
@@ -15532,5 +15709,5 @@ WindowManager.debug = false;
 WindowManager.containerSizeRatio = DEFAULT_CONTAINER_RATIO;
 WindowManager.isCreated = false;
 setupBuiltin();
-export { BuiltinApps, WindowManager, reconnectRefresher };
+export { AppCreateError, AppManagerNotInitError, AppNotRegisterError, BindContainerRoomPhaseInvalidError, BoxManagerNotFoundError, BoxNotCreatedError, BuiltinApps, InvalidScenePath, ParamsInvalidError, WhiteWebSDKInvalidError, WindowManager, calculateNextIndex, reconnectRefresher };
 //# sourceMappingURL=index.es.js.map