victory-canvas/lib/canvas-group.js

HTML5 Canvas Components for Victory

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CanvasGroup = void 0;
var _react = _interopRequireDefault(require("react"));
var _useCanvasContext = require("./hooks/use-canvas-context");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const CanvasGroup = props => {
  const canvasRef = _react.default.useRef(null);
  const {
    children,
    width = 0,
    height = 0,
    clipWidth,
    padding
  } = props;
  const clear = _react.default.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.default.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.default.createElement(_useCanvasContext.CanvasContext.Provider, {
    value: {
      canvasRef,
      clear,
      clip
    }
  }, /*#__PURE__*/_react.default.createElement("foreignObject", {
    width: width,
    height: height,
    x: 0,
    y: 0
  }, /*#__PURE__*/_react.default.createElement("canvas", {
    width: width,
    height: height,
    ref: canvasRef
  })), children);
};
exports.CanvasGroup = CanvasGroup;
CanvasGroup.role = "container";