refactor(core): change nodeEl and edgeEl type to allow ref(null)

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -51,7 +51,7 @@ const EdgeWrapper = defineComponent({
 
     const edgeUpdaterType = ref<HandleType>('source')
 
-    const edgeEl = ref<SVGElement>()
+    const edgeEl = ref<SVGElement | null>(null)
 
     provide(EdgeId, props.id)
     provide(EdgeRef, edgeEl)

packages/core/src/components/Handle/Handle.vue

@@ -95,7 +95,7 @@ until(() => node.initialized)
 
     const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
 
-    if (!nodeEl || !handle.value || !viewportNode || !handleId.value) {
+    if (!nodeEl.value || !handle.value || !viewportNode || !handleId.value) {
       return
     }
 

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -64,7 +64,7 @@ const NodeWrapper = defineComponent({
 
     const connectedEdges = computed(() => getConnectedEdges([node.value], edges.value))
 
-    const nodeElement = ref<HTMLDivElement>()
+    const nodeElement = ref<HTMLDivElement | null>(null)
 
     provide(NodeRef, nodeElement)
 

packages/core/src/components/NodesSelection/NodesSelection.vue

@@ -7,7 +7,7 @@ const { emits, viewport, getSelectedNodes, noPanClassName, disableKeyboardA11y,
 
 const updatePositions = useUpdateNodePositions()
 
-const el = ref<HTMLDivElement>()
+const el = ref<HTMLDivElement | null>(null)
 
 const dragging = useDrag({
   el,

packages/core/src/composables/useDrag.ts

@@ -23,7 +23,7 @@ interface UseDragParams {
   onStart: (args: Omit<NodeDragEvent, 'intersections'>) => void
   onDrag: (event: Omit<NodeDragEvent, 'intersections'>) => void
   onStop: (event: Omit<NodeDragEvent, 'intersections'>) => void
-  el: Ref<Element | undefined>
+  el: Ref<Element | null>
   disabled?: MaybeRefOrGetter<boolean>
   selectable?: MaybeRefOrGetter<boolean>
   dragHandle?: MaybeRefOrGetter<string | undefined>

packages/core/src/composables/useEdge.ts

@@ -1,4 +1,4 @@
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 import { useVueFlow } from './useVueFlow'
 import type { CustomEvent, ElementData } from '~/types'
 import { ErrorCode, VueFlowError } from '~/utils'
@@ -13,7 +13,7 @@ import { EdgeId, EdgeRef } from '~/context'
  */
 export function useEdge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
   const edgeId = id ?? inject(EdgeId, '')
-  const edgeEl = inject(EdgeRef, null)
+  const edgeEl = inject(EdgeRef, ref(null))
 
   const { findEdge, emits } = useVueFlow()
 

packages/core/src/composables/useNode.ts

@@ -1,4 +1,4 @@
-import { computed, inject } from 'vue'
+import { computed, inject, ref } from 'vue'
 import { useVueFlow } from './useVueFlow'
 import type { CustomEvent, ElementData } from '~/types'
 import { NodeId, NodeRef } from '~/context'
@@ -13,7 +13,7 @@ import { ErrorCode, VueFlowError, getConnectedEdges } from '~/utils'
  */
 export function useNode<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
   const nodeId = id ?? inject(NodeId, '')
-  const nodeEl = inject(NodeRef, null)
+  const nodeEl = inject(NodeRef, ref(null))
 
   const { findNode, edges, emits } = useVueFlow()
 

packages/core/src/context/index.ts

@@ -3,7 +3,7 @@ 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 NodeRef: InjectionKey<Ref<HTMLDivElement | null>> = Symbol('nodeRef')
 export const EdgeId: InjectionKey<string> = Symbol('edgeId')
-export const EdgeRef: InjectionKey<Ref<SVGElement>> = Symbol('edgeRef')
+export const EdgeRef: InjectionKey<Ref<SVGElement | null>> = Symbol('edgeRef')
 export const Slots: InjectionKey<TSlots> = Symbol('slots')

packages/core/src/types/components.ts

@@ -1,8 +1,7 @@
 import type { CSSProperties, Component, DefineComponent, SVGAttributes, VNode } from 'vue'
 import type { NodeProps } from './node'
 import type { EdgeProps } from './edge'
-import type BezierEdge from '~/components/Edges/BezierEdge'
-import type { SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
+import type { BezierEdge, SimpleBezierEdge, SmoothStepEdge, StepEdge, StraightEdge } from '~/components'
 
 /** Global component names are components registered to the vue instance and are "autoloaded" by their string name */
 type GlobalComponentName = string