chore(core): cleanup

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

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

@@ -33,7 +33,7 @@ const { id: nodeId, node, nodeEl, connectedEdges } = useNode()
 
 const handle = ref<HTMLDivElement>()
 
-const handleId = computed(() => id ?? `${nodeId}__handle-${position}`)
+const handleId = computed(() => id ?? `${nodeId.value}__handle-${position}`)
 
 const isConnectableStart = computed(() => (typeof connectableStart !== 'undefined' ? connectableStart : true))
 
@@ -51,7 +51,7 @@ const isConnectable = computed(() => {
     return !connectedEdges.value.some((edge) => {
       const id = edge[`${type.value}Handle`]
 
-      if (edge[type.value] !== nodeId) {
+      if (edge[type.value] !== nodeId.value) {
         return false
       }
 
@@ -60,42 +60,42 @@ const isConnectable = computed(() => {
   }
 
   if (isFunction(connectable)) {
-    return connectable(node, connectedEdges.value)
+    return connectable(node.value, connectedEdges.value)
   }
 
   return isDef(connectable) ? connectable : nodesConnectable.value
 })
 
 const isConnecting = computed(
   () =>
-    (connectionStartHandle.value?.nodeId === nodeId &&
+    (connectionStartHandle.value?.nodeId === nodeId.value &&
       connectionStartHandle.value?.handleId === handleId.value &&
       connectionStartHandle.value?.type === type.value) ||
-    (connectionEndHandle.value?.nodeId === nodeId &&
+    (connectionEndHandle.value?.nodeId === nodeId.value &&
       connectionEndHandle.value?.handleId === handleId.value &&
       connectionEndHandle.value?.type === type.value),
 )
 
 const isClickConnecting = computed(
   () =>
-    connectionClickStartHandle.value?.nodeId === nodeId &&
+    connectionClickStartHandle.value?.nodeId === nodeId.value &&
     connectionClickStartHandle.value?.handleId === handleId.value &&
     connectionClickStartHandle.value?.type === type.value,
 )
 
 // set up handle bounds if they don't exist yet and the node has been initialized (i.e. the handle was added after the node has already been mounted)
-until(() => node?.initialized)
+until(() => node.value.initialized)
   .toBe(true, { flush: 'post' })
   .then(() => {
-    const existingBounds = node.handleBounds[type.value]?.find((b) => b.id === handleId.value)
+    const existingBounds = node.value.handleBounds[type.value]?.find((b) => b.id === handleId.value)
 
     if (!vueFlowRef.value || existingBounds) {
       return
     }
 
     const viewportNode = vueFlowRef.value.querySelector('.vue-flow__transformationpane')
 
-    if (!nodeEl || !handle.value || !viewportNode || !handleId.value) {
+    if (!nodeEl.value || !handle.value || !viewportNode || !handleId.value) {
       return
     }
 
@@ -114,7 +114,7 @@ until(() => node?.initialized)
       ...getDimensions(handle.value),
     }
 
-    node.handleBounds[type.value] = [...(node.handleBounds[type.value] ?? []), nextBounds]
+    node.value.handleBounds[type.value] = [...(node.value.handleBounds[type.value] ?? []), nextBounds]
   })
 
 function onPointerDown(event: MouseEvent | TouchEvent) {

packages/core/src/composables/useEdge.ts

@@ -1,5 +1,6 @@
-import type { MaybeRef } from '@vueuse/core'
+import type { MaybeRefOrGetter } from '@vueuse/core'
 import { computed, inject } from 'vue'
+import { toValue } from '@vueuse/core'
 import { useVueFlow } from './useVueFlow'
 import type { GraphEdge } from '~/types'
 import { ErrorCode, VueFlowError } from '~/utils'
@@ -13,34 +14,26 @@ import { EdgeId, EdgeRef } from '~/context'
  *
  * @param id The id of the edge to get
  */
-export function useEdge<T extends GraphEdge = GraphEdge>(id?: MaybeRef<string>) {
+export function useEdge<T extends GraphEdge = GraphEdge>(id?: MaybeRefOrGetter<string>) {
   const { findEdge, emits } = useVueFlow()
 
   const edgeRef = inject(EdgeRef, null)
 
   const edgeIdInjection = inject(EdgeId, '')
 
   const edgeId = computed(() => {
-    const nextId = unref(id) ?? edgeIdInjection
+    const nextId = toValue(id) ?? edgeIdInjection
 
-    if (!nextId || nextId === '') {
-      throw new VueFlowError(`No edge id provided and no injection could be found!`, 'useEdge')
+    if (!nextId) {
+      emits.error(new VueFlowError(ErrorCode.EDGE_NOT_FOUND, nextId))
     }
 
     return nextId
   })
 
-  const edgeEl = computed(() => unref(edgeRef) ?? document.querySelector(`[data-id="${edgeId.value}"]`))
+  const edgeEl = computed(() => toValue(edgeRef) ?? document.querySelector(`[data-id="${edgeId.value}"]`))
 
-  const edge = computed(() => {
-    const nextEdge = findEdge<T>(edgeId.value)
-
-    if (!nextEdge) {
-      throw new VueFlowError(`Edge with id ${edgeId.value} not found!`, 'useEdge')
-    }
-
-    return nextEdge
-  })
+  const edge = computed(() => findEdge<T>(edgeId.value)!)
 
   return {
     id: edgeId,

packages/core/src/composables/useNode.ts

@@ -1,6 +1,7 @@
 import { computed, inject } from 'vue'
+import type { MaybeRefOrGetter } from '@vueuse/core'
+import { toValue } from '@vueuse/core'
 import { useVueFlow } from './useVueFlow'
-import type { MaybeRef } from '@vueuse/core'
 import type { GraphNode } from '~/types'
 import { NodeId, NodeRef } from '~/context'
 import { ErrorCode, VueFlowError, getConnectedEdges } from '~/utils'
@@ -11,34 +12,26 @@ import { ErrorCode, VueFlowError, getConnectedEdges } from '~/utils'
  * If no node id is provided, the node 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 node component, or it will throw!
  */
-export function useNode<T extends GraphNode = GraphNode>(id?: MaybeRef<string>) {
+export function useNode<T extends GraphNode = GraphNode>(id?: MaybeRefOrGetter<string>) {
   const { findNode, edges, emits } = useVueFlow()
 
   const nodeIdInjection = inject(NodeId, '')
 
   const nodeId = computed(() => {
-    const nextId = unref(id) ?? nodeIdInjection
+    const nextId = toValue(id) ?? nodeIdInjection
 
-    if (!nextId || nextId === '') {
-      throw new VueFlowError(`No node id provided and no injection could be found!`, 'useNode')
+    if (!nextId) {
+      emits.error(new VueFlowError(ErrorCode.NODE_NOT_FOUND, nextId))
     }
 
     return nextId
   })
 
   const nodeRef = inject(NodeRef, null)
 
-  const nodeEl = computed(() => unref(nodeRef) ?? document.querySelector(`[data-id="${nodeId.value}"]`))
+  const nodeEl = computed(() => toValue(nodeRef) ?? document.querySelector(`[data-id="${nodeId.value}"]`))
 
-  const node = computed(() => {
-    const nextNode = findNode<T>(nodeId.value)
-
-    if (!nextNode) {
-      throw new VueFlowError(`Node with id ${nodeId.value} not found!`, 'useNode')
-    }
-
-    return nextNode
-  })
+  const node = computed(() => findNode<T>(nodeId.value)!)
 
   const parentNode = computed(() => findNode(node.value.parentNode))