[view] add style meta to Layout

src/main/haxework/view/group/GroupView.hx

@@ -4,11 +4,11 @@ import flash.display.DisplayObjectContainer;
 import haxework.view.layout.DefaultLayout;
 import haxework.view.layout.ILayout;
 
-class GroupView extends SpriteView implements IGroupView {
+@:style(true) class GroupView extends SpriteView implements IGroupView {
     public var container(get, null):DisplayObjectContainer;
 
     public var views(default, set):Array<IView<Dynamic>>;
-    public var layout(default, default):ILayout;
+    @:style public var layout(default, default):ILayout;
 
     public function new(?layout:ILayout) {
         super();

src/main/haxework/view/group/IGroupView.hx

@@ -4,7 +4,7 @@ import flash.display.DisplayObjectContainer;
 import haxework.view.layout.ILayout;
 
 interface IGroupView extends IView<Dynamic> {
-    @:style public var layout(default, default):ILayout;
+    public var layout(default, set):ILayout;
 
     public var container(get, null):DisplayObjectContainer;
     public var views(default, set):Array<IView<Dynamic>>;

src/main/haxework/view/layout/ILayout.hx

@@ -3,12 +3,13 @@ package haxework.view.layout;
 import haxework.view.geometry.HAlign;
 import haxework.view.geometry.VAlign;
 import haxework.view.group.IGroupView;
+import haxework.view.theme.IStylable;
 
-interface ILayout {
+interface ILayout extends IStylable {
-    public var hAlign(default, default):HAlign;
+    public var hAlign(get, set):HAlign;
-    public var vAlign(default, default):VAlign;
+    public var vAlign(get, set):VAlign;
-    public var margin(default, default):Float;
+    public var margin(get, set):Null<Float>;
-    public var overflow(default, default):Bool;
+    public var overflow(get, set):Null<Bool>;
 
     public function place(group:IGroupView, views:Array<IView<Dynamic>>):Void;
 

src/main/haxework/view/layout/Layout.hx

@@ -4,17 +4,15 @@ import haxework.view.geometry.HAlign;
 import haxework.view.geometry.VAlign;
 import haxework.view.group.IGroupView;
 
-class Layout implements ILayout {
+@:style class Layout implements ILayout {
 
-    public var hAlign(default, default):HAlign;
+    @:style(HAlign.NONE) public var hAlign(default, default):HAlign;
-    public var vAlign(default, default):VAlign;
+    @:style(VAlign.NONE) public var vAlign(default, default):VAlign;
-    public var margin(default, default):Float;
+    @:style(0) public var margin(default, default):Null<Float>;
-    public var overflow(default, default):Bool;
+    @:style(false) public var overflow(default, default):Null<Bool>;
 
     public function new() {
-        hAlign = NONE;
+
-        vAlign = NONE;
-        margin = 0;
     }
 
     public function place(group:IGroupView, views:Array<IView<Dynamic>>):Void {}

src/main/haxework/view/skin/ButtonColorSkin.hx

@@ -13,7 +13,7 @@ using haxework.color.ColorUtil;
 @:style class ButtonColorSkin implements ISkin<ButtonView> {
 
     @:style(0xffffff) public var color(default, default):Null<Color>;
-    public var borderColor(default, default):Null<Color>;
+    @:style(null) public var borderColor(default, default):Null<Color>;
     public var round(default, default):Float;
     private var colors:Map<ButtonState, Int>;
 
@@ -24,7 +24,7 @@ using haxework.color.ColorUtil;
     }
 
     public function draw(view:ButtonView):Void {
-        var color = color;
+        var color:Color = stateColor(color, view.state);
         var borderColor:Color = borderColor != null ? borderColor : color.multiply(1.5);
         if (Std.is(view, ToggleButtonView)) {
             if (!cast(view, ToggleButtonView).on) {

src/main/haxework/view/theme/Theme.hx

@@ -2,58 +2,15 @@ package haxework.view.theme;
 
 import flash.text.Font;
 import flash.text.FontType;
-import haxe.ds.StringMap;
 import haxework.color.Color;
 import haxework.signal.Signal;
 import haxework.view.geometry.Box;
 import haxework.view.geometry.SizeValue;
-import haxework.view.skin.ButtonColorSkin;
 import haxework.view.skin.TabColorSkin;
 import haxework.view.theme.ITheme;
 
 using haxework.color.ColorUtil;
 
-typedef StyleSet = Array<IStyle<Dynamic>>;
-
-class StyleMap extends StringMap<StyleSet> {
-
-    private var views:Map<IView<Dynamic>, String> = new Map();
-    private var viewsByStyle:Map<String, Array<IView<Dynamic>>> = new Map();
-
-    private function apply(styles:StyleSet, view:IView<Dynamic>):Void {
-        for (item in styles) {
-            item.apply(view);
-        }
-    }
-
-    public function put(key:String, value:StyleSet):Void {
-        set(key, value);
-        if (viewsByStyle.exists(key)) {
-            for (view in viewsByStyle.get(key)) {
-                apply(value, view);
-            }
-        }
-    }
-
-    public function connect(key:String, view:IView<Dynamic>):Void {
-        disconnect(view);
-        if (!viewsByStyle.exists(key)) {
-            viewsByStyle.set(key, []);
-        }
-        viewsByStyle.get(key).push(view);
-        if (exists(key)) {
-            apply(get(key), view);
-        }
-    }
-
-    public function disconnect(view:IView<Dynamic>):Void {
-        if (views.exists(view)) {
-            viewsByStyle.get(views.get(view)).remove(view);
-            views.remove(view);
-        }
-    }
-}
-
 class Theme implements ITheme {
     // ToDo: configurable
     public var baseFontSize = 18;
@@ -130,12 +87,11 @@ class Theme implements ITheme {
             "geometry.padding" => Box.fromArray([8, 2]),
         ], ["text"]));
         data.set("button", create([
-            "skin" => function() return new ButtonColorSkin(),
             "skin.color" => colors.light,
             "geometry.padding" => Box.fromArray([25, 8]),
         ], ["text"]));
         data.set("button.active", create([
-            "skin.color" => colors.active,
+            "skin.borderColor" => colors.active,
         ], ["button"]));
         data.set("button.tab", create([
             "skin" => function() return new TabColorSkin(),
@@ -166,7 +122,6 @@ class Theme implements ITheme {
     }
 
     public function resolve<T>(key:String, style:StyleId):T {
-        trace("resolve", key, style != null ? style : "");
         var result:Dynamic = style != null && data.exists(style) ? data.get(style).get(key) : null;
         if (Reflect.isFunction(result)) {
             result = result();