Function AgentflowCanvas

packages/agentflow/src/Agentflow.tsx:35–380

* Internal canvas component that uses the contexts

({
    initialFlow,
    readOnly,
    onFlowChange,
    onSave,
    onFlowGenerated,
    showDefaultHeader = true,
    enableGenerator = true,
    showDefaultPalette = true,
    canvasActions,
    renderHeader,
    renderNodePalette
}: {
    initialFlow?: FlowData
    readOnly?: boolean
    onFlowChange?: FlowDataCallback
    onSave?: FlowDataCallback
    onFlowGenerated?: FlowDataCallback
    showDefaultHeader?: boolean
    showDefaultPalette?: boolean
    enableGenerator?: boolean
    canvasActions?: AgentflowProps['canvasActions']
    renderHeader?: AgentflowProps['renderHeader']
    renderNodePalette?: AgentflowProps['renderNodePalette']
})

 * Internal canvas component that uses the contexts
 */
function AgentflowCanvas({
    initialFlow,
    readOnly,
    onFlowChange,
    onSave,
    onFlowGenerated,
    showDefaultHeader = true,
    enableGenerator = true,
    showDefaultPalette = true,
    canvasActions,
    renderHeader,
    renderNodePalette
}: {
    initialFlow?: FlowData
    readOnly?: boolean
    onFlowChange?: FlowDataCallback
    onSave?: FlowDataCallback
    onFlowGenerated?: FlowDataCallback
    showDefaultHeader?: boolean
    showDefaultPalette?: boolean
    enableGenerator?: boolean
    canvasActions?: AgentflowProps['canvasActions']
    renderHeader?: AgentflowProps['renderHeader']
    renderNodePalette?: AgentflowProps['renderNodePalette']
}) {
    const {
        state,
        syncNodesFromReactFlow,
        syncEdgesFromReactFlow,
        setDirty,
        setReactFlowInstance,
        closeEditDialog,
        registerLocalStateSetters,
        registerOnFlowChange,
        setComponentNodes,
        syncNodes,
        hasOutdatedNodes
    } = useAgentflowContext()
    const { isDarkMode } = useConfigContext()
    const agentflow = useAgentflow()
    const reactFlowWrapper = useRef<HTMLDivElement>(null)

    // Memoize ReactFlow colors from theme tokens
    const reactFlowColors = useMemo(() => {
        const mode = isDarkMode ? 'dark' : 'light'
        return {
            minimapNode: tokens.colors.reactflow.minimap.node[mode],
            minimapNodeStroke: tokens.colors.reactflow.minimap.nodeStroke[mode],
            minimapBackground: tokens.colors.reactflow.minimap.background[mode],
            minimapMask: tokens.colors.reactflow.minimap.mask[mode],
            backgroundDots: tokens.colors.reactflow.background.dots[mode]
        }
    }, [isDarkMode])

    const safeInitialNodes = Array.isArray(initialFlow?.nodes) ? initialFlow.nodes : []
    const safeInitialEdges = Array.isArray(initialFlow?.edges) ? initialFlow.edges : []
    const [nodes, setLocalNodes, onNodesChange] = useNodesState(safeInitialNodes)
    const [edges, setLocalEdges, onEdgesChange] = useEdgesState(safeInitialEdges)