MrBlenny / react-flow-chart

🌊 A flexible, stateless, declarative flow chart library for react.
https://mrblenny.github.io/react-flow-chart/index.html
MIT License
1.48k stars 306 forks source link

Passing custom link does not delete the link. #180

Open ToughDude opened 4 years ago

ToughDude commented 4 years ago

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.

MeguminIndex commented 3 years ago

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);