@netless/window-manager 0.4.7 → 0.4.8-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.7",
+  "version": "0.4.8-canary.0",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -54,7 +54,7 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-styles": "^3.14.1",
     "svelte": "^3.42.4",
-    "typescript": "^4.3.5",
+    "typescript": "^4.5.5",
     "vite": "^2.5.3",
     "white-web-sdk": "2.16.10"
   }

package/src/AppManager.ts

@@ -9,6 +9,8 @@ import { get, isInteger, orderBy } from "lodash";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
+import { RedoUndo } from "./RedoUndo";
+import { SideEffectManager } from "side-effect-manager";
 import { store } from "./AttributesDelegate";
 import { ViewManager } from "./View/ViewManager";
 import {
@@ -21,7 +23,7 @@ import {
 } from "./Utils/Common";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
-import type { Displayer, DisplayerState, Room, ScenesCallbacksNode, View } from "white-web-sdk";
+import type { Displayer, DisplayerState, Room, ScenesCallbacksNode } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect, EmitterEvent } from "./index";
 
 export class AppManager {
@@ -43,6 +45,8 @@ export class AppManager {
     private callbacksNode: ScenesCallbacksNode | null = null;
     private appCreateQueue = new AppCreateQueue();
 
+    private sideEffectManager = new SideEffectManager();
+
     constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
         this.store.setContext({
@@ -50,6 +54,7 @@ export class AppManager {
             safeSetAttributes: attributes => this.safeSetAttributes(attributes),
             safeUpdateAttributes: (keys, val) => this.safeUpdateAttributes(keys, val),
         });
+
         this.mainViewProxy = new MainViewProxy(this);
         this.viewManager = new ViewManager(this.displayer);
         this.appListeners = new AppListeners(this);
@@ -60,6 +65,17 @@ export class AppManager {
         this.refresher.setRoom(this.room);
         this.refresher.setContext({ emitter });
 
+        this.sideEffectManager.add(() => {
+            return () => {
+                this.appCreateQueue.destroy();
+                this.mainViewProxy.destroy();
+                this.refresher?.destroy();
+                this.viewManager.destroy();
+                this.boxManager?.destroy();
+                this.callbacksNode?.dispose();
+            };
+        });
+
         emitter.once("onCreated").then(() => this.onCreated());
         emitter.on("onReconnected", () => this.onReconnected());
         if (isPlayer(this.displayer)) {
@@ -75,6 +91,8 @@ export class AppManager {
             if (scenePath === ROOT_DIR) {
                 this.setMainViewScenePath(ROOT_DIR);
                 this.createRootDirScenesCallback();
+                this.onRootDirRemoved();
+                emitter.emit("rootDirRemoved");
                 return;
             }
             const mainViewScenePath = this.store.getMainViewScenePath();
@@ -87,6 +105,20 @@ export class AppManager {
         this.createRootDirScenesCallback();
     }
 
+    /**
+     * 根目录被删除时所有的 scene 都会被删除.
+     * 所以需要关掉所有开启了 view 的 app
+     */
+    private onRootDirRemoved() {
+        this.appProxies.forEach(appProxy => {
+            if (appProxy.view) {
+                this.closeApp(appProxy.id);
+            }
+        });
+        // 删除了根目录的 scenes 之后 mainview 需要重新绑定, 否则主白板会不能渲染
+        this.mainViewProxy.rebind();
+    }
+
     private createRootDirScenesCallback = () => {
         let isRecreate = false;
         if (this.callbacksNode) {
@@ -109,7 +141,7 @@ export class AppManager {
                 callbacks.emit("mainViewScenesLengthChange", this.callbacksNode.scenes.length);
             }
         }
-    }
+    };
 
     private get eventName() {
         return isRoom(this.displayer) ? "onRoomStateChanged" : "onPlayerStateChanged";
@@ -152,7 +184,7 @@ export class AppManager {
 
     private async onCreated() {
         await this.attributesUpdateCallback(this.attributes.apps);
-        this.boxManager?.updateManagerRect();
+        emitter.emit("updateManagerRect");
         emitter.onAny(this.boxEventListener);
         this.refresher?.add("apps", () => {
             return safeListenPropsUpdated(
@@ -200,10 +232,7 @@ export class AppManager {
                 const focused = get(this.attributes, "focus");
                 if (this._prevFocused !== focused) {
                     callbacks.emit("focusedChange", focused);
-                    this.disposePrevFocusViewRedoUndoListeners(this._prevFocused);
-                    setTimeout(() => {
-                        this.addRedoUndoListeners(focused);
-                    }, 0);
+                    emitter.emit("focusedChange", { focused, prev: this._prevFocused });
                     this._prevFocused = focused;
                     if (focused !== undefined) {
                         this.boxManager?.focusBox({ appId: focused });
@@ -229,59 +258,16 @@ export class AppManager {
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
         this._prevFocused = this.attributes.focus;
-        this.addRedoUndoListeners(this.attributes.focus);
-    }
 
-    private disposePrevFocusViewRedoUndoListeners = (prevFocused: string | undefined) => {
-        if (prevFocused === undefined) {
-            this.mainView.callbacks.off("onCanRedoStepsUpdate", this.onCanRedoStepsUpdate);
-            this.mainView.callbacks.off("onCanUndoStepsUpdate", this.onCanRedoStepsUpdate);
-        } else {
-            const appProxy = this.appProxies.get(prevFocused);
-            if (appProxy) {
-                appProxy.view?.callbacks.off("onCanRedoStepsUpdate", this.onCanRedoStepsUpdate);
-                appProxy.view?.callbacks.off("onCanUndoStepsUpdate", this.onCanUndoStepsUpdate);
-            }
-        }
-    };
-
-    private addRedoUndoListeners = (focused: string | undefined) => {
-        if (focused === undefined) {
-            this.addViewCallbacks(
-                this.mainView,
-                this.onCanRedoStepsUpdate,
-                this.onCanUndoStepsUpdate
-            );
-        } else {
-            const focusApp = this.appProxies.get(focused);
-            if (focusApp && focusApp.view) {
-                this.addViewCallbacks(
-                    focusApp.view,
-                    this.onCanRedoStepsUpdate,
-                    this.onCanUndoStepsUpdate
-                );
-            }
-        }
-    };
-
-    private addViewCallbacks = (
-        view: View,
-        redoListener: (steps: number) => void,
-        undoListener: (steps: number) => void
-    ) => {
-        redoListener(view.canRedoSteps);
-        undoListener(view.canUndoSteps);
-        view.callbacks.on("onCanRedoStepsUpdate", redoListener);
-        view.callbacks.on("onCanUndoStepsUpdate", undoListener);
-    };
-
-    private onCanRedoStepsUpdate = (steps: number) => {
-        callbacks.emit("canRedoStepsChange", steps);
-    };
-
-    private onCanUndoStepsUpdate = (steps: number) => {
-        callbacks.emit("canUndoStepsChange", steps);
-    };
+        this.sideEffectManager.add(() => {
+            const redoUndo = new RedoUndo({
+                mainView: () => this.mainViewProxy.view,
+                focus: () => this.attributes.focus,
+                getAppProxy: id => this.appProxies.get(id),
+            });
+            return () => redoUndo.destroy();
+        });
+    }
 
     /**
      * 插件更新 attributes 时的回调
@@ -637,11 +623,6 @@ export class AppManager {
         });
     }
 
-    public findMemberByUid = (uid: string) => {
-        const roomMembers = this.room?.state.roomMembers;
-        return roomMembers?.find(member => member.payload?.uid === uid);
-    };
-
     public destroy() {
         this.displayer.callbacks.off(this.eventName, this.displayerStateListener);
         this.displayer.callbacks.off("onEnableWriteNowChanged", this.displayerWritableListener);
@@ -653,14 +634,8 @@ export class AppManager {
                 appProxy.destroy(true, false, true);
             });
         }
-        this.viewManager.destroy();
-        this.boxManager?.destroy();
-        this.refresher?.destroy();
-        this.mainViewProxy.destroy();
         callbacks.clearListeners();
-        this.callbacksNode?.dispose();
-        this.appCreateQueue.destroy();
-        this.disposePrevFocusViewRedoUndoListeners(this._prevFocused);
+        this.sideEffectManager.flushAll();
         this._prevFocused = undefined;
         this._prevSceneIndex = undefined;
     }

package/src/AppProxy.ts

@@ -127,7 +127,7 @@ export class AppProxy {
         } else {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
-        this.boxManager?.updateManagerRect();
+        emitter.emit("updateManagerRect")
         return {
             appId: this.id,
             app: appImpl,
@@ -363,8 +363,12 @@ export class AppProxy {
     ) {
         if (this.status === "destroyed") return;
         this.status = "destroyed";
-        await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
-        await this.appEmitter.emit("destroy", { error });
+        try {
+            await appRegister.notifyApp(this.kind, "destroy", { appId: this.id });
+            await this.appEmitter.emit("destroy", { error });
+        } catch (error) {
+            console.error("[WindowManager]: notifyApp error", error.message, error.stack);
+        }
         this.appEmitter.clearListeners();
         emitter.emit(`destroy-${this.id}` as any, { error });
         if (needCloseBox) {

package/src/BoxManager.ts

@@ -1,11 +1,7 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce } from "lodash";
-import { emitter, WindowManager } from "./index";
-import {
-    TELE_BOX_STATE,
-    TeleBoxCollector,
-    TeleBoxManager,
-} from "@netless/telebox-insider";
+import { TELE_BOX_STATE, TeleBoxCollector, TeleBoxManager } from "@netless/telebox-insider";
+import { WindowManager } from "./index";
 import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
@@ -156,13 +152,10 @@ export class BoxManager {
         this.teleBoxManager.events.on("z_index", box => {
             this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
-        emitter.on("playgroundSizeChange", this.playgroundSizeChangeListener);
+        emitter.on("playgroundSizeChange", () => this.updateManagerRect());
+        emitter.on("updateManagerRect", () => this.updateManagerRect());
     }
 
-    private playgroundSizeChangeListener = () => {
-        this.updateManagerRect();
-    };
-
     private get mainView() {
         return this.context.getMainView();
     }
@@ -406,7 +399,6 @@ export class BoxManager {
     }
 
     public destroy() {
-        emitter.off("playgroundSizeChange", this.playgroundSizeChangeListener);
         this.teleBoxManager.destroy();
     }
 }

package/src/Cursor/Cursor.ts

@@ -1,6 +1,7 @@
 import App from "./Cursor.svelte";
 import { ApplianceMap } from "./icons";
 import { ApplianceNames } from "white-web-sdk";
+import { findMemberByUid } from "../Helper";
 import { omit } from "lodash";
 import type { Position } from "../AttributesDelegate";
 import type { RoomMember } from "white-web-sdk";
@@ -164,7 +165,7 @@ export class Cursor {
     }
 
     public updateMember() {
-        this.member = this.manager.findMemberByUid(this.memberId);
+        this.member = findMemberByUid(this.manager.room, this.memberId);
         this.updateComponent();
         return this.member;
     }

package/src/Helper.ts

@@ -3,6 +3,7 @@ import { REQUIRE_VERSION } from "./constants";
 import { WhiteVersion } from "white-web-sdk";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
 import { WindowManager } from "./index";
+import type { Room } from "white-web-sdk";
 
 export const setupWrapper = (
     root: HTMLElement
@@ -39,3 +40,8 @@ export const checkVersion = () => {
         throw new WhiteWebSDKInvalidError(REQUIRE_VERSION);
     }
 };
+
+export const findMemberByUid = (room: Room | undefined, uid: string) => {
+    const roomMembers = room?.state.roomMembers;
+    return roomMembers?.find(member => member.payload?.uid === uid);
+};

package/src/RedoUndo.ts

@@ -0,0 +1,87 @@
+import { callbacks, emitter } from "./index";
+import type { View } from "white-web-sdk";
+import type { AppProxy } from "./AppProxy";
+
+export type RedoUndoContext = {
+    mainView: () => View;
+    focus: () => string | undefined;
+    getAppProxy: (id: string) => AppProxy | undefined;
+};
+
+export class RedoUndo {
+    constructor(private context: RedoUndoContext) {
+        emitter.on("focusedChange", changed => {
+            this.disposePrevFocusViewRedoUndoListeners(changed.prev);
+            setTimeout(() => {
+                this.addRedoUndoListeners(changed.focused);
+            }, 0);
+        });
+        emitter.on("rootDirRemoved", () => {
+            this.disposePrevFocusViewRedoUndoListeners(context.focus());
+            this.addRedoUndoListeners(context.focus());
+        });
+        this.addRedoUndoListeners(context.focus());
+    }
+
+    private addRedoUndoListeners = (focused: string | undefined) => {
+        if (focused === undefined) {
+            this.addViewCallbacks(
+                this.context.mainView(),
+                this.onCanRedoStepsUpdate,
+                this.onCanUndoStepsUpdate
+            );
+        } else {
+            const focusApp = this.context.getAppProxy(focused);
+            if (focusApp && focusApp.view) {
+                this.addViewCallbacks(
+                    focusApp.view,
+                    this.onCanRedoStepsUpdate,
+                    this.onCanUndoStepsUpdate
+                );
+            }
+        }
+    };
+
+    private addViewCallbacks = (
+        view: View,
+        redoListener: (steps: number) => void,
+        undoListener: (steps: number) => void
+    ) => {
+        redoListener(view.canRedoSteps);
+        undoListener(view.canUndoSteps);
+        view.callbacks.on("onCanRedoStepsUpdate", redoListener);
+        view.callbacks.on("onCanUndoStepsUpdate", undoListener);
+    };
+
+    private disposeViewCallbacks = (view: View) => {
+        view.callbacks.off("onCanRedoStepsUpdate", this.onCanRedoStepsUpdate);
+        view.callbacks.off("onCanUndoStepsUpdate", this.onCanUndoStepsUpdate);
+    };
+
+    private onCanRedoStepsUpdate = (steps: number) => {
+        callbacks.emit("canRedoStepsChange", steps);
+    };
+
+    private onCanUndoStepsUpdate = (steps: number) => {
+        callbacks.emit("canUndoStepsChange", steps);
+    };
+
+    private disposePrevFocusViewRedoUndoListeners = (prevFocused: string | undefined) => {
+        let view: View | undefined = undefined;
+        if (prevFocused === undefined) {
+            view = this.context.mainView();
+        } else {
+            const appProxy = this.context.getAppProxy(prevFocused);
+            if (appProxy && appProxy.view) {
+                view = appProxy.view;
+            }
+        }
+        if (view) {
+            this.disposeViewCallbacks(view);
+        }
+    };
+
+    public destroy() {
+        this.disposePrevFocusViewRedoUndoListeners(this.context.focus());
+    }
+}

package/src/View/MainView.ts

@@ -110,6 +110,17 @@ export class MainViewProxy {
         }
     }
 
+    public rebind(): void {
+        const divElement = this.mainView.divElement;
+        const disableCameraTransform = this.mainView.disableCameraTransform;
+        this.stop();
+        this.mainView.release();
+        this.mainView = this.createMainView();
+        this.mainView.disableCameraTransform = disableCameraTransform;
+        this.mainView.divElement = divElement;
+        this.start();
+    }
+
     private onCameraUpdatedByDevice = (camera: Camera) => {
         this.store.setMainViewCamera({ ...camera, id: this.manager.uid });
         if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.manager.uid })) {

package/src/index.ts

@@ -138,6 +138,9 @@ export type EmitterEvent = {
     onReconnected: void;
     removeScenes: string;
     cursorMove: CursorMovePayload;
+    updateManagerRect: undefined;
+    focusedChange: { focused: string | undefined, prev: string | undefined };
+    rootDirRemoved: undefined;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;
@@ -374,7 +377,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
                 }
             }
         }
-        this.boxManager?.updateManagerRect();
+        emitter.emit("updateManagerRect");
         this.appManager?.refresh();
         this.appManager?.resetMaximized();
         this.appManager?.resetMinimized();