@netless/window-manager 1.0.0-canary.64 → 1.0.0-canary.66

package/dist/src/View/CameraSynchronizer.d.ts

@@ -9,6 +9,7 @@ export declare class CameraSynchronizer {
     protected rect?: TeleBoxRect;
     protected view?: View;
     protected scale: number;
+    protected cameraUpdating: boolean;
     constructor(saveCamera: SaveCamera);
     setRect: (rect: TeleBoxRect, updateCamera?: boolean) => void;
     setView(view: View): void;

package/dist/src/View/MainView.d.ts

@@ -3,6 +3,7 @@ import { ViewSync } from "./ViewSync";
 import type { ICamera, ISize } from "../AttributesDelegate";
 import type { Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
+import type { MoveCameraParams } from "../typings";
 export declare class MainViewProxy {
     private manager;
     private started;
@@ -18,11 +19,16 @@ export declare class MainViewProxy {
     } | undefined, any>;
     size$: Val<ISize | undefined, any>;
     view$: Val<View | undefined, any>;
+    private cameraUpdatePromise?;
     viewSync?: ViewSync;
     constructor(manager: AppManager);
     createViewSync: () => void;
     private startListenWritableChange;
     ensureCameraAndSize(): void;
+    moveCamera: (camera: MoveCameraParams) => void;
+    moveCameraToPromise: (camera: MoveCameraParams) => Promise<boolean>;
+    private debouncedStoreCamera;
+    private storeCurrentCameraSize;
     private get mainViewCamera();
     private get mainViewSize();
     private get didRelease();

package/dist/src/index.d.ts

@@ -7,7 +7,7 @@ import type { TELE_BOX_STATE } from "./BoxManager";
 import type { Apps, Position, ICamera, ISize } from "./AttributesDelegate";
 import type { Displayer, SceneDefinition, View, Room, InvisiblePluginContext, Camera, CameraBound, Point, CameraState, Player, ImageInformation, SceneState, Size, AnimationMode, Rectangle } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
-import type { ApplianceIcons, ManagerViewMode, NetlessApp, RegisterParams } from "./typings";
+import type { ApplianceIcons, ManagerViewMode, MoveCameraParams, NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManager, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
@@ -241,14 +241,10 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
      * 关闭 APP
      */
     closeApp(appId: string): Promise<void>;
-    moveCamera: (camera: Partial<Camera> & {
-        animationMode?: AnimationMode;
-    }) => void;
+    moveCamera: (camera: MoveCameraParams) => void;
     moveCameraToContain(rectangle: Rectangle & Readonly<{
         animationMode?: AnimationMode;
     }>): void;
-    private debouncedStoreCamera;
-    private storeCamera;
     convertToPointInWorld(point: Point): Point;
     setCameraBound(cameraBound: CameraBound): void;
     onDestroy(): void;

package/dist/src/typings.d.ts

@@ -1,5 +1,5 @@
 import type Emittery from "emittery";
-import type { AnimationMode, ApplianceNames, Displayer, DisplayerState, Player, Room, SceneDefinition, SceneState, View, ViewMode } from "white-web-sdk";
+import type { AnimationMode, ApplianceNames, Camera, Displayer, DisplayerState, Player, Room, SceneDefinition, SceneState, View, ViewMode } from "white-web-sdk";
 import type { AppContext } from "./App";
 import type { ReadonlyTeleBox, TeleBoxRect, TeleBoxFullscreen } from "@netless/telebox-insider";
 import type { PageState } from "./Page";
@@ -81,6 +81,9 @@ export declare type Writeable<T> = {
     -readonly [P in keyof T]: T[P];
 };
 export declare type ManagerViewMode = `${ViewMode}` | "scroll";
+export declare type MoveCameraParams = Partial<Camera> & {
+    animationMode?: AnimationMode;
+};
 export type { AppContext } from "./App/AppContext";
 export type { WhiteBoardView } from "./App";
 export type { ReadonlyTeleBox, TeleBoxRect, TeleBoxFullscreen };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.64",
+  "version": "1.0.0-canary.66",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@netless/app-docs-viewer": "^1.0.0-canary.3",
-    "@netless/app-plyr": "^0.2.3",
+    "@netless/app-plyr": "^0.2.4",
     "@playwright/test": "^1.23.2",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",

package/pnpm-lock.yaml

@@ -3,7 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@juggle/resize-observer': ^3.3.1
   '@netless/app-docs-viewer': ^1.0.0-canary.3
-  '@netless/app-plyr': ^0.2.3
+  '@netless/app-plyr': ^0.2.4
   '@netless/synced-store': ^2.0.7
   '@netless/telebox-insider': 1.0.0-alpha.37
   '@playwright/test': ^1.23.2
@@ -57,7 +57,7 @@ dependencies:
 
 devDependencies:
   '@netless/app-docs-viewer': 1.0.0-canary.3
-  '@netless/app-plyr': 0.2.3
+  '@netless/app-plyr': 0.2.4
   '@playwright/test': 1.23.2
   '@rollup/plugin-commonjs': 20.0.0
   '@rollup/plugin-node-resolve': 13.1.3
@@ -259,8 +259,8 @@ packages:
       vanilla-lazyload: 17.8.3
     dev: true
 
-  /@netless/app-plyr/0.2.3:
-    resolution: {integrity: sha512-qwl/oi1YZqdRmAPjdr6QpgQziQfOD+Mzy8Wh3IM7YY17zvJtL7A9HjuTsAkseZ22knsC1W4vaeDKDo52rW8ykg==}
+  /@netless/app-plyr/0.2.4:
+    resolution: {integrity: sha512-PR2Os9ZoD2Q3K8aQYEsp8oupaYCNfEe6qQCIj2Fi80Mb8RINI1rxtkgZ1cToI9puePs00n7unu1leLO2c4M+HA==}
     dev: true
 
   /@netless/canvas-polyfill/0.0.4:

package/src/View/CameraSynchronizer.ts

@@ -12,6 +12,7 @@ export class CameraSynchronizer {
     protected rect?: TeleBoxRect;
     protected view?: View;
     protected scale = 1;
+    protected cameraUpdating = false;
 
     constructor(protected saveCamera: SaveCamera) {}
 

package/src/View/MainView.ts

@@ -12,6 +12,7 @@ import { ViewSync } from "./ViewSync";
 import type { ICamera, ISize } from "../AttributesDelegate";
 import type { Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
+import type { MoveCameraParams } from "../typings";
 
 export class MainViewProxy {
     private started = false;
@@ -24,6 +25,7 @@ export class MainViewProxy {
     public camera$ = new Val<ICamera | undefined>(undefined);
     public size$ = new Val<ISize | undefined>(undefined);
     public view$ = new Val<View | undefined>(undefined);
+    private cameraUpdatePromise?: Promise<boolean>;
 
     public viewSync?: ViewSync;
 
@@ -100,6 +102,43 @@ export class MainViewProxy {
         }
     }
 
+    public moveCamera = (camera: MoveCameraParams) => {
+        this.debouncedStoreCamera();
+        this.moveCameraToPromise(camera);
+    };
+
+    public moveCameraToPromise = (camera: MoveCameraParams) => {
+        const promise = new Promise<boolean>((resolve) => {
+            const cameraListener = debounce(() => {
+                this.mainView.callbacks.off("onCameraUpdated", cameraListener);
+                this.cameraUpdatePromise = undefined;
+                resolve(true);
+            }, 50);
+            this.mainView.callbacks.on("onCameraUpdated", cameraListener);
+            this.mainView.moveCamera(camera);
+        });
+        this.cameraUpdatePromise = promise;
+        return promise;
+    }
+
+    private debouncedStoreCamera = () => {
+        this.storeCurrentSize();
+        const cameraListener = debounce(() => {
+            this.saveToCamera$();
+            this.storeCurrentCameraSize();
+            this.mainView.callbacks.off("onCameraUpdated", cameraListener);
+        }, 50);
+        this.mainView.callbacks.on("onCameraUpdated", cameraListener);
+    }
+
+    private storeCurrentCameraSize = debounce(async () => {
+        if (this.cameraUpdatePromise) {
+            await this.cameraUpdatePromise;
+        }
+        this.storeCurrentCamera();
+        this.storeCurrentSize();
+    }, 500);
+
     private get mainViewCamera() {
         return this.store.getMainViewCamera();
     }
@@ -141,11 +180,14 @@ export class MainViewProxy {
     public storeCurrentSize = () => {
         const rect = this.manager.boxManager?.stageRect;
         if (rect) {
-            this.storeSize({
+            const size = {
                 id: this.manager.uid,
                 width: rect.width,
                 height: rect.height
-            });
+            }
+            if (!isEqual(size, this.mainViewSize)) {
+                this.storeSize(size);
+            }
         }
     }
 

package/src/View/ScrollMode.ts

@@ -76,6 +76,7 @@ export class ScrollMode {
 
         this.sideEffect.add(() => {
             const onCameraUpdated = (camera: Camera): void => {
+                if (!this.manager.canOperate) return;
                 const halfWbHeight = size$.value.height / 2 / scale$.value;
                 const scrollTop = camera.centerY;
                 this.scrollStorage.setState({

package/src/index.ts

@@ -10,7 +10,7 @@ import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
-import { isEqual, isNull, isObject, isNumber, omit, debounce } from "lodash";
+import { isEqual, isNull, isObject, isNumber, omit } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
@@ -49,7 +49,7 @@ import type {
     Rectangle,
 } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
-import type { ApplianceIcons, ManagerViewMode, NetlessApp, RegisterParams } from "./typings";
+import type { ApplianceIcons, ManagerViewMode, MoveCameraParams, NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManager, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
@@ -830,14 +830,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         return this.appManager?.closeApp(appId);
     }
 
-    public moveCamera = (camera: Partial<Camera> & { animationMode?: AnimationMode } ): void => {
+    public moveCamera = (camera: MoveCameraParams): void => {
         const pureCamera = omit(camera, ["animationMode"]);
         const mainViewCamera = { ...this.mainView.camera };
         if (isEqual({ ...mainViewCamera, ...pureCamera }, mainViewCamera)) return;
-        this.debouncedStoreCamera();
-        this.mainView.moveCamera(camera);
+        this.appManager?.mainViewProxy.moveCamera(camera);
         this.appManager?.dispatchInternalEvent(Events.MoveCamera, camera);
-    };
+    }
 
     public moveCameraToContain(
         rectangle: Rectangle &
@@ -845,25 +844,11 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
                 animationMode?: AnimationMode;
             }>
     ): void {
-        this.debouncedStoreCamera();
+        // this.debouncedStoreCamera();
         this.mainView.moveCameraToContain(rectangle);
         this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
     }
 
-    private debouncedStoreCamera = () => {
-        const cameraListener = debounce(() => {
-            this.appManager?.mainViewProxy.saveToCamera$();
-            this.storeCamera();
-            this.mainView.callbacks.off("onCameraUpdated", cameraListener);
-        }, 50);
-        this.mainView.callbacks.on("onCameraUpdated", cameraListener);
-    }
-
-    private storeCamera = debounce(() => {
-        this.appManager?.mainViewProxy.storeCurrentCamera();
-        this.appManager?.mainViewProxy.storeCurrentSize();
-    }, 300);
-
     public convertToPointInWorld(point: Point): Point {
         return this.mainView.convertToPointInWorld(point);
     }

package/src/typings.ts

@@ -2,6 +2,7 @@ import type Emittery from "emittery";
 import type {
     AnimationMode,
     ApplianceNames,
+    Camera,
     Displayer,
     DisplayerState,
     Player,
@@ -93,6 +94,8 @@ export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 
 export type ManagerViewMode = `${ViewMode}` | "scroll";
 
+export type MoveCameraParams = Partial<Camera> & { animationMode?: AnimationMode };
+
 export type { AppContext } from "./App/AppContext";
 export type { WhiteBoardView } from "./App";
 export type { ReadonlyTeleBox, TeleBoxRect, TeleBoxFullscreen };