feat(editor): ✨ Zoom in/out

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

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

@@ -2,20 +2,26 @@ import { Flex, FlexProps, useEventListener } from '@chakra-ui/react'
 import React, { useRef, useMemo, useEffect, useState } from 'react'
 import {
   blockWidth,
+  Coordinates,
   graphPositionDefaultValue,
   useGraph,
 } from 'contexts/GraphContext'
 import { useStepDnd } from 'contexts/GraphDndContext'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
-import { headerHeight } from 'components/shared/TypebotHeader/TypebotHeader'
 import { DraggableStepType, PublicTypebot, Typebot } from 'models'
 import { AnswersCount } from 'services/analytics'
 import { useDebounce } from 'use-debounce'
 import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable'
 import GraphContent from './GraphContent'
 import cuid from 'cuid'
+import { headerHeight } from '../TypebotHeader'
+import { useUser } from 'contexts/UserContext'
+import { GraphNavigation } from 'db'
+import { ZoomButtons } from './ZoomButtons'
 
-declare const window: { chrome: unknown | undefined }
+const maxScale = 1.5
+const minScale = 0.1
+const zoomButtonsScaleStep = 0.2
 
 export const Graph = ({
   typebot,
@@ -51,6 +57,7 @@ export const Graph = ({
       `translate(${graphPosition.x}px, ${graphPosition.y}px) scale(${graphPosition.scale})`,
     [graphPosition]
   )
+  const { user } = useUser()
 
   useEffect(() => {
     editorContainerRef.current = document.getElementById(
@@ -65,7 +72,7 @@ export const Graph = ({
     setGlobalGraphPosition({
       x: left + debouncedGraphPosition.x,
       y: top + debouncedGraphPosition.y,
-      scale: 1,
+      scale: debouncedGraphPosition.scale,
     })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedGraphPosition])
@@ -73,22 +80,26 @@ export const Graph = ({
   const handleMouseWheel = (e: WheelEvent) => {
     e.preventDefault()
     const isPinchingTrackpad = e.ctrlKey
-    if (isPinchingTrackpad) return
-    setGraphPosition({
-      ...graphPosition,
-      x: graphPosition.x - e.deltaX / (window.chrome ? 2 : 1),
-      y: graphPosition.y - e.deltaY / (window.chrome ? 2 : 1),
-    })
+    user?.graphNavigation === GraphNavigation.MOUSE
+      ? zoom(-e.deltaY * 0.01, { 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)
     if (!draggedStep && !draggedStepType) return
-    const coordinates = {
-      x: e.clientX - graphPosition.x - blockWidth / 3,
-      y: e.clientY - graphPosition.y - 20 - headerHeight,
-    }
+
+    const coordinates = projectMouse(
+      { x: e.clientX, y: e.clientY },
+      graphPosition
+    )
     const id = cuid()
     updateBlockCoordinates(id, coordinates)
     createBlock({
@@ -121,15 +132,40 @@ export const Graph = ({
   const onDrag = (_: DraggableEvent, draggableData: DraggableData) => {
     const { deltaX, deltaY } = draggableData
     setGraphPosition({
+      ...graphPosition,
       x: graphPosition.x + deltaX,
       y: graphPosition.y + deltaY,
-      scale: 1,
+    })
+  }
+
+  const zoom = (delta = zoomButtonsScaleStep, mousePosition?: Coordinates) => {
+    const { x: mouseX, y } = mousePosition ?? { x: 0, y: 0 }
+    const mouseY = y - headerHeight
+    let scale = graphPosition.scale + delta
+    if (
+      (scale >= maxScale && graphPosition.scale === maxScale) ||
+      (scale <= minScale && graphPosition.scale === minScale)
+    )
+      return
+    scale = scale >= maxScale ? maxScale : scale <= minScale ? minScale : scale
+
+    const xs = (mouseX - graphPosition.x) / graphPosition.scale
+    const ys = (mouseY - graphPosition.y) / graphPosition.scale
+    setGraphPosition({
+      ...graphPosition,
+      x: mouseX - xs * scale,
+      y: mouseY - ys * scale,
+      scale,
     })
   }
 
   return (
     <DraggableCore onDrag={onDrag} enableUserSelectHack={false}>
       <Flex ref={graphContainerRef} position="relative" {...props}>
+        <ZoomButtons
+          onZoomIn={() => zoom(zoomButtonsScaleStep)}
+          onZoomOut={() => zoom(-zoomButtonsScaleStep)}
+        />
         <Flex
           flex="1"
           w="full"
@@ -150,3 +186,21 @@ export const Graph = ({
     </DraggableCore>
   )
 }
+
+const projectMouse = (
+  mouseCoordinates: Coordinates,
+  graphPosition: Coordinates & { scale: number }
+) => {
+  return {
+    x:
+      (mouseCoordinates.x -
+        graphPosition.x -
+        blockWidth / (3 / graphPosition.scale)) /
+      graphPosition.scale,
+    y:
+      (mouseCoordinates.y -
+        graphPosition.y -
+        (headerHeight + 20 * graphPosition.scale)) /
+      graphPosition.scale,
+  }
+}

apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx

@@ -32,6 +32,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
     isReadOnly,
     focusedBlockId,
     setFocusedBlockId,
+    graphPosition,
   } = useGraph()
   const { typebot, updateBlock } = useTypebot()
   const { setMouseOverBlock, mouseOverBlock } = useStepDnd()
@@ -86,11 +87,11 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
     if (connectingIds) setConnectingIds({ ...connectingIds, target: undefined })
   }
 
-  const onDrag = (event: DraggableEvent, draggableData: DraggableData) => {
+  const onDrag = (_: DraggableEvent, draggableData: DraggableData) => {
     const { deltaX, deltaY } = draggableData
     updateBlockCoordinates(block.id, {
-      x: blockCoordinates.x + deltaX,
-      y: blockCoordinates.y + deltaY,
+      x: blockCoordinates.x + deltaX / graphPosition.scale,
+      y: blockCoordinates.y + deltaY / graphPosition.scale,
     })
   }
 

apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodesList.tsx

@@ -3,7 +3,7 @@ import {
   computeNearestPlaceholderIndex,
   useStepDnd,
 } from 'contexts/GraphDndContext'
-import { Coordinates } from 'contexts/GraphContext'
+import { Coordinates, useGraph } from 'contexts/GraphContext'
 import { useTypebot } from 'contexts/TypebotContext'
 import { ButtonItem, StepIndices, StepWithItems } from 'models'
 import React, { useEffect, useRef, useState } from 'react'
@@ -25,6 +25,7 @@ export const ItemNodesList = ({
   const { typebot, createItem, detachItemFromStep } = useTypebot()
   const { draggedItem, setDraggedItem, mouseOverBlock } = useStepDnd()
   const placeholderRefs = useRef<HTMLDivElement[]>([])
+  const { graphPosition } = useGraph()
   const blockId = typebot?.blocks[blockIndex].id
   const isDraggingOnCurrentBlock =
     (draggedItem && mouseOverBlock?.id === blockId) ?? false
@@ -182,8 +183,9 @@ export const ItemNodesList = ({
             top="0"
             left="0"
             style={{
-              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg) scale(${graphPosition.scale})`,
             }}
+            transformOrigin="0 0 0"
           />
         </Portal>
       )}

apps/builder/components/shared/Graph/Nodes/StepNode/StepNodesList.tsx

@@ -32,7 +32,7 @@ export const StepNodesList = ({
     setDraggedStepType,
   } = useStepDnd()
   const { typebot, createStep, detachStepFromBlock } = useTypebot()
-  const { isReadOnly } = useGraph()
+  const { isReadOnly, graphPosition } = useGraph()
   const [expandedPlaceholderIndex, setExpandedPlaceholderIndex] = useState<
     number | undefined
   >()
@@ -166,8 +166,9 @@ export const StepNodesList = ({
             top="0"
             left="0"
             style={{
-              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
+              transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg) scale(${graphPosition.scale})`,
             }}
+            transformOrigin="0 0 0"
           />
         </Portal>
       )}

apps/builder/components/shared/Graph/ZoomButtons.tsx

@@ -0,0 +1,37 @@
+import { Stack, IconButton } from '@chakra-ui/react'
+import { PlusIcon, MinusIcon } from 'assets/icons'
+import { headerHeight } from '../TypebotHeader'
+
+type Props = {
+  onZoomIn: () => void
+  onZoomOut: () => void
+}
+export const ZoomButtons = ({ onZoomIn, onZoomOut }: Props) => (
+  <Stack
+    pos="fixed"
+    top={`calc(${headerHeight}px + 70px)`}
+    right="40px"
+    bgColor="white"
+    rounded="md"
+    zIndex={1}
+    spacing="0"
+    shadow="lg"
+  >
+    <IconButton
+      icon={<PlusIcon />}
+      aria-label={'Zoom out'}
+      size="sm"
+      onClick={onZoomIn}
+      bgColor="white"
+      borderBottomRadius={0}
+    />
+    <IconButton
+      icon={<MinusIcon />}
+      aria-label={'Zoom out'}
+      size="sm"
+      onClick={onZoomOut}
+      bgColor="white"
+      borderTopRadius={0}
+    />
+  </Stack>
+)