Interface Template

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

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

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

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