Class FamilyTree2

Basic usage:

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.readOnly = false;
familyTree.addFamilyMembers([
   {id: 1, spouseIds: [2], motherId: 3, fatherId: 4},
   {id: 2},
   {id: 3},
   {id: 4},
]).draw(1);

Load on demand usage

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.readOnly = true;
familyTree.templateName = "kitkat";

familyTree.onDemand(function (args) {
    fetch(`https://familytree.balkan.app/FetchFamilyMemebers/c8sshc/${args.ids.join(',')}`)
        .then((data) => data.json())
        .then((data) => familyTree.addFamilyMembers(data).draw(null, null, familyTree.fit))
});

familyTree.onFocusButtonClick(function (args) {
    fetch('https://familytree.balkan.app/FetchFamily/c8sshc/' + args.newFocusId)
        .then((data) => data.json())
        .then((data) => familyTree.addFamilyMembers(data).draw(args.newFocusId, null, familyTree.fit));
    return false;
});

fetch('https://familytree.balkan.app/FetchFamily/c8sshc/Q60772')
    .then((data) => data.json())
    .then((data) => familyTree.addFamilyMembers(data).draw('Q60772'));

Hierarchy

FamilyTree2

Constructors

constructor

new FamilyTree2(element?: string | HTMLElement): FamilyTree2

Initializes a new instance of FamilyTree2.
example
```
let familyTree = new FamilyTree2(document.getElementById('tree'));
```
Parameters
- Optional element: string | HTMLElement
  
  The HTML element where the family tree will be rendered.
Returns FamilyTree2

Properties

state

state: { name: string; readFromLocalStorage: boolean; readFromSessionStorage: boolean; readFromUrlParams: boolean; writeToLocalStorage: boolean; writeToSessionStorage: boolean; writeToUrlParams: boolean }

Persist the state (scale, position, expand/collapse and focus) in the url or local storage

let familyTree = new FamilyTree2(document.getElementById('tree'));

familytree.state.name = "StateForMyTree";
familyTree.state.writeToLocalStorage = true;
familyTree.state.readFromLocalStorage = true;
familyTree.state.writeToSessionStorage = true;
familyTree.state.readFromSessionStorage = true;
familyTree.state.writeToUrlParams = true;
familyTree.state.readFromUrlParams = true;

Type declaration

name: string
readFromLocalStorage: boolean
readFromSessionStorage: boolean
readFromUrlParams: boolean
writeToLocalStorage: boolean
writeToSessionStorage: boolean
writeToUrlParams: boolean

Accessors

collapsedIds

get collapsedIds(): (string | number)[]
set collapsedIds(value: (string | number)[]): void

The collapsed node IDs. This property allows you to get and set the collapsed node IDs.

let familyTree = new FamilyTree2(document.getElementById('tree'));

let collapsedIds = familyTree.collapsedIds;  // Get the collapsed node IDs
familyTree.collapsedIds = [6, 8, 9, 12];    // Set the collapsed node IDs

Returns (string | number)[]

The collapsed node IDs. This property allows you to get and set the collapsed node IDs.

let familyTree = new FamilyTree2(document.getElementById('tree'));

let collapsedIds = familyTree.collapsedIds;  // Get the collapsed node IDs
familyTree.collapsedIds = [6, 8, 9, 12];    // Set the collapsed node IDs

Parameters

value: (string | number)[]

Returns void

editId

get editId(): string | number

Gets the edited node ID.

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.readOnly = false;

familyTree.addFamilyMembers([{id: 1}])
  .draw(1, null, function(){
     this.edit(1, 'name');
     console.log(this.editId)
  });

Returns string | number

element

get element(): HTMLElement

Gets the root HTML element of the chart.

let familyTree = new FamilyTree2(document.getElementById('tree'));
let treeElement = familyTree.element;

Returns HTMLElement

family

get family(): FamilyMember[]

Gets the family data.

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([{ id: 1, spouseIds: [2] }, { id: 2 }]).draw(1);

let family = familyTree.family;

Returns FamilyMember[]

focusId

get focusId(): string | number

Gets the focus ID.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.addFamilyMembers([{ id: 1, spouseIds: [2] }, { id: 2 }])
   .draw(1, null, function() {
       let focusId = familyTree.focusId;
   });

Returns string | number

mode

get mode(): string
set mode(value: string): void

Gets or sets the current mode of the chart. It could be 'dark' or 'light' Default value: "light";
```
let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.mode = "dark";
```
Returns string
Gets or sets the current mode of the chart. It could be 'dark' or 'light' Default value: "light";
```
let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.mode = "dark";
```
Parameters
- value: string
Returns void

navigationBar

get navigationBar(): boolean
set navigationBar(value: boolean): void

Gets or sets the visibility of the navigation bar.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.navigationBar = false;
const navBar = familyTree.navigationBar;

