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
  shouldFocus?: () => 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,
  shouldFocus?: () => boolean,
): void {
  // Create and dispatch a custom event for node selection
  const event = new CustomEvent('workflow:select-node', {
    detail: {
      nodeId,
      focus,
      ...(shouldFocus && { shouldFocus }),
    },
  })
  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, shouldFocus } = 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(() => {
          if (!shouldFocus || shouldFocus()) 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'>[],
  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 = { x: node.position.x, y: node.position.y }

        // 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)
  }
}