[field] Fix annotation for crop/hotspot changes

packages/@sanity/field/src/diff/components/image/ImageFieldDiff.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
+import {ChangeList} from '../../changes'
 import {DiffComponent, ObjectDiff} from '../../types'
 import {DiffAnnotationTooltip, useDiffAnnotationColor} from '../../annotations'
 import {DiffArrow} from '../shared'
 import {getRefValue} from '../hooks'
 import ImagePreview from './ImagePreview'
 import styles from './ImageFieldDiff.css'
 import {Image} from './types'
-import {ChangeList} from '../../changes'
 
 /* TODO:
   - Correct annotation for hotspot/crop changes
@@ -33,16 +33,19 @@ export const ImageFieldDiff: DiffComponent<ObjectDiff<Image>> = ({diff, schemaTy
     .map(field => field.name)
 
   const didAssetChange = changedFields.includes('asset')
-  const didMetaChange = changedFields.some(field => IMAGE_META_FIELDS.includes(field))
+  const didCropChange = changedFields.includes('crop')
+  const didHotspotChange = changedFields.includes('hotspot')
+  const didMetaChange = didCropChange || didHotspotChange
   const showImageDiff = didAssetChange || didMetaChange
 
-  const color = useDiffAnnotationColor(diff, 'asset._ref')
+  const annotationPath = getAnnotationPath({didAssetChange, didCropChange, didHotspotChange})
+  const color = useDiffAnnotationColor(diff, annotationPath)
   const style = color ? {background: color.background, color: color.text} : {}
 
   return (
     <div className={styles.root}>
       {showImageDiff && (
-        <DiffAnnotationTooltip diff={diff} path="asset._ref">
+        <DiffAnnotationTooltip diff={diff} path={annotationPath}>
           <div className={styles.imageDiff} data-diff-layout={prev && next ? 'double' : 'single'}>
             {prev && (
               <div className={styles.annotation} style={style}>
@@ -77,3 +80,25 @@ export const ImageFieldDiff: DiffComponent<ObjectDiff<Image>> = ({diff, schemaTy
     </div>
   )
 }
+
+function getAnnotationPath(changes: {
+  didCropChange: boolean
+  didHotspotChange: boolean
+  didAssetChange: boolean
+}): string | undefined {
+  const {didAssetChange, didCropChange, didHotspotChange} = changes
+
+  if (didAssetChange) {
+    return 'asset._ref'
+  }
+
+  if (didCropChange) {
+    return 'crop'
+  }
+
+  if (didHotspotChange) {
+    return 'hotspot'
+  }
+
+  return undefined
+}