💄 Improve edges alignment when connected to blocks

Related to #219

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"

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"

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) && (

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 -