@netless/window-manager 0.4.0-canary.1 → 0.4.0-canary.10

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/Cursor/Cursor.ts

@@ -1,7 +1,6 @@
 import App from './Cursor.svelte';
-import pRetry from 'p-retry';
 import { ApplianceMap } from './icons';
-import { ApplianceNames, autorun } from 'white-web-sdk';
+import { ApplianceNames } from 'white-web-sdk';
 import { CursorState } from '../constants';
 import { Fields } from '../AttributesDelegate';
 import { get, omit } from 'lodash';
@@ -19,54 +18,44 @@ export type Payload = {
 
 export class Cursor extends Base {
     private member?: RoomMember;
-    private disposer: any;
     private timer?: number;
     private component?: SvelteComponent;
 
     constructor(
         manager: AppManager,
+        addCursorChangeListener: (uid: string, callback: (position: Position, state: CursorState) => void) => void,
         private cursors: any,
         private memberId: string,
         private cursorManager: CursorManager,
-        private wrapper?: HTMLElement
+        private wrapper?: HTMLElement,
     ) {
         super(manager);
         this.setMember();
         this.createCursor();
-        pRetry(() => {
-            this.disposer && this.disposer();
-            if (!this.cursorPosition) {
-                console.warn(`${memberId} not exist`);
-            }
-            this.startReaction();
-        }, { retries: 3 });
+        addCursorChangeListener(this.memberId, this.onCursorChange);
         this.autoHidden();
     }
 
-    private startReaction() {
-        this.disposer = autorun(() => {
-            const cursor = this.cursorPosition;
-            const state = this.cursorState;
-            if (!cursor) return;
-            if (cursor.type === "main") {
-                const rect = this.cursorManager.wrapperRect;
-                if (this.component && rect) {
-                    this.autoHidden();
-                    this.moveCursor(cursor, rect, this.manager.mainView);
-                }
-            } else {
-                const focusView = this.cursorManager.focusView;
-                const viewRect = focusView?.divElement?.getBoundingClientRect();
-                const viewCamera = focusView?.camera;
-                if (focusView && viewRect && viewCamera && this.component) {
-                    this.autoHidden();
-                    this.moveCursor(cursor, viewRect, focusView);
-                }
+    private onCursorChange = (position: Position, state: CursorState) => {
+        if (position.type === "main") {
+            const rect = this.cursorManager.wrapperRect;
+            if (this.component && rect) {
+                this.autoHidden();
+                this.moveCursor(position, rect, this.manager.mainView);
             }
-            if (state && state === CursorState.Leave) {
-                this.hide();
+        } 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) {
+                this.autoHidden();
+                this.moveCursor(position, viewRect, focusView);
             }
-        });
+        }
+        if (state && state === CursorState.Leave) {
+            this.hide();
+        }
     }
 
     private moveCursor(cursor: Position, rect: DOMRect, view: any) {
@@ -196,10 +185,10 @@ export class Cursor extends Base {
     }
 
     public destroy() {
-        this.disposer && this.disposer();
         if (this.component) {
             this.component.$destroy();
         }
+        this.manager.refresher?.remove(this.memberId);
         this.cursorManager.cursorInstances.delete(this.memberId);
     }
 

package/src/Cursor/index.ts

@@ -1,11 +1,13 @@
-import { Base } from '../Base';
-import { Cursor } from './Cursor';
-import { CursorState } from '../constants';
-import { compact, debounce, uniq } from 'lodash';
-import { Fields } from '../AttributesDelegate';
-import { onObjectInserted } from '../Utils/Reactive';
-import { WindowManager } from '../index';
-import type { PositionType } from "../AttributesDelegate";
+import { autorun } from "white-web-sdk";
+import { Base } from "../Base";
+import { compact, debounce, get, uniq } from "lodash";
+import { Cursor } from "./Cursor";
+import { CursorState } 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 { Point, RoomMember, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 
@@ -18,32 +20,42 @@ export type MoveCursorParams = {
     uid: string;
     x: number;
     y: number;
-}
+};
 export class CursorManager extends Base {
     public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
     private mainViewElement?: HTMLDivElement;
+    private sideEffectManager = new SideEffectManager();
 
     constructor(private appManager: AppManager) {
         super(appManager);
         this.roomMembers = this.appManager.room?.state.roomMembers;
         const wrapper = WindowManager.wrapper;
         if (wrapper) {
-          this.setupWrapper(wrapper);
+            this.setupWrapper(wrapper);
         }
+        emitter.on("onReconnected", () => {
+            this.onReconnect();
+        });
     }
 
     public setupWrapper(wrapper: HTMLElement) {
         if (this.manager.refresher?.hasReactor("cursors")) {
             this.destroy();
         }
-        wrapper.addEventListener("mousemove", this.mouseMoveListener);
-        wrapper.addEventListener("touchstart", this.touchMoveListener);
-        wrapper.addEventListener("touchmove", this.touchMoveListener);
-        wrapper.addEventListener("mouseleave", this.mouseLeaveListener);
-        wrapper.addEventListener("touchend", this.mouseLeaveListener);
+        this.sideEffectManager.add(() => {
+            wrapper.addEventListener("pointerenter", this.mouseMoveListener);
+            wrapper.addEventListener("pointermove", this.mouseMoveListener);
+            wrapper.addEventListener("pointerleave", this.mouseLeaveListener);
+            return () => {
+                wrapper.removeEventListener("pointerenter", this.mouseMoveListener);
+                wrapper.removeEventListener("pointermove", this.mouseMoveListener);
+                wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
+            };
+        });
+
         this.initCursorAttributes();
         this.wrapperRect = wrapper.getBoundingClientRect();
         this.startReaction(wrapper);
@@ -58,27 +70,25 @@ export class CursorManager extends Base {
             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 (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,
@@ -86,7 +96,7 @@ export class CursorManager extends Base {
                     );
                     this.cursorInstances.set(uid, component);
                 }
-            })
+            });
         }
     }, 100);
 
