基于G6的流程编辑器

• 使用G6自带的Behavior来为两个node生成edge。
  官网示例
  缺点是只能通过click事件来触发。

• 自己通过模拟拖拽的方式实现
  因为node本身也是可以拖拽的，这样就和拖拽连线产生来冲突。
  因此拖拽连线的起点，就需要做特殊出来，判断在linkPoint上才触发创建edge的事件。
  本来没有什么头绪，后来发现官网又一个类似的示例
  大致思路是当鼠标按下时，判断如果当前位置处于linkPoint上，则创建一个source和target均为当前node的edge，然后当mousemove的时候，去更新edge的位置(即x和y的值更新为当前鼠标的坐标),当鼠标松开时，则判断是否处于node范围，如果处于某个node范围中，则将edge的target更新为该node，否则删除该edge。

  比较好的实现方式是和示例一样,以registerBehavior的方式将相关事件都注册在一起。

G6.registerBehavior('drag-point-add-edge', {
    getEvents() {
      return {
 click: 'onMouseClick',
 mousedown: 'onMouseDown',
 mousemove: 'onMouseMove',
 mouseup: 'onMouseUp',
 'node:click': 'onNodeClick',
 'edge:click': 'onEdgeClick'
      };
    },
    onMouseDown(ev: any) {
      ev.preventDefault();
      const self = this;
      const node = ev.item;
      if (node && ev.target.get('className').startsWith('link-point')) {
 const graph = self.graph as Graph;
 const model = node.getModel();

 if (!self.addingEdge && !self.edge) {
   self.edge = graph.addItem('edge', {
     source: model.id,
     target: model.id
   });
   self.addingEdge = true;
 }
      }
    },
    onMouseMove(ev: any) {
      ev.preventDefault();
      const self = this;
      const point = { x: ev.x, y: ev.y };
      if (self.addingEdge && self.edge) {
 (self.graph as Graph).updateItem(self.edge as IEdge, {
   target: point
 });
      }
    },
    onMouseUp(ev: any) {
      ev.preventDefault();
      const self = this;
      const node = ev.item;
      const graph = self.graph as Graph;
      // 这里会走两次，第二次destroyed为true
      // 因此增加判断
      if (node && !node.destroyed && node.getType() === 'node') {
 const model = node.getModel();
 console.log(model);
 if (self.addingEdge && self.edge) {
   graph.updateItem(self.edge as IEdge, {
     target: model.id
   });
   self.edge = null;
   self.addingEdge = false;
 }
      } else {
 if (self.addingEdge && self.edge) {
   graph.removeItem(self.edge as IEdge);
   self.edge = null;
   self.addingEdge = false;
 }
      }
    }
  });