refactor(utils): move store utils to state

* set z index on edge
* extend edgeVisibleParams by dimensions of target and node edge

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

src/utils/edge.ts

@@ -1,7 +1,7 @@
 import { rectToBox } from './graph'
-import { EdgePositions, GraphNode, HandleElement, Position, Rect, Transform, XYPosition } from '~/types'
+import { EdgePositions, GraphEdge, GraphNode, HandleElement, Position, Rect, Transform, XYPosition } from '~/types'
 
-export function getHandlePosition(position: Position, rect: Rect, handle?: HandleElement): XYPosition {
+export const getHandlePosition = (position: Position, rect: Rect, handle?: HandleElement): XYPosition => {
   const x = (handle?.x ?? 0) + rect.x
   const y = (handle?.y ?? 0) + rect.y
   const width = handle?.width ?? rect.width
@@ -31,7 +31,7 @@ export function getHandlePosition(position: Position, rect: Rect, handle?: Handl
   }
 }
 
-export function getHandle(bounds?: HandleElement[], handleId?: string): HandleElement | undefined {
+export const getHandle = (bounds?: HandleElement[], handleId?: string): HandleElement | undefined => {
   if (!bounds) return undefined
 
   // there is no handleId when there are no multiple handles/ handles with ids
@@ -79,17 +79,31 @@ export const getEdgePositions = (
 interface IsEdgeVisibleParams {
   sourcePos: XYPosition
   targetPos: XYPosition
+  sourceWidth: number
+  sourceHeight: number
+  targetWidth: number
+  targetHeight: number
   width: number
   height: number
   transform: Transform
 }
 
-export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }: IsEdgeVisibleParams): boolean {
+export function isEdgeVisible({
+  sourcePos,
+  targetPos,
+  sourceWidth,
+  sourceHeight,
+  targetWidth,
+  targetHeight,
+  width,
+  height,
+  transform,
+}: IsEdgeVisibleParams): boolean {
   const edgeBox = {
     x: Math.min(sourcePos.x, targetPos.x),
     y: Math.min(sourcePos.y, targetPos.y),
-    x2: Math.max(sourcePos.x, targetPos.x),
-    y2: Math.max(sourcePos.y, targetPos.y),
+    x2: Math.max(sourcePos.x + sourceWidth, targetPos.x + targetWidth),
+    y2: Math.max(sourcePos.y + sourceHeight, targetPos.y + targetHeight),
   }
 
   if (edgeBox.x === edgeBox.x2) {
@@ -113,3 +127,36 @@ export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }
 
   return overlappingArea > 0
 }
+
+export const groupEdgesByZLevel = (edges: GraphEdge[], nodes: GraphNode[]) => {
+  let maxLevel = -1
+  const nodeIds = nodes.map((n) => n.id)
+
+  const levelLookup = edges.reduce<Record<string, GraphEdge[]>>((tree, edge) => {
+    const z = edge.z
+      ? edge.z
+      : Math.max(
+          nodes[nodeIds.indexOf(edge.source)].computedPosition.z || 0,
+          nodes[nodeIds.indexOf(edge.target)].computedPosition.z || 0,
+        )
+    if (tree[z]) {
+      tree[z].push(edge)
+    } else {
+      tree[z] = [edge]
+    }
+
+    maxLevel = z > maxLevel ? z : maxLevel
+
+    return tree
+  }, {})
+
+  return Object.entries(levelLookup).map(([key, edges]) => {
+    const level = +key
+
+    return {
+      edges,
+      level,
+      isMaxLevel: level === maxLevel,
+    }
+  })
+}