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

The community edition of MUI X Charts components.

'use client';

import _extends from "@babel/runtime/helpers/esm/extends";
import useEventCallback from '@mui/utils/useEventCallback';
import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
import { getChartPoint } from "../../../getChartPoint.mjs";
import { selectorIsBrushEnabled } from "./useChartBrush.selectors.mjs";
export const useChartBrush = ({
  store,
  instance,
  params
}) => {
  const {
    chartsLayerContainerRef
  } = instance;
  const isEnabled = store.use(selectorIsBrushEnabled);
  useEnhancedEffect(() => {
    store.set('brush', _extends({}, 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 = useEventCallback(function setBrushCoordinates(point) {
    store.set('brush', _extends({}, store.state.brush, {
      start: store.state.brush.start ?? point,
      current: point
    }));
  });
  const clearBrush = useEventCallback(function clearBrush() {
    store.set('brush', _extends({}, store.state.brush, {
      start: null,
      current: null
    }));
  });
  const setZoomBrushEnabled = useEventCallback(function setZoomBrushEnabled(enabled) {
    if (store.state.brush.isZoomBrushEnabled === enabled) {
      return;
    }
    store.set('brush', _extends({}, store.state.brush, {
      isZoomBrushEnabled: enabled
    }));
  });
  React.useEffect(() => {
    const element = chartsLayerContainerRef.current;
    if (element === null || !isEnabled) {
      return () => {};
    }
    const handleBrushStart = event => {
      if (event.detail.target?.closest('[data-charts-zoom-slider]')) {
        return;
      }
      const point = getChartPoint(element, {
        clientX: event.detail.initialCentroid.x,
        clientY: event.detail.initialCentroid.y
      });
      setBrushCoordinates(point);
    };
    const handleBrush = event => {
      const currentPoint = getChartPoint(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();
    };
  }, [chartsLayerContainerRef, instance, store, clearBrush, setBrushCoordinates, isEnabled]);
  return {
    instance: {
      setBrushCoordinates,
      clearBrush,
      setZoomBrushEnabled
    }
  };
};
useChartBrush.params = {
  brushConfig: true
};
useChartBrush.getDefaultizedParams = ({
  params
}) => {
  return _extends({}, 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
    }
  };
};