@mui/x-charts-pro 8.13.0 → 8.14.0

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.js

@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { translateZoom } from "./useZoom.utils.js";
+import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
+export const usePanOnPressAndDrag = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const startRef = React.useRef(null);
+  const config = useSelector(store, selectorPanInteractionConfig, ['pressAndDrag']);
+  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  React.useEffect(() => {
+    if (!isPanOnPressAndDragEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomPressAndDrag', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isPanOnPressAndDragEnabled, config, instance]);
+
+  // Add event for chart panning with press and drag
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isPanOnPressAndDragEnabled) {
+      return () => {};
+    }
+    const handlePressAndDragStart = event => {
+      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
+        startRef.current = store.value.zoom.zoomData;
+      }
+    };
+    const handlePressAndDragEnd = () => {
+      startRef.current = null;
+    };
+    const throttledCallback = rafThrottle((event, zoomData) => {
+      const newZoomData = translateZoom(zoomData, {
+        x: event.detail.activeDeltaX,
+        y: -event.detail.activeDeltaY
+      }, {
+        width: drawingArea.width,
+        height: drawingArea.height
+      }, optionsLookup);
+      setZoomDataCallback(newZoomData);
+    });
+    const handlePressAndDrag = event => {
+      const zoomData = startRef.current;
+      if (!zoomData) {
+        return;
+      }
+      throttledCallback(event, zoomData);
+    };
+    const pressAndDragHandler = instance.addInteractionListener('zoomPressAndDrag', handlePressAndDrag);
+    const pressAndDragStartHandler = instance.addInteractionListener('zoomPressAndDragStart', handlePressAndDragStart);
+    const pressAndDragEndHandler = instance.addInteractionListener('zoomPressAndDragEnd', handlePressAndDragEnd);
+    return () => {
+      pressAndDragStartHandler.cleanup();
+      pressAndDragHandler.cleanup();
+      pressAndDragEndHandler.cleanup();
+      throttledCallback.clear();
+    };
+  }, [instance, svgRef, isPanOnPressAndDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
+};

package/esm/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -11,6 +11,7 @@ import { useZoomOnWheel } from "./gestureHooks/useZoomOnWheel.js";
 import { useZoomOnPinch } from "./gestureHooks/useZoomOnPinch.js";
 import { usePanOnDrag } from "./gestureHooks/usePanOnDrag.js";
 import { useZoomOnTapAndDrag } from "./gestureHooks/useZoomOnTapAndDrag.js";
+import { usePanOnPressAndDrag } from "./gestureHooks/usePanOnPressAndDrag.js";
 import { initializeZoomInteractionConfig } from "./initializeZoomInteractionConfig.js";
 import { initializeZoomData } from "./initializeZoomData.js";
 export const useChartProZoom = pluginData => {
@@ -133,6 +134,7 @@ export const useChartProZoom = pluginData => {
 
   // Add events
   usePanOnDrag(pluginData, setZoomDataCallback);
+  usePanOnPressAndDrag(pluginData, setZoomDataCallback);
   useZoomOnWheel(pluginData, setZoomDataCallback);
   useZoomOnPinch(pluginData, setZoomDataCallback);
   useZoomOnTapAndDrag(pluginData, setZoomDataCallback);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.13.0
+ * @mui/x-charts-pro v8.14.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.d.ts

@@ -7,11 +7,7 @@ export declare const selectorZoomInteractionConfig: import("reselect").Selector<
   };
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
 }) | null, [interactionName: "wheel" | "pinch" | "tapAndDrag"]>;
