@netless/window-manager 1.0.13-test.12 → 1.0.13-test.14

package/dist/index.mjs

@@ -7791,6 +7791,7 @@ class MainViewProxy {
     this.polling = false;
     this.started = false;
     this.mainViewIsAddListener = false;
+    this.isForcingMainViewDivElement = false;
     this.store = this.manager.store;
     this.viewMode = this.manager.windowManger.viewMode;
     this.sideEffectManager = new o$2();
@@ -7863,10 +7864,15 @@ class MainViewProxy {
         return;
       const target = entry.target;
       const child = target.children[0];
+      const observedSize = {
+        width: entry.contentRect.width,
+        height: entry.contentRect.height
+      };
       console.log("[window-manager] mainViewResizeObserver " + JSON.stringify({
+        sameTarget: target === this.mainView.divElement,
         contentRect: {
-          width: entry.contentRect.width,
-          height: entry.contentRect.height
+          width: observedSize.width,
+          height: observedSize.height
         },
         client: {
           width: target.clientWidth,
@@ -7886,16 +7892,18 @@ class MainViewProxy {
         } : null,
         viewSize: this.mainView.size
       }));
+      this.forceSyncMainViewDivElement("mainViewResizeObserver", observedSize, target);
     };
     this._syncMainViewTimer = 0;
-    this.onCameraOrSizeUpdated = () => {
-      console.log("[window-manager] onCameraOrSizeUpdated  " + JSON.stringify(this.cameraState));
+    this.handleCameraOrSizeUpdated = (source, payload) => {
+      console.log("[window-manager] " + source + " payload " + JSON.stringify(payload));
+      console.log("[window-manager] " + source + " state " + JSON.stringify(this.cameraState));
       if (this.mainView.divElement) {
         const children2 = this.mainView.divElement.children;
-        console.log("[window-manager] onCameraOrSizeUpdated  " + this.mainView.divElement.getBoundingClientRect());
+        console.log("[window-manager] " + source + " rect " + JSON.stringify(this.mainView.divElement.getBoundingClientRect()));
         const child = children2[0];
         if (child) {
-          console.log("[window-manager] child" + JSON.stringify(child.getBoundingClientRect()));
+          console.log("[window-manager] " + source + " child" + JSON.stringify(child.getBoundingClientRect()));
         }
       }
       callbacks$1.emit("cameraStateChange", this.cameraState);
@@ -7905,6 +7913,12 @@ class MainViewProxy {
       }
       this.ensureMainViewSize();
     };
+    this.onCameraUpdated = (camera) => {
+      this.handleCameraOrSizeUpdated("onCameraUpdated", camera);
+    };
+    this.onSizeUpdated = (size2) => {
+      this.handleCameraOrSizeUpdated("onSizeUpdated", size2);
+    };
     this.syncMainView = (room) => {
       if (room.isWritable) {
         console.log("[window-manager] syncMainView  ");
@@ -7925,7 +7939,6 @@ class MainViewProxy {
     });
     const playgroundSizeChangeListener = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
-      this.refreshScreenSizeIfStale();
       this.playgroundSizeChangeListenerLocalConsole.log(
         JSON.stringify(this.mainView.camera),
         JSON.stringify(this.mainView.size),
@@ -7977,22 +7990,46 @@ class MainViewProxy {
     this.moveCamera(this.mainViewCamera);
   }
   refreshScreenSizeIfStale() {
-    var _a;
     const element2 = this.mainView.divElement;
     if (!element2)
       return;
     const { width, height } = element2.getBoundingClientRect();
     if (width <= 0 || height <= 0)
       return;
+    this.forceSyncMainViewDivElement("playgroundSizeChange", { width, height }, element2);
+  }
+  forceSyncMainViewDivElement(reason, observedSize, element2) {
     const { width: viewWidth, height: viewHeight } = this.mainView.size;
-    if (Math.abs(viewWidth - width) > 0.5 || Math.abs(viewHeight - height) > 0.5) {
-      const resizableView = this.mainView;
-      console.log("[window-manager] forceResizeScreen stale size" + JSON.stringify({
-        viewSize: this.mainView.size,
-        domSize: { width, height }
+    if (Math.abs(viewWidth - observedSize.width) <= 0.5 && Math.abs(viewHeight - observedSize.height) <= 0.5) {
+      return;
+    }
+    if (this.isForcingMainViewDivElement) {
+      console.log("[window-manager] skipForceSyncMainViewDivElement " + JSON.stringify({
+        reason,
+        observedSize,
+        viewSize: this.mainView.size
       }));
-      (_a = resizableView.resizeScreen) == null ? void 0 : _a.call(resizableView);
+      return;
     }
+    this.isForcingMainViewDivElement = true;
+    console.log("[window-manager] forceSyncMainViewDivElement " + JSON.stringify({
+      reason,
+      observedSize,
+      viewSize: this.mainView.size,
+      mainViewSize: this.mainViewSize,
+      mainViewCamera: this.mainViewCamera
+    }));
+    this.mainView.divElement = null;
+    this.mainView.divElement = element2;
+    queueMicrotask(() => {
+      const rect = element2.getBoundingClientRect();
+      console.log("[window-manager] forceSyncMainViewDivElementResult " + JSON.stringify({
+        reason,
+        viewSize: this.mainView.size,
+        rect: { width: rect.width, height: rect.height }
+      }));
+      this.isForcingMainViewDivElement = false;
+    });
   }
   start() {
     console.log("[window-manager] start  " + JSON.stringify(this.mainViewSize));
@@ -8004,6 +8041,7 @@ class MainViewProxy {
     if (this.manager.room)
       this.syncMainView(this.manager.room);
     this.started = true;
+    console.log("[window-manager] start end " + JSON.stringify(this.mainViewSize), JSON.stringify(this.mainView.size));
   }
   setCameraAndSize() {
     const camera = { ...this.mainView.camera, id: this.manager.uid };
@@ -8079,13 +8117,13 @@ class MainViewProxy {
   }
   addCameraListener() {
     this.view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
-    this.view.callbacks.on("onCameraUpdated", this.onCameraOrSizeUpdated);
-    this.view.callbacks.on("onSizeUpdated", this.onCameraOrSizeUpdated);
+    this.view.callbacks.on("onCameraUpdated", this.onCameraUpdated);
+    this.view.callbacks.on("onSizeUpdated", this.onSizeUpdated);
   }
   removeCameraListener() {
     this.view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
-    this.view.callbacks.off("onCameraUpdated", this.onCameraOrSizeUpdated);
-    this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
+    this.view.callbacks.off("onCameraUpdated", this.onCameraUpdated);
+    this.view.callbacks.off("onSizeUpdated", this.onSizeUpdated);
   }
   observeMainViewDivElement() {
     this.disconnectMainViewResizeObserver();
@@ -8093,6 +8131,10 @@ class MainViewProxy {
       return;
     if (!this.mainView.divElement)
       return;
+    console.log("[window-manager] observeMainViewDivElement " + JSON.stringify({
+      rect: this.mainView.divElement.getBoundingClientRect(),
+      viewSize: this.mainView.size
+    }));
     this.mainViewResizeObserver = new window.ResizeObserver(this.onResize);
     this.mainViewResizeObserver.observe(this.mainView.divElement);
   }
@@ -8139,6 +8181,7 @@ class MainViewProxy {
     this.started = false;
   }
   destroy() {
+    console.log("[window-manager] destroy  ");
     this.removeMainViewListener();
     this.disconnectMainViewResizeObserver();
     this.stop();
@@ -9063,12 +9106,12 @@ class ContainerResizeObserver {
   }
   observePlaygroundSize(container, sizer, wrapper) {
     console.log(`[window-manager] observePlaygroundSize ${JSON.stringify(container.getBoundingClientRect())}, ${JSON.stringify(sizer.getBoundingClientRect())}, ${JSON.stringify(wrapper.getBoundingClientRect())}`);
-    this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
+    this.updateSizer(container.getBoundingClientRect(), sizer, wrapper, "observePlaygroundSize");
     this.containerResizeObserver = new ResizeObserver$2((entries) => {
       var _a;
       const containerRect = (_a = entries[0]) == null ? void 0 : _a.contentRect;
       if (containerRect) {
-        this.updateSizer(containerRect, sizer, wrapper);
+        this.updateSizer(containerRect, sizer, wrapper, "containerResizeObserver");
         console.log(`[window-manager] containerResizeObserver ${JSON.stringify(containerRect)}`);
         this.emitter.emit("playgroundSizeChange", containerRect);
       }
@@ -9076,12 +9119,12 @@ class ContainerResizeObserver {
     this.disposer = this.emitter.on("containerSizeRatioUpdate", () => {
       const containerRect = container.getBoundingClientRect();
       console.log(`[window-manager] containerSizeRatioUpdate ${JSON.stringify(containerRect)}`);
-      this.updateSizer(containerRect, sizer, wrapper);
+      this.updateSizer(containerRect, sizer, wrapper, "containerSizeRatioUpdate");
       this.emitter.emit("playgroundSizeChange", containerRect);
     });
     this.containerResizeObserver.observe(container);
   }
-  updateSizer({ width, height }, sizer, wrapper) {
+  updateSizer({ width, height }, sizer, wrapper, origin) {
     if (width && height) {
       if (height / width > WindowManager.containerSizeRatio) {
         height = width * WindowManager.containerSizeRatio;
@@ -9093,7 +9136,7 @@ class ContainerResizeObserver {
       wrapper.style.width = `${width}px`;
       wrapper.style.height = `${height}px`;
       wrapper.style.backgroundColor = "green";
-      console.log(`[window-manager] updateSizer ${JSON.stringify({ width, height })} ${wrapper.style.width} ${wrapper.style.height} ${JSON.stringify(wrapper.getBoundingClientRect())}`);
+      console.log(`[window-manager] updateSizer from ${origin}: ${JSON.stringify({ width, height })} ${wrapper.style.width} ${wrapper.style.height} ${JSON.stringify(wrapper.getBoundingClientRect())}`);
     }
   }
   disconnect() {
@@ -19849,7 +19892,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.13-test.12";
+    this.version = "1.0.13-test.14";
     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;