@@ -106,13 +116,6 @@ export class CursorManager extends Base {
         this.updateCursor(this.getType(event), event.clientX, event.clientY);
     }, 5);
 
-    private touchMoveListener = debounce((event: TouchEvent) => {
-        if (event.touches.length === 1) {
-            const touchEvent = event.touches[0];
-            this.updateCursor(this.getType(touchEvent), touchEvent.clientX, touchEvent.clientY);
-        }
-    }, 5);
-
     private updateCursor(event: EventType, clientX: number, clientY: number) {
         if (this.wrapperRect && this.manager.canOperate) {
             const view = event.type === "main" ? this.appManager.mainView : this.focusView;
@@ -128,7 +131,11 @@ export class CursorManager extends Base {
         }
     }
 
-    private getPoint = (view: View | undefined, clientX: number, clientY: number): Point | undefined => {
+    private getPoint = (
+        view: View | undefined,
+        clientX: number,
+        clientY: number
+    ): Point | undefined => {
         const rect = view?.divElement?.getBoundingClientRect();
         if (rect) {
             const point = view?.convertToPointInWorld({
@@ -137,7 +144,7 @@ export class CursorManager extends Base {
             });
             return point;
         }
-    }
+    };
 
     /**
      *  因为窗口内框在不同分辨率下的大小不一样，所以这里通过来鼠标事件的 target 来判断是在主白板还是在 APP 中
@@ -147,7 +154,7 @@ export class CursorManager extends Base {
         const focusApp = this.appManager.focusApp;
         switch (target.parentElement) {
             case this.mainViewElement: {
-                return { type: "main" }; 
+                return { type: "main" };
             }
             case focusApp?.view?.divElement: {
                 return { type: "app" };
@@ -224,19 +231,41 @@ export class CursorManager extends Base {
         });
     }
 
-    public destroy() {
-        const wrapper = WindowManager.wrapper;
-        if (wrapper) {
-            wrapper.removeEventListener("mousemove", this.mouseMoveListener);
-            wrapper.removeEventListener("touchstart", this.touchMoveListener);
-            wrapper.removeEventListener("touchmove", this.touchMoveListener);
-            wrapper.removeEventListener("mouseleave", this.mouseLeaveListener);
-            wrapper.removeEventListener("touchend", this.mouseLeaveListener);
-        }
+    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) {
+            this.cursorInstances.forEach(cursor => {
+                cursor.destroy();
+            });
+            this.cursorInstances.clear();
+        }
         this.manager.refresher?.remove("cursors");
     }
 }

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,11 +1,12 @@
-import { isFunction, debounce } from "lodash";
+import { debounce, isFunction } from "lodash";
 import { log } from "./Utils/log";
 import { RoomPhase } from "white-web-sdk";
 import type { Room } from "white-web-sdk";
+import type { EmitterType } from "./index";
 
 export type ReconnectRefresherContext = {
-    notifyReconnected: () => void;
-}
+    emitter: EmitterType;
+};
 
 // 白板重连之后会刷新所有的对象，导致 listener 失效, 所以这里在重连之后重新对所有对象进行监听
 export class ReconnectRefresher {
@@ -14,12 +15,19 @@ export class ReconnectRefresher {
     private reactors: Map<string, any> = new Map();
     private disposers: Map<string, any> = new Map();
 
-    constructor(room: Room | undefined, private ctx: ReconnectRefresherContext) {
+    constructor(private ctx: ReconnectRefresherContext) {}
+
+    public setRoom(room: Room | undefined) {
         this.room = room;
         this.phase = room?.phase;
+        room?.callbacks.off("onPhaseChanged", this.onPhaseChanged);
         room?.callbacks.on("onPhaseChanged", this.onPhaseChanged);
     }
 
+    public setContext(ctx: ReconnectRefresherContext) {
+        this.ctx = ctx;
+    }
+
     private onPhaseChanged = (phase: RoomPhase) => {
         if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
             this.onReconnected();
@@ -35,7 +43,7 @@ export class ReconnectRefresher {
                 this.disposers.set(id, func());
             }
         });
-        this.ctx.notifyReconnected();
+        this.ctx.emitter.emit("onReconnected", undefined);
     }, 3000);
 
     private releaseDisposers() {