@netless/window-manager 1.0.0-canary.12 → 1.0.0-canary.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.12",
+  "version": "1.0.0-canary.15",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -23,13 +23,13 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "1.0.0-alpha.15",
+    "@netless/telebox-insider": "1.0.0-alpha.17",
     "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",
+    "value-enhancer": "^1.3.0",
     "video.js": ">=7"
   },
   "devDependencies": {

package/pnpm-lock.yaml

@@ -4,7 +4,7 @@ specifiers:
   '@juggle/resize-observer': ^3.3.1
   '@netless/app-docs-viewer': ^0.2.9
   '@netless/app-media-player': 0.1.0-beta.5
-  '@netless/telebox-insider': 1.0.0-alpha.14
+  '@netless/telebox-insider': 1.0.0-alpha.17
   '@rollup/plugin-commonjs': ^20.0.0
   '@rollup/plugin-node-resolve': ^13.0.4
   '@rollup/plugin-url': ^6.1.0
@@ -35,7 +35,7 @@ specifiers:
   svelte: ^3.42.4
   typescript: ^4.5.5
   uuid: ^7.0.3
-  value-enhancer: ^1.2.1
+  value-enhancer: ^1.3.0
   video.js: '>=7'
   vite: ^2.5.3
   vitest: ^0.14.1
@@ -43,13 +43,13 @@ specifiers:
 
 dependencies:
   '@juggle/resize-observer': registry.npmmirror.com/@juggle/resize-observer/3.3.1
-  '@netless/telebox-insider': 1.0.0-alpha.14
+  '@netless/telebox-insider': 1.0.0-alpha.17
   emittery: registry.npmmirror.com/emittery/0.9.2
   lodash: registry.npmmirror.com/lodash/4.17.21
   p-retry: registry.npmmirror.com/p-retry/4.6.1
   side-effect-manager: 1.1.0
   uuid: registry.npmmirror.com/uuid/7.0.3
-  value-enhancer: 1.2.1
+  value-enhancer: 1.3.0
   video.js: registry.npmmirror.com/video.js/7.18.1
 
 devDependencies:
@@ -97,8 +97,8 @@ packages:
       vanilla-lazyload: 17.6.1
     dev: true
 
-  /@netless/telebox-insider/1.0.0-alpha.14:
-    resolution: {integrity: sha512-kDhoxnEZUOCjQDf/lDgHVBb/TaKywlnUXhSlSbyVDWefcVXcaXi6/zEPwDR0gMYWCqQQoEPFz9Jr8hd8hcEkyQ==}
+  /@netless/telebox-insider/1.0.0-alpha.17:
+    resolution: {integrity: sha512-FoiX5tKKT26EyDiO/gT4P7rhr9Pvkcf2RJuSPxt5PO0ij73vUaU6OwjXJzZkcnIZlHPHhleJoqt1difaJpmyLQ==}
     dependencies:
       '@juggle/resize-observer': 3.3.1
       '@types/shallowequal': 1.1.1
@@ -1002,10 +1002,6 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: true
 
-  /value-enhancer/1.2.1:
-    resolution: {integrity: sha512-11IrGi9xmVbr3twzuaMRrdUGzhdaE4eXvT6qYZlB5VrhK5uQzSPlYOEBlsIGH+dMvkakNkWGNIbxdZi87/MWuQ==}
-    dev: false
-
   /value-enhancer/1.3.0:
     resolution: {integrity: sha512-shI9N5ML4MGwD6bMu/My1l1+REFqhZGOuIjDN5Gf+k7gACfY2k8WtJEcqgdZMfepwivfhQxIfZp0riobUDZpDQ==}
     dev: false

package/src/App/AppContext.ts

@@ -110,6 +110,12 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
             this.ensurePageSize(size);
         }
         this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, removeViewWrapper, this.ensurePageSize);
+        this.appProxy.sideEffectManager.add(() => {
+            return () => {
+                this.whiteBoardView?.destroy();
+                this.whiteBoardView = undefined;
+            }
+        });
         return this.whiteBoardView;
     }
 

package/src/App/AppProxy.ts

@@ -58,10 +58,10 @@ export class AppProxy implements PageRemoveService {
     private stateKey: string;
     public _pageState: AppPageStateImpl;
 
-    public appResult?: NetlessApp<any>;
-    public appContext?: AppContext<any, any>;
+    public appResult?: NetlessApp;
+    public appContext?: AppContext;
 
-    private sideEffectManager = new SideEffectManager();
+    public sideEffectManager = new SideEffectManager();
     private valManager = new ValManager();
 
     private fullPath$ = this.valManager.attach(new Val<string | undefined>(undefined));
@@ -563,6 +563,7 @@ export class AppProxy implements PageRemoveService {
             const fullPath = this._pageState.getFullPath(index);
             if (fullPath) {
                 this.setFullPath(fullPath);
+                setScenePath(this.manager.room, fullPath);
             }
         }
     }
