@balkangraph/familytree2.js
Version:
Build family tree app with BALKAN FamilyTree JS library. Family Tree also called a genealogy or a pedigree chart, is a chart representing family relationships in a conventional tree structure.
1,491 lines • 42.9 kB
TypeScript
/**
* Basic usage:
* ```ts
* 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
* ```ts
* 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'));
* ```
*/
declare class FamilyTree2 {
/**
* Internal property for storing chart data and configurations.
* @ignore
*/
_: any;
/**
* Gets the SVG element of the chart.
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
* const svg = familyTree.svgElement;
* ```
*/
get svgElement(): SVGElement;
get shortcuts(): {
[key: string]: {
keysPressed?: Array<string>;
mouseActions?: Array<string>;
activeComponentType?: string;
desc?: string;
};
};
/**
* Gets or sets the read-only state of the chart.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.readOnly = false;
* const readOnly = familyTree.readOnly;
* ```
*/
get readOnly(): boolean;
set readOnly(value: boolean);
get controlsUI(): FamilyTree2.ControlsUI;
get navigationBar(): boolean;
set navigationBar(value: boolean);
/**
* Gets or sets the current mode of the chart. It could be 'dark' or 'light'
* Default value: "light";
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
* familyTree.mode = "dark";
* ```
*/
get mode(): 'dark' | 'light' | string;
set mode(value: "dark" | "light" | string);
/**
* The collapsed node IDs.
* This property allows you to get and set the collapsed node IDs.
*
* ```ts
* 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
* ```
*/
get collapsedIds(): Array<string | number>;
set collapsedIds(value: Array<string | number>);
/**
* Gets the edited node ID.
*
* ```ts
* 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)
* });
* ```
*/
get editId(): string | number;
/**
* Gets the root HTML element of the chart.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
* let treeElement = familyTree.element;
* ```
*/
get element(): HTMLElement;
/**
* Persist the state (scale, position, expand/collapse and focus) in the url or local storage
*
* ```ts
* 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;
* ```
*/
state: {
name: string;
readFromUrlParams: boolean;
writeToUrlParams: boolean;
readFromLocalStorage: boolean;
writeToLocalStorage: boolean;
readFromSessionStorage: boolean;
writeToSessionStorage: boolean;
};
/**
* Gets the focus ID.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.addFamilyMembers([{ id: 1, spouseIds: [2] }, { id: 2 }])
* .draw(1, null, function() {
* let focusId = familyTree.focusId;
* });
* ```
*/
get focusId(): string | number;
/**
* Gets the family data.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
* familyTree.addFamilyMembers([{ id: 1, spouseIds: [2] }, { id: 2 }]).draw(1);
*
* let family = familyTree.family;
* ```
*/
get family(): Array<FamilyTree2.FamilyMember>;
/**
* Gets or sets the template name.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.templateName = 'kitkat';
* let templateName = familyTree.templateName;
* ```
*/
get templateName(): string;
set templateName(value: string);
/**
* Gets the template object.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* let template = familyTree.template;
* ```
*/
get template(): FamilyTree2.Template;
/**
* @ignore
*/
autoGenerateSiblingChildSpouseIds: boolean;
/**
* Initializes a new instance of FamilyTree2.
*
* @param element The HTML element where the family tree will be rendered.
*
* @example
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
* ```
*/
constructor(element?: HTMLElement | string);
/**
* Clears the chart.
*
* ```ts
* familyTree.onLoaded(() => {
* familyTree.clear()
* });
* ```
*/
clear(): void;
/**
* Show node relations to add.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
* familyTree.readOnly = false;
*
* familyTree.addFamilyMembers([{ id: 1 }])
* .draw(1, null, function() {
* this.edit(1, 'name');
* });
* ```
*/
edit(familyMemberId: string | number, callback?: (this: FamilyTree2) => void): void;
/**
* Retrieves an SVG representation of the chart.
* @returns SVG as string
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
* familyTree.addFamilyMembers([{ id: 1, spouseIds: [2] }, { id: 2 }])
* .draw(1);
*
* let svg = familyTree.svg();
* ```
*/
svg(): string;
/**
* Retrieves a family member by ID.
* @param id The family member's ID.
* @returns Family member object.
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.addFamilyMembers([
* { id: 1, name: "John", spouseIds: [2] },
* { id: 2, name: "Ana" }
* ]).draw(1);
*
* let familyMember = familyTree.getFamilyMember(2);
* ```
*/
getFamilyMember(id: string | number): FamilyTree2.FamilyMember;
/**
* Returns the node object.
*
* ```ts
* 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);
* ```
*/
getNode(id: string | number): FamilyTree2.Node;
centerNodes(nodes: Array<FamilyTree2.Node>): void;
static convertGedcomToFamilyMembers(gedcomText: string, fieldBinding?: {
[key: string]: string;
}): Array<FamilyTree2.FamilyMember>;
exportToGedcom(): string;
center(node: FamilyTree2.Node): void;
/**
* Fits the family tree in the tree div.
*
* ```ts
* 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();
* ```
*/
fit(): void;
/**
* @ignore
* @param nodeIds
* @param callback
*/
makeNodesVisible(nodeIds: Array<string | number>, callback?: (this: FamilyTree2) => void): void;
/**
* Draws the tree.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.addFamilyMembers([
* { id: 1, name: "John", spouseIds: [2] },
* { id: 2, name: "Ana" }
* ]).draw(1);
* ```
*/
draw(focusId?: string | number, freezeId?: string | number, callback?: (this: FamilyTree2) => void): void;
/**
* Removes specified family member
* @param familyMemberId Family member id that will be removed
* @returns Family tree object
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
* familyTree.addFamilyMembers([
* { id: 1, name: "John", spouseIds: [2] },
* { id: 2, name: "Ana" }
* ]);
*
* familyTree.remove(2).draw(1);
* ```
*/
remove(familyMemberId: string | number): FamilyTree2;
/**
* Add family members.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.addFamilyMembers([
* { id: 1, name: "John", spouseIds: [2] },
* { id: 2, name: "Ana" }
* ]).draw(1);
* ```
*/
addFamilyMembers(familyMembers: Array<FamilyTree2.FamilyMember>): FamilyTree2;
/**
* Adds a father to the specified family member.
* ```ts
* 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);
* ```
* @param childId The ID of the family member to whom the father will be added.
* @param familyMember Tha family member object
* @returns Family tree object.
*/
addFather(childId: string | number, familyMember?: FamilyTree2.FamilyMember): FamilyTree2;
/**
* Adds a mother to the specified family member.
* ```ts
* 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);
* ```
* @param childId The ID of the family member to whom the mother will be added.
* @param familyMember The data object containing information about the mother.
* @returns Family tree object.
*/
addMother(childId: string | number, familyMember?: FamilyTree2.FamilyMember): FamilyTree2;
/**
* Adds a sibling to the specified family member.
* ```ts
* 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);
* ```
* @param siblingId The ID of the family member to whom the sibling will be added.
* @param familyMember The data of the new sibling.
* @returns Family tree object.
*/
addSibling(siblingId: string | number, familyMember?: FamilyTree2.FamilyMember): FamilyTree2;
/**
* Adds a spouse to the specified family member.
* ```ts
* 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);
* ```
* @param spouseId The ID of the family member to whom the spouse will be added.
* @param familyMember The spouse's data.
* @returns Family tree object.
*/
addSpouse(spouseId: string | number, familyMember: FamilyTree2.FamilyMember): FamilyTree2;
/**
* Adds an unmarried partner to the specified family member.
* ```ts
* 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);
* ```
* @param familyMemberId The ID of the family member to whom the partner will be added.
* @param familyMember he data of the unmarried partner to be added.
* @returns Family tree object.
*/
addUnmarriedPartner(familyMemberId: string | number, familyMember: FamilyTree2.FamilyMember): FamilyTree2;
/**
* Adds a child to the family tree.
*
* Here is an example with two parents of the added child:
* ```ts
* 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:
*
* ```ts
* 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);
* ```
* @param parent1Id The ID of the first parent.
* @param parent2Id The ID of the second parent (optional).
* @param familyMember Additional data for the child node (optional).
* @returns Family tree object.
*/
addChild(parent1Id: string | number, parent2Id?: string | number, familyMember?: FamilyTree2.FamilyMember): FamilyTree2;
/**
* Select family member node.
*
* ```ts
* 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);
* });
* ```
*/
select(familyMemberId: string | number): FamilyTree2;
/**
* Shows the edit/details form for a node ID.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.addFamilyMembers([
* { id: 1, name: "John", spouseIds: [2] },
* { id: 2, name: "Ana" }
* ]).draw(1);
*
* familyTree.showEditor(2);
* ```
*/
showEditor(familyMemberId: string | number): FamilyTree2;
/**
* @ignore
* @returns
*/
hideEditor(): FamilyTree2;
/**
* Destroys the familyTree instance.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.addFamilyMembers([
* { id: 1, name: "John", spouseIds: [2] },
* { id: 2, name: "Ana" }
* ]).draw(1);
*
* familyTree.destroy();
* ```
*/
destroy(): void;
/**
* Clears the state
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.clearState('myStateName');
* ```
*/
clearState(stateName: string): void;
/**
* Creates URL parameners from the state
*
* ```ts
* 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);
* });
* ```
*/
stateToUrl(): string;
/**
* Registers an event listener for the 'demand' event.
* Triggers when new data from the server is required.
*
* @param listener The function to be called when the 'demand' event is triggered.
* @returns Family tree object.
*
* ```ts
* 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());
* });
* ```
*/
onDemand(listener: (args: {
/**
* An array of IDs that needs to be pulled from the server or any source.
*/
ids: Array<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.
*
* @param listener The function to be called when the onFocusButtonClick event is triggered.
* @returns Family tree object.
*
* ```ts
* 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;
* });
* ```
*/
onFocusButtonClick(listener: (args: {
/**
* New family tree member ID that will be focussed
*/
newFocusId: string | number;
/**
* Old family tree member ID that was focussed
*/
oldFocusId: string | number;
}) => void): FamilyTree2;
/**
* Registers an update listener for the 'updated' event.
* Triggers when one or more family tree members are updated, added, or removed.
*
* @param listener The function to be called when the 'updated' event is triggered.
* @returns Family tree.
*
* ```ts
* 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
* });
* ```
*/
onUpdated(listener: (args: {
/**
* An array of IDs that needs to be removed or delted from the storage.
*/
remove: Array<string | number>;
/**
* An array of family members that needs to be updated / synced in the storage
*/
update: Array<FamilyTree2.FamilyMember>;
/**
* An array of family members that needs to be inserted or added in the storage
*/
insert: Array<FamilyTree2.FamilyMember>;
}) => void): FamilyTree2;
/**
* Fires an event when you click on a node
*
* ```ts
* 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);
* ```
* @param listener
* @returns
*/
onNodeClick(listener: (args: {
node: FamilyTree2.Node;
event: MouseEvent;
}) => void): FamilyTree2;
/**
* Fires an event when you click outside a anode
*
* ```ts
* 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);
* ```
* @param listener
* @returns
*/
onSvgClick(listener: (args: {
event: MouseEvent;
}) => void): FamilyTree2;
/**
* Registers a new event listener that will be called after the family tree has been loaded.
*
* @param listener The function to be called after the tree is loaded.
* @returns Family tree object.
*
* ```ts
* 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);
* ```
*/
onLoaded(listener: (args: {}) => void): FamilyTree2;
/**
* Creates a family tree template.
*
* @param targetTemplateName The name of the new template.
* @param sourceTemplateName The name of the source template.
* @returns Family tree template object.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.template = FamilyTree2.createTemplate("myTemplate", "base");
* ```
*/
static createTemplate(targetTemplateName: string, sourceTemplateName?: string): FamilyTree2.Template;
}
declare namespace FamilyTree2 {
/**
* @ignore
*/
interface Point {
x: number;
y: number;
}
/**
* The Node object.
*
* Basic usage:
* ```ts
* let node = familyTree.getNode(2);
* ```
*
* Full example:
* ```ts
* 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);
* ```
*/
interface Node {
/**
* The id of the node
*
* ```ts
* let id = node.id;
* ```
*/
readonly id: string | number;
/**
* The template id of the node (depending on the relationship type)
*
* ```ts
* let templateId = node.templateId;
* ```
*/
templateId: string;
/**
* The left X point of the node.
*
* ```ts
* let left = node.left;
* ```
*/
readonly left: number;
/**
* The right X point of the node.
*
* ```ts
* let right = node.right;
* ```
*/
readonly right: number;
/**
* The top Y point of the node.
*
* ```ts
* let top = node.top;
* ```
*/
readonly top: number;
/**
* The bottom Y point of the node.
*
* ```ts
* let bottom = node.bottom;
* ```
*/
readonly bottom: number;
/**
* The width of the node.
*
* ```ts
* let width = node.width;
* ```
*/
width: number;
/**
* The height of the node.
*
* ```ts
* let height = node.height;
* ```
*/
height: number;
/**
* @ignore
*/
type: string;
/**
* True if the node is selected
*
* ```ts
* let selected = node.selected;
* ```
*/
selected: boolean;
/**
* The HTML element of the node
*
* ```ts
* let element = node.element;
* ```
*/
element: HTMLElement;
/**
* The stroke color of the node
*
* ```ts
* let stroke = node.stroke;
* ```
*/
stroke: string;
/**
* The stroke width of the node
*
* ```ts
* let strokeWidth = node.strokeWidth;
* ```
*/
strokeWidth: number;
/**
* @ignore
*/
[name: string]: any;
/**
* @ignore
*/
layer: number;
/**
* The family tree data of the node
*
* ```ts
* let familyMember = node.familyMember;
* ```
*/
familyMember: FamilyTree2.FamilyMember;
/**
* The relationship type of the node
*
* ```ts
* let relationshipType = node.relationshipType;
* ```
*/
relationshipType: string;
/**
* The node level
*
* ```ts
* let level = node.level;
* ```
*/
level: number;
/**
* The collpased parens of the node
*
* ```ts
* let collapsedParents = node.collapsedParents;
* ```
*/
collapsedParents: Array<number | string>;
/**
* @ignore
*/
primaryParentId: number | string;
/**
* @ignore
*/
secondaryParentId: number | string;
/** Node parents
*
* ```ts
* let parents = node.parents;
* ```
*/
parents: Array<number | string>;
/** Node mother id
*
* ```ts
* let motherId = node.motherId;
* ```
*/
motherId: number | string;
/** Node father id
*
* ```ts
* let fatherId = node.fatherId;
* ```
*/
fatherId: number | string;
/** Node children ids
*
* ```ts
* let children = node.children;
* ```
*/
children: Array<number | string>;
/** Collpased children ids
*
* ```ts
* let collapsedChildren = node.collapsedChildren;
* ```
*/
collapsedChildren: Array<number | string>;
/** Collpased siblings ids
*
* ```ts
* let collapsedSiblings = node.collapsedSiblings;
* ```
*/
collapsedSiblings: Array<number | string>;
/** Node siblings ids
*
* ```ts
* let siblings = node.siblings;
* ```
*/
siblings: Array<number | string>;
/** Node sibling id
* @ignore
*/
sibling: number | string;
/** Collpased spouses ids
*
* ```ts
* let collapsedSpouses = node.collapsedSpouses;
* ```
*/
collapsedSpouses: Array<number | string>;
/** Node spouses ids
*
* ```ts
* let spouses = node.spouses;
* ```
*/
spouses: Array<number | string>;
/** Node sibling id
* @ignore
*/
spouse: number | string;
/** True if it is unmarried partner
*
* ```ts
* let isUnmarriedPartner = node.isUnmarriedPartner;
* ```
*/
isUnmarriedPartner: boolean;
/** True if it is step parent
*
* ```ts
* let isStepParent = node.isStepParent;
* ```
*/
isStepParent: boolean;
/** Link position in order the link to not overlap
*
* ```ts
* let linkToChildrenIndex = node.linkToChildrenIndex;
* ```
*/
linkToChildrenIndex: number;
/** Link position in order the link to not overlap
*
* ```ts
* let linkToParentsIndex = node.linkToParentsIndex;
* ```
*/
linkToParentsIndex: number;
nonDottedId: number | string;
}
/**
* @ignore
*/
interface Link {
readonly width: number;
readonly height: number;
readonly length: number;
readonly pathElement: HTMLElement;
templateId: string;
points: Array<Point>;
from: number | string;
to: number | string;
fromPort: number | string;
toPort: number | string;
}
/**
* @ignore
*/
interface ShapeTemplate {
displayName: string;
svg(link: FamilyTree2.Node): string;
html(link: FamilyTree2.Node): string;
ports(link: FamilyTree2.Node): {
[key: string]: {
x: number;
y: number;
};
};
offset(shape: FamilyTree2.Node): {
x: number;
y: number;
};
svgFront(link: FamilyTree2.Node): string;
width?: number | string;
height?: number | string;
minWidth?: number;
minHeight?: number;
fill?: string;
stroke?: string;
strokeWidth?: number;
displayInShapeBar?: boolean;
displayInPortShapeBar?: boolean;
resizable?: boolean;
static?: boolean;
}
/**
* The template link object.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* let link = familyTree.template.link;
* ```
*/
interface LinkTemplate {
/**
*
* @ignore
*/
path(link: FamilyTree2.Link): string;
/**
* The template link object.
*
* @example
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.template.link.svg = function (link) {
* let strokeDasharray = '';
* let stroke = link.stroke;
*
* if (link.toNode.familyMember.flag) {
* strokeDasharray = 'stroke-dasharray="4"';
* stroke = 'blue';
* }
*
* return `<path ${strokeDasharray} style="fill: none; stroke: ${stroke}; stroke-width: ${link.strokeWidth}px;" marker-start="url(#rounded_start)" marker-end="url(#rounded_end)"></path>`;
* };
* ```
*/
svg(link: FamilyTree2.Link): string;
/**
* The template link stroke color.
*
* @example
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.template.link.stroke = "red";
* ```
*/
stroke?: string;
/**
* The template link stroke width.
*
* @example
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.template.link.strokeWidth = 3;
* ```
*/
strokeWidth?: number;
/**
* @ignore
*/
markerStart?: string;
/**
* @ignore
*/
markerEnd?: string;
/**
* @ignore
*/
markerMid?: string;
}
/**
* A family member object.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* familyTree.addFamilyMembers([
* { id: 1, name: "John", spouseIds: [2], address: "London" },
* { id: 2, name: "Ana", address: "London" }
* ]).draw(1);
*
* let familyMember = familyTree.getFamilyMember();
* ```
*/
interface FamilyMember {
/**
* ```ts
* let id = familymember.id
* ```
*/
id: string | number;
/**
* ```ts
* let motherId = familymember.motherId;
* ```
*/
motherId?: string | number;
/**
* ```ts
* let fatherId = familymember.fatherId;
* ```
*/
fatherId?: string | number;
/**
* ```ts
* let siblingIds = familymember.siblingIds;
* ```
*/
siblingIds?: Array<string | number>;
/**
* ```ts
* let spouseIds = familymember.spouseIds;
* ```
*/
spouseIds?: Array<string | number>;
/**
* ```ts
* let childIds = familymember.childIds;
* ```
*/
childIds?: Array<string | number>;
/**
* ```ts
* let unmarriedPartnerIds = familymember.unmarriedPartnerIds;
* ```
*/
unmarriedPartnerIds?: Array<string | number>;
/**
* ```ts
* let stepParentIds = familymember.stepParentIds;
* ```
*/
stepParentIds?: Array<string | number>;
/**
* ```ts
* let sexOrGender = familymember.sexOrGender;
* ```
*/
sexOrGender?: 'male' | 'female' | string;
/**
* ```ts
* let name = familymember.name;
* let address = familymember.address;
* ```
*/
[name: string]: any;
}
/**
* A template object.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* let template = familyTree.template;
* ```
*/
interface Template {
/**
* Defines he node HTML.
*
* ```ts
* template.html = function(node) {
* return `<div data-field="address">${node.familyMember.name}</div>`;
* };
* ```
*/
html(node: FamilyTree2.Node): void;
/**
* Defines he node SVG.
*
* ```ts
* template.svg = function(node){
* return `<rect rx="20" ry="20" x="0" y="0"
* width="${node.width}" height="${node.height}"
* style=" stroke:${node.stroke}; fill: ${node.fill}; stroke-width: ${node.strokeWidth};">
* </rect>`;
* };
* ```
*/
svg(node: FamilyTree2.Node): string;
/**
* Adds SVG to the node.
*
* ```ts
* template.insertSvg = function(node){
* return `<text text-anchor="end" x="${node.width}" y="${node.height + 16}">
* ${node.relationshipType}
* </text>`
* };
* ```
*/
insertSvg(node: FamilyTree2.Node): string;
/**
* Defines the SVG buttons.
*
* ```ts
* familyTree.template.svgButton = function (node, x, y, text, icon, type, color, title) {
* let radius = 12;
*
* if (type == 'edit' || type == 'camera') {
* return '';
* }
*
* if (type == 'focus') {
* radius = 16;
* x = 0;
* y = node.height / 2;
* icon = `
* <svg xmlns="http://www.w3.org/2000/svg"
* width="24" height="24" x="4" y="4"
* viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
* <circle cx="11" cy="11" r="8"></circle>
* <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
* </svg>`;
* }
*
* return `
* <g transform="translate(${x - radius}, ${y - radius})"
* data-button="${type}" class="bft2-button">
* <circle cx="${radius}" cy="${radius}" r="${radius}"
* style="fill:${color}; stroke-width:0;" />
* ${icon}
* ${text}
* </g>`;
* }
* ```
*/
svgButton(node: FamilyTree2.Node, x: number, y: number, text: string, icon: string, type: string, color: string, title: string): string;
/**
* Nodes width.
*
* ```ts
* template.width = 300;
* template.nodes.focus.width = 350;
* ```
*/
width: number;
/**
* Nodes height.
*
* ```ts
* template.height = 200;
* template.nodes.focus.height = 250;
* ```
*/
height: number;
/**
* Nodes color.
*
* ```ts
* template.fill = '#F57C00';
* template.nodes.focus.fill = '#039BE5';
* ```
*/
fill: string;
layout: string;
/**
* Nodes border width.
*
* ```ts
* template.strokeWidth = 5;
* template.nodes.focus.strokeWidth = 7;
* ```
*/
strokeWidth: number;
/**
* Nodes border color.
*
* ```ts
* template.stroke = '#FFCA28';
* template.nodes.focus.stroke = '#F57C00';
* ```
*/
stroke: number;
/**
* @ignore
*/
editor: {
header(node: FamilyTree2.Node): string;
buttons(node: FamilyTree2.Node): string;
content(node: FamilyTree2.Node, family: Array<FamilyTree2.FamilyMember>): string;
readOnlyContent(node: FamilyTree2.Node, family: Array<FamilyTree2.FamilyMember>): string;
};
/**
* Relationship node types
*
* ```ts
* let nodes = template.nodes;
* ```
*/
nodes: {
focus: FamilyTree2.ShapeTemplate;
parent: FamilyTree2.ShapeTemplate;
spouse: FamilyTree2.ShapeTemplate;
sibling: FamilyTree2.ShapeTemplate;
child: FamilyTree2.ShapeTemplate;
parentInLaw: FamilyTree2.ShapeTemplate;
parentSibling: FamilyTree2.ShapeTemplate;
stepParent: FamilyTree2.ShapeTemplate;
childInLaw: FamilyTree2.ShapeTemplate;
pibling: FamilyTree2.ShapeTemplate;
};
/**
* Template Link
*
* ```ts
* let link = template.link;
* ```
*/
link: FamilyTree2.LinkTemplate;
/**
* Separations between nodes
*
* ```ts
* let separations = template.separations;
* ```
*/
separations: FamilyTree2.Separations;
/**
* @ignore
*/
svgVacant(node: FamilyTree2.ShapeTemplate): string;
/**
* @ignore
*/
defs: string;
}
/**
* Separations between nodes.
*
* ```ts
* let familyTree = new FamilyTree2(document.getElementById('tree'));
*
* let separations = familyTree.template.separations;
* ```
*/
interface Separations {
/**
* ```ts
* separations.linkStep = 10;
* ```
*/
linkStep: number;
/**
* ```ts
* separations.childSubtree = 180;
* ```
*/
childSubtree: number;
/**
* ```ts
* separations.childLevel = 150;
* ```
*/
childLevel: number;
/**
* ```ts
* separations.childNeighbor = 200;
* ```
*/
childNeighbor: number;
/**
* ```ts
* separations.parentSubtree = 200;
* ```
*/
parentSubtree: number;
/**
* ```ts
* separations.parentLevel = 200;
* ```
*/
parentLevel: number;
/**
* ```ts
* separations.parentNeighbor = 220;
* ```
*/
parentNeighbor: number;
/**
* ```ts
* separations.focusSide = 200;
* ```
*/
focusSide: number;
/**
* ```ts
* separations.focusBottom = 150;
* ```
*/
focusBottom: number;
/**
* ```ts
* separations.childSide = 200;
* ```
*/
childSide: number;
/**
* ```ts
* separations.parentSide = 200;
* ```
*/
parentSide: number;
/**
* ```ts
* separations.piblingNeighbor = 90;
* ```
*/
piblingNeighbor: number;
/**
* ```ts
* separations.siblingNeighbor = 90;
* ```
*/
siblingNeighbor: number;
/**
* ```ts
* separations.childInLowNeighbor = 90;
* ```
*/
childInLowNeighbor: number;
/**
* ```ts
* separations.spouseNeighbor = 90;
* ```
*/
spouseNeighbor: number;
/**
* ```ts
* separations.stepParentNeighbor = 90;
* ```
*/
stepParentNeighbor: number;
}
enum anchor {
topRight = "top_right",
rightTop = "right_top",
bottomRight = "bottom_right",
rightBottom = "right_bottom",
topLeft = "top_left",
leftTop = "left_top",
bottomLeft = "bottom_left",
leftBottom = "left_bottom",
top = "top",
bottom = "bottom",
left = "left",
right = "right"
}
interface Control {
title: string;
icon?: string;
isOn?: boolean;
anchor?: FamilyTree2.anchor;
}
class ControlsUI {
/**
* Internal property for storing chart data and configurations.
* @ignore
*/
_: any;
constructor(instance: FamilyTree2);
onControlClick(listener: (this: FamilyTree2.ControlsUI, args: {
control: FamilyTree2.Control;
key: string;
isOn: boolean;
}) => void): FamilyTree2.ControlsUI;
show(options: Record<string, FamilyTree2.Control>): void;
hide(): void;
}
}
export default FamilyTree2