@netless/window-manager 1.0.0-canary.53 → 1.0.0-canary.54

package/dist/src/App/AppContext.d.ts

@@ -1,5 +1,5 @@
-import { Storage } from "./Storage";
 import { autorun, listenDisposed, listenUpdated, reaction, unlistenDisposed, unlistenUpdated, toJS } from "white-web-sdk";
+import { Storage } from "@netless/synced-store";
 import type { Room, SceneDefinition, View } from "white-web-sdk";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type Emittery from "emittery";
@@ -12,7 +12,7 @@ export declare type CreateWhiteBoardViewParams = {
     size?: number;
     syncCamera?: boolean;
 };
-export declare class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOptions = any> {
+export declare class AppContext<TAttributes extends Record<string, any> = any, TMagixEventPayloads = any, TAppOptions = any> {
     private manager;
     appId: string;
     private appProxy;
@@ -64,12 +64,12 @@ export declare class AppContext<TAttributes = any, TMagixEventPayloads = any, TA
     /** Main Storage for attributes. */
     get storage(): Storage<TAttributes>;
     /**
-     * Create separated storages for flexible state management.
-     * @param storeId Namespace for the storage. Storages of the same namespace share the same data.
-     * @param defaultState Default state for initial storage creation.
-     * @returns
-     */
-    createStorage: <TState>(storeId: string, defaultState?: TState | undefined) => Storage<TState>;
+ * Create separated storages for flexible state management.
+ * @param namespace Namespace for the storage. Storages of the same namespace share the same data.
+ * @param defaultState Default state for initial storage creation.
+ * @returns
+ */
+    createStorage: <TState extends Record<string, any>>(namespace: string, defaultState?: TState | undefined) => Storage<TState>;
     /** Dispatch events to other clients (and self). */
     dispatchMagixEvent: MagixEventDispatcher<TMagixEventPayloads>;
     /** Listen to events from others clients (and self messages). */

package/dist/src/AppManager.d.ts

@@ -6,9 +6,10 @@ import { ViewManager } from "./View/ViewManager";
 import { Val } from "value-enhancer";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
-import type { Displayer, Room, SceneState } from "white-web-sdk";
+import type { Displayer, Room, SceneState, Size } from "white-web-sdk";
 import type { AddAppParams, TeleBoxRect } from "./index";
 import type { Member } from "./Helper";
+import { ScrollMode } from "./View/ScrollMode";
 export declare class AppManager {
     windowManger: WindowManager;
     displayer: Displayer;
@@ -22,11 +23,14 @@ export declare class AppManager {
     mainViewScenesLength: number;
     private appListeners;
     boxManager?: BoxManager;
+    scrollMode?: ScrollMode;
+    scrollBaseSize$: Val<Size | null, any>;
     private callbacksNode;
     private appCreateQueue;
     private sceneIndex$;
     private focused$;
     members$: Val<Member[], any>;
+    isWritable$: Val<boolean, any>;
     private sideEffectManager;
     sceneState: SceneState | null;
     rootDirRemoving: boolean;

package/dist/src/Cursor/index.d.ts

@@ -23,6 +23,7 @@ export declare class CursorManager {
     private sideEffectManager;
     private store;
     applianceIcons: ApplianceIcons;
+    get playground$(): import("value-enhancer").Val<HTMLElement | undefined, any>;
     constructor(manager: AppManager, enableCursor: boolean, applianceIcons?: ApplianceIcons);
     private onCursorMove;
     private initCursorInstance;

package/dist/src/Utils/Reactive.d.ts

@@ -1,6 +1,6 @@
 import { UpdateEventKind } from "white-web-sdk";
 import type { AkkoObjectUpdatedListener } from "white-web-sdk";
 export declare const onObjectByEvent: (event: UpdateEventKind) => (object: any, func: () => void) => (() => void) | undefined;
-export declare const safeListenPropsUpdated: <T>(getProps: () => T, callback: AkkoObjectUpdatedListener<T>, onDestroyed?: ((props: unknown) => void) | undefined) => () => void;
+export declare const safeListenPropsUpdated: <T extends Object>(getProps: () => T, callback: AkkoObjectUpdatedListener<T>, onDestroyed?: ((props: unknown) => void) | undefined) => () => void;
 export declare const onObjectRemoved: (object: any, func: () => void) => (() => void) | undefined;
 export declare const onObjectInserted: (object: any, func: () => void) => (() => void) | undefined;

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

@@ -1,5 +1,5 @@
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { View, Size } from "white-web-sdk";
+import type { View } from "white-web-sdk";
 import type { ICamera, ISize } from "../AttributesDelegate";
 export declare type SaveCamera = (camera: ICamera) => void;
 export declare class CameraSynchronizer {
@@ -8,12 +8,13 @@ export declare class CameraSynchronizer {
     remoteSize?: ISize;
     protected rect?: TeleBoxRect;
     protected view?: View;
+    protected scale: number;
     constructor(saveCamera: SaveCamera);
     setRect: (rect: TeleBoxRect, updateCamera?: boolean) => void;
     setView(view: View): void;
     onRemoteUpdate: import("lodash").DebouncedFunc<(camera: ICamera, size: ISize) => void>;
     onRemoteSizeUpdate(size: ISize): void;
     onLocalCameraUpdate(camera: ICamera): void;
+    private moveCameraToContian;
     private moveCamera;
 }
-export declare const computedMinScale: (remoteSize: Size, currentSize: Size) => number;

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

@@ -1,14 +1,14 @@
-import { ViewMode } from "white-web-sdk";
 import type { View } from "white-web-sdk";
 import type { Val, 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<ViewMode>;
+    viewMode$?: Val<ManagerViewMode>;
     storeCamera: (camera: ICamera) => void;
     storeSize: (size: ISize) => void;
     view$: Val<View | undefined>;
@@ -17,6 +17,7 @@ export declare class ViewSync {
     private context;
     private sem;
     private synchronizer;
+    private needRecoverCamera$?;
     constructor(context: ViewSyncContext);
     private get isBroadcastMode();
     private createSynchronizer;

package/dist/src/callback.d.ts

@@ -4,6 +4,7 @@ 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}`;
@@ -28,6 +29,8 @@ export declare type PublicEvent = {
     baseCameraChange: ICamera;
     baseSizeChange: ISize;
     fullscreenChange: TeleBoxFullscreen;
+    userScroll: undefined;
+    scrollStateChange: ScrollState;
 };
 export declare type CallbacksType = Emittery<PublicEvent>;
 export declare const callbacks: CallbacksType;

package/dist/src/constants.d.ts

@@ -52,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/index.d.ts

@@ -1,23 +1,25 @@
 import { AppManager } from "./AppManager";
 import { CursorManager } from "./Cursor";
-import { AnimationMode, InvisiblePlugin, ViewMode } from "white-web-sdk";
+import { InvisiblePlugin } from "white-web-sdk";
 import { ReconnectRefresher } from "./ReconnectRefresher";
 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, CameraBound, Point, CameraState, Player, ImageInformation, SceneState, Size } 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 { 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 = {
@@ -103,9 +105,14 @@ export declare type MountParams = {
     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;
@@ -121,14 +128,13 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     emitter: Emittery<PublicEvent>;
     appManager?: AppManager;
     cursorManager?: CursorManager;
-    viewMode: ViewMode;
-    viewMode$: Val<ViewMode, any>;
+    viewMode: ManagerViewMode;
+    viewMode$: Val<ManagerViewMode, any>;
+    playground$: Val<HTMLElement | undefined, any>;
     isReplay: boolean;
     private _pageState?;
     private boxManager?;
     private static params?;
-    private cameraUpdating;
-    private nextCamera;
     containerSizeRatio: number;
     constructor(context: InvisiblePluginContext);
     static mount(params: MountParams): Promise<WindowManager>;
@@ -140,7 +146,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>;
     /**
      * 注销插件
      */
@@ -192,7 +198,7 @@ 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;
@@ -221,6 +227,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     get canUndoSteps(): number;
     get sceneState(): SceneState;
     get pageState(): PageState;
+    get scrollState(): ScrollState | undefined;
     get teleboxManager(): TeleBoxManager;
     /**
      * 查询所有的 App
@@ -237,7 +244,10 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     moveCamera: (camera: Partial<Camera> & {
         animationMode?: AnimationMode;
     }) => void;
-    private onCameraUpdated;
+    moveCameraToContain(rectangle: Rectangle & Readonly<{
+        animationMode?: AnimationMode;
+    }>): void;
+    private debouncedStoreCamera;
     convertToPointInWorld(point: Point): Point;
     setCameraBound(cameraBound: CameraBound): void;
     onDestroy(): void;

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/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, 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. */
@@ -64,7 +64,7 @@ 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>>) | (() => Promise<{
         default: NetlessApp<Attributes, SetupResult>;
@@ -80,12 +80,13 @@ export declare type ApplianceIcons = Partial<Record<ApplianceNames, 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, 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";

package/dist/style.css

@@ -143,7 +143,8 @@
 .window-manager-view-wrapper {
     position: absolute;
     z-index: 10;
-}.tele-fancy-scrollbar {
+}
+.tele-fancy-scrollbar {
   overscroll-behavior: contain;
   overflow: auto;
   overflow-y: scroll;

package/docs/api.md

@@ -283,6 +283,8 @@ manager.callbacks.on(events, listener)
 | ready                    | undefined      |         | 当所有 APP 创建完毕时触发      ｜
 | sceneStateChange         | SceneState     |         | 当 sceneState 修改时触发     |
 | pageStateChange          | PageState      |         |                            ｜
+| scrollStateChange        | ScrollState    |         | 当在 `ScrollState` 变化时触发 |
+| userScroll               | void           |         | 当用户主动滚动时触发           |
 
 ```ts
 type LoadAppEvent = {
@@ -297,4 +299,12 @@ type PageState = {
     index: number;
     length: number;
 }
+```
+
+```ts
+type ScrollState = {
+    scrollTop: number;
+    page: number;
+    maxScrollPage: number;
+};
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.53",
+  "version": "1.0.0-canary.54",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -25,11 +25,12 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
+    "@netless/synced-store": "^2.0.7",
     "@netless/telebox-insider": "1.0.0-alpha.37",
     "emittery": "^0.11.0",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.2",
-    "side-effect-manager": "^1.1.1",
+    "side-effect-manager": "^1.2.1",
     "uuid": "^7.0.3",
     "value-enhancer": "^1.3.2"
   },
@@ -66,6 +67,6 @@
     "vite": "^2.5.3",
     "vite-plugin-dts": "^1.2.1",
     "vitest": "^0.18.0",
-    "white-web-sdk": "2.16.26"
+    "white-web-sdk": "^2.16.35"
   }
 }