@netless/window-manager 0.3.23 → 0.3.24

package/src/Cursor/index.ts

@@ -1,10 +1,8 @@
-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 { Cursor } from "./Cursor";
+import { CursorState, Events } from "../constants";
+import { emitter, WindowManager } from "../index";
+import { throttle } from "lodash";
+import type { CursorMovePayload } from "../index";
 import type { PositionType } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
@@ -18,110 +16,76 @@ export type MoveCursorParams = {
     uid: string;
     x: number;
     y: number;
-}
-export class CursorManager extends Base {
+};
+export class CursorManager {
     public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
     private mainViewElement?: HTMLDivElement;
+    private store = this.manager.store;
 
-    constructor(private appManager: AppManager) {
-        super(appManager);
-        this.roomMembers = this.appManager.room?.state.roomMembers;
+    constructor(private manager: AppManager) {
+        this.roomMembers = this.manager.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();
+            wrapper.addEventListener("pointerenter", this.mouseMoveListener);
+            wrapper.addEventListener("pointermove", this.mouseMoveListener);
+            wrapper.addEventListener("pointerleave", this.mouseLeaveListener);
             this.wrapperRect = wrapper.getBoundingClientRect();
-            this.startReaction(wrapper);
         }
+        emitter.on("cursorMove", payload => {
+            let cursorInstance = this.cursorInstances.get(payload.uid);
+            if (!cursorInstance) {
+                cursorInstance = new Cursor(this.manager, payload.uid, this, wrapper);
+                this.cursorInstances.set(payload.uid, cursorInstance);
+            }
+            if (payload.state === CursorState.Leave) {
+                cursorInstance.leave();
+            } else {
+                cursorInstance.move(payload.position);
+            }
+        });
     }
 
     public setMainViewDivElement(div: HTMLDivElement) {
         this.mainViewElement = div;
     }
 
-    private startReaction(wrapper: HTMLElement) {
-        this.manager.refresher?.add("cursors", () => {
-            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 (uid === this.context.uid) {
-                        return;
-                    }
-                    const component = new Cursor(
-                        this.appManager,
-                        this.cursors,
-                        uid,
-                        this,
-                        wrapper
-                    );
-                    this.cursorInstances.set(uid, component);
-                }
-            })
-        }
-    }, 100);
-
-    public get cursors() {
-        return this.manager.attributes?.[Fields.Cursors];
-    }
-
     public get boxState() {
         return this.store.getBoxState();
     }
 
     public get focusView() {
-        return this.appManager.focusApp?.view;
+        return this.manager.focusApp?.view;
     }
 
-    private mouseMoveListener = debounce((event: MouseEvent) => {
+    private mouseMoveListener = throttle((event: MouseEvent) => {
         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);
+    }, 16);
 
     private updateCursor(event: EventType, clientX: number, clientY: number) {
         if (this.wrapperRect && this.manager.canOperate) {
-            const view = event.type === "main" ? this.appManager.mainView : this.focusView;
+            const view = event.type === "main" ? this.manager.mainView : this.focusView;
             const point = this.getPoint(view, clientX, clientY);
             if (point) {
-                this.setNormalCursorState();
-                this.store.updateCursor(this.context.uid, {
-                    x: point.x,
-                    y: point.y,
-                    ...event,
-                });
+                this.manager.dispatchInternalEvent(Events.CursorMove, {
+                    uid: this.manager.uid,
+                    position: {
+                        x: point.x,
+                        y: point.y,
+                        type: event.type,
+                    },
+                } as CursorMovePayload);
             }
         }
     }
 
-    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,17 +94,17 @@ export class CursorManager extends Base {
             });
             return point;
         }
