victory-canvas/es/canvas-group.js

HTML5 Canvas Components for Victory

import React from "react";
import { CanvasContext } from "./hooks/use-canvas-context";
export const CanvasGroup = props => {
  const canvasRef = React.useRef(null);
  const {
    children,
    width = 0,
    height = 0,
    clipWidth,
    padding
  } = props;
  const clear = React.useCallback(ctx => {
    return ctx.clearRect(0, 0, width, height);
  }, [width, height]);

  // This needs to be called in the child component to ensure it is called after the
  // shape is drawn
  const clip = React.useCallback(ctx => {
    const paddingRight = typeof padding === "number" ? padding : padding?.right || 0;
    const paddingLeft = typeof padding === "number" ? padding : padding?.left || 0;
    const maxClipWidth = width - paddingRight - paddingLeft;
    ctx.clearRect(width - paddingRight, 0, clipWidth ? (maxClipWidth - clipWidth) * -1 : 0, height);
  }, [width, height, padding, clipWidth]);
  return /*#__PURE__*/React.createElement(CanvasContext.Provider, {
    value: {
      canvasRef,
      clear,
      clip
    }
  }, /*#__PURE__*/React.createElement("foreignObject", {
    width: width,
    height: height,
    x: 0,
    y: 0
  }, /*#__PURE__*/React.createElement("canvas", {
    width: width,
    height: height,
    ref: canvasRef
  })), children);
};
CanvasGroup.role = "container";