@netless/window-manager 0.4.21 → 0.4.24

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.21",
+  "version": "0.4.24",
   "description": "",
-  "main": "dist/index.es.js",
+  "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "repository": "netless-io/window-manager",

package/src/AppListener.ts

@@ -63,6 +63,10 @@ export class AppListeners {
                     this.refreshHandler();
                     break;
                 }
+                case Events.InitMainViewCamera: {
+                    this.initMainViewCameraHandler();
+                    break;
+                }
                 default:
                     break;
             }
@@ -111,4 +115,8 @@ export class AppListeners {
     private refreshHandler = () => {
         this.manager.windowManger._refresh();
     }
+
+    private initMainViewCameraHandler = () => {
+        this.manager.mainViewProxy.addCameraReaction();
+    }
 }

package/src/AppManager.ts

@@ -5,9 +5,9 @@ import { AppProxy } from "./App";
 import { appRegister } from "./Register";
 import { autorun, isPlayer, isRoom, ScenePathType } from "white-web-sdk";
 import { callbacks } from "./callback";
+import { debounce, get, isInteger, orderBy } from "lodash";
 import { emitter } from "./InternalEmitter";
 import { Fields, store } from "./AttributesDelegate";
-import { debounce, get, isInteger, orderBy } from "lodash";
 import { log } from "./Utils/log";
 import { MainViewProxy } from "./View/MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
@@ -132,7 +132,7 @@ export class AppManager {
     public async onRootDirRemoved(needClose = true) {
         this.setMainViewScenePath(INIT_DIR);
         this.createRootDirScenesCallback();
-        
+
         for (const [id, appProxy] of this.appProxies.entries()) {
             if (appProxy.view) {
                 await this.closeApp(id, needClose);
@@ -312,7 +312,7 @@ export class AppManager {
                 }
             );
         });
-    }
+    };
 
     public addAppCloseListener = () => {
         this.refresher?.add("appsClose", () => {
@@ -320,7 +320,7 @@ export class AppManager {
                 this.onAppDelete(this.attributes.apps);
             });
         });
-    }
+    };
 
     private onMainViewIndexChange = (index: number) => {
         if (index !== undefined && this._prevSceneIndex !== index) {
@@ -331,7 +331,7 @@ export class AppManager {
             }
             this._prevSceneIndex = index;
         }
-    }
+    };
 
     private onFocusChange = (focused: string | undefined) => {
         if (this._prevFocused !== focused) {
@@ -349,9 +349,12 @@ export class AppManager {
                 }, 0);
             }
         }
-    }
+    };
 
