diff --git a/packages/vue-flow/src/components/Edges/Wrapper.ts b/packages/vue-flow/src/components/Edges/Wrapper.ts index 0a8cb55d..6aa6740f 100644 --- a/packages/vue-flow/src/components/Edges/Wrapper.ts +++ b/packages/vue-flow/src/components/Edges/Wrapper.ts @@ -3,6 +3,7 @@ import EdgeAnchor from './EdgeAnchor' import type { EdgeComponent, EdgeEventsOn, EdgeMarkerType, EdgeTextProps, EdgeUpdatable, GraphNode } from '~/types' import { ConnectionMode, Position } from '~/types' import { getEdgePositions, getHandle, getMarkerId } from '~/utils' +import { EdgeId, EdgeRef } from '~/context' interface Props { id: string @@ -68,6 +69,11 @@ const Wrapper = defineComponent({ setup(props: Props, { emit }) { let updating = $ref(false) + const edgeEl = ref() + + provide(EdgeId, props.id) + provide(EdgeRef, edgeEl) + const onEdgeUpdaterMouseEnter = () => (updating = true) const onEdgeUpdaterMouseOut = () => (updating = false) @@ -117,6 +123,7 @@ const Wrapper = defineComponent({ return h( 'g', { + ref: edgeEl, class: [ 'vue-flow__edge', `vue-flow__edge-${props.name}`, diff --git a/packages/vue-flow/src/composables/index.ts b/packages/vue-flow/src/composables/index.ts index 826b4ef4..bc0d8339 100644 --- a/packages/vue-flow/src/composables/index.ts +++ b/packages/vue-flow/src/composables/index.ts @@ -6,3 +6,5 @@ export { default as useVueFlow } from './useVueFlow' export { default as useDrag } from './useDrag' export { default as useNodeHooks } from './useNodeHooks' export { default as useEdgeHooks } from './useEdgeHooks' +export { default as useEdge } from './useEdge' +export { default as useNode } from './useNode' diff --git a/packages/vue-flow/src/composables/useEdge.ts b/packages/vue-flow/src/composables/useEdge.ts new file mode 100644 index 00000000..8f9e282e --- /dev/null +++ b/packages/vue-flow/src/composables/useEdge.ts @@ -0,0 +1,29 @@ +import useVueFlow from './useVueFlow' +import { EdgeId, EdgeRef } from '~/context' +import type { CustomEvent, ElementData } from '~/types' + +/** + * Access an edge + * + * If no edge id is provided, the edge id is injected from context + * + * Meaning if you do not provide an id, this composable has to be called in a child of your custom edge component, or it will throw + */ +export default function useEdge = any>(id?: string) { + const edgeId = id ?? inject(EdgeId, '') + const edgeEl = inject(EdgeRef, null) + + const { findEdge } = useVueFlow() + + const edge = findEdge(edgeId) + + if (!edge) { + throw new Error(`[vue-flow]: useEdge - Edge with id ${edgeId} not found!`) + } + + return { + id: edgeId, + edge, + edgeEl, + } +} diff --git a/packages/vue-flow/src/composables/useNode.ts b/packages/vue-flow/src/composables/useNode.ts index a4f49d1c..e70fc128 100644 --- a/packages/vue-flow/src/composables/useNode.ts +++ b/packages/vue-flow/src/composables/useNode.ts @@ -10,7 +10,7 @@ import { getConnectedEdges } from '~/utils' * * Meaning if you do not provide an id, this composable has to be called in a child of your custom node component, or it will throw */ -export function useNode = any>(id?: string) { +export default function useNode = any>(id?: string) { const nodeId = id ?? inject(NodeId, '') const nodeEl = inject(NodeRef, null) diff --git a/packages/vue-flow/src/context/index.ts b/packages/vue-flow/src/context/index.ts index b677c22c..3c5e4d56 100644 --- a/packages/vue-flow/src/context/index.ts +++ b/packages/vue-flow/src/context/index.ts @@ -4,4 +4,6 @@ import type { VueFlowStore } from '~/types' export const VueFlow: InjectionKey = Symbol('vueFlow') export const NodeId: InjectionKey = Symbol('nodeId') export const NodeRef: InjectionKey> = Symbol('nodeRef') +export const EdgeId: InjectionKey = Symbol('edgeId') +export const EdgeRef: InjectionKey> = Symbol('edgeRef') export const Slots: InjectionKey = Symbol('slots') diff --git a/packages/vue-flow/src/index.ts b/packages/vue-flow/src/index.ts index 73235e28..bea16f81 100644 --- a/packages/vue-flow/src/index.ts +++ b/packages/vue-flow/src/index.ts @@ -44,6 +44,10 @@ export { default as useVueFlow, Storage as GlobalVueFlowStorage } from './compos export { default as useHandle } from './composables/useHandle' +export { default as useNode } from './composables/useNode' + +export { default as useEdge } from './composables/useEdge' + export * from './additional-components' export * from './types'