chore(core): cleanup getHandleBounds (#1828)

chore(core): cleanup getHandleBounds Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

Author: bcakmakoglu

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,19 +55,19 @@ 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'] || []
- handleBounds = [...handleBounds, ...oppositeBounds] || oppositeBounds
+ const oppositeBounds = fromHandleBounds?.[handleType === 'source' ? 'target' : 'source'] ?? []
+ handleBounds = [...handleBounds, ...oppositeBounds]
  }
 
  if (!handleBounds) {
  return null
  }
 
  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) {
- const update = updates[i]
+ for (const element of updates) {
+ 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.target = getHandleBounds('target', 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.id)
 
  changes.push({
  id: node.id,

packages/core/src/types/node.ts

@@ -19,8 +19,8 @@ export interface CoordinateExtentRange {
 }
 
 export interface NodeHandleBounds {
- source?: HandleElement[]
- target?: HandleElement[]
+ source: HandleElement[] | null
+ 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),
  }
  })
 }