chore(core): cleanup getHandleBounds (#1828)

chore(core): cleanup getHandleBounds

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

package.json

@@ -17,7 +17,8 @@
     "lint": "turbo lint --filter='./packages/*'",
     "typedocs": "pnpm build && pnpm --dir docs typedocs",
     "ci:version": "changeset version",
-    "ci:publish": "pnpm lint && pnpm build && pnpm test && changeset publish"
+    "ci:publish": "pnpm lint && pnpm build && pnpm test && changeset publish",
+    "changeset:add": "pnpm changeset && git add .changeset && git commit -m 'chore(changeset): add'"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",

packages/core/src/components/ConnectionLine/index.ts

@@ -55,11 +55,11 @@ const ConnectionLine = defineComponent({
       const handleType = connectionStartHandle.value.type
 
       const fromHandleBounds = fromNode.value.handleBounds
-      let handleBounds = fromHandleBounds?.[handleType] || []
+      let handleBounds = fromHandleBounds?.[handleType] ?? []
 
       if (connectionMode.value === ConnectionMode.Loose) {
-        const oppositeBounds = fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'] || []
+        const oppositeBounds = fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'] ?? []
-        handleBounds = [...handleBounds, ...oppositeBounds] || oppositeBounds
+        handleBounds = [...handleBounds, ...oppositeBounds]
       }
 
       if (!handleBounds) {
@@ -67,7 +67,7 @@ const ConnectionLine = defineComponent({
       }
 
       const fromHandle = (startHandleId ? handleBounds.find((d) => d.id === startHandleId) : handleBounds[0]) ?? null
-      const fromPosition = fromHandle?.position || Position.Top
+      const fromPosition = fromHandle?.position ?? Position.Top
       const { x: fromX, y: fromY } = getHandlePosition(fromNode.value, fromHandle, fromPosition)
 
       let toHandle: HandleElement | null = null
@@ -81,7 +81,7 @@ const ConnectionLine = defineComponent({
         } else {
           // if connection mode is loose, look for the handle in both source and target bounds
           toHandle =
-            [...(toNode.value.handleBounds.source || []), ...(toNode.value.handleBounds.target || [])]?.find(
+            [...(toNode.value.handleBounds.source ?? []), ...(toNode.value.handleBounds.target ?? [])]?.find(
               (d) => d.id === connectionEndHandle.value?.id,
             ) || null
         }

packages/core/src/store/actions.ts

@@ -140,8 +140,8 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
 
     const changes: NodeDimensionChange[] = []
 
-    for (let i = 0; i < updates.length; ++i) {
+    for (const element of updates) {
-      const update = updates[i]
+      const update = element
 
       const node = findNode(update.id)
 
@@ -157,8 +157,8 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
         if (doUpdate) {
           const nodeBounds = update.nodeElement.getBoundingClientRect()
           node.dimensions = dimensions
-          node.handleBounds.source = getHandleBounds('source', update.nodeElement, nodeBounds, zoom)
+          node.handleBounds.source = getHandleBounds('source', update.nodeElement, nodeBounds, zoom, node.id)
-          node.handleBounds.target = getHandleBounds('target', update.nodeElement, nodeBounds, zoom)
+          node.handleBounds.target = getHandleBounds('target', update.nodeElement, nodeBounds, zoom, node.id)
 
           changes.push({
             id: node.id,

packages/core/src/types/node.ts

@@ -19,8 +19,8 @@ export interface CoordinateExtentRange {
 }
 
 export interface NodeHandleBounds {
-  source?: HandleElement[]
+  source: HandleElement[] | null
-  target?: HandleElement[]
+  target: HandleElement[] | null
 }
 
 /** @deprecated will be removed in next major release */

packages/core/src/utils/edge.ts

@@ -30,7 +30,7 @@ export function getHandlePosition(
   }
 }
 
-export function getEdgeHandle(bounds: HandleElement[] | undefined, handleId?: string | null): HandleElement | null {
+export function getEdgeHandle(bounds: HandleElement[] | null, handleId?: string | null): HandleElement | null {
   if (!bounds) {
     return null
   }

packages/core/src/utils/node.ts

@@ -8,22 +8,25 @@ export function getHandleBounds(
   nodeElement: HTMLDivElement,
   nodeBounds: DOMRect,
   zoom: number,
-): HandleElement[] {
+  nodeId: string,
+): HandleElement[] | null {
   const handles = nodeElement.querySelectorAll(`.vue-flow__handle.${type}`)
 
-  const handlesArray = Array.from(handles) as HTMLDivElement[]
+  if (!handles?.length) {
+    return null
+  }
 
-  return handlesArray.map((handle): HandleElement => {
+  return Array.from(handles).map((handle): HandleElement => {
     const handleBounds = handle.getBoundingClientRect()
 
     return {
       id: handle.getAttribute('data-handleid'),
-      position: handle.getAttribute('data-handlepos') as unknown as Position,
-      nodeId: handle.getAttribute('data-nodeid') as string,
       type,
+      nodeId,
+      position: handle.getAttribute('data-handlepos') as unknown as Position,
       x: (handleBounds.left - nodeBounds.left) / zoom,
       y: (handleBounds.top - nodeBounds.top) / zoom,
-      ...getDimensions(handle),
+      ...getDimensions(handle as HTMLDivElement),
     }
   })
 }