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

package/dist/index.js

@@ -238,25 +238,25 @@ function deleteRecord(db2, key) {
     request.onerror = () => reject();
   });
 }
-var __defProp$8 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 var __async$b = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -339,7 +339,7 @@ function fetchWithTimeout(resource, options) {
     const { timeout = 1e4 } = options;
     const controller = new AbortController();
     const id = setTimeout(() => controller.abort(), timeout);
-    const response = yield fetch(resource, __spreadProps$4(__spreadValues$8({}, options), {
+    const response = yield fetch(resource, __spreadProps$5(__spreadValues$9({}, options), {
       signal: controller.signal,
       headers: {
         "content-type": "text/plain"
@@ -606,6 +606,25 @@ const isRootDirPage = (scenePath) => {
   }, 0);
   return delimiterCount === 1;
 };
+var __defProp$8 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 class AppListeners {
   constructor(manager) {
     this.manager = manager;
@@ -706,7 +725,13 @@ class AppListeners {
       }
     };
     this.moveCameraHandler = (payload) => {
-      this.manager.mainView.moveCamera(payload);
+      const size$ = this.manager.mainViewProxy.size$;
+      if (size$.value) {
+        const size = this.manager.mainView.size;
+        const diff = Math.max(size.height / size$.value.height, size.width / size$.value.width);
+        const nextCamera = __spreadProps$4(__spreadValues$8({}, payload), { scale: payload.scale * diff });
+        this.manager.mainView.moveCamera(nextCamera);
+      }
     };
     this.moveCameraToContainHandler = (payload) => {
       this.manager.mainView.moveCameraToContain(payload);
@@ -1228,10 +1253,13 @@ class AppPageStateImpl {
     }
   }
   toObject() {
-    var _a2, _b;
+    var _a2, _b, _c;
     return {
       index: ((_a2 = this.view) == null ? void 0 : _a2.focusSceneIndex) || 0,
-      length: ((_b = this.sceneNode) == null ? void 0 : _b.scenes.length) || 0
+      length: ((_b = this.sceneNode) == null ? void 0 : _b.scenes.length) || 0,
+      pages: ((_c = this.sceneNode) == null ? void 0 : _c.scenes.map((name) => {
+        return `${this.scenePath}/${name}`;
+      })) || []
     };
   }
   destroy() {
@@ -1249,15 +1277,17 @@ class CameraSynchronizer {
         this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
       }
     };
-    this.onRemoteUpdate = lodash.throttle((camera, size) => {
+    this.onRemoteUpdate = lodash.throttle((camera, size, skipUpdate = false) => {
       this.remoteCamera = camera;
       this.remoteSize = size;
-      if (this.remoteSize && this.rect) {
-        requestAnimationFrame(() => {
-          this.moveCameraToContian(size);
+      if (skipUpdate)
+        return;
+      requestAnimationFrame(() => {
+        if (this.remoteSize && this.rect) {
+          this.moveCameraToContian(this.remoteSize);
           this.moveCamera(camera);
-        });
-      }
+        }
+      });
     }, 32);
   }
   setView(view) {
@@ -1275,8 +1305,10 @@ class CameraSynchronizer {
         width: size.width,
         height: size.height,
         originX: currentCamera.centerX - size.width / 2,
-        originY: currentCamera.centerY - size.height / 2
+        originY: currentCamera.centerY - size.height / 2,
+        animationMode: whiteWebSdk.AnimationMode.Immediately
       });
+      this.moveCamera(this.remoteCamera);
     }
   }
   onLocalCameraUpdate(camera) {
@@ -1360,11 +1392,9 @@ class ViewSync {
     };
     this.subscribeCamera = () => {
       return this.context.camera$.subscribe((camera, skipUpdate) => {
-        if (skipUpdate)
-          return;
         const size = this.context.size$.value;
         if (camera && size) {
-          this.synchronizer.onRemoteUpdate(camera, size);
+          this.synchronizer.onRemoteUpdate(camera, size, skipUpdate);
         }
       });
     };
@@ -2445,6 +2475,10 @@ class MainViewProxy {
       this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
       this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
     };
+    this.saveToCamera$ = () => {
+      const camera = __spreadProps$1(__spreadValues$2({}, this.view.camera), { id: this.manager.uid });
+      this.camera$.setValue(camera, true);
+    };
     this.storeCurrentCamera = () => {
       const iCamera = this.view.camera;
       this.storeCamera(__spreadValues$2({
@@ -7328,14 +7362,14 @@ class Cursor {
     var _a2;
     if (this.member) {
       const icons = this.cursorManager.applianceIcons;
-      let applianceSrc = icons[whiteWebSdk.ApplianceNames.shape];
+      let applianceSrc;
       if (this.memberApplianceName === whiteWebSdk.ApplianceNames.pencilEraser) {
         const size = ((_a2 = this.member) == null ? void 0 : _a2.memberState.pencilEraserSize) || 1;
         applianceSrc = icons[`${this.memberApplianceName}${size}`];
       } else {
         applianceSrc = icons[this.memberApplianceName || whiteWebSdk.ApplianceNames.shape];
       }
-      return applianceSrc;
+      return applianceSrc || icons[whiteWebSdk.ApplianceNames.shape];
     }
   }
   updateMember() {
@@ -7510,7 +7544,8 @@ class CursorManager {
     return (_a2 = this.manager.focusApp) == null ? void 0 : _a2.view;
   }
   updateCursor(event, clientX, clientY) {
-    if (this.wrapperRect && this.manager.canOperate) {
+    const self = findMemberByUid(this.manager.room, this.manager.uid);
+    if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self)) {
       const view = event.type === "main" ? this.manager.mainView : this.focusView;
       const point = this.getPoint(view, clientX, clientY);
       if (point) {
@@ -7568,11 +7603,19 @@ class PageStateImpl {
     var _a2;
     return ((_a2 = this.manager) == null ? void 0 : _a2.mainViewScenesLength) || 0;
   }
+  getPages() {
+    var _a2;
+    return ((_a2 = this.manager.callbacksNode) == null ? void 0 : _a2.scenes.map((sceneName) => {
+      var _a22;
+      return `${(_a22 = this.manager.callbacksNode) == null ? void 0 : _a22.path}${sceneName}`;
+    })) || [];
+  }
   toObject() {
     const index2 = this.index >= this.length ? this.length - 1 : this.index;
     return {
       index: index2,
-      length: this.length
+      length: this.length,
+      pages: this.getPages()
     };
   }
 }
@@ -12713,7 +12756,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.61";
+    this.version = "1.0.0-canary.63";
     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);
@@ -12732,9 +12775,10 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     };
     this.debouncedStoreCamera = () => {
       const storeCamera = lodash.debounce(() => {
-        var _a2, _b;
-        (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
-        (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
+        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);

package/dist/index.mjs

@@ -233,25 +233,25 @@ function deleteRecord(db2, key) {
     request.onerror = () => reject();
   });
 }
-var __defProp$8 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 var __async$b = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -334,7 +334,7 @@ function fetchWithTimeout(resource, options) {
     const { timeout = 1e4 } = options;
     const controller = new AbortController();
     const id = setTimeout(() => controller.abort(), timeout);
-    const response = yield fetch(resource, __spreadProps$4(__spreadValues$8({}, options), {
+    const response = yield fetch(resource, __spreadProps$5(__spreadValues$9({}, options), {
       signal: controller.signal,
       headers: {
         "content-type": "text/plain"
@@ -601,6 +601,25 @@ const isRootDirPage = (scenePath) => {
   }, 0);
   return delimiterCount === 1;
 };
+var __defProp$8 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 class AppListeners {
   constructor(manager) {
     this.manager = manager;
@@ -701,7 +720,13 @@ class AppListeners {
       }
     };
     this.moveCameraHandler = (payload) => {
-      this.manager.mainView.moveCamera(payload);
+      const size$ = this.manager.mainViewProxy.size$;
+      if (size$.value) {
+        const size = this.manager.mainView.size;
+        const diff = Math.max(size.height / size$.value.height, size.width / size$.value.width);
+        const nextCamera = __spreadProps$4(__spreadValues$8({}, payload), { scale: payload.scale * diff });
+        this.manager.mainView.moveCamera(nextCamera);
+      }
     };
     this.moveCameraToContainHandler = (payload) => {
       this.manager.mainView.moveCameraToContain(payload);
@@ -1223,10 +1248,13 @@ class AppPageStateImpl {
     }
   }
   toObject() {
-    var _a2, _b;
+    var _a2, _b, _c;
     return {
       index: ((_a2 = this.view) == null ? void 0 : _a2.focusSceneIndex) || 0,
-      length: ((_b = this.sceneNode) == null ? void 0 : _b.scenes.length) || 0
+      length: ((_b = this.sceneNode) == null ? void 0 : _b.scenes.length) || 0,
+      pages: ((_c = this.sceneNode) == null ? void 0 : _c.scenes.map((name) => {
+        return `${this.scenePath}/${name}`;
+      })) || []
     };
   }
   destroy() {
@@ -1244,15 +1272,17 @@ class CameraSynchronizer {
         this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
       }
     };
-    this.onRemoteUpdate = throttle((camera, size) => {
+    this.onRemoteUpdate = throttle((camera, size, skipUpdate = false) => {
       this.remoteCamera = camera;
       this.remoteSize = size;
-      if (this.remoteSize && this.rect) {
-        requestAnimationFrame(() => {
-          this.moveCameraToContian(size);
+      if (skipUpdate)
+        return;
+      requestAnimationFrame(() => {
+        if (this.remoteSize && this.rect) {
+          this.moveCameraToContian(this.remoteSize);
           this.moveCamera(camera);
-        });
-      }
+        }
+      });
     }, 32);
   }
   setView(view) {
@@ -1270,8 +1300,10 @@ class CameraSynchronizer {
         width: size.width,
         height: size.height,
         originX: currentCamera.centerX - size.width / 2,
-        originY: currentCamera.centerY - size.height / 2
+        originY: currentCamera.centerY - size.height / 2,
+        animationMode: AnimationMode.Immediately
       });
+      this.moveCamera(this.remoteCamera);
     }
   }
   onLocalCameraUpdate(camera) {
@@ -1355,11 +1387,9 @@ class ViewSync {
     };
     this.subscribeCamera = () => {
       return this.context.camera$.subscribe((camera, skipUpdate) => {
-        if (skipUpdate)
-          return;
         const size = this.context.size$.value;
         if (camera && size) {
-          this.synchronizer.onRemoteUpdate(camera, size);
+          this.synchronizer.onRemoteUpdate(camera, size, skipUpdate);
         }
       });
     };
@@ -2440,6 +2470,10 @@ class MainViewProxy {
       this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
       this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
     };
+    this.saveToCamera$ = () => {
+      const camera = __spreadProps$1(__spreadValues$2({}, this.view.camera), { id: this.manager.uid });
+      this.camera$.setValue(camera, true);
+    };
     this.storeCurrentCamera = () => {
       const iCamera = this.view.camera;
       this.storeCamera(__spreadValues$2({
@@ -7323,14 +7357,14 @@ class Cursor {
     var _a2;
     if (this.member) {
       const icons = this.cursorManager.applianceIcons;
-      let applianceSrc = icons[ApplianceNames.shape];
+      let applianceSrc;
       if (this.memberApplianceName === ApplianceNames.pencilEraser) {
         const size = ((_a2 = this.member) == null ? void 0 : _a2.memberState.pencilEraserSize) || 1;
         applianceSrc = icons[`${this.memberApplianceName}${size}`];
       } else {
         applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
       }
-      return applianceSrc;
+      return applianceSrc || icons[ApplianceNames.shape];
     }
   }
   updateMember() {
@@ -7505,7 +7539,8 @@ class CursorManager {
     return (_a2 = this.manager.focusApp) == null ? void 0 : _a2.view;
   }
   updateCursor(event, clientX, clientY) {
-    if (this.wrapperRect && this.manager.canOperate) {
+    const self = findMemberByUid(this.manager.room, this.manager.uid);
+    if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self)) {
       const view = event.type === "main" ? this.manager.mainView : this.focusView;
       const point = this.getPoint(view, clientX, clientY);
       if (point) {
@@ -7563,11 +7598,19 @@ class PageStateImpl {
     var _a2;
     return ((_a2 = this.manager) == null ? void 0 : _a2.mainViewScenesLength) || 0;
   }
+  getPages() {
+    var _a2;
+    return ((_a2 = this.manager.callbacksNode) == null ? void 0 : _a2.scenes.map((sceneName) => {
+      var _a22;
+      return `${(_a22 = this.manager.callbacksNode) == null ? void 0 : _a22.path}${sceneName}`;
+    })) || [];
+  }
   toObject() {
     const index2 = this.index >= this.length ? this.length - 1 : this.index;
     return {
       index: index2,
-      length: this.length
+      length: this.length,
+      pages: this.getPages()
     };
   }
 }
@@ -12708,7 +12751,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.61";
+    this.version = "1.0.0-canary.63";
     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);
@@ -12727,9 +12770,10 @@ const _WindowManager = class extends InvisiblePlugin {
     };
     this.debouncedStoreCamera = () => {
       const storeCamera = debounce(() => {
-        var _a2, _b;
-        (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
-        (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
+        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);

package/dist/index.umd.js

@@ -231,25 +231,25 @@
       request.onerror = () => reject();
     });
   }
-  var __defProp$8 = Object.defineProperty;
-  var __defProps$4 = Object.defineProperties;
-  var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-  var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-  var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-  var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __spreadValues$8 = (a, b) => {
+  var __defProp$9 = Object.defineProperty;
+  var __defProps$5 = Object.defineProperties;
+  var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$9 = (a, b) => {
     for (var prop in b || (b = {}))
-      if (__hasOwnProp$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    if (__getOwnPropSymbols$8)
-      for (var prop of __getOwnPropSymbols$8(b)) {
-        if (__propIsEnum$8.call(b, prop))
-          __defNormalProp$8(a, prop, b[prop]);
+      if (__hasOwnProp$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
+    if (__getOwnPropSymbols$9)
+      for (var prop of __getOwnPropSymbols$9(b)) {
+        if (__propIsEnum$9.call(b, prop))
+          __defNormalProp$9(a, prop, b[prop]);
       }
     return a;
   };
-  var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+  var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
   var __async$b = (__this, __arguments, generator) => {
     return new Promise((resolve, reject) => {
       var fulfilled = (value) => {
@@ -332,7 +332,7 @@
       const { timeout = 1e4 } = options;
       const controller = new AbortController();
       const id = setTimeout(() => controller.abort(), timeout);
-      const response = yield fetch(resource, __spreadProps$4(__spreadValues$8({}, options), {
+      const response = yield fetch(resource, __spreadProps$5(__spreadValues$9({}, options), {
         signal: controller.signal,
         headers: {
           "content-type": "text/plain"
@@ -599,6 +599,25 @@
     }, 0);
     return delimiterCount === 1;
   };
+  var __defProp$8 = Object.defineProperty;
+  var __defProps$4 = Object.defineProperties;
+  var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+  var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+  var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+  var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+  var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __spreadValues$8 = (a, b) => {
+    for (var prop in b || (b = {}))
+      if (__hasOwnProp$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
+    if (__getOwnPropSymbols$8)
+      for (var prop of __getOwnPropSymbols$8(b)) {
+        if (__propIsEnum$8.call(b, prop))
+          __defNormalProp$8(a, prop, b[prop]);
+      }
+    return a;
+  };
+  var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
   class AppListeners {
     constructor(manager) {
       this.manager = manager;
@@ -699,7 +718,13 @@
         }
       };
       this.moveCameraHandler = (payload) => {
-        this.manager.mainView.moveCamera(payload);
+        const size$ = this.manager.mainViewProxy.size$;
+        if (size$.value) {
+          const size = this.manager.mainView.size;
+          const diff = Math.max(size.height / size$.value.height, size.width / size$.value.width);
+          const nextCamera = __spreadProps$4(__spreadValues$8({}, payload), { scale: payload.scale * diff });
+          this.manager.mainView.moveCamera(nextCamera);
+        }
       };
       this.moveCameraToContainHandler = (payload) => {
         this.manager.mainView.moveCameraToContain(payload);
@@ -1221,10 +1246,13 @@
       }
     }
     toObject() {
-      var _a2, _b;
+      var _a2, _b, _c;
       return {
         index: ((_a2 = this.view) == null ? void 0 : _a2.focusSceneIndex) || 0,
-        length: ((_b = this.sceneNode) == null ? void 0 : _b.scenes.length) || 0
+        length: ((_b = this.sceneNode) == null ? void 0 : _b.scenes.length) || 0,
+        pages: ((_c = this.sceneNode) == null ? void 0 : _c.scenes.map((name) => {
+          return `${this.scenePath}/${name}`;
+        })) || []
       };
     }
     destroy() {
@@ -1242,15 +1270,17 @@
           this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
         }
       };
-      this.onRemoteUpdate = lodash.throttle((camera, size) => {
+      this.onRemoteUpdate = lodash.throttle((camera, size, skipUpdate = false) => {
         this.remoteCamera = camera;
         this.remoteSize = size;
-        if (this.remoteSize && this.rect) {
-          requestAnimationFrame(() => {
-            this.moveCameraToContian(size);
+        if (skipUpdate)
+          return;
+        requestAnimationFrame(() => {
+          if (this.remoteSize && this.rect) {
+            this.moveCameraToContian(this.remoteSize);
             this.moveCamera(camera);
-          });
-        }
+          }
+        });
       }, 32);
     }
     setView(view) {
@@ -1268,8 +1298,10 @@
           width: size.width,
           height: size.height,
           originX: currentCamera.centerX - size.width / 2,
-          originY: currentCamera.centerY - size.height / 2
+          originY: currentCamera.centerY - size.height / 2,
+          animationMode: whiteWebSdk.AnimationMode.Immediately
         });
+        this.moveCamera(this.remoteCamera);
       }
     }
     onLocalCameraUpdate(camera) {
@@ -1353,11 +1385,9 @@
       };
       this.subscribeCamera = () => {
         return this.context.camera$.subscribe((camera, skipUpdate) => {
-          if (skipUpdate)
-            return;
           const size = this.context.size$.value;
           if (camera && size) {
-            this.synchronizer.onRemoteUpdate(camera, size);
+            this.synchronizer.onRemoteUpdate(camera, size, skipUpdate);
           }
         });
       };
@@ -2438,6 +2468,10 @@
         this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
         this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
       };
+      this.saveToCamera$ = () => {
+        const camera = __spreadProps$1(__spreadValues$2({}, this.view.camera), { id: this.manager.uid });
+        this.camera$.setValue(camera, true);
+      };
       this.storeCurrentCamera = () => {
         const iCamera = this.view.camera;
         this.storeCamera(__spreadValues$2({
@@ -7321,14 +7355,14 @@
       var _a2;
       if (this.member) {
         const icons = this.cursorManager.applianceIcons;
-        let applianceSrc = icons[whiteWebSdk.ApplianceNames.shape];
+        let applianceSrc;
         if (this.memberApplianceName === whiteWebSdk.ApplianceNames.pencilEraser) {
           const size = ((_a2 = this.member) == null ? void 0 : _a2.memberState.pencilEraserSize) || 1;
           applianceSrc = icons[`${this.memberApplianceName}${size}`];
         } else {
           applianceSrc = icons[this.memberApplianceName || whiteWebSdk.ApplianceNames.shape];
         }
-        return applianceSrc;
+        return applianceSrc || icons[whiteWebSdk.ApplianceNames.shape];
       }
     }
     updateMember() {
@@ -7503,7 +7537,8 @@
       return (_a2 = this.manager.focusApp) == null ? void 0 : _a2.view;
     }
     updateCursor(event, clientX, clientY) {
-      if (this.wrapperRect && this.manager.canOperate) {
+      const self2 = findMemberByUid(this.manager.room, this.manager.uid);
+      if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self2)) {
         const view = event.type === "main" ? this.manager.mainView : this.focusView;
         const point = this.getPoint(view, clientX, clientY);
         if (point) {
@@ -7561,11 +7596,19 @@
       var _a2;
       return ((_a2 = this.manager) == null ? void 0 : _a2.mainViewScenesLength) || 0;
     }
+    getPages() {
+      var _a2;
+      return ((_a2 = this.manager.callbacksNode) == null ? void 0 : _a2.scenes.map((sceneName) => {
+        var _a22;
+        return `${(_a22 = this.manager.callbacksNode) == null ? void 0 : _a22.path}${sceneName}`;
+      })) || [];
+    }
     toObject() {
       const index2 = this.index >= this.length ? this.length - 1 : this.index;
       return {
         index: index2,
-        length: this.length
+        length: this.length,
+        pages: this.getPages()
       };
     }
   }
@@ -12706,7 +12749,7 @@
   const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
     constructor(context) {
       super(context);
-      this.version = "1.0.0-canary.61";
+      this.version = "1.0.0-canary.63";
       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);
@@ -12725,9 +12768,10 @@
       };
       this.debouncedStoreCamera = () => {
         const storeCamera = lodash.debounce(() => {
-          var _a2, _b;
-          (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
-          (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
+          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);

package/dist/src/AppManager.d.ts

@@ -6,7 +6,7 @@ import { ViewManager } from "./View/ViewManager";
 import { Val } from "value-enhancer";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
-import type { Displayer, Room, SceneState, Size } from "white-web-sdk";
+import type { Displayer, Room, ScenesCallbacksNode, SceneState, Size } from "white-web-sdk";
 import type { AddAppParams, TeleBoxRect } from "./index";
 import type { Member } from "./Helper";
 import { ScrollMode } from "./View/ScrollMode";
@@ -25,7 +25,7 @@ export declare class AppManager {
     boxManager?: BoxManager;
     scrollMode?: ScrollMode;
     scrollBaseSize$: Val<Size | null, any>;
-    private callbacksNode;
+    callbacksNode: ScenesCallbacksNode | null;
     private appCreateQueue;
     private sceneIndex$;
     private focused$;

package/dist/src/Page/PageController.d.ts

@@ -6,6 +6,7 @@ export declare type AddPageParams = {
 export declare type PageState = {
     index: number;
     length: number;
+    pages: string[];
 };
 export interface PageController {
     nextPage: () => Promise<boolean>;

package/dist/src/PageState.d.ts

@@ -5,5 +5,6 @@ export declare class PageStateImpl {
     constructor(manager: AppManager);
     get index(): number;
     get length(): number;
+    getPages(): string[];
     toObject(): PageState;
 }

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

@@ -12,7 +12,7 @@ export declare class CameraSynchronizer {
     constructor(saveCamera: SaveCamera);
     setRect: (rect: TeleBoxRect, updateCamera?: boolean) => void;
     setView(view: View): void;
-    onRemoteUpdate: import("lodash").DebouncedFunc<(camera: ICamera, size: ISize) => void>;
+    onRemoteUpdate: import("lodash").DebouncedFunc<(camera: ICamera, size: ISize, skipUpdate?: any) => void>;
     onRemoteSizeUpdate(size: ISize): void;
     onLocalCameraUpdate(camera: ICamera): void;
     private moveCameraToContian;

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

@@ -28,6 +28,7 @@ export declare class MainViewProxy {
     private get didRelease();
     start(): void;
     addCameraReaction: () => void;
+    saveToCamera$: () => void;
     storeCurrentCamera: () => void;
     storeCurrentSize: () => void;
     storeCamera: (camera: ICamera) => void;

package/package.json

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

package/pnpm-lock.yaml

@@ -46,7 +46,7 @@ specifiers:
 
 dependencies:
   '@juggle/resize-observer': 3.3.1
-  '@netless/synced-store': 2.0.7_white-web-sdk@2.16.35
+  '@netless/synced-store': 2.0.7_white-web-sdk@2.16.36
   '@netless/telebox-insider': 1.0.0-alpha.37
   emittery: 0.11.0
   lodash: 4.17.21
@@ -88,7 +88,7 @@ devDependencies:
   vite: 3.1.3_less@4.1.3
   vite-plugin-dts: 1.5.0_vite@3.1.3
   vitest: 0.23.4_d3e3zazviv5held4lo66xldmcm
-  white-web-sdk: 2.16.35
+  white-web-sdk: 2.16.36
 
 packages:
 
@@ -266,7 +266,7 @@ packages:
   /@netless/canvas-polyfill/0.0.4:
     resolution: {integrity: sha512-7NzsJrba0R/mq/l10SkIZQwbrNVJyPxZYrjK6xL3Ts732iWAVuS2UB0u3s6iGeUVcqV39A679yva8APWRl4M0A==}
 
-  /@netless/synced-store/2.0.7_white-web-sdk@2.16.35:
+  /@netless/synced-store/2.0.7_white-web-sdk@2.16.36:
     resolution: {integrity: sha512-E5ukXMTLa0Mlhlv9Rcy3MJSAM5kwiLoXQy42OCSIFdBR8jf0BKbSUXSjnA8J+FZq6UidNtGaadDWjhwlM1z5MA==}
     peerDependencies:
       white-web-sdk: '>= 2.16'
@@ -275,7 +275,7 @@ packages:
       remitter: 0.2.6
       side-effect-manager: 1.2.1
       value-enhancer: 1.3.2
-      white-web-sdk: 2.16.35
+      white-web-sdk: 2.16.36
     dev: false
 
   /@netless/telebox-insider/1.0.0-alpha.37:
@@ -4858,8 +4858,8 @@ packages:
       isexe: 2.0.0
     dev: true
 
-  /white-web-sdk/2.16.35:
-    resolution: {integrity: sha512-HgpTTPN0np9/4UWDVBFV05bpfEBHyN0mseXKdUjS+31VcjbvLhbeX7kSM3wRAEkh7svmzZAAUhOWwBHD14MACA==}
+  /white-web-sdk/2.16.36:
+    resolution: {integrity: sha512-qmyi6Slkxkbo7+FM3MudieQGhhKRtEztQaTDya1whl7ntD1BRavZzpRBgnJ1NMX2A1wKjILGHXRg9zyZhnAZaA==}
     dependencies:
       '@juggle/resize-observer': 3.3.1
       '@netless/canvas-polyfill': 0.0.4

package/src/App/AppPageStateImpl.ts

@@ -59,6 +59,9 @@ export class AppPageStateImpl {
         return {
             index: this.view?.focusSceneIndex || 0,
             length: this.sceneNode?.scenes.length || 0,
+            pages: this.sceneNode?.scenes.map(name => {
+                return `${this.scenePath}/${name}`;
+            }) || [],
         };
     }
 

package/src/App/WhiteboardView.ts

@@ -83,7 +83,6 @@ export class WhiteBoardView implements PageController {
         const scenes = Array.isArray(scene) ? scene : [scene || {}];
         if (after) {
             const nextIndex = this.pageState.index + 1;
-            
             putScenes(this.appContext.room, scenePath, scenes, nextIndex);
         } else {
             putScenes(this.appContext.room, scenePath, scenes);

package/src/AppListener.ts

@@ -135,7 +135,13 @@ export class AppListeners {
     }
 
     private moveCameraHandler = (payload: Camera) => {
-        this.manager.mainView.moveCamera(payload);
+        const size$ = this.manager.mainViewProxy.size$;
+        if (size$.value) {
+            const size = this.manager.mainView.size;
+            const diff = Math.max(size.height / size$.value.height, size.width / size$.value.width);
+            const nextCamera = { ...payload, scale: payload.scale * diff };
+            this.manager.mainView.moveCamera(nextCamera);
+        }
     }
 
     private moveCameraToContainHandler = (payload: Rectangle & { animationMode?: AnimationMode }) => {

package/src/AppManager.ts

@@ -68,7 +68,7 @@ export class AppManager {
     public scrollMode?: ScrollMode;
     public scrollBaseSize$ = new Val<Size | null>(null);
 
-    private callbacksNode: ScenesCallbacksNode | null = null;
+    public callbacksNode: ScenesCallbacksNode | null = null;
     private appCreateQueue = new AppCreateQueue();
     private sceneIndex$ = new Val<number | undefined>(undefined);
     private focused$ = new Val<string | undefined>(undefined);

package/src/Cursor/Cursor.ts

@@ -164,14 +164,14 @@ export class Cursor {
     private getIcon() {
         if (this.member) {
             const icons = this.cursorManager.applianceIcons;
-            let applianceSrc = icons[ApplianceNames.shape];
+            let applianceSrc;
             if (this.memberApplianceName === ApplianceNames.pencilEraser) {
                 const size = this.member?.memberState.pencilEraserSize || 1;
                 applianceSrc = icons[`${this.memberApplianceName}${size}`];
             } else {
                 applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
             }
-            return applianceSrc;
+            return applianceSrc || icons[ApplianceNames.shape];
         }
     }
 

package/src/Cursor/index.ts

@@ -10,6 +10,7 @@ import type { PositionType } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import { ApplianceMap } from "./icons";
+import { findMemberByUid } from "../Helper";
 
 export type EventType = {
     type: PositionType;
@@ -116,7 +117,8 @@ export class CursorManager {
     }, 48);
 
     private updateCursor(event: EventType, clientX: number, clientY: number) {
-        if (this.wrapperRect && this.manager.canOperate) {
+        const self = findMemberByUid(this.manager.room, this.manager.uid);
+        if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self)) {
             const view = event.type === "main" ? this.manager.mainView : this.focusView;
             const point = this.getPoint(view, clientX, clientY);
             if (point) {

package/src/Page/PageController.ts

@@ -8,6 +8,7 @@ export type AddPageParams = {
 export type PageState = {
     index: number;
     length: number;
+    pages: string[];
 };
 
 export interface PageController {

package/src/PageState.ts

@@ -18,11 +18,18 @@ export class PageStateImpl {
         return this.manager?.mainViewScenesLength || 0;
     }
 
+    public getPages() {
+        return this.manager.callbacksNode?.scenes.map(sceneName => {
+            return `${this.manager.callbacksNode?.path}${sceneName}`;
+        }) || [];
+    }
+
     public toObject(): PageState {
         const index = this.index >= this.length ? this.length - 1 : this.index;
         return {
             index,
             length: this.length,
+            pages: this.getPages(),
         };
     }
 }

package/src/ReconnectRefresher.ts

@@ -83,7 +83,7 @@ export class ReconnectRefresher {
         this._onReconnected();
     }
 
-    public add(id: string, func: any) {
+    public add(id: string, func: any): () => void {
         const disposer = this.disposers.get(id);
         if (disposer && isFunction(disposer)) {
             disposer();

package/src/View/CameraSynchronizer.ts

@@ -27,15 +27,16 @@ export class CameraSynchronizer {
     }
 
     // 远端 Camera 或者 size 更新
-    public onRemoteUpdate = throttle((camera: ICamera, size: ISize) => {
+    public onRemoteUpdate = throttle((camera: ICamera, size: ISize, skipUpdate = false) => {
         this.remoteCamera = camera;
         this.remoteSize = size;
-        if (this.remoteSize && this.rect) {
-            requestAnimationFrame(() => {
-                this.moveCameraToContian(size);
+        if (skipUpdate) return;;
+        requestAnimationFrame(() => {
+            if (this.remoteSize && this.rect) {
+                this.moveCameraToContian(this.remoteSize);
                 this.moveCamera(camera);
-            });
-        }
+            }
+        });
     }, 32);
 
     public onRemoteSizeUpdate(size: ISize) {
@@ -49,7 +50,9 @@ export class CameraSynchronizer {
                 height: size.height,
                 originX: currentCamera.centerX - (size.width / 2),
                 originY: currentCamera.centerY - (size.height / 2),
+                animationMode: AnimationMode.Immediately,
             });
+            this.moveCamera(this.remoteCamera);
         }
     }
 

package/src/View/MainView.ts

@@ -130,6 +130,11 @@ export class MainViewProxy {
         this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
     };
 
+    public saveToCamera$ = () => {
+        const camera = { ...this.view.camera, id: this.manager.uid };
+        this.camera$.setValue(camera, true);
+    }
+
     public storeCurrentCamera = () => {
         const iCamera = this.view.camera;
         this.storeCamera({

package/src/View/ViewSync.ts

@@ -89,10 +89,9 @@ export class ViewSync {
 
     private subscribeCamera = () => {
         return this.context.camera$.subscribe((camera, skipUpdate) => {
-            if (skipUpdate) return;
             const size = this.context.size$.value;
             if (camera && size) {
-                this.synchronizer.onRemoteUpdate(camera, size);
+                this.synchronizer.onRemoteUpdate(camera, size, skipUpdate);
             }
         });
     };

package/src/index.ts

@@ -852,6 +852,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
 
     private debouncedStoreCamera = () => {
         const storeCamera = debounce(() => {
+            this.appManager?.mainViewProxy.saveToCamera$();
             this.appManager?.mainViewProxy.storeCurrentCamera();
             this.appManager?.mainViewProxy.storeCurrentSize();
             this.mainView.callbacks.off("onCameraUpdated", storeCamera);