⏪ Re-implement trackpad/mouse choice and defau…

baptisteArno · Jan 29, 2024 · 5f0b369 · 5f0b369
1 parent 8998276
commit 5f0b369
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 37 deletions.
diff --git a/apps/builder/src/features/account/components/GraphNavigationRadioGroup.tsx b/apps/builder/src/features/account/components/GraphNavigationRadioGroup.tsx
@@ -0,0 +1,68 @@
+import { MouseIcon, LaptopIcon } from '@/components/icons'
+import { useTranslate } from '@tolgee/react'
+import {
+  HStack,
+  Radio,
+  RadioGroup,
+  Stack,
+  VStack,
+  Text,
+} from '@chakra-ui/react'
+import { GraphNavigation } from '@typebot.io/prisma'
+
+type Props = {
+  defaultValue: string
+  onChange: (value: string) => void
+}
+export const GraphNavigationRadioGroup = ({
+  defaultValue,
+  onChange,
+}: Props) => {
+  const { t } = useTranslate()
+  const graphNavigationData = [
+    {
+      value: GraphNavigation.MOUSE,
+      label: t('account.preferences.graphNavigation.mouse.label'),
+      description: t('account.preferences.graphNavigation.mouse.description'),
+      icon: <MouseIcon boxSize="35px" />,
+    },
+    {
+      value: GraphNavigation.TRACKPAD,
+      label: t('account.preferences.graphNavigation.trackpad.label'),
+      description: t(
+        'account.preferences.graphNavigation.trackpad.description'
+      ),
+      icon: <LaptopIcon boxSize="35px" />,
+    },
+  ]
+  return (
+    <RadioGroup onChange={onChange} defaultValue={defaultValue}>
+      <HStack spacing={4} w="full" align="stretch">
+        {graphNavigationData.map((option) => (
+          <VStack
+            key={option.value}
+            as="label"
+            htmlFor={option.label}
+            cursor="pointer"
+            borderWidth="1px"
+            borderRadius="md"
+            w="full"
+            p="6"
+            spacing={6}
+            justifyContent="space-between"
+          >
+            <VStack spacing={6}>
+              {option.icon}
+              <Stack>
+                <Text fontWeight="bold">{option.label}</Text>
+                <Text>{option.description}</Text>
+              </Stack>
+            </VStack>
+
+            <Radio value={option.value} id={option.label} />
+          </VStack>
+        ))}
+      </HStack>
+    </RadioGroup>
+  )
+}
diff --git a/apps/builder/src/features/account/components/UserPreferencesForm.tsx b/apps/builder/src/features/account/components/UserPreferencesForm.tsx
@@ -17,6 +17,7 @@ import { ChevronDownIcon } from '@/components/icons'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 import { useTranslate, useTolgee } from '@tolgee/react'
 import { useRouter } from 'next/router'
