@netless/window-manager 1.0.0-canary.11 → 1.0.0-canary.14

package/dist/index.es.js

@@ -950,6 +950,14 @@ class WhiteBoardView {
     appProxy.appEmitter.on("pageStateChange", (pageState) => {
       pageState$.setValue(pageState);
     });
+    const camera$ = new Val(this.view.camera);
+    this.camera$ = camera$;
+    appProxy.camera$.subscribe((camera) => {
+      if (camera) {
+        camera$.setValue(camera, true);
+      }
+    });
+    view.disableCameraTransform = true;
   }
   get pageState() {
     return this.pageState$.value;
@@ -962,6 +970,7 @@ class WhiteBoardView {
   }
   destroy() {
     this.pageState$.destroy();
+    this.camera$.destroy();
     this.removeViewWrapper();
   }
 }
@@ -1212,7 +1221,7 @@ class CameraSynchronizer {
       if (this.remoteCamera && this.remoteSize) {
         this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
       }
-    }, 50);
+    }, 10);
     this.onRemoteUpdate = throttle((camera, size2) => {
       this.remoteCamera = camera;
       this.remoteSize = size2;
@@ -1233,9 +1242,10 @@ class CameraSynchronizer {
             animationMode: AnimationMode.Immediately
           });
         };
+        moveCamera();
         delay(moveCamera, 50);
       }
-    }, 50);
+    }, 10);
   }
   setView(view) {
     this.view = view;
@@ -1682,6 +1692,9 @@ class AppProxy {
         }
       })), "size");
     };
+    this.onFocus = () => {
+      this.setScenePath();
+    };
     this.kind = params.kind;
     this.id = appId;
     this.appScenePath = `/${this.id}-app-dir`;
@@ -2020,6 +2033,7 @@ class AppProxy {
       const fullPath = this._pageState.getFullPath(index2);
       if (fullPath) {
         this.setFullPath(fullPath);
+        setScenePath(this.manager.room, fullPath);
       }
     }
   }
