@netless/window-manager 1.0.0-canary.6 → 1.0.0-canary.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.6",
+  "version": "1.0.0-canary.9",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "1.0.0-alpha.13",
+    "@netless/telebox-insider": "1.0.0-alpha.14",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",

package/pnpm-lock.yaml

@@ -4,7 +4,7 @@ specifiers:
   '@juggle/resize-observer': ^3.3.1
   '@netless/app-docs-viewer': ^0.2.9
   '@netless/app-media-player': 0.1.0-beta.5
-  '@netless/telebox-insider': 1.0.0-alpha.13
+  '@netless/telebox-insider': 1.0.0-alpha.14
   '@rollup/plugin-commonjs': ^20.0.0
   '@rollup/plugin-node-resolve': ^13.0.4
   '@rollup/plugin-url': ^6.1.0
@@ -43,7 +43,7 @@ specifiers:
 
 dependencies:
   '@juggle/resize-observer': registry.npmmirror.com/@juggle/resize-observer/3.3.1
-  '@netless/telebox-insider': 1.0.0-alpha.13
+  '@netless/telebox-insider': 1.0.0-alpha.14
   emittery: registry.npmmirror.com/emittery/0.9.2
   lodash: registry.npmmirror.com/lodash/4.17.21
   p-retry: registry.npmmirror.com/p-retry/4.6.1
@@ -97,8 +97,8 @@ packages:
       vanilla-lazyload: 17.6.1
     dev: true
 
-  /@netless/telebox-insider/1.0.0-alpha.13:
-    resolution: {integrity: sha512-7hSnqOCXfvn0DECjYJPfiBfdtnoIBFvpniGvIBsXUVmRuLaQdzjMnLkXyGbfSF2yq//73lSJQDzaVxAf+icXEw==}
+  /@netless/telebox-insider/1.0.0-alpha.14:
+    resolution: {integrity: sha512-kDhoxnEZUOCjQDf/lDgHVBb/TaKywlnUXhSlSbyVDWefcVXcaXi6/zEPwDR0gMYWCqQQoEPFz9Jr8hd8hcEkyQ==}
     dependencies:
       '@juggle/resize-observer': 3.3.1
       '@types/shallowequal': 1.1.1

package/src/App/AppContext.ts

@@ -29,7 +29,6 @@ import type {
 import { WhiteBoardView } from "./WhiteboardView";
 import { findMemberByUid } from "../Helper";
 import { MAX_PAGE_SIZE } from "../constants";
-import { putScenes } from "../Utils/Common";
 import { isNumber } from "lodash";
 
 export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
@@ -63,9 +62,13 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
         this.isAddApp = appProxy.isAddApp;
     }
 
-    public get displayer(){
+    public get displayer() {
         return this.manager.displayer;
-    };
+    }
+
+    public get destroyed() {
+        return this.appProxy.status === "destroyed";
+    }
 
     /** @deprecated Use context.storage.state instead. */
     public getAttributes = (): TAttributes | undefined => {
@@ -102,14 +105,15 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
             this._viewWrapper = undefined;
         }
         view.divElement = viewWrapper;
+        this.appProxy.fireMemberStateChange();
         if (this.isAddApp) {
-            this.initPageSize(size);
+            this.ensurePageSize(size);
         }
-        this.whiteBoardView = new WhiteBoardView(this, this.appProxy, removeViewWrapper);
+        this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, removeViewWrapper, this.ensurePageSize);
         return this.whiteBoardView;
     }
 
