Edge() — react Function Reference

Architecture documentation for the Edge() function in Fibers.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ Edge() — react Function Reference

Dependency Diagram

graph TD
  1dc2ba04_3025_d54f_6900_c74352cd1781["Edge()"]
  a811b6d7_3802_33c4_440e_c2d161277e14["Fibers.js"]
  1dc2ba04_3025_d54f_6900_c74352cd1781 -->|defined in| a811b6d7_3802_33c4_440e_c2d161277e14
  style 1dc2ba04_3025_d54f_6900_c74352cd1781 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/fiber-debugger/src/Fibers.js lines 171–237

function Edge(props) {
  var points = props.points;
  var path = 'M' + points[0].x + ' ' + points[0].y + ' ';

  if (!points[0].x || !points[0].y) {
    return null;
  }

  for (var i = 1; i < points.length; i++) {
    path += 'L' + points[i].x + ' ' + points[i].y + ' ';
    if (!points[i].x || !points[i].y) {
      return null;
    }
  }

  var lineID = props.id;

  return (
    <svg
      width="100%"
      height="100%"
      style={{
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      }}>
      <defs>
        <path d={path} id={lineID} />
        <marker
          id="markerCircle"
          markerWidth="8"
          markerHeight="8"
          refX="5"
          refY="5">
          <circle cx="5" cy="5" r="3" style={{stroke: 'none', fill: 'black'}} />
        </marker>
        <marker
          id="markerArrow"
          markerWidth="13"
          markerHeight="13"
          refX="2"
          refY="6"
          orient="auto">
          <path d="M2,2 L2,11 L10,6 L2,2" style={{fill: 'black'}} />
        </marker>
      </defs>

      <use
        xlinkHref={`#${lineID}`}
        fill="none"
        stroke={strokes[props.kind]}
        style={{
          markerStart: 'url(#markerCircle)',
          markerEnd: 'url(#markerArrow)',
        }}
      />
      <text>
        <textPath xlinkHref={`#${lineID}`}>
          {'     '}
          {props.children}
        </textPath>
      </text>
    </svg>
  );
}