From b3196d2295a0799871af59cbca26961b7dfee11d Mon Sep 17 00:00:00 2001
From: shmyga <shmyga.z@gmail.com>
Date: Wed, 27 Feb 2019 18:00:48 +0300
Subject: [PATCH] [gui] update

---
 demo/src/demo/Demo.hx                         |  24 +++-
 demo/src/demo/Demo.yaml                       |  10 +-
 demo/src/demo/form/ListForm.hx                |  11 --
 demo/src/demo/form/ListForm.yaml              |   9 +-
 demo/src/haxe-logo.png                        | Bin 0 -> 10927 bytes
 src/main/haxework/gui/ImageView.hx            |  52 ++++----
 src/main/haxework/gui/InputView.hx            | 124 ++++++++----------
 src/main/haxework/gui/LabelView.hx            |   5 +
 src/main/haxework/gui/TextView.hx             |  35 +++--
 src/main/haxework/gui/View.hx                 |   4 +-
 src/main/haxework/gui/core/Geometry.hx        |   4 +
 src/main/haxework/gui/list/HListView.hx       |  40 +++---
 src/main/haxework/gui/list/LabelListItem.hx   |   4 +-
 src/main/haxework/gui/list/ListView.hx        |   4 +-
 src/main/haxework/gui/list/VListView.hx       |  40 +++---
 src/main/haxework/gui/skin/BitmapSkin.hx      |   6 +-
 .../haxework/gui/skin/ButtonBitmapSkin.hx     |   6 +-
 src/main/haxework/resources/Resources.hx      |   1 +
 18 files changed, 204 insertions(+), 175 deletions(-)
 create mode 100644 demo/src/haxe-logo.png

diff --git a/demo/src/demo/Demo.hx b/demo/src/demo/Demo.hx
index 029a556..1bc514c 100644
--- a/demo/src/demo/Demo.hx
+++ b/demo/src/demo/Demo.hx
@@ -1,5 +1,7 @@
 package demo;
 
+import haxework.gui.InputView;
+import flash.display.BitmapData;
 import haxework.gui.ToggleButtonView;
 import haxework.gui.IGroupView;
 import haxework.gui.IView;
@@ -12,6 +14,9 @@ import haxework.log.TraceLogger;
 import haxework.gui.Root;
 import haxework.gui.VGroupView;
 
+@:bitmap("haxe-logo.png")
+class HaxeLogo extends BitmapData { }
+
 @:template class Demo extends VGroupView {
 
     @:provide static var resources:IResources;
@@ -21,14 +26,29 @@ import haxework.gui.VGroupView;
         L.push(new TraceLogger());
         resources = new Resources();
         manager = new LoaderManager();
-        Theme.setColor(0x33aa33);
+        resources.image.put("logo", new HaxeLogo(0, 0));
         var demo = new Demo();
-        demo.switcher.change("tail_form");
+        demo.switcher.change("list_form");
         Root.bind(demo);
     }
 
     @:view var switcher:IFrameSwitcher;
     @:view var tabs:IGroupView;
