@netless/window-manager 0.3.17-canary.1 → 0.4.0-canary.0

package/src/AppProxy.ts

@@ -25,6 +25,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;
@@ -40,6 +41,9 @@ export class AppProxy extends Base {
     private kind: string;
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
+    private stateKey: string;
+    private setupResult?: any;
+    private appContext?: AppContext<any, any>;
 
     constructor(
         private params: BaseInsertParams,
@@ -50,6 +54,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);
@@ -129,15 +134,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 +153,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 +171,13 @@ export class AppProxy extends Base {
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
                     const result = await app.setup(context);
+                    this.setupResult = 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 +192,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,
@@ -199,7 +209,7 @@ export class AppProxy extends Base {
                 this.context.switchAppToWriter(this.id);
             }
             if (!boxInitState?.x || !boxInitState.y) {
-                this.boxManager.setBoxInitState(this.id);
+                this.boxManager?.setBoxInitState(this.id);
             }
         }
     }
@@ -207,7 +217,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() {
@@ -217,7 +227,7 @@ export class AppProxy extends Base {
         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);
+        this.boxManager?.updateBoxState(currentAppState);
     }
 
     public switchToWritable() {
@@ -227,7 +237,7 @@ export class AppProxy extends Base {
                 if (this.view.mode === ViewVisionMode.Writable) return;
                 try {
                     if (this.manager.mainView.mode === ViewVisionMode.Writable) {
-                        this.store.setMainViewFocusPath();
+                        this.store.setMainViewFocusPath(this.manager.mainView);
                         notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
                         setViewMode(this.manager.mainView, ViewVisionMode.Freedom);
                     }
@@ -278,7 +288,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 +297,7 @@ export class AppProxy extends Base {
                     break;
                 }
                 case "setBoxMinSize": {
-                    this.boxManager.setBoxMinSize({
+                    this.boxManager?.setBoxMinSize({
                         appId,
                         minWidth: data.minwidth,
                         minHeight: data.minheight,
@@ -295,7 +305,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 +317,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 +337,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 {
@@ -364,7 +382,7 @@ 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);
@@ -375,6 +393,7 @@ export class AppProxy extends Base {
         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,11 +27,11 @@ export class Context {
     }
 
     public updateManagerRect() {
-        this.manager.boxManager.updateManagerRect();
+        this.manager.boxManager?.updateManagerRect();
     }
 
     public blurFocusBox() {
-        this.manager.boxManager.blurAllBox();
+        this.manager.boxManager?.blurAllBox();
     }
 
     public switchAppToWriter(id: string) {

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) {}