add layout config

js-framework/index.ts

@@ -1,4 +1,4 @@
-import { Text } from "./view/view";
+import { Text, Alignment, VLayout, Gravity } from "./view/view";
 import { Color } from "./util/color";
 
 const v = new Text
@@ -7,4 +7,11 @@ v.height = 30
 v.left = 5
 v.top = 5
 v.bgColor = Color.parse('#00ff00')
+v.config = {
+    alignment: Alignment.start
+}
 console.log(v.toModel())
+
+const layout = new Text
+
+console.log(layout.toModel())

js-framework/view/view.ts

@@ -80,27 +80,73 @@ export abstract class View implements IWatcher, Modeling {
     toModel() {
         return this.__dirty_props__ || {}
     }
+
+    @Property
+    padding?: {
+        left?: number,
+        right?: number,
+        top?: number,
+        bottom?: number,
     }
 
-export class Group extends View {
+    @Property
+    config?: Config
+}
+
+export enum Alignment {
+    center = 0,
+    start,
+    end,
+}
+
+export enum Gravity {
+    center = 0,
+    left,
+    right,
+    top,
+    bottom,
+}
+
+export interface Config {
+    margin?: {
+        left?: number,
+        right?: number,
+        top?: number,
+        bottom?: number,
+    }
+    alignment?: Alignment
+}
+
+export interface StackConfig extends Config {
+
+}
+
+export interface LayoutConfig extends Config {
+    weight?: number
+}
+
+export abstract class Group extends View {
     @Property
     children: View[] = []
-
-    add(v: View) {
-        this.children.push(v)
-    }
 }
 
 export class Stack extends Group {
-
+    @Property
+    gravity?: number
 }
 
-export class VLayout extends Group {
+class LinearLayout extends Group {
+    @Property
+    space?: number
 
+    @Property
+    gravity?: number
 }
 
-export class HLayout extends Group {
+export class VLayout extends LinearLayout {
+}
 
+export class HLayout extends LinearLayout {
 }
 
 export class Text extends View {