All files / src/components GraphOneNodePorts.tsx

90.48% Statements 19/21
75% Branches 6/8
100% Functions 3/3
90% Lines 18/20

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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 761x 1x 1x                                           1x 10590x 10590x 10590x 10590x   10582x       10582x         10582x   10582x     31739x 31739x   31739x       31739x   31739x 31739x                                          
import * as React from "react";
import { GraphConfigContext, IGraphConfig } from "../contexts";
import { getNodeConfig, getPortPosition } from "../utils";
import { IGraphProps } from "./Graph";
import { ICanvasNode, ICanvasPort, TSetData } from "./Graph.interface";
 
interface IProps {
  node: ICanvasNode;
  graphProps: IGraphProps;
  setData: TSetData;
  onPortMouseDown(
    node: ICanvasNode,
    port: ICanvasPort
  ): React.EventHandler<React.MouseEvent<SVGGElement>>;
  onMouseEnter(
    node: ICanvasNode,
    port: ICanvasPort
  ): React.EventHandler<React.MouseEvent<SVGGElement>>;
  onMouseLeave(
    node: ICanvasNode,
    port: ICanvasPort
  ): React.EventHandler<React.MouseEvent<SVGGElement>>;
}
 
export const GraphOneNodePorts: React.FunctionComponent<IProps> = props => {
  const { node, graphProps } = props;
  const setData = props.setData.bind(null);
  const graphConfig = React.useContext<IGraphConfig>(GraphConfigContext);
  const nodeConfig = getNodeConfig(node, graphConfig);
 
  Iif (!nodeConfig.getPorts) {
    return null;
  }
 
  const ports = nodeConfig.getPorts({
    model: node,
    graphProps,
    setData
  });
  const reversePorts = ports.reverse(); // to make tooltip(hover on port) have a correct order
 
  return (
    <g>
      {reversePorts.map(p => {
        const portShape = p.shape ? p.shape : "default";
        const portConfig = graphConfig.getPortConfigByName(portShape);
 
        Iif (!portConfig || !portConfig.render) {
          return null;
        }
 
        const pos = getPortPosition(node, p, graphConfig);
 
        return React.useMemo(() => {
          return (
            <g
              key={`${node.id}${p.id}`}
              onMouseDown={props.onPortMouseDown(node, p)}
              onMouseEnter={props.onMouseEnter(node, p)}
              onMouseLeave={props.onMouseLeave(node, p)}
            >
              {portConfig.render({
                model: p,
                parentNode: node,
                graphProps,
                setData,
                ...pos
              })}
            </g>
          );
        }, [node.x, node.y, p.position, p.state]);
      })}
    </g>
  );
};