@netless/window-manager 1.0.0-canary.18 → 1.0.0-canary.19

package/docs/mirgrate-to-1.0.md

@@ -0,0 +1,28 @@
+## 迁移至 `@netless/window-manager@1.0`
+
+### 样式
+
+1.0 之前
+
+```html
+<div class="netless-window-manager-playground">
+    <div class="netless-window-manager-sizer">
+        <div class="netless-window-manager-wrapper">
+            <div class="netless-window-manager-main-view"></div>
+        </div>
+    </div>
+</div>
+```
+
+1.0 之后
+
+```html
+<div class="netless-window-manager-playground">
+    <div class="netless-window-manager-main-view"></div>
+</div>
+```
+
+
+### `APP` 迁移
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.18",
+  "version": "1.0.0-canary.19",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/App/AppContext.ts

@@ -125,7 +125,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     }
 
     public getInitScenePath = () => {
-        return this.manager.getAppInitPath(this.appId);
+        return this.appProxy.scenePath;
     };
 
     /** Get App writable status. */

package/src/App/AppProxy.ts

@@ -30,7 +30,7 @@ import type {
     setAppOptions,
     AppListenerKeys,
 } from "../index";
-import type { SceneState, View, SceneDefinition, Camera , MemberState} from "white-web-sdk";
+import type { SceneState, View, SceneDefinition,  MemberState} from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import type { NetlessApp } from "../typings";
 import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
@@ -117,8 +117,8 @@ export class AppProxy implements PageRemoveService {
                 if (box && view) {
                     if (!this.camera$.value) {
                         this.storeCamera({
-                            centerX: 0,
-                            centerY: 0,
+                            centerX: null,
+                            centerY: null,
                             scale: 1,
                             id: this.uid,
                         });
@@ -595,7 +595,7 @@ export class AppProxy implements PageRemoveService {
         this.size$.setValue(iSize);
     }
 
-    public moveCamera = (camera: Partial<Camera>) => {
+    public moveCamera = (camera: Partial<ICamera>) => {
         if (!this.camera$.value) {
             return;
         }

package/src/App/WhiteboardView.ts

@@ -6,10 +6,11 @@ import type { ReadonlyVal } from "value-enhancer";
 import type { AddPageParams, PageController, PageState } from "../Page";
 import type { AppProxy } from "./AppProxy";
 import type { AppContext } from "./AppContext";
-import type { Camera, View } from "white-web-sdk";
+import type { View } from "white-web-sdk";
 import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { ICamera } from "../AttributesDelegate";
 
-export type WhiteBoardViewCamera = Omit<Camera, "scale">;
+export type WhiteBoardViewCamera = Omit<ICamera, "scale" | "id">;
 
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;

package/src/AttributesDelegate.ts

@@ -2,7 +2,7 @@ import { AppAttributes } from "./constants";
 import { get, pick } from "lodash";
 import { setViewFocusScenePath } from "./Utils/Common";
 import type { AddAppParams, AppSyncAttributes } from "./index";
-import type { Camera, Size, View } from "white-web-sdk";
+import type { Size, View } from "white-web-sdk";
 import type { Cursor } from "./Cursor/Cursor";
 
 export enum Fields {
@@ -41,8 +41,11 @@ export type StoreContext = {
     safeSetAttributes: (attributes: any) => void;
 }
 
-export type ICamera = Camera & { 
+export type ICamera =  & {
     id: string; // room uid
+    centerX: number | null,
+    centerY: number | null,
+    scale: number
 };
 
 export type ISize = Size & {

package/src/View/CameraSynchronizer.ts

@@ -2,12 +2,12 @@ import { AnimationMode } from "white-web-sdk";
 import { debounce, delay, isEqual, pick, throttle } from "lodash";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { Camera, View } from "white-web-sdk";
-import type { ISize } from "../AttributesDelegate";
+import type { ICamera, ISize } from "../AttributesDelegate";
 
-export type SaveCamera = (camera: Camera) => void;
+export type SaveCamera = (camera: ICamera) => void;
 
 export class CameraSynchronizer {
-    public remoteCamera?: Camera;
+    public remoteCamera?: ICamera;
     public remoteSize?: ISize;
     protected rect?: TeleBoxRect;
     protected view?: View;
@@ -26,7 +26,7 @@ export class CameraSynchronizer {
     }
 
     // 远端 Camera 或者 size 更新
-    public onRemoteUpdate = throttle((camera: Camera, size: ISize) => {
+    public onRemoteUpdate = throttle((camera: ICamera, size: ISize) => {
         this.remoteCamera = camera;
         this.remoteSize = size;
         if (this.remoteSize && this.rect) {
@@ -38,12 +38,17 @@ export class CameraSynchronizer {
             }
             const nextScale = camera.scale * scale;
             const moveCamera = () => {
-                this.view?.moveCamera({
-                    centerX: camera.centerX,
-                    centerY: camera.centerY,
+                const config: Partial<Camera> & { animationMode: AnimationMode } = {
                     scale: nextScale,
                     animationMode: AnimationMode.Immediately,
-                });
+                }
+                if (camera.centerX !== null) {
+                    config.centerX = camera.centerX;
+                }
+                if (camera.centerY !== null) {
+                    config.centerY = camera.centerY;
+                }
+                this.view?.moveCamera(config);
             }
             moveCamera(); 
             // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
@@ -68,7 +73,7 @@ export class CameraSynchronizer {
         }
     }
 
-    public onLocalCameraUpdate(camera: Camera) {
+    public onLocalCameraUpdate(camera: ICamera) {
         this.saveCamera(camera);
         this.remoteCamera = camera;
     }

package/src/View/ViewSync.ts

@@ -31,18 +31,14 @@ export class ViewSync {
     private synchronizer: CameraSynchronizer;
 
     constructor(private context: ViewSyncContext) {
-        this.synchronizer = new CameraSynchronizer((camera: Camera) => {
-            const iCamera = {
-                id: this.context.uid,
-                ...camera,
-            };
-            this.context.camera$.setValue(iCamera, true);
+        this.synchronizer = new CameraSynchronizer((camera: ICamera) => {
+            this.context.camera$.setValue(camera, true);
             const notStoreCamera =
                 this.context.viewMode$ && this.context.viewMode$.value === ViewMode.Freedom;
             if (notStoreCamera) {
                 return;
             } else {
-                this.context.storeCamera(iCamera);
+                this.context.storeCamera(camera);
             }
         });
         this.bindView(this.context.view$.value);
@@ -103,7 +99,7 @@ export class ViewSync {
     };
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.synchronizer.onLocalCameraUpdate(camera);
+        this.synchronizer.onLocalCameraUpdate(Object.assign(camera, { id: this.context.uid }));
         const stage = this.context.stageRect$.value;
         if (stage) {
             const size = { width: stage.width, height: stage.height, id: this.context.uid };

package/src/index.ts

@@ -130,6 +130,8 @@ export type MountParams = {
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
+    /** @deprecated */
+    chessboard?: boolean;
     /** 是否高亮显示同步区域, 默认为 true */
     highlightStage?: boolean;
     collectorContainer?: HTMLElement;