fix(legend): draw proportional size ramps with the layer's marker (#1722)

* fix(legend): draw proportional size ramps with the layer's marker

A point layer with both a custom marker and proportional sizing was
described by two legends that each got half of it right: the Print Layout
legend drew the marker with no size ramp, and the on-map Legend panel drew
a size ramp of plain blue circles with a blank heading chip. Neither
matched what the map renders, and the ramp's symbols were drawn at roughly
half the size the map paints.

Three fixes:

- The on-map legend's `MarkerSwatch` wrapped `markerSvg` in a
  `data:image/svg+xml,...` URL unconditionally, so a marker given as an
  `https:` or `data:` URL (both documented inputs) re-encoded into a broken
  source and rendered blank. The map's own `resolveSvgSource` handles all
  three forms, so it moves to `@geolibre/core` next to `drawMarkerPath` and
  both legends and the sprite baker now share it.

- Proportional size rows in both legends carry the layer's marker, and both
  renderers draw it at the row's size. The map scales the marker sprite
  through `icon-size`, so a circle there advertises a symbol the map never
  draws. Line layers keep their stroke ramp.

- Legend symbols now read at the map's true sizes: the on-map cap rises
  from a 12 px radius to 24 (the style editor's default maximum, so the
  common ramp is 1:1 instead of half scale), and the print legend's swatch
  column and row height grow when an entry carries sized symbols. Ramps
  configured past the cap still scale down as one entry, keeping the map's
  ratios.

Refs #1711

* refactor(print-layout): rename the shadowed swatch callback parameter

* Address CodeRabbit review feedback

- MarkerSwatch: draw the canvas fallback for a custom marker whose SVG
  source does not resolve. The effect returned early for every "custom"
  marker, so an unsupported scheme (pointMarkerSwatch only rejects EMPTY
  markup, not an unresolvable one) rendered an empty canvas — the same
  blank-chip failure this PR set out to fix, reached by another path.
  Gating the early return on a resolved source lets drawMarkerPath trace
  its documented default circle instead.

* Address Claude review feedback

- LegendSwatch: hoist the duplicated swatchScale call into one `scale`
  local, matching how GeometrySwatch just above does it.

- print-layout: a proportional row whose custom SVG has not loaded now
  falls back to the same circle the markerless ramp draws, instead of a
  framed square per step. That was the one path where the "nested boxes
  instead of one growing symbol" look survived the `boxed` flag. The
  outline stays on both fallback shapes: a pale fallback color with no
  outline would vanish against the legend box. Covered by a new test.

Author: giswqs

apps/geolibre-desktop/src/components/legend/LegendSwatch.tsx

@@ -6,7 +6,7 @@
  * Adapted from the GeoLens viewer legend design (Apache-2.0) to GeoLibre's
  * layer model.
  */
-import { drawMarkerPath, type MarkerShape } from "@geolibre/core";
+import { drawMarkerPath, resolveSvgSource, type MarkerShape } from "@geolibre/core";
 import { Image as RasterIcon } from "lucide-react";
 import { useEffect, useRef } from "react";
 import type { LayerSwatchShape } from "../../lib/layer-swatch";
@@ -15,8 +15,17 @@ import type { LegendMarker } from "../../lib/print-layout";
 /** Neutral outline that reads on both light and dark themes. */
 const OUTLINE = "rgba(107,114,128,0.6)";
 
-/** Largest radius / stroke width a proportional legend symbol is drawn at (px). */
-const MAX_SWATCH_RADIUS = 12;
+/**
+ * Largest radius / stroke width a proportional legend symbol is drawn at (px).
+ *
+ * A proportional row's `size` IS the radius the map paints for that value (and,
+ * for markers, half the sprite's on-screen width — see `markerIconSizeValue` in
+ * `@geolibre/map`), so below the cap the legend symbol is drawn at exactly the
+ * size the reader sees on the map. The radius cap matches the style editor's
+ * default max radius (24) so the common ramp is 1:1 rather than shrunk to
+ * roughly half scale; ramps configured past it scale down as one entry.
+ */
+const MAX_SWATCH_RADIUS = 24;
 const MAX_SWATCH_STROKE = 8;
 
 /**
@@ -111,50 +120,89 @@ export function GeometrySwatch({
   );
 }
 
+/** Chip edge length for a marker with no proportional size (px). */
+const MARKER_CHIP_SIZE = 14;
+
 /**
  * A point-marker preview: built-in shapes are traced with the same
  * {@link drawMarkerPath} the map's sprite baker uses, so the legend chip and
- * the on-map marker cannot disagree; custom SVG markers render as an image.
+ * the on-map marker cannot disagree; custom SVG markers render as an image
+ * whose source is resolved by the shared {@link resolveSvgSource} — inline
+ * markup, a `data:` URL, and an `https:` URL are all valid `markerSvg` inputs,
+ * and re-encoding the latter two as data URLs left the chip blank.
+ *
+ * `size` (a proportional row's radius) and `maxSize` (the entry's largest)
+ * scale the marker exactly like {@link GeometrySwatch} scales a circle, so a
+ * marker layer's size ramp reads at the map's true symbol widths.
  */
