From ce17fff6df417c5252dd7da468d49dffeef4664d Mon Sep 17 00:00:00 2001 From: shmyga Date: Fri, 12 Jul 2019 11:10:35 +0300 Subject: [PATCH] [view] rework view size system --- demo/build.hxml | 4 +- demo/src/demo/Test.hx | 17 ++ demo/src/demo/test/TestView.hx | 7 + demo/src/demo/test/TestView.yaml | 51 ++++++ src/main/haxework/macro/TemplateMacro.hx | 3 +- src/main/haxework/view/IView.hx | 15 +- src/main/haxework/view/ImageView.hx | 2 +- src/main/haxework/view/Root.hx | 5 +- src/main/haxework/view/ScrollView.hx | 2 +- src/main/haxework/view/SpriteView.hx | 28 +-- src/main/haxework/view/View.hx | 74 +++----- src/main/haxework/view/core/Geometry.hx | 165 ------------------ src/main/haxework/view/form/SelectView.hx | 2 +- .../haxework/view/{core => geometry}/Box.hx | 2 +- src/main/haxework/view/geometry/Geometry.hx | 55 ++++++ .../view/{core => geometry}/HAlign.hx | 2 +- src/main/haxework/view/geometry/Position.hx | 6 + .../haxework/view/{core => geometry}/Size.hx | 6 +- src/main/haxework/view/geometry/SizeSet.hx | 28 +++ src/main/haxework/view/geometry/SizeValue.hx | 74 ++++++++ .../view/{core => geometry}/VAlign.hx | 2 +- src/main/haxework/view/group/GroupView.hx | 4 +- src/main/haxework/view/group/IGroupView.hx | 4 +- .../haxework/view/layout/DefaultLayout.hx | 36 +--- .../haxework/view/layout/HorizontalLayout.hx | 44 +++-- src/main/haxework/view/layout/ILayout.hx | 4 +- src/main/haxework/view/layout/Layout.hx | 4 +- .../haxework/view/layout/VerticalLayout.hx | 44 +++-- src/main/haxework/view/list/HListView.hx | 2 +- src/main/haxework/view/list/ListView.hx | 2 +- src/main/haxework/view/list/VListView.hx | 2 +- src/main/haxework/view/popup/PopupView.hx | 2 +- src/main/haxework/view/skin/GeometrySkin.hx | 2 +- src/main/haxework/view/skin/ISkin.hx | 4 +- src/main/haxework/view/skin/Skin.hx | 2 +- src/main/haxework/view/text/FontStyle.hx | 12 ++ src/main/haxework/view/text/ITextView.hx | 14 +- src/main/haxework/view/theme/ITheme.hx | 9 +- src/main/haxework/view/theme/Theme.hx | 13 +- 39 files changed, 384 insertions(+), 370 deletions(-) create mode 100644 demo/src/demo/Test.hx create mode 100644 demo/src/demo/test/TestView.hx create mode 100644 demo/src/demo/test/TestView.yaml delete mode 100644 src/main/haxework/view/core/Geometry.hx rename src/main/haxework/view/{core => geometry}/Box.hx (98%) create mode 100644 src/main/haxework/view/geometry/Geometry.hx rename src/main/haxework/view/{core => geometry}/HAlign.hx (82%) create mode 100644 src/main/haxework/view/geometry/Position.hx rename src/main/haxework/view/{core => geometry}/Size.hx (90%) create mode 100644 src/main/haxework/view/geometry/SizeSet.hx create mode 100644 src/main/haxework/view/geometry/SizeValue.hx rename src/main/haxework/view/{core => geometry}/VAlign.hx (82%) create mode 100644 src/main/haxework/view/text/FontStyle.hx diff --git a/demo/build.hxml b/demo/build.hxml index 739d592..012513e 100755 --- a/demo/build.hxml +++ b/demo/build.hxml @@ -5,10 +5,10 @@ --macro haxework.parser.Parser.auto() -debug -D native_trace -#-D dev_layout +-D dev_layout -swf-version 10.1 -swf-header 800:600:30:000000 --main demo.Demo +-main demo.Test -swf target/demo.swf #-as3 target diff --git a/demo/src/demo/Test.hx b/demo/src/demo/Test.hx new file mode 100644 index 0000000..53b9bf8 --- /dev/null +++ b/demo/src/demo/Test.hx @@ -0,0 +1,17 @@ +package demo; + +import demo.test.TestView; +import haxework.view.Root; +import haxework.view.SpriteView; + +class Test { + public static function main():Void { + new Test(); + } + + public function new() { + trace("Test"); + var view = new SpriteView(); + Root.bind(new TestView()); + } +} diff --git a/demo/src/demo/test/TestView.hx b/demo/src/demo/test/TestView.hx new file mode 100644 index 0000000..c4e5aa6 --- /dev/null +++ b/demo/src/demo/test/TestView.hx @@ -0,0 +1,7 @@ +package demo.test; + +import haxework.view.group.GroupView; + +@:template class TestView extends GroupView { + +} diff --git a/demo/src/demo/test/TestView.yaml b/demo/src/demo/test/TestView.yaml new file mode 100644 index 0000000..0c1e657 --- /dev/null +++ b/demo/src/demo/test/TestView.yaml @@ -0,0 +1,51 @@ +--- +geometry.padding: 10 +views: + - $type: haxework.view.group.HGroupView + geometry.padding: 10 + geometry.width: 100% + layout.margin: 10 + layout.vAlign: middle + skin: + $type: haxework.view.skin.ColorSkin + color: 0xffff00 + views: + - $type: haxework.view.SpriteView + geometry.width: 100 + geometry.height: 100 + skin: + $type: haxework.view.skin.ColorSkin + color: 0xff0000 + - $type: haxework.view.group.VGroupView + geometry.padding: 10 + layout.margin: 10 + skin: + $type: haxework.view.skin.ColorSkin + color: 0x00ffff + views: + - $type: haxework.view.SpriteView + geometry.width: 100 + geometry.height: 100 + size: + _test_: [200, 200] + skin: + $type: haxework.view.skin.ColorSkin + color: 0xff0000 + - $type: haxework.view.SpriteView + geometry.width: 100 + geometry.height: 100 + skin: + $type: haxework.view.skin.ColorSkin + color: 0xff0000 + - $type: haxework.view.SpriteView + geometry.width: 60% + geometry.height: 100% + skin: + $type: haxework.view.skin.ColorSkin + color: 0xff0000 + - $type: haxework.view.SpriteView + geometry.width: 40% + geometry.height: 80% + skin: + $type: haxework.view.skin.ColorSkin + color: 0xff0000 diff --git a/src/main/haxework/macro/TemplateMacro.hx b/src/main/haxework/macro/TemplateMacro.hx index 1d0c253..7a32a76 100644 --- a/src/main/haxework/macro/TemplateMacro.hx +++ b/src/main/haxework/macro/TemplateMacro.hx @@ -154,7 +154,8 @@ class TemplateMacro { } exprs.push(macro $p{[name, key.substr(1)]}.connect(${e})); case ["_", "_"]: - exprs.push(Context.parse('${name}["${key.substr(1, key.length - 2)}"] = ${value}', getPosition(position))); + //exprs.push(Context.parse('${name}["${key.substr(1, key.length - 2)}"] = ${value}', getPosition(position))); + exprs.push(Context.parse('${name}.set("${key.substr(1, key.length - 2)}", ${value})', getPosition(position))); case _: exprs.push(Context.parse('${name}.${key} = ${value}', getPosition(position))); } diff --git a/src/main/haxework/view/IView.hx b/src/main/haxework/view/IView.hx index 45056a8..26b6f7b 100755 --- a/src/main/haxework/view/IView.hx +++ b/src/main/haxework/view/IView.hx @@ -2,24 +2,25 @@ package haxework.view; import flash.display.DisplayObject; import flash.geom.Rectangle; -import haxework.view.core.Geometry; +import haxework.view.geometry.Geometry; import haxework.view.group.IGroupView; import haxework.view.skin.ISkin; interface IView { + @:style public var geometry(default, default):Geometry; + @:style public var skin(default, default):ISkin; + public var id(default, default):String; public var x(default, set):Float; public var y(default, set):Float; - public var width(default, set):Float; - public var height(default, set):Float; + public var width(default, null):Float; + public var height(default, null):Float; - public var geometry(default, default):Geometry; + public var styles(default, default):Array; public var content(default, null):C; - public var skin(default, set):SkinSet; - public var skinId(null, set):String; public var parent(default, null):Null; @@ -41,5 +42,5 @@ interface IView { public function remove():Void; - public function setContentSize(width:Float, height:Float, type:String="default"):Void; + public function setSize(width:Float, height:Float, type:String = "default"):Void; } diff --git a/src/main/haxework/view/ImageView.hx b/src/main/haxework/view/ImageView.hx index bacaf32..94e6d4e 100755 --- a/src/main/haxework/view/ImageView.hx +++ b/src/main/haxework/view/ImageView.hx @@ -7,7 +7,7 @@ import haxework.view.utils.BitmapUtil; import haxework.view.utils.DrawUtil.FillType; import haxework.net.ImageLoader; -class ImageView extends SpriteView { +@:style("image") class ImageView extends SpriteView { public var image(default, set):BitmapData; public var imageUrl(default, set):String; diff --git a/src/main/haxework/view/Root.hx b/src/main/haxework/view/Root.hx index b78bff1..97b5b34 100755 --- a/src/main/haxework/view/Root.hx +++ b/src/main/haxework/view/Root.hx @@ -56,12 +56,9 @@ class Root { private function onResizeEvent(?_):Void { var content:DisplayObject = view.content; if (autoSize) { - view.width = content.stage.stageWidth; - view.height = content.stage.stageHeight; + view.setSize(content.stage.stageWidth, content.stage.stageHeight, "stage"); view.toUpdate(); } else { - view.width = view.geometry.minWidth; - view.height = view.geometry.minHeight; view.x = (content.stage.stageWidth - view.width) / 2; view.y = (content.stage.stageHeight - view.height) / 2; } diff --git a/src/main/haxework/view/ScrollView.hx b/src/main/haxework/view/ScrollView.hx index 68bfb15..1feddc4 100644 --- a/src/main/haxework/view/ScrollView.hx +++ b/src/main/haxework/view/ScrollView.hx @@ -4,7 +4,7 @@ import flash.display.DisplayObject; import flash.display.Sprite; import flash.events.MouseEvent; import haxework.signal.Signal; -import haxework.view.core.Geometry.Position; +import haxework.view.geometry.Geometry.Position; import haxework.view.group.HGroupView; import haxework.view.list.ScrollBarView; import haxework.view.list.VScrollBarView; diff --git a/src/main/haxework/view/SpriteView.hx b/src/main/haxework/view/SpriteView.hx index 92c0441..1faed34 100755 --- a/src/main/haxework/view/SpriteView.hx +++ b/src/main/haxework/view/SpriteView.hx @@ -1,21 +1,23 @@ package haxework.view; +import haxework.view.skin.ColorSkin; import flash.display.Sprite; class SpriteView extends View { - public function new() { - super(new Sprite()); - } + public function new() { + super(new Sprite()); + skin = new ColorSkin(0, 0); + } - override public function redraw():Void { - this.content.graphics.clear(); - super.redraw(); - #if dev_layout - var graphics = content.graphics; - graphics.lineStyle(1, 0x00ff00); - graphics.drawRect(0, 0, width, height); - graphics.lineStyle(); - #end - } + override public function redraw():Void { + this.content.graphics.clear(); + super.redraw(); + #if dev_layout + var graphics = content.graphics; + graphics.lineStyle(1, 0x00ff00); + graphics.drawRect(0, 0, width, height); + graphics.lineStyle(); + #end + } } diff --git a/src/main/haxework/view/View.hx b/src/main/haxework/view/View.hx index 62fa489..7c1c8c2 100755 --- a/src/main/haxework/view/View.hx +++ b/src/main/haxework/view/View.hx @@ -3,7 +3,8 @@ package haxework.view; import flash.display.DisplayObject; import flash.display.InteractiveObject; import flash.geom.Rectangle; -import haxework.view.core.Geometry; +import haxework.view.geometry.Geometry; +import haxework.view.geometry.SizeSet; import haxework.view.group.IGroupView; import haxework.view.skin.ISkin; import haxework.view.theme.ITheme; @@ -15,19 +16,19 @@ class View implements IView { @:provide var theme:ITheme; + public var geometry(default, default):Geometry; + public var skin(default, default):ISkin; + public var styles(default, default):Array; + public var id(default, default):String; public var x(default, set):Float; public var y(default, set):Float; - public var width(default, set):Float; - public var height(default, set):Float; - - public var geometry(default, default):Geometry; + public var width(default, null):Float; + public var height(default, null):Float; public var content(default, null):C; - public var skin(default, set):SkinSet; - public var skinId(null, set):String; public var parent(default, null):Null; @@ -37,8 +38,11 @@ class View implements IView { public var rect(get, null):Rectangle; + private var size:SizeSet; + public function new(content:C) { id = Type.getClassName(Type.getClass(this)) + counter++; + size = new SizeSet(); this.content = content; x = 0; y = 0; @@ -47,7 +51,7 @@ class View implements IView { geometry = new Geometry(); visible = true; index = -1; - skin = []; + skin = null; } public function toRedraw():Void { @@ -65,19 +69,22 @@ class View implements IView { } public function update():Void { + setSize(geometry.width.fixed, geometry.height.fixed, "geometry"); } public function redraw():Void { - for (skin in this.skin) { + if (skin != null) { skin.draw(this); } } - public function setContentSize(width:Float, height:Float, type:String="default"):Void { - var contentSize = geometry.size.content.get(type); - if (contentSize == null || width != contentSize.width || height != contentSize.height) { - geometry.size.content.set(type, [width, height]); + public function setSize(width:Float, height:Float, type:String = "default"):Void { + if (size.update([width, height], type)) { + var s = size.toSize(); + this.width = s.width; + this.height = s.height; toUpdateParent(); + toRedraw(); } } @@ -99,51 +106,12 @@ class View implements IView { return y; } - private function set_width(value:Float):Float { - if (width != value) { - width = value; - toRedraw(); - if (geometry != null && geometry.size.ratio > -1) { - var ratioHeight = value / geometry.size.ratio; - var size = geometry.size.content["ratio.height"]; - if (size == null || size.height != ratioHeight) { - this.setContentSize(-1, ratioHeight, "ratio.height"); - } - } - } - return width; - } - - private function set_height(value:Float):Float { - if (height != value) { - height = value; - toRedraw(); - if (geometry != null && geometry.size.ratio > -1) { - var ratioWidth = value * geometry.size.ratio; - var size = geometry.size.content["ratio.width"]; - if (size == null || size.width != ratioWidth) { - this.setContentSize(ratioWidth, -1, "ratio.width"); - } - } - } - return height; - } - - private function set_skin(value:SkinSet):SkinSet { + private function set_skin(value:ISkin):ISkin { this.skin = value; toRedraw(); return this.skin; } - private function set_skinId(value:String):String { - //skin = theme != null ? theme.resolve(value) : []; - skinId = value; - if (theme != null) { - theme.bind(skinId, this); - } - return skinId; - } - private function set_visible(value:Bool):Bool { if (visible != value) { visible = value; diff --git a/src/main/haxework/view/core/Geometry.hx b/src/main/haxework/view/core/Geometry.hx deleted file mode 100644 index 7f4303f..0000000 --- a/src/main/haxework/view/core/Geometry.hx +++ /dev/null @@ -1,165 +0,0 @@ -package haxework.view.core; - -enum SizeValue { - FIXED(value:Float); - PERCENT(value:Float); -} - -abstract ASizeValue(SizeValue) { - - public inline function new(value:SizeValue) { - this = value; - } - - @:from static public inline function fromFloat(value:Float):ASizeValue { - return new ASizeValue(FIXED(value)); - } - - @:from static public inline function fromString(value:String):ASizeValue { - if (value.substr(value.length - 1) == "%") { - return new ASizeValue(PERCENT(Std.parseFloat(value))); - } else { - return new ASizeValue(FIXED(Std.parseFloat(value))); - } - } - - @:to public inline function toSizeValue():SizeValue { - return this; - } -} - -class SizeSet { - public var content(default, default):Map; - public var fixed(default, default):Size; - public var percent(default, default):Size; - public var stretch(null, set):Bool; - public var empty(get, null):Bool; - public var ratio(default, default):Float = -1; - - public var width(null, set):ASizeValue; - public var height(null, set):ASizeValue; - - public function new() { - this.content = new Map(); - this.fixed = []; - this.percent = []; - } - - inline private function set_stretch(value:Bool):Bool { - this.percent = value ? [100] : []; - return value; - } - - inline private function get_empty():Bool { - return fixed.empty && percent.empty; - } - - inline private function set_width(value:ASizeValue):ASizeValue { - switch cast(value, SizeValue) { - case PERCENT(v): percent.width = v; - case FIXED(v): fixed.width = v; - } - return value; - } - - inline private function set_height(value:ASizeValue):ASizeValue { - switch cast(value, SizeValue) { - case PERCENT(v): percent.height = v; - case FIXED(v): fixed.height = v; - } - return value; - } -} - -@:enum abstract Position(String) from String to String { - var LAYOUT = "layout"; - var ABSOLUTE = "absolute"; -} - -class Geometry { - public var padding(default, default):Box; - public var margin(default, default):Box; - public var size(default, default):SizeSet; - public var hAlign(default, default):HAlign; - public var vAlign(default, default):VAlign; - public var position(default, default):Position; - - 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 = []; - this.size = new SizeSet(); - this.hAlign = HAlign.NONE; - this.vAlign = VAlign.NONE; - 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); - } - return FIXED(minWidth); - } - - public function get_height():SizeValue { - if (size.percent.height > -1) { - return PERCENT(size.percent.height); - } - return FIXED(minHeight); - } - - public function setMargin(margin:Box):Geometry { - this.margin = margin; - return this; - } - - public function setPadding(padding:Box):Geometry { - this.padding = padding; - return this; - } - - public function setAlign(hAlign:HAlign, vAlign:VAlign):Geometry { - this.hAlign = hAlign; - this.vAlign = vAlign; - return this; - } - - public function setPosition(position:Position):Geometry { - this.position = position; - return this; - } - - public function setSize(width:ASizeValue, height:ASizeValue):Geometry { - this.size.width = width; - this.size.height = height; - return this; - } - - public function setRatio(ratio:Float):Geometry { - this.size.ratio = ratio; - return this; - } -} diff --git a/src/main/haxework/view/form/SelectView.hx b/src/main/haxework/view/form/SelectView.hx index 7402271..9627f68 100644 --- a/src/main/haxework/view/form/SelectView.hx +++ b/src/main/haxework/view/form/SelectView.hx @@ -3,7 +3,7 @@ package haxework.view.form; import flash.events.MouseEvent; import flash.geom.Point; import haxework.signal.Signal; -import haxework.view.core.Geometry.Position; +import haxework.view.geometry.Geometry.Position; import haxework.view.core.HAlign; import haxework.view.data.DataView; import haxework.view.group.GroupView; diff --git a/src/main/haxework/view/core/Box.hx b/src/main/haxework/view/geometry/Box.hx similarity index 98% rename from src/main/haxework/view/core/Box.hx rename to src/main/haxework/view/geometry/Box.hx index 6428834..0b828c4 100644 --- a/src/main/haxework/view/core/Box.hx +++ b/src/main/haxework/view/geometry/Box.hx @@ -1,4 +1,4 @@ -package haxework.view.core; +package haxework.view.geometry; abstract Box(Array) { public var left(get, set):Float; diff --git a/src/main/haxework/view/geometry/Geometry.hx b/src/main/haxework/view/geometry/Geometry.hx new file mode 100644 index 0000000..b9711d7 --- /dev/null +++ b/src/main/haxework/view/geometry/Geometry.hx @@ -0,0 +1,55 @@ +package haxework.view.geometry; + +class Geometry { + public var width(default, default):SizeValue; + public var height(default, default):SizeValue; + public var padding(default, default):Box; + public var margin(default, default):Box; + public var hAlign(default, default):HAlign; + public var vAlign(default, default):VAlign; + public var position(default, default):Position; + public var ratio(default, default):Float; + + public function new() { + this.padding = []; + this.margin = []; + this.width = 0; + this.height = 0; + this.hAlign = HAlign.NONE; + this.vAlign = VAlign.NONE; + this.position = Position.LAYOUT; + this.ratio = -1; + } + + public function setSize(width:SizeValue, height:SizeValue):Geometry { + this.width = width; + this.height = height; + return this; + } + + public function setMargin(margin:Box):Geometry { + this.margin = margin; + return this; + } + + public function setPadding(padding:Box):Geometry { + this.padding = padding; + return this; + } + + public function setAlign(hAlign:HAlign, vAlign:VAlign):Geometry { + this.hAlign = hAlign; + this.vAlign = vAlign; + return this; + } + + public function setPosition(position:Position):Geometry { + this.position = position; + return this; + } + + public function setRatio(ratio:Float):Geometry { + this.ratio = ratio; + return this; + } +} diff --git a/src/main/haxework/view/core/HAlign.hx b/src/main/haxework/view/geometry/HAlign.hx similarity index 82% rename from src/main/haxework/view/core/HAlign.hx rename to src/main/haxework/view/geometry/HAlign.hx index 60ef2f0..1dd21c7 100755 --- a/src/main/haxework/view/core/HAlign.hx +++ b/src/main/haxework/view/geometry/HAlign.hx @@ -1,4 +1,4 @@ -package haxework.view.core; +package haxework.view.geometry; @:enum abstract HAlign(String) from String to String { var NONE = "none"; diff --git a/src/main/haxework/view/geometry/Position.hx b/src/main/haxework/view/geometry/Position.hx new file mode 100644 index 0000000..9023960 --- /dev/null +++ b/src/main/haxework/view/geometry/Position.hx @@ -0,0 +1,6 @@ +package haxework.view.geometry; + +@:enum abstract Position(String) from String to String { + var LAYOUT = "layout"; + var ABSOLUTE = "absolute"; +} diff --git a/src/main/haxework/view/core/Size.hx b/src/main/haxework/view/geometry/Size.hx similarity index 90% rename from src/main/haxework/view/core/Size.hx rename to src/main/haxework/view/geometry/Size.hx index 9eac2d2..35a495b 100644 --- a/src/main/haxework/view/core/Size.hx +++ b/src/main/haxework/view/geometry/Size.hx @@ -1,4 +1,4 @@ -package haxework.view.core; +package haxework.view.geometry; abstract Size(Array) { public var width(get, set):Float; @@ -37,6 +37,10 @@ abstract Size(Array) { } } + @:to public inline function toArray():Array { + return this; + } + @:from static public inline function fromArray(value:Array):Size { return new Size(value); } diff --git a/src/main/haxework/view/geometry/SizeSet.hx b/src/main/haxework/view/geometry/SizeSet.hx new file mode 100644 index 0000000..6199559 --- /dev/null +++ b/src/main/haxework/view/geometry/SizeSet.hx @@ -0,0 +1,28 @@ +package haxework.view.geometry; + +import haxe.ds.StringMap; + +class SizeSet extends StringMap { + + public function new() { + super(); + } + + public function update(value:Size, type:String = "default"):Bool { + var existValue = get(type); + if (existValue == null || value.width != existValue.width || value.height != existValue.height) { + set(type, value); + return true; + } + return false; + } + + public function toSize():Size { + var result:Size = 0; + for (value in iterator()) { + result.width = Math.max(result.width, value.width); + result.height = Math.max(result.height, value.height); + } + return result; + } +} diff --git a/src/main/haxework/view/geometry/SizeValue.hx b/src/main/haxework/view/geometry/SizeValue.hx new file mode 100644 index 0000000..685ab96 --- /dev/null +++ b/src/main/haxework/view/geometry/SizeValue.hx @@ -0,0 +1,74 @@ +package haxework.view.geometry; + +enum SizeType { + FIXED; + PERCENT; +} + +abstract SizeValue({type:SizeType, value:Float}) { + public var type(get, set):SizeType; + public var value(get, set):Float; + + public var fixed(get, set):Float; + public var percent(get, set):Float; + + public function new(type:SizeType, value:Float) { + this = {type: type, value: value}; + } + + private inline function get_type():SizeType { + return this.type; + } + + private inline function set_type(value:SizeType):SizeType { + return this.type = value; + } + + private inline function get_value():Float { + return this.value; + } + + private inline function set_value(value:Float):Float { + return this.value = value; + } + + private inline function get_fixed():Float { + return switch type { + case FIXED: value; + case _: 0; + } + } + + private inline function set_fixed(value:Float):Float { + this.type = FIXED; + return this.value = value; + } + + private inline function get_percent():Float { + return switch type { + case PERCENT: value; + case _: 0; + } + } + + private inline function set_percent(value:Float):Float { + this.type = PERCENT; + return this.value = value; + } + + @:from static public inline function fromInt(value:Int):SizeValue { + return new SizeValue(FIXED, value); + } + + @:from static public inline function fromFloat(value:Float):SizeValue { + return new SizeValue(FIXED, value); + } + + @:from static public inline function fromString(value:String):SizeValue { + if (value.substr(value.length - 1) == "%") { + return new SizeValue(PERCENT, Std.parseFloat(value)); + } else { + return new SizeValue(FIXED, Std.parseFloat(value)); + } + } +} diff --git a/src/main/haxework/view/core/VAlign.hx b/src/main/haxework/view/geometry/VAlign.hx similarity index 82% rename from src/main/haxework/view/core/VAlign.hx rename to src/main/haxework/view/geometry/VAlign.hx index 6be9df9..073925c 100755 --- a/src/main/haxework/view/core/VAlign.hx +++ b/src/main/haxework/view/geometry/VAlign.hx @@ -1,4 +1,4 @@ -package haxework.view.core; +package haxework.view.geometry; @:enum abstract VAlign(String) from String to String { var NONE = "none"; diff --git a/src/main/haxework/view/group/GroupView.hx b/src/main/haxework/view/group/GroupView.hx index adadcab..5954481 100755 --- a/src/main/haxework/view/group/GroupView.hx +++ b/src/main/haxework/view/group/GroupView.hx @@ -16,7 +16,7 @@ class GroupView extends SpriteView implements IGroupView { views = []; } - override private function set_width(value:Float):Float { + /*override private function set_width(value:Float):Float { if (width != value) { width = value; toUpdate(); @@ -32,7 +32,7 @@ class GroupView extends SpriteView implements IGroupView { toRedraw(); } return height; - } + }*/ inline private function get_container():DisplayObjectContainer { return content; diff --git a/src/main/haxework/view/group/IGroupView.hx b/src/main/haxework/view/group/IGroupView.hx index a8a90c6..d3c9c8a 100755 --- a/src/main/haxework/view/group/IGroupView.hx +++ b/src/main/haxework/view/group/IGroupView.hx @@ -4,10 +4,10 @@ import flash.display.DisplayObjectContainer; import haxework.view.layout.ILayout; interface IGroupView extends IView { - public var container(get, null):DisplayObjectContainer; + @:style public var layout(default, default):ILayout; + public var container(get, null):DisplayObjectContainer; public var views(default, set):Array>; - public var layout(default, default):ILayout; public function containsView(view:IView):Bool; diff --git a/src/main/haxework/view/layout/DefaultLayout.hx b/src/main/haxework/view/layout/DefaultLayout.hx index 2658989..d9dd7e5 100755 --- a/src/main/haxework/view/layout/DefaultLayout.hx +++ b/src/main/haxework/view/layout/DefaultLayout.hx @@ -1,8 +1,8 @@ package haxework.view.layout; -import haxework.view.core.Geometry; -import haxework.view.core.HAlign; -import haxework.view.core.VAlign; +import haxework.view.geometry.HAlign; +import haxework.view.geometry.Position; +import haxework.view.geometry.VAlign; import haxework.view.group.IGroupView; class DefaultLayout extends Layout { @@ -15,16 +15,10 @@ class DefaultLayout extends Layout { setViewHeight(group, view); placeViewHorizontal(group, view); placeViewVertical(group, view); - switch view.geometry.width { - case FIXED(_): width = Math.max(width, view.width + view.geometry.margin.horizontal); - case _: width = Math.max(width, view.geometry.minWidth + view.geometry.margin.horizontal); - } - switch view.geometry.height { - case FIXED(_): height = Math.max(height, view.height + view.geometry.margin.vertical); - case _: height = Math.max(height, view.geometry.minHeight + view.geometry.margin.vertical); - } + width = Math.max(width, view.width + view.geometry.margin.horizontal); + height = Math.max(height, view.height + view.geometry.margin.horizontal); } - if (!overflow) group.setContentSize(width, height, "group"); + if (!overflow) group.setSize(width, height, "group"); } private function filterViews(group:IGroupView, views:Array>):Array> { @@ -44,25 +38,11 @@ class DefaultLayout extends Layout { } private function setViewWidth(group:IGroupView, view:IView):Void { - var width = switch view.geometry.width { - case FIXED(value): - value; - case PERCENT(value): - var calcWidth = value / 100 * (group.width - view.geometry.margin.horizontal - group.geometry.padding.horizontal); - Math.max(view.geometry.minWidth, calcWidth); - } - view.width = width; + view.setSize(view.geometry.width.percent / 100 * (group.width - view.geometry.margin.horizontal - group.geometry.padding.horizontal), 0, "percent.width"); } private function setViewHeight(group:IGroupView, view:IView):Void { - var height = switch view.geometry.height { - case FIXED(value): - value; - case PERCENT(value): - var calcHeigth = value / 100 * (group.height - view.geometry.margin.vertical - group.geometry.padding.vertical); - Math.max(view.geometry.minHeight, calcHeigth); - } - view.height = height; + view.setSize(0, view.geometry.height.percent / 100 * (group.height - view.geometry.margin.vertical - group.geometry.padding.vertical), "percent.height"); } private function placeViewHorizontal(group:IGroupView, view:IView):Void { diff --git a/src/main/haxework/view/layout/HorizontalLayout.hx b/src/main/haxework/view/layout/HorizontalLayout.hx index 6f7884f..b2eff44 100755 --- a/src/main/haxework/view/layout/HorizontalLayout.hx +++ b/src/main/haxework/view/layout/HorizontalLayout.hx @@ -1,7 +1,8 @@ package haxework.view.layout; -import haxework.view.core.Geometry.SizeValue; -import haxework.view.core.HAlign; +import haxework.view.geometry.HAlign; +import haxework.view.geometry.SizeValue; +import haxework.view.geometry.VAlign; import haxework.view.group.IGroupView; class HorizontalLayout extends DefaultLayout { @@ -9,43 +10,38 @@ class HorizontalLayout extends DefaultLayout { override public function place(group:IGroupView, views:Array>):Void { views = filterViews(group, views); - var fixedSize:Float = margin * (views.length - 1); - var leftSize:Float = group.width - group.geometry.padding.horizontal; + var fixedSize:Float = group.geometry.padding.horizontal + margin * (views.length - 1); + var leftSize:Float = group.width; - var maxSize:Float = 0; + var maxSize:Float = group.geometry.padding.vertical; for (view in views) { setViewHeight(group, view); placeViewVertical(group, view); - switch (view.geometry.width) { - case PERCENT(value): + switch view.geometry.width.type { + case PERCENT: leftSize -= (view.geometry.margin.horizontal); - case FIXED(value): - fixedSize += (value + view.geometry.margin.horizontal); - } - switch (view.geometry.height) { - case FIXED(value): - maxSize = Math.max(maxSize, value + view.geometry.margin.vertical); - case _: - maxSize = Math.max(maxSize, view.geometry.minHeight + view.geometry.margin.vertical); + case FIXED: + fixedSize += (view.width + view.geometry.margin.horizontal); } + maxSize = Math.max(maxSize, view.height + view.geometry.margin.vertical + group.geometry.padding.vertical); } - if (!overflow) group.setContentSize(fixedSize, maxSize, "group"); + if (!overflow) group.setSize(fixedSize, maxSize, "group"); leftSize -= fixedSize; for (view in views) { - switch (view.geometry.width) { - case PERCENT(value): - view.width = value / 100 * leftSize; - fixedSize += view.width + view.geometry.margin.horizontal; - case FIXED(value): - view.width = value; - } + switch view.geometry.width.type { + case PERCENT: + var result = view.geometry.width.value / 100 * leftSize; + fixedSize += result + view.geometry.margin.horizontal; + view.setSize(result, 0, "percent.width"); + case _: + }; } var x:Float = 0; - switch (hAlign) { + switch hAlign { case LEFT | NONE: x = group.geometry.padding.left; case CENTER: x = (group.width - fixedSize) / 2 + group.geometry.padding.left - group.geometry.padding.right; case RIGHT: x = group.width - fixedSize - group.geometry.padding.right; diff --git a/src/main/haxework/view/layout/ILayout.hx b/src/main/haxework/view/layout/ILayout.hx index b92afa8..131035e 100755 --- a/src/main/haxework/view/layout/ILayout.hx +++ b/src/main/haxework/view/layout/ILayout.hx @@ -1,8 +1,8 @@ package haxework.view.layout; +import haxework.view.geometry.HAlign; +import haxework.view.geometry.VAlign; import haxework.view.group.IGroupView; -import haxework.view.core.VAlign; -import haxework.view.core.HAlign; interface ILayout { public var hAlign(default, default):HAlign; diff --git a/src/main/haxework/view/layout/Layout.hx b/src/main/haxework/view/layout/Layout.hx index 26f54b3..69ca778 100644 --- a/src/main/haxework/view/layout/Layout.hx +++ b/src/main/haxework/view/layout/Layout.hx @@ -1,7 +1,7 @@ package haxework.view.layout; -import haxework.view.core.HAlign; -import haxework.view.core.VAlign; +import haxework.view.geometry.HAlign; +import haxework.view.geometry.VAlign; import haxework.view.group.IGroupView; class Layout implements ILayout { diff --git a/src/main/haxework/view/layout/VerticalLayout.hx b/src/main/haxework/view/layout/VerticalLayout.hx index 10d289e..e144792 100755 --- a/src/main/haxework/view/layout/VerticalLayout.hx +++ b/src/main/haxework/view/layout/VerticalLayout.hx @@ -1,7 +1,8 @@ package haxework.view.layout; -import haxework.view.core.Geometry.SizeValue; -import haxework.view.core.VAlign; +import haxework.view.geometry.HAlign; +import haxework.view.geometry.SizeValue; +import haxework.view.geometry.VAlign; import haxework.view.group.IGroupView; class VerticalLayout extends DefaultLayout { @@ -9,43 +10,38 @@ class VerticalLayout extends DefaultLayout { override public function place(group:IGroupView, views:Array>):Void { views = filterViews(group, views); - var fixedSize:Float = margin * (views.length - 1); - var leftSize:Float = group.height - group.geometry.padding.vertical; + var fixedSize:Float = group.geometry.padding.vertical + margin * (views.length - 1); + var leftSize:Float = group.height; - var maxSize:Float = 0; + var maxSize:Float = group.geometry.padding.horizontal; for (view in views) { setViewWidth(group, view); placeViewHorizontal(group, view); - switch (view.geometry.height) { - case PERCENT(value): + switch view.geometry.height.type { + case PERCENT: leftSize -= (view.geometry.margin.vertical); - case FIXED(value): - fixedSize += (value + view.geometry.margin.vertical); - } - switch (view.geometry.width) { - case FIXED(value): - maxSize = Math.max(maxSize, value + view.geometry.margin.horizontal); - case _: - maxSize = Math.max(maxSize, view.geometry.minWidth + view.geometry.margin.horizontal); + case FIXED: + fixedSize += (Math.max(view.geometry.height.value, view.height) + view.geometry.margin.vertical); } + maxSize = Math.max(maxSize, view.width + view.geometry.margin.horizontal + group.geometry.padding.horizontal); } - if (!overflow) group.setContentSize(maxSize, fixedSize, "group"); + if (!overflow) group.setSize(maxSize, fixedSize, "group"); leftSize -= fixedSize; for (view in views) { - switch (view.geometry.height) { - case PERCENT(value): - view.height = value / 100 * leftSize; - fixedSize += view.height + view.geometry.margin.vertical; - case FIXED(value): - view.height = value; - } + switch view.geometry.height.type { + case PERCENT: + var result = view.geometry.height.value / 100 * leftSize; + fixedSize += result + view.geometry.margin.vertical; + view.setSize(0, result, "percent.width"); + case _: + }; } var y:Float = 0; - switch (vAlign) { + switch vAlign { case TOP | NONE: y = group.geometry.padding.top; case MIDDLE: y = (group.height - fixedSize) / 2 + group.geometry.padding.top - group.geometry.padding.bottom; case BOTTOM: y = group.height - fixedSize - group.geometry.padding.bottom; diff --git a/src/main/haxework/view/list/HListView.hx b/src/main/haxework/view/list/HListView.hx index 046e49e..2481c5f 100755 --- a/src/main/haxework/view/list/HListView.hx +++ b/src/main/haxework/view/list/HListView.hx @@ -1,6 +1,6 @@ package haxework.view.list; -import haxework.view.core.Geometry.SizeValue; +import haxework.view.geometry.Geometry.SizeValue; import haxework.view.core.HAlign; import haxework.view.core.VAlign; import haxework.view.layout.HorizontalLayout; diff --git a/src/main/haxework/view/list/ListView.hx b/src/main/haxework/view/list/ListView.hx index fcb8faf..b1e084b 100755 --- a/src/main/haxework/view/list/ListView.hx +++ b/src/main/haxework/view/list/ListView.hx @@ -3,7 +3,7 @@ package haxework.view.list; import flash.events.MouseEvent; import haxework.signal.Signal; import haxework.utils.NumberUtil; -import haxework.view.core.Geometry.Position; +import haxework.view.geometry.Geometry.Position; import haxework.view.core.HAlign; import haxework.view.core.VAlign; import haxework.view.form.ButtonView; diff --git a/src/main/haxework/view/list/VListView.hx b/src/main/haxework/view/list/VListView.hx index bfd6af5..562c89e 100755 --- a/src/main/haxework/view/list/VListView.hx +++ b/src/main/haxework/view/list/VListView.hx @@ -1,6 +1,6 @@ package haxework.view.list; -import haxework.view.core.Geometry.SizeValue; +import haxework.view.geometry.Geometry.SizeValue; import haxework.view.core.HAlign; import haxework.view.core.VAlign; import haxework.view.layout.HorizontalLayout; diff --git a/src/main/haxework/view/popup/PopupView.hx b/src/main/haxework/view/popup/PopupView.hx index 0f610f4..62b2529 100755 --- a/src/main/haxework/view/popup/PopupView.hx +++ b/src/main/haxework/view/popup/PopupView.hx @@ -2,7 +2,7 @@ package haxework.view.popup; import flash.display.DisplayObject; import flash.events.MouseEvent; -import haxework.view.core.Geometry.Position; +import haxework.view.geometry.Geometry.Position; import haxework.view.group.GroupView; import haxework.view.skin.Skin; import promhx.Deferred; diff --git a/src/main/haxework/view/skin/GeometrySkin.hx b/src/main/haxework/view/skin/GeometrySkin.hx index 3816b93..066468d 100644 --- a/src/main/haxework/view/skin/GeometrySkin.hx +++ b/src/main/haxework/view/skin/GeometrySkin.hx @@ -2,7 +2,7 @@ package haxework.view.skin; import haxework.view.core.HAlign; import haxework.view.core.VAlign; -import haxework.view.core.Geometry; +import haxework.view.geometry.Geometry; class GeometrySkin implements ISkin> { diff --git a/src/main/haxework/view/skin/ISkin.hx b/src/main/haxework/view/skin/ISkin.hx index f0651d8..7a7971d 100644 --- a/src/main/haxework/view/skin/ISkin.hx +++ b/src/main/haxework/view/skin/ISkin.hx @@ -1,7 +1,5 @@ package haxework.view.skin; interface ISkin> { - public function draw(view: V): Void; + public function draw(view:V):Void; } - -typedef SkinSet = Array>; diff --git a/src/main/haxework/view/skin/Skin.hx b/src/main/haxework/view/skin/Skin.hx index f160882..71c705b 100644 --- a/src/main/haxework/view/skin/Skin.hx +++ b/src/main/haxework/view/skin/Skin.hx @@ -1,7 +1,7 @@ package haxework.view.skin; import flash.display.BitmapData; -import haxework.view.core.Geometry; +import haxework.view.geometry.Geometry; import haxework.view.form.ButtonView; import haxework.view.layout.ILayout; import haxework.view.text.ITextView; diff --git a/src/main/haxework/view/text/FontStyle.hx b/src/main/haxework/view/text/FontStyle.hx new file mode 100644 index 0000000..7fa9464 --- /dev/null +++ b/src/main/haxework/view/text/FontStyle.hx @@ -0,0 +1,12 @@ +package haxework.view.text; + +import flash.text.TextFormatAlign; + +class FontStyle { + public var family(default, default):String; + public var embed(default, default):Bool; + public var color(default, default):Int; + public var size(default, default):Int; + public var bold(default, default):Bool; + public var align(default, default):TextFormatAlign; +} diff --git a/src/main/haxework/view/text/ITextView.hx b/src/main/haxework/view/text/ITextView.hx index fcb5cab..3a95907 100755 --- a/src/main/haxework/view/text/ITextView.hx +++ b/src/main/haxework/view/text/ITextView.hx @@ -2,16 +2,10 @@ package haxework.view.text; import flash.text.TextField; import haxework.view.IView; -import flash.text.TextFormatAlign; interface ITextView extends IView { - public var textField(default, null):TextField; - public var text(get, set):String; - public var align(default, set):TextFormatAlign; - //ToDo: font properties to object - public var fontFamily(default, set):String; - public var fontEmbed(default, set):Bool; - public var fontColor(default, set):Int; - public var fontSize(default, set):Int; - public var fontBold(default, set):Bool; + @:style public var font(default, default):FontStyle; + + public var textField(default, null):TextField; + public var text(get, set):String; } diff --git a/src/main/haxework/view/theme/ITheme.hx b/src/main/haxework/view/theme/ITheme.hx index 564347d..d94dfe2 100644 --- a/src/main/haxework/view/theme/ITheme.hx +++ b/src/main/haxework/view/theme/ITheme.hx @@ -20,12 +20,5 @@ interface ITheme { public var font(default, set):ThemeFont; public var colors(default, set):ThemeColors; - public function resolve(id:String):SkinSet; - public function bind(id:String, view:IView):Void; - - public function background(?color:Color):SkinSet; - public function border(?color:Color):SkinSet; - public function text(?color:Color):SkinSet; - public function button(?color:Color, ?textColor:Color):SkinSet; - public function textBox(?color:Color):SkinSet; + public function bind(styles:Array, view:IView):Void; } diff --git a/src/main/haxework/view/theme/Theme.hx b/src/main/haxework/view/theme/Theme.hx index 6a6cd1a..2e06f5b 100644 --- a/src/main/haxework/view/theme/Theme.hx +++ b/src/main/haxework/view/theme/Theme.hx @@ -4,13 +4,16 @@ import haxework.resources.Resources.ResMap; import flash.text.Font; import flash.text.FontType; import haxework.color.Color; -import haxework.view.core.Geometry; +import haxework.view.geometry.Geometry; import haxework.view.skin.ISkin; import haxework.view.skin.Skin; import haxework.view.theme.ITheme; using haxework.color.ColorUtil; +//ToDo: temp +typedef SkinSet = Array>; + class Theme implements ITheme { // ToDo: configurable public var baseFontSize = 18; @@ -114,12 +117,8 @@ class Theme implements ITheme { ]); } - public function bind(id:String, view:IView):Void { - data.bind(id, view, "skin"); - } - - public function resolve(id:String):SkinSet { - return data.exists(id) ? data.get(id) : []; + public function bind(styles:Array, view:IView):Void { + //data.bind(id, view, "skin"); } private static function resolveFont(font:ThemeFont):ThemeFont {