onClick function on button on CustomLink not working.

[ToughDude]

I am trying to delete a link by clicking on a button on CustomLink. Anybody knows why this does not work?

import * as React from "react"; import { render } from "react-dom"; import { cloneDeep, mapValues } from "lodash"; import styled from "styled-components"; import { FlowChart, LinkDefault, actions, REACT_FLOW_CHART, } from "@mrblenny/react-flow-chart"; import { chartSimple } from "./data"; import { CustomNodeInner } from "./CustomNodeInner"; import "./styles.css";

const Label = styled.divposition: absolute;;

const Button = styled.divposition: absolute; top: 0px; right: 0px; padding: 5px; height: 15px; width: 15px; transform: translate(50%, -50%); background: red; color: white; border-radius: 50%; transition: 0.3s ease all; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; &:hover { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); };

const LabelContent = styled.divpadding: 5px 10px; background: cornflowerblue; color: white; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer;;

var newInputNode = { id: "node3", position: { x: 500, y: 300, }, type: "input-only", ports: { portA: { id: "portA", type: "bottom", properties: { custom: "property", }, }, portB: { id: "portB", type: "bottom", properties: { custom: "property", }, }, }, properties: { custom: "new prop", }, };

const newOutputNode = { type: "output-only", ports: { portA: { id: "portA", type: "top", properties: { custom: "property", }, }, portB: { id: "portB", type: "bottom", properties: { custom: "property", }, }, }, properties: { custom: "new prop", }, };

var check = "Start"; class App extends React.Component { constructor(props) { super(props); this.state = chartSimple; this.chartSimple = chartSimple; this.onClickHandle = this.onClickHandle.bind(this); this.onClickHandleTemp = this.onClickHandleTemp.bind(this); } componentDidUpdate() { console.log("links", this.state.links); }

onClickHandle() { var newChart = this.chartSimple; newChart.nodes.node3 = newInputNode; this.setState(newChart); }

onClickHandleTemp() { var newChart = this.chartSimple; newChart.nodes.node3 = newInputNode; console.log("HERE"); this.setState(newChart); } render() { const chart = this.state; const stateActions = mapValues(actions, (func) => (...args) => this.setState(func(...args), () => console.log(...args)) ); return ( <div className="App"> <button onClick={() => stateActions.onDeleteKey({})}> Delete {JSON.stringify(chart.selected.id)} <div draggable onDragStart={(e) => e.dataTransfer.setData( REACT_FLOW_CHART, JSON.stringify(newInputNode) ) } style={{ padding: "1rem", background: "#999", cursor: "grabbing" }} > Input node <div draggable onDragStart={(e) => e.dataTransfer.setData( REACT_FLOW_CHART, JSON.stringify(newOutputNode) ) } style={{ padding: "1rem", background: "#999", cursor: "grabbing" }} > Output node <button type="text" onClick={this.onClickHandle}> ADD <FlowChart chart={chart} callbacks={stateActions} config={{ snapToGrid: true, }} 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} /> <Label style={{ left: centerX, top: centerY }}> {props.link.properties && props.link.properties.label && ( <LabelContent> {props.link.properties && props.link.properties.label} </LabelContent> )} <button onClick={(e) => { onLinkClick({ linkId: link.id }); stateActions.onDeleteKey({}); check = "IM HERE"; e.stopPropagation(); }} > x </Label> </> ); }, }} /> ); } }

export default App;