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

package/dist/index.js

@@ -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) {
@@ -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) => {
@@ -2884,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({
@@ -12751,7 +12790,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.64";
+    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);
@@ -12759,29 +12798,14 @@ 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);
+      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.moveCamera(camera);
+      (_b = this.appManager) == null ? void 0 : _b.dispatchInternalEvent(Events.MoveCamera, camera);
     };
-    this.debouncedStoreCamera = () => {
-      const cameraListener = lodash.debounce(() => {
-        var _a2;
-        (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.saveToCamera$();
-        this.storeCamera();
-        this.mainView.callbacks.off("onCameraUpdated", cameraListener);
-      }, 50);
-      this.mainView.callbacks.on("onCameraUpdated", cameraListener);
-    };
-    this.storeCamera = lodash.debounce(() => {
-      var _a2, _b;
-      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
-      (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
-    }, 300);
     _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" } };
   }
@@ -13349,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

@@ -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) {
@@ -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) => {
@@ -2879,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({
@@ -12746,7 +12785,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.64";
+    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);
@@ -12754,29 +12793,14 @@ 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);
+      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.moveCamera(camera);
+      (_b = this.appManager) == null ? void 0 : _b.dispatchInternalEvent(Events.MoveCamera, camera);
     };
-    this.debouncedStoreCamera = () => {
-      const cameraListener = debounce(() => {
-        var _a2;
-        (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.saveToCamera$();
-        this.storeCamera();
-        this.mainView.callbacks.off("onCameraUpdated", cameraListener);
-      }, 50);
-      this.mainView.callbacks.on("onCameraUpdated", cameraListener);
-    };
-    this.storeCamera = debounce(() => {
-      var _a2, _b;
-      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
-      (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
-    }, 300);
     _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" } };
   }
@@ -13344,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

@@ -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) {
@@ -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) => {
@@ -2877,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({
@@ -12744,7 +12783,7 @@
   const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     constructor(context) {
       super(context);
-      this.version = "1.0.0-canary.64";
+      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);
@@ -12752,29 +12791,14 @@
       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);
+        (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.moveCamera(camera);
+        (_b = this.appManager) == null ? void 0 : _b.dispatchInternalEvent(Events.MoveCamera, camera);
       };
-      this.debouncedStoreCamera = () => {
-        const cameraListener = lodash.debounce(() => {
-          var _a2;
-          (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.saveToCamera$();
-          this.storeCamera();
-          this.mainView.callbacks.off("onCameraUpdated", cameraListener);
-        }, 50);
-        this.mainView.callbacks.on("onCameraUpdated", cameraListener);
-      };
-      this.storeCamera = lodash.debounce(() => {
-        var _a2, _b;
-        (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
-        (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
-      }, 300);
       _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" } };
     }
@@ -13342,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/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/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,14 +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;
-    private storeCamera;
     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.64",
+  "version": "1.0.0-canary.65",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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) {}
 

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;
 
@@ -100,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();
     }
@@ -141,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/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";
@@ -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,25 +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 cameraListener = debounce(() => {
-            this.appManager?.mainViewProxy.saveToCamera$();
-            this.storeCamera();
-            this.mainView.callbacks.off("onCameraUpdated", cameraListener);
-        }, 50);
-        this.mainView.callbacks.on("onCameraUpdated", cameraListener);
-    }
-
-    private storeCamera = debounce(() => {
-        this.appManager?.mainViewProxy.storeCurrentCamera();
-        this.appManager?.mainViewProxy.storeCurrentSize();
-    }, 300);
-
     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 };