@netless/window-manager 0.4.0-canary.17 → 0.4.0-canary.18

package/src/Cursor/Cursor.ts

@@ -1,42 +1,34 @@
-import App from './Cursor.svelte';
-import { ApplianceMap } from './icons';
-import { ApplianceNames } from 'white-web-sdk';
-import { CursorState } from '../constants';
-import { Fields } from '../AttributesDelegate';
-import { get, omit } from 'lodash';
-import type { Position } from '../AttributesDelegate';
+import App from "./Cursor.svelte";
+import { ApplianceMap } from "./icons";
+import { ApplianceNames } from "white-web-sdk";
+import { omit } from "lodash";
+import type { Position } from "../AttributesDelegate";
 import type { RoomMember } from "white-web-sdk";
 import type { CursorManager } from "./index";
 import type { SvelteComponent } from "svelte";
-import { Base } from '../Base';
-import type { AppManager } from '../AppManager';
+import type { AppManager } from "../AppManager";
 
 export type Payload = {
-    [key: string]: any
-}
-
+    [key: string]: any;
+};
 
-export class Cursor extends Base {
+export class Cursor {
     private member?: RoomMember;
     private timer?: number;
     private component?: SvelteComponent;
 
     constructor(
-        manager: AppManager,
-        addCursorChangeListener: (uid: string, callback: (position: Position, state: CursorState) => void) => void,
-        private cursors: any,
+        private manager: AppManager,
         private memberId: string,
         private cursorManager: CursorManager,
-        private wrapper?: HTMLElement,
+        private wrapper?: HTMLElement
     ) {
-        super(manager);
         this.setMember();
         this.createCursor();
-        addCursorChangeListener(this.memberId, this.onCursorChange);
         this.autoHidden();
     }
 
-    private onCursorChange = (position: Position, state: CursorState) => {
+    public move = (position: Position) => {
         if (position.type === "main") {
             const rect = this.cursorManager.wrapperRect;
             if (this.component && rect) {
@@ -45,7 +37,6 @@ export class Cursor extends Base {
             }
         } 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) {
@@ -53,10 +44,11 @@ export class Cursor extends Base {
                 this.moveCursor(position, viewRect, focusView);
             }
         }
-        if (state && state === CursorState.Leave) {
-            this.hide();
-        }
-    }
+    };
+
+    public leave = () => {
+        this.hide();
+    };
 
     private moveCursor(cursor: Position, rect: DOMRect, view: any) {
         const { x, y, type } = cursor;
@@ -124,21 +116,12 @@ export class Cursor extends Base {
         }
     }
 
-    public get cursorState(): CursorState | undefined {
-        return get(this.cursors, [this.memberId, Fields.CursorState]);
-    }
-
-    public get cursorPosition(): Position | undefined {
-        return get(this.cursors, [this.memberId, Fields.Position]);
-    }
-
     private autoHidden() {
         if (this.timer) {
             clearTimeout(this.timer);
         }
         this.timer = window.setTimeout(() => {
             this.hide();
-            this.store.updateCursorState(this.memberId, CursorState.Leave);
         }, 1000 * 10); // 10 秒钟自动隐藏
     }
 
@@ -176,7 +159,7 @@ export class Cursor extends Base {
     }
 
     public setMember() {
-        this.member = this.context.findMemberByUid(this.memberId);
+        this.member = this.manager.findMemberByUid(this.memberId);
         this.updateComponent();
     }
 
@@ -188,13 +171,16 @@ export class Cursor extends Base {
         if (this.component) {
             this.component.$destroy();
         }
-        this.manager.refresher?.remove(this.memberId);
         this.cursorManager.cursorInstances.delete(this.memberId);
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
     }
 
     public hide() {
         if (this.component) {
             this.component.$set({ visible: false });
+            this.destroy();
         }
     }
 }

package/src/Cursor/index.ts

@@ -1,13 +1,10 @@
-import { autorun } from "white-web-sdk";
-import { Base } from "../Base";
-import { compact, debounce, get, uniq } from "lodash";
+import { compact, throttle, uniq } from "lodash";
 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 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 +18,36 @@ 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) {
+        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 {
+                cursorInstance.move(payload.position);
+            }
         });
     }
 
     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 +59,42 @@ 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 +119,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 +133,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 +142,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 +157,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 +165,5 @@ export class CursorManager extends Base {
             });
             this.cursorInstances.clear();
         }
-        this.manager.refresher?.remove("cursors");
     }
 }

package/src/Utils/RoomHacker.ts

@@ -1,22 +1,13 @@
 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) => {
     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 {
         const descriptor = Object.getOwnPropertyDescriptor(room, "disableCameraTransform");
         if (descriptor) return;
@@ -32,13 +23,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);
@@ -52,6 +43,28 @@ export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
         room.redo = () => manager.mainView.redo();
         room.undo = () => manager.mainView.undo();
         room.cleanCurrentScene = () => manager.mainView.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;
+};

