🐛 (editor) Fix bug preventing user to manually zoom in / out

Closes #156

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

@@ -179,20 +179,20 @@ export const Graph = ({
   useEventListener('click', handleClick, editorContainerRef.current)
   useEventListener('mousemove', handleMouseMove)
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const zoomIn = () => zoom(zoomButtonsScaleBlock)
-  const zoomIn = useCallback(() => zoom(zoomButtonsScaleBlock), [])
+
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const zoomOut = () => zoom(-zoomButtonsScaleBlock)
-  const zoomOut = useCallback(() => zoom(-zoomButtonsScaleBlock), [])
 
   return (
     <DraggableCore onDrag={onDrag} enableUserSelectHack={false}>
       <Flex ref={graphContainerRef} position="relative" {...props}>
-        <ZoomButtons onZoomIn={zoomIn} onZoomOut={zoomOut} />
+        <ZoomButtons onZoomInClick={zoomIn} onZoomOutClick={zoomOut} />
         <Flex
           flex="1"
           w="full"
           h="full"
           position="absolute"
+          data-testid="graph"
           style={{
             transform,
           }}

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

@@ -1,13 +1,15 @@
 import { Stack, IconButton } from '@chakra-ui/react'
 import { PlusIcon, MinusIcon } from 'assets/icons'
-import { memo } from 'react'
 import { headerHeight } from '../TypebotHeader'
 
 type Props = {
-  onZoomIn: () => void
+  onZoomInClick: () => void
-  onZoomOut: () => void
+  onZoomOutClick: () => void
 }
-export const ZoomButtons = memo(({ onZoomIn, onZoomOut }: Props) => (
+export const ZoomButtons = ({
+  onZoomInClick: onZoomIn,
+  onZoomOutClick: onZoomOut,
+}: Props) => (
   <Stack
     pos="fixed"
     top={`calc(${headerHeight}px + 70px)`}
@@ -20,7 +22,7 @@ export const ZoomButtons = memo(({ onZoomIn, onZoomOut }: Props) => (
   >
     <IconButton
       icon={<PlusIcon />}
-      aria-label={'Zoom out'}
+      aria-label={'Zoom in'}
       size="sm"
       onClick={onZoomIn}
       bgColor="white"
@@ -35,4 +37,4 @@ export const ZoomButtons = memo(({ onZoomIn, onZoomOut }: Props) => (
       borderTopRadius={0}
     />
   </Stack>
-))
+)

apps/builder/playwright/tests/editor.spec.ts

@@ -108,7 +108,7 @@ test('Drag and drop blocks and items should work', async ({ page }) => {
     'Item 3'
   )
 })
-test('Undo / Redo buttons should work', async ({ page }) => {
+test('Undo / Redo and Zoom buttons should work', async ({ page }) => {
   const typebotId = cuid()
   await createTypebots([
     {
@@ -132,6 +132,22 @@ test('Undo / Redo buttons should work', async ({ page }) => {
   await expect(page.locator('text="Group #1"')).toBeVisible()
   await page.click('button[aria-label="Redo"]')
   await expect(page.locator('text="Group #1"')).toBeHidden()
+  await page.getByRole('button', { name: 'Zoom in' }).click()
+  await expect(page.getByTestId('graph')).toHaveAttribute(
+    'style',
+    /scale\(1\.2\);$/
+  )
+  await page.getByRole('button', { name: 'Zoom in' }).click()
+  await expect(page.getByTestId('graph')).toHaveAttribute(
+    'style',
+    /scale\(1\.4\);$/
+  )
+  await page.getByRole('button', { name: 'Zoom out' }).dblclick()
+  await page.getByRole('button', { name: 'Zoom out' }).dblclick()
+  await expect(page.getByTestId('graph')).toHaveAttribute(
+    'style',
+    /scale\(0\.6\);$/
+  )
 })
 
 test('Rename and icon change should work', async ({ page }) => {