Using jsPlumb with React

Question

I am rendering some elements from react and connecting using jsPlumb. Every time there is a change in the config I am reconnecting the nodes. But I get errors from jsPlumb starting from the second rendering like

.each iteration failed : TypeError: Cannot read property 'force' of undefined

Then all drag/move interaction from jsplumb stops working with errors.

What would be the best way to reset jsPlumb instance with removing all endpoint references and connections? I am doing jsPlumbInstance.reset() but its not helping.

Jesse · Accepted Answer · 2017-03-07 19:13:25Z

1

What I do is I use a component for each edge that just renders an empty div and pass the edge info and jsplumb instance in through the props. Then the parent component keeps track of what edges are connected.

In the parent class:

var edgeComponents = []
validEdges.forEach(     
  edge => {     
    edgeComponents.push(     
      <Edge
        key={${edge.source}-${edge.target}}     
        edge={edge}     
        jsPlumb={this.state.jsPlumbInstance}     
      /> )
  }
)

The child class:

export default class Edge extends Component {
  componentDidMount(){
    const edge = this.props.edge
    const connection = this.props.jsPlumb.connect({source:edge.source, target:edge.target})
    this.setState({connection: connection})
  }

  componentWillUnmount () {
    this.props.jsPlumb.detach(this.state.connection)
  }
}

edited Mar 7, 2017 at 19:13

answered Feb 22, 2017 at 19:10

Jesse

8149 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roy Over a year ago

I am doing the same but before connect call I also need to do addEndpoint or makeSource/makeTarget or any other way of setting up the connectors, if I am not wrong. And as my elements potentially can change every time the component mounts, I need to do and undo that every time. I think thats where my errors come in. So am I doing it wrong?

Jesse Over a year ago

My endpoints are static and attached to my node component so I don't have to worry about that, but I imagine you could create them and destroy them in the same way if you want them to be part of the edges. My edges use a key based on the uuids of the endpoints. The parent component just keeps track of which edge components to render and if one disappears it is unmounted.

Collectives™ on Stack Overflow

Using jsPlumb with React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related