From c1e431a0f73b36a451c46cb75016085ff1640cc8 Mon Sep 17 00:00:00 2001
From: Nathan Walker <walkerrunpdx@gmail.com>
Date: Sat, 26 Feb 2022 19:08:55 -0800
Subject: [PATCH] chore: box-shadow with non-uniform corner-radius wip

---
 apps/toolbox/project.json                  |   6 +-
 apps/toolbox/src/pages/box-shadow.ts       |   9 +-
 apps/toolbox/src/pages/box-shadow.xml      | 182 +++++----------------
 packages/core/ui/styling/background.ios.ts |   3 +-
 4 files changed, 54 insertions(+), 146 deletions(-)

diff --git a/apps/toolbox/project.json b/apps/toolbox/project.json
index cbd4bc8dc..8ace20a83 100644
--- a/apps/toolbox/project.json
+++ b/apps/toolbox/project.json
@@ -17,13 +17,15 @@
 		"ios": {
 			"executor": "@nativescript/nx:build",
 			"options": {
-				"platform": "ios"
+				"platform": "ios",
+				"noHmr": true
 			}
 		},
 		"android": {
 			"executor": "@nativescript/nx:build",
 			"options": {
-				"platform": "android"
+				"platform": "android",
+				"noHmr": true
 			}
 		},
 		"clean": {
diff --git a/apps/toolbox/src/pages/box-shadow.ts b/apps/toolbox/src/pages/box-shadow.ts
index f269b3a2b..cc9e6d824 100644
--- a/apps/toolbox/src/pages/box-shadow.ts
+++ b/apps/toolbox/src/pages/box-shadow.ts
@@ -16,7 +16,7 @@ export class BoxShadowModel extends Observable {
 
 	background: string;
 	borderWidth: number;
-	borderRadius: number;
+	borderRadius: number | string;
 	appliedBoxShadow: string;
 
 	get boxShadow(): string {
@@ -72,10 +72,13 @@ export class BoxShadowModel extends Observable {
 		this.notifyPropertyChange('selectedBorderType', value);
 		switch (value) {
 			case 'solid':
-				this.borderWidth = this.borderWidth ? 0 : 2;
+				this.borderWidth = 2;
 				break;
 			case 'rounded':
-				this.borderRadius = this.borderRadius ? 0 : 10;
+				this.borderRadius = 10;
+				break;
+			case 'partial':
+				this.borderRadius = '10 0 0 0';
 				break;
 			case 'none':
 				this.borderRadius = 0;
diff --git a/apps/toolbox/src/pages/box-shadow.xml b/apps/toolbox/src/pages/box-shadow.xml
index f19aea34b..48c86fba6 100644
--- a/apps/toolbox/src/pages/box-shadow.xml
+++ b/apps/toolbox/src/pages/box-shadow.xml
@@ -9,129 +9,48 @@
             <!-- layouts -->
             <ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
                 <StackLayout padding="20">
-									<StackLayout
-                        width="300"
-                        height="100"
-                        class="demo-component"
-                        boxShadow="{{ appliedBoxShadow }}"
-                        borderWidth="{{ borderWidth }}"
-                        borderRadius="{{ borderRadius }}"
-                        background="{{ background }}"
-                        tap="{{ toggleAnimation }}"
-                    >
-                        <Label text="StackLayout"></Label>
+									<StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+                        <Label text="StackLayout" />
                     </StackLayout>
 
-                    <GridLayout
-                        width="300"
-                        height="100"
-                        class="demo-component"
-                        boxShadow="{{ appliedBoxShadow }}"
-                        borderWidth="{{ borderWidth }}"
-                        borderRadius="{{ borderRadius }}"
-                        background="{{ background }}"
-                        tap="{{ toggleAnimation }}"
-                    >
-                        <Label text="GridLayout"></Label>
+                    <GridLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+                        <Label text="GridLayout" />
                     </GridLayout>
 
-                    <AbsoluteLayout
-                        width="300"
-                        height="100"
-                        class="demo-component"
-                        boxShadow="{{ appliedBoxShadow }}"
-                        borderWidth="{{ borderWidth }}"
-                        borderRadius="{{ borderRadius }}"
-                        background="{{ background }}"
-                        tap="{{ toggleAnimation }}"
-                    >
-                        <Label text="AbsoluteLayout"></Label>
+                    <AbsoluteLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+                        <Label text="AbsoluteLayout" />
                     </AbsoluteLayout>
 
-                    <DockLayout
-                        width="300"
-                        height="100"
-                        class="demo-component"
-                        boxShadow="{{ appliedBoxShadow }}"
-                        borderWidth="{{ borderWidth }}"
-                        borderRadius="{{ borderRadius }}"
-                        background="{{ background }}"
-                        tap="{{ toggleAnimation }}"
-                    >
-                        <Label text="DockLayout"></Label>
+                    <DockLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+                        <Label text="DockLayout" />
                     </DockLayout>
 
-                    <FlexboxLayout
-                        width="300"
-                        height="100"
-                        class="demo-component"
-                        boxShadow="{{ appliedBoxShadow }}"
-                        borderWidth="{{ borderWidth }}"
-                        borderRadius="{{ borderRadius }}"
-                        background="{{ background }}"
-                        tap="{{ toggleAnimation }}"
-                    >
-                        <Label text="FlexboxLayout"></Label>
+                    <FlexboxLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+                        <Label text="FlexboxLayout" />
                     </FlexboxLayout>
 
                 </StackLayout>
             </ScrollView>
 
             <!-- labels -->
-            <GridLayout
-                rows="*"
-                height="100%"
-                visibility="{{ selectedComponentType === 'labels' ? 'visible' : 'collapsed' }}">
+            <GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'labels' ? 'visible' : 'collapsed' }}">
 
-                <Label
-                    horizontalAlignment="center"
-                    verticalAlignment="center"
-                    class="demo-component"
-                    boxShadow="{{ appliedBoxShadow }}"
-                    borderWidth="{{ borderWidth }}"
-                    borderRadius="{{ borderRadius }}"
-                    background="{{ background }}"
-                    tap="{{ toggleAnimation }}"
-                    text="Label"></Label>
+                <Label horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}" text="Label" />
 
             </GridLayout>
 
             <!-- buttons -->
-            <GridLayout
-                rows="*"
-                height="100%"
-                visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
+            <GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
 
-                <Button
-                    horizontalAlignment="center"
-                    verticalAlignment="center"
-                    class="demo-component"
-                    boxShadow="{{ appliedBoxShadow }}"
-                    borderWidth="{{ borderWidth }}"
-                    borderRadius="{{ borderRadius }}"
-                    background="{{ background }}"
-                    tap="{{ toggleAnimation }}"
-                    text="button"
-                ></Button>
+                <Button horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}" text="button" />
 
             </GridLayout>
 
 						<!-- images -->
-						<GridLayout
-							rows="*"
-							height="100%"
-							visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">
+						<GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">
 
-							<ContentView width="100"
-													 height="100"
-													 horizontalAlignment="center"
-													 verticalAlignment="center"
-													 class="demo-component"
-													 boxShadow="{{ appliedBoxShadow }}"
-													 borderWidth="{{ borderWidth }}"
-													 borderRadius="{{ borderRadius }}"
-													 tap="{{ toggleAnimation }}">
-								<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png"></Image>
+							<ContentView width="100" height="100" horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" tap="{{ toggleAnimation }}">
+								<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png" />
 							</ContentView>
 
 
@@ -139,61 +58,46 @@
 
         </StackLayout>
 
-        <GridLayout
-            row="1"
-            rows="auto"
-            columns="auto, *, auto"
-            class="box-shadow-prop-controls">
-            <Label
-                col="0"
-                verticalAlignment="center"
-                text="box-shadow:"></Label>
-            <TextField
-                col="1"
-                placeholder="box-shadow"
-								text="{{ boxShadow }}"
-                textChange="{{ textChange }}"
-            >
+        <GridLayout row="1" rows="auto" columns="auto, *, auto" class="box-shadow-prop-controls">
+            <Label col="0" verticalAlignment="center" text="box-shadow:" />
+            <TextField col="1" placeholder="box-shadow" text="{{ boxShadow }}" textChange="{{ textChange }}">
             </TextField>
-            <Button
-                col="2"
-                text="APPLY"
-                class="btn-apply"
-                tap="{{ applyBoxShadow }}"></Button>
+            <Button col="2" text="APPLY" class="btn-apply" tap="{{ applyBoxShadow }}" />
         </GridLayout>
         <ScrollView row="2">
             <StackLayout padding="10" class="controls">
-                <Label text="Components"></Label>
+                <Label text="Components" />
                 <FlexboxLayout flexDirection="row" flexWrap="wrap">
-                    <Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}"></Button>
-                    <Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}"></Button>
-                    <Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}"></Button>
-                    <Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}"></Button>
+                    <Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}" />
+                    <Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}" />
+                    <Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}" />
+                    <Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}" />
                 </FlexboxLayout>
 
