All files / src/built-in line.tsx

100% Statements 11/11
50% Branches 2/4
100% Functions 4/4
100% Lines 11/11

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 441x 1x     1x 21166x           1x     10583x           1x   10583x             10583x 10583x   10583x                      
import * as React from "react";
import { GraphEdgeState, ICanvasEdge } from "../components";
import { IEdgeConfig } from "../contexts";
 
const getControlPointDistance = (y1: number, y2: number): number => {
  return Math.min(
    5 * 15, // 5 is port height
    Math.max(5 * 3, Math.abs((y1 - (y2 + 5)) / 2))
  );
};
 
const getPathD = (x1: number, x2: number, y1: number, y2: number): string => {
  // The ports are even width in px. and paths are 2 px. wide. We therefore subtract 1 from the HalfWidth to have them appear centered -- center of the path lines up with center of the port.
 
  return `M${x1 + 2 - 1},${y1}C${x1 + 2 - 1},${y1 -
    getControlPointDistance(y1, y2)},${x2 + 2 - 1},${y2 +
    5 +
    getControlPointDistance(y1, y2)},${x2 + 2 - 1},${y2 + 5}`;
};
 
export const line: IEdgeConfig = {
  getStyle(edge: ICanvasEdge): React.CSSProperties {
    return {
      cursor: "crosshair",
      stroke: edge.state === GraphEdgeState.selected ? "#015cda" : "#ccc",
      strokeWidth: "2"
    };
  },
  render(args): React.ReactNode {
    const edge = args.model;
    const style = line.getStyle ? line.getStyle(edge) : {};
 
    return (
      <path
        key={edge.id}
        d={getPathD(args.x2, args.x1, args.y2, args.y1)}
        fill="none"
        style={style}
        id={`edge${edge.id}`}
      />
    );
  }
};