[gui] layouts fixes

demo/project.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<project>
+    <meta title="Demo" package="haxework.demo" version="1.0.0" company="MegaLoMania"/>
+    <app main="demo.Demo" path="target" file="demo"/>
+    <!--<icon path="/opt/repo/games/tankz/src/client/resources/image/tank/pd-0.png"/>-->
+    
+    <source path="../src/main"/>
+    <source path="src"/>
+    <assets path="src" rename="image" include="*.png"/>
+    
+    <haxelib name="lime" version="7.2.1"/>
+    <haxelib name="openfl" version="8.8.0"/>
+    <haxelib name="hxcpp" version="4.0.8"/>
+    <haxelib name="promhx" version="1.1.0"/>
+    <haxelib name="yaml" version="1.3.0"/>
+
+    <haxeflag name="--macro" value="haxework.parser.Parser.auto()"/>
+    <haxeflag name="--macro" value="CompilationOption.set('build','2019-02-28 14:16:02')"/>
+
+    <window fps="30"/>
+    <window width="1024" height="768" unless="html5"/>
+
+    <haxeflag name="-D" value="swf-gpu"/>
+    <haxeflag name="-D" value="native-trace"/>
+    <haxeflag name="-dce" value="no"/>
+</project>

demo/run.sh

@@ -1,4 +1,5 @@
 #!/usr/bin/env bash
 echo "`pwd`/target" > ~/.macromedia/Flash_Player/#Security/FlashPlayerTrust/haxework_demo.cfg
 . /opt/sdk/haxe/3.4.7/activate
-haxe build.hxml && flashplayerdebugger target/demo.swf
+haxe build.hxml && flashplayerdebugger target/demo.swf &
+tail -f ~/.macromedia/Flash_Player/Logs/flashlog.txt

demo/run_openfl.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+echo "`pwd`/target/flash/bin" > ~/.macromedia/Flash_Player/#Security/FlashPlayerTrust/haxework_demo.cfg
+. /opt/sdk/haxe/3.4.7/activate
+haxelib run openfl test linux

demo/src/demo/Demo.hx

@@ -1,21 +1,16 @@
 package demo;
 
-import haxework.gui.InputView;
+import haxework.gui.frame.IFrameSwitcher;
-import flash.display.BitmapData;
-import haxework.gui.ToggleButtonView;
 import haxework.gui.IGroupView;
 import haxework.gui.IView;
-import haxework.resources.Resources;
-import haxework.resources.IResources;
-import haxework.gui.frame.IFrameSwitcher;
-import haxework.net.manage.LoaderManager;
-import haxework.net.manage.ILoaderManager;
-import haxework.log.TraceLogger;
 import haxework.gui.Root;
+import haxework.gui.ToggleButtonView;
 import haxework.gui.VGroupView;
-
+import haxework.log.TraceLogger;
-@:bitmap("haxe-logo.png")
+import haxework.net.manage.ILoaderManager;
-class HaxeLogo extends BitmapData { }
+import haxework.net.manage.LoaderManager;
+import haxework.resources.IResources;
+import haxework.resources.Resources;
 
 @:template class Demo extends VGroupView {
 
@@ -26,29 +21,16 @@ class HaxeLogo extends BitmapData { }
         L.push(new TraceLogger());
         resources = new Resources();
         manager = new LoaderManager();
-        resources.image.put("logo", new HaxeLogo(0, 0));
+        resources.image.put("logo", HaxeLogo.resolve());
+        Theme.setColor(0x33aa33);
         var demo = new Demo();
         demo.switcher.change("list_form");
         Root.bind(demo);
+        Root.instance.onResize.connect(function(rect) trace("resize", rect));
     }
 
     @: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;

demo/src/demo/Demo.yaml

@@ -49,32 +49,31 @@ views:
     - $type: haxework.gui.HGroupView
       geometry.size.percent.width: 100
       geometry.padding: 10
-      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
             text: green
-            +onPress: "$code:Theme.setColor(0x33aa33)"
+            +onPress: "$code:Theme.setColor(0x33AA33)"
           - $type: haxework.gui.ButtonView
             geometry.padding: [25, 8]
             skin: $r:skin:button
             text: red
