SanichKotikov / relatives-tree

A tiny library for calculating specific JSON data to family tree nodes and connectors 🌳
https://sanichkotikov.github.io/react-family-tree-example/
MIT License
45 stars 21 forks source link

Display bug with divorced parents #9

Closed nicosayer closed 3 years ago

nicosayer commented 3 years ago

Awesome job on the repo! Love your work!

I stumbled upon a weird display bug lately and managed to narrow it to a small node:

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. Load the nodes below.
  2. Set user4 as rootId.

What is expected?

The tree should look like this: Capture d’écran 2021-03-16 à 16 26 49

What is actually happening?

The tree looks like this: Capture d’écran 2021-03-16 à 16 26 04 The bug only seems to appear with this specific rootId. If I set another rootId, the tree displays correctly.


nodes.json:

[
  {
    "id": "user1",
    "gender": "male",
    "parents": [
      { "id": "user5", "type": "blood" },
      { "id": "user6", "type": "blood" }
    ],
    "siblings": [{ "id": "user4", "type": "blood" }],
    "spouses": [],
    "children": [{ "id": "user3", "type": "blood" }]
  },
  {
    "id": "user2",
    "gender": "female",
    "parents": [],
    "siblings": [],
    "spouses": [{ "id": "user5", "type": "married" }],
    "children": []
  },
  {
    "id": "user3",
    "gender": "male",
    "parents": [{ "id": "user1", "type": "blood" }],
    "siblings": [],
    "spouses": [],
    "children": []
  },
  {
    "id": "user4",
    "gender": "female",
    "parents": [
      { "id": "user5", "type": "blood" },
      { "id": "user6", "type": "blood" }
    ],
    "siblings": [{ "id": "user1", "type": "blood" }],
    "spouses": [],
    "children": []
  },
  {
    "id": "user5",
    "gender": "male",
    "parents": [],
    "siblings": [],
    "spouses": [
      { "id": "user6", "type": "divorced" },
      { "id": "user2", "type": "married" }
    ],
    "children": [
      { "id": "user1", "type": "blood" },
      { "id": "user4", "type": "blood" }
    ]
  },
  {
    "id": "user6",
    "gender": "female",
    "parents": [],
    "siblings": [],
    "spouses": [{ "id": "user5", "type": "divorced" }],
    "children": [
      { "id": "user1", "type": "blood" },
      { "id": "user4", "type": "blood" }
    ]
  }
]

Environment Info
react-family-tree 2.0.2
React 17.0.1
System MacOS Catalina 10.15.7
Browser Google Chrome 88.0.4324.182
SanichKotikov commented 3 years ago

Hi,

Thanks. I've found the bug. Will fix it in the next major release (the code has been rewritten since last publish).

SanichKotikov commented 3 years ago

v3.0.0 has been published, please check

nicosayer commented 3 years ago

Works perfectly ! Thanks