From 1033e42b60867ebbc245b42abf66ea9b5dc385aa Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 14 Feb 2022 06:23:39 +0100
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=F0=9F=92=AB=20Can=20pan=20grap?=
 =?UTF-8?q?h=20with=20mouse=20+=20click?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../builder/components/shared/Graph/Graph.tsx | 35 +++++++++++++++----
 .../Graph/Nodes/BlockNode/BlockNode.tsx       |  3 +-
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/apps/builder/components/shared/Graph/Graph.tsx b/apps/builder/components/shared/Graph/Graph.tsx
index 22ab2ca5e..98fc19e3a 100644
--- a/apps/builder/components/shared/Graph/Graph.tsx
+++ b/apps/builder/components/shared/Graph/Graph.tsx
@@ -1,5 +1,5 @@
 import { Flex, FlexProps, useEventListener } from '@chakra-ui/react'
-import React, { useRef, useMemo, useEffect } from 'react'
+import React, { useRef, useMemo, useEffect, useState } from 'react'
 import { blockWidth, useGraph } from 'contexts/GraphContext'
 import { BlockNode } from './Nodes/BlockNode/BlockNode'
 import { useStepDnd } from 'contexts/GraphDndContext'
@@ -36,6 +36,7 @@ export const Graph = ({
       `translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
     [graphPosition]
   )
+  const [isMouseDown, setIsMouseDown] = useState(false)
 
   useEffect(() => {
     editorContainerRef.current = document.getElementById(
@@ -60,8 +61,8 @@ export const Graph = ({
         y: graphPosition.y - e.deltaY,
       })
   }
-  useEventListener('wheel', handleMouseWheel, graphContainerRef.current)
 
+  const handleGlobalMouseUp = () => setIsMouseDown(false)
   const handleMouseUp = (e: MouseEvent) => {
     if (!typebot) return
     if (!draggedStep && !draggedStepType) return
@@ -80,19 +81,39 @@ export const Graph = ({
     setDraggedStep(undefined)
     setDraggedStepType(undefined)
   }
-  useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
 
-  const handleMouseDown = (e: MouseEvent) => {
+  const handleCaptureMouseDown = (e: MouseEvent) => {
     const isRightClick = e.button === 2
     if (isRightClick) e.stopPropagation()
   }
-  useEventListener('mousedown', handleMouseDown, undefined, { capture: true })
 
   const handleClick = () => setOpenedStepId(undefined)
-  useEventListener('click', handleClick, editorContainerRef.current)
 
+  const handleMouseDown = () => setIsMouseDown(true)
+  const handleMouseMove = (event: React.MouseEvent) => {
+    if (!isMouseDown) return
+    const { movementX, movementY } = event
+    setGraphPosition({
+      x: graphPosition.x + movementX,
+      y: graphPosition.y + movementY,
+      scale: 1,
+    })
+  }
+
+  useEventListener('wheel', handleMouseWheel, graphContainerRef.current)
+  useEventListener('mousedown', handleCaptureMouseDown, undefined, {
+    capture: true,
+  })
+  useEventListener('mouseup', handleMouseUp, graphContainerRef.current)
+  useEventListener('mouseup', handleGlobalMouseUp)
+  useEventListener('click', handleClick, editorContainerRef.current)
   return (
-    <Flex ref={graphContainerRef} {...props}>
+    <Flex
+      ref={graphContainerRef}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      {...props}
+    >
       <Flex
         flex="1"
         boxSize={'200px'}
diff --git a/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx b/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
index 75b33f99c..5dc50dfaa 100644
--- a/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
+++ b/apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
@@ -65,7 +65,8 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
   const handleTitleSubmit = (title: string) =>
     updateBlock(blockIndex, { title })
 
-  const handleMouseDown = () => {
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.stopPropagation()
     setIsMouseDown(true)
   }
   const handleMouseUp = () => {