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

package/src/AppProxy.ts

@@ -2,17 +2,13 @@ import Emittery from "emittery";
 import { AppAttributes, AppEvents, Events } from "./constants";
 import { AppContext } from "./AppContext";
 import { appRegister } from "./Register";
-import { autorun, ViewVisionMode } from "white-web-sdk";
-import { callbacks, emitter } from "./index";
+import { autorun } from "white-web-sdk";
+import { BoxManagerNotFoundError } from "./Utils/error";
+import { debounce, get } from "lodash";
+import { emitter } from "./index";
 import { Fields } from "./AttributesDelegate";
-import { get } from "lodash";
+import { getScenePath, removeScenes, setScenePath, setViewFocusScenePath } from "./Utils/Common";
 import { log } from "./Utils/log";
-import {
-    notifyMainViewModeChange,
-    setScenePath,
-    setViewFocusScenePath,
-    setViewMode,
-} from "./Utils/Common";
 import type {
     AppEmitterEvent,
     AppInitState,
@@ -24,10 +20,9 @@ import type { SceneState, View, SceneDefinition } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { NetlessApp } from "./typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
-import { Base } from "./Base";
-import { BoxManagerNotFoundError } from "./Utils/error";
 
-export class AppProxy extends Base {
+export class AppProxy {
+    public kind: string;
     public id: string;
     public scenePath?: string;
     public appEmitter: Emittery<AppEmitterEvent>;
@@ -37,8 +32,8 @@ export class AppProxy extends Base {
     private boxManager = this.manager.boxManager;
     private appProxies = this.manager.appProxies;
     private viewManager = this.manager.viewManager;
-    private cameraStore = this.manager.cameraStore;
-    private kind: string;
+    private store = this.manager.store;
+
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
     private stateKey: string;
@@ -47,11 +42,10 @@ export class AppProxy extends Base {
 
     constructor(
         private params: BaseInsertParams,
-        manager: AppManager,
+        private manager: AppManager,
         appId: string,
         isAddApp: boolean
     ) {
-        super(manager);
         this.kind = params.kind;
         this.id = appId;
         this.stateKey = `${this.id}_state`;
@@ -98,18 +92,24 @@ export class AppProxy extends Base {
 
     public getFullScenePath(): string | undefined {
         if (this.scenePath) {
-            return get(this.appAttributes, [Fields.FullPath], this.scenePath);
+            return get(this.appAttributes, [Fields.FullPath], this.getFullScenePathFromScenes());
+        }
+    }
+
+    private getFullScenePathFromScenes() {
+        const sceneIndex = get(this.appAttributes, ["state", "SceneIndex"], 0);
+        const fullPath = getScenePath(this.manager.room, this.scenePath, sceneIndex);
+        if (fullPath) {
+            this.setFullPath(fullPath);
         }
+        return fullPath;
     }
 
     public setFullPath(path: string) {
         this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
     }
 
-    public async baseInsertApp(
-        skipUpdate = false,
-        focus?: boolean
-    ): Promise<{ appId: string; app: NetlessApp }> {
+    public async baseInsertApp(skipUpdate = false): Promise<{ appId: string; app: NetlessApp }> {
         const params = this.params;
         if (!params.kind) {
             throw new Error("[WindowManager]: kind require");
@@ -117,14 +117,17 @@ export class AppProxy extends Base {
         const appImpl = await appRegister.appClasses.get(params.kind)?.();
         const appParams = appRegister.registered.get(params.kind);
         if (appImpl) {
-            await this.setupApp(this.id, skipUpdate, appImpl, params.options, appParams?.appOptions);
+            await this.setupApp(
+                this.id,
+                skipUpdate,
+                appImpl,
+                params.options,
+                appParams?.appOptions
+            );
         } else {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
-        this.context.updateManagerRect();
-        if (focus) {
-            this.focusApp();
-        }
+        this.boxManager?.updateManagerRect();
         return {
             appId: this.id,
             app: appImpl,
@@ -133,7 +136,6 @@ export class AppProxy extends Base {
 
     private focusApp() {
         this.focusBox();
-        this.context.switchAppToWriter(this.id);
         this.store.setMainViewFocusPath(this.manager.mainView);
     }
 
@@ -184,6 +186,11 @@ export class AppProxy extends Base {
                 canOperate: this.manager.canOperate,
                 smartPosition: this.isAddApp,
             });
+            if (this.isAddApp && this.box) {
+                this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
+                this.store.setAppFocus(appId, true);
+                this.focusBox();
+            }
         } catch (error: any) {
             console.error(error);
             throw new Error(`[WindowManager]: app setup error: ${error.message}`);
@@ -205,9 +212,6 @@ export class AppProxy extends Base {
 
     private afterSetupApp(boxInitState: AppInitState | undefined): void {
         if (boxInitState) {
-            if (boxInitState.focus && this.scenePath) {
-                this.context.switchAppToWriter(this.id);
-            }
             if (!boxInitState?.x || !boxInitState.y) {
                 this.boxManager?.setBoxInitState(this.id);
             }
@@ -226,29 +230,10 @@ export class AppProxy extends Base {
         await this.destroy(true, false, true);
         const params = this.params;
         const appProxy = new AppProxy(params, this.manager, this.id, this.isAddApp);
-        await appProxy.baseInsertApp(true, this.store.focus === this.id);
+        await appProxy.baseInsertApp(true);
         this.boxManager?.updateBoxState(currentAppState);
     }
 
-    public switchToWritable() {
-        appRegister.notifyApp(this.kind, "focus", { appId: this.id });
-        this.cameraStore.switchView(this.id, this.view, () => {
-            if (this.view) {
-                if (this.view.mode === ViewVisionMode.Writable) return;
-                try {
-                    if (this.manager.mainView.mode === ViewVisionMode.Writable) {
-                        this.store.setMainViewFocusPath(this.manager.mainView);
-                        notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
-                        setViewMode(this.manager.mainView, ViewVisionMode.Freedom);
-                    }
-                    setViewMode(this.view, ViewVisionMode.Writable);
-                } catch (error) {
-                    log("switch view failed", error);
-                }
-            }
-        });
-    }
-
     public getAppInitState = (id: string) => {
         const attrs = this.store.getAppState(id);
         if (!attrs) return;
@@ -337,7 +322,7 @@ export class AppProxy extends Base {
                 }
             });
         });
-        this.manager.refresher?.add(this.stateKey,() => {
+        this.manager.refresher?.add(this.stateKey, () => {
             return autorun(() => {
                 const appState = this.appAttributes?.state;
                 if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
@@ -345,8 +330,20 @@ export class AppProxy extends Base {
                 }
             });
         });
+        this.manager.refresher?.add(`${appId}-fullPath`, () => {
+            return autorun(() => {
+                const fullPath = this.appAttributes?.fullPath;
+                this.setFocusScenePathHandler(fullPath);
+            });
+        });
     };
 
+    private setFocusScenePathHandler = debounce((fullPath: string | undefined) => {
+        if (this.view && fullPath && fullPath !== this.view?.focusScenePath) {
+            setViewFocusScenePath(this.view, fullPath);
+        }
+    }, 50);
+
     public setScenePath(): void {
         if (!this.manager.canOperate) return;
         const fullScenePath = this.getFullScenePath();
@@ -364,7 +361,6 @@ export class AppProxy extends Base {
 
     private async createView(): Promise<View> {
         const view = await this.viewManager.createView(this.id);
-        this.cameraStore.register(this.id, view);
         this.setViewFocusScenePath();
         return view;
     }
@@ -386,14 +382,17 @@ export class AppProxy extends Base {
         }
         if (cleanAttrs) {
             this.store.cleanAppAttributes(this.id);
+            if (this.scenePath) {
+                removeScenes(this.manager.room, this.scenePath);
+            }
         }
         this.appProxies.delete(this.id);
-        this.cameraStore.unregister(this.id, this.view);
 
         this.viewManager.destroyView(this.id);
         this.manager.appStatus.delete(this.id);
         this.manager.refresher?.remove(this.id);
         this.manager.refresher?.remove(this.stateKey);
+        this.manager.refresher?.remove(`${this.id}-fullPath`);
     }
 
     public close(): Promise<void> {

package/src/AttributesDelegate.ts

@@ -123,7 +123,7 @@ export class AttributesDelegate {
         return this.getAppAttributes(id)?.options?.scenePath;
     }
 
-    public getMainViewScenePath() {
+    public getMainViewScenePath(): string | undefined {
         return this.attributes["_mainScenePath"];
     }
 
@@ -159,7 +159,7 @@ export class AttributesDelegate {
         this.context.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
     }
 
-    public setAppFocus(appId: string, focus: boolean) {
+    public setAppFocus = (appId: string, focus: boolean) => {
         if (focus) {
             this.context.safeSetAttributes({ [Fields.Focus]: appId });
         } else {

package/src/BoxManager.ts

@@ -1,12 +1,11 @@
-import { AppAttributes, DEFAULT_COLLECTOR_STYLE, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
-import { debounce, maxBy } from "lodash";
+import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
+import { debounce } from "lodash";
+import { emitter, WindowManager } from "./index";
 import {
-    TELE_BOX_MANAGER_EVENT,
     TELE_BOX_STATE,
     TeleBoxCollector,
     TeleBoxManager,
 } from "@netless/telebox-insider";
-import { WindowManager } from "./index";
 import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
@@ -15,6 +14,7 @@ import type {
     TeleBoxManagerConfig,
     TeleBoxColorScheme,
     TeleBoxRect,
+    TeleBoxConfig,
 } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
@@ -57,6 +57,7 @@ export type BoxManagerContext = {
     canOperate: () => boolean;
     notifyContainerRectUpdate: (rect: TeleBoxRect) => void;
     cleanFocus: () => void;
+    setAppFocus: (appId: string) => void;
 };
 
 export const createBoxManager = (
@@ -74,6 +75,7 @@ export const createBoxManager = (
             notifyContainerRectUpdate: (rect: TeleBoxRect) =>
                 manager.appManager?.notifyContainerRectUpdate(rect),
             cleanFocus: () => manager.appManager?.store.cleanFocus(),
+            setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
         },
@@ -90,17 +92,32 @@ export class BoxManager {
     ) {
         const { emitter, callbacks } = context;
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
-        this.teleBoxManager.events.on(TELE_BOX_MANAGER_EVENT.State, state => {
-            if (state) {
-                this.context.callbacks.emit("boxStateChange", state);
-                this.context.emitter.emit("boxStateChange", state);
-            }
+
+        // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
+        this.teleBoxManager._state$.reaction(state => {
+            callbacks.emit("boxStateChange", state);
+            emitter.emit("boxStateChange", state);
+        });
+
+        this.teleBoxManager._darkMode$.reaction(darkMode => {
+            callbacks.emit("darkModeChange", darkMode);
         });
+        this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+            callbacks.emit("prefersColorSchemeChange", colorScheme);
+        });
+
+        // events.on 的值则会根据 skipUpdate 来决定是否触发回调
         this.teleBoxManager.events.on("minimized", minimized => {
             this.context.safeSetAttributes({ minimized });
             if (minimized) {
                 this.context.cleanFocus();
                 this.blurAllBox();
+            } else {
+                const topBox = this.getTopBox();
+                if (topBox) {
+                    this.context.setAppFocus(topBox.id);
+                    this.focusBox({ appId: topBox.id }, false);
+                }
             }
         });
         this.teleBoxManager.events.on("maximized", maximized => {
@@ -136,17 +153,16 @@ export class BoxManager {
                 }
             }
         });
-        this.teleBoxManager.events.on("dark_mode", darkMode => {
-            callbacks.emit("darkModeChange", darkMode);
-        });
-        this.teleBoxManager.events.on("prefers_color_scheme", colorScheme => {
-            callbacks.emit("prefersColorSchemeChange", colorScheme);
-        });
         this.teleBoxManager.events.on("z_index", box => {
             this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
+        emitter.on("playgroundSizeChange", this.playgroundSizeChangeListener);
     }
 
+    private playgroundSizeChangeListener = () => {
+        this.updateManagerRect();
+    };
+
     private get mainView() {
         return this.context.getMainView();
     }
@@ -251,12 +267,8 @@ export class BoxManager {
     }
 
     public setCollectorContainer(container: HTMLElement) {
-        const styles = {
-            ...DEFAULT_COLLECTOR_STYLE,
-            ...this.createTeleBoxManagerConfig?.collectorStyles,
-        };
         const collector = new TeleBoxCollector({
-            styles
+            styles: this.createTeleBoxManagerConfig?.collectorStyles,
         }).mount(container);
         this.teleBoxManager.setCollector(collector);
     }
@@ -280,8 +292,7 @@ export class BoxManager {
     }
 
     public getTopBox(): ReadonlyTeleBox | undefined {
-        const boxes = this.teleBoxManager.query();
-        return maxBy(boxes, "zIndex");
+        return this.teleBoxManager.topBox;
     }
 
     public updateBoxState(state?: AppInitState): void {
@@ -358,9 +369,9 @@ export class BoxManager {
         this.teleBoxManager.updateAll(config);
     }
 
-    public setMaximized(maximized: boolean) {
+    public setMaximized(maximized: boolean, skipUpdate = true): void {
         if (maximized !== this.maximized) {
-            this.teleBoxManager.setMaximized(maximized, true);
+            this.teleBoxManager.setMaximized(maximized, skipUpdate);
         }
     }
 
@@ -378,6 +389,10 @@ export class BoxManager {
         }
     }
 
+    public updateBox(id: string, payload: TeleBoxConfig, skipUpdate = true): void {
+        this.teleBoxManager.update(id, payload, skipUpdate);
+    }
+
     public setReadonly(readonly: boolean) {
         this.teleBoxManager.setReadonly(readonly);
     }
@@ -391,6 +406,7 @@ export class BoxManager {
     }
 
     public destroy() {
+        emitter.off("playgroundSizeChange", this.playgroundSizeChangeListener);
         this.teleBoxManager.destroy();
     }
 }

package/src/BuiltinApps.ts

@@ -0,0 +1,23 @@
+import AppDocsViewer from "@netless/app-docs-viewer";
+import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
+import { WindowManager } from "./index";
+
+export const setupBuiltin = () => {
+    if (WindowManager.debug) {
+        setOptions({ verbose: true });
+    }
+
+    WindowManager.register({
+        kind: AppDocsViewer.kind,
+        src: AppDocsViewer,
+    });
+    WindowManager.register({
+        kind: AppMediaPlayer.kind,
+        src: AppMediaPlayer,
+    });
+};
+
+export const BuiltinApps = {
+    DocsViewer: AppDocsViewer.kind as string,
+    MediaPlayer: AppMediaPlayer.kind as string,
+};

package/src/ContainerResizeObserver.ts

@@ -0,0 +1,62 @@
+import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
+import { WindowManager } from "./index";
+import type { EmitterType} from "./index";
+
+const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+
+export class ContainerResizeObserver {
+    private containerResizeObserver?: ResizeObserver;
+
+    constructor(private emitter: EmitterType) {}
+
+    public static create(
+        container: HTMLElement,
+        sizer: HTMLElement,
+        wrapper: HTMLDivElement,
+        emitter: EmitterType,
+    ) {
+        const containerResizeObserver = new ContainerResizeObserver(emitter);
+        containerResizeObserver.observePlaygroundSize(container, sizer, wrapper);
+        return containerResizeObserver;
+    }
+
+    public observePlaygroundSize(
+        container: HTMLElement,
+        sizer: HTMLElement,
+        wrapper: HTMLDivElement
+    ) {
+        this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
+
+        this.containerResizeObserver = new ResizeObserver(entries => {
+            const containerRect = entries[0]?.contentRect;
+            if (containerRect) {
+                this.updateSizer(containerRect, sizer, wrapper);
+                this.emitter.emit("playgroundSizeChange", containerRect)
+            }
+        });
+
+        this.containerResizeObserver.observe(container);
+    }
+
+    private updateSizer(
+        { width, height }: DOMRectReadOnly,
+        sizer: HTMLElement,
+        wrapper: HTMLDivElement
+    ) {
+        if (width && height) {
+            if (height / width > WindowManager.containerSizeRatio) {
+                height = width * WindowManager.containerSizeRatio;
+                sizer.classList.toggle("netless-window-manager-sizer-horizontal", true);
+            } else {
+                width = height / WindowManager.containerSizeRatio;
+                sizer.classList.toggle("netless-window-manager-sizer-horizontal", false);
+            }
+            wrapper.style.width = `${width}px`;
+            wrapper.style.height = `${height}px`;
+        }
+    }
+
+    public disconnect() {
+        this.containerResizeObserver?.disconnect();
+    }
+}

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