-            +onPress: "$code:Theme.setColor(0xaa3333)"
+            +onPress: "$code:Theme.setColor(0xAA3333)"
           - $type: haxework.gui.ButtonView
             geometry.padding: [25, 8]
             skin: $r:skin:button
             text: yellow
-            +onPress: "$code:Theme.setColor(0xaaaa33)"
+            +onPress: "$code:Theme.setColor(0xFFCC55, 0x555555)"
-            geometry.margin.right: 20
+          - $type: haxework.gui.ButtonView
-
+            geometry.padding: [25, 8]
+            skin: $r:skin:button
+            text: pink
+            +onPress: "$code:Theme.setColor(0xCC33AA)"
+            # separator
+          - $type: haxework.gui.SpriteView
+            geometry.size.stretch: true
           - $type: haxework.gui.ButtonView
             geometry.padding: [25, 8]
             skin: $r:skin:button

demo/src/demo/HaxeLogo.hx

@@ -0,0 +1,17 @@
+package demo;
+
+import flash.display.BitmapData;
+
+#if !openfl
+@:bitmap("haxe-logo.png")
+#end
+class HaxeLogo extends BitmapData {
+
+    public static function resolve():BitmapData {
+        #if openfl
+        return openfl.Assets.getBitmapData("image/haxe-logo.png");
+        #else
+        return new HaxeLogo(0, 0);
+        #end
+    }
+}

src/main/haxework/gui/Root.hx

@@ -1,60 +1,73 @@
 package haxework.gui;
 
-import flash.errors.Error;
+import flash.display.DisplayObject;
-import flash.Lib;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
-import flash.display.DisplayObject;
+import flash.errors.Error;
 import flash.events.Event;
-import flash.display.Sprite;
+import flash.geom.Rectangle;
+import flash.Lib;
+import haxework.core.IDisposable;
+import haxework.signal.Signal;
 
