[charts-pro] Allow zoom interactions to be configured

docs/data/charts/zoom-and-pan/zoom-and-pan.md

@@ -131,3 +131,93 @@ The `zoom` state is an array of objects that define the zoom state for each axis
 To synchronize zoom between multiple charts, you can control the zoom state.
 
 {{"demo": "ZoomControlled.js"}}
+
+## Zoom interactions configuration
+
+You can have fine-grained control over which interactions are enabled and under which conditions by using the `zoomInteractionConfig` prop.
+
+### Interactions
+
+The `zoomInteractionConfig` prop allows you to specify which interactions are enabled for zooming and panning:
+
+```jsx
+<BarChartPro
+  zoomInteractionConfig={{
+    // Enable both wheel and pinch zoom
+    zoom: ['wheel', 'pinch'],
+    // Enable drag panning
+    pan: ['drag'],
+  }}
+/>
+```
+
+### Key modifiers
+
+Some interactions allow setting up required keys to be pressed to enable the interaction.
+This can be set up using the `requiredKeys` property in the interaction configuration.
+
+```jsx
+<BarChartPro
+  zoomInteractionConfig={{
+    // Only zoom when Control key is pressed
+    zoom: [{ type: 'wheel', requiredKeys: ['Control'] }],
+    // Only pan when Shift key is pressed
+    pan: [{ type: 'drag', requiredKeys: ['Shift'] }],
+  }}
+/>
+```
+
+Available keys include:
+
+- Modifier keys: `'Shift'`, `'Control'`, `'Alt'`, `'Meta'`
+- `'ControlOrMeta'` which resolves to `Control` on Windows and Linux and to `Meta` on macOS.
+- Any other key can be used as well, such as `'Space'` and `'Enter'` based on [`event.key` values](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values).
+
+It is also possible to require multiple keys to be pressed simultaneously:
+
+```jsx
+<BarChartPro
+  zoomInteractionConfig={{
+    // Only pan when both Shift and Control are pressed
+    pan: [{ type: 'drag', requiredKeys: ['Shift', 'Control'] }],
+  }}
+/>
+```
+
+### Pointer Modes
+
+Interactions can also be restricted to specific pointer types by using the `mode` property:
+
+```jsx
+<BarChartPro
+  zoomInteractionConfig={{
+    // Only pan with touch, not mouse
+    pan: [{ type: 'drag', pointerMode: 'touch' }],
+  }}
+  // other props
+/>
+```
+
+Available pointer modes:
+
+- `undefined`: Allow both mouse and touch interactions (default)
+- `'mouse'`: Only allow mouse interactions
+- `'touch'`: Only allow touch interactions
+
+### Multiple interactions of the same type
+
+It is possible to define multiple interactions of the same type with different configurations.
+
+In the example below, the pan `drag` interaction is configured to require a specific key combination for mouse, while touch interactions don't require any key to be pressed:
+
+```jsx
+<BarChartPro
+  zoomInteractionConfig={{
+    pan: [
+      { type: 'drag', pointerMode: 'mouse', requiredKeys: ['ControlOrMeta'] },
+      { type: 'drag', pointerMode: 'touch', requiredKeys: [] },
+    ],
+  }}
+  // other props
+/>
+```

docs/pages/x/api/charts/bar-chart-pro.json

@@ -125,6 +125,12 @@
         "name": "arrayOf",
         "description": "Array&lt;{ axisId: number<br>&#124;&nbsp;string, end: number, start: number }&gt;"
       }
+    },
+    "zoomInteractionConfig": {
+      "type": {
+        "name": "shape",
+        "description": "{ pan?: Array&lt;'drag'<br>&#124;&nbsp;{ pointerMode?: 'mouse'<br>&#124;&nbsp;'touch', requiredKeys?: Array&lt;string&gt;, type: 'drag' }&gt;, zoom?: Array&lt;'pinch'<br>&#124;&nbsp;'wheel'<br>&#124;&nbsp;{ pointerMode?: any, requiredKeys?: Array&lt;string&gt;, type: 'wheel' }<br>&#124;&nbsp;{ pointerMode?: any, requiredKeys?: array, type: 'pinch' }&gt; }"
+      }
     }
   },
   "name": "BarChartPro",

docs/pages/x/api/charts/line-chart-pro.json

@@ -120,6 +120,12 @@
         "name": "arrayOf",
         "description": "Array&lt;{ axisId: number<br>&#124;&nbsp;string, end: number, start: number }&gt;"
       }
