Add onClick handler to the canvas, for use in eg. unselecting nodes (#113)

* Add onClick handler to the canvas, for use in eg. unselecting nodes

* Discard sandbox/rd3g.sandbox.bundle* changes

* Update jsdoc to reflect that onClick event is an object, not a string

* Uppercase Object in JSDoc

* Add onClickGraph to README

* Added onClickGraph documentation to JSDocs of Graph component

Author: MathiasKoch

README.md

@@ -65,6 +65,10 @@ const myConfig = {
 };
 
 // graph event callbacks
+const onClickGraph = function() {
+    window.alert(`Clicked the graph background`);
+};
+
 const onClickNode = function(nodeId) {
     window.alert(`Clicked node ${nodeId}`);
 };
@@ -94,6 +98,7 @@ const onMouseOutLink = function(source, target) {
     data={data}
     config={myConfig}
     onClickNode={onClickNode}
+    onClickGraph={onClickGraph}
     onClickLink={onClickLink}
     onMouseOverNode={onMouseOverNode}
     onMouseOutNode={onMouseOutNode}

sandbox/Sandbox.jsx

@@ -50,6 +50,8 @@ export default class Sandbox extends React.Component {
         };
     }
 
+    onClickGraph = () => console.info(`Clicked the graph`);
+
     onClickNode = id => !this.state.config.collapsible && window.alert(`Clicked node ${id}`);
 
     onClickLink = (source, target) => window.alert(`Clicked link between ${source} and ${target}`);
@@ -294,6 +296,7 @@ export default class Sandbox extends React.Component {
             data,
             config: this.state.config,
             onClickNode: this.onClickNode,
+            onClickGraph: this.onClickGraph,
             onClickLink: this.onClickLink,
             onMouseOverNode: this.onMouseOverNode,
             onMouseOutNode: this.onMouseOutNode,

src/components/graph/Graph.jsx

@@ -49,6 +49,10 @@ import utils from '../../utils';
  * };
  *
  * // graph event callbacks
+ * const onClickGraph = function() {
+ *      window.alert('Clicked the graph background');
+ * };
+ *
  * const onClickNode = function(nodeId) {
  *      window.alert('Clicked node ${nodeId}');
  * };
@@ -77,6 +81,7 @@ import utils from '../../utils';
  *      id='graph-id' // id is mandatory, if no id is defined rd3g will throw an error
  *      data={data}
  *      config={myConfig}
+ *      onClickGraph={onClickGraph}
  *      onClickNode={onClickNode}
  *      onClickLink={onClickLink}
  *      onMouseOverNode={onMouseOverNode}
@@ -378,6 +383,23 @@ export default class Graph extends React.Component {
         this.props.onClickNode && this.props.onClickNode(clickedNodeId);
     };
 
+    /**
+     * Calls the callback passed to the component.
+     * @param  {Object} e - The event of onClick handler.
+     * @returns {undefined}
+     */
+    onClickGraph = e => {
+        // Only trigger the graph onClickHandler, if not clicked a node or link.
+        // toUpperCase() is added as a precaution, as the documentation says tagName should always
+        // return in UPPERCASE, but chrome returns lowercase
+        if (
+            e.target.tagName.toUpperCase() === 'SVG' &&
+            e.target.attributes.name.value === `svg-container-${this.state.id}`
+        ) {
+            this.props.onClickGraph && this.props.onClickGraph();
+        }
+    };
+
     render() {
         const { nodes, links } = graphRenderer.buildGraph(
             this.state.nodes,
@@ -406,7 +428,7 @@ export default class Graph extends React.Component {
 
         return (
             <div id={`${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`}>
-                <svg style={svgStyle}>
+                <svg name={`svg-container-${this.state.id}`} style={svgStyle} onClick={this.onClickGraph}>
                     <g id={`${this.state.id}-${CONST.GRAPH_CONTAINER_ID}`}>
                         {links}
                         {nodes}

test/snapshot/graph/__snapshots__/graph.snapshot.test.js.snap

@@ -5,6 +5,8 @@ exports[`Snapshot - Graph Component should match snapshot 1`] = `
   id="graphId-graph-wrapper"
 >
   <svg
+    name="svg-container-graphId"
+    onClick={[Function]}
     style={
       Object {
         "height": 600,