fix: helper lines for nested elements (#680)

Author: tamang29

library/lib/utils/alignmentUtils.ts

@@ -1,5 +1,6 @@
 import { Node } from "@xyflow/react"
 import { AlignmentGuide } from "@/store/alignmentGuidesStore"
+import { getPositionOnCanvas, isParentNodeType } from "@/utils/nodeUtils"
 
 const ALIGNMENT_THRESHOLD = 10 // pixels within which guides appear
 
@@ -15,9 +16,12 @@ export type AlignmentInfo = {
 /**
  * Get the bounds of a node (considering its position and dimensions)
  */
-export const getNodeBounds = (node: Node) => {
-  const x = node.position.x
-  const y = node.position.y
+export const getNodeBounds = (node: Node, allNodes?: Node[]) => {
+  const position = allNodes
+    ? getPositionOnCanvas(node, allNodes)
+    : node.position
+  const x = position.x
+  const y = position.y
   const width = node.measured?.width || 100
   const height = node.measured?.height || 100
 
@@ -31,6 +35,78 @@ export const getNodeBounds = (node: Node) => {
   }
 }
 
+const getContainingParentId = (
+  node: Node,
+  allNodes: Node[],
+  excludeParentId?: string
+) => {
+  if (node.parentId) {
+    return node.parentId
+  }
+
+  const nodeBounds = getNodeBounds(node, allNodes)
+  let bestParent: Node | undefined
+  let bestArea = Infinity
+
+  for (const candidate of allNodes) {
+    if (
+      candidate.id === node.id ||
+      candidate.id === excludeParentId ||
+      !isParentNodeType(candidate.type)
+    ) {
+      continue
+    }
+
+    const parentBounds = getNodeBounds(candidate, allNodes)
+    const contains =
+      nodeBounds.left >= parentBounds.left &&
+      nodeBounds.right <= parentBounds.right &&
+      nodeBounds.top >= parentBounds.top &&
+      nodeBounds.bottom <= parentBounds.bottom
+
+    if (!contains) {
+      continue
+    }
+
+    const area =
+      (parentBounds.right - parentBounds.left) *
+      (parentBounds.bottom - parentBounds.top)
+    if (area < bestArea) {
+      bestArea = area
+      bestParent = candidate
+    }
+  }
+
+  return bestParent?.id
+}
+
+const shouldUseAsGuideTarget = (
+  draggedNode: Node,
+  node: Node,
+  allNodes: Node[],
+  draggedParentId: string | undefined
+) => {
+  const nodeParentId = getContainingParentId(node, allNodes, draggedNode.id)
+
+  if (!draggedParentId) {
+    // Dragged node is top-level: align with everything except nodes that
+    // are children of a parent the dragged node has no relation to...
+    // actually align with all nodes including parent frames
+    return true
+  }
+
+  // Dragged node is a child: skip the parent container it belongs to
+  // (no point snapping to your own frame), but allow all other nodes
+  if (node.id === draggedParentId) {
+    return false
+  }
+
+  const isSibling = nodeParentId === draggedParentId
+  const isTopLevel = !nodeParentId
+
+  return isSibling || isTopLevel
+}
+
 /**
  * Calculate alignment guides based on dragged node and other nodes
  */
@@ -39,14 +115,22 @@ export const calculateAlignmentGuides = (
   allNodes: Node[],
   threshold: number = ALIGNMENT_THRESHOLD
 ): AlignmentGuide[] => {
-  const draggedBounds = getNodeBounds(draggedNode)
+  const nodesWithDrag = allNodes.map((node) =>
+    node.id === draggedNode.id ? draggedNode : node
+  )
+  const draggedParentId = draggedNode.parentId
+  const draggedBounds = getNodeBounds(draggedNode, nodesWithDrag)
   const guides: AlignmentGuide[] = []
   const alignedPositions = new Set<number>()
 
-  const otherNodes = allNodes.filter((n) => n.id !== draggedNode.id)
+  const otherNodes = nodesWithDrag.filter(
+    (node) =>
+      node.id !== draggedNode.id &&
+      shouldUseAsGuideTarget(draggedNode, node, nodesWithDrag, draggedParentId)
+  )
 
   for (const node of otherNodes) {
-    const nodeBounds = getNodeBounds(node)
+    const nodeBounds = getNodeBounds(node, nodesWithDrag)
 
     // Vertical alignment (left, center, right edges)
     const verticalAlignments = [
@@ -139,48 +223,52 @@ export const calculateAlignmentGuides = (
 export const snapNodeToGuides = (
   draggedNode: Node,
   guides: AlignmentGuide[],
-  threshold: number = ALIGNMENT_THRESHOLD
+  threshold: number = ALIGNMENT_THRESHOLD,
+  allNodes?: Node[]
 ): { x?: number; y?: number } => {
-  const draggedBounds = getNodeBounds(draggedNode)
+  const draggedBounds = getNodeBounds(draggedNode, allNodes)
+  const draggedPosition = allNodes
+    ? getPositionOnCanvas(draggedNode, allNodes)
+    : draggedNode.position
   const snappedPosition: { x?: number; y?: number } = {}
 
   for (const guide of guides) {
     if (guide.type === "vertical") {
       // Snap left edge
       if (Math.abs(draggedBounds.left - guide.position) < threshold) {
-        snappedPosition.x = guide.position - draggedNode.position.x
+        snappedPosition.x = guide.position - draggedPosition.x
       }
       // Snap center
       if (Math.abs(draggedBounds.centerX - guide.position) < threshold) {
         snappedPosition.x =
           guide.position -
-          draggedNode.position.x -
+          draggedPosition.x -
           (draggedNode.measured?.width || 100) / 2
       }
       // Snap right edge
       if (Math.abs(draggedBounds.right - guide.position) < threshold) {
         snappedPosition.x =
           guide.position -
-          draggedNode.position.x -
+          draggedPosition.x -
           (draggedNode.measured?.width || 100)
       }
     } else if (guide.type === "horizontal") {
       // Snap top edge
       if (Math.abs(draggedBounds.top - guide.position) < threshold) {
-        snappedPosition.y = guide.position - draggedNode.position.y
+        snappedPosition.y = guide.position - draggedPosition.y
       }
       // Snap center
       if (Math.abs(draggedBounds.centerY - guide.position) < threshold) {
         snappedPosition.y =
           guide.position -
-          draggedNode.position.y -
+          draggedPosition.y -
           (draggedNode.measured?.height || 100) / 2
       }
       // Snap bottom edge
       if (Math.abs(draggedBounds.bottom - guide.position) < threshold) {
         snappedPosition.y =
           guide.position -
-          draggedNode.position.y -
+          draggedPosition.y -
           (draggedNode.measured?.height || 100)
       }
     }

library/tests/unit/alignmentUtils.test.ts

@@ -15,14 +15,17 @@ function makeNode(
   x: number,
   y: number,
   width?: number,
-  height?: number
+  height?: number,
+  overrides: Partial<Node> = {}
 ): Node {
+  const measured =
+    width !== undefined ? { width, height: height ?? width } : undefined
   return {
     id,
     position: { x, y },
     data: {},
-    measured:
-      width !== undefined ? { width, height: height ?? width } : undefined,
+    ...overrides,
+    measured: overrides.measured ?? measured,
   } as Node
 }
 
@@ -142,6 +145,62 @@ describe("calculateAlignmentGuides", () => {
     const verticals = guides.filter((g) => g.type === "vertical")
     expect(verticals.some((g) => g.position === 100)).toBe(true)
   })
+
+  it("targets siblings but skips its parent when dragging a child", () => {
+    const parent = makeNode("p", 0, 0, 400, 300, { type: "package" })
+    const dragged = makeNode("c1", 0, 50, 100, 80, {
+      parentId: "p",
+      type: "class",
+    })
+    const sibling = makeNode("c2", 200, 50, 100, 80, {
+      parentId: "p",
+      type: "class",
+    })
+
+    const guides = calculateAlignmentGuides(dragged, [parent, dragged, sibling])
+    expect(guides.some((g) => g.type === "vertical" && g.position === 0)).toBe(
+      false
+    )
+    expect(
+      guides.some((g) => g.type === "horizontal" && g.position === 50)
+    ).toBe(true)
+  })
+
+  it("includes contained nodes when dragging a top-level node", () => {
+    const pkg = makeNode("p", 200, 0, 200, 200, { type: "package" })
+    const contained = makeNode("c", 220, 30, 80, 60, { type: "class" })
+    const dragged = makeNode("d", 220, 30, 100, 50, { type: "class" })
+
+    const guides = calculateAlignmentGuides(dragged, [dragged, pkg, contained])
+    expect(
+      guides.some((g) => g.type === "horizontal" && g.position === 30)
+    ).toBe(true)
+    expect(
+      guides.some((g) => g.type === "vertical" && g.position === 220)
+    ).toBe(true)
+  })
+
+  it("targets top-level and contained nodes when dragging a package", () => {
+    const dragged = makeNode("p1", 300, 40, 200, 200, { type: "package" })
+    const otherPackage = makeNode("p2", 300, 0, 200, 200, { type: "package" })
+    const contained = makeNode("c", 305, 40, 80, 60, { type: "class" })
+
+    const guides = calculateAlignmentGuides(dragged, [
+      dragged,
+      otherPackage,
+      contained,
+    ])
+
+    expect(
+      guides.some((g) => g.type === "vertical" && g.position === 300)
+    ).toBe(true)
+    expect(
+      guides.some((g) => g.type === "vertical" && g.position === 305)
+    ).toBe(true)
+    expect(
+      guides.some((g) => g.type === "horizontal" && g.position === 40)
+    ).toBe(true)
+  })
 })
 
 // ---------------------------------------------------------------------------