@netless/window-manager 0.4.0-canary.9 → 0.4.2

package/src/Cursor/index.ts

@@ -1,13 +1,11 @@
-import { autorun } from "white-web-sdk";
-import { Base } from "../Base";
-import { compact, debounce, get, uniq } from "lodash";
+import { ApplianceNames } from "white-web-sdk";
 import { Cursor } from "./Cursor";
-import { CursorState } from "../constants";
+import { CursorState, Events } 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 { 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";
 
@@ -21,30 +19,47 @@ export type MoveCursorParams = {
     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 sideEffectManager = new SideEffectManager();
+    private store = this.manager.store;
 
-    constructor(private appManager: AppManager) {
-        super(appManager);
-        this.roomMembers = this.appManager.room?.state.roomMembers;
+    constructor(private manager: AppManager, private enableCursor: boolean) {
+        this.roomMembers = this.manager.room?.state.roomMembers;
         const wrapper = WindowManager.wrapper;
         if (wrapper) {
             this.setupWrapper(wrapper);
         }
-        emitter.on("onReconnected", () => {
-            this.onReconnect();
+        emitter.on("cursorMove", payload => {
+            let cursorInstance = this.cursorInstances.get(payload.uid);
+            if (!cursorInstance) {
+                cursorInstance = new Cursor(this.manager, payload.uid, this, WindowManager.wrapper);
+                this.cursorInstances.set(payload.uid, cursorInstance);
+            }
+            if (payload.state === CursorState.Leave) {
+                cursorInstance.leave();
+            } else {
+                const member = cursorInstance.updateMember();
+                const isLaserPointer =
+                    member?.memberState.currentApplianceName === ApplianceNames.laserPointer;
+                if (this.enableCursor || isLaserPointer) {
+                    cursorInstance.move(payload.position);
+                }
+            }
+        });
+        this.sideEffectManager.add(() => {
+            const unsubscribe = emitter.on("playgroundSizeChange", () => {
+                this.updateContainerRect();
+            });
+            return unsubscribe;
         });
     }
 
     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);
@@ -56,77 +71,38 @@ export class CursorManager extends Base {
             };
         });
 
-        this.initCursorAttributes();
         this.wrapperRect = wrapper.getBoundingClientRect();
-        this.startReaction(wrapper);
     }
 
     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.addCursorChangeListener,
-                        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);
+    }, 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);
             }
         }
     }
@@ -151,7 +127,7 @@ export class CursorManager extends Base {
      */
     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" };
@@ -165,25 +141,8 @@ 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);
     };
 
     public updateContainerRect() {
@@ -191,16 +150,6 @@ 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);
@@ -216,48 +165,6 @@ 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 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) {
@@ -266,6 +173,5 @@ export class CursorManager extends Base {
             });
             this.cursorInstances.clear();
         }
-        this.manager.refresher?.remove("cursors");
     }
 }

package/src/Helper.ts

@@ -1,3 +1,7 @@
+import { getVersionNumber } from "./Utils/Common";
+import { REQUIRE_VERSION } from "./constants";
+import { WhiteVersion } from "white-web-sdk";
+import { WhiteWebSDKInvalidError } from "./Utils/error";
 import { WindowManager } from "./index";
 
 export const setupWrapper = (
@@ -27,4 +31,11 @@ export const setupWrapper = (
     WindowManager.wrapper = wrapper;
 
     return { playground, wrapper, sizer, mainViewElement };
-};
+};
+
+export const checkVersion = () => {
+    const version = getVersionNumber(WhiteVersion);
+    if (version < getVersionNumber(REQUIRE_VERSION)) {
+        throw new WhiteWebSDKInvalidError(REQUIRE_VERSION);
+    }
+};

package/src/Register/index.ts

@@ -1,6 +1,12 @@
 import Emittery from "emittery";
-import type { NetlessApp, RegisterEvents, RegisterParams } from "../typings";
 import { loadApp } from "./loader";
