From 068f9bbd17bd7796308983a9abcd4de0ead3b7a5 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 27 Jan 2023 15:25:03 +0100
Subject: [PATCH] :lipstick: Improve edges alignment when connected to blocks

Related to #219
---
 .../features/graph/components/Endpoints/SourceEndpoint.tsx    | 2 +-
 .../features/graph/components/Endpoints/TargetEndpoint.tsx    | 2 +-
 .../features/graph/components/Nodes/BlockNode/BlockNode.tsx   | 4 ++--
 apps/builder/src/features/graph/utils.ts                      | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/builder/src/features/graph/components/Endpoints/SourceEndpoint.tsx b/apps/builder/src/features/graph/components/Endpoints/SourceEndpoint.tsx
index 8fdedc1a9..26622e888 100644
--- a/apps/builder/src/features/graph/components/Endpoints/SourceEndpoint.tsx
+++ b/apps/builder/src/features/graph/components/Endpoints/SourceEndpoint.tsx
@@ -55,7 +55,6 @@ export const SourceEndpoint = ({
   if (!groupsCoordinates) return <></>
   return (
     <Flex
-      ref={ref}
       data-testid="endpoint"
       boxSize="32px"
       rounded="full"
@@ -66,6 +65,7 @@ export const SourceEndpoint = ({
       {...props}
     >
       <Flex
+        ref={ref}
         boxSize="20px"
         justify="center"
         align="center"
diff --git a/apps/builder/src/features/graph/components/Endpoints/TargetEndpoint.tsx b/apps/builder/src/features/graph/components/Endpoints/TargetEndpoint.tsx
index 617add1cb..09f31823c 100644
--- a/apps/builder/src/features/graph/components/Endpoints/TargetEndpoint.tsx
+++ b/apps/builder/src/features/graph/components/Endpoints/TargetEndpoint.tsx
@@ -25,7 +25,7 @@ export const TargetEndpoint = ({
   return (
     <Box
       ref={ref}
-      boxSize="15px"
+      boxSize="20px"
       rounded="full"
       bgColor="blue.500"
       cursor="pointer"
diff --git a/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx b/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx
index e7aac324e..4d237c19c 100644
--- a/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx
+++ b/apps/builder/src/features/graph/components/Nodes/BlockNode/BlockNode.tsx
@@ -215,8 +215,8 @@ export const BlockNode = ({
                 <BlockNodeContent block={block} indices={indices} />
                 <TargetEndpoint
                   pos="absolute"
-                  left="-32px"
-                  top="19px"
+                  left="-34px"
+                  top="16px"
                   blockId={block.id}
                 />
                 {isConnectable && hasDefaultConnector(block) && (
diff --git a/apps/builder/src/features/graph/utils.ts b/apps/builder/src/features/graph/utils.ts
index 6c88910b4..bd1c66a91 100644
--- a/apps/builder/src/features/graph/utils.ts
+++ b/apps/builder/src/features/graph/utils.ts
@@ -343,7 +343,7 @@ export const getEndpointTopOffset = ({
   if (!endpointId) return
   const endpointRef = endpoints[endpointId]?.ref
   if (!endpointRef?.current) return
-  const endpointHeight = 34 * graphScale
+  const endpointHeight = 20 * graphScale
   return (
     (endpointRef.current.getBoundingClientRect().y +
       endpointHeight / 2 -