From 451b107f6bf19f404032837ae1f2cfe02497b43a Mon Sep 17 00:00:00 2001 From: shmyga Date: Tue, 16 Jul 2019 14:53:31 +0300 Subject: [PATCH] [macro] update StyleMacro --- demo/src/demo/AppTheme.hx | 6 +- src/main/haxework/macro/StyleMacro.hx | 12 +- src/main/haxework/view/ScrollView.hx | 2 +- src/main/haxework/view/SpriteView.hx | 4 +- src/main/haxework/view/form/SelectView.hx | 2 +- src/main/haxework/view/list/HScrollBarView.hx | 4 +- src/main/haxework/view/list/VScrollBarView.hx | 4 +- src/main/haxework/view/skin/Background.hx | 13 ++ src/main/haxework/view/skin/Border.hx | 15 ++ src/main/haxework/view/skin/HScrollBarSkin.hx | 7 +- src/main/haxework/view/skin/Skin.hx | 6 +- src/main/haxework/view/skin/SpriteSkin.hx | 37 +---- src/main/haxework/view/skin/VScrollBarSkin.hx | 7 +- src/main/haxework/view/theme/Theme.hx | 156 +++++++----------- 14 files changed, 129 insertions(+), 146 deletions(-) create mode 100644 src/main/haxework/view/skin/Background.hx create mode 100644 src/main/haxework/view/skin/Border.hx diff --git a/demo/src/demo/AppTheme.hx b/demo/src/demo/AppTheme.hx index 8803270..6fa4a56 100644 --- a/demo/src/demo/AppTheme.hx +++ b/demo/src/demo/AppTheme.hx @@ -1,8 +1,6 @@ package demo; import haxework.color.Color; -import haxework.view.skin.Skin; -import haxework.view.theme.SkinStyle; import haxework.view.theme.Theme; using haxework.color.ColorUtil; @@ -15,7 +13,7 @@ class AppTheme extends Theme { override private function reload():Void { super.reload(); - styles.put("view", text().concat(background(colors.light, true))); - styles.put("test", [new SkinStyle(Skin.color(0x00ffff))]); + data.set("view", create(["skin.background.color" => colors.light], ["text"])); + data.set("test", create(["skin.background.color" => Color.fromInt(0x00ffff)])); } } diff --git a/src/main/haxework/macro/StyleMacro.hx b/src/main/haxework/macro/StyleMacro.hx index f2a2b6a..ece7534 100644 --- a/src/main/haxework/macro/StyleMacro.hx +++ b/src/main/haxework/macro/StyleMacro.hx @@ -95,6 +95,7 @@ class StyleMacro { var result:Array = []; field.kind = FProp("default", "set", type); var expr:Array = []; + expr.push(macro if (value == null) return null); expr.push(macro value.styleKey = (styleKey!=null?(styleKey+"."):"")+$v{field.name}); expr.push(macro value.style = style); expr.push(macro $i{field.name} = value); @@ -113,7 +114,7 @@ class StyleMacro { return result; } - private static function buildStyleKeyField(overrideField:Bool):Array { + private static function buildStyleKeyField(styleds:Array, overrideField:Bool):Array { var result:Array = []; var type:ComplexType = "String".toComplex(); if (!overrideField) { @@ -129,6 +130,9 @@ class StyleMacro { expr.push(macro super.styleKey = value); } expr.push(macro styleKey = value); + for (field in styleds) { + expr.push(macro $i{field.name}.styleKey = styleKey+"."+$v{field.name}); + } expr.push(macro return styleKey); var access:Array = [APrivate]; if (overrideField) { @@ -171,6 +175,10 @@ class StyleMacro { var propertyName = 'theme_${field.name}'; expr.push(macro $i{propertyName} = haxework.provider.Provider.get(haxework.view.theme.ITheme).resolve((styleKey!=null?(styleKey+"."):"")+$v{field.name}, style)); } + for (field in styleds) { + var propertyName = '${field.name}'; + expr.push(macro $i{propertyName} = haxework.provider.Provider.get(haxework.view.theme.ITheme).resolve((styleKey!=null?(styleKey+"."):"")+$v{field.name}, style)); + } if (hasOnStyle) { expr.push(macro onStyle()); } @@ -213,7 +221,7 @@ class StyleMacro { } result = result .concat(newFields) - .concat(buildStyleKeyField(overrideStyle)) + .concat(buildStyleKeyField(styleds, overrideStyle)) .concat(buildStyleField(properties, styleds, hasOnStyle, overrideStyle)); return result; } diff --git a/src/main/haxework/view/ScrollView.hx b/src/main/haxework/view/ScrollView.hx index 8c1f489..9c5b50b 100644 --- a/src/main/haxework/view/ScrollView.hx +++ b/src/main/haxework/view/ScrollView.hx @@ -23,7 +23,7 @@ class ScrollView extends HGroupView { public function new() { super(); layout.overflow = true; - skin = Skin.transparent; + skin = Skin.transparent(); mask = new Sprite(); content.addChild(mask); content.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent); diff --git a/src/main/haxework/view/SpriteView.hx b/src/main/haxework/view/SpriteView.hx index cb7b153..1c4e912 100755 --- a/src/main/haxework/view/SpriteView.hx +++ b/src/main/haxework/view/SpriteView.hx @@ -1,13 +1,13 @@ package haxework.view; import flash.display.Sprite; -import haxework.view.skin.Skin; +import haxework.view.skin.SpriteSkin; class SpriteView extends View { public function new() { super(new Sprite()); - skin = Skin.transparent; + skin = new SpriteSkin(); } override public function redraw():Void { diff --git a/src/main/haxework/view/form/SelectView.hx b/src/main/haxework/view/form/SelectView.hx index 132e566..2f7ee3a 100644 --- a/src/main/haxework/view/form/SelectView.hx +++ b/src/main/haxework/view/form/SelectView.hx @@ -63,7 +63,7 @@ class SelectView extends GroupView { public function new() { super(new VerticalLayout()); - skin = Skin.transparent; + skin = Skin.transparent(); currentView = new ButtonView(); currentView.onPress.connect(function(_) toggle()); dataView = new DataView(); diff --git a/src/main/haxework/view/list/HScrollBarView.hx b/src/main/haxework/view/list/HScrollBarView.hx index 2a8ca5c..b79b1c4 100755 --- a/src/main/haxework/view/list/HScrollBarView.hx +++ b/src/main/haxework/view/list/HScrollBarView.hx @@ -1,14 +1,14 @@ package haxework.view.list; import flash.geom.Point; +import haxework.view.skin.HScrollBarSkin; class HScrollBarView extends ScrollBarView { public function new() { super(); + skin = new HScrollBarSkin(); style = "scroll.horizontal"; - geometry.width.percent = 100; - geometry.height.fixed = 10; } override private function onMouseDown(p:Point):Void { diff --git a/src/main/haxework/view/list/VScrollBarView.hx b/src/main/haxework/view/list/VScrollBarView.hx index c358d45..37de770 100755 --- a/src/main/haxework/view/list/VScrollBarView.hx +++ b/src/main/haxework/view/list/VScrollBarView.hx @@ -1,14 +1,14 @@ package haxework.view.list; import flash.geom.Point; +import haxework.view.skin.VScrollBarSkin; class VScrollBarView extends ScrollBarView { public function new() { super(); + skin = new VScrollBarSkin(); style = "scroll.vertical"; - geometry.height.percent = 100; - geometry.width.fixed = 10; } override private function onMouseDown(p:Point):Void { diff --git a/src/main/haxework/view/skin/Background.hx b/src/main/haxework/view/skin/Background.hx new file mode 100644 index 0000000..c130216 --- /dev/null +++ b/src/main/haxework/view/skin/Background.hx @@ -0,0 +1,13 @@ +package haxework.view.skin; + +import haxework.color.Color; + +@:style class Background { + @:style(null) public var color(default, default):Null; + @:style(1) public var alpha(default, default):Null; + + public function new(?color:Color, ?alpha:Float) { + this.color = color; + this.alpha = alpha; + } +} diff --git a/src/main/haxework/view/skin/Border.hx b/src/main/haxework/view/skin/Border.hx new file mode 100644 index 0000000..5203b7a --- /dev/null +++ b/src/main/haxework/view/skin/Border.hx @@ -0,0 +1,15 @@ +package haxework.view.skin; + +import haxework.color.Color; + +@:style class Border { + @:style(null) public var color(default, default):Null; + @:style(2) public var thickness(default, default):Null; + @:style(1) public var alpha(default, default):Null; + + public function new(?color:Color, ?thickness:Float, ?alpha:Float) { + this.color = color; + this.thickness = thickness; + this.alpha = alpha; + } +} diff --git a/src/main/haxework/view/skin/HScrollBarSkin.hx b/src/main/haxework/view/skin/HScrollBarSkin.hx index 6d694f7..456326e 100644 --- a/src/main/haxework/view/skin/HScrollBarSkin.hx +++ b/src/main/haxework/view/skin/HScrollBarSkin.hx @@ -1,13 +1,14 @@ package haxework.view.skin; +import haxework.color.Color; import haxework.color.ColorUtil; import haxework.view.list.ScrollBarView; @:style class HScrollBarSkin implements ISkin { - public var foreColor(default, default):Int; - public var backColor(default, default):Int; + @:style(0) public var foreColor(default, default):Null; + @:style(0) public var backColor(default, default):Null; - public function new(foreColor:Int = 0, backColor:Int = 0) { + public function new(?foreColor:Color, ?backColor:Color) { this.foreColor = foreColor; this.backColor = backColor; } diff --git a/src/main/haxework/view/skin/Skin.hx b/src/main/haxework/view/skin/Skin.hx index fc06a5a..5ffce3a 100644 --- a/src/main/haxework/view/skin/Skin.hx +++ b/src/main/haxework/view/skin/Skin.hx @@ -7,14 +7,16 @@ import haxework.view.utils.DrawUtil; class Skin { - public static var transparent(default, never):ISkin = new SpriteSkin({color: 0, alpha: 0}); + public static function transparent():ISkin { + return new SpriteSkin(new Background(0, 0)); + } public static function bitmap(image:BitmapData, fillType:FillType = null):ISkin { return new BitmapSkin(image, fillType); } public static function color(color:Int, alpha:Float = 1.0):ISkin { - return new SpriteSkin({color: color, alpha: alpha}); + return new SpriteSkin(new Background(color, alpha)); } public static function buttonColor(color:Color, ?borderColor:Color):ISkin { diff --git a/src/main/haxework/view/skin/SpriteSkin.hx b/src/main/haxework/view/skin/SpriteSkin.hx index 42fa867..2722d17 100644 --- a/src/main/haxework/view/skin/SpriteSkin.hx +++ b/src/main/haxework/view/skin/SpriteSkin.hx @@ -1,42 +1,15 @@ package haxework.view.skin; import flash.display.Graphics; -import haxework.color.Color; - -typedef Border = { - @:optional var color:Color; - @:optional var thickness:Float; - @:optional var alpha:Float; -} - -typedef Background = { - @:optional var color:Color; - @:optional var alpha:Float; -} @:style class SpriteSkin implements ISkin { - @:style({}) public var border(default, default):Border; - @:style({}) public var background(default, default):Background; + @:style public var border(default, default):Border; + @:style public var background(default, default):Background; public function new(?background:Background, ?border:Border) { - this.background = resolveBackground(background); - this.border = resolveBorder(border); - } - - private static function resolveBackground(value:Background):Background { - return value != null ? { - color: value.color != null ? value.color : 0x000000, - alpha: value.alpha != null ? value.alpha : 1.0 - } : null; - } - - private static function resolveBorder(value:Border):Border { - return value != null ? { - color: value.color != null ? value.color : 0x000000, - alpha: value.alpha != null ? value.alpha : 1.0, - thickness: value.thickness != null ? value.thickness : 1 - } : null; + this.background = background != null ? background : new Background(); + this.border = border != null ? border : new Border(); } public function draw(view:SpriteView):Void { @@ -47,6 +20,8 @@ typedef Background = { } if (background.color != null) { graphics.beginFill(background.color, background.alpha); + } else { + graphics.beginFill(0, 0); } graphics.drawRect(0, 0, view.width, view.height); graphics.lineStyle(); diff --git a/src/main/haxework/view/skin/VScrollBarSkin.hx b/src/main/haxework/view/skin/VScrollBarSkin.hx index 5a772d0..4f6422f 100644 --- a/src/main/haxework/view/skin/VScrollBarSkin.hx +++ b/src/main/haxework/view/skin/VScrollBarSkin.hx @@ -1,13 +1,14 @@ package haxework.view.skin; +import haxework.color.Color; import haxework.color.ColorUtil; import haxework.view.list.ScrollBarView; @:style class VScrollBarSkin implements ISkin { - public var foreColor(default, default):Int; - public var backColor(default, default):Int; + @:style(0xff0000) public var foreColor(default, default):Null; + @:style(0xffff00) public var backColor(default, default):Null; - public function new(foreColor:Int = 0, backColor:Int = 0) { + public function new(?foreColor:Color, ?backColor:Color) { this.foreColor = foreColor; this.backColor = backColor; } diff --git a/src/main/haxework/view/theme/Theme.hx b/src/main/haxework/view/theme/Theme.hx index 5aa752d..8295dbe 100644 --- a/src/main/haxework/view/theme/Theme.hx +++ b/src/main/haxework/view/theme/Theme.hx @@ -1,15 +1,14 @@ package haxework.view.theme; -import haxework.view.geometry.Box; import flash.text.Font; import flash.text.FontType; import haxe.ds.StringMap; import haxework.color.Color; import haxework.signal.Signal; -import haxework.view.geometry.Geometry; -import haxework.view.skin.Skin; -import haxework.view.skin.SpriteSkin; -import haxework.view.text.FontPreset; +import haxework.view.geometry.Box; +import haxework.view.geometry.SizeValue; +import haxework.view.skin.ButtonColorSkin; +import haxework.view.skin.TabColorSkin; import haxework.view.theme.ITheme; using haxework.color.ColorUtil; @@ -65,12 +64,9 @@ class Theme implements ITheme { public var colors(default, set):ThemeColors; public var updateSignal(default, null):Signal0; - private var styles:StyleMap; - private var data:Map>; public function new(?font:ThemeFont, ?colors:ThemeColors) { - styles = new StyleMap(); updateSignal = new Signal0(); data = new Map(); this.font = font; @@ -95,30 +91,70 @@ class Theme implements ITheme { return colors; } + private function create(values:Map, ?parents:Array):Map { + if (parents != null) { + for (key in parents) { + var parent = data.get(key); + for (property in parent.keys()) { + if (!values.exists(property)) { + values.set(property, parent.get(property)); + } + } + } + } + return values; + } private function reload():Void { data.set("background", [ - "skin.background" => {color: colors.dark, alpha: 1}, + "skin.background.color" => colors.dark, ]); + data.set("border", [ + "skin.border.color" => colors.border, + ]); + data.set("frame", create([ + "geometry.padding" => Box.fromFloat(2), + ], ["background", "border"])); data.set("text", [ "font.color" => colors.text, "font.family" => font.name, "font.embed" => font.embed, ]); - data.set("button", [ + data.set("text0", create([ + "font.color" => colors.light.diff(-16), + ], ["text"])); + data.set("text1", create([ + "font.color" => colors.light.diff(16), + ], ["text"])); + data.set("label", create([ + "geometry.padding" => Box.fromArray([8, 2]), + ], ["text"])); + data.set("button", create([ + "skin" => function() return new ButtonColorSkin(), "skin.color" => colors.light, "geometry.padding" => Box.fromArray([25, 8]), - "font.color" => colors.text, - "font.family" => font.name, - "font.embed" => font.embed, - ]); - data.set("button.tab", [ - "skin.color" => colors.light, - "geometry.padding" => Box.fromArray([25, 8]), - "font.color" => colors.text, - "font.family" => font.name, - "font.embed" => font.embed, - ]); + ], ["text"])); + data.set("button.active", create([ + "skin.color" => colors.active, + ], ["button"])); + data.set("button.tab", create([ + "skin" => function() return new TabColorSkin(), + ], ["button"])); + data.set("dropdown", create([ + "_" => null, + ], ["background", "border"])); + data.set("scroll.vertical", create([ + "skin.foreColor" => colors.light, + "skin.backColor" => colors.dark, + "geometry.width" => SizeValue.fromFloat(10), + "geometry.height" => SizeValue.fromString("100%"), + ])); + data.set("scroll.horizontal", create([ + "skin.foreColor" => colors.light, + "skin.backColor" => colors.dark, + "geometry.width" => SizeValue.fromString("100%"), + "geometry.height" => SizeValue.fromFloat(10), + ])); // ToDo: hardcode update views if (Root.instance != null) { @@ -127,81 +163,15 @@ class Theme implements ITheme { } } updateSignal.emit(); - - styles.put("background", background()); - styles.put("border", background(null, true)); - styles.put("frame", background(null, true).concat([new GeometryStyle(new Geometry().setPadding(2))])); - - styles.put("text", text()); - styles.put("label", text().concat([new GeometryStyle(new Geometry().setPadding([8, 2]))])); - styles.put("button", button()); - styles.put("button.active", button(null, null, colors.active)); - styles.put("dropdown", background(null, true)); - styles.put("button.tab", text().concat([ - new SkinStyle(Skin.tabColor(this.colors.light)), - new GeometryStyle(new Geometry().setPadding([25, 8])) - ])); - - styles.put("text0", text().concat(background(this.colors.light.diff(-16)))); - styles.put("text1", text().concat(background(this.colors.light.diff(16)))); - styles.put("scroll.vertical", [ - new SkinStyle(Skin.scrollVertical(this.colors.light, this.colors.dark)), - ]); - styles.put("scroll.horizontal", [ - new SkinStyle(Skin.scrollHorizontal(this.colors.light, this.colors.dark)), - ]); - } - - public function background(?color:Color, border:Bool = false):StyleSet { - if (color == null) { - color = colors.dark; - } - return [ - new SkinStyle(new SpriteSkin( - {color: color}, - border ? {color: colors.light, thickness: 2} : null - )), - ]; - } - - public function text(?color:Color, ?size:Null):StyleSet { - if (color == null) { - color = colors.text; - } - if (size == null) { - size = baseFontSize; - } - return [ - new FontStyle(new FontPreset(font.name, font.embed, color, size)), - ]; - } - - public function button(?color:Color, ?textColor:Color, ?borderColor:Color):StyleSet { - if (color == null) { - color = colors.light; - } - return text(textColor).concat([ - new SkinStyle(Skin.buttonColor(color, borderColor)), - new GeometryStyle(new Geometry().setPadding([25, 8])), - ]); - } - - public function textBox(?color:Color):StyleSet { - return text(color).concat([ - new SkinStyle(new SpriteSkin({color: 0, alpha: 0.1}, {color: colors.light, thickness: 2})), - ]); - } - - public function bind(style:StyleId, view:IView):Void { - styles.connect(style, view); - } - - public function unbind(view:IView):Void { - styles.disconnect(view); } public function resolve(key:String, style:StyleId):T { - return style != null && data.exists(style) ? data.get(style).get(key) : null; + trace("resolve", key, style != null ? style : ""); + var result:Dynamic = style != null && data.exists(style) ? data.get(style).get(key) : null; + if (Reflect.isFunction(result)) { + result = result(); + } + return result; } private static function resolveFont(font:ThemeFont):ThemeFont {