Merge pull request #21 from baptisteArno/feat/zoom

feat(editor): ✨ Zoom in/out

apps/builder/assets/icons.tsx

@@ -403,3 +403,35 @@ export const TemplateIcon = (props: IconProps) => (
     <rect x="3" y="14" width="7" height="7"></rect>
   </Icon>
 )
+
+export const MinusIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <line x1="5" y1="12" x2="19" y2="12"></line>
+  </Icon>
+)
+
+export const LaptopIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path
+      d="M3.2 14.2222V4C3.2 2.89543 4.09543 2 5.2 2H18.8C19.9046 2 20.8 2.89543 20.8 4V14.2222M3.2 14.2222H20.8M3.2 14.2222L1.71969 19.4556C1.35863 20.7321 2.31762 22 3.64418 22H20.3558C21.6824 22 22.6414 20.7321 22.2803 19.4556L20.8 14.2222"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M11 19L13 19"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Icon>
+)
+
+export const MouseIcon = (props: IconProps) => (
+  <Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
+    <path
+      d="M12 2V2C16.4183 2 20 5.58172 20 10V14C20 18.4183 16.4183 22 12 22V22C7.58172 22 4 18.4183 4 14V10C4 5.58172 7.58172 2 12 2V2ZM12 2V9"
+      stroke="currentColor"
+      strokeLinecap="round"
+    />
+  </Icon>
+)

apps/builder/components/editor/BoardMenuButton.tsx

@@ -5,16 +5,19 @@ import {
   MenuButtonProps,
   MenuItem,
   MenuList,
+  useDisclosure,
 } from '@chakra-ui/react'
 import assert from 'assert'
-import { DownloadIcon, MoreVerticalIcon } from 'assets/icons'
+import { DownloadIcon, MoreVerticalIcon, SettingsIcon } from 'assets/icons'
 import { useTypebot } from 'contexts/TypebotContext'
 import React, { useState } from 'react'
 import { parseDefaultPublicId } from 'services/typebots'
