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

modify demo

Browse Source
This commit is contained in:
pengfei.zhou 2019-10-25 03:15:23 +08:00
parent 4d92d5ba08
commit 81eb27843a
3 changed files with 248 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
demo/src/Counter.ts
View File

@ -1,71 +1,83 @@
import { Image, ViewHolder, VMPanel, ViewModel, Gravity, NativeCall, Text, Color, VLayout, log, logw, loge, Group, LayoutSpec, } from "doric" import { vlayout, Image, ViewHolder, VMPanel, ViewModel, Gravity, NativeCall, Text, Color, log, logw, loge, Group, LayoutSpec, } from "doric"
interface CountModel { interface CountModel {
count: number count: number
} }
class CounterView extends ViewHolder { class CounterView extends ViewHolder<CountModel> {
number = new Text
counter = new Text number!: Text
counter!: Text
build(root: Group) { build(root: Group) {
const vlayout = new VLayout root.addChild(vlayout([
vlayout.width = 200 () => {
vlayout.height = 200 return (new Text).also(it => {
vlayout.gravity = new Gravity().center() it.textSize = 40
this.number.textSize = 40 it.layoutConfig = {
this.number.layoutConfig = { alignment: new Gravity().center()
alignment: new Gravity().center() }
} this.number = it
this.counter = new Text })
this.counter.text = "点击计数" },
this.counter.border = { () => {
width: 1, return (new Text).also(it => {
color: Color.parse('#000000'), it.text = "点击计数"
} it.textSize = 20
this.counter.textSize = 20
this.counter.corners = 5 it.border = {
vlayout.space = 20 width: 1,
vlayout.layoutConfig = { color: Color.parse('#000000'),
alignment: new Gravity().center() }
} it.corners = 5
vlayout.border = {
width: 1, it.layoutConfig = {
color: Color.parse("#000000"), alignment: new Gravity().center()
} }
this.counter.shadow = { it.shadow = {
color: Color.parse("#00ff00"), color: Color.parse("#00ff00"),
opacity: 0.5, opacity: 0.5,
radius: 20, radius: 20,
offsetX: 10, offsetX: 10,
offsetY: 10, offsetY: 10,
} }
vlayout.shadow = { this.counter = it
color: Color.parse("#ffff00"), })
opacity: 0.5, },
radius: 20, ]).also(it => {
offsetX: 10, it.width = 200
offsetY: 10, it.height = 200
} it.space = 20
vlayout.corners = 20 it.gravity = new Gravity().center()
vlayout.addChild(this.number) it.layoutConfig = {
vlayout.addChild(this.counter) alignment: new Gravity().center()
// root.bgColor = Color.parse('#00ff00') }
vlayout.bgColor = Color.parse('#ff00ff') it.border = {
root.addChild(vlayout) width: 1,
const iv = new Image color: Color.parse("#000000"),
// iv.width = iv.height = 100 }
iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png" it.shadow = {
//iv.bgColor = Color.parse('#00ff00') color: Color.parse("#ffff00"),
iv.layoutConfig = { opacity: 0.5,
widthSpec: LayoutSpec.WRAP_CONTENT, radius: 20,
heightSpec: LayoutSpec.WRAP_CONTENT, offsetX: 10,
} offsetY: 10,
root.addChild(iv) }
it.corners = 20
it.bgColor = Color.parse('#ff00ff')
}))
root.addChild((new Image).also(iv => {
iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png"
iv.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
}))
} }
setNumber(n: number) { bind(state: CountModel) {
this.number.text = n.toString() this.number.text = `${state.count}`
} }
setCounter(v: Function) { setCounter(v: Function) {
@ -74,35 +86,33 @@ class CounterView extends ViewHolder {
} }
class CounterVM extends ViewModel<CountModel, CounterView> { class CounterVM extends ViewModel<CountModel, CounterView> {
onAttached(s: CountModel, vh: CounterView): void {
binding(v: CounterView, model: CountModel): void { vh.counter.onClick = () => {
v.setNumber(model.count) this.updateState(state => {
v.setCounter(() => { state.count++
this.getModel().count++ })
}) }
} }
} }
@Entry @Entry
class MyPage extends VMPanel<CountModel, CounterView>{ class MyPage extends VMPanel<CountModel>{
getVMClass() {
getViewHolderClass() {
return CounterView
}
getViewModelClass() {
return CounterVM return CounterVM
} }
getModel() { getState(): CountModel {
return { return {
count: 0, count: 0
add: function () {
this.count++
},
} }
} }
getViewHolder() {
return new CounterView
}
@NativeCall @NativeCall
log() { log() {

273
demo/src/Snake.ts
View File

@ -1,4 +1,4 @@
import { loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel, LayoutSpec } from "doric"; import { loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel, LayoutSpec, vlayout, hlayout } from "doric";
type SnakeNode = { type SnakeNode = {
x: number x: number
@ -134,7 +134,8 @@ class SnakeModel {
} }
} }
class SnakeView extends ViewHolder { class SnakeView extends ViewHolder<SnakeModel> {
panel: Stack = new Stack panel: Stack = new Stack
start: Text = new Text start: Text = new Text
up?: Text up?: Text
@ -144,79 +145,109 @@ class SnakeView extends ViewHolder {
build(root: Group): void { build(root: Group): void {
root.bgColor = Color.parse('#000000') root.bgColor = Color.parse('#000000')
const vlayout = new VLayout vlayout([
const title = new Text () => {
title.text = "Snake" return (new Text).also(title => {
title.textSize = 20 title.text = "Snake"
title.textColor = Color.parse("#ffffff") title.textSize = 20
title.layoutConfig = { title.textColor = Color.parse("#ffffff")
alignment: new Gravity().centerX(), title.layoutConfig = {
margin: { alignment: new Gravity().centerX(),
top: 20 margin: {
top: 20
},
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
})
}, },
widthSpec: LayoutSpec.WRAP_CONTENT, () => {
heightSpec: LayoutSpec.WRAP_CONTENT, return (new Stack).also(panel => {
} panel.bgColor = Color.parse('#00ff00')
vlayout.space = 20
vlayout.layoutConfig = {
alignment: new Gravity().centerX().top(),
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
this.panel.bgColor = Color.parse('#00ff00')
vlayout.addChild(title)
vlayout.addChild(this.panel)
root.addChild(vlayout)
const hlayout = new HLayout })
hlayout.layoutConfig = { },
widthSpec: LayoutSpec.WRAP_CONTENT, () => {
heightSpec: LayoutSpec.WRAP_CONTENT, return hlayout([
} () => {
hlayout.addChild(this.start.also( return (new Text).also(it => {
it => { it.text = "Start"
it.text = "Start" it.textSize = 30
it.textSize = 30 it.textColor = Color.parse("#ffffff")
it.textColor = Color.parse("#ffffff") it.layoutConfig = {
it.layoutConfig = { widthSpec: LayoutSpec.WRAP_CONTENT,
widthSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT, }
} this.start = it
})) })
vlayout.addChild(hlayout) },
]).also(it => {
it.layoutConfig = {
this.up = this.buildController("↑") widthSpec: LayoutSpec.WRAP_CONTENT,
this.down = this.buildController("↓") heightSpec: LayoutSpec.WRAP_CONTENT,
this.left = this.buildController("←") }
this.right = this.buildController("→") })
},
const controlArea = new VLayout () => {
controlArea.gravity = new Gravity().centerX() return vlayout([
controlArea.space = 10 () => {
controlArea.layoutConfig = { return hlayout([
alignment: new Gravity().centerX(), () => {
widthSpec: LayoutSpec.WRAP_CONTENT, return this.buildController("↑").also(it => {
heightSpec: LayoutSpec.WRAP_CONTENT, this.up = it
} })
const line1 = new HLayout }
const line2 = new HLayout ]).also(it => {
line2.space = 10 it.layoutConfig = {
line1.addChild(this.up) widthSpec: LayoutSpec.WRAP_CONTENT,
line2.addChild(this.left) heightSpec: LayoutSpec.WRAP_CONTENT,
line2.addChild(this.down) }
line2.addChild(this.right) })
line1.layoutConfig = { },
widthSpec: LayoutSpec.WRAP_CONTENT, () => {
heightSpec: LayoutSpec.WRAP_CONTENT, return hlayout([
} () => {
line2.layoutConfig = { return this.buildController("←").also(it => {
widthSpec: LayoutSpec.WRAP_CONTENT, this.left = it
heightSpec: LayoutSpec.WRAP_CONTENT, })
} },
controlArea.addChild(line1) () => {
controlArea.addChild(line2) return this.buildController("↓").also(it => {
vlayout.addChild(controlArea) this.down = it
})
},
() => {
return this.buildController("→").also(it => {
this.right = it
})
},
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
it.space = 10
})
},
])
.also(controlArea => {
controlArea.gravity = new Gravity().centerX()
controlArea.space = 10
controlArea.layoutConfig = {
alignment: new Gravity().centerX(),
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
})
}
]).also(it => {
it.space = 20
it.layoutConfig = {
alignment: new Gravity().centerX().top(),
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
})
} }
buildController(text: string) { buildController(text: string) {
@ -228,19 +259,54 @@ class SnakeView extends ViewHolder {
ret.textAlignment = new Gravity().center() ret.textAlignment = new Gravity().center()
return ret return ret
} }
bind(state: SnakeModel): void {
this.panel.width = state.width * 10
this.panel.height = state.height * 10
let node: SnakeNode | undefined = state.head
let nodes: SnakeNode[] = []
while (node != undefined) {
nodes.push(node)
node = node.next
}
nodes.push(state.food)
nodes.forEach((e, index) => {
let item = this.panel.children[index]
if (item === undefined) {
item = new Stack
item.width = item.height = 10
this.panel.addChild(item)
}
if (index === nodes.length - 1) {
item.bgColor = Color.parse('#ffff00')
} else {
item.bgColor = Color.parse('#ff0000')
}
item.x = e.x * 10
item.y = e.y * 10
})
if (nodes.length < this.panel.children.length) {
this.panel.children.length = nodes.length
}
}
} }
class SnakeVM extends ViewModel<SnakeModel, SnakeView>{ class SnakeVM extends ViewModel<SnakeModel, SnakeView>{
timerId?: any timerId?: any
start = () => { start = () => {
if (this.timerId !== undefined) { if (this.timerId !== undefined) {
clearInterval(this.timerId) clearInterval(this.timerId)
} }
this.getModel().reset() this.updateState(it => it.reset())
this.timerId = setInterval(() => { this.timerId = setInterval(() => {
this.getModel().step() this.updateState(it => it.step())
if (this.getState().state === State.fail) {
loge('Game Over')
this.stop()
}
}, 500) }, 500)
} }
@ -252,56 +318,23 @@ class SnakeVM extends ViewModel<SnakeModel, SnakeView>{
} }
left = () => { left = () => {
this.getModel().direction = Direction.left this.updateState(it => it.direction = Direction.left)
} }
right = () => { right = () => {
this.getModel().direction = Direction.right this.updateState(it => it.direction = Direction.right)
} }
up = () => { up = () => {
this.getModel().direction = Direction.up this.updateState(it => it.direction = Direction.up)
} }
down = () => { down = () => {
this.getModel().direction = Direction.down this.updateState(it => it.direction = Direction.down)
} }
binding(v: SnakeView, model: SnakeModel) { onAttached(state: SnakeModel, v: SnakeView): void {
if (model.state === State.fail) {
loge('Game Over')
this.stop()
}
v.start.onClick = this.start v.start.onClick = this.start
v.panel.width = model.width * 10
v.panel.height = model.height * 10
let node: SnakeNode | undefined = model.head
let nodes: SnakeNode[] = []
while (node != undefined) {
nodes.push(node)
node = node.next
}
nodes.push(model.food)
nodes.forEach((e, index) => {
let item = v.panel.children[index]
if (item === undefined) {
item = new Stack
item.width = item.height = 10
v.panel.addChild(item)
}
if (index === nodes.length - 1) {
item.bgColor = Color.parse('#ffff00')
} else {
item.bgColor = Color.parse('#ff0000')
}
item.x = e.x * 10
item.y = e.y * 10
})
if (nodes.length < v.panel.children.length) {
v.panel.children.length = nodes.length
}
if (v.left) { if (v.left) {
v.left.onClick = this.left v.left.onClick = this.left
} }
@ -315,19 +348,17 @@ class SnakeVM extends ViewModel<SnakeModel, SnakeView>{
v.down.onClick = this.down v.down.onClick = this.down
} }
} }
} }
@Entry @Entry
class SnakePanel extends VMPanel<SnakeModel, SnakeView>{ class SnakePanel extends VMPanel<SnakeModel, SnakeView>{
getViewModelClass() {
getVMClass() {
return SnakeVM return SnakeVM
} }
getState(): SnakeModel {
getModel() {
return new SnakeModel(35, 35) return new SnakeModel(35, 35)
} }
getViewHolderClass() {
getViewHolder() { return SnakeView
return new SnakeView
} }
} }

17
js-framework/src/vm/mvvm.ts
View File

@ -43,22 +43,25 @@ export abstract class ViewModel<M extends Object, V extends ViewHolder<M>> {
attach(view: Group) { attach(view: Group) {
this.viewHolder.build(view) this.viewHolder.build(view)
this.viewHolder.bind(this.state)
} }
abstract onAttached(state: M, vh: V): void
} }
export type ViewModelClass<M> = new (m: M, v: ViewHolder<M>) => ViewModel<M, ViewHolder<M>> export type ViewModelClass<M, V extends ViewHolder<M>> = new (m: M, v: V) => ViewModel<M, V>
export type ViewHolderClass<M> = new () => ViewHolder<M> export type ViewHolderClass<V> = new () => V
export abstract class VMPanel<M extends Object> extends Panel { export abstract class VMPanel<M extends Object, V extends ViewHolder<M>> extends Panel {
private vm?: ViewModel<M, ViewHolder<M>> private vm?: ViewModel<M, V>
private vh?: ViewHolder<M> private vh?: V
abstract getViewModelClass(): ViewModelClass<M> abstract getViewModelClass(): ViewModelClass<M, V>
abstract getState(): M abstract getState(): M
abstract getViewHolderClass(): ViewHolderClass<M> abstract getViewHolderClass(): ViewHolderClass<V>
getViewModel() { getViewModel() {
return this.vm return this.vm