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:

       Copy 
template.fill = '#F57C00';
template.stroke = '#FFCA28';
         

You can also chane the colors for a relationship type:

       Copy 
template.nodes.spouse.fill = '#039BE5';
template.nodes.spouse.stroke = '#F57C00';
         

Edit in BALKAN Code

Changing the size

You can change the size of the template:

       Copy 
template.width = 200;
template.height = 100;
template.strokeWidth = 5;
         

You can change the size for a relationship type:

       Copy 
template.nodes.child.width = 100;
template.nodes.child.height = 100;
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:

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

in a relationship type:

       Copy 
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 themplate's node shape

for the template:

       Copy 
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 specific a relationship type:

       Copy 
template.nodes.spouse.width = template.nodes.spouse.height = 200; 
template.nodes.spouse.svg = function(node){
    return `<circle 
                cx="${node.width / 2}" cy="${node.width / 2}" r="${node.width / 2}"
                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 themplate's shape

       Copy 
    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="100">Add ${node.relationshipType}</text>`;
    }
 

Edit in BALKAN Code

Adding SVG to the nodes

Use insertSvg method to add any SVG to the nodes:

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

Edit in BALKAN Code

Buttons

With svgButton property you can change the buttons.

Here is an example:

       Copy 
    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:

       Copy 
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;
    }
    
    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">
                        ${btnText}
                    </text>
                </g>`;
    }
}
     

Edit in BALKAN Code

Links

Changing width and color of the links:

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

Changing link SVG

Here we change the link conditionaly:

       Copy 
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

       Copy 
    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;