@@ -2393,7 +2407,7 @@ class AppManager {
           sceneName = (_b = this.callbacksNode) == null ? void 0 : _b.scenes[nextIndex];
         }
         if (sceneName) {
-          this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
+          await this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
         }
         await this.setMainViewSceneIndex(nextIndex);
       } else {
@@ -2561,6 +2575,7 @@ class AppManager {
           setTimeout(() => {
             const appProxy = this.appProxies.get(focused);
             if (appProxy) {
+              appProxy.onFocus();
               appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
             }
           }, 0);
@@ -2611,6 +2626,7 @@ class AppManager {
       if (sceneState) {
         const scenePath = sceneState.scenePath;
         this.appProxies.forEach((appProxy) => {
+          console.log("scenePath", scenePath, appProxy.scenePath);
           if (appProxy.scenePath && scenePath.startsWith(appProxy.scenePath)) {
             appProxy.emitAppSceneStateChange(sceneState);
             appProxy.setFullPath(scenePath);
@@ -2631,7 +2647,7 @@ class AppManager {
     this.displayerWritableListener = (isReadonly) => {
       var _a, _b;
       const isWritable = !isReadonly;
-      const isManualWritable = this.windowManger.readonly === void 0 || this.windowManger.readonly === false;
+      const isManualWritable = this.windowManger.readonly === void 0 || !this.windowManger.readonly;
       if (this.windowManger.readonly === void 0) {
         (_a = this.boxManager) == null ? void 0 : _a.setReadonly(isReadonly);
       } else {
@@ -2640,7 +2656,7 @@ class AppManager {
       this.appProxies.forEach((appProxy) => {
         appProxy.emitAppIsWritableChange();
       });
-      if (isWritable === true) {
+      if (isWritable) {
         if (this.room && this.room.disableSerialization === true) {
           this.room.disableSerialization = false;
         }
@@ -2701,7 +2717,7 @@ class AppManager {
     });
   }
   async onRootDirRemoved(needClose = true) {
-    this.setMainViewScenePath(INIT_DIR);
+    await this.setMainViewScenePath(INIT_DIR);
     this.createRootDirScenesCallback();
     for (const [id2, appProxy] of this.appProxies.entries()) {
       if (appProxy.view) {
@@ -2709,7 +2725,7 @@ class AppManager {
       }
     }
     this.mainViewProxy.rebind();
-    emitter.emit("rootDirRemoved");
+    await emitter.emit("rootDirRemoved");
     this.updateRootDirRemoving(false);
   }
   get eventName() {
@@ -4309,33 +4325,33 @@ class Y$3 {
 }
 var X$3, P$3;
 class O$3 {
-  constructor({ minimized$: e2, readonly$: t2, darkMode$: i2, rootRect$: s2, namespace: a2 = "telebox", styles: n2 = {}, root$: o2 }) {
-    this._sideEffect = new SideEffectManager(), this.namespace = a2;
-    const r2 = new ValManager();
-    this._sideEffect.addDisposer(() => r2.destroy());
-    const h = new Val(void 0), l2 = derive(e2), d2 = new Val(n2), m2 = new Val(document.createElement("button"));
-    withValueEnhancer(this, { styles: d2, $collector: m2 }, r2);
-    withReadonlyValueEnhancer(this, { root: o2 });
-    withReadonlyValueEnhancer(this, { rect: h, visible: l2 }, r2), m2.value.className = this.wrapClassName("collector"), m2.value.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')", this._sideEffect.addDisposer(m2.subscribe((a3) => {
-      this._sideEffect.addEventListener(a3, "click", () => {
+  constructor({ minimized$: e2, readonly$: t2, darkMode$: i2, namespace: s2 = "telebox", styles: a2 = {}, root$: n2 }) {
+    this._sideEffect = new SideEffectManager(), this.namespace = s2;
+    const o2 = new ValManager();
+    this._sideEffect.addDisposer(() => o2.destroy());
+    const r2 = new Val(void 0), h = derive(e2), l2 = new Val(a2), d2 = new Val(document.createElement("button"));
+    withValueEnhancer(this, { styles: l2, $collector: d2 }, o2);
+    withReadonlyValueEnhancer(this, { root: n2 });
+    withReadonlyValueEnhancer(this, { rect: r2, visible: h }, o2), d2.value.className = this.wrapClassName("collector"), d2.value.style.backgroundImage = "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')", this._sideEffect.addDisposer(d2.subscribe((s3) => {
+      this._sideEffect.addEventListener(s3, "click", () => {
         t2.value || e2.setValue(false);
-      }, {}, "telebox-collector-click"), this._sideEffect.addDisposer([l2.subscribe((e3) => {
-        a3.classList.toggle(this.wrapClassName("collector-visible"), e3);
+      }, {}, "telebox-collector-click"), this._sideEffect.addDisposer([h.subscribe((e3) => {
+        s3.classList.toggle(this.wrapClassName("collector-visible"), e3);
       }), t2.subscribe((e3) => {
-        a3.classList.toggle(this.wrapClassName("collector-readonly"), e3);
+        s3.classList.toggle(this.wrapClassName("collector-readonly"), e3);
       }), i2.subscribe((e3) => {
-        a3.classList.toggle(this.wrapClassName("color-scheme-dark"), e3), a3.classList.toggle(this.wrapClassName("color-scheme-light"), !e3);
-      }), d2.subscribe((e3) => {
+        s3.classList.toggle(this.wrapClassName("color-scheme-dark"), e3), s3.classList.toggle(this.wrapClassName("color-scheme-light"), !e3);
+      }), l2.subscribe((e3) => {
         Object.keys(e3).forEach((t3) => {
           const i3 = e3[t3];
-          i3 != null && (a3.style[t3] = i3);
+          i3 != null && (s3.style[t3] = i3);
         });
-      }), o2.subscribe((e3) => {
-        e3 && e3.appendChild(a3);
-      }), combine([e2, s2, o2]).subscribe(([e3, t3, i3]) => {
-        if (e3 && i3) {
-          const { x: e4, y: i4, width: s3, height: n3 } = a3.getBoundingClientRect();
-          h.setValue({ x: e4 - t3.x, y: i4 - t3.y, width: s3, height: n3 });
+      }), n2.subscribe((e3) => {
+        e3 && e3.appendChild(s3);
+      }), combine([e2, n2]).subscribe(([e3, t3]) => {
+        if (e3 && t3) {
+          const { x: e4, y: i3, width: a3, height: n3 } = s3.getBoundingClientRect(), o3 = t3.getBoundingClientRect();
+          r2.setValue({ x: e4 - o3.x, y: i3 - o3.y, width: a3, height: n3 });
         }
       })], "telebox-collector-el");
     }));
@@ -4437,7 +4453,7 @@ class F$3 {
       t3 || this.events.emit(X$3.PrefersColorScheme, e3);
     }));
     const L2 = combine([R2, D2], ([e3, t3]) => t3 === "auto" ? e3 : t3 === "dark"), T2 = combine([z2, B2], ([e3, t3]) => e3 ? C$3.Minimized : t3 ? C$3.Maximized : C$3.Normal);
-    this.collector = n2 != null ? n2 : new O$3({ minimized$: z2, readonly$: y2, darkMode$: L2, namespace: o2, root$: w2, rootRect$: I2 });
+    this.collector = n2 != null ? n2 : new O$3({ minimized$: z2, readonly$: y2, darkMode$: L2, namespace: o2, root$: w2 });
     const V2 = new A$2({ namespace: o2, rootRect$: I2, ratio$: S2, root$: w2, highlightStage$: combine([M2, B2, z2], ([e3, t3, i3]) => e3 && (i3 || !t3)) });
     this._sideEffect.addDisposer(() => V2.destroy());
     const H2 = { darkMode: L2, state: T2, root: w2, rootRect: I2, stageRect: V2.stageRect$ };
@@ -4658,17 +4674,17 @@ class BoxManager {
     const { emitter: emitter2, callbacks: callbacks2, boxEmitter: boxEmitter2 } = context;
     this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
     this.sideEffectManager.add(() => [
-      this.teleBoxManager._state$.reaction((state) => {
+      this.teleBoxManager.onValChanged("state", (state) => {
         callbacks2.emit("boxStateChange", state);
         emitter2.emit("boxStateChange", state);
       }),
-      this.teleBoxManager._darkMode$.reaction((darkMode) => {
+      this.teleBoxManager.onValChanged("darkMode", (darkMode) => {
         callbacks2.emit("darkModeChange", darkMode);
       }),
-      this.teleBoxManager._prefersColorScheme$.reaction((colorScheme) => {
+      this.teleBoxManager.onValChanged("prefersColorScheme", (colorScheme) => {
         callbacks2.emit("prefersColorSchemeChange", colorScheme);
       }),
-      this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
+      this.teleBoxManager.onValChanged("minimized", (minimized, skipUpdate) => {
         if (skipUpdate) {
           return;
         }
@@ -4684,7 +4700,7 @@ class BoxManager {
           }
         }
       }),
-      this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+      this.teleBoxManager.onValChanged("maximized", (maximized, skipUpdate) => {
         if (skipUpdate) {
           return;
         }
@@ -4696,7 +4712,11 @@ class BoxManager {
         });
       }),
       this.teleBoxManager.events.on("intrinsic_move", debounce((box) => {
-        boxEmitter2.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+        boxEmitter2.emit("move", {
+          appId: box.id,
+          x: box.intrinsicX,
+          y: box.intrinsicY
+        });
       }, 50)),
       this.teleBoxManager.events.on("intrinsic_resize", debounce((box) => {
         boxEmitter2.emit("resize", {
@@ -15527,20 +15547,19 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.11";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.15", "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.14";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.16", "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.3.0", "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.15", "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.16", "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.3.0", "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;
     const room = params.room;
     _WindowManager.container = params.container;
-    const containerSizeRatio = params.containerSizeRatio;
     const debug = params.debug;
     const cursor = params.cursor;
     _WindowManager.params = params;
@@ -15577,21 +15596,19 @@ const _WindowManager = class extends InvisiblePlugin {
     if (!manager) {
       throw new Error("[WindowManager]: create manager failed");
     }
-    if (containerSizeRatio) {
-      _WindowManager.containerSizeRatio = containerSizeRatio;
+    if (params.containerSizeRatio) {
+      _WindowManager.containerSizeRatio = params.containerSizeRatio;
     }
+    manager.containerSizeRatio = _WindowManager.containerSizeRatio;
     await manager.ensureAttributes();
     manager.appManager = new AppManager(manager);
     manager._pageState = new PageStateImpl(manager.appManager);
     manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
-    if (containerSizeRatio) {
-      manager.containerSizeRatio = containerSizeRatio;
-    }
     manager.boxManager = createBoxManager(manager, callbacks$1, emitter, boxEmitter, {
       collectorContainer: params.collectorContainer,
       collectorStyles: params.collectorStyles,
       prefersColorScheme: params.prefersColorScheme,
-      stageRatio: containerSizeRatio,
+      stageRatio: _WindowManager.containerSizeRatio,
       highlightStage: params.highlightStage
     });
     (_a = manager.appManager) == null ? void 0 : _a.setBoxManager(manager.boxManager);
@@ -16151,12 +16168,12 @@ const _WindowManager = class extends InvisiblePlugin {
     (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.Refresh);
   }
   _refresh() {
-    var _a, _b, _c;
+    var _a, _b;
     (_a = this.appManager) == null ? void 0 : _a.mainViewProxy.rebind();
     if (_WindowManager.container) {
       this.bindContainer(_WindowManager.container);
     }
-    (_c = (_b = this.appManager) == null ? void 0 : _b.refresher) == null ? void 0 : _c.refresh();
+    (_b = this.appManager) == null ? void 0 : _b.refresher.refresh();
   }
   setContainerSizeRatio(ratio) {
     if (!isNumber(ratio)) {