feat: update modular,add mount and unmount action

doric-js/lib/src/pattern/modular.d.ts

@@ -1,22 +1,55 @@
 import { Panel } from "../ui/panel";
 import { Group } from "../ui/view";
 import { ClassType } from "../util/types";
+import { ViewHolder, ViewModel } from "./mvvm";
 import { Provider } from "./provider";
 export declare abstract class Module extends Panel {
     superPanel?: ModularPanel;
     __provider?: Provider;
     get provider(): Provider | undefined;
     set provider(provider: Provider | undefined);
+    private unmounted;
+    mount(): void;
+    unmount(): void;
+    get mounted(): boolean;
+    /**
+     * Dispatch message to other modules.
+     * @param message which is sent out
+     */
     dispatchMessage(message: any): void;
+    /**
+     * Dispatched messages can be received by override this method.
+     * @param message recevied message
+     */
     onMessage(message: any): void;
+    /**
+     * Called when this module is mounted
+     */
+    onMounted(): void;
+    /**
+     * Called when this module is unmounted
+     */
+    onUnmounted(): void;
+}
+export declare abstract class VMModule<M extends Object, V extends ViewHolder> extends Module {
+    private vm?;
+    private vh?;
+    abstract getViewModelClass(): ClassType<ViewModel<M, V>>;
+    abstract getState(): M;
+    abstract getViewHolderClass(): ClassType<V>;
+    getViewModel(): ViewModel<M, V> | undefined;
+    build(root: Group): void;
 }
 export declare abstract class ModularPanel extends Module {
     private modules;
+    private scheduledRebuild?;
     constructor();
     abstract setupModules(): ClassType<Panel>[];
     abstract setupShelf(root: Group): Group;
     dispatchMessage(message: any): void;
+    get mountedModules(): Panel[];
     onMessage(message: any): void;
+    onStructureChanged(module: Module, mounted: boolean): void;
     build(root: Group): void;
     onCreate(): void;
     onDestroy(): void;

doric-js/lib/src/pattern/modular.js

@@ -1,5 +1,9 @@
 import { Panel } from "../ui/panel";
 export class Module extends Panel {
+    constructor() {
+        super(...arguments);
+        this.unmounted = false;
+    }
     get provider() {
         var _a;
         return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
@@ -7,11 +11,57 @@ export class Module extends Panel {
     set provider(provider) {
         this.__provider = provider;
     }
+    mount() {
+        var _a;
+        if (this.unmounted) {
+            this.unmounted = false;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, true);
+            this.onMounted();
+        }
+    }
+    unmount() {
+        var _a;
+        if (!this.unmounted) {
+            this.unmounted = true;
+            (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.onStructureChanged(this, false);
+            this.onUnmounted();
+        }
+    }
+    get mounted() {
+        return !this.unmounted;
+    }
+    /**
+     * Dispatch message to other modules.
+     * @param message which is sent out
+     */
     dispatchMessage(message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
     }
+    /**
+     * Dispatched messages can be received by override this method.
+     * @param message recevied message
+     */
     onMessage(message) { }
+    /**
+     * Called when this module is mounted
+     */
+    onMounted() { }
+    /**
+     * Called when this module is unmounted
+     */
+    onUnmounted() { }
+}
+export class VMModule extends Module {
+    getViewModel() {
+        return this.vm;
+    }
+    build(root) {
+        this.vh = new (this.getViewHolderClass());
+        this.vm = new (this.getViewModelClass())(this.getState(), this.vh);
+        this.vm.context = this.context;
+        this.vm.attach(root);
+    }
 }
 export class ModularPanel extends Module {
     constructor() {
@@ -32,48 +82,65 @@ export class ModularPanel extends Module {
             this.onMessage(message);
         }
     }
+    get mountedModules() {
+        return this.modules.filter(e => !(e instanceof Module) || e.mounted);
+    }
     onMessage(message) {
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             if (e instanceof Module) {
                 e.onMessage(message);
             }
         });
     }
+    onStructureChanged(module, mounted) {
+        if (this.superPanel) {
+            this.superPanel.onStructureChanged(module, mounted);
+        }
+        else {
+            if (!!!this.scheduledRebuild) {
+                this.scheduledRebuild = setTimeout(() => {
+                    this.scheduledRebuild = undefined;
+                    this.getRootView().children.length = 0;
+                    this.build(this.getRootView());
+                }, 0);
+            }
+        }
+    }
     build(root) {
         const groupView = this.setupShelf(root);
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             Reflect.set(e, "__root__", groupView);
             e.build(groupView);
         });
     }
     onCreate() {
         super.onCreate();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.context = this.context;
             e.onCreate();
         });
     }
     onDestroy() {
         super.onDestroy();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onDestroy();
         });
     }
     onShow() {
         super.onShow();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onShow();
         });
     }
     onHidden() {
         super.onHidden();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onHidden();
         });
     }
     onRenderFinished() {
         super.onRenderFinished();
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.onRenderFinished();
         });
     }