Returns boolean

Gets or sets the visibility of the navigation bar.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.navigationBar = false;
const navBar = familyTree.navigationBar;

Parameters

value: boolean

Returns void

readOnly

get readOnly(): boolean
set readOnly(value: boolean): void

Gets or sets the read-only state of the chart.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.readOnly = false;
const readOnly = familyTree.readOnly;

Returns boolean

Gets or sets the read-only state of the chart.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.readOnly = false;
const readOnly = familyTree.readOnly;

Parameters

value: boolean

Returns void

svgElement

get svgElement(): SVGElement

Gets the SVG element of the chart.

let familyTree = new FamilyTree2(document.getElementById('tree'));
const svg = familyTree.svgElement;

Returns SVGElement

template

get template(): Template

Gets the template object.

let familyTree = new FamilyTree2(document.getElementById('tree'));

let template = familyTree.template;

Returns Template

templateName

get templateName(): string
set templateName(value: string): void

Gets or sets the template name.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.templateName = 'kitkat';
let templateName = familyTree.templateName;

Returns string

Gets or sets the template name.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.templateName = 'kitkat';
let templateName = familyTree.templateName;

Parameters

value: string

Returns void

Methods

addChild

addChild(parent1Id: string | number, parent2Id?: string | number, familyMember?: FamilyMember): FamilyTree2

Adds a child to the family tree.

Here is an example with two parents of the added child:

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).addChild(1, 2, {name: "Maria"}).draw(1);

Here is an example with one parent of the added child:

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).addChild(1, {name: "Maria"}).draw(1);

Parameters

parent1Id: string | number

The ID of the first parent.
Optional parent2Id: string | number

The ID of the second parent (optional).
Optional familyMember: FamilyMember

Additional data for the child node (optional).

Returns FamilyTree2

Family tree object.

addFamilyMembers

addFamilyMembers(familyMembers: FamilyMember[]): FamilyTree2

Add family members.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).draw(1);

Parameters

familyMembers: FamilyMember[]

Returns FamilyTree2

addFather

addFather(childId: string | number, familyMember?: FamilyMember): FamilyTree2

Adds a father to the specified family member.
```
let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
].addFather(1, {name: "Derek"}).draw(1);
```
Parameters
- childId: string | number
  
  The ID of the family member to whom the father will be added.
- Optional familyMember: FamilyMember
  
  Tha family member object
Returns FamilyTree2
Family tree object.

addMother

addMother(childId: string | number, familyMember?: FamilyMember): FamilyTree2

Adds a mother to the specified family member.
```
let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).addMother(1, {name: "Maria"}).draw(1);
```
Parameters
- childId: string | number
  
  The ID of the family member to whom the mother will be added.
- Optional familyMember: FamilyMember
  
  The data object containing information about the mother.
Returns FamilyTree2
Family tree object.

addSibling

addSibling(siblingId: string | number, familyMember?: FamilyMember): FamilyTree2

Adds a sibling to the specified family member.
```
let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).addSibling(1, {name: "Maria"}).draw(1);
```
Parameters
- siblingId: string | number
  
  The ID of the family member to whom the sibling will be added.
- Optional familyMember: FamilyMember
  
  The data of the new sibling.
Returns FamilyTree2
Family tree object.

addSpouse

addSpouse(spouseId: string | number, familyMember: FamilyMember): FamilyTree2

Adds a spouse to the specified family member.

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).addSpouse(1, {name: "Maria"}).draw(1);

Parameters

spouseId: string | number

The ID of the family member to whom the spouse will be added.
familyMember: FamilyMember

The spouse's data.

Returns FamilyTree2

Family tree object.

addUnmarriedPartner

addUnmarriedPartner(familyMemberId: string | number, familyMember: FamilyMember): FamilyTree2

Adds an unmarried partner to the specified family member.
```
let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).addUnmarriedPartner(1, {name: "Maria"}).draw(1);
```
Parameters
- familyMemberId: string | number
  
  The ID of the family member to whom the partner will be added.
- familyMember: FamilyMember
  
  he data of the unmarried partner to be added.
Returns FamilyTree2
Family tree object.

centerNodes

centerNodes(nodes: Node[]): void

Parameters
- nodes: Node[]
Returns void

clear

clear(): void

Clears the chart.

familyTree.onLoaded(() => {
   familyTree.clear()
});

Returns void

clearState

clearState(stateName: string): void

Clears the state

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.clearState('myStateName');

Parameters

stateName: string

Returns void

destroy

destroy(): void

Destroys the familyTree instance.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).draw(1);

familyTree.destroy();

Returns void

draw

draw(focusId?: string | number, freezeId?: string | number, callback?: () => void): void

Draws the tree.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).draw(1);

Parameters

Optional focusId: string | number
Optional freezeId: string | number
Optional callback: () => void
- - (): void
  - Returns void

