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

baptisteArno · Feb 19, 2022 · 7a4b96f · 7a4b96f · vercel · Feb 19, 2022
1 parent 3456e5a
commit 7a4b96f
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 118 deletions.
diff --git a/apps/builder/components/shared/Graph/Edges/Edge.tsx b/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,
-      targetBlockCoordinates?.y,
-      edge?.to.stepId,
-      targetEndpoints,
-    ]
+
+  const [targetTop, setTargetTop] = useState(
+    getEndpointTopOffset(targetEndpoints, graphOffsetY, edge?.to.stepId)
   )
+  useLayoutEffect(() => {
+    setTargetTop(
+      getEndpointTopOffset(targetEndpoints, graphOffsetY, edge?.to.stepId)
+    )
+  }, [
+    targetBlockCoordinates?.y,
+    targetEndpoints,
+    graphOffsetY,
+    edge?.to.stepId,
+  ])
 
   const path = useMemo(() => {
     if (!sourceBlockCoordinates || !targetBlockCoordinates || !sourceTop)

diff --git a/apps/builder/components/shared/Graph/Graph.tsx b/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,34 +116,46 @@ 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 (
-    <Flex
-      ref={graphContainerRef}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      position="relative"
-      {...props}
-    >
+    <DraggableCore onDrag={onDrag}>
       <Flex
-        flex="1"
-        w="full"
-        h="full"
-        position="absolute"
-        style={{
-          transform,
-        }}
-        willChange="transform"
-        transformOrigin="0px 0px 0px"
+        ref={graphContainerRef}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        position="relative"
+        {...props}
       >
-        <Edges
-          edges={typebot?.edges ?? []}
-          answersCounts={answersCounts}
-          onUnlockProPlanClick={onUnlockProPlanClick}
-        />
-        {typebot?.blocks.map((block, idx) => (
-          <BlockNode block={block as Block} blockIndex={idx} key={block.id} />
-        ))}
+        <Flex
+          flex="1"
+          w="full"
+          h="full"
+          position="absolute"
+          style={{
+            transform,
+          }}
+          willChange="transform"
+          transformOrigin="0px 0px 0px"
+        >
+          <Edges
+            edges={typebot?.edges ?? []}
+            answersCounts={answersCounts}
+            onUnlockProPlanClick={onUnlockProPlanClick}
+          />
+          {typebot?.blocks.map((block, idx) => (
+            <BlockNode block={block as Block} blockIndex={idx} key={block.id} />
+          ))}
+        </Flex>
       </Flex>
-    </Flex>
+    </DraggableCore>
   )
 }
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx b/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,26 +67,8 @@ 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
     if (mouseOverBlock?.id !== block.id && !isStartBlock)
@@ -101,61 +83,71 @@ 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) => (
-        <Stack
-          ref={setMultipleRefs([ref, blockRef])}
-          data-testid="block"
-          p="4"
-          rounded="lg"
-          bgColor="blue.50"
-          backgroundImage="linear-gradient(rgb(235, 239, 244), rgb(231, 234, 241))"
-          borderWidth="2px"
-          borderColor={
-            isConnecting || isOpened || isPreviewing ? 'blue.400' : 'white'
-          }
-          w="300px"
-          transition="border 300ms, box-shadow 200ms"
-          pos="absolute"
-          style={{
-            transform: `translate(${blockCoordinates?.x ?? 0}px, ${
-              blockCoordinates?.y ?? 0
-            }px)`,
-          }}
-          onMouseDown={handleMouseDown}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          cursor={isMouseDown ? 'grabbing' : 'pointer'}
-          boxShadow="0px 0px 0px 1px #e9edf3;"
-          _hover={{ shadow: 'lg' }}
-        >
-          <Editable
-            defaultValue={block.title}
-            onSubmit={handleTitleSubmit}
-            fontWeight="semibold"
-            pointerEvents={isReadOnly ? 'none' : 'auto'}
+        <DraggableCore onDrag={onDrag} onMouseDown={(e) => e.stopPropagation()}>
+          <Stack
+            ref={setMultipleRefs([ref, blockRef])}
+            data-testid="block"
+            p="4"
+            rounded="lg"
+            bgColor="blue.50"
+            backgroundImage="linear-gradient(rgb(235, 239, 244), rgb(231, 234, 241))"
+            borderWidth="2px"
+            borderColor={
+              isConnecting || isOpened || isPreviewing ? 'blue.400' : 'white'
+            }
+            w="300px"
+            transition="border 300ms, box-shadow 200ms"
+            pos="absolute"
+            style={{
+              transform: `translate(${blockCoordinates?.x ?? 0}px, ${
+                blockCoordinates?.y ?? 0
+              }px)`,
+            }}
+            onMouseDown={handleMouseDown}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            cursor={isMouseDown ? 'grabbing' : 'pointer'}
+            boxShadow="0px 0px 0px 1px #e9edf3;"
+            _hover={{ shadow: 'lg' }}
           >
-            <EditablePreview
-              _hover={{ bgColor: 'gray.300' }}
-              px="1"
-              userSelect={'none'}
-            />
-            <EditableInput minW="0" px="1" />
-          </Editable>
-          {typebot && (
-            <StepNodesList
-              blockId={block.id}
-              steps={block.steps}
-              blockIndex={blockIndex}
-              blockRef={ref}
-              isStartBlock={isStartBlock}
-            />
-          )}
-        </Stack>
+            <Editable
+              defaultValue={block.title}
+              onSubmit={handleTitleSubmit}
+              fontWeight="semibold"
+              pointerEvents={isReadOnly ? 'none' : 'auto'}
+            >
+              <EditablePreview
+                _hover={{ bgColor: 'gray.300' }}
+                px="1"
+                userSelect={'none'}
+              />
+              <EditableInput minW="0" px="1" />
+            </Editable>
+            {typebot && (
+              <StepNodesList
+                blockId={block.id}
+                steps={block.steps}
+                blockIndex={blockIndex}
+                blockRef={ref}
+                isStartBlock={isStartBlock}
+              />
+            )}
+          </Stack>
+        </DraggableCore>
       )}
     </ContextMenu>
   )

diff --git a/apps/builder/package.json b/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",

diff --git a/apps/builder/pages/api/integrations/email/test-config.ts b/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,

diff --git a/yarn.lock b/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"