@@ -584,12 +585,13 @@ export class AppProxy implements PageRemoveService {
         this.size$.setValue(iSize);
     }
 
-    public moveCamera = (camera: Camera) => {
+    public moveCamera = (camera: Partial<Camera>) => {
         if (!this.camera$.value) {
             return;
         }
-        const nextCamera = { ...this.camera$.value, ...camera };
+        const nextCamera = { ...this.camera$.value, ...camera, id: this.uid };
         this.storeCamera(nextCamera);
+        this.camera$.setValue(nextCamera);
     };
 
     public async destroy(
@@ -664,6 +666,10 @@ export class AppProxy implements PageRemoveService {
         , "size");
     }
 
+    public onFocus = () => {
+        this.setScenePath();
+    }
+
     public close(): Promise<void> {
         return this.destroy(true, true, false);
     }

package/src/App/WhiteboardView.ts

@@ -1,5 +1,6 @@
 import { putScenes } from "../Utils/Common";
 import { Val } from "value-enhancer";
+import { pick } from "lodash";
 
 import type { ReadonlyVal } from "value-enhancer";
 import type { AddPageParams, PageController, PageState } from "../Page";
@@ -8,8 +9,11 @@ import type { AppContext } from "./AppContext";
 import type { Camera, View } from "white-web-sdk";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 
+export type WhiteBoardViewCamera = Omit<Camera, "scale">;
+
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;
+    public readonly camera$: ReadonlyVal<WhiteBoardViewCamera>;
 
     constructor(
         public view: View,
@@ -20,16 +24,30 @@ export class WhiteBoardView implements PageController {
     ) {
         const pageState$ = new Val<PageState>(appProxy.pageState);
         this.pageState$ = pageState$;
-        appProxy.appEmitter.on("pageStateChange", pageState => {
-            pageState$.setValue(pageState);
-        });
+        this.appProxy.sideEffectManager.add(() =>
+            appProxy.appEmitter.on("pageStateChange", pageState => {
+                pageState$.setValue(pageState);
+            })
+        );
+        const camera$ = new Val<WhiteBoardViewCamera>(
+            pick(this.view.camera, ["centerX", "centerY"])
+        );
+        this.camera$ = camera$;
+        this.appProxy.sideEffectManager.add(() =>
+            appProxy.camera$.subscribe(camera => {
+                if (camera) {
+                    camera$.setValue(pick(camera, ["centerX", "centerY"]));
+                }
+            })
+        );
+        view.disableCameraTransform = true;
     }
 
     public get pageState() {
         return this.pageState$.value;
     }
 
-    public moveCamera(camera: Camera) {
+    public moveCamera(camera: Partial<WhiteBoardViewCamera>) {
         this.appProxy.moveCamera(camera);
     }
 
@@ -84,6 +102,7 @@ export class WhiteBoardView implements PageController {
 
     public destroy() {
         this.pageState$.destroy();
+        this.camera$.destroy();
         this.removeViewWrapper();
     }
 }

package/src/AppManager.ts

@@ -138,7 +138,7 @@ export class AppManager {
                 sceneName = this.callbacksNode?.scenes[nextIndex];
             }
             if (sceneName) {
-                this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
+                await this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
             }
             await this.setMainViewSceneIndex(nextIndex);
         } else {
@@ -153,7 +153,7 @@ export class AppManager {
      * 所以需要关掉所有开启了 view 的 app
      */
     public async onRootDirRemoved(needClose = true) {
-        this.setMainViewScenePath(INIT_DIR);
+        await this.setMainViewScenePath(INIT_DIR);
         this.createRootDirScenesCallback();
 
         for (const [id, appProxy] of this.appProxies.entries()) {
@@ -161,9 +161,9 @@ export class AppManager {
                 await this.closeApp(id, needClose);
             }
         }
-        // 删除了根目录的 scenes 之后 mainview 需要重新绑定, 否则主白板会不能渲染
+        // 删除了根目录的 scenes 之后 main-view 需要重新绑定, 否则主白板会不能渲染
         this.mainViewProxy.rebind();
-        emitter.emit("rootDirRemoved");
+        await emitter.emit("rootDirRemoved");
         this.updateRootDirRemoving(false);
     }
 
@@ -448,6 +448,7 @@ export class AppManager {
                 setTimeout(() => {
                     const appProxy = this.appProxies.get(focused);
                     if (appProxy) {
+                        appProxy.onFocus();
                         appRegister.notifyApp(appProxy.kind, "focus", { appId: focused });
                     }
                 }, 0);
@@ -461,9 +462,9 @@ export class AppManager {
     );
 
     /**
-     * 插件更新 attributes 时的回调
+     * 插件更新 apps 时的回调
      *
-     * @param {*} attributes
+     * @param {*} apps
      * @memberof WindowManager
      */
     public async _attributesUpdateCallback(apps: any) {
@@ -657,6 +658,7 @@ export 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);
@@ -678,7 +680,7 @@ export class AppManager {
     public displayerWritableListener = (isReadonly: boolean) => {
         const isWritable = !isReadonly;
         const isManualWritable =
-            this.windowManger.readonly === undefined || this.windowManger.readonly === false;
+            this.windowManger.readonly === undefined || !this.windowManger.readonly;
         if (this.windowManger.readonly === undefined) {
             this.boxManager?.setReadonly(isReadonly);
         } else {
@@ -687,7 +689,7 @@ export class AppManager {
         this.appProxies.forEach(appProxy => {
             appProxy.emitAppIsWritableChange();
         });
-        if (isWritable === true) {
+        if (isWritable) {
             if (this.room && this.room.disableSerialization === true) {
                 this.room.disableSerialization = false;
             }

package/src/BoxManager.ts

@@ -80,7 +80,7 @@ export const createBoxManager = (
             setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
-            boxEmitter
+            boxEmitter,
         },
         options
     );
@@ -99,17 +99,17 @@ export class BoxManager {
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
         this.sideEffectManager.add(() => [
             // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
-            this.teleBoxManager._state$.reaction(state => {
+            this.teleBoxManager.onValChanged("state", state => {
                 callbacks.emit("boxStateChange", state);
                 emitter.emit("boxStateChange", state);
             }),
-            this.teleBoxManager._darkMode$.reaction(darkMode => {
+            this.teleBoxManager.onValChanged("darkMode", darkMode => {
                 callbacks.emit("darkModeChange", darkMode);
             }),
-            this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+            this.teleBoxManager.onValChanged("prefersColorScheme", colorScheme => {
                 callbacks.emit("prefersColorSchemeChange", colorScheme);
             }),
-            this.teleBoxManager._minimized$.reaction((minimized, skipUpdate) => {
+            this.teleBoxManager.onValChanged("minimized", (minimized, skipUpdate) => {
                 if (skipUpdate) {
                     return;
                 }
@@ -125,7 +125,7 @@ export class BoxManager {
                     }
                 }
             }),
-            this.teleBoxManager._maximized$.reaction((maximized, skipUpdate) => {
+            this.teleBoxManager.onValChanged("maximized", (maximized, skipUpdate) => {
                 if (skipUpdate) {
                     return;
                 }
@@ -139,7 +139,11 @@ export class BoxManager {
             this.teleBoxManager.events.on(
                 "intrinsic_move",
                 debounce((box: ReadonlyTeleBox): void => {
-                    boxEmitter.emit("move", { appId: box.id, x: box.intrinsicX, y: box.intrinsicY });
+                    boxEmitter.emit("move", {
+                        appId: box.id,
+                        x: box.intrinsicX,
+                        y: box.intrinsicY,
+                    });
                 }, 50)
             ),
             this.teleBoxManager.events.on(

package/src/PageState.ts

@@ -6,7 +6,7 @@ import type { PageState } from "./Page";
 export class PageStateImpl {
     constructor(private manager: AppManager) {
         emitter.on("changePageState", () => {
-            callbacks.emit("pageStateChange", this.toObject());
+          callbacks.emit("pageStateChange", this.toObject());
         });
     }
 

package/src/View/CameraSynchronizer.ts

@@ -19,7 +19,7 @@ export class CameraSynchronizer {
         if (this.remoteCamera && this.remoteSize) {
             this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
         }
-    }, 50);
+    }, 10);
 
     public setView(view: View) {
         this.view = view;
@@ -46,10 +46,11 @@ export class CameraSynchronizer {
                     animationMode: AnimationMode.Immediately,
                 });
             }
+            moveCamera(); 
             // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
             delay(moveCamera, 50);
         }
-    }, 50);
+    }, 10);
 
     public onRemoteSizeUpdate(size: ISize) {
         if (this.rect) {

package/src/index.ts

@@ -906,7 +906,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         if (WindowManager.container) {
             this.bindContainer(WindowManager.container);
         }
-        this.appManager?.refresher?.refresh();
+        this.appManager?.refresher.refresh();
     }
 
     public setContainerSizeRatio(ratio: number) {