chore: cleanup background handling

packages/core/ui/styling/background-common.ts

@@ -6,6 +6,21 @@ import { LinearGradient } from './linear-gradient';
 import { Color } from '../../color';
 import { CSSShadow } from './css-shadow';
 
+/**
+ * Flags used to hint the background handler if it has to clear a specific property
+ *
+ * Flags can be combined with the | operator
+ * for example: BackgroundClearFlags.CLEAR_BACKGROUND_COLOR | BackgroundClearFlags.CLEAR_BOX_SHADOW
+ *
+ * Flags can be checked for using the & operator
+ * for example: if(clearFlags & BackgroundClearFlags.CLEAR_BOX_SHADOW) { ...clear box shadow... }
+ */
+export const enum BackgroundClearFlags {
+	NONE = 0,
+	CLEAR_BACKGROUND_COLOR = 1 << 0,
+	CLEAR_BOX_SHADOW = 2 << 0,
+}
+
 export class Background implements BackgroundDefinition {
 	public static default = new Background();
 
@@ -28,6 +43,7 @@ export class Background implements BackgroundDefinition {
 	public borderBottomRightRadius = 0;
 	public clipPath: string;
 	public boxShadow: CSSShadow;
+	public clearFlags: number = BackgroundClearFlags.NONE;
 
 	private clone(): Background {
 		const clone = new Background();
@@ -51,6 +67,7 @@ export class Background implements BackgroundDefinition {
 		clone.borderBottomLeftRadius = this.borderBottomLeftRadius;
 		clone.clipPath = this.clipPath;
 		clone.boxShadow = this.boxShadow;
+		clone.clearFlags = this.clearFlags;
 
 		return clone;
 	}
@@ -58,6 +75,9 @@ export class Background implements BackgroundDefinition {
 	public withColor(value: Color): Background {
 		const clone = this.clone();
 		clone.color = value;
+		if (!value) {
+			clone.clearFlags |= BackgroundClearFlags.CLEAR_BACKGROUND_COLOR;
+		}
 
 		return clone;
 	}
@@ -184,6 +204,9 @@ export class Background implements BackgroundDefinition {
 	public withBoxShadow(value: CSSShadow): Background {
 		const clone = this.clone();
 		clone.boxShadow = value;
+		if (!value) {
+			clone.clearFlags |= BackgroundClearFlags.CLEAR_BOX_SHADOW;
+		}
 
 		return clone;
 	}
@@ -229,6 +252,7 @@ export class Background implements BackgroundDefinition {
 			value1.borderBottomRightRadius === value2.borderBottomRightRadius &&
 			value1.borderBottomLeftRadius === value2.borderBottomLeftRadius &&
 			value1.clipPath === value2.clipPath
+			// && value1.clearFlags === value2.clearFlags
 		);
 	}
 

packages/core/ui/styling/background.android.ts

@@ -8,6 +8,7 @@ import * as application from '../../application';
 import { profile } from '../../profiling';
 import { CSSShadow } from './css-shadow';
 import { Length } from './style-properties';
+import { BackgroundClearFlags } from './background-common';
 export * from './background-common';
 
 interface AndroidView {
@@ -43,6 +44,13 @@ export namespace ad {
 		}
 
 		const background = view.style.backgroundInternal;
+
+		if (background.clearFlags & BackgroundClearFlags.CLEAR_BOX_SHADOW || background.clearFlags & BackgroundClearFlags.CLEAR_BACKGROUND_COLOR) {
+			// clear background if we're clearing the box shadow
+			// or the background has been removed
+			nativeView.setBackground(null);
+		}
+
 		let drawable = nativeView.getBackground();
 		const androidView = (<any>view) as AndroidView;
 		// use undefined as not set. getBackground will never return undefined only Drawable or null;
@@ -112,8 +120,6 @@ export namespace ad {
 
 		if (background.hasBoxShadow()) {
 			drawBoxShadow(nativeView, view, background.getBoxShadow());
-		} else {
-			clearBoxShadow(nativeView);
 		}
 
 		// TODO: Can we move BorderWidths as separate native setter?
@@ -124,6 +130,9 @@ export namespace ad {
 		const bottomPadding = Math.ceil(view.effectiveBorderBottomWidth + view.effectivePaddingBottom);
 
 		nativeView.setPadding(leftPadding, topPadding, rightPadding, bottomPadding);
+
+		// reset clear flags
+		background.clearFlags = BackgroundClearFlags.NONE;
 	}
 }
 
@@ -256,10 +265,6 @@ function drawBoxShadow(nativeView: android.view.View, view: View, boxShadow: CSS
 	org.nativescript.widgets.Utils.drawBoxShadow(nativeView, JSON.stringify(config));
 }
 
-function clearBoxShadow(nativeView: android.view.View) {
-	org.nativescript.widgets.Utils.clearBoxShadow(nativeView);
-}
-
 export enum CacheMode {
 	none,
 	memory,

packages/core/ui/styling/background.d.ts

@@ -31,6 +31,7 @@ export declare class Background {
 	public borderBottomLeftRadius: number;
 	public clipPath: string;
 	public boxShadow: string | CSSShadow;
+	public clearFlags: number;
 
 	public withColor(value: Color): Background;
 	public withImage(value: string | LinearGradient): Background;

packages/core/ui/styling/background.ios.ts

@@ -9,6 +9,7 @@ import { ImageSource } from '../../image-source';
 import { CSSValue, parse as cssParse } from '../../css-value';
 import { CSSShadow } from './css-shadow';
 import { Length } from './style-properties';
+import { BackgroundClearFlags } from './background-common';
 
 export * from './background-common';
 
@@ -48,6 +49,12 @@ export namespace ios {
 		const background = view.style.backgroundInternal;
 		const nativeView = <NativeView>view.nativeViewProtected;
 
+		if (background.clearFlags & BackgroundClearFlags.CLEAR_BOX_SHADOW) {
+			// clear box shadow if it has been removed!
+			view.setProperty('clipToBounds', true);
+			clearBoxShadow(nativeView);
+		}
+
 		if (nativeView.hasNonUniformBorder) {
 			unsubscribeFromScrollNotifications(view);
 			clearNonUniformBorders(nativeView);
@@ -91,10 +98,10 @@ export namespace ios {
 
 		if (background.hasBoxShadow()) {
 			drawBoxShadow(nativeView, view, background.getBoxShadow(), background);
-		} else {
-			view.setProperty('clipToBounds', true);
-			clearBoxShadow(nativeView);
 		}
+
+		// reset clear flags
+		background.clearFlags = BackgroundClearFlags.NONE;
 	}
 }
 

packages/core/ui/text-base/index.android.ts

@@ -390,7 +390,13 @@ export class TextBase extends TextBaseCommon {
 	}
 
 	[textShadowProperty.setNative](value: CSSShadow) {
-		this.nativeViewProtected.setShadowLayer(Length.toDevicePixels(value.blurRadius, 0), Length.toDevicePixels(value.offsetX, 0), Length.toDevicePixels(value.offsetY, 0), value.color.android);
+		// prettier-ignore
+		this.nativeViewProtected.setShadowLayer(
+			Length.toDevicePixels(value.blurRadius, java.lang.Float.MIN_VALUE),
+			Length.toDevicePixels(value.offsetX, 0),
+			Length.toDevicePixels(value.offsetY, 0),
+			value.color.android
+		);
 	}
 
 	[letterSpacingProperty.getDefault](): number {

packages/core/ui/text-base/index.ios.ts

@@ -365,16 +365,17 @@ export class TextBase extends TextBaseCommon {
 			return;
 		}
 
-		if (value.color) {
-			layer.shadowOpacity = value.color.a / 255;
-			layer.shadowColor = value.color.ios.CGColor;
-		}
+		// shadow opacity is handled on the shadow's color instance
+		layer.shadowOpacity = value.color?.a ? value.color?.a / 255 : 1;
+		layer.shadowColor = value.color.ios.CGColor;
+		layer.shadowRadius = Length.toDevicePixels(value.blurRadius, 0.0);
 
-		if (value.blurRadius) {
-			layer.shadowRadius = Length.toDevicePixels(value.blurRadius);
-		}
+		// prettier-ignore
+		layer.shadowOffset = CGSizeMake(
+			Length.toDevicePixels(value.offsetX, 0.0),
+			Length.toDevicePixels(value.offsetY, 0.0)
+		);
 
-		layer.shadowOffset = CGSizeMake(Length.toDevicePixels(value.offsetX), Length.toDevicePixels(value.offsetY));
 		layer.masksToBounds = false;
 
 		// NOTE: generally should not need shouldRasterize