From 182e6c9b748c192acc4732a24717ab6dbb085384 Mon Sep 17 00:00:00 2001
From: "pengfei.zhou" <pengfeizhou@foxmail.com>
Date: Fri, 25 Oct 2019 14:13:35 +0800
Subject: [PATCH] feat:adjust mvvm api

---
 demo/src/Counter.ts         |  2 +-
 demo/src/Snake.ts           | 34 ++++++++++++++--------------------
 js-framework/src/ui/view.ts |  3 +++
 js-framework/src/vm/mvvm.ts |  1 +
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/demo/src/Counter.ts b/demo/src/Counter.ts
index 33b1a2f8..725c2e38 100644
--- a/demo/src/Counter.ts
+++ b/demo/src/Counter.ts
@@ -96,7 +96,7 @@ class CounterVM extends ViewModel<CountModel, CounterView> {
 }
 
 @Entry
-class MyPage extends VMPanel<CountModel>{
+class MyPage extends VMPanel<CountModel, CounterView>{
 
 
     getViewHolderClass() {
diff --git a/demo/src/Snake.ts b/demo/src/Snake.ts
index 1292cd99..f32c4bd3 100644
--- a/demo/src/Snake.ts
+++ b/demo/src/Snake.ts
@@ -1,4 +1,4 @@
-import { loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel, LayoutSpec, vlayout, hlayout } 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
@@ -136,8 +136,8 @@ class SnakeModel {
 
 class SnakeView extends ViewHolder<SnakeModel> {
 
-    panel: Stack = new Stack
-    start: Text = new Text
+    panel!: Stack
+    start?: Text
     up?: Text
     down?: Text
     left?: Text
@@ -164,7 +164,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
             () => {
                 return (new Stack).also(panel => {
                     panel.bgColor = Color.parse('#00ff00')
-
+                    this.panel = panel
                 })
             },
             () => {
@@ -244,10 +244,11 @@ class SnakeView extends ViewHolder<SnakeModel> {
             it.space = 20
             it.layoutConfig = {
                 alignment: new Gravity().centerX().top(),
-                widthSpec: LayoutSpec.WRAP_CONTENT,
-                heightSpec: LayoutSpec.WRAP_CONTENT,
+                widthSpec: LayoutSpec.AT_MOST,
+                heightSpec: LayoutSpec.AT_MOST,
             }
-        })
+            it.gravity = new Gravity().centerX()
+        }).in(root)
     }
 
     buildController(text: string) {
@@ -261,6 +262,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
     }
 
     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
@@ -334,19 +336,11 @@ class SnakeVM extends ViewModel<SnakeModel, SnakeView>{
     }
 
     onAttached(state: SnakeModel, v: SnakeView): void {
-        v.start.onClick = this.start
-        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
-        }
+        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)
     }
 
 }
diff --git a/js-framework/src/ui/view.ts b/js-framework/src/ui/view.ts
index b222309e..379feb3f 100644
--- a/js-framework/src/ui/view.ts
+++ b/js-framework/src/ui/view.ts
@@ -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 {
diff --git a/js-framework/src/vm/mvvm.ts b/js-framework/src/vm/mvvm.ts
index da3a85d1..24eb05d9 100644
--- a/js-framework/src/vm/mvvm.ts
+++ b/js-framework/src/vm/mvvm.ts
@@ -44,6 +44,7 @@ export abstract class ViewModel<M extends Object, V extends ViewHolder<M>> {
     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