-class Root {
+class Root implements IDisposable {
 
-  public static function bind(view:IView<Dynamic>, autoSize:Bool = true) {
+    public static function bind(view:IView<Dynamic>, autoSize:Bool = true) {
-    new Root(view, autoSize);
+        new Root(view, autoSize);
-  }
-
-  public static var instance(default, null):Root;
-
-  public var view(default, null):IView<Dynamic>;
-  public var autoSize(default, default):Bool;
-
-  public function new(view:IView<Dynamic>, autoSize:Bool = true) {
-    if (instance != null) throw new Error("Only one instance");
-    instance = this;
-    this.view = view;
-    this.autoSize = autoSize;
-    Lib.current.addChild(view.content);
-    var content:DisplayObject = view.content;
-    if (content.stage == null) {
-      content.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
-    } else {
-      onAddedToStage();
     }
-    View.updater.update();
-  }
 
-  private function onAddedToStage(?_):Void {
+    public static var instance(default, null):Root;
-    var content:DisplayObject = view.content;
-    content.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
-    content.stage.scaleMode = StageScaleMode.NO_SCALE;
-    content.stage.align = StageAlign.TOP_LEFT;
-    View.updater.stage = content.stage;
 
-    content.stage.addEventListener(Event.RESIZE, onResize);
+    public var view(default, null):IView<Dynamic>;
-    content.stage.stageFocusRect = false;
+    public var autoSize(default, default):Bool;
-    onResize();
+    public var onResize(default, null):Signal<Rectangle> = new Signal();
-  }
 
-  private function onResize(?_):Void {
+    public function new(view:IView<Dynamic>, autoSize:Bool = true) {
-    var content:DisplayObject = view.content;
+        if (instance != null) throw new Error("Only one instance");
-    if (autoSize) {
+        instance = this;
-      view.width = content.stage.stageWidth;
+        this.view = view;
-      view.height = content.stage.stageHeight;
+        this.autoSize = autoSize;
-    } else {
+        Lib.current.addChild(view.content);
-      view.x = (content.stage.stageWidth - view.width) / 2;
+        var content:DisplayObject = view.content;
-      view.y = (content.stage.stageHeight - view.height) / 2;
+        if (content.stage == null) {
+            content.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
+        } else {
+            onAddedToStage();
+        }
+        View.updater.update();
     }
-    L.d("Screen", content.stage.stageWidth + "x" + content.stage.stageHeight);
+
-  }
+    private function onAddedToStage(?_):Void {
+        var content:DisplayObject = view.content;
+        content.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
+        content.stage.scaleMode = StageScaleMode.NO_SCALE;
+        content.stage.align = StageAlign.TOP_LEFT;
+        View.updater.stage = content.stage;
+
+        content.stage.addEventListener(Event.RESIZE, onResizeEvent);
+        content.stage.stageFocusRect = false;
+        onResizeEvent();
+    }
+
+    private function onResizeEvent(?_):Void {
+        var content:DisplayObject = view.content;
+        if (autoSize) {
+            view.width = content.stage.stageWidth;
+            view.height = content.stage.stageHeight;
+            view.toUpdate();
+        } else {
+            view.x = (content.stage.stageWidth - view.width) / 2;
+            view.y = (content.stage.stageHeight - view.height) / 2;
+        }
+        onResize.emit(new Rectangle(0, 0, content.stage.stageWidth, content.stage.stageHeight));
+    }
+
+    public function dispose():Void {
+        if (view != null) {
+            view.content.stage.removeEventListener(Event.RESIZE, onResizeEvent);
+            view = null;
+        }
+        onResize.dispose();
+    }
+
 }

src/main/haxework/gui/ScrollView.hx

@@ -1,9 +1,10 @@
 package haxework.gui;
 
-import flash.display.Shape;
+import flash.display.DisplayObject;
-import haxework.gui.skin.Skin;
+import flash.display.Sprite;
 import flash.events.MouseEvent;
 import haxework.gui.list.ScrollBarView;
+import haxework.gui.skin.Skin;
 import haxework.signal.Signal;
 
 class ScrollView extends HGroupView {
@@ -14,12 +15,12 @@ class ScrollView extends HGroupView {
     public var ratio(default, null):Signal<Float> = new Signal();
     public var position(default, set):Float = 0;
 
-    private var mask:Shape;
+    private var mask:Sprite;
 
     public function new() {
         super();
         skin = [Skin.color(0x000000, 0.0)];
-        mask = new Shape();
+        mask = new Sprite();
         content.addChild(mask);
         content.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);
     }
@@ -32,7 +33,7 @@ class ScrollView extends HGroupView {
     private function set_view(value:IView<Dynamic>):IView<Dynamic> {
         view = value;
         views = [view, scroll];
-        view.content.mask = mask;
+        cast(view.content, DisplayObject).mask = mask;
         return view;
     }
 
@@ -42,7 +43,8 @@ class ScrollView extends HGroupView {
         ratio.connect(function(ratio) {
             if (scroll.ratio == ratio) return;
             scroll.ratio = ratio;
-            //scroll.visible = scroll.inLayout = ratio < 1;
+            scroll.visible = ratio < 1;
+            scroll.geometry.skipLayout = ratio >= 1;
         });
         scroll.onScroll.connect(function(position) this.position = position);
         return scroll;
@@ -65,7 +67,7 @@ class ScrollView extends HGroupView {
         view.y = - position * view.height;
         // mask redraw
         mask.graphics.clear();
-        mask.graphics.beginFill(0, 0);
+        mask.graphics.beginFill(0xffffff);
         mask.graphics.drawRect(0, 0, width, height);
         mask.graphics.endFill();
     }

src/main/haxework/gui/TextView.hx

@@ -10,8 +10,8 @@ import haxework.text.BitmapTextField;
 import haxework.text.TextUtil;
 
 class TextLayout {
-    public var hAlign(default, default):HAlign = HAlign.NONE;
+    public var hAlign(default, default):HAlign = NONE;
-    public var vAlign(default, default):VAlign = VAlign.NONE;
+    public var vAlign(default, default):VAlign = NONE;
 
     public function new() {}
 }
@@ -53,7 +53,7 @@ class TextView extends SpriteView implements ITextView {
         textFormat.font = "Arial";
         textFormat.size = 16;
         textFormat.leading = 0;
-        textFormat.align = TextFormatAlign.CENTER;
+        textFormat.align = TextFormatAlign.LEFT;
         content.addChild(textField);
     }
 
@@ -157,21 +157,6 @@ class TextView extends SpriteView implements ITextView {
         textField.setTextFormat(textFormat);
         updateTextSize();
         placeTextField(textField);
-        /*if (false && _text != null && _text.length > 0) {
-            #if html5
-            var h = _textHeight;
-            var w = _textWidth;
-            //if (h > textFormat.size * 1.5) h = h / 2;
-            textField.height = h;
-            textField.width = w;
-            #end
-            width = textField.width + leftPadding + rightPadding;
-            height = textField.height + topPadding + bottomPadding;
-            textField.x = leftPadding;
-            textField.y = topPadding;
-        } else {
-            placeTextField(textField);
-        }*/
         //ToDo:
         //var t:Point = content.localToGlobal(new Point(textField.x, textField.y));
         //t.x = Math.round(t.x);
@@ -187,15 +172,13 @@ class TextView extends SpriteView implements ITextView {
         textField.height = geometry.size.content.height;
 
         textField.x = switch (layout.hAlign) {
-            case HAlign.NONE: 0;
+            case HAlign.LEFT | HAlign.NONE: geometry.padding.left;
-            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 (layout.vAlign) {
-            case VAlign.NONE: 0;
+            case VAlign.TOP | VAlign.NONE: geometry.padding.top;
-            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;

src/main/haxework/gui/View.hx

@@ -84,7 +84,6 @@ class View<C:DisplayObject> implements IView<C> {
     }
 
     private function set_width(value:Float):Float {
-        //trace('${this.id}.width = $value');
         if (width != value) {
             width = value;
             toRedraw();
@@ -93,7 +92,6 @@ class View<C:DisplayObject> implements IView<C> {
     }
 
     private function set_height(value:Float):Float {
-        //trace('${this.id}.height = $value');
         if (height != value) {
             height = value;
             toRedraw();
@@ -148,6 +146,7 @@ class Updater {
 
     private function set_stage(value:Stage):Stage {
         value.addEventListener(Event.ENTER_FRAME, update);
+        value.addEventListener(Event.ENTER_FRAME, redraw);
         return value;
     }
 
@@ -160,19 +159,18 @@ class Updater {
     }
 
     public function update(?_):Void {
-        var t = Date.now().getTime();
         while (updateViews.length > 0) {
             var v = null;
             v = updateViews.shift();
             v.update();
         }
+    }
+
+    public function redraw(?_):Void {
         while (redrawViews.length > 0) {
             var v = null;
             v = redrawViews.shift();
             v.redraw();
         }
-        t = Date.now().getTime() - t;
-        if (t > 10) trace("UPDATE(" + t + ")");
     }
-
 }

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

@@ -1,6 +1,5 @@
 package haxework.gui.core;
 
-import haxework.gui.core.Geometry.SizeValue;
 abstract Size(Array<Float>) {
     public var width(get, set):Float;
     public var height(get, set):Float;
@@ -155,25 +154,25 @@ class Geometry {
 
     public function get_width():SizeValue {
         if (size.percent.width > -1) {
-            return SizeValue.PERCENT(size.percent.width);
+            return PERCENT(size.percent.width);
         }
         var result = size.fixed.width;
         if (result < 0) {
             result = size.content.width;
         }
         result += padding.horizontal;
-        return SizeValue.FIXED(result);
+        return FIXED(result);
     }
 
     public function get_height():SizeValue {
         if (size.percent.height > -1) {
-            return SizeValue.PERCENT(size.percent.height);
+            return PERCENT(size.percent.height);
         }
         var result = size.fixed.height;
         if (result < 0) {
             result = size.content.height;
         }
         result += padding.vertical;
-        return SizeValue.FIXED(result);
+        return FIXED(result);
     }
 }

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

@@ -11,8 +11,8 @@ class DefaultLayout implements ILayout {
     public var margin(default, default):Float;
 
     public function new() {
-        hAlign = HAlign.NONE;
+        hAlign = NONE;
-        vAlign = VAlign.NONE;
+        vAlign = NONE;
         margin = 0;
     }
 
@@ -41,48 +41,48 @@ class DefaultLayout implements ILayout {
 
     private function setViewWidth(group:IGroupView, view:IView<Dynamic>):Void {
         switch (view.geometry.width) {
-            case SizeValue.FIXED(value):
+            case FIXED(value):
                 view.width = value;
-            case SizeValue.PERCENT(value):
+            case PERCENT(value):
                 view.width = value / 100 * (group.width - view.geometry.margin.horizontal - group.geometry.padding.horizontal);
         }
     }
 
     private function setViewHeight(group:IGroupView, view:IView<Dynamic>):Void {
         switch (view.geometry.height) {
-            case SizeValue.FIXED(value):
+            case FIXED(value):
                 view.height = value;
-            case SizeValue.PERCENT(value):
+            case PERCENT(value):
                 view.height = value / 100 * (group.height - view.geometry.margin.vertical - group.geometry.padding.vertical);
         }
     }
 
     private function placeViewHorizontal(group:IGroupView, view:IView<Dynamic>):Void {
         var align:HAlign = view.geometry.hAlign;
-        if (align == HAlign.NONE) align = hAlign;
+        if (align == NONE) align = hAlign;
         switch (align) {
-            case HAlign.LEFT | HAlign.NONE:
+            case LEFT | NONE:
                 view.x = group.geometry.padding.left + view.geometry.margin.left;
-            case HAlign.CENTER:
+            case CENTER:
                 view.x = (group.width - view.width) / 2 +
                 (group.geometry.padding.left - group.geometry.padding.right) +
                 (view.geometry.margin.left - view.geometry.margin.right);
-            case HAlign.RIGHT:
+            case RIGHT:
                 view.x = group.width - view.width - group.geometry.padding.right - view.geometry.margin.right;
         }
     }
 
     private function placeViewVertical(group:IGroupView, view:IView<Dynamic>):Void {
         var align:VAlign = view.geometry.vAlign;
-        if (align == VAlign.NONE) align = vAlign;
+        if (align == NONE) align = vAlign;
         switch (align) {
-            case VAlign.TOP | VAlign.NONE:
+            case TOP | NONE:
                 view.y = group.geometry.padding.top + view.geometry.margin.top;
-            case VAlign.MIDDLE:
+            case MIDDLE:
                 view.y = (group.height - view.height) / 2 +
                 (group.geometry.padding.top - group.geometry.padding.bottom) +
                 (view.geometry.margin.top - view.geometry.margin.bottom);
-            case VAlign.BOTTOM:
+            case BOTTOM:
                 view.y = group.height - view.height - group.geometry.padding.bottom - view.geometry.margin.bottom;
         }
     }

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

@@ -19,9 +19,9 @@ class HorizontalLayout extends DefaultLayout {
 
         for (view in views) {
             switch (view.geometry.width) {
-                case SizeValue.PERCENT(value):
+                case PERCENT(value):
                     leftSize -= (view.geometry.margin.horizontal);
-                case SizeValue.FIXED(value):
+                case FIXED(value):
                     fixedSize += (value + view.geometry.margin.horizontal);
             }
             setViewHeight(group, view);
@@ -35,20 +35,19 @@ class HorizontalLayout extends DefaultLayout {
         leftSize -= fixedSize;
         for (view in views) {
             switch (view.geometry.width) {
-                case SizeValue.PERCENT(value):
+                case PERCENT(value):
                     view.width = value / 100 * leftSize;
                     fixedSize += view.width + view.geometry.margin.horizontal;
-                case SizeValue.FIXED(value):
+                case FIXED(value):
                     view.width = value;
             }
         }
 
         var x:Float = 0;
         switch (hAlign) {
-            case HAlign.LEFT: x = group.geometry.padding.left;
+            case LEFT | NONE: x = group.geometry.padding.left;
-            case HAlign.CENTER: x = (group.width - fixedSize) / 2 + group.geometry.padding.left - group.geometry.padding.right;
+            case CENTER: x = (group.width - fixedSize) / 2 + group.geometry.padding.left - group.geometry.padding.right;
-            case HAlign.RIGHT: x = group.width - fixedSize - group.geometry.padding.right;
+            case RIGHT: x = group.width - fixedSize - group.geometry.padding.right;
-            case _:
         }
 
         for (view in views) {

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

@@ -15,9 +15,9 @@ class VerticalLayout extends DefaultLayout {
 
         for (view in views) {
             switch (view.geometry.height) {
-                case SizeValue.PERCENT(value):
+                case PERCENT(value):
                     leftSize -= (view.geometry.margin.vertical);
-                case SizeValue.FIXED(value):
+                case FIXED(value):
                     fixedSize += (value + view.geometry.margin.vertical);
             }
             setViewWidth(group, view);
@@ -31,20 +31,19 @@ class VerticalLayout extends DefaultLayout {
         leftSize -= fixedSize;
         for (view in views) {
             switch (view.geometry.height) {
-                case SizeValue.PERCENT(value):
+                case PERCENT(value):
                     view.height = value / 100 * leftSize;
                     fixedSize += view.height + view.geometry.margin.vertical;
-                case SizeValue.FIXED(value):
+                case FIXED(value):
                     view.height = value;
             }
         }
 
         var y:Float = 0;
         switch (vAlign) {
-            case VAlign.TOP: y = group.geometry.padding.top;
+            case TOP | NONE: y = group.geometry.padding.top;
-            case VAlign.MIDDLE: y = (group.height - fixedSize) / 2 + group.geometry.padding.top - group.geometry.padding.bottom;
+            case MIDDLE: y = (group.height - fixedSize) / 2 + group.geometry.padding.top - group.geometry.padding.bottom;
-            case VAlign.BOTTOM: y = group.height - fixedSize - group.geometry.padding.bottom;
+            case BOTTOM: y = group.height - fixedSize - group.geometry.padding.bottom;
-            case _:
         }
 
         for (view in views) {

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

@@ -16,7 +16,7 @@ class HListView<D> extends ListView<D> {
     }
 
     override private function recalcSize(item:IListItemView<D>):Void {
-        var itemSize = switch(item.geometry.width) {
+        itemSize = switch(item.geometry.width) {
             case SizeValue.FIXED(value): value + item.geometry.margin.horizontal + box.layout.margin;
             case _: 0;
         }
@@ -27,6 +27,8 @@ class HListView<D> extends ListView<D> {
     override private function set_offsetDiff(value:Float):Float {
         box.geometry.padding.left = -value * itemSize;
         mask.geometry.margin.left = -box.geometry.padding.left;
+        box.toUpdate();
+        mask.toUpdate();
         return super.set_offsetDiff(value);
     }
 

src/main/haxework/gui/list/LabelListItem.hx

@@ -1,5 +1,6 @@
 package haxework.gui.list;
 
+import haxework.gui.core.HAlign;
 import haxework.gui.list.ListView.IListItemView;
 import haxework.gui.skin.ColorSkin;
 
@@ -12,6 +13,8 @@ class LabelListItem<T> extends LabelView implements IListItemView<T> {
         super();
         geometry.size.percent.width = 100;
         geometry.size.fixed.height = 20;
+        geometry.padding = 8;
+        layout.hAlign = HAlign.LEFT;
     }
     private function set_data(value:T):T {
         data = value;

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

@@ -16,7 +16,7 @@ class VListView<D> extends ListView<D> {
     }
 
     override private function recalcSize(item:IListItemView<D>):Void {
-        var itemSize = switch(item.geometry.height) {
+        itemSize = switch(item.geometry.height) {
             case SizeValue.FIXED(value): value + item.geometry.margin.vertical + box.layout.margin;
             case _: 0;
         }
@@ -27,6 +27,8 @@ class VListView<D> extends ListView<D> {
     override private function set_offsetDiff(value:Float):Float {
         box.geometry.padding.top = -value * itemSize;
         mask.geometry.margin.top = -box.geometry.padding.top;
+        box.toUpdate();
+        mask.toUpdate();
         return super.set_offsetDiff(value);
     }
 

src/main/haxework/resources/Resources.hx

@@ -18,7 +18,6 @@ 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);