@opendata-ai/openchart-engine 7.11.0 → 8.0.0-rc.10

package/src/annotations/__tests__/rich-text.test.ts

@@ -0,0 +1,91 @@
+import { describe, expect, it } from 'vitest';
+import { computeTextBlockBounds, heuristicMeasure } from '../geometry';
+import { parseAnnotationSpans } from '../rich-text';
+
+describe('parseAnnotationSpans', () => {
+  it('returns a single regular span for plain text', () => {
+    expect(parseAnnotationSpans('Inflation cooled')).toEqual([
+      { text: 'Inflation cooled', bold: false },
+    ]);
+  });
+
+  it('splits a single bold span out of the surrounding text', () => {
+    expect(parseAnnotationSpans('Inflation peaked at **8.5%** in June')).toEqual([
+      { text: 'Inflation peaked at ', bold: false },
+      { text: '8.5%', bold: true },
+      { text: ' in June', bold: false },
+    ]);
+  });
+
+  it('handles multiple bold spans on one line', () => {
+    expect(parseAnnotationSpans('In **California,** ballots arrive by **Nov. 20**')).toEqual([
+      { text: 'In ', bold: false },
+      { text: 'California,', bold: true },
+      { text: ' ballots arrive by ', bold: false },
+      { text: 'Nov. 20', bold: true },
+    ]);
+  });
+
+  it('bolds a span at the start of the line', () => {
+    expect(parseAnnotationSpans('**Feb. 25** peak')).toEqual([
+      { text: 'Feb. 25', bold: true },
+      { text: ' peak', bold: false },
+    ]);
+  });
+
+  it('bolds a span at the end of the line', () => {
+    expect(parseAnnotationSpans('Peak on **Feb. 25**')).toEqual([
+      { text: 'Peak on ', bold: false },
+      { text: 'Feb. 25', bold: true },
+    ]);
+  });
+
+  it('renders an unmatched delimiter literally', () => {
+    expect(parseAnnotationSpans('Up **50% since 2020')).toEqual([
+      { text: 'Up **50% since 2020', bold: false },
+    ]);
+  });
+
+  it('renders an empty delimiter pair literally', () => {
+    expect(parseAnnotationSpans('Nothing **** here')).toEqual([
+      { text: 'Nothing **** here', bold: false },
+    ]);
+  });
+
+  it('never returns an empty span list', () => {
+    expect(parseAnnotationSpans('')).toEqual([{ text: '', bold: false }]);
+  });
+});
+
+describe('computeTextBlockBounds with rich text', () => {
+  const style = {
+    fontSize: 13,
+    fontWeight: 400,
+    lineHeight: 1.3,
+    textAnchor: 'start' as const,
+  };
+
+  it('measures a line with bold spans wider than the same line all-regular', () => {
+    const bold = computeTextBlockBounds(0, 20, 'Inflation peaked at **8.5%**', style);
+    const plain = computeTextBlockBounds(0, 20, 'Inflation peaked at 8.5%', style);
+
+    expect(bold.width).toBeGreaterThan(plain.width);
+  });
+
+  it('does not count the ** markers in the measured width', () => {
+    // The markers are syntax, not glyphs. A naive raw-string measure would make
+    // the bold version wider by four asterisks at weight 400 — this asserts the
+    // widening comes from the weight, not the delimiters.
+    const withMarkers = computeTextBlockBounds(0, 20, '**8.5%**', style, heuristicMeasure);
+    const boldOnly = heuristicMeasure('8.5%', { fontSize: 13, fontWeight: 700 });
+
+    expect(withMarkers.width).toBeCloseTo(boldOnly, 5);
+  });
+
+  it('measures multi-line rich text by its widest line', () => {
+    const bounds = computeTextBlockBounds(0, 20, 'short\n**a much longer bold line**', style);
+    const longestAlone = computeTextBlockBounds(0, 20, '**a much longer bold line**', style);
+
+    expect(bounds.width).toBeCloseTo(longestAlone.width, 5);
+  });
+});

package/src/annotations/__tests__/thinning.test.ts

@@ -134,4 +134,152 @@ describe('thinAnnotations', () => {
     expect(result.annotations[1].footnoteIndex).toBeUndefined();
     expect(result.annotations[2].footnoteIndex).toBe(1);
   });