-export declare const selectorPanInteractionConfig: import("reselect").Selector<any, (Omit<{
-  type: "drag";
-  pointerMode?: import("./ZoomInteractionConfig.types.js").InteractionMode | undefined;
-  requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[] | undefined;
-}, "pointerMode"> & {
+export declare const selectorPanInteractionConfig: import("reselect").Selector<any, (Omit<import("./ZoomInteractionConfig.types.js").PanInteraction, "pointerMode"> & {
   mouse: {
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
@@ -19,4 +15,4 @@ export declare const selectorPanInteractionConfig: import("reselect").Selector<a
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
-}) | null, [interactionName: "drag"]>;
+}) | null, [interactionName: "drag" | "pressAndDrag"]>;

package/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts

@@ -12,6 +12,7 @@ export type ZoomInteractionConfig = {
   /**
    * Defines the interactions that trigger panning.
    * - `drag`: Pans the chart when dragged with the mouse.
+   * - `pressAndDrag`: Pans the chart by pressing and holding, then dragging. Useful for avoiding conflicts with selection gestures.
    *
    * @default ['drag']
    */
@@ -31,7 +32,7 @@ export type DefaultizedZoomInteractionConfig = {
   pan: Entry<PanInteraction>;
 };
 export type ZoomInteraction = WheelInteraction | PinchInteraction | TapAndDragInteraction;
-export type PanInteraction = DragInteraction;
+export type PanInteraction = DragInteraction | PressAndDragInteraction;
 export type ZoomInteractionName = ZoomInteraction['type'];
 export type PanInteractionName = PanInteraction['type'];
 export type InteractionMode = Exclude<PointerMode, 'pen'>;
@@ -75,6 +76,9 @@ export type DragInteraction = Unpack<{
 export type TapAndDragInteraction = Unpack<{
   type: 'tapAndDrag';
 } & AllModeProp & AllKeysProp>;
+export type PressAndDragInteraction = Unpack<{
+  type: 'pressAndDrag';
+} & AllModeProp & AllKeysProp>;
 export type AnyInteraction = {
   type: string;
   pointerMode?: InteractionMode;

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const usePanOnPressAndDrag: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.js

@@ -0,0 +1,80 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePanOnPressAndDrag = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _internals = require("@mui/x-charts/internals");
+var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _useZoom = require("./useZoom.utils");
+var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
+const usePanOnPressAndDrag = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
+  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
+  const startRef = React.useRef(null);
+  const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.selectorPanInteractionConfig, ['pressAndDrag']);
+  const isPanOnPressAndDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  React.useEffect(() => {
+    if (!isPanOnPressAndDragEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomPressAndDrag', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isPanOnPressAndDragEnabled, config, instance]);
+
+  // Add event for chart panning with press and drag
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isPanOnPressAndDragEnabled) {
+      return () => {};
+    }
+    const handlePressAndDragStart = event => {
+      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
+        startRef.current = store.value.zoom.zoomData;
+      }
+    };
+    const handlePressAndDragEnd = () => {
+      startRef.current = null;
+    };
+    const throttledCallback = (0, _rafThrottle.rafThrottle)((event, zoomData) => {
+      const newZoomData = (0, _useZoom.translateZoom)(zoomData, {
+        x: event.detail.activeDeltaX,
+        y: -event.detail.activeDeltaY
+      }, {
+        width: drawingArea.width,
+        height: drawingArea.height
+      }, optionsLookup);
+      setZoomDataCallback(newZoomData);
+    });
+    const handlePressAndDrag = event => {
+      const zoomData = startRef.current;
+      if (!zoomData) {
+        return;
+      }
+      throttledCallback(event, zoomData);
+    };
+    const pressAndDragHandler = instance.addInteractionListener('zoomPressAndDrag', handlePressAndDrag);
+    const pressAndDragStartHandler = instance.addInteractionListener('zoomPressAndDragStart', handlePressAndDragStart);
+    const pressAndDragEndHandler = instance.addInteractionListener('zoomPressAndDragEnd', handlePressAndDragEnd);
+    return () => {
+      pressAndDragStartHandler.cleanup();
+      pressAndDragHandler.cleanup();
+      pressAndDragEndHandler.cleanup();
+      throttledCallback.clear();
+    };
+  }, [instance, svgRef, isPanOnPressAndDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
+};
+exports.usePanOnPressAndDrag = usePanOnPressAndDrag;

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -18,6 +18,7 @@ var _useZoomOnWheel = require("./gestureHooks/useZoomOnWheel");
 var _useZoomOnPinch = require("./gestureHooks/useZoomOnPinch");
 var _usePanOnDrag = require("./gestureHooks/usePanOnDrag");
 var _useZoomOnTapAndDrag = require("./gestureHooks/useZoomOnTapAndDrag");
+var _usePanOnPressAndDrag = require("./gestureHooks/usePanOnPressAndDrag");
 var _initializeZoomInteractionConfig = require("./initializeZoomInteractionConfig");
 var _initializeZoomData = require("./initializeZoomData");
 const useChartProZoom = pluginData => {
@@ -140,6 +141,7 @@ const useChartProZoom = pluginData => {
 
   // Add events
   (0, _usePanOnDrag.usePanOnDrag)(pluginData, setZoomDataCallback);
+  (0, _usePanOnPressAndDrag.usePanOnPressAndDrag)(pluginData, setZoomDataCallback);
   (0, _useZoomOnWheel.useZoomOnWheel)(pluginData, setZoomDataCallback);
   (0, _useZoomOnPinch.useZoomOnPinch)(pluginData, setZoomDataCallback);
   (0, _useZoomOnTapAndDrag.useZoomOnTapAndDrag)(pluginData, setZoomDataCallback);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-charts-pro",
-  "version": "8.13.0",
+  "version": "8.14.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Charts components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -28,14 +28,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
-    "@mui/utils": "^7.3.2",
+    "@mui/utils": "^7.3.3",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-charts": "8.13.0",
-    "@mui/x-internals": "8.12.0",
-    "@mui/x-license": "8.12.0",
-    "@mui/x-charts-vendor": "8.12.0",
-    "@mui/x-internal-gestures": "0.3.1"
+    "@mui/x-charts-vendor": "8.14.0",
+    "@mui/x-charts": "8.14.0",
+    "@mui/x-internals": "8.14.0",
+    "@mui/x-internal-gestures": "0.3.3",
+    "@mui/x-license": "8.14.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",