antv x6开发技能累计

版本

"@antv/x6": "^2.0.0",
"vue": "^2.6.11",

拖拽节点大小工具

"@antv/x6-plugin-transform": "^2.1.8",

链接桩绘制

我喜欢通过群组的方式去定义链接桩

const processDefaultGroups = {
  right: {
    position: {
      name: 'right',
      args: {
        strict: true,
        dx: 10
      }
    },
    ...processCircle
  },
  left: {
    position: {
      name: 'left',
      args: {
        strict: true,
        dx: -10
      }
    },
    ...processCircle
  }
};

{
{
      groups: cloneDeep(processDefaultGroups),
      items: [
        {
          group: 'right'
        }
      ]
    };
}

// 通过svg绘制链接桩
const processCircle = {
  markup: [
    {
      tagName: 'circle',
      selector: 'circle'
    },
    {
      tagName: 'path',
      selector: 'path'
    }
  ],
  attrs: {
    circle: {
      magnet: true,
      r: 10,
      stroke: '#D9D9D9',
      fill: '#ffffff',
      strokeWidth: 2,
      filter: {
        name: 'dropShadow',
        args: {
          dx: 0,
          dy: 2,
          blur: 4,
          color: 'rgba(0,0,0,0.12)'
        }
      }
    },
    path: {
      d: 'M -1 -4 L 3 0 L -1 4',
      fill: 'transparent',
      stroke: '#222222',
      strokeWidth: 2,
      strokeLinecap: 'round',
      strokeLineJoin: 'round'
    }
  }
};

// 可通过群组名来动态增加和删除链接桩
node.addPort({ group: 'left' });

const ports: any = node.getPorts().find((d) => d.group === 'left');
ports && node.removePort(ports);

嵌套节点

embedding: {
enabled: true,
findParent： // 判断是否可以嵌套
},

假如节点上有个按钮，点击后可以激活输入框，想点击按钮的时候不触发X6的节点选中事件

添加@mousedown.stop

自定义高亮事件

利用静态方法Graph.registerHighlighter

Graph.registerHighlighter(
      'opacity',
      {
        highlight(cellView: any, magnet: any) {
            magnet.setAttribute('class', 'highlight-opacity');
        },

        unhighlight(cellView: any, magnetEl: any) {
          magnetEl.removeAttribute('class');
        }
      },
      true
    );
// 使用
 highlighting: {
      magnetAdsorbed: {
        name: 'opacity'
      },
 }

箭头在链接桩边缘连接

  connectionPoint: 'boundary',

验证magnet是否可以连出线

  validateMagnet(this: Graph, { magnet }: any) {
        if (magnet.getAttribute('group') === 'left') {
          return false;
        }
        return !!magnet;
      }

连线的时候，修改链接桩样式

      createEdge(
        this: Graph,
        args: {
          sourceCell: Node;
          sourceView: NodeView;
          sourceMagnet: Element;
        }
      ) {
        const { sourceCell } = args;
          args.sourceCell.setPortProp(
            (sourceCell as any).getPortsByGroup('right')[0].id,
            {
              attrs: {
                circle: {
                  fill: '#697DFF',
                  stroke: '#ffffff'
                },
                path: {
                  stroke: '#ffffff'
                }
              }
          );
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: '#697DFF',
              strokeWidth: 2,
              targetMarker: {
                name: 'block',
                width: 8,
                height: 8
              }
            }
          }
        });
      },