Controls

Controls are small buttons displayed on the tree that let users quickly perform actions.

Controls are managed through the controlsUI API, which provides two main methods:

• show(config) — Displays controls on the tree.
• onControlClick(callback) — Handles control click events.

Displaying Controls

Use the show() method to define which controls should appear and how they should behave.

       Copy 
familyTree.controlsUI.show({
    zoom_in: { title: 'zoom in' },
    zoom_out: { title: 'zoom out' }
});

Edit in BALKAN Code

You can have the below properties:

• title (string) – Tooltip text shown on hover.
• anchor (FamilyTree2.anchor) – Position of the control (e.g., left or right side of the tree).
• isOn (boolean) – Optional. Indicates toggle state (useful for switch-like controls).

Built-in Controls

Some controls may be predefined (such as zoom controls), but you can also create fully custom controls.

• zoom_in
• zoom_out
• fit

Creating a Custom Control

To create a custom control:

1. Define it inside controlsUI.show()
2. Handle its click event in onControlClick()

       Copy 
familyTree.controlsUI.show({
    my_control: {
        title: 'Toggle something',
        anchor: FamilyTree2.anchor.left,
        isOn: true
    }
});

familyTree.controlsUI.onControlClick(function(args){
    if (args.key === 'my_control'){
        console.log('Custom control clicked');
    }
});

Positioning Controls

Controls can be anchored to different sides of the tree interface:

• OrgChart.anchor.bottom
• OrgChart.anchor.bottom_left
• OrgChart.anchor.bottom_right
• OrgChart.anchor.left
• OrgChart.anchor.left_bottom
• OrgChart.anchor.left_top
• OrgChart.anchor.right
• OrgChart.anchor.right_bottom
• OrgChart.anchor.right_top
• OrgChart.anchor.top
• OrgChart.anchor.top_left
• OrgChart.anchor.top_right

You can group multiple controls on the same anchor side.

Edit in BALKAN Code