This is step by step tutorial on how to change the color of selected node and BLUR nodes that are not part of tree of the selected family member.

This is step by step tutorial on how to change the color of selected node and BLUR nodes that are not part of hierarchy of the selected node. You will learn how to find and iterate all parent, children and partners nodes of the selected family memeber.

Step 1 - Installation

If you are already familiar with BALKAN FamilyTreeJS you can skip this step. There are two installation options: standalone or using npm

standalone installation See our getting started page

npm installation

npm i @balkangraph/familytree.js

Step 2 - Create BALKAN FamilyTreeJS instance

var family = new FamilyTree(document.getElementById("tree"), {
    nodeMouseClick: FamilyTree.action.none,
    mode: 'dark',
    nodeBinding: {
        field_0: "name",
        field_1: "birthDate",
        img_0: "photo",
    }
});

family.load([..]);

The code above will create family tree instance in mode dark, with disabled Edit Form and nodeBinding property indicates that the fields 'name', 'birthDate' and 'photo' will be visible in the node boxes.

Step 3 - Add event listeners

The family tree will listen for 'click' and 'prerender' events.

family.on('click', function(sender, args){
    focusedNodeId = args.node.id;
    family.draw();
});

family.on("prerender", function(sender, args){
    if (focusedNodeId == null){
        return;
    }
    var nodes = args.res.nodes;
    var node = nodes[focusedNodeId];
    node.tags.push('selected');
    iterate_parents(nodes, node);
    iterate_children(nodes, node);
    iterate_partners(nodes, node);
    for(var id in nodes){
        if (!nodes[id].tags.has('focused')){
            nodes[id].tags.push('blurred');
        }
    }
    focusedNodeId = null;
});

The code above will add 'selected' tag to clicked node element and you can apply css style to that node. Here you can learn more how to customize foamily tree with CSS.

The next step is to add iteration methods to set 'blurred' tags for the nodes that are not part of the selected node. To do that we will need to iterate all parents, partners and children of the selected node.

function iterate_partners(nodes, node){        
    if (node.pids){
        for(var i = 0; i < node.pids.length; i++){
            var pnode = nodes[node.pids[i]];
            if (!pnode.tags.has('focused')){
                pnode.tags.push('focused');
            }
        }
    }
}

function iterate_parents(nodes, node){
    if (!node.tags.has('focused')){
        node.tags.push('focused');
    }
    var mnode = nodes[node.mid];
    var fnode = nodes[node.fid];

    if (mnode){
        iterate_parents(nodes, mnode);
    }
    
    if (fnode){
        iterate_parents(nodes, fnode);
    }
}

function iterate_children(nodes, node){
    if (node){
        if (!node.tags.has('focused')){
            node.tags.push('focused');
        }
        for(var i = 0; i < node.ftChildrenIds.length; i++){
            var cnode = nodes[node.ftChildrenIds[i]];
            if (cnode.mid == node.id || cnode.fid == node.id){
                iterate_children(nodes, cnode);
            }
        }
    }
}

Step 4 - Add CSS style to blur and highlight selected family member

.blurred rect, .blurred image, .blurred text, .blurred use {
  filter: blur(5px);
}

.selected rect{
  fill: #FFCA28 !important;
}

Filter 'blur' will blur nodes with 'blurred' tag, other filters that you can use. The color of the selected not will be yellow.

Click one of the nodes below to see the effect

Edit in BALKAN Code

Tell us if you have any questions in the comments below.