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

package/src/index.ts

@@ -1,9 +1,8 @@
-import AppDocsViewer from "@netless/app-docs-viewer";
-import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
 import Emittery from "emittery";
 import pRetry from "p-retry";
 import { AppManager } from "./AppManager";
 import { appRegister } from "./Register";
+import { ContainerResizeObserver } from "./ContainerResizeObserver";
 import { createBoxManager } from "./BoxManager";
 import { CursorManager } from "./Cursor";
 import { DEFAULT_CONTAINER_RATIO, Events, REQUIRE_VERSION } from "./constants";
@@ -11,9 +10,10 @@ import { Fields } from "./AttributesDelegate";
 import { initDb } from "./Register/storage";
 import { isNull, isObject } from "lodash";
 import { log } from "./Utils/log";
+import { ReconnectRefresher } from "./ReconnectRefresher";
 import { replaceRoomFunction } from "./Utils/RoomHacker";
-import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
-import { setupWrapper } from "./ViewManager";
+import { setupBuiltin } from "./BuiltinApps";
+import { setupWrapper } from "./Helper";
 import "./style.css";
 import "@netless/telebox-insider/dist/style.css";
 import {
@@ -58,9 +58,6 @@ import type { AppListeners } from "./AppListener";
 import type { NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
 import type { AppProxy } from "./AppProxy";
-import { ReconnectRefresher } from "./ReconnectRefresher";
-
-const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
 export type WindowMangerAttributes = {
     modelValue?: string;
@@ -185,7 +182,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.4.0-canary.4";
+    public version = __APP_VERSION__;
 
     public appListeners?: AppListeners;
 
@@ -199,6 +196,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     private boxManager?: BoxManager;
     private static params?: MountParams;
 
+    private containerResizeObserver?: ContainerResizeObserver;
+
     constructor(context: InvisiblePluginContext) {
         super(context);
         WindowManager.displayer = context.displayer;
@@ -224,9 +223,6 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         }
         let manager = await this.initManager(room);
         this.debug = Boolean(debug);
-        if (this.debug) {
-            setOptions({ verbose: true });
-        }
         log("Already insert room", manager);
 
         if (isRoom(this.displayer)) {
@@ -320,7 +316,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             style.textContent = overwriteStyles;
             playground.appendChild(style);
         }
-        manager.observePlaygroundSize(playground, sizer, wrapper);
+        manager.containerResizeObserver = ContainerResizeObserver.create(
+            playground,
+            sizer,
+            wrapper,
+            emitter
+        );
         WindowManager.wrapper = wrapper;
         return mainViewElement;
     }
@@ -478,10 +479,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
      * 设置所有 app 的 readonly 模式
      */
     public setReadonly(readonly: boolean): void {
-        if (this.room?.isWritable) {
-            this.readonly = readonly;
-            this.appManager?.boxManager?.setReadonly(readonly);
-        }
+        this.readonly = readonly;
+        this.boxManager?.setReadonly(readonly);
     }
 
     /**
@@ -701,62 +700,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
             }
         }
     }
-
-    private containerResizeObserver?: ResizeObserver;
-
-    private 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.cursorManager?.updateContainerRect();
-                this.boxManager?.updateManagerRect();
-                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`;
-        }
-    }
 }
 
-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,
-};
+setupBuiltin();
 
 export * from "./typings";
 
-export { WhiteWindowSDK } from "./sdk";
+export { BuiltinApps } from "./BuiltinApps";

package/src/shim.d.ts

@@ -4,3 +4,7 @@ declare module "*.svelte" {
     const app: SvelteComponent;
     export default app;
 }
+
+declare global {
+    const __APP_VERSION__: string;
+  }

package/src/style.css

@@ -167,3 +167,9 @@
     display: flex;
     justify-content: center;
 }
+
+.telebox-collector {
+    position: absolute;
+    right: 10px;
+    bottom: 15px;
+}

package/src/typings.ts

@@ -76,3 +76,4 @@ export type AppListenerKeys = keyof AppEmitterEvent;
 export type { AppContext } from "./AppContext";
 export type { ReadonlyTeleBox, TeleBoxRect };
 export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room, Player };
+export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";

package/vite.config.js

@@ -1,13 +1,16 @@
 import path from "path";
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { dependencies ,peerDependencies } from "./package.json"
+import { dependencies ,peerDependencies, version } from "./package.json"
 
 
 export default defineConfig(({ mode }) => {
     const isProd = mode === "production";
 
     return {
+        define: {
+            __APP_VERSION__: JSON.stringify(version),
+        },
         plugins: [
             svelte({
                 emitCss: false,

package/dist/Utils/CameraStore.d.ts

@@ -1,15 +0,0 @@
-import type { Camera, View } from "white-web-sdk";
-export declare class CameraStore {
-    private cameras;
-    private listeners;
-    setCamera(id: string, camera: Camera): void;
-    getCamera(id: string): Camera | undefined;
-    deleteCamera(id: string): void;
-    recoverCamera(id: string, view?: View): void;
-    register(id: string, view: View): void;
-    unregister(id: string, view?: View): void;
-    private onListener;
-    private offListener;
-    switchView(id: string, view: View | undefined, callback: () => void): Promise<void>;
-    private getOrCreateListener;
-}

package/dist/ViewManager.d.ts

@@ -1,29 +0,0 @@
-import { Base } from "./Base";
-import type { View, Displayer } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
-export declare class ViewManager extends Base {
-    private views;
-    private timer?;
-    private appTimer?;
-    private mainViewProxy;
-    private displayer;
-    constructor(manager: AppManager);
-    get currentScenePath(): string;
-    get mainView(): View;
-    createView(appId: string): View;
-    destroyView(appId: string): void;
-    private releaseView;
-    getView(appId: string): View | undefined;
-    switchMainViewToWriter(): Promise<boolean> | undefined;
-    freedomAllViews(): void;
-    switchAppToWriter(id: string): void;
-    destroy(): void;
-}
-export declare const createView: (displayer: Displayer) => View;
-export declare const setDefaultCameraBound: (view: View) => void;
-export declare const setupWrapper: (root: HTMLElement) => {
-    playground: HTMLDivElement;
-    wrapper: HTMLDivElement;
-    sizer: HTMLDivElement;
-    mainViewElement: HTMLDivElement;
-};

package/dist/sdk.d.ts

@@ -1,14 +0,0 @@
-import { WindowManager } from './index';
-import type { MountParams } from "./index";
-import type { WhiteWebSdkConfiguration, JoinRoomParams } from "white-web-sdk";
-declare type WhiteWindowSDKConfiguration = Omit<WhiteWebSdkConfiguration, "useMobXState">;
-declare type WindowJoinRoomParams = {
-    joinRoomParams: Omit<JoinRoomParams, "useMultiViews" | "disableMagixEventDispatchLimit">;
-    mountParams: Omit<MountParams, "room">;
-};
-export declare class WhiteWindowSDK {
-    private sdk;
-    constructor(params: WhiteWindowSDKConfiguration);
-    mount(params: WindowJoinRoomParams): Promise<WindowManager>;
-}
-export {};

package/src/Utils/CameraStore.ts

@@ -1,72 +0,0 @@
-import { AnimationMode } from "white-web-sdk";
-import type { Camera, View } from "white-web-sdk";
-
-export class CameraStore {
-    private cameras: Map<string, Camera> = new Map();
-    private listeners: Map<string, any> = new Map();
-
-    public setCamera(id: string, camera: Camera) {
-        this.cameras.set(id, camera);
-    }
-
-    public getCamera(id: string) {
-        return this.cameras.get(id);
-    }
-
-    public deleteCamera(id: string) {
-        this.cameras.delete(id);
-    }
-
-    public recoverCamera(id: string, view?: View) {
-        const camera = this.cameras.get(id);
-        if (camera && view) {
-            view.moveCamera({
-                ...camera,
-                animationMode: AnimationMode.Immediately,
-            });
-        }
-    }
-
-    public register(id: string, view: View) {
-        this.onListener(id, view);
-        this.setCamera(id, view.camera);
-    }
-
-    public unregister(id: string, view?: View) {
-        if (view) {
-            this.offListener(id, view);
-        }
-        this.listeners.delete(id);
-        this.deleteCamera(id);
-    }
-
-    private onListener = (id: string, view: View) => {
-        view.callbacks.on("onCameraUpdated", this.getOrCreateListener(id));
-    };
-
-    private offListener = (id: string, view: View) => {
-        view.callbacks.off("onCameraUpdated", this.getOrCreateListener(id));
-    };
-
-    public async switchView(id: string, view: View | undefined, callback: () => void) {
-        if (view) {
-            this.offListener(id, view);
-            await callback();
-            this.recoverCamera(id, view);
-            this.onListener(id, view);
-        }
-    }
-
-    private getOrCreateListener(id: string) {
-        let listener = this.listeners.get(id);
-        if (listener) {
-            return listener;
-        } else {
-            listener = (camera: Camera) => {
-                this.setCamera(id, camera);
-            };
-            this.listeners.set(id, listener);
-            return listener;
-        }
-    }
-}

package/src/sdk.ts

@@ -1,39 +0,0 @@
-import { isBoolean } from 'lodash';
-import { WhiteWebSdk } from 'white-web-sdk';
-import { WindowManager } from './index';
-import type { MountParams } from "./index";
-import type { WhiteWebSdkConfiguration, JoinRoomParams } from "white-web-sdk";
-
-
-
-type WhiteWindowSDKConfiguration = Omit<WhiteWebSdkConfiguration, "useMobXState">
-type WindowJoinRoomParams = {
-    joinRoomParams: Omit<JoinRoomParams, "useMultiViews" | "disableMagixEventDispatchLimit">,
-    mountParams: Omit<MountParams, "room">,
-}
-
-export class WhiteWindowSDK {
-    private sdk: WhiteWebSdk;
-
-    constructor(params: WhiteWindowSDKConfiguration) {
-        this.sdk = new WhiteWebSdk({ ...params, useMobXState: true });
-    }
-
-    public async mount(params: WindowJoinRoomParams): Promise<WindowManager> {
-        const invisiblePlugins = params.joinRoomParams.invisiblePlugins || [];
-        const room = await this.sdk.joinRoom({
-            ...params.joinRoomParams,
-            useMultiViews: true,
-            invisiblePlugins: [...invisiblePlugins, WindowManager],
-            disableMagixEventDispatchLimit: true,
-        });
-        const manager = await WindowManager.mount({
-            room,
-            ...params.mountParams
-        });
-        if (isBoolean(params.joinRoomParams.disableCameraTransform)) {
-            manager.mainView.disableCameraTransform = params.joinRoomParams.disableCameraTransform;
-        }
-        return manager;
-    }
-}

package/src/viewManager.ts

@@ -1,177 +0,0 @@
-import { Base } from "./Base";
-import { callbacks, WindowManager } from "./index";
-import { reaction, ViewVisionMode } from "white-web-sdk";
-import { SET_SCENEPATH_DELAY } from "./constants";
-import { notifyMainViewModeChange, setScenePath, setViewMode } from "./Utils/Common";
-import type { View, Displayer } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
-
-export class ViewManager extends Base {
-    private views: Map<string, View> = new Map();
-    private timer?: number;
-    private appTimer?: number;
-
-    private mainViewProxy = this.manager.mainViewProxy;
-    private displayer = this.manager.displayer;
-
-    constructor(manager: AppManager) {
-        super(manager);
-        setTimeout(() => {
-            // 延迟初始化 focus 的 reaction
-            this.manager.refresher?.add("focus", () => {
-                return reaction(
-                    () => this.store.focus,
-                    focus => {
-                        if (focus) {
-                            this.switchAppToWriter(focus);
-                        } else {
-                            this.switchMainViewToWriter();
-                            this.context.blurFocusBox();
-                        }
-                    },
-                    { fireImmediately: true }
-                );
-            });
-        }, 100);
-    }
-
-    public get currentScenePath(): string {
-        return this.displayer.state.sceneState.scenePath;
-    }
-
-    public get mainView(): View {
-        return this.mainViewProxy.view;
-    }
-
-    public createView(appId: string): View {
-        const view = createView(this.displayer);
-        setViewMode(view, ViewVisionMode.Freedom);
-        this.views.set(appId, view);
-        return view;
-    }
-
-    public destroyView(appId: string): void {
-        const view = this.views.get(appId);
-        if (view) {
-            this.releaseView(view);
-            this.views.delete(appId);
-        }
-    }
-
-    private releaseView(view: View) {
-        if (!(view as any).didRelease) {
-            view.release();
-        }
-    }
-
-    public getView(appId: string): View | undefined {
-        return this.views.get(appId);
-    }
-
-    public switchMainViewToWriter(): Promise<boolean> | undefined {
-        if (this.timer) {
-            clearTimeout(this.timer);
-        }
-        if (this.mainView.mode === ViewVisionMode.Writable) return;
-        this.freedomAllViews();
-        return new Promise((resolve, reject) => {
-            this.timer = window.setTimeout(() => {
-                try {
-                    const mainViewScenePath = this.store.getMainViewScenePath();
-                    if (mainViewScenePath) {
-                        this.freedomAllViews();
-                        setScenePath(this.manager.room, mainViewScenePath);
-                        this.mainViewProxy.switchViewModeToWriter();
-                    }
-                    resolve(true);
-                } catch (error) {
-                    reject(error);
-                }
-            }, SET_SCENEPATH_DELAY);
-        });
-    }
-
-    public freedomAllViews(): void {
-        this.manager.appProxies.forEach(appProxy => {
-            appProxy.setViewFocusScenePath();
-            if (appProxy.view) {
-                setViewMode(appProxy.view, ViewVisionMode.Freedom);
-            }
-        });
-        if (this.mainView.mode === ViewVisionMode.Writable) {
-            notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
-            setViewMode(this.mainView, ViewVisionMode.Freedom);
-        }
-        if (!this.mainView.focusScenePath) {
-            this.store.setMainViewFocusPath(this.mainView);
-        }
-    }
-
-    public switchAppToWriter(id: string): void {
-        if (this.appTimer) {
-            clearTimeout(this.appTimer);
-        }
-        this.freedomAllViews();
-        // 为了同步端不闪烁, 需要给 room setScenePath 一个延迟
-        this.appTimer = setTimeout(() => {
-            const appProxy = this.manager.appProxies.get(id);
-            if (appProxy) {
-                if (this.manager.boxManager?.minimized) return;
-                appProxy.setScenePath();
-                appProxy.switchToWritable();
-                appProxy.focusBox();
-            }
-        }, SET_SCENEPATH_DELAY);
-    }
-
-    public destroy(): void {
-        this.mainViewProxy.removeMainViewListener();
-        if (WindowManager.wrapper) {
-            WindowManager.wrapper.parentNode?.removeChild(WindowManager.wrapper);
-            WindowManager.wrapper = undefined;
-        }
-        this.releaseView(this.mainView);
-    }
-}
-
-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,
-    });
-};
-
-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 };
-};