From 3794e3c95277335dbc55d8f5d53efd8a5c55d838 Mon Sep 17 00:00:00 2001
From: "Carter J. Bastian" <carter.bastian1@gmail.com>
Date: Sat, 4 Mar 2017 14:06:24 -0500
Subject: [PATCH] Implement circle shape option

---
 app/components/Diagram.js | 46 +++++++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/app/components/Diagram.js b/app/components/Diagram.js
index 20579cd..298c607 100644
--- a/app/components/Diagram.js
+++ b/app/components/Diagram.js
@@ -11,7 +11,7 @@ export default class Diagram extends Component {
     super (props);
     
     this.state = {
-      cirlces: [],  // Information needed to build a circle block
+      circles: [],  // Information needed to build a circle block
       squares: [], // Information needed to build a square block
       connections: [],  // Start and end IDs of connection points
     };
@@ -36,15 +36,29 @@ export default class Diagram extends Component {
     
     console.log(topLeftX);
     console.log(topLeftY);
-    // Add this (x,y) location as an object to the blocks list in state
-    let updatedBlocks = this.state.squares.slice();  // immutable lists in state
-    updatedBlocks.push({x: topLeftX, y:topLeftY});
+    if (this.props.shape == 'Rect') {
+      // Add this (x,y) location as an object to the blocks list in state
+      let updatedBlocks = this.state.squares.slice();  // immutable lists in state
+      updatedBlocks.push({x: topLeftX, y:topLeftY});
 
-    this.setState({
-      cirlces: this.state.circles,
-      squares: updatedBlocks,
-      connections: this.state.connections,
-    });
+      this.setState({
+        circles: this.state.circles,
+        squares: updatedBlocks,
+        connections: this.state.connections,
+      });
+    }
+    
+    if (this.props.shape == 'Circle') {
+      // Add this (x,y) location as an object to the blocks list in state
+      let updatedBlocks = this.state.circles.slice();  // immutable lists in state
+      updatedBlocks.push({x: topLeftX, y:topLeftY});
+
+      this.setState({
+        circles: updatedBlocks,
+        squares: this.state.squares,
+        connections: this.state.connections,
+      });
+    }
     
     console.log(this.props.shape);
   };
@@ -69,6 +83,20 @@ export default class Diagram extends Component {
                 )
               })
             }
+            {
+              this.state.circles.map(function(ele, pos) {
+                return (
+                  <Circle 
+                    key={pos} x={ele.x} y={ele.y} r={15}
+                    attr={{
+                      "stroke":"#f45642",
+                      "stroke-width":1,
+                      "fill":"#f45642"
+                    }}
+                  />
+                )
+              })
+            }
           </Set>
         </Paper>
         <div></div>