@cdc/chart 4.26.6 → 4.26.10

package/src/components/Annotations/components/AnnotationDraggable.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react'
+import { type PointerEvent as ReactPointerEvent, useContext, useEffect, useRef, useState } from 'react'
 import ConfigContext from '../../../ConfigContext'
 import DOMPurify from 'dompurify'
 import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
@@ -6,9 +6,19 @@ import { isMobileAnnotationViewport, isMobileFontViewport } from '@cdc/core/help
 
 // helpers
 import { findNearestDatum } from './findNearestDatum'
+import {
+  type AnnotationLabelRect,
+  type AnnotationLayout,
+  getAnnotationLabelRect,
+  getFacingAnnotationSide,
+  MIN_ANNOTATION_LABEL_WIDTH_EM,
+  MIN_EVENT_LINE_LABEL_WIDTH_EM,
+  resolveAnnotationLayout,
+  resolveAnnotationRectangleDrag
+} from '../helpers/resolveAnnotationLayout'
 
 // visx
-import { HtmlLabel, CircleSubject, EditableAnnotation, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
+import { HtmlLabel, CircleSubject, Connector, Annotation as VisxAnnotation } from '@visx/annotation'
 import { MarkerArrow } from '@visx/marker'
 import { LinePath } from '@visx/shape'
 
@@ -18,6 +28,94 @@ import './AnnotationDraggable.styles.css'
 export const EVENT_LINE_LABEL_OFFSET = 2
 export const snapEventLineDx = (dx: number) => (dx >= 0 ? EVENT_LINE_LABEL_OFFSET : -EVENT_LINE_LABEL_OFFSET)
 
+type ContentAlignment = 'start' | 'center' | 'end'
+
+const getCalloutContentAlignment = (horizontalAnchor: AnnotationLayout['horizontalAnchor']): ContentAlignment => {
+  if (horizontalAnchor === 'middle') return 'center'
+  return horizontalAnchor === 'end' ? 'end' : 'start'
+}
+
+type ResizeHandleProps = {
+  edge: 'left' | 'right'
+  initialWidth: number
+  maxWidth: number
+  minWidthEm: number
+  onPreview: (width: number) => void
+  onCommit: (width: number, fontSize: number) => void
+  onCancel: () => void
+}
+
+const AnnotationResizeHandle = ({
+  edge,
+  initialWidth,
+  maxWidth,
+  minWidthEm,
+  onPreview,
+  onCommit,
+  onCancel
+}: ResizeHandleProps) => {
+  const handlePointerDown = (event: ReactPointerEvent<HTMLSpanElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    const startX = event.clientX
+    const labelElement = event.currentTarget.parentElement
+    const measuredWidth = labelElement?.getBoundingClientRect().width || 0
+    const startWidth = measuredWidth > 0 ? measuredWidth : initialWidth
+    const computedFontSize = labelElement ? Number.parseFloat(window.getComputedStyle(labelElement).fontSize) || 16 : 16
+    const minWidth = minWidthEm * computedFontSize
+    const boundedMaxWidth = Math.max(minWidth, maxWidth)
+    let previewWidth = startWidth
+    let moved = false
+
+    const removeListeners = () => {
+      window.removeEventListener('pointermove', handlePointerMove)
+      window.removeEventListener('pointerup', finishResize)
+      window.removeEventListener('pointercancel', cancelResize)
+    }
+
+    const handlePointerMove = (pointerEvent: PointerEvent) => {
+      pointerEvent.preventDefault()
+      pointerEvent.stopPropagation()
+      const delta = pointerEvent.clientX - startX
+      previewWidth = Math.min(boundedMaxWidth, Math.max(minWidth, startWidth + (edge === 'right' ? delta : -delta)))
+      moved = true
+      onPreview(previewWidth)
+    }
+
+    const finishResize = (pointerEvent: PointerEvent) => {
+      pointerEvent.preventDefault()
+      pointerEvent.stopPropagation()
+      removeListeners()
+      if (moved) onCommit(previewWidth, computedFontSize)
+    }
+
+    const cancelResize = (pointerEvent: PointerEvent) => {
+      pointerEvent.preventDefault()
+      pointerEvent.stopPropagation()
+      removeListeners()
+      onCancel()
+    }
+
+    window.addEventListener('pointermove', handlePointerMove)
+    window.addEventListener('pointerup', finishResize)
+    window.addEventListener('pointercancel', cancelResize)
+  }
+
+  return (
+    <span
+      className={`annotation__resize-handle annotation__resize-handle--${edge}`}
+      data-testid='annotation-resize-handle'
+      aria-hidden='true'
+      onPointerDown={handlePointerDown}
+      onClick={event => {
+        event.preventDefault()
+        event.stopPropagation()
+      }}
+    />
+  )
+}
+
 // Keep annotation label text in sync with axis tick labels (see LinearChart.tsx).
 const TICK_LABEL_FONT_SIZE = 16
 const TICK_LABEL_FONT_SIZE_SMALL = 13
@@ -34,17 +132,16 @@ const Annotations = ({
   onDragStateChange
 }) => {
   // prettier-ignore
-  const { config, dimensions, isEditor, updateConfig, colorScale, transformedData, parseDate, currentViewport, visibleAnnotations } = useContext(ConfigContext)
+  const { config, isEditor, updateConfig, colorScale, transformedData, parseDate, currentViewport, vizViewport, visibleAnnotations } = useContext(ConfigContext)
 
   // destructure config items here...
   const { annotations, visualizationType } = config
-  const [height] = dimensions
-
-  const AnnotationComponent = isEditor ? EditableAnnotation : VisxAnnotation
-  const isMobile = isMobileAnnotationViewport(currentViewport) && config?.general?.mobileAnnotationDisplay !== 'text'
+  const annotationViewport = vizViewport ?? currentViewport
+  const isMobile = isMobileAnnotationViewport(annotationViewport) && config?.general?.mobileAnnotationDisplay !== 'text'
 
   // Match the axis tick label font size (and its viewport-based scaling) for visual consistency.
-  const tickLabelFontSize = isMobileFontViewport(currentViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
+  const usesMobileFontSize = isMobileFontViewport(annotationViewport)
+  const tickLabelFontSize = usesMobileFontSize ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
 
   /**
    * Scale dx/dy offsets based on savedDimensions vs current dimensions.
@@ -61,22 +158,61 @@ const Annotations = ({
   }
 
   // Track live drag position for real-time anchor calculations
-  const [liveDrag, setLiveDrag] = useState<{ index: number; dx: number } | null>(null)
-
-  // Helper to determine label anchoring when near chart edges
-  const getAnnotationAnchors = (annotationX: number, dx: number, labelWidth: number) => {
-    const endpointX = annotationX + dx
-
-    const leftOverflow = dx < 0 && endpointX - labelWidth < 0
-    const rightOverflow = dx > 0 && endpointX + labelWidth > xMax
-
-    if (leftOverflow || rightOverflow) {
-      // Center label above the endpoint
-      return { horizontalAnchor: 'middle' as const, verticalAnchor: 'end' as const }
-    }
+  const [liveDrag, setLiveDrag] = useState<{
+    index: number
+    dx: number
+    dy: number
+    layout?: AnnotationLayout
+  } | null>(null)
+  const [liveSubjectDrag, setLiveSubjectDrag] = useState<{ index: number; x: number; y: number } | null>(null)
+  const [draggingLabelIndex, setDraggingLabelIndex] = useState<number | null>(null)
+  const [draggingSubjectIndex, setDraggingSubjectIndex] = useState<number | null>(null)
+  const [previewWidths, setPreviewWidths] = useState<Record<number, number>>({})
+  const [labelMeasurements, setLabelMeasurements] = useState<
+    Record<number, { width: number; height: number; naturalWidth: number }>
+  >({})
+  const labelRefs = useRef<Record<number, HTMLDivElement | null>>({})
+  const runtimeConstrainedWidths = useRef<Record<number, number | undefined>>({})
+
+  useEffect(() => {
+    setLabelMeasurements(current => {
+      let changed = false
+      const next = { ...current }
+
+      Object.entries(labelRefs.current).forEach(([indexKey, node]) => {
+        if (!node) return
+        const index = Number(indexKey)
+        const { width, height } = node.getBoundingClientRect()
+        if (width <= 0 || height <= 0) return
+        const previous = current[index]
+        const naturalWidth =
+          runtimeConstrainedWidths.current[index] === undefined ? width : previous?.naturalWidth ?? width
+
+        if (
+          !previous ||
+          Math.abs(previous.width - width) > 0.5 ||
+          Math.abs(previous.height - height) > 0.5 ||
+          Math.abs(previous.naturalWidth - naturalWidth) > 0.5
+        ) {
+          next[index] = { width, height, naturalWidth }
+          changed = true
+        }
+      })
 
-    // Let visx auto-decide
-    return { horizontalAnchor: null, verticalAnchor: null }
+      return changed ? next : current
+    })
+  })
+
+  const getSvgPointerPosition = (clientX: number, clientY: number) => {
+    const referencedElement = svgRef?.current
+    const svg = referencedElement?.ownerSVGElement || referencedElement
+    const matrix = svg?.getScreenCTM?.()
+    if (!svg?.createSVGPoint || !matrix) return { x: clientX, y: clientY }
+
+    const point = svg.createSVGPoint()
+    point.x = clientX
+    point.y = clientY
+    return point.matrixTransform(matrix.inverse())
   }
 
   return (
@@ -85,10 +221,54 @@ const Annotations = ({
       const originalIndex = annotations.indexOf(annotation)
       const text = annotation.text || ''
       const isEventLine = annotation.style === 'event-line'
-
       // Calculate scaled dx/dy offsets based on savedDimensions
       const { scaledDx: rawScaledDx, scaledDy } = getScaledOffsets(annotation)
-      const scaledDx = isEventLine ? snapEventLineDx(rawScaledDx) : rawScaledDx
+      const scaledDx = isEventLine
+        ? annotation.labelPosition === 'left'
+          ? -EVENT_LINE_LABEL_OFFSET
+          : annotation.labelPosition === 'right'
+          ? EVENT_LINE_LABEL_OFFSET
+          : snapEventLineDx(rawScaledDx)
+        : rawScaledDx
+      const displayedDx = liveDrag?.index === annotationIndex ? liveDrag.dx : scaledDx
+      const displayedDy = liveDrag?.index === annotationIndex ? liveDrag.dy : scaledDy
+      const previewLabelWidthPx = previewWidths[originalIndex]
+
+      const previewLabelWidth = (width: number) => {
+        setPreviewWidths(current => ({ ...current, [originalIndex]: width }))
+      }
+
+      const clearPreviewLabelWidth = () => {
+        setPreviewWidths(current => {
+          const next = { ...current }
+          delete next[originalIndex]
+          return next
+        })
+      }
+
+      const persistLabelWidth = (width: number, fontSize: number) => {
+        const updatedAnnotations = [...annotations]
+        updatedAnnotations[originalIndex] = {
+          ...updatedAnnotations[originalIndex],
+          labelWidthEm: width / fontSize
+        }
+        clearPreviewLabelWidth()
+        updateConfig({ ...config, annotations: updatedAnnotations })
+      }
+
+      const persistLabelPosition = (dx: number, dy: number, autoSide?: AnnotationLayout['side']) => {
+        const updatedAnnotations = [...annotations]
+        updatedAnnotations[originalIndex] = {
+          ...updatedAnnotations[originalIndex],
+          dx,
+          dy,
+          savedDimensions: [xMax, yMax],
+          ...((!annotation.labelPosition || annotation.labelPosition === 'auto') && !isEventLine && autoSide
+            ? { autoSide }
+            : {})
+        }
+        updateConfig({ ...config, annotations: updatedAnnotations })
+      }
 
       // Default to absolute positioning
       let annotationX = xScaleAnnotation(annotation.x)
@@ -147,135 +327,385 @@ const Annotations = ({
         }
       }
 
-      // sanitize the text for setting dangerouslySetInnerHTML
-      const sanitizedData = () => ({
-        __html: DOMPurify.sanitize(text)
+      const displayedAnnotationX = liveSubjectDrag?.index === annotationIndex ? liveSubjectDrag.x : annotationX
+      const displayedAnnotationY = liveSubjectDrag?.index === annotationIndex ? liveSubjectDrag.y : annotationY
+      const legacyLabelWidth = isEventLine || config.general.showAnnotationDropdown ? 186 : 150
+      const minLabelWidthEm = isEventLine ? MIN_EVENT_LINE_LABEL_WIDTH_EM : MIN_ANNOTATION_LABEL_WIDTH_EM
+      const measurement = labelMeasurements[originalIndex]
+      const authoredLabelWidth =
+        annotation.labelWidthEm === undefined
+          ? measurement?.naturalWidth ?? legacyLabelWidth
+          : Math.max(minLabelWidthEm, annotation.labelWidthEm) * tickLabelFontSize
+      const desiredLabelWidth = previewLabelWidthPx ?? authoredLabelWidth
+      const endpointX = displayedAnnotationX + displayedDx
+      const endpointY = displayedAnnotationY + displayedDy
+      const eventLineSide =
+        annotation.labelPosition === 'left' || annotation.labelPosition === 'right'
+          ? annotation.labelPosition
+          : displayedDx >= 0
+          ? 'right'
+          : 'left'
+      const calculatedLayout = resolveAnnotationLayout({
+        endpointX,
+        endpointY,
+        dx: displayedDx,
+        dy: displayedDy,
+        labelWidth: desiredLabelWidth,
+        labelHeight: measurement?.height ?? 0,
+        plotWidth: xMax,
+        plotHeight: yMax,
+        fontSize: tickLabelFontSize,
+        minWidthEm: minLabelWidthEm,
+        labelPosition: isEventLine ? eventLineSide : annotation.labelPosition,
+        autoSide: isEventLine ? undefined : annotation.autoSide,
+        clampNormalAxis: !isEventLine
       })
+      const resolvedLayout = liveDrag?.index === annotationIndex && liveDrag.layout ? liveDrag.layout : calculatedLayout
+      const renderedDx = resolvedLayout.x - displayedAnnotationX
+      const renderedDy = resolvedLayout.y - displayedAnnotationY
+      const connectorDx = isMobile ? scaledDx : renderedDx
+      const connectorDy = isMobile ? scaledDy : renderedDy
+      const usesLegacyEventLineSizing =
+        isEventLine && annotation.labelWidthEm === undefined && previewLabelWidthPx === undefined
+      const runtimeWidth =
+        previewLabelWidthPx ?? (usesLegacyEventLineSizing ? undefined : resolvedLayout.constrainedWidth)
+      const availableResizeWidth =
+        resolvedLayout.side === 'left'
+          ? resolvedLayout.x
+          : resolvedLayout.side === 'right'
+          ? xMax - resolvedLayout.x
+          : xMax
+      const maxResizeWidth = Math.max(minLabelWidthEm * tickLabelFontSize, availableResizeWidth)
+      runtimeConstrainedWidths.current[originalIndex] =
+        previewLabelWidthPx === undefined && !usesLegacyEventLineSizing ? resolvedLayout.constrainedWidth : undefined
+      const labelContainerStyle = usesLegacyEventLineSizing
+        ? { width: 'fit-content', maxWidth: `${legacyLabelWidth}px` }
+        : runtimeWidth !== undefined
+        ? { width: `${runtimeWidth}px` }
+        : annotation.labelWidthEm !== undefined
+        ? { width: `${authoredLabelWidth}px` }
+        : { width: 'fit-content', maxWidth: `${legacyLabelWidth}px` }
+
+      const resolveEventLineDraggedPosition = (rawDx: number, rawDy: number) => {
+        const dragDx =
+          annotation.labelPosition === 'left'
+            ? -EVENT_LINE_LABEL_OFFSET
+            : annotation.labelPosition === 'right'
+            ? EVENT_LINE_LABEL_OFFSET
+            : snapEventLineDx(rawDx)
+        const dragEventLineSide =
+          annotation.labelPosition === 'left' || annotation.labelPosition === 'right'
+            ? annotation.labelPosition
+            : dragDx >= 0
+            ? 'right'
+            : 'left'
+
+        const layout = resolveAnnotationLayout({
+          endpointX: displayedAnnotationX + dragDx,
+          endpointY: displayedAnnotationY + rawDy,
+          dx: dragDx,
+          dy: rawDy,
+          labelWidth: desiredLabelWidth,
+          labelHeight: measurement?.height ?? 0,
+          plotWidth: xMax,
+          plotHeight: yMax,
+          fontSize: tickLabelFontSize,
+          minWidthEm: minLabelWidthEm,
+          labelPosition: dragEventLineSide,
+          clampNormalAxis: false
+        })
+
+        return {
+          dx: layout.x - displayedAnnotationX,
+          dy: layout.y - displayedAnnotationY,
+          layout
+        }
+      }
 
-      return (
-        <AnnotationComponent
-          key={`annotation-${originalIndex}-${annotation.x}-${annotation.y}-${annotation.dx}-${annotation.dy}`}
-          width={xMax}
-          height={yMax}
-          dx={scaledDx} // label position (scaled to current chart dimensions)
-          dy={scaledDy} // label position (scaled to current chart dimensions)
-          x={annotationX}
-          y={annotationY}
-          canEditLabel={annotation.edit.label || false}
-          canEditSubject={(annotation.edit.subject && (isEventLine || annotation.connectionType !== 'none')) || false}
-          labelDragHandleProps={{ r: 15, stroke: 'red' }}
-          subjectDragHandleProps={{ r: 15, stroke: 'red' }}
-          onDragStart={() => {
-            onDragStateChange(true)
-            setLiveDrag({ index: annotationIndex, dx: scaledDx })
-          }}
-          onDragMove={props => {
-            const previewDx = isEventLine ? snapEventLineDx(props.dx) : props.dx
-            setLiveDrag({ index: annotationIndex, dx: previewDx })
-          }}
-          onDragEnd={props => {
-            onDragStateChange(false)
-            setLiveDrag(null)
-
-            let updatedAnnotations = [...annotations]
-
-            // Current chart dimensions to save with the annotation
-            const currentDimensions: [number, number] = [xMax, yMax]
-
-            const isLabelOnlyDrag =
-              annotation.anchorMode === 'data'
-                ? annotationX === props.x && annotationY === props.y
-                : annotation.x === xScaleAnnotation.invert(props.x) && annotation.y === yScaleAnnotation.invert(props.y)
-
-            if (isLabelOnlyDrag) {
-              // Event-line snaps dx; callout persists raw drag offset.
-              const persistedDx = isEventLine ? snapEventLineDx(props.dx) : props.dx
+      const startLabelDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
+        if (!isEditor || !annotation.edit.label) return
+
+        event.preventDefault()
+        event.stopPropagation()
+        const startPoint = getSvgPointerPosition(event.clientX, event.clientY)
+        const startRect = isEventLine
+          ? undefined
+          : getAnnotationLabelRect(
+              resolvedLayout.x,
+              resolvedLayout.y,
+              measurement?.width ?? resolvedLayout.width,
+              measurement?.height ?? 0,
+              resolvedLayout.side
+            )
+        const initialDrag = isEventLine
+          ? resolveEventLineDraggedPosition(scaledDx, scaledDy)
+          : {
+              dx: renderedDx,
+              dy: renderedDy,
+              layout: resolvedLayout
+            }
+        let nextDrag: {
+          dx: number
+          dy: number
+          layout: AnnotationLayout
+        } = initialDrag
+
+        const removeListeners = () => {
+          window.removeEventListener('pointermove', handlePointerMove)
+          window.removeEventListener('pointerup', finishDrag)
+          window.removeEventListener('pointercancel', cancelDrag)
+        }
+
+        const handlePointerMove = (pointerEvent: PointerEvent) => {
+          pointerEvent.preventDefault()
+          pointerEvent.stopPropagation()
+          const pointer = getSvgPointerPosition(pointerEvent.clientX, pointerEvent.clientY)
+          const pointerDx = pointer.x - startPoint.x
+          const pointerDy = pointer.y - startPoint.y
+
+          if (isEventLine) {
+            nextDrag = resolveEventLineDraggedPosition(initialDrag.dx + pointerDx, initialDrag.dy + pointerDy)
+          } else if (startRect) {
+            const intendedRect = {
+              ...startRect,
+              left: startRect.left + pointerDx,
+              top: startRect.top + pointerDy
+            }
+            const dragSide =
+              annotation.labelPosition && annotation.labelPosition !== 'auto'
+                ? annotation.labelPosition
+                : getFacingAnnotationSide(displayedAnnotationX, displayedAnnotationY, intendedRect)
+
+            const resolvedDrag = resolveAnnotationRectangleDrag({
+              rect: intendedRect,
+              subjectX: displayedAnnotationX,
+              subjectY: displayedAnnotationY,
+              plotWidth: xMax,
+              plotHeight: yMax,
+              side: dragSide
+            })
+            nextDrag = {
+              dx: resolvedDrag.dx,
+              dy: resolvedDrag.dy,
+              layout: resolvedDrag.layout
+            }
+          }
+          setLiveDrag({ index: annotationIndex, ...nextDrag })
+        }
+
+        const finishDrag = (pointerEvent: PointerEvent) => {
+          pointerEvent.preventDefault()
+          pointerEvent.stopPropagation()
+          removeListeners()
+          onDragStateChange(false)
+          setDraggingLabelIndex(null)
+          setLiveDrag(null)
+          persistLabelPosition(nextDrag.dx, nextDrag.dy, nextDrag.layout.side)
+        }
+
+        const cancelDrag = (pointerEvent: PointerEvent) => {
+          pointerEvent.preventDefault()
+          pointerEvent.stopPropagation()
+          removeListeners()
+          onDragStateChange(false)
+          setDraggingLabelIndex(null)
+          setLiveDrag(null)
+        }
+
+        onDragStateChange(true)
+        setDraggingLabelIndex(annotationIndex)
+        setLiveDrag({ index: annotationIndex, ...initialDrag })
+        window.addEventListener('pointermove', handlePointerMove)
+        window.addEventListener('pointerup', finishDrag)
+        window.addEventListener('pointercancel', cancelDrag)
+      }
+
+      const startSubjectDrag = (event: ReactPointerEvent<SVGCircleElement>) => {
+        if (!isEditor || !annotation.edit.subject || (!isEventLine && annotation.connectionType === 'none')) return
+
+        event.preventDefault()
+        event.stopPropagation()
+        const startPoint = getSvgPointerPosition(event.clientX, event.clientY)
+        let nextX = annotationX
+        let nextY = annotationY
+
+        const removeListeners = () => {
+          window.removeEventListener('pointermove', handlePointerMove)
+          window.removeEventListener('pointerup', finishDrag)
+          window.removeEventListener('pointercancel', cancelDrag)
+        }
+
+        const handlePointerMove = (pointerEvent: PointerEvent) => {
+          pointerEvent.preventDefault()
+          pointerEvent.stopPropagation()
+          const pointer = getSvgPointerPosition(pointerEvent.clientX, pointerEvent.clientY)
+          nextX = annotationX + pointer.x - startPoint.x
+          nextY = annotationY + pointer.y - startPoint.y
+          setLiveSubjectDrag({ index: annotationIndex, x: nextX, y: nextY })
+        }
+
+        const finishDrag = (pointerEvent: PointerEvent) => {
+          pointerEvent.preventDefault()
+          pointerEvent.stopPropagation()
+          removeListeners()
+          onDragStateChange(false)
+          setDraggingSubjectIndex(null)
+          setLiveSubjectDrag(null)
+
+          const updatedAnnotations = [...annotations]
+          const currentDimensions: [number, number] = [xMax, yMax]
+
+          if (annotation.anchorMode === 'data') {
+            const nearestDatum = findNearestDatum({
+              data: transformedData || config.data,
+              xScale,
+              xAxisType: config.xAxis.type,
+              xAxisDataKey: config.xAxis.dataKey,
+              seriesKey: annotation.seriesKey,
+              xPixel: nextX,
+              parseDate
+            })
+
+            if (nearestDatum) {
               updatedAnnotations[originalIndex] = {
                 ...updatedAnnotations[originalIndex],
-                dx: persistedDx,
-                dy: props.dy,
+                dataX: nearestDatum.x,
+                x: xScaleAnnotation.invert(nextX),
+                y: yScaleAnnotation.invert(nextY),
                 savedDimensions: currentDimensions
               }
-            } else {
-              if (annotation.anchorMode === 'data') {
-                let nearestDatum = findNearestDatum({
-                  data: transformedData || config.data,
-                  xScale,
-                  xAxisType: config.xAxis.type,
-                  xAxisDataKey: config.xAxis.dataKey,
-                  seriesKey: annotation.seriesKey,
-                  xPixel: props.x,
-                  parseDate
-                })
-
-                if (nearestDatum) {
-                  updatedAnnotations[originalIndex] = {
-                    ...updatedAnnotations[originalIndex],
-                    dataX: nearestDatum.x,
-                    x: xScaleAnnotation.invert(props.x),
-                    y: yScaleAnnotation.invert(props.y),
-                    savedDimensions: currentDimensions
-                  }
-                }
-              } else {
-                updatedAnnotations[originalIndex] = {
-                  ...updatedAnnotations[originalIndex],
-                  x: xScaleAnnotation.invert(props.x),
-                  y: yScaleAnnotation.invert(props.y),
-                  savedDimensions: currentDimensions
-                }
-              }
             }
+          } else {
+            updatedAnnotations[originalIndex] = {
+              ...updatedAnnotations[originalIndex],
+              x: xScaleAnnotation.invert(nextX),
+              y: yScaleAnnotation.invert(nextY),
+              savedDimensions: currentDimensions
+            }
+          }
 
-            updateConfig({
-              ...config,
-              annotations: updatedAnnotations
-            })
-          }}
+          updateConfig({ ...config, annotations: updatedAnnotations })
+        }
+
+        const cancelDrag = (pointerEvent: PointerEvent) => {
+          pointerEvent.preventDefault()
+          pointerEvent.stopPropagation()
+          removeListeners()
+          onDragStateChange(false)
+          setDraggingSubjectIndex(null)
+          setLiveSubjectDrag(null)
+        }
+
+        onDragStateChange(true)
+        setDraggingSubjectIndex(annotationIndex)
+        setLiveSubjectDrag({ index: annotationIndex, x: annotationX, y: annotationY })
+        window.addEventListener('pointermove', handlePointerMove)
+        window.addEventListener('pointerup', finishDrag)
+        window.addEventListener('pointercancel', cancelDrag)
+      }
+
+      // sanitize the text for setting dangerouslySetInnerHTML
+      const sanitizedData = () => ({
+        __html: DOMPurify.sanitize(text)
+      })
+
+      return (
+        <VisxAnnotation
+          key={`annotation-${originalIndex}`}
+          dx={connectorDx}
+          dy={connectorDy}
+          x={displayedAnnotationX}
+          y={displayedAnnotationY}
         >
           {isEventLine ? (
             <>
               <line
-                x1={annotationX}
-                x2={annotationX}
+                x1={displayedAnnotationX}
+                x2={displayedAnnotationX}
                 y1={0}
                 y2={yMax}
-                stroke='#333'
+                stroke={APP_FONT_COLOR}
                 strokeWidth={1}
                 className='annotation__event-line'
                 pointerEvents='none'
               />
               {!isMobile &&
                 (() => {
-                  // Use live dx during drag (already in current space), otherwise use scaled dx
-                  const currentDx = liveDrag?.index === annotationIndex ? liveDrag.dx : scaledDx
-                  const onRight = currentDx >= 0
+                  const onRight = resolvedLayout.side === 'right'
+                  const horizontalAnchor = resolvedLayout.horizontalAnchor
+                  const verticalAnchor = resolvedLayout.verticalAnchor
+                  const handleEdge = horizontalAnchor === 'end' ? 'left' : 'right'
                   return (
                     <HtmlLabel
                       className='annotation__desktop-label'
-                      containerStyle={{ width: 'fit-content', maxWidth: '186px' }}
-                      horizontalAnchor={onRight ? 'start' : 'end'}
-                      verticalAnchor='middle'
+                      containerStyle={labelContainerStyle}
+                      horizontalAnchor={horizontalAnchor}
+                      verticalAnchor={verticalAnchor}
+                      x={resolvedLayout.x}
+                      y={resolvedLayout.y}
                       showAnchorLine={false}
                     >
                       <div
+                        ref={node => {
+                          labelRefs.current[originalIndex] = node
+                        }}
                         className={`annotation__event-line-label ${
                           onRight
                             ? 'cove-annotation-event-line__label--right'
                             : 'cove-annotation-event-line__label--left'
+                        } ${isEditor && annotation.edit.label ? 'annotation__label--editable' : ''} ${
+                          draggingLabelIndex === annotationIndex ? 'annotation__label--dragging' : ''
                         }`}
                         style={{
                           backgroundColor: `rgba(255, 255, 255, ${
                             annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
                           })`,
                           padding: '6px 8px',
-                          color: annotation.colors?.label || APP_FONT_COLOR,
-                          fontSize: tickLabelFontSize
+                          color: APP_FONT_COLOR,
+                          fontSize: tickLabelFontSize,
+                          ...(usesLegacyEventLineSizing ? {} : { boxSizing: 'border-box' as const }),
+                          ...(usesLegacyEventLineSizing
+                            ? {}
+                            : { width: '100%', maxWidth: 'none', position: 'relative' as const }),
+                          ...(config.general.showAnnotationDropdown
+                            ? { display: 'inline-flex', alignItems: 'center', flexDirection: 'row' as const }
+                            : {}),
+                          ...(usesMobileFontSize ? { lineHeight: '1.1em' } : {})
                         }}
+                        data-horizontal-anchor={horizontalAnchor}
+                        data-vertical-anchor={verticalAnchor}
+                        data-label-dx={renderedDx}
+                        data-label-dy={renderedDy}
+                        data-resolved-side={resolvedLayout.side}
+                        onPointerDown={startLabelDrag}
                         tabIndex={0}
                         aria-label={`Annotation text that reads: ${annotation.text}`}
                       >
-                        <div dangerouslySetInnerHTML={sanitizedData()} />
+                        {config.general.showAnnotationDropdown && (
+                          <p
+                            className='annotation__has-dropdown-number'
+                            style={{ margin: '2px 6px', position: 'relative', left: '-4px' }}
+                          >
+                            {originalIndex + 1}
+                          </p>
+                        )}
+                        <div
+                          className={
+                            config.general.showAnnotationDropdown ? 'annotation__event-line-label-text' : undefined
+                          }
+                          dangerouslySetInnerHTML={sanitizedData()}
+                        />
+                        {isEditor && annotation.edit.label && (
+                          <AnnotationResizeHandle
+                            edge={handleEdge}
+                            initialWidth={runtimeWidth ?? authoredLabelWidth}
+                            maxWidth={maxResizeWidth}
+                            minWidthEm={minLabelWidthEm}
+                            onPreview={previewLabelWidth}
+                            onCommit={persistLabelWidth}
+                            onCancel={clearPreviewLabelWidth}
+                          />
+                        )}
                       </div>
                     </HtmlLabel>
                   )
@@ -284,16 +714,16 @@ const Annotations = ({
                 <>
                   <circle
                     fill='white'
-                    cx={annotationX + scaledDx}
-                    cy={annotationY + scaledDy}
+                    cx={displayedAnnotationX + connectorDx}
+                    cy={displayedAnnotationY + connectorDy}
                     r={12}
                     className='annotation__mobile-label annotation__mobile-label-circle'
                     stroke={APP_FONT_COLOR}
                   />
                   <text
                     height={16}
-                    x={annotationX + scaledDx}
-                    y={annotationY + scaledDy + 1}
+                    x={displayedAnnotationX + connectorDx}
+                    y={displayedAnnotationY + connectorDy + 1}
                     fontSize={14}
                     className='annotation__mobile-label'
                     alignmentBaseline='middle'
@@ -308,32 +738,64 @@ const Annotations = ({
             <>
               {!isMobile &&
                 (() => {
-                  const labelWidth = config.general.showAnnotationDropdown ? 186 : 150
                   // Use live dx during drag (already in current space), otherwise use scaled dx
-                  const currentDx = liveDrag?.index === annotationIndex ? liveDrag.dx : scaledDx
-                  const { horizontalAnchor, verticalAnchor } = getAnnotationAnchors(annotationX, currentDx, labelWidth)
+                  const currentDx = renderedDx
+                  const { horizontalAnchor, verticalAnchor } = resolvedLayout
+                  const usesLegacyAlignment =
+                    annotation.autoSide === undefined &&
+                    (!annotation.labelPosition || annotation.labelPosition === 'auto')
+                  const contentAlignment = usesLegacyAlignment ? 'start' : getCalloutContentAlignment(horizontalAnchor)
+                  const handleEdge = horizontalAnchor === 'end' ? 'left' : 'right'
                   return (
                     <HtmlLabel
                       className='annotation__desktop-label'
-                      containerStyle={{ width: 'fit-content', maxWidth: `${labelWidth}px` }}
+                      containerStyle={labelContainerStyle}
                       horizontalAnchor={horizontalAnchor}
                       verticalAnchor={verticalAnchor}
+                      x={resolvedLayout.x}
+                      y={resolvedLayout.y}
                       showAnchorLine={false}
                     >
                       <div
+                        ref={node => {
+                          labelRefs.current[originalIndex] = node
+                        }}
+                        className={
+                          isEditor && annotation.edit.label
+                            ? `annotation__label--editable ${
+                                draggingLabelIndex === annotationIndex ? 'annotation__label--dragging' : ''
+                              }`
+                            : undefined
+                        }
                         style={{
                           borderRadius: 5, // Optional: set border radius
                           backgroundColor: `rgba(255, 255, 255, ${
                             annotation?.opacity ? Number(annotation?.opacity) / 100 : 1
                           })`,
                           padding: '10px',
-                          width: 'auto',
+                          width: runtimeWidth === undefined && annotation.labelWidthEm === undefined ? 'auto' : '100%',
+                          boxSizing: 'border-box',
+                          position: 'relative',
                           display: config.general.showAnnotationDropdown ? 'inline-flex' : 'flex',
-                          justifyContent: 'start',
+                          justifyContent:
+                            contentAlignment === 'center'
+                              ? 'center'
+                              : contentAlignment === 'end'
+                              ? 'flex-end'
+                              : 'flex-start',
                           flexDirection: 'row',
                           alignItems: 'center',
-                          fontSize: tickLabelFontSize
+                          color: APP_FONT_COLOR,
+                          fontSize: tickLabelFontSize,
+                          ...(usesMobileFontSize ? { lineHeight: '1.1em' } : {})
                         }}
+                        data-horizontal-anchor={horizontalAnchor}
+                        data-vertical-anchor={verticalAnchor}
+                        data-label-dx={renderedDx}
+                        data-label-dy={renderedDy}
+                        data-content-alignment={contentAlignment}
+                        data-resolved-side={resolvedLayout.side}
+                        onPointerDown={startLabelDrag}
                         // role='presentation'
                         tabIndex={0}
                         aria-label={`Annotation text that reads: ${annotation.text}`}
@@ -348,23 +810,47 @@ const Annotations = ({
                             </p>
                           </>
                         )}
-                        <div dangerouslySetInnerHTML={sanitizedData()} />
+                        <div
+                          className={`annotation__label-text ${
+                            contentAlignment === 'end' ? 'annotation__label-text--right' : ''
+                          }`}
+                          dangerouslySetInnerHTML={sanitizedData()}
+                        />
+                        {isEditor && annotation.edit.label && (
+                          <AnnotationResizeHandle
+                            edge={handleEdge}
+                            initialWidth={runtimeWidth ?? authoredLabelWidth}
+                            maxWidth={maxResizeWidth}
+                            minWidthEm={minLabelWidthEm}
+                            onPreview={previewLabelWidth}
+                            onCommit={persistLabelWidth}
+                            onCancel={clearPreviewLabelWidth}
+                          />
+                        )}
                       </div>
                     </HtmlLabel>
                   )
                 })()}
               {annotation.connectionType === 'line' && (
-                <Connector type='line' pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }} />
+                <Connector
+                  type='line'
+                  stroke={APP_FONT_COLOR}
+                  pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }}
+                />
               )}
               {annotation.connectionType === 'elbow' && (
-                <Connector type='elbow' pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }} />
+                <Connector
+                  type='elbow'
+                  stroke={APP_FONT_COLOR}
+                  pathProps={{ markerStart: `url(#marker-start--${originalIndex})` }}
+                />
               )}
               {annotation.connectionType === 'curve' && (
                 <LinePath
-                  d={`M ${annotationX},${annotationY}
-                      Q ${annotationX + scaledDx / 2}, ${
-                    annotationY + scaledDy / 2 + Number(annotation?.bezier) || 0
-                  } ${annotationX + scaledDx},${annotationY + scaledDy}`}
+                  d={`M ${displayedAnnotationX},${displayedAnnotationY}
+                      Q ${displayedAnnotationX + connectorDx / 2}, ${
+                    displayedAnnotationY + connectorDy / 2 + Number(annotation?.bezier) || 0
+                  } ${displayedAnnotationX + connectorDx},${displayedAnnotationY + connectorDy}`}
                   stroke={APP_FONT_COLOR}
                   fill='none'
                   marker-start={`url(#marker-start--${originalIndex})`}
@@ -377,8 +863,8 @@ const Annotations = ({
                 <MarkerArrow
                   fill={APP_FONT_COLOR}
                   id={`marker-start--${originalIndex}`}
-                  x={annotationX}
-                  y={annotationY}
+                  x={displayedAnnotationX}
+                  y={displayedAnnotationY}
                   stroke={APP_FONT_COLOR}
                   markerWidth={12}
                   size={10}
@@ -391,16 +877,16 @@ const Annotations = ({
                 <>
                   <circle
                     fill='white'
-                    cx={annotationX + scaledDx}
-                    cy={annotationY + scaledDy}
+                    cx={displayedAnnotationX + connectorDx}
+                    cy={displayedAnnotationY + connectorDy}
                     r={12}
                     className='annotation__mobile-label annotation__mobile-label-circle'
                     stroke={APP_FONT_COLOR}
                   />
                   <text
                     height={16}
-                    x={annotationX + scaledDx}
-                    y={annotationY + scaledDy + 1}
+                    x={displayedAnnotationX + connectorDx}
+                    y={displayedAnnotationY + connectorDy + 1}
                     fontSize={14}
                     className='annotation__mobile-label'
                     alignmentBaseline='middle'
@@ -412,7 +898,21 @@ const Annotations = ({
               )}
             </>
           )}
-        </AnnotationComponent>
+          {isEditor && annotation.edit.subject && (isEventLine || annotation.connectionType !== 'none') && (
+            <circle
+              cx={displayedAnnotationX}
+              cy={displayedAnnotationY}
+              r={15}
+              fill='transparent'
+              stroke='red'
+              strokeDasharray='4,2'
+              strokeWidth={2}
+              cursor={draggingSubjectIndex === annotationIndex ? 'grabbing' : 'grab'}
+              data-testid='annotation-subject-drag-handle'
+              onPointerDown={startSubjectDrag}
+            />
+          )}
+        </VisxAnnotation>
       )
     })
   )