@aiaiai-pt/design-system 0.31.0 → 0.31.1

package/components/MapCluster.svelte

@@ -15,7 +15,7 @@
 <script>
   import { fromLonLat } from 'ol/proj.js';
   import { boundingExtent } from 'ol/extent.js';
-  import { createTileLayer, createMapStyles, createOverlayLayers, watchTheme, renderMapError } from './map-utils.js';
+  import { createTileLayer, createMapStyles, createOverlayLayers, clusterTooltipLabel, watchTheme, renderMapError } from './map-utils.js';
 
   let {
     /** @type {{ id: string, lon: number, lat: number, label?: string, [key: string]: any }[]} */
@@ -286,21 +286,21 @@
           return;
         }
 
-        const clustered = feature.get('features');
         if (container) container.style.cursor = 'pointer';
 
-        if (clustered?.length === 1) {
-          const data = clustered[0].get('markerData');
-          if (data?.label) {
-            tooltipEl.textContent = data.label;
-            tooltipEl.style.display = 'block';
-            tooltipOverlay.setPosition(feature.getGeometry()?.getCoordinates());
-          }
-        } else {
-          tooltipEl.textContent = `${clustered?.length ?? 0} items`;
-          tooltipEl.style.display = 'block';
-          tooltipOverlay.setPosition(feature.getGeometry()?.getCoordinates());
+        const label = clusterTooltipLabel(feature);
+        if (label == null) {
+          tooltipEl.style.display = 'none';
+          return;
         }
+        tooltipEl.textContent = label;
+        tooltipEl.style.display = 'block';
+        // Cluster features carry a Point geometry; raw overlay (file/WFS)
+        // features can be polygons/lines, so anchor those at the pointer.
+        const coords = feature.get('features') === undefined
+          ? evt.coordinate
+          : feature.getGeometry()?.getCoordinates();
+        tooltipOverlay.setPosition(coords);
       });
 
       // `popup` opens the anchored ficha-resumo overlay; otherwise `onclick`

package/components/map-utils.js

@@ -374,7 +374,8 @@ export function getHeatmapGradient(el) {
  */
 export function geoStylerToFlat(style) {
   if (!style || typeof style !== "object") return {};
-  if (!Array.isArray(style.rules)) return /** @type {OverlayLayerStyle} */ (style);
+  if (!Array.isArray(style.rules))
+    return /** @type {OverlayLayerStyle} */ (style);
   const sym = style.rules?.[0]?.symbolizers?.[0];
   if (!sym || typeof sym !== "object") return {};
   /** @type {OverlayLayerStyle} */
@@ -389,8 +390,10 @@ export function geoStylerToFlat(style) {
     if (typeof sym.width === "number") flat.strokeWidth = sym.width;
   } else if (sym.kind === "Fill") {
     if (typeof sym.color === "string") flat.fillColor = sym.color;
-    if (typeof sym.outlineColor === "string") flat.strokeColor = sym.outlineColor;
-    if (typeof sym.outlineWidth === "number") flat.strokeWidth = sym.outlineWidth;
+    if (typeof sym.outlineColor === "string")
+      flat.strokeColor = sym.outlineColor;
+    if (typeof sym.outlineWidth === "number")
+      flat.strokeWidth = sym.outlineWidth;
   }
   return flat;
 }
@@ -449,7 +452,9 @@ export async function createOverlayLayers(defs, styles) {
     const point = new Style({
       image: new CircleStyle({
         radius: flat.pointRadius ?? 6,
-        fill: new Fill({ color: flat.pointColor ?? flat.strokeColor ?? "#3366cc" }),
+        fill: new Fill({
+          color: flat.pointColor ?? flat.strokeColor ?? "#3366cc",
+        }),
         stroke,
       }),
     });
@@ -484,6 +489,39 @@ export async function createOverlayLayers(defs, styles) {
     });
 }
 
+// ─── Hover tooltip label ─────────────────────────────────────────
+
+/**
+ * Decide the hover-tooltip text for a feature under the pointer.
+ *
+ * Markers passed via the `markers` prop go through an OL Cluster source, so
+ * each rendered feature carries a `features` collection: one entry → that
+ * marker's label; many → "N items". Features served from an overlay `layers`
+ * def (a file/WFS source) are added to a plain VectorSource and have NO
+ * `features` collection (`undefined`) — for those, fall back to the feature's
+ * own descriptive props rather than rendering the misleading "0 items".
+ *
+ * @param {{ get: (key: string) => any }} feature — an OL Feature (or any
+ *   object exposing `.get(key)`).
+ * @returns {string | null} the label to show, or null to hide the tooltip.
+ */
+export function clusterTooltipLabel(feature) {
+  const clustered = feature.get("features");
+  if (clustered === undefined) {
+    const label =
+      feature.get("name") ??
+      feature.get("title") ??
+      feature.get("label") ??
+      feature.get("markerData")?.label;
+    return label != null && String(label) !== "" ? String(label) : null;
+  }
+  if (clustered.length === 1) {
+    const data = clustered[0].get("markerData");
+    return data?.label ?? null;
+  }
+  return `${clustered.length} items`;
+}
+
 // ─── Boundary (#187 D-e prep) ────────────────────────────────────
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",