-export function MarkerSwatch({ marker, opacity = 1 }: { marker: LegendMarker; opacity?: number }) {
+export function MarkerSwatch({
+  marker,
+  size,
+  maxSize,
+  opacity = 1,
+}: {
+  marker: LegendMarker;
+  size?: number;
+  maxSize?: number;
+  opacity?: number;
+}) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const style = opacity < 1 ? { opacity } : undefined;
+  // The map draws a marker at the diameter its proportional radius spans, so
+  // the chip box is 2×radius after the entry's shared fit-to-legend scale.
+  const scale = size !== undefined ? swatchScale(maxSize, size, MAX_SWATCH_RADIUS) : 1;
+  const box = size !== undefined ? Math.max(4, Math.round(size * scale * 2)) : MARKER_CHIP_SIZE;
+  // One column width per entry, so labels stay aligned when rows differ in size.
+  const boxWidth =
+    size !== undefined
+      ? Math.max(box, Math.round(Math.max(maxSize ?? size, size) * scale * 2))
+      : MARKER_CHIP_SIZE;
+
+  const svgSource = marker.shape === "custom" ? resolveSvgSource(marker.svg ?? "") : null;
 
   useEffect(() => {
-    if (marker.shape === "custom") return;
+    // A custom marker whose source resolved renders as an <img> below; one that
+    // did not (an unsupported scheme — `pointMarkerSwatch` only rejects EMPTY
+    // markup) falls through to this canvas, where drawMarkerPath traces its
+    // documented default circle rather than leaving the chip blank.
+    if (marker.shape === "custom" && svgSource) return;
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
     if (!canvas || !ctx) return;
-    const size = canvas.width;
-    ctx.clearRect(0, 0, size, size);
-    drawMarkerPath(ctx, marker.shape as MarkerShape, size);
+    const edge = canvas.width;
+    ctx.clearRect(0, 0, edge, edge);
+    drawMarkerPath(ctx, marker.shape as MarkerShape, edge);
     ctx.fillStyle = marker.color;
     ctx.fill();
     ctx.strokeStyle = OUTLINE;
     ctx.lineWidth = 1;
     ctx.stroke();
-  }, [marker]);
+  }, [marker, box, svgSource]);
 
-  if (marker.shape === "custom" && marker.svg) {
+  if (marker.shape === "custom" && svgSource) {
     return (
-      <img
+      <span
         aria-hidden="true"
-        className="h-3.5 w-3.5 shrink-0 object-contain"
-        style={style}
-        alt=""
-        src={`data:image/svg+xml;utf8,${encodeURIComponent(marker.svg)}`}
-      />
+        className="flex shrink-0 items-center justify-center"
+        style={{ width: boxWidth, ...style }}
+      >
+        <img
+          className="object-contain"
+          style={{ width: box, height: box }}
+          alt=""
+          src={svgSource}
+        />
+      </span>
     );
   }
   return (
-    <canvas
-      ref={canvasRef}
-      width={14}
-      height={14}
-      className="h-3.5 w-3.5 shrink-0"
-      style={style}
+    <span
       aria-hidden="true"
-    />
+      className="flex shrink-0 items-center justify-center"
+      style={{ width: boxWidth, ...style }}
+    >
+      <canvas ref={canvasRef} width={box} height={box} style={{ width: box, height: box }} />
+    </span>
   );
 }
 

apps/geolibre-desktop/src/components/legend/MapLegendPanel.tsx

