Nœud React Flow

Créez des composants de nœud React Flow en suivant les motifs établis avec des types TypeScript appropriés et l'intégration du store.

Démarrage rapide

Copiez les templates depuis assets/ et remplacez les placeholders :

• {{NodeName}} → Nom du composant en PascalCase (par exemple, VideoNode)
• {{nodeType}} → Identifiant de type en kebab-case (par exemple, video-node)
• {{NodeData}} → Nom de l'interface Data (par exemple, VideoNodeData)

Templates

• assets/template.tsx - Composant nœud
• assets/types.template.ts - Définitions TypeScript

Motif de composant nœud

export const MyNode = memo(function MyNode({
  id,
  data,
  selected,
  width,
  height,
}: MyNodeProps) {
  const updateNode = useAppStore((state) => state.updateNode);
  const canvasMode = useAppStore((state) => state.canvasMode);

  return (
    <>
      <NodeResizer isVisible={selected && canvasMode === 'editing'} />
      <div className="node-container">
        <Handle type="target" position={Position.Top} />
        {/* Node content */}
        <Handle type="source" position={Position.Bottom} />
      </div>
    </>
  );
});

Motif de définition de type

export interface MyNodeData extends Record<string, unknown> {
  title: string;
  description?: string;
}

export type MyNode = Node<MyNodeData, 'my-node'>;

Étapes d'intégration

1. Ajoutez le type à src/frontend/src/types/index.ts
2. Créez le composant dans src/frontend/src/components/nodes/
3. Exportez depuis src/frontend/src/components/nodes/index.ts
4. Ajoutez les valeurs par défaut dans src/frontend/src/store/app-store.ts
5. Enregistrez dans le canvas nodeTypes
6. Ajoutez à AddBlockMenu et ConnectMenu