refine-scale

Author: alexfauquette

docs/data/charts/map/ProjectionMapShape.js

@@ -111,6 +111,7 @@ export default function ProjectionMapShape() {
           {...(!autoRotation && { rotate: rotation })}
           {...(!autoTranslation && { translate: translation })}
           {...(!autoScale && { scale })}
+          zoom
           height={360}
         >
           <ChartsSurface>

docs/data/charts/map/ProjectionMapShape.tsx

@@ -123,6 +123,7 @@ export default function ProjectionMapShape() {
           {...(!autoRotation && { rotate: rotation })}
           {...(!autoTranslation && { translate: translation })}
           {...(!autoScale && { scale })}
+          zoom
           height={360}
         >
           <ChartsSurface>

docs/data/charts/map/ZoomMap.js

@@ -34,6 +34,7 @@ export default function ZoomMap() {
           geoData={countries}
           projection="naturalEarth1"
           height={360}
+          zoom
           series={[
             {
               type: 'mapShape',

packages/x-charts-premium/src/internals/plugins/useGeoProjection/useGeoProjection.selectors.ts

@@ -63,6 +63,35 @@ const PROJECTION_FACTORIES: Record<D3NamedProjection, (() => GeoProjection) | un
 const isConicProjection = (projection: GeoProjection): projection is GeoConicProjection => {
   return 'parallels' in projection && typeof projection.parallels === 'function';
 };
+
+/**
+ * Resolves a raw projection input (a d3-geo name like `'mercator'`, or a `GeoProjection` instance)
+ * into a usable `GeoProjection`. Named projections are instantiated from their factory and, when
+ * conic, configured with `parallels`. Returns `null` for an unknown name.
+ */
+const resolveProjection = (
+  projectionInput: GeoProjectionInput,
+  parallels: [number, number],
+): GeoProjection | null => {
+  if (typeof projectionInput !== 'string') {
+    return projectionInput;
+  }
+  const factory = PROJECTION_FACTORIES[projectionInput];
+  if (!factory) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(
+        `MUI X Charts: Unknown projection name '${projectionInput}'. ` +
+          `Expected one of: ${Object.keys(PROJECTION_FACTORIES).join(', ')}.`,
+      );
+    }
+    return null;
+  }
+  const projection = factory();
+  if (isConicProjection(projection)) {
+    projection.parallels(parallels);
+  }
+  return projection;
+};
 export const selectorChartGeoProjectionState = (
   state: GeoChartState,
 ): UseGeoProjectionState['geoProjection'] | undefined => state.geoProjection;
@@ -85,22 +114,16 @@ export const selectorChartZoomLevel = createSelector(
   selectorChartGeoProjectionZoomState,
   (geoProjectionZoom): number | null => geoProjectionZoom?.zoomLevel ?? 1,
 );
-
-const selectorChartRotate = createSelectorMemoized(
-  selectorChartGeoProjectionState,
-  (geoProjection): [number, number] | null => geoProjection?.rotate ?? null,
-);
-
 const selectorChartCenter = createSelectorMemoized(
   selectorChartGeoProjectionZoomState,
   (geoProjectionZoom): [number, number] | null => geoProjectionZoom?.center ?? [0, 0],
 );
 
 const selectorChartParallels = createSelectorMemoized(
   selectorChartGeoProjectionState,
-  selectorChartRotate,
-  (geoProjection, rotate): [number, number] =>
-    geoProjection?.parallels ?? (rotate ? [rotate[1] - 15, rotate[1] + 15] : [30, 30]),
+  selectorChartCenter,
+  (geoProjection, center): [number, number] =>
+    geoProjection?.parallels ?? (center ? [-center[1] - 15, -center[1] + 15] : [30, 30]),
 );
 /**
  * Map a feature's `properties.name` to its index in `geoData.features`,
@@ -131,6 +154,28 @@ export const selectorChartGeoFeatureIndexesByName = createSelectorMemoized(
   },
 );
 
+const selectorFitScale = createSelector(
+  selectorChartRawGeoData,
+  selectorChartDrawingArea,
+  selectorChartRawProjection,
+  selectorChartParallels,
+  (geoData, drawingArea, projectionInput, parallels): number | null => {
+    if (!geoData || !projectionInput) {
+      return null;
+    }
+    const projection = resolveProjection(projectionInput, parallels);
+    if (!projection) {
+      return null;
+    }
+    const [[x0, y0], [x1, y1]] = geoPath(projection).bounds(geoData);
+    const currentScale = projection.scale();
+    return Math.min(
+      currentScale * (drawingArea.width / (x1 - x0)),
+      currentScale * (drawingArea.height / (y1 - y0)),
+    );
+  },
+);
+
 /**
  * Resolves the raw `projection` input into a ready-to-use `GeoProjection` instance,
  * fitted to the chart's drawing area then zoomed/panned according to the current view.
@@ -147,101 +192,47 @@ export const selectorChartProjection = createSelectorMemoized(
   selectorChartRawProjection,
   selectorChartRawGeoData,
   selectorChartParallels,
-  selectorChartRotate,
   selectorChartCenter,
   selectorChartZoomLevel,
   selectorChartDrawingArea,
+  selectorFitScale,
   (
     projectionInput,
     geoData,
     parallels,
-    rotate,
     center,
     zoomLevel,
     drawingArea,
+    fitScale,
   ): GeoProjection | null => {
     if (!projectionInput) {
       return null;
     }
-    let projection: GeoProjection;
-    if (typeof projectionInput === 'string') {
-      const factory = PROJECTION_FACTORIES[projectionInput];
-      if (!factory) {
-        if (process.env.NODE_ENV !== 'production') {
-          console.error(
-            `MUI X Charts: Unknown projection name '${projectionInput}'. ` +
-              `Expected one of: ${Object.keys(PROJECTION_FACTORIES).join(', ')}.`,
-          );
-        }
-        return null;
-      }
-      projection = factory();
-      if (isConicProjection(projection)) {
-        projection.parallels(parallels);
-      }
-    } else {
-      projection = projectionInput;
+    const projection = resolveProjection(projectionInput, parallels);
+    if (!projection) {
+      return null;
     }
 
-    if (!geoData) {
+    if (!geoData || fitScale == null) {
       return projection;
     }
 
-    if (rotate) {
-      projection.rotate?.(rotate);
+    if (center) {
+      projection.rotate?.([-center[0], -center[1]]);
     }
 
-    const drawingAreaCenter = {
-      x: drawingArea.left + drawingArea.width / 2,
-      y: drawingArea.top + drawingArea.height / 2,
-    };
+    // `fitScale` is the `zoomLevel === 1` reference scale, computed independently in
+    // `selectorFitScale` so it stays stable across pan/zoom transforms.
+    projection.scale(zoomLevel != null && zoomLevel !== 1 ? fitScale * zoomLevel : fitScale);
 
-    // 1. Fit the data to the drawing area — this is the `zoomLevel === 1` reference scale.
+    // Conic projections are positioned via `rotate`; `center` panning is not applied.
     if (isConicProjection(projection)) {
-      const [[x0, y0], [x1, y1]] = geoPath(projection).bounds(geoData);
-      const currentScale = projection.scale();
-      const fitScale = Math.min(
-        currentScale * (drawingArea.width / (x1 - x0)),
-        currentScale * (drawingArea.height / (y1 - y0)),
-      );
-      projection.scale(fitScale);
-      // Conic projections are positioned via `rotate`; `center` panning is not applied.
-      if (zoomLevel != null && zoomLevel !== 1) {
-        projection.scale(fitScale * zoomLevel);
-      }
       return projection;
     }
-
-    projection.fitExtent?.(
-      [
-        [drawingArea.left, drawingArea.top],
-        [drawingArea.left + drawingArea.width, drawingArea.top + drawingArea.height],
-      ],
-      geoData,
-    );
-    const fitScale = projection.scale();
-
-    // The fitted projection centers the data: invert the drawing-area center to get the
-    // default geographic center used when `center` is not set.
-    const targetCenter =
-      center ?? projection.invert?.([drawingAreaCenter.x, drawingAreaCenter.y]) ?? null;
-
-    // 2. Apply the zoom level relative to the fit scale.
-    if (zoomLevel != null && zoomLevel !== 1) {
-      projection.scale(fitScale * zoomLevel);
-    }
-
-    // 3. Offset the translation so `targetCenter` lands at the drawing-area center.
-    if (targetCenter && projection.invert) {
-      projection.translate([0, 0]);
-      const projected = projection(targetCenter);
-      if (projected) {
-        projection.translate([
-          drawingAreaCenter.x - projected[0],
-          drawingAreaCenter.y - projected[1],
-        ]);
-      }
-    }
+    projection.translate([
+      drawingArea.left + drawingArea.width / 2,
+      drawingArea.top + drawingArea.height / 2,
+    ]);
 
     return projection;
   },

packages/x-charts-premium/src/internals/plugins/useGeoProjectionZoom/mapZoom.utils.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest';
+import { geoMercator, geoOrthographic, type GeoProjection } from '@mui/x-charts-vendor/d3-geo';
+import { getRotation } from './mapZoom.utils';
+
+const EXTENT: [[number, number], [number, number]] = [
+  [0, 0],
+  [600, 400],
+];
+
+const sphere = { type: 'Sphere' } as const;
+
+// Resolves the rotation returned by `getRotation`, applies it the same way the projection selector
+// does, and returns where `geoPoint` ends up on screen — which should match the target pixel.
+function projectAfterRotation(
+  factory: () => GeoProjection,
+  geoPoint: [number, number],
+  to: [number, number],
+  zoomFactor = 1,
+): [number, number] | null {
+  const projection = factory().fitExtent(EXTENT, sphere);
+  const center = getRotation(projection, geoPoint, to, zoomFactor);
+  if (!center) {
+    return null;
+  }
+  projection.scale(projection.scale() * zoomFactor).rotate([-center[0], -center[1]]);
+  return projection(geoPoint) as [number, number];
+}
+
+describe('getRotation', () => {
+  it('keeps a point near the center under the cursor (mercator)', () => {
+    const projected = projectAfterRotation(geoMercator, [10, 20], [320, 180]);
+    expect(projected![0]).to.be.closeTo(320, 1e-4);
+    expect(projected![1]).to.be.closeTo(180, 1e-4);
+  });
+
+  it('keeps an off-central-meridian, high-latitude point under the cursor (mercator)', () => {
+    // The case where the previous additive implementation drifted.
+    const projected = projectAfterRotation(geoMercator, [-73, 60], [120, 90]);
+    expect(projected![0]).to.be.closeTo(120, 1e-4);
+    expect(projected![1]).to.be.closeTo(90, 1e-4);
+  });
+
+  it('handles a non-trivial zoom factor', () => {
+    const projected = projectAfterRotation(geoMercator, [40, -25], [450, 300], 2.5);
+    expect(projected![0]).to.be.closeTo(450, 1e-4);
+    expect(projected![1]).to.be.closeTo(300, 1e-4);
+  });
+
+  it('works for an orthographic projection', () => {
+    const projected = projectAfterRotation(geoOrthographic, [15, 35], [250, 150]);
+    expect(projected![0]).to.be.closeTo(250, 1e-4);
+    expect(projected![1]).to.be.closeTo(150, 1e-4);
+  });
+
+  it('returns null when the projection is not invertible', () => {
+    const projection = { invert: undefined } as unknown as GeoProjection;
+    expect(getRotation(projection, [0, 0], [0, 0])).to.equal(null);
+  });
+});