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

package/src/BoxManager.ts

@@ -1,22 +1,22 @@
-import { callbacks, emitter, WindowManager } from "./index";
-import { debounce, maxBy } from "lodash";
 import { AppAttributes, DEFAULT_COLLECTOR_STYLE, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
+import { debounce, maxBy } from "lodash";
 import {
     TELE_BOX_MANAGER_EVENT,
     TELE_BOX_STATE,
     TeleBoxCollector,
     TeleBoxManager,
 } from "@netless/telebox-insider";
-import type { AddAppOptions, AppInitState } from "./index";
+import { WindowManager } from "./index";
+import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
     TeleBoxManagerCreateConfig,
     ReadonlyTeleBox,
     TeleBoxManagerConfig,
     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";
 
@@ -48,31 +48,63 @@ export type CreateTeleBoxManagerConfig = {
     prefersColorScheme?: TeleBoxColorScheme;
 };
 
+export 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 const createBoxManager = (
+    manager: WindowManager,
+    callbacks: CallbacksType,
+    emitter: EmitterType,
+    options: CreateTeleBoxManagerConfig
+) => {
+    return new BoxManager(
+        {
+            safeSetAttributes: (attributes: any) => manager.safeSetAttributes(attributes),
+            getMainView: () => manager.mainView,
+            updateAppState: (...args) => manager.appManager?.store.updateAppState(...args),
+            canOperate: () => manager.canOperate,
+            notifyContainerRectUpdate: (rect: TeleBoxRect) =>
+                manager.appManager?.notifyContainerRectUpdate(rect),
+            cleanFocus: () => manager.appManager?.store.cleanFocus(),
+            callbacks,
+            emitter,
+        },
+        options
+    );
+};
+
 export class BoxManager {
     public teleBoxManager: TeleBoxManager;
-    public appBoxMap: Map<string, string> = new Map();
-    private mainView = this.manager.mainView;
 
     constructor(
-        private manager: AppManager,
-        createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
+        private context: BoxManagerContext,
+        private createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ) {
+        const { emitter, callbacks } = context;
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
         this.teleBoxManager.events.on(TELE_BOX_MANAGER_EVENT.State, state => {
             if (state) {
-                callbacks.emit("boxStateChange", state);
-                emitter.emit("boxStateChange", state);
+                this.context.callbacks.emit("boxStateChange", state);
+                this.context.emitter.emit("boxStateChange", state);
             }
         });
         this.teleBoxManager.events.on("minimized", minimized => {
-            this.manager.safeSetAttributes({ minimized });
+            this.context.safeSetAttributes({ minimized });
             if (minimized) {
-                this.manager.store.cleanFocus();
+                this.context.cleanFocus();
                 this.blurAllBox();
             }
         });
         this.teleBoxManager.events.on("maximized", maximized => {
-            this.manager.safeSetAttributes({ maximized });
+            this.context.safeSetAttributes({ maximized });
         });
         this.teleBoxManager.events.on("removed", boxes => {
             boxes.forEach(box => {
@@ -97,7 +129,7 @@ export class BoxManager {
         );
         this.teleBoxManager.events.on("focused", box => {
             if (box) {
-                if (this.manager.canOperate) {
+                if (this.canOperate) {
                     emitter.emit("focus", { appId: box.id });
                 } else {
                     this.teleBoxManager.blurBox(box.id);
@@ -111,10 +143,18 @@ export class BoxManager {
             callbacks.emit("prefersColorSchemeChange", colorScheme);
         });
         this.teleBoxManager.events.on("z_index", box => {
-            this.manager.store.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
+            this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
     }
 
+    private get mainView() {
+        return this.context.getMainView();
+    }
+
+    private get canOperate() {
+        return this.context.canOperate();
+    }
+
     public get boxState() {
         return this.teleBoxManager.state;
     }
@@ -135,6 +175,10 @@ export class BoxManager {
         return this.teleBoxManager.prefersColorScheme;
     }
 
+    public get boxSize() {
+        return this.teleBoxManager.boxes.length;
+    }
+
     public createBox(params: CreateBoxParams): void {
         if (!this.teleBoxManager) return;
         let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = params.app.config ?? {};
@@ -159,14 +203,14 @@ export class BoxManager {
             id: params.appId,
         };
         this.teleBoxManager.create(createBoxConfig, params.smartPosition);
-        emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
+        this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
     }
 
     public setBoxInitState(appId: string): void {
         const box = this.teleBoxManager.queryOne({ id: appId });
         if (box) {
             if (box.state === TELE_BOX_STATE.Maximized) {
-                emitter.emit("resize", {
+                this.context.emitter.emit("resize", {
                     appId: appId,
                     x: box.x,
                     y: box.y,
@@ -193,24 +237,30 @@ export class BoxManager {
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
         };
-        const container = createTeleBoxManagerConfig?.collectorContainer || WindowManager.wrapper;
-        const styles = {
-            ...DEFAULT_COLLECTOR_STYLE,
-            ...createTeleBoxManagerConfig?.collectorStyles,
-        };
-        const teleBoxCollector = new TeleBoxCollector({
-            styles: styles,
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        }).mount(container!);
-        initManagerState.collector = teleBoxCollector;
+
         const manager = new TeleBoxManager(initManagerState);
         if (this.teleBoxManager) {
             this.teleBoxManager.destroy();
         }
         this.teleBoxManager = manager;
+        const container = createTeleBoxManagerConfig?.collectorContainer || WindowManager.wrapper;
+        if (container) {
+            this.setCollectorContainer(container);
+        }
         return manager;
     }
 
+    public setCollectorContainer(container: HTMLElement) {
+        const styles = {
+            ...DEFAULT_COLLECTOR_STYLE,
+            ...this.createTeleBoxManagerConfig?.collectorStyles,
+        };
+        const collector = new TeleBoxCollector({
+            styles
+        }).mount(container);
+        this.teleBoxManager.setCollector(collector);
+    }
+
     public getBox(appId: string): ReadonlyTeleBox | undefined {
         return this.teleBoxManager.queryOne({ id: appId });
     }
@@ -249,16 +299,18 @@ export class BoxManager {
                 },
                 true
             );
-            if (state.maximized != null) {
-                this.teleBoxManager.setMaximized(Boolean(state.maximized), true);
-                this.teleBoxManager.setMinimized(Boolean(state.minimized), true);
-            }
             setTimeout(() => {
                 if (state.focus) {
-                    this.teleBoxManager.focusBox(box.id, true)
+                    this.teleBoxManager.focusBox(box.id, true);
+                }
+                if (state.maximized != null) {
+                    this.teleBoxManager.setMaximized(Boolean(state.maximized), true);
+                }
+                if (state.minimized != null) {
+                    this.teleBoxManager.setMinimized(Boolean(state.minimized), true);
                 }
             }, 50);
-            callbacks.emit("boxStateChange", this.teleBoxManager.state);
+            this.context.callbacks.emit("boxStateChange", this.teleBoxManager.state);
         }
     }
 
@@ -267,7 +319,7 @@ export class BoxManager {
         if (rect && rect.width > 0 && rect.height > 0) {
             const containerRect = { x: 0, y: 0, width: rect.width, height: rect.height };
             this.teleBoxManager.setContainerRect(containerRect);
-            this.manager.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
+            this.context.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
         }
     }
 
@@ -307,7 +359,9 @@ export class BoxManager {
     }
 
     public setMaximized(maximized: boolean) {
-        this.teleBoxManager.setMaximized(maximized, true);
+        if (maximized !== this.maximized) {
+            this.teleBoxManager.setMaximized(maximized, true);
+        }
     }
 
     public setMinimized(minimized: boolean, skipUpdate = true) {
@@ -332,6 +386,10 @@ export class BoxManager {
         this.teleBoxManager.setPrefersColorScheme(colorScheme);
     }
 
+    public setZIndex(id: string, zIndex: number, skipUpdate = true) {
+        this.teleBoxManager.update(id, { zIndex }, skipUpdate);
+    }
+
     public destroy() {
         this.teleBoxManager.destroy();
     }

package/src/Cursor/Cursor.ts

@@ -1,7 +1,6 @@
 import App from './Cursor.svelte';
-import pRetry from 'p-retry';
 import { ApplianceMap } from './icons';
-import { ApplianceNames, autorun } from 'white-web-sdk';
+import { ApplianceNames } from 'white-web-sdk';
 import { CursorState } from '../constants';
 import { Fields } from '../AttributesDelegate';
 import { get, omit } from 'lodash';
@@ -19,64 +18,61 @@ export type Payload = {
 
 export class Cursor extends Base {
     private member?: RoomMember;
-    private disposer: any;
     private timer?: number;
     private component?: SvelteComponent;
 
     constructor(
         manager: AppManager,
+        addCursorChangeListener: (uid: string, callback: (position: Position, state: CursorState) => void) => void,
         private cursors: any,
         private memberId: string,
         private cursorManager: CursorManager,
-        private wrapper?: HTMLElement
+        private wrapper?: HTMLElement,
     ) {
         super(manager);
         this.setMember();
         this.createCursor();
-        pRetry(() => {
-            this.disposer && this.disposer();
-            if (!this.cursorPosition) {
-                console.warn(`${memberId} not exist`);
-            }
-            this.startReaction();
-        }, { retries: 3 });
+        addCursorChangeListener(this.memberId, this.onCursorChange);
         this.autoHidden();
     }
 
-    private startReaction() {
-        this.disposer = autorun(() => {
-            const cursor = this.cursorPosition;
-            const state = this.cursorState;
-            if (!cursor) return;
-            if (cursor.type === "main") {
-                const rect = this.cursorManager.wrapperRect;
-                if (this.component && rect) {
-                    this.autoHidden();
-                    this.moveCursor(cursor, rect, this.manager.mainView);
-                }
-            } else {
-                const focusView = this.cursorManager.focusView;
-                const viewRect = focusView?.divElement?.getBoundingClientRect();
-                const viewCamera = focusView?.camera;
-                if (focusView && viewRect && viewCamera && this.component) {
-                    this.autoHidden();
-                    this.moveCursor(cursor, viewRect, focusView);
-                }
+    private onCursorChange = (position: Position, state: CursorState) => {
+        if (position.type === "main") {
+            const rect = this.cursorManager.wrapperRect;
+            if (this.component && rect) {
+                this.autoHidden();
+                this.moveCursor(position, rect, this.manager.mainView);
             }
-            if (state && state === CursorState.Leave) {
-                this.hide();
+        } else {
+            const focusView = this.cursorManager.focusView;
+            // TODO 可以存一个当前 focusView 的 Rect 这样只有 focus 切换的时候才调用 getBoundingClientRect
+            const viewRect = focusView?.divElement?.getBoundingClientRect();
+            const viewCamera = focusView?.camera;
+            if (focusView && viewRect && viewCamera && this.component) {
+                this.autoHidden();
+                this.moveCursor(position, viewRect, focusView);
             }
-        });
+        }
+        if (state && state === CursorState.Leave) {
+            this.hide();
+        }
     }
 
     private moveCursor(cursor: Position, rect: DOMRect, view: any) {
-        const { x, y } = cursor;
+        const { x, y, type } = cursor;
         const point = view?.screen.convertPointToScreen(x, y);
         if (point) {
-            const translateX = point.x + rect.x - 2;
-            const translateY = point.y + rect.y - 18;
+            let translateX = point.x - 2;
+            let translateY = point.y - 18;
+            if (type === "app") {
+                const wrapperRect = this.cursorManager.wrapperRect;
+                if (wrapperRect) {
+                    translateX = translateX + rect.x - wrapperRect.x;
+                    translateY = translateY + rect.y - wrapperRect.y;
+                }
+            }
             if (point.x < 0 || point.x > rect.width || point.y < 0 || point.y > rect.height) {
-                this.component?.$set({ visible: false });
+                this.component?.$set({ visible: false, x: translateX, y: translateY });
             } else {
                 this.component?.$set({ visible: true, x: translateX, y: translateY });
             }
@@ -149,7 +145,7 @@ export class Cursor extends Base {
     private async createCursor() {
         if (this.member && this.wrapper) {
             this.component = new App({
-                target: document.documentElement,
+                target: this.wrapper,
                 props: this.initProps(),
             });
         }
@@ -189,10 +185,10 @@ export class Cursor extends Base {
     }
 
     public destroy() {
-        this.disposer && this.disposer();
         if (this.component) {
             this.component.$destroy();
         }
+        this.manager.refresher?.remove(this.memberId);
         this.cursorManager.cursorInstances.delete(this.memberId);
     }
 

package/src/Cursor/index.ts

@@ -1,11 +1,13 @@
-import { Base } from '../Base';
-import { Cursor } from './Cursor';
-import { CursorState } from '../constants';
-import { compact, debounce, uniq } from 'lodash';
-import { Fields } from '../AttributesDelegate';
-import { onObjectInserted } from '../Utils/Reactive';
-import { WindowManager } from '../index';
-import type { PositionType } from "../AttributesDelegate";
+import { autorun } from "white-web-sdk";
+import { Base } from "../Base";
+import { compact, debounce, get, uniq } from "lodash";
+import { Cursor } from "./Cursor";
+import { CursorState } from "../constants";
+import { emitter, WindowManager } from "../index";
+import { Fields } from "../AttributesDelegate";
+import { onObjectInserted } from "../Utils/Reactive";
+import { SideEffectManager } from "side-effect-manager";
+import type { PositionType, Position } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 
@@ -18,28 +20,45 @@ export type MoveCursorParams = {
     uid: string;
     x: number;
     y: number;
-}
+};
 export class CursorManager extends Base {
     public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
     private mainViewElement?: HTMLDivElement;
+    private sideEffectManager = new SideEffectManager();
 
     constructor(private appManager: AppManager) {
         super(appManager);
         this.roomMembers = this.appManager.room?.state.roomMembers;
         const wrapper = WindowManager.wrapper;
         if (wrapper) {
-            wrapper.addEventListener("mousemove", this.mouseMoveListener);
-            wrapper.addEventListener("touchstart", this.touchMoveListener);
-            wrapper.addEventListener("touchmove", this.touchMoveListener);
-            wrapper.addEventListener("mouseleave", this.mouseLeaveListener);
-            wrapper.addEventListener("touchend", this.mouseLeaveListener);
-            this.initCursorAttributes();
-            this.wrapperRect = wrapper.getBoundingClientRect();
-            this.startReaction(wrapper);
+            this.setupWrapper(wrapper);
+        }
+        emitter.on("onReconnected", () => {
+            this.onReconnect();
+        });
+    }
+
+    public setupWrapper(wrapper: HTMLElement) {
+        if (this.manager.refresher?.hasReactor("cursors")) {
+            this.destroy();
         }
+        this.sideEffectManager.add(() => {
+            wrapper.addEventListener("pointerenter", this.mouseMoveListener);
+            wrapper.addEventListener("pointermove", this.mouseMoveListener);
+            wrapper.addEventListener("pointerleave", this.mouseLeaveListener);
+            return () => {
+                wrapper.removeEventListener("pointerenter", this.mouseMoveListener);
+                wrapper.removeEventListener("pointermove", this.mouseMoveListener);
+                wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
+            };
+        });
+
+        this.initCursorAttributes();
+        this.wrapperRect = wrapper.getBoundingClientRect();
+        this.startReaction(wrapper);
     }
 
     public setMainViewDivElement(div: HTMLDivElement) {
@@ -51,27 +70,25 @@ export class CursorManager extends Base {
             return onObjectInserted(this.cursors, () => {
                 this.handleRoomMembersChange(wrapper);
             });
-        })
+        });
     }
 
     private getUids = (members: readonly RoomMember[] | undefined) => {
         return compact(uniq(members?.map(member => member.payload?.uid)));
-    }
+    };
 
     private handleRoomMembersChange = debounce((wrapper: HTMLElement) => {
         const uids = this.getUids(this.roomMembers);
         const cursors = Object.keys(this.cursors);
         if (uids?.length) {
             cursors.map(uid => {
-                if (
-                    uids.includes(uid) &&
-                    !this.cursorInstances.has(uid)
-                ) {
+                if (uids.includes(uid) && !this.cursorInstances.has(uid)) {
                     if (uid === this.context.uid) {
                         return;
                     }
                     const component = new Cursor(
                         this.appManager,
+                        this.addCursorChangeListener,
                         this.cursors,
                         uid,
                         this,
@@ -79,7 +96,7 @@ export class CursorManager extends Base {
                     );
                     this.cursorInstances.set(uid, component);
                 }
-            })
+            });
         }
     }, 100);
 
@@ -99,13 +116,6 @@ export class CursorManager extends Base {
         this.updateCursor(this.getType(event), event.clientX, event.clientY);
     }, 5);
 
-    private touchMoveListener = debounce((event: TouchEvent) => {
-        if (event.touches.length === 1) {
-            const touchEvent = event.touches[0];
-            this.updateCursor(this.getType(touchEvent), touchEvent.clientX, touchEvent.clientY);
-        }
-    }, 5);
-
     private updateCursor(event: EventType, clientX: number, clientY: number) {
         if (this.wrapperRect && this.manager.canOperate) {
             const view = event.type === "main" ? this.appManager.mainView : this.focusView;
@@ -121,7 +131,11 @@ export class CursorManager extends Base {
         }
     }
 
-    private getPoint = (view: View | undefined, clientX: number, clientY: number): Point | undefined => {
+    private getPoint = (
+        view: View | undefined,
+        clientX: number,
+        clientY: number
+    ): Point | undefined => {
         const rect = view?.divElement?.getBoundingClientRect();
         if (rect) {
             const point = view?.convertToPointInWorld({
@@ -130,7 +144,7 @@ export class CursorManager extends Base {
             });
             return point;
         }
-    }
+    };
 
     /**
      *  因为窗口内框在不同分辨率下的大小不一样，所以这里通过来鼠标事件的 target 来判断是在主白板还是在 APP 中
@@ -140,7 +154,7 @@ export class CursorManager extends Base {
         const focusApp = this.appManager.focusApp;
         switch (target.parentElement) {
             case this.mainViewElement: {
-                return { type: "main" }; 
+                return { type: "main" };
             }
             case focusApp?.view?.divElement: {
                 return { type: "app" };
@@ -217,19 +231,41 @@ export class CursorManager extends Base {
         });
     }
 
-    public destroy() {
-        const wrapper = WindowManager.wrapper;
-        if (wrapper) {
-            wrapper.removeEventListener("mousemove", this.mouseMoveListener);
-            wrapper.removeEventListener("touchstart", this.touchMoveListener);
-            wrapper.removeEventListener("touchmove", this.touchMoveListener);
-            wrapper.removeEventListener("mouseleave", this.mouseLeaveListener);
-            wrapper.removeEventListener("touchend", this.mouseLeaveListener);
-        }
+    public onReconnect() {
         if (this.cursorInstances.size) {
             this.cursorInstances.forEach(cursor => cursor.destroy());
             this.cursorInstances.clear();
         }
+        this.roomMembers = this.appManager.room?.state.roomMembers;
+        if (WindowManager.wrapper) {
+            this.handleRoomMembersChange(WindowManager.wrapper);
+        }
+    }
+
+    public addCursorChangeListener = (
+        uid: string,
+        callback: (position: Position, state: CursorState) => void
+    ) => {
+        this.manager.refresher?.add(uid, () => {
+            const disposer = autorun(() => {
+                const position = get(this.cursors, [uid, Fields.Position]);
+                const state = get(this.cursors, [uid, Fields.CursorState]);
+                if (position) {
+                    callback(position, state);
+                }
+            });
+            return disposer;
+        });
+    };
+
+    public destroy() {
+        this.sideEffectManager.flushAll();
+        if (this.cursorInstances.size) {
+            this.cursorInstances.forEach(cursor => {
+                cursor.destroy();
+            });
+            this.cursorInstances.clear();
+        }
         this.manager.refresher?.remove("cursors");
     }
 }

package/src/MainView.ts

@@ -5,6 +5,7 @@ import { createView } from "./ViewManager";
 import { debounce, isEmpty, isEqual } from "lodash";
 import { Fields } from "./AttributesDelegate";
 import { notifyMainViewModeChange, setViewFocusScenePath, setViewMode } from "./Utils/Common";
+import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Size, View } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 
@@ -16,6 +17,8 @@ export class MainViewProxy extends Base {
     private mainView: View;
     private viewId = "mainView";
 
+    private sideEffectManager = new SideEffectManager();
+
     constructor(manager: AppManager) {
         super(manager);
         this.mainView = this.createMainView();
@@ -29,8 +32,12 @@ export class MainViewProxy extends Base {
                 }
             }, 200); // 等待 mainView 挂载完毕再进行监听，否则会触发不必要的 onSizeUpdated
         });
-        emitter.on("playgroundSizeChange", () => {
+        const playgroundSizeChangeListener = () => {
             this.sizeChangeHandler(this.mainViewSize);
+        }
+        this.sideEffectManager.add(() => {
+            emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
+            return () => emitter.off("playgroundSizeChange", playgroundSizeChangeListener);
         });
     }
 
@@ -75,7 +82,7 @@ export class MainViewProxy extends Base {
         );
     };
 
-    private sizeChangeHandler =  debounce((size: Size) => {
+    private sizeChangeHandler = debounce((size: Size) => {
         if (size) {
             this.moveCameraToContian(size);
             this.moveCamera(this.mainViewCamera);
@@ -104,7 +111,7 @@ export class MainViewProxy extends Base {
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
         this.store.setMainViewCamera({ ...camera, id: this.context.uid });
-        if (!isEqual(this.mainViewSize, {...this.mainView.size, id: this.context.uid})) {
+        if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.context.uid })) {
             this.setMainViewSize(this.view.size);
         }
     };
@@ -204,5 +211,6 @@ export class MainViewProxy extends Base {
     public destroy() {
         this.stop();
         this.cameraStore.unregister(this.viewId, this.mainView);
+        this.sideEffectManager.flushAll();
     }
 }