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

package/dist/src/View/ScrollMode.d.ts

@@ -0,0 +1,32 @@
+import { SideEffectManager } from "side-effect-manager";
+import type { ReadonlyVal } from "value-enhancer";
+import type { AppManager } from "../AppManager";
+import type { ScrollStorage } from "../storage";
+export declare type ScrollState = {
+    scrollTop: number;
+    page: number;
+    maxScrollPage: number;
+};
+export declare class ScrollMode {
+    private manager;
+    readonly sideEffect: SideEffectManager;
+    private readonly _root$;
+    private readonly _whiteboard$;
+    private readonly _scrollTop$;
+    readonly _page$: ReadonlyVal<number>;
+    private readonly _scale$;
+    private readonly _size$;
+    private readonly _mainView$;
+    private baseWidth;
+    private baseHeight;
+    scrollStorage: ScrollStorage;
+    readonly scrollState$: ReadonlyVal<ScrollState>;
+    setRoot(root: HTMLElement): void;
+    constructor(manager: AppManager);
+    private initScroll;
+    private updateScroll;
+    private updateBound;
+    dispose(): void;
+    private getWhiteboardElement;
+    private onWheel;
+}

package/dist/src/View/ViewSync.d.ts

@@ -0,0 +1,32 @@
+import { Val } from "value-enhancer";
+import type { View } from "white-web-sdk";
+import type { ReadonlyVal } from "value-enhancer";
+import type { ICamera, ISize } from "../AttributesDelegate";
+import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { ManagerViewMode } from "../typings";
+export declare type ViewSyncContext = {
+    uid: string;
+    camera$: Val<ICamera | undefined, boolean>;
+    size$: Val<ISize | undefined>;
+    stageRect$: ReadonlyVal<TeleBoxRect>;
+    viewMode$?: Val<ManagerViewMode>;
+    storeCamera: (camera: ICamera) => void;
+    storeSize: (size: ISize) => void;
+    view$: Val<View | undefined>;
+};
+export declare class ViewSync {
+    private context;
+    private sem;
+    private synchronizer;
+    private needRecoverCamera$?;
+    constructor(context: ViewSyncContext);
+    private get isBroadcastMode();
+    private createSynchronizer;
+    private subscribeView;
+    private subscribeCamera;
+    private subscribeSize;
+    private subscribeStageRect;
+    bindView: (view?: View | undefined) => void;
+    private onCameraUpdatedByDevice;
+    destroy(): void;
+}

package/dist/{callback.d.ts → src/callback.d.ts}

@@ -1,8 +1,10 @@
 import Emittery from "emittery";
-import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
+import type { TeleBoxColorScheme, TeleBoxFullscreen, TELE_BOX_STATE } from "@netless/telebox-insider";
 import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
+import type { ICamera, ISize } from "./AttributesDelegate";
+import type { ScrollState } from "./View/ScrollMode";
 export declare type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
     boxStateChange: `${TELE_BOX_STATE}`;
@@ -19,6 +21,16 @@ export declare type PublicEvent = {
     ready: undefined;
     sceneStateChange: SceneState;
     pageStateChange: PageState;
+    appClose: {
+        appId: string;
+        kind: string;
+        error?: Error;
+    };
+    baseCameraChange: ICamera;
+    baseSizeChange: ISize;
+    fullscreenChange: TeleBoxFullscreen;
+    userScroll: undefined;
+    scrollStateChange: ScrollState;
 };
 export declare type CallbacksType = Emittery<PublicEvent>;
 export declare const callbacks: CallbacksType;

package/dist/{constants.d.ts → src/constants.d.ts}

@@ -5,18 +5,18 @@ export declare enum Events {
     AppBoxStateChange = "AppBoxStateChange",
     GetAttributes = "GetAttributes",
     UpdateWindowManagerWrapper = "UpdateWindowManagerWrapper",
-    InitReplay = "InitReplay",
     WindowCreated = "WindowCreated",
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SetAppFocusIndex = "SetAppFocusIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
-    MoveCamera = "MoveCamera",
-    MoveCameraToContain = "MoveCameraToContain",
     CursorMove = "CursorMove",
     RootDirRemoved = "RootDirRemoved",
     Refresh = "Refresh",
-    InitMainViewCamera = "InitMainViewCamera"
+    InitMainViewCamera = "InitMainViewCamera",
+    InvokeAttributesUpdateCallback = "InvokeAttributesUpdateCallback",
+    MoveCamera = "MoveCamera",
+    MoveCameraToContain = "moveCameraToContain"
 }
 export declare const MagixEventName = "__WindowManger";
 export declare const EnsureReconnectEvent = "__WindowMangerEnsureReconnected__";