-                <Label text="Background"></Label>
+                <Label text="Background" />
                 <FlexboxLayout flexDirection="row" flexWrap="wrap">
-                    <Button text="Solid" backgroundType="solid" tap="{{ selectBackgroundType }}"></Button>
-                    <Button text="Transparent" backgroundType="transparent" tap="{{ selectBackgroundType }}"></Button>
-                    <Button text="Gradient" backgroundType="gradient" tap="{{ selectBackgroundType }}"></Button>
+                    <Button text="Solid" backgroundType="solid" tap="{{ selectBackgroundType }}" />
+                    <Button text="Transparent" backgroundType="transparent" tap="{{ selectBackgroundType }}" />
+                    <Button text="Gradient" backgroundType="gradient" tap="{{ selectBackgroundType }}" />
                 </FlexboxLayout>
 
-                <Label text="Borders"></Label>
+                <Label text="Borders" />
                 <FlexboxLayout flexDirection="row" flexWrap="wrap">
-                    <Button text="Solid" borderType="solid" tap="{{ selectBorderType }}"></Button>
-                    <Button text="Rounded" borderType="rounded" tap="{{ selectBorderType }}"></Button>
-                    <Button text="None" borderType="none" tap="{{ selectBorderType }}"></Button>
+                    <Button text="Solid" borderType="solid" tap="{{ selectBorderType }}" />
+                    <Button text="Rounded" borderType="rounded" tap="{{ selectBorderType }}" />
+                    <Button text="Partial" borderType="partial" tap="{{ selectBorderType }}" />
+                    <Button text="None" borderType="none" tap="{{ selectBorderType }}" />
                 </FlexboxLayout>
 
