From 99ab08db25fa6945ef4e56cd9f37f03594e43a7a Mon Sep 17 00:00:00 2001
From: Horcrux <master@horcrux.cn>
Date: Wed, 27 Apr 2016 16:45:58 +0800
Subject: [PATCH] change circle radius  percentage calculation

Change circle radius  percentage calculation.
Add example for percentage props for shape.
Remove unused document ref
---
 Example/examples/Circle.js                       |  8 ++++----
 Example/examples/Ellipse.js                      |  8 ++++----
 Example/examples/Line.js                         |  8 ++++----
 Example/examples/Rect.js                         |  8 ++++----
 README.md                                        |  2 --
 .../com/horcrux/svg/RNSVGShapeShadowNode.java    | 16 ++++++++++++++--
 ios/RNSVGShape.m                                 | 15 ++++++++++++++-
 lib/percentToFloat.js                            |  5 +++++
 8 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/Example/examples/Circle.js b/Example/examples/Circle.js
index 25fc8600..0de66801 100644
--- a/Example/examples/Circle.js
+++ b/Example/examples/Circle.js
@@ -11,12 +11,12 @@ class CircleExample extends Component{
     render() {
         return <Svg
             height="100"
-            width="100"
+            width="140"
         >
             <Circle
-                cx="50"
-                cy="50"
-                r="50"
+                cx="50%"
+                cy="50%"
+                r="40%"
                 fill="pink"
             />
         </Svg>;
diff --git a/Example/examples/Ellipse.js b/Example/examples/Ellipse.js
index 37e0e4a8..315f3647 100644
--- a/Example/examples/Ellipse.js
+++ b/Example/examples/Ellipse.js
@@ -14,10 +14,10 @@ class EllipseExample extends Component{
             width="110"
         >
             <Ellipse
-                cx="55"
-                cy="55"
-                rx="50"
-                ry="30"
+                cx="50%"
+                cy="50%"
+                rx="45%"
+                ry="30%"
                 stroke="purple"
                 strokeWidth="2"
                 fill="yellow"
diff --git a/Example/examples/Line.js b/Example/examples/Line.js
index 096e0b6d..20e9a940 100644
--- a/Example/examples/Line.js
+++ b/Example/examples/Line.js
@@ -15,10 +15,10 @@ class LineExample extends Component{
             width="100"
         >
             <Line
-                x1="0"
-                y1="0"
-                x2="100"
-                y2="100"
+                x1="10%"
+                y1="10%"
+                x2="90%"
+                y2="90%"
                 stroke="red"
                 strokeWidth="2"
             />
diff --git a/Example/examples/Rect.js b/Example/examples/Rect.js
index f732e448..59638686 100644
--- a/Example/examples/Rect.js
+++ b/Example/examples/Rect.js
@@ -14,10 +14,10 @@ class RectExample extends Component{
             height="60"
         >
             <Rect
-                x="25"
-                y="5"
-                width="150"
-                height="50"
+                x="5%"
+                y="5%"
+                width="90%"
+                height="90%"
                 fill="rgb(0,0,255)"
                 strokeWidth="3"
                 stroke="rgb(0,0,0)"
diff --git a/README.md b/README.md
index a4b2ae27..b057d450 100644
--- a/README.md
+++ b/README.md
@@ -568,8 +568,6 @@ npm install
 
 #### Thanks:
 
-* [SVG bounding Algorithm](https://github.com/icons8/svg-path-bounding-box)
-* [Circle drawing with svg arc path](http://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path/10477334#10477334)
 * [w3schools.com SVG Tutorial](http://www.w3schools.com/svg/)
 * [SVG Tutorial](http://tutorials.jenkov.com/svg/index.html)
 * [MDN](https://developer.mozilla.org/en/docs/Web/SVG)
diff --git a/android/src/main/java/com/horcrux/svg/RNSVGShapeShadowNode.java b/android/src/main/java/com/horcrux/svg/RNSVGShapeShadowNode.java
index 4962a60e..aa08454a 100644
--- a/android/src/main/java/com/horcrux/svg/RNSVGShapeShadowNode.java
+++ b/android/src/main/java/com/horcrux/svg/RNSVGShapeShadowNode.java
@@ -14,6 +14,7 @@ import android.graphics.Paint;
 import android.graphics.Path;
 import android.graphics.Rect;
 import android.graphics.RectF;
+import android.util.Log;
 
 import com.facebook.common.logging.FLog;
 import com.facebook.react.bridge.ReadableMap;
@@ -51,7 +52,18 @@ public class RNSVGShapeShadowNode extends RNSVGPathShadowNode {
                     // TODO:
                     float cx = getActualProp("cx", width);
                     float cy = getActualProp("cy", height);
-                    float r = getActualProp("r", width);
+
+                    float r;
+                    ReadableMap value = mShape.getMap("r");
+                    if (value.getBoolean("percentage")) {
+                        float percent = (float)value.getDouble("value");
+                        float powX = (float)Math.pow((width * percent), 2);
+                        float powY = (float)Math.pow((height*percent), 2);
+                        r = (float)Math.sqrt(powX + powY) / (float)Math.sqrt(2);
+                    } else {
+                        r =  (float)value.getDouble("value") * mScale;
+                    }
+
                     mPath.addCircle(cx, cy, r, Path.Direction.CW);
                     break;
                 }
@@ -120,7 +132,7 @@ public class RNSVGShapeShadowNode extends RNSVGPathShadowNode {
             ReadableMap value = mShape.getMap(name);
 
             if (value.getBoolean("percentage")) {
-                return (float)value.getDouble("value") * relative * mScale;
+                return (float)value.getDouble("value") * relative;
             } else {
                 return (float)value.getDouble("value") * mScale;
             }
diff --git a/ios/RNSVGShape.m b/ios/RNSVGShape.m
index 2b30bff5..6137d2e6 100644
--- a/ios/RNSVGShape.m
+++ b/ios/RNSVGShape.m
@@ -30,7 +30,20 @@
             // draw circle
             CGFloat cx = [self getActualProp:@"cx" relative:width];
             CGFloat cy = [self getActualProp:@"cy" relative:height];
-            CGFloat r = [self getActualProp:@"r" relative:height];
+            
+            
+            CGFloat r;
+            // radius in percentage calculate formula:
+            // radius = sqrt(pow((width*percent), 2) + pow((height*percent), 2)) / sqrt(2)
+            NSDictionary *prop = [self.shape objectForKey:@"r"];
+            CGFloat value = [[prop objectForKey:@"value"] floatValue];
+            if ([[prop objectForKey:@"percentage"] integerValue] == 1) {
+                r = sqrt(pow((width * value), 2) + pow((height * value), 2)) / sqrt(2);
+
+            } else {
+                r = value;
+            }
+            
             CGPathAddArc(path, nil, cx, cy, r, -M_PI, M_PI, YES);
             break;
         }
diff --git a/lib/percentToFloat.js b/lib/percentToFloat.js
index 0e9cffed..d0765d7b 100644
--- a/lib/percentToFloat.js
+++ b/lib/percentToFloat.js
@@ -1,5 +1,10 @@
 let percentReg = /^(\-?\d+(?:\.\d+)?)(%?)$/;
 export default function (percent) {
     let matched = percent.match(percentReg);
+    if (!matched) {
+        console.warn(`\`${percent}\` is not a valid number or percentage string.`);
+        return 0;
+    }
+
     return matched[2] ? matched[1] / 100 : +matched[1];
 }