Templates

Relationship types

In this example you can see all relationship node types:

Edit in BALKAN Code

Changing the color

You can change the fill and the stroke of the template:

familyTree.template.fill = '#039BE5';
familyTree.template.nodes.spouse.fill = '#F57C00';
familyTree.template.nodes.sibling.fill = '#2E2E2E';
familyTree.template.nodes.child.fill = '#FFCA28';
familyTree.template.nodes.childInLaw.fill = '#FFCA28';

Edit in BALKAN Code

Changing the size

You can change the size of the template:

// For a template with circular nodes, the width should be equal to the height.
familyTree.template.width = 200;
familyTree.template.height = 200;
familyTree.template.strokeWidth = 5;

You can change the size for a relationship type:

familyTree.template.nodes.child.width = 100;
familyTree.template.nodes.child.height = 100;
familyTree.template.nodes.child.strokeWidth = 3;

Edit in BALKAN Code

Changing the content (HTML)

With the html property we change the node content in the template.

Assume we have node data containing addresses:

[
    { 
        id: 1, 
        spouseIds: [2], 
        childIds: [3, 4],
        address: '45 Oak St, Springfield, Illinois'
    },
    { 
        id: 2, 
        childIds: [3, 4],
        address: '45 Oak St, Springfield, Illinois'
    },
    { 
        id: 3,
        address: '45 Oak St, Springfield, Illinois'
    },
    { 
        id: 4,
        address: '45 Oak St, Springfield, Illinois'
    }
]

Here is how we can display the address in the nodes:

familyTree.template.html = function(node){
    return `<div data-field="address">${node.familyMember.address}</div>`
}

In a relationship type:

familyTree.template.nodes.child.html = function(node){
    return `<div data-field="address">[Hidden]</div>`
}

Edit in BALKAN Code

Changing the node (SVG)

With the svg property we define the template's node shape.

For the template:

familyTree.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>`;
};

For a specific relationship type:

familyTree.template.nodes.spouse.width = familyTree.template.nodes.spouse.height = 200; 
familyTree.template.nodes.spouse.svg = function(node){
    return `<circle 
                cx="${node.width / 2}" cy="${node.width / 2}" r="${node.width / 1.8}"
                style="stroke:${node.stroke}; fill:${node.fill}; stroke-width:${node.strokeWidth};">
            </circle>`;
}

Edit in BALKAN Code

Changing the new adding nodes (SVG)

With the svgVacant we define the adding nodes template's shape.

familyTree.template.svgVacant = function(node){
    return `<rect x="0" y="0"
                  width="${node.width}" height="${node.height}"
                  style="stroke:${node.stroke}; fill:none; stroke-width:${node.strokeWidth};">
            </rect>
            <text x="10" y="80">Add</text>
            <text x="10" y="100">${node.relationshipType}</text>`;
}

Edit in BALKAN Code

Adding SVG to the nodes

Use insertSvg method to add any SVG to the nodes:

familyTree.template.insertSvg = function(node){
    return `<text text-anchor="end" x="${node.width}" y="${node.height + 13}">
                ${node.relationshipType}
            </text>`
}

Edit in BALKAN Code

Buttons

With svgButton property you can change the buttons.

Here is an example:

familyTree.template.svgButton = function (node, x, y, text, icon, type, color) {
    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>`;
}

Edit in BALKAN Code

Expand/Collapse buttons

Here is how to change the expand / collapse buttons only:

familyTree.template.svgButton = function (node, x, y, text, icon, type, color) {
    let btnText = type.slice(8)
    let rotate = 0;
    let translateX = x - 50;
    let translateY = y - 10;
    if (btnText == 'siblings' 
        || btnText == 'spouses' 
        || ( btnText == "parents" && node.relationshipType != 'focus'  ) ){
            rotate = 270;
            translateX = x - 10;
            translateY = y + 50;
    }
    const relationships = btnText.charAt(0).toUpperCase() + btnText.slice(1);
    if (type != 'edit' && type != 'camera' && type != 'focus') {
        return `<g transform="translate(${translateX}, ${translateY}) rotate(${rotate})" 
                    data-button="${type}" class="bft2-button">
                    <rect x="0" y="0"fill="#F57C00" fill-opacity="1" stroke-width="1" stroke="#aeaeae"
                        width="100"height="22" rx="7" ry="7">
                    </rect>
                    <text data-width="100" 
                        style="font-size: 20px; font-weight: bold" 
                        fill="#1e1e1e" x="50" y="17"
                        text-anchor="middle">
                        ${relationships}
                    </text>
                </g>`;
    }
}

Edit in BALKAN Code

Links

Changing width and color of the links:

familyTree.template.link.stroke = 'red'
familyTree.template.link.strokeWidth = 3;

Changing link SVG.

Assume we have a node with a Boolean field in its data.

{ id: 4, flag: true }

Here we change the link conditionally:

familyTree.template.link.svg = function (link){     
    var strokeDasharray = '';
    var 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>`;
};

Edit in BALKAN Code

Separations

Edit in BALKAN Code

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

let separations = familyTree.template.separations;

separations.focusSide = 200;
separations.parentLevel = 200;
separations.parentSide = 200;
separations.parentNeighbor = 220;
separations.childInLowNeighbor = 90;
separations.focusBottom = 150;
separations.childSide = 200;
separations.childLevel = 150;
separations.childNeighbor = 200;
separations.parentSiblingNeighbor = 90;
separations.parentSiblingLevel = 180;
separations.parentInLawLevel = 220;
separations.parentInLawNeighbor = 90;
separations.piblingNeighbor = 90;
separations.siblingNeighbor = 90;
separations.spouseNeighbor = 90;
separations.stepParentNeighbor = 90;