From 5008457ba6526d127f76c2f34d0dd148d81c1d8a Mon Sep 17 00:00:00 2001
From: Horcrux <master@horcrux.cn>
Date: Fri, 29 Apr 2016 21:26:04 +0800
Subject: [PATCH] fix percentage bug, add Svg element flex layout support

---
 Example/examples/Ellipse.js            |  4 +-
 Example/examples/Svg.js                | 56 ++++++++++++++++++++++++--
 elements/Svg.js                        | 24 ++++++-----
 ios/RNSVGShape.m                       |  6 +--
 ios/RNSVGSvgView.h                     |  1 -
 ios/RNSVGSvgView.m                     | 12 +++---
 ios/ViewManagers/RNSVGSvgViewManager.m |  2 +-
 7 files changed, 79 insertions(+), 26 deletions(-)

diff --git a/Example/examples/Ellipse.js b/Example/examples/Ellipse.js
index 315f3647..9391d57e 100644
--- a/Example/examples/Ellipse.js
+++ b/Example/examples/Ellipse.js
@@ -11,13 +11,13 @@ class EllipseExample extends Component{
     render() {
         return <Svg
             height="100"
-            width="110"
+            width="200"
         >
             <Ellipse
                 cx="50%"
                 cy="50%"
                 rx="45%"
-                ry="30%"
+                ry="40%"
                 stroke="purple"
                 strokeWidth="2"
                 fill="yellow"
diff --git a/Example/examples/Svg.js b/Example/examples/Svg.js
index d88865ea..c39e9532 100644
--- a/Example/examples/Svg.js
+++ b/Example/examples/Svg.js
@@ -1,11 +1,26 @@
 import React, {
-    Component
+    Component,
+    StyleSheet,
+    View
 } from 'react-native';
 
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        height: 100,
+        width: 200
+    },
+    svg: {
+        flex: 1,
+        alignSelf: 'stretch'
+    }
+});
+
 import Svg, {
     Circle,
     Rect,
-    Path
+    Path,
+    Line
 } from 'react-native-svg';
 
 class SvgExample extends Component{
@@ -83,6 +98,41 @@ class SvgViewbox extends Component{
     }
 }
 
+class SvgLayout extends Component{
+    static title = 'SVG with flex layout';
+    render() {
+        return <View style={styles.container}>
+            <Svg style={styles.svg}>
+                <Rect
+                    width="80%"
+                    height="80%"
+                    x="10%"
+                    y="10%"
+                    fill="purple"
+                    stroke="yellow"
+                    strokeWidth="4"
+                />
+                <Line
+                    x1="10%"
+                    y1="10%"
+                    x2="90%"
+                    y2="90%"
+                    stroke="yellow"
+                    strokeWidth="4"
+                />
+                <Line
+                    x1="10%"
+                    y1="90%"
+                    x2="90%"
+                    y2="10%"
+                    stroke="yellow"
+                    strokeWidth="4"
+                />
+            </Svg>
+        </View>;
+    }
+}
+
 const icon = <Svg
     height="20"
     width="20"
@@ -106,7 +156,7 @@ const icon = <Svg
     />
 </Svg>;
 
