@mui/x-charts/esm/BarChart/BarClipPath.js

The community edition of MUI X Charts components.

'use client';

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["maskId", "x", "y", "width", "height", "skipAnimation"];
import * as React from 'react';
import { interpolateNumber } from '@mui/x-charts-vendor/d3-interpolate';
import { useAnimate } from "../hooks/animation/index.js";
import { getRadius } from "./getRadius.js";
import { jsx as _jsx } from "react/jsx-runtime";
function buildClipPath(size, borderRadius, ownerState) {
  const radiusData = _extends({}, ownerState, {
    borderRadius
  });
  const topLeft = Math.min(size, getRadius('top-left', radiusData));
  const topRight = Math.min(size, getRadius('top-right', radiusData));
  const bottomRight = Math.min(size, getRadius('bottom-right', radiusData));
  const bottomLeft = Math.min(size, getRadius('bottom-left', radiusData));
  return `inset(0px round ${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px)`;
}
function barClipRectPropsInterpolator(from, to) {
  const interpolateX = interpolateNumber(from.x, to.x);
  const interpolateY = interpolateNumber(from.y, to.y);
  const interpolateWidth = interpolateNumber(from.width, to.width);
  const interpolateHeight = interpolateNumber(from.height, to.height);
  const interpolateBorderRadius = interpolateNumber(from.borderRadius, to.borderRadius);
  return t => {
    return {
      x: interpolateX(t),
      y: interpolateY(t),
      width: interpolateWidth(t),
      height: interpolateHeight(t),
      borderRadius: interpolateBorderRadius(t)
    };
  };
}
export function useAnimateBarClipRect(props) {
  const initialProps = {
    x: props.x,
    y: props.y + (props.ownerState.layout === 'vertical' ? props.height : 0),
    width: props.ownerState.layout === 'vertical' ? props.width : 0,
    height: props.ownerState.layout === 'vertical' ? 0 : props.height,
    borderRadius: props.borderRadius
  };
  return useAnimate({
    x: props.x,
    y: props.y,
    width: props.width,
    height: props.height,
    borderRadius: props.borderRadius
  }, {
    createInterpolator: barClipRectPropsInterpolator,
    transformProps: p => ({
      x: p.x,
      y: p.y,
      width: p.width,
      height: p.height,
      style: {
        clipPath: buildClipPath(props.ownerState.layout === 'vertical' ? p.height : p.width, p.borderRadius, props.ownerState)
      }
    }),
    applyProps(element, animatedProps) {
      element.setAttribute('x', animatedProps.x.toString());
      element.setAttribute('y', animatedProps.y.toString());
      element.setAttribute('width', animatedProps.width.toString());
      element.setAttribute('height', animatedProps.height.toString());
      element.style.clipPath = animatedProps.style.clipPath;
    },
    initialProps,
    skip: props.skipAnimation,
    ref: props.ref
  });
}
function BarClipRect(props) {
  const animatedProps = useAnimateBarClipRect(_extends({}, props, {
    borderRadius: props.ownerState.borderRadius ?? 0
  }));
  return /*#__PURE__*/_jsx("rect", _extends({}, animatedProps));
}
/**
 * @ignore - internal component.
 */
function BarClipPath(props) {
  const {
      maskId,
      x,
      y,
      width,
      height,
      skipAnimation
    } = props,
    rest = _objectWithoutPropertiesLoose(props, _excluded);
  if (!props.borderRadius || props.borderRadius <= 0) {
    return null;
  }
  return /*#__PURE__*/_jsx("clipPath", {
    id: maskId,
    children: /*#__PURE__*/_jsx(BarClipRect, {
      ownerState: rest,
      x: x,
      y: y,
      width: width,
      height: height,
      skipAnimation: skipAnimation
    })
  });
}
export { BarClipPath };