react-flow-chart icon indicating copy to clipboard operation
react-flow-chart copied to clipboard

Passing custom link does not delete the link.

Open ToughDude opened this issue 5 years ago • 1 comments

Why it is that, if i use <LinkDefault {...props} />, then i'm not able to delete a link and also select it, (passing it as a parameter to Components) :- Components={{ Link: (props) => { const { startPos, endPos, onLinkClick, link } = props; const centerX = startPos.x + (endPos.x - startPos.x) / 2; const centerY = startPos.y + (endPos.y - startPos.y) / 2; return ( <LinkDefault {...props} /> ) } } }

Please help me with this issue.

ToughDude avatar Jun 28 '20 12:06 ToughDude

So i found i had the same issue. To solve this i declared the function in class scope.

In this usage i'm wanting to be able to set a link opacity. Custom Link defined like so;

` CustomLink(props) {

const nodeID = props.link.to.nodeId;
const node = this.state.nodes[nodeID]
let highlightColour = undefined;


if (node && node.properties && node.properties["highlightColour"])
  highlightColour = node.properties["highlightColour"];


return (

  <div style={{ opacity: highlightColour === "dim" ? 0.4 : 1 }} {...props}>
    <LinkDefault {...props} />
  </div>

)

};`

<FlowChart chart={chart} callbacks={stateActions} Components={{ Link: this.CustomLink, }} /> Remember to bind this if you like in this example use this to acess chart state

this.CustomLink = this.CustomLink.bind(this);

MeguminIndex avatar Mar 01 '21 16:03 MeguminIndex