package/src/View/MainView.ts

@@ -1,5 +1,4 @@
 import { AnimationMode, reaction } from "white-web-sdk";
-import { Base } from "../Base";
 import { callbacks, emitter } from "../index";
 import { createView } from "./ViewManager";
 import { debounce, isEmpty, isEqual } from "lodash";
@@ -9,17 +8,17 @@ import { SideEffectManager } from "side-effect-manager";
 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 started = false;
     private mainViewIsAddListener = false;
     private mainView: View;
     private viewId = "mainView";
+    private store = this.manager.store;
 
     private sideEffectManager = new SideEffectManager();
 
-    constructor(manager: AppManager) {
-        super(manager);
+    constructor(private manager: AppManager) {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
@@ -62,15 +61,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);
                 }
@@ -106,8 +105,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);
         }
     };
@@ -135,11 +134,11 @@ export class MainViewProxy extends Base {
     public async mainViewClickHandler(): Promise<void> {
         if (!this.manager.canOperate) 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,7 +10,8 @@ export enum Events {
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
-    MoveCameraToContain = "MoveCameraToContain"
+    MoveCameraToContain = "MoveCameraToContain",
+    CursorMove = "CursorMove",
 }
 
 export const MagixEventName = "__WindowManger";
@@ -37,7 +38,7 @@ export enum CursorState {
     Normal = "normal",
 }
 
-export const REQUIRE_VERSION = "2.16.0";
+export const REQUIRE_VERSION = "2.16.1";
 
 export const MIN_WIDTH = 340 / 720;
 export const MIN_HEIGHT = 340 / 720;

package/src/index.ts

@@ -32,7 +32,7 @@ import {
     ParamsInvalidError,
     WhiteWebSDKInvalidError,
 } from "./Utils/error";
-import type { Apps } from "./AttributesDelegate";
+import type { Apps, Position } from "./AttributesDelegate";
 import {
     InvisiblePlugin,
     isPlayer,
@@ -125,6 +125,8 @@ export type AppInitState = {
     zIndex?: number;
 };
 
+export type CursorMovePayload = { uid: string; state?: "leave"; position: Position };
+
 export type EmitterEvent = {
     onCreated: undefined;
     InitReplay: AppInitState;
@@ -139,6 +141,8 @@ export type EmitterEvent = {
     boxStateChange: string;
     playgroundSizeChange: DOMRect;
     onReconnected: void;
+    removeScenes: string;
+    cursorMove: CursorMovePayload;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;
@@ -187,6 +191,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     private static isCreated = false;
 
     public version = __APP_VERSION__;
+    public dependencies = __APP_DEPENDENCIES__;
 
     public appListeners?: AppListeners;
 
@@ -205,6 +210,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     constructor(context: InvisiblePluginContext) {
         super(context);
         WindowManager.displayer = context.displayer;
+        (window as any).NETLESS_DEPS = __APP_DEPENDENCIES__;
     }
 
     public static async mount(params: MountParams): Promise<WindowManager> {
@@ -478,7 +484,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     /**
      * 返回 mainView 的 ScenePath
      */
-    public getMainViewScenePath(): string {
+    public getMainViewScenePath(): string | undefined {
         return this.appManager?.store.getMainViewScenePath();
     }
 
@@ -526,6 +532,35 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         this.viewMode = mode;
     }
 
+    public setBoxState(boxState: TeleBoxState): void {
+        if (!this.canOperate) return;
+        switch (boxState) {
+            case "normal":
+                this.setMaximized(false);
+                this.setMinimized(false);
+                break;
+            case "maximized":
+                this.setMaximized(true);
+                this.setMinimized(false);
+                break;
+            case "minimized":
+                this.setMinimized(true);
+                break;
+            default:
+                break;
+        }
+    }
+
+    public setMaximized(maximized: boolean): void {
+        if (!this.canOperate) return;
+        this.boxManager?.setMaximized(maximized, false);
+    }
+
+    public setMinimized(minimized: boolean): void {
+        if (!this.canOperate) return;
+        this.boxManager?.setMinimized(minimized, false);
+    }
+
     public get mainView(): View {
         if (this.appManager) {
             return this.appManager.mainViewProxy.view;
@@ -589,7 +624,11 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         } else {
             throw new Error("[WindowManager]: mainViewSceneDir not found");
         }
-    }  
+    }
+
+    public get topApp(): string | undefined {
+        return this.boxManager?.getTopBox()?.id;
+    }
 
     /**
      * 查询所有的 App
@@ -731,6 +770,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             }
         }
     }
+
+    private _removeScenes = (scenePath: string) => {
+        this.room.removeScenes(scenePath);
+    };
 }
 
 setupBuiltin();

package/src/shim.d.ts

@@ -7,4 +7,5 @@ declare module "*.svelte" {
 
 declare global {
     const __APP_VERSION__: string;
-  }
+    const __APP_DEPENDENCIES__: Record<string, string>;
+}

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;
 }