@netless/window-manager 1.0.0-canary.35 → 1.0.0-canary.36

package/dist/index.es.js

@@ -31,8 +31,8 @@ var __objRest = (source2, exclude) => {
 };
 import pRetry from "p-retry";
 import Emittery from "emittery";
-import { debounce, isObject as isObject$2, has, get, size, mapValues, noop as noop$3, pick, isBoolean as isBoolean$2, isNumber as isNumber$2, throttle, isEqual, omitBy, isUndefined, isInteger, orderBy, isEmpty as isEmpty$2, omit, isFunction as isFunction$2, isNull } from "lodash";
-import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, toJS, WhiteVersion, autorun, listenDisposed, unlistenDisposed, AnimationMode, ViewMode, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin } from "white-web-sdk";
+import { debounce, throttle, isEqual, pick, isObject as isObject$2, has, get, size, mapValues, noop as noop$3, isBoolean as isBoolean$2, isNumber as isNumber$2, omitBy, isUndefined, isInteger, orderBy, isEmpty as isEmpty$2, omit, isFunction as isFunction$2, isNull } from "lodash";
+import { ScenePathType, AnimationMode, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, toJS, WhiteVersion, autorun, listenDisposed, unlistenDisposed, ViewMode, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin } from "white-web-sdk";
 import { v4 } from "uuid";
 import { genUID, SideEffectManager } from "side-effect-manager";
 import { Val as Val$1, combine as combine$1, ValManager, withReadonlyValueEnhancer as withReadonlyValueEnhancer$1, withValueEnhancer as withValueEnhancer$1, derive as derive$1 } from "value-enhancer";
@@ -54,6 +54,8 @@ var Events = /* @__PURE__ */ ((Events2) => {
   Events2["Refresh"] = "Refresh";
   Events2["InitMainViewCamera"] = "InitMainViewCamera";
   Events2["InvokeAttributesUpdateCallback"] = "InvokeAttributesUpdateCallback";
+  Events2["MoveCamera"] = "MoveCamera";
+  Events2["MoveCameraToContain"] = "moveCameraToContain";
   return Events2;
 })(Events || {});
 const MagixEventName = "__WindowManger";
@@ -462,6 +464,61 @@ const isRootDirPage = (scenePath) => {
   }, 0);
   return delimiterCount === 1;
 };
+class CameraSynchronizer {
+  constructor(saveCamera) {
+    this.saveCamera = saveCamera;
+    this.setRect = (rect) => {
+      this.rect = rect;
+      if (this.remoteCamera && this.remoteSize) {
+        this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
+      }
+    };
+    this.onRemoteUpdate = throttle((camera, size2) => {
+      this.remoteCamera = camera;
+      this.remoteSize = size2;
+      if (this.remoteSize && this.rect) {
+        const nextScale = camera.scale * computedMinScale(size2, this.rect);
+        const config = {
+          scale: nextScale
+        };
+        if (camera.centerX !== null) {
+          config.centerX = camera.centerX;
+        }
+        if (camera.centerY !== null) {
+          config.centerY = camera.centerY;
+        }
+        this.moveCamera(config);
+      }
+    }, 10);
+  }
+  setView(view) {
+    this.view = view;
+  }
+  onRemoteSizeUpdate(size2) {
+    this.remoteSize = size2;
+    const needMoveCamera = !isEqual(pick(this.rect, ["width", "height"]), pick(size2, ["width", "height"]));
+    if (this.rect && this.remoteCamera && needMoveCamera) {
+      const scale2 = this.rect.width / size2.width;
+      const nextScale = this.remoteCamera.scale * scale2;
+      this.moveCamera({
+        scale: nextScale
+      });
+    }
+  }
+  onLocalCameraUpdate(camera) {
+    this.saveCamera(camera);
+    this.remoteCamera = camera;
+  }
+  moveCamera(camera) {
+    var _a;
+    (_a = this.view) == null ? void 0 : _a.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: AnimationMode.Immediately }));
+  }
+}
+const computedMinScale = (remoteSize, currentSize) => {
+  const wScale = currentSize.width / remoteSize.width;
+  const hScale = currentSize.height / remoteSize.height;
+  return Math.min(wScale, hScale);
+};
 class AppListeners {
   constructor(manager) {
     this.manager = manager;
@@ -510,6 +567,14 @@ class AppListeners {
             this.manager.attributesUpdateCallback(this.manager.attributes.apps);
             break;
           }
+          case Events.MoveCamera: {
+            this.moveCameraHandler(data.payload);
+            break;
+          }
+          case Events.MoveCameraToContain: {
+            this.moveCameraToContainHandler(data.payload);
+            break;
+          }
         }
       }
     };
