[js][tc] refactor out old "componentWillReceiveProps" lifecycle func

conda/js/src/components/toolchain/GraphicalEditor.jsx

@@ -134,19 +134,22 @@ export default class GraphicalEditor extends React.PureComponent<Props, State> {
 
 	// initializes d3 behaviours (most SVG interactions)
 	componentDidMount = () => {
-		if(this.props.interactable){
-			this.initD3Drag();
-			this.initD3Connections();
-			this.initD3AreaSelect();
-			this.initD3MouseMovement();
-		}
+		this.initD3Behaviours();
 		this.fitToToolchain(this.getLocationMap());
 		//this.scrollToMiddle();
 	}
 
-	// initalize all the d3 behaviours again (they overwrite older ones)
-	componentWillReceiveProps = (nextProps: Props) => {
-		if(nextProps.interactable){
+	// initalize all the d3 behaviours again if the tc changed,
+	// so new blocks have the d3 stuff and old blocks are removed
+	// (they overwrite older ones)
+	componentDidUpdate = (prevProps: Props, prevState: State, snapshot: any) => {
+		if(prevProps !== this.props){
+			this.initD3Behaviours();
+		}
+	}
+
+	initD3Behaviours = () => {
+		if(this.props.interactable){
 			this.initD3Drag();
 			this.initD3Connections();
 			this.initD3AreaSelect();
@@ -397,7 +400,6 @@ export default class GraphicalEditor extends React.PureComponent<Props, State> {
 				return;
 			const that = this;
 			// currently debouncing isnt necessary perf-wise
-			//let debouceTimeLast = 0;
 			let startX = 0;
 			let startY = 0;
 			let dx = 0;
@@ -406,11 +408,6 @@ export default class GraphicalEditor extends React.PureComponent<Props, State> {
 			let my = 0;
 			// the event handler for all the drag events in between the start/end
 			function dragged(d) {
-				/*
-				if(Date.now() - debouceTimeLast < 10)
-					return;
-					*/
-
 				// keep track of the change to mouse location across drag events
 				dx += d3.event.dx;
 				dy += d3.event.dy;
@@ -434,8 +431,6 @@ export default class GraphicalEditor extends React.PureComponent<Props, State> {
 				// reset the grid movement since we made it already
 				mx = 0;
 				my = 0;
-
-				//debouceTimeLast = Date.now();
 			}
 
 			// when the user starts dragging, create the placeholder block