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

package/package.json

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

package/src/App/AppProxy.ts

@@ -9,7 +9,7 @@ import { boxEmitter } from "../BoxEmitter";
 import { BoxManagerNotFoundError } from "../Utils/error";
 import { calculateNextIndex } from "../Page";
 import { combine, Val, ValManager } from "value-enhancer";
-import { debounce, get, isEqual } from "lodash";
+import { debounce, get, isEqual, isUndefined, omitBy } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Fields } from "../AttributesDelegate";
 import { log } from "../Utils/log";
@@ -25,7 +25,6 @@ import {
 } from "../Utils/Common";
 import type {
     AppEmitterEvent,
-    AppInitState,
     BaseInsertParams,
     setAppOptions,
     AppListenerKeys,
@@ -35,6 +34,7 @@ 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 type { AppState } from "./type";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -151,6 +151,62 @@ 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$,
+                ),
+                createValSync(
+                    () => this.appAttributes?.state.ratio,
+                    box._ratio$,
+                ),
+                createValSync(
+                    () => this.appAttributes?.state.stageRatio,
+                    box._stageRatio$,
+                ),
+                createValSync(
+                    () => this.appAttributes?.state.draggable,
+                    box._draggable$,
+                ),
+                createValSync(
+                    () => this.appAttributes?.state.resizable,
+                    box._resizable$,
+                ),
+                box._visible$.reaction((visible, skipUpdate) => {
+                    if (skipUpdate) {
+                        return;
+                    }
+                    this.store.updateAppState(this.id, AppAttributes.Visible, visible);
+                }),
+                box._ratio$.reaction((ratio, skipUpdate) => {
+                    console.log("ratio change", ratio, skipUpdate);
+                    if (skipUpdate) {
+                        return;
+                    }
+                    this.store.updateAppState(this.id, AppAttributes.Ratio, ratio);
+                }),
+                box._stageRatio$.reaction((stageRatio, skipUpdate) => {
+                    if (skipUpdate) {
+                        return;
+                    }
+                    this.store.updateAppState(this.id, AppAttributes.StageRatio, stageRatio);
+                }),
+                box._draggable$.reaction((draggable, skipUpdate) => {
+                    if (skipUpdate) {
+                        return;
+                    }
+                    this.store.updateAppState(this.id, AppAttributes.Draggable, draggable);
+                }),
+                box._resizable$.reaction((resizable, skipUpdate) => {
+                    if (skipUpdate) {
+                        return;
+                    }
+                    this.store.updateAppState(this.id, AppAttributes.Resizable, resizable);
+                }),
+            ])
+        });
     }
 
     public fireMemberStateChange = () => {
@@ -301,7 +357,7 @@ export class AppProxy implements PageRemoveService {
         this.appContext = context;
         try {
             emitter.once(`${appId}${Events.WindowCreated}` as any).then(async () => {
-                let boxInitState: AppInitState | undefined;
+                let boxInitState: AppState | undefined;
                 if (!skipUpdate) {
                     boxInitState = this.getAppInitState(appId);
                     this.boxManager?.updateBoxState(boxInitState);
@@ -327,6 +383,11 @@ export class AppProxy implements PageRemoveService {
             this.box$.setValue(box);
             if (this.isAddApp && this.box) {
                 this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
+                this.store.updateAppState(appId, AppAttributes.Visible, this.box.visible);
+                this.store.updateAppState(appId, AppAttributes.Ratio, this.box.ratio);
+                this.store.updateAppState(appId, AppAttributes.StageRatio, this.box.stageRatio);
+                this.store.updateAppState(appId, AppAttributes.Draggable, this.box.draggable);
+                this.store.updateAppState(appId, AppAttributes.Resizable, this.box.resizable);
                 this.boxManager.focusBox({ appId }, false);
             }
         } catch (error: any) {
@@ -391,30 +452,18 @@ export class AppProxy implements PageRemoveService {
         }
     }
 
-    public getAppInitState = (id: string) => {
+    public getAppInitState = (id: string): AppState | undefined => {
         const attrs = this.store.getAppState(id);
         if (!attrs) return;
-        const position = attrs?.[AppAttributes.Position];
         const focus = this.store.focus;
-        const size = attrs?.[AppAttributes.Size];
-        const sceneIndex = attrs?.[AppAttributes.SceneIndex];
         const maximized = this.attributes?.["maximized"];
         const minimized = this.attributes?.["minimized"];
-        const zIndex = attrs?.zIndex;
-        let payload = { maximized, minimized, zIndex } as AppInitState;
-        if (position) {
-            payload = { ...payload, id: id, x: position.x, y: position.y };
-        }
+        let payload = { maximized, minimized, id } as AppState;
+        const state =  omitBy(attrs, isUndefined);
         if (focus === id) {
             payload = { ...payload, focus: true };
         }
-        if (size) {
-            payload = { ...payload, width: size.width, height: size.height };
-        }
-        if (sceneIndex) {
-            payload = { ...payload, sceneIndex };
-        }
-        return payload;
+        return  Object.assign(payload, state);;
     };
 
     public emitAppSceneStateChange(sceneState: SceneState) {
@@ -686,3 +735,16 @@ export class AppProxy implements PageRemoveService {
         return this.destroy(true, true, false);
     }
 }
+
+
+const createValSync = (expr: any, Val: Val): (() => void) => {
+    return reaction(
+        expr,
+        val => {
+            if (Val.value !== val && val !== undefined) {
+                Val.setValue(val, true);
+            }
+        },
+        { fireImmediately: true }
+    );
+};

package/src/App/index.ts

@@ -1,3 +1,4 @@
 export * from "./AppProxy";
 export * from "./AppContext";
 export * from "./WhiteboardView";
+export * from "./type";

package/src/App/type.ts

@@ -0,0 +1,22 @@
+
+export type AppState = {
+    id: string;
+    focus?: boolean;
+    SceneIndex?: number;
+    draggable?: boolean;
+    position?: {
+        x: number;
+        y: number;
+    }
+    ratio?: number;
+    resizable?: boolean;
+    size?: {
+        width: number;
+        height: number;
+    }
+    stageRatio?: number;
+    visible?: boolean;
+    zIndex?: number;
+    maximized: boolean | null;
+    minimized: boolean | null;
+}

package/src/AppManager.ts

@@ -30,6 +30,7 @@ import {
     removeScenes,
     setScenePath,
     setViewFocusScenePath,
+    wait,
 } from "./Utils/Common";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
@@ -568,7 +569,10 @@ export class AppManager {
     public bindMainView(divElement: HTMLDivElement, disableCameraTransform: boolean) {
         const mainView = this.mainViewProxy.view;
         mainView.disableCameraTransform = disableCameraTransform;
-        mainView.divElement = divElement;
+        // 延迟挂载 mainView 的 dom, 避免因为同步 camera 的闪动
+        wait(30).then(() => {
+            mainView.divElement = divElement;
+        });
         if (!mainView.focusScenePath) {
             this.setMainViewFocusPath();
         }

package/src/BoxManager.ts

@@ -1,9 +1,10 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
+import { SideEffectManager } from "side-effect-manager";
 import { TELE_BOX_STATE, TeleBoxManager } from "@netless/telebox-insider";
 import { WindowManager } from "./index";
 import type { BoxEmitterType } from "./BoxEmitter";
-import type { AddAppOptions, AppInitState } from "./index";
+import type { AddAppOptions } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
     TeleBoxManagerCreateConfig,
@@ -18,7 +19,7 @@ import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
 import type { CallbacksType } from "./callback";
 import type { EmitterType } from "./InternalEmitter";
-import { SideEffectManager } from "side-effect-manager";
+import type { AppState } from "./App/type";
 
 export { TELE_BOX_STATE };
 
@@ -294,17 +295,17 @@ export class BoxManager {
         return this.teleBoxManager.topBox;
     }
 
-    public updateBoxState(state?: AppInitState): void {
+    public updateBoxState(state?: AppState): void {
         if (!state) return;
         const box = this.getBox(state.id);
         if (box) {
             this.teleBoxManager.update(
                 box.id,
                 {
-                    x: state.x,
-                    y: state.y,
-                    width: state.width || 0.5,
-                    height: state.height || 0.5,
+                    x: state.position?.x,
+                    y: state.position?.y,
+                    width: state.size?.width || 0.5,
+                    height: state.size?.height || 0.5,
                     zIndex: state.zIndex,
                 },
                 true

package/src/Cursor/index.ts

@@ -23,7 +23,6 @@ export type MoveCursorParams = {
 };
 
 export class CursorManager {
-    public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
@@ -168,7 +167,6 @@ export class CursorManager {
     };
 
     public updateContainerRect() {
-        this.containerRect = WindowManager.container?.getBoundingClientRect();
         this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
     }
 

package/src/InternalEmitter.ts

@@ -1,6 +1,6 @@
 import Emittery from "emittery";
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { AppInitState, CursorMovePayload } from "./index";
+import type { CursorMovePayload } from "./index";
 import type { Member } from "./Helper";
 import type { MemberState } from "white-web-sdk";
 
@@ -11,7 +11,6 @@ export type RemoveSceneParams = {
 
 export type EmitterEvent = {
     onCreated: undefined;
-    InitReplay: AppInitState;
     error: Error;
     seekStart: undefined;
     seek: number;

package/src/Utils/Reactive.ts

@@ -1,6 +1,6 @@
-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";
 
 // 兼容 13 和 14 版本 SDK
 export const onObjectByEvent = (event: UpdateEventKind) => {
@@ -12,7 +12,7 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
                 if (kinds.includes(event)) {
                     func();
                 }
-            }
+            };
             listenUpdated(object, listener);
             func();
             return () => unlistenUpdated(object, listener);
@@ -21,43 +21,44 @@ 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);

package/src/View/ViewSync.ts

@@ -1,4 +1,4 @@
-import { AnimationMode, ViewMode } from "white-web-sdk";
+import { AnimationMode, toJS, ViewMode } from "white-web-sdk";
 import { CameraSynchronizer } from "./CameraSynchronizer";
 import { combine } from "value-enhancer";
 import { isEqual } from "lodash";
@@ -42,7 +42,7 @@ export class ViewSync {
             }
         });
         this.bindView(this.context.view$.value);
-        this.sem.add(() =>
+        this.sem.add(() => [
             this.context.view$.subscribe(view => {
                 const currentCamera = this.context.camera$.value;
                 if (currentCamera && this.context.size$.value) {
@@ -54,30 +54,24 @@ export class ViewSync {
                 }
 
                 this.bindView(view);
-            })
-        );
-        this.sem.add(() =>
+            }),
             this.context.camera$.subscribe((camera, skipUpdate) => {
                 const size = this.context.size$.value;
                 if (camera && size && !skipUpdate) {
                     this.synchronizer.onRemoteUpdate(camera, size);
                 }
-            })
-        );
-        this.sem.add(() =>
+            }),
             this.context.size$.subscribe(size => {
                 if (size) {
                     this.synchronizer.onRemoteSizeUpdate(size);
                 }
-            })
-        );
-        this.sem.add(() =>
+            }),
             this.context.stageRect$.reaction(rect => {
                 if (rect) {
                     this.synchronizer.setRect(rect);
                 }
             })
-        );
+        ]);
         const camera$size$ = combine([this.context.camera$, this.context.size$]);
         camera$size$.reaction(([camera, size]) => {
             if (camera && size) {
@@ -99,7 +93,7 @@ export class ViewSync {
     };
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.synchronizer.onLocalCameraUpdate(Object.assign(camera, { id: this.context.uid }));
+        this.synchronizer.onLocalCameraUpdate(Object.assign(toJS(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

@@ -5,7 +5,6 @@ export enum Events {
     AppBoxStateChange = "AppBoxStateChange",
     GetAttributes = "GetAttributes",
     UpdateWindowManagerWrapper = "UpdateWindowManagerWrapper",
-    InitReplay = "InitReplay",
     WindowCreated = "WindowCreated",
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
@@ -27,6 +26,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 };