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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.21",
+  "version": "1.0.0-canary.22",
   "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

@@ -71,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,
@@ -112,101 +114,61 @@ export class AppProxy implements PageRemoveService {
         this.size$.setValue(toJS(this.appAttributes.size));
         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));
-                    }
-                    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.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.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.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);
-                }),
-            ])
-        });
+                }
+            }),
+            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();
+                        }
+                    })
+                }
+            })
+        ]);
     }
 
     public fireMemberStateChange = () => {
@@ -383,11 +345,6 @@ 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) {
@@ -520,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) => {
@@ -683,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();
     }
 
@@ -735,16 +689,3 @@ 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/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/View/ViewSync.ts

@@ -1,4 +1,4 @@
-import { AnimationMode, toJS, ViewMode } from "white-web-sdk";
+import { AnimationMode, ViewMode } from "white-web-sdk";
 import { CameraSynchronizer } from "./CameraSynchronizer";
 import { combine } from "value-enhancer";
 import { isEqual } from "lodash";
@@ -93,7 +93,8 @@ export class ViewSync {
     };
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.synchronizer.onLocalCameraUpdate(Object.assign(toJS(camera), { id: this.context.uid }));
+        if (!camera) return;
+        this.synchronizer.onLocalCameraUpdate({ ...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 };