feat(edges,nodes): add useEdge composable

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}`,

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'

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<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
+  const edgeId = id ?? inject(EdgeId, '')
+  const edgeEl = inject(EdgeRef, null)
+
+  const { findEdge } = useVueFlow()
+
+  const edge = findEdge<Data, CustomEvents>(edgeId)
+
+  if (!edge) {
+    throw new Error(`[vue-flow]: useEdge - Edge with id ${edgeId} not found!`)
+  }
+
+  return {
+    id: edgeId,
+    edge,
+    edgeEl,
+  }
+}

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<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
+export default function useNode<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
   const nodeId = id ?? inject(NodeId, '')
   const nodeEl = inject(NodeRef, null)
 

packages/vue-flow/src/context/index.ts

@@ -4,4 +4,6 @@ import type { VueFlowStore } from '~/types'
 export const VueFlow: InjectionKey<VueFlowStore> = Symbol('vueFlow')
 export const NodeId: InjectionKey<string> = Symbol('nodeId')
 export const NodeRef: InjectionKey<Ref<HTMLDivElement>> = Symbol('nodeRef')
+export const EdgeId: InjectionKey<string> = Symbol('edgeId')
+export const EdgeRef: InjectionKey<Ref<HTMLDivElement>> = Symbol('edgeRef')
 export const Slots: InjectionKey<TSlots> = Symbol('slots')

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'