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

package/dist/index.d.ts

@@ -80,8 +80,8 @@ export declare type MountParams = {
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
-    /** 显示 PS 透明背景，默认 true */
-    chessboard?: boolean;
+    /** 是否高亮显示同步区域, 默认为 true */
+    highlightStage?: boolean;
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
@@ -144,6 +144,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     setMainViewSceneIndex(index: number): Promise<void>;
     nextPage(): Promise<boolean>;
     prevPage(): Promise<boolean>;
+    jumpPage(index: number): Promise<boolean>;
     addPage(params?: AddPageParams): Promise<void>;
     /**
      * 删除一页

package/dist/index.es.js

@@ -1041,6 +1041,7 @@ class AppContext {
         this._viewWrapper = void 0;
       };
       view.divElement = viewWrapper;
+      this.appProxy.fireMemberStateChange();
       if (this.isAddApp) {
         this.ensurePageSize(size2);
       }
@@ -1114,7 +1115,7 @@ class AppContext {
     return this.appProxy.view;
   }
   get isWritable() {
-    return this.manager.canOperate;
+    return this.manager.canOperate && !this.destroyed;
   }
   get box() {
     const box = this.boxManager.getBox(this.appId);
@@ -1225,21 +1226,6 @@ class CameraSynchronizer {
         delay(moveCamera, 50);
       }
     }, 50);
-    this.onLocalSizeUpdate = (size2) => {
-      if (this.rect && this.view) {
-        let scale2;
-        if (size2.width < size2.height) {
-          scale2 = this.rect.width / size2.width;
-        } else {
-          scale2 = this.rect.height / size2.height;
-        }
-        const nextScale = this.view.camera.scale / scale2;
-        this.view.moveCamera({
-          scale: nextScale,
-          animationMode: AnimationMode.Immediately
-        });
-      }
-    };
   }
   setRect(rect) {
     this.rect = rect;
@@ -1515,10 +1501,30 @@ class AppProxy {
     this.uid = this.manager.uid;
     this.status = "normal";
     this.sideEffectManager = new SideEffectManager();
-    this.camera$ = new Val(void 0);
-    this.size$ = new Val(void 0);
-    this.box$ = new Val(void 0);
-    this.view$ = new Val(void 0);
+    this.valManager = new ValManager();
+    this.fullPath$ = this.valManager.attach(new Val(void 0));
+    this.camera$ = this.valManager.attach(new Val(void 0));
+    this.size$ = this.valManager.attach(new Val(void 0));
+    this.box$ = this.valManager.attach(new Val(void 0));
+    this.view$ = this.valManager.attach(new Val(void 0));
+    this.fireMemberStateChange = () => {
+      if (this.manager.room) {
+        this.onMemberStateChange(this.manager.room.state.memberState);
+      }
+    };
+    this.onMemberStateChange = (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";
+        }
+      }
+    };
     this.getAppInitState = (id2) => {
       var _a2, _b;
       const attrs = this.store.getAppState(id2);
@@ -1547,8 +1553,7 @@ class AppProxy {
       return payload;
     };
     this.appAttributesUpdateListener = (appId2) => {
-      var _a2, _b, _c;
-      (_a2 = this.manager.refresher) == null ? void 0 : _a2.add(appId2, () => {
+      this.manager.refresher.add(appId2, () => {
         return autorun(() => {
           const attrs = this.manager.attributes[appId2];
           if (attrs) {
@@ -1556,23 +1561,23 @@ class AppProxy {
           }
         });
       });
-      (_b = this.manager.refresher) == null ? void 0 : _b.add(this.stateKey, () => {
+      this.manager.refresher.add(this.stateKey, () => {
         return autorun(() => {
-          var _a3, _b2, _c2;
-          const appState = (_a3 = this.appAttributes) == null ? void 0 : _a3.state;
-          if ((appState == null ? void 0 : appState.zIndex) > 0 && appState.zIndex !== ((_b2 = this.box) == null ? void 0 : _b2.zIndex)) {
-            (_c2 = this.boxManager) == null ? void 0 : _c2.setZIndex(appId2, appState.zIndex);
+          var _a2, _b, _c;
+          const appState = (_a2 = this.appAttributes) == null ? void 0 : _a2.state;
+          if ((appState == null ? void 0 : appState.zIndex) > 0 && appState.zIndex !== ((_b = this.box) == null ? void 0 : _b.zIndex)) {
+            (_c = this.boxManager) == null ? void 0 : _c.setZIndex(appId2, appState.zIndex);
           }
         });
       });
-      (_c = this.manager.refresher) == null ? void 0 : _c.add(`${appId2}-fullPath`, () => {
+      this.manager.refresher.add(`${appId2}-fullPath`, () => {
         return autorun(() => {
-          var _a3;
-          const fullPath = (_a3 = this.appAttributes) == null ? void 0 : _a3.fullPath;
+          var _a2;
+          const fullPath = (_a2 = this.appAttributes) == null ? void 0 : _a2.fullPath;
           this.setFocusScenePathHandler(fullPath);
-          if (this._prevFullPath !== fullPath) {
+          if (this.fullPath$.value !== fullPath) {
             this.notifyPageStateChange();
-            this._prevFullPath = fullPath;
+            this.fullPath$.setValue(fullPath);
           }
         });
       });
@@ -1601,6 +1606,26 @@ class AppProxy {
       const nextCamera = __spreadValues(__spreadValues({}, this.camera$.value), camera);
       this.storeCamera(nextCamera);
     };
+    this.addCameraReaction = () => {
+      this.sideEffectManager.add(() => this.manager.refresher.add(`${this.id}-camera`, () => reaction(() => {
+        var _a2;
+        return (_a2 = this.appAttributes) == null ? void 0 : _a2.camera;
+      }, (camera) => {
+        if (camera && camera.id !== this.uid) {
+          this.camera$.setValue(toJS(camera));
+        }
+      })), "camera");
+    };
+    this.addSizeReaction = () => {
+      this.sideEffectManager.add(() => this.manager.refresher.add(`${this.id}-size`, () => reaction(() => {
+        var _a2;
+        return (_a2 = this.appAttributes) == null ? void 0 : _a2.size;
+      }, (size2) => {
+        if (size2 && size2.id !== this.uid) {
+          this.size$.setValue(toJS(size2));
+        }
+      })), "size");
+    };
     this.kind = params.kind;
     this.id = appId;
     this.appScenePath = `/${this.id}-app-dir`;
@@ -1628,31 +1653,9 @@ class AppProxy {
     }));
     this.camera$.setValue(toJS(this.appAttributes.camera));
     this.size$.setValue(toJS(this.appAttributes.size));
-    this.sideEffectManager.add(() => {
-      return this.manager.refresher.add(`${this.id}-camera`, () => {
-        return reaction(() => {
-          var _a2;
-          return (_a2 = this.appAttributes) == null ? void 0 : _a2.camera;
-        }, (camera) => {
-          if (camera && camera.id !== this.uid) {
-            this.camera$.setValue(toJS(camera));
-          }
-        });
-      });
-    });
-    this.sideEffectManager.add(() => {
-      return this.manager.refresher.add(`${this.id}-size`, () => {
-        return reaction(() => {
-          var _a2;
-          return (_a2 = this.appAttributes) == null ? void 0 : _a2.size;
-        }, (size2) => {
-          if (size2 && size2.id !== this.uid) {
-            this.size$.setValue(toJS(size2));
-          }
-        });
-      });
-    });
-    combine([this.box$, this.view$]).subscribe(([box, view]) => {
+    this.addCameraReaction();
+    this.addSizeReaction();
+    this.sideEffectManager.add(() => combine([this.box$, this.view$]).subscribe(([box, view]) => {
       var _a2, _b;
       if (box && view) {
         if (!this.camera$.value) {
@@ -1678,20 +1681,8 @@ class AppProxy {
           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";
-        }
-      }
     }));
+    this.sideEffectManager.add(() => emitter.on("memberStateChange", this.onMemberStateChange));
   }
   createAppDir() {
     const scenePath = this.scenePath || this.appScenePath;
@@ -1719,7 +1710,7 @@ class AppProxy {
     }
   }
   get view() {
-    return this.manager.viewManager.getView(this.id);
+    return this.view$.value;
   }
   get viewIndex() {
     var _a;
@@ -1975,7 +1966,7 @@ class AppProxy {
     }
   }
   async destroy(needCloseBox, cleanAttrs, skipUpdate, error) {
-    var _a, _b, _c, _d;
+    var _a;
     if (this.status === "destroyed")
       return;
     this.status = "destroyed";
@@ -2000,13 +1991,10 @@ class AppProxy {
     this.appProxies.delete(this.id);
     this.viewManager.destroyView(this.id);
     this.manager.appStatus.delete(this.id);
-    (_b = this.manager.refresher) == null ? void 0 : _b.remove(this.id);
-    (_c = this.manager.refresher) == null ? void 0 : _c.remove(this.stateKey);
-    (_d = this.manager.refresher) == null ? void 0 : _d.remove(`${this.id}-fullPath`);
-    this._prevFullPath = void 0;
-    this.camera$.destroy();
-    this.size$.destroy();
-    this.box$.destroy();
+    this.manager.refresher.remove(this.id);
+    this.manager.refresher.remove(this.stateKey);
+    this.manager.refresher.remove(`${this.id}-fullPath`);
+    this.valManager.destroy();
   }
   close() {
     return this.destroy(true, true, false);
@@ -2071,17 +2059,14 @@ class MainViewProxy {
     this.store = this.manager.store;
     this.sideEffectManager = new SideEffectManager();
     this.startListenWritableChange = () => {
-      this.sideEffectManager.add(() => {
-        return emitter.on("writableChange", (isWritable) => {
-          if (isWritable) {
-            this.ensureCameraAndSize();
-          }
-        });
-      });
+      this.sideEffectManager.add(() => emitter.on("writableChange", (isWritable) => {
+        if (isWritable) {
+          this.ensureCameraAndSize();
+        }
+      }));
     };
     this.addCameraReaction = () => {
-      var _a2;
-      (_a2 = this.manager.refresher) == null ? void 0 : _a2.add(Fields.MainViewCamera, this.cameraReaction);
+      this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
     };
     this.cameraReaction = () => {
       return reaction(() => this.mainViewCamera, (camera) => {
@@ -2090,11 +2075,8 @@ class MainViewProxy {
         }
       }, { fireImmediately: true });
     };
-    this.sizeChangeHandler = debounce((size2) => {
-    }, 30);
     this.onUpdateContainerSizeRatio = () => {
       const size2 = this.store.getMainViewSize();
-      this.sizeChangeHandler(size2);
       if (size2.id === this.manager.uid) {
         this.setCameraAndSize();
       }
@@ -2124,23 +2106,19 @@ class MainViewProxy {
       this.ensureCameraAndSize();
       this.startListenWritableChange();
     });
-    this.sideEffectManager.add(() => {
-      return emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio);
-    });
-    this.sideEffectManager.add(() => {
-      return emitter.on("startReconnect", () => {
+    this.sideEffectManager.add(() => [
+      emitter.on("containerSizeRatioUpdate", this.onUpdateContainerSizeRatio),
+      emitter.on("startReconnect", () => {
         releaseView(this.mainView);
-      });
-    });
+      }),
+      emitter.on("playgroundSizeChange", (rect2) => {
+        this.synchronizer.setRect(rect2);
+      })
+    ]);
     const rect = (_a = this.manager.boxManager) == null ? void 0 : _a.stageRect;
     if (rect) {
       this.synchronizer.setRect(rect);
     }
-    this.sideEffectManager.add(() => {
-      return emitter.on("playgroundSizeChange", (rect2) => {
-        this.synchronizer.setRect(rect2);
-      });
-    });
   }
   ensureCameraAndSize() {
     if (!this.mainViewCamera || !this.mainViewSize) {
@@ -2163,7 +2141,6 @@ class MainViewProxy {
   start() {
     if (this.started)
       return;
-    this.sizeChangeHandler(this.mainViewSize);
     this.addCameraListener();
     this.addCameraReaction();
     this.started = true;
@@ -2257,10 +2234,9 @@ class MainViewProxy {
     this.view.callbacks.off("onSizeUpdated", this.onCameraOrSizeUpdated);
   }
   stop() {
-    var _a, _b;
     this.removeCameraListener();
-    (_a = this.manager.refresher) == null ? void 0 : _a.remove(Fields.MainViewCamera);
-    (_b = this.manager.refresher) == null ? void 0 : _b.remove(Fields.MainViewSize);
+    this.manager.refresher.remove(Fields.MainViewCamera);
+    this.manager.refresher.remove(Fields.MainViewSize);
     this.started = false;
   }
   destroy() {
@@ -2338,6 +2314,8 @@ class AppManager {
     this.mainViewScenesLength = 0;
     this.callbacksNode = null;
     this.appCreateQueue = new AppCreateQueue();
+    this.sceneIndex$ = new Val(void 0);
+    this.focused$ = new Val(void 0);
     this.sideEffectManager = new SideEffectManager();
     this.sceneState = null;
     this.rootDirRemoving = false;
@@ -2505,21 +2483,21 @@ class AppManager {
       });
     };
     this.onMainViewIndexChange = (index2) => {
-      if (index2 !== void 0 && this._prevSceneIndex !== index2) {
+      if (index2 !== void 0 && this.sceneIndex$.value !== index2) {
         callbacks$1.emit("mainViewSceneIndexChange", index2);
         emitter.emit("changePageState");
         if (this.callbacksNode) {
           this.updateSceneState(this.callbacksNode);
         }
-        this._prevSceneIndex = index2;
+        this.sceneIndex$.setValue(index2);
       }
     };
     this.onFocusChange = (focused) => {
       var _a;
-      if (this._prevFocused !== focused) {
+      if (this.focused$.value !== focused) {
         callbacks$1.emit("focusedChange", focused);
-        emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-        this._prevFocused = focused;
+        emitter.emit("focusedChange", { focused, prev: this.focused$.value });
+        this.focused$.setValue(focused);
         if (focused !== void 0) {
           (_a = this.boxManager) == null ? void 0 : _a.focusBox({ appId: focused });
           setTimeout(() => {
@@ -2605,12 +2583,9 @@ class AppManager {
         appProxy.emitAppIsWritableChange();
       });
       if (isWritable === true) {
-        this.mainView.disableCameraTransform = false;
         if (this.room && this.room.disableSerialization === true) {
           this.room.disableSerialization = false;
         }
-      } else {
-        this.mainView.disableCameraTransform = true;
       }
       emitter.emit("writableChange", isWritable);
     };
@@ -2715,7 +2690,7 @@ class AppManager {
     }
   }
   async onCreated() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a;
     await this.attributesUpdateCallback(this.attributes.apps);
     emitter.emit("updateManagerRect");
     boxEmitter.on("move", this.onBoxMove);
@@ -2725,32 +2700,32 @@ class AppManager {
     boxEmitter.on("boxStateChange", this.onBoxStateChange);
     this.addAppsChangeListener();
     this.addAppCloseListener();
-    (_a = this.refresher) == null ? void 0 : _a.add("maximized", () => {
+    this.refresher.add("maximized", () => {
       return autorun(() => {
         var _a2;
         const maximized = this.attributes.maximized;
         (_a2 = this.boxManager) == null ? void 0 : _a2.setMaximized(Boolean(maximized));
       });
     });
-    (_b = this.refresher) == null ? void 0 : _b.add("minimized", () => {
+    this.refresher.add("minimized", () => {
       return autorun(() => {
         const minimized = this.attributes.minimized;
         this.onMinimized(minimized);
       });
     });
-    (_c = this.refresher) == null ? void 0 : _c.add("mainViewIndex", () => {
+    this.refresher.add("mainViewIndex", () => {
       return autorun(() => {
         const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
         this.onMainViewIndexChange(mainSceneIndex);
       });
     });
-    (_d = this.refresher) == null ? void 0 : _d.add("focusedChange", () => {
+    this.refresher.add("focusedChange", () => {
       return autorun(() => {
         const focused = get(this.attributes, "focus");
         this.onFocusChange(focused);
       });
     });
-    (_e = this.refresher) == null ? void 0 : _e.add("registeredChange", () => {
+    this.refresher.add("registeredChange", () => {
       return autorun(() => {
         const registered = get(this.attributes, Fields.Registered);
         this.onRegisteredChange(registered);
@@ -2762,9 +2737,9 @@ class AppManager {
         return;
       this.resetScenePath(mainScenePath);
     }
-    this.displayerWritableListener(!((_f = this.room) == null ? void 0 : _f.isWritable));
+    this.displayerWritableListener(!((_a = this.room) == null ? void 0 : _a.isWritable));
     this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
-    this._prevFocused = this.attributes.focus;
+    this.focused$.setValue(this.attributes.focus);
     this.sideEffectManager.add(() => {
       const redoUndo = new RedoUndo({
         mainView: () => this.mainViewProxy.view,
@@ -3013,8 +2988,8 @@ class AppManager {
     }
     callbacks$1.clearListeners();
     this.sideEffectManager.flushAll();
-    this._prevFocused = void 0;
-    this._prevSceneIndex = void 0;
+    this.sceneIndex$.destroy();
+    this.focused$.destroy();
   }
 }
 /*! *****************************************************************************
@@ -4596,7 +4571,6 @@ class F$3 {
 const createBoxManager = (manager, callbacks2, emitter2, boxEmitter2, options) => {
   return new BoxManager({
     safeSetAttributes: (attributes) => manager.safeSetAttributes(attributes),
-    getMainView: () => manager.mainView,
     updateAppState: (...args) => {
       var _a;
       return (_a = manager.appManager) == null ? void 0 : _a.store.updateAppState(...args);
@@ -4697,9 +4671,6 @@ class BoxManager {
       })
     ]);
   }
-  get mainView() {
-    return this.context.getMainView();
-  }
   get canOperate() {
     return this.context.canOperate();
   }
@@ -4756,7 +4727,8 @@ class BoxManager {
       stageRatio: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.stageRatio,
       root,
       fence: false,
-      prefersColorScheme: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.prefersColorScheme
+      prefersColorScheme: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.prefersColorScheme,
+      highlightStage: createTeleBoxManagerConfig == null ? void 0 : createTeleBoxManagerConfig.highlightStage
     };
     const manager = new F$3(initManagerState);
     if (this.teleBoxManager) {
@@ -15497,7 +15469,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.8";
+    this.version = "1.0.0-canary.9";
     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;
@@ -15561,7 +15533,8 @@ const _WindowManager = class extends InvisiblePlugin {
       collectorContainer: params.collectorContainer,
       collectorStyles: params.collectorStyles,
       prefersColorScheme: params.prefersColorScheme,
-      stageRatio: params.containerSizeRatio
+      stageRatio: params.containerSizeRatio,
+      highlightStage: params.highlightStage
     });
     (_a = manager.appManager) == null ? void 0 : _a.setBoxManager(manager.boxManager);
     if (params.container) {
@@ -15781,6 +15754,17 @@ const _WindowManager = class extends InvisiblePlugin {
       return false;
     }
   }
+  async jumpPage(index2) {
+    if (!this.appManager) {
+      return false;
+    }
+    if (index2 < 0 || index2 >= this.pageState.length) {
+      console.warn(`[WindowManager]: index ${index2} out of range`);
+      return false;
+    }
+    await this.appManager.setMainViewSceneIndex(index2);
+    return true;
+  }
   async addPage(params) {
     if (this.appManager) {
       const after = params == null ? void 0 : params.after;