@opendata-ai/openchart-vanilla 8.0.0-rc.3 → 8.0.0-rc.5

package/dist/{chunk-SBIGNRAH.js → chunk-XZZGLZDA.js}

@@ -552,6 +552,7 @@ function setupTableAnimationCleanup(wrapper) {
 }
 
 // src/map-camera.ts
+var FOCUS_DIM_OPACITY = 0.25;
 function focusTargetForFeatures(layout, ids, padding = 16) {
   const idSet = new Set(ids.map(String));
   let minX = Infinity;
@@ -594,7 +595,6 @@ function applyMapCamera(svg, camera, layout) {
       const baseSW = Number(p.getAttribute("data-base-stroke-width") ?? 1);
       p.setAttribute("r", String(baseR / camera.k));
       p.setAttribute("stroke-width", String(baseSW / camera.k));
-      p.setAttribute("vector-effect", "non-scaling-stroke");
     }
   } else {
     cameraGroup.removeAttribute("transform");
@@ -736,7 +736,7 @@ function renderBorders(parent, borders) {
   }
   parent.appendChild(g);
 }
-function renderFeatures(parent, features, animation, staggerBudget = 0) {
+function renderFeatures(parent, features, animation, staggerBudget = 0, focusIds) {
   const g = createSVGElement2("g");
   g.setAttribute("class", "oc-map-features");
   g.setAttribute("role", "list");
@@ -779,12 +779,19 @@ function renderFeatures(parent, features, animation, staggerBudget = 0) {
     if (feature.aria?.label) {
       path.setAttribute("aria-label", feature.aria.label);
     }
+    const dimmed = focusIds ? !focusIds.has(String(feature.id)) : false;
+    const s = path.style;
+    if (dimmed) {
+      s.setProperty("opacity", String(FOCUS_DIM_OPACITY));
+    }
     if (!bulk && animation?.enter) {
       const idx = feature.animationIndex ?? i;
       path.setAttribute("data-animation-index", String(idx));
-      const s = path.style;
       s.setProperty("--oc-mark-index", String(idx));
       s.setProperty("--oc-feature-fill", feature.fill);
+      if (dimmed) {
+        s.setProperty("--oc-feature-target-opacity", String(FOCUS_DIM_OPACITY));
+      }
       if (staggerBudget > 0 && maxIdx > 0) {
         s.setProperty("--oc-map-delay", `${shuffledDelays[i]}ms`);
       }
@@ -797,16 +804,15 @@ function renderPointMarks(parent, points, animation) {
   if (points.length === 0) return;
   const g = createSVGElement2("g");
   g.setAttribute("class", "oc-map-points");
-  g.setAttribute("role", "list");
   for (const pt of points) {
     const circle = createSVGElement2("circle");
     circle.setAttribute("class", "oc-map-point");
-    circle.setAttribute("role", "listitem");
     setAttrs2(circle, {
       cx: pt.cx,
       cy: pt.cy,
       r: pt.r,
       fill: pt.fill,
+      "fill-opacity": pt.fillOpacity,
       stroke: pt.stroke,
       "stroke-width": pt.strokeWidth
     });
@@ -817,10 +823,9 @@ function renderPointMarks(parent, points, animation) {
       circle.setAttribute("aria-label", pt.aria.label);
     }
     if (animation?.enter) {
-      circle.style.setProperty(
-        "--oc-mark-index",
-        String(pt.animationIndex)
-      );
+      const s = circle.style;
+      s.setProperty("--oc-mark-index", String(pt.animationIndex));
+      s.setProperty("transform-origin", `${pt.cx}px ${pt.cy}px`);
     }
     g.appendChild(circle);
   }
@@ -856,28 +861,64 @@ function renderMapSVG(layout, opts) {
   }
   const defs = createSVGElement2("defs");
   svg.appendChild(defs);
-  renderChrome(svg, layout);
   const mapGroup = createSVGElement2("g");
   mapGroup.setAttribute("class", "oc-map-group");
   mapGroup.setAttribute("transform", `translate(${layout.area.x},${layout.area.y})`);
   const cameraGroup = createSVGElement2("g");
   cameraGroup.setAttribute("class", "oc-map-camera");
   cameraGroup.setAttribute("data-oc-map-camera", "");
-  renderFeatures(cameraGroup, features, animate ? animation : void 0, mapStaggerBudget);
+  const focusIdSet = layout.focus ? new Set(layout.focus.ids.map(String)) : void 0;
+  renderFeatures(
+    cameraGroup,
+    features,
+    animate ? animation : void 0,
+    mapStaggerBudget,
+    focusIdSet
+  );
   renderBorders(cameraGroup, borders);
   renderPointMarks(cameraGroup, layout.pointMarks, animate ? animation : void 0);
   mapGroup.appendChild(cameraGroup);
   svg.appendChild(mapGroup);
+  renderChrome(svg, layout);
   if (layout.continuousLegend) {
     renderLegend(svg, layout.continuousLegend);
   } else if (layout.categoricalLegend) {
     renderLegend(svg, layout.categoricalLegend);
   }
-  if (layout.pointCategoricalLegend) {
-    renderLegend(svg, layout.pointCategoricalLegend);
-  }
-  if (layout.pointContinuousLegend) {
-    renderLegend(svg, layout.pointContinuousLegend);
+  const ptLegend = layout.pointCategoricalLegend ?? layout.pointContinuousLegend;
+  if (ptLegend) {
+    const isDark = layout.theme.isDark;
+    const padX = 10;
+    const padY = 8;
+    const swatchSize = "swatchSize" in ptLegend ? ptLegend.swatchSize : 10;
+    const swatchGap = "swatchGap" in ptLegend ? ptLegend.swatchGap : 6;
+    const entryGap = "entryGap" in ptLegend ? ptLegend.entryGap : 16;
+    let contentWidth = ptLegend.bounds.width;
+    if ("entries" in ptLegend && ptLegend.entries) {
+      const cat = ptLegend;
+      if (cat && cat.entries.length > 0) {
+        const fontSize = ptLegend.labelStyle.fontSize;
+        let w = 0;
+        for (const entry of cat.entries) {
+          w += swatchSize + swatchGap + entry.label.length * fontSize * 0.6 + entryGap;
+        }
+        w -= entryGap;
+        contentWidth = Math.min(w, ptLegend.bounds.width);
+      }
+    }
+    const contentCenterY = ptLegend.bounds.y + swatchSize / 2;
+    const bgHeight = swatchSize + padY * 2;
+    const bg = createSVGElement2("rect");
+    setAttrs2(bg, {
+      x: ptLegend.bounds.x - padX,
+      y: contentCenterY - bgHeight / 2,
+      width: contentWidth + padX * 2,
+      height: bgHeight,
+      rx: 4,
+      fill: isDark ? "rgba(24,24,27,0.9)" : "rgba(255,255,255,0.9)"
+    });
+    svg.appendChild(bg);
+    renderLegend(svg, ptLegend);
   }
   if (watermark) {
     renderWatermark(svg, layout);
@@ -1456,6 +1497,12 @@ function scheduleFontReload(fontFamily, isAlive, onReady) {
 }
 
 // src/map-mount.ts
+function focusSignature(focus) {
+  if (!focus) return null;
+  const t = focus.target;
+  const ids = focus.ids.map(String).sort().join(",");
+  return `${ids}|${Math.round(t.x)},${Math.round(t.y)},${Math.round(t.width)},${Math.round(t.height)},${t.padding}`;
+}
 function prefersReducedMotion() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
   try {
@@ -1540,6 +1587,7 @@ function createMap(container, spec, options) {
         }
         if (feature) {
           options?.onMarkHover?.({
+            kind: "feature",
             id: feature.id,
             name: feature.name,
             data: feature.data
@@ -1564,6 +1612,7 @@ function createMap(container, spec, options) {
       const handleClick = () => {
         if (feature) {
           options?.onMarkClick?.({
+            kind: "feature",
             id: feature.id,
             name: feature.name,
             data: feature.data
@@ -1600,8 +1649,8 @@ function createMap(container, spec, options) {
         }
         if (pointMark) {
           options?.onMarkHover?.({
+            kind: "point",
             id: pointKey,
-            name: pointKey,
             data: pointMark.data
           });
         }
@@ -1624,8 +1673,8 @@ function createMap(container, spec, options) {
       const handlePointClick = () => {
         if (pointMark) {
           options?.onMarkClick?.({
+            kind: "point",
             id: pointKey,
-            name: pointKey,
             data: pointMark.data
           });
         }
@@ -1708,7 +1757,7 @@ function createMap(container, spec, options) {
       const fid = el.getAttribute("data-feature-id");
       el.style.setProperty(
         "opacity",
-        fid && focusSet.has(fid) ? "1" : "0.25"
+        fid && focusSet.has(fid) ? "1" : String(FOCUS_DIM_OPACITY)
       );
     }
   }
@@ -1721,15 +1770,17 @@ function createMap(container, spec, options) {
       fillTransitionHandle.cancel();
       fillTransitionHandle = null;
     }
-    if (svgElement) {
+    const oldSvg = svgElement;
+    const newSvg = renderMapSVG(currentLayout, { animate });
+    if (oldSvg) {
       if (cleanupTooltipEvents) {
         cleanupTooltipEvents();
         cleanupTooltipEvents = null;
       }
-      svgElement.remove();
+      container.replaceChild(newSvg, oldSvg);
+    } else {
+      container.appendChild(newSvg);
     }
-    const newSvg = renderMapSVG(currentLayout, { animate });
-    container.appendChild(newSvg);
     svgElement = newSvg;
     cleanupTooltipEvents = wireTooltipAndInteraction(newSvg, currentLayout);
     if (options?.tooltip !== false) {
@@ -1778,7 +1829,7 @@ function createMap(container, spec, options) {
     const canAnimate = !animationCleanup && !prefersReducedMotion();
     const prevFills = canAnimate ? captureFeatureFills(svgElement) : null;
     const prevFocusIds = currentFocusIds ? currentFocusIds.map(String).sort().join(",") : null;
-    const prevFocusPadding = currentLayout.focus?.target.padding ?? null;
+    const prevFocusSig = focusSignature(currentLayout.focus);
     currentLayout = compile();
     render();
     if (canAnimate && prevFills && prevFills.size > 0 && svgElement && currentLayout.animation?.update) {
@@ -1787,9 +1838,8 @@ function createMap(container, spec, options) {
       });
     }
     const nextFocus = currentLayout.focus;
-    const nextFocusIds = nextFocus ? nextFocus.ids.map(String).sort().join(",") : null;
-    const nextFocusPadding = nextFocus?.target.padding ?? null;
-    if (nextFocusIds !== prevFocusIds || nextFocusPadding !== prevFocusPadding) {
+    const nextFocusSig = focusSignature(nextFocus);
+    if (nextFocusSig !== prevFocusSig) {
       if (nextFocus) {
         currentFocusIds = [...nextFocus.ids];
         const cam = cameraForTarget(currentLayout, nextFocus.target);
@@ -6626,4 +6676,4 @@ export {
   createYouDrawIt,
   createChart
 };
-//# sourceMappingURL=chunk-SBIGNRAH.js.map
+//# sourceMappingURL=chunk-XZZGLZDA.js.map