react-archer
react-archer copied to clipboard
pierpo
Add support for optional arrow click handler and pointer cursor (#20)
Came up with the minimal required changes to add support for an onClick handler function prop.
This will automatically add the cursor: pointer to the arrow stroke.
For my use case it doesn't need the same on the arrow marker but just for the stroke (because multiple arrows can end in the same point), so not sure if those should be configurable separately for other use cases.
I also passed by default the markerId, from.id, to.id besides the click event to the handler.
Ideally it should also be possible to style a specific arrow when clicking (to set it as "selected").
@robinvenneman Can you do a stupid example using your feature? (it can be really really stupid, look at the other examples hahaha) It will help me understand exactly what you want and helps me to check if anything went wrong. (until I set up proper automated tests)
@robinvenneman Can you provide me an example or a use case? I'd like to know exactly what's needed to help you with this feature 😊
@pierpo yeah what I did is just delete the relation when the arrow is clicked, most simple solution for what I was working on but ideally it would be able to do more I guess. I will see next week to find some time to add this example in the demo.
@pierpo I've added a simple demo with clickable arrows, currently only the line is handling those events. The labels seem to intercept the pointer events on the arrow unless set to 'none' so this feature may require some more fine-tuning.
@robinvenneman I am so sorry, I completely forgot to work on this. Is this still a feature you need?
@pierpo Hey, no problem I also kind of forgot about this :) I implemented this on a private fork for this project I was working on and haven't looked at it since, not even sure if it's still in use right now.
If you think this is a good idea to add to the library then I still want to help out though if you'd like.
Haha well I don't know, I wonder if having clickable arrows will happen often :thinking: I would suggest to wait for other people to ask for the feature before integrating it officially :blush:
@pierpo definitely have a need for this. The use case here would be in the context of a flow chart. Allowing you to click on an arrow will allow you to add a new node in that particular position. Ideally, I should be able to add a '+' button with a click handler that sits on the middle of an arrow.
@pierpo definitely have a need for this. The use case here would be in the context of a flow chart. Allowing you to click on an arrow will allow you to add a new node in that particular position. Ideally, I should be able to add a '+' button with a click handler that sits on the middle of an arrow.
Though, looks like this is already achievable using the 'label' option on a relation.
@pierpo definitely have a need for this. The use case here would be in the context of a flow chart. Allowing you to click on an arrow will allow you to add a new node in that particular position. Ideally, I should be able to add a '+' button with a click handler that sits on the middle of an arrow.
Though, looks like this is already achievable using the 'label' option on a relation.
Yes indeed 😊 Glad that you found out a simple solution.
We have a use case that needs clickable arrows, similar to the one described in #108. We need to make the arrows click-selectable to enable various interactions, but our arrows do not have a label. Enabling hover interactions on the arrows would be nice, too.
My team will be happy to contribute to this PR, too, we're not expecting anything for free!
Noted. I'll add this to my TODO!
I think we should start over, the PR is too old. The codebase has completely changed :smile:
The PR was too old, so I started over. Thank you @robinv85 for your work, and sorry that it took me SO long to handle this 😴