+
+  describe('plot-area containment', () => {
+    // Label `y` is the text baseline, so bounds extend upward from it: a label
+    // at y=40 with a 12px font spans roughly y=28..44. Keep test baselines far
+    // enough from the top edge that a fitting label really does fit.
+    const plotArea = { x: 0, y: 0, width: 120, height: 200 };
+
+    it('demotes a label that overflows the plot even when nothing collides', () => {
+      // Stacked at different y, so the two never pairwise-collide. The second
+      // runs off the right edge and must still demote.
+      const annotations = [
+        makeResolved(0, 40, 'Fits'),
+        makeResolved(60, 120, 'Way too long to fit here'),
+      ];
+      const specs: Annotation[] = [makeSpec('Fits'), makeSpec('Way too long to fit here')];
+      const result = thinAnnotations(annotations, specs, measure, plotArea);
+      expect(result.footnotes).toHaveLength(1);
+      expect(result.footnotes[0].text).toBe('Way too long to fit here');
+      expect(result.annotations[0].footnoteIndex).toBeUndefined();
+      expect(result.annotations[1].footnoteIndex).toBe(1);
+    });
+
+    it('keeps a label that fits inside the plot', () => {
+      const annotations = [makeResolved(0, 40, 'A'), makeResolved(0, 120, 'B')];
+      const specs: Annotation[] = [makeSpec('A'), makeSpec('B')];
+      const result = thinAnnotations(annotations, specs, measure, plotArea);
+      expect(result.footnotes).toHaveLength(0);
+    });
+
+    it('never demotes a pinned label, even when it overflows', () => {
+      const annotations = [
+        makeResolved(0, 40, 'Fits'),
+        makeResolved(60, 120, 'Way too long to fit here'),
+      ];
+      const specs: Annotation[] = [
+        makeSpec('Fits'),
+        makeSpec('Way too long to fit here', { responsive: false }),
+      ];
+      const result = thinAnnotations(annotations, specs, measure, plotArea);
+      expect(result.footnotes).toHaveLength(0);
+      expect(result.annotations[1].footnoteIndex).toBeUndefined();
+    });
+
+    it('applies no containment constraint when plotArea is omitted', () => {
+      const annotations = [
+        makeResolved(0, 40, 'Fits'),
+        makeResolved(60, 120, 'Way too long to fit here'),
+      ];
+      const specs: Annotation[] = [makeSpec('Fits'), makeSpec('Way too long to fit here')];
+      const result = thinAnnotations(annotations, specs, measure);
+      expect(result.footnotes).toHaveLength(0);
+    });
+
+    // A callout above a peak or below a trough lands in the margin, outside the
+    // plot but inside the chart. Annotations render outside the clip path, so
+    // that is legal placement and must stay inline. Fencing containment to the
+    // plot demoted ordinary callouts to footnotes.
+    //
+    // The plot is inset inside the chart here (a real top margin exists), so
+    // "above the plot" and "outside the chart" are genuinely different regions.
+    // Roomy enough that the coverage budget stays out of the way — containment
+    // is what's under test here.
+    const insetPlot = { x: 40, y: 60, width: 700, height: 400 };
+    const chart = { x: 0, y: 0, width: 780, height: 520 };
+
+    it('keeps a label sitting in the margin above the plot', () => {
+      // Baseline y=30: bounds span roughly y=18..34, above insetPlot.y (60) but
+      // well inside the chart. Fenced to the plot this demotes; fenced to the
+      // chart it stays inline.
+      const annotations = [makeResolved(50, 120, 'Inside'), makeResolved(50, 30, 'Above the peak')];
+      const specs: Annotation[] = [makeSpec('Inside'), makeSpec('Above the peak')];
+
+      const result = thinAnnotations(annotations, specs, measure, insetPlot, chart);
+
+      expect(result.footnotes).toHaveLength(0);
+      expect(result.annotations[1].footnoteIndex).toBeUndefined();
+    });
+
+    it('still demotes a label that escapes the chart entirely', () => {
+      // x=740 in a 780-wide chart: the text runs past the right edge.
+      const annotations = [
+        makeResolved(50, 120, 'Inside'),
+        makeResolved(740, 120, 'Off the right edge of the chart'),
+      ];
+      const specs: Annotation[] = [makeSpec('Inside'), makeSpec('Off the right edge of the chart')];
+
+      const result = thinAnnotations(annotations, specs, measure, insetPlot, chart);
+
+      expect(result.footnotes).toHaveLength(1);
+      expect(result.annotations[1].footnoteIndex).toBe(1);
+    });
+  });
+
+  describe('coverage budget', () => {
+    // Four labels, each well clear of the others and of the plot edges, so
+    // neither the overlap test nor the containment test fires. Only the
+    // coverage budget can demote here — which is the point: at narrow widths
+    // collision resolution spreads labels out and clamping tucks them back in,
+    // leaving a crowded-but-legal layout that the other two rules cannot see.
+    // Editorial-length copy, not toy strings: label area is what the budget
+    // meters, and real callouts ("Recovery begins") are several times wider
+    // than a five-letter placeholder.
+    const TEXTS = ['Recovery begins', 'Strong rebound', 'Record territory', 'Pandemic low'];
+    const spread = () => TEXTS.map((t, i) => makeResolved(5, 20 + i * 40, t));
+    const specs: Annotation[] = TEXTS.map((t) => makeSpec(t));
+
+    it('demotes the crowded tail once labels exceed the budget on a small plot', () => {
+      const annotations = spread();
+      const plotArea = { x: 0, y: 0, width: 160, height: 160 };
+      const result = thinAnnotations(annotations, specs, measure, plotArea);
+
+      // Nothing collides and everything is inside the plot, so a demotion here
+      // is attributable to the budget alone.
+      expect(result.footnotes.length).toBeGreaterThan(0);
+
+      // Priority ties fall back to spec order, so the tail demotes and the head
+      // stays inline.
+      expect(result.annotations[0].footnoteIndex).toBeUndefined();
+      expect(result.annotations[3].footnoteIndex).toBeDefined();
+    });
+
+    it('leaves every label inline when the plot has room', () => {
+      const annotations = spread();
+      const plotArea = { x: 0, y: 0, width: 900, height: 500 };
+      const result = thinAnnotations(annotations, specs, measure, plotArea);
+      expect(result.footnotes).toHaveLength(0);
+    });
+
+    it('does not let a pinned label consume the budget and evict candidates', () => {
+      // The pinned label is enormous — on its own it would blow the budget. It
+      // must not be charged against it, or the candidate that easily fits gets
+      // demoted in its place.
+      const annotations = [
+        makeResolved(5, 20, 'A pinned label that is extremely long and wide'),
+        makeResolved(5, 120, 'Tiny'),
+      ];
+      const pinnedSpecs: Annotation[] = [
+        makeSpec('A pinned label that is extremely long and wide', { responsive: false }),
+        makeSpec('Tiny'),
+      ];
+      const plotArea = { x: 0, y: 0, width: 400, height: 200 };
+      const result = thinAnnotations(annotations, pinnedSpecs, measure, plotArea);
+
+      expect(result.annotations[0].footnoteIndex).toBeUndefined();
+      expect(result.annotations[1].footnoteIndex).toBeUndefined();
+      expect(result.footnotes).toHaveLength(0);
+    });
+  });
 });

