Add support for optional arrow click handler and pointer cursor (#20) #27
Conversation
| const clickHandler = this.props.onClick | ||
| ? (evt) => { | ||
| if (this.props.onClick) { | ||
| this.props.onClick(evt, markerId, from.id, to.id); |
There was a problem hiding this comment.
@pierpo could also pass an object like arrowData { marker, from, to } or similar ... and perhaps this same event should also apply to the marker
|
Thanks for the PR again 🤗 I'll review it asap! |
|
@robinvenneman Can you do a stupid example using your feature? (it can be really really stupid, look at the other examples hahaha) |
|
@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 🤔 |
|
Ok, good idea 👍 |
|
@pierpo definitely have a need for this. The use case here would be in the context of a flow chart. |
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 😄 |
|
Closed in favor of #183 😊 |
|
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 😴 |
Hi, wondering if this feature is still at works? |
Came up with the minimal required changes to add support for an
onClickhandler function prop.This will automatically add the
cursor: pointerto 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.idbesides the click event to the handler.Ideally it should also be possible to style a specific arrow when clicking (to set it as "selected").