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.div position: absolute; ;

const Button = styled.div position: 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.div padding: 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 (

stateActions.onDeleteKey({})}> Delete {JSON.stringify(chart.selected.id)}

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
    </div>
    <button type="text" onClick={this.onClickHandle}>
      ADD
    </button>
    <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
                </button>
              </Label>
            </>
          );
        },
      }}
    />
  </div>
);

} }

export default App;