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