feat: ModularPanel add message channel

doric-demo/src/ModularDemo.ts

@@ -1,13 +1,26 @@
-import { Color, Gravity, Group, layoutConfig, LayoutSpec, ModularPanel, Panel, scroller, text, vlayout } from "doric";
+import { Module, Color, Gravity, Group, layoutConfig, LayoutSpec, ModularPanel, Panel, scroller, text, vlayout, modal, hlayout, Text, ClassType, HLayout } from "doric";
 import { CounterPage } from "./Counter";
 
-class Module1 extends Panel {
+class Module1 extends Module {
     build(root: Group) {
         vlayout(
             [
                 text({
                     text: "First Module",
                     textColor: Color.WHITE,
+                    onClick: () => {
+                        this.dispatchMessage("Hello from First Module")
+                    }
+                }),
+                text({
+                    text: "Send",
+                    textColor: Color.WHITE,
+                    onClick: async () => {
+                        const text = await modal(context).prompt({
+                            title: "Send something",
+                        })
+                        this.dispatchMessage(text)
+                    },
                 }),
             ],
             {
@@ -20,20 +33,39 @@ class Module1 extends Panel {
                     bottom: 20
                 },
                 gravity: Gravity.Center,
-                backgroundColor: Color.parse("#3498db")
+                backgroundColor: Color.parse("#3498db"),
+                space: 20,
             }
         ).in(root)
     }
 }
 
-class Module2 extends Panel {
+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: {
@@ -44,11 +76,134 @@ class Module2 extends Panel {
                     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
+                },
+                gravity: Gravity.Center,
+                backgroundColor: Color.parse("#2ecc71"),
+                space: 20,
+            }
+        ).in(root)
+    }
+}
+
+class Module4 extends Module {
+    build(root: Group) {
+        vlayout(
+            [
+                text({
+                    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)
+    }
+}
+
+
+
+class Module5 extends ModularPanel {
+    setupModules() {
+        return [
+            Module3,
+            Module4,
+            Module3,
+            Module4,
+            Module3,
+            Module4,
+        ]
+    }
+    setupShelf(root: Group): Group {
+        const shelf = new HLayout
+        shelf.apply({
+            layoutConfig: {
+                widthSpec: LayoutSpec.FIT,
+                heightSpec: LayoutSpec.FIT
+            },
+            space: 10,
+        })
+        vlayout(
+            [
+                text({
+                    text: "Fifth Module",
+                    textColor: Color.WHITE,
+                    onClick: () => {
+                        this.dispatchMessage("Hello from Fifth Module")
+                    }
+                }),
+                scroller(
+                    shelf,
+                    {
+                        layoutConfig: {
+                            widthSpec: LayoutSpec.MOST,
+                            heightSpec: LayoutSpec.FIT
+                        },
+                    })
+            ],
+            {
+                layoutConfig: {
+                    widthSpec: LayoutSpec.MOST,
+                    heightSpec: LayoutSpec.FIT
+                },
+                backgroundColor: Color.parse("#9b59b6"),
+                padding: {
+                    left: 10,
+                    right: 10,
+                    top: 10,
+                    bottom: 10,
+                },
+                space: 10,
+                gravity: Gravity.Center,
+            }
+        ).in(root)
+        return shelf
+    }
 }
 
 @Entry
@@ -57,6 +212,7 @@ class ModularDemo extends ModularPanel {
         return [
             Module1,
             Module2,
+            Module5,
             CounterPage,
         ]
     }
@@ -67,7 +223,8 @@ class ModularDemo extends ModularPanel {
                 layoutConfig: {
                     widthSpec: LayoutSpec.MOST,
                     heightSpec: LayoutSpec.FIT
-                }
+                },
+                space: 10,
             }
         )
         scroller(

doric-js/bundle/doric-lib.es5.js

@@ -3620,13 +3620,46 @@ var __extends = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var Module = /** @class */ (function (_super) {
+    __extends(Module, _super);
+    function Module() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Module.prototype.dispatchMessage = function (message) {
+        var _a;
+        (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
+    };
+    Module.prototype.onMessage = function (message) { };
+    return Module;
+}(Panel));
 var ModularPanel = /** @class */ (function (_super) {
     __extends(ModularPanel, _super);
     function ModularPanel() {
         var _this = _super.call(this) || this;
-        _this.modules = _this.setupModules().map(function (e) { return new e; });
+        _this.modules = _this.setupModules().map(function (e) {
+            var instance = new e;
+            if (instance instanceof Module) {
+                instance.superPanel = _this;
+            }
+            return instance;
+        });
         return _this;
     }
+    ModularPanel.prototype.dispatchMessage = function (message) {
+        if (this.superPanel) {
+            this.superPanel.dispatchMessage(message);
+        }
+        else {
+            this.onMessage(message);
+        }
+    };
+    ModularPanel.prototype.onMessage = function (message) {
+        this.modules.forEach(function (e) {
+            if (e instanceof Module) {
+                e.onMessage(message);
+            }
+        });
+    };
     ModularPanel.prototype.build = function (root) {
         var groupView = this.setupShelf(root);
         this.modules.forEach(function (e) {
@@ -3667,7 +3700,7 @@ var ModularPanel = /** @class */ (function (_super) {
         });
     };
     return ModularPanel;
-}(Panel));
+}(Module));
 
 exports.AnimationSet = AnimationSet;
 exports.BOTTOM = BOTTOM;
@@ -3691,6 +3724,7 @@ exports.LayoutConfigImpl = LayoutConfigImpl;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.ModularPanel = ModularPanel;
+exports.Module = Module;
 exports.Mutable = Mutable;
 exports.NativeCall = NativeCall;
 exports.NestedSlider = NestedSlider;

doric-js/bundle/doric-lib.js

@@ -2788,10 +2788,38 @@ class VMPanel extends Panel {
     }
 }
 
-class ModularPanel extends Panel {
+class Module extends Panel {
+    dispatchMessage(message) {
+        var _a;
+        (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
+    }
+    onMessage(message) { }
+}
+class ModularPanel extends Module {
     constructor() {
         super();
-        this.modules = this.setupModules().map(e => new e);
+        this.modules = this.setupModules().map(e => {
+            const instance = new e;
+            if (instance instanceof Module) {
+                instance.superPanel = this;
+            }
+            return instance;
+        });
+    }
+    dispatchMessage(message) {
+        if (this.superPanel) {
+            this.superPanel.dispatchMessage(message);
+        }
+        else {
+            this.onMessage(message);
+        }
+    }
+    onMessage(message) {
+        this.modules.forEach(e => {
+            if (e instanceof Module) {
+                e.onMessage(message);
+            }
+        });
     }
     build(root) {
         const groupView = this.setupShelf(root);
@@ -2855,6 +2883,7 @@ exports.LayoutConfigImpl = LayoutConfigImpl;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.ModularPanel = ModularPanel;
+exports.Module = Module;
 exports.Mutable = Mutable;
 exports.NativeCall = NativeCall;
 exports.NestedSlider = NestedSlider;

doric-js/bundle/doric-vm.js

@@ -4309,10 +4309,38 @@ class VMPanel extends Panel {
     }
 }
 
-class ModularPanel extends Panel {
+class Module extends Panel {
+    dispatchMessage(message) {
+        var _a;
+        (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
+    }
+    onMessage(message) { }
+}
+class ModularPanel extends Module {
     constructor() {
         super();
-        this.modules = this.setupModules().map(e => new e);
+        this.modules = this.setupModules().map(e => {
+            const instance = new e;
+            if (instance instanceof Module) {
+                instance.superPanel = this;
+            }
+            return instance;
+        });
+    }
+    dispatchMessage(message) {
+        if (this.superPanel) {
+            this.superPanel.dispatchMessage(message);
+        }
+        else {
+            this.onMessage(message);
+        }
+    }
+    onMessage(message) {
+        this.modules.forEach(e => {
+            if (e instanceof Module) {
+                e.onMessage(message);
+            }
+        });
     }
     build(root) {
         const groupView = this.setupShelf(root);
@@ -4617,6 +4645,7 @@ exports.LayoutConfigImpl = LayoutConfigImpl;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.ModularPanel = ModularPanel;
+exports.Module = Module;
 exports.Mutable = Mutable;
 exports.NativeCall = NativeCall;
 exports.NestedSlider = NestedSlider;

doric-js/index.d.ts

@@ -1415,10 +1415,17 @@ declare module 'doric/lib/src/pattern/modular' {
     import { Panel } from "doric/lib/src/ui/panel";
     import { Group } from "doric/lib/src/ui/view";
     import { ClassType } from "doric/lib/src/util/types";
-    export abstract class ModularPanel extends Panel {
+    export abstract class Module extends Panel {
+        superPanel?: ModularPanel;
+        dispatchMessage(message: any): void;
+        onMessage(message: any): void;
+    }
+    export abstract class ModularPanel extends Module {
         constructor();
         abstract setupModules(): ClassType<Panel>[];
         abstract setupShelf(root: Group): Group;
+        dispatchMessage(message: any): void;
+        onMessage(message: any): void;
         build(root: Group): void;
         onCreate(): void;
         onDestroy(): void;

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

@@ -1,11 +1,18 @@
 import { Panel } from "../ui/panel";
 import { Group } from "../ui/view";
 import { ClassType } from "../util/types";
-export declare abstract class ModularPanel extends Panel {
+export declare abstract class Module extends Panel {
+    superPanel?: ModularPanel;
+    dispatchMessage(message: any): void;
+    onMessage(message: any): void;
+}
+export declare abstract class ModularPanel extends Module {
     private modules;
     constructor();
     abstract setupModules(): ClassType<Panel>[];
     abstract setupShelf(root: Group): Group;
+    dispatchMessage(message: any): void;
+    onMessage(message: any): void;
     build(root: Group): void;
     onCreate(): void;
     onDestroy(): void;

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

@@ -1,8 +1,36 @@
 import { Panel } from "../ui/panel";
-export class ModularPanel extends Panel {
+export class Module extends Panel {
+    dispatchMessage(message) {
+        var _a;
+        (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
+    }
+    onMessage(message) { }
+}
+export class ModularPanel extends Module {
     constructor() {
         super();
-        this.modules = this.setupModules().map(e => new e);
+        this.modules = this.setupModules().map(e => {
+            const instance = new e;
+            if (instance instanceof Module) {
+                instance.superPanel = this;
+            }
+            return instance;
+        });
+    }
+    dispatchMessage(message) {
+        if (this.superPanel) {
+            this.superPanel.dispatchMessage(message);
+        }
+        else {
+            this.onMessage(message);
+        }
+    }
+    onMessage(message) {
+        this.modules.forEach(e => {
+            if (e instanceof Module) {
+                e.onMessage(message);
+            }
+        });
     }
     build(root) {
         const groupView = this.setupShelf(root);

doric-js/src/pattern/modular.ts

@@ -2,16 +2,51 @@ import { Panel } from "../ui/panel"
 import { Group } from "../ui/view"
 import { ClassType } from "../util/types"
 
-export abstract class ModularPanel extends Panel {
+export abstract class Module extends Panel {
+    superPanel?: ModularPanel
+
+    dispatchMessage(message: any) {
+        this.superPanel?.dispatchMessage(message)
+    }
+
+    onMessage(message: any) { }
+}
+
+export abstract class ModularPanel extends Module {
     private modules: Panel[]
+
     constructor() {
         super()
-        this.modules = this.setupModules().map(e => new e)
+        this.modules = this.setupModules().map(e => {
+            const instance = new e
+            if (instance instanceof Module) {
+                instance.superPanel = this
+            }
+            return instance
+        })
     }
 
     abstract setupModules(): ClassType<Panel>[]
+
     abstract setupShelf(root: Group): Group
 
+    dispatchMessage(message: any) {
+        if (this.superPanel) {
+            this.superPanel.dispatchMessage(message)
+        } else {
+            this.onMessage(message)
+        }
+    }
+
+    onMessage(message: any) {
+        this.modules.forEach(e => {
+            if (e instanceof Module) {
+                e.onMessage(message)
+            }
+        })
+    }
+
+
     build(root: Group) {
         const groupView = this.setupShelf(root)
         this.modules.forEach(e => {

doric-web/dist/index.js

@@ -4363,10 +4363,38 @@ class VMPanel extends Panel {
     }
 }
 
-class ModularPanel extends Panel {
+class Module extends Panel {
+    dispatchMessage(message) {
+        var _a;
+        (_a = this.superPanel) === null || _a === void 0 ? void 0 : _a.dispatchMessage(message);
+    }
+    onMessage(message) { }
+}
+class ModularPanel extends Module {
     constructor() {
         super();
-        this.modules = this.setupModules().map(e => new e);
+        this.modules = this.setupModules().map(e => {
+            const instance = new e;
+            if (instance instanceof Module) {
+                instance.superPanel = this;
+            }
+            return instance;
+        });
+    }
+    dispatchMessage(message) {
+        if (this.superPanel) {
+            this.superPanel.dispatchMessage(message);
+        }
+        else {
+            this.onMessage(message);
+        }
+    }
+    onMessage(message) {
+        this.modules.forEach(e => {
+            if (e instanceof Module) {
+                e.onMessage(message);
+            }
+        });
     }
     build(root) {
         const groupView = this.setupShelf(root);
@@ -4430,6 +4458,7 @@ exports.LayoutConfigImpl = LayoutConfigImpl;
 exports.List = List;
 exports.ListItem = ListItem;
 exports.ModularPanel = ModularPanel;
+exports.Module = Module;
 exports.Mutable = Mutable;
 exports.NativeCall = NativeCall;
 exports.NestedSlider = NestedSlider;