tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: ModularPanel add message channel

Browse Source
This commit is contained in:
pengfei.zhou 2021-05-13 16:57:21 +08:00 committed by osborn
parent 546af79534
commit eb7fc6c137
10 changed files with 375 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
doric-demo/src/ModularDemo.ts
View File

@ -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(

38
doric-js/bundle/doric-lib.es5.js
View File

@ -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;

33
doric-js/bundle/doric-lib.js
View File

@ -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;

33
doric-js/bundle/doric-vm.js
View File

@ -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;

9
doric-js/index.d.ts vendored
View File

@ -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;

9
doric-js/lib/src/pattern/modular.d.ts vendored
View File

@ -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;

32
doric-js/lib/src/pattern/modular.js
View File

@ -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);

39
doric-js/src/pattern/modular.ts
View File

@ -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 => {

33
doric-web/dist/index.js vendored
View File

@ -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;

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long