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

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.20",
   "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,11 +30,12 @@ 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";
 import type { PageRemoveService, PageState } from "../Page";
+import { createValSync } from "../Utils/Reactive";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -117,8 +118,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,
                         });
@@ -151,6 +152,52 @@ export class AppProxy implements PageRemoveService {
         this.sideEffectManager.add(() =>
             emitter.on("memberStateChange", this.onMemberStateChange)
         );
+        this.box$.subscribe(box => {
+            if (!box) return;
+            this.sideEffectManager.add(() => [
+                createValSync(
+                    () => this.appAttributes?.state.visible,
+                    box._visible$,
+                    this.isAddApp,
+                ),
+                createValSync(
+                    () => this.appAttributes?.state.ratio,
+                    box._ratio$,
+                    this.isAddApp,
+                ),
+                createValSync(
+                    () => this.appAttributes?.state.stageRatio,
+                    box._stageRatio$,
+                    this.isAddApp,
+                ),
+                createValSync(
+                    () => this.appAttributes?.state.draggable,
+                    box._draggable$,
+                    this.isAddApp,
+                ),
+                createValSync(
+                    () => this.appAttributes?.state.resizable,
+                    box._resizable$,
+                    this.isAddApp,
+                ),
+                box._visible$.subscribe(visible => {
+                    this.store.updateAppState(this.id, AppAttributes.Visible, visible);
+                }),
+                box._ratio$.subscribe(ratio => {
+                    this.store.updateAppState(this.id, AppAttributes.Ratio, ratio);
+                }),
+                box._stageRatio$.subscribe(stageRatio => {
+                    this.store.updateAppState(this.id, AppAttributes.StageRatio, stageRatio);
+                }),
+                box._draggable$.subscribe(draggable => {
+                    this.store.updateAppState(this.id, AppAttributes.Draggable, draggable);
+                }),
+                box._resizable$.subscribe(resizable => {
+                    console.log("resizable change", resizable);
+                    this.store.updateAppState(this.id, AppAttributes.Resizable, resizable);
+                }),
+            ])
+        });
     }
 
     public fireMemberStateChange = () => {
@@ -595,7 +642,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/Utils/Reactive.ts

@@ -1,6 +1,7 @@
-import { listenUpdated, unlistenUpdated, reaction, UpdateEventKind } from "white-web-sdk";
-import type { AkkoObjectUpdatedProperty , AkkoObjectUpdatedListener } from "white-web-sdk";
 import { isObject } from "lodash";
+import { listenUpdated, reaction, unlistenUpdated, UpdateEventKind } from "white-web-sdk";
+import type { AkkoObjectUpdatedProperty, AkkoObjectUpdatedListener } from "white-web-sdk";
+import type { Val } from "value-enhancer";
 
 // 兼容 13 和 14 版本 SDK
 export const onObjectByEvent = (event: UpdateEventKind) => {
@@ -12,7 +13,7 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
                 if (kinds.includes(event)) {
                     func();
                 }
-            }
+            };
             listenUpdated(object, listener);
             func();
             return () => unlistenUpdated(object, listener);
@@ -21,43 +22,59 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
                 () => object,
                 () => {
                     func();
-                }, {
+                },
+                {
                     fireImmediately: true,
                 }
-            )
+            );
         }
-    }
-}
+    };
+};
 
 export const safeListenPropsUpdated = <T>(
     getProps: () => T,
     callback: AkkoObjectUpdatedListener<T>,
     onDestroyed?: (props: unknown) => void
-  ) => {
+) => {
     let disposeListenUpdated: (() => void) | null = null;
     const disposeReaction = reaction(
-      getProps,
-      () => {
-        if (disposeListenUpdated) {
-          disposeListenUpdated();
-          disposeListenUpdated = null;
-        }
-        const props = getProps();
-        if (isObject(props)) {
-          disposeListenUpdated = () => unlistenUpdated(props, callback);
-          listenUpdated(props, callback);
-        } else {
-          onDestroyed?.(props);
-        }
-      },
-      { fireImmediately: true }
+        getProps,
+        () => {
+            if (disposeListenUpdated) {
+                disposeListenUpdated();
+                disposeListenUpdated = null;
+            }
+            const props = getProps();
+            if (isObject(props)) {
+                disposeListenUpdated = () => unlistenUpdated(props, callback);
+                listenUpdated(props, callback);
+            } else {
+                onDestroyed?.(props);
+            }
+        },
+        { fireImmediately: true }
     );
 
     return () => {
-      disposeListenUpdated?.();
-      disposeReaction();
+        disposeListenUpdated?.();
+        disposeReaction();
     };
-}
+};
 
 export const onObjectRemoved = onObjectByEvent(UpdateEventKind.Removed);
 export const onObjectInserted = onObjectByEvent(UpdateEventKind.Inserted);
+
+export const createValSync = <T>(expr: any, Val: Val<T, boolean>, isAddApp: boolean): (() => void) => {
+    let skipUpdate = false;
+    return reaction(
+        expr,
+        val => {
+            if (isAddApp && !skipUpdate) {
+                skipUpdate = true;
+            } else {
+                Val.setValue(val as T);
+            }
+        },
+        { fireImmediately: true }
+    );
+};

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,8 @@ export class ViewSync {
     };
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.synchronizer.onLocalCameraUpdate(camera);
+        if (!camera) return;
+        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/constants.ts

@@ -27,6 +27,11 @@ export enum AppAttributes {
     Position = "position",
     SceneIndex = "SceneIndex",
     ZIndex = "zIndex",
+    Visible = "visible",
+    Ratio = "ratio",
+    StageRatio = "stageRatio",
+    Draggable = "draggable",
+    Resizable = "resizable",
 }
 
 export enum AppEvents {

package/src/index.ts

@@ -121,6 +121,11 @@ export type AppInitState = {
     sceneIndex?: number;
     boxState?: TeleBoxState; // 兼容旧版 telebox
     zIndex?: number;
+    visible?: boolean;
+    stageRatio?: number;
+    resizable?: boolean;
+    draggable?: boolean;
+    ratio?: number;
 };
 
 export type CursorMovePayload = { uid: string; state?: "leave"; position: Position };
@@ -130,6 +135,8 @@ export type MountParams = {
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
+    /** @deprecated */
+    chessboard?: boolean;
     /** 是否高亮显示同步区域, 默认为 true */
     highlightStage?: boolean;
     collectorContainer?: HTMLElement;