/** * FlowEditorModal * npm install @xyflow/react */ import React, { useCallback, useEffect, useState } from 'react'; import { ReactFlow, ReactFlowProvider, Background, Controls, addEdge, useNodesState, useEdgesState, useReactFlow, BackgroundVariant, Handle, Position, MarkerType, type Node, type Edge, type Connection, type NodeTypes, type NodeProps, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; import { X, Save, Clock, Cable, Pause, Play, Pencil, GitBranch, Layers } from 'lucide-react'; import { Link } from '@inertiajs/react'; // ── tipos ───────────────────────────────────────────────────────────────────── interface ActivityOrigDest { id: number; name: string; stream_position: number; cron_time: number; activity_orig_dest_connections?: { enabled: boolean; filter?: string; conditions?: string; connection_data?: { name: string }; }; } export interface MultiFlowData { id: number; name: string; cron_start?: string; cron_end?: string; activity_origs_dests: ActivityOrigDest[]; } interface FlowEditorModalProps { open: boolean; onClose: () => void; activityFlow: MultiFlowData; /** Quando passado com mais de 1 item, renderiza todos os fluxos juntos no canvas */ allActivityFlows?: MultiFlowData[]; connections: any[]; flowName?: string; onSave?: (nodes: Node[], edges: Edge[]) => void; } // ── cores ───────────────────────────────────────────────────────────────────── const EDGE_COLOR = '#3B82F6'; const EDGE_DEFAULTS = { type: 'smoothstep' as const, style: { stroke: EDGE_COLOR, strokeWidth: 2.5 }, markerEnd: { type: MarkerType.ArrowClosed, color: EDGE_COLOR, width: 18, height: 18, }, }; // ── nó de atividade (existente) ─────────────────────────────────────────────── function ActivityNode({ data, selected }: NodeProps) { const d = data as any; const isActive = d.enabled !== false; const portStyle: React.CSSProperties = { width: 12, height: 12, borderRadius: '50%', border: `2px solid ${EDGE_COLOR}`, background: isActive ? EDGE_COLOR : '#F87171', cursor: 'crosshair', zIndex: 10, }; return (
{d.position}
{d.label}
{d.connection && ( {d.connection} )} {d.cron} min {isActive ? 'ativo' : 'pausado'}
); } // ── nó separador de fluxo (novo) ────────────────────────────────────────────── // Paleta de cores para distinguir visualmente os fluxos const FLOW_COLORS = [ { bg: '#EFF6FF', border: '#BFDBFE', icon: '#3B82F6', text: '#1D4ED8' }, // azul (pai) { bg: '#F0FDF4', border: '#BBF7D0', icon: '#22C55E', text: '#15803D' }, // verde (sub 1) { bg: '#FFF7ED', border: '#FED7AA', icon: '#F97316', text: '#C2410C' }, // laranja (sub 2) { bg: '#FAF5FF', border: '#E9D5FF', icon: '#A855F7', text: '#7E22CE' }, // roxo (sub 3) { bg: '#FFF1F2', border: '#FECDD3', icon: '#F43F5E', text: '#BE123C' }, // rosa (sub 4) ]; function FlowLabelNode({ data }: NodeProps) { const d = data as any; const palette = FLOW_COLORS[d.colorIndex ?? 0] ?? FLOW_COLORS[0]; return (
{d.label} {d.isSubFlow && ( subfluxo )} {d.cronStart && ( {d.cronStart}–{d.cronEnd} )} {d.activityCount} {d.activityCount === 1 ? 'atividade' : 'atividades'}
); } // ── conversão de dados → nodes + edges ─────────────────────────────────────── const W = 186, H = 88, GAP_X = 90, GAP_Y = 80, COLS = 4; const HEADER_H = 40; const HEADER_PAD = 14; const FLOW_GAP = 56; /** Converte um único fluxo (comportamento original) */ function aodToFlow(aods: ActivityOrigDest[]): { nodes: Node[]; edges: Edge[] } { const sorted = [...aods].sort((a, b) => (a.stream_position ?? 0) - (b.stream_position ?? 0)); const nodes: Node[] = sorted.map((aod, idx) => ({ id: String(aod.id), type: 'activity', position: { x: (idx % COLS) * (W + GAP_X) + 40, y: Math.floor(idx / COLS) * (H + GAP_Y) + 40, }, data: { label: aod.name, position: aod.stream_position, cron: aod.cron_time, connection: aod.activity_orig_dest_connections?.connection_data?.name ?? '', enabled: aod.activity_orig_dest_connections?.enabled ?? true, filter: aod.activity_orig_dest_connections?.filter ?? '', conditions: aod.activity_orig_dest_connections?.conditions ?? '', aodId: aod.id, }, })); const edges: Edge[] = sorted.slice(0, -1).map((aod, idx) => ({ id: `e-${aod.id}-${sorted[idx + 1].id}`, source: String(aod.id), target: String(sorted[idx + 1].id), ...EDGE_DEFAULTS, })); return { nodes, edges }; } /** Converte múltiplos fluxos em um único grafo com separadores visuais */ function multiFlowsToGraph(flows: MultiFlowData[]): { nodes: Node[]; edges: Edge[] } { const allNodes: Node[] = []; const allEdges: Edge[] = []; let currentY = 30; flows.forEach((flow, flowIdx) => { const sorted = [...(flow.activity_origs_dests ?? [])].sort( (a, b) => (a.stream_position ?? 0) - (b.stream_position ?? 0) ); // Cabeçalho separador do fluxo allNodes.push({ id: `flow-label-${flow.id}`, type: 'flow-label', position: { x: 40, y: currentY }, data: { label: flow.name, cronStart: flow.cron_start, cronEnd: flow.cron_end, colorIndex: flowIdx, isSubFlow: flowIdx > 0, activityCount: sorted.length, }, selectable: false, draggable: false, } as Node); const activitiesStartY = currentY + HEADER_H + HEADER_PAD; // Nós de atividade sorted.forEach((aod, idx) => { allNodes.push({ id: String(aod.id), type: 'activity', position: { x: (idx % COLS) * (W + GAP_X) + 40, y: activitiesStartY + Math.floor(idx / COLS) * (H + GAP_Y), }, data: { label: aod.name, position: aod.stream_position, cron: aod.cron_time, connection: aod.activity_orig_dest_connections?.connection_data?.name ?? '', enabled: aod.activity_orig_dest_connections?.enabled ?? true, filter: aod.activity_orig_dest_connections?.filter ?? '', conditions: aod.activity_orig_dest_connections?.conditions ?? '', aodId: aod.id, }, }); }); // Arestas dentro do fluxo sorted.slice(0, -1).forEach((aod, idx) => { allEdges.push({ id: `e-${aod.id}-${sorted[idx + 1].id}`, source: String(aod.id), target: String(sorted[idx + 1].id), ...EDGE_DEFAULTS, }); }); // Avança Y para o próximo fluxo const numRows = sorted.length > 0 ? Math.ceil(sorted.length / COLS) : 1; const contentH = numRows * H + Math.max(0, numRows - 1) * GAP_Y; currentY = activitiesStartY + contentH + FLOW_GAP; }); return { nodes: allNodes, edges: allEdges }; } // ── painel de detalhes (sidebar direita) ────────────────────────────────────── function DetailPanel({ node, onToggleActive, }: { node: Node | null; onToggleActive: (nodeId: string, current: boolean) => void; }) { if (!node) { return (
Clique num nó para ver detalhes
); } const d = node.data as any; const isActive = d.enabled !== false; const Field = ({ label, value, mono = false }: { label: string; value: string; mono?: boolean }) => (
{label} {value || '—'}
); return (
{d.label}
{isActive ? 'ativo' : 'pausado'} posição {d.position}
{d.aodId && ( Editar atividade )}
); } // ── editor ──────────────────────────────────────────────────────────────────── const nodeTypes: NodeTypes = { activity: ActivityNode, 'flow-label': FlowLabelNode, }; function FlowEditor({ activityFlow, allActivityFlows, onSave, onClose, flowName, }: { activityFlow: MultiFlowData; allActivityFlows?: MultiFlowData[]; onSave?: FlowEditorModalProps['onSave']; onClose: () => void; flowName?: string; }) { const { fitView } = useReactFlow(); // Usa visualização combinada se houver múltiplos fluxos const isMultiFlow = (allActivityFlows?.length ?? 0) > 1; const { nodes: initNodes, edges: initEdges } = isMultiFlow ? multiFlowsToGraph(allActivityFlows!) : aodToFlow(activityFlow.activity_origs_dests ?? []); const [nodes, setNodes, onNodesChange] = useNodesState(initNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges); const [selectedNodeId, setSelectedNodeId] = useState(null); useEffect(() => { setTimeout(() => fitView({ padding: 0.12, duration: 300 }), 100); }, []); const onConnect = useCallback( (connection: Connection) => setEdges(eds => addEdge({ ...connection, ...EDGE_DEFAULTS }, eds)), [setEdges] ); const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => { // Ignora clique em cabeçalhos de fluxo if (node.type === 'flow-label') return; setSelectedNodeId(prev => prev === node.id ? null : node.id); }, []); const onPaneClick = useCallback(() => { setSelectedNodeId(null); }, []); const handleToggleActive = useCallback((nodeId: string, currentActive: boolean) => { setNodes(nds => nds.map(n => n.id === nodeId ? { ...n, data: { ...n.data, enabled: !currentActive } } : n ) ); }, [setNodes]); const selectedNode = nodes.find(n => n.id === selectedNodeId) ?? null; // Conta apenas nós de atividade (exclui os cabeçalhos) const activityNodeCount = nodes.filter(n => n.type !== 'flow-label').length; return (
{/* header */}
{isMultiFlow ? : } {flowName ?? activityFlow.name} {isMultiFlow && ( {allActivityFlows!.length} fluxos )} {activityNodeCount} {activityNodeCount === 1 ? 'atividade' : 'atividades'} {!isMultiFlow && activityFlow.cron_start && ( {activityFlow.cron_start} – {activityFlow.cron_end} )}
Arraste nós · conecte as portas · Delete remove
{/* canvas + painel de detalhes */}
); } // ── modal wrapper ───────────────────────────────────────────────────────────── export function FlowEditorModal({ open, onClose, activityFlow, allActivityFlows, connections, flowName, onSave, }: FlowEditorModalProps) { if (!open) return null; return (
{ if (e.target === e.currentTarget) onClose(); }} >
); }