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.

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, such as the 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().

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:

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

You can group multiple controls on the same anchor side.

Edit in BALKAN Code