All files / src/components ConnectingLine.tsx

100% Statements 10/10
100% Branches 0/0
100% Functions 1/1
100% Lines 6/6

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 391x             1x 10x 10x 10x   10x                                                    
import * as React from "react";
 
interface IProps {
  lineCoordinate: { x1: number; y1: number; x2: number; y2: number };
  style?: React.CSSProperties;
}
 
export const ConnectingLine: React.FunctionComponent<IProps> = props => {
  const { x1, y1, x2, y2 } = props.lineCoordinate;
  const fixedX2 = x2 - 8;
  const fixedY2 = y2 - 13;
 
  return (
    <g>
      <defs>
        <marker
          id="markerArrow"
          markerWidth="10"
          markerHeight="10"
          refX="0"
          refY="3"
          orient="auto"
          markerUnits="strokeWidth"
        >
          <path d="M0,0 L0,6 L9,3 z" style={props.style} />
        </marker>
      </defs>
      <line
        x1={x1}
        y1={y1}
        x2={fixedX2}
        y2={fixedY2}
        style={props.style}
        marker-end="url(#markerArrow)"
      />
    </g>
  );
};