@netless/window-manager 0.3.18 → 0.4.0-canary.11

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,
@@ -25,6 +24,7 @@ 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 {
     public id: string;
@@ -36,10 +36,12 @@ 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";
+    private stateKey: string;
+    private appResult?: NetlessApp<any>;
+    private appContext?: AppContext<any, any>;
 
     constructor(
         private params: BaseInsertParams,
@@ -50,6 +52,7 @@ export class AppProxy extends Base {
         super(manager);
         this.kind = params.kind;
         this.id = appId;
+        this.stateKey = `${this.id}_state`;
         this.appProxies.set(this.id, this);
         this.appEmitter = new Emittery();
         this.appListener = this.makeAppEventListener(this.id);
@@ -93,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) {
@@ -117,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,
@@ -128,16 +136,15 @@ export class AppProxy extends Base {
 
     private focusApp() {
         this.focusBox();
-        this.context.switchAppToWriter(this.id);
-        this.store.setMainViewFocusPath();
+        this.store.setMainViewFocusPath(this.manager.mainView);
     }
 
     public get box(): ReadonlyTeleBox | undefined {
-        return this.boxManager.getBox(this.id);
+        return this.boxManager?.getBox(this.id);
     }
 
     public focusBox() {
-        this.boxManager.focusBox({ appId: this.id });
+        this.boxManager?.focusBox({ appId: this.id });
     }
 
     private async setupApp(
@@ -148,13 +155,17 @@ export class AppProxy extends Base {
         appOptions?: any
     ) {
         log("setupApp", appId, app, options);
-        const context = new AppContext(this.manager, appId, this, appOptions);
+        if (!this.boxManager) {
+            throw new BoxManagerNotFoundError();
+        }
+        const context = new AppContext(this.manager, this.boxManager, appId, this, appOptions);
+        this.appContext = context;
         try {
             emitter.once(`${appId}${Events.WindowCreated}` as any).then(async () => {
                 let boxInitState: AppInitState | undefined;
                 if (!skipUpdate) {
                     boxInitState = this.getAppInitState(appId);
-                    this.boxManager.updateBoxState(boxInitState);
+                    this.boxManager?.updateBoxState(boxInitState);
                 }
                 this.appEmitter.onAny(this.appListener);
                 this.appAttributesUpdateListener(appId);
@@ -162,12 +173,13 @@ export class AppProxy extends Base {
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
                     const result = await app.setup(context);
+                    this.appResult = result;
                     appRegister.notifyApp(app.kind, "created", { appId, result });
                     this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
                 }, 50);
             });
-            this.boxManager.createBox({
+            this.boxManager?.createBox({
                 appId: appId,
                 app,
                 options,
@@ -182,9 +194,9 @@ export class AppProxy extends Base {
 
     // 兼容移动端创建时会出现 PPT 不适配的问题
     private fixMobileSize() {
-        const box = this.boxManager.getBox(this.id);
+        const box = this.boxManager?.getBox(this.id);
         if (box) {
-            this.boxManager.resizeBox({
+            this.boxManager?.resizeBox({
                 appId: this.id,
                 width: box.intrinsicWidth + 0.001,
                 height: box.intrinsicHeight + 0.001,
@@ -195,11 +207,8 @@ 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);
+                this.boxManager?.setBoxInitState(this.id);
             }
         }
     }
@@ -207,7 +216,7 @@ export class AppProxy extends Base {
     public onSeek(time: number) {
         this.appEmitter.emit("seek", time);
         const boxInitState = this.getAppInitState(this.id);
-        this.boxManager.updateBoxState(boxInitState);
+        this.boxManager?.updateBoxState(boxInitState);
     }
 
     public async onReconnected() {
@@ -216,27 +225,8 @@ 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);
-        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();
-                        notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
-                        setViewMode(this.manager.mainView, ViewVisionMode.Freedom);
-                    }
-                    setViewMode(this.view, ViewVisionMode.Writable);
-                } catch (error) {
-                    log("switch view failed", error);
-                }
-            }
-        });
+        await appProxy.baseInsertApp(true);
+        this.boxManager?.updateBoxState(currentAppState);
     }
 
     public getAppInitState = (id: string) => {
@@ -278,7 +268,7 @@ export class AppProxy extends Base {
             if (!this.manager.canOperate) return;
             switch (eventName) {
                 case "setBoxSize": {
-                    this.boxManager.resizeBox({
+                    this.boxManager?.resizeBox({
                         appId,
                         width: data.width,
                         height: data.height,
@@ -287,7 +277,7 @@ export class AppProxy extends Base {
                     break;
                 }
                 case "setBoxMinSize": {
-                    this.boxManager.setBoxMinSize({
+                    this.boxManager?.setBoxMinSize({
                         appId,
                         minWidth: data.minwidth,
                         minHeight: data.minheight,
@@ -295,7 +285,7 @@ export class AppProxy extends Base {
                     break;
                 }
                 case "setBoxTitle": {
-                    this.boxManager.setBoxTitle({ appId, title: data.title });
+                    this.boxManager?.setBoxTitle({ appId, title: data.title });
                     break;
                 }
                 case AppEvents.destroy: {
@@ -307,7 +297,7 @@ export class AppProxy extends Base {
                     break;
                 }
                 case "focus": {
-                    this.boxManager.focusBox({ appId: this.id });
+                    this.boxManager?.focusBox({ appId: this.id });
                     emitter.emit("focus", { appId: this.id });
                     break;
                 }
@@ -327,6 +317,14 @@ export class AppProxy extends Base {
                 }
             });
         });
+        this.manager.refresher?.add(this.stateKey,() => {
+            return autorun(() => {
+                const appState = this.appAttributes?.state;
+                if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
+                    this.boxManager?.setZIndex(appId, appState.zIndex);
+                }
+            });
+        });
     };
 
     public setScenePath(): void {
@@ -346,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;
     }
@@ -364,17 +361,17 @@ export class AppProxy extends Base {
         this.appEmitter.clearListeners();
         emitter.emit(`destroy-${this.id}` as any, { error });
         if (needCloseBox) {
-            this.boxManager.closeBox(this.id, skipUpdate);
+            this.boxManager?.closeBox(this.id, skipUpdate);
         }
         if (cleanAttrs) {
             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);
         this.manager.refresher?.remove(this.id);
+        this.manager.refresher?.remove(this.stateKey);
     }
 
     public close(): Promise<void> {

package/src/AttributesDelegate.ts

@@ -2,8 +2,7 @@ import { AppAttributes } from "./constants";
 import { get, pick } from "lodash";
 import { setViewFocusScenePath } from "./Utils/Common";
 import type { AddAppParams, AppSyncAttributes } from "./index";
-import type { Camera, Size } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
+import type { Camera, Size, View } from "white-web-sdk";
 import type { Cursor } from "./Cursor/Cursor";
 
 export enum Fields {
@@ -17,7 +16,7 @@ export enum Fields {
     Cursors = "cursors",
     Position = "position",
     CursorState = "cursorState",
-    FullPath = "fullPath"
+    FullPath = "fullPath",
 }
 
 export type Apps = {
@@ -33,15 +32,29 @@ export type Position = {
 
 export type PositionType = "main" | "app";
 
+export type StoreContext = {
+    getAttributes: () => any;
+    safeUpdateAttributes: (keys: string[], value: any) => void;
+    safeSetAttributes: (attributes: any) => void;
+}
 export class AttributesDelegate {
-    constructor(private manager: AppManager) {}
+
+    constructor(private context: StoreContext) {}
+
+    public setContext(context: StoreContext) {
+        this.context = context;
+    }
+
+    public get attributes() {
+        return this.context.getAttributes();
+    }
 
     public apps(): Apps {
-        return get(this.manager.attributes, [Fields.Apps]);
+        return get(this.attributes, [Fields.Apps]);
     }
 
     public get focus(): string | undefined {
-        return get(this.manager.attributes, [Fields.Focus]);
+        return get(this.attributes, [Fields.Focus]);
     }
 
     public getAppAttributes(id: string): AppSyncAttributes {
@@ -53,13 +66,17 @@ export class AttributesDelegate {
     }
 
     public getMaximized() {
-        return get(this.manager.attributes, ["maximized"])
+        return get(this.attributes, ["maximized"]);
+    }
+
+    public getMinimized() {
+        return get(this.attributes, ["minimized"]);
     }
 
     public setupAppAttributes(params: AddAppParams, id: string, isDynamicPPT: boolean) {
-        const attributes = this.manager.attributes;
+        const attributes = this.attributes;
         if (!attributes.apps) {
-            this.manager.safeSetAttributes({ apps: {} });
+            this.context.safeSetAttributes({ apps: {} });
         }
         const attrNames = ["scenePath", "title"];
         if (!isDynamicPPT) {
@@ -70,32 +87,32 @@ export class AttributesDelegate {
         if (typeof params.src === "string") {
             attrs.src = params.src;
         }
-        this.manager.safeUpdateAttributes([Fields.Apps, id], attrs);
-        this.manager.safeUpdateAttributes([Fields.Apps, id, Fields.State], {
+        attrs.createdAt = Date.now();
+        this.context.safeUpdateAttributes([Fields.Apps, id], attrs);
+        this.context.safeUpdateAttributes([Fields.Apps, id, Fields.State], {
             [AppAttributes.Size]: {},
             [AppAttributes.Position]: {},
             [AppAttributes.SceneIndex]: 0,
-            [AppAttributes.ZIndex]: 100,
         });
     }
 
     public updateAppState(appId: string, stateName: AppAttributes, state: any) {
-        if (get(this.manager.attributes, [Fields.Apps, appId, Fields.State])) {
-            this.manager.safeUpdateAttributes([Fields.Apps, appId, Fields.State, stateName], state);
+        if (get(this.attributes, [Fields.Apps, appId, Fields.State])) {
+            this.context.safeUpdateAttributes([Fields.Apps, appId, Fields.State, stateName], state);
         }
     }
 
     public cleanAppAttributes(id: string) {
-        this.manager.safeUpdateAttributes([Fields.Apps, id], undefined);
-        this.manager.safeSetAttributes({ [id]: undefined });
-        const focus = this.manager.attributes[Fields.Focus];
+        this.context.safeUpdateAttributes([Fields.Apps, id], undefined);
+        this.context.safeSetAttributes({ [id]: undefined });
+        const focus = this.attributes[Fields.Focus];
         if (focus === id) {
             this.cleanFocus();
         }
     }
 
     public cleanFocus() {
-        this.manager.safeSetAttributes({ [Fields.Focus]: undefined });
+        this.context.safeSetAttributes({ [Fields.Focus]: undefined });
     }
 
     public getAppSceneIndex(id: string) {
@@ -107,82 +124,79 @@ export class AttributesDelegate {
     }
 
     public getMainViewScenePath() {
-        return this.manager.attributes["_mainScenePath"];
+        return this.attributes["_mainScenePath"];
     }
 
     public getMainViewSceneIndex() {
-        return this.manager.attributes["_mainSceneIndex"];
+        return this.attributes["_mainSceneIndex"];
     }
 
     public getBoxState() {
-        return this.manager.attributes[Fields.BoxState];
+        return this.attributes[Fields.BoxState];
     }
 
     public setMainViewScenePath(scenePath: string) {
-        this.manager.safeSetAttributes({ _mainScenePath: scenePath });
+        this.context.safeSetAttributes({ _mainScenePath: scenePath });
     }
 
     public setMainViewSceneIndex(index: number) {
-        this.manager.safeSetAttributes({ _mainSceneIndex: index });
+        this.context.safeSetAttributes({ _mainSceneIndex: index });
     }
 
     public getMainViewCamera(): MainViewCamera {
-        return get(this.manager.attributes, [Fields.MainViewCamera]);
+        return get(this.attributes, [Fields.MainViewCamera]);
     }
 
     public getMainViewSize(): MainViewSize {
-        return get(this.manager.attributes, [Fields.MainViewSize]);
+        return get(this.attributes, [Fields.MainViewSize]);
     }
 
-    public setMainViewCamera(camera: Camera & { id: string } | undefined) {
-        this.manager.safeSetAttributes({ [Fields.MainViewCamera]: { ...camera } });
+    public setMainViewCamera(camera: (Camera & { id: string }) | undefined) {
+        this.context.safeSetAttributes({ [Fields.MainViewCamera]: { ...camera } });
     }
 
-    public setMainViewSize(size: Size & { id: string } | undefined) {
-        this.manager.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
+    public setMainViewSize(size: (Size & { id: string }) | undefined) {
+        this.context.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
     }
 
     public setAppFocus(appId: string, focus: boolean) {
         if (focus) {
-            this.manager.safeSetAttributes({ [Fields.Focus]: appId });
+            this.context.safeSetAttributes({ [Fields.Focus]: appId });
         } else {
-            this.manager.safeSetAttributes({ [Fields.Focus]: undefined });
+            this.context.safeSetAttributes({ [Fields.Focus]: undefined });
         }
     }
 
     public updateCursor(uid: string, position: Position) {
-        if (!get(this.manager.attributes, [Fields.Cursors])) {
-            this.manager.safeUpdateAttributes([Fields.Cursors], {});
+        if (!get(this.attributes, [Fields.Cursors])) {
+            this.context.safeUpdateAttributes([Fields.Cursors], {});
         }
-        if (!get(this.manager.attributes, [Fields.Cursors, uid])) {
-            this.manager.safeUpdateAttributes([Fields.Cursors, uid], {});
+        if (!get(this.attributes, [Fields.Cursors, uid])) {
+            this.context.safeUpdateAttributes([Fields.Cursors, uid], {});
         }
-        this.manager.safeUpdateAttributes([Fields.Cursors, uid, Fields.Position], position);
+        this.context.safeUpdateAttributes([Fields.Cursors, uid, Fields.Position], position);
     }
 
     public updateCursorState(uid: string, cursorState: string | undefined) {
-        if (!get(this.manager.attributes, [Fields.Cursors, uid])) {
-            this.manager.safeUpdateAttributes([Fields.Cursors, uid], {});
+        if (!get(this.attributes, [Fields.Cursors, uid])) {
+            this.context.safeUpdateAttributes([Fields.Cursors, uid], {});
         }
-        this.manager.safeUpdateAttributes(
-            [Fields.Cursors, uid, Fields.CursorState],
-            cursorState
-        );
+        this.context.safeUpdateAttributes([Fields.Cursors, uid, Fields.CursorState], cursorState);
     }
 
     public getCursorState(uid: string) {
-        return get(this.manager.attributes, [Fields.Cursors, uid, Fields.CursorState]);
+        return get(this.attributes, [Fields.Cursors, uid, Fields.CursorState]);
     }
 
     public cleanCursor(uid: string) {
-        this.manager.safeUpdateAttributes([Fields.Cursors, uid], undefined);
+        this.context.safeUpdateAttributes([Fields.Cursors, uid], undefined);
     }
 
     // TODO 状态中保存一个 SceneName 优化性能
-    public setMainViewFocusPath() {
+    public setMainViewFocusPath(mainView: View) {
         const scenePath = this.getMainViewScenePath();
         if (scenePath) {
-            setViewFocusScenePath(this.manager.mainView, scenePath);
+            setViewFocusScenePath(mainView, scenePath);
         }
     }
 }
@@ -191,15 +205,28 @@ export type MainViewSize = {
     id: string;
     width: number;
     height: number;
-}
+};
 
 export type MainViewCamera = {
     id: string;
     centerX: number;
     centerY: number;
     scale: number;
-}
+};
 
 export type Cursors = {
     [key: string]: Cursor;
-}
+};
+
+
+export const store = new AttributesDelegate({
+    getAttributes: () => {
+        throw new Error("getAttributes not implemented")
+    },
+    safeSetAttributes: () => {
+        throw new Error("safeSetAttributes not implemented")
+    },
+    safeUpdateAttributes: () => {
+        throw new Error("safeUpdateAttributes not implemented")
+    },
+});

package/src/Base/Context.ts

@@ -27,15 +27,11 @@ export class Context {
     }
 
     public updateManagerRect() {
-        this.manager.boxManager.updateManagerRect();
+        this.manager.boxManager?.updateManagerRect();
     }
 
     public blurFocusBox() {
-        this.manager.boxManager.blurAllBox();
-    }
-
-    public switchAppToWriter(id: string) {
-        this.manager.viewManager.switchAppToWriter(id);
+        this.manager.boxManager?.blurAllBox();
     }
 }
 

package/src/Base/index.ts

@@ -1,9 +1,9 @@
 import type { AppManager } from "../AppManager";
-import { AttributesDelegate } from "../AttributesDelegate";
+import { store } from "../AttributesDelegate";
 import { createContext } from "./Context";
 
 export class Base {
-    public store = new AttributesDelegate(this.manager);
+    public store = store;
     public context = createContext(this.manager);
 
     constructor(public manager: AppManager) {}