@@ -553,6 +618,21 @@ class AppListeners {
         }
       }
     };
+    this.moveCameraHandler = (payload) => {
+      var _a;
+      const cameraPayload = payload;
+      if (payload.scale) {
+        const remoteSize = this.manager.mainViewProxy.size$.value;
+        const currentSize = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
+        if (remoteSize && currentSize) {
+          cameraPayload.scale = payload.scale * computedMinScale(remoteSize, currentSize);
+        }
+      }
+      this.manager.mainView.moveCamera(cameraPayload);
+    };
+    this.moveCameraToContainHandler = (payload) => {
+      this.manager.mainView.moveCameraToContain(payload);
+    };
   }
   get boxManager() {
     return this.manager.boxManager;
@@ -1258,61 +1338,6 @@ class AppPageStateImpl {
     (_a = this.sceneNode) == null ? void 0 : _a.dispose();
   }
 }
-class CameraSynchronizer {
-  constructor(saveCamera) {
-    this.saveCamera = saveCamera;
-    this.setRect = (rect) => {
-      this.rect = rect;
-      if (this.remoteCamera && this.remoteSize) {
-        this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
-      }
-    };
-    this.onRemoteUpdate = throttle((camera, size2) => {
-      this.remoteCamera = camera;
-      this.remoteSize = size2;
-      if (this.remoteSize && this.rect) {
-        const nextScale = camera.scale * computedMinScale(size2, this.rect);
-        const config = {
-          scale: nextScale
-        };
-        if (camera.centerX !== null) {
-          config.centerX = camera.centerX;
-        }
-        if (camera.centerY !== null) {
-          config.centerY = camera.centerY;
-        }
-        this.moveCamera(config);
-      }
-    }, 10);
-  }
-  setView(view) {
-    this.view = view;
-  }
-  onRemoteSizeUpdate(size2) {
-    this.remoteSize = size2;
-    const needMoveCamera = !isEqual(pick(this.rect, ["width", "height"]), pick(size2, ["width", "height"]));
-    if (this.rect && this.remoteCamera && needMoveCamera) {
-      const scale2 = this.rect.width / size2.width;
-      const nextScale = this.remoteCamera.scale * scale2;
-      this.moveCamera({
-        scale: nextScale
-      });
-    }
-  }
-  onLocalCameraUpdate(camera) {
-    this.saveCamera(camera);
-    this.remoteCamera = camera;
-  }
-  moveCamera(camera) {
-    var _a;
-    (_a = this.view) == null ? void 0 : _a.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: AnimationMode.Immediately }));
-  }
-}
-const computedMinScale = (remoteSize, currentSize) => {
-  const wScale = currentSize.width / remoteSize.width;
-  const hScale = currentSize.height / remoteSize.height;
-  return Math.min(wScale, hScale);
-};
 class ViewSync {
   constructor(context) {
     this.context = context;
@@ -2322,6 +2347,16 @@ class MainViewProxy {
         }
       }
     }));
