@netless/window-manager 1.0.0-canary.63 → 1.0.0-canary.65

package/dist/index.js

@@ -873,7 +873,7 @@ class WhiteBoardView {
     const camera$ = new valueEnhancer.Val(pickCamera(this.view.camera));
     this.baseRect$ = baseRect$;
     this.pageState$ = pageState$;
-    this.baseCamera$ = camera$;
+    this.camera$ = camera$;
     this.appProxy.sideEffectManager.add(() => [
       appProxy.appEmitter.on("pageStateChange", (pageState) => pageState$.setValue(pageState)),
       appProxy.camera$.subscribe((camera) => {
@@ -1271,6 +1271,7 @@ class CameraSynchronizer {
   constructor(saveCamera) {
     this.saveCamera = saveCamera;
     this.scale = 1;
+    this.cameraUpdating = false;
     this.setRect = (rect, updateCamera = true) => {
       this.rect = rect;
       if (this.remoteCamera && this.remoteSize && updateCamera) {
@@ -1328,7 +1329,7 @@ class CameraSynchronizer {
     }
   }
   moveCamera(camera) {
-    if (!lodash.isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
+    if (!lodash.isEmpty(camera) && this.view && camera.centerX != null && camera.centerY != null) {
       if (lodash.isEqual(camera, this.view.camera))
         return;
       const { centerX, centerY, scale: scale2 } = camera;
@@ -2471,6 +2472,39 @@ class MainViewProxy {
         })
       );
     };
+    this.moveCamera = (camera) => {
+      this.debouncedStoreCamera();
+      this.moveCameraToPromise(camera);
+    };
+    this.moveCameraToPromise = (camera) => {
+      const promise = new Promise((resolve) => {
+        const cameraListener = lodash.debounce(() => {
+          this.mainView.callbacks.off("onCameraUpdated", cameraListener);
+          this.cameraUpdatePromise = void 0;
+          resolve(true);
+        }, 50);
+        this.mainView.callbacks.on("onCameraUpdated", cameraListener);
+        this.mainView.moveCamera(camera);
+      });
+      this.cameraUpdatePromise = promise;
+      return promise;
+    };
+    this.debouncedStoreCamera = () => {
+      this.storeCurrentSize();
+      const cameraListener = lodash.debounce(() => {
+        this.saveToCamera$();
+        this.storeCurrentCameraSize();
+        this.mainView.callbacks.off("onCameraUpdated", cameraListener);
+      }, 50);
+      this.mainView.callbacks.on("onCameraUpdated", cameraListener);
+    };
+    this.storeCurrentCameraSize = lodash.debounce(() => __async$4(this, null, function* () {
+      if (this.cameraUpdatePromise) {
+        yield this.cameraUpdatePromise;
+      }
+      this.storeCurrentCamera();
+      this.storeCurrentSize();
+    }), 500);
     this.addCameraReaction = () => {
       this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
       this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
@@ -2489,11 +2523,14 @@ class MainViewProxy {
       var _a2;
       const rect = (_a2 = this.manager.boxManager) == null ? void 0 : _a2.stageRect;
       if (rect) {
-        this.storeSize({
+        const size = {
           id: this.manager.uid,
           width: rect.width,
           height: rect.height
-        });
+        };
+        if (!lodash.isEqual(size, this.mainViewSize)) {
+          this.storeSize(size);
+        }
       }
     };
     this.storeCamera = (camera) => {
@@ -2560,11 +2597,6 @@ class MainViewProxy {
         }
       }
     }));
-    this.camera$.reaction((camera) => {
-      if (camera) {
-        callbacks.emit("baseCameraChange", camera);
-      }
-    });
     this.size$.reaction((size) => {
       if (size) {
         callbacks.emit("baseSizeChange", size);
@@ -2889,6 +2921,8 @@ class ScrollMode {
     });
     this.sideEffect.add(() => {
       const onCameraUpdated = (camera) => {
+        if (!this.manager.canOperate)
+          return;
         const halfWbHeight = size$.value.height / 2 / scale$.value;
         const scrollTop = camera.centerY;
         this.scrollStorage.setState({
@@ -12756,7 +12790,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.63";
+    this.version = "1.0.0-canary.65";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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.3", "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": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
     this.emitter = callbacks;
     this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);
@@ -12764,24 +12798,13 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     this.isReplay = whiteWebSdk.isPlayer(this.displayer);
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     this.moveCamera = (camera) => {
-      var _a2;
+      var _a2, _b;
       const pureCamera = lodash.omit(camera, ["animationMode"]);
       const mainViewCamera = __spreadValues({}, this.mainView.camera);
       if (lodash.isEqual(__spreadValues(__spreadValues({}, mainViewCamera), pureCamera), mainViewCamera))
         return;
-      this.debouncedStoreCamera();
-      this.mainView.moveCamera(camera);
-      (_a2 = this.appManager) == null ? void 0 : _a2.dispatchInternalEvent(Events.MoveCamera, camera);
-    };
-    this.debouncedStoreCamera = () => {
-      const storeCamera = lodash.debounce(() => {
-        var _a2, _b, _c;
-        (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.saveToCamera$();
-        (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentCamera();
-        (_c = this.appManager) == null ? void 0 : _c.mainViewProxy.storeCurrentSize();
-        this.mainView.callbacks.off("onCameraUpdated", storeCamera);
-      }, 200);
-      this.mainView.callbacks.on("onCameraUpdated", storeCamera);
+      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.moveCamera(camera);
+      (_b = this.appManager) == null ? void 0 : _b.dispatchInternalEvent(Events.MoveCamera, camera);
     };
     _WindowManager.displayer = context.displayer;
     window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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.3", "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": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
@@ -13164,8 +13187,8 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     var _a2;
     log("setViewMode", mode);
     const mainViewProxy = (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy;
-    if (mode === whiteWebSdk.ViewMode.Broadcaster) {
-      if (this.canOperate) {
+    if (mode === whiteWebSdk.ViewMode.Broadcaster || mode === whiteWebSdk.ViewMode.Follower) {
+      if (this.canOperate && mode === whiteWebSdk.ViewMode.Broadcaster) {
         mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentCamera();
         mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentSize();
       }
@@ -13350,7 +13373,6 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
   }
   moveCameraToContain(rectangle) {
     var _a2;
-    this.debouncedStoreCamera();
     this.mainView.moveCameraToContain(rectangle);
     (_a2 = this.appManager) == null ? void 0 : _a2.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
   }

package/dist/index.mjs

@@ -868,7 +868,7 @@ class WhiteBoardView {
     const camera$ = new Val(pickCamera(this.view.camera));
     this.baseRect$ = baseRect$;
     this.pageState$ = pageState$;
-    this.baseCamera$ = camera$;
+    this.camera$ = camera$;
     this.appProxy.sideEffectManager.add(() => [
       appProxy.appEmitter.on("pageStateChange", (pageState) => pageState$.setValue(pageState)),
       appProxy.camera$.subscribe((camera) => {
@@ -1266,6 +1266,7 @@ class CameraSynchronizer {
   constructor(saveCamera) {
     this.saveCamera = saveCamera;
     this.scale = 1;
+    this.cameraUpdating = false;
     this.setRect = (rect, updateCamera = true) => {
       this.rect = rect;
       if (this.remoteCamera && this.remoteSize && updateCamera) {
@@ -1323,7 +1324,7 @@ class CameraSynchronizer {
     }
   }
   moveCamera(camera) {
-    if (!isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
+    if (!isEmpty(camera) && this.view && camera.centerX != null && camera.centerY != null) {
       if (isEqual(camera, this.view.camera))
         return;
       const { centerX, centerY, scale: scale2 } = camera;
@@ -2466,6 +2467,39 @@ class MainViewProxy {
         })
       );
     };
+    this.moveCamera = (camera) => {
+      this.debouncedStoreCamera();
+      this.moveCameraToPromise(camera);
+    };
+    this.moveCameraToPromise = (camera) => {
+      const promise = new Promise((resolve) => {
+        const cameraListener = debounce(() => {
+          this.mainView.callbacks.off("onCameraUpdated", cameraListener);
+          this.cameraUpdatePromise = void 0;
+          resolve(true);
+        }, 50);
+        this.mainView.callbacks.on("onCameraUpdated", cameraListener);
+        this.mainView.moveCamera(camera);
+      });
+      this.cameraUpdatePromise = promise;
+      return promise;
+    };
+    this.debouncedStoreCamera = () => {
+      this.storeCurrentSize();
+      const cameraListener = debounce(() => {
+        this.saveToCamera$();
+        this.storeCurrentCameraSize();
+        this.mainView.callbacks.off("onCameraUpdated", cameraListener);
+      }, 50);
+      this.mainView.callbacks.on("onCameraUpdated", cameraListener);
+    };
+    this.storeCurrentCameraSize = debounce(() => __async$4(this, null, function* () {
+      if (this.cameraUpdatePromise) {
+        yield this.cameraUpdatePromise;
+      }
+      this.storeCurrentCamera();
+      this.storeCurrentSize();
+    }), 500);
     this.addCameraReaction = () => {
       this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
       this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
@@ -2484,11 +2518,14 @@ class MainViewProxy {
       var _a2;
       const rect = (_a2 = this.manager.boxManager) == null ? void 0 : _a2.stageRect;
       if (rect) {
-        this.storeSize({
+        const size = {
           id: this.manager.uid,
           width: rect.width,
           height: rect.height
-        });
+        };
+        if (!isEqual(size, this.mainViewSize)) {
+          this.storeSize(size);
+        }
       }
     };
     this.storeCamera = (camera) => {
@@ -2555,11 +2592,6 @@ class MainViewProxy {
         }
       }
     }));
-    this.camera$.reaction((camera) => {
-      if (camera) {
-        callbacks.emit("baseCameraChange", camera);
-      }
-    });
     this.size$.reaction((size) => {
       if (size) {
         callbacks.emit("baseSizeChange", size);
@@ -2884,6 +2916,8 @@ class ScrollMode {
     });
     this.sideEffect.add(() => {
       const onCameraUpdated = (camera) => {
+        if (!this.manager.canOperate)
+          return;
         const halfWbHeight = size$.value.height / 2 / scale$.value;
         const scrollTop = camera.centerY;
         this.scrollStorage.setState({
@@ -12751,7 +12785,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.63";
+    this.version = "1.0.0-canary.65";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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.3", "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": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
     this.emitter = callbacks;
     this.viewMode$ = new Val(ViewMode.Broadcaster);
@@ -12759,24 +12793,13 @@ const _WindowManager = class extends InvisiblePlugin {
     this.isReplay = isPlayer(this.displayer);
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     this.moveCamera = (camera) => {
-      var _a2;
+      var _a2, _b;
       const pureCamera = omit(camera, ["animationMode"]);
       const mainViewCamera = __spreadValues({}, this.mainView.camera);
       if (isEqual(__spreadValues(__spreadValues({}, mainViewCamera), pureCamera), mainViewCamera))
         return;
-      this.debouncedStoreCamera();
-      this.mainView.moveCamera(camera);
-      (_a2 = this.appManager) == null ? void 0 : _a2.dispatchInternalEvent(Events.MoveCamera, camera);
-    };
-    this.debouncedStoreCamera = () => {
-      const storeCamera = debounce(() => {
-        var _a2, _b, _c;
-        (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.saveToCamera$();
-        (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentCamera();
-        (_c = this.appManager) == null ? void 0 : _c.mainViewProxy.storeCurrentSize();
-        this.mainView.callbacks.off("onCameraUpdated", storeCamera);
-      }, 200);
-      this.mainView.callbacks.on("onCameraUpdated", storeCamera);
+      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.moveCamera(camera);
+      (_b = this.appManager) == null ? void 0 : _b.dispatchInternalEvent(Events.MoveCamera, camera);
     };
     _WindowManager.displayer = context.displayer;
     window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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.3", "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": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
@@ -13159,8 +13182,8 @@ const _WindowManager = class extends InvisiblePlugin {
     var _a2;
     log("setViewMode", mode);
     const mainViewProxy = (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy;
-    if (mode === ViewMode.Broadcaster) {
-      if (this.canOperate) {
+    if (mode === ViewMode.Broadcaster || mode === ViewMode.Follower) {
+      if (this.canOperate && mode === ViewMode.Broadcaster) {
         mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentCamera();
         mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentSize();
       }
@@ -13345,7 +13368,6 @@ const _WindowManager = class extends InvisiblePlugin {
   }
   moveCameraToContain(rectangle) {
     var _a2;
-    this.debouncedStoreCamera();
     this.mainView.moveCameraToContain(rectangle);
     (_a2 = this.appManager) == null ? void 0 : _a2.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
   }

package/dist/index.umd.js

@@ -866,7 +866,7 @@
       const camera$ = new valueEnhancer.Val(pickCamera(this.view.camera));
       this.baseRect$ = baseRect$;
       this.pageState$ = pageState$;
-      this.baseCamera$ = camera$;
+      this.camera$ = camera$;
       this.appProxy.sideEffectManager.add(() => [
         appProxy.appEmitter.on("pageStateChange", (pageState) => pageState$.setValue(pageState)),
         appProxy.camera$.subscribe((camera) => {
@@ -1264,6 +1264,7 @@
     constructor(saveCamera) {
       this.saveCamera = saveCamera;
       this.scale = 1;
+      this.cameraUpdating = false;
       this.setRect = (rect, updateCamera = true) => {
         this.rect = rect;
         if (this.remoteCamera && this.remoteSize && updateCamera) {
@@ -1321,7 +1322,7 @@
       }
     }
     moveCamera(camera) {
-      if (!lodash.isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
+      if (!lodash.isEmpty(camera) && this.view && camera.centerX != null && camera.centerY != null) {
         if (lodash.isEqual(camera, this.view.camera))
           return;
         const { centerX, centerY, scale: scale2 } = camera;
@@ -2464,6 +2465,39 @@
           })
         );
       };
+      this.moveCamera = (camera) => {
+        this.debouncedStoreCamera();
+        this.moveCameraToPromise(camera);
+      };
+      this.moveCameraToPromise = (camera) => {
+        const promise = new Promise((resolve) => {
+          const cameraListener = lodash.debounce(() => {
+            this.mainView.callbacks.off("onCameraUpdated", cameraListener);
+            this.cameraUpdatePromise = void 0;
+            resolve(true);
+          }, 50);
+          this.mainView.callbacks.on("onCameraUpdated", cameraListener);
+          this.mainView.moveCamera(camera);
+        });
+        this.cameraUpdatePromise = promise;
+        return promise;
+      };
+      this.debouncedStoreCamera = () => {
+        this.storeCurrentSize();
+        const cameraListener = lodash.debounce(() => {
+          this.saveToCamera$();
+          this.storeCurrentCameraSize();
+          this.mainView.callbacks.off("onCameraUpdated", cameraListener);
+        }, 50);
+        this.mainView.callbacks.on("onCameraUpdated", cameraListener);
+      };
+      this.storeCurrentCameraSize = lodash.debounce(() => __async$4(this, null, function* () {
+        if (this.cameraUpdatePromise) {
+          yield this.cameraUpdatePromise;
+        }
+        this.storeCurrentCamera();
+        this.storeCurrentSize();
+      }), 500);
       this.addCameraReaction = () => {
         this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
         this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
@@ -2482,11 +2516,14 @@
         var _a2;
         const rect = (_a2 = this.manager.boxManager) == null ? void 0 : _a2.stageRect;
         if (rect) {
-          this.storeSize({
+          const size = {
             id: this.manager.uid,
             width: rect.width,
             height: rect.height
-          });
+          };
+          if (!lodash.isEqual(size, this.mainViewSize)) {
+            this.storeSize(size);
+          }
         }
       };
       this.storeCamera = (camera) => {
@@ -2553,11 +2590,6 @@
           }
         }
       }));
-      this.camera$.reaction((camera) => {
-        if (camera) {
-          callbacks.emit("baseCameraChange", camera);
-        }
-      });
       this.size$.reaction((size) => {
         if (size) {
           callbacks.emit("baseSizeChange", size);
@@ -2882,6 +2914,8 @@
       });
       this.sideEffect.add(() => {
         const onCameraUpdated = (camera) => {
+          if (!this.manager.canOperate)
+            return;
           const halfWbHeight = size$.value.height / 2 / scale$.value;
           const scrollTop = camera.centerY;
           this.scrollStorage.setState({
@@ -12749,7 +12783,7 @@
   const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     constructor(context) {
       super(context);
-      this.version = "1.0.0-canary.63";
+      this.version = "1.0.0-canary.65";
       this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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.3", "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": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
       this.emitter = callbacks;
       this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);
@@ -12757,24 +12791,13 @@
       this.isReplay = whiteWebSdk.isPlayer(this.displayer);
       this.containerSizeRatio = _WindowManager.containerSizeRatio;
       this.moveCamera = (camera) => {
-        var _a2;
+        var _a2, _b;
         const pureCamera = lodash.omit(camera, ["animationMode"]);
         const mainViewCamera = __spreadValues({}, this.mainView.camera);
         if (lodash.isEqual(__spreadValues(__spreadValues({}, mainViewCamera), pureCamera), mainViewCamera))
           return;
-        this.debouncedStoreCamera();
-        this.mainView.moveCamera(camera);
-        (_a2 = this.appManager) == null ? void 0 : _a2.dispatchInternalEvent(Events.MoveCamera, camera);
-      };
-      this.debouncedStoreCamera = () => {
-        const storeCamera = lodash.debounce(() => {
-          var _a2, _b, _c;
-          (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.saveToCamera$();
-          (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentCamera();
-          (_c = this.appManager) == null ? void 0 : _c.mainViewProxy.storeCurrentSize();
-          this.mainView.callbacks.off("onCameraUpdated", storeCamera);
-        }, 200);
-        this.mainView.callbacks.on("onCameraUpdated", storeCamera);
+        (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.moveCamera(camera);
+        (_b = this.appManager) == null ? void 0 : _b.dispatchInternalEvent(Events.MoveCamera, camera);
       };
       _WindowManager.displayer = context.displayer;
       window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@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.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "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.3", "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": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
@@ -13157,8 +13180,8 @@
       var _a2;
       log("setViewMode", mode);
       const mainViewProxy = (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy;
-      if (mode === whiteWebSdk.ViewMode.Broadcaster) {
-        if (this.canOperate) {
+      if (mode === whiteWebSdk.ViewMode.Broadcaster || mode === whiteWebSdk.ViewMode.Follower) {
+        if (this.canOperate && mode === whiteWebSdk.ViewMode.Broadcaster) {
           mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentCamera();
           mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentSize();
         }
@@ -13343,7 +13366,6 @@
     }
     moveCameraToContain(rectangle) {
       var _a2;
-      this.debouncedStoreCamera();
       this.mainView.moveCameraToContain(rectangle);
       (_a2 = this.appManager) == null ? void 0 : _a2.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
     }

package/dist/src/App/WhiteboardView.d.ts

@@ -13,7 +13,7 @@ export declare class WhiteBoardView implements PageController {
     protected appProxy: AppProxy;
     ensureSize: (size: number) => void;
     readonly pageState$: ReadonlyVal<PageState>;
-    readonly baseCamera$: ReadonlyVal<WhiteBoardViewCamera>;
+    readonly camera$: ReadonlyVal<WhiteBoardViewCamera>;
     readonly baseRect$: ReadonlyVal<WhiteBoardViewRect | undefined>;
     constructor(view: View, appContext: AppContext, appProxy: AppProxy, ensureSize: (size: number) => void);
     get pageState(): PageState;

package/dist/src/View/CameraSynchronizer.d.ts

@@ -9,6 +9,7 @@ export declare class CameraSynchronizer {
     protected rect?: TeleBoxRect;
     protected view?: View;
     protected scale: number;
+    protected cameraUpdating: boolean;
     constructor(saveCamera: SaveCamera);
     setRect: (rect: TeleBoxRect, updateCamera?: boolean) => void;
     setView(view: View): void;

package/dist/src/View/MainView.d.ts

@@ -3,6 +3,7 @@ import { ViewSync } from "./ViewSync";
 import type { ICamera, ISize } from "../AttributesDelegate";
 import type { Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
+import type { MoveCameraParams } from "../typings";
 export declare class MainViewProxy {
     private manager;
     private started;
@@ -18,11 +19,16 @@ export declare class MainViewProxy {
     } | undefined, any>;
     size$: Val<ISize | undefined, any>;
     view$: Val<View | undefined, any>;
+    private cameraUpdatePromise?;
     viewSync?: ViewSync;
     constructor(manager: AppManager);
     createViewSync: () => void;
     private startListenWritableChange;
     ensureCameraAndSize(): void;
+    moveCamera: (camera: MoveCameraParams) => void;
+    moveCameraToPromise: (camera: MoveCameraParams) => Promise<boolean>;
+    private debouncedStoreCamera;
+    private storeCurrentCameraSize;
     private get mainViewCamera();
     private get mainViewSize();
     private get didRelease();

package/dist/src/callback.d.ts

@@ -3,7 +3,7 @@ import type { TeleBoxColorScheme, TeleBoxFullscreen, TELE_BOX_STATE } from "@net
 import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
-import type { ICamera, ISize } from "./AttributesDelegate";
+import type { ISize } from "./AttributesDelegate";
 import type { ScrollState } from "./View/ScrollMode";
 export declare type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
@@ -26,7 +26,6 @@ export declare type PublicEvent = {
         kind: string;
         error?: Error;
     };
-    baseCameraChange: ICamera;
     baseSizeChange: ISize;
     fullscreenChange: TeleBoxFullscreen;
     userScroll: undefined;

package/dist/src/index.d.ts

@@ -7,7 +7,7 @@ import type { TELE_BOX_STATE } from "./BoxManager";
 import type { Apps, Position, ICamera, ISize } from "./AttributesDelegate";
 import type { Displayer, SceneDefinition, View, Room, InvisiblePluginContext, Camera, CameraBound, Point, CameraState, Player, ImageInformation, SceneState, Size, AnimationMode, Rectangle } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
-import type { ApplianceIcons, ManagerViewMode, NetlessApp, RegisterParams } from "./typings";
+import type { ApplianceIcons, ManagerViewMode, MoveCameraParams, NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManager, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
@@ -241,13 +241,10 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
      * 关闭 APP
      */
     closeApp(appId: string): Promise<void>;
-    moveCamera: (camera: Partial<Camera> & {
-        animationMode?: AnimationMode;
-    }) => void;
+    moveCamera: (camera: MoveCameraParams) => void;
     moveCameraToContain(rectangle: Rectangle & Readonly<{
         animationMode?: AnimationMode;
     }>): void;
-    private debouncedStoreCamera;
     convertToPointInWorld(point: Point): Point;
     setCameraBound(cameraBound: CameraBound): void;
     onDestroy(): void;

package/dist/src/typings.d.ts

@@ -1,5 +1,5 @@
 import type Emittery from "emittery";
-import type { AnimationMode, ApplianceNames, Displayer, DisplayerState, Player, Room, SceneDefinition, SceneState, View, ViewMode } from "white-web-sdk";
+import type { AnimationMode, ApplianceNames, Camera, Displayer, DisplayerState, Player, Room, SceneDefinition, SceneState, View, ViewMode } from "white-web-sdk";
 import type { AppContext } from "./App";
 import type { ReadonlyTeleBox, TeleBoxRect, TeleBoxFullscreen } from "@netless/telebox-insider";
 import type { PageState } from "./Page";
@@ -81,6 +81,9 @@ export declare type Writeable<T> = {
     -readonly [P in keyof T]: T[P];
 };
 export declare type ManagerViewMode = `${ViewMode}` | "scroll";
+export declare type MoveCameraParams = Partial<Camera> & {
+    animationMode?: AnimationMode;
+};
 export type { AppContext } from "./App/AppContext";
 export type { WhiteBoardView } from "./App";
 export type { ReadonlyTeleBox, TeleBoxRect, TeleBoxFullscreen };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.63",
+  "version": "1.0.0-canary.65",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/App/WhiteboardView.ts

@@ -15,7 +15,7 @@ export type WhiteBoardViewRect = Omit<ISize, "id">;
 
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;
-    public readonly baseCamera$: ReadonlyVal<WhiteBoardViewCamera>;
+    public readonly camera$: ReadonlyVal<WhiteBoardViewCamera>;
     public readonly baseRect$: ReadonlyVal<WhiteBoardViewRect | undefined>;
 
     constructor(
@@ -31,7 +31,7 @@ export class WhiteBoardView implements PageController {
         const camera$ = new Val<WhiteBoardViewCamera>(pickCamera(this.view.camera));
         this.baseRect$ = baseRect$;
         this.pageState$ = pageState$;
-        this.baseCamera$ = camera$;
+        this.camera$ = camera$;
         this.appProxy.sideEffectManager.add(() => [
             appProxy.appEmitter.on("pageStateChange", pageState => pageState$.setValue(pageState)),
             appProxy.camera$.subscribe(camera => {

package/src/View/CameraSynchronizer.ts

@@ -12,6 +12,7 @@ export class CameraSynchronizer {
     protected rect?: TeleBoxRect;
     protected view?: View;
     protected scale = 1;
+    protected cameraUpdating = false;
 
     constructor(protected saveCamera: SaveCamera) {}
 
@@ -75,7 +76,7 @@ export class CameraSynchronizer {
     }
 
     private moveCamera(camera: ICamera): void {
-        if (!isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
+        if (!isEmpty(camera) && this.view && camera.centerX != null && camera.centerY != null) {
             if (isEqual(camera, this.view.camera)) return;
             const { centerX, centerY, scale } = camera;
             const needScale = scale * (this.scale || 1);

package/src/View/MainView.ts

@@ -12,6 +12,7 @@ import { ViewSync } from "./ViewSync";
 import type { ICamera, ISize } from "../AttributesDelegate";
 import type { Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
+import type { MoveCameraParams } from "../typings";
 
 export class MainViewProxy {
     private started = false;
@@ -24,6 +25,7 @@ export class MainViewProxy {
     public camera$ = new Val<ICamera | undefined>(undefined);
     public size$ = new Val<ISize | undefined>(undefined);
     public view$ = new Val<View | undefined>(undefined);
+    private cameraUpdatePromise?: Promise<boolean>;
 
     public viewSync?: ViewSync;
 
@@ -49,11 +51,6 @@ export class MainViewProxy {
                 }
             }
         }));
-        this.camera$.reaction(camera => {
-            if (camera) {
-                callbacks.emit("baseCameraChange", camera);
-            }
-        });
         this.size$.reaction(size => {
             if (size) {
                 callbacks.emit("baseSizeChange", size);
@@ -105,6 +102,43 @@ export class MainViewProxy {
         }
     }
 
+    public moveCamera = (camera: MoveCameraParams) => {
+        this.debouncedStoreCamera();
+        this.moveCameraToPromise(camera);
+    };
+
+    public moveCameraToPromise = (camera: MoveCameraParams) => {
+        const promise = new Promise<boolean>((resolve) => {
+            const cameraListener = debounce(() => {
+                this.mainView.callbacks.off("onCameraUpdated", cameraListener);
+                this.cameraUpdatePromise = undefined;
+                resolve(true);
+            }, 50);
+            this.mainView.callbacks.on("onCameraUpdated", cameraListener);
+            this.mainView.moveCamera(camera);
+        });
+        this.cameraUpdatePromise = promise;
+        return promise;
+    }
+
+    private debouncedStoreCamera = () => {
+        this.storeCurrentSize();
+        const cameraListener = debounce(() => {
+            this.saveToCamera$();
+            this.storeCurrentCameraSize();
+            this.mainView.callbacks.off("onCameraUpdated", cameraListener);
+        }, 50);
+        this.mainView.callbacks.on("onCameraUpdated", cameraListener);
+    }
+
+    private storeCurrentCameraSize = debounce(async () => {
+        if (this.cameraUpdatePromise) {
+            await this.cameraUpdatePromise;
+        }
+        this.storeCurrentCamera();
+        this.storeCurrentSize();
+    }, 500);
+
     private get mainViewCamera() {
         return this.store.getMainViewCamera();
     }
@@ -146,11 +180,14 @@ export class MainViewProxy {
     public storeCurrentSize = () => {
         const rect = this.manager.boxManager?.stageRect;
         if (rect) {
-            this.storeSize({
+            const size = {
                 id: this.manager.uid,
                 width: rect.width,
                 height: rect.height
-            });
+            }
+            if (!isEqual(size, this.mainViewSize)) {
+                this.storeSize(size);
+            }
         }
     }
 

package/src/View/ScrollMode.ts

@@ -76,6 +76,7 @@ export class ScrollMode {
 
         this.sideEffect.add(() => {
             const onCameraUpdated = (camera: Camera): void => {
+                if (!this.manager.canOperate) return;
                 const halfWbHeight = size$.value.height / 2 / scale$.value;
                 const scrollTop = camera.centerY;
                 this.scrollStorage.setState({

package/src/callback.ts

@@ -3,7 +3,7 @@ import type { TeleBoxColorScheme, TeleBoxFullscreen, TELE_BOX_STATE } from "@net
 import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
-import type { ICamera, ISize } from "./AttributesDelegate";
+import type { ISize } from "./AttributesDelegate";
 import type { ScrollState } from "./View/ScrollMode";
 
 export type PublicEvent = {
@@ -23,7 +23,6 @@ export type PublicEvent = {
     sceneStateChange: SceneState;
     pageStateChange: PageState;
     appClose: { appId: string; kind: string, error?: Error };
-    baseCameraChange: ICamera;
     baseSizeChange: ISize;
     fullscreenChange: TeleBoxFullscreen;
     userScroll: undefined;

package/src/index.ts

@@ -10,7 +10,7 @@ import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
-import { isEqual, isNull, isObject, isNumber, omit, debounce } from "lodash";
+import { isEqual, isNull, isObject, isNumber, omit } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
@@ -49,7 +49,7 @@ import type {
     Rectangle,
 } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
-import type { ApplianceIcons, ManagerViewMode, NetlessApp, RegisterParams } from "./typings";
+import type { ApplianceIcons, ManagerViewMode, MoveCameraParams, NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManager, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
@@ -627,8 +627,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
     public setViewMode(mode: ManagerViewMode): void {
         log("setViewMode", mode);
         const mainViewProxy = this.appManager?.mainViewProxy;
-        if (mode === ViewMode.Broadcaster) {
-            if (this.canOperate) {
+        if (mode === ViewMode.Broadcaster || mode === ViewMode.Follower) {
+            if (this.canOperate && mode === ViewMode.Broadcaster) {
                 mainViewProxy?.storeCurrentCamera();
                 mainViewProxy?.storeCurrentSize();
             }
@@ -830,14 +830,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         return this.appManager?.closeApp(appId);
     }
 
-    public moveCamera = (camera: Partial<Camera> & { animationMode?: AnimationMode } ): void => {
+    public moveCamera = (camera: MoveCameraParams): void => {
         const pureCamera = omit(camera, ["animationMode"]);
         const mainViewCamera = { ...this.mainView.camera };
         if (isEqual({ ...mainViewCamera, ...pureCamera }, mainViewCamera)) return;
-        this.debouncedStoreCamera();
-        this.mainView.moveCamera(camera);
+        this.appManager?.mainViewProxy.moveCamera(camera);
         this.appManager?.dispatchInternalEvent(Events.MoveCamera, camera);
-    };
+    }
 
     public moveCameraToContain(
         rectangle: Rectangle &
@@ -845,21 +844,11 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
                 animationMode?: AnimationMode;
             }>
     ): void {
-        this.debouncedStoreCamera();
+        // this.debouncedStoreCamera();
         this.mainView.moveCameraToContain(rectangle);
         this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
     }
 
-    private debouncedStoreCamera = () => {
-        const storeCamera = debounce(() => {
-            this.appManager?.mainViewProxy.saveToCamera$();
-            this.appManager?.mainViewProxy.storeCurrentCamera();
-            this.appManager?.mainViewProxy.storeCurrentSize();
-            this.mainView.callbacks.off("onCameraUpdated", storeCamera);
-        }, 200);
-        this.mainView.callbacks.on("onCameraUpdated", storeCamera);
-    }
-
     public convertToPointInWorld(point: Point): Point {
         return this.mainView.convertToPointInWorld(point);
     }

package/src/typings.ts

@@ -2,6 +2,7 @@ import type Emittery from "emittery";
 import type {
     AnimationMode,
     ApplianceNames,
+    Camera,
     Displayer,
     DisplayerState,
     Player,
@@ -93,6 +94,8 @@ export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 
 export type ManagerViewMode = `${ViewMode}` | "scroll";
 
+export type MoveCameraParams = Partial<Camera> & { animationMode?: AnimationMode };
+
 export type { AppContext } from "./App/AppContext";
 export type { WhiteBoardView } from "./App";
 export type { ReadonlyTeleBox, TeleBoxRect, TeleBoxFullscreen };