added scale grid and flow border left/top/right/bottom

h2d/Flow.hx

@@ -349,7 +349,7 @@ class Flow extends Object {
 	**/
 	public var backgroundTile(default, set) : h2d.Tile;
 	/**
-		Horizontal border width of the `Flow.backgroundTile`.
+		Set the border width of the `Flow.backgroundTile`'s left and right borders.
 
 		Does not affect padding by default, which can be enabled with `-D flow_border` compilation flag.
 		If border padding is enabled, `Flow.outerWidth` will be affected accordingly even if background tile is not set
@@ -360,9 +360,31 @@ class Flow extends Object {
 		@see `Flow.paddingHorizontal`
 		@see `h2d.ScaleGrid.borderWidth`
 	**/
-	public var borderWidth(default, set) : Int = 0;
+	public var borderWidth(never, set) : Int;
 	/**
-		Vertical border width of the `Flow.backgroundTile`.
+		Left border width of the `Flow.backgroundTile`.
+
+		Does not affect padding by default, which can be enabled with `-D flow_border` compilation flag.
+		If border padding is enabled, `Flow.outerHeight` will be affected accordingly even if background tile is not set
+		and will follow the same constraint limitation as padding.
+
+		@see `Flow.paddingLeft`
+		@see `h2d.ScaleGrid.borderLeft`
+	**/
+	public var borderLeft(default, set) : Int = 0;
+	/**
+		Right border width of the `Flow.backgroundTile`.
+
+		Does not affect padding by default, which can be enabled with `-D flow_border` compilation flag.
+		If border padding is enabled, `Flow.outerHeight` will be affected accordingly even if background tile is not set
+		and will follow the same constraint limitation as padding.
+
+		@see `Flow.paddingRight`
+		@see `h2d.ScaleGrid.borderRight`
+	**/
+	public var borderRight(default, set) : Int = 0;
+	/**
+		Set the border height of the `Flow.backgroundTile`'s top and bottom borders.
 
 		Does not affect padding by default, which can be enabled with `-D flow_border` compilation flag.
 		If border padding is enabled, `Flow.outerHeight` will be affected accordingly even if background tile is not set
@@ -373,8 +395,29 @@ class Flow extends Object {
 		@see `Flow.paddingVertical`
 		@see `h2d.ScaleGrid.borderHeight`
 	**/
-	public var borderHeight(default, set) : Int = 0;
+	public var borderHeight(never, set) : Int;
+	/**
+		Top border width of the `Flow.backgroundTile`.
+
+		Does not affect padding by default, which can be enabled with `-D flow_border` compilation flag.
+		If border padding is enabled, `Flow.outerHeight` will be affected accordingly even if background tile is not set
+		and will follow the same constraint limitation as padding.
+
+		@see `Flow.paddingTop`
+		@see `h2d.ScaleGrid.borderTop`
+	**/
+	public var borderTop(default, set) : Int = 0;
+	/**
+		Bottom border width of the `Flow.backgroundTile`.
 
+		Does not affect padding by default, which can be enabled with `-D flow_border` compilation flag.
+		If border padding is enabled, `Flow.outerHeight` will be affected accordingly even if background tile is not set
+		and will follow the same constraint limitation as padding.
+
+		@see `Flow.paddingBottom`
+		@see `h2d.ScaleGrid.borderBottom`
+	**/
+	public var borderBottom(default, set) : Int = 0;
 	/**
 		Calculate the client width, which is the inner size of the flow without the borders and padding.
 
@@ -597,12 +640,12 @@ class Flow extends Object {
 
 	function get_innerWidth() {
 		if( needReflow ) reflow();
-		return Math.ceil(calculatedWidth) - (paddingLeft + paddingRight #if flow_border + borderWidth * 2 #end);
+		return Math.ceil(calculatedWidth) - (paddingLeft + paddingRight #if flow_border + (borderLeft + borderRight) #end);
 	}
 
 	function get_innerHeight() {
 		if( needReflow ) reflow();
-		return Math.ceil(calculatedHeight) - (paddingTop + paddingBottom #if flow_border + borderHeight * 2 #end);
+		return Math.ceil(calculatedHeight) - (paddingTop + paddingBottom #if flow_border + (borderTop + borderBottom) #end);
 	}
 
 	function set_paddingLeft(v) {
@@ -876,7 +919,7 @@ class Flow extends Object {
 			return t;
 		if( t != null ) {
 			if( background == null ) {
-				var background = new h2d.ScaleGrid(t, borderWidth, borderHeight);
+				var background = new h2d.ScaleGrid(t, borderLeft, borderTop, borderRight, borderBottom);
 				addChildAt(background, 0);
 				getProperties(background).isAbsolute = true;
 				this.background = background;
@@ -896,19 +939,45 @@ class Flow extends Object {
 	}
 
 	function set_borderWidth(v) {
-		if( borderWidth == v )
+		if(borderLeft == v)
+			return v;
+		return borderLeft = borderRight = v;
+	}
+
+	function set_borderLeft(v) {
+		if( background != null ) background.borderLeft = v;
+		#if flow_border needReflow = true; #end
+		return borderLeft = v;
+	}
+
+	function set_borderRight(v) {
+		if( borderRight == v )
 			return v;
-		if( background != null ) background.borderWidth = v;
+		if( background != null ) background.borderRight = v;
 		#if flow_border needReflow = true; #end
-		return borderWidth = v;
+		return borderRight = v;
 	}
 
 	function set_borderHeight(v) {
-		if( borderHeight == v )
+		if(borderTop == v)
+			return v;
+		return borderTop = borderBottom = v;
+	}
+
+	function set_borderTop(v) {
+		if( borderTop == v )
+			return v;
+		if( background != null ) background.borderTop = v;
+		#if flow_border needReflow = true; #end
+		return borderTop = v;
+	}
+
+	function set_borderBottom(v) {
+		if( borderBottom == v )
 			return v;
-		if( background != null ) background.borderHeight = v;
+		if( background != null ) background.borderBottom = v;
 		#if flow_border needReflow = true; #end
-		return borderHeight = v;
+		return borderBottom = v;
 	}
 
 	/**
@@ -928,8 +997,10 @@ class Flow extends Object {
 				isConstraint = false;
 			}
 		}
-		var borderWidth = #if flow_border borderWidth #else 0 #end;
-		var borderHeight = #if flow_border borderHeight #else 0 #end;
+		var borderTop = #if flow_border borderTop #else 0 #end;
+		var borderBottom = #if flow_border borderBottom #else 0 #end;
+		var borderLeft = #if flow_border borderLeft #else 0 #end;
+		var borderRight = #if flow_border borderRight #else 0 #end;
 
 		var isConstraintWidth = realMaxWidth >= 0;
 		var isConstraintHeight = realMaxHeight >= 0;
@@ -937,8 +1008,8 @@ class Flow extends Object {
 		var maxTotWidth = realMaxWidth < 0 ? 100000000 : Math.floor(realMaxWidth);
 		var maxTotHeight = realMaxHeight < 0 ? 100000000 : Math.floor(realMaxHeight);
 		// inner size
-		var maxInWidth = maxTotWidth - (paddingLeft + paddingRight + borderWidth * 2);
-		var maxInHeight = maxTotHeight - (paddingTop + paddingBottom + borderHeight * 2);
+		var maxInWidth = maxTotWidth - (paddingLeft + paddingRight + (borderLeft + borderRight));
+		var maxInHeight = maxTotHeight - (paddingTop + paddingBottom + (borderTop + borderBottom));
 
 		if( debug )
 			debugGraphics.clear();
@@ -956,12 +1027,12 @@ class Flow extends Object {
 			var halign = horizontalAlign == null ? Left : horizontalAlign;
 			var valign = verticalAlign == null ? Bottom : verticalAlign;
 
-			var startX = paddingLeft + borderWidth;
+			var startX = paddingLeft + borderLeft;
 			var x = startX;
-			var y = paddingTop + borderHeight;
+			var y = paddingTop + borderTop;
 			cw = x;
 			var maxLineHeight = 0;
-			var minLineHeight = this.lineHeight != null ? lineHeight : (this.realMinHeight >= 0 && !multiline) ? (this.realMinHeight - (paddingTop + paddingBottom + borderHeight * 2)) : 0;
+			var minLineHeight = this.lineHeight != null ? lineHeight : (this.realMinHeight >= 0 && !multiline) ? (this.realMinHeight - (paddingTop + paddingBottom + borderTop + borderBottom)) : 0;
 			var lastIndex = 0;
 
 			inline function alignLine( maxIndex ) {
@@ -1036,12 +1107,12 @@ class Flow extends Object {
 				if( p.calculatedHeight > maxLineHeight ) maxLineHeight = p.calculatedHeight;
 			}
 			alignLine(children.length);
-			cw += paddingRight + borderWidth;
-			ch = y + maxLineHeight + paddingBottom + borderHeight;
+			cw += paddingRight + borderRight;
+			ch = y + maxLineHeight + paddingBottom + borderBottom;
 
 			// horizontal align
 			if( realMinWidth >= 0 && cw < realMinWidth ) cw = realMinWidth;
-			var endX = cw - (paddingRight + borderWidth);
+			var endX = cw - (paddingRight + borderRight);
 			var xmin = startX, xmax = endX;
 			var midSpace = 0, curAlign = null;
 			for( i in 0...children.length ) {
@@ -1101,12 +1172,12 @@ class Flow extends Object {
 			var halign = horizontalAlign == null ? Left : horizontalAlign;
 			var valign = verticalAlign == null ? Top : verticalAlign;
 
-			var startY = paddingTop + borderHeight;
+			var startY = paddingTop + borderTop;
 			var y = startY;
-			var x = paddingLeft + borderWidth;
+			var x = paddingLeft + borderLeft;
 			ch = y;
 			var maxColWidth = 0;
-			var minColWidth = this.colWidth != null ? colWidth : (this.realMinWidth >= 0 && !multiline) ? (this.realMinWidth - (paddingLeft + paddingRight + borderWidth * 2)) : 0;
+			var minColWidth = this.colWidth != null ? colWidth : (this.realMinWidth >= 0 && !multiline) ? (this.realMinWidth - (paddingLeft + paddingRight + borderLeft + borderRight)) : 0;
 			var lastIndex = 0;
 
 			inline function alignLine( maxIndex ) {
@@ -1184,13 +1255,13 @@ class Flow extends Object {
 				if( p.calculatedWidth > maxColWidth ) maxColWidth = p.calculatedWidth;
 			}
 			alignLine(children.length);
-			ch += paddingBottom + borderHeight;
-			cw = x + maxColWidth + paddingRight + borderWidth;
+			ch += paddingBottom + borderBottom;
+			cw = x + maxColWidth + paddingRight + borderRight;
 
 
 			// vertical align
 			if( realMinHeight >= 0 && ch < realMinHeight ) ch = realMinHeight;
-			var endY : Int = ch - (paddingBottom + borderHeight);
+			var endY : Int = ch - (paddingBottom + borderBottom);
 			var ymin = startY, ymax = endY;
 			var midSpace = 0, curAlign = null;
 			for( i in 0...children.length ) {
@@ -1277,14 +1348,14 @@ class Flow extends Object {
 				if( p.calculatedHeight > maxChildH ) maxChildH = p.calculatedHeight;
 			}
 
-			var xmin = paddingLeft + borderWidth;
-			var ymin = paddingTop + borderHeight;
-			var xmax = if(realMaxWidth > 0 && overflow != Expand) Math.floor(realMaxWidth - (paddingRight + borderWidth))
-				else hxd.Math.imax(xmin + maxChildW, realMinWidth - (paddingRight + borderWidth));
-			var ymax = if(realMaxWidth > 0 && overflow != Expand) Math.floor(realMaxHeight - (paddingBottom + borderHeight))
-				else hxd.Math.imax(ymin + maxChildH, realMinHeight - (paddingBottom + borderHeight));
-			cw = xmax + paddingRight + borderWidth;
-			ch = ymax + paddingBottom + borderHeight;
+			var xmin = paddingLeft + borderLeft;
+			var ymin = paddingTop + borderTop;
+			var xmax = if(realMaxWidth > 0 && overflow != Expand) Math.floor(realMaxWidth - (paddingRight + borderRight))
+				else hxd.Math.imax(xmin + maxChildW, realMinWidth - (paddingRight + borderRight));
+			var ymax = if(realMaxWidth > 0 && overflow != Expand) Math.floor(realMaxHeight - (paddingBottom + borderBottom))
+				else hxd.Math.imax(ymin + maxChildH, realMinHeight - (paddingBottom + borderBottom));
+			cw = xmax + paddingRight + borderRight;
+			ch = ymax + paddingBottom + borderBottom;
 
 			for( i in 0...children.length ) {
 				var c = childAt(i);

h2d/ScaleGrid.hx

@@ -9,20 +9,35 @@ package h2d;
 class ScaleGrid extends h2d.TileGroup {
 
 	/**
-		The width of the left and right borders in pixels.
+		The width of the left border in pixels.
 	**/
-	public var borderWidth(default,set) : Int;
+	public var borderLeft(default, set) : Int;
 	/**
-		The height of the top and bottom borders in pixels.
+		The width of the right border in pixels.
 	**/
-	public var borderHeight(default,set) : Int;
-
+	public var borderRight(default, set) : Int;
+	/**
+		The height of the top border in pixels.
+	**/
+	public var borderTop(default, set) : Int;
 	/**
-		The width of the bitmap. Setting to values less than `borderWidth * 2` leads to undefined results.
+		The height of the bottom border in pixels.
+	**/
+	public var borderBottom(default, set) : Int;
+	/**
+		Set the width of left and right borders altogether.
+	**/
+	public var borderWidth(never,set) : Int;
+	/**
+		Set the height of top and bottom borders altogether.
+	**/
+	public var borderHeight(never,set) : Int;
+	/**
+		The width of the bitmap. Setting to values less than `borderLeft + borderRight` leads to undefined results.
 	**/
 	public var width(default,set) : Float;
 	/**
-		The height of the bitmap. Setting to values less than `borderHeight * 2` leads to undefined results.
+		The height of the bitmap. Setting to values less than `borderTop + borderBottom` leads to undefined results.
 	**/
 	public var height(default,set) : Float;
 	/**
@@ -41,10 +56,13 @@ class ScaleGrid extends h2d.TileGroup {
 		@param borderH The height of the top and bottom borders in pixels.
 		@param parent An optional parent `h2d.Object` instance to which ScaleGrid adds itself if set.
 	**/
-	public function new( tile, borderW, borderH, ?parent ) {
+	public function new( tile, borderL, borderT, ?borderR, ?borderB, ?parent ) {
 		super(tile,parent);
-		borderWidth = borderW;
-		borderHeight = borderH;
+
+		borderLeft = borderL;
+		borderRight = (borderR != null)? borderR : borderL;
+		borderTop = borderT;
+		borderBottom = (borderB != null)? borderB : borderT;
 		width = tile.width;
 		height = tile.height;
 		content.useAllocator = true;
@@ -72,19 +90,49 @@ class ScaleGrid extends h2d.TileGroup {
 	}
 
 	function set_borderWidth(w) {
-		if( borderWidth == w ) return w;
-		this.borderWidth = w;
+		if( borderLeft == w && borderRight == w ) return w;
+		@:bypassAccessor borderLeft = w;
+		@:bypassAccessor borderRight = w;
 		clear();
 		return w;
 	}
 
 	function set_borderHeight(h) {
-		if( borderHeight == h ) return h;
-		this.borderHeight = h;
+		if( borderTop == h && borderBottom == h ) return h;
+		@:bypassAccessor borderTop = h;
+		@:bypassAccessor borderBottom = h;
 		clear();
 		return h;
 	}
 
+	function set_borderTop(top) {
+		if( borderTop == top ) return top;
+		this.borderTop = top;
+		clear();
+		return top;
+	}
+
+	function set_borderBottom(bot) {
+		if( borderBottom == bot ) return bot;
+		this.borderBottom = bot;
+		clear();
+		return bot;
+	}
+
+	function set_borderLeft(left) {
+		if( borderLeft == left ) return left;
+		this.borderLeft = left;
+		clear();
+		return left;
+	}
+
+	function set_borderRight(right) {
+		if( borderRight == right ) return right;
+		this.borderRight = right;
+		clear();
+		return right;
+	}
+
 	override function getBoundsRec(relativeTo, out, forSize) {
 		checkUpdate();
 		super.getBoundsRec(relativeTo, out, forSize);
@@ -99,66 +147,70 @@ class ScaleGrid extends h2d.TileGroup {
 	}
 
 	function updateContent() {
-		var bw = borderWidth, bh = borderHeight;
+		var bt = borderTop, bb = borderBottom, bl = borderLeft, br = borderRight;
 
 		// 4 corners
-		content.addColor(0, 0, curColor, tile.sub(0, 0, bw, bh));
-		content.addColor(width - bw, 0, curColor, tile.sub(tile.width - bw, 0, bw, bh));
-		content.addColor(0, height-bh, curColor, tile.sub(0, tile.height - bh, bw, bh));
-		content.addColor(width - bw, height - bh, curColor, tile.sub(tile.width - bw, tile.height - bh, bw, bh));
+		content.addColor(0, 0, curColor, tile.sub(0, 0, bl, bt));
+		content.addColor(width - br, 0, curColor, tile.sub(tile.width - br, 0, br, bt));
+		content.addColor(0, height-bb, curColor, tile.sub(0, tile.height - bb, bl, bb));
+		content.addColor(width - br, height - bb, curColor, tile.sub(tile.width - br, tile.height - bb, br, bb));
 
-		var sizeX = tile.width - bw * 2;
-		var sizeY = tile.height - bh * 2;
+		var sizeX = tile.width - (br + bl);
+		var sizeY = tile.height - (bb + bt);
 
 		if( !tileBorders ) {
 
-			var w = width - bw * 2;
-			var h = height - bh * 2;
+			var w = width - (br + bl);
+			var h = height - (bb + bt);
 
-			var t = tile.sub(bw, 0, sizeX, bh);
-			t.scaleToSize(w, bh);
-			content.addColor(bw, 0, curColor, t);
+			// top
+			var t = tile.sub(bl, 0, sizeX, bt);
+			t.scaleToSize(w, bt);
+			content.addColor(bl, 0, curColor, t);
 
-			var t = tile.sub(bw, tile.height - bh, sizeX, bh);
-			t.scaleToSize(w, bh);
-			content.addColor(bw, h + bh, curColor, t);
+			// bottom
+			var t = tile.sub(bl, tile.height - bb, sizeX, bb);
+			t.scaleToSize(w, bb);
+			content.addColor(bl, h + bt, curColor, t);
 
-			var t = tile.sub(0, bh, bw, sizeY);
-			t.scaleToSize(bw, h);
-			content.addColor(0, bh, curColor, t);
+			// left
+			var t = tile.sub(0, bt, bl, sizeY);
+			t.scaleToSize(bl, h);
+			content.addColor(0, bt, curColor, t);
 
-			var t = tile.sub(tile.width - bw, bh, bw, sizeY);
-			t.scaleToSize(bw, h);
-			content.addColor(w + bw, bh, curColor, t);
+			// right
+			var t = tile.sub(tile.width - br, bt, br, sizeY);
+			t.scaleToSize(br, h);
+			content.addColor(w + bl, bt, curColor, t);
 
 		} else {
 
-			var rw = Std.int((width - bw * 2) / sizeX);
+			var rw = Std.int((width - (bl + br)) / sizeX);
 			for( x in 0...rw ) {
-				content.addColor(bw + x * sizeX, 0, curColor, tile.sub(bw, 0, sizeX, bh));
-				content.addColor(bw + x * sizeX, height - bh, curColor, tile.sub(bw, tile.height - bh, sizeX, bh));
+				content.addColor(bl + x * sizeX, 0, curColor, tile.sub(bl, 0, sizeX, bt));
+				content.addColor(bl + x * sizeX, height - bb, curColor, tile.sub(bl, tile.height - bb, sizeX, bb));
 			}
-			var dx = width - bw * 2 - rw * sizeX;
+			var dx = width - (bl + br) - rw * sizeX;
 			if( dx > 0 ) {
-				content.addColor(bw + rw * sizeX, 0, curColor, tile.sub(bw, 0, dx, bh));
-				content.addColor(bw + rw * sizeX, height - bh, curColor, tile.sub(bw, tile.height - bh, dx, bh));
+				content.addColor(bl + rw * sizeX, 0, curColor, tile.sub(bl, 0, dx, bt));
+				content.addColor(bl + rw * sizeX, height - bb, curColor, tile.sub(bl, tile.height - bb, dx, bb));
 			}
 
-			var rh = Std.int((height - bh * 2) / sizeY);
+			var rh = Std.int((height - (bt + bb)) / sizeY);
 			for( y in 0...rh ) {
-				content.addColor(0, bh + y * sizeY, curColor, tile.sub(0, bh, bw, sizeY));
-				content.addColor(width - bw, bh + y * sizeY, curColor, tile.sub(tile.width - bw, bh, bw, sizeY));
+				content.addColor(0, bt + y * sizeY, curColor, tile.sub(0, bt, bl, sizeY));
+				content.addColor(width - br, bt + y * sizeY, curColor, tile.sub(tile.width - br, bt, br, sizeY));
 			}
-			var dy = height - bh * 2 - rh * sizeY;
+			var dy = height - (bt + bb) - rh * sizeY;
 			if( dy > 0 ) {
-				content.addColor(0, bh + rh * sizeY, curColor, tile.sub(0, bh, bw, dy));
-				content.addColor(width - bw, bh + rh * sizeY, curColor, tile.sub(tile.width - bw, bh, bw, dy));
+				content.addColor(0, bt + rh * sizeY, curColor, tile.sub(0, bt, bl, dy));
+				content.addColor(width - br, bt + rh * sizeY, curColor, tile.sub(tile.width - br, bt, br, dy));
 			}
 		}
 
-		var t = tile.sub(bw, bh, sizeX, sizeY);
-		t.scaleToSize(width - bw * 2,height - bh * 2);
-		content.addColor(bw, bh, curColor, t);
+		var t = tile.sub(bl, bt, sizeX, sizeY);
+		t.scaleToSize(width - (br+bl),height - (bt+bb));
+		content.addColor(bl, bt, curColor, t);
 	}
 
 	override function sync( ctx : RenderContext ) {

h2d/domkit/BaseComponents.hx

@@ -202,18 +202,20 @@ class CustomParser extends CssValue.ValueParser {
 	public function parseFlowBackground(value) {
 		return switch( value ) {
 		case VIdent("transparent"): null;
-		case VGroup([tile,VInt(x),VInt(y)]):
-			{ tile : parseTile(tile), borderW : x, borderH : y };
+		case VGroup([tile,VInt(w),VInt(h)]):
+			{ tile : parseTile(tile), borderL : w, borderT : h, borderR : w, borderB : h };
+		case VGroup([tile,VInt(l),VInt(t),VInt(r),VInt(b)]):
+			{ tile : parseTile(tile), borderL : l, borderT : t, borderR : r, borderB : b };
 		case VGroup([color,alpha]):
 			var c = parseColor(color);
 			var a = parseFloat(alpha);
-			return { tile : #if macro true #else h2d.Tile.fromColor(c,a) #end, borderW : 0, borderH : 0 };
+			return { tile : #if macro true #else h2d.Tile.fromColor(c,a) #end, borderL : 0, borderT : 0, borderR : 0, borderB : 0 };
 		case VCall("disc",args) if( args.length == 1 || args.length == 2 ):
 			var c = parseColor(args[0]);
 			var a = args[1] == null ? 1. : parseFloat(args[1]);
-			return { tile : #if macro true #else h2d.Tile.fromTexture(h3d.mat.Texture.genDisc(256,c,a)) #end, borderW : 0, borderH : 0 };
+			return { tile : #if macro true #else h2d.Tile.fromTexture(h3d.mat.Texture.genDisc(256,c,a)) #end, borderL : 0, borderT : 0, borderR : 0, borderB : 0 };
 		default:
-			{ tile : parseTile(value), borderW : 0, borderH : 0 };
+			{ tile : parseTile(value), borderL : 0, borderT : 0, borderR : 0, borderB : 0 };
 		}
 	}
 
@@ -635,7 +637,7 @@ class FlowComp extends ObjectComp implements domkit.Component.ComponentDecl<h2d.
 	@:p var maxWidth : Null<Int>;
 	@:p var maxHeight : Null<Int>;
 	@:p var backgroundId : Bool;
-	@:p(flowBackground) var background : { tile : h2d.Tile, borderW : Int, borderH : Int };
+	@:p(flowBackground) var background : { tile : h2d.Tile, borderL : Int, borderT : Int, borderR : Int, borderB : Int };
 	@:p(tile) var backgroundTile : h2d.Tile;
 	@:p(tilePos) var backgroundTilePos : { p : Int, y : Int };
 	@:p var backgroundTilePosX : Null<Int>;
@@ -706,8 +708,10 @@ class FlowComp extends ObjectComp implements domkit.Component.ComponentDecl<h2d.
 			o.borderWidth = o.borderHeight = 0;
 		} else {
 			o.backgroundTile = v.tile;
-			o.borderWidth = v.borderW;
-			o.borderHeight = v.borderH;
+			o.borderLeft = v.borderL;
+			o.borderTop = v.borderT;
+			o.borderRight = v.borderR;
+			o.borderBottom = v.borderB;
 		}
 	}