diff --git a/.changeset/twelve-pugs-mate.md b/.changeset/twelve-pugs-mate.md new file mode 100644 index 00000000..eab5786d --- /dev/null +++ b/.changeset/twelve-pugs-mate.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": minor +--- + +Add `useEdgesData` composable diff --git a/packages/core/src/composables/useEdgesData.ts b/packages/core/src/composables/useEdgesData.ts new file mode 100644 index 00000000..4ff5f308 --- /dev/null +++ b/packages/core/src/composables/useEdgesData.ts @@ -0,0 +1,73 @@ +import type { ComputedRef, MaybeRefOrGetter } from 'vue' +import { computed, toValue } from 'vue' +import type { Edge, GraphEdge } from '../types' +import { warn } from '../utils' +import { useVueFlow } from './useVueFlow' + +interface EdgeData { + id: string + type: EdgeType['type'] + data: NonNullable | null +} + +/** + * Composable for receiving data of one or multiple nodes + * + * @public + * @param edgeId - The id (or ids) of the node to get the data from + * @param guard - Optional guard function to narrow down the node type + * @returns An array of data objects + */ +export function useEdgesData( + edgeId: MaybeRefOrGetter, +): ComputedRef | null> +export function useEdgesData( + edgeIds: MaybeRefOrGetter, +): ComputedRef[]> +export function useEdgesData( + edgeIds: MaybeRefOrGetter, + guard: (node: Edge) => node is EdgeType, +): ComputedRef[]> +export function useEdgesData(_edgeIds: any): any { + const { findEdge } = useVueFlow() + + return computed({ + get() { + const edgeIds = toValue(_edgeIds) + + if (!Array.isArray(edgeIds)) { + const edge = findEdge(edgeIds) + + if (edge) { + return { + id: edge.id, + type: edge.type, + data: edge.data ?? null, + } + } + + return null + } + + const data: EdgeData[] = [] + + for (const edgeId of edgeIds) { + const edge = findEdge(edgeId) + + if (edge) { + data.push({ + id: edge.id, + type: edge.type, + data: edge.data ?? null, + }) + } + } + + return data + }, + set() { + // noop + warn('You are trying to set edge data via useEdgesData. This is not supported.') + }, + }) +} diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index f0d09889..25cb57e8 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -71,6 +71,7 @@ export { useNodeId } from './composables/useNodeId' export { useConnection } from './composables/useConnection' export { useHandleConnections } from './composables/useHandleConnections' export { useNodesData } from './composables/useNodesData' +export { useEdgesData } from './composables/useEdgesData' export { useNodesInitialized } from './composables/useNodesInitialized' export { VueFlowError, ErrorCode, isErrorOfType } from './utils/errors'