@mui/x-charts/internals/plugins/featurePlugins/useChartBrush/useChartBrush.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useChartBrush = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
var React = _interopRequireWildcard(require("react"));
var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
var _getSVGPoint = require("../../../getSVGPoint");
var _useChartBrush = require("./useChartBrush.selectors");
const useChartBrush = ({
  store,
  svgRef,
  instance,
  params
}) => {
  const isEnabled = store.use(_useChartBrush.selectorIsBrushEnabled);
  (0, _useEnhancedEffect.default)(() => {
    store.set('brush', (0, _extends2.default)({}, store.state.brush, {
      enabled: params.brushConfig.enabled,
      preventTooltip: params.brushConfig.preventTooltip,
      preventHighlight: params.brushConfig.preventHighlight
    }));
  }, [store, params.brushConfig.enabled, params.brushConfig.preventTooltip, params.brushConfig.preventHighlight]);
  const setBrushCoordinates = (0, _useEventCallback.default)(function setBrushCoordinates(point) {
    store.set('brush', (0, _extends2.default)({}, store.state.brush, {
      start: store.state.brush.start ?? point,
      current: point
    }));
  });
  const clearBrush = (0, _useEventCallback.default)(function clearBrush() {
    store.set('brush', (0, _extends2.default)({}, store.state.brush, {
      start: null,
      current: null
    }));
  });
  const setZoomBrushEnabled = (0, _useEventCallback.default)(function setZoomBrushEnabled(enabled) {
    if (store.state.brush.isZoomBrushEnabled === enabled) {
      return;
    }
    store.set('brush', (0, _extends2.default)({}, store.state.brush, {
      isZoomBrushEnabled: enabled
    }));
  });
  React.useEffect(() => {
    const element = svgRef.current;
    if (element === null || !isEnabled) {
      return () => {};
    }
    const handleBrushStart = event => {
      if (event.detail.target?.closest('[data-charts-zoom-slider]')) {
        return;
      }
      const point = (0, _getSVGPoint.getSVGPoint)(element, {
        clientX: event.detail.initialCentroid.x,
        clientY: event.detail.initialCentroid.y
      });
      setBrushCoordinates(point);
    };
    const handleBrush = event => {
      const currentPoint = (0, _getSVGPoint.getSVGPoint)(element, {
        clientX: event.detail.centroid.x,
        clientY: event.detail.centroid.y
      });
      setBrushCoordinates(currentPoint);
    };
    const brushStartHandler = instance.addInteractionListener('brushStart', handleBrushStart);
    const brushHandler = instance.addInteractionListener('brush', handleBrush);
    const brushCancelHandler = instance.addInteractionListener('brushCancel', clearBrush);
    const brushEndHandler = instance.addInteractionListener('brushEnd', clearBrush);
    return () => {
      brushStartHandler.cleanup();
      brushHandler.cleanup();
      brushEndHandler.cleanup();
      brushCancelHandler.cleanup();
    };
  }, [svgRef, instance, store, clearBrush, setBrushCoordinates, isEnabled]);
  return {
    instance: {
      setBrushCoordinates,
      clearBrush,
      setZoomBrushEnabled
    }
  };
};
exports.useChartBrush = useChartBrush;
useChartBrush.params = {
  brushConfig: true
};
useChartBrush.getDefaultizedParams = ({
  params
}) => {
  return (0, _extends2.default)({}, params, {
    brushConfig: {
      enabled: params?.brushConfig?.enabled ?? false,
      preventTooltip: params?.brushConfig?.preventTooltip ?? true,
      preventHighlight: params?.brushConfig?.preventHighlight ?? true
    }
  });
};
useChartBrush.getInitialState = params => {
  return {
    brush: {
      enabled: params.brushConfig.enabled,
      isZoomBrushEnabled: false,
      preventTooltip: params.brushConfig.preventTooltip,
      preventHighlight: params.brushConfig.preventHighlight,
      start: null,
      current: null
    }
  };
};