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

Merge branch 'feature/mvvm' into 'master'

Browse Source 
Feature/mvvm



See merge request !2
This commit is contained in:
pengfeizhou 2019-10-25 14:14:32 +08:00
commit 2bf4874467
6 changed files with 396 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
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, CounterView>{
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() {

299
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, takeNonNull } from "doric";
type SnakeNode = { type SnakeNode = {
x: number x: number
@ -134,9 +134,10 @@ class SnakeModel {
} }
} }
class SnakeView extends ViewHolder { class SnakeView extends ViewHolder<SnakeModel> {
panel: Stack = new Stack
start: Text = new Text panel!: Stack
start?: Text
up?: Text up?: Text
down?: Text down?: Text
left?: Text left?: Text
@ -144,79 +145,110 @@ 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 this.panel = panel
vlayout.layoutConfig = { })
alignment: new Gravity().centerX().top(), },
widthSpec: LayoutSpec.WRAP_CONTENT, () => {
heightSpec: LayoutSpec.WRAP_CONTENT, return hlayout([
} () => {
this.panel.bgColor = Color.parse('#00ff00') return (new Text).also(it => {
vlayout.addChild(title) it.text = "Start"
vlayout.addChild(this.panel) it.textSize = 30
root.addChild(vlayout) it.textColor = Color.parse("#ffffff")
it.layoutConfig = {
const hlayout = new HLayout widthSpec: LayoutSpec.WRAP_CONTENT,
hlayout.layoutConfig = { heightSpec: LayoutSpec.WRAP_CONTENT,
widthSpec: LayoutSpec.WRAP_CONTENT, }
heightSpec: LayoutSpec.WRAP_CONTENT, this.start = it
} })
hlayout.addChild(this.start.also( },
it => { ]).also(it => {
it.text = "Start" it.layoutConfig = {
it.textSize = 30 widthSpec: LayoutSpec.WRAP_CONTENT,
it.textColor = Color.parse("#ffffff") heightSpec: LayoutSpec.WRAP_CONTENT,
it.layoutConfig = { }
widthSpec: LayoutSpec.WRAP_CONTENT, })
heightSpec: LayoutSpec.WRAP_CONTENT, },
} () => {
})) return vlayout([
vlayout.addChild(hlayout) () => {
return hlayout([
() => {
this.up = this.buildController("↑") return this.buildController("↑").also(it => {
this.down = this.buildController("↓") this.up = it
this.left = this.buildController("←") })
this.right = this.buildController("→") }
]).also(it => {
const controlArea = new VLayout it.layoutConfig = {
controlArea.gravity = new Gravity().centerX() widthSpec: LayoutSpec.WRAP_CONTENT,
controlArea.space = 10 heightSpec: LayoutSpec.WRAP_CONTENT,
controlArea.layoutConfig = { }
alignment: new Gravity().centerX(), })
widthSpec: LayoutSpec.WRAP_CONTENT, },
heightSpec: LayoutSpec.WRAP_CONTENT, () => {
} return hlayout([
const line1 = new HLayout () => {
const line2 = new HLayout return this.buildController("←").also(it => {
line2.space = 10 this.left = it
line1.addChild(this.up) })
line2.addChild(this.left) },
line2.addChild(this.down) () => {
line2.addChild(this.right) return this.buildController("↓").also(it => {
line1.layoutConfig = { this.down = it
widthSpec: LayoutSpec.WRAP_CONTENT, })
heightSpec: LayoutSpec.WRAP_CONTENT, },
} () => {
line2.layoutConfig = { return this.buildController("→").also(it => {
widthSpec: LayoutSpec.WRAP_CONTENT, this.right = it
heightSpec: LayoutSpec.WRAP_CONTENT, })
} },
controlArea.addChild(line1) ]).also(it => {
controlArea.addChild(line2) it.layoutConfig = {
vlayout.addChild(controlArea) 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.AT_MOST,
heightSpec: LayoutSpec.AT_MOST,
}
it.gravity = new Gravity().centerX()
}).in(root)
} }
buildController(text: string) { buildController(text: string) {
@ -228,19 +260,55 @@ class SnakeView extends ViewHolder {
ret.textAlignment = new Gravity().center() ret.textAlignment = new Gravity().center()
return ret return ret
} }
bind(state: SnakeModel): void {
log('build', state)
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,82 +320,39 @@ 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) { takeNonNull(v.start)(it => it.onClick = this.start)
loge('Game Over') takeNonNull(v.left)(it => it.onClick = this.left)
this.stop() takeNonNull(v.right)(it => it.onClick = this.right)
} takeNonNull(v.up)(it => it.onClick = this.up)
v.start.onClick = this.start takeNonNull(v.down)(it => it.onClick = this.down)
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) {
v.left.onClick = this.left
}
if (v.right) {
v.right.onClick = this.right
}
if (v.up) {
v.up.onClick = this.up
}
if (v.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
} }
} }

3
js-framework/index.ts
View File

@ -19,5 +19,6 @@ export * from "./src/util/color"
export * from './src/util/log' export * from './src/util/log'
export * from './src/util/types' export * from './src/util/types'
export * from './src/util/gravity' export * from './src/util/gravity'
export * from './src/util/candies'
export * from './src/vm/mvvm' export * from './src/vm/mvvm'
export * from './src/runtime/global' export * from './src/runtime/global'

