fix line strokeLinecap bug #11

software-mansion · Apr 23, 2016 · 1741f63 · 1741f63
1 parent fb98db5
commit 1741f63
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/Example/examples/Line.js b/Example/examples/Line.js
@@ -26,6 +26,45 @@ class LineExample extends Component{
     }
 }
 
+class LineWithStrokeLinecap extends Component{
+    static title = 'Line';
+
+    render() {
+        return <Svg
+            height="100"
+            width="200"
+        >
+            <Line
+                x1="40"
+                y1="10"
+                x2="160"
+                y2="10"
+                stroke="red"
+                strokeWidth="10"
+                strokeLinecap="round"
+            />
+            <Line
+                x1="40"
+                y1="40"
+                x2="160"
+                y2="40"
+                stroke="red"
+                strokeWidth="10"
+                strokeLinecap="butt"
+            />
+            <Line
+                x1="40"
+                y1="80"
+                x2="160"
+                y2="80"
+                stroke="red"
+                strokeWidth="10"
+                strokeLinecap="square"
+            />
+        </Svg>;
+    }
+}
+
 const icon = <Svg
     height="20"
     width="20"
@@ -40,7 +79,7 @@ const icon = <Svg
     />
 </Svg>;
 
-const samples = [LineExample];
+const samples = [LineExample, LineWithStrokeLinecap];
 
 export {
     icon,

diff --git a/elements/Line.js b/elements/Line.js
@@ -14,18 +14,16 @@ class Line extends Component{
         x2: propType,
         y1: propType,
         y2: propType,
-        strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']),
-        strokeCap: PropTypes.oneOf(['butt', 'square', 'round'])
+        strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round'])
     };
 
     static getPath = (props) => (
-        `M${props.x1},${props.y1}L${props.x2},${props.y2}Z`
+        `M${props.x1},${props.y1} L${props.x2},${props.y2}`
     );
 
     render() {
         return <Path
             {...this.props}
-            ref="shape"
             d={Line.getPath(this.props)}
         />;
     }

diff --git a/lib/extract/extractStroke.js b/lib/extract/extractStroke.js
@@ -37,7 +37,6 @@ function strokeFilter(props, dimensions) {
         stroke = '#000';
     }
 
-
     // TODO: propTypes check
     return {
         stroke: patterns(stroke, +props.strokeOpacity, dimensions, props.svgId),