@@ -24,7 +24,12 @@ export declare enum AppAttributes {
     Size = "size",
     Position = "position",
     SceneIndex = "SceneIndex",
-    ZIndex = "zIndex"
+    ZIndex = "zIndex",
+    Visible = "visible",
+    Ratio = "ratio",
+    StageRatio = "stageRatio",
+    Draggable = "draggable",
+    Resizable = "resizable"
 }
 export declare enum AppEvents {
     setBoxSize = "setBoxSize",
@@ -47,3 +52,5 @@ export declare const ROOT_DIR = "/";
 export declare const INIT_DIR = "/init";
 export declare const SETUP_APP_DELAY = 50;
 export declare const MAX_PAGE_SIZE = 500;
+export declare const SCROLL_MODE_BASE_WIDTH = 1600;
+export declare const SCROLL_MODE_BASE_HEIGHT: number;

package/dist/src/image.d.ts

@@ -0,0 +1,19 @@
+declare module "*.svg" {
+    const content: string;
+    export default content;
+}
+
+declare module "*.jpg" {
+    const content: string;
+    export default content;
+}
+
+declare module "*.png" {
+    const content: string;
+    export default content;
+}
+
+declare module "*.gif" {
+    const content: string;
+    export default content;
+}

package/dist/{index.d.ts → src/index.d.ts}

@@ -1,25 +1,25 @@
 import { AppManager } from "./AppManager";
 import { CursorManager } from "./Cursor";
-import { InvisiblePlugin, ViewMode } from "white-web-sdk";
+import { InvisiblePlugin } from "white-web-sdk";
 import { ReconnectRefresher } from "./ReconnectRefresher";
-import "video.js/dist/video-js.css";
-import "./style.css";
-import "@netless/telebox-insider/dist/style.css";
+import { Val } from "value-enhancer";
 import type { TELE_BOX_STATE } from "./BoxManager";
 import type { Apps, Position, ICamera, ISize } from "./AttributesDelegate";
-import type { Displayer, SceneDefinition, View, Room, InvisiblePluginContext, Camera, AnimationMode, CameraBound, Point, Rectangle, CameraState, Player, ImageInformation, SceneState } from "white-web-sdk";
+import type { Displayer, SceneDefinition, View, Room, InvisiblePluginContext, Camera, CameraBound, Point, 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, 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 type { ScrollState } from "./View/ScrollMode";
 export declare type WindowMangerAttributes = {
     modelValue?: string;
     boxState: TELE_BOX_STATE;
     maximized?: boolean;
     minimized?: boolean;
+    scrollTop?: number;
     [key: string]: any;
 };
 export declare type apps = {
@@ -56,6 +56,7 @@ export declare type AppSyncAttributes = {
     createdAt?: number;
     camera?: ICamera;
     size?: ISize;
+    setup: boolean;
 };
 export declare type AppInitState = {
     id: string;
@@ -69,6 +70,11 @@ export declare type AppInitState = {
     sceneIndex?: number;
     boxState?: TeleBoxState;
     zIndex?: number;
+    visible?: boolean;
+    stageRatio?: number;
+    resizable?: boolean;
+    draggable?: boolean;
+    ratio?: number;
 };
 export declare type CursorMovePayload = {
     uid: string;
@@ -80,8 +86,6 @@ export declare type MountParams = {
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
-    /** 显示 PS 透明背景，默认 true */
-    chessboard?: boolean;
     collectorContainer?: HTMLElement;
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
@@ -89,10 +93,26 @@ export declare 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 declare const reconnectRefresher: ReconnectRefresher;
-export declare class WindowManager extends InvisiblePlugin<WindowMangerAttributes> implements PageController {
+export declare class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any> implements PageController {
     static kind: string;
     static displayer: Displayer;
     static playground?: HTMLElement;
@@ -100,6 +120,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     static debug: boolean;
     static containerSizeRatio: number;
     private static isCreated;
+    static registry: import("./Register").AppRegister;
     version: string;
     dependencies: Record<string, string>;
     appListeners?: AppListeners;
@@ -107,7 +128,8 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     emitter: Emittery<PublicEvent>;
     appManager?: AppManager;
     cursorManager?: CursorManager;
-    viewMode: ViewMode;
+    viewMode$: Val<ManagerViewMode, any>;
+    playground$: Val<HTMLElement | undefined, any>;
     isReplay: boolean;
     private _pageState?;
     private boxManager?;
@@ -123,7 +145,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     /**
      * 注册插件
      */
-    static register<AppOptions = any, SetupResult = any, Attributes = any>(params: RegisterParams<AppOptions, SetupResult, Attributes>): Promise<void>;
+    static register<AppOptions = any, SetupResult = any, Attributes extends Record<string, any> = any>(params: RegisterParams<AppOptions, SetupResult, Attributes>): Promise<void>;
     /**
      * 注销插件
      */
@@ -144,6 +166,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     setMainViewSceneIndex(index: number): Promise<void>;
     nextPage(): Promise<boolean>;
     prevPage(): Promise<boolean>;
+    jumpPage(index: number): Promise<boolean>;
     addPage(params?: AddPageParams): Promise<void>;
     /**
      * 删除一页
@@ -174,17 +197,26 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     /**
      * 设置 ViewMode
      */
-    setViewMode(mode: ViewMode): void;
+    setViewMode(mode: ManagerViewMode): void;
     setBoxState(boxState: TeleBoxState): void;
     setMaximized(maximized: boolean): void;
     setMinimized(minimized: boolean): void;
     get mainView(): View;
     get camera(): Camera;
+    get baseCamera(): {
+        id: string;
+        centerX: number | null;
+        centerY: number | null;
+        scale: number;
+    } | undefined;
+    get baseSize(): ISize | undefined;
     get cameraState(): CameraState;
     get apps(): Apps | undefined;
     get boxState(): TeleBoxState | undefined;
     get darkMode(): boolean;
+    get viewMode(): ManagerViewMode;
     get prefersColorScheme(): TeleBoxColorScheme | undefined;
+    get fullscreen(): TeleBoxFullscreen | undefined;
     get focused(): string | undefined;
     get focusedView(): View | undefined;
     get mainViewSceneIndex(): number;
@@ -195,6 +227,8 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     get canUndoSteps(): number;
     get sceneState(): SceneState;
     get pageState(): PageState;
+    get scrollState(): ScrollState | undefined;
+    get teleboxManager(): TeleBoxManager;
     /**
      * 查询所有的 App
      */
@@ -207,12 +241,13 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
      * 关闭 APP
      */
     closeApp(appId: string): Promise<void>;
-    moveCamera(camera: Partial<Camera> & {
-        animationMode?: AnimationMode | undefined;
-    }): void;
+    moveCamera: (camera: Partial<Camera> & {
+        animationMode?: AnimationMode;
+    }) => void;
     moveCameraToContain(rectangle: Rectangle & Readonly<{
         animationMode?: AnimationMode;
     }>): void;
+    private debouncedStoreCamera;
     convertToPointInWorld(point: Point): Point;
     setCameraBound(cameraBound: CameraBound): void;
     onDestroy(): void;
@@ -224,6 +259,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     safeSetAttributes(attributes: any): void;
     safeUpdateAttributes(keys: string[], value: any): void;
     setPrefersColorScheme(scheme: TeleBoxColorScheme): void;
+    setFullscreen(fullscreen: TeleBoxFullscreen): void;
     cleanCurrentScene(): void;
     redo(): number;
     undo(): number;
@@ -240,9 +276,22 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     /** @inner */
     _refresh(): void;
     setContainerSizeRatio(ratio: number): void;
+    setContainerStyle(style: string): void;
+    setStageStyle(style: string): void;
+    setBaseSize(size: Size): void;
+    /**
+     * 切换 focus 到指定的 app, 并且把这个 app 放到最前面
+     */
+    focusApp(appId: string): void;
+    createPPTHandler(): {
+        onPageJumpTo: (_pptUUID: string, index: number) => void;
+        onPageToNext: () => void;
+        onPageToPrev: () => void;
+    };
     private isDynamicPPT;
     private ensureAttributes;
 }
 export * from "./typings";
-export { BuiltinApps } from "./BuiltinApps";
+export { BuiltinApps, BuiltinAppsMap } from "./BuiltinApps";
 export type { PublicEvent } from "./callback";
+export type { Member } from "./Helper";

package/dist/src/shim.d.ts

@@ -0,0 +1,11 @@
+import type { SvelteComponent } from "svelte";
+
+declare module "*.svelte" {
+    const app: SvelteComponent;
+    export default app;
+}
+
+declare global {
+    const __APP_VERSION__: string;
+    const __APP_DEPENDENCIES__: Record<string, string>;
+}

package/dist/src/storage.d.ts

@@ -0,0 +1,7 @@
+import { Storage } from "@netless/synced-store";
+import type { AppManager } from "./AppManager";
+export declare type ScrollStorageState = {
+    scrollTop: number;
+};
+export declare type ScrollStorage = Storage<ScrollStorageState>;
+export declare const createScrollStorage: (manager: AppManager) => Storage<ScrollStorageState>;

package/dist/{typings.d.ts → src/typings.d.ts}

@@ -1,10 +1,10 @@
 import type Emittery from "emittery";
-import type { AnimationMode, ApplianceNames, Displayer, DisplayerState, Player, Room, SceneDefinition, SceneState, View } from "white-web-sdk";
+import type { AnimationMode, ApplianceNames, Displayer, DisplayerState, Player, Room, SceneDefinition, SceneState, View, ViewMode } from "white-web-sdk";
 import type { AppContext } from "./App";
-import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
+import type { ReadonlyTeleBox, TeleBoxRect, TeleBoxFullscreen } from "@netless/telebox-insider";
 import type { PageState } from "./Page";
 import type { Member } from "./Helper";
-export interface NetlessApp<Attributes = any, MagixEventPayloads = any, AppOptions = any, SetupResult = any> {
+export interface NetlessApp<Attributes extends Record<string, any> = any, MagixEventPayloads = any, AppOptions = any, SetupResult = any> {
     kind: string;
     config?: {
         /** Box width relative to whiteboard. 0~1. Default 0.5. */
@@ -17,6 +17,8 @@ export interface NetlessApp<Attributes = any, MagixEventPayloads = any, AppOptio
         minheight?: number;
         /** App only single instance. */
         singleton?: boolean;
+        /** App box enableShadowDom. Default true */
+        enableShadowDOM?: boolean;
     };
     setup: (context: AppContext<Attributes, MagixEventPayloads, AppOptions>) => SetupResult;
 }
@@ -62,21 +64,29 @@ export declare type RegisterEvents<SetupResult = any> = {
     destroy: RegisterEventData;
     focus: RegisterEventData;
 };
-export declare type RegisterParams<AppOptions = any, SetupResult = any, Attributes = any> = {
+export declare type RegisterParams<AppOptions = any, SetupResult = any, Attributes extends Record<string, any> = any> = {
     kind: string;
-    src: NetlessApp<Attributes, SetupResult> | string | (() => Promise<NetlessApp<Attributes, SetupResult>>);
+    src: NetlessApp<Attributes, SetupResult> | string | (() => Promise<NetlessApp<Attributes, SetupResult>>) | (() => Promise<{
+        default: NetlessApp<Attributes, SetupResult>;
+    }>);
     appOptions?: AppOptions | (() => AppOptions);
     addHooks?: (emitter: Emittery<RegisterEvents<SetupResult>>) => void;
     /** dynamic load app package name */
     name?: string;
+    contentStyles?: string;
 };
 export declare type AppListenerKeys = keyof AppEmitterEvent;
-export declare type ApplianceIcons = Partial<Record<ApplianceNames, string>>;
+export declare type ApplianceIcons = Partial<Record<`${ApplianceNames}` | string, string>>;
+export declare type Writeable<T> = {
+    -readonly [P in keyof T]: T[P];
+};
+export declare type ManagerViewMode = `${ViewMode}` | "scroll";
 export type { AppContext } from "./App/AppContext";
 export type { WhiteBoardView } from "./App";
-export type { ReadonlyTeleBox, TeleBoxRect };
+export type { ReadonlyTeleBox, TeleBoxRect, TeleBoxFullscreen };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
-export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";
 export * from "./Page";
 export * from "./Utils/error";
 export type { Member } from "./Helper";
+export type { TeleBoxManager, TeleBoxManagerQueryConfig } from "@netless/telebox-insider";
+export type { Storage, StorageConfig } from "@netless/synced-store";