@netless/window-manager 1.0.13-test.15 → 1.0.13-test.16

package/dist/index.mjs

@@ -7792,6 +7792,7 @@ class MainViewProxy {
     this.started = false;
     this.mainViewIsAddListener = false;
     this.isForcingMainViewDivElement = false;
+    this.wrapperRectWorkaroundFrame = 0;
     this.store = this.manager.store;
     this.viewMode = this.manager.windowManger.viewMode;
     this.sideEffectManager = new o$2();
@@ -7815,6 +7816,44 @@ class MainViewProxy {
         });
       });
     };
+    this.onWrapperRectChange = (payload) => {
+      this.pendingWrapperRectChange = payload;
+      console.log("[window-manager] onWrapperRectChange " + JSON.stringify({
+        ...payload,
+        viewSize: this.mainView.size
+      }));
+      if (this.wrapperRectWorkaroundFrame) {
+        cancelAnimationFrame(this.wrapperRectWorkaroundFrame);
+      }
+      this.wrapperRectWorkaroundFrame = requestAnimationFrame(this.runWrapperRectWorkaround);
+    };
+    this.runWrapperRectWorkaround = () => {
+      this.wrapperRectWorkaroundFrame = 0;
+      const payload = this.pendingWrapperRectChange;
+      const element2 = this.mainView.divElement;
+      this.pendingWrapperRectChange = void 0;
+      if (!payload || !element2)
+        return;
+      const rect = element2.getBoundingClientRect();
+      const observedSize = { width: rect.width, height: rect.height };
+      const wrapperMatchesDom = Math.abs(payload.width - observedSize.width) <= 0.5 && Math.abs(payload.height - observedSize.height) <= 0.5;
+      const viewIsStale = Math.abs(this.mainView.size.width - observedSize.width) > 0.5 || Math.abs(this.mainView.size.height - observedSize.height) > 0.5;
+      console.log("[window-manager] runWrapperRectWorkaround " + JSON.stringify({
+        origin: payload.origin,
+        wrapperRect: payload,
+        domRect: observedSize,
+        viewSize: this.mainView.size,
+        wrapperMatchesDom,
+        viewIsStale
+      }));
+      if (wrapperMatchesDom && viewIsStale) {
+        this.forceSyncMainViewDivElement(
+          `wrapperRectChange:${payload.origin || "unknown"}`,
+          observedSize,
+          element2
+        );
+      }
+    };
     this.addCameraReaction = () => {
       this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
     };
@@ -7958,6 +7997,9 @@ class MainViewProxy {
     this.sideEffectManager.add(() => {
       return internalEmitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
     });
+    this.sideEffectManager.add(() => {
+      return internalEmitter.on("wrapperRectChange", this.onWrapperRectChange);
+    });
     this.sideEffectManager.add(() => {
       return internalEmitter.on("startReconnect", () => {
         if (!this.didRelease) {
@@ -8181,6 +8223,10 @@ class MainViewProxy {
   }
   destroy() {
     console.log("[window-manager] destroy  ");
+    if (this.wrapperRectWorkaroundFrame) {
+      cancelAnimationFrame(this.wrapperRectWorkaroundFrame);
+      this.wrapperRectWorkaroundFrame = 0;
+    }
     this.removeMainViewListener();
     this.disconnectMainViewResizeObserver();
     this.stop();
@@ -9135,7 +9181,13 @@ class ContainerResizeObserver {
       wrapper.style.width = `${width}px`;
       wrapper.style.height = `${height}px`;
       wrapper.style.backgroundColor = "green";
-      console.log(`[window-manager] updateSizer from ${origin}: ${JSON.stringify({ width, height })} ${wrapper.style.width} ${wrapper.style.height} ${JSON.stringify(wrapper.getBoundingClientRect())}`);
+      const wrapperRect = wrapper.getBoundingClientRect();
+      console.log(`[window-manager] updateSizer from ${origin}: ${JSON.stringify({ width, height })} ${wrapper.style.width} ${wrapper.style.height} ${JSON.stringify(wrapperRect)}`);
+      this.emitter.emit("wrapperRectChange", {
+        width: wrapperRect.width,
+        height: wrapperRect.height,
+        origin
+      });
     }
   }
   disconnect() {
@@ -19891,7 +19943,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.13-test.15";
+    this.version = "1.0.13-test.16";
     this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.3.0", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.53" }, "devDependencies": { "@hyrious/dts": "^0.2.2", "@netless/app-docs-viewer": "^0.2.19", "@netless/app-media-player": "0.1.4", "@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.30", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "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", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "side-effect-manager": "0.1.5", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.9.9", "vitest": "^0.14.1", "white-web-sdk": "^2.16.53" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;