3
js-framework/src/ui/view.ts
View File

@ -230,6 +230,9 @@ export abstract class View implements Modeling {
block(this) block(this)
return this return this
} }
in(group: Group) {
group.addChild(this)
}
} }
export interface StackConfig extends LayoutConfig { export interface StackConfig extends LayoutConfig {

100
js-framework/src/util/candies.ts Normal file
View File

@ -0,0 +1,100 @@
/*
* Copyright [2019] [Doric.Pub]
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { View, Stack, VLayout, HLayout } from "../ui/view"
export type ViewBlock = () => View
export function stack(blocks: ViewBlock[]) {
return takeAlso(new Stack)(
it => {
for (let block of blocks) {
it.addChild(block())
}
})
}
export function vlayout(blocks: ViewBlock[]) {
return takeAlso(new VLayout)(
it => {
for (let block of blocks) {
it.addChild(block())
}
})
}
export function hlayout(blocks: ViewBlock[]) {
return takeAlso(new HLayout)(
it => {
for (let block of blocks) {
it.addChild(block())
}
})
}
export function take<T>(target: T) {
return (block: (p: T) => void) => {
block(target)
}
}
export function takeNonNull<T, R>(target?: T) {
return (block: (p: T) => R) => {
if (target !== undefined) {
return block(target)
}
}
}
export function takeNull<T, R>(target?: T) {
return (block: () => R) => {
if (target === undefined) {
return block()
}
}
}
export function takeLet<T, R>(target: T) {
return (block: (p: T) => R | undefined) => {
return block(target)
}
}
export function takeAlso<T>(target: T) {
return (block: (p: T) => void) => {
block(target)
return target
}
}
export function takeIf<T>(target: T) {
return (predicate: (t: T) => boolean) => {
return predicate(target) ? target : undefined
}
}
export function takeUnless<T>(target: T) {
return (predicate: (t: T) => boolean) => {
return predicate(target) ? undefined : target
}
}
export function repeat(action: (count: number) => void) {
return (times: number) => {
for (let i = 0; i < times; i++) {
action(i)
}
}
}

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

@ -13,84 +13,65 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { View, Group } from "../ui/view"; import { Group } from "../ui/view";
import { Panel } from "../ui/panel"; import { Panel } from "../ui/panel";
function listen<T extends Object>(obj: T, listener: Function): T { export abstract class ViewHolder<M>{
return new Proxy(obj, {
get: (target, prop, receiver) => {
const ret = Reflect.get(target, prop, receiver)
if (ret instanceof Function) {
return Reflect.get(target, prop, receiver)
} else if (ret instanceof Object) {
return listen(ret, listener)
} else {
return ret
}
},
set: (target, prop, value, receiver) => {
const ret = Reflect.set(target, prop, value, receiver)
Reflect.apply(listener, undefined, [])
return ret
},
})
}
export abstract class ViewHolder {
abstract build(root: Group): void abstract build(root: Group): void
abstract bind(state: M): void
} }
export abstract class VMPanel<M extends Object, V extends ViewHolder> extends Panel { export type Setter<M> = (state: M) => void
export abstract class ViewModel<M extends Object, V extends ViewHolder<M>> {
private state: M
private viewHolder: V
constructor(obj: M, v: V) {
this.state = obj
this.viewHolder = v
}
getState() {
return this.state
}
updateState(setter: Setter<M>) {
setter(this.state)
this.viewHolder.bind(this.state)
}
attach(view: Group) {
this.viewHolder.build(view)
this.viewHolder.bind(this.state)
this.onAttached(this.state, this.viewHolder)
}
abstract onAttached(state: M, vh: V): void
}
export type ViewModelClass<M, V extends ViewHolder<M>> = new (m: M, v: V) => ViewModel<M, V>
export type ViewHolderClass<V> = new () => V
export abstract class VMPanel<M extends Object, V extends ViewHolder<M>> extends Panel {
private vm?: ViewModel<M, V> private vm?: ViewModel<M, V>
private vh?: V
abstract getVMClass(): new (m: M, v: V) => ViewModel<M, V> abstract getViewModelClass(): ViewModelClass<M, V>
abstract getState(): M
abstract getModel(): M abstract getViewHolderClass(): ViewHolderClass<V>
abstract getViewHolder(): V getViewModel() {
getVM() {
return this.vm return this.vm
} }
build(root: Group): void { build(root: Group): void {
this.vm = new (this.getVMClass())(this.getModel(), this.getViewHolder()) this.vh = new (this.getViewHolderClass())
this.vm.build(root) this.vm = new (this.getViewModelClass())(this.getState(), this.vh)
this.vm.attach(root)
} }
} }
export abstract class ViewModel<M extends Object, V extends ViewHolder> {
private model: M
private listeners: Function[] = []
private viewHolder: V
constructor(obj: M, v: V) {
this.model = listen(obj, () => {
this.listeners.forEach(e => {
Reflect.apply(e, this.model, [this.model])
})
})
this.viewHolder = v
}
build(root: Group) {
this.viewHolder.build(root)
this.bind((data: M) => {
this.binding(this.viewHolder, data)
})
}
abstract binding(v: V, model: M): void
getModel() {
return this.model
}
bind(f: (data: M) => void) {
Reflect.apply(f, this.model, [this.model])
this.listeners.push(f)
}
}