API

const flow = new Flow(
  {
    container: '#id',
    width: 500,
    height: 500,
    registerNodeConfigs: [
      {
        nodeType: 'rectNode',
        width: 160,
        height: 32,
        drawNodeShape: (cfg, group) => {
          return createRectNode(group, cfg, 160, 32);
        },
      },
      {
        nodeType: 'rootNode',
        width: 80,
        height: 30,
        drawNodeShape: (cfg, group) => {
          return createRootNode(group, cfg, 80, 30);
        },
      },
    ],
  },
  this.graphData
);

import type { Graph, ModelConfig, IGroup, IShape, GraphOptions } from '@antv/g6';

interface FlowConfig {
  container: string | HTMLElement; // 画布宽度
    width: number; // 画布宽度
    height: number; // 画布高度
    orientation?: 'horizontal' | 'vertical'; // 水平排列 | 垂直排列 默认为垂直排列
    registerNodeConfigs?: RegisterNodeConfig[]; // 注册node节点样式配置
    graphType?: 'treeGraph' | 'default'; // 树形结构 | drage图
    showPort?: boolean; // 是否展示port 默认为true
    defaultEdgeType?: string; // 默认新增边的类型 默认为第一条边的type
}

interface RegisterNodeConfig {
  nodeType: string; // 节点类型
  width: number; // keyShape 宽度
  height: number; // keyShape 高度
  drawNodeShape: (cfg: NodeModelConfig, group: IGroup) => IShape; // 绘制节点样式的方法，返回keyShape
  afterDraw?(cfg: NodeModelConfig, group: IGroup): void; // 节点绘制之后的回调函数，可以加动画等
}

interface NodeModelConfig extends ModelConfig {
  inputs?: Array<{ portId: string }>; // 可以入线的 port
  outputs?: Array<{ portId: string }>; // 可以出线的 port
  [key: string]: any; // 可能存在一些自定义的属性值
}

interface GraphData {
  nodes: NodeData[]; // 节点列表
  edges: EdgeData[]; // 边列表
}

interface NodeData {
  type: string; // 节点类型
  id: string; // 节点的唯一标识
  clientX?: number;
  clientY?: number;
  x?: number; // 节点位置的 x 值
  y?: number; // 节点位置的 y 值
  color: string; // 默认绘制的 hover, port高亮的值
  fillColor: string; // 节点填充颜色
  strokeColor: string; // 节点边的颜色
  name: string; // 节点名称
  outputs?: number[][]; // 出口节点位置
  inputs?: number[][]; // 入口节点位置
  [key: string]: any; // 可能存在一些自定义的属性值
}

interface EdgeData {
  type: string; // 边类型
  source: string; // 起始节点 id
  target: string; // 目标节点 id
  sourceAnchor: number; // 起始点port索引
  targetAnchor: number; // 目标点port索引
  style?: EdgeStyle; // 线的样式
  label?: string; // 线的文本
  labelCfg: labelCfg; // 文本配置项
}

export interface EdgeStyle {
    stroke?: string; //边的颜色
    lineWidth?: number; // 边的宽度
    endArrow?: boolean | { path?: string; d?: number; fill?: string; lineWidth?: number; stroke?: string }; // 箭头 为true时使用默认 path为svg画图字符 d为偏移量
    startArrow?: boolean | { path?: string; d?: number; fill?: string; lineWidth?: number; stroke?: string };
    cursor?: string; // 鼠标放置样式
    strokeOpacity: number; // 边透明度
    [key: string]: any; // 其他的属性值
}

export interface labelCfg {
    position?: 'start' | 'middle' | 'end'; // 文本位置默认为middle
    fontFamily?: string;
    fontSize?: number;
    stroke?: string; // 文本颜色
}

flow.bus.on('edgeCreate', (e) => {
  this.$emit('edgeCreate', e);
});

graph.updateLayout({
  type: 'dagre',
  ranksep: 15,
  nodesep: 55,
  workerEnabled: true,
});
const zoom = graph.getZoom();

// 注册node状态
const plugins = [
  {
    name: 'selected',
    exec: (item, { shape, circles, outCircles, data }) => {
      shape.attr('fill', '#ffff00');
      shape.attr('stroke', '#00ff00');
      shape.attr('cursor', 'move');
      circles.forEach((circle) => {
        circle.attr('opacity', 1);
      });
    },
  },
];
this.flow.registerState(plugins, 'node');

// 注册edge状态
const edgeStates = [
  {
    name: 'highlight',
    exec: (edge, shape) => {
      shape.attr('stroke', '#2dde98');
      shape.attr('lineWidth', 1.4);
    },
  },
];
this.flow.registerState(edgeStates, 'edge');

interface StatePlugin {
  name: string; // 状态名
  exec: (item: Item, params: { shape: IShape; circles: IShape; outCircles: IShape; data: NodeData | EdgeData }) => void; // 绘制状态的回调函数
}