feat: update modular,add mount and unmount action

doric-js/src/pattern/modular.ts

@@ -1,6 +1,7 @@
 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 abstract class Module extends Panel {
@@ -16,15 +17,77 @@ export abstract class Module extends Panel {
         this.__provider = provider
     }
 
+    private unmounted = false
+
+    mount() {
+        if (this.unmounted) {
+            this.unmounted = false
+            this.superPanel?.onStructureChanged(this, true)
+            this.onMounted()
+        }
+    }
+
+    unmount() {
+        if (!this.unmounted) {
+            this.unmounted = true
+            this.superPanel?.onStructureChanged(this, false)
+            this.onUnmounted()
+        }
+    }
+
+    get mounted() {
+        return !this.unmounted
+    }
+
+    /**
+     * Dispatch message to other modules.
+     * @param message which is sent out
+     */
     dispatchMessage(message: any) {
         this.superPanel?.dispatchMessage(message)
     }
 
+    /**
+     * Dispatched messages can be received by override this method.
+     * @param message recevied message
+     */
     onMessage(message: any) { }
+
+    /**
+     * Called when this module is mounted
+     */
+    onMounted() { }
+
+    /**
+     * Called when this module is unmounted
+     */
+    onUnmounted() { }
+}
+
+export abstract class VMModule<M extends Object, V extends ViewHolder> extends Module {
+    private vm?: ViewModel<M, V>
+    private vh?: V
+    abstract getViewModelClass(): ClassType<ViewModel<M, V>>
+
+    abstract getState(): M
+
+    abstract getViewHolderClass(): ClassType<V>
+
+    getViewModel() {
+        return this.vm
+    }
+
+    build(root: Group): void {
+        this.vh = new (this.getViewHolderClass())
+        this.vm = new (this.getViewModelClass())(this.getState(), this.vh)
+        this.vm.context = this.context
+        this.vm.attach(root)
+    }
 }
 
 export abstract class ModularPanel extends Module {
     private modules: Panel[]
+    private scheduledRebuild?: NodeJS.Timeout
 
     constructor() {
         super()
@@ -49,18 +112,35 @@ export abstract class ModularPanel extends Module {
         }
     }
 
+    get mountedModules() {
+        return this.modules.filter(e => !(e instanceof Module) || e.mounted)
+    }
+
     onMessage(message: any) {
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             if (e instanceof Module) {
                 e.onMessage(message)
             }
         })
     }
 
+    onStructureChanged(module: Module, mounted: boolean) {
+        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: Group) {
         const groupView = this.setupShelf(root)
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             Reflect.set(e, "__root__", groupView)
             e.build(groupView)
         })
@@ -68,7 +148,7 @@ export abstract class ModularPanel extends Module {
 
     onCreate() {
         super.onCreate()
-        this.modules.forEach(e => {
+        this.mountedModules.forEach(e => {
             e.context = this.context
             e.onCreate()
         })
@@ -76,28 +156,28 @@ export abstract class ModularPanel extends Module {
 
     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()
         })
     }