@netless/window-manager 0.3.17 → 0.4.0-canary.2

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.4.0
+
+1. 废弃 `WindowManager.mount` 的多参数类型
+2. 添加 `bindContainer` 接口，`mount` 时 `container` 参数不再是必选
+
+
+## 0.3.18
+
+1. 修复最小化时刷新页面 box 位置错误的问题
+
 ## 0.3.17
 
 1. 同步 box 的 `z-index` 以保持顺序

package/README.md

@@ -2,54 +2,14 @@
 
 - 目录
   - [references](docs/api.md)
+  - [从白板迁移](docs/migrate.md)
 ## MainView
 
 `MainView` 也就是主白板, 是垫在所有窗口下面的主白板
 
 因为多窗口的原因，所以抽象出来一个主白板, 并且把以前部分对 `room` 的操作, 迁移到对 `mainView` 操作
 
-### 注意事项
-
-多窗口模式必须开启白板的 `useMultiViews` 和 `useMobXState` 选项
-
-会造成原本以下 `room` 上的一些方法和 `state` 失效
-
-`方法`
-
--   `room.bindHtmlElement()` 用 `WindowManager.mount()` 代替
--   `room.scalePptToFit()` 暂无代替,不再推荐调用 `scalePptToFit`
--   `room.setScenePath()` 用 `manager.setMainViewScenePath()` 代替
--   `room.setSceneIndex()` 用 `manager.setMainViewSceneIndex()` 代替
-
-> 为了方便使用 `manager` 替换了 `room` 上的一些方法可以直接对 `mainView` 生效
-
--   `room.disableCameraTransform`
--   `room.moveCamera`
--   `room.moveCameraToContain`
--   `room.convertToPointInWorld`
--   `room.setCameraBound`
-
-`camera`
-
--   `room.state.cameraState` 用 `manager.mainView.camera` 和 `manager.mainView.size` 代替
-
-想要监听主白板 `camera` 的变化, 请使用如下方式代替
-
-```javascript
-manager.mainView.callbacks.on("onCameraUpdated", camera => {
-    console.log(camera);
-});
-```
-
-监听主白板 `size` 变化
-
-```javascript
-manager.mainView.callbacks.on("onSizeUpdated", size => {
-    console.log(size);
-});
-```
-
-### 接入
+### 快速开始
 
 ```javascript
 import { WhiteWebSdk } from "white-web-sdk";
@@ -58,7 +18,7 @@ import "@netless/window-manager/dist/style.css";
 
 const sdk = new WhiteWebSdk({
     appIdentifier: "appIdentifier",
-    useMobXState: true
+    useMobXState: true // 请确保打开这个选项
 });
 
 sdk.joinRoom({
@@ -66,6 +26,7 @@ sdk.joinRoom({
     roomToken: "room token",
     invisiblePlugins: [WindowManager],
     useMultiViews: true, // 多窗口必须用开启 useMultiViews
+    disableMagixEventDispatchLimit: true, // 请确保打开这个选项
 }).then(async room => {
     const manager = await WindowManager.mount(
         room,

package/dist/AppContext.d.ts

@@ -2,11 +2,13 @@ import { autorun, listenDisposed, listenUpdated, reaction, unlistenDisposed, unl
 import type { Room, SceneDefinition, View } from "white-web-sdk";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
+import type { BoxManager } from "./BoxManager";
 import type { AppEmitterEvent } from "./index";
 import type { AppManager } from "./AppManager";
 import type { AppProxy } from "./AppProxy";
 export declare class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
     private manager;
+    private boxManager;
     appId: string;
     private appProxy;
     private appOptions?;
@@ -22,11 +24,10 @@ export declare class AppContext<TAttrs extends Record<string, any>, AppOptions =
         listenDisposed: typeof listenDisposed;
         unlistenDisposed: typeof unlistenDisposed;
     };
-    private boxManager;
     private store;
     readonly isAddApp: boolean;
     readonly isReplay: boolean;
-    constructor(manager: AppManager, appId: string, appProxy: AppProxy, appOptions?: AppOptions | (() => AppOptions) | undefined);
+    constructor(manager: AppManager, boxManager: BoxManager, appId: string, appProxy: AppProxy, appOptions?: AppOptions | (() => AppOptions) | undefined);
     getDisplayer(): import("white-web-sdk").Displayer<import("white-web-sdk").DisplayerCallbacks>;
     getAttributes(): TAttrs | undefined;
     getScenes(): SceneDefinition[] | undefined;

package/dist/AppListener.d.ts

@@ -2,8 +2,8 @@ import type { AppManager } from "./AppManager";
 export declare class AppListeners {
     private manager;
     private displayer;
-    private boxManager;
     constructor(manager: AppManager);
+    private get boxManager();
     addListeners(): void;
     removeListeners(): void;
     private mainMagixEventListener;
@@ -12,4 +12,5 @@ export declare class AppListeners {
     private switchViewsToFreedomHandler;
     private boxStateChangeHandler;
     private setMainViewScenePathHandler;
+    private moveCameraToContainHandler;
 }

package/dist/AppManager.d.ts

@@ -1,28 +1,27 @@
 import { AppStatus, Events } from "./constants";
 import { AppProxy } from "./AppProxy";
-import { AttributesDelegate } from "./AttributesDelegate";
-import { BoxManager } from "./BoxManager";
+import { WindowManager } from "./index";
 import { CameraStore } from "./Utils/CameraStore";
 import { MainViewProxy } from "./MainView";
-import { ReconnectRefresher } from "./ReconnectRefresher";
 import { ViewManager } from "./ViewManager";
+import type { ReconnectRefresher } from "./ReconnectRefresher";
+import type { BoxManager } from "./BoxManager";
 import type { Displayer, Room } from "white-web-sdk";
-import type { CreateTeleBoxManagerConfig } from "./BoxManager";
-import type { AddAppParams, WindowManager, TeleBoxRect } from "./index";
+import type { AddAppParams, TeleBoxRect } from "./index";
 export declare class AppManager {
     windowManger: WindowManager;
     displayer: Displayer;
-    boxManager: BoxManager;
     cameraStore: CameraStore;
     viewManager: ViewManager;
     appProxies: Map<string, AppProxy>;
     appStatus: Map<string, AppStatus>;
-    store: AttributesDelegate;
+    store: import("./AttributesDelegate").AttributesDelegate;
     mainViewProxy: MainViewProxy;
     refresher?: ReconnectRefresher;
     isReplay: boolean;
     private appListeners;
-    constructor(windowManger: WindowManager, options: CreateTeleBoxManagerConfig);
+    boxManager?: BoxManager;
+    constructor(windowManger: WindowManager);
     private onCreated;
     /**
      * 插件更新 attributes 时的回调
@@ -31,6 +30,10 @@ export declare class AppManager {
      * @memberof WindowManager
      */
     attributesUpdateCallback(apps: any): Promise<void>;
+    refresh(): void;
+    setBoxManager(boxManager: BoxManager): void;
+    resetMaximized(): void;
+    resetMinimized(): void;
     private onAppDelete;
     bindMainView(divElement: HTMLDivElement, disableCameraTransform: boolean): void;
     addApp(params: AddAppParams, isDynamicPPT: boolean): Promise<string | undefined>;
@@ -55,7 +58,7 @@ export declare class AppManager {
     safeDispatchMagixEvent(event: string, payload: any): void;
     private boxEventListener;
     focusByAttributes(apps: any): void;
-    notifyReconnected(): Promise<void>;
+    onReconnected(): Promise<void>;
     notifyContainerRectUpdate(rect: TeleBoxRect): void;
     dispatchInternalEvent(event: Events, payload: any): void;
     destroy(): void;

package/dist/AppProxy.d.ts

@@ -19,6 +19,9 @@ export declare class AppProxy extends Base {
     private kind;
     isAddApp: boolean;
     private status;
+    private stateKey;
+    private appResult?;
+    private appContext?;
     constructor(params: BaseInsertParams, manager: AppManager, appId: string, isAddApp: boolean);
     private initScenes;
     get view(): View | undefined;

package/dist/AttributesDelegate.d.ts

@@ -1,7 +1,6 @@
 import { AppAttributes } from "./constants";
 import type { AddAppParams, AppSyncAttributes } from "./index";
-import type { Camera, Size } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
+import type { Camera, Size, View } from "white-web-sdk";
 import type { Cursor } from "./Cursor/Cursor";
 export declare enum Fields {
     Apps = "apps",
@@ -26,14 +25,22 @@ export declare type Position = {
     id?: string;
 };
 export declare type PositionType = "main" | "app";
+export declare type StoreContext = {
+    getAttributes: () => any;
+    safeUpdateAttributes: (keys: string[], value: any) => void;
+    safeSetAttributes: (attributes: any) => void;
+};
 export declare class AttributesDelegate {
-    private manager;
-    constructor(manager: AppManager);
+    private context;
+    constructor(context: StoreContext);
+    setContext(context: StoreContext): void;
+    get attributes(): any;
     apps(): Apps;
     get focus(): string | undefined;
     getAppAttributes(id: string): AppSyncAttributes;
     getAppState(id: string): any;
-    getMaximized(): boolean | undefined;
+    getMaximized(): any;
+    getMinimized(): any;
     setupAppAttributes(params: AddAppParams, id: string, isDynamicPPT: boolean): void;
     updateAppState(appId: string, stateName: AppAttributes, state: any): void;
     cleanAppAttributes(id: string): void;
@@ -42,23 +49,23 @@ export declare class AttributesDelegate {
     getAppScenePath(id: string): any;
     getMainViewScenePath(): any;
     getMainViewSceneIndex(): any;
-    getBoxState(): import("@netless/telebox-insider").TELE_BOX_STATE;
+    getBoxState(): any;
     setMainViewScenePath(scenePath: string): void;
     setMainViewSceneIndex(index: number): void;
     getMainViewCamera(): MainViewCamera;
     getMainViewSize(): MainViewSize;
-    setMainViewCamera(camera: Camera & {
+    setMainViewCamera(camera: (Camera & {
         id: string;
-    } | undefined): void;
-    setMainViewSize(size: Size & {
+    }) | undefined): void;
+    setMainViewSize(size: (Size & {
         id: string;
-    } | undefined): void;
+    }) | undefined): void;
     setAppFocus(appId: string, focus: boolean): void;
     updateCursor(uid: string, position: Position): void;
     updateCursorState(uid: string, cursorState: string | undefined): void;
     getCursorState(uid: string): any;
     cleanCursor(uid: string): void;
-    setMainViewFocusPath(): void;
+    setMainViewFocusPath(mainView: View): void;
 }
 export declare type MainViewSize = {
     id: string;
@@ -74,3 +81,4 @@ export declare type MainViewCamera = {
 export declare type Cursors = {
     [key: string]: Cursor;
 };
+export declare const store: AttributesDelegate;

package/dist/Base/index.d.ts

@@ -1,8 +1,7 @@
 import type { AppManager } from "../AppManager";
-import { AttributesDelegate } from "../AttributesDelegate";
 export declare class Base {
     manager: AppManager;
-    store: AttributesDelegate;
+    store: import("../AttributesDelegate").AttributesDelegate;
     context: import("./Context").Context;
     constructor(manager: AppManager);
 }

package/dist/BoxManager.d.ts

@@ -1,8 +1,9 @@
+import { AppAttributes } from "./constants";
 import { TELE_BOX_STATE, TeleBoxManager } from "@netless/telebox-insider";
-import type { AddAppOptions, AppInitState } from "./index";
-import type { TeleBoxManagerUpdateConfig, ReadonlyTeleBox, TeleBoxColorScheme } from "@netless/telebox-insider";
+import { WindowManager } from "./index";
+import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
+import type { TeleBoxManagerUpdateConfig, ReadonlyTeleBox, TeleBoxColorScheme, TeleBoxRect } from "@netless/telebox-insider";
 import type Emittery from "emittery";
-import type { AppManager } from "./AppManager";
 import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
 export { TELE_BOX_STATE };
@@ -39,20 +40,34 @@ export declare type CreateTeleBoxManagerConfig = {
     collectorStyles?: Partial<CSSStyleDeclaration>;
     prefersColorScheme?: TeleBoxColorScheme;
 };
+export declare type BoxManagerContext = {
+    safeSetAttributes: (attributes: any) => void;
+    getMainView: () => View;
+    updateAppState: (appId: string, field: AppAttributes, value: any) => void;
+    emitter: EmitterType;
+    callbacks: CallbacksType;
+    canOperate: () => boolean;
+    notifyContainerRectUpdate: (rect: TeleBoxRect) => void;
+    cleanFocus: () => void;
+};
+export declare const createBoxManager: (manager: WindowManager, callbacks: CallbacksType, emitter: EmitterType, options: CreateTeleBoxManagerConfig) => BoxManager;
 export declare class BoxManager {
-    private manager;
+    private context;
+    private createTeleBoxManagerConfig?;
     teleBoxManager: TeleBoxManager;
-    appBoxMap: Map<string, string>;
-    private mainView;
-    constructor(manager: AppManager, createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig);
+    constructor(context: BoxManagerContext, createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig | undefined);
+    private get mainView();
+    private get canOperate();
     get boxState(): "normal" | "minimized" | "maximized";
     get maximized(): boolean;
     get minimized(): boolean;
     get darkMode(): boolean;
     get prefersColorScheme(): TeleBoxColorScheme;
+    get boxSize(): number;
     createBox(params: CreateBoxParams): void;
     setBoxInitState(appId: string): void;
     setupBoxManager(createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig): TeleBoxManager;
+    setCollectorContainer(container: HTMLElement): void;
     getBox(appId: string): ReadonlyTeleBox | undefined;
     closeBox(appId: string, skipUpdate?: boolean): ReadonlyTeleBox | undefined;
     boxIsFocus(appId: string): boolean | undefined;
@@ -72,5 +87,6 @@ export declare class BoxManager {
     focusTopBox(): void;
     setReadonly(readonly: boolean): void;
     setPrefersColorScheme(colorScheme: TeleBoxColorScheme): void;
+    setZIndex(id: string, zIndex: number, skipUpdate?: boolean): void;
     destroy(): void;
 }

package/dist/Cursor/Cursor.d.ts

@@ -13,11 +13,10 @@ export declare class Cursor extends Base {
     private cursorManager;
     private wrapper?;
     private member?;
-    private disposer;
     private timer?;
     private component?;
-    constructor(manager: AppManager, cursors: any, memberId: string, cursorManager: CursorManager, wrapper?: HTMLElement | undefined);
-    private startReaction;
+    constructor(manager: AppManager, addCursorChangeListener: (uid: string, callback: (position: Position, state: CursorState) => void) => void, cursors: any, memberId: string, cursorManager: CursorManager, wrapper?: HTMLElement | undefined);
+    private onCursorChange;
     private moveCursor;
     get memberApplianceName(): ApplianceNames | undefined;
     get memberColor(): string;

package/dist/Cursor/index.d.ts

@@ -1,6 +1,7 @@
-import { Base } from '../Base';
-import { Cursor } from './Cursor';
-import type { PositionType } from "../AttributesDelegate";
+import { Base } from "../Base";
+import { Cursor } from "./Cursor";
+import { CursorState } from "../constants";
+import type { PositionType, Position } from "../AttributesDelegate";
 import type { RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 export declare type EventType = {
@@ -19,16 +20,17 @@ export declare class CursorManager extends Base {
     cursorInstances: Map<string, Cursor>;
     roomMembers?: readonly RoomMember[];
     private mainViewElement?;
+    private sideEffectManager;
     constructor(appManager: AppManager);
+    setupWrapper(wrapper: HTMLElement): void;
     setMainViewDivElement(div: HTMLDivElement): void;
     private startReaction;
     private getUids;
     private handleRoomMembersChange;
     get cursors(): any;
-    get boxState(): import("@netless/telebox-insider").TELE_BOX_STATE;
+    get boxState(): any;
     get focusView(): View | undefined;
     private mouseMoveListener;
-    private touchMoveListener;
     private updateCursor;
     private getPoint;
     /**
@@ -43,5 +45,7 @@ export declare class CursorManager extends Base {
     deleteCursor(uid: string): void;
     hideCursor(uid: string): void;
     cleanMemberAttributes(members: readonly RoomMember[]): void;
+    onReconnect(): void;
+    addCursorChangeListener: (uid: string, callback: (position: Position, state: CursorState) => void) => void;
     destroy(): void;
 }

package/dist/MainView.d.ts

@@ -8,6 +8,7 @@ export declare class MainViewProxy extends Base {
     private mainViewIsAddListener;
     private mainView;
     private viewId;
+    private sideEffectManager;
     constructor(manager: AppManager);
     private get mainViewCamera();
     private get mainViewSize();

package/dist/ReconnectRefresher.d.ts

@@ -1,16 +1,23 @@
 import type { Room } from "white-web-sdk";
-import type { AppManager } from './AppManager';
+import type { EmitterType } from "./index";
+export declare type ReconnectRefresherContext = {
+    emitter: EmitterType;
+};
 export declare class ReconnectRefresher {
-    private manager;
+    private ctx;
     private phase?;
     private room;
     private reactors;
     private disposers;
-    constructor(room: Room | undefined, manager: AppManager);
+    constructor(ctx: ReconnectRefresherContext);
+    setRoom(room: Room | undefined): void;
+    setContext(ctx: ReconnectRefresherContext): void;
     private onPhaseChanged;
     private onReconnected;
     private releaseDisposers;
     add(id: string, func: any): void;
     remove(id: string): void;
+    hasReactor(id: string): boolean;
     destroy(): void;
 }
+export declare const reconnectRefresher: ReconnectRefresher;

package/dist/Utils/RoomHacker.d.ts

@@ -1,3 +1,3 @@
+import type { WindowManager } from '../index';
 import type { Room } from "white-web-sdk";
-import type { AppManager } from "../AppManager";
-export declare const replaceRoomFunction: (room: Room, manager: AppManager) => void;
+export declare const replaceRoomFunction: (room: Room, manager: WindowManager) => void;

package/dist/Utils/error.d.ts

@@ -19,3 +19,6 @@ export declare class BoxNotCreatedError extends Error {
 export declare class InvalidScenePath extends Error {
     message: string;
 }
+export declare class BoxManagerNotFoundError extends Error {
+    message: string;
+}

package/dist/constants.d.ts

@@ -9,7 +9,8 @@ export declare enum Events {
     WindowCreated = "WindowCreated",
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
-    SwitchViewsToFreedom = "SwitchViewsToFreedom"
+    SwitchViewsToFreedom = "SwitchViewsToFreedom",
+    MoveCameraToContain = "MoveCameraToContain"
 }
 export declare const MagixEventName = "__WindowManger";
 export declare enum AppAttributes {

package/dist/index.d.ts

@@ -29,11 +29,11 @@ export declare type AddAppOptions = {
 export declare type setAppOptions = AddAppOptions & {
     appOptions?: any;
 };
-export declare type AddAppParams = {
+export declare type AddAppParams<TAttributes = any> = {
     kind: string;
     src?: string;
     options?: AddAppOptions;
-    attributes?: any;
+    attributes?: TAttributes;
 };
 export declare type BaseInsertParams = {
     kind: string;
@@ -49,6 +49,7 @@ export declare type AppSyncAttributes = {
     state?: any;
     isDynamicPPT?: boolean;
     fullPath?: string;
+    createdAt?: number;
 };
 export declare type AppInitState = {
     id: string;
@@ -90,8 +91,10 @@ export declare type EmitterEvent = {
     observerIdChange: number;
     boxStateChange: string;
     playgroundSizeChange: DOMRect;
+    onReconnected: void;
 };
-export declare const emitter: Emittery<EmitterEvent>;
+export declare type EmitterType = Emittery<EmitterEvent>;
+export declare const emitter: EmitterType;
 export declare type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
     boxStateChange: `${TELE_BOX_STATE}`;
@@ -101,7 +104,7 @@ export declare type PublicEvent = {
 };
 export declare type MountParams = {
     room: Room;
-    container: HTMLElement;
+    container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
     /** 显示 PS 透明背景，默认 true */
@@ -114,7 +117,8 @@ export declare type MountParams = {
     disableCameraTransform?: boolean;
     prefersColorScheme?: TeleBoxColorScheme;
 };
-export declare const callbacks: Emittery<PublicEvent>;
+export declare type CallbacksType = Emittery<PublicEvent>;
+export declare const callbacks: CallbacksType;
 export declare class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     static kind: string;
     static displayer: Displayer;
@@ -132,20 +136,14 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     cursorManager?: CursorManager;
     viewMode: ViewMode;
     isReplay: boolean;
+    private boxManager?;
+    private static params?;
     constructor(context: InvisiblePluginContext);
-    /**
-     * 挂载 WindowManager
-     * @deprecated
-     */
-    static mount(room: Room, container: HTMLElement, collectorContainer?: HTMLElement, options?: {
-        chessboard: boolean;
-        containerSizeRatio: number;
-        collectorStyles?: Partial<CSSStyleDeclaration>;
-        debug?: boolean;
-        overwriteStyles?: string;
-    }): Promise<WindowManager>;
     static mount(params: MountParams): Promise<WindowManager>;
     private static initManager;
+    private static initContainer;
+    bindContainer(container: HTMLElement): void;
+    bindCollectorContainer(container: HTMLElement): void;
     /**
      * 注册插件
      */
@@ -153,7 +151,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     /**
      * 创建一个 app 至白板
      */
-    addApp(params: AddAppParams): Promise<string | undefined>;
+    addApp<T = any>(params: AddAppParams<T>): Promise<string | undefined>;
     private setupScenePath;
     /**
      * 设置 mainView 的 ScenePath, 并且切换白板为可写状态
@@ -191,9 +189,9 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     get camera(): Camera;
     get cameraState(): CameraState;
     get apps(): Apps | undefined;
-    get boxState(): TeleBoxState;
+    get boxState(): TeleBoxState | undefined;
     get darkMode(): boolean;
-    get prefersColorScheme(): TeleBoxColorScheme;
+    get prefersColorScheme(): TeleBoxColorScheme | undefined;
     /**
      * 查询所有的 App
      */