@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.
426 lines • 15.8 kB
TypeScript
/**
* Basic usage:
* ```typescript
* var 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
* ```typescript
* var 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())
* });
*
* 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;
* });
*
* 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.
*/
_: any;
/**
* Gets the SVG element of the chart.
*/
get svgElement(): SVGElement;
/**
* Gets or sets the read-only state of the chart.
*/
get readOnly(): boolean;
set readOnly(value: boolean);
/**
* Gets or sets the visibility of the navigation bar.
*/
get navigationBar(): boolean;
set navigationBar(value: boolean);
/**
* Gets or sets the current mode of the chart. It could be 'dark' or 'light'
*/
get mode(): 'dark' | 'light' | string;
set mode(value: "dark" | "light" | string);
/**
* Gets or sets the collapsed node IDs.
*/
get collapsedIds(): Array<string | number>;
set collapsedIds(value: Array<string | number>);
/**
* Gets or sets the expanded node IDs.
*/
get expandedIds(): Array<string | number>;
set expandedIds(value: Array<string | number>);
get editNodeId(): string | number;
/**
* Gets the root HTML element of the chart.
*/
get element(): HTMLElement;
/**
* Gets the focus ID.
*/
get focusId(): string | number;
/**
* Gets the family data.
*/
get family(): Array<FamilyTree2.FamilyMember>;
get templateName(): string;
set templateName(value: string);
get template(): FamilyTree2.Template;
autoGenerateSiblingChildSpouseIds: boolean;
/**
* Initializes a new instance of FamilyTree2.
* @param element
*/
constructor(element?: HTMLElement | string);
/**
* Clears the chart.
*/
clear(): void;
edit(familyMemberId: string | number, callback?: (this: FamilyTree2) => void): void;
/**
* Retrieves an SVG representation of the chart.
* @returns SVG as string
*/
svg(): string;
/**
* Retrieves a family member by ID.
* @param id The family member's ID.
* @returns Femily member object.
*/
getFemilyMember(id: string | number): FamilyTree2.FamilyMember;
fit(): void;
makeNodesVisible(nodeIds: Array<string | number>, callback?: (this: FamilyTree2) => void): void;
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
*/
remove(familyMemberId: string | number): FamilyTree2;
addFamilyMembers(familyMembers: Array<FamilyTree2.FamilyMember>): FamilyTree2;
/**
* Adds a father to the specified family member.
* ```
* var familyTree = new FamilyTree2(document.getElementById('chart'));
* familyTree.readOnly = false;
* familyTree.focusId = 1;
* familyTree.addFamilyMember({id: 1, name: 'Family Member'}).addFather(1, { name: 'Father' }).draw();
* ```
* @param childId The ID of the family member to whom the father will be added.
* @param data The data object containing information about the father.
* @returns Family tree object.
*/
addFather(childId: string | number, familyMember?: FamilyTree2.FamilyMember): FamilyTree2;
/**
* Adds a mother to the specified family member.
* ```
* var familyTree = new FamilyTree2(document.getElementById('chart'));
* familyTree.readOnly = false;
* familyTree.focusId = 1;
* familyTree.addFamilyMember({id: 1, name: 'Family Member'}).addMother(1, { name: 'Father' }).draw();
* ```
* @param childId The ID of the family member to whom the mother will be added.
* @param data 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.
* ```
* var familyTree = new FamilyTree2(document.getElementById('chart'));
* familyTree.readOnly = false;
* familyTree.focusId = 1;
* familyTree.addFamilyMember({id: 1, name: 'Family Member'}).addSibling(1, { name: 'Sibling' }).draw();
* ```
* @param siblingId The ID of the family member to whom the sibling will be added.
* @param data 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.
* ```
* var familyTree = new FamilyTree2(document.getElementById('chart'));
* familyTree.readOnly = false;
* familyTree.focusId = 1;
* familyTree.addFamilyMember({id: 1, name: 'Family Member'}).addSpouse(1, { name: 'Spouse' }).draw();
* ```
* @param spouseId The ID of the family member to whom the spouse will be added.
* @param data 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.
* ```
* var familyTree = new FamilyTree2(document.getElementById('chart'));
* familyTree.readOnly = false;
* familyTree.focusId = 1;
* familyTree.addFamilyMember({id: 1, name: 'Family Member'}).addUnmarriedPartner(1, { name: 'Umerried partner' }).draw();
* ```
* @param familyMemberId The ID of the family member to whom the partner will be added.
* @param data 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:
* ```
* var familyTree = new FamilyTree2(document.getElementById('chart'));
* familyTree.readOnly = false;
* familyTree.focusId = 1;
* familyTree.addFamilyMember({id: 1, name: 'Family Member'}).addSpouse(1, {id: 2, name: 'Spouse'}).addChild(1, 2, { name: 'Child' }).draw();
* ```
* Here is an example with one parent of the added child:
*
* ```
* var familyTree = new FamilyTree2(document.getElementById('chart'));
* familyTree.readOnly = false;
* familyTree.focusId = 1;
* familyTree.addFamilyMember({id: 1, name: 'Family Member'}).addChild(1, null, { name: 'Child' }).draw();
* ```
* @param parent1Id The ID of the first parent.
* @param parent2Id The ID of the second parent (optional).
* @param data Additional data for the child node (optional).
* @returns Family tree object.
*/
addChild(parent1Id: string | number, parent2Id?: string | number, familyMember?: FamilyTree2.FamilyMember): FamilyTree2;
select(familyMemberId: string | number): FamilyTree2;
showEditor(familyMemberId: string | number): FamilyTree2;
hideEditor(): FamilyTree2;
/**
* Destroys the chart instance.
*/
destroy(): void;
/**
* Registers an event listener for the 'demand' event. Triggers when new data from the server is reuired.
* @param listener The function to be called when the 'demand' event is triggered.
* @returns Family tree object.
*/
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 new family meber is focused from the UI or prgrammatically.
* @param listener The function to be called when the onFocusButtonClick event is triggered.
* @returns Family tree object.
*/
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.
*/
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;
/**
* Regester new event listener that will be called after the family tree has been loaded
* @param listener
* @returns Family tree object.
*/
onLoaded(listener: (args: {}) => void): FamilyTree2;
static createTemplate(targetTemplateName: string, sourceTemplateName?: string): FamilyTree2.Template;
}
declare namespace FamilyTree2 {
interface Point {
x: number;
y: number;
}
interface Node {
readonly id: string | number;
templateId: string;
readonly left: number;
readonly right: number;
readonly top: number;
readonly bottom: number;
width: number;
height: number;
type: string;
selected: boolean;
element: HTMLElement;
stroke: string;
strokeWidth: number;
[name: string]: any;
layer: number;
familyMember: FamilyTree2.FamilyMember;
relationshipType: string;
level: number;
collapsedParents: Array<number | string>;
primaryParentId: number | string;
secondaryParentId: number | string;
parents: Array<number | string>;
motherId: number | string;
fatherId: number | string;
children: Array<number | string>;
collapsedChildren: Array<number | string>;
collapsedSiblings: Array<number | string>;
siblings: Array<number | string>;
sibling: number | string;
collapsedSpouses: Array<number | string>;
spouses: Array<number | string>;
spouse: number | string;
isUnmarriedPartner: boolean;
isStepParent: boolean;
spouseWithChildrenIndex: number;
}
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;
}
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;
}
interface LinkTemplate {
path(link: FamilyTree2.Link): string;
svg(link: FamilyTree2.Link): string;
stroke?: string;
strokeWidth?: number;
markerStart?: string;
markerEnd?: string;
markerMid?: string;
}
interface FamilyMember {
id: string | number;
motherId?: string | number;
fatherId?: string | number;
siblingIds?: Array<string | number>;
spouseIds?: Array<string | number>;
childIds?: Array<string | number>;
unmarriedPartnerIds?: Array<string | number>;
stepParentIds?: Array<string | number>;
sexOrGender?: 'male' | 'female' | string;
[name: string]: any;
}
interface Template {
html(value: (node: FamilyTree2.Node) => void): any;
svg(value: (node: FamilyTree2.Node) => void): any;
insertSvg(value: (node: FamilyTree2.Node) => void): any;
svgButton(node: FamilyTree2.Node): string;
width: number;
height: number;
fill: string;
strokeWidth: number;
stroke: number;
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;
};
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;
};
link: FamilyTree2.LinkTemplate;
separations: FamilyTree2.Separations;
svgVacant(node: FamilyTree2.ShapeTemplate): string;
defs: string;
}
interface Separations {
parentInLawLevel: number;
noneLevel: number;
childSubtree: number;
childLevel: number;
childNeighbor: number;
parentSubtree: number;
parentLevel: number;
parentNeighbor: number;
focusSide: number;
focusBottom: number;
childSide: number;
parentSide: number;
piblingNeighbor: number;
siblingNeighbor: number;
childInLowNeighbor: number;
spouseNeighbor: number;
stepParentNeighbor: number;
parentInLawNeighbor: number;
noneNeighbor: number;
}
}
export default FamilyTree2