Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unbundled bezier edge disappear or flip when nodes are close #3251

Open
7 tasks
anthonyhtyao opened this issue Jul 1, 2024 · 4 comments
Open
7 tasks

Unbundled bezier edge disappear or flip when nodes are close #3251

anthonyhtyao opened this issue Jul 1, 2024 · 4 comments
Assignees
Labels
bug A bug in the code of Cytoscape.js

Comments

@anthonyhtyao
Copy link

Environment info

  • Cytoscape.js version : 3.30.0
  • Browser/Node.js & version : firefox 126.0.1

Current (buggy) behaviour

Unbundled bezier edges disappear (2nd) or flip (3rd) when two nodes are next to each other or overlap as shown below
Screenshot from 2024-07-01 12-21-19

p.s. there is an ancient issue about the flip #411

Desired behaviour

The second and third edges should display similarly to the first one

Minimum steps to reproduce

Here is the js code to reproduce the image above

cytoscape({
    "container": document.getElementById("cy"),
     "elements": [
         {"data": {"id": 1}, "position": {"x": 0, "y": 0}},
         {"data": {"id": 2}, "position": {"x": 40, "y": 0}},
         {"data": {"id": 3}, "position": {"x": 0, "y": 40}},
         {"data": {"id": 4}, "position": {"x": 20, "y": 40}},
         {"data": {"id": 5}, "position": {"x": 0, "y": 80}},
         {"data": {"id": 6}, "position": {"x": 19, "y": 80}},
         {"data": {"source": 1, "target": 2}}, // normal
         {"data": {"source": 3, "target": 4}}, // disappear
         {"data": {"source": 5, "target": 6}}, // flip
    ],
    "style": [
         {"selector": "node", "style": {"width": 20, "height": 20}},
         {"selector": "edge", "style": {"curve-style": "unbundled-bezier", "control-point-weight": 0.5, "control-point-distance": 20}},
    ],
    "layout": {"name": "preset"},
})

For reviewers

Reviewers should ensure that the following tasks are carried out for incorporated issues:

  • Ensure that the reporter has included a reproducible demo. They can easily fork this JSBin demo: http://jsbin.com/fiqugiq
  • The issue has been associated with a corresponding milestone.
  • The commits have been incorporated into the corresponding branches. Bug-fix patches go on
    • master,
    • unstable, and
    • the previous feature release branch (e.g. 1.1.x if the current release is 1.2).
  • The issue has been labelled as a bug, if necessary.
@anthonyhtyao anthonyhtyao added the bug A bug in the code of Cytoscape.js label Jul 1, 2024
@maxkfranz
Copy link
Member

Great start to the issue. Let's get this in a demo so we can move forward, @anthonyhtyao

@maxkfranz
Copy link
Member

Assigning to @anthonyhtyao until his demo is posted

@anthonyhtyao
Copy link
Author

Hi, here is the demo

@AlexanderPico
Copy link
Member

Thanks for the demo. While we look into fixing this for the automatic case, you might consider the manual control option for edge path in cases where you need a solution now.

@AlexanderPico AlexanderPico assigned d2fong and unassigned anthonyhtyao Jul 18, 2024
@d2fong d2fong mentioned this issue Sep 30, 2024
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug A bug in the code of Cytoscape.js
Projects
None yet
Development

No branches or pull requests

4 participants