@netless/window-manager 0.4.30-canary.0 → 0.4.31

package/dist/index.es.js

@@ -47,6 +47,7 @@ var Events = /* @__PURE__ */ ((Events2) => {
   return Events2;
 })(Events || {});
 const MagixEventName = "__WindowManger";
+const EnsureReconnectEvent = "__WindowMangerEnsureReconnected__";
 var AppAttributes = /* @__PURE__ */ ((AppAttributes2) => {
   AppAttributes2["Size"] = "size";
   AppAttributes2["Position"] = "position";
@@ -1270,6 +1271,7 @@ const calculateNextIndex = (index, pageState) => {
   }
   return nextIndex;
 };
+const boxEmitter = new Emittery();
 class AppProxy {
   constructor(params, manager, appId, isAddApp) {
     var _a;
@@ -1506,6 +1508,11 @@ class AppProxy {
   }
   async onReconnected() {
     var _a;
+    const isExist = Boolean(this.manager.attributes.apps[this.id]);
+    if (!isExist) {
+      await this.destroy(true, false, true);
+      return;
+    }
     this.appEmitter.emit("reconnected", void 0);
     const currentAppState = this.getAppInitState(this.id);
     await this.destroy(true, false, true);
@@ -1575,7 +1582,7 @@ class AppProxy {
         }
         case "focus": {
           (_d = this.boxManager) == null ? void 0 : _d.focusBox({ appId: this.id });
-          emitter.emit("focus", { appId: this.id });
+          boxEmitter.emit("focus", { appId: this.id });
           break;
         }
       }
@@ -2136,6 +2143,34 @@ class AppManager {
       };
       callbacks$1.emit("sceneStateChange", this.sceneState);
     };
+    this.onBoxMove = (payload) => {
+      this.dispatchInternalEvent(Events.AppMove, payload);
+      this.store.updateAppState(payload.appId, AppAttributes.Position, {
+        x: payload.x,
+        y: payload.y
+      });
+    };
+    this.onBoxResize = (payload) => {
+      if (payload.width && payload.height) {
+        this.dispatchInternalEvent(Events.AppResize, payload);
+        this.store.updateAppState(payload.appId, AppAttributes.Size, {
+          width: payload.width,
+          height: payload.height
+        });
+      }
+    };
+    this.onBoxFocus = (payload) => {
+      this.windowManger.safeSetAttributes({ focus: payload.appId });
+    };
+    this.onBoxClose = (payload) => {
+      const appProxy = this.appProxies.get(payload.appId);
+      if (appProxy) {
+        appProxy.destroy(false, true, true, payload.error);
+      }
+    };
+    this.onBoxStateChange = (payload) => {
+      this.dispatchInternalEvent(Events.AppBoxStateChange, payload);
+    };
     this.addAppsChangeListener = () => {
       var _a;
       (_a = this.refresher) == null ? void 0 : _a.add("apps", () => {
@@ -2268,43 +2303,6 @@ class AppManager {
         }
       }
     };
-    this.boxEventListener = (eventName, payload) => {
-      switch (eventName) {
-        case "move": {
-          this.dispatchInternalEvent(Events.AppMove, payload);
-          this.store.updateAppState(payload.appId, AppAttributes.Position, {
-            x: payload.x,
-            y: payload.y
-          });
-          break;
-        }
-        case "focus": {
-          this.windowManger.safeSetAttributes({ focus: payload.appId });
-          break;
-        }
-        case "resize": {
-          if (payload.width && payload.height) {
-            this.dispatchInternalEvent(Events.AppResize, payload);
-            this.store.updateAppState(payload.appId, AppAttributes.Size, {
-              width: payload.width,
-              height: payload.height
-            });
-          }
-          break;
-        }
-        case "close": {
-          const appProxy = this.appProxies.get(payload.appId);
-          if (appProxy) {
-            appProxy.destroy(false, true, payload.error);
-          }
-          break;
-        }
-        case "boxStateChange": {
-          this.dispatchInternalEvent(Events.AppBoxStateChange, payload);
-          break;
-        }
-      }
-    };
     this.updateRootDirRemoving = (removing) => {
       this.rootDirRemoving = removing;
     };
@@ -2394,7 +2392,11 @@ class AppManager {
     var _a, _b, _c, _d, _e2, _f;
     await this.attributesUpdateCallback(this.attributes.apps);
     emitter.emit("updateManagerRect");
-    emitter.onAny(this.boxEventListener);
+    boxEmitter.on("move", this.onBoxMove);
+    boxEmitter.on("resize", this.onBoxResize);
+    boxEmitter.on("focus", this.onBoxFocus);
+    boxEmitter.on("close", this.onBoxClose);
+    boxEmitter.on("boxStateChange", this.onBoxStateChange);
     this.addAppsChangeListener();
     this.addAppCloseListener();
     (_a = this.refresher) == null ? void 0 : _a.add("maximized", () => {
@@ -2543,7 +2545,7 @@ class AppManager {
     var _a, _b;
     if (appProxy && appProxy.box) {
       const box = appProxy.box;
-      emitter.emit("move", {
+      boxEmitter.emit("move", {
         appId: appProxy.id,
         x: box == null ? void 0 : box.intrinsicX,
         y: box == null ? void 0 : box.intrinsicY
@@ -2676,7 +2678,7 @@ class AppManager {
     this.displayer.callbacks.off(this.eventName, this.displayerStateListener);
     this.displayer.callbacks.off("onEnableWriteNowChanged", this.displayerWritableListener);
     this.appListeners.removeListeners();
-    emitter.offAny(this.boxEventListener);
+    boxEmitter.clearListeners();
     emitter.clearListeners();
     if (this.appProxies.size) {
       this.appProxies.forEach((appProxy) => {
@@ -4529,7 +4531,7 @@ class Bt {
     return typeof e2 == "string" ? this.boxes.find((t2) => t2.id === e2) : e2;
   }
 }
-const createBoxManager = (manager, callbacks2, emitter2, options) => {
+const createBoxManager = (manager, callbacks2, emitter2, boxEmitter2, options) => {
   return new BoxManager({
     safeSetAttributes: (attributes) => manager.safeSetAttributes(attributes),
     getMainView: () => manager.mainView,
@@ -4551,14 +4553,15 @@ const createBoxManager = (manager, callbacks2, emitter2, options) => {
       return (_a = manager.appManager) == null ? void 0 : _a.store.setAppFocus(appId, true);
     },
     callbacks: callbacks2,
-    emitter: emitter2
+    emitter: emitter2,
+    boxEmitter: boxEmitter2
   }, options);
 };
 class BoxManager {
   constructor(context, createTeleBoxManagerConfig) {
     this.context = context;
     this.createTeleBoxManagerConfig = createTeleBoxManagerConfig;
-    const { emitter: emitter2, callbacks: callbacks2 } = context;
+    const { emitter: emitter2, callbacks: callbacks2, boxEmitter: boxEmitter2 } = context;
     this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
     this.teleBoxManager._state$.reaction((state) => {
       callbacks2.emit("boxStateChange", state);
@@ -4588,14 +4591,14 @@ class BoxManager {
     });
     this.teleBoxManager.events.on("removed", (boxes) => {
       boxes.forEach((box) => {
-        emitter2.emit("close", { appId: box.id });
+        boxEmitter2.emit("close", { appId: box.id });
       });
     });
     this.teleBoxManager.events.on("intrinsic_move", debounce((box) => {
-      emitter2.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+      boxEmitter2.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
     }, 50));
     this.teleBoxManager.events.on("intrinsic_resize", debounce((box) => {
-      emitter2.emit("resize", {
+      boxEmitter2.emit("resize", {
         appId: box.id,
         width: box.intrinsicWidth,
         height: box.intrinsicHeight
@@ -4604,7 +4607,7 @@ class BoxManager {
     this.teleBoxManager.events.on("focused", (box) => {
       if (box) {
         if (this.canOperate) {
-          emitter2.emit("focus", { appId: box.id });
+          boxEmitter2.emit("focus", { appId: box.id });
         } else {
           this.teleBoxManager.blurBox(box.id);
         }
@@ -4669,7 +4672,7 @@ class BoxManager {
     const box = this.teleBoxManager.queryOne({ id: appId });
     if (box) {
       if (box.state === Ke$1.Maximized) {
-        this.context.emitter.emit("resize", {
+        this.context.boxEmitter.emit("resize", {
           appId,
           x: box.x,
           y: box.y,
@@ -5748,11 +5751,12 @@ class ReconnectRefresher {
     this.reactors = /* @__PURE__ */ new Map();
     this.disposers = /* @__PURE__ */ new Map();
     this.onPhaseChanged = (phase) => {
+      var _a;
       if (phase === RoomPhase.Reconnecting) {
         this.ctx.emitter.emit("startReconnect");
       }
       if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
-        this.onReconnected();
+        (_a = this.room) == null ? void 0 : _a.dispatchMagixEvent(EnsureReconnectEvent, {});
       }
       this.phase = phase;
     };
@@ -5773,8 +5777,15 @@ class ReconnectRefresher {
   setRoom(room) {
     this.room = room;
     this.phase = room == null ? void 0 : room.phase;
-    room == null ? void 0 : room.callbacks.off("onPhaseChanged", this.onPhaseChanged);
-    room == null ? void 0 : room.callbacks.on("onPhaseChanged", this.onPhaseChanged);
+    if (room) {
+      room.callbacks.off("onPhaseChanged", this.onPhaseChanged);
+      room.callbacks.on("onPhaseChanged", this.onPhaseChanged);
+      room.addMagixEventListener(EnsureReconnectEvent, (payload) => {
+        if (payload.authorId === room.observerId) {
+          this.onReconnected();
+        }
+      }, { fireSelfEventAfterCommit: true });
+    }
   }
   setContext(ctx) {
     this.ctx = ctx;
@@ -5816,8 +5827,9 @@ class ReconnectRefresher {
     return this.reactors.has(id2);
   }
   destroy() {
-    var _a;
+    var _a, _b;
     (_a = this.room) == null ? void 0 : _a.callbacks.off("onPhaseChanged", this.onPhaseChanged);
+    (_b = this.room) == null ? void 0 : _b.removeMagixEventListener(EnsureReconnectEvent, this.onReconnected);
     this.releaseDisposers();
   }
 }
@@ -15062,14 +15074,14 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "0.4.30-canary.0";
-    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.version = "0.4.31";
+    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", "@vitest/ui": "^0.14.1", "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.14.1", "white-web-sdk": "2.16.10" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
     this.isReplay = isPlayer(this.displayer);
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "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" } };
+    window.NETLESS_DEPS = { "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", "@vitest/ui": "^0.14.1", "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.14.1", "white-web-sdk": "2.16.10" } };
   }
   static async mount(params) {
     const room = params.room;
@@ -15179,7 +15191,7 @@ const _WindowManager = class extends InvisiblePlugin {
   }
   bindContainer(container) {
     var _a, _b, _c, _d, _e2, _f;
-    if (this.room.phase !== RoomPhase.Connected) {
+    if (isRoom(this.displayer) && this.room.phase !== RoomPhase.Connected) {
       throw new BindContainerRoomPhaseInvalidError();
     }
     if (_WindowManager.isCreated && _WindowManager.container) {
@@ -15193,7 +15205,7 @@ const _WindowManager = class extends InvisiblePlugin {
         if (this.boxManager) {
           this.boxManager.destroy();
         }
-        const boxManager = createBoxManager(this, callbacks$1, emitter, {
+        const boxManager = createBoxManager(this, callbacks$1, emitter, boxEmitter, {
           collectorContainer: params.collectorContainer,
           collectorStyles: params.collectorStyles,
           prefersColorScheme: params.prefersColorScheme