@mui/x-charts-premium 9.7.0 → 9.9.0

package/internals/plugins/useGeoProjection/useGeoProjection.selectors.js

@@ -3,12 +3,122 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorChartRawScale = exports.selectorChartRawProjection = exports.selectorChartProjection = exports.selectorChartGeoProjectionState = exports.selectorChartGeoPath = exports.selectorChartGeoFeatureIndexesByName = exports.selectorChartGeoData = void 0;
+exports.selectorGeoTooltipPosition = exports.selectorFitScale = exports.selectorChartZoomLevel = exports.selectorChartRawProjection = exports.selectorChartProjection = exports.selectorChartGeoProjectionState = exports.selectorChartGeoPath = exports.selectorChartGeoFeatureKey = exports.selectorChartGeoFeatureIndexesByName = exports.selectorChartGeoData = void 0;
+var _store = require("@mui/x-internals/store");
+var _d3Geo = require("@mui/x-charts-vendor/d3-geo");
 var _internals = require("@mui/x-charts/internals");
-const selectorChartGeoFeatureIndexesByName = exports.selectorChartGeoFeatureIndexesByName = _internals.useGeoProjectionSelectors.selectorChartGeoFeatureIndexesByName;
-const selectorChartGeoProjectionState = exports.selectorChartGeoProjectionState = _internals.useGeoProjectionSelectors.selectorChartGeoProjectionState;
-const selectorChartGeoData = exports.selectorChartGeoData = _internals.useGeoProjectionSelectors.selectorChartGeoData;
-const selectorChartRawProjection = exports.selectorChartRawProjection = _internals.useGeoProjectionSelectors.selectorChartRawProjection;
-const selectorChartRawScale = exports.selectorChartRawScale = _internals.useGeoProjectionSelectors.selectorChartRawScale;
-const selectorChartProjection = exports.selectorChartProjection = _internals.useGeoProjectionSelectors.selectorChartProjection;
-const selectorChartGeoPath = exports.selectorChartGeoPath = _internals.useGeoProjectionSelectors.selectorChartGeoPath;
+var _projection = require("./projection.utils");
+const ZERO_COORDINATES = [0, 0];
+const selectorChartGeoProjectionState = state => state.geoProjection;
+exports.selectorChartGeoProjectionState = selectorChartGeoProjectionState;
+const selectorChartGeoProjectionZoomState = state => state.geoProjectionZoom;
+const selectorChartGeoData = exports.selectorChartGeoData = (0, _store.createSelector)(selectorChartGeoProjectionState, geoProjection => geoProjection?.geoData ?? null);
+const selectorChartGeoFeatureKey = exports.selectorChartGeoFeatureKey = (0, _store.createSelector)(selectorChartGeoProjectionState, geoProjection => geoProjection?.geoFeatureKey ?? 'name');
+const selectorChartRawProjection = exports.selectorChartRawProjection = (0, _store.createSelector)(selectorChartGeoProjectionState, geoProjection => geoProjection?.projection ?? null);
+const selectorChartZoomLevel = exports.selectorChartZoomLevel = (0, _store.createSelector)(selectorChartGeoProjectionZoomState, function selectorChartZoomLevel(geoProjectionZoom) {
+  return geoProjectionZoom?.zoomLevel ?? 1;
+});
+const selectorChartCenter = (0, _store.createSelectorMemoized)(selectorChartGeoProjectionZoomState, function selectorChartCenter(geoProjectionZoom) {
+  return geoProjectionZoom?.center ?? ZERO_COORDINATES;
+});
+const selectorChartTranslation = (0, _store.createSelectorMemoized)(selectorChartGeoProjectionZoomState, function selectorChartTranslation(geoProjectionZoom) {
+  return geoProjectionZoom?.translation ?? null;
+});
+const selectorChartRoll = (0, _store.createSelector)(selectorChartGeoProjectionZoomState, function selectorChartRoll(geoProjectionZoom) {
+  return geoProjectionZoom?.roll ?? 0;
+});
+const selectorChartInitialCenter = (0, _store.createSelectorMemoized)(selectorChartGeoProjectionZoomState, function selectorChartInitialCenter(geoProjectionZoom) {
+  return geoProjectionZoom?.initialCenter ?? ZERO_COORDINATES;
+});
+const selectorChartParallels = (0, _store.createSelectorMemoized)(selectorChartGeoProjectionState, function selectorChartParallels(geoProjection) {
+  return (0, _projection.getParallels)(geoProjection?.parallels);
+});
+
+/**
+ * Map a feature's `properties.name` to its index in `geoData.features`,
+ * for fast lookup by name when joining series rows to features.
+ *
+ * Features without a string `properties.name` are skipped; on duplicates,
+ * the first occurrence wins.
+ */
+const selectorChartGeoFeatureIndexesByName = exports.selectorChartGeoFeatureIndexesByName = (0, _store.createSelectorMemoized)(selectorChartGeoData, selectorChartGeoFeatureKey, (geoData, geoFeatureKey) => {
+  const map = new Map();
+  if (!geoData) {
+    return map;
+  }
+  geoData.features.forEach((feature, index) => {
+    const name = typeof geoFeatureKey === 'function' ? geoFeatureKey(feature) : feature.properties?.[geoFeatureKey];
+    if (typeof name !== 'string') {
+      return;
+    }
+    if (map.has(name)) {
+      map.get(name).push(index);
+      return;
+    }
+    map.set(name, [index]);
+  });
+  return map;
+});
+const selectorFitScale = exports.selectorFitScale = (0, _store.createSelector)(selectorChartRawProjection, selectorChartParallels, selectorChartInitialCenter, selectorChartGeoData, _internals.selectorChartDrawingArea, function selectorFitScale(projectionInput, parallels, initialCenter, geoData, drawingArea) {
+  if (!geoData || projectionInput === null || initialCenter === null) {
+    return null;
+  }
+  const projection = (0, _projection.resolveProjectionInstance)(projectionInput, parallels);
+  if (projection === null) {
+    return null;
+  }
+  projection.rotate?.([-initialCenter[0], -initialCenter[1]]);
+  const [[x0, y0], [x1, y1]] = (0, _d3Geo.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.
+ *
+ * - String inputs (e.g. `'mercator'`) are mapped to the matching d3-geo factory.
+ * - `GeoProjection` instances are used as-is, then fitted.
+ * - The projection is first fitted to the data (the `zoomLevel === 1` baseline), then its
+ *   scale is multiplied by `zoomLevel` and its translation is offset so `center` lands at the
+ *   center of the drawing area. Keeping the view as `{ zoomLevel, center }` means the absolute
+ *   scale/translation are derived here, never stored — so they stay correct across resizes.
+ * - Returns `null` when no projection is registered or the name is unknown.
+ */
+const selectorChartProjection = exports.selectorChartProjection = (0, _store.createSelectorMemoized)(selectorChartRawProjection, selectorChartParallels, selectorChartGeoData, selectorChartCenter, selectorChartTranslation, selectorChartRoll, selectorChartZoomLevel, _internals.selectorChartDrawingArea, selectorFitScale, (projectionInput, parallels, geoData, center, translation, roll, zoomLevel, drawingArea, fitScale) => {
+  const projection = (0, _projection.resolveProjectionInstance)(projectionInput, parallels);
+  if (!projection) {
+    return null;
+  }
+  if (!geoData || fitScale == null) {
+    return projection;
+  }
+  projection.rotate?.([-center[0], -center[1], roll]);
+  // Edge case with conic conformal and albers:
+  // rotate impacts the center of the projection, so we need to reset it.
+  projection.center?.([0, 0]);
+
+  // `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);
+  projection.translate([drawingArea.left + drawingArea.width / 2 + (translation?.[0] ?? 0) * drawingArea.width, drawingArea.top + drawingArea.height / 2 + (translation?.[1] ?? 0) * drawingArea.height]);
+  return projection;
+});
+
+/**
+ * Resolves the raw `projection` input into a ready-to-use `GeoPath` instance
+ * fitted to the chart's drawing area.
+ */
+const selectorChartGeoPath = exports.selectorChartGeoPath = (0, _store.createSelectorMemoized)(selectorChartProjection, projection => {
+  if (!projection) {
+    return null;
+  }
+  return (0, _d3Geo.geoPath)(projection);
+});
+const selectorGeoTooltipPosition = exports.selectorGeoTooltipPosition = (0, _store.createSelectorMemoized)(selectorChartGeoData, selectorChartProjection, selectorChartGeoFeatureIndexesByName, function selectorGeoTooltipPosition(geoData, projection, featureIndexesByName) {
+  return {
+    geoData,
+    projection,
+    featureIndexesByName
+  };
+});

package/internals/plugins/useGeoProjection/useGeoProjection.selectors.mjs

@@ -1,8 +1,117 @@
-import { useGeoProjectionSelectors } from '@mui/x-charts/internals';
-export const selectorChartGeoFeatureIndexesByName = useGeoProjectionSelectors.selectorChartGeoFeatureIndexesByName;
-export const selectorChartGeoProjectionState = useGeoProjectionSelectors.selectorChartGeoProjectionState;
-export const selectorChartGeoData = useGeoProjectionSelectors.selectorChartGeoData;
-export const selectorChartRawProjection = useGeoProjectionSelectors.selectorChartRawProjection;
-export const selectorChartRawScale = useGeoProjectionSelectors.selectorChartRawScale;
-export const selectorChartProjection = useGeoProjectionSelectors.selectorChartProjection;
-export const selectorChartGeoPath = useGeoProjectionSelectors.selectorChartGeoPath;
+import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
+import { geoPath } from '@mui/x-charts-vendor/d3-geo';
+import { selectorChartDrawingArea } from '@mui/x-charts/internals';
+import { getParallels, resolveProjectionInstance } from "./projection.utils.mjs";
+const ZERO_COORDINATES = [0, 0];
+export const selectorChartGeoProjectionState = state => state.geoProjection;
+const selectorChartGeoProjectionZoomState = state => state.geoProjectionZoom;
+export const selectorChartGeoData = createSelector(selectorChartGeoProjectionState, geoProjection => geoProjection?.geoData ?? null);
+export const selectorChartGeoFeatureKey = createSelector(selectorChartGeoProjectionState, geoProjection => geoProjection?.geoFeatureKey ?? 'name');
+export const selectorChartRawProjection = createSelector(selectorChartGeoProjectionState, geoProjection => geoProjection?.projection ?? null);
+export const selectorChartZoomLevel = createSelector(selectorChartGeoProjectionZoomState, function selectorChartZoomLevel(geoProjectionZoom) {
+  return geoProjectionZoom?.zoomLevel ?? 1;
+});
+const selectorChartCenter = createSelectorMemoized(selectorChartGeoProjectionZoomState, function selectorChartCenter(geoProjectionZoom) {
+  return geoProjectionZoom?.center ?? ZERO_COORDINATES;
+});
+const selectorChartTranslation = createSelectorMemoized(selectorChartGeoProjectionZoomState, function selectorChartTranslation(geoProjectionZoom) {
+  return geoProjectionZoom?.translation ?? null;
+});
+const selectorChartRoll = createSelector(selectorChartGeoProjectionZoomState, function selectorChartRoll(geoProjectionZoom) {
+  return geoProjectionZoom?.roll ?? 0;
+});
+const selectorChartInitialCenter = createSelectorMemoized(selectorChartGeoProjectionZoomState, function selectorChartInitialCenter(geoProjectionZoom) {
+  return geoProjectionZoom?.initialCenter ?? ZERO_COORDINATES;
+});
+const selectorChartParallels = createSelectorMemoized(selectorChartGeoProjectionState, function selectorChartParallels(geoProjection) {
+  return getParallels(geoProjection?.parallels);
+});
+
+/**
+ * Map a feature's `properties.name` to its index in `geoData.features`,
+ * for fast lookup by name when joining series rows to features.
+ *
+ * Features without a string `properties.name` are skipped; on duplicates,
+ * the first occurrence wins.
+ */
+export const selectorChartGeoFeatureIndexesByName = createSelectorMemoized(selectorChartGeoData, selectorChartGeoFeatureKey, (geoData, geoFeatureKey) => {
+  const map = new Map();
+  if (!geoData) {
+    return map;
+  }
+  geoData.features.forEach((feature, index) => {
+    const name = typeof geoFeatureKey === 'function' ? geoFeatureKey(feature) : feature.properties?.[geoFeatureKey];
+    if (typeof name !== 'string') {
+      return;
+    }
+    if (map.has(name)) {
+      map.get(name).push(index);
+      return;
+    }
+    map.set(name, [index]);
+  });
+  return map;
+});
+export const selectorFitScale = createSelector(selectorChartRawProjection, selectorChartParallels, selectorChartInitialCenter, selectorChartGeoData, selectorChartDrawingArea, function selectorFitScale(projectionInput, parallels, initialCenter, geoData, drawingArea) {
+  if (!geoData || projectionInput === null || initialCenter === null) {
+    return null;
+  }
+  const projection = resolveProjectionInstance(projectionInput, parallels);
+  if (projection === null) {
+    return null;
+  }
+  projection.rotate?.([-initialCenter[0], -initialCenter[1]]);
+  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.
+ *
+ * - String inputs (e.g. `'mercator'`) are mapped to the matching d3-geo factory.
+ * - `GeoProjection` instances are used as-is, then fitted.
+ * - The projection is first fitted to the data (the `zoomLevel === 1` baseline), then its
+ *   scale is multiplied by `zoomLevel` and its translation is offset so `center` lands at the
+ *   center of the drawing area. Keeping the view as `{ zoomLevel, center }` means the absolute
+ *   scale/translation are derived here, never stored — so they stay correct across resizes.
+ * - Returns `null` when no projection is registered or the name is unknown.
+ */
+export const selectorChartProjection = createSelectorMemoized(selectorChartRawProjection, selectorChartParallels, selectorChartGeoData, selectorChartCenter, selectorChartTranslation, selectorChartRoll, selectorChartZoomLevel, selectorChartDrawingArea, selectorFitScale, (projectionInput, parallels, geoData, center, translation, roll, zoomLevel, drawingArea, fitScale) => {
+  const projection = resolveProjectionInstance(projectionInput, parallels);
+  if (!projection) {
+    return null;
+  }
+  if (!geoData || fitScale == null) {
+    return projection;
+  }
+  projection.rotate?.([-center[0], -center[1], roll]);
+  // Edge case with conic conformal and albers:
+  // rotate impacts the center of the projection, so we need to reset it.
+  projection.center?.([0, 0]);
+
+  // `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);
+  projection.translate([drawingArea.left + drawingArea.width / 2 + (translation?.[0] ?? 0) * drawingArea.width, drawingArea.top + drawingArea.height / 2 + (translation?.[1] ?? 0) * drawingArea.height]);
+  return projection;
+});
+
+/**
+ * Resolves the raw `projection` input into a ready-to-use `GeoPath` instance
+ * fitted to the chart's drawing area.
+ */
+export const selectorChartGeoPath = createSelectorMemoized(selectorChartProjection, projection => {
+  if (!projection) {
+    return null;
+  }
+  return geoPath(projection);
+});
+export const selectorGeoTooltipPosition = createSelectorMemoized(selectorChartGeoData, selectorChartProjection, selectorChartGeoFeatureIndexesByName, function selectorGeoTooltipPosition(geoData, projection, featureIndexesByName) {
+  return {
+    geoData,
+    projection,
+    featureIndexesByName
+  };
+});

package/internals/plugins/useGeoProjection/useGeoProjection.types.d.mts

@@ -1,2 +1,63 @@
-import type { useGeoProjectionTypes } from '@mui/x-charts/internals';
-export type UseGeoProjectionSignature = useGeoProjectionTypes.UseGeoProjectionSignature;
+import type { GeoProjection, ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo';
+import type { ChartPluginSignature } from '@mui/x-charts/internals';
+import type { UseGeoProjectionZoomSignature } from "../useGeoProjectionZoom/useGeoProjectionZoom.types.mjs";
+/**
+ * Geo data used to position a map series tooltip: the resolved projection, the
+ * feature collection, and a feature-name-to-index lookup.
+ */
+export type GeoTooltipPosition = {
+  geoData: ExtendedFeatureCollection | null;
+  projection: GeoProjection | null;
+  featureIndexesByName: ReadonlyMap<string, number[]>;
+};
+export type D3NamedProjection = 'azimuthalEqualArea' | 'azimuthalEquidistant' | 'gnomonic' | 'orthographic' | 'stereographic' | 'conicConformal' | 'conicEqualArea' | 'conicEquidistant' | 'albers' | 'albersUsa' | 'equirectangular' | 'mercator' | 'transverseMercator' | 'equalEarth' | 'naturalEarth1';
+/**
+ * A d3-geo projection accepted by `useGeoProjection`.
+ *
+ * Either a built-in projection name (e.g. `'mercator'`, `'naturalEarth1'`)
+ * or a `GeoProjection` instance returned by a d3-geo factory.
+ */
+export type GeoProjectionInput = D3NamedProjection | GeoProjection;
+export interface UseGeoProjectionParameters {
+  /**
+   * The GeoJSON `FeatureCollection` whose features will be rendered on the map.
+   */
+  geoData?: ExtendedFeatureCollection;
+  /**
+   * The key, or value getter, used to identify each feature in `geoData`.
+   * - If a string is provided, `feature.properties[geoFeatureKey]` will be used.
+   * - If a function is provided, it will be called with each feature and should return a key for that feature.
+   * @default 'name'
+   */
+  geoFeatureKey?: string | ((feature: ExtendedFeatureCollection['features'][number]) => string | null);
+  /**
+   * The d3-geo projection used to map geographic coordinates to SVG coordinates.
+   * Accepts a d3-geo projection name (e.g. `'mercator'`, `'naturalEarth1'`)
+   * or a custom `GeoProjection` instance.
+   */
+  projection?: GeoProjectionInput;
+  /**
+   * The two standard parallels used by conic projections, if applicable.
+   * Used for projection 'conicConformal', 'conicEqualArea', 'conicEquidistant'.
+   */
+  parallels?: [number, number] | null;
+}
+export type UseGeoProjectionDefaultizedParameters = UseGeoProjectionParameters;
+export interface UseGeoProjectionState {
+  geoProjection: {
+    geoData: ExtendedFeatureCollection | null;
+    geoFeatureKey: string | ((feature: ExtendedFeatureCollection['features'][number]) => string | null);
+    projection: GeoProjectionInput | null;
+    /**
+     * The two standard parallels used by conic projections, if applicable.
+     * Used for projection 'conicConformal', 'conicEqualArea', 'conicEquidistant'.
+     */
+    parallels?: [number, number] | null;
+  };
+}
+export type UseGeoProjectionSignature = ChartPluginSignature<{
+  params: UseGeoProjectionParameters;
+  defaultizedParams: UseGeoProjectionDefaultizedParameters;
+  state: UseGeoProjectionState;
+  optionalDependencies: [UseGeoProjectionZoomSignature];
+}>;

package/internals/plugins/useGeoProjection/useGeoProjection.types.d.ts

@@ -1,2 +1,63 @@
-import type { useGeoProjectionTypes } from '@mui/x-charts/internals';
-export type UseGeoProjectionSignature = useGeoProjectionTypes.UseGeoProjectionSignature;
+import type { GeoProjection, ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo';
+import type { ChartPluginSignature } from '@mui/x-charts/internals';
+import type { UseGeoProjectionZoomSignature } from "../useGeoProjectionZoom/useGeoProjectionZoom.types.js";
+/**
+ * Geo data used to position a map series tooltip: the resolved projection, the
+ * feature collection, and a feature-name-to-index lookup.
+ */
+export type GeoTooltipPosition = {
+  geoData: ExtendedFeatureCollection | null;
+  projection: GeoProjection | null;
+  featureIndexesByName: ReadonlyMap<string, number[]>;
+};
+export type D3NamedProjection = 'azimuthalEqualArea' | 'azimuthalEquidistant' | 'gnomonic' | 'orthographic' | 'stereographic' | 'conicConformal' | 'conicEqualArea' | 'conicEquidistant' | 'albers' | 'albersUsa' | 'equirectangular' | 'mercator' | 'transverseMercator' | 'equalEarth' | 'naturalEarth1';
+/**
+ * A d3-geo projection accepted by `useGeoProjection`.
+ *
+ * Either a built-in projection name (e.g. `'mercator'`, `'naturalEarth1'`)
+ * or a `GeoProjection` instance returned by a d3-geo factory.
+ */
+export type GeoProjectionInput = D3NamedProjection | GeoProjection;
+export interface UseGeoProjectionParameters {
+  /**
+   * The GeoJSON `FeatureCollection` whose features will be rendered on the map.
+   */
+  geoData?: ExtendedFeatureCollection;
+  /**
+   * The key, or value getter, used to identify each feature in `geoData`.
+   * - If a string is provided, `feature.properties[geoFeatureKey]` will be used.
+   * - If a function is provided, it will be called with each feature and should return a key for that feature.
+   * @default 'name'
+   */
+  geoFeatureKey?: string | ((feature: ExtendedFeatureCollection['features'][number]) => string | null);
+  /**
+   * The d3-geo projection used to map geographic coordinates to SVG coordinates.
+   * Accepts a d3-geo projection name (e.g. `'mercator'`, `'naturalEarth1'`)
+   * or a custom `GeoProjection` instance.
+   */
+  projection?: GeoProjectionInput;
+  /**
+   * The two standard parallels used by conic projections, if applicable.
+   * Used for projection 'conicConformal', 'conicEqualArea', 'conicEquidistant'.
+   */
+  parallels?: [number, number] | null;
+}
+export type UseGeoProjectionDefaultizedParameters = UseGeoProjectionParameters;
+export interface UseGeoProjectionState {
+  geoProjection: {
+    geoData: ExtendedFeatureCollection | null;
+    geoFeatureKey: string | ((feature: ExtendedFeatureCollection['features'][number]) => string | null);
+    projection: GeoProjectionInput | null;
+    /**
+     * The two standard parallels used by conic projections, if applicable.
+     * Used for projection 'conicConformal', 'conicEqualArea', 'conicEquidistant'.
+     */
+    parallels?: [number, number] | null;
+  };
+}
+export type UseGeoProjectionSignature = ChartPluginSignature<{
+  params: UseGeoProjectionParameters;
+  defaultizedParams: UseGeoProjectionDefaultizedParameters;
+  state: UseGeoProjectionState;
+  optionalDependencies: [UseGeoProjectionZoomSignature];
+}>;

package/internals/plugins/useGeoProjectionZoom/gestureHooks/usePanOnDrag.d.mts

@@ -0,0 +1,11 @@
+import type { ChartPlugin } from '@mui/x-charts/internals';
+import type { MapRotationAxis, MapTranslationAxis, MapZoomView, UseGeoProjectionZoomSignature } from "../useGeoProjectionZoom.types.mjs";
+export declare const usePanOnDrag: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseGeoProjectionZoomSignature>>[0], "store" | "instance">, applyView: (newView: MapZoomView) => void, options: {
+  enabled: boolean;
+  rotationAllowed: MapRotationAxis;
+  translationAllowed: MapTranslationAxis;
+  maxEmptySpace: number;
+}) => void;

package/internals/plugins/useGeoProjectionZoom/gestureHooks/usePanOnDrag.d.ts

@@ -0,0 +1,11 @@
+import type { ChartPlugin } from '@mui/x-charts/internals';
+import type { MapRotationAxis, MapTranslationAxis, MapZoomView, UseGeoProjectionZoomSignature } from "../useGeoProjectionZoom.types.js";
+export declare const usePanOnDrag: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseGeoProjectionZoomSignature>>[0], "store" | "instance">, applyView: (newView: MapZoomView) => void, options: {
+  enabled: boolean;
+  rotationAllowed: MapRotationAxis;
+  translationAllowed: MapTranslationAxis;
+  maxEmptySpace: number;
+}) => void;

package/internals/plugins/useGeoProjectionZoom/gestureHooks/usePanOnDrag.js

@@ -0,0 +1,65 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePanOnDrag = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts-pro/internals");
+var _useGeoProjection = require("../../useGeoProjection");
+var _mapZoom = require("../mapZoom.utils");
+const usePanOnDrag = ({
+  store,
+  instance
+}, applyView, options) => {
+  const {
+    enabled,
+    rotationAllowed,
+    translationAllowed,
+    maxEmptySpace
+  } = options;
+  const projection = store.use(_useGeoProjection.selectorChartProjection);
+  const geoPoint = React.useRef(null);
+  const dragStartPoint = React.useRef(null);
+  const dragCurrentPoint = React.useRef(null);
+  (0, _internals.useDragGesture)(instance, {
+    enabled,
+    onPanStart: event => {
+      if (!projection || !projection.invert) {
+        return;
+      }
+      geoPoint.current = projection.invert([event.detail.srcEvent.offsetX, event.detail.srcEvent.offsetY]);
+      dragStartPoint.current = [event.detail.srcEvent.offsetX, event.detail.srcEvent.offsetY];
+      dragCurrentPoint.current = [event.detail.srcEvent.offsetX, event.detail.srcEvent.offsetY];
+    },
+    onPanEnd: () => {
+      geoPoint.current = null;
+      dragStartPoint.current = null;
+      dragCurrentPoint.current = null;
+    },
+    onPan: delta => {
+      if (!projection || dragCurrentPoint.current === null || geoPoint.current === null) {
+        return;
+      }
+      dragCurrentPoint.current = [dragCurrentPoint.current[0] + delta.x, dragCurrentPoint.current[1] + delta.y];
+      const nextRotation = (0, _mapZoom.getRotation)(projection, geoPoint.current, dragCurrentPoint.current, 1, rotationAllowed);
+      const rotate = projection.rotate?.();
+      if (nextRotation) {
+        projection.rotate?.([-nextRotation[0], -nextRotation[1], nextRotation[2]]);
+      }
+      const translation = (0, _mapZoom.getTranslation)(store, projection, geoPoint.current, dragCurrentPoint.current, translationAllowed, maxEmptySpace);
+      projection.rotate?.(rotate);
+      if (nextRotation || translation) {
+        applyView({
+          zoomLevel: store.state.geoProjectionZoom.zoomLevel ?? 1,
+          center: nextRotation ? [nextRotation[0], nextRotation[1]] : store.state.geoProjectionZoom.center ?? [0, 0],
+          translation: translation ?? store.state.geoProjectionZoom.translation ?? [0, 0],
+          roll: nextRotation ? nextRotation[2] : store.state.geoProjectionZoom.roll ?? 0
+        });
+      }
+    }
+  });
+};
+exports.usePanOnDrag = usePanOnDrag;

package/internals/plugins/useGeoProjectionZoom/gestureHooks/usePanOnDrag.mjs

@@ -0,0 +1,58 @@
+'use client';
+
+import * as React from 'react';
+import { useDragGesture } from '@mui/x-charts-pro/internals';
+import { selectorChartProjection } from "../../useGeoProjection/index.mjs";
+import { getRotation, getTranslation } from "../mapZoom.utils.mjs";
+export const usePanOnDrag = ({
+  store,
+  instance
+}, applyView, options) => {
+  const {
+    enabled,
+    rotationAllowed,
+    translationAllowed,
+    maxEmptySpace
+  } = options;
+  const projection = store.use(selectorChartProjection);
+  const geoPoint = React.useRef(null);
+  const dragStartPoint = React.useRef(null);
+  const dragCurrentPoint = React.useRef(null);
+  useDragGesture(instance, {
+    enabled,
+    onPanStart: event => {
+      if (!projection || !projection.invert) {
+        return;
+      }
+      geoPoint.current = projection.invert([event.detail.srcEvent.offsetX, event.detail.srcEvent.offsetY]);
+      dragStartPoint.current = [event.detail.srcEvent.offsetX, event.detail.srcEvent.offsetY];
+      dragCurrentPoint.current = [event.detail.srcEvent.offsetX, event.detail.srcEvent.offsetY];
+    },
+    onPanEnd: () => {
+      geoPoint.current = null;
+      dragStartPoint.current = null;
+      dragCurrentPoint.current = null;
+    },
+    onPan: delta => {
+      if (!projection || dragCurrentPoint.current === null || geoPoint.current === null) {
+        return;
+      }
+      dragCurrentPoint.current = [dragCurrentPoint.current[0] + delta.x, dragCurrentPoint.current[1] + delta.y];
+      const nextRotation = getRotation(projection, geoPoint.current, dragCurrentPoint.current, 1, rotationAllowed);
+      const rotate = projection.rotate?.();
+      if (nextRotation) {
+        projection.rotate?.([-nextRotation[0], -nextRotation[1], nextRotation[2]]);
+      }
+      const translation = getTranslation(store, projection, geoPoint.current, dragCurrentPoint.current, translationAllowed, maxEmptySpace);
+      projection.rotate?.(rotate);
+      if (nextRotation || translation) {
+        applyView({
+          zoomLevel: store.state.geoProjectionZoom.zoomLevel ?? 1,
+          center: nextRotation ? [nextRotation[0], nextRotation[1]] : store.state.geoProjectionZoom.center ?? [0, 0],
+          translation: translation ?? store.state.geoProjectionZoom.translation ?? [0, 0],
+          roll: nextRotation ? nextRotation[2] : store.state.geoProjectionZoom.roll ?? 0
+        });
+      }
+    }
+  });
+};

package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnPinch.d.mts

@@ -0,0 +1,13 @@
+import type { ChartPlugin } from '@mui/x-charts/internals';
+import type { MapRotationAxis, MapTranslationAxis, MapZoomView, UseGeoProjectionZoomSignature } from "../useGeoProjectionZoom.types.mjs";
+export declare const useZoomOnPinch: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseGeoProjectionZoomSignature>>[0], "store" | "instance">, applyView: (newView: MapZoomView) => void, options: {
+  enabled: boolean;
+  rotationAllowed: MapRotationAxis;
+  translationAllowed: MapTranslationAxis;
+  maxEmptySpace: number;
+  minZoomLevel: number;
+  maxZoomLevel: number;
+}) => void;

package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnPinch.d.ts

@@ -0,0 +1,13 @@
+import type { ChartPlugin } from '@mui/x-charts/internals';
+import type { MapRotationAxis, MapTranslationAxis, MapZoomView, UseGeoProjectionZoomSignature } from "../useGeoProjectionZoom.types.js";
+export declare const useZoomOnPinch: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseGeoProjectionZoomSignature>>[0], "store" | "instance">, applyView: (newView: MapZoomView) => void, options: {
+  enabled: boolean;
+  rotationAllowed: MapRotationAxis;
+  translationAllowed: MapTranslationAxis;
+  maxEmptySpace: number;
+  minZoomLevel: number;
+  maxZoomLevel: number;
+}) => void;

package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnPinch.js

@@ -0,0 +1,62 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useZoomOnPinch = void 0;
+var _internals = require("@mui/x-charts-pro/internals");
+var _useGeoProjection = require("../../useGeoProjection");
+var _mapZoom = require("../mapZoom.utils");
+const useZoomOnPinch = ({
+  store,
+  instance
+}, applyView, options) => {
+  const {
+    enabled,
+    rotationAllowed,
+    translationAllowed,
+    maxEmptySpace
+  } = options;
+  const projection = store.use(_useGeoProjection.selectorChartProjection);
+  const clampZoomLevel = zoomLevel => Math.max(options.minZoomLevel, Math.min(options.maxZoomLevel, zoomLevel));
+  (0, _internals.usePinchGesture)(instance, {
+    enabled,
+    onPinch: (point, deltaScale) => {
+      if (!projection || !projection.invert) {
+        return;
+      }
+
+      // Same clamp-then-derive-factor flow as the wheel, so pinch obeys the identical bounds.
+      const currentZoom = store.state.geoProjectionZoom.zoomLevel ?? 1;
+      const nextZoom = clampZoomLevel(currentZoom * (1 + deltaScale));
+      const factor = nextZoom / currentZoom;
+      if (factor === 1) {
+        return;
+      }
+      const geoPoint = projection.invert([point.x, point.y]);
+      if (!geoPoint) {
+        return;
+      }
+      const nextRotation = (0, _mapZoom.getRotation)(projection, geoPoint, [point.x, point.y], factor, rotationAllowed);
+      const scale = projection.scale();
+      const rotate = projection.rotate?.();
+      if (nextRotation) {
+        projection.rotate?.([-nextRotation[0], -nextRotation[1], nextRotation[2]]);
+      }
+      projection.scale(scale * factor);
+      const translation = (0, _mapZoom.getTranslation)(store, projection, geoPoint, [point.x, point.y], translationAllowed, maxEmptySpace, store.state.geoProjectionZoom.translation ?? [0, 0]);
+      projection.rotate?.(rotate);
+      projection.scale(scale);
+      if (nextRotation || translation) {
+        applyView({
+          zoomLevel: nextZoom,
+          center: nextRotation ? [nextRotation[0], nextRotation[1]] : store.state.geoProjectionZoom.center ?? [0, 0],
+          translation: translation ?? store.state.geoProjectionZoom.translation ?? [0, 0],
+          roll: nextRotation ? nextRotation[2] : store.state.geoProjectionZoom.roll ?? 0
+        });
+      }
+    }
+  });
+};
+exports.useZoomOnPinch = useZoomOnPinch;