Add onClick handler to the canvas, for use in eg. unselecting nodes #113
Conversation
sandbox/Sandbox.jsx
Outdated
| @@ -50,6 +50,8 @@ export default class Sandbox extends React.Component { | |||
| }; | |||
| } | |||
|
|
|||
| onClickCanvas = () => console.info(`Clicked the canvas`); | |||
There was a problem hiding this comment.
Please rename this to onClickGraph, people may mistakenly think that under the hood canvas is being used when the full react-d3-graph implementation is based on SVG only.
| @@ -0,0 +1,44 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
This should not be here you probably need to get your fork up to date with master
src/components/graph/Graph.jsx
Outdated
| @@ -400,7 +414,7 @@ export default class Graph extends React.Component { | |||
|
|
|||
| return ( | |||
| <div id={`${this.state.id}-${CONST.GRAPH_WRAPPER_ID}`}> | |||
| <svg style={svgStyle}> | |||
| <svg name="canvas" style={svgStyle} onClick={this.onClickCanvas}> | |||
There was a problem hiding this comment.
Again regarding the canvas reference, please rename it to svg-container-${this.state.id}. Why appending the this.state.id? To avoid collisions when there are more than one graph present in the same page (yes, this is a real use case)
src/components/graph/graph.config.js
Outdated
| @@ -113,6 +113,7 @@ | |||
| * - 'wye' | |||
| * | |||
| * **[note]** react-d3-graph will map this values to [d3 symbols](https://github.com/d3/d3-shape#symbols) | |||
| * @param {Function} [node.viewGenerator=undefined] - 🔍🔍🔍 function that receives a node and returns a JSX view. | |||
| * <br/> | |||
| * @param {Object} link link object is explained in the next section. ⬇️ | |||
There was a problem hiding this comment.
Please add documentation on the new function that is being exposed in the react-d3-graph component API.
src/components/graph/Graph.jsx
Outdated
| @@ -372,6 +372,23 @@ export default class Graph extends React.Component { | |||
| this.props.onClickNode && this.props.onClickNode(clickedNodeId); | |||
| }; | |||
|
|
|||
| /** | |||
| * Calls the callback passed to the component. | |||
| * @param {string} e - The event of onClick handler. | |||
There was a problem hiding this comment.
@param {Object} e is an Object not a string
| * @param {Óbject} e - The event of onClick handler. | ||
| * @returns {undefined} | ||
| */ | ||
| onClickGraph = e => { |
There was a problem hiding this comment.
Please add this method to the component documentation, just follow the example of one of the functions there like onClickNode
There was a problem hiding this comment.
I just added it to Readme docs. Is there anywhere else you would like me to add it?
There was a problem hiding this comment.
Yes, please add it as well to the jsdoc that is on the component in the file Graph.jsx
Add onClick handler to the canvas, for use in eg. unselecting nodes