[view] big update

demo/build.hxml

@@ -5,6 +5,7 @@
 --macro haxework.parser.Parser.auto()
 -debug
 -D native_trace
+#-D dev_layout
 -swf-version 10.1
 -swf-header 800:600:30:000000
 

demo/src/demo/DemoView.yaml

@@ -5,6 +5,7 @@ views:
     - $type: haxework.view.ImageView
       geometry.padding: 10
       image: $r:image:logo
+      stretch: true
     - id: tabs
       $type: haxework.view.HGroupView
       layout.margin: 5

src/main/haxework/App.hx

@@ -1,16 +1,16 @@
 package haxework;
 
-import haxework.view.Root;
-import haxework.view.IView;
 import flash.Lib;
 import haxework.animate.Animate;
 import haxework.animate.FadeAnimate;
 import haxework.animate.UnFadeAnimate;
-import haxework.view.popup.PopupManager;
 import haxework.net.manage.ILoaderManager;
 import haxework.net.manage.LoaderManager;
 import haxework.resources.IResources;
 import haxework.resources.Resources;
+import haxework.view.IView;
+import haxework.view.popup.PopupManager;
+import haxework.view.Root;
 
 class App {
 
@@ -23,8 +23,8 @@ class App {
         resources = new Resources();
         loaderManager = new LoaderManager();
         popupManager = new PopupManager();
-        popupManager.showAnimateFactory = UnFadeAnimate;
+        popupManager.showAnimateFactory = function(v) return new UnFadeAnimate(v);
-        popupManager.closeAnimateFactory = FadeAnimate;
+        popupManager.closeAnimateFactory = function(v) return new FadeAnimate(v);
         app = this;
     }
 

src/main/haxework/animate/Animate.hx

@@ -1,7 +1,9 @@
 package haxework.animate;
 
-import flash.events.Event;
+import flash.display.DisplayObject;
 import flash.display.Stage;
+import flash.events.Event;
+import haxework.view.IView;
 
 class Animate implements IAnimate {
     public static var defaultDuraion = 300;
@@ -22,14 +24,22 @@ class Animate implements IAnimate {
     }
 
     private var callback:Animate -> Void;
+    private var view:IView<Dynamic>;
     private var duration:Int;
     private var startTime:Float;
     private var progress:Float;
 
-    public function new(duration:Int) {
+    private var object(get, null):DisplayObject;
+
+    public function new(view:IView<Dynamic>, duration:Int = -1) {
+        this.view = view;
         this.duration = duration > -1 ? duration : defaultDuraion;
     }
 
+    private inline function get_object():DisplayObject {
+        return cast view.content;
+    }
+
     public function start(callback:IAnimate -> Void, custom:Bool = false):Void {
         startTime = Date.now().getTime();
         this.callback = callback;

src/main/haxework/animate/CircleMaskAnimate.hx

@@ -8,13 +8,12 @@ import haxework.view.IView;
 
 class CircleMaskAnimate extends Animate {
 
-    private var view:IView<DisplayObject>;
     private var mask:Sprite;
     private var cyrcle:Sprite;
     private var size:Float;
 
     public function new(view:IView<DisplayObject>, duration:Int = -1) {
-        super(duration);
+        super(view, duration);
         this.view = view;
         this.mask = new Sprite();
         this.cyrcle = new Sprite();

src/main/haxework/animate/FadeAnimate.hx

@@ -1,29 +1,20 @@
 package haxework.animate;
 
-import flash.display.DisplayObject;
-import haxework.animate.IAnimate;
-import haxework.view.IView;
 import haxework.animate.Animate;
+import haxework.animate.IAnimate;
 
 class FadeAnimate extends Animate {
 
-    private var view:IView<DisplayObject>;
-
-    public function new(view:IView<DisplayObject>, duration:Int = -1) {
-        super(duration);
-        this.view = view;
-    }
-
     override public function start(callback:IAnimate -> Void, custom:Bool = false):Void {
-        view.content.alpha = 1.0;
+        object.alpha = 1.0;
         super.start(callback, custom);
     }
 
     override private function update(time:Float):Void {
         super.update(time);
-        view.content.alpha = 1 - (progress * 1.0);
+        object.alpha = 1 - (progress * 1.0);
         if (progress >= 1) {
-            view.content.alpha = 0.0;
+            object.alpha = 0.0;
         }
     }
 }

src/main/haxework/animate/SlideAnimate.hx

@@ -1,24 +1,14 @@
 package haxework.animate;
 
-import flash.display.DisplayObject;
-import haxework.view.IView;
-
 class SlideAnimate extends Animate {
 
-    private var view:IView<DisplayObject>;
-
-    public function new(view:IView<DisplayObject>, duration:Int = -1) {
-        super(duration);
-        this.view = view;
-    }
-
     override public function start(callback:IAnimate -> Void, custom:Bool = false):Void {
-        view.content.x = view.x - this.view.width + this.view.width / progress;
+        object.x = view.x - this.view.width + this.view.width / progress;
         super.start(callback, custom);
     }
 
     override private function update(time:Float):Void {
         super.update(time);
-        view.content.x = view.x - this.view.width + this.view.width / Math.min(1, progress);
+        object.x = view.x - this.view.width + this.view.width / Math.min(1, progress);
     }
 }

src/main/haxework/animate/UnFadeAnimate.hx

@@ -1,28 +1,19 @@
 package haxework.animate;
 
-import flash.display.DisplayObject;
-import haxework.view.IView;
 import haxework.animate.Animate;
 
 class UnFadeAnimate extends Animate {
 
-    private var view:IView<DisplayObject>;
-
-    public function new(view:IView<DisplayObject>, duration:Int = -1) {
-        super(duration);
-        this.view = view;
-    }
-
     override public function start(callback:IAnimate -> Void, custom:Bool = false):Void {
-        view.content.alpha = 0.0;
+        object.alpha = 0.0;
         super.start(callback, custom);
     }
 
     override private function update(time:Float):Void {
         super.update(time);
-        view.content.alpha = progress * 1.0;
+        object.alpha = progress * 1.0;
         if (progress >= 1) {
-            view.content.alpha = 1.0;
+            object.alpha = 1.0;
         }
     }
 }

src/main/haxework/view/ButtonView.hx

@@ -7,6 +7,7 @@ enum ButtonState {
     UP;
     OVER;
     DOWN;
+    DISABLED;
 }
 
 class ButtonView extends LabelView {
@@ -84,10 +85,11 @@ class ButtonView extends LabelView {
     }
 
     private function get_state():ButtonState {
+        if (disabled) return DISABLED;
         #if mobile
-        return downed ? ButtonState.DOWN : ButtonState.UP;
+        return downed ? DOWN : UP;
         #else
-        return (downed && overed) ? ButtonState.DOWN : overed ? ButtonState.OVER : ButtonState.UP;
+        return (downed && overed) ? DOWN : overed ? OVER : UP;
         #end
     }
 

src/main/haxework/view/ImageView.hx

@@ -13,6 +13,7 @@ class ImageView extends SpriteView {
     public var imageUrl(default, set):String;
     public var color(default, set):Int = -1;
     public var fillType(default, set):FillType;
+    public var stretch:Bool;
 
     private var bitmapSkin:BitmapSkin = new BitmapSkin();
     private var coloredImage:BitmapData;
@@ -33,6 +34,9 @@ class ImageView extends SpriteView {
 
     private function set_image(value:BitmapData):BitmapData {
         if (image != value) {
+            if (stretch) {
+                setContentSize(value.width, value.height, "image");
+            }
             image = value;
             if (color > -1) {
                 coloredImage = BitmapUtil.colorize(image, color);

src/main/haxework/view/ScrollView.hx

@@ -20,6 +20,7 @@ class ScrollView extends HGroupView {
 
     public function new() {
         super();
+        layout.overflow = true;
         skin = [Skin.color(0x000000, 0.0)];
         mask = new Sprite();
         content.addChild(mask);

src/main/haxework/view/View.hx

@@ -3,8 +3,7 @@ package haxework.view;
 import flash.display.DisplayObject;
 import flash.display.InteractiveObject;
 import haxework.view.core.Geometry;
-import haxework.view.skin.ISkin.ISizeSkin;
+import haxework.view.skin.ISkin;
-import haxework.view.skin.ISkin.SkinSet;
 import haxework.resources.IResources;
 
 class View<C:DisplayObject> implements IView<C> {
@@ -61,20 +60,10 @@ class View<C:DisplayObject> implements IView<C> {
     }
 
     public function update():Void {
-        /*for (skin in this.skin) {
-            if (Std.is(skin, ISizeSkin)) {
-                var sizeSkin:ISizeSkin = cast skin;
-                setContentSize(sizeSkin.width, sizeSkin.height, "skin");
-            }
-        }*/
     }
 
     public function redraw():Void {
         for (skin in this.skin) {
-            if (Std.is(skin, ISizeSkin)) {
-                var sizeSkin:ISizeSkin = cast skin;
-                setContentSize(sizeSkin.width, sizeSkin.height, "skin");
-            }
             skin.draw(this);
         }
     }

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

@@ -86,6 +86,9 @@ class Geometry {
     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 = [];
@@ -95,32 +98,36 @@ class Geometry {
         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);
         }
-        var result = size.fixed.width;
+        return FIXED(minWidth);
-        if (result < 0) {
-            for (s in size.content.iterator()) {
-                result = Math.max(result, s.width);
-            }
-        }
-        result += padding.horizontal;
-        return FIXED(result);
     }
 
     public function get_height():SizeValue {
         if (size.percent.height > -1) {
             return PERCENT(size.percent.height);
         }
-        var result = size.fixed.height;
+        return FIXED(minHeight);
-        if (result < 0) {
-            for (s in size.content.iterator()) {
-                result = Math.max(result, s.height);
-            }
-        }
-        result += padding.vertical;
-        return FIXED(result);
     }
 
     public function setMargin(margin:Box):Geometry {

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

@@ -31,20 +31,22 @@ class DefaultLayout extends Layout {
     }
 
     private function setViewWidth(group:IGroupView, view:IView<Dynamic>):Void {
-        switch (view.geometry.width) {
+        view.width = switch view.geometry.width {
             case FIXED(value):
-                view.width = value;
+                value;
             case PERCENT(value):
-                view.width = value / 100 * (group.width - view.geometry.margin.horizontal - group.geometry.padding.horizontal);
+                var calcWidth = value / 100 * (group.width - view.geometry.margin.horizontal - group.geometry.padding.horizontal);
+                Math.max(view.geometry.minWidth, calcWidth);
         }
     }
 
     private function setViewHeight(group:IGroupView, view:IView<Dynamic>):Void {
-        switch (view.geometry.height) {
+        view.height = switch view.geometry.height {
             case FIXED(value):
-                view.height = value;
+                value;
             case PERCENT(value):
-                view.height = value / 100 * (group.height - view.geometry.margin.vertical - group.geometry.padding.vertical);
+                var calcHeigth = value / 100 * (group.height - view.geometry.margin.vertical - group.geometry.padding.vertical);
+                Math.max(view.geometry.minHeight, calcHeigth);
         }
     }
 

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

@@ -26,10 +26,11 @@ class HorizontalLayout extends DefaultLayout {
                 case FIXED(value):
                     maxSize = Math.max(maxSize, value);
                 case _:
+                    maxSize = Math.max(maxSize, view.geometry.minHeight);
             }
         }
 
-        group.setContentSize(fixedSize, maxSize, "group");
+        if (!overflow) group.setContentSize(fixedSize, maxSize, "group");
 
         leftSize -= fixedSize;
         for (view in views) {

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

@@ -7,6 +7,7 @@ interface ILayout {
     public var hAlign(default, default):HAlign;
     public var vAlign(default, default):VAlign;
     public var margin(default, default):Float;
+    public var overflow(default, default):Bool;
 
     public function place(group:IGroupView, views:Array<IView<Dynamic>>):Void;
 

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

@@ -1,4 +1,5 @@
 package haxework.view.layout;
+
 import haxework.view.core.VAlign;
 import haxework.view.core.HAlign;
 
@@ -7,6 +8,7 @@ class Layout implements ILayout {
     public var hAlign(default, default):HAlign;
     public var vAlign(default, default):VAlign;
     public var margin(default, default):Float;
+    public var overflow(default, default):Bool;
 
     public function new() {
         hAlign = NONE;

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

@@ -1,6 +1,7 @@
 package haxework.view.layout;
 
 import haxework.view.core.VAlign;
+
 typedef Row = {
     var width:Float;
     var height:Float;
@@ -34,7 +35,7 @@ class TailLayout extends DefaultLayout {
             setViewHeight(group, view);
             if (
             (rowSize > 0 && row.views.length >= rowSize) ||
-            (rowSize == 0 && row.width + view.width + margin + group.geometry.margin.horizontal > group.width)
+            (/*rowSize == 0 && */row.width + view.width + margin + group.geometry.margin.horizontal > group.width)
             ) {
                 row.width -= margin;
                 w = Math.max(w, row.width);

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

@@ -26,10 +26,11 @@ class VerticalLayout extends DefaultLayout {
                 case FIXED(value):
                     maxSize = Math.max(maxSize, value);
                 case _:
+                    maxSize = Math.max(maxSize, view.geometry.minWidth);
             }
         }
 
-        group.setContentSize(maxSize, fixedSize, "group");
+        if (!overflow) group.setContentSize(maxSize, fixedSize, "group");
 
         leftSize -= fixedSize;
         for (view in views) {

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

@@ -48,6 +48,7 @@ class ListView<D> extends GroupView {
         addView(main);
         box = new GroupView(layout);
         box.geometry.size.stretch = true;
+        box.layout.overflow = true;
         main.addView(box);
         mask = new SpriteView();
         mask.geometry.size.stretch = true;

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

@@ -8,8 +8,8 @@ typedef P = PopupView<Dynamic>;
 
 class PopupManager {
 
-    public var showAnimateFactory(default, default):Class<IAnimate>;
+    public var showAnimateFactory(default, default):IView<Dynamic> -> IAnimate;
-    public var closeAnimateFactory(default, default):Class<IAnimate>;
+    public var closeAnimateFactory(default, default):IView<Dynamic> -> IAnimate;
 
     private var popups:Array<P>;
 
@@ -20,7 +20,7 @@ class PopupManager {
     public function show(popup:P):Void {
         cast(Root.instance.view, IGroupView).addView(popup);
         if (showAnimateFactory != null) {
-            Type.createInstance(showAnimateFactory, [popup]).start(null);
+            showAnimateFactory(popup).start(null);
         }
         popups.push(popup);
     }
@@ -28,7 +28,7 @@ class PopupManager {
     public function close(popup:P):Void {
         popups.remove(popup);
         if (closeAnimateFactory != null) {
-            Type.createInstance(closeAnimateFactory, [popup]).start(function(_) {
+            closeAnimateFactory(popup).start(function(_) {
                 cast(Root.instance.view, IGroupView).removeView(popup);
             });
         } else {

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

@@ -1,5 +1,7 @@
 package haxework.view.popup;
 
+import flash.display.DisplayObject;
+import flash.events.MouseEvent;
 import haxework.view.core.Geometry.Position;
 import haxework.view.GroupView;
 import haxework.view.skin.Skin;
@@ -9,6 +11,7 @@ import promhx.Promise;
 class PopupView<R> extends GroupView {
     @:provide var manager:PopupManager;
 
+    public var background(default, null):IView<Dynamic>;
     public var view(default, set):IView<Dynamic>;
     private var deferred:Deferred<R>;
 
@@ -16,12 +19,29 @@ class PopupView<R> extends GroupView {
         super();
         geometry.size.stretch = true;
         geometry.position = Position.ABSOLUTE;
-        skin = [Skin.color(0x000000, 0.6)];
+        background = buildBackground();
+        background.content.addEventListener(MouseEvent.CLICK, onBackgroundClick);
+        addView(background);
+    }
+
+    private function buildBackground():IView<Dynamic> {
+        var result = new SpriteView();
+        result.geometry.size.stretch = true;
+        result.geometry.position = Position.ABSOLUTE;
+        result.skin = [Skin.color(0x000000, 0.6)];
+        return result;
+    }
+
+    private function onBackgroundClick(event:MouseEvent):Void {
+        reject("background");
     }
 
     private function set_view(value:IView<Dynamic>):IView<Dynamic> {
-        this.view = value;
+        if (view != null) {
-        this.views = [value];
+            removeView(view);
+        }
+        view = value;
+        addView(view);
         return this.view;
     }
 

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

@@ -2,17 +2,15 @@ package haxework.view.skin;
 
 import flash.display.BitmapData;
 import flash.geom.Rectangle;
-import haxework.view.skin.ISkin.ISizeSkin;
 import haxework.view.utils.DrawUtil;
 
-class BitmapSkin implements ISkin<SpriteView> implements ISizeSkin {
+class BitmapSkin implements ISkin<SpriteView> {
-    public var width(default, null):Float;
-    public var height(default, null):Float;
-
     public var image(null, set):BitmapData;
     public var color(default, default):Int;
     public var fillType(default, default):FillType;
 
+    public var content:Bool;
+
     public function new(image:BitmapData = null, fillType = null, color = -1) {
         if (image != null) {
             this.image = image;
@@ -24,8 +22,6 @@ class BitmapSkin implements ISkin<SpriteView> implements ISizeSkin {
     private function set_image(value:BitmapData):BitmapData {
         if (image != value) {
             image = value;
-            width = image.width;
-            height = image.height;
         }
         return image;
     }

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

@@ -3,14 +3,10 @@ package haxework.view.skin;
 import flash.display.BitmapData;
 import flash.geom.Rectangle;
 import haxework.view.ButtonView.ButtonState;
-import haxework.view.skin.ISkin.ISizeSkin;
 import haxework.view.utils.BitmapUtil;
 import haxework.view.utils.DrawUtil;
 
-class ButtonBitmapSkin implements ISkin<ButtonView> implements ISizeSkin {
+class ButtonBitmapSkin implements ISkin<ButtonView> {
-
-    public var width(default, null):Float;
-    public var height(default, null):Float;
 
     public var fillType(default, default):FillType;
     public var color(default, default):Int;
@@ -33,8 +29,6 @@ class ButtonBitmapSkin implements ISkin<ButtonView> implements ISizeSkin {
     }
 
     private function set_image(value:BitmapData):BitmapData {
-        width = value.width;
-        height = value.height;
         images.set(ButtonState.UP, value);
         images.set(ButtonState.DOWN, BitmapUtil.multiply(value, 0.8));
         images.set(ButtonState.OVER, BitmapUtil.multiply(value, 1.2));
@@ -43,8 +37,6 @@ class ButtonBitmapSkin implements ISkin<ButtonView> implements ISizeSkin {
     }
 
     private function set_upImage(value:BitmapData):BitmapData {
-        width = value.width;
-        height = value.height;
         images.set(ButtonState.UP, value);
         return value;
     }

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

@@ -1,17 +1,16 @@
 package haxework.view.skin;
 
-import flash.display.LineScaleMode;
-import flash.display.JointStyle;
 import flash.display.CapsStyle;
 import flash.display.Graphics;
+import flash.display.JointStyle;
+import flash.display.LineScaleMode;
 import haxework.color.ColorUtil;
-import haxework.view.ButtonView.ButtonState;
+import haxework.view.ButtonView;
 
 class ButtonColorSkin implements ISkin<ButtonView> {
 
     public var color(default, set):Int;
     public var alpha(default, default):Float;
-    public var disable(default, default):Int;
     public var round(default, default):Float;
     private var colors:Map<ButtonState, Int>;
 
@@ -23,15 +22,16 @@ class ButtonColorSkin implements ISkin<ButtonView> {
 
     private function set_color(value:Int):Int {
         colors = new Map<ButtonState, Int>();
-        colors.set(ButtonState.UP, value);
+        colors.set(UP, value);
-        colors.set(ButtonState.DOWN, ColorUtil.diff(value, -24));
+        colors.set(DOWN, ColorUtil.diff(value, -24));
-        colors.set(ButtonState.OVER, ColorUtil.diff(value, 24));
+        colors.set(OVER, ColorUtil.diff(value, 24));
-        //disable = ColorUtil.multiply(value, 0.6);
+        colors.set(OVER, ColorUtil.diff(value, 24));
+        colors.set(DISABLED, ColorUtil.multiply(value, 0.6));
         return value;
     }
 
     public function draw(view:ButtonView):Void {
-        var color:Int = selectColor(view);
+        var color:Int = colors.get(view.state);
         if (Std.is(view, ToggleButtonView)) {
             if (!cast(view, ToggleButtonView).on) {
                 color = ColorUtil.multiply(color, 0.5);
@@ -44,8 +44,4 @@ class ButtonColorSkin implements ISkin<ButtonView> {
         graphics.lineStyle();
         graphics.endFill();
     }
-
-    private function selectColor(view:ButtonView):Int {
-        return view.disabled ? disable : colors.get(view.state);
-    }
 }

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

@@ -4,9 +4,4 @@ interface ISkin<V:IView<Dynamic>> {
     public function draw(view: V): Void;
 }
 
-interface ISizeSkin {
-    public var width(default, null):Float;
-    public var height(default, null):Float;
-}
-
 typedef SkinSet = Array<ISkin<Dynamic>>;

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

@@ -6,7 +6,7 @@ import haxework.color.ColorUtil;
 class TabColorSkin extends ButtonColorSkin {
 
     override public function draw(view:ButtonView):Void {
-        var color:Int = selectColor(view);
+        var color:Int = colors.get(view.state);
         if (Std.is(view, ToggleButtonView)) {
             if (!cast(view, ToggleButtonView).on) {
                 color = ColorUtil.multiply(color, 0.5);