From f717d8bd93cd5754bc4d5d86400f10136c732dcf Mon Sep 17 00:00:00 2001
From: Horcrux <master@horcrux.cn>
Date: Wed, 27 Apr 2016 16:49:10 +0800
Subject: [PATCH] Revert "change circle radius  percentage calculation"

This reverts commit 99ab08db25fa6945ef4e56cd9f37f03594e43a7a.
---
 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, 21 insertions(+), 49 deletions(-)

diff --git a/Example/examples/Circle.js b/Example/examples/Circle.js
index 0de66801..25fc8600 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="140"
+            width="100"
         >
             <Circle
-                cx="50%"
-                cy="50%"
-                r="40%"
+                cx="50"
+                cy="50"
+                r="50"
                 fill="pink"
             />
         </Svg>;
diff --git a/Example/examples/Ellipse.js b/Example/examples/Ellipse.js
index 315f3647..37e0e4a8 100644
--- a/Example/examples/Ellipse.js
+++ b/Example/examples/Ellipse.js
@@ -14,10 +14,10 @@ class EllipseExample extends Component{
             width="110"
         >
             <Ellipse
-                cx="50%"
-                cy="50%"
-                rx="45%"
-                ry="30%"
+                cx="55"
+                cy="55"
+                rx="50"
+                ry="30"
                 stroke="purple"
                 strokeWidth="2"
                 fill="yellow"
diff --git a/Example/examples/Line.js b/Example/examples/Line.js
index 20e9a940..096e0b6d 100644
--- a/Example/examples/Line.js
+++ b/Example/examples/Line.js
@@ -15,10 +15,10 @@ class LineExample extends Component{
             width="100"
         >
             <Line
-                x1="10%"
-                y1="10%"
-                x2="90%"
-                y2="90%"
+                x1="0"
+                y1="0"
+                x2="100"
+                y2="100"
                 stroke="red"
                 strokeWidth="2"
             />
diff --git a/Example/examples/Rect.js b/Example/examples/Rect.js
index 59638686..f732e448 100644
--- a/Example/examples/Rect.js
+++ b/Example/examples/Rect.js
@@ -14,10 +14,10 @@ class RectExample extends Component{
             height="60"
         >
             <Rect
-                x="5%"
-                y="5%"
-                width="90%"
-                height="90%"
+                x="25"
+                y="5"
+                width="150"
+                height="50"
                 fill="rgb(0,0,255)"
                 strokeWidth="3"
                 stroke="rgb(0,0,0)"
diff --git a/README.md b/README.md
index b057d450..a4b2ae27 100644
--- a/README.md
+++ b/README.md
@@ -568,6 +568,8 @@ 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 aa08454a..4962a60e 100644
--- a/android/src/main/java/com/horcrux/svg/RNSVGShapeShadowNode.java
+++ b/android/src/main/java/com/horcrux/svg/RNSVGShapeShadowNode.java
@@ -14,7 +14,6 @@ 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;
@@ -52,18 +51,7 @@ public class RNSVGShapeShadowNode extends RNSVGPathShadowNode {
                     // TODO:
                     float cx = getActualProp("cx", width);
                     float cy = getActualProp("cy", height);
-
-                    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;
-                    }
-
+                    float r = getActualProp("r", width);
                     mPath.addCircle(cx, cy, r, Path.Direction.CW);
                     break;
                 }
@@ -132,7 +120,7 @@ public class RNSVGShapeShadowNode extends RNSVGPathShadowNode {
             ReadableMap value = mShape.getMap(name);
 
             if (value.getBoolean("percentage")) {
-                return (float)value.getDouble("value") * relative;
+                return (float)value.getDouble("value") * relative * mScale;
             } else {
                 return (float)value.getDouble("value") * mScale;
             }
diff --git a/ios/RNSVGShape.m b/ios/RNSVGShape.m
index 6137d2e6..2b30bff5 100644
--- a/ios/RNSVGShape.m
+++ b/ios/RNSVGShape.m
@@ -30,20 +30,7 @@
             // draw circle
             CGFloat cx = [self getActualProp:@"cx" relative:width];
             CGFloat cy = [self getActualProp:@"cy" 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;
-            }
-            
+            CGFloat r = [self getActualProp:@"r" relative:height];
             CGPathAddArc(path, nil, cx, cy, r, -M_PI, M_PI, YES);
             break;
         }
diff --git a/lib/percentToFloat.js b/lib/percentToFloat.js
index d0765d7b..0e9cffed 100644
--- a/lib/percentToFloat.js
+++ b/lib/percentToFloat.js
@@ -1,10 +1,5 @@
 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];
 }