package/src/annotations/collisions.ts

@@ -3,22 +3,14 @@
  * resolving annotation-to-annotation overlaps, and clamping to SVG bounds.
  */
 
-import type {
-  Rect,
-  ResolvedAnnotation,
-  ResolvedLabel,
-  TextAnnotation,
-} from '@opendata-ai/openchart-core';
+import type { Rect, ResolvedAnnotation, TextAnnotation } from '@opendata-ai/openchart-core';
 import { detectCollision } from '@opendata-ai/openchart-core';
 import type { NormalizedChartSpec } from '../compiler/types';
 import type { ResolvedScales } from '../layout/scales';
-import { CLAMP_MARGIN, NUDGE_PADDING } from './constants';
-import {
-  type AnnotationMeasureTextFn,
-  estimateLabelBounds,
-  heuristicMeasure,
-  recomputeConnector,
-} from './geometry';
+import { CLAMP_MARGIN, DEFAULT_ANNOTATION_FONT_SIZE, NUDGE_PADDING } from './constants';
+import { type AnnotationMeasureTextFn, heuristicMeasure } from './geometry';
+import { annotationBlockBounds, moveAnnotationBy } from './move';
+import { isAutoPlacement } from './placement';
 import { resolvePosition } from './position';
 
 /**
@@ -55,6 +47,31 @@ export function generateNudgeCandidates(
   return candidates;
 }
 
+/**
+ * Did the author hand-place this block?
+ *
+ * A hand-placed block goes exactly where it was put, and the automatic passes keep
+ * their hands off it. Without that, the obstacle pass overrides the author: on a line
+ * chart the polyline is one long obstacle, so `dy: -10` moved a block by ZERO pixels
+ * while `dy: -15` teleported it 56px. Same knob, no monotonicity -- unaimable.
+ *
+ * `isAutoPlacement` is the ONLY definition of "did the author place this". It already
+ * decides which resolve path an annotation takes, and a non-zero `offset` disqualifies
+ * the scored search there, so an offset ALWAYS means hand-placed -- with or without an
+ * `anchor`. A second, subtly different rule here (an earlier version of this function
+ * additionally demanded an `anchor`) does not create a second tier of annotation; it
+ * just disagrees with the function that actually routed the thing, and the disagreement
+ * shows up as an un-aimable offset on exactly the annotations the extra condition
+ * excluded.
+ *
+ * `offset: { dx: 0 }` is not an instruction, just the default spelled out, so it does
+ * not count -- matching `applyOffset`, which is likewise a no-op for it.
+ */
+function hasExplicitOffset(annotation: TextAnnotation): boolean {
+  const moved = (annotation.offset?.dx ?? 0) !== 0 || (annotation.offset?.dy ?? 0) !== 0;
+  return moved && !isAutoPlacement(annotation);
+}
+
 /**
  * Try to reposition a text annotation to avoid overlapping with obstacle rects
  * (legend bounds, etc.). First tries standard anchor alternatives, then
@@ -70,33 +87,56 @@ export function nudgeAnnotationFromObstacles(
 ): boolean {
   if (annotation.type !== 'text' || !annotation.label) return false;
 
-  const labelBounds = estimateLabelBounds(annotation.label, measure);
+  // An `offset` is the author stating where the block goes. Auto-avoidance is for
+  // annotations that didn't say. Nudging one anyway makes the offset behave like a
+  // suggestion the engine is free to ignore: on a line chart the polyline is one
+  // long obstacle, so `dy: -10` moved a right-anchored block by *zero* pixels and
+  // `dy: -15` teleported it 56px. Same knob, no monotonicity -- unauthorable.
+  if (hasExplicitOffset(originalAnnotation)) return false;
+
+  const label = annotation.label;
+  const bounds = annotation.bounds ?? annotationBlockBounds(annotation, label, measure);
   const collidingObs = obstacles.filter(
-    (obs) => obs.width > 0 && obs.height > 0 && detectCollision(labelBounds, obs),
+    (obs) => obs.width > 0 && obs.height > 0 && detectCollision(bounds, obs),
   );
 
   if (collidingObs.length === 0) return false;
 
-  // Resolve the data point pixel position for offset calculations
-  const px = resolvePosition(originalAnnotation.x, scales.x);
-  const py = resolvePosition(originalAnnotation.y, scales.y);
-  if (px === null || py === null) return false;
+  // A guard, not an input: the nudge geometry below comes from `bounds` and
+  // `connector.endpoint`, not from the data point. But an annotation whose
+  // position no longer resolves has nothing to anchor a connector to, so refuse
+  // to move it rather than shift a label away from a point we can't locate.
+  if (
+    resolvePosition(originalAnnotation.x, scales.x) === null ||
+    resolvePosition(originalAnnotation.y, scales.y) === null
+  ) {
+    return false;
+  }
 
-  const candidates = generateNudgeCandidates(labelBounds, collidingObs, NUDGE_PADDING);
-  const fontSize = labelBounds.height / Math.max(1, annotation.label.text.split('\n').length);
+  const candidates = generateNudgeCandidates(bounds, collidingObs, NUDGE_PADDING);
+  // Read the size off the label, don't back-derive it from the box: `bounds` is
+  // the label ∪ subtitle union, so dividing its height by the *primary* line
+  // count returns roughly double the real size on a subtitled annotation, which
+  // silently doubles the margin slop below.
+  const fontSize = label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
+
+  // A drop-line is a vertical rule running DOWN from the block to the point. Nudge
+  // the block below its own endpoint and the line inverts: it points up, away from
+  // the data, and the block covers the mark it was labelling. The resolver already
+  // placed it (side auto-flip, clamp against the chart top), so the only nudges
+  // worth taking are ones that keep it overhead.
+  const dropLineEndpointY =
+    label.connector?.style === 'drop-line' ? label.connector.endpoint?.y : undefined;
 
   for (const { dx, dy } of candidates) {
-    const newLabelX = annotation.label.x + dx;
-    const newLabelY = annotation.label.y + dy;
-
-    const candidateLabel: ResolvedLabel = {
-      ...annotation.label,
-      x: newLabelX,
-      y: newLabelY,
-      connector: recomputeConnector({ ...annotation.label, x: newLabelX, y: newLabelY }, px, py),
-    };
+    const candidateBounds: Rect = { ...bounds, x: bounds.x + dx, y: bounds.y + dy };
 
-    const candidateBounds = estimateLabelBounds(candidateLabel, measure);
+    if (
+      dropLineEndpointY !== undefined &&
+      candidateBounds.y + candidateBounds.height > dropLineEndpointY
+    ) {
+      continue;
+    }
 
     // Check no collisions with any obstacle
     const stillCollides = obstacles.some(
@@ -119,8 +159,7 @@ export function nudgeAnnotationFromObstacles(
       labelCenterY <= chartArea.y + chartArea.height + fontSize * 3;
 
     if (inBounds) {
-      annotation.label = candidateLabel;
-      annotation.label.bounds = candidateBounds;
+      moveAnnotationBy(annotation, label, dx, dy, measure);
       return true;
     }
   }
@@ -134,7 +173,7 @@ export function nudgeAnnotationFromObstacles(
  * Iterates through text annotations in order, building a list of "placed"
  * bounding rects. When a later annotation overlaps an already-placed one,
  * it tries offset positions (below, above, left, right) to find a
- * non-colliding spot. Recomputes the connector origin after nudging.
+ * non-colliding spot. Recomputes the connector after nudging.
  */
 export function resolveAnnotationCollisions(
   annotations: ResolvedAnnotation[],
@@ -142,46 +181,79 @@ export function resolveAnnotationCollisions(
   scales: ResolvedScales,
   chartArea: Rect,
   measure: AnnotationMeasureTextFn = heuristicMeasure,
+  /**
+   * Predicate on the index into `annotations`: true for an auto-placed entry.
+   *
+   * The scored placement pass already positioned those to avoid everything, so
+   * they must not be nudged again — but they still occupy space, so they stay in
+   * `placedBounds` and the explicit annotations avoid them. Callers pass the full
+   * annotation list; nobody hand-builds a filtered copy, because a second
+   * representation of the list is what breaks `specIndex` lookups.
+   */
+  isAutoPlaced?: (index: number) => boolean,
 ): void {
+  /** Immovable here: sited by the scored search, or hand-placed by the author. */
+  const isPinned = (annotation: ResolvedAnnotation, i: number): boolean => {
+    if (isAutoPlaced?.(i)) return true;
+    // `annotations` is a filtered view of `originalSpecs` -- an annotation that
+    // failed to resolve was dropped -- so index by the stamped spec index, not
+    // by position here. Falling back to `i` keeps a hand-built layout working.
+    const spec = originalSpecs[annotation.specIndex ?? i];
+    return spec?.type === 'text' && hasExplicitOffset(spec);
+  };
+
+  const isText = (a: ResolvedAnnotation) => a.type === 'text' && !!a.label;
+
+  // Seed with EVERY pinned block before nudging anything.
+  //
+  // This used to be one forward sweep that pushed a pinned block's bounds when it
+  // reached it. That only lets annotations authored *after* a pinned one route
+  // around it -- everything earlier was nudged against a `placedBounds` that did not
+  // contain it yet, so "the pinned block claims its space" held or failed purely on
+  // spec order, and two callouts on the same point printed on top of each other when
+  // the pinned one happened to be listed second.
   const placedBounds: Rect[] = [];
+  for (let i = 0; i < annotations.length; i++) {
+    const annotation = annotations[i];
+    if (!isText(annotation) || !isPinned(annotation, i)) continue;
+    placedBounds.push(
+      annotation.bounds ?? annotationBlockBounds(annotation, annotation.label!, measure),
+    );
+  }
 
   for (let i = 0; i < annotations.length; i++) {
     const annotation = annotations[i];
-    if (annotation.type !== 'text' || !annotation.label) {
-      continue;
-    }
+    if (!isText(annotation) || isPinned(annotation, i)) continue;
 
-    const bounds = estimateLabelBounds(annotation.label, measure);
+    const label = annotation.label!;
+    const bounds = annotation.bounds ?? annotationBlockBounds(annotation, label, measure);
+    const originalSpec = originalSpecs[annotation.specIndex ?? i];
 
-    // Check against all previously placed annotation labels
+    // Check against all previously placed annotation blocks
     const collidingBounds = placedBounds.filter(
       (pb) => pb.width > 0 && pb.height > 0 && detectCollision(bounds, pb),
     );
 
     if (collidingBounds.length > 0) {
-      // Find the original spec to get data point coordinates for connector recomputation
-      const originalSpec = originalSpecs[i];
-
       if (originalSpec?.type === 'text') {
+        // A guard, not an input: same as in nudgeAnnotationFromObstacles, the
+        // geometry below comes from `bounds` and `connector.endpoint`. Refuse to
+        // move a label whose data point we can no longer locate.
         const px = resolvePosition(originalSpec.x, scales.x);
         const py = resolvePosition(originalSpec.y, scales.y);
 
         if (px !== null && py !== null) {
           const candidates = generateNudgeCandidates(bounds, collidingBounds, NUDGE_PADDING);
-          const fontSize = bounds.height / Math.max(1, annotation.label.text.split('\n').length);
+          // Read the size off the label, don't back-derive it from the box: `bounds` is
+          // the label ∪ subtitle union, so dividing its height by the *primary* line
+          // count returns roughly double the real size on a subtitled annotation, which
+          // silently doubles the margin slop below.
+          const fontSize = label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
 
           for (const { dx, dy } of candidates) {
-            const newLabelX = annotation.label.x + dx;
-            const newLabelY = annotation.label.y + dy;
-
-            const candidateLabel: ResolvedLabel = {
-              ...annotation.label,
-              x: newLabelX,
-              y: newLabelY,
-            };
-            const candidateBounds = estimateLabelBounds(candidateLabel, measure);
+            const candidateBounds: Rect = { ...bounds, x: bounds.x + dx, y: bounds.y + dy };
 
-            // Check no collisions with any placed label
+            // Check no collisions with any placed block
             const stillCollides = placedBounds.some(
               (pb) => pb.width > 0 && pb.height > 0 && detectCollision(candidateBounds, pb),
             );
@@ -197,17 +269,7 @@ export function resolveAnnotationCollisions(
               labelCenterY <= chartArea.y + chartArea.height + fontSize;
 
             if (inBounds) {
-              annotation.label = {
-                ...annotation.label,
-                x: newLabelX,
-                y: newLabelY,
-                bounds: candidateBounds,
-                connector: recomputeConnector(
-                  { ...annotation.label, x: newLabelX, y: newLabelY },
-                  px,
-                  py,
-                ),
-              };
+              moveAnnotationBy(annotation, label, dx, dy, measure);
               break;
             }
           }
@@ -216,7 +278,7 @@ export function resolveAnnotationCollisions(
     }
 
     // Add this annotation's final bounds to the placed list
-    placedBounds.push(estimateLabelBounds(annotation.label, measure));
+    placedBounds.push(annotation.bounds ?? annotationBlockBounds(annotation, label, measure));
   }
 }
 
@@ -235,7 +297,8 @@ export function clampAnnotationsToBounds(
   for (const annotation of annotations) {
     if (annotation.type !== 'text' || !annotation.label) continue;
 
-    const bounds = estimateLabelBounds(annotation.label, measure);
+    const label = annotation.label;
+    const bounds = annotation.bounds ?? annotationBlockBounds(annotation, label, measure);
     let dx = 0;
     let dy = 0;
 
@@ -258,23 +321,6 @@ export function clampAnnotationsToBounds(
 
     if (dx === 0 && dy === 0) continue;
 
-    const newX = annotation.label.x + dx;
-    const newY = annotation.label.y + dy;
-
-    const connector = annotation.label.connector;
-    const newBounds = estimateLabelBounds({ ...annotation.label, x: newX, y: newY }, measure);
-    annotation.label = {
-      ...annotation.label,
-      x: newX,
-      y: newY,
-      bounds: newBounds,
-      connector: connector
-        ? recomputeConnector(
-            { ...annotation.label, x: newX, y: newY },
-            connector.to.x,
-            connector.to.y,
-          )
-        : undefined,
-    };
+    moveAnnotationBy(annotation, label, dx, dy, measure);
   }
 }