@netless/window-manager 1.0.0-canary.7 → 1.0.0-canary.71

package/src/index.ts

@@ -2,7 +2,7 @@ import pRetry from "p-retry";
 import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
 import { callbacks } from "./callback";
-import { checkVersion, setupWrapper } from "./Helper";
+import { checkVersion, createInvisiblePlugin, setupWrapper } from "./Helper";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
 import { DEFAULT_CONTAINER_RATIO, Events, INIT_DIR, ROOT_DIR } from "./constants";
@@ -10,13 +10,12 @@ import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
-import { isEqual, isNull, isObject, omit, isNumber } from "lodash";
+import { isEqual, isNull, isObject, isNumber, omit } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
 import { replaceRoomFunction } from "./Utils/RoomHacker";
 import { setupBuiltin } from "./BuiltinApps";
-import "video.js/dist/video-js.css";
 import "./style.css";
 import "@netless/telebox-insider/dist/style.css";
 import {
@@ -27,6 +26,8 @@ import {
     putScenes,
     wait,
 } from "./Utils/Common";
+import { boxEmitter } from "./BoxEmitter";
+import { Val } from "value-enhancer";
 import type { TELE_BOX_STATE, BoxManager } from "./BoxManager";
 import * as Errors from "./Utils/error";
 import type { Apps, Position , ICamera, ISize } from "./AttributesDelegate";
@@ -37,29 +38,31 @@ import type {
     Room,
     InvisiblePluginContext,
     Camera,
-    AnimationMode,
     CameraBound,
     Point,
-    Rectangle,
     CameraState,
     Player,
     ImageInformation,
     SceneState,
+    Size,
+    AnimationMode, 
+    Rectangle,
 } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
-import type { ApplianceIcons, NetlessApp, RegisterParams } from "./typings";
-import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
+import type { ApplianceIcons, ManagerViewMode, MoveCameraParams, NetlessApp, RegisterParams } from "./typings";
+import type { TeleBoxColorScheme, TeleBoxFullscreen, TeleBoxManager, TeleBoxManagerThemeConfig, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
-import { boxEmitter } from "./BoxEmitter";
+import type { ScrollState } from "./View/ScrollMode";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
     boxState: TELE_BOX_STATE;
     maximized?: boolean;
     minimized?: boolean;
+    scrollTop?: number;
     [key: string]: any;
 };
 
@@ -106,6 +109,7 @@ export type AppSyncAttributes = {
     createdAt?: number;
     camera?: ICamera;
     size?: ISize;
+    setup: boolean;
 };
 
 export type AppInitState = {
@@ -120,6 +124,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 };
@@ -129,8 +138,6 @@ export type MountParams = {
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
-    /** 显示 PS 透明背景，默认 true */
-    chessboard?: boolean;
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
@@ -138,12 +145,28 @@ export type MountParams = {
     debug?: boolean;
     disableCameraTransform?: boolean;
     prefersColorScheme?: TeleBoxColorScheme;
+    /** @deprecated */
+    chessboard?: boolean;
     applianceIcons?: ApplianceIcons;
+    containerStyle?: string;
+    stageStyle?: string;
+    fullscreen?: TeleBoxFullscreen;
+    /** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
+    defaultBoxBodyStyle?: string | null;
+    /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
+    defaultBoxStageStyle?: string | null;
+    /** Theme variable */
+    theme?: TeleBoxManagerThemeConfig;
+    /** ScrollMode BaseWidth */
+    scrollModeWidth?: number;
+    /** ScrollMode BaseHeight */
+    scrollModeHeight?: number;
+    viewMode?: ManagerViewMode;
 };
 
 export const reconnectRefresher = new ReconnectRefresher({ emitter });
 
-export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> implements PageController {
+export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any> implements PageController {
     public static kind = "WindowManager";
     public static displayer: Displayer;
     public static playground?: HTMLElement;
@@ -151,6 +174,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     public static debug = false;
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
+    public static registry = appRegister;
 
     public version = __APP_VERSION__;
     public dependencies = __APP_DEPENDENCIES__;
@@ -161,7 +185,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     public emitter: Emittery<PublicEvent> = callbacks;
     public appManager?: AppManager;
     public cursorManager?: CursorManager;
-    public viewMode = ViewMode.Broadcaster;
+    public viewMode$ = new Val<ManagerViewMode>(ViewMode.Broadcaster);
+    public playground$ = new Val<HTMLElement | undefined>(undefined);
     public isReplay = isPlayer(this.displayer);
     private _pageState?: PageStateImpl;
 
@@ -179,14 +204,13 @@ 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;
         WindowManager.params = params;
         WindowManager.displayer = params.room;
-        checkVersion();
         let manager: WindowManager | undefined = undefined;
+
+        checkVersion();
         if (isRoom(room)) {
             if (room.phase !== RoomPhase.Connected) {
                 throw new Error("[WindowManager]: Room only Connected can be mount");
@@ -225,33 +249,42 @@ 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();
-
+        if (params.viewMode) {
+            manager.viewMode$.setValue(params.viewMode);
+        }
         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,
+            containerStyle: params.containerStyle,
+            stageStyle: params.stageStyle,
+            fullscreen: params.fullscreen,
+            theme: params.theme,
         });
         manager.appManager?.setBoxManager(manager.boxManager);
         if (params.container) {
             manager.bindContainer(params.container);
         }
 
+        if (params.scrollModeWidth && params.scrollModeHeight) {
+            manager.appManager.scrollBaseSize$.setValue({ width: params.scrollModeWidth, height: params.scrollModeHeight });
+        } 
+
         replaceRoomFunction(room, manager);
         emitter.emit("onCreated");
         WindowManager.isCreated = true;
         try {
-            await initDb();
+            await initDb(appRegister);
         } catch (error) {
             console.warn("[WindowManager]: indexedDB open failed");
             console.log(error);
@@ -259,8 +292,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return manager;
     }
 
-    private static async initManager(room: Room): Promise<WindowManager> {
-        let manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
+    private static async initManager(room: Room): Promise<WindowManager | undefined> {
+        let manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager | undefined;
         if (!manager) {
             if (isRoom(room)) {
                 if (room.isWritable === false) {
@@ -269,18 +302,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                     } catch (error) {
                         throw new Error("[WindowManger]: room must be switched to be writable");
                     }
-                    manager = (await room.createInvisiblePlugin(
-                        WindowManager,
-                        {}
-                    )) as WindowManager;
-                    manager.ensureAttributes();
+                    manager = await createInvisiblePlugin(room);
+                    manager?.ensureAttributes();
                     await wait(500);
                     await room.setWritable(false);
                 } else {
-                    manager = (await room.createInvisiblePlugin(
-                        WindowManager,
-                        {}
-                    )) as WindowManager;
+                    manager = await createInvisiblePlugin(room);
                 }
             }
         }
@@ -289,12 +316,13 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
 
     private static initContainer(
         container: HTMLElement,
+        target: HTMLElement,
         overwriteStyles: string | undefined
     ) {
         if (!WindowManager.container) {
             WindowManager.container = container;
         }
-        const { playground, mainViewElement } = setupWrapper(container);
+        const { playground, mainViewElement } = setupWrapper(container, target);
         WindowManager.playground = playground;
         if (overwriteStyles) {
             const style = document.createElement("style");
@@ -317,10 +345,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 container.appendChild(WindowManager.container.firstChild);
             }
         } else {
-            if (WindowManager.params) {
+            const teleboxContainer = this.boxManager?.teleBoxManager.$stage;
+            if (WindowManager.params && teleboxContainer) {
                 const params = WindowManager.params;
                 const mainViewElement = WindowManager.initContainer(
                     container,
+                    teleboxContainer,
                     params.overwriteStyles
                 );
                 if (this.boxManager && WindowManager.playground) {
@@ -329,7 +359,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 this.bindMainView(mainViewElement, params.disableCameraTransform);
                 if (WindowManager.playground) {
                     this.cursorManager?.setupWrapper(WindowManager.playground);
+                    this.playground$.setValue(WindowManager.playground);
                 }
+               
             }
         }
         emitter.emit("updateManagerRect");
@@ -353,7 +385,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     /**
      * 注册插件
      */
-    public static register<AppOptions = any, SetupResult = any, Attributes = any>(
+    public static register<AppOptions = any, SetupResult = any, Attributes extends Record<string, any> = any>(
         params: RegisterParams<AppOptions, SetupResult, Attributes>
     ): Promise<void> {
         return appRegister.register(params);
@@ -504,15 +536,28 @@ 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;
-            const scene = params?.scene;
+            const scene = params?.scene || {};
+            const scenes = Array.isArray(scene) ? scene : [scene];
             if (after) {
                 const nextIndex = this.mainViewSceneIndex + 1;
-                this.room.putScenes(ROOT_DIR, [scene || {}], nextIndex);
+                this.room.putScenes(ROOT_DIR, scenes, nextIndex);
             } else {
-                this.room.putScenes(ROOT_DIR, [scene || {}]);
+                this.room.putScenes(ROOT_DIR, scenes);
             }
         }
     }
@@ -579,17 +624,23 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     /**
      * 设置 ViewMode
      */
-    public setViewMode(mode: ViewMode): void {
-        if (mode === ViewMode.Broadcaster) {
-            if (this.canOperate) {
-                this.appManager?.mainViewProxy.setCameraAndSize();
+    public setViewMode(mode: ManagerViewMode): void {
+        log("setViewMode", mode);
+        if (this.viewMode$.value === 'scroll' && mode !== 'scroll') {
+            throw new Errors.InvalidViewModeError();
+        }
+        const mainViewProxy = this.appManager?.mainViewProxy;
+        if (mode === ViewMode.Broadcaster || mode === ViewMode.Follower) {
+            if (this.canOperate && mode === ViewMode.Broadcaster) {
+                mainViewProxy?.storeCurrentCamera();
+                mainViewProxy?.storeCurrentSize();
             }
-            this.appManager?.mainViewProxy.start();
+            mainViewProxy?.start();
         }
-        if (mode === ViewMode.Freedom) {
-            this.appManager?.mainViewProxy.stop();
+        if (mode === ViewMode.Freedom || mode === "scroll") {
+            mainViewProxy?.stop();
         }
-        this.viewMode = mode;
+        this.viewMode$.setValue(mode);
     }
 
     public setBoxState(boxState: TeleBoxState): void {
@@ -637,6 +688,22 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public get baseCamera() {
+        if (this.appManager) {
+            return this.appManager.mainViewProxy.camera$.value;
+        } else {
+            throw new Errors.AppManagerNotInitError();
+        }
+    }
+
+    public get baseSize() {
+        if (this.appManager) {
+            return this.appManager.mainViewProxy.size$.value;
+        } else {
+            throw new Errors.AppManagerNotInitError();
+        }
+    }
+
     public get cameraState(): CameraState {
         if (this.appManager) {
             return this.appManager.mainViewProxy.cameraState;
@@ -661,6 +728,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return Boolean(this.appManager?.boxManager?.darkMode);
     }
 
+    public get viewMode() {
+        return this.viewMode$.value;
+    }
+
     public get prefersColorScheme(): TeleBoxColorScheme | undefined {
         if (this.appManager) {
             return this.appManager.boxManager?.prefersColorScheme;
@@ -669,6 +740,14 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public get fullscreen(): TeleBoxFullscreen | undefined {
+        if (this.appManager) {
+            return this.appManager.boxManager?.teleBoxManager.fullscreen;
+        } else {
+            throw new Errors.AppManagerNotInitError();
+        }
+    }
+
     public get focused(): string | undefined {
         return this.attributes.focus;
     }
@@ -722,6 +801,17 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
     }
 
+    public get scrollState(): ScrollState | undefined {
+        return this.appManager?.scrollMode?.scrollState$.value;
+    }
+
+    public get teleboxManager(): TeleBoxManager {
+        if (!this.boxManager) {
+            throw new Errors.BoxManagerNotInitializeError();
+        }
+        return this.boxManager.teleBoxManager;
+    }
+
     /**
      * 查询所有的 App
      */
@@ -743,17 +833,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         return this.appManager?.closeApp(appId);
     }
 
-    public moveCamera(
-        camera: Partial<Camera> & { animationMode?: AnimationMode | undefined }
-    ): void {
+    public moveCamera = (camera: MoveCameraParams): void => {
         const pureCamera = omit(camera, ["animationMode"]);
         const mainViewCamera = { ...this.mainView.camera };
         if (isEqual({ ...mainViewCamera, ...pureCamera }, mainViewCamera)) return;
-        this.mainView.moveCamera(camera);
+        this.appManager?.mainViewProxy.moveCamera(camera);
         this.appManager?.dispatchInternalEvent(Events.MoveCamera, camera);
-        setTimeout(() => {
-            this.appManager?.mainViewProxy.setCameraAndSize();
-        }, 500);
     }
 
     public moveCameraToContain(
@@ -762,11 +847,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
                 animationMode?: AnimationMode;
             }>
     ): void {
+        // this.debouncedStoreCamera();
         this.mainView.moveCameraToContain(rectangle);
         this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
-        setTimeout(() => {
-            this.appManager?.mainViewProxy.setCameraAndSize();
-        }, 500);
     }
 
     public convertToPointInWorld(point: Point): Point {
@@ -835,6 +918,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         this.appManager?.boxManager?.setPrefersColorScheme(scheme);
     }
 
+    public setFullscreen(fullscreen: TeleBoxFullscreen): void {
+        this.appManager?.boxManager?.teleBoxManager.setFullscreen(fullscreen);
+    }
+
     public cleanCurrentScene(): void {
         this.focusedView?.cleanCurrentScene();
     }
@@ -894,7 +981,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) {
@@ -906,6 +993,55 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         emitter.emit("containerSizeRatioUpdate", ratio);
     }
 
+    public setContainerStyle(style: string) {
+        this.boxManager?.teleBoxManager.setContainerStyle(style);
+    }
+
+    public setStageStyle(style: string) {
+        this.boxManager?.teleBoxManager.setStageStyle(style);
+    }
+
+    public setBaseSize(size: Size) {
+        this.appManager?.mainViewProxy.setMainViewSize(size);
+        setTimeout(() => {
+            if (!this.appManager || !this.appManager.mainViewProxy.camera$.value) return;
+            this.appManager.mainViewProxy.storeCamera({
+                ...this.appManager.mainViewProxy.camera$.value,
+                id: this.appManager.uid,
+                scale: 1
+            });
+        }, 500);
+    }
+    /**
+     * 切换 focus 到指定的 app, 并且把这个 app 放到最前面
+     */
+     public focusApp(appId: string) {
+        const box = this.boxManager?.getBox(appId);
+        if (box) {
+            this.boxManager?.focusBox({ appId }, false);
+            // 1.0 版本这里会有正式的 api
+            (this.boxManager?.teleBoxManager as any).makeBoxTop(box, false);
+        }
+    }
+
+    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://");
@@ -939,5 +1075,6 @@ setupBuiltin();
 
 export * from "./typings";
 
-export { BuiltinApps } from "./BuiltinApps";
+export { BuiltinApps, BuiltinAppsMap } from "./BuiltinApps";
 export type { PublicEvent } from "./callback";
+export type { Member } from "./Helper";

package/src/storage.ts

@@ -0,0 +1,15 @@
+import { Storage } from "@netless/synced-store";
+import { Val } from "value-enhancer";
+import type { AppManager } from "./AppManager";
+
+export type ScrollStorageState = { scrollTop: number }
+export type ScrollStorage = Storage<ScrollStorageState>;
+
+export const createScrollStorage = (manager: AppManager) => {
+    return new Storage<ScrollStorageState>({
+        plugin$: new Val(manager.windowManger),
+        isWritable$: manager.isWritable$,
+        namespace: "scrollStorage",
+        defaultState: { scrollTop: 0 }
+    });
+};

package/src/style.css

@@ -7,48 +7,9 @@
     user-select: none;
 }
 
-.netless-window-manager-sizer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    overflow: hidden;
-    display: flex;
-}
-
-.netless-window-manager-sizer-horizontal {
-    flex-direction: column;
-}
-
-.netless-window-manager-sizer::before,
-.netless-window-manager-sizer::after {
-    flex: 1;
-    content: "";
-    display: block;
-}
-
-.netless-window-manager-chess-sizer::before,
-.netless-window-manager-chess-sizer::after {
-    background-image: linear-gradient(45deg, #b0b0b0 25%, transparent 25%),
-        linear-gradient(-45deg, #b0b0b0 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #b0b0b0 75%),
-        linear-gradient(-45deg, transparent 75%, #b0b0b0 75%);
-    background-color: #fff;
-    background-size: 20px 20px;
-    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-}
-
-.netless-window-manager-wrapper {
-    position: relative;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-}
 
 .netless-window-manager-main-view {
+    position: absolute;
     width: 100%;
     height: 100%;
 }
@@ -122,7 +83,7 @@
     left: 0;
     top: 0;
     will-change: transform;
-    transition: transform 0.1s;
+    transition: transform 0.12s;
     transform-origin: 0 0;
     user-select: none;
 }
@@ -158,6 +119,20 @@
     margin-top: 3px;
 }
 
+.netless-window-manager-cursor-pencilEraser-image {
+    margin-left: -22px;
+    margin-top: 3px;
+}
+
+.netless-window-manager-laserPointer-pencilEraser-offset {
+    margin-left: -18px;
+}
+
+.netless-window-manager-pencilEraser-3-offset {
+    margin-top: -14px;
+    margin-left: -6px;
+}
+
 .netless-window-manager-cursor-name {
     width: 100%;
     height: 48px;
@@ -180,10 +155,6 @@
 }
 
 .window-manager-view-wrapper {
-    z-index: 5000;
-    width: 100%;
-    height: 100%;
     position: absolute;
-    left: 0;
-    top: 0;
-}
+    z-index: 10;
+}