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

package/docs/app-context.md

@@ -75,7 +75,7 @@
     ```
 
     ```ts
-    const view = context.createWhiteBoardView(10); // 生成带有 10 页的白板
+    const view = context.createWhiteBoardView({ size: 10 }); // 生成带有 10 页的白板
     ```
 
 - **WhiteBoardView**
@@ -148,6 +148,18 @@
         console.log("pageStateChange", pageState)
     })
     ```
+  - **setRect**
+
+    设置白板的显示的宽高\
+    在不同分辨率下会保证所有打开的窗口都能完整显示这个区域
+
+    ```ts
+    const view = context.createWhiteBoardView();
+    // 此方法建议只在插入时设置一次
+    if (context.isAddApp) {
+        view.setRect({ width: 500, height: 500 })
+    }
+    ```
 
 <h3 id="storage">storage</h3>
 
@@ -301,6 +313,44 @@
 
     类型: `ReadonlyTeleBox`
 
+- **mountStyles()**
+
+    挂载样式到 `box` 上
+
+    参数: `string | HTMLStyleElement`
+
+    ```ts
+    box.mountStyles(`
+        .hello-world-app span {
+            color: red;
+        }
+    `);
+    ```
+
+- **mountContent()**
+
+    挂载元素到 `box` 中\
+    推荐使用 `mountStage` 方法挂载元素到 `stage` 中
+
+    参数: `HTMLElement`
+
+    ```ts
+    const app = document.createElement("div");
+    box.mountContent(app);
+    ```
+
+- **mountStage()**
+
+    挂载元素到 `box` 的 `contentStage` 中\
+    如无特殊情况, 推荐把所有内容挂载到 `stage` 中
+
+    参数: `HTMLElement`
+
+    ```ts
+    const app = document.createElement("div");
+    box.mountStage(app);
+    ```
+
 - **contentStageRect**
 
     可同步区域\
