Feature/right clicking (#124)

* Added the ability to right click on nodes and links. * Updating Readme
danielcaldas · Oct 6, 2018 · 614bcf1 · 614bcf1
1 parent 6c1ebce
commit 614bcf1
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -73,6 +73,10 @@ const onClickNode = function(nodeId) {
     window.alert(`Clicked node ${nodeId}`);
 };
 
+const onRightClickNode = function(event, nodeId) {
+    window.alert(`Right clicked node ${nodeId}`);
+};
+
 const onMouseOverNode = function(nodeId) {
     window.alert(`Mouse over node ${nodeId}`);
 };
@@ -85,6 +89,10 @@ const onClickLink = function(source, target) {
     window.alert(`Clicked link between ${source} and ${target}`);
 };
 
+const onRightClickLink = function(event, source, target) {
+    window.alert(`Right clicked link between ${source} and ${target}`);
+};
+
 const onMouseOverLink = function(source, target) {
     window.alert(`Mouse over in link between ${source} and ${target}`);
 };
@@ -98,8 +106,10 @@ const onMouseOutLink = function(source, target) {
     data={data}
     config={myConfig}
     onClickNode={onClickNode}
+    onRightClickNode={onRightClickNode}
     onClickGraph={onClickGraph}
     onClickLink={onClickLink}
+    onRightClickLink={onRightClickLink}
     onMouseOverNode={onMouseOverNode}
     onMouseOutNode={onMouseOutNode}
     onMouseOverLink={onMouseOverLink}

diff --git a/src/components/graph/Graph.jsx b/src/components/graph/Graph.jsx
@@ -57,6 +57,10 @@ import utils from '../../utils';
  *      window.alert('Clicked node ${nodeId}');
  * };
  *
+ * const onRightClickNode = function(event, nodeId) {
+ *      window.alert('Right clicked node ${nodeId}');
+ * };
+ *
  * const onMouseOverNode = function(nodeId) {
  *      window.alert(`Mouse over node ${nodeId}`);
  * };
@@ -69,6 +73,10 @@ import utils from '../../utils';
  *      window.alert(`Clicked link between ${source} and ${target}`);
  * };
  *
+ * const onRightClickLink = function(event, source, target) {
+ *      window.alert('Right clicked link between ${source} and ${target}');
+ * };
+ *
  * const onMouseOverLink = function(source, target) {
  *      window.alert(`Mouse over in link between ${source} and ${target}`);
  * };
@@ -83,7 +91,9 @@ import utils from '../../utils';
  *      config={myConfig}
  *      onClickGraph={onClickGraph}
  *      onClickNode={onClickNode}
+ *      onRightClickNode={onRightClickNode}
  *      onClickLink={onClickLink}
+ *      onRightClickLink={onRightClickLink}
  *      onMouseOverNode={onMouseOverNode}
  *      onMouseOutNode={onMouseOutNode}
  *      onMouseOverLink={onMouseOverLink}
@@ -383,6 +393,16 @@ export default class Graph extends React.Component {
         this.props.onClickNode && this.props.onClickNode(clickedNodeId);
     };
 
+    /**
+     * Calls the callback passed to the component.
+     * @param {Object} event - the event object generated by the event.
+     * @param  {string} clickedNodeId - The id of the node where the click was performed.
+     * @returns {undefined}
+     */
+    onRightClickNode = (event, clickedNodeId) => {
+        this.props.onRightClickNode && this.props.onRightClickNode(event, clickedNodeId);
+    };
+
     /**
      * Calls the callback passed to the component.
      * @param  {Object} e - The event of onClick handler.
@@ -405,13 +425,15 @@ export default class Graph extends React.Component {
             this.state.nodes,
             {
                 onClickNode: this.onClickNode,
+                onRightClickNode: this.onRightClickNode,
                 onMouseOverNode: this.onMouseOverNode,
                 onMouseOut: this.onMouseOutNode
             },
             this.state.d3Links,
             this.state.links,
             {
                 onClickLink: this.props.onClickLink,
+                onRightClickLink: this.onRightClickLink,
                 onMouseOverLink: this.onMouseOverLink,
                 onMouseOutLink: this.onMouseOutLink
             },

diff --git a/src/components/graph/graph.helper.js b/src/components/graph/graph.helper.js
@@ -288,6 +288,7 @@ function buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNo
         className: CONST.LINK_CLASS_NAME,
         opacity,
         onClickLink: linkCallbacks.onClickLink,
+        onRightClickLink: linkCallbacks.onRightClickLink,
         onMouseOverLink: linkCallbacks.onMouseOverLink,
         onMouseOutLink: linkCallbacks.onMouseOutLink
     };
@@ -344,6 +345,7 @@ function buildNodeProps(node, config, nodeCallbacks = {}, highlightedNode, highl
         id: node.id,
         label: node[config.node.labelProperty] || node.id,
         onClickNode: nodeCallbacks.onClickNode,
+        onRightClickNode: nodeCallbacks.onRightClickNode,
         onMouseOverNode: nodeCallbacks.onMouseOverNode,
         onMouseOut: nodeCallbacks.onMouseOut,
         opacity,

diff --git a/src/components/link/Link.jsx b/src/components/link/Link.jsx
@@ -7,6 +7,10 @@ import React from 'react';
  *      window.alert(`Clicked link between ${source} and ${target}`);
  * };
  *
+ * const onRightClickLink = function(event, source, target) {
+ *      window.alert(`Right clicked link between ${source} and ${target}`);
+ * };
+ *
  * const onMouseOverLink = function(source, target) {
  *      window.alert(`Mouse over in link between ${source} and ${target}`);
  * };
@@ -29,6 +33,7 @@ import React from 'react';
  *     opacity=1
  *     mouseCursor='pointer'
  *     onClickLink={onClickLink}
+ *     onRightClickLink={onRightClickLink}
  *     onMouseOverLink={onMouseOverLink}
  *     onMouseOutLink={onMouseOutLink} />
  */
