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

package/src/index.ts

@@ -9,8 +9,8 @@ import { DEFAULT_CONTAINER_RATIO, Events, INIT_DIR, ROOT_DIR } from "./constants
 import { emitter } from "./InternalEmitter";
 import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
-import { AnimationMode, InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
-import { isEqual, isNull, isObject, isNumber } from "lodash";
+import { InvisiblePlugin, isPlayer, isRoom, RoomPhase, ViewMode } from "white-web-sdk";
+import { isEqual, isNull, isObject, isNumber, omit, debounce } from "lodash";
 import { log } from "./Utils/log";
 import { PageStateImpl } from "./PageState";
 import { ReconnectRefresher } from "./ReconnectRefresher";
@@ -44,22 +44,25 @@ import type {
     Player,
     ImageInformation,
     SceneState,
-    Size
+    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 { computedMinScale } from "./View/CameraSynchronizer";
+import type { ScrollState } from "./View/ScrollMode";
 
 export type WindowMangerAttributes = {
     modelValue?: string;
     boxState: TELE_BOX_STATE;
     maximized?: boolean;
     minimized?: boolean;
+    scrollTop?: number;
     [key: string]: any;
 };
 
@@ -154,11 +157,16 @@ export type MountParams = {
     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;
@@ -177,17 +185,15 @@ 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<ViewMode>(ViewMode.Broadcaster);
+    public viewMode: ManagerViewMode = ViewMode.Broadcaster;
+    public viewMode$ = new Val<ManagerViewMode>(ViewMode.Broadcaster);
+    public playground$ = new Val<HTMLElement | undefined>(undefined);
     public isReplay = isPlayer(this.displayer);
     private _pageState?: PageStateImpl;
 
     private boxManager?: BoxManager;
     private static params?: MountParams;
 
-    private cameraUpdating = 0;
-    private nextCamera: Camera | null = null;
-
     public containerSizeRatio = WindowManager.containerSizeRatio;
 
     constructor(context: InvisiblePluginContext) {
@@ -249,7 +255,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         }
         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);
@@ -269,6 +277,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
             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;
@@ -348,6 +360,7 @@ 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);
                 }
                
             }
@@ -373,7 +386,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);
@@ -612,16 +625,17 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     /**
      * 设置 ViewMode
      */