+    this.camera$.reaction((camera) => {
+      if (camera) {
+        callbacks.emit("baseCameraChange", camera);
+      }
+    });
+    this.size$.reaction((size2) => {
+      if (size2) {
+        callbacks.emit("baseSizeChange", size2);
+      }
+    });
   }
   ensureCameraAndSize() {
     var _a;
@@ -5840,6 +5875,15 @@ class BoxManager {
     if (createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.fullscreen) {
       initManagerState.fullscreen = createTeleBoxManagerConfig.fullscreen;
     }
+    if ((createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.defaultBoxBodyStyle) !== void 0) {
+      initManagerState.defaultBoxBodyStyle = createTeleBoxManagerConfig.defaultBoxBodyStyle;
+    }
+    if ((createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.defaultBoxStageStyle) !== void 0) {
+      initManagerState.defaultBoxStageStyle = createTeleBoxManagerConfig.defaultBoxStageStyle;
+    }
+    if (createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.theme) {
+      initManagerState.theme = createTeleBoxManagerConfig.theme;
+    }
     const manager = new TeleBoxManager(initManagerState);
     if (this.teleBoxManager) {
       this.teleBoxManager.destroy();
@@ -12848,7 +12892,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.35";
+    this.version = "1.0.0-canary.36";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.33", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.1.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.3.0", "@netless/app-plyr": "0.2.0", "@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": "^2.5.3", "vite-plugin-dts": "^1.2.1", "vitest": "^0.18.0", "white-web-sdk": "2.16.26" } };
     this.emitter = callbacks;
     this.viewMode = ViewMode.Broadcaster;
@@ -13368,30 +13412,84 @@ const _WindowManager = class extends InvisiblePlugin {
     return (_a = this.appManager) == null ? void 0 : _a.closeApp(appId);
   }
   moveCamera(camera) {
+    var _a;
     const mainViewCamera = __spreadValues({}, this.mainView.camera);
     const nextCamera = __spreadValues(__spreadValues({}, mainViewCamera), camera);
     if (isEqual(nextCamera, mainViewCamera))
       return;
     if (!this.appManager)
       return;
-    this.appManager.mainViewProxy.storeCamera(__spreadValues({
-      id: this.appManager.uid
-    }, nextCamera));
+    if (camera.animationMode === AnimationMode.Immediately) {
+      this.appManager.mainViewProxy.storeCamera(__spreadValues({
+        id: this.appManager.uid
+      }, nextCamera));
+    } else {
+      const remoteCamera = this.appManager.mainViewProxy.size$.value;
+      const currentSize = (_a = this.boxManager) == null ? void 0 : _a.stageRect;
+      let nextScale;
+      if (camera.scale && remoteCamera && currentSize) {
+        nextScale = camera.scale * computedMinScale(remoteCamera, currentSize);
+      }
+      if (nextScale) {
+        this.mainView.moveCamera(__spreadProps(__spreadValues({}, camera), {
+          scale: nextScale
+        }));
+      } else {
+        this.mainView.moveCamera(camera);
+      }
+      this.appManager.dispatchInternalEvent(Events.MoveCamera, camera);
+      setTimeout(() => {
+        if (!this.appManager)
+          return;
+        this.appManager.mainViewProxy.storeCamera(__spreadValues({
+          id: this.appManager.uid
+        }, nextCamera));
+      }, 200);
+    }
   }
   moveCameraToContain(rectangle) {
     if (!this.appManager)
       return;
-    const mainViewSize = this.appManager.mainViewProxy.size$.value;
-    if (mainViewSize) {
-      const wScale = mainViewSize.width / rectangle.width;
-      const hScale = mainViewSize.height / rectangle.height;
-      const nextScale = Math.min(wScale, hScale);
-      this.appManager.mainViewProxy.storeCamera({
+    const camera = {};
+    if (isNumber$2(rectangle.originX)) {
+      camera.centerX = rectangle.originX;
+    }
+    if (isNumber$2(rectangle.originY)) {
+      camera.centerY = rectangle.originY;
+    }
+    if (rectangle.animationMode === AnimationMode.Immediately) {
+      this.appManager.mainViewProxy.storeSize({
         id: this.appManager.uid,
-        scale: nextScale,
-        centerX: rectangle.originX,
-        centerY: rectangle.originY
+        width: rectangle.width,
+        height: rectangle.height
       });
+      this.mainView.moveCameraToContain(rectangle);
+      if (!isEmpty$2(camera) && this.appManager.mainViewProxy.camera$.value) {
+        this.appManager.mainViewProxy.storeCamera(__spreadProps(__spreadValues({}, this.appManager.mainViewProxy.camera$.value), {
+          id: this.appManager.uid,
+          centerX: this.mainView.camera.centerX,
+          centerY: this.mainView.camera.centerY
+        }));
+      }
+    } else {
+      this.appManager.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
+      this.mainView.moveCameraToContain(rectangle);
+      setTimeout(() => {
+        if (!this.appManager)
+          return;
+        this.appManager.mainViewProxy.storeSize({
+          id: this.appManager.uid,
+          width: rectangle.width,
+          height: rectangle.height
+        });
+        if (!isEmpty$2(camera) && this.appManager.mainViewProxy.camera$.value) {
+          this.appManager.mainViewProxy.storeCamera(__spreadProps(__spreadValues({}, this.appManager.mainViewProxy.camera$.value), {
+            id: this.appManager.uid,
+            centerX: this.mainView.camera.centerX,
+            centerY: this.mainView.camera.centerY
+          }));
+        }
+      }, 200);
     }
   }
   convertToPointInWorld(point) {