Merge branch 'feature/mvvm' into 'master'
Feature/mvvm See merge request !2
This commit is contained in:
pengfeizhou
commit
2bf4874467
@ -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 = {
|
||||
alignment: new Gravity().center()
|
||||
}
|
||||
this.counter = new Text
|
||||
this.counter.text = "点击计数"
|
||||
this.counter.border = {
|
||||
width: 1,
|
||||
color: Color.parse('#000000'),
|
||||
}
|
||||
this.counter.textSize = 20
|
||||
this.counter.corners = 5
|
||||
vlayout.space = 20
|
||||
vlayout.layoutConfig = {
|
||||
alignment: new Gravity().center()
|
||||
}
|
||||
vlayout.border = {
|
||||
width: 1,
|
||||
color: Color.parse("#000000"),
|
||||
}
|
||||
this.counter.shadow = {
|
||||
color: Color.parse("#00ff00"),
|
||||
opacity: 0.5,
|
||||
radius: 20,
|
||||
offsetX: 10,
|
||||
offsetY: 10,
|
||||
}
|
||||
vlayout.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
|
||||
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)
|
||||
root.addChild(vlayout([
|
||||
() => {
|
||||
return (new Text).also(it => {
|
||||
it.textSize = 40
|
||||
it.layoutConfig = {
|
||||
alignment: new Gravity().center()
|
||||
}
|
||||
this.number = it
|
||||
})
|
||||
},
|
||||
() => {
|
||||
return (new Text).also(it => {
|
||||
it.text = "点击计数"
|
||||
it.textSize = 20
|
||||
|
||||
it.border = {
|
||||
width: 1,
|
||||
color: Color.parse('#000000'),
|
||||
}
|
||||
it.corners = 5
|
||||
|
||||
it.layoutConfig = {
|
||||
alignment: new Gravity().center()
|
||||
}
|
||||
it.shadow = {
|
||||
color: Color.parse("#00ff00"),
|
||||
opacity: 0.5,
|
||||
radius: 20,
|
||||
offsetX: 10,
|
||||
offsetY: 10,
|
||||
}
|
||||
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,
|
||||
}
|
||||
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) {
|
||||
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() {
|
||||
|
||||
@ -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,79 +145,110 @@ class SnakeView extends ViewHolder {
|
||||
|
||||
build(root: Group): void {
|
||||
root.bgColor = Color.parse('#000000')
|
||||
const vlayout = new VLayout
|
||||
const title = new Text
|
||||
title.text = "Snake"
|
||||
title.textSize = 20
|
||||
title.textColor = Color.parse("#ffffff")
|
||||
title.layoutConfig = {
|
||||
alignment: new Gravity().centerX(),
|
||||
margin: {
|
||||
top: 20
|
||||
vlayout([
|
||||
() => {
|
||||
return (new Text).also(title => {
|
||||
title.text = "Snake"
|
||||
title.textSize = 20
|
||||
title.textColor = Color.parse("#ffffff")
|
||||
title.layoutConfig = {
|
||||
alignment: new Gravity().centerX(),
|
||||
margin: {
|
||||
top: 20
|
||||
},
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
}
|
||||
})
|
||||
},
|
||||
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 => {
|
||||
it.text = "Start"
|
||||
it.textSize = 30
|
||||
it.textColor = Color.parse("#ffffff")
|
||||
it.layoutConfig = {
|
||||
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
|
||||
controlArea.gravity = new Gravity().centerX()
|
||||
controlArea.space = 10
|
||||
controlArea.layoutConfig = {
|
||||
alignment: new Gravity().centerX(),
|
||||
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,
|
||||
}
|
||||
controlArea.addChild(line1)
|
||||
controlArea.addChild(line2)
|
||||
vlayout.addChild(controlArea)
|
||||
() => {
|
||||
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")
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
}
|
||||
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 = {
|
||||
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) {
|
||||
@ -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()
|
||||
}
|
||||
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
|
||||
}
|
||||
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)
|
||||
}
|
||||
|
||||
}
|
||||
@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
|
||||
}
|
||||
}
|
||||
@ -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'
|
||||
@ -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
100
js-framework/src/util/candies.ts
Normal 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user