[view] remove old styles

demo/src/demo/AppTheme.hx

@@ -1,5 +1,6 @@
 package demo;
 
+import haxework.view.geometry.Box;
 import haxework.color.Color;
 import haxework.view.theme.Theme;
 
@@ -13,7 +14,13 @@ class AppTheme extends Theme {
 
     override private function reload():Void {
         super.reload();
-        data.set("view", create(["skin.background.color" => colors.light], ["text"]));
+        data.set("view", create([
-        data.set("test", create(["skin.background.color" => Color.fromInt(0x00ffff)]));
+            "skin.background.color" => colors.light,
+            "skin.border.color" => colors.border,
+            "geometry.padding" => Box.fromFloat(3),
+        ], ["text"]));
+        data.set("test", create([
+            "skin.background.color" => Color.fromInt(0x00ffff),
+        ]));
     }
 }

demo/src/demo/form/TailForm.hx

@@ -16,6 +16,7 @@ import haxework.view.utils.DrawUtil;
         var view:IView<Dynamic>;
         if (value.image != null) {
             var imageView = new ImageView();
+            imageView.style = "view";
             imageView.stretch = false;
             //imageView.style = "border";
             imageView.fillType = FillType.CONTAIN;

demo/src/demo/form/TailForm.yaml

@@ -5,9 +5,10 @@ views:
         view:
             id: data
             $type: haxework.view.data.DataView
+            geometry.padding: 4
             layout:
                 $type: haxework.view.layout.TailLayout
-                margin: 4
+                margin: 6
             factory: ~factory
             geometry.width: 100%
             data: $r:any:data

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

@@ -4,30 +4,29 @@ import flash.display.BitmapData;
 import flash.geom.Rectangle;
 import haxework.view.utils.DrawUtil;
 
-@:style class BitmapSkin implements ISkin<SpriteView> {
+@:style(true) class BitmapSkin extends SpriteSkin {
-    public var image(null, set):BitmapData;
+    @:style(null) public var image(default, default):BitmapData;
-    public var color(default, default):Int;
+    @:style(FillType.DEFAULT) public var fillType(default, default):FillType;
-    public var fillType(default, default):FillType;
 
     public var content:Bool;
 
-    public function new(image:BitmapData = null, fillType = null, color = -1) {
+    public function new(?image:BitmapData, ?fillType, ?background:Background, ?border:Border) {
+        super(background, border);
         if (image != null) {
             this.image = image;
         }
         this.fillType = fillType;
-        this.color = color;
     }
 
-    private function set_image(value:BitmapData):BitmapData {
+    override public function draw(view:SpriteView):Void {
-        if (image != value) {
+        super.draw(view);
-            image = value;
-        }
-        return image;
-    }
-
-    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, false);
+        var rect = new Rectangle(
+        view.geometry.padding.left,
+        view.geometry.padding.top,
+        view.width - view.geometry.padding.horizontal,
+        view.height - view.geometry.padding.vertical
+        );
+        DrawUtil.draw(view.content.graphics, image, rect, fillType, -1, false);
     }
 }

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

@@ -1,27 +0,0 @@
-package haxework.view.skin;
-
-import flash.display.Graphics;
-import haxework.view.skin.ISkin;
-
-@:style class ProgressSkin implements ISkin<ProgressView> {
-
-  public var foreColor:Int;
-  public var backColor:Int;
-  public var vertical:Bool;
-
-  public function new() {}
-
-  public function draw(view:ProgressView):Void {
-    var graphics:Graphics = view.content.graphics;
-    graphics.clear();
-    graphics.beginFill(backColor);
-    graphics.drawRect(0, 0, view.width, view.height);
-    graphics.beginFill(foreColor);
-    if (vertical) {
-      graphics.drawRect(0, view.height - view.height * (view.max > 0 ? view.value / view.max : 0), view.width, view.height);
-    } else {
-      graphics.drawRect(0, 0, view.width * (view.max > 0 ? view.value / view.max : 0), view.height);
-    }
-    graphics.endFill();
-  }
-}

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

@@ -1,34 +0,0 @@
-package haxework.view.theme;
-
-import haxework.view.text.ITextView;
-import haxework.view.text.FontPreset;
-
-class FontStyle implements IStyle<ITextView> {
-
-    private var font:FontPreset;
-
-    public function new(font:FontPreset) {
-        this.font = font;
-    }
-
-    public function apply(view:ITextView):Void {
-        var update = false;
-        if (font.family != null) {
-            view.font.family = font.family;
-            view.font.embed = font.embed;
-            update = true;
-        }
-        if (font.color != null) {
-            view.font.color = font.color;
-            update = true;
-        }
-        if (font.size != null) {
-            view.font.size = font.size;
-            update = true;
-        }
-        // ToDo: other properties
-        if (update) {
-            view.toUpdate();
-        }
-    }
-}

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

@@ -1,36 +0,0 @@
-package haxework.view.theme;
-
-import haxework.view.geometry.Geometry;
-
-class GeometryStyle implements IStyle<IView<Dynamic>> {
-
-    private var geometry:Geometry;
-
-    public function new(geometry:Geometry) {
-        this.geometry = geometry;
-    }
-
-    public function apply(view:IView<Dynamic>):Void {
-        var update = false;
-        if (!geometry.padding.empty) {
-            view.geometry.padding = geometry.padding.clone();
-            update = true;
-        }
-        if (!geometry.margin.empty) {
-            view.geometry.margin = geometry.margin.clone();
-            update = true;
-        }
-        if (geometry.width.value > 0) {
-            view.geometry.width = geometry.width;
-            update = true;
-        }
-        if (geometry.height.value > 0) {
-            view.geometry.height = geometry.height;
-            update = true;
-        }
-        if (update) {
-            view.toUpdate();
-            view.toUpdateParent();
-        }
-    }
-}

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

@@ -1,5 +0,0 @@
-package haxework.view.theme;
-
-interface IStyle<V:IView<Dynamic>> {
-    public function apply(view:V):Void;
-}

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

@@ -16,8 +16,15 @@ typedef ThemeColors = {
     @:optional var active:Color;
 }
 
+typedef ThemeFontSize = {
+    @:optional var base:Float;
+    @:optional var big:Float;
+    @:optional var veryBig:Float;
+}
+
 interface ITheme {
     public var font(default, set):ThemeFont;
+    public var fontSize(default, set):ThemeFontSize;
     public var colors(default, set):ThemeColors;
     public var updateSignal(default, null):Signal0;
     public function resolve<T>(key:String, style:StyleId):T;

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

@@ -1,33 +0,0 @@
-package haxework.view.theme;
-
-import haxework.view.geometry.HAlign;
-import haxework.view.group.IGroupView;
-import haxework.view.layout.ILayout;
-
-class LayoutStyle implements IStyle<IGroupView> {
-
-    private var layout:ILayout;
-
-    public function new(layout:ILayout) {
-        this.layout = layout;
-    }
-
-    public function apply(view:IGroupView):Void {
-        var update = false;
-        if (layout.margin != 0) {
-            view.layout.margin = layout.margin;
-            update = true;
-        }
-        if (layout.hAlign != NONE) {
-            view.layout.hAlign = layout.hAlign;
-            update = true;
-        }
-        if (layout.vAlign != NONE) {
-            view.layout.vAlign = layout.vAlign;
-            update = true;
-        }
-        if (update) {
-            view.toUpdate();
-        }
-    }
-}

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

@@ -1,17 +0,0 @@
-package haxework.view.theme;
-
-import haxework.view.skin.ISkin;
-
-class SkinStyle implements IStyle<IView<Dynamic>> {
-
-    private var skin:ISkin<Dynamic>;
-
-    public function new(skin:ISkin<Dynamic>) {
-        this.skin = skin;
-    }
-
-    public function apply(view:IView<Dynamic>):Void {
-        view.skin = skin;
-        view.toRedraw();
-    }
-}

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

@@ -12,39 +12,38 @@ import haxework.view.theme.ITheme;
 using haxework.color.ColorUtil;
 
 class Theme implements ITheme {
-    // ToDo: configurable
-    public var baseFontSize = 18;
-    public var bigFontSize = 22;
-    public var veryBigFontSize = 24;
-
     public var font(default, set):ThemeFont;
+    public var fontSize(default, set):ThemeFontSize;
     public var colors(default, set):ThemeColors;
     public var updateSignal(default, null):Signal0;
 
     private var data:Map<String, Map<String, Dynamic>>;
 
-    public function new(?font:ThemeFont, ?colors:ThemeColors) {
+    public function new(?font:ThemeFont, ?colors:ThemeColors, ?fontSize:ThemeFontSize) {
         updateSignal = new Signal0();
         data = new Map();
         this.font = font;
         this.colors = colors;
+        this.fontSize = fontSize;
         L.d("Theme", 'font: ${this.font}');
         L.d("Theme", 'colors: ${this.colors}');
     }
 
     private function set_font(value:ThemeFont):ThemeFont {
         font = resolveFont(value);
-        if (font != null && colors != null) {
+        _reload();
-            reload();
-        }
         return font;
     }
 
+    private function set_fontSize(value:ThemeFontSize):ThemeFontSize {
+        fontSize = resolveFontSize(value);
+        _reload();
+        return fontSize;
+    }
+
     private function set_colors(value:ThemeColors):ThemeColors {
         colors = resolveColors(value);
-        if (font != null && colors != null) {
+        _reload();
-            reload();
-        }
         return colors;
     }
 
@@ -62,6 +61,20 @@ class Theme implements ITheme {
         return values;
     }
 
+    private function _reload():Void {
+        if (colors == null || font == null || fontSize == null) {
+            return;
+        }
+        reload();
+        // ToDo: hardcode update views
+        if (Root.instance != null) {
+            for (view in Root.instance.views()) {
+                view.style = view.style;
+            }
+        }
+        updateSignal.emit();
+    }
+
     private function reload():Void {
         data.set("background", [
             "skin.background.color" => colors.dark,
@@ -76,6 +89,7 @@ class Theme implements ITheme {
             "font.color" => colors.text,
             "font.family" => font.name,
             "font.embed" => font.embed,
+            "font.size" => fontSize.base,
         ]);
         data.set("text0", create([
             "skin.background.color" => colors.light.diff(-16),
@@ -111,14 +125,6 @@ class Theme implements ITheme {
             "geometry.width" => SizeValue.fromString("100%"),
             "geometry.height" => SizeValue.fromFloat(10),
         ]));
-
-        // ToDo: hardcode update views
-        if (Root.instance != null) {
-            for (view in Root.instance.views()) {
-                view.style = view.style;
-            }
-        }
-        updateSignal.emit();
     }
 
     public function resolve<T>(key:String, style:StyleId):T {
@@ -147,6 +153,17 @@ class Theme implements ITheme {
         return font;
     }
 
+    private static function resolveFontSize(fontSize:ThemeFontSize):ThemeFontSize {
+        if (fontSize == null) {
+            fontSize = {};
+        }
+        return {
+            base: fontSize.base != null ? fontSize.base : 18,
+            big: fontSize.big != null ? fontSize.big : 22,
+            veryBig: fontSize.veryBig != null ? fontSize.big : 24,
+        }
+    }
+
     private static function resolveColors(colors:ThemeColors):ThemeColors {
         if (colors == null) {
             colors = {};

src/main/haxework/view/utils/DrawUtil.hx

@@ -1,12 +1,10 @@
 package haxework.view.utils;
 
-import flash.display.Bitmap;
-import flash.Lib;
-import flash.geom.Point;
-import flash.geom.Matrix;
-import flash.geom.Rectangle;
 import flash.display.BitmapData;
 import flash.display.Graphics;
+import flash.geom.Matrix;
+import flash.geom.Point;
+import flash.geom.Rectangle;
 
 @:enum abstract FillType(String) from String to String {
     var NONE = "NONE";
@@ -56,8 +54,8 @@ class DrawUtil {
                 sy = rect.height / image.height;
         }
         m.scale(sx, sy);
-    var dx:Float = (rect.width - image.width * sx) / 2;
+        var dx:Float = rect.x + (rect.width - image.width * sx) / 2;
-    var dy:Float = (rect.height - image.height * sy) / 2;
+        var dy:Float = rect.y + (rect.height - image.height * sy) / 2;
         m.translate(dx, dy);
         graphics.beginBitmapFill(image, m, false, true);
         rect.x = Math.max(rect.x, m.tx);