@opendata-ai/openchart-vanilla 6.5.1 → 6.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "6.5.1",
+  "version": "6.5.2",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "6.5.1",
-    "@opendata-ai/openchart-engine": "6.5.1",
+    "@opendata-ai/openchart-core": "6.5.2",
+    "@opendata-ai/openchart-engine": "6.5.2",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/animation.ts

@@ -23,7 +23,7 @@ export function cancelAnimations(svg: SVGElement | null): void {
  * rather than animationend events, because animationend fires per-element and the first
  * element to finish would prematurely kill staggered animations still in progress.
  */
-export function setupAnimationCleanup(svg: SVGElement): () => void {
+export function setupAnimationCleanup(svg: SVGElement, onComplete?: () => void): () => void {
   // Read the animation timing from the CSS custom properties set by the renderer
   const style = svg.style;
   const duration = parseFloat(style.getPropertyValue('--oc-animation-duration')) || 600;
@@ -39,6 +39,7 @@ export function setupAnimationCleanup(svg: SVGElement): () => void {
 
   const timer = setTimeout(() => {
     svg.classList.remove('oc-animate');
+    onComplete?.();
   }, totalTime);
 
   return () => {

package/src/mount.ts

@@ -1801,6 +1801,7 @@ export function createChart(
   // Animation state
   let isFirstRender = true;
   let cleanupAnimations: (() => void) | null = null;
+  let pendingResize = false;
 
   // Selection and text editing state
   let selectedElement: ElementRef | null = options?.selectedElement ?? null;
@@ -2307,8 +2308,17 @@ export function createChart(
     }
 
     // Set up animation cleanup on first render only.
+    // onComplete fires when animations finish naturally (not on cancellation/destroy).
+    // It nulls out cleanupAnimations so resizes work after the animation window,
+    // and replays any resize that was skipped mid-animation.
     if (shouldAnimate && svgElement) {
-      cleanupAnimations = setupAnimationCleanup(svgElement);
+      cleanupAnimations = setupAnimationCleanup(svgElement, () => {
+        cleanupAnimations = null;
+        if (pendingResize) {
+          pendingResize = false;
+          resize();
+        }
+      });
     }
     if (isFirstRender) {
       isFirstRender = false;
@@ -2328,10 +2338,12 @@ export function createChart(
     if (destroyed) return;
     // Skip resize during entrance animation. The resize observer fires
     // immediately when the container first enters DOM layout, and re-rendering
-    // would destroy the animated SVG. This also blocks genuine resizes during
-    // the animation window (~1s), but catches up on the next resize event
-    // after the cleanup timeout fires.
-    if (cleanupAnimations) return;
+    // would destroy the animated SVG. Resizes during this window are queued
+    // and replayed once the animation completes via the onComplete callback.
+    if (cleanupAnimations) {
+      pendingResize = true;
+      return;
+    }
     render();
   }
 
@@ -2370,10 +2382,11 @@ export function createChart(
     if (destroyed) return;
     destroyed = true;
 
-    // Cancel entrance animations
+    // Cancel entrance animations (cancellation does not fire onComplete)
     if (cleanupAnimations) {
       cleanupAnimations();
       cleanupAnimations = null;
+      pendingResize = false;
     }
     cancelAnimations(svgElement);
 

package/src/svg-renderer.ts

@@ -901,38 +901,7 @@ function renderAnnotation(parent: SVGElement, annotation: ResolvedAnnotation, in
     // Render connector first (behind the label text)
     if (annotation.label.connector) {
       const c = annotation.label.connector;
-      if (c.style === 'caret') {
-        // Small directional chevron centered in the gap between the label
-        // text and the data mark, pointing toward the data.
-        const pointsDown = c.to.y > c.from.y;
-        const caretSize = 4;
-        // c.from.y is near the text baseline, not the visual bottom.
-        // Estimate the text bottom from the label's line count and font size.
-        const labelLines = annotation.label.text.split('\n');
-        const labelFontSize = annotation.label.style.fontSize ?? 12;
-        const labelLineHeight = labelFontSize * (annotation.label.style.lineHeight ?? 1.3);
-        const textBottom =
-          annotation.label.y + (labelLines.length - 1) * labelLineHeight + labelFontSize * 0.25;
-        const textTop = annotation.label.y - labelFontSize;
-        // Center caret in the gap between text edge and data point
-        const gapEdge = pointsDown ? textBottom : textTop;
-        const midY = (gapEdge + c.to.y) / 2;
-        const tipX = c.to.x;
-        const tipY = pointsDown ? midY + caretSize / 2 : midY - caretSize / 2;
-        const baseY = pointsDown ? tipY - caretSize : tipY + caretSize;
-        const path = createSVGElement('path');
-        path.setAttribute('class', 'oc-annotation-connector');
-        setAttrs(path, {
-          d: `M${tipX - caretSize},${baseY} L${tipX},${tipY} L${tipX + caretSize},${baseY}`,
-          fill: 'none',
-          stroke: c.stroke,
-          'stroke-width': 1.5,
-          'stroke-opacity': 0.4,
-          'stroke-linecap': 'round',
-          'stroke-linejoin': 'round',
-        });
-        g.appendChild(path);
-      } else if (c.style === 'curve') {
+      if (c.style === 'curve') {
         renderCurvedArrow(g, c.from, c.to, c.stroke);
       } else {
         const connector = createSVGElement('line');