search

cytoscape / cytoscape.js

Graph theory (network) library for visualisation and analysis
https://js.cytoscape.org
MIT License
10.09k stars 1.64k forks source link

No events are fired from straight unbundled-bezier edges #2483

Closed IfatChitin closed 5 years ago

IfatChitin commented 5 years ago

Issue type

Bug report

Environment info

Current (buggy) behaviour

No events (mouseover, mouseout, tap) are fired on straight edges when hovering close to the source node.

Desired behaviour

Events should be fired when hovering anywhere on a straight edge

Minimum steps to reproduce In the below example, hover or click on the straight edge. Nothing happens in certain areas of the edge.

https://codepen.io/anon/pen/NQjaBa https://jsbin.com/wipabohove/1/edit?html,js,output

Thank you

maxkfranz commented 5 years ago

The demo seems OK:

beam4

IfatChitin commented 5 years ago

@maxkfranz try hovering from the sides of the edge, as showed in the attached zipped video: Cytoscape no events on edge.zip

maxkfranz commented 5 years ago

I can't reproduce what you've shown in the video on Safari, Chrome, or Firefox.

maxkfranz commented 5 years ago

Can you reproduce the issue on a different machine or on a different browser?

IfatChitin commented 5 years ago

On my machine: Chrome: reproduced with both jsbin and codepen links. Edge: reproduced only with the codepen link.

Different machine: Chrome: reproduced only with the codepen link. Edge: reproduced with both jsbin and codepen links.

Hmmm... I'm puzzled. Cannot find a consistency here, except for the codepen link. Could you please try with it? https://codepen.io/anon/pen/NQjaBa Thanks

maxkfranz commented 5 years ago

The codepen.io link works on my Mac. If the issue is not consistent, then it is likely an OS-specific or configuration-specific issue outside of the control of the library.

IfatChitin commented 5 years ago

Reproduced on mac with codepen.io. straight_edges_on_mac.zip

There is a workaround for this issue. If you set controlPointDistances to '0.001 0.001' or any value close to zero, then the edge will behave like a non straight edge and will receive all event, while being rendered like a straight edge (in some zooms it renders a bit blurry but we can live with that).

Maybe this info can help pointing out the root cause, if it is code related?

IfatChitin commented 5 years ago

btw, your graph library is awesome! We love it as developers (such a convenient and intuitive API with rich ways to customize everything we need) and our customers love it at users (renders super fast and smoothly). This is the opportunity to say... thank you!

image

maxkfranz commented 5 years ago

I was able to reproduce this issue when I copied the codepen graph json into the debug page in the repo. Try out the cubic-div-by-zero branch.

The best option would be to use curve-style: straight for those cases, but maybe the patch is enough.

IfatChitin commented 5 years ago

Great, thanks! If I set curve-style: straight when controlPointDistances is zero, it works fine. However I will be happy to use your patch, will wait for a new release. Thanks!