[view] rework view size system

demo/build.hxml

@@ -5,10 +5,10 @@
 --macro haxework.parser.Parser.auto()
 -debug
 -D native_trace
-#-D dev_layout
+-D dev_layout
 -swf-version 10.1
 -swf-header 800:600:30:000000
 
--main demo.Demo
+-main demo.Test
 -swf target/demo.swf
 #-as3 target

demo/src/demo/Test.hx

@@ -0,0 +1,17 @@
+package demo;
+
+import demo.test.TestView;
+import haxework.view.Root;
+import haxework.view.SpriteView;
+
+class Test {
+    public static function main():Void {
+        new Test();
+    }
+
+    public function new() {
+        trace("Test");
+        var view = new SpriteView();
+        Root.bind(new TestView());
+    }
+}

demo/src/demo/test/TestView.hx

@@ -0,0 +1,7 @@
+package demo.test;
+
+import haxework.view.group.GroupView;
+
+@:template class TestView extends GroupView {
+
+}

demo/src/demo/test/TestView.yaml

@@ -0,0 +1,51 @@
+---
+geometry.padding: 10
+views:
+    -   $type: haxework.view.group.HGroupView
+        geometry.padding: 10
+        geometry.width: 100%
+        layout.margin: 10
+        layout.vAlign: middle
+        skin:
+            $type: haxework.view.skin.ColorSkin
+            color: 0xffff00
+        views:
+            -   $type: haxework.view.SpriteView
+                geometry.width: 100
+                geometry.height: 100
+                skin:
+                    $type: haxework.view.skin.ColorSkin
+                    color: 0xff0000
+            -   $type: haxework.view.group.VGroupView
+                geometry.padding: 10
+                layout.margin: 10
+                skin:
+                    $type: haxework.view.skin.ColorSkin
+                    color: 0x00ffff
+                views:
+                    -   $type: haxework.view.SpriteView
+                        geometry.width: 100
+                        geometry.height: 100
+                        size:
+                            _test_: [200, 200]
+                        skin:
+                            $type: haxework.view.skin.ColorSkin
+                            color: 0xff0000
+                    -   $type: haxework.view.SpriteView
+                        geometry.width: 100
+                        geometry.height: 100
+                        skin:
+                            $type: haxework.view.skin.ColorSkin
+                            color: 0xff0000
+            -   $type: haxework.view.SpriteView
+                geometry.width: 60%
+                geometry.height: 100%
+                skin:
+                    $type: haxework.view.skin.ColorSkin
+                    color: 0xff0000
+            -   $type: haxework.view.SpriteView
+                geometry.width: 40%
+                geometry.height: 80%
+                skin:
+                    $type: haxework.view.skin.ColorSkin
+                    color: 0xff0000

src/main/haxework/macro/TemplateMacro.hx

@@ -154,7 +154,8 @@ class TemplateMacro {
                         }
                         exprs.push(macro $p{[name, key.substr(1)]}.connect(${e}));
                     case ["_", "_"]:
-                        exprs.push(Context.parse('${name}["${key.substr(1, key.length - 2)}"] = ${value}', getPosition(position)));
+                        //exprs.push(Context.parse('${name}["${key.substr(1, key.length - 2)}"] = ${value}', getPosition(position)));
+                        exprs.push(Context.parse('${name}.set("${key.substr(1, key.length - 2)}", ${value})', getPosition(position)));
                     case _:
                         exprs.push(Context.parse('${name}.${key} = ${value}', getPosition(position)));
                 }

src/main/haxework/view/IView.hx

@@ -2,24 +2,25 @@ package haxework.view;
 
 import flash.display.DisplayObject;
 import flash.geom.Rectangle;
