fix(editor): 🐛 Edge not properly connecting to step target

apps/builder/components/shared/Graph/Edges/Edge.tsx

@@ -1,5 +1,5 @@
 import { Coordinates, useGraph } from 'contexts/GraphContext'
-import React, { useMemo } from 'react'
+import React, { useLayoutEffect, useMemo, useState } from 'react'
 import {
   getAnchorsPosition,
   computeEdgePath,
@@ -38,23 +38,22 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
         getSourceEndpointId(edge)
       ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      sourceBlockCoordinates?.x,
-      sourceBlockCoordinates?.y,
-      edge,
-      sourceEndpoints,
-    ]
+    [sourceBlockCoordinates?.y, edge, sourceEndpoints]
   )
-  const targetTop = useMemo(
-    () => getEndpointTopOffset(targetEndpoints, graphOffsetY, edge?.to.stepId),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      targetBlockCoordinates?.x,
+
+  const [targetTop, setTargetTop] = useState(
+    getEndpointTopOffset(targetEndpoints, graphOffsetY, edge?.to.stepId)
+  )
+  useLayoutEffect(() => {
+    setTargetTop(
+      getEndpointTopOffset(targetEndpoints, graphOffsetY, edge?.to.stepId)
+    )
+  }, [
     targetBlockCoordinates?.y,
-      edge?.to.stepId,
     targetEndpoints,
-    ]
-  )
+    graphOffsetY,
+    edge?.to.stepId,
+  ])
 
   const path = useMemo(() => {
     if (!sourceBlockCoordinates || !targetBlockCoordinates || !sourceTop)

apps/builder/components/shared/Graph/Graph.tsx

@@ -10,6 +10,7 @@ import { Block, DraggableStepType, PublicTypebot, Typebot } from 'models'
 import { generate } from 'short-uuid'
 import { AnswersCount } from 'services/analytics'
 import { useDebounce } from 'use-debounce'
+import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
 
 declare const window: { chrome: unknown | undefined }
 
@@ -115,7 +116,18 @@ export const Graph = ({
   useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
   useEventListener('mouseup', handleGlobalMouseUp)
   useEventListener('click', handleClick, editorContainerRef.current)
+
+  const onDrag = (event: DraggableEvent, draggableData: DraggableData) => {
+    const { deltaX, deltaY } = draggableData
+    setGraphPosition({
+      x: graphPosition.x + deltaX,
+      y: graphPosition.y + deltaY,
+      scale: 1,
+    })
+  }
+
   return (
+    <DraggableCore onDrag={onDrag}>
       <Flex
         ref={graphContainerRef}
         onMouseDown={handleMouseDown}
@@ -144,5 +156,6 @@ export const Graph = ({
           ))}
         </Flex>
       </Flex>
+    </DraggableCore>
   )
 }

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx

@@ -3,7 +3,6 @@ import {
   EditableInput,
   EditablePreview,
   Stack,
-  useEventListener,
 } from '@chakra-ui/react'
 import React, { useEffect, useRef, useState } from 'react'
 import { Block } from 'models'
@@ -16,6 +15,7 @@ import { ContextMenu } from 'components/shared/ContextMenu'
 import { BlockNodeContextMenu } from './BlockNodeContextMenu'
 import { useDebounce } from 'use-debounce'
 import { setMultipleRefs } from 'services/utils'
+import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
 
 type Props = {
   block: Block
@@ -67,25 +67,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
 
   const handleMouseDown = (e: React.MouseEvent) => {
     e.stopPropagation()
-    setIsMouseDown(true)
   }
-  const handleMouseUp = () => {
-    setIsMouseDown(false)
-  }
-  useEventListener('mouseup', handleMouseUp)
-
-  const handleMouseMove = (event: MouseEvent) => {
-    if (!isMouseDown) return
-    const { movementX, movementY } = event
-
-    if (!blockCoordinates) return
-    updateBlockCoordinates(block.id, {
-      x: blockCoordinates.x + movementX,
-      y: blockCoordinates.y + movementY,
-    })
-  }
-
-  useEventListener('mousemove', handleMouseMove)
 
   const handleMouseEnter = () => {
     if (isReadOnly) return
@@ -101,12 +83,21 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
     if (connectingIds) setConnectingIds({ ...connectingIds, target: undefined })
   }
 
+  const onDrag = (event: DraggableEvent, draggableData: DraggableData) => {
+    const { deltaX, deltaY } = draggableData
+    updateBlockCoordinates(block.id, {
+      x: blockCoordinates.x + deltaX,
+      y: blockCoordinates.y + deltaY,
+    })
+  }
+
   return (
     <ContextMenu<HTMLDivElement>
       renderMenu={() => <BlockNodeContextMenu blockIndex={blockIndex} />}
       isDisabled={isReadOnly}
     >
       {(ref, isOpened) => (
+        <DraggableCore onDrag={onDrag} onMouseDown={(e) => e.stopPropagation()}>
           <Stack
             ref={setMultipleRefs([ref, blockRef])}
             data-testid="block"
@@ -156,6 +147,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
               />
             )}
           </Stack>
+        </DraggableCore>
       )}
     </ContextMenu>
   )

apps/builder/package.json

@@ -66,6 +66,7 @@
     "qs": "^6.10.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-draggable": "^4.4.4",
     "react-table": "^7.7.0",
     "short-uuid": "^4.2.0",
     "slate": "^0.72.8",

apps/builder/pages/api/integrations/email/test-config.ts

@@ -6,15 +6,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (req.method === 'POST') {
     const { from, port, isTlsEnabled, username, password, host, to } =
       JSON.parse(req.body) as SmtpCredentialsData & { to: string }
-    console.log({
-      host,
-      port,
-      secure: isTlsEnabled ?? undefined,
-      auth: {
-        user: username,
-        pass: password,
-      },
-    })
     const transporter = createTransport({
       host,
       port,

yarn.lock

@@ -11547,7 +11547,7 @@ prompts@^2.4.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -11817,6 +11817,14 @@ react-dom@17.0.2, react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-draggable@^4.4.4:
+  version "4.4.4"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.4.tgz#5b26d9996be63d32d285a426f41055de87e59b2f"
+  integrity sha512-6e0WdcNLwpBx/YIDpoyd2Xb04PB0elrDrulKUgdrIlwuYvxh5Ok9M+F8cljm8kPXXs43PmMzek9RrB1b7mLMqA==
+  dependencies:
+    clsx "^1.1.1"
+    prop-types "^15.6.0"
+
 react-error-overlay@^6.0.10:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6"