-                <Label text="Animations"></Label>
-                <Label text="Tap on the component to start and stop animation" class="description"></Label>
+                <Label text="Animations" />
+                <Label text="Tap on the component to start and stop animation" class="description" />
                 <FlexboxLayout flexDirection="row" flexWrap="wrap">
-                    <Button text="Width" animationType="width" tap="{{ selectAnimationType }}"></Button>
-                    <Button text="Height" animationType="height" tap="{{ selectAnimationType }}"></Button>
-                    <Button text="Opacity" animationType="opacity" tap="{{ selectAnimationType }}"></Button>
-                    <Button text="Translate" animationType="translate" tap="{{ selectAnimationType }}"></Button>
-                    <Button text="Scale" animationType="scale" tap="{{ selectAnimationType }}"></Button>
-                    <Button text="Rotate" animationType="rotate" tap="{{ selectAnimationType }}"></Button>
+                    <Button text="Width" animationType="width" tap="{{ selectAnimationType }}" />
+                    <Button text="Height" animationType="height" tap="{{ selectAnimationType }}" />
+                    <Button text="Opacity" animationType="opacity" tap="{{ selectAnimationType }}" />
+                    <Button text="Translate" animationType="translate" tap="{{ selectAnimationType }}" />
+                    <Button text="Scale" animationType="scale" tap="{{ selectAnimationType }}" />
+                    <Button text="Rotate" animationType="rotate" tap="{{ selectAnimationType }}" />
                 </FlexboxLayout>
 
             </StackLayout>
diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts
index e3eb08627..7bd2d8017 100644
--- a/packages/core/ui/styling/background.ios.ts
+++ b/packages/core/ui/styling/background.ios.ts
@@ -60,8 +60,7 @@ export namespace ios {
 			layer.borderColor = !borderColor ? undefined : borderColor.ios.CGColor;
 			layer.borderWidth = layout.toDeviceIndependentPixels(background.getUniformBorderWidth());
 			const renderSize = view.getActualSize() || { width: 0, height: 0 };
-			const cornerRadius = layout.toDeviceIndependentPixels(background.getUniformBorderRadius());
-			layer.cornerRadius = Math.min(Math.min(renderSize.width / 2, renderSize.height / 2), cornerRadius);
+			layer.cornerRadius = Math.min(Math.min(renderSize.width / 2, renderSize.height / 2), layout.toDeviceIndependentPixels(background.getUniformBorderRadius()));
 		} else {
 			drawNoRadiusNonUniformBorders(nativeView, background);
 			subscribeForScrollNotifications(view);