-const samples = [SvgExample, SvgOpacity, SvgViewbox];
+const samples = [SvgExample, SvgOpacity, SvgViewbox, SvgLayout];
 
 export {
     icon,
diff --git a/elements/Svg.js b/elements/Svg.js
index 58abee1b..45d2943c 100644
--- a/elements/Svg.js
+++ b/elements/Svg.js
@@ -42,25 +42,29 @@ class Svg extends Component{
     };
 
     measureInWindow = (...args) => {
-        this.refs.root.measureInWindow(...args);
+        this.root.measureInWindow(...args);
     };
 
     measure = (...args) => {
-        this.refs.root.measure(...args);
+        this.root.measure(...args);
     };
 
     measureLayout = (...args) => {
-        this.refs.root.measureLayout(...args);
+        this.root.measureLayout(...args);
     };
 
     setNativeProps = (...args) => {
-        this.refs.root.setNativeProps(...args);
+        this.root.setNativeProps(...args);
     };
 
     render() {
         let {props} = this;
         let opacity = +props.opacity;
-        let content = props.viewbox ? <ViewBox
+        let width = +props.width;
+        let height = +props.height;
+        let flexLayout = !isNaN(width) || !isNaN(height);
+
+        let content = (props.viewbox && !flexLayout) ? <ViewBox
             viewbox={props.viewbox}
             preserveAspectRatio={props.preserveAspectRatio}
             width={props.width}
@@ -69,18 +73,18 @@ class Svg extends Component{
             {this.getChildren()}
         </ViewBox> : this.getChildren();
 
-        let width = +props.width || 0;
-        let height = +props.height || 0;
-
         return (
             <NativeSvgView
-                ref="root"
+                ref={ele => this.root = ele}
                 style={[
                     props.style,
                     !isNaN(opacity) && {
                         opacity
                     },
-                    {width, height}
+                    !flexLayout && {
+                        width,
+                        height
+                    }
                 ]}
             >
                 {content}
diff --git a/ios/RNSVGShape.m b/ios/RNSVGShape.m
index 4c66ad89..38702d32 100644
--- a/ios/RNSVGShape.m
+++ b/ios/RNSVGShape.m
@@ -52,7 +52,7 @@
             // draw ellipse
             CGFloat cx = [self getActualProp:@"cx" relative:width];
             CGFloat cy = [self getActualProp:@"cy" relative:height];
-            CGFloat rx = [self getActualProp:@"rx" relative:height];
+            CGFloat rx = [self getActualProp:@"rx" relative:width];
             CGFloat ry = [self getActualProp:@"ry" relative:height];
             CGPathAddEllipseInRect(path, nil, CGRectMake(cx - rx, cy - ry, rx * 2, ry * 2));
             break;
@@ -60,9 +60,9 @@
         case 2:
         {
             // draw line
-            CGFloat x1 = [self getActualProp:@"x1" relative:height];
+            CGFloat x1 = [self getActualProp:@"x1" relative:width];
             CGFloat y1 = [self getActualProp:@"y1" relative:height];
-            CGFloat x2 = [self getActualProp:@"x2" relative:height];
+            CGFloat x2 = [self getActualProp:@"x2" relative:width];
             CGFloat y2 = [self getActualProp:@"y2" relative:height];
             CGPathMoveToPoint(path, nil, x1, y1);
             CGPathAddLineToPoint(path, nil, x2, y2);
diff --git a/ios/RNSVGSvgView.h b/ios/RNSVGSvgView.h
index b33f7287..bbf6460c 100644
--- a/ios/RNSVGSvgView.h
+++ b/ios/RNSVGSvgView.h
@@ -11,5 +11,4 @@
 #import "RNSVGContainer.h"
 
 @interface RNSVGSvgView : UIView <RNSVGContainer>
-
 @end
diff --git a/ios/RNSVGSvgView.m b/ios/RNSVGSvgView.m
index 053b84c9..b5bbbe6e 100644
--- a/ios/RNSVGSvgView.m
+++ b/ios/RNSVGSvgView.m
@@ -15,20 +15,20 @@
 
 - (void)invalidate
 {
-  [self setNeedsDisplay];
+    [self setNeedsDisplay];
 }
 
 - (void)drawRect:(CGRect)rect
 {
-  CGContextRef context = UIGraphicsGetCurrentContext();
-  for (RNSVGNode *node in self.subviews) {
-      [node renderTo:context];
-  }
+    CGContextRef context = UIGraphicsGetCurrentContext();
+    for (RNSVGNode *node in self.subviews) {
+        [node renderTo:context];
+    }
 }
 
 - (void)reactSetInheritedBackgroundColor:(UIColor *)inheritedBackgroundColor
 {
-  self.backgroundColor = inheritedBackgroundColor;
+    self.backgroundColor = inheritedBackgroundColor;
 }
 
 @end
diff --git a/ios/ViewManagers/RNSVGSvgViewManager.m b/ios/ViewManagers/RNSVGSvgViewManager.m
index 0b6a59f3..668ae5e8 100644
--- a/ios/ViewManagers/RNSVGSvgViewManager.m
+++ b/ios/ViewManagers/RNSVGSvgViewManager.m
@@ -16,7 +16,7 @@ RCT_EXPORT_MODULE()
 
 - (UIView *)view
 {
-  return [RNSVGSvgView new];
+    return [RNSVGSvgView new];
 }
 
 @end