@netless/window-manager 0.4.0-canary.4 → 0.4.0-canary.8

package/src/AppProxy.ts

@@ -2,16 +2,15 @@ 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 { emitter } from "./index";
 import { Fields } from "./AttributesDelegate";
 import { get } from "lodash";
 import { log } from "./Utils/log";
 import {
-    notifyMainViewModeChange,
     setScenePath,
     setViewFocusScenePath,
-    setViewMode,
+    getScenePath
 } from "./Utils/Common";
 import type {
     AppEmitterEvent,
@@ -37,7 +36,6 @@ 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;
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
@@ -98,17 +96,25 @@ 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 }> {
         const params = this.params;
         if (!params.kind) {
@@ -122,9 +128,6 @@ export class AppProxy extends Base {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
         this.context.updateManagerRect();
-        if (focus) {
-            this.focusApp();
-        }
         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);
     }
 
@@ -205,9 +207,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 +225,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;
@@ -364,7 +344,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;
     }
@@ -388,7 +367,6 @@ export class AppProxy extends Base {
             this.store.cleanAppAttributes(this.id);
         }
         this.appProxies.delete(this.id);
-        this.cameraStore.unregister(this.id, this.view);
 
         this.viewManager.destroyView(this.id);
         this.manager.appStatus.delete(this.id);

package/src/Base/Context.ts

@@ -33,10 +33,6 @@ export class Context {
     public blurFocusBox() {
         this.manager.boxManager?.blurAllBox();
     }
-
-    public switchAppToWriter(id: string) {
-        this.manager.viewManager.switchAppToWriter(id);
-    }
 }
 
 let context: Context;

package/src/BoxManager.ts

@@ -1,4 +1,4 @@
-import { AppAttributes, DEFAULT_COLLECTOR_STYLE, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
+import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce, maxBy } from "lodash";
 import {
     TELE_BOX_MANAGER_EVENT,
@@ -6,7 +6,7 @@ import {
     TeleBoxCollector,
     TeleBoxManager,
 } from "@netless/telebox-insider";
-import { WindowManager } from "./index";
+import { emitter, WindowManager } from "./index";
 import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
@@ -145,6 +145,11 @@ export class BoxManager {
         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() {
@@ -251,12 +256,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);
     }
@@ -391,6 +392,7 @@ export class BoxManager {
     }
 
     public destroy() {
+        emitter.off("playgroundSizeChange", this.playgroundSizeChangeListener);
         this.teleBoxManager.destroy();
     }
 }

package/src/BuiltinApps.ts

@@ -0,0 +1,24 @@
+import AppDocsViewer from "@netless/app-docs-viewer";
+import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
+import { WindowManager } from "./index";
+import "@netless/app-docs-viewer/dist/style.css";
+
+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/Helper.ts

@@ -0,0 +1,30 @@
+import { WindowManager } from "./index";
+
+export const setupWrapper = (
+    root: HTMLElement
+): {
+    playground: HTMLDivElement;
+    wrapper: HTMLDivElement;
+    sizer: HTMLDivElement;
+    mainViewElement: HTMLDivElement;
+} => {
+    const playground = document.createElement("div");
+    playground.className = "netless-window-manager-playground";
+
+    const sizer = document.createElement("div");
+    sizer.className = "netless-window-manager-sizer";
+
+    const wrapper = document.createElement("div");
+    wrapper.className = "netless-window-manager-wrapper";
+
+    const mainViewElement = document.createElement("div");
+    mainViewElement.className = "netless-window-manager-main-view";
+
+    playground.appendChild(sizer);
+    sizer.appendChild(wrapper);
+    wrapper.appendChild(mainViewElement);
+    root.appendChild(playground);
+    WindowManager.wrapper = wrapper;
+
+    return { playground, wrapper, sizer, mainViewElement };
+};

package/src/ReconnectRefresher.ts

@@ -1,5 +1,4 @@
 import { debounce, isFunction } from "lodash";
-import { emitter } from "./index";
 import { log } from "./Utils/log";
 import { RoomPhase } from "white-web-sdk";
 import type { Room } from "white-web-sdk";

package/src/Utils/Common.ts

@@ -1,7 +1,7 @@
-import { appRegister } from '../Register';
-import { debounce } from 'lodash';
-import { emitter } from '../index';
-import { v4 } from 'uuid';
+import { appRegister } from "../Register";
+import { debounce } from "lodash";
+import { emitter } from "../index";
+import { v4 } from "uuid";
 import type { PublicEvent } from "../index";
 import type { Displayer, ViewVisionMode, Room, View } from "white-web-sdk";
 import type Emittery from "emittery";