@@ -324,7 +374,43 @@
     订阅 `contextStateRect` 的变化
 
     ```ts
-    box._contentStageRect$.subscribe(rect => {
+    box.onValChanged("contentStageRect", rect => {
         console.log("contentStageRect changed", rect);
     });
-    ```
+    ```
+
+- **highlightStage**
+
+    是否高亮 `stage` 区域\
+    默认为 `true`
+
+    类型: `boolean`
+
+- **setHighlightStage()**
+
+    参数: `boolean`
+
+
+- **$content**
+
+    应用窗口的内容区域
+
+    类型: `HTMLElement`
+
+- **$footer**
+
+    应用窗口的底部区域
+
+    类型: `HTMLElement`
+
+- **resizable**
+
+    是否可以改变窗口大小
+
+    类型: `boolean`
+
+- **draggable**
+
+    窗口是否可以拖动
+
+    类型: `boolean`

package/package.json

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

package/src/App/AppContext.ts

@@ -28,7 +28,12 @@ import type {
 import { WhiteBoardView } from "./WhiteboardView";
 import { findMemberByUid } from "../Helper";
 import { MAX_PAGE_SIZE } from "../constants";
-import { isNumber } from "lodash";
+import { isBoolean, isNumber } from "lodash";
+
+export type CreateWhiteBoardViewParams = {
+    size?: number;
+    syncCamera?: boolean;
+}
 
 export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
     public readonly emitter: Emittery<AppEmitterEvent<TAttributes>>;
@@ -86,7 +91,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         return this.appProxy.view;
     };
 
-    public createWhiteBoardView = (size?: number): WhiteBoardView => {
+    public createWhiteBoardView = (params?: CreateWhiteBoardViewParams): WhiteBoardView => {
         if (this.whiteBoardView) {
             return this.whiteBoardView;
         }
@@ -94,6 +99,11 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         if (!view) {
             view = this.appProxy.createAppDir();
         }
+        if (params) {
+            if (isBoolean(params.syncCamera)) {
+                this.appProxy.syncCamera$.setValue(params.syncCamera);
+            }
+        }
         const viewWrapper = document.createElement("div");
         this._viewWrapper = viewWrapper;
         viewWrapper.className = "window-manager-view-wrapper";
@@ -101,7 +111,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         view.divElement = viewWrapper;
         this.appProxy.fireMemberStateChange();
         if (this.isAddApp) {
-            this.ensurePageSize(size);
+            this.ensurePageSize(params?.size);
         }
         this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
         this.appProxy.sideEffectManager.add(() => {
@@ -109,6 +119,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
                 this.whiteBoardView = undefined;
             }
         });
+        this.appProxy.whiteBoardViewCreated$.setValue(true);
         return this.whiteBoardView;
     }
 

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,7 +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 { createValSync } from "../Utils/Reactive";
+import type { AppState } from "./type";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -72,6 +71,8 @@ export class AppProxy implements PageRemoveService {
     public size$ = this.valManager.attach(new Val<ISize | undefined>(undefined));
     public box$ = this.valManager.attach(new Val<ReadonlyTeleBox | undefined>(undefined));
     public view$ = this.valManager.attach(new Val<View | undefined>(undefined));
+    public syncCamera$ = this.valManager.attach(new Val<boolean>(true));
+    public whiteBoardViewCreated$ = this.valManager.attach(new Val<boolean>(false));
 
     constructor(
         private params: BaseInsertParams,
@@ -114,90 +115,60 @@ export class AppProxy implements PageRemoveService {
         this.addCameraReaction();
         this.addSizeReaction();
         this.sideEffectManager.add(() =>
-            combine([this.box$, this.view$]).subscribe(([box, view]) => {
-                if (box && view) {
-                    if (!this.camera$.value) {
-                        this.storeCamera({
-                            centerX: null,
-                            centerY: null,
-                            scale: 1,
-                            id: this.uid,
-                        });
-                        this.camera$.setValue(toJS(this.appAttributes.camera));
-                    }
-                    if (!this.size$.value && box.contentStageRect) {
-                        const initialRect = this.computedInitialRect(box.contentStageRect);
-                        const width = initialRect?.width || box.contentStageRect.width;
-                        const height = initialRect?.height || box.contentStageRect.height;
-                        this.storeSize({
-                            id: this.uid,
-                            width,
-                            height,
-                        });
-                        this.size$.setValue(toJS(this.appAttributes.size));
+            emitter.on("memberStateChange", this.onMemberStateChange)
+        );
+        this.sideEffectManager.add(() => [
+            this.syncCamera$.reaction(syncCamera => {
+                if (!syncCamera) {
+                    if (this.viewSync) {
+                        this.viewSync.destroy();
+                        this.viewSync = undefined;
+                        this.sideEffectManager.flush("camera");
+                        this.sideEffectManager.flush("size");
                     }
-                    this.viewSync = new ViewSync({
-                        uid: this.uid,
-                        view$: this.view$,
-                        camera$: this.camera$,
-                        size$: this.size$,
-                        stageRect$: box._contentStageRect$,
-                        storeCamera: this.storeCamera,
-                        storeSize: this.storeSize
-                    });
-                    this.sideEffectManager.add(() => () => this.viewSync?.destroy());
+                }
+            }),
+            this.whiteBoardViewCreated$.reaction(created => {
+                if (created && this.box) {
+                    if (!this.syncCamera$.value) return;
+                    combine([this.box$, this.view$]).subscribe(([box, view]) => {
+                        if (box && view) {
+                            if (!this.camera$.value) {
+                                this.storeCamera({
+                                    centerX: null,
+                                    centerY: null,
+                                    scale: 1,
+                                    id: this.uid,
+                                });
+                                this.camera$.setValue(toJS(this.appAttributes.camera));
+                            }
+                            if (!this.size$.value && box.contentStageRect) {
+                                const initialRect = this.computedInitialRect(box.contentStageRect);
+                                const width = initialRect?.width || box.contentStageRect.width;
+                                const height = initialRect?.height || box.contentStageRect.height;
+                                this.storeSize({
+                                    id: this.uid,
+                                    width,
+                                    height,
+                                });
+                                this.size$.setValue(toJS(this.appAttributes.size));
+                            }
+                            this.viewSync = new ViewSync({
+                                uid: this.uid,
+                                view$: this.view$,
+                                camera$: this.camera$,
+                                size$: this.size$,
+                                stageRect$: box._contentStageRect$,
+                                storeCamera: this.storeCamera,
+                                storeSize: this.storeSize
+                            });
+                            this.sideEffectManager.add(() => () => this.viewSync?.destroy());
+                            this.whiteBoardViewCreated$.destroy();
+                        }
+                    })
                 }
             })
-        );
-        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 = () => {
@@ -348,7 +319,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);
@@ -438,30 +409,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) {
@@ -518,32 +477,34 @@ export class AppProxy implements PageRemoveService {
     }
 
     private appAttributesUpdateListener = (appId: string) => {
-        this.manager.refresher.add(appId, () => {
-            return autorun(() => {
-                const attrs = this.manager.attributes[appId];
-                if (attrs) {
-                    this.appEmitter.emit("attributesUpdate", attrs);
-                }
-            });
-        });
-        this.manager.refresher.add(this.stateKey, () => {
-            return autorun(() => {
-                const appState = this.appAttributes?.state;
-                if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
-                    this.boxManager?.setZIndex(appId, appState.zIndex);
-                }
-            });
-        });
-        this.manager.refresher.add(`${appId}-fullPath`, () => {
-            return autorun(() => {
-                const fullPath = this.appAttributes?.fullPath;
-                this.setFocusScenePathHandler(fullPath);
-                if (this.fullPath$.value !== fullPath) {
-                    this.notifyPageStateChange();
-                    this.fullPath$.setValue(fullPath);
-                }
-            });
-        });
+        this.sideEffectManager.add(() => [
+            this.manager.refresher.add(appId, () => {
+                return autorun(() => {
+                    const attrs = this.manager.attributes[appId];
+                    if (attrs) {
+                        this.appEmitter.emit("attributesUpdate", attrs);
+                    }
+                });
+            }),
+            this.manager.refresher.add(this.stateKey, () => {
+                return autorun(() => {
+                    const appState = this.appAttributes?.state;
+                    if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
+                        this.boxManager?.setZIndex(appId, appState.zIndex);
+                    }
+                });
+            }),
+            this.manager.refresher.add(`${appId}-fullPath`, () => {
+                return autorun(() => {
+                    const fullPath = this.appAttributes?.fullPath;
+                    this.setFocusScenePathHandler(fullPath);
+                    if (this.fullPath$.value !== fullPath) {
+                        this.notifyPageStateChange();
+                        this.fullPath$.setValue(fullPath);
+                    }
+                });
+            }),
+        ]);
     };
 
     private setFocusScenePathHandler = debounce((fullPath: string | undefined) => {
@@ -681,11 +642,6 @@ export class AppProxy implements PageRemoveService {
 
         this.viewManager.destroyView(this.id);
         this.manager.appStatus.delete(this.id);
-        this.manager.refresher.remove(this.id);
-        this.manager.refresher.remove(this.stateKey);
-        this.manager.refresher.remove(`${this.id}-fullPath`);
-        this.manager.refresher.remove(`${this.id}-camera`);
-        this.manager.refresher.remove(`${this.id}-size`);
         this.valManager.destroy();
     }
 

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/ReconnectRefresher.ts

@@ -46,7 +46,11 @@ export class ReconnectRefresher {
             this.ctx.emitter.emit("startReconnect");
         }
         if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
-            this.room?.dispatchMagixEvent(EnsureReconnectEvent, {});
+            if (this.room?.isWritable) {
+                this.room?.dispatchMagixEvent(EnsureReconnectEvent, {});
+            } else {
+                this.onReconnected();
+            }
         }
         this.phase = phase;
     };

package/src/Utils/Reactive.ts

@@ -1,7 +1,6 @@
 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) => {
@@ -63,18 +62,3 @@ export const safeListenPropsUpdated = <T>(
 
 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 }
-    );
-};