replaced the height and width attributes of the svg element with the viewBox attribute, which takes in "minX minY width height" and is responsive
made the App component stateful (building the class with a constructor (super is required) and defining a this.state object)
defined the centerX and centerY attributes to the state values for them, so they can be updated later
created startDrag(), move(), and finishDrag() methods on the App component.
Now, the methods don't quite work properly. Try replacing the second two lines of startDrag() with the code in move() and it works except it doesn't drag. Still have to figure out how to pass the event through from the onMouseDown event to the move() method and handle the interval properly.
Take a look though, just to stay familiar with the code, and send me any questions you have, or give a shot at fixing it yourself. Talk to you soon!
Okay check out what I've done here:
replaced the height and width attributes of the svg element with the viewBox attribute, which takes in "minX minY width height" and is responsive
made the App component stateful (building the class with a constructor (super is required) and defining a this.state object)
defined the centerX and centerY attributes to the state values for them, so they can be updated later
created startDrag(), move(), and finishDrag() methods on the App component.
Now, the methods don't quite work properly. Try replacing the second two lines of startDrag() with the code in move() and it works except it doesn't drag. Still have to figure out how to pass the event through from the onMouseDown event to the move() method and handle the interval properly.
Take a look though, just to stay familiar with the code, and send me any questions you have, or give a shot at fixing it yourself. Talk to you soon!