Line data    Source code

       1              : import * as React from 'react';
       2              : 
       3              : import * as styles from './graph.module.css';
       4              : 
       5              : /// The side of a node that a port sits on
       6              : export type GraphPortSide = 'top' | 'bottom' | 'left' | 'right';
       7              : 
       8              : /// The half circle of the border of a port of radius 5, bulging out of the node
       9            1 : const PORT_BORDER: Record<GraphPortSide, string> = {
      10            1 :     top: 'M -5 0 A 5 5 0 0 1 5 0',
      11            1 :     bottom: 'M -5 0 A 5 5 0 0 0 5 0',
      12            1 :     left: 'M 0 -5 A 5 5 0 0 0 0 5',
      13            1 :     right: 'M 0 -5 A 5 5 0 0 1 0 5',
      14            1 : };
      15              : 
      16              : export interface GraphPortProps {
      17              :     /// The center of the port, on the border of its node
      18              :     x: number;
      19              :     y: number;
      20              :     side: GraphPortSide;
      21              :     /// Is an edge of the port highlighted?
      22              :     highlighted?: boolean;
      23              :     /// More attributes of the port group, e.g. data attributes of tests
      24              :     [attribute: `data-${string}`]: string | undefined;
      25              : }
      26              : 
      27              : /// A port of a graph node: a half circle on the border of the node with a dot in it
      28            1 : export function GraphPort(props: GraphPortProps): React.ReactElement {
      29            1 :     const { x, y, side, highlighted, ...data } = props;
      30            1 :     return (
      31            1 :         <g
      32            1 :             className={styles.port}
      33            1 :             transform={`translate(${x}, ${y})`}
      34            1 :             data-highlighted={highlighted || undefined}
      35            1 :             aria-hidden="true"
      36            1 :             {...data}
      37              :         >
      38            1 :             <path className={styles.port_border} d={PORT_BORDER[side]} />
      39            1 :             <circle className={styles.port_mask} r={4} />
      40            1 :             <circle className={styles.port_dot} r={2.5} />
      41            1 :         </g>
      42              :     );
      43            1 : }