How to dynamically draw edges between nodes using jsplumbtoolkit-react

Question

I'm using jsplumbtoolkit-react 2.x version. Using toolkit.addNode to add new nodes dynamically to the graph. But I'm struggling to draw the connection between the newly added nodes. Can someone please point me to the right documentation or if there is any example that I can follow for this specific version?

I added the following properties on the node component

jtk-port={ctx.data.id}
jtk-scope="varchar"
jtk-source="true"
jtk-target="true"

I do have elementsDraggable: true, so all I'm able to do is drag the node but not form a connection. I tried using addPort but with no luck and the jsPlumbtoolkit documentation has not helped so far.

Answer 1

It's possible you are looking at the 5.x documentation, given that you're using attributes in the above example, although I should note that for users of 5.x the attributes are prefixed with data-, eg data-jtk-source="true" etc. In 2.x this connectivity is not configured with attributes, though, but with elements. For instance, for this demonstration:

https://demo.jsplumbtoolkit.com/react-flowchart-builder/

This is the render method for the action component:

render() {

        const obj = this.node.data;

        return <div style={{width:obj.w + 'px', height:obj.h + 'px'}} className="flowchart-object flowchart-action">
            <div style={{position:'relative'}}>
                <svg width={obj.w} height={obj.h}>
                    <rect x={10} y={10} width={obj.w-20} height={obj.h-20} className="inner"/>
                    <text textAnchor="middle" x={obj.w/2} y={obj.h/2} dominantBaseline="central">{obj.text}</text>
                </svg>
            </div>
            <div className="node-edit node-action" onClick={this.edit.bind(this)}></div>
            <div className="node-delete node-action delete" onClick={this.remove.bind(this)}></div>
            <div className="drag-start connect"></div>
            <jtk-target port-type="target"/>
            <jtk-source port-type="source" filter=".connect"/>
        </div>
    }

The complete source for the version 2.x code for that demonstration is here:

https://github.com/jsplumb-toolkit-demonstrations/react-flowchart-builder/blob/2.x/src/action-component.jsx