+    @:view var color:InputView;
+
+    private var themeColor(default, set):Int;
+
+    private function init():Void {
+        resources.color.bind("theme", this, "themeColor");
+        resources.color.put("theme", 0x33aa33);
+    }
+
+    private function set_themeColor(value:Int):Int {
+        themeColor = value;
+        Theme.setColor(value);
+        this.color.text = StringTools.hex(value);
+        return themeColor;
+    }
 
     private function onFrameSwicth(frame:IView<Dynamic>):Void {
         for (view in tabs.views) cast(view, ToggleButtonView).on = view.id == frame.id;
diff --git a/demo/src/demo/Demo.yaml b/demo/src/demo/Demo.yaml
index 41f212f..de748c0 100644
--- a/demo/src/demo/Demo.yaml
+++ b/demo/src/demo/Demo.yaml
@@ -2,12 +2,14 @@
 skin: $r:skin:background
 geometry.size.stretch: true
 views:
+    - $type: haxework.gui.ImageView
+      geometry.padding: 10
+      image: $r:image:logo
     - id: tabs
       $type: haxework.gui.HGroupView
       layout.margin: 5
       layout.hAlign: LEFT
       geometry.size.percent.width: 100
-      geometry.padding.top: 10
       geometry.padding.left: 5
       views:
           - id: list_form
@@ -50,6 +52,12 @@ views:
       layout.hAlign: RIGHT
       layout.margin: 10
       views:
+          - id: color
+            $type: haxework.gui.InputView
+            skin: [ { $type: [haxework.gui.skin.Skin.border, 0xffffff] } ]
+            +onChange: "$code:function(a) resources.color.put('theme', Std.parseInt('0x'+a))"
+            fontColor: 0xffffff
+            geometry.size.percent.width: 100
           - $type: haxework.gui.ButtonView
             geometry.padding: [25, 8]
             skin: $r:skin:button
diff --git a/demo/src/demo/form/ListForm.hx b/demo/src/demo/form/ListForm.hx
index bed90a6..7b3470f 100644
--- a/demo/src/demo/form/ListForm.hx
+++ b/demo/src/demo/form/ListForm.hx
@@ -1,8 +1,5 @@
 package demo.form;
 
-import flash.display.Sprite;
-import haxework.gui.ButtonView;
-import haxework.gui.IView;
 import haxework.gui.list.ListView.IListItemView;
 import haxework.gui.list.VListView;
 import haxework.gui.VGroupView;
@@ -10,10 +7,6 @@ import haxework.net.JsonLoader;
 
 @:template class ListForm extends VGroupView {
     @:view public var list(default, null):VListView<String>;
-    @:view public var panel(default, null):IView<Sprite>;
-    @:view public var button1(default, null):ButtonView;
-    @:view public var button2(default, null):ButtonView;
-    @:view public var button3(default, null):ButtonView;
 
     private function init() {
         new JsonLoader().GET("http://umix.tv/channel/data2/renova.json")
@@ -23,10 +16,6 @@ import haxework.net.JsonLoader;
             .catchError(function(error) trace(error));
     }
 
-    private function onPress(view:ButtonView):Void {
-        trace('onPress: ${view.id}');
-    }
-
     private function onItemSelect(item:IListItemView<String>):Void {
         trace('onItemSelect: ${item.data}');
     }
diff --git a/demo/src/demo/form/ListForm.yaml b/demo/src/demo/form/ListForm.yaml
index 7a581e4..7b0dca0 100644
--- a/demo/src/demo/form/ListForm.yaml
+++ b/demo/src/demo/form/ListForm.yaml
@@ -1,15 +1,12 @@
 ---
-$type: haxework.gui.VGroupView
-# layoutMargin: 10
 views:
     - id: list
       $type: haxework.gui.list.VListView<String>
       +onItemSelect: $this:onItemSelect
       factory: { $class: haxework.gui.list.LabelListItem }
-      # pWidth: 100
-      # pHeight: 100
+      geometry.size.stretch: true
       scroll:
           $type: haxework.gui.list.VScrollBarView
           skin: $r:skin:scroll
-          # width: 10
-          # pHeight: 100
+          geometry.size.percent.height: 100
+          geometry.size.fixed.width: 10
diff --git a/demo/src/haxe-logo.png b/demo/src/haxe-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3cd9024ed47b0e63d72d7df378f20ed2054c7d3
GIT binary patch
literal 10927
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
O50H~mmaGvs3H~3L^JZ26

literal 0
HcmV?d00001

diff --git a/src/main/haxework/gui/ImageView.hx b/src/main/haxework/gui/ImageView.hx
index 1b6432d..88515ea 100755
--- a/src/main/haxework/gui/ImageView.hx
+++ b/src/main/haxework/gui/ImageView.hx
@@ -1,39 +1,39 @@
 package haxework.gui;
 
-import haxework.net.ImageLoader;
-import haxework.gui.utils.DrawUtil.FillType;
-import haxework.gui.skin.BitmapSkin;
-import haxework.gui.skin.ButtonBitmapSkin;
 import flash.display.BitmapData;
+import haxework.gui.skin.BitmapSkin;
+import haxework.gui.utils.DrawUtil.FillType;
+import haxework.net.ImageLoader;
 
 class ImageView extends SpriteView {
 
-  public var image(default, set):BitmapData;
-  public var imageUrl(default, set):String;
+    public var image(default, set):BitmapData;
+    public var imageUrl(default, set):String;
 
-  public function new(?image:BitmapData) {
-    super();
-    if (image != null) {
-      this.image = image;
+    public function new(?image:BitmapData) {
+        super();
+        if (image != null) {
+            this.image = image;
+        }
     }
-  }
 
-  private function set_image(value:BitmapData):BitmapData {
-    if (image != value) {
-      image = value;
-      skin = [new BitmapSkin(image, FillType.CONTAIN)];
-      invalidate();
+    private function set_image(value:BitmapData):BitmapData {
+        if (image != value) {
+            image = value;
+            skin = [new BitmapSkin(image, FillType.DEFAULT)];
+            toUpdate();
+            toRedraw();
+        }
+        return image;
     }
-    return image;
-  }
 
-  private function set_imageUrl(value:String):String {
-    if (imageUrl != value) {
-      imageUrl = value;
-      new ImageLoader().GET(imageUrl).then(function(data) {
-        image = data;
-      });
+    private function set_imageUrl(value:String):String {
+        if (imageUrl != value) {
+            imageUrl = value;
+            new ImageLoader().GET(imageUrl).then(function(data) {
+                image = data;
+            });
+        }
+        return imageUrl;
     }
-    return imageUrl;
-  }
 }
diff --git a/src/main/haxework/gui/InputView.hx b/src/main/haxework/gui/InputView.hx
index 190e0e6..5d33ade 100755
--- a/src/main/haxework/gui/InputView.hx
+++ b/src/main/haxework/gui/InputView.hx
@@ -1,8 +1,7 @@
 package haxework.gui;
 
+import haxework.signal.Signal;
 import flash.text.TextFormatAlign;
-import haxework.dispath.Dispatcher;
-import haxework.dispath.IDispatcher;
 import flash.events.Event;
 import flash.text.TextFormat;
 import flash.text.TextFieldAutoSize;
@@ -15,81 +14,70 @@ import flash.text.TextFieldType;
 
 class InputView extends TextView implements IDisposable {
 
-  public var hint(default, set):String;
-  public var dispatcher(default, null):IDispatcher<InputViewListener>;
-  public var onKeyUp(null, set):InputViewListener;
+    public var hint(default, set):String;
+    public var onChange(default, null):Signal<String> = new Signal();
 
-  private var hintTextField:TextField;
+    private var hintTextField:TextField;
 
-  public function new() {
-    super();
-    dispatcher = new Dispatcher<InputViewListener>();
-    textField.addEventListener(Event.CHANGE, onTextChange);
-    textField.addEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
-    textField.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
+    public function new() {
+        super();
+        textField.addEventListener(Event.CHANGE, onTextChange);
+        textField.addEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
+        textField.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
 
-    hintTextField = buildHintTextField();
-    content.addChild(hintTextField);
-    textFormat.align = TextFormatAlign.LEFT;
-  }
-
-  override private function buildTextField():TextField {
-    return new InputTextField();
-  }
-
-  private function set_hint(value:String):String {
-    if (hint != value) {
-      hint = value;
-      invalidate();
+        hintTextField = buildHintTextField();
+        content.addChild(hintTextField);
+        textFormat.align = TextFormatAlign.LEFT;
     }
-    return hint;
-  }
 
-  private function buildHintTextField():TextField {
-    var textField:TextField = new TextField();
-    textField.autoSize = TextFieldAutoSize.NONE;
-    textField.type = TextFieldType.DYNAMIC;
-    textField.multiline = false;
-    textField.defaultTextFormat = new TextFormat("Arial", 16, 0xa0a0a0);
-    textField.mouseEnabled = false;
-    return textField;
-  }
+    override private function buildTextField():TextField {
+        return new InputTextField();
+    }
 
-  private function onTextChange(event:Event):Void {
-    hintTextField.visible = (textField.text == "");
-  }
+    private function set_hint(value:String):String {
+        if (hint != value) {
+            hint = value;
+            toUpdate();
+        }
+        return hint;
+    }
 
-  private function _onKeyUp(event:KeyboardEvent):Void {
-    event.stopImmediatePropagation();
-    dispatcher.dispatch(function(listener) listener.onKeyUp(textField.text));
-  }
+    private function buildHintTextField():TextField {
+        var textField:TextField = new TextField();
+        textField.autoSize = TextFieldAutoSize.NONE;
+        textField.type = TextFieldType.DYNAMIC;
+        textField.multiline = false;
+        textField.defaultTextFormat = new TextFormat("Arial", 16, 0xa0a0a0);
+        textField.mouseEnabled = false;
+        return textField;
+    }
 
-  private function onKeyDown(event:KeyboardEvent):Void {
-    event.stopImmediatePropagation();
-  }
+    private function onTextChange(event:Event):Void {
+        hintTextField.visible = (textField.text == "");
+    }
 
-  override public function update():Void {
-    super.update();
-    var htf:TextFormat = textField.defaultTextFormat;
-    htf.color = 0xa0a0a0;
-    htf.size -= 2;
-    hintTextField.defaultTextFormat = htf;
-    hintTextField.text = hint == null ? "" : hint;
-    placeTextField(hintTextField);
-  }
+    private function _onKeyUp(event:KeyboardEvent):Void {
+        event.stopImmediatePropagation();
+        onChange.emit(textField.text);
+    }
 
-  public function dispose():Void {
-    textField.removeEventListener(Event.CHANGE, onTextChange);
-    textField.removeEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
-    textField.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
-  }
+    private function onKeyDown(event:KeyboardEvent):Void {
+        event.stopImmediatePropagation();
+    }
 
-  private function set_onKeyUp(value:InputViewListener):InputViewListener {
-    dispatcher.addListener(value);
-    return value;
-  }
-}
-
-typedef InputViewListener = {
-  public function onKeyUp(text:String):Void;
+    override public function update():Void {
+        super.update();
+        var htf:TextFormat = textField.defaultTextFormat;
+        htf.color = 0xa0a0a0;
+        htf.size -= 2;
+        hintTextField.defaultTextFormat = htf;
+        hintTextField.text = hint == null ? "" : hint;
+        placeTextField(hintTextField);
+    }
+
+    public function dispose():Void {
+        textField.removeEventListener(Event.CHANGE, onTextChange);
+        textField.removeEventListener(KeyboardEvent.KEY_UP, _onKeyUp);
+        textField.removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
+    }
 }
diff --git a/src/main/haxework/gui/LabelView.hx b/src/main/haxework/gui/LabelView.hx
index d9f6d9c..00b3f84 100755
--- a/src/main/haxework/gui/LabelView.hx
+++ b/src/main/haxework/gui/LabelView.hx
@@ -1,5 +1,8 @@
 package haxework.gui;
 
+import haxework.gui.core.VAlign;
+import haxework.gui.core.HAlign;
+
 class LabelView extends TextView {
 
     public function new() {
@@ -8,5 +11,7 @@ class LabelView extends TextView {
         textField.selectable = false;
         textField.wordWrap = false;
         textField.multiline = true;
+        layout.hAlign = HAlign.CENTER;
+        layout.vAlign = VAlign.MIDDLE;
     }
 }
diff --git a/src/main/haxework/gui/TextView.hx b/src/main/haxework/gui/TextView.hx
index fb43fb2..c5c13f0 100755
--- a/src/main/haxework/gui/TextView.hx
+++ b/src/main/haxework/gui/TextView.hx
@@ -1,5 +1,7 @@
 package haxework.gui;
 
+import haxework.gui.core.VAlign;
+import haxework.gui.core.HAlign;
 import flash.text.TextField;
 import flash.text.TextFieldAutoSize;
 import flash.text.TextFormat;
@@ -7,10 +9,19 @@ import flash.text.TextFormatAlign;
 import haxework.text.BitmapTextField;
 import haxework.text.TextUtil;
 
+class TextLayout {
+    public var hAlign(default, default):HAlign = HAlign.NONE;
+    public var vAlign(default, default):VAlign = VAlign.NONE;
+
+    public function new() {}
+}
+
 class TextView extends SpriteView implements ITextView {
 
     public var textField(default, null):TextField;
     public var text(get, set):String;
+    public var layout:TextLayout;
+
     private var _text:String;
     public var align(default, set):TextFormatAlign;
     public var fontFamily(default, set):String;
@@ -28,6 +39,7 @@ class TextView extends SpriteView implements ITextView {
 
     public function new() {
         super();
+        layout = new TextLayout();
         textField = buildTextField();
         textField.width = 1;
         textField.height = 1;
@@ -144,6 +156,7 @@ class TextView extends SpriteView implements ITextView {
         if (t != null) textField.text = t;
         textField.setTextFormat(textFormat);
         updateTextSize();
+        placeTextField(textField);
         /*if (false && _text != null && _text.length > 0) {
             #if html5
             var h = _textHeight;
@@ -170,23 +183,23 @@ class TextView extends SpriteView implements ITextView {
     }
 
     private function placeTextField(textField:TextField):Void {
-        /*textField.width = width;
-        textField.height = _textHeight;
+        textField.width = width;
+        textField.height = geometry.size.content.height;
 
-        textField.x = switch (layoutHAlign) {
+        textField.x = switch (layout.hAlign) {
             case HAlign.NONE: 0;
-            case HAlign.LEFT: leftPadding;
-            case HAlign.CENTER: (width - textField.width) / 2 + leftPadding - rightPadding;
-            case HAlign.RIGHT: width - textField.width - rightPadding;
+            case HAlign.LEFT: geometry.padding.left;
+            case HAlign.CENTER: (width - textField.width) / 2 + geometry.padding.left - geometry.padding.right;
+            case HAlign.RIGHT: width - textField.width - geometry.padding.right;
             default: 0;
         }
-        textField.y = switch (layoutVAlign) {
+        textField.y = switch (layout.vAlign) {
             case VAlign.NONE: 0;
-            case VAlign.TOP: topPadding;
-            case VAlign.MIDDLE: (height - _textHeight) / 2 + topPadding - bottomPadding;
-            case VAlign.BOTTOM: height - _textHeight - bottomPadding;
+            case VAlign.TOP: geometry.padding.top;
+            case VAlign.MIDDLE: (height - geometry.size.content.height) / 2 + geometry.padding.top - geometry.padding.bottom;
+            case VAlign.BOTTOM: height - geometry.size.content.height - geometry.padding.bottom;
             default: 0;
-        }*/
+        }
     }
 
     override private function set_mouseEnabled(value:Bool):Bool {
diff --git a/src/main/haxework/gui/View.hx b/src/main/haxework/gui/View.hx
index 0f299df..c761e1f 100755
--- a/src/main/haxework/gui/View.hx
+++ b/src/main/haxework/gui/View.hx
@@ -84,7 +84,7 @@ class View<C:DisplayObject> implements IView<C> {
     }
 
     private function set_width(value:Float):Float {
-        trace('${this.id}.width = $value');
+        //trace('${this.id}.width = $value');
         if (width != value) {
             width = value;
             toRedraw();
@@ -93,7 +93,7 @@ class View<C:DisplayObject> implements IView<C> {
     }
 
     private function set_height(value:Float):Float {
-        trace('${this.id}.height = $value');
+        //trace('${this.id}.height = $value');
         if (height != value) {
             height = value;
             toRedraw();
diff --git a/src/main/haxework/gui/core/Geometry.hx b/src/main/haxework/gui/core/Geometry.hx
index 586a9a6..3a111aa 100644
--- a/src/main/haxework/gui/core/Geometry.hx
+++ b/src/main/haxework/gui/core/Geometry.hx
@@ -33,6 +33,10 @@ abstract Size(Array<Float>) {
     @:from static public inline function fromArray(value:Array<Float>):Size {
         return new Size(value);
     }
+
+    @:from static public inline function fromFloat(value:Float):Size {
+        return new Size([value]);
+    }
 }
 
 enum SizeValue {
diff --git a/src/main/haxework/gui/list/HListView.hx b/src/main/haxework/gui/list/HListView.hx
index 1054242..1f6b6da 100755
--- a/src/main/haxework/gui/list/HListView.hx
+++ b/src/main/haxework/gui/list/HListView.hx
@@ -1,5 +1,6 @@
 package haxework.gui.list;
 
+import haxework.gui.core.Geometry.SizeValue;
 import haxework.gui.core.HAlign;
 import haxework.gui.core.VAlign;
 import haxework.gui.layout.HorizontalLayout;
@@ -8,25 +9,28 @@ import haxework.gui.list.ListView.IListItemView;
 
 class HListView<D> extends ListView<D> {
 
-  public function new() {
-    super(new HorizontalLayout(), new VerticalLayout());
-    //box.layoutHAlign = HAlign.LEFT;
-    //box.layoutVAlign = VAlign.MIDDLE;
-  }
+    public function new() {
+        super(new VerticalLayout(), new HorizontalLayout());
+        box.layout.hAlign = HAlign.LEFT;
+        box.layout.vAlign = VAlign.MIDDLE;
+    }
 
-  override private function recalcSize(item:IListItemView<D>):Void {
-    /*itemSize = item.width + item.leftMargin + item.rightMargin + box.layoutMargin;
-    size = Math.ceil(Math.max(0, box.width / itemSize)) + 2;
-    sizeDiff = size - ((box.width - box.layoutMargin - 1) / itemSize);*/
-  }
+    override private function recalcSize(item:IListItemView<D>):Void {
+        var itemSize = switch(item.geometry.width) {
+            case SizeValue.FIXED(value): value + item.geometry.margin.horizontal + box.layout.margin;
+            case _: 0;
+        }
+        size = Math.ceil(Math.max(0, box.width / itemSize)) + 2;
+        sizeDiff = size - ((box.width - box.layout.margin - 1) / itemSize);
+    }
 
-  override private function set_offsetDiff(value:Float):Float {
-    /*box.leftPadding = -value * itemSize;
-    mask.leftMargin = -box.leftPadding;*/
-    return super.set_offsetDiff(value);
-  }
+    override private function set_offsetDiff(value:Float):Float {
+        box.geometry.padding.left = -value * itemSize;
+        mask.geometry.margin.left = -box.geometry.padding.left;
+        return super.set_offsetDiff(value);
+    }
 
-  override private function onMouseWheel(value:Int):Void {
-    offset = offset + value;
-  }
+    override private function onMouseWheel(value:Int):Void {
+        offset = offset - value;
+    }
 }
diff --git a/src/main/haxework/gui/list/LabelListItem.hx b/src/main/haxework/gui/list/LabelListItem.hx
index f0915f9..b2e06a1 100644
--- a/src/main/haxework/gui/list/LabelListItem.hx
+++ b/src/main/haxework/gui/list/LabelListItem.hx
@@ -10,8 +10,8 @@ class LabelListItem<T> extends LabelView implements IListItemView<T> {
 
     public function new() {
         super();
-        height = 20;
-        //pWidth = 100;
+        geometry.size.percent.width = 100;
+        geometry.size.fixed.height = 20;
     }
     private function set_data(value:T):T {
         data = value;
diff --git a/src/main/haxework/gui/list/ListView.hx b/src/main/haxework/gui/list/ListView.hx
index d437276..d40dafe 100755
--- a/src/main/haxework/gui/list/ListView.hx
+++ b/src/main/haxework/gui/list/ListView.hx
@@ -41,8 +41,8 @@ class ListView<D> extends GroupView {
     public function new(layout:ILayout, otherLayout:ILayout) {
         super(otherLayout);
         main = new GroupView(layout);
-        //main.layoutHAlign = HAlign.CENTER;
-        //main.layoutVAlign = VAlign.MIDDLE;
+        main.layout.hAlign = HAlign.CENTER;
+        main.layout.vAlign = VAlign.MIDDLE;
         main.geometry.size.stretch = true;
         addView(main);
         box = new GroupView(layout);
diff --git a/src/main/haxework/gui/list/VListView.hx b/src/main/haxework/gui/list/VListView.hx
index 93747e8..ea18295 100755
--- a/src/main/haxework/gui/list/VListView.hx
+++ b/src/main/haxework/gui/list/VListView.hx
@@ -1,5 +1,6 @@
 package haxework.gui.list;
 
+import haxework.gui.core.Geometry.SizeValue;
 import haxework.gui.core.HAlign;
 import haxework.gui.core.VAlign;
 import haxework.gui.layout.HorizontalLayout;
@@ -8,25 +9,28 @@ import haxework.gui.list.ListView.IListItemView;
 
 class VListView<D> extends ListView<D> {
 
-  public function new() {
-    super(new VerticalLayout(), new HorizontalLayout());
-    //box.layoutHAlign = HAlign.CENTER;
-    //box.layoutVAlign = VAlign.TOP;
-  }
+    public function new() {
+        super(new VerticalLayout(), new HorizontalLayout());
+        box.layout.hAlign = HAlign.CENTER;
+        box.layout.vAlign = VAlign.TOP;
+    }
 
-  override private function recalcSize(item:IListItemView<D>):Void {
-    /*itemSize = item.height + item.topMargin + item.bottomMargin + box.layoutMargin;
-    size = Math.ceil(Math.max(0, box.height / itemSize)) + 2;
-    sizeDiff = size - ((box.height - box.layoutMargin - 1) / itemSize);*/
-  }
+    override private function recalcSize(item:IListItemView<D>):Void {
+        var itemSize = switch(item.geometry.height) {
+            case SizeValue.FIXED(value): value + item.geometry.margin.vertical + box.layout.margin;
+            case _: 0;
+        }
+        size = Math.ceil(Math.max(0, box.height / itemSize)) + 2;
+        sizeDiff = size - ((box.height - box.layout.margin - 1) / itemSize);
+    }
 
-  override private function set_offsetDiff(value:Float):Float {
-    /*box.topPadding = -value * itemSize;
-    mask.topMargin = -box.topPadding;*/
-    return super.set_offsetDiff(value);
-  }
+    override private function set_offsetDiff(value:Float):Float {
+        box.geometry.padding.top = -value * itemSize;
+        mask.geometry.margin.top = -box.geometry.padding.top;
+        return super.set_offsetDiff(value);
+    }
 
-  override private function onMouseWheel(value:Int):Void {
-    offset = offset - value;
-  }
+    override private function onMouseWheel(value:Int):Void {
+        offset = offset - value;
+    }
 }
diff --git a/src/main/haxework/gui/skin/BitmapSkin.hx b/src/main/haxework/gui/skin/BitmapSkin.hx
index 13e260f..e81d0ce 100755
--- a/src/main/haxework/gui/skin/BitmapSkin.hx
+++ b/src/main/haxework/gui/skin/BitmapSkin.hx
@@ -33,9 +33,7 @@ class BitmapSkin implements ISkin<SpriteView> {
     public function draw(view:SpriteView):Void {
         if (image == null) return;
         DrawUtil.draw(view.content.graphics, image, new Rectangle(0, 0, view.width, view.height), fillType, color);
-        /*if (view.contentSize) {
-            view.w = image.width;
-            view.h = image.height;
-        }*/
+        view.geometry.size.content.width = image.width;
+        view.geometry.size.content.height = image.height;
     }
 }
diff --git a/src/main/haxework/gui/skin/ButtonBitmapSkin.hx b/src/main/haxework/gui/skin/ButtonBitmapSkin.hx
index e7bcd5c..fc6fec4 100755
--- a/src/main/haxework/gui/skin/ButtonBitmapSkin.hx
+++ b/src/main/haxework/gui/skin/ButtonBitmapSkin.hx
@@ -62,10 +62,8 @@ class ButtonBitmapSkin implements ISkin<ButtonView> {
         if (images == null) return;
         var image:BitmapData = view.disabled ? disableImage == null ? disable : disableImage : images.get(view.state);
         DrawUtil.draw(view.content.graphics, image, new Rectangle(0, 0, view.width, view.height), fillType, color);
-        if (view.contentSize) {
-            view.w = image.width;
-            view.h = image.height;
-        }
+        view.geometry.size.content.width = image.width;
+        view.geometry.size.content.height = image.height;
     }
 
 }
diff --git a/src/main/haxework/resources/Resources.hx b/src/main/haxework/resources/Resources.hx
index 9cac845..f1fe3a0 100755
--- a/src/main/haxework/resources/Resources.hx
+++ b/src/main/haxework/resources/Resources.hx
@@ -18,6 +18,7 @@ class ResMap<T> extends StringMap<T> {
     }
 
     public function put(key:String, value:T):Void {
+        trace(key, value);
         set(key, value);
         if (listeners.exists(key)) {
             for (f in listeners.get(key)) call(f, value);