-    }
+    };
 
     /**
      *  因为窗口内框在不同分辨率下的大小不一样，所以这里通过来鼠标事件的 target 来判断是在主白板还是在 APP 中
      */
     private getType = (event: MouseEvent | Touch): EventType => {
         const target = event.target as HTMLElement;
-        const focusApp = this.appManager.focusApp;
+        const focusApp = this.manager.focusApp;
         switch (target.parentElement) {
             case this.mainViewElement: {
-                return { type: "main" }; 
+                return { type: "main" };
             }
             case focusApp?.view?.divElement: {
                 return { type: "app" };
@@ -151,25 +115,12 @@ export class CursorManager extends Base {
         }
     };
 
-    private initCursorAttributes() {
-        this.store.updateCursor(this.context.uid, {
-            x: 0,
-            y: 0,
-            type: "main",
-        });
-        this.store.updateCursorState(this.context.uid, CursorState.Leave);
-    }
-
-    private setNormalCursorState() {
-        const cursorState = this.store.getCursorState(this.context.uid);
-        if (cursorState !== CursorState.Normal) {
-            this.store.updateCursorState(this.context.uid, CursorState.Normal);
-        }
-    }
-
     private mouseLeaveListener = () => {
-        this.hideCursor(this.context.uid);
-        this.store.updateCursorState(this.context.uid, CursorState.Leave);
+        this.hideCursor(this.manager.uid);
+        this.manager.dispatchInternalEvent(Events.CursorMove, {
+            uid: this.manager.uid,
+            state: CursorState.Leave,
+        } as CursorMovePayload);
     };
 
     public updateContainerRect() {
@@ -177,18 +128,7 @@ export class CursorManager extends Base {
         this.wrapperRect = WindowManager.wrapper?.getBoundingClientRect();
     }
 
-    public setRoomMembers(members: readonly RoomMember[]) {
-        this.roomMembers = members;
-        this.cursorInstances.forEach(cursor => {
-            cursor.setMember();
-        });
-        if (WindowManager.wrapper) {
-            this.handleRoomMembersChange(WindowManager.wrapper);
-        }
-    }
-
     public deleteCursor(uid: string) {
-        this.store.cleanCursor(uid);
         const cursor = this.cursorInstances.get(uid);
         if (cursor) {
             cursor.destroy();
@@ -202,29 +142,12 @@ export class CursorManager extends Base {
         }
     }
 
-    public cleanMemberAttributes(members: readonly RoomMember[]) {
-        const uids = this.getUids(members);
-        const needDeleteIds: string[] = [];
-        const cursors = Object.keys(this.cursors);
-        cursors.map(cursorId => {
-            const index = uids.findIndex(id => id === cursorId);
-            if (index === -1) {
-                needDeleteIds.push(cursorId);
-            }
-        });
-        needDeleteIds.forEach(uid => {
-            this.deleteCursor(uid);
-        });
-    }
-
     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);
+            wrapper.removeEventListener("pointerenter", this.mouseMoveListener);
+            wrapper.removeEventListener("pointermove", this.mouseMoveListener);
+            wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
         }
         if (this.cursorInstances.size) {
             this.cursorInstances.forEach(cursor => cursor.destroy());

package/src/MainView.ts

@@ -1,5 +1,4 @@
 import { AnimationMode, reaction, ViewVisionMode } from "white-web-sdk";
-import { Base } from "./Base";
 import { callbacks, emitter } from "./index";
 import { createView } from "./ViewManager";
 import { debounce, isEmpty, isEqual } from "lodash";
@@ -8,16 +7,16 @@ import { notifyMainViewModeChange, setViewFocusScenePath, setViewMode } from "./
 import type { Camera, Size, View } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 
-export class MainViewProxy extends Base {
+export class MainViewProxy {
     private scale?: number;
     private cameraStore = this.manager.cameraStore;
+    private store = this.manager.store;
     private started = false;
     private mainViewIsAddListener = false;
     private mainView: View;
     private viewId = "mainView";
 
-    constructor(manager: AppManager) {
-        super(manager);
+    constructor(private manager: AppManager) {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         this.cameraStore.register(this.viewId, this.mainView);
@@ -56,15 +55,15 @@ export class MainViewProxy extends Base {
     }
 
     public setCameraAndSize(): void {
-        this.store.setMainViewCamera({ ...this.mainView.camera, id: this.context.uid });
-        this.store.setMainViewSize({ ...this.mainView.size, id: this.context.uid });
+        this.store.setMainViewCamera({ ...this.mainView.camera, id: this.manager.uid });
+        this.store.setMainViewSize({ ...this.mainView.size, id: this.manager.uid });
     }
 
     private cameraReaction = () => {
         return reaction(
             () => this.mainViewCamera,
             camera => {
-                if (camera && camera.id !== this.context.uid) {
+                if (camera && camera.id !== this.manager.uid) {
                     this.moveCameraToContian(this.mainViewSize);
                     this.moveCamera(camera);
                 }
@@ -75,7 +74,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);
@@ -103,8 +102,8 @@ 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})) {
+        this.store.setMainViewCamera({ ...camera, id: this.manager.uid });
+        if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.manager.uid })) {
             this.setMainViewSize(this.view.size);
         }
     };
@@ -133,11 +132,11 @@ export class MainViewProxy extends Base {
         if (!this.manager.canOperate) return;
         if (this.view.mode === ViewVisionMode.Writable) return;
         this.store.cleanFocus();
-        this.context.blurFocusBox();
+        this.manager.boxManager.blurAllBox();
     }
 
     public setMainViewSize = debounce(size => {
-        this.store.setMainViewSize({ ...size, id: this.context.uid });
+        this.store.setMainViewSize({ ...size, id: this.manager.uid });
     }, 50);
 
     private addCameraListener() {

package/src/constants.ts

@@ -10,6 +10,7 @@ export enum Events {
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
+    CursorMove = "CursorMove",
 }
 
 export const MagixEventName = "__WindowManger";

package/src/index.ts

@@ -30,7 +30,7 @@ import {
     ParamsInvalidError,
     WhiteWebSDKInvalidError,
 } from "./Utils/error";
-import type { Apps } from "./AttributesDelegate";
+import type { Apps, Position } from "./AttributesDelegate";
 import {
     InvisiblePlugin,
     isPlayer,
@@ -124,6 +124,8 @@ export type AppInitState = {
     zIndex?: number;
 };
 
+export type CursorMovePayload = { uid: string; state?: "leave"; position: Position };
+
 export type EmitterEvent = {
     onCreated: undefined;
     InitReplay: AppInitState;
@@ -137,6 +139,8 @@ export type EmitterEvent = {
     observerIdChange: number;
     boxStateChange: string;
     playgroundSizeChange: DOMRect;
+    onReconnected: undefined;
+    cursorMove: CursorMovePayload;
 };
 
 export const emitter: Emittery<EmitterEvent> = new Emittery();
@@ -272,65 +276,70 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         if (WindowManager.isCreated) {
             throw new Error("[WindowManager]: Already created cannot be created again");
         }
-        let manager = await this.initManager(room);
-        this.debug = Boolean(debug);
-        if (this.debug) {
-            setOptions({ verbose: true });
-        }
-        log("Already insert room", manager);
+        WindowManager.isCreated = true;
+        try {
+            let manager = await this.initManager(room);
+            this.debug = Boolean(debug);
+            if (this.debug) {
+                setOptions({ verbose: true });
+            }
+            log("Already insert room", manager);
 
-        if (isRoom(this.displayer)) {
-            if (!manager) {
-                throw new Error("[WindowManager]: init InvisiblePlugin failed");
+            if (isRoom(this.displayer)) {
+                if (!manager) {
+                    throw new Error("[WindowManager]: init InvisiblePlugin failed");
+                }
+            } else {
+                await pRetry(
+                    async count => {
+                        manager = await this.initManager(room);
+                        if (!manager) {
+                            log(`manager is empty. retrying ${count}`);
+                            throw new Error();
+                        }
+                    },
+                    { retries: 10 }
+                );
             }
-        } else {
-            await pRetry(
-                async count => {
-                    manager = await this.initManager(room);
-                    if (!manager) {
-                        log(`manager is empty. retrying ${count}`);
-                        throw new Error();
-                    }
-                },
-                { retries: 10 }
-            );
-        }
 
-        if (containerSizeRatio) {
-            WindowManager.containerSizeRatio = containerSizeRatio;
-        }
-        WindowManager.container = container;
-        const { playground, wrapper, sizer, mainViewElement } = setupWrapper(container);
-        WindowManager.playground = playground;
-        if (chessboard) {
-            sizer.classList.add("netless-window-manager-chess-sizer");
-        }
-        if (overwriteStyles) {
-            const style = document.createElement("style");
-            style.textContent = overwriteStyles;
-            playground.appendChild(style);
-        }
-        await manager.ensureAttributes();
-        manager.appManager = new AppManager(manager, {
-            collectorContainer: collectorContainer,
-            collectorStyles: collectorStyles,
-            prefersColorScheme: prefersColorScheme,
-        });
-        manager.observePlaygroundSize(playground, sizer, wrapper);
-        if (cursor) {
-            manager.cursorManager = new CursorManager(manager.appManager);
-        }
-        manager.bindMainView(mainViewElement, disableCameraTransform);
-        replaceRoomFunction(room, manager.appManager);
-        emitter.emit("onCreated");
-        WindowManager.isCreated = true;
-        try {
-            await initDb();
+            if (containerSizeRatio) {
+                WindowManager.containerSizeRatio = containerSizeRatio;
+            }
+            WindowManager.container = container;
+            const { playground, wrapper, sizer, mainViewElement } = setupWrapper(container);
+            WindowManager.playground = playground;
+            if (chessboard) {
+                sizer.classList.add("netless-window-manager-chess-sizer");
+            }
+            if (overwriteStyles) {
+                const style = document.createElement("style");
+                style.textContent = overwriteStyles;
+                playground.appendChild(style);
+            }
+            await manager.ensureAttributes();
+            manager.appManager = new AppManager(manager, {
+                collectorContainer: collectorContainer,
+                collectorStyles: collectorStyles,
+                prefersColorScheme: prefersColorScheme,
+            });
+            manager.observePlaygroundSize(playground, sizer, wrapper);
+            if (cursor) {
+                manager.cursorManager = new CursorManager(manager.appManager);
+            }
+            manager.bindMainView(mainViewElement, disableCameraTransform);
+            replaceRoomFunction(room, manager.appManager);
+            emitter.emit("onCreated");
+            try {
+                await initDb();
+            } catch (error) {
+                console.warn("[WindowManager]: indexedDB open failed");
+                console.log(error);
+            }
+            return manager;
         } catch (error) {
-            console.warn("[WindowManager]: indexedDB open failed");
-            console.log(error);
+            WindowManager.isCreated = false;
+            throw error;
         }
-        return manager;
     }
 
     private static async initManager(room: Room): Promise<WindowManager> {

package/src/style.css

@@ -122,7 +122,7 @@
     left: 0;
     top: 0;
     will-change: transform;
-    transition: transform 0.05s;
+    transition: transform 0.1s;
     transform-origin: 0 0;
     user-select: none;
     pointer-events: none;

package/src/viewManager.ts

@@ -1,4 +1,3 @@
-import { Base } from "./Base";
 import { callbacks, WindowManager } from "./index";
 import { reaction, ViewVisionMode } from "white-web-sdk";
 import { SET_SCENEPATH_DELAY } from "./constants";
@@ -6,16 +5,16 @@ import { notifyMainViewModeChange, setScenePath, setViewMode } from "./Utils/Com
 import type { View, Displayer } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 
-export class ViewManager extends Base {
+export class ViewManager {
     private views: Map<string, View> = new Map();
     private timer?: number;
     private appTimer?: number;
 
     private mainViewProxy = this.manager.mainViewProxy;
     private displayer = this.manager.displayer;
+    private store = this.manager.store;
 
-    constructor(manager: AppManager) {
-        super(manager);
+    constructor(private manager: AppManager) {
         setTimeout(() => {
             // 延迟初始化 focus 的 reaction
             this.manager.refresher?.add("focus", () => {
@@ -26,7 +25,7 @@ export class ViewManager extends Base {
                             this.switchAppToWriter(focus);
                         } else {
                             this.switchMainViewToWriter();
-                            this.context.blurFocusBox();
+                            this.manager.boxManager.blurAllBox();
                         }
                     },
                     { fireImmediately: true }

package/vite.config.js

@@ -1,7 +1,7 @@
 import path from "path";
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { dependencies, peerDependencies, version } from "./package.json"
+import { dependencies, peerDependencies, version, devDependencies } from "./package.json"
 
 
 export default defineConfig(({ mode }) => {
@@ -10,7 +10,9 @@ export default defineConfig(({ mode }) => {
     return {
         define: {
             __APP_VERSION__: JSON.stringify(version),
-            __APP_DEPENDENCIES__: JSON.stringify(dependencies),
+            __APP_DEPENDENCIES__: JSON.stringify({
+                dependencies, peerDependencies, devDependencies
+            }),
         },
         plugins: [
             svelte({

package/dist/Base/Context.d.ts

@@ -1,13 +0,0 @@
-import type { AppManager } from "../AppManager";
-export declare class Context {
-    private manager;
-    observerId: number;
-    constructor(manager: AppManager);
-    get uid(): string;
-    findMember: (memberId: number) => import("white-web-sdk").RoomMember | undefined;
-    findMemberByUid: (uid: string) => import("white-web-sdk").RoomMember | undefined;
-    updateManagerRect(): void;
-    blurFocusBox(): void;
-    switchAppToWriter(id: string): void;
-}
-export declare const createContext: (manager: AppManager) => Context;

package/dist/Base/index.d.ts

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

package/src/Base/Context.ts

@@ -1,49 +0,0 @@
-import { emitter } from "../index";
-import type { AppManager } from "../AppManager";
-
-export class Context {
-    public observerId: number;
-
-    constructor(private manager: AppManager) {
-        this.observerId = manager.displayer.observerId;
-
-        emitter.on("observerIdChange", id => {
-            this.observerId = id;
-        });
-    };
-
-    public get uid() {
-        return this.manager.room?.uid || "";
-    }
-
-    public findMember = (memberId: number) => {
-        const roomMembers = this.manager.room?.state.roomMembers;
-        return roomMembers?.find(member => member.memberId === memberId);
-    }
-
-    public findMemberByUid = (uid: string) => {
-        const roomMembers = this.manager.room?.state.roomMembers;
-        return roomMembers?.find(member => member.payload?.uid === uid);
-    }
-
-    public updateManagerRect() {
-        this.manager.boxManager.updateManagerRect();
-    }
-
-    public blurFocusBox() {
-        this.manager.boxManager.blurAllBox();
-    }
-
-    public switchAppToWriter(id: string) {
-        this.manager.viewManager.switchAppToWriter(id);
-    }
-}
-
-let context: Context;
-
-export const createContext = (manager: AppManager) => {
-    if (!context) {
-        context = new Context(manager);
-    }
-    return context;
-};

package/src/Base/index.ts

@@ -1,10 +0,0 @@
-import type { AppManager } from "../AppManager";
-import { AttributesDelegate } from "../AttributesDelegate";
-import { createContext } from "./Context";
-
-export class Base {
-    public store = new AttributesDelegate(this.manager);
-    public context = createContext(this.manager);
-
-    constructor(public manager: AppManager) {}
-}