Merge pull request #2102 from NativeScript/clip-path

clip-path support added

apps/ui-tests-app/css/clip-path.xml

@@ -0,0 +1,9 @@
+<Page>
+    <GridLayout rows="*,*,*,*,*">
+        <Button text="circle" style="background-color: red; border-width:2; border-color: blue; clip-path: circle(100% at 50% 50%);"/>
+        <Button text="ellipse" style="background-color: orange; border-width:2; border-color: green; clip-path: ellipse(50% 50% at 50% 50%);" row="1" />
+        <Button text="rect" style="background-color: red; border-width:2; border-color: blue; clip-path: rect(0, 0, 100%, 100%);" row="2" />
+        <Button text="polygon" style="background-color: magenta; border-width:2; border-color: red; clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);" row="3" />
+        <Button text="image polygon" style="background-image: url('https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2f/ce/maldives.jpg'); border-width:2; border-color: red; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);" row="4" />
+    </GridLayout>
+</Page>

ui/core/view.android.ts

@@ -742,6 +742,7 @@ export class ViewStyler implements style.Styler {
         style.registerHandler(style.borderWidthProperty, borderHandler);
         style.registerHandler(style.borderColorProperty, borderHandler);
         style.registerHandler(style.borderRadiusProperty, borderHandler);
+        style.registerHandler(style.clipPathProperty, borderHandler);
 
         style.registerHandler(style.nativeLayoutParamsProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setNativeLayoutParamsProperty,

ui/core/view.ios.ts

@@ -581,12 +581,40 @@ export class ViewStyler implements style.Styler {
         return view.ios.layer.zPosition;
     }
     
+    //Clip-path methods
+    private static setClipPathProperty(view: View, newValue: any) {
+        var nativeView: UIView = <UIView>view._nativeView;
+        if (nativeView) {
+            ensureBackground();
+            var updateSuspended = view._isPresentationLayerUpdateSuspeneded();
+            if (!updateSuspended) {
+                CATransaction.begin();
+            }
+            nativeView.backgroundColor = background.ios.createBackgroundUIColor(view);
+            if (!updateSuspended) {
+                CATransaction.commit();
+            }
+        }
+    }
+
+    private static resetClipPathProperty(view: View, nativeValue: any) {
+        var nativeView: UIView = <UIView>view._nativeView;
+        if (nativeView) {
+            // TODO: Check how to reset.
+        }
+    }
+
     public static registerHandlers() {
+
         style.registerHandler(style.backgroundInternalProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setBackgroundInternalProperty,
             ViewStyler.resetBackgroundInternalProperty,
             ViewStyler.getNativeBackgroundInternalValue));
 
+        style.registerHandler(style.clipPathProperty, new style.StylePropertyChangedHandler(
+            ViewStyler.setClipPathProperty,
+            ViewStyler.resetClipPathProperty));
+
         style.registerHandler(style.visibilityProperty, new style.StylePropertyChangedHandler(
             ViewStyler.setVisibilityProperty,
             ViewStyler.resetVisibilityProperty));

ui/styling/background-common.ts

@@ -3,6 +3,7 @@ import colorModule = require("color");
 import enums = require("ui/enums");
 import definition = require("ui/styling/background");
 import cssValue = require("css-value");
+import utils = require("utils/utils");
 import * as typesModule from "utils/types";
 
 var types: typeof typesModule;
@@ -242,3 +243,18 @@ export class Background implements definition.Background {
             colorModule.Color.equals(value1.color, value2.color);
     }
 }
+
+export function cssValueToDevicePixels(source: string, total: number): number {
+    var result;
+    source = source.trim();
+
+    if (source.indexOf("px") !== -1) {
+        result = parseFloat(source.replace("px", ""));
+    }
+    else if (source.indexOf("%") !== -1 && total > 0) {
+        result = (parseFloat(source.replace("%", "")) / 100) * utils.layout.toDeviceIndependentPixels(total);
+    } else {
+        result = parseFloat(source);
+    }
+    return utils.layout.toDevicePixels(result);
+}

ui/styling/background.android.ts

@@ -42,12 +42,23 @@ export module ad {
             private _borderWidth: number;
             private _cornerRadius: number;
             private _borderColor: number;
+            private _clipPath: string;
 
             constructor() {
                 super();
                 return global.__native(this);
             }
 
+            get clipPath(): string {
+                return this._clipPath;
+            }
+            set clipPath(value: string) {
+                if (this._clipPath !== value) {
+                    this._clipPath = value;
+                    this.invalidateSelf();
+                }
+            }
+
             get borderWidth(): number {
                 return this._borderWidth;
             }
@@ -109,8 +120,12 @@ export module ad {
                     backgroundColorPaint.setColor(this.background.color.android);
                     backgroundColorPaint.setAntiAlias(true);
 
+                    if (this.clipPath) {
+                        drawClipPath(this.clipPath, canvas, backgroundColorPaint, backgroundBoundsF);
+                    } else {
                         canvas.drawRoundRect(backgroundBoundsF, outerRadius, outerRadius, backgroundColorPaint);
                     }
+                }
 
                 // draw image
                 if (this.background.image) {
@@ -139,6 +154,9 @@ export module ad {
                     params.posX = params.repeatX ? 0 : params.posX;
                     params.posY = params.repeatY ? 0 : params.posY;
 
+                    if (this.clipPath) {
+                        drawClipPath(this.clipPath, canvas, backgroundImagePaint, backgroundBoundsF);
+                    } else {
                         let supportsPathOp = android.os.Build.VERSION.SDK_INT >= 19;
                         if (supportsPathOp) {
                             // Path.Op can be used in API level 19+ to achieve the perfect geometry.
@@ -156,6 +174,7 @@ export module ad {
                             canvas.restore();
                         }
                     }
+                }
 
                 // draw border
                 if (borderWidth > 0 && this._borderColor) {
@@ -164,6 +183,11 @@ export module ad {
                     borderPaint.setColor(this._borderColor);
                     borderPaint.setAntiAlias(true);
 
+                    if (this.clipPath) {
+                        borderPaint.setStyle(android.graphics.Paint.Style.STROKE);
+                        borderPaint.setStrokeWidth(borderWidth);
+                        drawClipPath(this.clipPath, canvas, borderPaint, backgroundBoundsF);
+                    } else {
                         if (outerRadius <= 0) {
                             borderPaint.setStyle(android.graphics.Paint.Style.STROKE);
                             borderPaint.setStrokeWidth(borderWidth);
@@ -185,6 +209,7 @@ export module ad {
                     }
                 }
             }
+        }
 
         BorderDrawableClass = BorderDrawable;
     }
@@ -209,6 +234,8 @@ export module ad {
         ensureBorderDrawable();
         ensureLazyRequires();
 
+        var clipPathValue = v.style._getValue(style.clipPathProperty);
+
         var backgroundValue = v.style._getValue(style.backgroundInternalProperty);
         var borderWidth = v.borderWidth;
         var bkg = <any>nativeView.getBackground();
@@ -220,7 +247,7 @@ export module ad {
             let backgroundColor = bkg.backgroundColor = v.style._getValue(style.backgroundColorProperty).android;
             bkg.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
             bkg.backgroundColor = backgroundColor;
-        } else if (v.borderWidth !== 0 || v.borderRadius !== 0 || !backgroundValue.isEmpty()) {
+        } else if (v.borderWidth !== 0 || v.borderRadius !== 0 || !backgroundValue.isEmpty() || !clipPathValue.isEmpty()) {
 
             if (!(bkg instanceof BorderDrawableClass)) {
                 bkg = new BorderDrawableClass();
@@ -236,6 +263,7 @@ export module ad {
             bkg.cornerRadius = v.borderRadius;
             bkg.borderColor = v.borderColor ? v.borderColor.android : android.graphics.Color.TRANSPARENT;
             bkg.background = backgroundValue;
+            bkg.clipPath = clipPathValue;
 
             if (getSDK() < 18) {
                 // Switch to software because of unsupported canvas methods if hardware acceleration is on:
@@ -274,3 +302,66 @@ export module ad {
         );
     }
 }
+
+function drawClipPath(clipPath: string, canvas: android.graphics.Canvas, paint: android.graphics.Paint, bounds: android.graphics.RectF) {
+    var functionName = clipPath.substring(0, clipPath.indexOf("("));
+    var value = clipPath.replace(`${functionName}(`, "").replace(")", "");
+
+    if (functionName === "rect") {
+        var arr = value.split(/[\s]+/);
+
+        var top = common.cssValueToDevicePixels(arr[0], bounds.top);
+        var left = common.cssValueToDevicePixels(arr[1], bounds.left);
+        var bottom = common.cssValueToDevicePixels(arr[2], bounds.bottom);
+        var right = common.cssValueToDevicePixels(arr[3], bounds.right);
+
+        canvas.drawRect(left, top, right, bottom, paint);
+
+    } else if (functionName === "circle") {
+        var arr = value.split(/[\s]+/);
+
+        var radius = common.cssValueToDevicePixels(arr[0], (bounds.width() > bounds.height() ? bounds.height() : bounds.width()) / 2);
+        var y = common.cssValueToDevicePixels(arr[2], bounds.height());
+        var x = common.cssValueToDevicePixels(arr[3], bounds.width());
+
+        canvas.drawCircle(x, y, radius, paint);
+
+    } else if (functionName === "ellipse") {
+        var arr = value.split(/[\s]+/);
+
+        var rX = common.cssValueToDevicePixels(arr[0], bounds.right);
+        var rY = common.cssValueToDevicePixels(arr[1], bounds.bottom);
+        var cX = common.cssValueToDevicePixels(arr[3], bounds.right);
+        var cY = common.cssValueToDevicePixels(arr[4], bounds.bottom);
+        
+        var left = cX - rX;
+        var top = cY - rY;
+        var right = (rX * 2) + left;
+        var bottom = (rY * 2) + top;
+
+        canvas.drawOval(new android.graphics.RectF(left, top, right, bottom), paint);
+
+    } else if (functionName === "polygon") {
+        var path = new android.graphics.Path();
+        var firstPoint: view.Point;
+        var arr = value.split(/[,]+/);
+        for (let i = 0; i < arr.length; i++) {
+            let xy = arr[i].trim().split(/[\s]+/);
+            let point: view.Point = {
+                x: common.cssValueToDevicePixels(xy[0], bounds.width()),
+                y: common.cssValueToDevicePixels(xy[1], bounds.height())
+            };
+            
+            if (!firstPoint) {
+                firstPoint = point;
+                path.moveTo(point.x, point.y);
+            }
+
+            path.lineTo(point.x, point.y);
+        }
+
+        path.lineTo(firstPoint.x, firstPoint.y);
+
+        canvas.drawPath(path, paint);
+    }
+}

ui/styling/background.ios.ts

@@ -13,11 +13,16 @@ function ensureStyle() {
 
 export module ios {
     export function createBackgroundUIColor(view: viewModule.View, flip?: boolean): UIColor {
-        if(!view._nativeView){
+        if (!view._nativeView) {
             return undefined;
         }
         ensureStyle();
-        var background = <common.Background> view.style._getValue(style.backgroundInternalProperty);
+
+        if (view.style.clipPath) {
+            drawClipPath(view);
+        }
+
+        var background = <common.Background>view.style._getValue(style.backgroundInternalProperty);
 
         if (!background || background.isEmpty()) {
             return undefined;
@@ -98,3 +103,103 @@ export module ios {
         return flippedImage;
     }
 }
+
+function drawClipPath(view: viewModule.View) {
+    var path: any;
+
+    var nativeView = <UIView>view._nativeView;
+    var bounds = {
+        left: nativeView.bounds.origin.x,
+        top: nativeView.bounds.origin.y,
+        bottom: nativeView.bounds.size.height,
+        right: nativeView.bounds.size.width
+    };
+
+    if (bounds.right === 0 || bounds.bottom === 0) {
+        return;
+    }
+
+    var clipPath = view.style.clipPath;
+
+    var functionName = clipPath.substring(0, clipPath.indexOf("("));
+    var value = clipPath.replace(`${functionName}(`, "").replace(")", "");
+
+    if (functionName === "rect") {
+        var arr = value.split(/[\s]+/);
+
+        var top = common.cssValueToDevicePixels(arr[0], bounds.top);
+        var left = common.cssValueToDevicePixels(arr[1], bounds.left);
+        var bottom = common.cssValueToDevicePixels(arr[2], bounds.bottom);
+        var right = common.cssValueToDevicePixels(arr[3], bounds.right);
+
+        path = UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right, bottom)).CGPath;
+
+    } else if (functionName === "circle") {
+        var arr = value.split(/[\s]+/);
+
+        var radius = common.cssValueToDevicePixels(arr[0], (bounds.right > bounds.bottom ? bounds.bottom : bounds.right) / 2);
+        var y = common.cssValueToDevicePixels(arr[2], bounds.bottom);
+        var x = common.cssValueToDevicePixels(arr[3], bounds.right);
+
+        path = UIBezierPath.bezierPathWithArcCenterRadiusStartAngleEndAngleClockwise(CGPointMake(x, y), radius, 0, 360, true).CGPath;
+
+    } else if (functionName === "ellipse") {
+        var arr = value.split(/[\s]+/);
+
+        var rX = common.cssValueToDevicePixels(arr[0], bounds.right);
+        var rY = common.cssValueToDevicePixels(arr[1], bounds.bottom);
+        var cX = common.cssValueToDevicePixels(arr[3], bounds.right);
+        var cY = common.cssValueToDevicePixels(arr[4], bounds.bottom);
+        
+        var left = cX - rX;
+        var top = cY - rY;
+        var width = rX * 2;
+        var height = rY * 2;
+
+        path = UIBezierPath.bezierPathWithOvalInRect(CGRectMake(left, top, width, height)).CGPath;
+
+    } else if (functionName === "polygon") {
+
+        path = CGPathCreateMutable()
+
+        var firstPoint: viewModule.Point;
+        var arr = value.split(/[,]+/);
+        for (let i = 0; i < arr.length; i++) {
+            let xy = arr[i].trim().split(/[\s]+/);
+            let point: viewModule.Point = {
+                x: common.cssValueToDevicePixels(xy[0], bounds.right),
+                y: common.cssValueToDevicePixels(xy[1], bounds.bottom)
+            };
+
+            if (!firstPoint) {
+                firstPoint = point;
+                CGPathMoveToPoint(path, null, point.x, point.y)
+            }
+
+            CGPathAddLineToPoint(path, null, point.x, point.y)
+        }
+
+        CGPathAddLineToPoint(path, null, firstPoint.x, firstPoint.y)
+    }
+
+    if (path) {
+        var shape = CAShapeLayer.layer();
+        shape.path = path;
+        nativeView.layer.mask = shape;
+        nativeView.clipsToBounds = true;
+
+        if (view.borderWidth > 0 && view.borderColor) {
+            var borderLayer = CAShapeLayer.layer();
+            borderLayer.path = path;
+            borderLayer.lineWidth = view.borderWidth * 2;
+            borderLayer.strokeColor = view.borderColor.ios.CGColor;
+            borderLayer.fillColor = UIColor.clearColor().CGColor;
+
+            borderLayer.frame = nativeView.bounds;
+
+            nativeView.layer.borderColor = undefined;
+            nativeView.layer.borderWidth = 0;
+            nativeView.layer.addSublayer(borderLayer);
+        }
+    }
+}

ui/styling/style.d.ts

@@ -75,6 +75,7 @@ declare module "ui/styling/style" {
         public horizontalAlignment: string;
         public verticalAlignment: string;
         public visibility: string;
+        public clipPath: string;
         public opacity: number;
         public whiteSpace: string;
         public letterSpacing: number;
@@ -111,6 +112,7 @@ declare module "ui/styling/style" {
     export var borderColorProperty: styleProperty.Property;
     export var borderWidthProperty: styleProperty.Property;
     export var borderRadiusProperty: styleProperty.Property;
+    export var clipPathProperty: styleProperty.Property;
     export var backgroundInternalProperty: styleProperty.Property;
     export var fontSizeProperty: styleProperty.Property;
     export var fontFamilyProperty: styleProperty.Property;

ui/styling/style.ts

@@ -403,6 +403,13 @@ function isPaddingValid(value: number): boolean {
     return isFinite(value) && !isNaN(value) && value >= 0;
 }
 
+var supportedPaths = ["rect", "circle", "ellipse", "polygon"];
+function isClipPathValid(value: string): boolean {
+    var functionName = value.substring(0, value.indexOf("(")).trim();
+    
+    return supportedPaths.indexOf(functionName) !== -1 || value === "";
+}
+
 function isMarginValid(value: number): boolean {
     var result = convertToPercentHelper(value);
     if (result.isError) {
@@ -590,6 +597,13 @@ export class Style extends DependencyObservable implements styling.Style {
         this._setValue(borderRadiusProperty, value);
     }
 
+    get clipPath(): string {
+        return this._getValue(clipPathProperty);
+    }
+    set clipPath(value: string) {
+        this._setValue(clipPathProperty, value);
+    }
+    
     get fontSize(): number {
         return this._getValue(fontSizeProperty);
     }
@@ -880,6 +894,11 @@ export class Style extends DependencyObservable implements styling.Style {
         if (!(<background.Background>this._getValue(backgroundInternalProperty)).isEmpty()) {
             this._applyProperty(backgroundInternalProperty, this._getValue(backgroundInternalProperty));
         }
+        
+        var clipPathPropertyValue = this._getValue(clipPathProperty);
+        if (types.isString(clipPathPropertyValue) && clipPathPropertyValue !== "") {
+            this._applyProperty(clipPathProperty, clipPathPropertyValue);
+        }
     }
 
     private _applyProperty(property: Property, newValue: any) {
@@ -1049,6 +1068,9 @@ export var borderWidthProperty = new styleProperty.Property("borderWidth", "bord
 export var borderRadiusProperty = new styleProperty.Property("borderRadius", "border-radius",
     new PropertyMetadata(0, AffectsLayout, null, isPaddingValid), converters.numberConverter);
     
+export var clipPathProperty = new styleProperty.Property("clipPath", "clip-path",
+    new PropertyMetadata(undefined, AffectsLayout, null, isClipPathValid));    
+
 export var backgroundInternalProperty = new styleProperty.Property("_backgroundInternal", "_backgroundInternal",
     new PropertyMetadata(background.Background.default, PropertyMetadataSettings.None, undefined, undefined, background.Background.equals));
 

ui/styling/styling.d.ts

@@ -83,6 +83,11 @@
          */
         borderRadius: number;
         
+        /**
+         * Gets or sets the clip-path style property.
+         */
+        clipPath: string;        
+
         /**
          * Gets or sets font-size style property.
          */