X6流程图无法连接多个Edge问题

252 阅读1分钟

先配置allowMulti: true,createEdge时,zIndex=0

 const graph = new Graph({
      container: container,
      connecting: {
        router: 'manhattan',
        connector: {
          name: 'rounded',
          args: {
            radius: 15,
          },
        },
        allowMulti: true,//允许连接多个
          createEdge() {
          return new Shape.Edge({
            tools: [
              {
                name: 'edge-editor',
                args: {
                  attrs: {
                    backgroundColor: '#fff',
                  },
                },
              },
            ],
            zIndex: 0//连接线在最底层
          });
        },
        snap: {
          radius: 20,
        }
      });

为Node添加port时,把zIndex设置为1

这是一点点调试的结果,大概意思是通过zIndex控制Port在Edge的上层,否则无法触发连接事件。

export const portsOnBottom = {
    groups: {
        bottom: {
            position: 'bottom',
            attrs: {
                circle: {
                    r: 4,
                    magnet: true,
                    stroke: '#5F95FF',
                    strokeWidth: 1,
                    fill: '#fff',
                    style: {
                        visibility: 'hidden',
                    },
                },
            },
            zIndex: 1,
        },
    },
    items: [
        {
            group: 'bottom',
        },
    ],
};