Add size as App state and Diagram props

dali-lab · Mar 5, 2017 · 045daa8 · 045daa8
1 parent 0078b81
commit 045daa8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/app/components/Canvas.js b/app/components/Canvas.js
@@ -15,7 +15,7 @@ export default class Canvas extends Component {
     return (
       <div style={{position: 'absolute', width: '100%', height: '90%', margin: 0, padding: 0, top: '10%'}}>
         <DotGrid />
-        <Diagram shape={this.props.shape}/>
+        <Diagram shape={this.props.shape} size={this.props.size}/>
       </div>);
   }
 }
diff --git a/app/components/Diagram.js b/app/components/Diagram.js
@@ -69,7 +69,7 @@ export default class Diagram extends Component {
 
       // 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});
+      updatedBlocks.push({x: topLeftX, y:topLeftY, size:this.props.size});
 
       this.setState({
         circles: this.state.circles,
@@ -81,7 +81,8 @@ export default class Diagram extends Component {
     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});
+      // Circle size is measured in radius: divide by two
+      updatedBlocks.push({x: topLeftX, y:topLeftY, size:(this.props.size / 2)});
 
       this.setState({
         circles: updatedBlocks,
@@ -103,7 +104,7 @@ export default class Diagram extends Component {
               this.state.squares.map(function(ele, pos) {
                 return (
                   <Rect 
-                    key={pos} x={ele.x} y={ele.y} width={30} height={30}
+                    key={pos} x={ele.x} y={ele.y} width={ele.size} height={ele.size}
                     attr={{
                       "stroke":"#f45642",
                       "stroke-width":1,
@@ -117,7 +118,7 @@ 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}
+                    key={pos} x={ele.x} y={ele.y} r={ele.size}
                     attr={{
                       "stroke":"#f45642",
                       "stroke-width":1,

diff --git a/app/containers/App.js b/app/containers/App.js
@@ -16,6 +16,7 @@ export default class App extends Component {
 
     this.state = {
       shape: 'Rect',
+      size: 30,
     };
 
     this.onShapeOptionClick = this.onShapeOptionClick.bind(this);
@@ -27,9 +28,15 @@ export default class App extends Component {
     console.log("Before: This.state: %s\n", this.state.shape);
 
     if (component.props.option == 'Rect') {
-      this.setState({shape: 'Rect'});
+      this.setState({
+        shape: 'Rect',
+        size: this.state.size,
+      });
     } else if (component.props.option == 'Circle') {
-      this.setState({shape: 'Circle'});
+      this.setState({
+        shape: 'Circle',
+        size: this.state.size,
+      });
     }
 
     console.log("Handling Shape Option Click!\n");
@@ -39,7 +46,7 @@ export default class App extends Component {
     return (
       <div style={{position: 'absolute', width: '100%', height: '100%', margin: 0, padding: 0}}>
         <ShapeBar onShapeOptionClick={this.onShapeOptionClick} shape={this.state.shape}/>
-        <Canvas shape={this.state.shape}/>
+        <Canvas shape={this.state.shape} size={this.state.size}/>
       </div>);
   }
 }