Avoid unnecessary state update by Graph focus before blurring

Author: magjac

src/Graph.js

@@ -259,12 +259,12 @@ class Graph extends React.Component {
   }
 
   handleClickDiv(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
     event.stopPropagation();
     this.unSelectComponents();
-    this.props.onFocus();
   }
 
   handleKeyDownDocument(d, i, nodes) {
@@ -347,6 +347,7 @@ class Graph extends React.Component {
   }
 
   handleClickNode(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
@@ -355,10 +356,10 @@ class Graph extends React.Component {
       let extendSelection = event.ctrlKey || event.shiftKey;
       this.selectComponents(d3_select(nodes[i]), extendSelection);
     }
-    this.props.onFocus();
   }
 
   handleDblClickNode(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
@@ -375,10 +376,10 @@ class Graph extends React.Component {
       this.props.onTextChange(this.dotGraph.dotSrc);
     }
     this.isDrawingEdge = false;
-    this.props.onFocus();
   }
 
   handleRightClickNode(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
@@ -397,39 +398,37 @@ class Graph extends React.Component {
     this.graphviz
       .drawEdge(x0, y0, x0, y0, this.latestEdgeAttributes);
     this.isDrawingEdge = true;
-    this.props.onFocus();
   }
 
   handleClickEdge(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
     event.stopPropagation();
     let extendSelection = event.ctrlKey || event.shiftKey;
     this.selectComponents(d3_select(nodes[i]), extendSelection);
-    this.props.onFocus();
   }
 
   handleRightClickDiv(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     event.preventDefault();
     event.stopPropagation();
     this.unSelectComponents();
-    this.props.onFocus();
   }
 
   handleMouseDownSvg(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     if (event.which !== 1) {
-      this.props.onFocus();
       return;
     }
     event.preventDefault();
     event.stopPropagation();
     if (this.selectArea) {
-      this.props.onFocus();
       return;
     }
     var [x0, y0] = d3_mouse(this.graph0.node());
@@ -444,7 +443,6 @@ class Graph extends React.Component {
       .attr("stroke", '#0000dd')
       .style('stroke-width', 0.5)
       .style('fill-opacity', 0.3);
-    this.props.onFocus();
   }
 
   handleMouseMoveSvg(d, i, nodes) {
@@ -467,6 +465,7 @@ class Graph extends React.Component {
   }
 
   handleMouseUpSvg(d, i, nodes) {
+    this.props.onFocus();
     document.activeElement.blur();
     var event = d3_event;
     if (event.which === 1 && this.selectArea) {
@@ -481,7 +480,6 @@ class Graph extends React.Component {
       let height = Math.abs(y1 - y0);
       if (width === 0 && height === 0) {
         this.selectArea = null;
-        this.props.onFocus();
         return;
       }
       let components = this.graph0.selectAll('.node,.edge');
@@ -505,7 +503,6 @@ class Graph extends React.Component {
         this.insertNodeWithLatestAttributes(x0, y0);
       }
     }
-    this.props.onFocus();
   }
 
   selectComponents(components, extendSelection=false) {