@@ -931,7 +931,12 @@ function LegendClassRow({
       )}
       <div className="flex items-center gap-1.5">
         {row.marker ? (
-          <MarkerSwatch marker={row.marker} opacity={entry.opacity} />
+          <MarkerSwatch
+            marker={row.marker}
+            size={row.size}
+            maxSize={maxRowSize > 0 ? maxRowSize : undefined}
+            opacity={entry.opacity}
+          />
         ) : (
           <GeometrySwatch
             shape={row.shape}

apps/geolibre-desktop/src/lib/auto-legend.ts

@@ -457,13 +457,16 @@ function proportionalSizeRows(
   locale: string | undefined,
   /** Field caption for the block, when the entry's own caption names another. */
   caption?: string,
+  /** The layer's point marker, so the ramp shows the symbol the map draws. */
+  marker?: LegendMarker,
 ): RawRow[] {
   const rowShape: LayerSwatchShape = shape === "line" ? "line" : "circle";
   return [0, 0.5, 1].map((ratio, index) => ({
     label: formatLegendNumber(lerp(range.minValue, range.maxValue, ratio), locale),
     color,
     shape: rowShape,
     size: lerp(range.minRadius, range.maxRadius, ratio),
+    ...(marker ? { marker } : {}),
     ...(index === 0 && caption ? { caption } : {}),
   }));
 }
@@ -492,14 +495,20 @@ function sizeClassRows(
   rows: RawRow[],
   stops: VectorStyleStop[],
   range: ProportionalSizeRange,
+  /** The layer's point marker, so the ramp shows the symbol the map draws. */
+  marker?: LegendMarker,
 ): RawRow[] {
   return rows.map((row, index) => {
     const from = Number(stops[index]?.value);
     const to = Number(stops[index + 1]?.value);
     // The top class has no upper bound ("≥ x"): represent it at its lower bound.
     const representative = Number.isFinite(to) ? (from + to) / 2 : from;
     if (!Number.isFinite(representative)) return row;
-    return { ...row, size: proportionalSize(range, representative) };
+    return {
+      ...row,
+      size: proportionalSize(range, representative),
+      ...(marker ? { marker } : {}),
+    };
   });
 }
 
@@ -673,6 +682,11 @@ function vectorParts(
   // sizing on exactly the layers the map actually sizes. Only circles and line
   // strokes carry a size; polygon fills ignore it.
   const sizeRange = shape === "circle" || shape === "line" ? proportionalSizeRange(style) : null;
+  // A marker layer's proportional rows draw the marker (scaled by icon-size on
+  // the map), not a circle, so carry it onto every sized row. Lines never take a
+  // marker. Markers bake ONE sprite from markerColor, so a per-row color is not
+  // something the map renders here — the marker is the faithful symbol.
+  const sizeMarker = shape === "circle" ? pointMarkerSwatch(style)?.marker : undefined;
 
   if ((mode === "graduated" || mode === "categorized") && stops.length > 0) {
     const classProperty = styleValue(style, "vectorStyleProperty");
@@ -683,7 +697,9 @@ function vectorParts(
       sizeRange !== null && mode === "graduated" && sizeRange.property === classProperty;
     return {
       rows: [
-        ...(merged && sizeRange ? sizeClassRows(classRows, stops, sizeRange) : classRows),
+        ...(merged && sizeRange
+          ? sizeClassRows(classRows, stops, sizeRange, sizeMarker)
+          : classRows),
         ...(sizeRange && !merged
           ? proportionalSizeRows(
               sizeRange,
@@ -693,6 +709,7 @@ function vectorParts(
               // The entry caption already names the classified field; say which
               // field this second block sizes by so the two are not confused.
               sizeRange.property === classProperty ? undefined : sizeRange.property,
+              sizeMarker,
             )
           : []),
         ...diagrams,
@@ -715,6 +732,7 @@ function vectorParts(
                 shape,
                 locale,
                 sizeRange.property,
+                sizeMarker,
               )
             : []),
           ...diagrams,
@@ -737,6 +755,7 @@ function vectorParts(
                 shape,
                 locale,
                 sizeRange.property === parts.fieldLabel ? undefined : sizeRange.property,
+                sizeMarker,
               )
             : []),
           ...diagrams,
@@ -751,7 +770,14 @@ function vectorParts(
   // Single symbology: the size ramp IS the classification, so it carries the
   // field caption and replaces the single-swatch heading chip.
   const sizeRows = sizeRange
-    ? proportionalSizeRows(sizeRange, styleValue(style, "fillColor") || NEUTRAL, shape, locale)
+    ? proportionalSizeRows(
+        sizeRange,
+        styleValue(style, "fillColor") || NEUTRAL,
+        shape,
+        locale,
+        undefined,
+        sizeMarker,
+      )
     : [];
   const marker = pointMarkerSwatch(style);
   const headerSwatch = marker

apps/geolibre-desktop/src/lib/print-layout.ts

@@ -1935,6 +1935,11 @@ function drawDataChart(
  * built-in shape recolored to the marker color. Falls back to a plain
  * `fallbackColor` square when a custom SVG has not been (or could not be)
  * preloaded, so the swatch is never blank.
+ *
+ * `boxed` frames a custom SVG so a light or transparent-edged icon still reads
+ * as a bounded swatch. A proportional size ramp passes false: there the varying
+ * icon size IS the information, and a frame around each step makes the rows read
+ * as nested squares instead of one growing symbol.
  */
 function drawLegendMarker(
   ctx: CanvasRenderingContext2D,
@@ -1944,22 +1949,35 @@ function drawLegendMarker(
   size: number,
   fallbackColor: string,
   markerIcons?: ReadonlyMap<string, CanvasImageSource>,
+  boxed = true,
 ): void {
   if (marker.shape === "custom") {
     const icon = marker.svg ? markerIcons?.get(marker.svg) : undefined;
     if (icon) {
       ctx.drawImage(icon, sx, sy, size, size);
-      // Border for parity with every other swatch (built-in shapes, the
-      // fallback square, fill/ramp squares), so a light or transparent-edged
-      // SVG still reads as a bounded swatch.
-      ctx.strokeStyle = BORDER;
-      ctx.strokeRect(sx, sy, size, size);
+      if (boxed) {
+        // Border for parity with every other swatch (built-in shapes, the
+        // fallback square, fill/ramp squares).
+        ctx.strokeStyle = BORDER;
+        ctx.strokeRect(sx, sy, size, size);
+      }
       return;
     }
-    // SVG not available: fall back to a neutral color square.
+    // SVG not available (still loading, or the load failed): fall back to a
+    // neutral shape. A proportional row falls back to the same circle the
+    // markerless ramp draws, so an entry mid-load still reads as one growing
+    // symbol; the outline stays either way, since a pale fallback color would
+    // otherwise vanish against the legend box.
     ctx.fillStyle = fallbackColor || "#999999";
-    ctx.fillRect(sx, sy, size, size);
     ctx.strokeStyle = BORDER;
+    if (!boxed) {
+      ctx.beginPath();
+      ctx.arc(sx + size / 2, sy + size / 2, size / 2, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+      return;
+    }
+    ctx.fillRect(sx, sy, size, size);
     ctx.strokeRect(sx, sy, size, size);
     return;
   }
@@ -1996,8 +2014,16 @@ function drawLegend(
   },
 ): number {
   const pad = unit * 1.4;
-  const rowH = unit * 2.6;
-  const swatch = unit * 2;
+  // Proportional-symbol rows are only as faithful as the box they fit in: a
+  // swatch column sized for a text-height color square crushes a 4 → 24 px ramp
+  // into near-identical dots. When any entry carries sized symbols, the whole
+  // box grows (uniformly, so rows stay evenly spaced) and the ramp reads at
+  // roughly the ratios the map draws.
+  const hasSizedSwatch = entries.some((entry) =>
+    entry.swatches.some((entrySwatch) => entrySwatch.size !== undefined),
+  );
+  const rowH = unit * (hasSizedSwatch ? 3.6 : 2.6);
+  const swatch = unit * (hasSizedSwatch ? 3 : 2);
   const titleSize = unit * 2;
   const labelSize = unit * 1.7;
   const title = opts.title.trim();
@@ -2148,7 +2174,23 @@ function drawLegend(
     const sx = x + pad;
     const sy = cy - swatch * 0.85;
     if (r.marker) {
-      drawLegendMarker(ctx, r.marker, sx, sy, swatch, r.color, opts.markerIcons);
+      // A sized marker row is a proportional symbol: the map scales the sprite
+      // through icon-size, so draw the marker at the same footprint the circle
+      // branch below would use (same center, edge = 2 × radius) rather than at
+      // the fixed swatch box, which would flatten the whole ramp.
+      const edge =
+        r.size !== undefined ? Math.max(unit * 0.7, r.size * rowScale[index]! * 2) : swatch;
+      const inset = (swatch - edge) / 2;
+      drawLegendMarker(
+        ctx,
+        r.marker,
+        sx + inset,
+        sy + inset,
+        edge,
+        r.color,
+        opts.markerIcons,
+        r.size === undefined,
+      );
     } else if (r.size !== undefined && r.color) {
       const radius = Math.max(unit * 0.35, r.size * rowScale[index]!);
       const cx = sx + swatch / 2;