@netless/window-manager 1.0.0-canary.5 → 1.0.0-canary.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.5",
+  "version": "1.0.0-canary.8",
   "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> {
@@ -50,6 +49,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     public readonly isAddApp: boolean;
     public readonly isReplay = this.manager.isReplay;
     private whiteBoardView?: WhiteBoardView;
+    public _viewWrapper?: HTMLElement;
 
     constructor(
         private manager: AppManager,
@@ -62,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 => {
@@ -93,20 +97,22 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
             view = this.appProxy.createAppDir();
         }
         const viewWrapper = document.createElement("div");
+        this._viewWrapper = viewWrapper;
         viewWrapper.className = "window-manager-view-wrapper";
         this.box.$content.parentElement?.appendChild(viewWrapper);
         const removeViewWrapper = () => {
             this.box.$content.parentElement?.removeChild(viewWrapper);
+            this._viewWrapper = undefined;
         }
         view.divElement = viewWrapper;
         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;
@@ -114,11 +120,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 = () => {

package/src/App/AppProxy.ts

@@ -54,7 +54,7 @@ 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;
@@ -136,11 +136,37 @@ export class AppProxy implements PageRemoveService {
         });
         combine([this.box$, this.view$]).subscribe(([box, view]) => {
             if (box && view) {
-                const appViewSync = new AppViewSync(this);
-                this.appViewSync = appViewSync;
-                this.sideEffectManager.add(() => () => appViewSync.destroy());
+                if (!this.camera$.value) {
+                    this.storeCamera({
+                        centerX: 0, centerY: 0, scale: 1, id: this.uid,
+                    });
+                    this.camera$.setValue(toJS(this.appAttributes.camera));
+                }
+                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));
+                }
+                this.appViewSync = new AppViewSync(this);
+                this.sideEffectManager.add(() => () => this.appViewSync?.destroy());
             }
         });
+        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";
+                }
+            }
+        }));
     }
 
     public createAppDir() {

package/src/App/AppViewSync.ts

@@ -3,6 +3,7 @@ import { SideEffectManager } from "side-effect-manager";
 import type { Camera, View } from "white-web-sdk";
 import type { AppProxy } from "./AppProxy";
 import { isEqual } from "lodash";
+import { combine } from "value-enhancer";
 
 export class AppViewSync {
     private sem = new SideEffectManager();
@@ -32,14 +33,12 @@ export class AppViewSync {
                     }
                 }),
             );
-            if (!this.appProxy.size$.value) {
-                this.appProxy.storeSize({
-                    id: this.appProxy.uid,
-                    width: box.contentStageRect.width,
-                    height: box.contentStageRect.height,
-                });
-            }
         }
+        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

@@ -3,7 +3,7 @@ import { AppCreateQueue } from "./Utils/AppCreateQueue";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./App";
 import { appRegister } from "./Register";
-import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
+import { autorun, isPlayer, isRoom, ScenePathType, toJS } from "white-web-sdk";
 import { boxEmitter } from "./BoxEmitter";
 import { calculateNextIndex } from "./Page";
 import { callbacks } from "./callback";
@@ -34,10 +34,10 @@ import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
 import type {
     Displayer,
-    DisplayerState,
     Room,
     ScenesCallbacksNode,
     SceneState,
+    RoomState,
 } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 import type {
@@ -651,7 +651,7 @@ export class AppManager {
         }
     }
 
-    private displayerStateListener = (state: Partial<DisplayerState>) => {
+    private displayerStateListener = (state: Partial<RoomState>) => {
         const sceneState = state.sceneState;
         if (sceneState) {
             const scenePath = sceneState.scenePath;
@@ -669,6 +669,9 @@ export class AppManager {
             emitter.emit("roomMembersChange", this.members);
         }
         emitter.emit("observerIdChange", this.displayer.observerId);
+        if (state.memberState) {
+            emitter.emit("memberStateChange", toJS(state.memberState));
+        }
     };
 
     public displayerWritableListener = (isReadonly: boolean) => {

package/src/InternalEmitter.ts

@@ -2,6 +2,7 @@ import Emittery from "emittery";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { AppInitState, CursorMovePayload } from "./index";
 import type { Member } from "./Helper";
+import type { MemberState } from "white-web-sdk";
 
 export type RemoveSceneParams = {
     scenePath: string;
@@ -31,6 +32,7 @@ export type EmitterEvent = {
     writableChange: boolean;
     containerSizeRatioUpdate: number;
     roomMembersChange: Member[];
+    memberStateChange: MemberState;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/View/CameraSynchronizer.ts

@@ -7,8 +7,8 @@ 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;