@@ -26,7 +26,21 @@ export const setScenePath = (room: Room | undefined, scenePath: string) => {
             room.setScenePath(scenePath);
         }
     }
-}
+};
+
+export const getScenePath = (
+    room: Room | undefined,
+    dir: string | undefined,
+    index: number
+): string | undefined => {
+    if (room && dir) {
+        const scenes = entireScenes(room);
+        const scene = scenes[dir]?.[index];
+        if (scene) {
+            return `${dir}/${scene.name}`;
+        }
+    }
+};
 
 export const setViewMode = (view: View, mode: ViewVisionMode) => {
     if (!(view as any).didRelease && view.mode !== mode) {
@@ -44,7 +58,7 @@ export const emitError = (error: Error) => {
 
 export const addEmitterOnceListener = (event: any, listener: any) => {
     emitter.once(event).then(listener);
-}
+};
 
 export const notifyMainViewModeChange = debounce(
     (callbacks: Emittery<PublicEvent>, mode: ViewVisionMode) => {
@@ -53,9 +67,10 @@ export const notifyMainViewModeChange = debounce(
     200
 );
 
-export const makeValidScenePath = (displayer: Displayer, scenePath: string) => {
-    const scenes = displayer.entireScenes()[scenePath];
-    const firstSceneName = scenes[0].name;
+export const makeValidScenePath = (displayer: Displayer, scenePath: string, index = 0) => {
+    const scenes = entireScenes(displayer)[scenePath];
+    if (!scenes) return;
+    const firstSceneName = scenes[index].name;
     if (scenePath === "/") {
         return `/${firstSceneName}`;
     } else {
@@ -63,9 +78,13 @@ export const makeValidScenePath = (displayer: Displayer, scenePath: string) => {
     }
 };
 
+export const entireScenes = (displayer: Displayer) => {
+    return displayer.entireScenes();
+};
+
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");
-}
+};
 
 export const ensureValidScenePath = (scenePath: string) => {
     if (scenePath.endsWith("/")) {
@@ -73,11 +92,14 @@ export const ensureValidScenePath = (scenePath: string) => {
     } else {
         return scenePath;
     }
-}
+};
 
 export const getVersionNumber = (version: string) => {
-    const versionString = version.split(".").map(s => s.padStart(2, "0")).join("");
+    const versionString = version
+        .split(".")
+        .map(s => s.padStart(2, "0"))
+        .join("");
     return parseInt(versionString);
 };
 
-export const wait = (time: number) => new Promise((resolve) => setTimeout(resolve, time));
+export const wait = (time: number) => new Promise(resolve => setTimeout(resolve, time));

package/src/Utils/Reactive.ts

@@ -1,5 +1,6 @@
 import { listenUpdated, unlistenUpdated, reaction, UpdateEventKind } from "white-web-sdk";
 import type { AkkoObjectUpdatedProperty , AkkoObjectUpdatedListener } from "white-web-sdk";
+import { isObject } from "lodash";
 
 // 兼容 13 和 14 版本 SDK
 export const onObjectByEvent = (event: UpdateEventKind) => {
@@ -30,7 +31,8 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
 
 export const safeListenPropsUpdated = <T>(
     getProps: () => T,
-    callback: AkkoObjectUpdatedListener<T>
+    callback: AkkoObjectUpdatedListener<T>,
+    onDestroyed?: (props: unknown) => void
   ) => {
     let disposeListenUpdated: (() => void) | null = null;
     const disposeReaction = reaction(
@@ -41,8 +43,12 @@ export const safeListenPropsUpdated = <T>(
           disposeListenUpdated = null;
         }
         const props = getProps();
-        disposeListenUpdated = () => unlistenUpdated(props, callback);
-        listenUpdated(props, callback);
+        if (isObject(props)) {
+          disposeListenUpdated = () => unlistenUpdated(props, callback);
+          listenUpdated(props, callback);
+        } else {
+          onDestroyed?.(props);
+        }
       },
       { fireImmediately: true }
     );

package/src/{MainView.ts → View/MainView.ts}

@@ -1,17 +1,16 @@
-import { AnimationMode, reaction, ViewVisionMode } from "white-web-sdk";
-import { Base } from "./Base";
-import { callbacks, emitter } from "./index";
+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";
-import { Fields } from "./AttributesDelegate";
-import { notifyMainViewModeChange, setViewFocusScenePath, setViewMode } from "./Utils/Common";
+import { Fields } from "../AttributesDelegate";
+import { setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Size, View } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
+import type { AppManager } from "../AppManager";
 
 export class MainViewProxy extends Base {
     private scale?: number;
-    private cameraStore = this.manager.cameraStore;
     private started = false;
     private mainViewIsAddListener = false;
     private mainView: View;
@@ -23,7 +22,6 @@ export class MainViewProxy extends Base {
         super(manager);
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
-        this.cameraStore.register(this.viewId, this.mainView);
         emitter.once("mainViewMounted").then(() => {
             setTimeout(() => {
                 this.start();
@@ -34,7 +32,7 @@ export class MainViewProxy extends Base {
         });
         const playgroundSizeChangeListener = () => {
             this.sizeChangeHandler(this.mainViewSize);
-        }
+        };
         this.sideEffectManager.add(() => {
             emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
             return () => emitter.off("playgroundSizeChange", playgroundSizeChangeListener);
@@ -103,9 +101,6 @@ export class MainViewProxy extends Base {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
-        if (!this.store.focus) {
-            this.switchViewModeToWriter();
-        }
         return mainView;
     }
 
@@ -138,7 +133,6 @@ export class MainViewProxy extends Base {
 
     public async mainViewClickHandler(): Promise<void> {
         if (!this.manager.canOperate) return;
-        if (this.view.mode === ViewVisionMode.Writable) return;
         this.store.cleanFocus();
         this.context.blurFocusBox();
     }
@@ -163,17 +157,6 @@ export class MainViewProxy extends Base {
         callbacks.emit("cameraStateChange", this.cameraState);
     };
 
-    public switchViewModeToWriter(): void {
-        if (!this.manager.canOperate) return;
-        if (this.view) {
-            if (this.view.mode === ViewVisionMode.Writable) return;
-            this.cameraStore.switchView(this.viewId, this.mainView, () => {
-                notifyMainViewModeChange(callbacks, ViewVisionMode.Writable);
-                setViewMode(this.view, ViewVisionMode.Writable);
-            });
-        }
-    }
-
     public moveCameraToContian(size: Size): void {
         if (!isEmpty(size)) {
             this.view.moveCameraToContain({
@@ -210,7 +193,6 @@ export class MainViewProxy extends Base {
 
     public destroy() {
         this.stop();
-        this.cameraStore.unregister(this.viewId, this.mainView);
         this.sideEffectManager.flushAll();
     }
 }

package/src/View/ViewManager.ts

@@ -0,0 +1,53 @@
+import type { View , Displayer} from "white-web-sdk";
+
+export class ViewManager {
+    public views: Map<string, View> = new Map();
+
+    constructor(private displayer: Displayer) {}
+
+    public createView(id: string): View {
+        const view = createView(this.displayer);
+        this.views.set(id, view);
+        return view;
+    }
+
+    public getView(id: string): View | undefined {
+        return this.views.get(id);
+    }
+
+    public destroyView(id: string): void {
+        const view = this.views.get(id);
+        if (view) {
+            view.release();
+            this.views.delete(id);
+        }
+    }
+
+    public setViewScenePath(id: string, scenePath: string): void {
+        const view = this.views.get(id);
+        if (view) {
+            view.focusScenePath = scenePath;
+        }
+    }
+
+    public destroy() {
+        this.views.forEach(view => {
+            view.release();
+        });
+        this.views.clear();
+    }
+}
+
+
+export const createView = (displayer: Displayer): View => {
+    const view = displayer.views.createView();
+    setDefaultCameraBound(view);
+    return view;
+};
+
+export const setDefaultCameraBound = (view: View) => {
+    view.setCameraBound({
+        maxContentMode: () => 10,
+        minContentMode: () => 0.1,
+    });
+};

package/src/constants.ts

@@ -44,6 +44,4 @@ export const MIN_HEIGHT = 340 / 720;
 
 export const SET_SCENEPATH_DELAY = 100; // 设置 scenePath 的延迟事件
 
-export const DEFAULT_COLLECTOR_STYLE = { right: "10px", bottom: "15px", position: "absolute" };
-
 export const DEFAULT_CONTAINER_RATIO = 9 / 16;