Focus on Node by ID

Demonstrates how to programmatically center the view on specific nodes with animated transitions and zoom fitting.

Focus on Node by ID

Functional Overview

This example demonstrates how to programmatically center the view on a specific node, with options for animated transitions and zoom fitting.

Implementation of Key Features

Focus Node API

Use the focusNodeById method to center on a node:

const focusOnNode = (nodeId: string) => {
    graphInstance.focusNodeById(nodeId);
};

Animated Focus

Add smooth transitions when focusing:

const focusWithAnimation = async (nodeId: string) => {
    graphInstance.enableCanvasAnimation();
    graphInstance.focusNodeById(nodeId);
    await graphInstance.sleep(500);
    graphInstance.disableCanvasAnimation();
};

Focus and Zoom

Focus while ensuring the node fits within view:

const focusAndZoom = async (nodeId: string) => {
    const node = graphInstance.getNodeById(nodeId);
    if (node) {
        await graphInstance.zoomToFitWithAnimation([node]);
    }
};

Focus Multiple Nodes

Center on multiple nodes at once:

const focusOnNodes = async (nodeIds: string[]) => {
    const nodes = nodeIds.map(id => graphInstance.getNodeById(id)).filter(Boolean);
    await graphInstance.moveToCenter(nodes);
};

Programmatic Traversal

Navigate through nodes sequentially:

const traverseNodes = async (nodeIds: string[]) => {
    for (const nodeId of nodeIds) {
        await focusWithAnimation(nodeId);
        await graphInstance.sleep(1000);
    }
};

Creative Use Cases

• Guided Tours: Automatically navigate through key nodes
• Search Results: Jump to matching nodes
• Notifications: Direct attention to specific nodes
• Presentations: Programmatically control view
• Accessibility: Keyboard navigation through graph