+    },
+    "zoomInteractionConfig": {
+      "type": {
+        "name": "shape",
+        "description": "{ pan?: Array&lt;'drag'<br>&#124;&nbsp;{ pointerMode?: 'mouse'<br>&#124;&nbsp;'touch', requiredKeys?: Array&lt;string&gt;, type: 'drag' }&gt;, zoom?: Array&lt;'pinch'<br>&#124;&nbsp;'wheel'<br>&#124;&nbsp;{ pointerMode?: any, requiredKeys?: Array&lt;string&gt;, type: 'wheel' }<br>&#124;&nbsp;{ pointerMode?: any, requiredKeys?: array, type: 'pinch' }&gt; }"
+      }
     }
   },
   "name": "LineChartPro",

docs/pages/x/api/charts/scatter-chart-pro.json

@@ -115,6 +115,12 @@
         "name": "arrayOf",
         "description": "Array&lt;{ axisId: number<br>&#124;&nbsp;string, end: number, start: number }&gt;"
       }
+    },
+    "zoomInteractionConfig": {
+      "type": {
+        "name": "shape",
+        "description": "{ pan?: Array&lt;'drag'<br>&#124;&nbsp;{ pointerMode?: 'mouse'<br>&#124;&nbsp;'touch', requiredKeys?: Array&lt;string&gt;, type: 'drag' }&gt;, zoom?: Array&lt;'pinch'<br>&#124;&nbsp;'wheel'<br>&#124;&nbsp;{ pointerMode?: any, requiredKeys?: Array&lt;string&gt;, type: 'wheel' }<br>&#124;&nbsp;{ pointerMode?: any, requiredKeys?: array, type: 'pinch' }&gt; }"
+      }
     }
   },
   "name": "ScatterChartPro",

docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json

@@ -102,7 +102,8 @@
       "description": "The configuration of the y-axes. If not provided, a default axis config is used. An array of <a href='/x/api/charts/axis-config/'>AxisConfig</a> objects."
     },
     "zAxis": { "description": "The configuration of the z-axes." },
-    "zoomData": { "description": "The list of zoom data related to each axis." }
+    "zoomData": { "description": "The list of zoom data related to each axis." },
+    "zoomInteractionConfig": { "description": "Configuration for zoom interactions." }
   },
   "classDescriptions": {},
   "slotDescriptions": {

docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json

@@ -94,7 +94,8 @@
       "description": "The configuration of the y-axes. If not provided, a default axis config is used. An array of <a href='/x/api/charts/axis-config/'>AxisConfig</a> objects."
     },
     "zAxis": { "description": "The configuration of the z-axes." },
-    "zoomData": { "description": "The list of zoom data related to each axis." }
+    "zoomData": { "description": "The list of zoom data related to each axis." },
+    "zoomInteractionConfig": { "description": "Configuration for zoom interactions." }
   },
   "classDescriptions": {},
   "slotDescriptions": {

docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json

@@ -100,7 +100,8 @@
       "description": "The configuration of the y-axes. If not provided, a default axis config is used. An array of <a href='/x/api/charts/axis-config/'>AxisConfig</a> objects."
     },
     "zAxis": { "description": "The configuration of the z-axes." },
-    "zoomData": { "description": "The list of zoom data related to each axis." }
+    "zoomData": { "description": "The list of zoom data related to each axis." },
+    "zoomInteractionConfig": { "description": "Configuration for zoom interactions." }
   },
   "classDescriptions": {},
   "slotDescriptions": {

eslint.config.mjs

@@ -168,6 +168,12 @@ export default defineConfig(
       // migration rules
       '@typescript-eslint/ban-ts-comment': 'off',
       '@typescript-eslint/no-require-imports': 'off',
+      'react-hooks/exhaustive-deps': [
+        'error',
+        {
+          additionalHooks: '(useEnhancedEffect|useIsoLayoutEffect|useEffectAfterFirstRender)',
+        },
+      ],
     },
   },
   // Test start

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

@@ -1911,6 +1911,36 @@ BarChartPro.propTypes = {
       start: PropTypes.number.isRequired,
     }),
   ),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: PropTypes.shape({
+    pan: PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf(['drag']),
+        PropTypes.shape({
+          pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+          requiredKeys: PropTypes.arrayOf(PropTypes.string),
+          type: PropTypes.oneOf(['drag']).isRequired,
+        }),
+      ]).isRequired,
+    ),
+    zoom: PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf(['pinch', 'wheel']),
+        PropTypes.shape({
+          pointerMode: PropTypes.any,
+          requiredKeys: PropTypes.arrayOf(PropTypes.string),
+          type: PropTypes.oneOf(['wheel']).isRequired,
+        }),
+        PropTypes.shape({
+          pointerMode: PropTypes.any,
+          requiredKeys: PropTypes.array,
+          type: PropTypes.oneOf(['pinch']).isRequired,
+        }),
+      ]).isRequired,
+    ),
+  }),
 } as any;
 
 export { BarChartPro };

