claude PoC

Author: alexfauquette

packages/x-charts-premium/src/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.plugins.ts

@@ -18,6 +18,10 @@ import {
   useGeoProjection,
   type UseGeoProjectionSignature,
 } from '../internals/plugins/useGeoProjection';
+import {
+  useGeoProjectionZoom,
+  type UseGeoProjectionZoomSignature,
+} from '../internals/plugins/useGeoProjectionZoom';
 
 export const GEO_PREMIUM_PLUGINS = [
   useChartZAxis,
@@ -28,6 +32,7 @@ export const GEO_PREMIUM_PLUGINS = [
   useChartVisibilityManager,
   useChartProExport,
   useGeoProjection,
+  useGeoProjectionZoom,
 ] as const;
 
 export type GeoPremiumPluginSignatures<SeriesType extends ChartSeriesType = ChartSeriesType> = [
@@ -39,4 +44,5 @@ export type GeoPremiumPluginSignatures<SeriesType extends ChartSeriesType = Char
   UseChartVisibilityManagerSignature<SeriesType>,
   UseChartProExportSignature,
   UseGeoProjectionSignature,
+  UseGeoProjectionZoomSignature,
 ];

packages/x-charts-premium/src/internals/plugins/useGeoProjectionZoom/index.ts

@@ -0,0 +1,7 @@
+export { useGeoProjectionZoom } from './useGeoProjectionZoom';
+export type {
+  UseGeoProjectionZoomSignature,
+  UseGeoProjectionZoomParameters,
+  UseGeoProjectionZoomInstance,
+} from './useGeoProjectionZoom.types';
+export type { MapZoomTransform } from './mapZoom.utils';

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

@@ -0,0 +1,45 @@
+import { type GeoProjection } from '@mui/x-charts-vendor/d3-geo';
+
+export interface MapZoomTransform {
+  /** Absolute d3-geo projection scale. */
+  scale: number;
+  /** Projection translation `[x, y]` in SVG pixels. */
+  translate: [number, number];
+}
+
+/**
+ * Pan the projection by a screen-space pixel delta.
+ */
+export function panProjection(projection: GeoProjection, dx: number, dy: number): MapZoomTransform {
+  const scale = projection.scale();
+  const [tx, ty] = projection.translate();
+  return { scale, translate: [tx + dx, ty + dy] };
+}
+
+/**
+ * Modify projection scale by a given factor such that focused point stay at the same SVG coordinates.
+ * @param {GeoProjection} projection The initial projection
+ * @param {number} factor the factor to apply to the projection scale
+ * @param {{ x: number; y: number }} focal the focal point that must stay unchanged in SVG coordinates
+ * @param {number} minScale the minimum scale allowed
+ * @param {number} maxScale the maximum scale allowed
+ * @return {MapZoomTransform} The new projection scale and translate that achieve the desired zoom.
+ */
+export function zoomProjectionAtPoint(
+  projection: GeoProjection,
+  factor: number,
+  focal: { x: number; y: number },
+  minScale: number,
+  maxScale: number,
+): MapZoomTransform {
+  const scale = projection.scale();
+  const [tx, ty] = projection.translate();
+
+  const nextScale = Math.max(minScale, Math.min(maxScale, scale * factor));
+  const k = nextScale / scale;
+
+  return {
+    scale: nextScale,
+    translate: [k * tx + (1 - k) * focal.x, k * ty + (1 - k) * focal.y],
+  };
+}

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

@@ -0,0 +1,127 @@
+'use client';
+import * as React from 'react';
+import { type ChartPlugin, selectorChartDrawingArea } from '@mui/x-charts/internals';
+import { usePanGesture, useWheelGesture, usePinchGesture } from '@mui/x-charts-pro/internals';
+import { type GeoProjection } from '@mui/x-charts-vendor/d3-geo';
+import { selectorChartProjection } from '../useGeoProjection/useGeoProjection.selectors';
+import { type UseGeoProjectionZoomSignature } from './useGeoProjectionZoom.types';
+import { panProjection, zoomProjectionAtPoint, type MapZoomTransform } from './mapZoom.utils';
+
+/** Multiplicative zoom step applied per wheel tick. */
+const WHEEL_ZOOM_STEP = 1.1;
+/** Multiplicative zoom step applied per `zoomIn`/`zoomOut` call. */
+const BUTTON_ZOOM_STEP = 1.3;
+
+export const useGeoProjectionZoom: ChartPlugin<UseGeoProjectionZoomSignature> = ({
+  store,
+  instance,
+  params,
+}) => {
+  const { zoom: enabled, minScaleRatio, maxScaleRatio, onZoomChange } = params;
+
+  // The scale that fits the data in the drawing area. Captured lazily on first
+  // interaction and used as the reference for the min/max zoom clamp.
+  const fitScaleRef = React.useRef<number | null>(null);
+
+  const getProjection = React.useCallback(
+    (): GeoProjection | null => selectorChartProjection(store.state),
+    [store],
+  );
+
+  const applyTransform = React.useCallback(
+    (transform: MapZoomTransform) => {
+      store.set('geoProjection', {
+        ...store.state.geoProjection,
+        scale: transform.scale,
+        translate: transform.translate,
+      });
+      onZoomChange?.(transform);
+    },
+    [store, onZoomChange],
+  );
+
+  const zoomAtPoint = React.useCallback(
+    (factor: number, focal: { x: number; y: number }) => {
+      const projection = getProjection();
+      if (!projection) {
+        return;
+      }
+      if (fitScaleRef.current === null) {
+        fitScaleRef.current = projection.scale();
+      }
+      applyTransform(
+        zoomProjectionAtPoint(
+          projection,
+          factor,
+          focal,
+          fitScaleRef.current * minScaleRatio,
+          fitScaleRef.current * maxScaleRatio,
+        ),
+      );
+    },
+    [getProjection, applyTransform, minScaleRatio, maxScaleRatio],
+  );
+
+  const drawingAreaCenter = React.useCallback(() => {
+    const { left, top, width, height } = selectorChartDrawingArea(store.state);
+    return { x: left + width / 2, y: top + height / 2 };
+  }, [store]);
+
+  // --- gestures: reuse the generic primitives from x-charts-pro -------------
+  usePanGesture(instance, {
+    enabled,
+    onPan: (delta) => {
+      const projection = getProjection();
+      if (!projection) {
+        return;
+      }
+      applyTransform(panProjection(projection, delta.x, delta.y));
+    },
+  });
+
+  useWheelGesture(instance, {
+    enabled,
+    onWheel: (point, event) => {
+      const factor = event.deltaY < 0 ? WHEEL_ZOOM_STEP : 1 / WHEEL_ZOOM_STEP;
+      zoomAtPoint(factor, point);
+    },
+  });
+
+  usePinchGesture(instance, {
+    enabled,
+    onPinch: (point, deltaScale) => {
+      zoomAtPoint(1 + deltaScale, point);
+    },
+  });
+
+  return {
+    instance: {
+      zoomIn: () => zoomAtPoint(BUTTON_ZOOM_STEP, drawingAreaCenter()),
+      zoomOut: () => zoomAtPoint(1 / BUTTON_ZOOM_STEP, drawingAreaCenter()),
+      resetMapZoom: () => {
+        fitScaleRef.current = null;
+        store.set('geoProjection', {
+          ...store.state.geoProjection,
+          scale: null,
+          translate: null,
+        });
+      },
+    },
+  };
+};
+
+useGeoProjectionZoom.params = {
+  zoom: true,
+  minScaleRatio: true,
+  maxScaleRatio: true,
+  onZoomChange: true,
+};
+
+useGeoProjectionZoom.getDefaultizedParams = ({ params }) => ({
+  ...params,
+  zoom: params.zoom ?? false,
+  minScaleRatio: params.minScaleRatio ?? 1,
+  maxScaleRatio: params.maxScaleRatio ?? 8,
+});
+
+useGeoProjectionZoom.getInitialState = () => ({});

packages/x-charts-premium/src/internals/plugins/useGeoProjectionZoom/useGeoProjectionZoom.types.ts

@@ -0,0 +1,54 @@
+import { type ChartPluginSignature } from '@mui/x-charts/internals';
+import { type UseGeoProjectionSignature } from '../useGeoProjection';
+import { type MapZoomTransform } from './mapZoom.utils';
+
+export interface UseGeoProjectionZoomParameters {
+  /**
+   * If `true`, the map can be panned (drag) and zoomed (wheel / pinch).
+   * @default false
+   */
+  zoom?: boolean;
+  /**
+   * The minimum zoom level, as a multiple of the scale that fits the data in the drawing area.
+   * @default 1
+   */
+  minScaleRatio?: number;
+  /**
+   * The maximum zoom level, as a multiple of the scale that fits the data in the drawing area.
+   * @default 8
+   */
+  maxScaleRatio?: number;
+  /**
+   * Callback fired when the map zoom or pan changes.
+   * @param {MapZoomTransform} transform The new projection scale and translation.
+   */
+  onZoomChange?: (transform: MapZoomTransform) => void;
+}
+
+interface UseGeoProjectionZoomDefaultizedParameters extends UseGeoProjectionZoomParameters {
+  zoom: boolean;
+  minScaleRatio: number;
+  maxScaleRatio: number;
+}
+
+export interface UseGeoProjectionZoomInstance {
+  /**
+   * Zoom the map in by a fixed step, centered on the drawing area.
+   */
+  zoomIn: () => void;
+  /**
+   * Zoom the map out by a fixed step, centered on the drawing area.
+   */
+  zoomOut: () => void;
+  /**
+   * Reset the map to the default scale and translation that fit the data in the drawing area.
+   */
+  resetMapZoom: () => void;
+}
+
+export type UseGeoProjectionZoomSignature = ChartPluginSignature<{
+  params: UseGeoProjectionZoomParameters;
+  defaultizedParams: UseGeoProjectionZoomDefaultizedParameters;
+  instance: UseGeoProjectionZoomInstance;
+  dependencies: [UseGeoProjectionSignature];
+}>;

packages/x-charts-pro/src/internals/index.ts

@@ -3,6 +3,16 @@ export type { UseChartsContainerProPropsReturnValue } from '../ChartsContainerPr
 export type { ChartsSlotsPro, ChartsSlotPropsPro } from './material';
 export { seriesPreviewPlotMap } from '../ChartsZoomSlider/internals/seriesPreviewPlotMap';
 export type { PreviewPlotProps } from '../ChartsZoomSlider/internals/previews/PreviewPlot.types';
+export {
+  usePanGesture,
+  useWheelGesture,
+  usePinchGesture,
+  type UsePanGestureOptions,
+  type UseWheelGestureOptions,
+  type UsePinchGestureOptions,
+  type GestureInstance,
+  type PanGestureConfig,
+} from './plugins/zoomGestures';
 export { defaultSeriesConfigPro } from '../ChartsDataProviderPro/ChartsDataProviderPro';
 export type { ProPluginsPerSeriesType } from '../context/ChartProApi';
 export { useHeatmapProps } from '../Heatmap/useHeatmapProps';