demo:update modular demo

doric-demo/src/ModularDemo.ts

@@ -1,200 +1,119 @@
-import { Module, Color, Gravity, Group, layoutConfig, LayoutSpec, ModularPanel, Panel, scroller, text, vlayout, modal, hlayout, Text, ClassType, HLayout } from "doric";
+import { Module, Color, Gravity, Group, layoutConfig, LayoutSpec, ModularPanel, Panel, scroller, text, vlayout, modal, hlayout, Text, ClassType, HLayout, View, VLayout, Provider, loge } from "doric";
 import { CounterPage } from "./Counter";
+let moduleId = 0
 
-class Module1 extends Module {
+class ReceivedMessage {
+    received: string[] = []
+}
+
+class SingleModule extends Module {
+    myId = ++moduleId
+
+    name() {
+        return `${this.constructor.name}#${this.myId}`
+    }
+
+    discription() {
+        return "This is a single module."
+    }
+
+    backgroundColor() {
+        return Color.parse("#3498db")
+    }
+
+    contentView!: View
+
+    buildExtraContent(): View[] {
+        return []
+    }
     build(root: Group) {
-        vlayout(
+        this.contentView = vlayout(
             [
                 text({
-                    text: "First Module",
+                    text: this.name(),
                     textColor: Color.WHITE,
+                    textSize: 20,
                     onClick: () => {
-                        this.dispatchMessage("Hello from First Module")
+                        this.dispatchMessage(`Hello from ${this.name()}`)
-                    }
+                        this.provider?.observe(ReceivedMessage)?.update(state => {
-                }),
+                            state?.received.push(this.name())
-                text({
+                            return state
-                    text: "Send",
-                    textColor: Color.WHITE,
-                    onClick: async () => {
-                        const text = await modal(context).prompt({
-                            title: "Send something",
                         })
-                        this.dispatchMessage(text)
+                    }
-                    },
                 }),
+                text({
+                    textSize: 12,
+                    text: this.discription(),
+                    textColor: Color.WHITE,
+                }),
+                ...this.buildExtraContent(),
             ],
             {
                 layoutConfig: {
                     widthSpec: LayoutSpec.MOST,
-                    heightSpec: LayoutSpec.FIT
-                },
-                padding: {
-                    top: 20,
-                    bottom: 20
-                },
-                gravity: Gravity.Center,
-                backgroundColor: Color.parse("#3498db"),
-                space: 20,
-            }
-        ).in(root)
-    }
-}
-
-class Module2 extends Module {
-    contentLabel?: Text
-    build(root: Group) {
-        vlayout(
-            [
-                text({
-                    text: "Second Module",
-                    textColor: Color.WHITE,
-                    onClick: () => {
-                        this.dispatchMessage("Hello from Second Module")
-                    }
-                }),
-                hlayout(
-                    [
-                        text({
-                            text: "Received:",
-                            textColor: Color.WHITE,
-                        }),
-                        this.contentLabel = text({
-                            text: "",
-                            textColor: Color.WHITE,
-                        }),
-                    ],
-                    {
-                        space: 10
-                    })
-            ],
-            {
-                layoutConfig: {
-                    widthSpec: LayoutSpec.MOST,
-                    heightSpec: LayoutSpec.FIT
-                },
-                padding: {
-                    top: 20,
-                    bottom: 20
-                },
-                space: 20,
-                gravity: Gravity.Center,
-                backgroundColor: Color.parse("#f39c12")
-            }
-        ).in(root)
-    }
-
-    onMessage(message: string) {
-        this.contentLabel!.text = message
-    }
-}
-
-class Module3 extends Module {
-    build(root: Group) {
-        vlayout(
-            [
-                text({
-                    text: "Third Module",
-                    textColor: Color.WHITE,
-                    onClick: () => {
-                        this.dispatchMessage("Hello from Third Module")
-                    }
-                }),
-            ],
-            {
-                layoutConfig: {
-                    widthSpec: LayoutSpec.FIT,
                     heightSpec: LayoutSpec.FIT,
                 },
                 padding: {
                     top: 20,
-                    bottom: 20
+                    bottom: 20,
+                    left: 20,
+                    right: 20,
                 },
                 gravity: Gravity.Center,
-                backgroundColor: Color.parse("#2ecc71"),
+                backgroundColor: this.backgroundColor(),
-                space: 20,
+                space: 5,
             }
         ).in(root)
     }
 }
 
-class Module4 extends Module {
+abstract class GroupModule extends ModularPanel {
-    build(root: Group) {
+    myId = ++moduleId
-        vlayout(
+
-            [
+    name() {
-                text({
+        return `${this.constructor.name}#${this.myId}`
-                    text: "Fourth Module",
-                    textColor: Color.WHITE,
-                    onClick: () => {
-                        this.dispatchMessage("Hello from Fourth Module")
-                    }
-                }),
-            ],
-            {
-                layoutConfig: {
-                    widthSpec: LayoutSpec.FIT,
-                    heightSpec: LayoutSpec.FIT
-                },
-                padding: {
-                    top: 20,
-                    bottom: 20
-                },
-                gravity: Gravity.Center,
-                backgroundColor: Color.parse("#e74c3c"),
-                space: 20,
-            }
-        ).in(root)
     }
-}
 
-
+    discription() {
-
+        return "This is a group module."
-class Module5 extends ModularPanel {
-    setupModules() {
-        return [
-            Module3,
-            Module4,
-            Module3,
-            Module4,
-            Module3,
-            Module4,
-        ]
     }
+
+    backgroundColor() {
+        return Color.parse("#f39c12")
+    }
+
+    abstract buildShelf(): [View, Group]
+
     setupShelf(root: Group): Group {
-        const shelf = new HLayout
+        const [content, shelf] = this.buildShelf()
-        shelf.apply({
-            layoutConfig: {
-                widthSpec: LayoutSpec.FIT,
-                heightSpec: LayoutSpec.FIT
-            },
-            space: 10,
-        })
         vlayout(
             [
                 text({
-                    text: "Fifth Module",
+                    text: this.name(),
                     textColor: Color.WHITE,
+                    textSize: 20,
                     onClick: () => {
-                        this.dispatchMessage("Hello from Fifth Module")
+                        this.dispatchMessage(`Hello from ${this.name()}`)
+                        this.provider?.observe(ReceivedMessage)?.update(state => {
+                            state?.received.push(this.name())
+                            return state
+                        })
                     }
                 }),
-                scroller(
+                text({
-                    shelf,
+                    textSize: 12,
-                    {
+                    text: this.discription(),
-                        layoutConfig: {
+                    textColor: Color.WHITE,
-                            widthSpec: LayoutSpec.MOST,
+                }),
-                            heightSpec: LayoutSpec.FIT
+                content
-                        },
-                    })
             ],
             {
                 layoutConfig: {
                     widthSpec: LayoutSpec.MOST,
                     heightSpec: LayoutSpec.FIT
                 },
-                backgroundColor: Color.parse("#9b59b6"),
+                backgroundColor: this.backgroundColor(),
                 padding: {
-                    left: 10,
-                    right: 10,
                     top: 10,
                     bottom: 10,
                 },
@@ -206,13 +125,235 @@ class Module5 extends ModularPanel {
     }
 }
 
+class Receiver extends SingleModule {
+    contentLabel?: Text
+
+    discription() {
+        return "This module recevies message from other modules."
+    }
+
+    buildExtraContent() {
+        return [
+            hlayout(
+                [
+                    text({
+                        text: "Received:",
+                        textColor: Color.WHITE,
+                    }),
+                    this.contentLabel = text({
+                        text: "",
+                        textColor: Color.WHITE,
+                    }),
+                ],
+                {
+                    space: 10
+                })
+        ]
+    }
+
+    onMessage(message: string) {
+        this.contentLabel!.text = message
+    }
+}
+
+
+class ProviderWatcher extends SingleModule {
+    contentLabel?: Text
+
+    discription() {
+        return "This module watches provider."
+    }
+
+    onCreate() {
+        super.onCreate()
+        this.provider?.observe(ReceivedMessage)?.addObserver((ret) => {
+            this.contentLabel!.text = ret?.received?.join("\n")
+        })
+    }
+
+    buildExtraContent() {
+        return [
+            hlayout(
+                [
+                    text({
+                        text: "Clicked:",
+                        textColor: Color.WHITE,
+                    }),
+                    this.contentLabel = text({
+                        text: "",
+                        maxLines: 0,
+                        textColor: Color.WHITE,
+                    }),
+                ],
+                {
+                    space: 10
+                })
+        ]
+    }
+}
+
+
+class InnerSingleModule extends SingleModule {
+    build(root: Group) {
+        super.build(root)
+        this.contentView.apply({
+            layoutConfig: {
+                widthSpec: LayoutSpec.MOST,
+                heightSpec: LayoutSpec.FIT,
+                weight: 1,
+            }
+        })
+    }
+}
+
+class HorizontalModule extends GroupModule {
+    discription() {
+        return "This module is horizontal."
+    }
+    buildShelf(): [View, Group] {
+        const shelf = new HLayout
+        shelf.apply({
+            layoutConfig: {
+                widthSpec: LayoutSpec.MOST,
+                heightSpec: LayoutSpec.FIT
+            },
+            space: 10,
+        })
+        return [
+            shelf,
+            shelf,
+        ]
+    }
+    setupModules() {
+        return [
+            InnerSingleModule,
+            InnerSingleModule,
+        ]
+    }
+}
+
+
+class VerticalModule extends GroupModule {
+    discription() {
+        return "This module is vertical."
+    }
+    backgroundColor() {
+        return Color.parse("#2ecc71")
+    }
+    buildShelf(): [View, Group] {
+        const shelf = new VLayout
+        shelf.apply({
+            layoutConfig: {
+                widthSpec: LayoutSpec.MOST,
+                heightSpec: LayoutSpec.JUST
+            },
+            height: 120,
+            space: 10,
+        })
+        return [
+            shelf,
+            shelf,
+        ]
+    }
+    setupModules() {
+        return [
+            InnerSingleModule,
+            InnerSingleModule,
+        ]
+    }
+}
+
+class ScrollableVerticalModule extends GroupModule {
+    discription() {
+        return "This module is vertical and scrollable."
+    }
+    backgroundColor() {
+        return Color.parse("#2ecc71")
+    }
+    buildShelf(): [View, Group] {
+        const shelf = new VLayout
+        shelf.apply({
+            layoutConfig: {
+                widthSpec: LayoutSpec.MOST,
+                heightSpec: LayoutSpec.FIT
+            },
+            space: 10,
+        })
+        return [
+            scroller(
+                shelf,
+                {
+                    layoutConfig: {
+                        widthSpec: LayoutSpec.MOST,
+                        heightSpec: LayoutSpec.JUST,
+                    },
+                    height: 120,
+                }),
+            shelf,
+        ]
+    }
+    setupModules() {
+        return [
+            SingleModule,
+            SingleModule,
+            SingleModule,
+            SingleModule,
+        ]
+    }
+}
+
+class ScrollableHorizontalModule extends GroupModule {
+    discription() {
+        return "This module is horizontal and scrollable."
+    }
+    buildShelf(): [View, Group] {
+        const shelf = new HLayout
+        shelf.apply({
+            layoutConfig: {
+                widthSpec: LayoutSpec.FIT,
+                heightSpec: LayoutSpec.FIT
+            },
+            space: 10,
+        })
+        return [
+            scroller(
+                shelf,
+                {
+                    layoutConfig: {
+                        widthSpec: LayoutSpec.MOST,
+                        heightSpec: LayoutSpec.FIT
+                    },
+                }),
+            shelf,
+        ]
+    }
+
+    setupModules() {
+        return [
+            SingleModule,
+            SingleModule,
+            SingleModule,
+            SingleModule,
+            SingleModule,
+        ]
+    }
+}
+
+
+
 @Entry
 class ModularDemo extends ModularPanel {
     setupModules() {
+        this.provider = new Provider
+        this.provider.provide(new ReceivedMessage)
         return [
-            Module1,
+            SingleModule,
-            Module2,
+            ProviderWatcher,
-            Module5,
+            Receiver,
+            VerticalModule,
+            HorizontalModule,
+            ScrollableVerticalModule,
+            ScrollableHorizontalModule,
             CounterPage,
         ]
     }

doric-web/dist/index.js

@@ -1723,7 +1723,7 @@ class View {
         this.__dirty_props__ = {};
         this.nativeViewModel = {
             id: this.viewId,
-            type: this.constructor.name,
+            type: this.viewType(),
             props: this.__dirty_props__,
         };
         return new Proxy(this, {
@@ -1801,6 +1801,9 @@ class View {
     get dirtyProps() {
         return this.__dirty_props__;
     }
+    viewType() {
+        return this.constructor.name;
+    }
     onPropertyChanged(propKey, oldV, newV) {
         if (newV instanceof Function) {
             newV = this.callback2Id(newV);
@@ -4364,6 +4367,13 @@ class VMPanel extends Panel {
 }
 
 class Module extends Panel {
+    get provider() {
+        var _a;
+        return this.__provider || ((_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.provider);
+    }
+    set provider(provider) {
+        this.__provider = provider;
+    }
     dispatchMessage(message) {
         var _a;
         (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);