const config = {
  node: {
    type: 'circle',
    style: {
      fill: '#f7b84f',
      stroke: '#f5a623',
      fillOpacity: 1,
      size: 26,
      icon: true,
      iconText: icons.user,
      iconFontFamily: fontFamily,
      iconFill: 'white',
      iconFontSize: 20,
      labelOffsetX: 0,
      labelOffsetY: 5,
      labelText: (node) => {
        return (node.data as NodeUserData).name;
      },
    },
  },
  edge: {
    type: 'cubic-horizontal',
    style: {
      endArrow: true,
      lineDash: [0, 0],
      lineWidth: 2,
      labelAutoRotate: false,
      labelText: (edge) => {
        return edge.data.label;
      },
      stroke: (edge) => {
        return edge.data.color;
      },
    },
  },
  combo: {
    type: 'circle',
    style: {
      lineWidth: 2,
      cursor: 'pointer',
      labelPlacement: 'top',
    },
  },
  behaviors: [
    {
      type: 'auto-adapt-label',
    },
    {
      type: 'zoom-canvas',
    },
    {
      type: 'drag-element',
      enable(event: IElementDragEvent) {
        return event.altKey;
      },
    },
    {
      type: 'click-select',
      key: 'click-select',
      multiple: true,
      trigger: ['shift', 'alt'],
      enable(event: IPointerEvent) {
        return event.altKey
          ? ['node', 'canvas'].includes(event.targetType)
          : event.targetType === 'canvas';
      },
    },
  ],
  plugins: [
    {
      type: 'minimap',
      key: 'minimap',
      position: 'left-top',
    },
  ],
  transforms: [
    {
      type: 'process-parallel-edges',
      mode: 'bundle',
      distance: 10,
    },
  ],
}