From 81223496688fc65992b6b0f868ff29ec3ccf628f Mon Sep 17 00:00:00 2001 From: shmyga Date: Wed, 17 Jul 2019 17:48:09 +0300 Subject: [PATCH] [view] remove old styles --- demo/src/demo/AppTheme.hx | 11 +- demo/src/demo/form/TailForm.hx | 1 + demo/src/demo/form/TailForm.yaml | 3 +- src/main/haxework/view/skin/BitmapSkin.hx | 29 ++- src/main/haxework/view/skin/ProgressSkin.hx | 27 --- src/main/haxework/view/theme/FontStyle.hx | 34 --- src/main/haxework/view/theme/GeometryStyle.hx | 36 --- src/main/haxework/view/theme/IStyle.hx | 5 - src/main/haxework/view/theme/ITheme.hx | 7 + src/main/haxework/view/theme/LayoutStyle.hx | 33 --- src/main/haxework/view/theme/SkinStyle.hx | 17 -- src/main/haxework/view/theme/Theme.hx | 57 +++-- src/main/haxework/view/utils/DrawUtil.hx | 228 +++++++++--------- 13 files changed, 183 insertions(+), 305 deletions(-) delete mode 100755 src/main/haxework/view/skin/ProgressSkin.hx delete mode 100644 src/main/haxework/view/theme/FontStyle.hx delete mode 100644 src/main/haxework/view/theme/GeometryStyle.hx delete mode 100644 src/main/haxework/view/theme/IStyle.hx delete mode 100644 src/main/haxework/view/theme/LayoutStyle.hx delete mode 100644 src/main/haxework/view/theme/SkinStyle.hx diff --git a/demo/src/demo/AppTheme.hx b/demo/src/demo/AppTheme.hx index 6fa4a56..8e08677 100644 --- a/demo/src/demo/AppTheme.hx +++ b/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("test", create(["skin.background.color" => Color.fromInt(0x00ffff)])); + data.set("view", create([ + "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), + ])); } } diff --git a/demo/src/demo/form/TailForm.hx b/demo/src/demo/form/TailForm.hx index 372c983..e5407c7 100644 --- a/demo/src/demo/form/TailForm.hx +++ b/demo/src/demo/form/TailForm.hx @@ -16,6 +16,7 @@ import haxework.view.utils.DrawUtil; var view:IView; if (value.image != null) { var imageView = new ImageView(); + imageView.style = "view"; imageView.stretch = false; //imageView.style = "border"; imageView.fillType = FillType.CONTAIN; diff --git a/demo/src/demo/form/TailForm.yaml b/demo/src/demo/form/TailForm.yaml index a4ba11a..7e24bb7 100644 --- a/demo/src/demo/form/TailForm.yaml +++ b/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 diff --git a/src/main/haxework/view/skin/BitmapSkin.hx b/src/main/haxework/view/skin/BitmapSkin.hx index 97d354a..dfc2607 100755 --- a/src/main/haxework/view/skin/BitmapSkin.hx +++ b/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 { - public var image(null, set):BitmapData; - public var color(default, default):Int; - public var fillType(default, default):FillType; +@:style(true) class BitmapSkin extends SpriteSkin { + @:style(null) public var image(default, default):BitmapData; + @:style(FillType.DEFAULT) 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 { - if (image != value) { - image = value; - } - return image; - } - - public function draw(view:SpriteView):Void { + override public function draw(view:SpriteView):Void { + super.draw(view); 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); } } diff --git a/src/main/haxework/view/skin/ProgressSkin.hx b/src/main/haxework/view/skin/ProgressSkin.hx deleted file mode 100755 index 9bc58a0..0000000 --- a/src/main/haxework/view/skin/ProgressSkin.hx +++ /dev/null @@ -1,27 +0,0 @@ -package haxework.view.skin; - -import flash.display.Graphics; -import haxework.view.skin.ISkin; - -@:style class ProgressSkin implements ISkin { - - 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(); - } -} diff --git a/src/main/haxework/view/theme/FontStyle.hx b/src/main/haxework/view/theme/FontStyle.hx deleted file mode 100644 index 6c0a857..0000000 --- a/src/main/haxework/view/theme/FontStyle.hx +++ /dev/null @@ -1,34 +0,0 @@ -package haxework.view.theme; - -import haxework.view.text.ITextView; -import haxework.view.text.FontPreset; - -class FontStyle implements IStyle { - - 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(); - } - } -} diff --git a/src/main/haxework/view/theme/GeometryStyle.hx b/src/main/haxework/view/theme/GeometryStyle.hx deleted file mode 100644 index 65c1f42..0000000 --- a/src/main/haxework/view/theme/GeometryStyle.hx +++ /dev/null @@ -1,36 +0,0 @@ -package haxework.view.theme; - -import haxework.view.geometry.Geometry; - -class GeometryStyle implements IStyle> { - - private var geometry:Geometry; - - public function new(geometry:Geometry) { - this.geometry = geometry; - } - - public function apply(view:IView):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(); - } - } -} diff --git a/src/main/haxework/view/theme/IStyle.hx b/src/main/haxework/view/theme/IStyle.hx deleted file mode 100644 index 1320f98..0000000 --- a/src/main/haxework/view/theme/IStyle.hx +++ /dev/null @@ -1,5 +0,0 @@ -package haxework.view.theme; - -interface IStyle> { - public function apply(view:V):Void; -} diff --git a/src/main/haxework/view/theme/ITheme.hx b/src/main/haxework/view/theme/ITheme.hx index b0215ad..37e7f20 100644 --- a/src/main/haxework/view/theme/ITheme.hx +++ b/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(key:String, style:StyleId):T; diff --git a/src/main/haxework/view/theme/LayoutStyle.hx b/src/main/haxework/view/theme/LayoutStyle.hx deleted file mode 100644 index aca84b5..0000000 --- a/src/main/haxework/view/theme/LayoutStyle.hx +++ /dev/null @@ -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 { - - 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(); - } - } -} diff --git a/src/main/haxework/view/theme/SkinStyle.hx b/src/main/haxework/view/theme/SkinStyle.hx deleted file mode 100644 index 6e1a850..0000000 --- a/src/main/haxework/view/theme/SkinStyle.hx +++ /dev/null @@ -1,17 +0,0 @@ -package haxework.view.theme; - -import haxework.view.skin.ISkin; - -class SkinStyle implements IStyle> { - - private var skin:ISkin; - - public function new(skin:ISkin) { - this.skin = skin; - } - - public function apply(view:IView):Void { - view.skin = skin; - view.toRedraw(); - } -} diff --git a/src/main/haxework/view/theme/Theme.hx b/src/main/haxework/view/theme/Theme.hx index b5f0fd4..6719fef 100644 --- a/src/main/haxework/view/theme/Theme.hx +++ b/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>; - 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(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 = {}; diff --git a/src/main/haxework/view/utils/DrawUtil.hx b/src/main/haxework/view/utils/DrawUtil.hx index 785d9e5..7fcf06e 100755 --- a/src/main/haxework/view/utils/DrawUtil.hx +++ b/src/main/haxework/view/utils/DrawUtil.hx @@ -1,130 +1,128 @@ 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"; - var DEFAULT = "DEFAULT"; - var COVER = "COVER"; - var CONTAIN = "CONTAIN"; - var REPEAT = "REPEAT"; - var STRETCH = "STRETCH"; - var NINEPATH = "NINEPATH"; + var NONE = "NONE"; + var DEFAULT = "DEFAULT"; + var COVER = "COVER"; + var CONTAIN = "CONTAIN"; + var REPEAT = "REPEAT"; + var STRETCH = "STRETCH"; + var NINEPATH = "NINEPATH"; } class DrawUtil { - public static function draw(graphics:Graphics, image:BitmapData, rect:Rectangle, ?fillType:FillType = null, ?color:Int = -1, ?clear:Bool = true):Void { - if (image == null) return; - if (fillType == null) fillType = FillType.DEFAULT; - if (clear) graphics.clear(); - if (color > -1) { - graphics.beginFill(color); - graphics.drawRect(rect.x, rect.y, rect.width, rect.height); - graphics.endFill(); - } - var m:Matrix = new Matrix(); - var sx:Float = 1.0; - var sy:Float = 1.0; - switch (fillType) { - case FillType.REPEAT: - graphics.beginBitmapFill(image, m, true, false); + public static function draw(graphics:Graphics, image:BitmapData, rect:Rectangle, ?fillType:FillType = null, ?color:Int = -1, ?clear:Bool = true):Void { + if (image == null) return; + if (fillType == null) fillType = FillType.DEFAULT; + if (clear) graphics.clear(); + if (color > -1) { + graphics.beginFill(color); + graphics.drawRect(rect.x, rect.y, rect.width, rect.height); + graphics.endFill(); + } + var m:Matrix = new Matrix(); + var sx:Float = 1.0; + var sy:Float = 1.0; + switch (fillType) { + case FillType.REPEAT: + graphics.beginBitmapFill(image, m, true, false); + graphics.drawRect(rect.x, rect.y, rect.width, rect.height); + graphics.endFill(); + return; + case FillType.NONE: + graphics.beginBitmapFill(image, m, false, false); + graphics.drawRect(rect.x, rect.y, rect.width, rect.height); + graphics.endFill(); + return; + case FillType.NINEPATH: + draw9path(graphics, image, rect); + return; + case FillType.DEFAULT: + case FillType.CONTAIN: + sx = sy = Math.min(rect.width / image.width, rect.height / image.height); + case FillType.COVER: + sx = sy = Math.max(rect.width / image.width, rect.height / image.height); + case FillType.STRETCH: + sx = rect.width / image.width; + sy = rect.height / image.height; + } + m.scale(sx, sy); + var dx:Float = rect.x + (rect.width - image.width * sx) / 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); + rect.y = Math.max(rect.y, m.ty); + rect.width = Math.min(rect.width, image.width * sx); + rect.height = Math.min(rect.height, image.height * sy); graphics.drawRect(rect.x, rect.y, rect.width, rect.height); graphics.endFill(); - return; - case FillType.NONE: - graphics.beginBitmapFill(image, m, false, false); - graphics.drawRect(rect.x, rect.y, rect.width, rect.height); - graphics.endFill(); - return; - case FillType.NINEPATH: - draw9path(graphics, image, rect); - return; - case FillType.DEFAULT: - case FillType.CONTAIN: - sx = sy = Math.min(rect.width / image.width, rect.height / image.height); - case FillType.COVER: - sx = sy = Math.max(rect.width / image.width, rect.height / image.height); - case FillType.STRETCH: - sx = rect.width / image.width; - sy = rect.height / image.height; } - m.scale(sx, sy); - var dx:Float = (rect.width - image.width * sx) / 2; - var dy:Float = (rect.height - image.height * sy) / 2; - m.translate(dx, dy); - graphics.beginBitmapFill(image, m, false, true); - rect.x = Math.max(rect.x, m.tx); - rect.y = Math.max(rect.y, m.ty); - rect.width = Math.min(rect.width, image.width * sx); - rect.height = Math.min(rect.height, image.height * sy); - graphics.drawRect(rect.x, rect.y, rect.width, rect.height); - graphics.endFill(); - } - private static function draw9path(graphics:Graphics, image:BitmapData, rect:Rectangle):Void { - var w:Int = Math.round(image.width / 2); - var h:Int = Math.round(image.height / 2); - var m:Matrix = null; - //lt - graphics.beginBitmapFill(image, m, false); - graphics.drawRect(0, 0, w, h); - graphics.endFill(); - //rt - m = new Matrix(); - m.translate(rect.width - 2 * w, 0); - graphics.beginBitmapFill(image, m, false); - graphics.drawRect(rect.width - w, 0, w, h); - graphics.endFill(); - //lb - m = new Matrix(); - m.translate(0, rect.height - 2 * h); - graphics.beginBitmapFill(image, m, false); - graphics.drawRect(0, rect.height - h, w, h); - graphics.endFill(); - //rb - m = new Matrix(); - m.translate(rect.width - 2 * w, rect.height - 2 * h); - graphics.beginBitmapFill(image, m, false); - graphics.drawRect(rect.width - w, rect.height - h, w, h); - graphics.endFill(); - //c - graphics.beginFill(image.getPixel(w, h)); - graphics.drawRect(w - 1, h - 1, rect.width - 2 * w + 2, rect.height - 2 * h + 2); - graphics.endFill(); - //t - var t:BitmapData = new BitmapData(1, h); - t.copyPixels(image, new Rectangle(w, 0, 1, h), new Point(0, 0)); - graphics.beginBitmapFill(t, null, true); - graphics.drawRect(w, 0, rect.width - w * 2, h); - graphics.endFill(); - //b - var b:BitmapData = new BitmapData(1, h); - b.copyPixels(image, new Rectangle(w, h, 1, h), new Point(0, 0)); - m = new Matrix(); - m.translate(0, rect.height - h); - graphics.beginBitmapFill(b, m, true); - graphics.drawRect(w, rect.height - h, rect.width - w * 2, h - 2); //ToDo:? - graphics.endFill(); - //l - var l:BitmapData = new BitmapData(w, 1); - l.copyPixels(image, new Rectangle(0, h, w, 1), new Point(0, 0)); - graphics.beginBitmapFill(l, null, true); - graphics.drawRect(0, h, w, rect.height - h * 2); - graphics.endFill(); - //r - var r:BitmapData = new BitmapData(w, 1); - r.copyPixels(image, new Rectangle(w, h, w, 1), new Point(0, 0)); - m = new Matrix(); - m.translate(rect.width - w, 0); - graphics.beginBitmapFill(r, m, true); - graphics.drawRect(rect.width - w, h, w, rect.height - h * 2); - graphics.endFill(); - } + private static function draw9path(graphics:Graphics, image:BitmapData, rect:Rectangle):Void { + var w:Int = Math.round(image.width / 2); + var h:Int = Math.round(image.height / 2); + var m:Matrix = null; + //lt + graphics.beginBitmapFill(image, m, false); + graphics.drawRect(0, 0, w, h); + graphics.endFill(); + //rt + m = new Matrix(); + m.translate(rect.width - 2 * w, 0); + graphics.beginBitmapFill(image, m, false); + graphics.drawRect(rect.width - w, 0, w, h); + graphics.endFill(); + //lb + m = new Matrix(); + m.translate(0, rect.height - 2 * h); + graphics.beginBitmapFill(image, m, false); + graphics.drawRect(0, rect.height - h, w, h); + graphics.endFill(); + //rb + m = new Matrix(); + m.translate(rect.width - 2 * w, rect.height - 2 * h); + graphics.beginBitmapFill(image, m, false); + graphics.drawRect(rect.width - w, rect.height - h, w, h); + graphics.endFill(); + //c + graphics.beginFill(image.getPixel(w, h)); + graphics.drawRect(w - 1, h - 1, rect.width - 2 * w + 2, rect.height - 2 * h + 2); + graphics.endFill(); + //t + var t:BitmapData = new BitmapData(1, h); + t.copyPixels(image, new Rectangle(w, 0, 1, h), new Point(0, 0)); + graphics.beginBitmapFill(t, null, true); + graphics.drawRect(w, 0, rect.width - w * 2, h); + graphics.endFill(); + //b + var b:BitmapData = new BitmapData(1, h); + b.copyPixels(image, new Rectangle(w, h, 1, h), new Point(0, 0)); + m = new Matrix(); + m.translate(0, rect.height - h); + graphics.beginBitmapFill(b, m, true); + graphics.drawRect(w, rect.height - h, rect.width - w * 2, h - 2); //ToDo:? + graphics.endFill(); + //l + var l:BitmapData = new BitmapData(w, 1); + l.copyPixels(image, new Rectangle(0, h, w, 1), new Point(0, 0)); + graphics.beginBitmapFill(l, null, true); + graphics.drawRect(0, h, w, rect.height - h * 2); + graphics.endFill(); + //r + var r:BitmapData = new BitmapData(w, 1); + r.copyPixels(image, new Rectangle(w, h, w, 1), new Point(0, 0)); + m = new Matrix(); + m.translate(rect.width - w, 0); + graphics.beginBitmapFill(r, m, true); + graphics.drawRect(rect.width - w, h, w, rect.height - h * 2); + graphics.endFill(); + } }