sanichkotikov / react-family-tree-example Goto Github PK

This is more a question than a issue for this software/branch.
I have been trying to use 'react-family-tree' module without much success.

I installed react (following this tutorial -> https://www.youtube.com/watch?v=Ke90Tje7VS0&t=2500s)
I wanted to use your library in my react application.
The example program differs a lot from the application I created (using create-react-app my-family-tree). Though I managed to install the required modules (react-family-tree, relatives-tree,..).

It would be very useful and easy either if I can just download and run this 'react-family-tree-example' or at least please explain steps to be followed to run this sample program.

I tried to run .\react-family-tree-example-master\public\index.html, page is blank.

Hope to get it working in my machine :).

Cheers,
Karthick

How can I install this lib and "import { IFamilyExtNode } from 'relatives-tree/lib/types';" ??
I'm a newbie with this section. Can anyone help me?
Thank you very much.

Maybe I'm not formatting the json properly, but using the json data below (added 6 people, test 1, test 2, test 3....) i find the tree duplicated when clicking "2DlrR0fK8". Other duplicated, misplaced nodes also present.

Sample json file which creates the issue, below:

[
{
"id": "HkqEDLvxE",
"gender": "male",
"parents": [
{
"id": "011jVS4rb",
"type": "blood"
},
{
"id": "PXACjDxmR",
"type": "blood"
}
],
"siblings": [
{
"id": "kuVISwh7w",
"type": "blood"
},
{
"id": "UIEjvLJMd",
"type": "blood"
},
{
"id": "ZVi8fWDBx",
"type": "blood"
}
],
"spouses": [],
"children": []
},
{
"id": "011jVS4rb",
"gender": "male",
"parents": [
{
"id": "ypu71w9_Q",
"type": "blood"
},
{
"id": "GEf8zF7A4",
"type": "blood"
}
],
"children": [
{
"id": "HkqEDLvxE",
"type": "blood"
},
{
"id": "kuVISwh7w",
"type": "blood"
},
{
"id": "UIEjvLJMd",
"type": "blood"
},
{
"id": "ZVi8fWDBx",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "PXACjDxmR",
"type": "married"
}
]
},
{
"id": "PXACjDxmR",
"gender": "female",
"parents": [
{
"id": "2DlrR0fK8",
"type": "blood"
},
{
"id": "test 1",
"type": "blood"
}
],
"children": [
{
"id": "HkqEDLvxE",
"type": "blood"
},
{
"id": "kuVISwh7w",
"type": "blood"
},
{
"id": "UIEjvLJMd",
"type": "blood"
},
{
"id": "ZVi8fWDBx",
"type": "blood"
}
],
"siblings": [
{
"id": "H-06WvsfJ",
"type": "blood"
}
],
"spouses": [
{
"id": "011jVS4rb",
"type": "married"
}
]
},
{
"id": "kuVISwh7w",
"gender": "male",
"parents": [
{
"id": "011jVS4rb",
"type": "blood"
},
{
"id": "PXACjDxmR",
"type": "blood"
}
],
"children": [
{
"id": "Fbc9iwnJl",
"type": "blood"
}
],
"siblings": [
{
"id": "HkqEDLvxE",
"type": "blood"
},
{
"id": "UIEjvLJMd",
"type": "blood"
},
{
"id": "ZVi8fWDBx",
"type": "blood"
}
],
"spouses": [
{
"id": "vRSjcaDGj",
"type": "married"
}
]
},
{
"id": "UIEjvLJMd",
"gender": "female",
"parents": [
{
"id": "011jVS4rb",
"type": "blood"
},
{
"id": "PXACjDxmR",
"type": "blood"
}
],
"children": [
{
"id": "6_OTJvbvS",
"type": "blood"
},
{
"id": "JhSCcdFEP",
"type": "blood"
},
{
"id": "6hNxNY1-I",
"type": "blood"
}
],
"siblings": [
{
"id": "HkqEDLvxE",
"type": "blood"
},
{
"id": "kuVISwh7w",
"type": "blood"
},
{
"id": "ZVi8fWDBx",
"type": "blood"
}
],
"spouses": [
{
"id": "RZbkr5vAi",
"type": "married"
}
]
},
{
"id": "RZbkr5vAi",
"gender": "male",
"parents": [],
"children": [
{
"id": "6_OTJvbvS",
"type": "blood"
},
{
"id": "JhSCcdFEP",
"type": "blood"
},
{
"id": "6hNxNY1-I",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "UIEjvLJMd",
"type": "married"
}
]
},
{
"id": "vRSjcaDGj",
"gender": "female",
"parents": [
{
"id": "6vASIIxhd",
"type": "blood"
},
{
"id": "iFiwqrWx-",
"type": "blood"
}
],
"children": [
{
"id": "Fbc9iwnJl",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "kuVISwh7w",
"type": "married"
}
]
},
{
"id": "Fbc9iwnJl",
"gender": "female",
"parents": [
{
"id": "kuVISwh7w",
"type": "blood"
},
{
"id": "vRSjcaDGj",
"type": "blood"
}
],
"children": [],
"siblings": [],
"spouses": []
},
{
"id": "ypu71w9_Q",
"gender": "male",
"parents": [
{
"id": "TsyAkbF89",
"type": "blood"
},
{
"id": "T54Km7uOC",
"type": "blood"
}
],
"children": [
{
"id": "011jVS4rb",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "GEf8zF7A4",
"type": "married"
}
]
},
{
"id": "GEf8zF7A4",
"gender": "female",
"parents": [
{
"id": "gsgwGS_Kw",
"type": "blood"
},
{
"id": "ZgTZx9uXQ",
"type": "blood"
}
],
"children": [
{
"id": "011jVS4rb",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "ypu71w9_Q",
"type": "married"
}
]
},

{
"id": "2DlrR0fK8",
"gender": "male",
"parents": [{
"id": "test 4",
"type": "blood"
},
{
"id": "test 5",
"type": "blood"
}],
"children": [
{
"id": "PXACjDxmR",
"type": "blood"
},
{
"id": "H-06WvsfJ",
"type": "blood"
}
],
"siblings": [],
"spouses": [{
"id": "test 1",
"type": "married"
}]
},
{
"id": "test 4",
"gender": "male",
"parents": [],
"children": [
{
"id": "test 1",
"type": "blood"
},
{
"id": "2DlrR0fK8",
"type": "blood"
}
],
"siblings": [{
"id": "test 6",
"type": "blood"
}],
"spouses": [{
"id": "test 5",
"type": "married"
}]
},{
"id": "test 6",
"gender": "male",
"parents": [],
"children": [],
"siblings": [],
"spouses": [{
"id": "test 4",
"type": "blood"
}]
},
{
"id": "test 5",
"gender": "male",
"parents": [],
"children": [
{
"id": "test 1",
"type": "blood"
},
{
"id": "2DlrR0fK8",
"type": "blood"
}
],
"siblings": [],
"spouses": [{
"id": "test 4",
"type": "married"
}]
},
{
"id": "test 1",
"gender": "female",
"parents": [{
"id": "test 2",
"type": "blood"
},
{
"id": "test 3",
"type": "blood"
}],
"children": [
{
"id": "PXACjDxmR",
"type": "blood"
},
{
"id": "H-06WvsfJ",
"type": "blood"
}
],
"siblings": [],
"spouses": [{
"id": "2DlrR0fK8",
"type": "married"
}]
},{
"id": "test 2",
"gender": "female",
"parents": [],
"children": [
{
"id": "test 1",
"type": "blood"
}
],
"siblings": [],
"spouses": [{
"id": "test 3",
"type": "married"
}]
},{
"id": "test 3",
"gender": "male",
"parents": [],
"children": [
{
"id": "test 1",
"type": "blood"
}
],
"siblings": [],
"spouses": [{
"id": "test 2",
"type": "married"
}]
},
{
"id": "gsgwGS_Kw",
"gender": "male",
"parents": [],
"children": [
{
"id": "GEf8zF7A4",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "ZgTZx9uXQ",
"type": "married"
}
]
},
{
"id": "ZgTZx9uXQ",
"gender": "female",
"parents": [],
"children": [
{
"id": "GEf8zF7A4",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "gsgwGS_Kw",
"type": "married"
}
]
},
{
"id": "ZVi8fWDBx",
"gender": "male",
"parents": [
{
"id": "011jVS4rb",
"type": "blood"
},
{
"id": "PXACjDxmR",
"type": "blood"
}
],
"children": [],
"siblings": [
{
"id": "HkqEDLvxE",
"type": "blood"
},
{
"id": "kuVISwh7w",
"type": "blood"
},
{
"id": "UIEjvLJMd",
"type": "blood"
}
],
"spouses": [
{
"id": "wJ1EBvc5m",
"type": "married"
}
]
},
{
"id": "6_OTJvbvS",
"gender": "male",
"parents": [
{
"id": "RZbkr5vAi",
"type": "blood"
},
{
"id": "UIEjvLJMd",
"type": "blood"
}
],
"children": [],
"siblings": [
{
"id": "JhSCcdFEP",
"type": "blood"
},
{
"id": "6hNxNY1-I",
"type": "blood"
}
],
"spouses": []
},
{
"id": "JhSCcdFEP",
"gender": "female",
"parents": [
{
"id": "RZbkr5vAi",
"type": "blood"
},
{
"id": "UIEjvLJMd",
"type": "blood"
}
],
"children": [
{
"id": "Z0QA5oKks",
"type": "blood"
}
],
"siblings": [
{
"id": "6_OTJvbvS",
"type": "blood"
},
{
"id": "6hNxNY1-I",
"type": "blood"
}
],
"spouses": [
{
"id": "ilad8NH6g",
"type": "married"
}
]
},
{
"id": "6hNxNY1-I",
"gender": "male",
"parents": [
{
"id": "RZbkr5vAi",
"type": "blood"
},
{
"id": "UIEjvLJMd",
"type": "blood"
}
],
"children": [],
"siblings": [
{
"id": "6_OTJvbvS",
"type": "blood"
},
{
"id": "JhSCcdFEP",
"type": "blood"
}
],
"spouses": []
},
{
"id": "ilad8NH6g",
"gender": "male",
"parents": [],
"children": [
{
"id": "Z0QA5oKks",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "JhSCcdFEP",
"type": "married"
}
]
},
{
"id": "Z0QA5oKks",
"gender": "male",
"parents": [
{
"id": "ilad8NH6g",
"type": "blood"
},
{
"id": "JhSCcdFEP",
"type": "blood"
}
],
"children": [],
"siblings": [],
"spouses": []
},
{
"id": "wJ1EBvc5m",
"gender": "female",
"parents": [],
"children": [],
"siblings": [],
"spouses": [
{
"id": "ZVi8fWDBx",
"type": "married"
}
]
},
{
"id": "TsyAkbF89",
"gender": "male",
"parents": [],
"children": [
{
"id": "ypu71w9_Q",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "T54Km7uOC",
"type": "married"
}
]
},
{
"id": "T54Km7uOC",
"gender": "female",
"parents": [],
"children": [
{
"id": "ypu71w9_Q",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "TsyAkbF89",
"type": "married"
}
]
},
{
"id": "6vASIIxhd",
"gender": "male",
"parents": [],
"children": [
{
"id": "vRSjcaDGj",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "iFiwqrWx-",
"type": "married"
}
]
},
{
"id": "iFiwqrWx-",
"gender": "female",
"parents": [],
"children": [
{
"id": "vRSjcaDGj",
"type": "blood"
}
],
"siblings": [],
"spouses": [
{
"id": "6vASIIxhd",
"type": "married"
}
]
},
{
"id": "H-06WvsfJ",
"gender": "female",
"parents": [
{
"id": "2DlrR0fK8",
"type": "blood"
},
{
"id": "test 1",
"type": "blood"
}
],
"children": [],
"siblings": [
{
"id": "PXACjDxmR",
"type": "blood"
}
],
"spouses": []
}
]

Good day Mr. SanichKotikov,

First of all, thank you for making this library, im very happy to know that there are usable library like this with 2 parents.. but i encountered some Issue that Even i only had 1 Node, it popped up a parent Node , female-placeholder and male-placeholder.. i would like to know how to hide those placeholder if i wanted the top node does not have any parents?

and secondly, i wanna know how pinch-zoom-pan works at current version.. since i want to know how to implement the zoom and draggable motion only in one div tags, and when i try it, my whole page can be dragged

I hope you're gonna respond to this, thanks in advance Mr. Sanich Kotikov

Currently, I'm trying to have a family tree that will have Multiple Spouses. (When it is going more than two spouses, the link is not going separately, I need a separate line, how to do ),