diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts index dbd64445..480cd38c 100644 --- a/packages/core/src/components/Edges/EdgeWrapper.ts +++ b/packages/core/src/components/Edges/EdgeWrapper.ts @@ -51,7 +51,7 @@ const EdgeWrapper = defineComponent({ const edgeUpdaterType = ref('source') - const edgeEl = ref() + const edgeEl = ref(null) provide(EdgeId, props.id) provide(EdgeRef, edgeEl) diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue index 31483406..9187c216 100644 --- a/packages/core/src/components/Handle/Handle.vue +++ b/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 } diff --git a/packages/core/src/components/Nodes/NodeWrapper.ts b/packages/core/src/components/Nodes/NodeWrapper.ts index 752bf94d..c92dbd15 100644 --- a/packages/core/src/components/Nodes/NodeWrapper.ts +++ b/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() + const nodeElement = ref(null) provide(NodeRef, nodeElement) diff --git a/packages/core/src/components/NodesSelection/NodesSelection.vue b/packages/core/src/components/NodesSelection/NodesSelection.vue index 0bfae9e9..9ef1edea 100644 --- a/packages/core/src/components/NodesSelection/NodesSelection.vue +++ b/packages/core/src/components/NodesSelection/NodesSelection.vue @@ -7,7 +7,7 @@ const { emits, viewport, getSelectedNodes, noPanClassName, disableKeyboardA11y, const updatePositions = useUpdateNodePositions() -const el = ref() +const el = ref(null) const dragging = useDrag({ el, diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts index a904e7d6..2892189b 100644 --- a/packages/core/src/composables/useDrag.ts +++ b/packages/core/src/composables/useDrag.ts @@ -23,7 +23,7 @@ interface UseDragParams { onStart: (args: Omit) => void onDrag: (event: Omit) => void onStop: (event: Omit) => void - el: Ref + el: Ref disabled?: MaybeRefOrGetter selectable?: MaybeRefOrGetter dragHandle?: MaybeRefOrGetter diff --git a/packages/core/src/composables/useEdge.ts b/packages/core/src/composables/useEdge.ts index d699ec7c..cd77ee96 100644 --- a/packages/core/src/composables/useEdge.ts +++ b/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 = any>(id?: string) { const edgeId = id ?? inject(EdgeId, '') - const edgeEl = inject(EdgeRef, null) + const edgeEl = inject(EdgeRef, ref(null)) const { findEdge, emits } = useVueFlow() diff --git a/packages/core/src/composables/useNode.ts b/packages/core/src/composables/useNode.ts index ede88494..17cbb776 100644 --- a/packages/core/src/composables/useNode.ts +++ b/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 = any>(id?: string) { const nodeId = id ?? inject(NodeId, '') - const nodeEl = inject(NodeRef, null) + const nodeEl = inject(NodeRef, ref(null)) const { findNode, edges, emits } = useVueFlow() diff --git a/packages/core/src/context/index.ts b/packages/core/src/context/index.ts index df9c4e1e..2317cf5e 100644 --- a/packages/core/src/context/index.ts +++ b/packages/core/src/context/index.ts @@ -3,7 +3,7 @@ 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 NodeRef: InjectionKey> = Symbol('nodeRef') export const EdgeId: InjectionKey = Symbol('edgeId') -export const EdgeRef: InjectionKey> = Symbol('edgeRef') +export const EdgeRef: InjectionKey> = Symbol('edgeRef') export const Slots: InjectionKey = Symbol('slots') diff --git a/packages/core/src/types/components.ts b/packages/core/src/types/components.ts index b952ce2e..fe339725 100644 --- a/packages/core/src/types/components.ts +++ b/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