All files / src/components GraphNode.tsx

68.18% Statements 15/22
75% Branches 3/4
25% Functions 1/4
68.18% Lines 15/22

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 681x 1x 1x   1x                     1x 10590x 10590x 10590x 10590x 10590x   10582x         10582x                       10582x                                   1x                 1x  
import * as React from "react";
import { GraphConfigContext, IGraphConfig } from "../contexts";
import { getNodeConfig, updateNode } from "../utils";
import { IGraphProps } from "./Graph";
import { GraphNodeState, ICanvasNode, TSetData } from "./Graph.interface";
 
interface IProps {
  node: ICanvasNode;
  graphProps: IGraphProps;
  setData: TSetData;
  onNodeMouseDown: React.EventHandler<React.MouseEvent<SVGGElement>>;
  onMouseEnter: React.EventHandler<React.MouseEvent<SVGGElement>>;
  onMouseLeave: React.EventHandler<React.MouseEvent<SVGGElement>>;
}
 
const GraphNode: React.FunctionComponent<IProps> = props => {
  const node = props.node;
  const setData = props.setData.bind(null);
  const graphConfig = React.useContext<IGraphConfig>(GraphConfigContext);
  const shape = node.shape ? node.shape : "rect";
  const nodeConfig = getNodeConfig(node, graphConfig);
 
  Iif (!nodeConfig.render) {
    throw new Error(`Missing "render" method in node config ${shape}`);
  }
 
  // add comment to node
  const onNodeDoubleClick = (evt: React.MouseEvent) => {
    evt.stopPropagation();
 
    updateNode(
      node.id,
      {
        state: GraphNodeState.editing
      },
      setData
    );
  };
 
  return (
    <g
      key={node.id}
      id={`node-container-${node.id}`}
      onMouseDown={props.onNodeMouseDown}
      onMouseEnter={props.onMouseEnter}
      onMouseLeave={props.onMouseLeave}
      onDoubleClick={onNodeDoubleClick}
    >
      {nodeConfig.render({
        model: node,
        graphProps: props.graphProps,
        setData: props.setData
      })}
    </g>
  );
};
 
const GraphNodeMemo = React.memo(GraphNode, (prevProps, nextProps) => {
  const prevNode = prevProps.node;
  const nextNode = nextProps.node;
 
  return ["id", "name", "state", "data", "x", "y"].every(
    key => prevNode[key] === nextNode[key]
  );
});
 
export { GraphNodeMemo as GraphNode };