packages/x-charts-pro/src/ChartContainerPro/useChartContainerProProps.ts

@@ -27,8 +27,15 @@ export const useChartContainerProProps = <
   props: ChartContainerProProps<TSeries, TSignatures>,
   ref: React.Ref<SVGSVGElement>,
 ): UseChartContainerProPropsReturnValue<TSeries, TSignatures> => {
-  const { initialZoom, zoomData, onZoomChange, plugins, apiRef, ...baseProps } =
-    props as ChartContainerProProps<TSeries, AllPluginSignatures>;
+  const {
+    initialZoom,
+    zoomData,
+    onZoomChange,
+    zoomInteractionConfig,
+    plugins,
+    apiRef,
+    ...baseProps
+  } = props as ChartContainerProProps<TSeries, AllPluginSignatures>;
 
   const { chartDataProviderProps, chartsSurfaceProps, children } = useChartContainerProps<TSeries>(
     baseProps,
@@ -40,6 +47,7 @@ export const useChartContainerProProps = <
     initialZoom,
     zoomData,
     onZoomChange,
+    zoomInteractionConfig,
     apiRef,
     plugins: plugins ?? DEFAULT_PLUGINS,
   } as unknown as ChartDataProviderProps<TSeries, TSignatures>;

packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx

@@ -1924,6 +1924,36 @@ LineChartPro.propTypes = {
       start: PropTypes.number.isRequired,
     }),
   ),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: PropTypes.shape({
+    pan: PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf(['drag']),
+        PropTypes.shape({
+          pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+          requiredKeys: PropTypes.arrayOf(PropTypes.string),
+          type: PropTypes.oneOf(['drag']).isRequired,
+        }),
+      ]).isRequired,
+    ),
+    zoom: PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf(['pinch', 'wheel']),
+        PropTypes.shape({
+          pointerMode: PropTypes.any,
+          requiredKeys: PropTypes.arrayOf(PropTypes.string),
+          type: PropTypes.oneOf(['wheel']).isRequired,
+        }),
+        PropTypes.shape({
+          pointerMode: PropTypes.any,
+          requiredKeys: PropTypes.array,
+          type: PropTypes.oneOf(['pinch']).isRequired,
+        }),
+      ]).isRequired,
+    ),
+  }),
 } as any;
 
 export { LineChartPro };

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx

@@ -1912,6 +1912,36 @@ ScatterChartPro.propTypes = {
       start: PropTypes.number.isRequired,
     }),
   ),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: PropTypes.shape({
+    pan: PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf(['drag']),
+        PropTypes.shape({
+          pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+          requiredKeys: PropTypes.arrayOf(PropTypes.string),
+          type: PropTypes.oneOf(['drag']).isRequired,
+        }),
+      ]).isRequired,
+    ),
+    zoom: PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.oneOf(['pinch', 'wheel']),
+        PropTypes.shape({
+          pointerMode: PropTypes.any,
+          requiredKeys: PropTypes.arrayOf(PropTypes.string),
+          type: PropTypes.oneOf(['wheel']).isRequired,
+        }),
+        PropTypes.shape({
+          pointerMode: PropTypes.any,
+          requiredKeys: PropTypes.array,
+          type: PropTypes.oneOf(['pinch']).isRequired,
+        }),
+      ]).isRequired,
+    ),
+  }),
 } as any;
 
 export { ScatterChartPro };

packages/x-charts-pro/src/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.ts

@@ -0,0 +1,13 @@
+import { createSelector } from '@mui/x-charts/internals';
+import { selectorChartZoomState } from './useChartProZoom.selectors';
+import type { ZoomInteractionName, PanInteractionName } from './ZoomInteractionConfig.types';
+
+export const selectorZoomInteractionConfig = createSelector(
+  [selectorChartZoomState, (_state, interactionName: ZoomInteractionName) => interactionName],
+  (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null,
+);
+
+export const selectorPanInteractionConfig = createSelector(
+  [selectorChartZoomState, (_state, interactionName: PanInteractionName) => interactionName],
+  (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null,
+);