@@ -39,6 +44,15 @@ export default class Link extends React.Component {
      */
     handleOnClickLink = () => this.props.onClickLink && this.props.onClickLink(this.props.source, this.props.target);
 
+    /**
+     * Handle link right click event.
+     * @param {Object} event - the event object
+     * @returns {undefined}
+     */
+    handleOnRightClickLink = event => {
+        this.props.onRightClickLink && this.props.onRightClickLink(event, this.props.source, this.props.target);
+    };
+
     /**
      * Handle mouse over link event.
      * @returns {undefined}
@@ -66,6 +80,7 @@ export default class Link extends React.Component {
             className: this.props.className,
             d: this.props.d,
             onClick: this.handleOnClickLink,
+            onContextMenu: this.handleOnRightClickLink,
             onMouseOut: this.handleOnMouseOutLink,
             onMouseOver: this.handleOnMouseOverLink,
             style: lineStyle,

diff --git a/src/components/node/Node.jsx b/src/components/node/Node.jsx
@@ -11,6 +11,10 @@ import nodeHelper from './node.helper';
  *      window.alert('Clicked node', nodeId);
  * };
  *
+ * const onRightClickNode = function(event, nodeId) {
+ *      window.alert('Right clicked node', nodeId);
+ * }
+ *
  * const onMouseOverNode = function(nodeId) {
  *      window.alert('Mouse over node', nodeId);
  * };
@@ -39,6 +43,7 @@ import nodeHelper from './node.helper';
  *     viewGenerator=(node) => <CustomComponent node={node} />
  *     className='node'
  *     onClickNode={onClickNode}
+ *     onRightClickNode={onRightClickNode}
  *     onMouseOverNode={onMouseOverNode}
  *     onMouseOutNode={onMouseOutNode} />
  */
@@ -49,6 +54,13 @@ export default class Node extends React.Component {
      */
     handleOnClickNode = () => this.props.onClickNode && this.props.onClickNode(this.props.id);
 
+    /**
+     * Handle right click on the node.
+     * @param {Object} event - the event object
+     * @returns {undefined}
+     */
+    handleOnRightClickNode = event => this.props.onRightClickNode && this.props.onClickNode(event, this.props.id);
+
     /**
      * Handle mouse over node event.
      * @returns {undefined}
@@ -65,6 +77,7 @@ export default class Node extends React.Component {
         const nodeProps = {
             cursor: this.props.cursor,
             onClick: this.handleOnClickNode,
+            onContextMenu: this.handleOnRightClickNode,
             onMouseOut: this.handleOnMouseOutNode,
             onMouseOver: this.handleOnMouseOverNode,
             opacity: this.props.opacity

diff --git a/test/component/graph/graph.helper.test.js b/test/component/graph/graph.helper.test.js
@@ -114,6 +114,7 @@ describe('Graph Helper', () => {
                     id: 'id',
                     label: 'id',
                     onClickNode: undefined,
+                    onRightClickNode: undefined,
                     onMouseOut: undefined,
                     onMouseOverNode: undefined,
                     opacity: 1,
@@ -159,6 +160,7 @@ describe('Graph Helper', () => {
                         id: 'id',
                         label: 'id',
                         onClickNode: undefined,
+                        onRightClickNode: undefined,
                         onMouseOut: undefined,
                         onMouseOverNode: undefined,
                         opacity: undefined,
@@ -203,6 +205,7 @@ describe('Graph Helper', () => {
                         id: 'id',
                         label: 'id',
                         onClickNode: undefined,
+                        onRightClickNode: undefined,
                         onMouseOut: undefined,
                         onMouseOverNode: undefined,
                         opacity: undefined,