[view] rework view size system

This commit is contained in:
2019-07-12 11:10:35 +03:00
parent 0a072562cb
commit ce17fff6df
39 changed files with 384 additions and 370 deletions

View File

@@ -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

17
demo/src/demo/Test.hx Normal file
View File

@@ -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());
}
}

View File

@@ -0,0 +1,7 @@
package demo.test;
import haxework.view.group.GroupView;
@:template class TestView extends GroupView {
}

View File

@@ -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

View File

@@ -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)));
}

View File

@@ -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<C:DisplayObject> {
@:style public var geometry(default, default):Geometry;
@:style public var skin(default, default):ISkin<Dynamic>;
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<String>;
public var content(default, null):C;
public var skin(default, set):SkinSet;
public var skinId(null, set):String;
public var parent(default, null):Null<IGroupView>;
@@ -41,5 +42,5 @@ interface IView<C:DisplayObject> {
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;
}

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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;

View File

@@ -1,21 +1,23 @@
package haxework.view;
import haxework.view.skin.ColorSkin;
import flash.display.Sprite;
class SpriteView extends View<Sprite> {
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
}
}

View File

@@ -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<C:DisplayObject> implements IView<C> {
@:provide var theme:ITheme;
public var geometry(default, default):Geometry;
public var skin(default, default):ISkin<Dynamic>;
public var styles(default, default):Array<String>;
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<IGroupView>;
@@ -37,8 +38,11 @@ class View<C:DisplayObject> implements IView<C> {
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<C:DisplayObject> implements IView<C> {
geometry = new Geometry();
visible = true;
index = -1;
skin = [];
skin = null;
}
public function toRedraw():Void {
@@ -65,19 +69,22 @@ class View<C:DisplayObject> implements IView<C> {
}
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<C:DisplayObject> implements IView<C> {
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<Dynamic>):ISkin<Dynamic> {
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;

View File

@@ -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<String, Size>;
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;
}
}

View File

@@ -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;

View File

@@ -1,4 +1,4 @@
package haxework.view.core;
package haxework.view.geometry;
abstract Box(Array<Float>) {
public var left(get, set):Float;

View File

@@ -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;
}
}

View File

@@ -1,4 +1,4 @@
package haxework.view.core;
package haxework.view.geometry;
@:enum abstract HAlign(String) from String to String {
var NONE = "none";

View File

@@ -0,0 +1,6 @@
package haxework.view.geometry;
@:enum abstract Position(String) from String to String {
var LAYOUT = "layout";
var ABSOLUTE = "absolute";
}

View File

@@ -1,4 +1,4 @@
package haxework.view.core;
package haxework.view.geometry;
abstract Size(Array<Float>) {
public var width(get, set):Float;
@@ -37,6 +37,10 @@ abstract Size(Array<Float>) {
}
}
@:to public inline function toArray():Array<Float> {
return this;
}
@:from static public inline function fromArray(value:Array<Float>):Size {
return new Size(value);
}

View File

@@ -0,0 +1,28 @@
package haxework.view.geometry;
import haxe.ds.StringMap;
class SizeSet extends StringMap<Size> {
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;
}
}

View File

@@ -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));
}
}
}

View File

@@ -1,4 +1,4 @@
package haxework.view.core;
package haxework.view.geometry;
@:enum abstract VAlign(String) from String to String {
var NONE = "none";

View File

@@ -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;

View File

@@ -4,10 +4,10 @@ import flash.display.DisplayObjectContainer;
import haxework.view.layout.ILayout;
interface IGroupView extends IView<Dynamic> {
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<IView<Dynamic>>;
public var layout(default, default):ILayout;
public function containsView(view:IView<Dynamic>):Bool;

View File

@@ -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<IView<Dynamic>>):Array<IView<Dynamic>> {
@@ -44,25 +38,11 @@ class DefaultLayout extends Layout {
}
private function setViewWidth(group:IGroupView, view:IView<Dynamic>):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<Dynamic>):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<Dynamic>):Void {

View File

@@ -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<IView<Dynamic>>):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;

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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<IView<Dynamic>>):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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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<IView<Dynamic>> {

View File

@@ -1,7 +1,5 @@
package haxework.view.skin;
interface ISkin<V:IView<Dynamic>> {
public function draw(view: V): Void;
public function draw(view:V):Void;
}
typedef SkinSet = Array<ISkin<Dynamic>>;

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -2,16 +2,10 @@ package haxework.view.text;
import flash.text.TextField;
import haxework.view.IView;
import flash.text.TextFormatAlign;
interface ITextView extends IView<Dynamic> {
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;
}

View File

@@ -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<Dynamic>):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<String>, view:IView<Dynamic>):Void;
}

View File

@@ -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<ISkin<Dynamic>>;
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<Dynamic>):Void {
data.bind(id, view, "skin");
}
public function resolve(id:String):SkinSet {
return data.exists(id) ? data.get(id) : [];
public function bind(styles:Array<String>, view:IView<Dynamic>):Void {
//data.bind(id, view, "skin");
}
private static function resolveFont(font:ThemeFont):ThemeFont {