victory-canvas/lib/canvas-point.js

HTML5 Canvas Components for Victory

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CanvasPoint = void 0;
var _react = _interopRequireDefault(require("react"));
var _victoryCore = require("victory-core");
var _useCanvasContext = require("./hooks/use-canvas-context");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const getPath = props => {
  const {
    x,
    y,
    size,
    symbol
  } = props;
  if (props.getPath) {
    return props.getPath(x, y, size);
  }
  const pathFunctions = {
    circle: _victoryCore.PointPathHelpers.circle,
    square: _victoryCore.PointPathHelpers.square,
    diamond: _victoryCore.PointPathHelpers.diamond,
    triangleDown: _victoryCore.PointPathHelpers.triangleDown,
    triangleUp: _victoryCore.PointPathHelpers.triangleUp,
    plus: _victoryCore.PointPathHelpers.plus,
    minus: _victoryCore.PointPathHelpers.minus,
    star: _victoryCore.PointPathHelpers.star,
    cross: _victoryCore.PointPathHelpers.cross
  };
  const symbolFunction = typeof pathFunctions[symbol] === "function" ? pathFunctions[symbol] : pathFunctions.circle;
  return symbolFunction(x, y, size);
};
const evaluateProps = props => {
  /**
   * Potential evaluated props are:
   * `size`
   * `style`
   * `symbol`
   */
  const size = _victoryCore.Helpers.evaluateProp(props.size, props);
  const style = _victoryCore.Helpers.evaluateStyle(props.style, props);
  const symbol = _victoryCore.Helpers.evaluateProp(props.symbol, props);
  return Object.assign({}, props, {
    size,
    style,
    symbol
  });
};
const CanvasPoint = props => {
  const {
    canvasRef
  } = (0, _useCanvasContext.useCanvasContext)();
  const modifiedProps = evaluateProps(props);
  const draw = _react.default.useCallback(ctx => {
    const {
      style
    } = modifiedProps;
    const path = getPath(modifiedProps);
    ctx.fillStyle = style.fill;
    const path2d = new Path2D(path);
    ctx.fill(path2d);
  }, [modifiedProps]);
  _react.default.useEffect(() => {
    const ctx = canvasRef.current?.getContext("2d");
    if (!ctx) return;
    draw(ctx);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return null;
};
exports.CanvasPoint = CanvasPoint;