fix(PrintControl): make DPI scale the export in fit mode (#93)

In the default 'fit' page mode the export canvas was always the on-screen
map canvas size, so changing the DPI had no effect on the output — the
exported image (and its file size) was identical regardless of the chosen
DPI, even though the DPI control stayed enabled.

Treat DPI as a resolution multiplier relative to the 96 DPI baseline in fit
mode (pageW = baseW * dpi / 96), matching how paper presets already scale,
and report the chosen density in the PNG/JPEG/PDF/SVG metadata via
_effectiveDpi(). The physical size stays the base size at 96 DPI, so only
the pixel count — and therefore the file size — grows with DPI.

Bumps version to 0.20.1.

Author: giswqs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maplibre-gl-components",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "Legend, colorbar, and HTML control components for MapLibre GL JS maps",
   "type": "module",
   "main": "./dist/index.cjs",

src/lib/core/PrintControl.ts

@@ -953,13 +953,12 @@ export class PrintControl implements IControl {
 
   /**
    * Resolve the DPI used for physical sizing (PDF points, SVG inches, raster
-   * metadata). `dpi` is ignored in the legacy `'fit'` page mode, so a fixed
-   * 96 DPI is used there to keep that output deterministic.
+   * metadata). Applies to every page mode — including `'fit'`, where the DPI
+   * scales the export resolution — so viewers report the chosen density.
    *
    * @returns The effective dots-per-inch.
    */
   private _effectiveDpi(): number {
-    if (this._state.pageSize === "fit") return 96;
     return this._state.dpi > 0 ? this._state.dpi : 96;
   }
 
@@ -1637,21 +1636,28 @@ export class PrintControl implements IControl {
     const mapW = mapCanvas.width;
     const mapH = mapCanvas.height;
 
-    // Legacy 'fit' mode: page is the current canvas (or Custom width/height),
-    // and the map is stretched to fill it, preserving historical behavior.
+    // 'fit' mode: the page is the current canvas (or Custom width/height), with
+    // the map stretched to fill it. `dpi` acts as a resolution multiplier
+    // relative to the 96 DPI baseline, so a higher DPI yields a larger,
+    // higher-resolution export (the map is scaled up from the canvas, matching
+    // the paper-preset behavior). The physical size stays the base size at
+    // 96 DPI, so only the pixel count — and therefore the file size — grows.
     if (this._state.pageSize === "fit") {
-      const pageW = this._state.width || mapW;
-      const pageH = this._state.height || mapH;
+      const baseW = this._state.width || mapW;
+      const baseH = this._state.height || mapH;
+      const dpi = this._state.dpi > 0 ? this._state.dpi : 96;
+      const dpiScale = dpi / 96;
+      const pageW = Math.max(1, Math.round(baseW * dpiScale));
+      const pageH = Math.max(1, Math.round(baseH * dpiScale));
       return {
         pageW,
         pageH,
         content: { x: 0, y: 0, w: pageW, h: pageH },
         mapDest: { x: 0, y: 0, w: pageW, h: pageH },
         scaleX: mapW > 0 ? pageW / mapW : 1,
         clip: false,
-        // dpi is ignored in 'fit' mode, so physical sizing uses a fixed 96 DPI.
-        pageWidthIn: pageW / 96,
-        pageHeightIn: pageH / 96,
+        pageWidthIn: baseW / 96,
+        pageHeightIn: baseH / 96,
       };
     }
 

src/lib/core/types.ts

@@ -3212,8 +3212,9 @@ export interface PrintControlOptions {
   orientation?: PrintOrientation;
   /**
    * Output resolution in dots per inch. Combined with a paper `pageSize` it
-   * determines the export pixel dimensions (pixels = inches x dpi). Ignored
-   * when `pageSize` is `'fit'`. Default: 96.
+   * determines the export pixel dimensions (pixels = inches x dpi). In `'fit'`
+   * mode it scales the export resolution relative to the 96 DPI baseline (a
+   * higher DPI produces a larger, higher-resolution image). Default: 96.
    */
   dpi?: number;
   /** Page margin in points (1/72 inch) around the map. Ignored for `'fit'`. Default: 0. */