-import haxework.view.core.Geometry;
+import haxework.view.geometry.Geometry;
 import haxework.view.group.IGroupView;
 import haxework.view.skin.ISkin;
 
 interface IView<C:DisplayObject> {
+    @:style public var geometry(default, default):Geometry;
+    @:style public var skin(default, default):ISkin<Dynamic>;
+
     public var id(default, default):String;
 
     public var x(default, set):Float;
     public var y(default, set):Float;
 
-    public var width(default, set):Float;
+    public var width(default, null):Float;
-    public var height(default, set):Float;
+    public var height(default, null):Float;
 
-    public var geometry(default, default):Geometry;
+    public var styles(default, default):Array<String>;
 
     public var content(default, null):C;
-    public var skin(default, set):SkinSet;
-    public var skinId(null, set):String;
 
     public var parent(default, null):Null<IGroupView>;
 
@@ -41,5 +42,5 @@ interface IView<C:DisplayObject> {
 
     public function remove():Void;
 
-    public function setContentSize(width:Float, height:Float, type:String="default"):Void;
+    public function setSize(width:Float, height:Float, type:String = "default"):Void;
 }

src/main/haxework/view/ImageView.hx

@@ -7,7 +7,7 @@ import haxework.view.utils.BitmapUtil;
 import haxework.view.utils.DrawUtil.FillType;
 import haxework.net.ImageLoader;
 
-class ImageView extends SpriteView {
+@:style("image") class ImageView extends SpriteView {
 
     public var image(default, set):BitmapData;
     public var imageUrl(default, set):String;

src/main/haxework/view/Root.hx

@@ -56,12 +56,9 @@ class Root {
     private function onResizeEvent(?_):Void {
         var content:DisplayObject = view.content;
         if (autoSize) {
-            view.width = content.stage.stageWidth;
+            view.setSize(content.stage.stageWidth, content.stage.stageHeight, "stage");
-            view.height = content.stage.stageHeight;
             view.toUpdate();
         } else {
-            view.width = view.geometry.minWidth;
-            view.height = view.geometry.minHeight;
             view.x = (content.stage.stageWidth - view.width) / 2;
             view.y = (content.stage.stageHeight - view.height) / 2;
         }

src/main/haxework/view/ScrollView.hx

@@ -4,7 +4,7 @@ import flash.display.DisplayObject;
 import flash.display.Sprite;
 import flash.events.MouseEvent;
 import haxework.signal.Signal;
-import haxework.view.core.Geometry.Position;
+import haxework.view.geometry.Geometry.Position;
 import haxework.view.group.HGroupView;
 import haxework.view.list.ScrollBarView;
 import haxework.view.list.VScrollBarView;

src/main/haxework/view/SpriteView.hx

@@ -1,11 +1,13 @@
 package haxework.view;
 
+import haxework.view.skin.ColorSkin;
 import flash.display.Sprite;
 
 class SpriteView extends View<Sprite> {
 
     public function new() {
         super(new Sprite());
+        skin = new ColorSkin(0, 0);
     }
 
     override public function redraw():Void {

src/main/haxework/view/View.hx

@@ -3,7 +3,8 @@ package haxework.view;
 import flash.display.DisplayObject;
 import flash.display.InteractiveObject;
 import flash.geom.Rectangle;
-import haxework.view.core.Geometry;
+import haxework.view.geometry.Geometry;
+import haxework.view.geometry.SizeSet;
 import haxework.view.group.IGroupView;
 import haxework.view.skin.ISkin;
 import haxework.view.theme.ITheme;
@@ -15,19 +16,19 @@ class View<C:DisplayObject> implements IView<C> {
 
     @:provide var theme:ITheme;
 
+    public var geometry(default, default):Geometry;
+    public var skin(default, default):ISkin<Dynamic>;
+    public var styles(default, default):Array<String>;
+
     public var id(default, default):String;
 
     public var x(default, set):Float;
     public var y(default, set):Float;
 
-    public var width(default, set):Float;
+    public var width(default, null):Float;
-    public var height(default, set):Float;
+    public var height(default, null):Float;
-
-    public var geometry(default, default):Geometry;
 
     public var content(default, null):C;
-    public var skin(default, set):SkinSet;
-    public var skinId(null, set):String;
 
     public var parent(default, null):Null<IGroupView>;
 
@@ -37,8 +38,11 @@ class View<C:DisplayObject> implements IView<C> {
 
     public var rect(get, null):Rectangle;
 
+    private var size:SizeSet;
+
     public function new(content:C) {
         id = Type.getClassName(Type.getClass(this)) + counter++;
+        size = new SizeSet();
         this.content = content;
         x = 0;
         y = 0;
@@ -47,7 +51,7 @@ class View<C:DisplayObject> implements IView<C> {
         geometry = new Geometry();
         visible = true;
         index = -1;
-        skin = [];
+        skin = null;
     }
 
     public function toRedraw():Void {
@@ -65,19 +69,22 @@ class View<C:DisplayObject> implements IView<C> {
     }
 
     public function update():Void {
+        setSize(geometry.width.fixed, geometry.height.fixed, "geometry");
     }
 
     public function redraw():Void {
-        for (skin in this.skin) {
+        if (skin != null) {
             skin.draw(this);
         }
     }
 
-    public function setContentSize(width:Float, height:Float, type:String="default"):Void {
+    public function setSize(width:Float, height:Float, type:String = "default"):Void {
-        var contentSize = geometry.size.content.get(type);
+        if (size.update([width, height], type)) {
-        if (contentSize == null || width != contentSize.width || height != contentSize.height) {
+            var s = size.toSize();
-            geometry.size.content.set(type, [width, height]);
+            this.width = s.width;
+            this.height = s.height;
             toUpdateParent();
+            toRedraw();
         }
     }
 
@@ -99,51 +106,12 @@ class View<C:DisplayObject> implements IView<C> {
         return y;
     }
 
-    private function set_width(value:Float):Float {
+    private function set_skin(value:ISkin<Dynamic>):ISkin<Dynamic> {
-        if (width != value) {
-            width = value;
-            toRedraw();
-            if (geometry != null && geometry.size.ratio > -1) {
-                var ratioHeight = value / geometry.size.ratio;
-                var size = geometry.size.content["ratio.height"];
-                if (size == null || size.height != ratioHeight) {
-                    this.setContentSize(-1, ratioHeight, "ratio.height");
-                }
-            }
-        }
-        return width;
-    }
-
-    private function set_height(value:Float):Float {
-        if (height != value) {
-            height = value;
-            toRedraw();
-            if (geometry != null && geometry.size.ratio > -1) {
-                var ratioWidth = value * geometry.size.ratio;
-                var size = geometry.size.content["ratio.width"];
-                if (size == null || size.width != ratioWidth) {
-                    this.setContentSize(ratioWidth, -1, "ratio.width");
-                }
-            }
-        }
-        return height;
-    }
-
-    private function set_skin(value:SkinSet):SkinSet {
         this.skin = value;
         toRedraw();
         return this.skin;
     }
 
-    private function set_skinId(value:String):String {
-        //skin = theme != null ? theme.resolve(value) : [];
-        skinId = value;
-        if (theme != null) {
-            theme.bind(skinId, this);
-        }
-        return skinId;
-    }
-
     private function set_visible(value:Bool):Bool {
         if (visible != value) {
             visible = value;

src/main/haxework/view/core/Geometry.hx

@@ -1,165 +0,0 @@
-package haxework.view.core;
-
-enum SizeValue {
-    FIXED(value:Float);
-    PERCENT(value:Float);
-}
-
-abstract ASizeValue(SizeValue) {
-
-    public inline function new(value:SizeValue) {
-        this = value;
-    }
-
-    @:from static public inline function fromFloat(value:Float):ASizeValue {
-        return new ASizeValue(FIXED(value));
-    }
-
-    @:from static public inline function fromString(value:String):ASizeValue {
-        if (value.substr(value.length - 1) == "%") {
-            return new ASizeValue(PERCENT(Std.parseFloat(value)));
-        } else {
-            return new ASizeValue(FIXED(Std.parseFloat(value)));
-        }
-    }
-
-    @:to public inline function toSizeValue():SizeValue {
-        return this;
-    }
-}
-
-class SizeSet {
-    public var content(default, default):Map<String, Size>;
-    public var fixed(default, default):Size;
-    public var percent(default, default):Size;
-    public var stretch(null, set):Bool;
-    public var empty(get, null):Bool;
-    public var ratio(default, default):Float = -1;
-
-    public var width(null, set):ASizeValue;
-    public var height(null, set):ASizeValue;
-
-    public function new() {
-        this.content = new Map();
-        this.fixed = [];
-        this.percent = [];
-    }
-
-    inline private function set_stretch(value:Bool):Bool {
-        this.percent = value ? [100] : [];
-        return value;
-    }
-
-    inline private function get_empty():Bool {
-        return fixed.empty && percent.empty;
-    }
-
-    inline private function set_width(value:ASizeValue):ASizeValue {
-        switch cast(value, SizeValue) {
-            case PERCENT(v): percent.width = v;
-            case FIXED(v): fixed.width = v;
-        }
-        return value;
-    }
-
-    inline private function set_height(value:ASizeValue):ASizeValue {
-        switch cast(value, SizeValue) {
-            case PERCENT(v): percent.height = v;
-            case FIXED(v): fixed.height = v;
-        }
-        return value;
-    }
-}
-
-@:enum abstract Position(String) from String to String {
-    var LAYOUT = "layout";
-    var ABSOLUTE = "absolute";
-}
-
-class Geometry {
-    public var padding(default, default):Box;
-    public var margin(default, default):Box;
-    public var size(default, default):SizeSet;
-    public var hAlign(default, default):HAlign;
-    public var vAlign(default, default):VAlign;
-    public var position(default, default):Position;
-
-    public var width(get, never):SizeValue;
-    public var height(get, never):SizeValue;
-
-    public var minWidth(get, never):Float;
-    public var minHeight(get, never):Float;
-
-    public function new() {
-        this.padding = [];
-        this.margin = [];
-        this.size = new SizeSet();
-        this.hAlign = HAlign.NONE;
-        this.vAlign = VAlign.NONE;
-        this.position = Position.LAYOUT;
-    }
-
-    public function get_minWidth():Float {
-        var result = size.fixed.width;
-        for (s in size.content.iterator()) {
-            result = Math.max(result, s.width);
-        }
-        result += padding.horizontal;
-        return result;
-    }
-
-    public function get_minHeight():Float {
-        var result = size.fixed.height;
-        for (s in size.content.iterator()) {
-            result = Math.max(result, s.height);
-        }
-        result += padding.vertical;
-        return result;
-    }
-
-    public function get_width():SizeValue {
-        if (size.percent.width > -1) {
-            return PERCENT(size.percent.width);
-        }
-        return FIXED(minWidth);
-    }
-
-    public function get_height():SizeValue {
-        if (size.percent.height > -1) {
-            return PERCENT(size.percent.height);
-        }
-        return FIXED(minHeight);
-    }
-
-    public function setMargin(margin:Box):Geometry {
-        this.margin = margin;
-        return this;
-    }
-
-    public function setPadding(padding:Box):Geometry {
-        this.padding = padding;
-        return this;
-    }
-
-    public function setAlign(hAlign:HAlign, vAlign:VAlign):Geometry {
-        this.hAlign = hAlign;
-        this.vAlign = vAlign;
-        return this;
-    }
-
-    public function setPosition(position:Position):Geometry {
-        this.position = position;
-        return this;
-    }
-
-    public function setSize(width:ASizeValue, height:ASizeValue):Geometry {
-        this.size.width = width;
-        this.size.height = height;
-        return this;
-    }
-
-    public function setRatio(ratio:Float):Geometry {
-        this.size.ratio = ratio;
-        return this;
-    }
-}

src/main/haxework/view/form/SelectView.hx

@@ -3,7 +3,7 @@ package haxework.view.form;
 import flash.events.MouseEvent;
 import flash.geom.Point;
 import haxework.signal.Signal;
-import haxework.view.core.Geometry.Position;
+import haxework.view.geometry.Geometry.Position;
 import haxework.view.core.HAlign;
 import haxework.view.data.DataView;
 import haxework.view.group.GroupView;

src/main/haxework/view/geometry/Box.hx

@@ -1,4 +1,4 @@
-package haxework.view.core;
+package haxework.view.geometry;
 
 abstract Box(Array<Float>) {
     public var left(get, set):Float;

src/main/haxework/view/geometry/Geometry.hx

@@ -0,0 +1,55 @@
+package haxework.view.geometry;
+
+class Geometry {
+    public var width(default, default):SizeValue;
+    public var height(default, default):SizeValue;
+    public var padding(default, default):Box;
+    public var margin(default, default):Box;
+    public var hAlign(default, default):HAlign;
+    public var vAlign(default, default):VAlign;
+    public var position(default, default):Position;
+    public var ratio(default, default):Float;
+
+    public function new() {
+        this.padding = [];
+        this.margin = [];
+        this.width = 0;
+        this.height = 0;
+        this.hAlign = HAlign.NONE;
+        this.vAlign = VAlign.NONE;
+        this.position = Position.LAYOUT;
+        this.ratio = -1;
+    }
+
+    public function setSize(width:SizeValue, height:SizeValue):Geometry {
+        this.width = width;
+        this.height = height;
+        return this;
+    }
+
+    public function setMargin(margin:Box):Geometry {
+        this.margin = margin;
+        return this;
+    }
+
+    public function setPadding(padding:Box):Geometry {
+        this.padding = padding;
+        return this;
+    }
+
+    public function setAlign(hAlign:HAlign, vAlign:VAlign):Geometry {
+        this.hAlign = hAlign;
+        this.vAlign = vAlign;
+        return this;
+    }
+
+    public function setPosition(position:Position):Geometry {
+        this.position = position;
+        return this;
+    }
+
+    public function setRatio(ratio:Float):Geometry {
+        this.ratio = ratio;
+        return this;
+    }
+}

src/main/haxework/view/geometry/HAlign.hx

@@ -1,4 +1,4 @@
-package haxework.view.core;
+package haxework.view.geometry;
 
 @:enum abstract HAlign(String) from String to String {
     var NONE = "none";

src/main/haxework/view/geometry/Position.hx

@@ -0,0 +1,6 @@
+package haxework.view.geometry;
+
+@:enum abstract Position(String) from String to String {
+    var LAYOUT = "layout";
+    var ABSOLUTE = "absolute";
+}

src/main/haxework/view/geometry/Size.hx

@@ -1,4 +1,4 @@
-package haxework.view.core;
+package haxework.view.geometry;
 
 abstract Size(Array<Float>) {
     public var width(get, set):Float;
@@ -37,6 +37,10 @@ abstract Size(Array<Float>) {
         }
     }
 
+    @:to public inline function toArray():Array<Float> {
+        return this;
+    }
+
     @:from static public inline function fromArray(value:Array<Float>):Size {
         return new Size(value);
     }

src/main/haxework/view/geometry/SizeSet.hx

@@ -0,0 +1,28 @@
+package haxework.view.geometry;
+
+import haxe.ds.StringMap;
+
+class SizeSet extends StringMap<Size> {
+
+    public function new() {
+        super();
+    }
+
+    public function update(value:Size, type:String = "default"):Bool {
+        var existValue = get(type);
+        if (existValue == null || value.width != existValue.width || value.height != existValue.height) {
+            set(type, value);
+            return true;
+        }
+        return false;
+    }
+
+    public function toSize():Size {
+        var result:Size = 0;
+        for (value in iterator()) {
+            result.width = Math.max(result.width, value.width);
+            result.height = Math.max(result.height, value.height);
+        }
+        return result;
+    }
+}

src/main/haxework/view/geometry/SizeValue.hx

@@ -0,0 +1,74 @@
+package haxework.view.geometry;
+
+enum SizeType {
+    FIXED;
+    PERCENT;
+}
+
+abstract SizeValue({type:SizeType, value:Float}) {
+    public var type(get, set):SizeType;
+    public var value(get, set):Float;
+
+    public var fixed(get, set):Float;
+    public var percent(get, set):Float;
+
+    public function new(type:SizeType, value:Float) {
+        this = {type: type, value: value};
+    }
+
+    private inline function get_type():SizeType {
+        return this.type;
+    }
+
+    private inline function set_type(value:SizeType):SizeType {
+        return this.type = value;
+    }
+
+    private inline function get_value():Float {
+        return this.value;
+    }
+
+    private inline function set_value(value:Float):Float {
+        return this.value = value;
+    }
+
+    private inline function get_fixed():Float {
+        return switch type {
+            case FIXED: value;
+            case _: 0;
+        }
+    }
+
+    private inline function set_fixed(value:Float):Float {
+        this.type = FIXED;
+        return this.value = value;
+    }
+
+    private inline function get_percent():Float {
+        return switch type {
+            case PERCENT: value;
+            case _: 0;
+        }
+    }
+
+    private inline function set_percent(value:Float):Float {
+        this.type = PERCENT;
+        return this.value = value;
+    }
+
+    @:from static public inline function fromInt(value:Int):SizeValue {
+        return new SizeValue(FIXED, value);
+    }
+
+    @:from static public inline function fromFloat(value:Float):SizeValue {
+        return new SizeValue(FIXED, value);
+    }
+
+    @:from static public inline function fromString(value:String):SizeValue {
+        if (value.substr(value.length - 1) == "%") {
+            return new SizeValue(PERCENT, Std.parseFloat(value));
+        } else {
+            return new SizeValue(FIXED, Std.parseFloat(value));
+        }
+    }
+}

src/main/haxework/view/geometry/VAlign.hx

@@ -1,4 +1,4 @@
-package haxework.view.core;
+package haxework.view.geometry;
 
 @:enum abstract VAlign(String) from String to String {
     var NONE = "none";

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

@@ -16,7 +16,7 @@ class GroupView extends SpriteView implements IGroupView {
         views = [];
     }
 
-    override private function set_width(value:Float):Float {
+    /*override private function set_width(value:Float):Float {
         if (width != value) {
             width = value;
             toUpdate();
@@ -32,7 +32,7 @@ class GroupView extends SpriteView implements IGroupView {
             toRedraw();
         }
         return height;
-    }
+    }*/
 
     inline private function get_container():DisplayObjectContainer {
         return content;

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

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

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

@@ -1,8 +1,8 @@
 package haxework.view.layout;
 
-import haxework.view.core.Geometry;
+import haxework.view.geometry.HAlign;
-import haxework.view.core.HAlign;
+import haxework.view.geometry.Position;
-import haxework.view.core.VAlign;
+import haxework.view.geometry.VAlign;
 import haxework.view.group.IGroupView;
 
 class DefaultLayout extends Layout {
@@ -15,16 +15,10 @@ class DefaultLayout extends Layout {
             setViewHeight(group, view);
             placeViewHorizontal(group, view);
             placeViewVertical(group, view);
-            switch view.geometry.width {
+            width = Math.max(width, view.width + view.geometry.margin.horizontal);
-                case FIXED(_): width = Math.max(width, view.width + view.geometry.margin.horizontal);
+            height = Math.max(height, view.height + view.geometry.margin.horizontal);
-                case _: width = Math.max(width, view.geometry.minWidth + view.geometry.margin.horizontal);
         }
-            switch view.geometry.height {
+        if (!overflow) group.setSize(width, height, "group");
-                case FIXED(_): height = Math.max(height, view.height + view.geometry.margin.vertical);
-                case _: height = Math.max(height, view.geometry.minHeight + view.geometry.margin.vertical);
-            }
-        }
-        if (!overflow) group.setContentSize(width, height, "group");
     }
 
     private function filterViews(group:IGroupView, views:Array<IView<Dynamic>>):Array<IView<Dynamic>> {
@@ -44,25 +38,11 @@ class DefaultLayout extends Layout {
     }
 
     private function setViewWidth(group:IGroupView, view:IView<Dynamic>):Void {
-        var width = switch view.geometry.width {
+        view.setSize(view.geometry.width.percent / 100 * (group.width - view.geometry.margin.horizontal - group.geometry.padding.horizontal), 0, "percent.width");
-            case FIXED(value):
-                value;
-            case PERCENT(value):
-                var calcWidth = value / 100 * (group.width - view.geometry.margin.horizontal - group.geometry.padding.horizontal);
-                Math.max(view.geometry.minWidth, calcWidth);
-        }
-        view.width = width;
     }
 
     private function setViewHeight(group:IGroupView, view:IView<Dynamic>):Void {
-        var height = switch view.geometry.height {
+        view.setSize(0, view.geometry.height.percent / 100 * (group.height - view.geometry.margin.vertical - group.geometry.padding.vertical), "percent.height");
-            case FIXED(value):
-                value;
-            case PERCENT(value):
-                var calcHeigth = value / 100 * (group.height - view.geometry.margin.vertical - group.geometry.padding.vertical);
-                Math.max(view.geometry.minHeight, calcHeigth);
-        }
-        view.height = height;
     }
 
     private function placeViewHorizontal(group:IGroupView, view:IView<Dynamic>):Void {

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

@@ -1,7 +1,8 @@
 package haxework.view.layout;
 
-import haxework.view.core.Geometry.SizeValue;
+import haxework.view.geometry.HAlign;
-import haxework.view.core.HAlign;
+import haxework.view.geometry.SizeValue;
+import haxework.view.geometry.VAlign;
 import haxework.view.group.IGroupView;
 
 class HorizontalLayout extends DefaultLayout {
@@ -9,43 +10,38 @@ class HorizontalLayout extends DefaultLayout {
     override public function place(group:IGroupView, views:Array<IView<Dynamic>>):Void {
         views = filterViews(group, views);
 
-        var fixedSize:Float = margin * (views.length - 1);
+        var fixedSize:Float = group.geometry.padding.horizontal + margin * (views.length - 1);
-        var leftSize:Float = group.width - group.geometry.padding.horizontal;
+        var leftSize:Float = group.width;
 
-        var maxSize:Float = 0;
+        var maxSize:Float = group.geometry.padding.vertical;
 
         for (view in views) {
             setViewHeight(group, view);
             placeViewVertical(group, view);
-            switch (view.geometry.width) {
+            switch view.geometry.width.type {
-                case PERCENT(value):
+                case PERCENT:
                     leftSize -= (view.geometry.margin.horizontal);
-                case FIXED(value):
+                case FIXED:
-                    fixedSize += (value + view.geometry.margin.horizontal);
+                    fixedSize += (view.width + view.geometry.margin.horizontal);
-            }
-            switch (view.geometry.height) {
-                case FIXED(value):
-                    maxSize = Math.max(maxSize, value + view.geometry.margin.vertical);
-                case _:
-                    maxSize = Math.max(maxSize, view.geometry.minHeight + view.geometry.margin.vertical);
             }
+            maxSize = Math.max(maxSize, view.height + view.geometry.margin.vertical + group.geometry.padding.vertical);
         }
 
-        if (!overflow) group.setContentSize(fixedSize, maxSize, "group");
+        if (!overflow) group.setSize(fixedSize, maxSize, "group");
 
         leftSize -= fixedSize;
         for (view in views) {
-            switch (view.geometry.width) {
+            switch view.geometry.width.type {
-                case PERCENT(value):
+                case PERCENT:
-                    view.width = value / 100 * leftSize;
+                    var result = view.geometry.width.value / 100 * leftSize;
-                    fixedSize += view.width + view.geometry.margin.horizontal;
+                    fixedSize += result + view.geometry.margin.horizontal;
-                case FIXED(value):
+                    view.setSize(result, 0, "percent.width");
-                    view.width = value;
+                case _:
-            }
+            };
         }
 
         var x:Float = 0;
-        switch (hAlign) {
+        switch hAlign {
             case LEFT | NONE: x = group.geometry.padding.left;
             case CENTER: x = (group.width - fixedSize) / 2 + group.geometry.padding.left - group.geometry.padding.right;
             case RIGHT: x = group.width - fixedSize - group.geometry.padding.right;

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

@@ -1,8 +1,8 @@
 package haxework.view.layout;
 
+import haxework.view.geometry.HAlign;
+import haxework.view.geometry.VAlign;
 import haxework.view.group.IGroupView;
-import haxework.view.core.VAlign;
-import haxework.view.core.HAlign;
 
 interface ILayout {
     public var hAlign(default, default):HAlign;

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

@@ -1,7 +1,7 @@
 package haxework.view.layout;
 
-import haxework.view.core.HAlign;
+import haxework.view.geometry.HAlign;
-import haxework.view.core.VAlign;
+import haxework.view.geometry.VAlign;
 import haxework.view.group.IGroupView;
 
 class Layout implements ILayout {

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

@@ -1,7 +1,8 @@
 package haxework.view.layout;
 
-import haxework.view.core.Geometry.SizeValue;
+import haxework.view.geometry.HAlign;
-import haxework.view.core.VAlign;
+import haxework.view.geometry.SizeValue;
+import haxework.view.geometry.VAlign;
 import haxework.view.group.IGroupView;
 
 class VerticalLayout extends DefaultLayout {
@@ -9,43 +10,38 @@ class VerticalLayout extends DefaultLayout {
     override public function place(group:IGroupView, views:Array<IView<Dynamic>>):Void {
         views = filterViews(group, views);
 
-        var fixedSize:Float = margin * (views.length - 1);
+        var fixedSize:Float = group.geometry.padding.vertical + margin * (views.length - 1);
-        var leftSize:Float = group.height - group.geometry.padding.vertical;
+        var leftSize:Float = group.height;
 
-        var maxSize:Float = 0;
+        var maxSize:Float = group.geometry.padding.horizontal;
 
         for (view in views) {
             setViewWidth(group, view);
             placeViewHorizontal(group, view);
-            switch (view.geometry.height) {
+            switch view.geometry.height.type {
-                case PERCENT(value):
+                case PERCENT:
                     leftSize -= (view.geometry.margin.vertical);
-                case FIXED(value):
+                case FIXED:
-                    fixedSize += (value + view.geometry.margin.vertical);
+                    fixedSize += (Math.max(view.geometry.height.value, view.height) + view.geometry.margin.vertical);
-            }
-            switch (view.geometry.width) {
-                case FIXED(value):
-                    maxSize = Math.max(maxSize, value + view.geometry.margin.horizontal);
-                case _:
-                    maxSize = Math.max(maxSize, view.geometry.minWidth + view.geometry.margin.horizontal);
             }
+            maxSize = Math.max(maxSize, view.width + view.geometry.margin.horizontal + group.geometry.padding.horizontal);
         }
 
-        if (!overflow) group.setContentSize(maxSize, fixedSize, "group");
+        if (!overflow) group.setSize(maxSize, fixedSize, "group");
 
         leftSize -= fixedSize;
         for (view in views) {
-            switch (view.geometry.height) {
+           switch view.geometry.height.type {
-                case PERCENT(value):
+                case PERCENT:
-                    view.height = value / 100 * leftSize;
+                    var result = view.geometry.height.value / 100 * leftSize;
-                    fixedSize += view.height + view.geometry.margin.vertical;
+                    fixedSize += result + view.geometry.margin.vertical;
-                case FIXED(value):
+                    view.setSize(0, result, "percent.width");
-                    view.height = value;
+                case _:
-            }
+            };
         }
 
         var y:Float = 0;
-        switch (vAlign) {
+        switch vAlign {
             case TOP | NONE: y = group.geometry.padding.top;
             case MIDDLE: y = (group.height - fixedSize) / 2 + group.geometry.padding.top - group.geometry.padding.bottom;
             case BOTTOM: y = group.height - fixedSize - group.geometry.padding.bottom;

src/main/haxework/view/list/HListView.hx

@@ -1,6 +1,6 @@
 package haxework.view.list;
 
-import haxework.view.core.Geometry.SizeValue;
+import haxework.view.geometry.Geometry.SizeValue;
 import haxework.view.core.HAlign;
 import haxework.view.core.VAlign;
 import haxework.view.layout.HorizontalLayout;

src/main/haxework/view/list/ListView.hx

@@ -3,7 +3,7 @@ package haxework.view.list;
 import flash.events.MouseEvent;
 import haxework.signal.Signal;
 import haxework.utils.NumberUtil;
-import haxework.view.core.Geometry.Position;
+import haxework.view.geometry.Geometry.Position;
 import haxework.view.core.HAlign;
 import haxework.view.core.VAlign;
 import haxework.view.form.ButtonView;

src/main/haxework/view/list/VListView.hx

@@ -1,6 +1,6 @@
 package haxework.view.list;
 
-import haxework.view.core.Geometry.SizeValue;
+import haxework.view.geometry.Geometry.SizeValue;
 import haxework.view.core.HAlign;
 import haxework.view.core.VAlign;
 import haxework.view.layout.HorizontalLayout;

src/main/haxework/view/popup/PopupView.hx

@@ -2,7 +2,7 @@ package haxework.view.popup;
 
 import flash.display.DisplayObject;
 import flash.events.MouseEvent;
-import haxework.view.core.Geometry.Position;
+import haxework.view.geometry.Geometry.Position;
 import haxework.view.group.GroupView;
 import haxework.view.skin.Skin;
 import promhx.Deferred;

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

@@ -2,7 +2,7 @@ package haxework.view.skin;
 
 import haxework.view.core.HAlign;
 import haxework.view.core.VAlign;
-import haxework.view.core.Geometry;
+import haxework.view.geometry.Geometry;
 
 class GeometrySkin implements ISkin<IView<Dynamic>> {
 

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

@@ -1,7 +1,5 @@
 package haxework.view.skin;
 
 interface ISkin<V:IView<Dynamic>> {
-    public function draw(view: V): Void;
+    public function draw(view:V):Void;
 }
-
-typedef SkinSet = Array<ISkin<Dynamic>>;

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

@@ -1,7 +1,7 @@
 package haxework.view.skin;
 
 import flash.display.BitmapData;
-import haxework.view.core.Geometry;
+import haxework.view.geometry.Geometry;
 import haxework.view.form.ButtonView;
 import haxework.view.layout.ILayout;
 import haxework.view.text.ITextView;

src/main/haxework/view/text/FontStyle.hx

@@ -0,0 +1,12 @@
+package haxework.view.text;
+
+import flash.text.TextFormatAlign;
+
+class FontStyle {
+    public var family(default, default):String;
+    public var embed(default, default):Bool;
+    public var color(default, default):Int;
+    public var size(default, default):Int;
+    public var bold(default, default):Bool;
+    public var align(default, default):TextFormatAlign;
+}

src/main/haxework/view/text/ITextView.hx

@@ -2,16 +2,10 @@ package haxework.view.text;
 
 import flash.text.TextField;
 import haxework.view.IView;
-import flash.text.TextFormatAlign;
 
 interface ITextView extends IView<Dynamic> {
+    @:style public var font(default, default):FontStyle;
+
     public var textField(default, null):TextField;
     public var text(get, set):String;
-  public var align(default, set):TextFormatAlign;
-  //ToDo: font properties to object
-  public var fontFamily(default, set):String;
-  public var fontEmbed(default, set):Bool;
-  public var fontColor(default, set):Int;
-  public var fontSize(default, set):Int;
-  public var fontBold(default, set):Bool;
 }

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

@@ -20,12 +20,5 @@ interface ITheme {
     public var font(default, set):ThemeFont;
     public var colors(default, set):ThemeColors;
 
-    public function resolve(id:String):SkinSet;
+    public function bind(styles:Array<String>, view:IView<Dynamic>):Void;
-    public function bind(id:String, view:IView<Dynamic>):Void;
-
-    public function background(?color:Color):SkinSet;
-    public function border(?color:Color):SkinSet;
-    public function text(?color:Color):SkinSet;
-    public function button(?color:Color, ?textColor:Color):SkinSet;
-    public function textBox(?color:Color):SkinSet;
 }

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

@@ -4,13 +4,16 @@ import haxework.resources.Resources.ResMap;
 import flash.text.Font;
 import flash.text.FontType;
 import haxework.color.Color;
-import haxework.view.core.Geometry;
+import haxework.view.geometry.Geometry;
 import haxework.view.skin.ISkin;
 import haxework.view.skin.Skin;
 import haxework.view.theme.ITheme;
 
 using haxework.color.ColorUtil;
 
+//ToDo: temp
+typedef SkinSet = Array<ISkin<Dynamic>>;
+
 class Theme implements ITheme {
     // ToDo: configurable
     public var baseFontSize = 18;
@@ -114,12 +117,8 @@ class Theme implements ITheme {
         ]);
     }
 
-    public function bind(id:String, view:IView<Dynamic>):Void {
+    public function bind(styles:Array<String>, view:IView<Dynamic>):Void {
-        data.bind(id, view, "skin");
+        //data.bind(id, view, "skin");
-    }
-
-    public function resolve(id:String):SkinSet {
-        return data.exists(id) ? data.get(id) : [];
     }
 
     private static function resolveFont(font:ThemeFont):ThemeFont {