refactor clipPath native code

refactor clipPath native code
add strokeMiterlimit prop support

Author: magicismight

Example/examples/Gradients.js

@@ -22,9 +22,9 @@ class LinearGradientHorizontal extends Component{
             width="300"
         >
             <Defs>
-                <LinearGradient id="grad" x1="0" y1="0" x2="170" y2="0">
+                <LinearGradient id="grad" x1="65" y1="0" x2="235" y2="0">
                     <Stop offset="0" stopColor="rgb(255,255,0)" stopOpacity="0" />
-                    <Stop offset="1" stopColor="red" stopOpacity="1" />
+                    <Stop offset="1" stopColor="red" />
                 </LinearGradient>
             </Defs>
             <Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />

README.md

@@ -568,12 +568,8 @@ npm install
 1. add native method for elements
 2. more Text features support
 3. Pattern element
-4. Image element (Android)
-5. calculate bounding box only if necessary.
-6. miterLimit
-7. move percentage convert and context bounding box to renderable
-8. implement touchable elements ()
-9. implement Animated elements
+4. implement touchable elements
+5. implement Animated elements
 
 #### Thanks:
 

android/src/main/java/com/horcrux/svg/RNSVGClipPathShadowNode.java

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2015-present, Horcrux.
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+package com.horcrux.svg;
+
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.graphics.Path;
+import android.graphics.Point;
+import android.view.View;
+import android.view.ViewGroup;
+
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+/**
+ * Shadow node for virtual RNSVGClipPath view
+ */
+public class RNSVGClipPathShadowNode extends RNSVGGroupShadowNode {
+
+    private String mName = null;
+
+    @ReactProp(name = "name")
+    public void setName(String name) {
+        mName = name;
+        markUpdated();
+    }
+
+    @Override
+    public void draw(Canvas canvas, Paint paint, float opacity) {
+        getSvgShadowNode().defineClipPath(getPath(canvas, paint), mName);
+    }
+
+    @Override
+    public int hitTest(Point point, View view) {
+        return -1;
+    }
+}

android/src/main/java/com/horcrux/svg/RNSVGGroupShadowNode.java

@@ -17,46 +17,30 @@
 import android.view.View;
 import android.view.ViewGroup;
 
-import com.facebook.react.uimanager.ReactShadowNode;
-import com.facebook.react.uimanager.annotations.ReactProp;
-
 /**
  * Shadow node for virtual RNSVGGroup view
  */
 public class RNSVGGroupShadowNode extends RNSVGVirtualNode {
 
-    private String mAsClipPath = null;
-
-    @ReactProp(name = "asClipPath")
-    public void setAsClipPath(String asClipPath) {
-        mAsClipPath = asClipPath;
-        markUpdated();
-    }
-
     public void draw(Canvas canvas, Paint paint, float opacity) {
         opacity *= mOpacity;
         RNSVGSvgViewShadowNode svg = getSvgShadowNode();
 
-        if (mAsClipPath == null) {
-            if (opacity > MIN_OPACITY_FOR_DRAW) {
-                int count = saveAndSetupCanvas(canvas);
-                clip(canvas, paint);
+        if (opacity > MIN_OPACITY_FOR_DRAW) {
+            int count = saveAndSetupCanvas(canvas);
+            clip(canvas, paint);
 
-                for (int i = 0; i < getChildCount(); i++) {
-                    RNSVGVirtualNode child = (RNSVGVirtualNode) getChildAt(i);
-                    child.setupDimensions(canvas);
-                    child.draw(canvas, paint, opacity);
+            for (int i = 0; i < getChildCount(); i++) {
+                RNSVGVirtualNode child = (RNSVGVirtualNode) getChildAt(i);
+                child.setupDimensions(canvas);
+                child.draw(canvas, paint, opacity);
 
-                    if (child.isTouchable()) {
-                        svg.enableTouchEvents();
-                    }
+                if (child.isTouchable()) {
+                    svg.enableTouchEvents();
                 }
-
-                restoreCanvas(canvas, count);
             }
 
-        } else {
-            svg.defineClipPath(getPath(canvas, paint), mAsClipPath);
+            restoreCanvas(canvas, count);
         }
     }
 
@@ -74,11 +58,6 @@ protected Path getPath(Canvas canvas, Paint paint) {
 
     @Override
     public int hitTest(Point point, View view) {
-
-        if (mAsClipPath != null) {
-            return -1;
-        }
-
         int viewTag = -1;
         for (int i = getChildCount() - 1; i >= 0; i--) {
             viewTag = ((RNSVGVirtualNode) getChildAt(i)).hitTest(point, ((ViewGroup) view).getChildAt(i));

android/src/main/java/com/horcrux/svg/RNSVGPathShadowNode.java

@@ -51,10 +51,12 @@ public class RNSVGPathShadowNode extends RNSVGVirtualNode {
 
     private static final int FILL_RULE_EVENODD = 0;
     private static final int FILL_RULE_NONZERO = 1;
+
     private @Nullable ReadableArray mStrokeColor;
     private @Nullable ReadableArray mFillColor;
     private @Nullable float[] mStrokeDasharray;
     private float mStrokeWidth = 1;
+    private float mStrokeMiterlimit = 4;
     private float mStrokeDashoffset = 0;
     private Paint.Cap mStrokeLinecap = Paint.Cap.ROUND;
     private Paint.Join mStrokeLinejoin = Paint.Join.ROUND;
@@ -126,6 +128,12 @@ public void setStrokeWidth(float strokeWidth) {
         markUpdated();
     }
 
+    @ReactProp(name = "strokeMiterlimit", defaultFloat = 4f)
+    public void setStrokeMiterlimit(float strokeMiterlimit) {
+        mStrokeMiterlimit = strokeMiterlimit;
+        markUpdated();
+    }
+
     @ReactProp(name = "strokeLinecap", defaultInt = CAP_ROUND)
     public void setStrokeLinecap(int strokeLinecap) {
         switch (strokeLinecap) {
@@ -185,8 +193,8 @@ public void draw(Canvas canvas, Paint paint, float opacity) {
             }
 
             restoreCanvas(canvas, count);
+            markUpdateSeen();
         }
-        markUpdateSeen();
     }
 
     private void setupPath() {
@@ -243,6 +251,7 @@ protected boolean setupStrokePaint(Paint paint, float opacity, @Nullable  RectF
         paint.setStyle(Paint.Style.STROKE);
         paint.setStrokeCap(mStrokeLinecap);
         paint.setStrokeJoin(mStrokeLinejoin);
+        paint.setStrokeMiter(mStrokeMiterlimit * mScale);
         paint.setStrokeWidth(mStrokeWidth * mScale);
         setupPaint(paint, opacity, mStrokeColor, box);
 

android/src/main/java/com/horcrux/svg/RNSVGRenderableViewManager.java

@@ -41,6 +41,7 @@ public class RNSVGRenderableViewManager extends ViewGroupManager<ViewGroup> {
     /* package */ static final String CLASS_ELLIPSE = "RNSVGEllipse";
     /* package */ static final String CLASS_LINE = "RNSVGLine";
     /* package */ static final String CLASS_RECT = "RNSVGRect";
+    /* package */ static final String CLASS_CLIP_PATH = "RNSVGClipPath";
 
     private final String mClassName;
 
@@ -78,6 +79,10 @@ public static RNSVGRenderableViewManager createRNSVGRectViewManager() {
         return new RNSVGRenderableViewManager(CLASS_RECT);
     }
 
+    public static RNSVGRenderableViewManager createRNSVGClipPathViewManager() {
+        return new RNSVGRenderableViewManager(CLASS_CLIP_PATH);
+    }
+
     private RNSVGRenderableViewManager(String className) {
         mClassName = className;
     }
@@ -114,6 +119,9 @@ public RNSVGVirtualNode createShadowNodeInstance() {
             case CLASS_IMAGE:
                 mVirtualNode = new RNSVGImageShadowNode();
                 break;
+            case CLASS_CLIP_PATH:
+                mVirtualNode = new RNSVGClipPathShadowNode();
+                break;
             default:
                 throw new IllegalStateException("Unexpected type " + mClassName);
         }
@@ -141,6 +149,8 @@ public Class<? extends RNSVGVirtualNode> getShadowNodeClass() {
                 return RNSVGTextShadowNode.class;
             case CLASS_IMAGE:
                 return RNSVGImageShadowNode.class;
+            case CLASS_CLIP_PATH:
+                return RNSVGClipPathShadowNode.class;
             default:
                 throw new IllegalStateException("Unexpected type " + mClassName);
         }

android/src/main/java/com/horcrux/svg/RNSVGTextShadowNode.java

@@ -73,29 +73,27 @@ public void setPath(@Nullable ReadableArray textPath) {
     public void draw(Canvas canvas, Paint paint, float opacity) {
 
         opacity *= mOpacity;
-        if (opacity <= MIN_OPACITY_FOR_DRAW) {
-            return;
-        }
+        if (opacity > MIN_OPACITY_FOR_DRAW) {
+            String text = formatText();
+            if (text == null) {
+                return;
+            }
 
-        String text = formatText();
-        if (text == null) {
-            return;
-        }
+            // only set up the canvas if we have something to draw
+            int count = saveAndSetupCanvas(canvas);
+            clip(canvas, paint);
+            RectF box = getBox(paint, text);
 
-        // only set up the canvas if we have something to draw
-        int count = saveAndSetupCanvas(canvas);
-        clip(canvas, paint);
-        RectF box = getBox(paint, text);
+            if (setupStrokePaint(paint, opacity, box)) {
+                drawText(canvas, paint, text);
+            }
+            if (setupFillPaint(paint, opacity, box)) {
+                drawText(canvas, paint, text);
+            }
 
-        if (setupStrokePaint(paint, opacity, box)) {
-            drawText(canvas, paint, text);
+            restoreCanvas(canvas, count);
+            markUpdateSeen();
         }
-        if (setupFillPaint(paint, opacity, box)) {
-            drawText(canvas, paint, text);
-        }
-
-        restoreCanvas(canvas, count);
-        markUpdateSeen();
     }
 
     private void drawText(Canvas canvas, Paint paint, String text) {

android/src/main/java/com/horcrux/svg/RNSvgPackage.java

@@ -33,6 +33,7 @@ public List<ViewManager> createViewManagers(ReactApplicationContext reactContext
             RNSVGRenderableViewManager.createRNSVGRectViewManager(),
             RNSVGRenderableViewManager.createRNSVGTextViewManager(),
             RNSVGRenderableViewManager.createRNSVGImageViewManager(),
+            RNSVGRenderableViewManager.createRNSVGClipPathViewManager(),
             new RNSVGSvgViewManager());
     }
 

elements/ClipPath.js

@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import {NativeGroup} from './G';
 import {set, remove} from '../lib/extract/extractClipping';
+import createNativeComponent from '../lib/createNativeComponent';
 
 class ClipPath extends Component{
     static displayName = 'ClipPath';
@@ -26,12 +27,13 @@ class ClipPath extends Component{
 
     render() {
         set(this.id, this.id);
-
-        return <NativeGroup
-            asClipPath={this.id}
-        >{this.props.children}</NativeGroup>;
+        return <RNSVGClipPath
+            name={this.id}
+        >{this.props.children}</RNSVGClipPath>;
     }
 }
 
+const RNSVGClipPath = createNativeComponent('RNSVGClipPath');
+
 export default ClipPath;
 

elements/Defs.js

@@ -12,6 +12,7 @@ class DefsItem extends Component{
     static propType = {
         visible: PropTypes.bool
     };
+
     static defaultProps = {
         visible: false
     };
@@ -75,16 +76,11 @@ class Defs extends Component{
     static Item = DefsItem;
     static Use = DefsUse;
 
-    shouldRender = false;
     getChildren = () => {
         return Children.map(this.props.children, child => {
             let {type} = child;
 
             if (type === LinearGradient || type === RadialGradient || type === ClipPath) {
-                if (type === ClipPath) {
-                    this.shouldRender = true;
-                }
-
                 return cloneElement(child, {
                     svgId: this.props.svgId
                 });
@@ -99,10 +95,7 @@ class Defs extends Component{
     };
 
     render() {
-        let children = this.getChildren();
-        return <NativeGroup opacity={this.shouldRender ? 1 : 0}>
-            {children}
-        </NativeGroup>;
+        return <NativeGroup>{this.getChildren()}</NativeGroup>;
     }
 }