♻️ (editor) Migrate from react-draggable to @use-gesture

Closes #168

apps/builder/package.json

@@ -24,6 +24,7 @@
     "@dnd-kit/utilities": "3.2.0",
     "@emotion/react": "11.10.5",
     "@emotion/styled": "11.10.5",
+    "@faire/mjml-react": "2.1.4",
     "@giphy/js-fetch-api": "4.4.0",
     "@giphy/js-types": "4.2.1",
     "@giphy/react-components": "6.2.0",
@@ -38,6 +39,7 @@
     "@udecode/plate-serializer-html": "18.9.0",
     "@udecode/plate-ui-link": "18.9.1",
     "@udecode/plate-ui-toolbar": "18.9.0",
+    "@use-gesture/react": "^10.2.22",
     "aws-sdk": "2.1254.0",
     "bot-engine": "workspace:*",
     "browser-image-compression": "2.0.0",
@@ -46,6 +48,7 @@
     "cuid": "2.1.8",
     "deep-object-diff": "1.1.9",
     "dequal": "2.0.3",
+    "emails": "workspace:*",
     "emojilib": "3.0.7",
     "focus-visible": "5.2.0",
     "framer-motion": "7.6.6",
@@ -68,7 +71,6 @@
     "qs": "6.11.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-draggable": "4.4.5",
     "slate": "0.85.0",
     "slate-history": "0.85.0",
     "slate-hyperscript": "0.77.0",
@@ -79,9 +81,7 @@
     "swr": "1.3.0",
     "tinycolor2": "1.4.2",
     "typebot-js": "workspace:*",
-    "use-debounce": "8.0.4",
+    "use-debounce": "8.0.4"
-    "emails": "workspace:*",
-    "@faire/mjml-react": "2.1.4"
   },
   "devDependencies": {
     "@babel/core": "7.20.2",
@@ -102,6 +102,7 @@
     "@types/tinycolor2": "1.4.3",
     "@typescript-eslint/eslint-plugin": "5.43.0",
     "@typescript-eslint/parser": "5.43.0",
+    "configs": "workspace:*",
     "db": "workspace:*",
     "dotenv": "16.0.3",
     "eslint": "8.27.0",
@@ -110,7 +111,6 @@
     "models": "workspace:*",
     "next-transpile-modules": "10.0.0",
     "typescript": "4.8.4",
-    "utils": "workspace:*",
+    "utils": "workspace:*"
-    "configs": "workspace:*"
   }
 }

apps/builder/src/features/blocks/integrations/chatwoot/components/ChatwootLogo.tsx

