@netless/window-manager 1.0.0-canary.43 → 1.0.0-canary.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.43",
+  "version": "1.0.0-canary.46",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "1.0.0-alpha.35",
+    "@netless/telebox-insider": "1.0.0-alpha.36",
     "emittery": "^0.11.0",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.2",
@@ -34,7 +34,7 @@
     "value-enhancer": "^1.3.2"
   },
   "devDependencies": {
-    "@netless/app-docs-viewer": "^0.3.0",
+    "@netless/app-docs-viewer": "^0.3.2",
     "@netless/app-plyr": "0.2.0",
     "@playwright/test": "^1.23.2",
     "@rollup/plugin-commonjs": "^20.0.0",

package/pnpm-lock.yaml

@@ -2,9 +2,9 @@ lockfileVersion: 5.4
 
 specifiers:
   '@juggle/resize-observer': ^3.3.1
-  '@netless/app-docs-viewer': ^0.3.0
+  '@netless/app-docs-viewer': ^0.3.2
   '@netless/app-plyr': 0.2.0
-  '@netless/telebox-insider': 1.0.0-alpha.35
+  '@netless/telebox-insider': 1.0.0-alpha.36
   '@playwright/test': ^1.23.2
   '@rollup/plugin-commonjs': ^20.0.0
   '@rollup/plugin-node-resolve': ^13.0.4
@@ -45,7 +45,7 @@ specifiers:
 
 dependencies:
   '@juggle/resize-observer': 3.3.1
-  '@netless/telebox-insider': 1.0.0-alpha.35
+  '@netless/telebox-insider': 1.0.0-alpha.36
   emittery: 0.11.0
   lodash: 4.17.21
   p-retry: 4.6.2
@@ -54,7 +54,7 @@ dependencies:
   value-enhancer: 1.3.2
 
 devDependencies:
-  '@netless/app-docs-viewer': 0.3.0
+  '@netless/app-docs-viewer': 0.3.2
   '@netless/app-plyr': 0.2.0
   '@playwright/test': 1.23.2
   '@rollup/plugin-commonjs': 20.0.0
@@ -231,8 +231,8 @@ packages:
     resolution: {integrity: sha512-6Wci+Tp3CgPt/B9B0a3J4s3yMgLNSku6w5TV6mN+61C71UqsRBv2FUibBf3tPGlNxebgPHMEUzKpb1ggE8KCKw==}
     dev: true
 
-  /@netless/app-docs-viewer/0.3.0:
-    resolution: {integrity: sha512-L+637oRiLvROQzcppvod2Qwmri1qg0GBMuQKow1Qsrt4HT2KYjAXz8ShBELcUs/+ISgvsyont0CipiBrBlbYsA==}
+  /@netless/app-docs-viewer/0.3.2:
+    resolution: {integrity: sha512-3gO8/AblCYQlu5kEnvI6+qJBu0VycSnIyVXfP6xu5obHHfF5aa+JGnDJ1/wZ+8DpvaydhWTuKvv+oVtuXDG0gg==}
     dependencies:
       remitter: 0.2.6
       value-enhancer: 1.3.2
@@ -247,8 +247,8 @@ packages:
     resolution: {integrity: sha512-7NzsJrba0R/mq/l10SkIZQwbrNVJyPxZYrjK6xL3Ts732iWAVuS2UB0u3s6iGeUVcqV39A679yva8APWRl4M0A==}
     dev: true
 
-  /@netless/telebox-insider/1.0.0-alpha.35:
-    resolution: {integrity: sha512-uX/PUEoG/+CoaigeoWH+U07io93n+T89VjJDl5FRnd3gc/QfYf3ASSDQ9+7GjbOBUDUFwYHqVIxEhU67mGXCbw==}
+  /@netless/telebox-insider/1.0.0-alpha.36:
+    resolution: {integrity: sha512-wW0/pmagLt1pzV7PfCWJAAsOm4+RED6GEh2mOSTGS/q6lIOV8Qjoe0MizaR3ild7d6rg/kIFj2II3IYF0d+OiA==}
     dependencies:
       '@juggle/resize-observer': 3.3.1
       '@types/shallowequal': 1.1.1

package/src/View/ViewSync.ts

@@ -30,7 +30,25 @@ export class ViewSync {
     private synchronizer: CameraSynchronizer;
 
     constructor(private context: ViewSyncContext) {
-        this.synchronizer = new CameraSynchronizer((camera: ICamera) => {
+        this.synchronizer = this.createSynchronizer();
+        this.bindView(this.context.view$.value);
+        this.sem.add(() => [
+            this.subscribeView(),
+            this.subscribeCamera(),
+            this.subscribeSize(),
+            this.subscribeStageRect(),
+        ]);
+        const camera$size$ = combine([this.context.camera$, this.context.size$]);
+        camera$size$.reaction(([camera, size]) => {
+            if (camera && size) {
+                this.synchronizer.onRemoteUpdate(camera, size);
+                camera$size$.destroy();
+            }
+        });
+    }
+
+    private createSynchronizer = () => {
+        return new CameraSynchronizer((camera: ICamera) => {
             this.context.camera$.setValue(camera, true);
             const notStoreCamera =
                 this.context.viewMode$ && this.context.viewMode$.value === ViewMode.Freedom;
@@ -40,42 +58,44 @@ export class ViewSync {
                 this.context.storeCamera(camera);
             }
         });
-        this.bindView(this.context.view$.value);
-        this.sem.add(() => [
-            this.context.view$.subscribe(view => {
-                const currentCamera = this.context.camera$.value;
-                if (currentCamera && this.context.size$.value) {
-                    view?.moveCamera({
-                        scale: 1,
-                        animationMode: AnimationMode.Immediately,
-                    });
-                    this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
-                }
-
-                this.bindView(view);
-            }),
-            this.context.camera$.subscribe((camera, skipUpdate) => {
-                const size = this.context.size$.value;
-                if (camera && size && !skipUpdate) {
-                    this.synchronizer.onRemoteUpdate(camera, size);
-                }
-            }),
-            this.context.size$.subscribe(size => {
-                if (size) {
-                    this.synchronizer.onRemoteSizeUpdate(size);
-                }
-            }),
-            this.context.stageRect$.subscribe(rect => {
-                if (rect) {
-                    this.synchronizer.setRect(rect);
-                }
-            })
-        ]);
-        const camera$size$ = combine([this.context.camera$, this.context.size$]);
-        camera$size$.reaction(([camera, size]) => {
+    }
+
+    private subscribeView = () => {
+        return this.context.view$.subscribe(view => {
+            const currentCamera = this.context.camera$.value;
+            if (currentCamera && this.context.size$.value) {
+                view?.moveCamera({
+                    scale: 1,
+                    animationMode: AnimationMode.Immediately,
+                });
+                this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
+            }
+            this.bindView(view);
+        });
+    }
+
+    private subscribeCamera = () => {
+        return this.context.camera$.subscribe((camera, skipUpdate) => {
+            if (skipUpdate) return;
+            const size = this.context.size$.value;
             if (camera && size) {
                 this.synchronizer.onRemoteUpdate(camera, size);
-                camera$size$.destroy();
+            }
+        });
+    }
+
+    private subscribeSize = () => {
+        return this.context.size$.subscribe(size => {
+            if (size) {
+                this.synchronizer.onRemoteSizeUpdate(size);
+            }
+        });
+    }
+
+    private subscribeStageRect = () => {
+        return this.context.stageRect$.subscribe(rect => {
+            if (rect) {
+                this.synchronizer.setRect(rect);
             }
         });
     }

package/src/index.ts

@@ -185,6 +185,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     private static params?: MountParams;
 
     private cameraUpdating = 0;
+    private nextCamera: Camera | null = null;
 
     public containerSizeRatio = WindowManager.containerSizeRatio;
 
@@ -261,6 +262,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             containerStyle: params.containerStyle,
             stageStyle: params.stageStyle,
             fullscreen: params.fullscreen,
+            theme: params.theme,
         });
         manager.appManager?.setBoxManager(manager.boxManager);
         if (params.container) {
@@ -833,27 +835,34 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 this.mainView.moveCamera(camera);
             }
             this.appManager.dispatchInternalEvent(Events.MoveCamera, camera);
-            const onCameraUpdated = () => {
-                if (this.cameraUpdating) {
-                    clearTimeout(this.cameraUpdating);
-                }
-                this.cameraUpdating = setTimeout(() => {
-                    this.mainView.callbacks.off("onCameraUpdated", onCameraUpdated);
-                    clearTimeout(this.cameraUpdating);
-                    this.cameraUpdating = 0;
-                    if (!this.appManager) return;
-                    this.appManager.mainViewProxy.storeCamera({
-                        id: this.appManager.uid,
-                        ...nextCamera
-                    });
-                }, 50);
+            this.mainView.callbacks.off("onCameraUpdated", this.onCameraUpdated);
+            clearTimeout(this.cameraUpdating);
+            this.cameraUpdating = 0;
+            this.mainView.callbacks.on("onCameraUpdated", this.onCameraUpdated);
+            if (nextScale) {
+                this.nextCamera = { ...nextCamera, scale: nextScale };
             }
-            this.mainView.callbacks.off("onCameraUpdated", onCameraUpdated);
-            this.mainView.callbacks.on("onCameraUpdated", onCameraUpdated);
-            
         }
     };
 
+    private onCameraUpdated = () => {
+        if (this.cameraUpdating) {
+            clearTimeout(this.cameraUpdating);
+            this.cameraUpdating = 0;
+        }
+        this.cameraUpdating = setTimeout(() => {
+            this.mainView.callbacks.off("onCameraUpdated", this.onCameraUpdated);
+            clearTimeout(this.cameraUpdating);
+            this.cameraUpdating = 0;
+            if (!this.appManager || !this.nextCamera) return;
+            this.appManager.mainViewProxy.storeCamera({
+                id: this.appManager.uid,
+                ...this.nextCamera
+            });
+            this.nextCamera = null;
+        }, 50);
+    }
+
     public convertToPointInWorld(point: Point): Point {
         return this.mainView.convertToPointInWorld(point);
     }

package/src/typings.ts

@@ -94,3 +94,4 @@ export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } f
 export * from "./Page";
 export * from "./Utils/error";
 export type { Member } from "./Helper";
+export type { TeleBoxManager, TeleBoxManagerQueryConfig } from "@netless/telebox-insider";

package/vite.config.js

@@ -5,8 +5,8 @@ import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { dependencies, peerDependencies, version, devDependencies } from "./package.json"
 import { omit } from "lodash";
 
-export default defineConfig(({ mode }) => {
-    const isProd = mode === "production";
+export default defineConfig(() => {
+    // const isProd = mode === "production";
 
     return {
         test: {
@@ -40,7 +40,8 @@ export default defineConfig(({ mode }) => {
                 entry: path.resolve(__dirname, "src/index.ts"),
                 formats: ["es", "umd", "cjs"],
                 name: "WindowManager",
-                fileName: "index"
+                fileName: "index",
+
             },
             outDir: "dist",
             rollupOptions: {
@@ -49,7 +50,7 @@ export default defineConfig(({ mode }) => {
                     ...peerDependencies,
                 }),
             },
-            minify: isProd
+            minify: false
         },
     };
 })