-    public attributesUpdateCallback = debounce((apps: any) => this._attributesUpdateCallback(apps), 100);
+    public attributesUpdateCallback = debounce(
+        (apps: any) => this._attributesUpdateCallback(apps),
+        100
+    );
 
     /**
      * 插件更新 attributes 时的回调
@@ -582,6 +585,7 @@ export class AppManager {
         } else {
             this.mainView.disableCameraTransform = true;
         }
+        emitter.emit("writableChange", isWritable);
     };
 
     public safeSetAttributes(attributes: any) {
@@ -742,7 +746,7 @@ export class AppManager {
 
     public updateRootDirRemoving = (removing: boolean) => {
         this.rootDirRemoving = removing;
-    }
+    };
 
     public dispatchInternalEvent(event: Events, payload?: any) {
         this.safeDispatchMagixEvent(MagixEventName, {

package/src/AttributesDelegate.ts

@@ -38,6 +38,11 @@ export type StoreContext = {
     safeUpdateAttributes: (keys: string[], value: any) => void;
     safeSetAttributes: (attributes: any) => void;
 }
+
+export type ICamera = Camera & { id: string };
+
+export type ISize = Size & { id: string };
+
 export class AttributesDelegate {
 
     constructor(private context: StoreContext) {}
@@ -152,14 +157,21 @@ export class AttributesDelegate {
         return get(this.attributes, [Fields.MainViewSize]);
     }
 
-    public setMainViewCamera(camera: (Camera & { id: string }) | undefined) {
+    public setMainViewCamera(camera: ICamera) {
         this.context.safeSetAttributes({ [Fields.MainViewCamera]: { ...camera } });
     }
 
-    public setMainViewSize(size: (Size & { id: string }) | undefined) {
+    public setMainViewSize(size: ISize) {
         this.context.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
     }
 
+    public setMainViewCameraAndSize(camera: ICamera, size: ISize) {
+        this.context.safeSetAttributes({
+            [Fields.MainViewCamera]: { ...camera },
+            [Fields.MainViewSize]: { ...size },
+        });
+    }
+
     public setAppFocus = (appId: string, focus: boolean) => {
         if (focus) {
             this.context.safeSetAttributes({ [Fields.Focus]: appId });

package/src/InternalEmitter.ts

@@ -24,6 +24,7 @@ export type EmitterEvent = {
     rootDirRemoved: undefined;
     setReadonly: boolean;
     changePageState: undefined;
+    writableChange: boolean;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/View/MainView.ts

@@ -8,6 +8,7 @@ import { setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
+import { Events } from "../constants";
 
 export class MainViewProxy {
     private scale?: number;
@@ -22,13 +23,10 @@ export class MainViewProxy {
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
         emitter.once("mainViewMounted").then(() => {
-            setTimeout(() => {
-                this.addMainViewListener();
-                this.start();
-                if (!this.mainViewCamera || !this.mainViewSize) {
-                    this.setCameraAndSize();
-                }
-            }, 200); // 等待 mainView 挂载完毕再进行监听，否则会触发不必要的 onSizeUpdated
+            this.addMainViewListener();
+            this.start();
+            this.ensureCameraAndSize();
+            this.startListenWritableChange();
         });
         const playgroundSizeChangeListener = () => {
             this.sizeChangeHandler(this.mainViewSize);
@@ -39,6 +37,23 @@ export class MainViewProxy {
         });
     }
 
+    private startListenWritableChange = () => {
+        this.sideEffectManager.add(() => {
+            return emitter.on("writableChange", isWritable => {
+                if (isWritable) {
+                    this.ensureCameraAndSize();
+                }
+            });
+        });
+    }
+
+    public ensureCameraAndSize() {
+        if (!this.mainViewCamera || !this.mainViewSize) {
+            this.manager.dispatchInternalEvent(Events.InitMainViewCamera);
+            this.setCameraAndSize();
+        }
+    }
+
     private get mainViewCamera() {
         return this.store.getMainViewCamera();
     }
@@ -56,13 +71,18 @@ export class MainViewProxy {
         if (this.started) return;
         this.sizeChangeHandler(this.mainViewSize);
         this.addCameraListener();
-        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
+        this.addCameraReaction();
         this.started = true;
     }
 
+    public addCameraReaction = () => {
+        this.manager.refresher?.add(Fields.MainViewCamera, this.cameraReaction);
+    };
+
     public setCameraAndSize(): void {
-        this.store.setMainViewCamera({ ...this.mainView.camera, id: this.manager.uid });
-        this.store.setMainViewSize({ ...this.mainView.size, id: this.manager.uid });
+        const camera = { ...this.mainView.camera, id: this.manager.uid };
+        const size = { ...this.mainView.size, id: this.manager.uid };
+        this.store.setMainViewCameraAndSize(camera, size);
     }
 
     private cameraReaction = () => {
@@ -74,9 +94,7 @@ export class MainViewProxy {
                     this.moveCamera(camera);
                 }
             },
-            {
-                fireImmediately: true,
-            }
+            { fireImmediately: true }
         );
     };
 

package/src/constants.ts

@@ -15,6 +15,7 @@ export enum Events {
     CursorMove = "CursorMove",
     RootDirRemoved = "RootDirRemoved",
     Refresh = "Refresh",
+    InitMainViewCamera = "InitMainViewCamera",
 }
 
 export const MagixEventName = "__WindowManger";

package/vite.config.js

@@ -26,7 +26,7 @@ export default defineConfig(({ mode }) => {
             lib: {
                 // eslint-disable-next-line no-undef
                 entry: path.resolve(__dirname, "src/index.ts"),
-                formats: ["es", "umd"], // TODO cjs 版本待修复
+                formats: ["es", "umd", "cjs"],
                 name: "WindowManager",
                 fileName: "index"
             },