OnNodePositionChange fires unreliably.

Describe the bug When creating a graph with OnNodePositionChange set to a function, upon manually moving a node, the OnNodPositionChange function only fires sometimes.

To Reproduce Steps to reproduce the behavior:

The most basic graph i can create, where I copy the 3 node example into a create-react-app, exhibits this behavior

Code: App.js: ///////////////////////////////////////////////////////////////////////////////////////////////////// import React from ‘react’; import logo from ‘./logo.svg’; // @ts-ignore import ‘./App.css’; import Thegraph from ‘./components/Thegraph.js’ // import About from ‘./About’

function App() { return ( <div className="App"> <Thegraph /> </div> ); }

export default App;

//////////////////////////////////////////////////////////////////////////////////////////////

Thegraph.js:

/////////////////////////////////////////////////////////////////////////////////////////////////////
import React from ‘react’; import { Graph } from ‘react-d3-graph’;

// graph payload (with minimalist structure) const data = { nodes: [{ id: “Harry” }, { id: “Sally” }, { id: “Alice” }], links: [{ source: “Harry”, target: “Sally” }, { source: “Harry”, target: “Alice” }], };

// the graph configuration, you only need to pass down properties // that you want to override, otherwise default ones will be used

function Thegraph() {

const myConfig = { nodeHighlightBehavior: true, node: { color: “lightgreen”, size: 120, highlightStrokeColor: “blue”, }, link: { highlightColor: “lightblue”, }, directed: true };

// graph event callbacks const onClickGraph = function() { console.log(Clicked the graph background); };

const onClickNode = function(nodeId) { console.log(Clicked node ${nodeId}); };

// eslint-disable-next-line const onDoubleClickNode = function(nodeId) { console.log(Double clicked node ${nodeId}); };

const onRightClickNode = function(event, nodeId) { console.log(Right clicked node ${nodeId}); };

// eslint-disable-next-line const onMouseOverNode = function(nodeId) { console.log(Mouse over node ${nodeId}); };

// eslint-disable-next-line const onMouseOutNode = function(nodeId) { console.log(Mouse out node ${nodeId}); };

const onClickLink = function(source, target) { console.log(Clicked link between ${source} and ${target}); };

const onRightClickLink = function(event, source, target) { console.log(Right clicked link between ${source} and ${target}); };

// eslint-disable-next-line const onMouseOverLink = function(source, target) { console.log(Mouse over in link between ${source} and ${target}); };

// eslint-disable-next-line const onMouseOutLink = function(source, target) { console.log(Mouse out link between ${source} and ${target}); };

const onNodePositionChange = function(nodeId, x, y) { console.log(Node ${nodeId} is moved to new position. New position is x= ${x} y= ${y}); };

return <Graph id=“graph-id” // id is mandatory, if no id is defined rd3g will throw an error data={data} config={myConfig} onClickNode={onClickNode} onRightClickNode={onRightClickNode} onClickGraph={onClickGraph} onClickLink={onClickLink} onRightClickLink={onRightClickLink} onNodePositionChange={onNodePositionChange} /> }

export default Thegraph ///////////////////////////////////////////////////////////////////////////////////////////

Expected behavior OnNodePositionChange should fire the function every time a node is moved.

Screenshots If applicable, add screenshots to help explain your problem.

Environment:

• OS: iOS
• Browser Chrome
• Version 78.0.3904.70
• Node version Unsure
• react-d3-graph version 2.3.0
• d3 version 5.14.2
• react version 16.12.0

Additional context OnNodePositionChange fires its function much more often with short, very fast movements. It reaches near 100% firing rate under such conditions. With long, slow, movements, the firing rate is more like 50%.

[azraeiden]

Hey, just wanted to say thank you for fixing this. It works perfectly.

[danielcaldas]

I’ll try to have a release out asap @Kav91