how to bind eventListeners on connector

[wulucxy]

Hi @ajainarayanan，I have a question about how to bind eventListers on connector，like the above picture shows：

when user hover on the connector，we have to show an popover Component。

but as https://github.com/ajainarayanan/react-dag/blob/feature%2F2.0.0.alpha/src/dag.tsx#L164 shows，we can only bind eventListeners on Instance。

so how can I bind event on connector?

[ajainarayanan]

Hi @wulucxy Sorry for the late response. Right now a little held up with work. Will try to get to this in a weekend.

[ajainarayanan]

@dnickersonMedhok

I'm looking to implement an onClick event for a node. I see the click event for connectors but don't see one for a node. I guess it's a jsPlumb thing maybe only available in the community edition? Any ideas on how I could implement using your framework?

I believe jsplumb has connection events as stated in this doc (https://jsplumbtoolkit.com/community/doc/events.html#connectionEvents).

react-dag doesn't have a way to hook to node and connection events yet. I am not sure when I could get to this (may be this weekend?). If you have ideas, PRs welcome!

[dnickersonMedhok]

It was easy enough just to create an onClick() in the Node* class itself so I don't know if it would be worth it.

However, now I DO need to hook into node and connection events in order to return the json model for these. Maybe expose a method using a ref? Otherwise I was just thinking of inserting the whole DAG component code into my project and either using redux or lifting state up to get the connection and node models.

[ajainarayanan]

@dnickersonMedhok Yes I was planning on adding node and connection events as props to the dag.

However, now I DO need to hook into node and connection events in order to return the json model for these.

Can you elaborate a little on this?

[dnickersonMedhok]

Short answer: I need for the parent component to be able to get the json model that DAG is using.

Long answer: I'm doing a PoC for medical management where the user creates a workflow. The creation of the DAG graph is to model that workflow of a case through the system. So I'm using the node/connection model for more than just creating the DAG graph.

BTW After 20 years in the business this is my first front end. So I'm learning as I go and I'd love to contribute...... as soon as I learn typescript:\

[ajainarayanan]

Short answer: I need for the parent component to be able to get the json model that DAG is using.

This is already possible via the onChange prop. This will call the function whenever there is a change in the state. Can you check if thats what you need? From what you mention you need the JSON representation of the DAG on each update (meaning list of connections and nodes) which the onChange prop publishes.

BTW After 20 years in the business this is my first front end. So I'm learning as I go and I'd love to contribute...... as soon as I learn typescript:\

No worries :) Typescript is easy to learn if you are familiar with traditional statically typed languages.