@netless/window-manager 1.0.0-canary.6 → 1.0.0-canary.7

package/dist/index.es.js

@@ -1300,11 +1300,11 @@ class AppViewSync {
         }
       }));
     }
-    combine([this.appProxy.camera$, this.appProxy.size$]).subscribe(([camera, size2]) => {
+    this.sem.add(() => combine([this.appProxy.camera$, this.appProxy.size$]).subscribe(([camera, size2]) => {
       if (camera && size2) {
         this.synchronizer.onRemoteUpdate(camera, size2);
       }
-    });
+    }));
   }
   destroy() {
     this.sem.flushAll();
@@ -1662,6 +1662,7 @@ class AppProxy {
             scale: 1,
             id: this.uid
           });
+          this.camera$.setValue(toJS(this.appAttributes.camera));
         }
         if (!this.size$.value && box.contentStageRect) {
           this.storeSize({
@@ -1669,6 +1670,7 @@ class AppProxy {
             width: (_a2 = box.contentStageRect) == null ? void 0 : _a2.width,
             height: (_b = box.contentStageRect) == null ? void 0 : _b.height
           });
+          this.size$.setValue(toJS(this.appAttributes.size));
         }
         this.appViewSync = new AppViewSync(this);
         this.sideEffectManager.add(() => () => {
@@ -4016,10 +4018,10 @@ class Y$3 {
     this._sideEffect.addDisposer(re2.reaction((e3, t3) => {
       le2.setValue({ width: Math.max(a2, e3.width), height: Math.max(n2, e3.height) }, t3);
     }));
-    const de2 = new Val({ x: l2, y: $ }, { compare: shallowequal }), ce2 = combine([le2, O2], ([e3, t3]) => ({ width: t3.width * e3.width, height: t3.height * e3.height }), { compare: shallowequal }), me2 = combine([de2, O2], ([e3, t3]) => ({ x: e3.x * t3.width + t3.x, y: e3.y * t3.height + t3.y }), { compare: shallowequal }), ue2 = new Val(R2), ge2 = combine([ue2, F2], ([e3, t3]) => e3 != null ? e3 : t3), xe2 = new Val(null), pe2 = new Val(P2.value, { compare: shallowequal }), fe2 = new Val(_2), $e2 = new A$2({ namespace: i2, root$: xe2, rootRect$: pe2, ratio$: combine([fe2, j2], ([e3, t3]) => e3 != null ? e3 : t3), highlightStage$: ge2 });
+    const de2 = new Val({ x: l2, y: $ }, { compare: shallowequal }), ce2 = combine([le2, O2], ([e3, t3]) => ({ width: t3.width * e3.width, height: t3.height * e3.height }), { compare: shallowequal }), me2 = combine([de2, O2], ([e3, t3]) => ({ x: e3.x * t3.width + t3.x, y: e3.y * t3.height + t3.y }), { compare: shallowequal }), ue2 = new Val(R2), ge2 = combine([ue2, F2], ([e3, t3]) => e3 != null ? e3 : t3), pe2 = new Val(null), xe2 = new Val(P2.value, { compare: shallowequal }), fe2 = new Val(_2), $e2 = new A$2({ namespace: i2, root$: pe2, rootRect$: xe2, ratio$: combine([fe2, j2], ([e3, t3]) => e3 != null ? e3 : t3), highlightStage$: ge2 });
     this._sideEffect.addDisposer(() => $e2.destroy());
     withReadonlyValueEnhancer(this, { darkMode: D2, fence: T2, minimized: V2, maximized: W2, readonly: Y2, rootRect: P2, managerStageRect: O2, collectorRect: Z2 });
-    const be2 = { zIndex: ee2, focus: te2, $userContent: ie2, $userStage: se2, $userFooter: ae2, $userStyles: ne2, state: oe2, minSize: re2, pxMinSize: he2, intrinsicSize: le2, intrinsicCoord: de2, pxIntrinsicSize: ce2, pxIntrinsicCoord: me2, highlightStage: ge2, boxHighlightStage: ue2, contentRect: pe2, contentStageRect: $e2.stageRect$ };
+    const be2 = { zIndex: ee2, focus: te2, $userContent: ie2, $userStage: se2, $userFooter: ae2, $userStyles: ne2, state: oe2, minSize: re2, pxMinSize: he2, intrinsicSize: le2, intrinsicCoord: de2, pxIntrinsicSize: ce2, pxIntrinsicCoord: me2, highlightStage: ge2, boxHighlightStage: ue2, contentRect: xe2, contentStageRect: $e2.stageRect$ };
     withReadonlyValueEnhancer(this, be2, G2);
     withValueEnhancer(this, { title: J2, visible: q2, resizable: Q2, draggable: K2, ratio: U2, stageRatio: fe2 }, G2), this.titleBar = B2 || new H$3({ readonly$: Y2, state$: oe2, title$: J2, namespace: this.namespace, onDragStart: (e3) => {
       var t3;
@@ -4028,7 +4030,7 @@ class Y$3 {
       e3 > 0 && this.transform(me2.value.x, me2.value.y, ce2.value.width, ce2.value.height, true);
     })), this._sideEffect.addDisposer(T2.subscribe((e3) => {
       e3 && this.move(me2.value.x, me2.value.y, true);
-    })), this.$box = this.render(), xe2.setValue(this.$content.parentElement);
+    })), this.$box = this.render(), pe2.setValue(this.$content.parentElement);
     const ve2 = (e3, t3) => {
       this._sideEffect.addDisposer(e3.reaction((e4, i3) => {
         i3 || this.events.emit(t3, e4);
@@ -4162,7 +4164,7 @@ class Y$3 {
     r2.className = this.wrapClassName("content") + " tele-fancy-scrollbar", this.$content = r2, this._sideEffect.add(() => {
       const e3 = new W$3(() => {
         const e4 = r2.getBoundingClientRect();
-        this._contentRect$.setValue({ x: e4.x, y: e4.y, width: e4.width, height: e4.height });
+        this._contentRect$.setValue({ x: 0, y: 0, width: e4.width, height: e4.height });
       });
       return e3.observe(r2), () => e3.disconnect();
     }), this._sideEffect.add(() => {
@@ -4214,13 +4216,13 @@ class Y$3 {
       let { pageX: t3, pageY: i3 } = R$3(e3);
       i3 < this.rootRect.y && (i3 = this.rootRect.y);
       const s3 = t3 - l2, c2 = i3 - d2;
-      let { x: m3, y: u3 } = this.pxIntrinsicCoord, { width: g2, height: x2 } = this.pxIntrinsicSize;
+      let { x: m3, y: u3 } = this.pxIntrinsicCoord, { width: g2, height: p2 } = this.pxIntrinsicSize;
       switch (a2) {
         case N$3.North:
-          u3 = o2 + c2, x2 = h - c2;
+          u3 = o2 + c2, p2 = h - c2;
           break;
         case N$3.South:
-          x2 = h + c2;
+          p2 = h + c2;
           break;
         case N$3.West:
           m3 = n2 + s3, g2 = r2 - s3;
@@ -4229,21 +4231,21 @@ class Y$3 {
           g2 = r2 + s3;
           break;
         case N$3.NorthWest:
-          m3 = n2 + s3, u3 = o2 + c2, g2 = r2 - s3, x2 = h - c2;
+          m3 = n2 + s3, u3 = o2 + c2, g2 = r2 - s3, p2 = h - c2;
           break;
         case N$3.NorthEast:
-          u3 = o2 + c2, g2 = r2 + s3, x2 = h - c2;
+          u3 = o2 + c2, g2 = r2 + s3, p2 = h - c2;
           break;
         case N$3.SouthEast:
-          g2 = r2 + s3, x2 = h + c2;
+          g2 = r2 + s3, p2 = h + c2;
           break;
         case N$3.SouthWest:
-          m3 = n2 + s3, g2 = r2 - s3, x2 = h + c2;
+          m3 = n2 + s3, g2 = r2 - s3, p2 = h + c2;
           break;
         default:
           return void this.move(n2 + s3, o2 + c2);
       }
-      this.transform(m3, u3, g2, x2);
+      this.transform(m3, u3, g2, p2);
     }, m2 = (e3) => {
       a2 = void 0, s2 && (k$1(e3), this.$box.classList.toggle(i2, false), this._sideEffect.flush(t2), s2.remove());
     }, u2 = (e3) => {
@@ -4379,7 +4381,7 @@ class F$3 {
           };
         const t3 = new Z$3(() => {
           const t4 = e3.getBoundingClientRect();
-          I2.setValue({ x: t4.x, y: t4.y, width: t4.width, height: t4.height });
+          I2.setValue({ x: 0, y: 0, width: t4.width, height: t4.height });
         });
         return t3.observe(e3), () => t3.disconnect();
       }, "calc-root-rect");
@@ -15495,14 +15497,14 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.6";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.13", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@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.22", "@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", "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", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    this.version = "1.0.0-canary.7";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.14", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@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.22", "@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", "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", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
     this.isReplay = isPlayer(this.displayer);
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.13", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@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.22", "@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", "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", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.14", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.2.1", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@netless/app-media-player": "0.1.0-beta.5", "@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.22", "@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", "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", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.10" } };
   }
   static async mount(params) {
     var _a;