-    public setViewMode(mode: ViewMode): void {
+    public setViewMode(mode: ManagerViewMode): void {
         log("setViewMode", mode);
         const mainViewProxy = this.appManager?.mainViewProxy;
         if (mode === ViewMode.Broadcaster) {
             if (this.canOperate) {
                 mainViewProxy?.storeCurrentCamera();
+                mainViewProxy?.storeCurrentSize();
             }
             mainViewProxy?.start();
         }
-        if (mode === ViewMode.Freedom) {
+        if (mode === ViewMode.Freedom || mode === "scroll") {
             mainViewProxy?.stop();
         }
         this.viewMode = mode;
@@ -782,6 +796,10 @@ 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();
@@ -811,57 +829,32 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
     }
 
     public moveCamera = (camera: Partial<Camera> & { animationMode?: AnimationMode } ): void => {
+        const pureCamera = omit(camera, ["animationMode"]);
         const mainViewCamera = { ...this.mainView.camera };
-        const nextCamera = { ...mainViewCamera, ...camera };
-        if (isEqual(nextCamera, mainViewCamera)) return;
-        if (!this.appManager) return;
-        if (camera.animationMode === AnimationMode.Immediately) {
-            this.appManager.mainViewProxy.storeCamera({
-                id: this.appManager.uid,
-                ...nextCamera
-            });
-        } else {
-            const remoteCamera = this.appManager.mainViewProxy.size$.value;
-            const currentSize = this.boxManager?.stageRect;
-            let nextScale;
-            if (camera.scale &&  remoteCamera && currentSize) {
-                nextScale = camera.scale * computedMinScale(remoteCamera, currentSize);
-            }
-            if (nextScale) {
-                this.mainView.moveCamera({
-                    ...camera,
-                    scale: nextScale,
-                });
-            } else {
-                this.mainView.moveCamera(camera);
-            }
-            this.appManager.dispatchInternalEvent(Events.MoveCamera, camera);
-            this.mainView.callbacks.off("onCameraUpdated", this.onCameraUpdated);
-            clearTimeout(this.cameraUpdating);
-            this.cameraUpdating = 0;
-            this.mainView.callbacks.on("onCameraUpdated", this.onCameraUpdated);
-            if (nextScale) {
-                this.nextCamera = nextCamera;
-            }
-        }
+        if (isEqual({ ...mainViewCamera, ...pureCamera }, mainViewCamera)) return;
+        this.debouncedStoreCamera();
+        this.mainView.moveCamera(camera);
+        this.appManager?.dispatchInternalEvent(Events.MoveCamera, camera);
     };
 
-    private onCameraUpdated = () => {
-        if (this.cameraUpdating) {
-            clearTimeout(this.cameraUpdating);
-            this.cameraUpdating = 0;
-        }
-        this.cameraUpdating = setTimeout(() => {
-            this.mainView.callbacks.off("onCameraUpdated", this.onCameraUpdated);
-            clearTimeout(this.cameraUpdating);
-            this.cameraUpdating = 0;
-            if (!this.appManager || !this.nextCamera) return;
-            this.appManager.mainViewProxy.storeCamera({
-                id: this.appManager.uid,
-                ...this.nextCamera
-            });
-            this.nextCamera = null;
-        }, 50);
+    public moveCameraToContain(
+        rectangle: Rectangle &
+            Readonly<{
+                animationMode?: AnimationMode;
+            }>
+    ): void {
+        this.debouncedStoreCamera();
+        this.mainView.moveCameraToContain(rectangle);
+        this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
+    }
+
+    private debouncedStoreCamera = () => {
+        const storeCamera = debounce(() => {
+            this.appManager?.mainViewProxy.storeCurrentCamera();
+            this.appManager?.mainViewProxy.storeCurrentSize();
+            this.mainView.callbacks.off("onCameraUpdated", storeCamera);
+        }, 200);
+        this.mainView.callbacks.on("onCameraUpdated", storeCamera);
     }
 
     public convertToPointInWorld(point: Point): Point {

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

@@ -143,4 +143,4 @@
 .window-manager-view-wrapper {
     position: absolute;
     z-index: 10;
-}
+}

package/src/typings.ts

@@ -9,13 +9,14 @@ import type {
     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. */
@@ -70,7 +71,7 @@ export type RegisterEvents<SetupResult = any> = {
     focus: RegisterEventData;
 };
 
-export type RegisterParams<AppOptions = any, SetupResult = any, Attributes = any> = {
+export type RegisterParams<AppOptions = any, SetupResult = any, Attributes extends Record<string, any> = any> = {
     kind: string;
     src:
         | NetlessApp<Attributes, SetupResult>
@@ -90,12 +91,14 @@ export type ApplianceIcons = Partial<Record<ApplianceNames, string>>;
 
 export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
 
+export 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/vite.config.js

@@ -32,7 +32,7 @@ export default defineConfig(() => {
                     useVitePreprocess: true,
                 },
             }),
-            dts()
+            dts(),
         ],
         build: {
             lib: {

package/dist/src/App/Storage/StorageEvent.d.ts

@@ -1,8 +0,0 @@
-export declare type StorageEventListener<T> = (event: T) => void;
-export declare class StorageEvent<TMessage> {
-    listeners: Set<StorageEventListener<TMessage>>;
-    get length(): number;
-    dispatch(message: TMessage): void;
-    addListener(listener: StorageEventListener<TMessage>): void;
-    removeListener(listener: StorageEventListener<TMessage>): void;
-}

package/dist/src/App/Storage/index.d.ts

@@ -1,39 +0,0 @@
-import type { AppContext } from "../AppContext";
-import type { Diff, StorageStateChangedListener, StorageStateChangedListenerDisposer } from "./typings";
-import { StorageEvent } from "./StorageEvent";
-export * from './typings';
-export declare const STORAGE_NS = "_WM-STORAGE_";
-export declare class Storage<TState extends Record<string, any> = any> implements Storage<TState> {
-    readonly id: string | null;
-    private readonly _context;
-    private readonly _sideEffect;
-    private _state;
-    private _destroyed;
-    private _refMap;
-    /**
-     * `setState` alters local state immediately before sending to server. This will cache the old value for onStateChanged diffing.
-     */
-    private _lastValue;
-    constructor(context: AppContext, id?: string, defaultState?: TState);
-    get state(): Readonly<TState>;
-    readonly onStateChanged: StorageEvent<Diff<TState>>;
-    addStateChangedListener(handler: StorageStateChangedListener<TState>): StorageStateChangedListenerDisposer;
-    ensureState(state: Partial<TState>): void;
-    setState(state: Partial<TState>): void;
-    /**
-     * Empty storage data.
-     */
-    emptyStorage(): void;
-    /**
-     * Delete storage index with all of its data and destroy the Storage instance.
-     */
-    deleteStorage(): void;
-    get destroyed(): boolean;
-    /**
-     * Destroy the Storage instance. The data will be kept.
-     */
-    destroy(): void;
-    private _getRawState;
-    private _setRawState;
-    private _updateProperties;
-}

package/dist/src/App/Storage/typings.d.ts

@@ -1,22 +0,0 @@
-import type { StorageEventListener } from "./StorageEvent";
-export declare type RefValue<TValue = any> = {
-    k: string;
-    v: TValue;
-    __isRef: true;
-};
-export declare type ExtractRawValue<TValue> = TValue extends RefValue<infer TRefValue> ? TRefValue : TValue;
-export declare type AutoRefValue<TValue> = RefValue<ExtractRawValue<TValue>>;
-export declare type MaybeRefValue<TValue> = TValue | AutoRefValue<TValue>;
-export declare type DiffOne<T> = {
-    oldValue?: T;
-    newValue?: T;
-};
-export declare type Diff<T> = {
-    [K in keyof T]?: DiffOne<T[K]>;
-};
-export declare type StorageOnSetStatePayload<TState = unknown> = {
-    [K in keyof TState]?: MaybeRefValue<TState[K]>;
-};
-export declare type StorageStateChangedEvent<TState = any> = Diff<TState>;
-export declare type StorageStateChangedListener<TState = any> = StorageEventListener<StorageStateChangedEvent<TState>>;
-export declare type StorageStateChangedListenerDisposer = () => void;

package/dist/src/App/Storage/utils.d.ts

@@ -1,5 +0,0 @@
-import type { AutoRefValue, RefValue } from "./typings";
-export declare const plainObjectKeys: <T>(o: T) => Extract<keyof T, string>[];
-export declare function isRef<TValue = unknown>(e: unknown): e is RefValue<TValue>;
-export declare function makeRef<TValue>(v: TValue): RefValue<TValue>;
-export declare function makeAutoRef<TValue>(v: TValue): AutoRefValue<TValue>;

package/src/App/Storage/StorageEvent.ts

@@ -1,21 +0,0 @@
-export type StorageEventListener<T> = (event: T) => void;
-
-export class StorageEvent<TMessage> {
-  listeners = new Set<StorageEventListener<TMessage>>();
-
-  get length(): number {
-    return this.listeners.size;
-  }
-
-  dispatch(message: TMessage): void {
-    this.listeners.forEach(callback => callback(message));
-  }
-
-  addListener(listener: StorageEventListener<TMessage>): void {
-    this.listeners.add(listener);
-  }
-
-  removeListener(listener: StorageEventListener<TMessage>): void {
-    this.listeners.delete(listener);
-  }
-}