@@ -7,20 +7,13 @@ export const ChatwootLogo = (props: IconProps) => (
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
-    <g
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-      id="Square-logo"
+      <g id="chatwoot_logo" fillRule="nonzero">
-      stroke="none"
-      stroke-width="1"
-      fill="none"
-      fill-rule="evenodd"
-    >
-      <g id="chatwoot_logo" fill-rule="nonzero">
         <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
         <path
           d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z"
-          id="Fill-1"
           stroke="#FFFFFF"
-          stroke-width="6"
+          strokeWidth="6"
           fill="#FFFFFF"
         ></path>
       </g>

apps/builder/src/features/editor/components/EditorSettingsForm.tsx

@@ -10,19 +10,20 @@ import {
 import { MouseIcon, LaptopIcon } from '@/components/icons'
 import { useUser } from '@/features/account'
 import { GraphNavigation } from 'db'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
-export const EditorSettingsForm = () => {
+type Props = {
-  const { user, saveUser } = useUser()
+  defaultGraphNavigation: GraphNavigation
-  const [value, setValue] = useState<string>(
+}
-    user?.graphNavigation ?? GraphNavigation.TRACKPAD
-  )
 
-  useEffect(() => {
+export const EditorSettingsForm = ({ defaultGraphNavigation }: Props) => {
-    if (user?.graphNavigation === value) return
+  const { saveUser } = useUser()
+  const [value, setValue] = useState<string>(defaultGraphNavigation)
+
+  const changeEditorNavigation = (value: string) => {
+    setValue(value)
     saveUser({ graphNavigation: value as GraphNavigation }).then()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }
-  }, [value])
 
   const options = [
     {
@@ -43,7 +44,7 @@ export const EditorSettingsForm = () => {
   return (
     <Stack spacing={6}>
       <Heading size="md">Editor Navigation</Heading>
-      <RadioGroup onChange={setValue} value={value}>
+      <RadioGroup onChange={changeEditorNavigation} value={value}>
         <HStack spacing={4} w="full" align="stretch">
           {options.map((option) => (
             <VStack

apps/builder/src/features/editor/components/EditorSettingsModal.tsx

@@ -1,3 +1,4 @@
+import { useUser } from '@/features/account'
 import {
   Modal,
   ModalBody,
@@ -14,13 +15,17 @@ type Props = {
 }
 
 export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
+  const { user } = useUser()
+
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="xl">
       <ModalOverlay />
       <ModalContent>
         <ModalCloseButton />
         <ModalBody pt="12" pb="8" px="8">
-          <EditorSettingsForm />
+          {user?.graphNavigation && (
+            <EditorSettingsForm defaultGraphNavigation={user.graphNavigation} />
+          )}
         </ModalBody>
       </ModalContent>
     </Modal>

apps/builder/src/features/graph/components/Endpoints/SourceEndpoint.tsx

@@ -39,11 +39,13 @@ export const SourceEndpoint = ({
       data-testid="endpoint"
       boxSize="32px"
       rounded="full"
-      onMouseDownCapture={handleMouseDown}
+      onPointerDownCapture={handleMouseDown}
+      onMouseDownCapture={(e) => e.stopPropagation()}
       cursor="copy"
       justify="center"
       align="center"
       pointerEvents="all"
+      className="prevent-group-drag"
       {...props}
     >
       <Flex
@@ -52,6 +54,7 @@ export const SourceEndpoint = ({
         align="center"
         bgColor="gray.100"
         rounded="full"
+        pointerEvents="none"
       >
         <Flex
           boxSize="13px"

apps/builder/src/features/graph/components/Graph.tsx

@@ -11,17 +11,17 @@ import {
 import { useTypebot } from '@/features/editor'
 import { DraggableBlockType, PublicTypebot, Typebot } from 'models'
 import { useDebounce } from 'use-debounce'
-import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
 import GraphElements from './GraphElements'
 import cuid from 'cuid'
 import { useUser } from '@/features/account'
-import { GraphNavigation } from 'db'
 import { ZoomButtons } from './ZoomButtons'
 import { AnswersCount } from '@/features/analytics'
 import { headerHeight } from '@/features/editor'
+import { useGesture } from '@use-gesture/react'
+import { GraphNavigation } from 'db'
 
-const maxScale = 1.5
+const maxScale = 2
-const minScale = 0.1
+const minScale = 0.3
 const zoomButtonsScaleBlock = 0.2
 
 export const Graph = ({
@@ -85,20 +85,6 @@ export const Graph = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedGraphPosition])
 
-  const handleMouseWheel = (e: WheelEvent) => {
-    e.preventDefault()
-    const isPinchingTrackpad = e.ctrlKey
-    user?.graphNavigation === GraphNavigation.MOUSE
-      ? zoom(-e.deltaY * 0.001, { x: e.clientX, y: e.clientY })
-      : isPinchingTrackpad
-      ? zoom(-e.deltaY * 0.01, { x: e.clientX, y: e.clientY })
-      : setGraphPosition({
-          ...graphPosition,
-          x: graphPosition.x - e.deltaX,
-          y: graphPosition.y - e.deltaY,
-        })
-  }
-
   const handleMouseUp = (e: MouseEvent) => {
     if (!typebot) return
     if (draggedItem) setDraggedItem(undefined)
@@ -131,33 +117,79 @@ export const Graph = ({
     setPreviewingEdge(undefined)
   }
 
-  const onDrag = (_: DraggableEvent, draggableData: DraggableData) => {
+  useGesture(
-    const { deltaX, deltaY } = draggableData
+    {
+      onDrag: ({ delta: [dx, dy] }) => {
         setGraphPosition({
           ...graphPosition,
-      x: graphPosition.x + deltaX,
+          x: graphPosition.x + dx,
-      y: graphPosition.y + deltaY,
+          y: graphPosition.y + dy,
         })
+      },
+      onWheel: ({ delta: [dx, dy], pinching }) => {
+        if (pinching) return
+
+        setGraphPosition({
+          ...graphPosition,
+          x: graphPosition.x - dx,
+          y: graphPosition.y - dy,
+        })
+      },
+      onPinch: ({ origin: [x, y], offset: [scale] }) => {
+        zoom({ scale, mousePosition: { x, y } })
+      },
+    },
+    {
+      target: graphContainerRef,
+      pinch: {
+        scaleBounds: { min: minScale, max: maxScale },
+        modifierKey:
+          user?.graphNavigation === GraphNavigation.MOUSE ? null : 'ctrlKey',
+      },
+      drag: { pointer: { keys: false } },
+    }
+  )
+
+  const getCenterOfGraph = (): Coordinates => {
+    const graphWidth = graphContainerRef.current?.clientWidth ?? 0
+    const graphHeight = graphContainerRef.current?.clientHeight ?? 0
+    return {
+      x: graphWidth / 2,
+      y: graphHeight / 2,
+    }
   }
 
-  const zoom = (delta = zoomButtonsScaleBlock, mousePosition?: Coordinates) => {
+  const zoom = ({
-    const { x: mouseX, y } = mousePosition ?? { x: 0, y: 0 }
+    scale,
+    mousePosition,
+    delta,
+  }: {
+    scale?: number
+    delta?: number
+    mousePosition?: Coordinates
+  }) => {
+    const { x: mouseX, y } = mousePosition ?? getCenterOfGraph()
     const mouseY = y - headerHeight
-    let scale = graphPosition.scale + delta
+    let newScale = scale ?? graphPosition.scale + (delta ?? 0)
     if (
-      (scale >= maxScale && graphPosition.scale === maxScale) ||
+      (newScale >= maxScale && graphPosition.scale === maxScale) ||
-      (scale <= minScale && graphPosition.scale === minScale)
+      (newScale <= minScale && graphPosition.scale === minScale)
     )
       return
-    scale = scale >= maxScale ? maxScale : scale <= minScale ? minScale : scale
+    newScale =
+      newScale >= maxScale
+        ? maxScale
+        : newScale <= minScale
+        ? minScale
+        : newScale
 
     const xs = (mouseX - graphPosition.x) / graphPosition.scale
     const ys = (mouseY - graphPosition.y) / graphPosition.scale
     setGraphPosition({
       ...graphPosition,
-      x: mouseX - xs * scale,
+      x: mouseX - xs * newScale,
-      y: mouseY - ys * scale,
+      y: mouseY - ys * newScale,
-      scale,
+      scale: newScale,
     })
   }
 
@@ -173,7 +205,6 @@ export const Graph = ({
     setAutoMoveDirection(undefined)
   }
 
-  useEventListener('wheel', handleMouseWheel, graphContainerRef.current)
   useEventListener('mousedown', handleCaptureMouseDown, undefined, {
     capture: true,
   })
@@ -181,12 +212,15 @@ export const Graph = ({
   useEventListener('click', handleClick, editorContainerRef.current)
   useEventListener('mousemove', handleMouseMove)
 
-  const zoomIn = () => zoom(zoomButtonsScaleBlock)
+  // Make sure pinch doesn't interfere with native Safari zoom
+  // More info: https://use-gesture.netlify.app/docs/gestures/
+  useEventListener('gesturestart', (e) => e.preventDefault())
+  useEventListener('gesturechange', (e) => e.preventDefault())
 
-  const zoomOut = () => zoom(-zoomButtonsScaleBlock)
+  const zoomIn = () => zoom({ delta: zoomButtonsScaleBlock })
+  const zoomOut = () => zoom({ delta: -zoomButtonsScaleBlock })
 
   return (
-    <DraggableCore onDrag={onDrag} enableUserSelectHack={false}>
     <Flex ref={graphContainerRef} position="relative" {...props}>
       <ZoomButtons onZoomInClick={zoomIn} onZoomOutClick={zoomOut} />
       <Flex
@@ -209,7 +243,6 @@ export const Graph = ({
         />
       </Flex>
     </Flex>
-    </DraggableCore>
   )
 }
 

apps/builder/src/features/graph/components/Nodes/GroupNode/GroupNode.tsx

@@ -17,11 +17,11 @@ import { BlockNodesList } from '../BlockNode/BlockNodesList'
 import { isDefined, isNotDefined } from 'utils'
 import { useTypebot, RightPanel, useEditor } from '@/features/editor'
 import { GroupNodeContextMenu } from './GroupNodeContextMenu'
-import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
 import { PlayIcon } from '@/components/icons'
 import { useDebounce } from 'use-debounce'
 import { ContextMenu } from '@/components/ContextMenu'
 import { setMultipleRefs } from '@/utils/helpers'
+import { useDrag } from '@use-gesture/react'
 
 type Props = {
   group: Group
@@ -31,10 +31,12 @@ type Props = {
 export const GroupNode = ({ group, groupIndex }: Props) => {
   const { updateGroupCoordinates } = useGroupsCoordinates()
 
-  const handleGroupDrag = useCallback((newCoord: Coordinates) => {
+  const handleGroupDrag = useCallback(
+    (newCoord: Coordinates) => {
       updateGroupCoordinates(group.id, newCoord)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    },
-  }, [])
+    [group.id, updateGroupCoordinates]
+  )
 
   return (
     <DraggableGroupNode
@@ -133,40 +135,46 @@ const DraggableGroupNode = memo(
         setConnectingIds({ ...connectingIds, target: undefined })
     }
 
-    const onDrag = (_: DraggableEvent, draggableData: DraggableData) => {
-      const { deltaX, deltaY } = draggableData
-      const newCoord = {
-        x: currentCoordinates.x + deltaX / graphPosition.scale,
-        y: currentCoordinates.y + deltaY / graphPosition.scale,
-      }
-      setCurrentCoordinates(newCoord)
-      onGroupDrag(newCoord)
-    }
-
-    const onDragStart = () => {
-      setFocusedGroupId(group.id)
-      setIsMouseDown(true)
-    }
-
     const startPreviewAtThisGroup = () => {
       setStartPreviewAtGroup(group.id)
       setRightPanel(RightPanel.PREVIEW)
     }
 
-    const onDragStop = () => setIsMouseDown(false)
+    useDrag(
+      ({ first, last, offset: [offsetX, offsetY], event, target }) => {
+        event.stopPropagation()
+        if ((target as HTMLElement).classList.contains('prevent-group-drag'))
+          return
+        if (first) {
+          setFocusedGroupId(group.id)
+          setIsMouseDown(true)
+        }
+        if (last) {
+          setIsMouseDown(false)
+        }
+        const newCoord = {
+          x: offsetX / graphPosition.scale,
+          y: offsetY / graphPosition.scale,
+        }
+        setCurrentCoordinates(newCoord)
+        onGroupDrag(newCoord)
+      },
+      {
+        target: groupRef,
+        pointer: { keys: false },
+        from: () => [
+          currentCoordinates.x * graphPosition.scale,
+          currentCoordinates.y * graphPosition.scale,
+        ],
+      }
+    )
+
     return (
       <ContextMenu<HTMLDivElement>
         renderMenu={() => <GroupNodeContextMenu groupIndex={groupIndex} />}
         isDisabled={isReadOnly || isStartGroup}
       >
         {(ref, isOpened) => (
-          <DraggableCore
-            enableUserSelectHack={false}
-            onDrag={onDrag}
-            onStart={onDragStart}
-            onStop={onDragStop}
-            onMouseDown={(e) => e.stopPropagation()}
-          >
           <Stack
             ref={setMultipleRefs([ref, groupRef])}
             data-testid="group"
@@ -175,9 +183,7 @@ const DraggableGroupNode = memo(
             bgColor="#ffffff"
             borderWidth="2px"
             borderColor={
-                isConnecting || isOpened || isPreviewing
+              isConnecting || isOpened || isPreviewing ? 'blue.400' : '#ffffff'
-                  ? 'blue.400'
-                  : '#ffffff'
             }
             w="300px"
             transition="border 300ms, box-shadow 200ms"
@@ -208,11 +214,7 @@ const DraggableGroupNode = memo(
                 px="1"
                 userSelect={'none'}
               />
-                <EditableInput
+              <EditableInput minW="0" px="1" className="prevent-group-drag" />
-                  minW="0"
-                  px="1"
-                  onMouseDown={(e) => e.stopPropagation()}
-                />
             </Editable>
             {typebot && (
               <BlockNodesList
@@ -234,7 +236,6 @@ const DraggableGroupNode = memo(
               onClick={startPreviewAtThisGroup}
             />
           </Stack>
-          </DraggableCore>
         )}
       </ContextMenu>
     )

apps/builder/src/features/graph/providers/GroupsCoordinateProvider.tsx

@@ -5,6 +5,7 @@ import {
   useEffect,
   useContext,
   createContext,
+  useCallback,
 } from 'react'
 import { GroupsCoordinates, Coordinates } from './GraphProvider'
 
@@ -40,11 +41,14 @@ export const GroupsCoordinatesProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [groups])
 
-  const updateGroupCoordinates = (groupId: string, newCoord: Coordinates) =>
+  const updateGroupCoordinates = useCallback(
+    (groupId: string, newCoord: Coordinates) =>
       setGroupsCoordinates((groupsCoordinates) => ({
         ...groupsCoordinates,
         [groupId]: newCoord,
-    }))
+      })),
+    []
+  )
 
   return (
     <groupsCoordinatesContext.Provider

apps/builder/src/features/graph/utils.ts

@@ -136,7 +136,7 @@ const computeFourSegments = (
     sourcePosition.x + (sourceType === 'right' ? stubLength : -stubLength)
   segments.push(`L${firstSegmentX},${sourcePosition.y}`)
   const secondSegmentY =
-    sourcePosition.y + (targetPosition.y - sourcePosition.y) / 2
+    sourcePosition.y + (targetPosition.y - sourcePosition.y) - stubLength
   segments.push(`L${firstSegmentX},${secondSegmentY}`)
 
   segments.push(`L${targetPosition.x},${secondSegmentY}`)

apps/builder/src/features/workspace/components/WorkspaceSettingsModal.tsx

@@ -15,7 +15,7 @@ import {
   UsersIcon,
 } from '@/components/icons'
 import { EmojiOrImageIcon } from '@/components/EmojiOrImageIcon'
-import { User, Workspace } from 'db'
+import { GraphNavigation, User, Workspace } from 'db'
 import { useState } from 'react'
 import { MembersList } from './MembersList'
 import { WorkspaceSettingsForm } from './WorkspaceSettingsForm'
@@ -146,9 +146,13 @@ export const WorkspaceSettingsModal = ({
           </Flex>
         </Stack>
 
-        {isOpen && (
+        {isOpen && user.graphNavigation && (
           <Flex flex="1" p="10">
-            <SettingsContent tab={selectedTab} onClose={onClose} />
+            <SettingsContent
+              tab={selectedTab}
+              onClose={onClose}
+              defaultGraphNavigation={user.graphNavigation}
+            />
           </Flex>
         )}
       </ModalContent>
@@ -158,16 +162,20 @@ export const WorkspaceSettingsModal = ({
 
 const SettingsContent = ({
   tab,
+  defaultGraphNavigation,
   onClose,
 }: {
   tab: SettingsTab
+  defaultGraphNavigation: GraphNavigation
   onClose: () => void
 }) => {
   switch (tab) {
     case 'my-account':
       return <MyAccountForm />
     case 'user-settings':
-      return <EditorSettingsForm />
+      return (
+        <EditorSettingsForm defaultGraphNavigation={defaultGraphNavigation} />
+      )
     case 'workspace-settings':
       return <WorkspaceSettingsForm onClose={onClose} />
     case 'members':

pnpm-lock.yaml

@@ -58,6 +58,7 @@ importers:
       '@udecode/plate-serializer-html': 18.9.0
       '@udecode/plate-ui-link': 18.9.1
       '@udecode/plate-ui-toolbar': 18.9.0
+      '@use-gesture/react': ^10.2.22
       aws-sdk: 2.1254.0
       bot-engine: workspace:*
       browser-image-compression: 2.0.0
@@ -97,7 +98,6 @@ importers:
       qs: 6.11.0
       react: 18.2.0
       react-dom: 18.2.0
-      react-draggable: 4.4.5
       slate: 0.85.0
       slate-history: 0.85.0
       slate-hyperscript: 0.77.0
@@ -140,6 +140,7 @@ importers:
       '@udecode/plate-serializer-html': 18.9.0_mcaxlyuolm2h3oopex5ujcsyse
       '@udecode/plate-ui-link': 18.9.1_4zvsqcrsewxwtidgbzcpvbiljy
       '@udecode/plate-ui-toolbar': 18.9.0_4zvsqcrsewxwtidgbzcpvbiljy
+      '@use-gesture/react': 10.2.22_react@18.2.0
       aws-sdk: 2.1254.0
       bot-engine: link:../../packages/bot-engine
       browser-image-compression: 2.0.0
@@ -171,7 +172,6 @@ importers:
       qs: 6.11.0
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
-      react-draggable: 4.4.5_biqbaboplfbrettd7655fr4n2y
       slate: 0.85.0
       slate-history: 0.85.0_slate@0.85.0
       slate-hyperscript: 0.77.0_slate@0.85.0
@@ -6644,6 +6644,19 @@ packages:
       - scheduler
     dev: false
 
+  /@use-gesture/core/10.2.22:
+    resolution: {integrity: sha512-Ek0JZFYfk+hicLmoG094gm3YOuDMBNckHb988e59YOZoAkETT8dQSzT+g3QkSHSiP1m5wFXAGPSgxvOuwvGKHQ==}
+    dev: false
+
+  /@use-gesture/react/10.2.22_react@18.2.0:
+    resolution: {integrity: sha512-ECo7ig16SxBE06ENIURO1woKEB6TC8qY3a0rugJjQ2f1o0Tj28xS/eYNyJuqzQB5YT0q5IrF7ZFpbx1p/5ohYA==}
+    peerDependencies:
+      react: '>= 16.8.0'
+    dependencies:
+      '@use-gesture/core': 10.2.22
+      react: 18.2.0
+    dev: false
+
   /@webassemblyjs/ast/1.11.1:
     resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
     dependencies:
@@ -15489,18 +15502,6 @@ packages:
       react: 18.2.0
       scheduler: 0.23.0
 
-  /react-draggable/4.4.5_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==}
-    peerDependencies:
-      react: '>= 16.3.0'
-      react-dom: '>= 16.3.0'
-    dependencies:
-      clsx: 1.2.1
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0_react@18.2.0
-    dev: false
-
   /react-error-overlay/6.0.11:
     resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==}
     dev: false