Merge pull request #8 from edusperoni/ios-performance

Better iOS Performance with shadowPath and rasterize

Author: TheOriginalJosh

README.md

@@ -97,6 +97,8 @@ The table below list and describes all possible attributes as well as show which
 | shadowOffset  | number                                                                                                                                                                                                                                                       | iOS      | Determines the distance in points (only on Y axis) of the shadow. Negative value shows the shadow above the view.                                                                                                                                                                                                                                                                                                         |
 | shadowOpacity | number                                                                                                                                                                                                                                                       | iOS      | From 0 to 1. Determines the opacity level of the shadow.                                                                                                                                                                                                                                                                                                                                                                  |
 | shadowRadius  | number                                                                                                                                                                                                                                                       | iOS      | Determines the blurring effect in points of the shadow. The higher the more blurred.                                                                                                                                                                                                                                                                                                                                      |
+| useShadowPath  | boolean => default: true                                                                                                                                                                                                                                    | iOS      | Determines whether to use shadowPath to render the shadow. Setting this to false negatively impacts performance.                                                                                                                                                                                                                                                                                                   |
+| rasterize  | boolean => default: false                                                                                                                                                                                                                                       | iOS      | Determines whether the view should be rasterized. Activating this will increase memory usage, as rasterized views are stored in memory, but will massively improve performance.                                                                                                                                                                                                                                   |
 
 ### `AndroidData` and `IOSData`
 

lib/src/nativescript-ngx-shadow/common/ios-data.model.ts

@@ -5,4 +5,6 @@ export class IOSData {
   shadowOffset?: number;
   shadowOpacity?: number;
   shadowRadius?: number;
+  rasterize?: boolean;
+  useShadowPath?: boolean;
 }

lib/src/nativescript-ngx-shadow/common/shadow.ts

@@ -4,13 +4,14 @@ import { AndroidData } from "./android-data.model";
 import { IOSData } from "./ios-data.model";
 import { ShapeEnum } from './shape.enum';
 import { Length } from 'tns-core-modules/ui/page/page';
-import { isAndroid } from "tns-core-modules/platform";
+import { isAndroid, screen } from "tns-core-modules/platform";
 
 declare const android: any;
 declare const java: any;
 declare const CGSizeMake: any;
 declare const UIScreen: any;
 declare const Array: any;
+declare const UIBezierPath: any;
 
 let LayeredShadow;
 let PlainShadow;
@@ -49,6 +50,8 @@ export class Shadow {
         pressedTranslationZ: (data as AndroidData).pressedTranslationZ || Shadow.DEFAULT_PRESSED_ELEVATION,
         shadowColor: (data as IOSData).shadowColor ||
           Shadow.DEFAULT_SHADOW_COLOR,
+        useShadowPath: ((data as IOSData).useShadowPath !== undefined ? (data as IOSData).useShadowPath : true),
+        rasterize: ((data as IOSData).rasterize !== undefined ? (data as IOSData).rasterize : false)
       },
     );
   }
@@ -191,6 +194,13 @@ export class Shadow {
       data.shadowRadius ?
         parseFloat(String(data.shadowRadius)) :
         0.66 * elevation - 0.5;
+    nativeView.layer.shouldRasterize = data.rasterize;
+    nativeView.layer.rasterizationScale = screen.mainScreen.scale;
+    let shadowPath = null;
+    if(data.useShadowPath) {
+      shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(nativeView.bounds, nativeView.layer.shadowRadius).cgPath;
+    }
+    nativeView.layer.shadowPath = shadowPath;
   }
 
   static androidDipToPx(nativeView: any, dip: number) {

lib/src/nativescript-ngx-shadow/ng-shadow.directive.ts

@@ -35,6 +35,8 @@ export class NativeShadowDirective implements OnInit, OnChanges, AfterViewInit {
   @Input() shadowOffset?: number | string;
   @Input() shadowOpacity?: number | string;
   @Input() shadowRadius?: number | string;
+  @Input() useShadowPath?: boolean;
+  @Input() rasterize?: boolean;
 
   private loaded = false;
   private initialized = false;
@@ -131,7 +133,9 @@ export class NativeShadowDirective implements OnInit, OnChanges, AfterViewInit {
         changes.hasOwnProperty('shadowColor') ||
         changes.hasOwnProperty('shadowOffset') ||
         changes.hasOwnProperty('shadowOpacity') ||
-        changes.hasOwnProperty('shadowRadius'))
+        changes.hasOwnProperty('shadowRadius') ||
+        changes.hasOwnProperty('rasterize') ||
+        changes.hasOwnProperty('useShadowMap'))
     ) {
       if (
         changes.hasOwnProperty('shadow') &&
@@ -191,7 +195,9 @@ export class NativeShadowDirective implements OnInit, OnChanges, AfterViewInit {
         shadowColor: this.shadowColor,
         shadowOffset: this.shadowOffset as number,
         shadowOpacity: this.shadowOpacity as number,
-        shadowRadius: this.shadowRadius as number
+        shadowRadius: this.shadowRadius as number,
+        rasterize: this.rasterize,
+        useShadowPath: this.useShadowPath
       });
     }
   }
@@ -244,5 +250,7 @@ export class NativeShadowDirective implements OnInit, OnChanges, AfterViewInit {
     this.shadowOffset = data.shadowOffset || this.shadowOffset;
     this.shadowOpacity = data.shadowOpacity || this.shadowOpacity;
     this.shadowRadius = data.shadowRadius || this.shadowRadius;
+    this.rasterize = data.rasterize || this.rasterize;
+    this.useShadowPath = data.useShadowPath || this.useShadowPath;
   }
 }