@netless/window-manager 0.4.20 → 0.4.23

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.4.23
+
+1. 修复可写进入立即切换成只读造成初始化 camera 失败的问题
+
+## 0.4.22
+
+1. 修复只读端先加入时视角跟随失败的问题
+
+## 0.4.21
+
+1. 添加 `manager.refresh()` 方法用于从其他房间 `copy` `attributes`
 ## 0.4.20
 
 1. 导出 Page 相关类型

package/dist/AppListener.d.ts

@@ -15,4 +15,6 @@ export declare class AppListeners {
     private moveCameraToContainHandler;
     private cursorMoveHandler;
     private rootDirRemovedHandler;
+    private refreshHandler;
+    private initMainViewCameraHandler;
 }

package/dist/AppManager.d.ts

@@ -50,15 +50,18 @@ export declare class AppManager {
     get uid(): string;
     getMainViewSceneDir(): string;
     private onCreated;
+    addAppsChangeListener: () => void;
+    addAppCloseListener: () => void;
     private onMainViewIndexChange;
     private onFocusChange;
+    attributesUpdateCallback: import("lodash").DebouncedFunc<(apps: any) => Promise<void>>;
     /**
      * 插件更新 attributes 时的回调
      *
      * @param {*} attributes
      * @memberof WindowManager
      */
-    attributesUpdateCallback(apps: any): Promise<void>;
+    _attributesUpdateCallback(apps: any): Promise<void>;
     private onRegisteredChange;
     private onMinimized;
     refresh(): void;

package/dist/AttributesDelegate.d.ts

@@ -31,6 +31,12 @@ export declare type StoreContext = {
     safeUpdateAttributes: (keys: string[], value: any) => void;
     safeSetAttributes: (attributes: any) => void;
 };
+export declare type ICamera = Camera & {
+    id: string;
+};
+export declare type ISize = Size & {
+    id: string;
+};
 export declare class AttributesDelegate {
     private context;
     constructor(context: StoreContext);
@@ -55,12 +61,9 @@ export declare class AttributesDelegate {
     setMainViewSceneIndex(index: number): void;
     getMainViewCamera(): MainViewCamera;
     getMainViewSize(): MainViewSize;
-    setMainViewCamera(camera: (Camera & {
-        id: string;
-    }) | undefined): void;
-    setMainViewSize(size: (Size & {
-        id: string;
-    }) | undefined): void;
+    setMainViewCamera(camera: ICamera): void;
+    setMainViewSize(size: ISize): void;
+    setMainViewCameraAndSize(camera: ICamera, size: ISize): void;
     setAppFocus: (appId: string, focus: boolean) => void;
     updateCursor(uid: string, position: Position): void;
     updateCursorState(uid: string, cursorState: string | undefined): void;

package/dist/InternalEmitter.d.ts

@@ -39,6 +39,7 @@ export declare type EmitterEvent = {
     rootDirRemoved: undefined;
     setReadonly: boolean;
     changePageState: undefined;
+    writableChange: boolean;
 };
 export declare type EmitterType = Emittery<EmitterEvent>;
 export declare const emitter: EmitterType;

package/dist/ReconnectRefresher.d.ts

@@ -14,7 +14,9 @@ export declare class ReconnectRefresher {
     setContext(ctx: ReconnectRefresherContext): void;
     private onPhaseChanged;
     private onReconnected;
+    private _onReconnected;
     private releaseDisposers;
+    refresh(): void;
     add(id: string, func: any): void;
     remove(id: string): void;
     hasReactor(id: string): boolean;

package/dist/View/MainView.d.ts

@@ -9,10 +9,13 @@ export declare class MainViewProxy {
     private store;
     private sideEffectManager;
     constructor(manager: AppManager);
+    private startListenWritableChange;
+    ensureCameraAndSize(): void;
     private get mainViewCamera();
     private get mainViewSize();
     private moveCameraSizeByAttributes;
     start(): void;
+    addCameraReaction: () => void;
     setCameraAndSize(): void;
     private cameraReaction;
     private sizeChangeHandler;

package/dist/constants.d.ts

@@ -13,7 +13,9 @@ export declare enum Events {
     MoveCamera = "MoveCamera",
     MoveCameraToContain = "MoveCameraToContain",
     CursorMove = "CursorMove",
-    RootDirRemoved = "RootDirRemoved"
+    RootDirRemoved = "RootDirRemoved",
+    Refresh = "Refresh",
+    InitMainViewCamera = "InitMainViewCamera"
 }
 export declare const MagixEventName = "__WindowManger";
 export declare enum AppAttributes {

package/dist/index.d.ts

@@ -229,6 +229,9 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     completeImageUpload(uuid: string, url: string): void;
     lockImage(uuid: string, locked: boolean): void;
     lockImages(locked: boolean): void;
+    refresh(): void;
+    /** @inner */
+    _refresh(): void;
     private isDynamicPPT;
     private ensureAttributes;
 }

package/dist/index.es.js

@@ -41,6 +41,8 @@ var Events = /* @__PURE__ */ ((Events2) => {
   Events2["MoveCameraToContain"] = "MoveCameraToContain";
   Events2["CursorMove"] = "CursorMove";
   Events2["RootDirRemoved"] = "RootDirRemoved";
+  Events2["Refresh"] = "Refresh";
+  Events2["InitMainViewCamera"] = "InitMainViewCamera";
   return Events2;
 })(Events || {});
 const MagixEventName = "__WindowManger";
@@ -465,6 +467,14 @@ class AppListeners {
             this.rootDirRemovedHandler();
             break;
           }
+          case Events.Refresh: {
+            this.refreshHandler();
+            break;
+          }
+          case Events.InitMainViewCamera: {
+            this.initMainViewCameraHandler();
+            break;
+          }
         }
       }
     };
@@ -500,6 +510,12 @@ class AppListeners {
       this.manager.mainViewProxy.rebind();
       emitter.emit("rootDirRemoved");
     };
+    this.refreshHandler = () => {
+      this.manager.windowManger._refresh();
+    };
+    this.initMainViewCameraHandler = () => {
+      this.manager.mainViewProxy.addCameraReaction();
+    };
   }
   get boxManager() {
     return this.manager.boxManager;
@@ -1137,6 +1153,12 @@ class AttributesDelegate {
   setMainViewSize(size2) {
     this.context.safeSetAttributes({ ["mainViewSize"]: __spreadValues({}, size2) });
   }
+  setMainViewCameraAndSize(camera, size2) {
+    this.context.safeSetAttributes({
+      ["mainViewCamera"]: __spreadValues({}, camera),
+      ["mainViewSize"]: __spreadValues({}, size2)
+    });
+  }
   updateCursor(uid, position) {
     if (!get(this.attributes, ["cursors"])) {
       this.context.safeUpdateAttributes(["cursors"], {});
@@ -1595,15 +1617,26 @@ class MainViewProxy {
     this.mainViewIsAddListener = false;
     this.store = this.manager.store;
     this.sideEffectManager = new SideEffectManager();
+    this.startListenWritableChange = () => {
+      this.sideEffectManager.add(() => {
+        return emitter.on("writableChange", (isWritable) => {
+          if (isWritable) {
+            this.ensureCameraAndSize();
+          }
+        });
+      });
+    };
+    this.addCameraReaction = () => {
+      var _a;
+      (_a = this.manager.refresher) == null ? void 0 : _a.add(Fields.MainViewCamera, this.cameraReaction);
+    };
     this.cameraReaction = () => {
       return reaction(() => this.mainViewCamera, (camera) => {
         if (camera && camera.id !== this.manager.uid) {
           this.moveCameraToContian(this.mainViewSize);
           this.moveCamera(camera);
         }
-      }, {
-        fireImmediately: true
-      });
+      }, { fireImmediately: true });
     };
     this.sizeChangeHandler = debounce((size2) => {
       if (size2) {
@@ -1629,13 +1662,10 @@ class MainViewProxy {
     this.mainView = this.createMainView();
     this.moveCameraSizeByAttributes();
     emitter.once("mainViewMounted").then(() => {
-      setTimeout(() => {
-        this.addMainViewListener();
-        this.start();
-        if (!this.mainViewCamera || !this.mainViewSize) {
-          this.setCameraAndSize();
-        }
-      }, 200);
+      this.addMainViewListener();
+      this.start();
+      this.ensureCameraAndSize();
+      this.startListenWritableChange();
     });
     const playgroundSizeChangeListener = () => {
       this.sizeChangeHandler(this.mainViewSize);
@@ -1645,6 +1675,12 @@ class MainViewProxy {
       return () => emitter.off("playgroundSizeChange", playgroundSizeChangeListener);
     });
   }
+  ensureCameraAndSize() {
+    if (!this.mainViewCamera || !this.mainViewSize) {
+      this.manager.dispatchInternalEvent(Events.InitMainViewCamera);
+      this.setCameraAndSize();
+    }
+  }
   get mainViewCamera() {
     return this.store.getMainViewCamera();
   }
@@ -1656,17 +1692,17 @@ class MainViewProxy {
     this.moveCamera(this.mainViewCamera);
   }
   start() {
-    var _a;
     if (this.started)
       return;
     this.sizeChangeHandler(this.mainViewSize);
     this.addCameraListener();
-    (_a = this.manager.refresher) == null ? void 0 : _a.add(Fields.MainViewCamera, this.cameraReaction);
+    this.addCameraReaction();
     this.started = true;
   }
   setCameraAndSize() {
-    this.store.setMainViewCamera(__spreadProps(__spreadValues({}, this.mainView.camera), { id: this.manager.uid }));
-    this.store.setMainViewSize(__spreadProps(__spreadValues({}, this.mainView.size), { id: this.manager.uid }));
+    const camera = __spreadProps(__spreadValues({}, this.mainView.camera), { id: this.manager.uid });
+    const size2 = __spreadProps(__spreadValues({}, this.mainView.size), { id: this.manager.uid });
+    this.store.setMainViewCameraAndSize(camera, size2);
   }
   get view() {
     return this.mainView;
@@ -1916,6 +1952,22 @@ class AppManager {
       };
       callbacks$1.emit("sceneStateChange", this.sceneState);
     };
+    this.addAppsChangeListener = () => {
+      var _a;
+      (_a = this.refresher) == null ? void 0 : _a.add("apps", () => {
+        return safeListenPropsUpdated(() => this.attributes.apps, () => {
+          this.attributesUpdateCallback(this.attributes.apps);
+        });
+      });
+    };
+    this.addAppCloseListener = () => {
+      var _a;
+      (_a = this.refresher) == null ? void 0 : _a.add("appsClose", () => {
+        return onObjectRemoved(this.attributes.apps, () => {
+          this.onAppDelete(this.attributes.apps);
+        });
+      });
+    };
     this.onMainViewIndexChange = (index) => {
       if (index !== void 0 && this._prevSceneIndex !== index) {
         callbacks$1.emit("mainViewSceneIndexChange", index);
@@ -1943,6 +1995,7 @@ class AppManager {
         }
       }
     };
+    this.attributesUpdateCallback = debounce((apps) => this._attributesUpdateCallback(apps), 100);
     this.onRegisteredChange = (registered) => {
       if (!registered)
         return;
@@ -2017,6 +2070,7 @@ class AppManager {
       } else {
         this.mainView.disableCameraTransform = true;
       }
+      emitter.emit("writableChange", isWritable);
     };
     this.updateSceneIndex = () => {
       const scenePath = this.store.getMainViewScenePath();
@@ -2153,46 +2207,38 @@ class AppManager {
     }
   }
   async onCreated() {
-    var _a, _b, _c, _d, _e2, _f, _g, _h;
+    var _a, _b, _c, _d, _e2, _f;
     await this.attributesUpdateCallback(this.attributes.apps);
     emitter.emit("updateManagerRect");
     emitter.onAny(this.boxEventListener);
-    (_a = this.refresher) == null ? void 0 : _a.add("apps", () => {
-      return safeListenPropsUpdated(() => this.attributes.apps, () => {
-        this.attributesUpdateCallback(this.attributes.apps);
-      });
-    });
-    (_b = this.refresher) == null ? void 0 : _b.add("appsClose", () => {
-      return onObjectRemoved(this.attributes.apps, () => {
-        this.onAppDelete(this.attributes.apps);
-      });
-    });
-    (_c = this.refresher) == null ? void 0 : _c.add("maximized", () => {
+    this.addAppsChangeListener();
+    this.addAppCloseListener();
+    (_a = this.refresher) == null ? void 0 : _a.add("maximized", () => {
       return autorun(() => {
         var _a2;
         const maximized = this.attributes.maximized;
         (_a2 = this.boxManager) == null ? void 0 : _a2.setMaximized(Boolean(maximized));
       });
     });
-    (_d = this.refresher) == null ? void 0 : _d.add("minimized", () => {
+    (_b = this.refresher) == null ? void 0 : _b.add("minimized", () => {
       return autorun(() => {
         const minimized = this.attributes.minimized;
         this.onMinimized(minimized);
       });
     });
-    (_e2 = this.refresher) == null ? void 0 : _e2.add("mainViewIndex", () => {
+    (_c = this.refresher) == null ? void 0 : _c.add("mainViewIndex", () => {
       return autorun(() => {
         const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
         this.onMainViewIndexChange(mainSceneIndex);
       });
     });
-    (_f = this.refresher) == null ? void 0 : _f.add("focusedChange", () => {
+    (_d = this.refresher) == null ? void 0 : _d.add("focusedChange", () => {
       return autorun(() => {
         const focused = get(this.attributes, "focus");
         this.onFocusChange(focused);
       });
     });
-    (_g = this.refresher) == null ? void 0 : _g.add("registeredChange", () => {
+    (_e2 = this.refresher) == null ? void 0 : _e2.add("registeredChange", () => {
       return autorun(() => {
         const registered = get(this.attributes, Fields.Registered);
         this.onRegisteredChange(registered);
@@ -2204,7 +2250,7 @@ class AppManager {
         return;
       this.resetScenePath(mainScenePath);
     }
-    this.displayerWritableListener(!((_h = this.room) == null ? void 0 : _h.isWritable));
+    this.displayerWritableListener(!((_f = this.room) == null ? void 0 : _f.isWritable));
     this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
     this._prevFocused = this.attributes.focus;
     this.sideEffectManager.add(() => {
@@ -2216,7 +2262,7 @@ class AppManager {
       return () => redoUndo.destroy();
     });
   }
-  async attributesUpdateCallback(apps) {
+  async _attributesUpdateCallback(apps) {
     if (apps && WindowManager.container) {
       const appIds = Object.keys(apps);
       if (appIds.length === 0) {
@@ -5517,6 +5563,9 @@ class ReconnectRefresher {
       this.phase = phase;
     };
     this.onReconnected = debounce(() => {
+      this._onReconnected();
+    }, 3e3);
+    this._onReconnected = () => {
       log("onReconnected refresh reactors");
       this.releaseDisposers();
       this.reactors.forEach((func, id2) => {
@@ -5525,7 +5574,7 @@ class ReconnectRefresher {
         }
       });
       this.ctx.emitter.emit("onReconnected", void 0);
-    }, 3e3);
+    };
   }
   setRoom(room) {
     this.room = room;
@@ -5544,7 +5593,14 @@ class ReconnectRefresher {
     });
     this.disposers.clear();
   }
+  refresh() {
+    this._onReconnected();
+  }
   add(id2, func) {
+    const disposer = this.disposers.get(id2);
+    if (disposer && isFunction(disposer)) {
+      disposer();
+    }
     if (isFunction(func)) {
       this.reactors.set(id2, func);
       this.disposers.set(id2, func());
@@ -14812,7 +14868,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "0.4.20";
+    this.version = "0.4.23";
     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/jest": "^27.4.1", "@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", "jest": "^27.5.1", "jest-canvas-mock": "^2.3.1", "jest-fetch-mock": "^3.0.3", "jest-transform-stub": "^2.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", "svelte-jester": "^2.3.2", "ts-jest": "^27.1.4", "typescript": "^4.5.5", "vite": "^2.5.3", "white-web-sdk": "2.16.10" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
@@ -14937,6 +14993,9 @@ const _WindowManager = class extends InvisiblePlugin {
       if (_WindowManager.params) {
         const params = _WindowManager.params;
         const mainViewElement = _WindowManager.initContainer(this, container, params.chessboard, params.overwriteStyles);
+        if (this.boxManager) {
+          this.boxManager.destroy();
+        }
         const boxManager = createBoxManager(this, callbacks$1, emitter, {
           collectorContainer: params.collectorContainer,
           collectorStyles: params.collectorStyles,
@@ -15402,6 +15461,19 @@ const _WindowManager = class extends InvisiblePlugin {
     var _a;
     return (_a = this.focusedView) == null ? void 0 : _a.lockImages(locked);
   }
+  refresh() {
+    var _a;
+    this._refresh();
+    (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.Refresh);
+  }
+  _refresh() {
+    var _a, _b, _c;
+    (_a = this.appManager) == null ? void 0 : _a.mainViewProxy.rebind();
+    if (_WindowManager.container) {
+      this.bindContainer(_WindowManager.container);
+    }
+    (_c = (_b = this.appManager) == null ? void 0 : _b.refresher) == null ? void 0 : _c.refresh();
+  }
   isDynamicPPT(scenes) {
     var _a, _b;
     const sceneSrc = (_b = (_a = scenes[0]) == null ? void 0 : _a.ppt) == null ? void 0 : _b.src;