Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from
Oct 2, 2018
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5d2b58c
Add onClick handler to the canvas, for use in eg. unselecting nodes
MathiasKoch Sep 27, 2018
7a14c3d
Merge branch 'master' of https://github.com/danielcaldas/react-d3-graph
MathiasKoch Sep 28, 2018
456b2ae
Discard sandbox/rd3g.sandbox.bundle* changes
MathiasKoch Sep 30, 2018
1bc050e
Update jsdoc to reflect that onClick event is an object, not a string
MathiasKoch Sep 30, 2018
b062fa6
Uppercase Object in JSDoc
MathiasKoch Oct 1, 2018
819ea1e
Add onClickGraph to README
MathiasKoch Oct 1, 2018
095f44c
Added onClickGraph documentation to JSDocs of Graph component
MathiasKoch Oct 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@ const myConfig = {
};

// graph event callbacks
const onClickGraph = function() {
window.alert(`Clicked the graph background`);
};

const onClickNode = function(nodeId) {
window.alert(`Clicked node ${nodeId}`);
};
Expand Down Expand Up @@ -87,6 +91,7 @@ const onMouseOutLink = function(source, target) {
data={data}
config={myConfig}
onClickNode={onClickNode}
onClickGraph={onClickGraph}
onClickLink={onClickLink}
onMouseOverNode={onMouseOverNode}
onMouseOutNode={onMouseOutNode}
Expand Down
3 changes: 3 additions & 0 deletions sandbox/Sandbox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`);
Expand Down Expand Up @@ -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,
Expand Down
24 changes: 23 additions & 1 deletion src/components/graph/Graph.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}');
* };
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -372,6 +377,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 => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add this method to the component documentation, just follow the example of one of the functions there like onClickNode

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just added it to Readme docs. Is there anywhere else you would like me to add it?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, please add it as well to the jsdoc that is on the component in the file Graph.jsx

// 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,
Expand Down Expand Up @@ -400,7 +422,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}
Expand Down
2 changes: 2 additions & 0 deletions test/snapshot/graph/__snapshots__/graph.snapshot.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down