add vh layout

js-framework/src/ui/state.ts

@@ -5,6 +5,8 @@ function from(obj: Object) {
         }
     })
 }
+
+
 class Wrapper {
     val: any
     constructor(val: any) {

js-framework/src/ui/view.ts

@@ -1,18 +1,23 @@
 import { Color, GradientColor } from "../util/color"
 import { Modeling, Model, obj2Model } from "../util/types";
 import { uniqueId } from "../util/uniqueId";
+import { Gravity } from "../util/gravity";
 import { loge } from "../util/log";
 
+export const MATCH_PARENT = -1
+
+export const WRAP_CONTENT = -2
+
 export function Property(target: Object, propKey: string) {
     Reflect.defineMetadata(propKey, true, target)
 }
 
 export abstract class View implements Modeling {
     @Property
-    width: number = 0
+    width: number = WRAP_CONTENT
 
     @Property
-    height: number = 0
+    height: number = WRAP_CONTENT
 
     @Property
     x: number = 0
@@ -146,9 +151,11 @@ export abstract class View implements Modeling {
             }
         }
     }
+
     isDirty() {
         return Reflect.ownKeys(this.__dirty_props__).length !== 0
     }
+
     responseCallback(id: string, ...args: any) {
         const f = this.id2Callback(id)
         if (f instanceof Function) {
@@ -176,20 +183,9 @@ export abstract class View implements Modeling {
 
     @Property
     config?: Config
-}
 
-export enum Alignment {
-    center = 0,
-    start,
-    end,
-}
-
-export enum Gravity {
-    center = 0,
-    left,
-    right,
-    top,
-    bottom,
+    @Property
+    onClick?: Function
 }
 
 export interface Config {
@@ -199,14 +195,14 @@ export interface Config {
         top?: number,
         bottom?: number,
     }
-    alignment?: Alignment
+    alignment?: Gravity
 }
 
 export interface StackConfig extends Config {
 
 }
 
-export interface LayoutConfig extends Config {
+export interface LinearConfig extends Config {
     weight?: number
 }
 
@@ -257,7 +253,7 @@ export abstract class Group extends View {
 
 export class Stack extends Group {
     @Property
-    gravity?: number
+    gravity?: Gravity
 }
 export class Root extends Stack {
 
@@ -267,7 +263,7 @@ class LinearLayout extends Group {
     space?: number
 
     @Property
-    gravity?: number
+    gravity?: Gravity
 }
 
 export class VLayout extends LinearLayout {
@@ -288,9 +284,6 @@ export class Text extends View {
 
     @Property
     maxLines?: number
-
-    @Property
-    onClick?: Function
 }
 
 export class Image extends View {
@@ -305,3 +298,24 @@ export class List extends View {
 export class Slide extends View {
 
 }
+
+export function stack() {
+
+}
+
+export function vlayout(providers: Array<() => View>, config: {
+    width: number
+    height: number
+    space?: number
+}) {
+    const vlayout = new VLayout
+    vlayout.width = config.width
+    vlayout.height = config.height
+    if (config.space !== undefined) {
+        vlayout.space = config.space
+    }
+    providers.forEach(e => {
+        vlayout.addChild(e())
+    })
+    return vlayout
+}

js-framework/src/util/gravity.ts

@@ -0,0 +1,64 @@
+import { Modeling } from "./types";
+
+const SPECIFIED = 1
+const START = 1 << 1
+const END = 1 << 2
+
+const SHIFT_X = 0
+const SHIFT_Y = 4
+
+export const LEFT = (START | SPECIFIED) << SHIFT_X
+export const RIGHT = (END | SPECIFIED) << SHIFT_X
+
+export const TOP = (START | SPECIFIED) << SHIFT_Y
+export const BOTTOM = (END | SPECIFIED) << SHIFT_Y
+
+export const CENTER_X = SPECIFIED << SHIFT_X
+export const CENTER_Y = SPECIFIED << SHIFT_Y
+
+export const CENTER = CENTER_X | CENTER_Y
+
+export class Gravity implements Modeling {
+    val = 0
+
+    left() {
+        this.val |= LEFT
+        return this
+    }
+
+    right() {
+        this.val |= RIGHT
+        return this
+    }
+
+    top() {
+        this.val |= TOP
+        return this
+    }
+
+    bottom() {
+        this.val |= BOTTOM
+        return this
+    }
+
+    center() {
+        this.val |= CENTER
+        return this
+    }
+
+    centerX() {
+        this.val |= CENTER_X
+        return this
+    }
+
+    centerY() {
+        this.val |= CENTER_Y
+        return this
+    }
+
+
+    toModel() {
+        return this.val
+    }
+
+}

js-framework/src/util/types.ts

@@ -15,4 +15,36 @@ export function obj2Model(obj: Model): Model {
 }
 
 type _M = string | number | boolean | Modeling | { [index: string]: Model | undefined }
-export type Model = _M | Array<_M>
+export type Model = _M | Array<_M>
+
+export type Binder<T> = (v: T) => void
+
+export class Mutable<T>{
+    private val: T
+
+    private binders: Set<Binder<T>> = new Set
+
+    get = () => {
+        return this.val
+    }
+
+    set = (v: T) => {
+        this.val = v
+        this.binders.forEach(e => {
+            Reflect.apply(e, undefined, [this.val])
+        })
+    }
+
+    private constructor(v: T) {
+        this.val = v
+    }
+
+    bind(binder: Binder<T>) {
+        this.binders.add(binder)
+        Reflect.apply(binder, undefined, [this.val])
+    }
+
+    static of<E>(v: E) {
+        return new Mutable(v)
+    }
+}

js-framework/src/util/uniqueId.ts

@@ -1,5 +1,4 @@
-let __uniqueId__: number = 0
-
+let __uniqueId__ = 0
 export function uniqueId(prefix: string) {
     return `__${prefix}_${__uniqueId__++}__`;
 }