chore: cleanup background handling

rigor789 · NathanWalker · commit 7c60735d14c1 · 2021-04-06T11:18:36.000-07:00
diff --git a/apps/automated/.npmrc b/apps/automated/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
diff --git a/apps/toolbox/.npmrc b/apps/toolbox/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
diff --git a/apps/toolbox/package.json b/apps/toolbox/package.json
@@ -7,13 +7,13 @@
     "url": "https://github.com/NativeScript/NativeScript.git"
   },
   "dependencies": {
-    "nativescript-theme-core": "file:../../node_modules/nativescript-theme-core",
-    "@nativescript/core": "file:../../packages/core"
+    "@nativescript/core": "file:../../packages/core",
+    "nativescript-theme-core": "file:../../node_modules/nativescript-theme-core"
   },
   "devDependencies": {
     "@nativescript/android": "7.0.1",
     "@nativescript/ios": "7.2.0",
     "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
-    "typescript": "file:../../node_modules/typescript"
+    "typescript": "4.0.7"
   }
 }
diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
@@ -10,6 +10,7 @@
         <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
         <Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
         <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
+        <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
       </StackLayout>
     </ScrollView>
   </StackLayout>
diff --git a/apps/toolbox/src/pages/css-playground.ts b/apps/toolbox/src/pages/css-playground.ts
@@ -0,0 +1,41 @@
+import { Observable, EventData, Page, Label } from '@nativescript/core';
+import { addTaggedAdditionalCSS, removeTaggedAdditionalCSS } from '@nativescript/core/ui/styling/style-scope';
+
+let page: Page;
+let playLabel: Label;
+let CSSTag = 'css-playground';
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new CssPlaygroundModel();
+	playLabel = page.getViewById('play');
+}
+
+export class CssPlaygroundModel extends Observable {
+	currentCSS = [
+		`width: 200;`,
+		`font-size: 20;`,
+		`background: #65adf1;`,
+		`color: white;`,
+		`box-shadow: 5 5;`,
+		// `text-shadow: 2 2 red;`,
+		`padding: 16;`,
+	].join('\n');
+
+	onTextChange(args) {
+		this.currentCSS = args.value;
+	}
+
+	resetCSS() {
+		console.log('reset css...');
+		removeTaggedAdditionalCSS(CSSTag);
+
+		playLabel._onCssStateChange();
+	}
+
+	applyCSS(args) {
+		this.resetCSS();
+		addTaggedAdditionalCSS(`#play { ${this.currentCSS}`, CSSTag);
+		playLabel._onCssStateChange();
+	}
+}
diff --git a/apps/toolbox/src/pages/css-playground.xml b/apps/toolbox/src/pages/css-playground.xml
@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="CSS Playground" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <GridLayout rows="*, *">
+			<ContentView>
+				<Label id="play" text="I'm a test label." verticalAlignment="center"/>
+			</ContentView>
+
+			<GridLayout row="1" rows="*, auto, auto" borderTopWidth="1">
+				<TextView text="{{ currentCSS }}" textChange="{{ onTextChange }}"/>
+
+				<Button class="btn btn-primary" text="Apply" row="1" tap="{{ applyCSS }}"/>
+				<Button class="btn btn-primary btn-orange" text="Reset" row="2" tap="{{ resetCSS }}"/>
+			</GridLayout>
+		</GridLayout>
+</Page>
diff --git a/apps/toolbox/src/pages/root-layout.ts b/apps/toolbox/src/pages/root-layout.ts
@@ -1,5 +1,4 @@
-import { EventData, Page, Observable, RootLayoutOptions, getRootLayout, StackLayout, View } from '@nativescript/core';
-import { Enums } from '@nativescript/core';
+import { EventData, Page, Observable, RootLayoutOptions, getRootLayout, StackLayout, View, CoreTypes } from '@nativescript/core';
 
 export function navigatingTo(args: EventData) {
 	const page = <Page>args.object;
diff --git a/apps/ui/.npmrc b/apps/ui/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
diff --git a/apps/ui/src/css/text-shadow-page.ts b/apps/ui/src/css/text-shadow-page.ts
@@ -12,15 +12,15 @@ const possibleValues = [
 ];
 let currentIndex = 0;
 
-export function butonTap(args: EventData) {
+export function buttonTap(args: EventData) {
 	let page = (<TextBase>args.object).page;
 	let lbl = <TextBase>page.getViewById('Label');
 	let btn = <TextBase>page.getViewById('Button');
 	let textField = <TextBase>page.getViewById('TextField');
 	let textView = <TextBase>page.getViewById('TextView');
 
 	let newIndex = currentIndex++ % possibleValues.length;
-	let newValue = <any>possibleValues[newIndex];
+	let newValue = possibleValues[newIndex];
 
 	lbl.textShadow = newValue;
 	btn.textShadow = newValue;
diff --git a/apps/ui/src/css/text-shadow-page.xml b/apps/ui/src/css/text-shadow-page.xml
@@ -1,6 +1,6 @@
 ﻿<Page>
   <StackLayout>
-    <Button id="Change" automationText="Change" text="Change" tap="butonTap" />
+    <Button id="Change" automationText="Change" text="Change" tap="buttonTap" />
     <Label id="Label" automationText="Label" text="Label" />
     <Button id="Button" automationText="Button" text="Button" />
     <TextField id="TextField" automationText="TextField" text="TextField" />
diff --git a/packages/core/platforms/android/widgets-release.aar b/packages/core/platforms/android/widgets-release.aar
diff --git a/packages/core/ui/styling/background-common.ts b/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,13 +67,17 @@ export class Background implements BackgroundDefinition {
 		clone.borderBottomLeftRadius = this.borderBottomLeftRadius;
 		clone.clipPath = this.clipPath;
 		clone.boxShadow = this.boxShadow;
+		clone.clearFlags = this.clearFlags;
 
 		return clone;
 	}
 
 	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
 		);
 	}
 
diff --git a/packages/core/ui/styling/background.android.ts b/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,
diff --git a/packages/core/ui/styling/background.d.ts b/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;
diff --git a/packages/core/ui/styling/background.ios.ts b/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;
 	}
 }
 
diff --git a/packages/core/ui/text-base/index.android.ts b/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 {
diff --git a/packages/core/ui/text-base/index.ios.ts b/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
diff --git a/packages/types-android/src/lib/android/org.nativescript.widgets.d.ts b/packages/types-android/src/lib/android/org.nativescript.widgets.d.ts
@@ -4,7 +4,6 @@
 
 						export class Utils {
 								public static drawBoxShadow(view: android.view.View, value: string): void;
-								public static clearBoxShadow(view: android.view.View): void;
 						}
 
 						export class BoxShadowDrawable {
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/Utils.java b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/Utils.java
diff --git a/packages/webpack/jasmine-config/reporter.ts b/packages/webpack/jasmine-config/reporter.ts
diff --git a/packages/webpack/package.json b/packages/webpack/package.json
