@netless/window-manager 1.0.0-canary.5 → 1.0.0-canary.8

package/dist/index.es.js

@@ -898,10 +898,12 @@ class Storage {
   }
 }
 class WhiteBoardView {
-  constructor(appContext, appProxy, removeViewWrapper) {
+  constructor(view, appContext, appProxy, removeViewWrapper, ensureSize) {
+    this.view = view;
     this.appContext = appContext;
     this.appProxy = appProxy;
     this.removeViewWrapper = removeViewWrapper;
+    this.ensureSize = ensureSize;
     this.nextPage = async () => {
       const nextIndex = this.pageState.index + 1;
       return this.jumpPage(nextIndex);
@@ -949,9 +951,6 @@ class WhiteBoardView {
       pageState$.setValue(pageState);
     });
   }
-  get view() {
-    return this.appContext.view;
-  }
   get pageState() {
     return this.pageState$.value;
   }
@@ -1033,20 +1032,23 @@ class AppContext {
         view = this.appProxy.createAppDir();
       }
       const viewWrapper = document.createElement("div");
+      this._viewWrapper = viewWrapper;
       viewWrapper.className = "window-manager-view-wrapper";
       (_a = this.box.$content.parentElement) == null ? void 0 : _a.appendChild(viewWrapper);
       const removeViewWrapper = () => {
         var _a2;
         (_a2 = this.box.$content.parentElement) == null ? void 0 : _a2.removeChild(viewWrapper);
+        this._viewWrapper = void 0;
       };
       view.divElement = viewWrapper;
       if (this.isAddApp) {
-        this.initPageSize(size2);
+        this.ensurePageSize(size2);
       }
-      this.whiteBoardView = new WhiteBoardView(this, this.appProxy, removeViewWrapper);
+      this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, removeViewWrapper, this.ensurePageSize);
       return this.whiteBoardView;
     };
-    this.initPageSize = (size2) => {
+    this.ensurePageSize = (size2) => {
+      var _a;
       if (!isNumber(size2))
         return;
       if (!this.appProxy.scenePath)
@@ -1057,11 +1059,8 @@ class AppContext {
         throw Error(`[WindowManager]: size ${size2} muse be in range [1, ${MAX_PAGE_SIZE}]`);
       }
       const needInsert = size2 - this.appProxy.pageState.length;
-      const startPageNumber = this.appProxy.pageState.length;
-      const scenes = new Array(needInsert).fill({}).map((_2, index2) => {
-        return { name: `${startPageNumber + index2 + 1}` };
-      });
-      putScenes(this.room, this.appProxy.scenePath, scenes);
+      const scenes = new Array(needInsert).fill({});
+      (_a = this.room) == null ? void 0 : _a.putScenes(this.appProxy.scenePath, scenes);
     };
     this.getInitScenePath = () => {
       return this.manager.getAppInitPath(this.appId);
@@ -1108,6 +1107,9 @@ class AppContext {
   get displayer() {
     return this.manager.displayer;
   }
+  get destroyed() {
+    return this.appProxy.status === "destroyed";
+  }
   get view() {
     return this.appProxy.view;
   }
@@ -1297,14 +1299,12 @@ class AppViewSync {
           this.synchronizer.setRect(rect);
         }
       }));
-      if (!this.appProxy.size$.value) {
-        this.appProxy.storeSize({
-          id: this.appProxy.uid,
-          width: box.contentStageRect.width,
-          height: box.contentStageRect.height
-        });
-      }
     }
+    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();
@@ -1653,12 +1653,45 @@ class AppProxy {
       });
     });
     combine([this.box$, this.view$]).subscribe(([box, view]) => {
+      var _a2, _b;
       if (box && view) {
-        const appViewSync = new AppViewSync(this);
-        this.appViewSync = appViewSync;
-        this.sideEffectManager.add(() => () => appViewSync.destroy());
+        if (!this.camera$.value) {
+          this.storeCamera({
+            centerX: 0,
+            centerY: 0,
+            scale: 1,
+            id: this.uid
+          });
+          this.camera$.setValue(toJS(this.appAttributes.camera));
+        }
+        if (!this.size$.value && box.contentStageRect) {
+          this.storeSize({
+            id: this.uid,
+            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(() => () => {
+          var _a3;
+          return (_a3 = this.appViewSync) == null ? void 0 : _a3.destroy();
+        });
       }
     });
+    this.sideEffectManager.add(() => emitter.on("memberStateChange", (memberState) => {
+      var _a2, _b;
+      const needPointerEventsNone = memberState.currentApplianceName === "clicker";
+      if (needPointerEventsNone) {
+        if ((_a2 = this.appContext) == null ? void 0 : _a2._viewWrapper) {
+          this.appContext._viewWrapper.style.pointerEvents = "none";
+        }
+      } else {
+        if ((_b = this.appContext) == null ? void 0 : _b._viewWrapper) {
+          this.appContext._viewWrapper.style.pointerEvents = "auto";
+        }
+      }
+    }));
   }
   createAppDir() {
     const scenePath = this.scenePath || this.appScenePath;
@@ -2555,6 +2588,9 @@ class AppManager {
         emitter.emit("roomMembersChange", this.members);
       }
       emitter.emit("observerIdChange", this.displayer.observerId);
+      if (state.memberState) {
+        emitter.emit("memberStateChange", toJS(state.memberState));
+      }
     };
     this.displayerWritableListener = (isReadonly) => {
       var _a, _b;
@@ -3982,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;
@@ -3994,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);
@@ -4128,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(() => {
@@ -4180,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;
@@ -4195,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) => {
@@ -4345,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");
@@ -15461,14 +15497,14 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.5";
-    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.8";
+    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;