+import { GraphNavigationRadioGroup } from './GraphNavigationRadioGroup'
 
 const localeHumanReadable = {
   en: 'English',
@@ -38,7 +39,7 @@ export const UserPreferencesForm = () => {
 
   useEffect(() => {
     if (!user?.graphNavigation)
-      updateUser({ graphNavigation: GraphNavigation.TRACKPAD })
+      updateUser({ graphNavigation: GraphNavigation.MOUSE })
   }, [updateUser, user?.graphNavigation])
 
   const changeAppearance = async (value: string) => {
@@ -57,6 +58,10 @@ export const UserPreferencesForm = () => {
     )
   }
 
+  const changeGraphNavigation = async (value: string) => {
+    updateUser({ graphNavigation: value as GraphNavigation })
+  }
+
   const currentLanguage = getLanguage()
 
   return (
@@ -94,6 +99,15 @@ export const UserPreferencesForm = () => {
           </MoreInfoTooltip>
         )}
       </HStack>
+      <Stack spacing={6}>
+        <Heading size="md">
+          {t('account.preferences.graphNavigation.heading')}
+        </Heading>
+        <GraphNavigationRadioGroup
+          defaultValue={user?.graphNavigation ?? GraphNavigation.MOUSE}
+          onChange={changeGraphNavigation}
+        />
+      </Stack>
 
       <Stack spacing={6}>
         <Heading size="md">

diff --git a/apps/builder/src/features/editor/components/BoardMenuButton.tsx b/apps/builder/src/features/editor/components/BoardMenuButton.tsx
@@ -17,17 +17,25 @@ import {
   SettingsIcon,
 } from '@/components/icons'
 import { useTypebot } from '../providers/TypebotProvider'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { EditorSettingsModal } from './EditorSettingsModal'
 import { parseDefaultPublicId } from '@/features/publish/helpers/parseDefaultPublicId'
 import { useTranslate } from '@tolgee/react'
+import { useUser } from '@/features/account/hooks/useUser'
+import { useRouter } from 'next/router'
 
 export const BoardMenuButton = (props: FlexProps) => {
+  const { query } = useRouter()
   const { typebot } = useTypebot()
+  const { user } = useUser()
   const [isDownloading, setIsDownloading] = useState(false)
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { t } = useTranslate()
 
+  useEffect(() => {
+    if (user && !user.graphNavigation && !query.isFirstBot) onOpen()
+  }, [onOpen, query.isFirstBot, user, user?.graphNavigation])
+
   const downloadFlow = () => {
     assert(typebot)
     setIsDownloading(true)

diff --git a/apps/builder/src/features/graph/components/Graph.tsx b/apps/builder/src/features/graph/components/Graph.tsx
@@ -30,9 +30,7 @@ import { useShallow } from 'zustand/react/shallow'
 import { projectMouse } from '../helpers/projectMouse'
 import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
 import { useUser } from '@/features/account/hooks/useUser'
-import { graphGestureNotficationKey } from '@typebot.io/schemas/features/user/constants'
-import { toast } from 'sonner'
-import { LightBulbIcon } from '@/components/icons'
+import { GraphNavigation } from '@typebot.io/prisma'
 
 const maxScale = 2
 const minScale = 0.3
@@ -59,7 +57,7 @@ export const Graph = ({
     setDraggedItem,
   } = useBlockDnd()
   const { pasteGroups, createGroup } = useTypebot()
-  const { user, updateUser } = useUser()
+  const { user } = useUser()
   const {
     isReadOnly,
     setGraphPosition: setGlobalGraphPosition,
@@ -189,26 +187,6 @@ export const Graph = ({
       setLastMouseClickPosition(
         projectMouse({ x: e.clientX, y: e.clientY }, graphPosition)
       )
-    } else if (
-      user &&
-      !user?.displayedInAppNotifications?.[graphGestureNotficationKey]
-    ) {
-      toast.info('To move the graph using your mouse, hold the Space bar', {
-        action: {
-          label: 'More info',
-          onClick: () => {
-            window.open('https://docs.typebot.io/editor/graph', '_blank')
-          },
-        },
-        duration: 30000,
-        icon: <LightBulbIcon w="20px" h="20px" />,
-      })
-      updateUser({
-        displayedInAppNotifications: {
-          ...user.displayedInAppNotifications,
-          [graphGestureNotficationKey]: true,
-        },
-      })
     }
     setSelectBoxCoordinates(undefined)
     setOpenedBlockId(undefined)
@@ -219,7 +197,11 @@ export const Graph = ({
   useGesture(
     {
       onDrag: (props) => {
-        if (isDraggingGraph) {
+        if (
+          isDraggingGraph ||
+          (user?.graphNavigation !== GraphNavigation.TRACKPAD &&
+            !props.shiftKey)
+        ) {
           if (props.first) setIsDragging(true)
           if (props.last) setIsDragging(false)
           setGraphPosition({

diff --git a/apps/builder/src/i18n/en.json b/apps/builder/src/i18n/en.json
@@ -23,8 +23,8 @@
   "account.preferences.appearance.heading": "Appearance",
   "account.preferences.appearance.lightLabel": "Light",
   "account.preferences.appearance.systemLabel": "System",
-  "account.preferences.graphNavigation.heading": "Editor Navigation",
-  "account.preferences.graphNavigation.mouse.description": "Move by dragging the board and zoom in/out using the scroll wheel",
+  "account.preferences.graphNavigation.heading": "Graph Gestures",
+  "account.preferences.graphNavigation.mouse.description": "Move by dragging the graph and use Shift + left click to select",
   "account.preferences.graphNavigation.mouse.label": "Mouse",
   "account.preferences.graphNavigation.trackpad.description": "Move the board using 2 fingers and zoom in/out by pinching",
   "account.preferences.graphNavigation.trackpad.label": "Trackpad",

diff --git a/apps/builder/src/i18n/fr.json b/apps/builder/src/i18n/fr.json
@@ -23,8 +23,8 @@
   "account.preferences.appearance.heading": "Apparence",
   "account.preferences.appearance.lightLabel": "Clair",
   "account.preferences.appearance.systemLabel": "Système",
-  "account.preferences.graphNavigation.heading": "Navigation de l'éditeur",
-  "account.preferences.graphNavigation.mouse.description": "Déplace le board en cliquant avec la souris et zoom utilisant la molette",
+  "account.preferences.graphNavigation.heading": "Interaction avec le Graph",
+  "account.preferences.graphNavigation.mouse.description": "Déplace le graph en cliquant avec la souris et sélectionne avec Shift + clic gauche",
   "account.preferences.graphNavigation.mouse.label": "Souris",
   "account.preferences.graphNavigation.trackpad.description": "Déplace le board en déplaçant les 2 doigts et zoom pincant",
   "account.preferences.graphNavigation.trackpad.label": "Trackpad",

diff --git a/apps/docs/editor/graph.mdx b/apps/docs/editor/graph.mdx
@@ -3,16 +3,24 @@ title: Graph
 icon: game-board
 ---
 
-import { LoomVideo } from '/snippets/loom-video.mdx'
-
 The Graph is where you arrange your conversation flow and connect the Typebot [blocks](./blocks/overview) together.
 
 ## Gestures
 
-**Select**: Drag with `Left click`
+In the user preferences, under the `Graph Gestures` section, you can choose between `Mouse` and `Trackpad` gestures.
+
+### Mouse
+
+**Select**: `Shift` + `Left click` drag
+
+**Zoom**: `Ctrl` + `Mouse wheel`
+
+**Pan**: `Left click` drag or `Mouse wheel` for vertical pan and `Shift` + `Mouse wheel` for horizontal pan
+
+### Trackpad
 
-**Zoom**: `Ctrl` + `Mouse wheel` on a mouse or `pinch` on a trackpad
+**Select**: `Click` + drag
 
-**Pan** / **Move**: Drag with `Space` + `Left click` on a mouse or `two-finger drag` on a trackpad
+**Zoom**: Pinch
 
-<LoomVideo id="200d88212d44421fb713a7623e222c9b" />
+**Pan**: Use two finger