react-dag icon indicating copy to clipboard operation
react-dag copied to clipboard

how to bind eventListeners on connector

Open wulucxy opened this issue 7 years ago • 6 comments

image

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?

wulucxy avatar Aug 10 '18 09:08 wulucxy

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 avatar Aug 15 '18 04:08 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!

ajainarayanan avatar Dec 03 '18 21:12 ajainarayanan

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.

dnickersonMedhok avatar Dec 05 '18 20:12 dnickersonMedhok

@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?

ajainarayanan avatar Dec 05 '18 22:12 ajainarayanan

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:\

dnickersonMedhok avatar Dec 06 '18 14:12 dnickersonMedhok

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.

ajainarayanan avatar Dec 06 '18 15:12 ajainarayanan