@netless/window-manager 0.4.9 → 0.4.10

package/docs/develop-app.md

@@ -11,28 +11,6 @@ const HelloWorld: NetlessApp = {
     kind: "HelloWorld",
     setup: (context: AppContext) => {
         context.mountView(context.getBox().$content); // 可选: 挂载 View 到 box 上
-
-        const storage = context.createStorage<{ a: number }>("HelloWorld", { a: 1 });
-        console.log(storage.state === { a: 1 });
-
-        storage.addStateChangedListener(diff => {
-            if (diff.a) {
-                console.log(diff.a.oldValue === 1);
-                console.log(diff.a.newValue === 2);
-            }
-        });
-
-        if (context.getIsWritable()) {
-            // 只有在可写状态才可以调用 setState
-            storage.setState({ a: 2 });
-        }
-
-        // magixEvent 事件是房间内范围的, 建议 app 内使用需要添加自己的 prefix
-        context.addMagixEventListener(`${context.appId}_event1`, message => {
-            console.log("MagixEvent", message);
-        });
-
-        context.dispatchMagixEvent(`${context.appId}_event1`, { count: 1 });
     },
 };
 
@@ -48,3 +26,59 @@ manager.addApp({
     },
 });
 ```
+
+## Counter
+
+```ts
+const Counter: NetlessApp<{ count: number }> = {
+    kind: "Counter",
+    setup: (context) => {
+        const storage = context.storage;
+        storage.ensureState({ count: 0 });
+
+        const box = context.getBox(); // box 为这个应用打开的窗口
+        const $content = box.$content // 获取窗口的 content
+
+        const countDom = document.createElement("div");
+        countDom.innerText = storage.state.count.toString();
+        $content.appendChild(countDom);
+
+        // state 变化回调
+        storage.addStateChangedListener(diff => {
+            if (diff.count) {
+                // diff 会给出 newValue 和 oldValue
+                console.log(diff.count.newValue);
+                console.log(diff.count.oldValue);
+                countDom.innerText = diff.count.newValue.toString();
+            }
+        });
+
+        const incButton = document.createElement("button");
+        incButton.innerText = "Inc";
+        const incButtonOnClick = () => {
+            storage.setState({ count: storage.state.count + 1 });
+        }
+        incButton.addEventListener("click", incButtonOnClick);
+        $content.appendChild(incButton);
+
+        const decButton = document.createElement("button");
+        decButton.innerText = "Dec";
+        const decButtonOnClick = () => {
+            storage.setState({ count: storage.state.count - 1 });
+        }
+        decButton.addEventListener("click", decButtonOnClick);
+        $content.appendChild(decButton);
+
+        const event1Disposer = context.addMagixEventListener(`${context.appId}_event1`, msg => {
+            console.log("event1", msg);
+        });
+
+        // 应用销毁时, 注意清理掉监听器
+        context.emitter.on("destroy", () => {
+            incButton.removeEventListener("click", incButtonOnClick);
+            decButton.removeEventListener("click", decButtonOnClick);
+            event1Disposer();
+        });
+    }
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",

package/src/AppManager.ts

@@ -88,31 +88,31 @@ export class AppManager {
 
         emitter.once("onCreated").then(() => this.onCreated());
         emitter.on("onReconnected", () => this.onReconnected());
+
         if (isPlayer(this.displayer)) {
-            emitter.on("seek", time => {
-                this.appProxies.forEach(appProxy => {
-                    appProxy.onSeek(time);
-                });
-                this.attributesUpdateCallback(this.attributes.apps);
-                this.onAppDelete(this.attributes.apps);
-            });
+            emitter.on("seek", this.onPlayerSeek);
         }
-        emitter.on("removeScenes", scenePath => {
-            if (scenePath === ROOT_DIR) {
+
+        emitter.on("removeScenes", this.onRemoveScenes);
+        emitter.on("setReadonly", this.onReadonlyChanged);
+
+        this.createRootDirScenesCallback();
+    }
+
+    private onRemoveScenes = (scenePath: string) => {
+        if (scenePath === ROOT_DIR) {
+            this.setMainViewScenePath(ROOT_DIR);
+            this.createRootDirScenesCallback();
+            this.onRootDirRemoved();
+            emitter.emit("rootDirRemoved");
+            return;
+        }
+        const mainViewScenePath = this.store.getMainViewScenePath();
+        if (this.room && mainViewScenePath) {
+            if (mainViewScenePath === scenePath) {
                 this.setMainViewScenePath(ROOT_DIR);
-                this.createRootDirScenesCallback();
-                this.onRootDirRemoved();
-                emitter.emit("rootDirRemoved");
-                return;
-            }
-            const mainViewScenePath = this.store.getMainViewScenePath();
-            if (this.room && mainViewScenePath) {
-                if (mainViewScenePath === scenePath) {
-                    this.setMainViewScenePath(ROOT_DIR);
-                }
             }
-        });
-        this.createRootDirScenesCallback();
+        }
     }
 
     /**
@@ -129,6 +129,20 @@ export class AppManager {
         this.mainViewProxy.rebind();
     }
 
+    private onReadonlyChanged = () => {
+        this.appProxies.forEach(appProxy => {
+            appProxy.emitAppIsWritableChange();
+        });
+    }
+
+    private onPlayerSeek = (time: number) => {
+        this.appProxies.forEach(appProxy => {
+            appProxy.onSeek(time);
+        });
+        this.attributesUpdateCallback(this.attributes.apps);
+        this.onAppDelete(this.attributes.apps);
+    }
+
     private createRootDirScenesCallback = () => {
         let isRecreate = false;
         if (this.callbacksNode) {

package/src/InternalEmitter.ts

@@ -21,6 +21,7 @@ export type EmitterEvent = {
     updateManagerRect: undefined;
     focusedChange: { focused: string | undefined; prev: string | undefined };
     rootDirRemoved: undefined;
+    setReadonly: boolean;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;

package/src/index.ts

@@ -517,6 +517,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public setReadonly(readonly: boolean): void {
         this.readonly = readonly;
         this.boxManager?.setReadonly(readonly);
+        emitter.emit("setReadonly", readonly);
     }
 
     /**
@@ -864,3 +865,4 @@ setupBuiltin();
 export * from "./typings";
 
 export { BuiltinApps } from "./BuiltinApps";
+export type { PublicEvent } from "./callback";