Returns void

edit

edit(familyMemberId: string | number, callback?: () => void): void

Show node relations to add.

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.readOnly = false;

familyTree.addFamilyMembers([{ id: 1 }])
   .draw(1, null, function() {
       this.edit(1, 'name');
   });

Parameters

familyMemberId: string | number
Optional callback: () => void
- - (): void
  - Returns void

Returns void

fit

fit(): void

Fits the family tree in the tree div.

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([
   {
       id: 1,
       fatherId: 2,
       motherId: 3,
       spouseIds: [4],
       siblingIds: [5, 6],
       childIds: [7],
       name: 'Me'
   },
   { id: 2, name: 'Father' },
   { id: 3, name: 'Mother' },
   { id: 4, childIds: [7], name: 'Spouse' },
   { id: 5, name: 'Sibling 1', motherId: 8 },
   { id: 6, name: 'Sibling 2' },
   { id: 7, name: 'Child' },
   { id: 8, name: 'Mother 1' }
]).draw(1);

familyTree.fit();

Returns void

getFemilyMember

getFemilyMember(id: string | number): FamilyMember

Retrieves a family member by ID.

Parameters

id: string | number

The family member's ID.

Returns FamilyMember

Femily member object.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).draw(1);

let familyMember = familyTree.getFemilyMember(2);

getNode

getNode(id: string | number): Node

Returns the node object.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.onLoaded(() => {
   let node = familyTree.getNode(2);
   //...
});

familyTree.addFamilyMembers([
   { id: 1, spouseIds: [2], childIds: [3, 4] },
   { id: 2, childIds: [3, 4] },
   { id: 3 },
   { id: 4 }
]).draw(1);

Parameters

id: string | number

Returns Node

onDemand

onDemand(listener: (args: { ids: (string | number)[] }) => void): FamilyTree2

Registers an event listener for the 'demand' event. Triggers when new data from the server is required.

Parameters
- listener: (args: { ids: (string | number)[] }) => void
  
  The function to be called when the 'demand' event is triggered.
  - - (args: { ids: (string | number)[] }): void
    - Parameters
      - args: { ids: (string | number)[] }
        ids: (string | number)[]
        
        An array of IDs that needs to be pulled from the server or any source.
      Returns void