+import { EditorSettingsModal } from './EditorSettingsModal'
 
 export const BoardMenuButton = (props: MenuButtonProps) => {
   const { typebot } = useTypebot()
   const [isDownloading, setIsDownloading] = useState(false)
+  const { isOpen, onOpen, onClose } = useDisclosure()
 
   const downloadFlow = () => {
     assert(typebot)
@@ -36,18 +39,22 @@ export const BoardMenuButton = (props: MenuButtonProps) => {
     <Menu>
       <MenuButton
         as={IconButton}
-        variant="outline"
-        colorScheme="blue"
+        bgColor="white"
         icon={<MoreVerticalIcon transform={'rotate(90deg)'} />}
         isLoading={isDownloading}
         size="sm"
+        shadow="lg"
         {...props}
       />
       <MenuList>
+        <MenuItem icon={<SettingsIcon />} onClick={onOpen}>
+          Editor settings
+        </MenuItem>
         <MenuItem icon={<DownloadIcon />} onClick={downloadFlow}>
           Export flow
         </MenuItem>
       </MenuList>
+      <EditorSettingsModal isOpen={isOpen} onClose={onClose} />
     </Menu>
   )
 }

apps/builder/components/editor/EditorSettingsModal.tsx

@@ -0,0 +1,97 @@
+import {
+  Heading,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Stack,
+  Text,
+  Radio,
+  VStack,
+  RadioGroup,
+  HStack,
+} from '@chakra-ui/react'
+import { LaptopIcon, MouseIcon } from 'assets/icons'
+import { useUser } from 'contexts/UserContext'
+import { GraphNavigation } from 'db'
+import React, { useEffect, useState } from 'react'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const EditorSettingsModal = ({ isOpen, onClose }: Props) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalCloseButton />
+        <ModalBody pt="12" pb="8" px="8">
+          <EditorSettings />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+const EditorSettings = () => {
+  const { user, saveUser } = useUser()
+  const [value, setValue] = useState<string>(
+    user?.graphNavigation ?? GraphNavigation.TRACKPAD
+  )
+
+  useEffect(() => {
+    if (user?.graphNavigation === value) return
+    saveUser({ graphNavigation: value as GraphNavigation }).then()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  const options = [
+    {
+      value: GraphNavigation.MOUSE,
+      label: 'Mouse',
+      description:
+        'Move by dragging the board and zoom in/out using the scroll wheel',
+      icon: <MouseIcon boxSize="35px" />,
+    },
+    {
+      value: GraphNavigation.TRACKPAD,
+      label: 'Trackpad',
+      description: 'Move the board using 2 fingers and zoom in/out by pinching',
+      icon: <LaptopIcon boxSize="35px" />,
+    },
+  ]
+
+  return (
+    <Stack spacing={4}>
+      <Heading size="md">Navigation</Heading>
+      <RadioGroup onChange={setValue} value={value}>
+        <HStack spacing={4} w="full">
+          {options.map((option) => (
+            <VStack
+              key={option.value}
+              as="label"
+              htmlFor={option.label}
+              cursor="pointer"
+              borderWidth="1px"
+              borderRadius="md"
+              w="full"
+              p="6"
+              spacing={6}
+            >
+              {option.icon}
+              <Stack>
+                <Text fontWeight="bold">{option.label}</Text>
+                <Text>{option.description}</Text>
+              </Stack>
+
+              <Radio value={option.value} id={option.label} />
+            </VStack>
+          ))}
+        </HStack>
+      </RadioGroup>
+    </Stack>
+  )
+}

apps/builder/components/shared/Graph/Edges/DrawingEdge.tsx

@@ -29,21 +29,23 @@ export const DrawingEdge = () => {
 
   const sourceTop = useMemo(() => {
     if (!connectingIds) return 0
-    return getEndpointTopOffset(
-      sourceEndpoints,
-      graphPosition.y,
-      connectingIds.source.itemId ?? connectingIds.source.stepId
-    )
+    return getEndpointTopOffset({
+      endpoints: sourceEndpoints,
+      graphOffsetY: graphPosition.y,
+      endpointId: connectingIds.source.itemId ?? connectingIds.source.stepId,
+      graphScale: graphPosition.scale,
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [connectingIds, sourceEndpoints])
 
   const targetTop = useMemo(() => {
     if (!connectingIds) return 0
-    return getEndpointTopOffset(
-      targetEndpoints,
-      graphPosition.y,
-      connectingIds.target?.stepId
-    )
+    return getEndpointTopOffset({
+      endpoints: targetEndpoints,
+      graphOffsetY: graphPosition.y,
+      endpointId: connectingIds.target?.stepId,
+      graphScale: graphPosition.scale,
+    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [connectingIds, targetEndpoints])
 
@@ -56,6 +58,7 @@ export const DrawingEdge = () => {
           targetBlockCoordinates,
           sourceTop,
           targetTop,
+          graphScale: graphPosition.scale,
         })
       : computeEdgePathToMouse({
           sourceBlockCoordinates,
@@ -68,13 +71,15 @@ export const DrawingEdge = () => {
     targetBlockCoordinates,
     targetTop,
     mousePosition,
+    graphPosition.scale,
   ])
 
   const handleMouseMove = (e: MouseEvent) => {
-    setMousePosition({
-      x: e.clientX - graphPosition.x,
-      y: e.clientY - graphPosition.y,
-    })
+    const coordinates = {
+      x: (e.clientX - graphPosition.x) / graphPosition.scale,
+      y: (e.clientY - graphPosition.y) / graphPosition.scale,
+    }
+    setMousePosition(coordinates)
   }
   useEventListener('mousemove', handleMouseMove)
   useEventListener('mouseup', () => {

apps/builder/components/shared/Graph/Edges/DropOffEdge.tsx

@@ -58,11 +58,12 @@ export const DropOffEdge = ({
   const block = publishedTypebot?.blocks.find(byId(blockId))
   const sourceTop = useMemo(
     () =>
-      getEndpointTopOffset(
-        sourceEndpoints,
-        graphPosition.y,
-        block?.steps[block.steps.length - 1].id
-      ),
+      getEndpointTopOffset({
+        endpoints: sourceEndpoints,
+        graphOffsetY: graphPosition.y,
+        endpointId: block?.steps[block.steps.length - 1].id,
+        graphScale: graphPosition.scale,
+      }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [block?.steps, sourceEndpoints, blocksCoordinates]
   )

apps/builder/components/shared/Graph/Edges/Edge.tsx

@@ -44,11 +44,12 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
 
   const sourceTop = useMemo(
     () =>
-      getEndpointTopOffset(
-        sourceEndpoints,
-        graphPosition.y,
-        getSourceEndpointId(edge)
-      ),
+      getEndpointTopOffset({
+        endpoints: sourceEndpoints,
+        graphOffsetY: graphPosition.y,
+        endpointId: getSourceEndpointId(edge),
+        graphScale: graphPosition.scale,
+      }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sourceBlockCoordinates?.y, edge, sourceEndpoints, refreshEdge]
   )
@@ -58,17 +59,28 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
   }, [])
 
   const [targetTop, setTargetTop] = useState(
-    getEndpointTopOffset(targetEndpoints, graphPosition.y, edge?.to.stepId)
+    getEndpointTopOffset({
+      endpoints: targetEndpoints,
+      graphOffsetY: graphPosition.y,
+      endpointId: edge?.to.stepId,
+      graphScale: graphPosition.scale,
+    })
   )
   useLayoutEffect(() => {
     setTargetTop(
-      getEndpointTopOffset(targetEndpoints, graphPosition.y, edge?.to.stepId)
+      getEndpointTopOffset({
+        endpoints: targetEndpoints,
+        graphOffsetY: graphPosition.y,
+        endpointId: edge?.to.stepId,
+        graphScale: graphPosition.scale,
+      })
     )
   }, [
     targetBlockCoordinates?.y,
     targetEndpoints,
     graphPosition.y,
     edge?.to.stepId,
+    graphPosition.scale,
   ])
 
   const path = useMemo(() => {
@@ -79,6 +91,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
       targetBlockCoordinates,
       sourceTop,
       targetTop,
+      graphScale: graphPosition.scale,
     })
     return computeEdgePath(anchorsPosition)
     // eslint-disable-next-line react-hooks/exhaustive-deps