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

package/src/index.ts

@@ -29,7 +29,7 @@ import {
 } from "./Utils/Common";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
 import * as Errors from "./Utils/error";
-import type { Apps, Position } from "./AttributesDelegate";
+import type { Apps, Position , ICamera, ISize } from "./AttributesDelegate";
 import type {
     Displayer,
     SceneDefinition,
@@ -54,6 +54,7 @@ import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
 import { boxEmitter } from "./BoxEmitter";
+import { Val } from "value-enhancer";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -104,6 +105,8 @@ export type AppSyncAttributes = {
     isDynamicPPT?: boolean;
     fullPath?: string;
     createdAt?: number;
+    camera?: ICamera;
+    size?: ISize;
 };
 
 export type AppInitState = {
@@ -118,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 };
@@ -127,8 +135,10 @@ export type MountParams = {
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
-    /** 显示 PS 透明背景，默认 true */
+    /** @deprecated */
     chessboard?: boolean;
+    /** 是否高亮显示同步区域, 默认为 true */
+    highlightStage?: boolean;
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
@@ -160,6 +170,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     public appManager?: AppManager;
     public cursorManager?: CursorManager;
     public viewMode = ViewMode.Broadcaster;
+    public viewMode$ = new Val<ViewMode>(ViewMode.Broadcaster);
     public isReplay = isPlayer(this.displayer);
     private _pageState?: PageStateImpl;
 
@@ -177,7 +188,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     public static async mount(params: MountParams): Promise<WindowManager> {
         const room = params.room;
         WindowManager.container = params.container;
-        const containerSizeRatio = params.containerSizeRatio;
+
         const debug = params.debug;
 
         const cursor = params.cursor;
@@ -223,22 +234,22 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             throw new Error("[WindowManager]: create manager failed");
         }
 
-        if (containerSizeRatio) {
-            WindowManager.containerSizeRatio = containerSizeRatio;
+        if (params.containerSizeRatio) {
+            WindowManager.containerSizeRatio = params.containerSizeRatio;
         }
+        manager.containerSizeRatio = WindowManager.containerSizeRatio;
         await manager.ensureAttributes();
 
         manager.appManager = new AppManager(manager);
         manager._pageState = new PageStateImpl(manager.appManager);
         manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
-        if (containerSizeRatio) {
-            manager.containerSizeRatio = containerSizeRatio;
-        }
+
         manager.boxManager = createBoxManager(manager, callbacks, emitter, boxEmitter, {
             collectorContainer: params.collectorContainer,
             collectorStyles: params.collectorStyles,
             prefersColorScheme: params.prefersColorScheme,
-            stageRatio: params.containerSizeRatio,
+            stageRatio: WindowManager.containerSizeRatio,
+            highlightStage: params.highlightStage
         });
         manager.appManager?.setBoxManager(manager.boxManager);
         if (params.container) {
@@ -502,6 +513,18 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public async jumpPage(index: number): Promise<boolean> {
+        if (!this.appManager) {
+            return false;
+        }
+        if (index < 0 || index >= this.pageState.length) {
+            console.warn(`[WindowManager]: index ${index} out of range`);
+            return false;
+        }
+        await this.appManager.setMainViewSceneIndex(index);
+        return true;
+    }
+
     public async addPage(params?: AddPageParams): Promise<void> {
         if (this.appManager) {
             const after = params?.after;
@@ -578,16 +601,19 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
      * 设置 ViewMode
      */
     public setViewMode(mode: ViewMode): void {
+        log("setViewMode", mode);
+        const mainViewProxy = this.appManager?.mainViewProxy;
         if (mode === ViewMode.Broadcaster) {
             if (this.canOperate) {
-                this.appManager?.mainViewProxy.setCameraAndSize();
+                mainViewProxy?.storeCurrentCamera();
             }
-            this.appManager?.mainViewProxy.start();
+            mainViewProxy?.start();
         }
         if (mode === ViewMode.Freedom) {
-            this.appManager?.mainViewProxy.stop();
+            mainViewProxy?.stop();
         }
         this.viewMode = mode;
+        this.viewMode$.setValue(mode);
     }
 
     public setBoxState(boxState: TeleBoxState): void {
@@ -750,7 +776,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         this.mainView.moveCamera(camera);
         this.appManager?.dispatchInternalEvent(Events.MoveCamera, camera);
         setTimeout(() => {
-            this.appManager?.mainViewProxy.setCameraAndSize();
+            this.appManager?.mainViewProxy.storeCurrentCamera();
         }, 500);
     }
 
@@ -763,7 +789,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         this.mainView.moveCameraToContain(rectangle);
         this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
         setTimeout(() => {
-            this.appManager?.mainViewProxy.setCameraAndSize();
+            this.appManager?.mainViewProxy.storeCurrentCamera();
         }, 500);
     }
 
@@ -892,7 +918,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         if (WindowManager.container) {
             this.bindContainer(WindowManager.container);
         }
-        this.appManager?.refresher?.refresh();
+        this.appManager?.refresher.refresh();
     }
 
     public setContainerSizeRatio(ratio: number) {
@@ -904,6 +930,24 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         emitter.emit("containerSizeRatioUpdate", ratio);
     }
 
+    public createPPTHandler() {
+        return {
+            onPageJumpTo: (_pptUUID: string, index: number) => {
+                this.appManager?.focusApp?.appContext?.whiteBoardView?.jumpPage(index);
+            },
+            onPageToNext: () => {
+                if (this.focused) {
+                    this.appManager?.focusApp?.appContext?.whiteBoardView?.nextPage();
+                }
+            },
+            onPageToPrev: () => {
+                if (this.focused) {
+                    this.appManager?.focusApp?.appContext?.whiteBoardView?.prevPage();
+                }
+            }
+        }
+    }
+
     private isDynamicPPT(scenes: SceneDefinition[]) {
         const sceneSrc = scenes[0]?.ppt?.src;
         return sceneSrc?.startsWith("pptx://");

package/src/style.css

@@ -178,3 +178,11 @@
     right: 10px;
     bottom: 15px;
 }
+
+.window-manager-view-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+}