Revert "change circle radius percentage calculation"

This reverts commit 99ab08db25.

Example/examples/Circle.js

@@ -11,12 +11,12 @@ class CircleExample extends Component{
     render() {
         return <Svg
             height="100"
-            width="140"
+            width="100"
         >
             <Circle
-                cx="50%"
+                cx="50"
-                cy="50%"
+                cy="50"
-                r="40%"
+                r="50"
                 fill="pink"
             />
         </Svg>;

Example/examples/Ellipse.js

@@ -14,10 +14,10 @@ class EllipseExample extends Component{
             width="110"
         >
             <Ellipse
-                cx="50%"
+                cx="55"
-                cy="50%"
+                cy="55"
-                rx="45%"
+                rx="50"
-                ry="30%"
+                ry="30"
                 stroke="purple"
                 strokeWidth="2"
                 fill="yellow"

Example/examples/Line.js

@@ -15,10 +15,10 @@ class LineExample extends Component{
             width="100"
         >
             <Line
-                x1="10%"
+                x1="0"
-                y1="10%"
+                y1="0"
-                x2="90%"
+                x2="100"
-                y2="90%"
+                y2="100"
                 stroke="red"
                 strokeWidth="2"
             />

Example/examples/Rect.js

@@ -14,10 +14,10 @@ class RectExample extends Component{
             height="60"
         >
             <Rect
-                x="5%"
+                x="25"
-                y="5%"
+                y="5"
-                width="90%"
+                width="150"
-                height="90%"
+                height="50"
                 fill="rgb(0,0,255)"
                 strokeWidth="3"
                 stroke="rgb(0,0,0)"

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)

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 = 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;
                 }
@@ -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;
             }

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 = [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;
         }

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];
 }