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

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

245
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 = {
x: number
@ -134,9 +134,10 @@ class SnakeModel {
}
}
class SnakeView extends ViewHolder {
panel: Stack = new Stack
start: Text = new Text
class SnakeView extends ViewHolder<SnakeModel> {
panel!: Stack
start?: Text
up?: Text
down?: Text
left?: Text
@ -144,8 +145,9 @@ class SnakeView extends ViewHolder {
build(root: Group): void {
root.bgColor = Color.parse('#000000')
const vlayout = new VLayout
const title = new Text
vlayout([
() => {
return (new Text).also(title => {
title.text = "Snake"
title.textSize = 20
title.textColor = Color.parse("#ffffff")
@ -157,24 +159,18 @@ class SnakeView extends ViewHolder {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
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,
}
hlayout.addChild(this.start.also(
it => {
})
},
() => {
return (new Stack).also(panel => {
panel.bgColor = Color.parse('#00ff00')
this.panel = panel
})
},
() => {
return hlayout([
() => {
return (new Text).also(it => {
it.text = "Start"
it.textSize = 30
it.textColor = Color.parse("#ffffff")
@ -182,16 +178,59 @@ class SnakeView extends ViewHolder {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
}))
vlayout.addChild(hlayout)
this.up = this.buildController("↑")
this.down = this.buildController("↓")
this.left = this.buildController("←")
this.right = this.buildController("→")
const controlArea = new VLayout
this.start = it
})
},
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
})
},
() => {
return vlayout([
() => {
return hlayout([
() => {
return this.buildController("↑").also(it => {
this.up = it
})
}
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
})
},
() => {
return hlayout([
() => {
return this.buildController("←").also(it => {
this.left = it
})
},
() => {
return this.buildController("↓").also(it => {
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 = {
@ -199,24 +238,17 @@ class SnakeView extends ViewHolder {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
}
const line1 = new HLayout
const line2 = new HLayout
line2.space = 10
line1.addChild(this.up)
line2.addChild(this.left)
line2.addChild(this.down)
line2.addChild(this.right)
line1.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT,
heightSpec: LayoutSpec.WRAP_CONTENT,
})
}
line2.layoutConfig = {
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,
}
controlArea.addChild(line1)
controlArea.addChild(line2)
vlayout.addChild(controlArea)
it.gravity = new Gravity().centerX()
}).in(root)
}
buildController(text: string) {
@ -228,19 +260,55 @@ class SnakeView extends ViewHolder {
ret.textAlignment = new Gravity().center()
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>{
timerId?: any
start = () => {
if (this.timerId !== undefined) {
clearInterval(this.timerId)
}
this.getModel().reset()
this.updateState(it => it.reset())
this.timerId = setInterval(() => {
this.getModel().step()
this.updateState(it => it.step())
if (this.getState().state === State.fail) {
loge('Game Over')
this.stop()
}
}, 500)
}
@ -252,82 +320,39 @@ class SnakeVM extends ViewModel<SnakeModel, SnakeView>{
}
left = () => {
this.getModel().direction = Direction.left
this.updateState(it => it.direction = Direction.left)
}
right = () => {
this.getModel().direction = Direction.right
this.updateState(it => it.direction = Direction.right)
}
up = () => {
this.getModel().direction = Direction.up
this.updateState(it => it.direction = Direction.up)
}
down = () => {
this.getModel().direction = Direction.down
this.updateState(it => it.direction = Direction.down)
}
binding(v: SnakeView, model: SnakeModel) {
if (model.state === State.fail) {
loge('Game Over')
this.stop()
onAttached(state: SnakeModel, v: SnakeView): void {
takeNonNull(v.start)(it => it.onClick = this.start)
takeNonNull(v.left)(it => it.onClick = this.left)
takeNonNull(v.right)(it => it.onClick = this.right)
takeNonNull(v.up)(it => it.onClick = this.up)
takeNonNull(v.down)(it => it.onClick = this.down)
}
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) {
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
class SnakePanel extends VMPanel<SnakeModel, SnakeView>{
getVMClass() {
getViewModelClass() {
return SnakeVM
}
getModel() {
getState(): SnakeModel {
return new SnakeModel(35, 35)
}
getViewHolder() {
return new SnakeView
getViewHolderClass() {
return SnakeView
}
}

1
js-framework/index.ts
View File

@ -19,5 +19,6 @@ export * from "./src/util/color"
export * from './src/util/log'
export * from './src/util/types'
export * from './src/util/gravity'
export * from './src/util/candies'
export * from './src/vm/mvvm'
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)
return this
}
in(group: Group) {
group.addChild(this)
}
}
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
* limitations under the License.
*/
import { View, Group } from "../ui/view";
import { Group } from "../ui/view";
import { Panel } from "../ui/panel";
function listen<T extends Object>(obj: T, listener: Function): T {
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 {
export abstract class ViewHolder<M>{
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 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
getVM() {
getViewModel() {
return this.vm
}
build(root: Group): void {
this.vm = new (this.getVMClass())(this.getModel(), this.getViewHolder())
this.vm.build(root)
this.vh = new (this.getViewHolderClass())
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)
}
}