Open ToughDude opened 4 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);
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.