Returns FamilyTree2
Family tree object.
```
let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.onDemand(function (args) {
  fetch(`https://familytree.balkan.app/FetchFamilyMembers/c8sshc/${args.ids.join(',')}`)
      .then((data) => data.json())
      .then((data) => familyTree.addFamilyMembers(data).draw());
});
```

onFocusButtonClick

onFocusButtonClick(listener: (args: { newFocusId: string | number; oldFocusId: string | number }) => void): FamilyTree2

Registers an event listener for the onFocusButtonClick event. Triggers when a new family member is focused from the UI or programmatically.

Parameters
- listener: (args: { newFocusId: string | number; oldFocusId: string | number }) => void
  
  The function to be called when the onFocusButtonClick event is triggered.
  - - (args: { newFocusId: string | number; oldFocusId: string | number }): void
    - Parameters
      - args: { newFocusId: string | number; oldFocusId: string | number }
        newFocusId: string | number
        
        New family tree member ID that will be focussed
        
        oldFocusId: string | number
        
        Old family tree member ID that was focussed
      Returns void
Returns FamilyTree2
Family tree object.
```
let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.onFocusButtonClick(function (args) {
   fetch('https://familytree.balkan.app/FetchFamily/c8sshc/' + args.newFocusId)
       .then((data) => data.json())
       .then((data) => familyTree.addFamilyMembers(data).draw(args.newFocusId, familyTree.fit));
   return false;
});
```

onLoaded

onLoaded(listener: (args: {}) => void): FamilyTree2

Registers a new event listener that will be called after the family tree has been loaded.

Parameters

listener: (args: {}) => void

The function to be called after the tree is loaded.
- - (args: {}): void
  - Parameters
    - args: {}
    Returns void

Returns FamilyTree2

Family tree object.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.onLoaded(() => {
   alert('Family tree loaded');
});

familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).addSpouse(1, { name: "Maria" }).draw(1);

onNodeClick

onNodeClick(listener: (args: { event: MouseEvent; node: Node }) => void): FamilyTree2

Fires an event when you click on a node

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.onNodeClick(function(args){
   alert('node clicked')
});

familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).draw(1);

Parameters

listener: (args: { event: MouseEvent; node: Node }) => void
- - (args: { event: MouseEvent; node: Node }): void
  - Parameters
    - args: { event: MouseEvent; node: Node }
      - event: MouseEvent
      - node: Node
    Returns void

Returns FamilyTree2

onSvgClick

onSvgClick(listener: (args: { event: MouseEvent }) => void): FamilyTree2

Fires an event when you click outside a anode

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.onSvgClick(function(args){
   alert('svg clicked')
});

familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).draw(1);

Parameters

listener: (args: { event: MouseEvent }) => void
- - (args: { event: MouseEvent }): void
  - Parameters
    - args: { event: MouseEvent }
      - event: MouseEvent
    Returns void

Returns FamilyTree2

onUpdated

onUpdated(listener: (args: { insert: FamilyMember[]; remove: (string | number)[]; update: FamilyMember[] }) => void): FamilyTree2

Registers an update listener for the 'updated' event. Triggers when one or more family tree members are updated, added, or removed.

Parameters
- listener: (args: { insert: FamilyMember[]; remove: (string | number)[]; update: FamilyMember[] }) => void
  
  The function to be called when the 'updated' event is triggered.
  - - (args: { insert: FamilyMember[]; remove: (string | number)[]; update: FamilyMember[] }): void
    - Parameters
      - args: { insert: FamilyMember[]; remove: (string | number)[]; update: FamilyMember[] }
        insert: FamilyMember[]
        
        An array of family members that needs to be inserted or added in the storage
        
        remove: (string | number)[]
        
        An array of IDs that needs to be removed or delted from the storage.
        
        update: FamilyMember[]
        
        An array of family members that needs to be updated / synced in the storage
      Returns void
Returns FamilyTree2
Family tree.
```
let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.onUpdated(function (args) {
    // Option 1 - update your server with the new data in args
    // Option 2 - update your server with the array from familyTree.family
});
```

remove

remove(familyMemberId: string | number): FamilyTree2

Removes specified family member

Parameters

familyMemberId: string | number

Family member id that will be removed

Returns FamilyTree2

Family tree object

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]);

familyTree.remove(2).draw(1);

select

select(familyMemberId: string | number): FamilyTree2

Select family member node.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).draw(1, null, function () {
   this.select(2);
});

Parameters

familyMemberId: string | number

Returns FamilyTree2

showEditor

showEditor(familyMemberId: string | number): FamilyTree2

Shows the edit/details form for a node ID.

let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.addFamilyMembers([
   { id: 1, name: "John", spouseIds: [2] },
   { id: 2, name: "Ana" }
]).draw(1);

familyTree.showEditor(2);

Parameters

familyMemberId: string | number

Returns FamilyTree2

stateToUrl

stateToUrl(): string

Creates URL parameners from the state

let familyTree = new FamilyTree2(document.getElementById('tree'));
familytree.state.name = "StateForMyTree";
familyTree.state.writeToUrlParams = true;
familyTree.state.readFromUrlParams = true;

document.getElementById('button').addEventListener('click', function () {
   let location = window.location + '?' + familyTree.stateToUrl()
   window.open(location);
});

Returns string

svg

svg(): string

Retrieves an SVG representation of the chart.

Returns string

SVG as string

let familyTree = new FamilyTree2(document.getElementById('tree'));
familyTree.addFamilyMembers([{ id: 1, spouseIds: [2] }, { id: 2 }])
   .draw(1);

let svg = familyTree.svg();

Static createTemplate

createTemplate(targetTemplateName: string, sourceTemplateName?: string): Template

Creates a family tree template.

Parameters
- targetTemplateName: string
  
  The name of the new template.
- Optional sourceTemplateName: string
  
  The name of the source template.
Returns Template
Family tree template object.
```
let familyTree = new FamilyTree2(document.getElementById('tree'));

familyTree.template = FamilyTree2.createTemplate("myTemplate", "base");
```

Generated using TypeDoc

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Optional element: string | HTMLElement

Returns FamilyTree2

Properties

state

Type declaration

name: string

readFromLocalStorage: boolean

readFromSessionStorage: boolean

readFromUrlParams: boolean

writeToLocalStorage: boolean

writeToSessionStorage: boolean

writeToUrlParams: boolean

Accessors

collapsedIds

Returns (string | number)[]

Parameters

value: (string | number)[]

Returns void

editId

Returns string | number

element

Returns HTMLElement

family

Returns FamilyMember[]

focusId

Returns string | number

mode

Returns string

Parameters

value: string

Returns void

navigationBar

Returns boolean

Parameters

value: boolean

Returns void

readOnly

Returns boolean

Parameters

value: boolean

Returns void

svgElement

Returns SVGElement

template

Returns Template

templateName

Returns string

Parameters

value: string

Returns void

Methods

addChild

Parameters

parent1Id: string | number

Optional parent2Id: string | number

Optional familyMember: FamilyMember

Returns FamilyTree2

addFamilyMembers

Parameters

familyMembers: FamilyMember[]

Returns FamilyTree2

addFather

Parameters

childId: string | number

Optional familyMember: FamilyMember

Returns FamilyTree2

addMother

Parameters

childId: string | number

Optional familyMember: FamilyMember

Returns FamilyTree2