-    private initPageSize = (size?: number) => {
+    private ensurePageSize = (size?: number) => {
         if (!isNumber(size)) return;
         if (!this.appProxy.scenePath) return;
         if (this.appProxy.pageState.length >= size) return;
@@ -117,11 +121,8 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
             throw Error(`[WindowManager]: size ${size} muse be in range [1, ${MAX_PAGE_SIZE}]`);
         }
         const needInsert = size - this.appProxy.pageState.length;
-        const startPageNumber = this.appProxy.pageState.length;
-        const scenes = new Array(needInsert).fill({}).map((_, index) => {
-            return { name: `${startPageNumber + index + 1}` };
-        });
-        putScenes(this.room, this.appProxy.scenePath, scenes);
+        const scenes = new Array(needInsert).fill({});
+        this.room?.putScenes(this.appProxy.scenePath, scenes);
     }
 
     public getInitScenePath = () => {
@@ -130,7 +131,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
 
     /** Get App writable status. */
     public get isWritable(): boolean {
-        return this.manager.canOperate;
+        return this.manager.canOperate && !this.destroyed;
     };
 
     /** Get the App Window UI box. */

package/src/App/AppProxy.ts

@@ -8,7 +8,7 @@ import { autorun, reaction, toJS } from "white-web-sdk";
 import { boxEmitter } from "../BoxEmitter";
 import { BoxManagerNotFoundError } from "../Utils/error";
 import { calculateNextIndex } from "../Page";
-import { combine, Val } from "value-enhancer";
+import { combine, Val, ValManager } from "value-enhancer";
 import { debounce, get } from "lodash";
 import { emitter } from "../InternalEmitter";
 import { Fields } from "../AttributesDelegate";
@@ -30,7 +30,7 @@ import type {
     setAppOptions,
     AppListenerKeys,
 } from "../index";
-import type { SceneState, View, SceneDefinition, Camera } from "white-web-sdk";
+import type { SceneState, View, SceneDefinition, Camera , MemberState} from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import type { NetlessApp } from "../typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
@@ -54,23 +54,23 @@ export class AppProxy implements PageRemoveService {
     public uid = this.manager.uid;
 
     public isAddApp: boolean;
-    private status: "normal" | "destroyed" = "normal";
+    public status: "normal" | "destroyed" = "normal";
     private stateKey: string;
     public _pageState: AppPageStateImpl;
-    private _prevFullPath: string | undefined;
 
     public appResult?: NetlessApp<any>;
     public appContext?: AppContext<any, any>;
 
     private sideEffectManager = new SideEffectManager();
+    private valManager = new ValManager();
 
-    public camera$ = new Val<ICamera | undefined>(undefined);
-    public size$ = new Val<ISize | undefined>(undefined);
-
+    private fullPath$ = this.valManager.attach(new Val<string | undefined>(undefined));
     private appViewSync?: AppViewSync;
 
-    public box$ = new Val<ReadonlyTeleBox | undefined>(undefined);
-    public view$ = new Val<View | undefined>(undefined);
+    public camera$ = this.valManager.attach(new Val<ICamera | undefined>(undefined));
+    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));
 
     constructor(
         private params: BaseInsertParams,
@@ -110,61 +110,56 @@ export class AppProxy implements PageRemoveService {
         );
         this.camera$.setValue(toJS(this.appAttributes.camera));
         this.size$.setValue(toJS(this.appAttributes.size));
-        this.sideEffectManager.add(() => {
-            return this.manager.refresher.add(`${this.id}-camera`, () => {
-                return reaction(
-                    () => this.appAttributes?.camera,
-                    camera => {
-                        if (camera && camera.id !== this.uid) {
-                            this.camera$.setValue(toJS(camera));
-                        }
+        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: 0,
+                            centerY: 0,
+                            scale: 1,
+                            id: this.uid,
+                        });
+                        this.camera$.setValue(toJS(this.appAttributes.camera));
                     }
-                );
-            });
-        });
-        this.sideEffectManager.add(() => {
-            return this.manager.refresher.add(`${this.id}-size`, () => {
-                return reaction(
-                    () => this.appAttributes?.size,
-                    size => {
-                        if (size && size.id !== this.uid) {
-                            this.size$.setValue(toJS(size));
-                        }
+                    if (!this.size$.value && box.contentStageRect) {
+                        this.storeSize({
+                            id: this.uid,
+                            width: box.contentStageRect?.width,
+                            height: box.contentStageRect?.height,
+                        });
+                        this.size$.setValue(toJS(this.appAttributes.size));
                     }
-                );
-            });
-        });
-        combine([this.box$, this.view$]).subscribe(([box, view]) => {
-            if (box && view) {
-                if (!this.camera$.value) {
-                    this.storeCamera({
-                        centerX: 0, centerY: 0, scale: 1, id: this.uid,
-                    });
+                    this.appViewSync = new AppViewSync(this);
+                    this.sideEffectManager.add(() => () => this.appViewSync?.destroy());
                 }
-                if (!this.size$.value && box.contentStageRect) {
-                    this.storeSize({
-                        id: this.uid,
-                        width: box.contentStageRect?.width,
-                        height: box.contentStageRect?.height,
-                    });
-                }
-                this.appViewSync = new AppViewSync(this);
-                this.sideEffectManager.add(() => () => this.appViewSync?.destroy());
+            })
+        );
+        this.sideEffectManager.add(() =>
+            emitter.on("memberStateChange", this.onMemberStateChange)
+        );
+    }
+
+    public fireMemberStateChange = () => {
+        if (this.manager.room) {
+            this.onMemberStateChange(this.manager.room.state.memberState);
+        }
+    }
+
+    private onMemberStateChange = (memberState: MemberState) => {
+        // clicker 教具把事件穿透给下层
+        const needPointerEventsNone = memberState.currentApplianceName === "clicker";
+        if (needPointerEventsNone) {
+            if (this.appContext?._viewWrapper) {
+                this.appContext._viewWrapper.style.pointerEvents = "none";
             }
-        });
-        this.sideEffectManager.add(() => emitter.on("memberStateChange", memberState => {
-            // clicker 教具把事件穿透给下层
-            const needPointerEventsNone = memberState.currentApplianceName === "clicker";
-            if (needPointerEventsNone) {
-                if (this.appContext?._viewWrapper) {
-                    this.appContext._viewWrapper.style.pointerEvents = "none";
-                }
-            } else {
-                if (this.appContext?._viewWrapper) {
-                    this.appContext._viewWrapper.style.pointerEvents = "auto";
-                }
+        } else {
+            if (this.appContext?._viewWrapper) {
+                this.appContext._viewWrapper.style.pointerEvents = "auto";
             }
-        }));
+        }
     }
 
     public createAppDir() {
@@ -194,7 +189,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     public get view(): View | undefined {
-        return this.manager.viewManager.getView(this.id);
+        return this.view$.value;
     }
 
     public get viewIndex(): number | undefined {
@@ -444,7 +439,7 @@ export class AppProxy implements PageRemoveService {
     }
 
     private appAttributesUpdateListener = (appId: string) => {
-        this.manager.refresher?.add(appId, () => {
+        this.manager.refresher.add(appId, () => {
             return autorun(() => {
                 const attrs = this.manager.attributes[appId];
                 if (attrs) {
@@ -452,7 +447,7 @@ export class AppProxy implements PageRemoveService {
                 }
             });
         });
-        this.manager.refresher?.add(this.stateKey, () => {
+        this.manager.refresher.add(this.stateKey, () => {
             return autorun(() => {
                 const appState = this.appAttributes?.state;
                 if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
@@ -460,13 +455,13 @@ export class AppProxy implements PageRemoveService {
                 }
             });
         });
-        this.manager.refresher?.add(`${appId}-fullPath`, () => {
+        this.manager.refresher.add(`${appId}-fullPath`, () => {
             return autorun(() => {
                 const fullPath = this.appAttributes?.fullPath;
                 this.setFocusScenePathHandler(fullPath);
-                if (this._prevFullPath !== fullPath) {
+                if (this.fullPath$.value !== fullPath) {
                     this.notifyPageStateChange();
-                    this._prevFullPath = fullPath;
+                    this.fullPath$.setValue(fullPath);
                 }
             });
         });
@@ -596,13 +591,40 @@ 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._prevFullPath = undefined;
-        this.camera$.destroy();
-        this.size$.destroy();
-        this.box$.destroy();
+        this.manager.refresher.remove(this.id);
+        this.manager.refresher.remove(this.stateKey);
+        this.manager.refresher.remove(`${this.id}-fullPath`);
+        this.valManager.destroy();
+    }
+
+    private addCameraReaction = () => {
+        this.sideEffectManager.add(() =>
+            this.manager.refresher.add(`${this.id}-camera`, () =>
+                reaction(
+                    () => this.appAttributes?.camera,
+                    camera => {
+                        if (camera && camera.id !== this.uid) {
+                            this.camera$.setValue(toJS(camera));
+                        }
+                    }
+                )
+            )
+        , "camera");
+    }
+
+    private addSizeReaction = () => {
+        this.sideEffectManager.add(() =>
+            this.manager.refresher.add(`${this.id}-size`, () =>
+                reaction(
+                    () => this.appAttributes?.size,
+                    size => {
+                        if (size && size.id !== this.uid) {
+                            this.size$.setValue(toJS(size));
+                        }
+                    }
+                )
+            )
+        , "size");
     }
 
     public close(): Promise<void> {

package/src/App/AppViewSync.ts

@@ -34,11 +34,11 @@ export class AppViewSync {
                 }),
             );
         }
-        combine([this.appProxy.camera$, this.appProxy.size$]).subscribe(([camera, size]) => {
+        this.sem.add(() => combine([this.appProxy.camera$, this.appProxy.size$]).subscribe(([camera, size]) => {
             if (camera && size) {
                 this.synchronizer.onRemoteUpdate(camera, size);
             }
-        });
+        }));
     }
 
     public bindView = (view?: View) => {

package/src/App/WhiteboardView.ts

@@ -5,15 +5,17 @@ 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 } from "white-web-sdk";
+import type { Camera, View } from "white-web-sdk";
 
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;
 
     constructor(
+        public view: View,
         protected appContext: AppContext,
         protected appProxy: AppProxy,
-        private removeViewWrapper: () => void
+        private removeViewWrapper: () => void,
+        public ensureSize: (size: number) => void
     ) {
         const pageState$ = new Val<PageState>(appProxy.pageState);
         this.pageState$ = pageState$;
@@ -22,10 +24,6 @@ export class WhiteBoardView implements PageController {
         });
     }
 
-    public get view() {
-        return this.appContext.view;
-    }
-
     public get pageState() {
         return this.pageState$.value;
     }

package/src/AppManager.ts

@@ -18,6 +18,7 @@ import { RedoUndo } from "./RedoUndo";
 import { serializeRoomMembers } from "./Helper";
 import { SideEffectManager } from "side-effect-manager";
 import { ViewManager } from "./View/ViewManager";
+import { Val } from "value-enhancer";
 import type { SyncRegisterAppPayload } from "./Register";
 import type { RemoveSceneParams } from "./InternalEmitter";
 import {
@@ -63,10 +64,10 @@ export class AppManager {
     private appListeners: AppListeners;
     public boxManager?: BoxManager;
 
-    private _prevSceneIndex: number | undefined;
-    private _prevFocused: string | undefined;
     private callbacksNode: ScenesCallbacksNode | null = null;
     private appCreateQueue = new AppCreateQueue();
+    private sceneIndex$ = new Val<number | undefined>(undefined);
+    private focused$ = new Val<string | undefined>(undefined);
 
     private sideEffectManager = new SideEffectManager();
 
@@ -324,31 +325,31 @@ export class AppManager {
 
         this.addAppsChangeListener();
         this.addAppCloseListener();
-        this.refresher?.add("maximized", () => {
+        this.refresher.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
                 this.boxManager?.setMaximized(Boolean(maximized));
             });
         });
-        this.refresher?.add("minimized", () => {
+        this.refresher.add("minimized", () => {
             return autorun(() => {
                 const minimized = this.attributes.minimized;
                 this.onMinimized(minimized);
             });
         });
-        this.refresher?.add("mainViewIndex", () => {
+        this.refresher.add("mainViewIndex", () => {
             return autorun(() => {
                 const mainSceneIndex = get(this.attributes, "_mainSceneIndex");
                 this.onMainViewIndexChange(mainSceneIndex);
             });
         });
-        this.refresher?.add("focusedChange", () => {
+        this.refresher.add("focusedChange", () => {
             return autorun(() => {
                 const focused = get(this.attributes, "focus");
                 this.onFocusChange(focused);
             });
         });
-        this.refresher?.add("registeredChange", () => {
+        this.refresher.add("registeredChange", () => {
             return autorun(() => {
                 const registered = get(this.attributes, Fields.Registered);
                 this.onRegisteredChange(registered);
@@ -361,7 +362,7 @@ export class AppManager {
         }
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
-        this._prevFocused = this.attributes.focus;
+        this.focused$.setValue(this.attributes.focus);
 
         this.sideEffectManager.add(() => {
             const redoUndo = new RedoUndo({
@@ -426,21 +427,21 @@ export class AppManager {
     };
 
     private onMainViewIndexChange = (index: number) => {
-        if (index !== undefined && this._prevSceneIndex !== index) {
+        if (index !== undefined && this.sceneIndex$.value !== index) {
             callbacks.emit("mainViewSceneIndexChange", index);
             emitter.emit("changePageState");
             if (this.callbacksNode) {
                 this.updateSceneState(this.callbacksNode);
             }
-            this._prevSceneIndex = index;
+            this.sceneIndex$.setValue(index);
         }
     };
 
     private onFocusChange = (focused: string | undefined) => {
-        if (this._prevFocused !== focused) {
+        if (this.focused$.value !== focused) {
             callbacks.emit("focusedChange", focused);
-            emitter.emit("focusedChange", { focused, prev: this._prevFocused });
-            this._prevFocused = focused;
+            emitter.emit("focusedChange", { focused, prev: this.focused$.value });
+            this.focused$.setValue(focused);
             if (focused !== undefined) {
                 this.boxManager?.focusBox({ appId: focused });
                 // 确保 focus 修改的时候, appProxy 已经创建
@@ -687,12 +688,9 @@ export class AppManager {
             appProxy.emitAppIsWritableChange();
         });
         if (isWritable === true) {
-            this.mainView.disableCameraTransform = false;
             if (this.room && this.room.disableSerialization === true) {
                 this.room.disableSerialization = false;
             }
-        } else {
-            this.mainView.disableCameraTransform = true;
         }
         emitter.emit("writableChange", isWritable);
     };
@@ -834,7 +832,7 @@ export class AppManager {
         }
         callbacks.clearListeners();
         this.sideEffectManager.flushAll();
-        this._prevFocused = undefined;
-        this._prevSceneIndex = undefined;
+        this.sceneIndex$.destroy();
+        this.focused$.destroy();
     }
 }

package/src/BoxManager.ts

@@ -47,11 +47,11 @@ export type CreateTeleBoxManagerConfig = {
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
     stageRatio?: number;
+    highlightStage?: boolean;
 };
 
 export type BoxManagerContext = {
     safeSetAttributes: (attributes: any) => void;
-    getMainView: () => View;
     updateAppState: (appId: string, field: AppAttributes, value: any) => void;
     emitter: EmitterType;
     boxEmitter: BoxEmitterType;
@@ -72,7 +72,6 @@ export const createBoxManager = (
     return new BoxManager(
         {
             safeSetAttributes: (attributes: any) => manager.safeSetAttributes(attributes),
-            getMainView: () => manager.mainView,
             updateAppState: (...args) => manager.appManager?.store.updateAppState(...args),
             canOperate: () => manager.canOperate,
             notifyContainerRectUpdate: (rect: TeleBoxRect) =>
@@ -178,10 +177,6 @@ export class BoxManager {
         ]);
     }
 
-    private get mainView() {
-        return this.context.getMainView();
-    }
-
     private get canOperate() {
         return this.context.canOperate();
     }
@@ -251,6 +246,7 @@ export class BoxManager {
             root: root,
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
+            highlightStage: createTeleBoxManagerConfig?.highlightStage,
         };
 
         const manager = new TeleBoxManager(initManagerState);

package/src/Page/PageController.ts

@@ -13,6 +13,7 @@ export type PageState = {
 export interface PageController {
     nextPage: () => Promise<boolean>;
     prevPage: () => Promise<boolean>;
+    jumpPage: (index: number) => Promise<boolean>;
     addPage: (params?: AddPageParams) => Promise<void>;
     removePage: (index: number) => Promise<boolean>;
     pageState: PageState;

package/src/View/CameraSynchronizer.ts

@@ -1,14 +1,14 @@
 import { AnimationMode } from "white-web-sdk";
 import { delay, throttle } from "lodash";
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { Camera, View, Size } from "white-web-sdk";
+import type { Camera, View } from "white-web-sdk";
 import type { ISize } from "../AttributesDelegate";
 
 export type SaveCamera = (camera: Camera) => void;
 
 export class CameraSynchronizer {
-    protected remoteCamera?: Camera;
-    protected remoteSize?: ISize;
+    public remoteCamera?: Camera;
+    public remoteSize?: ISize;
     protected rect?: TeleBoxRect;
     protected view?: View;
 
@@ -53,21 +53,4 @@ export class CameraSynchronizer {
         this.saveCamera(camera);
         this.remoteCamera = camera;
     }
-
-    // 本地 Size 更新, 先匹配 camera 到新的 size 然后再发送 camera 数据到远端
-    public onLocalSizeUpdate = (size: Size) => {
-        if (this.rect && this.view) {
-            let scale: number;
-            if (size.width < size.height) {
-                scale = this.rect.width / size.width;
-            } else {
-                scale = this.rect.height / size.height;
-            }
-            const nextScale = this.view.camera.scale / scale;
-            this.view.moveCamera({
-                scale: nextScale,
-                animationMode: AnimationMode.Immediately
-            });
-        }
-    }
 }