dify/web/app/components/workflow/utils/node-navigation.ts

import type { Node, ReactFlowInstance } from 'reactflow'

/**
 * Node navigation utilities for workflow
 * This module provides functions for node selection, focusing and scrolling in workflow
 */

/**
 * Interface for node selection event detail
 */
type NodeSelectionDetail = {
  nodeId: string
  focus?: boolean
}

/**
 * Select a node in the workflow
 * @param nodeId - The ID of the node to select
 * @param focus - Whether to focus/scroll to the node
 */
export function selectWorkflowNode(nodeId: string, focus = false): void {
  // Create and dispatch a custom event for node selection
  const event = new CustomEvent('workflow:select-node', {
    detail: {
      nodeId,
      focus,
    },
  })
  document.dispatchEvent(event)
}

/**
 * Scroll to a specific node in the workflow
 * @param nodeId - The ID of the node to scroll to
 */
export function scrollToWorkflowNode(nodeId: string): void {
  // Create and dispatch a custom event for scrolling to node
  const event = new CustomEvent('workflow:scroll-to-node', {
    detail: { nodeId },
  })
  document.dispatchEvent(event)
}

/**
 * Setup node selection event listener
 * @param handleNodeSelect - Function to handle node selection
 * @returns Cleanup function
 */
export function setupNodeSelectionListener(handleNodeSelect: (nodeId: string) => void): () => void {
  // Event handler for node selection
  const handleNodeSelection = (event: CustomEvent<NodeSelectionDetail>) => {
    const { nodeId, focus } = event.detail
    if (nodeId) {
      // Select the node
      handleNodeSelect(nodeId)

      // If focus is requested, scroll to the node
      if (focus) {
        // Use a small timeout to ensure node selection happens first
        setTimeout(() => {
          scrollToWorkflowNode(nodeId)
        }, 100)
      }
    }
  }

  // Add event listener
  document.addEventListener('workflow:select-node', handleNodeSelection as EventListener)

  // Return cleanup function
  return () => {
    document.removeEventListener('workflow:select-node', handleNodeSelection as EventListener)
  }
}

/**
 * Setup scroll to node event listener with ReactFlow
 * @param nodes - The workflow nodes
 * @param reactflow - The ReactFlow instance
 * @returns Cleanup function
 */
export function setupScrollToNodeListener(
  nodes: Pick<Node, 'id' | 'position' | 'positionAbsolute' | 'parentId'>[],
  reactflow: Pick<ReactFlowInstance, 'setCenter'>,
): () => void {
  // Event handler for scrolling to node
  const handleScrollToNode = (event: CustomEvent<NodeSelectionDetail>) => {
    const { nodeId } = event.detail
    if (nodeId) {
      // Find the target node
      const node = nodes.find((n) => n.id === nodeId)
      if (node) {
        // Use ReactFlow's fitView API to scroll to the node
        const nodePosition = { ...(node.positionAbsolute ?? node.position) }
        // Container children store relative positions before React Flow computes their absolute position.
        if (!node.positionAbsolute) {
          let parentId = node.parentId
          const visited = new Set([node.id])
          while (parentId && !visited.has(parentId)) {
            visited.add(parentId)
            const parent = nodes.find((candidate) => candidate.id === parentId)
            if (!parent) break
            nodePosition.x += parent.position.x
            nodePosition.y += parent.position.y
            parentId = parent.parentId
          }
        }

        // Calculate position to place node in top-left area
        // Move the center point right and down to show node in top-left
        const targetX = nodePosition.x + window.innerWidth * 0.25
        const targetY = nodePosition.y + window.innerHeight * 0.25

        reactflow.setCenter(targetX, targetY, { zoom: 1, duration: 800 })
      }
    }
  }

  // Add event listener
  document.addEventListener('workflow:scroll-to-node', handleScrollToNode as EventListener)

  // Return cleanup function
  return () => {
    document.removeEventListener('workflow:scroll-to-node', handleScrollToNode as EventListener)
  }
}