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

2022-02-19 18:09:09 +01:00
parent 3456e5af82
commit 7a4b96ff7e
6 changed files with 122 additions and 118 deletions
--- 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)
--- 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>
  )
 }
--- 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,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,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>
  )
--- 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",
--- 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,