addEdge()

このユーティリティは、エッジの配列に新しいEdgeを追加するための便利な関数です。また、無効なエッジや既存のエッジの重複を追加しないように、いくつかの検証も行います。

import { SvelteFlow, addEdge } from '@xyflow/svelte';
 
export default function Flow() {
  const [nodes, setNodes, onNodesChange] = useNodesState([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
  const onConnect = useCallback(
    (connection) => {
      setEdges((oldEdges) => addEdge(connection, oldEdges));
    },
    [setEdges],
  );
 
  return <SvelteFlow nodes={nodes} edges={edges} onConnect={onConnect} />;
}

シグネチャ

名前	型
#パラメータ
#`edge`	`Edge \| Connection`
#`edges`	`Edge[]`
#戻り値
#	`Edge[]`

注意

targetとsourceが同じエッジがすでに存在する場合（および、設定されている場合は同じtargetHandleとsourceHandle）、idプロパティが異なっていても、このユーティリティは新しいエッジを追加しません。

型