+import type { NetlessApp, RegisterEvents, RegisterParams } from "../typings";
+
+export type LoadAppEvent = {
+    kind: string;
+    status: "start" | "success" | "failed";
+    reason?: string;
+};
 
 class AppRegister {
     public kindEmitters: Map<string, Emittery<RegisterEvents>> = new Map();
@@ -10,34 +16,39 @@ class AppRegister {
 
     public async register(params: RegisterParams): Promise<void> {
         this.registered.set(params.kind, params);
-        
-        const srcOrAppOrFunction = params.src
-        let downloadApp: () => Promise<NetlessApp>
-        
+
+        const srcOrAppOrFunction = params.src;
+        let downloadApp: () => Promise<NetlessApp>;
+
         if (typeof srcOrAppOrFunction === "string") {
             downloadApp = async () => {
-                const appClass = await loadApp(srcOrAppOrFunction, params.kind);
+                let appClass = (await loadApp(srcOrAppOrFunction, params.kind)) as any;
                 if (appClass) {
-                    return appClass
+                    if (appClass.__esModule) {
+                        appClass = appClass.default;
+                    }
+                    return appClass;
                 } else {
-                    throw new Error(`[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`);
+                    throw new Error(
+                        `[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`
+                    );
                 }
-            }
+            };
         } else if (typeof srcOrAppOrFunction === "function") {
-            downloadApp = srcOrAppOrFunction
+            downloadApp = srcOrAppOrFunction;
         } else {
-            downloadApp = async () => srcOrAppOrFunction
+            downloadApp = async () => srcOrAppOrFunction;
         }
 
         this.appClasses.set(params.kind, async () => {
-            let app = this.appClassesCache.get(params.kind)
+            let app = this.appClassesCache.get(params.kind);
             if (!app) {
-                app = downloadApp()
-                this.appClassesCache.set(params.kind, app)
+                app = downloadApp();
+                this.appClassesCache.set(params.kind, app);
             }
-            return app
+            return app;
         });
-        
+
         if (params.addHooks) {
             const emitter = this.createKindEmitter(params.kind);
             if (emitter) {
@@ -46,7 +57,11 @@ class AppRegister {
         }
     }
 
-    public async notifyApp<T extends keyof RegisterEvents>(kind: string, event: T, payload: RegisterEvents[T]) {
+    public async notifyApp<T extends keyof RegisterEvents>(
+        kind: string,
+        event: T,
+        payload: RegisterEvents[T]
+    ) {
         const emitter = this.kindEmitters.get(kind);
         await emitter?.emit(event, payload);
     }

package/src/Register/loader.ts

@@ -1,14 +1,15 @@
+import { callbacks } from "../index";
 import { getItem, setItem } from "./storage";
 import type { NetlessApp } from "../typings";
 
 const Prefix = "NetlessApp";
 
-const TIMEOUT = 10000; // 10 秒超时
+const TIMEOUT = 10000; // 下载 script 10 秒超时
 
 export const getScript = async (url: string): Promise<string> => {
     const item = await getItem(url);
     if (item) {
-        return item;
+        return item.sourceCode;
     } else {
         const result = await fetchWithTimeout(url, { timeout: TIMEOUT });
         const text = await result.text();
@@ -18,7 +19,7 @@ export const getScript = async (url: string): Promise<string> => {
 };
 
 export const executeScript = (text: string, appName: string): NetlessApp => {
-    let result = Function(text + `;return ${appName}`)();
+    let result = Function(text + `\n;return ${appName}`)();
     if (typeof result === "undefined") {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -33,19 +34,33 @@ export const loadApp = async (
     name?: string
 ): Promise<NetlessApp | undefined> => {
     const appName = name || Prefix + key;
-    const text = await getScript(url);
+    callbacks.emit("loadApp", { kind: key, status: "start" });
     try {
-        return executeScript(text, appName);
-    } catch (error: any) {
-        if (error.message.includes("Can only have one anonymous define call per script file")) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            const define = window.define;
-            if ("function" == typeof define && define.amd) {
-                delete define.amd;
+        const text = await getScript(url);
+        if (!text || text.length === 0) {
+            callbacks.emit("loadApp", { kind: key, status: "failed", reason: "script is empty." });
+            return;
+        }
+        try {
+            const result = executeScript(text, appName);
+            callbacks.emit("loadApp", { kind: key, status: "success" });
+            return result;
+        } catch (error: any) {
+            if (error.message.includes("Can only have one anonymous define call per script file")) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                const define = window.define;
+                if ("function" == typeof define && define.amd) {
+                    delete define.amd;
+                }
+                const result = executeScript(text, appName);
+                callbacks.emit("loadApp", { kind: key, status: "success" });
+                return result;
             }
-            return executeScript(text, appName);
+            callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
         }
+    } catch (error: any) {
+        callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
     }
 };
 

package/src/Register/storage.ts

@@ -3,6 +3,11 @@ const DatabaseName = "__WindowManagerAppCache";
 let db: IDBDatabase;
 let store: IDBObjectStore;
 
+export type Item = {
+    kind: string;
+    sourceCode: string;
+}
+
 export const initDb = async () => {
     db = await createDb();
 }
@@ -12,7 +17,7 @@ export const setItem = (key: string, val: any) => {
     return addRecord(db, { kind: key, sourceCode: val })
 };
 
-export const getItem = async (key: string): Promise<string | null> => {
+export const getItem = async (key: string): Promise<Item | null> => {
     if (!db) return null;
     return await query(db, key);
 };

package/src/Utils/AppCreateQueue.ts

@@ -0,0 +1,54 @@
+import type { AppProxy } from "../AppProxy";
+
+export type Invoker = () => Promise<AppProxy | undefined>;
+
+export class AppCreateQueue {
+    private list: Invoker[] = [];
+    private currentInvoker: Invoker | undefined;
+    private timer: number | undefined;
+
+    private initInterval() {
+        return setInterval(() => {
+            this.invoke();
+        }, 50);
+    }
+
+    public push(item: Invoker) {
+        this.list.push(item);
+        this.invoke();
+        if (this.timer === undefined && this.list.length > 0) {
+            this.timer = this.initInterval();
+        }
+    }
+
+    public invoke() {
+        if (this.list.length === 0) {
+            return;
+        }
+        if (this.currentInvoker !== undefined) {
+            return;
+        }
+
+        const item = this.list.shift();
+        if (item) {
+            this.currentInvoker = item;
+            item()
+                .then(() => {
+                    this.currentInvoker = undefined;
+                    if (this.list.length === 0) {
+                        clearInterval(this.timer);
+                    }
+                })
+                .catch(error => {
+                    console.error(`[WindowManager]: create app error: ${error.message}`);
+                    clearInterval(this.timer);
+                });
+        }
+    }
+
+    public destroy() {
+        if (this.timer) {
+            clearInterval(this.timer);
+        }
+    }
+}

package/src/Utils/Common.ts

@@ -1,10 +1,12 @@
 import { appRegister } from "../Register";
 import { debounce } from "lodash";
 import { emitter } from "../index";
+import { ScenePathType } from "white-web-sdk";
 import { v4 } from "uuid";
 import type { PublicEvent } from "../index";
 import type { Displayer, ViewVisionMode, Room, View } from "white-web-sdk";
 import type Emittery from "emittery";
+import { ROOT_DIR } from "../constants";
 
 export const genAppId = async (kind: string) => {
     const impl = await appRegister.appClasses.get(kind)?.();
@@ -17,6 +19,14 @@ export const genAppId = async (kind: string) => {
 export const setViewFocusScenePath = (view: View, focusScenePath: string) => {
     if (view.focusScenePath !== focusScenePath) {
         view.focusScenePath = focusScenePath;
+        return view;
+    }
+};
+
+export const setViewSceneIndex = (view: View, index: number) => {
+    if (view.focusSceneIndex !== index) {
+        view.focusSceneIndex = index;
+        return view;
     }
 };
 
@@ -42,6 +52,15 @@ export const getScenePath = (
     }
 };
 
+export const removeScenes = (room: Room | undefined, scenePath: string) => {
+    if (room) {
+        const type = room.scenePathType(scenePath);
+        if (type !== ScenePathType.None) {
+            room.removeScenes(scenePath);
+        }
+    }
+};
+
 export const setViewMode = (view: View, mode: ViewVisionMode) => {
     if (!(view as any).didRelease && view.mode !== mode) {
         view.mode = mode;
@@ -70,8 +89,10 @@ export const notifyMainViewModeChange = debounce(
 export const makeValidScenePath = (displayer: Displayer, scenePath: string, index = 0) => {
     const scenes = entireScenes(displayer)[scenePath];
     if (!scenes) return;
-    const firstSceneName = scenes[index].name;
-    if (scenePath === "/") {
+    const scene = scenes[index];
+    if (!scene) return;
+    const firstSceneName = scene.name;
+    if (scenePath === ROOT_DIR) {
         return `/${firstSceneName}`;
     } else {
         return `${scenePath}/${firstSceneName}`;
@@ -82,10 +103,22 @@ export const entireScenes = (displayer: Displayer) => {
     return displayer.entireScenes();
 };
 
+
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");
 };
 
+export const parseSceneDir = (scenePath: string) => {
+    const sceneList = scenePath.split("/");
+    sceneList.pop();
+    let sceneDir = sceneList.join("/");
+    // "/page1" 的 dir 为 "/"
+    if (sceneDir === "") {
+        sceneDir = "/";
+    }
+    return sceneDir;
+};
+
 export const ensureValidScenePath = (scenePath: string) => {
     if (scenePath.endsWith("/")) {
         return scenePath.slice(0, -1);

package/src/Utils/RoomHacker.ts

@@ -1,23 +1,15 @@
 import { emitter } from "../index";
 import { isPlayer } from "white-web-sdk";
-import type { WindowManager } from '../index';
-import type { Camera, Room , Player , PlayerSeekingResult } from "white-web-sdk";
+import type { WindowManager } from "../index";
+import type { Camera, Room, Player, PlayerSeekingResult } from "white-web-sdk";
 
 // 修改多窗口状态下一些失效的方法实现到 manager 的 mainview 上, 降低迁移成本
-export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
+export const replaceRoomFunction = (room: Room | Player, manager: WindowManager) => {
     if (isPlayer(room)) {
         const player = room as unknown as Player;
-        const originSeek = player.seekToProgressTime;
-        // eslint-disable-next-line no-inner-declarations
-        async function newSeek(time: number): Promise<PlayerSeekingResult> {
-            const seekResult = await originSeek.call(player, time);
-            if (seekResult === "success") {
-                emitter.emit("seek", time);
-            }
-            return seekResult;
-        }
-        player.seekToProgressTime = newSeek;
+        delegateSeekToProgressTime(player);
     } else {
+        room = room as unknown as Room;
         const descriptor = Object.getOwnPropertyDescriptor(room, "disableCameraTransform");
         if (descriptor) return;
         Object.defineProperty(room, "disableCameraTransform", {
@@ -32,13 +24,13 @@ export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
         Object.defineProperty(room, "canUndoSteps", {
             get() {
                 return manager.mainView.canUndoSteps;
-            }
+            },
         });
 
         Object.defineProperty(room, "canRedoSteps", {
             get() {
                 return manager.mainView.canRedoSteps;
-            }
+            },
         });
 
         room.moveCamera = (camera: Camera) => manager.mainView.moveCamera(camera);
@@ -49,8 +41,31 @@ export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
         room.fillSceneSnapshot = (...args) => manager.mainView.fillSceneSnapshot(...args);
         room.generateScreenshot = (...args) => manager.mainView.generateScreenshot(...args);
         room.setMemberState = (...args) => manager.mainView.setMemberState(...args);
-        room.redo = () => manager.mainView.redo();
-        room.undo = () => manager.mainView.undo();
+        room.redo = () => manager.redo();
+        room.undo = () => manager.undo();
+        room.cleanCurrentScene = () => manager.cleanCurrentScene();
+        delegateRemoveScenes(room);
     }
+};
 
-};
+const delegateRemoveScenes = (room: Room) => {
+    const originRemoveScenes = room.removeScenes;
+    room.removeScenes = (scenePath: string) => {
+        const result = originRemoveScenes.call(room, scenePath);
+        emitter.emit("removeScenes", scenePath);
+        return result;
+    };
+};
+
+const delegateSeekToProgressTime = (player: Player) => {
+    const originSeek = player.seekToProgressTime;
+    // eslint-disable-next-line no-inner-declarations
+    async function newSeek(time: number): Promise<PlayerSeekingResult> {
+        const seekResult = await originSeek.call(player, time);
+        if (seekResult === "success") {
+            emitter.emit("seek", time);
+        }
+        return seekResult;
+    }
+    player.seekToProgressTime = newSeek;
+};