From d5a62838ee7861a07c2a3554e37c0fe5b58a416e Mon Sep 17 00:00:00 2001
From: artalar <artalar@ya.ru>
Date: Thu, 10 Oct 2024 13:15:36 +0300
Subject: [PATCH] fix(devtools): lines drawing

---
 packages/devtools/src/Graph/reatomLines.tsx | 24 ++++++++++-----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/devtools/src/Graph/reatomLines.tsx b/packages/devtools/src/Graph/reatomLines.tsx
index 46c6fc06..b8a4b94c 100644
--- a/packages/devtools/src/Graph/reatomLines.tsx
+++ b/packages/devtools/src/Graph/reatomLines.tsx
@@ -34,20 +34,20 @@ export const reatomLines = (name: string): Lines => {
         const containerRec = svg.getBoundingClientRect()
         let points = ''
 
-        const calc = (to: AtomCache, from: AtomCache): null | AtomCache => {
-          if (highlighted.has(to)) return null
+        const calc = (target: AtomCache, cause: AtomCache): undefined | null | AtomCache => {
+          if (highlighted.has(target)) return null
 
-          const toRec = document.getElementById(getId(to))?.getBoundingClientRect()
-          const fromEl = document.getElementById(getId(from))
+          const toRec = document.getElementById(getId(target))?.getBoundingClientRect()
+          const fromEl = document.getElementById(getId(cause))
           const fromRec = fromEl?.getBoundingClientRect()
 
           if (!toRec || !fromRec) {
-            return from
+            return cause.cause?.cause && calc(target, cause.cause)
           }
 
           // @ts-expect-error
           if (fromEl?.computedStyleMap().get('display')?.value === 'none') {
-            return from.cause && calc(to, from.cause)
+            return cause.cause?.cause && calc(target, cause.cause)
           }
 
           const toX = 70 + toRec.x + -containerRec.x
@@ -61,16 +61,14 @@ export const reatomLines = (name: string): Lines => {
 
           points += `${toX},${toY} ${middleX},${middleY} ${fromX},${fromY} `
 
-          highlighted.add(to)
+          highlighted.add(target)
 
-          return from
+          return cause
         }
 
-        let target: null | AtomCache = patch
-        while (target && target.cause) {
-          target = calc(target, target.cause!)
-
-          if (!target?.cause?.cause) break
+        let target: undefined | null | AtomCache = patch
+        while (target && target.cause?.cause) {
+          target = calc(target, target.cause)
         }
 
         return (