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

demo:update modular demo

Browse Source
This commit is contained in:
pengfei.zhou 2021-05-14 13:15:33 +08:00 committed by osborn
parent 67f3f354af
commit b6bfb210e1
3 changed files with 311 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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")
}
}),
text({
text: "Send",
textColor: Color.WHITE,
onClick: async () => {
const text = await modal(context).prompt({
title: "Send something",
this.dispatchMessage(`Hello from ${this.name()}`)
this.provider?.observe(ReceivedMessage)?.update(state => {
state?.received.push(this.name())
return state
})
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"),
space: 20,
backgroundColor: this.backgroundColor(),
space: 5,
}
).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)
abstract class GroupModule extends ModularPanel {
myId = ++moduleId
name() {
return `${this.constructor.name}#${this.myId}`
}
}
class Module5 extends ModularPanel {
setupModules() {
return [
Module3,
Module4,
Module3,
Module4,
Module3,
Module4,
]
discription() {
return "This is a group module."
}
backgroundColor() {
return Color.parse("#f39c12")
}
abstract buildShelf(): [View, Group]
setupShelf(root: Group): Group {
const shelf = new HLayout
shelf.apply({
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT
},
space: 10,
})
const [content, shelf] = this.buildShelf()
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(
shelf,
{
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT
},
})
text({
textSize: 12,
text: this.discription(),
textColor: Color.WHITE,
}),
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,
Module2,
Module5,
SingleModule,
ProviderWatcher,
Receiver,
VerticalModule,
HorizontalModule,
ScrollableVerticalModule,
ScrollableHorizontalModule,
CounterPage,
]
}

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

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

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

File diff suppressed because one or more lines are too long