antv/x6 port显示标签的两种方式

有三种方式，前两种借助了portMarkup，运用上会一些麻烦，两种方法的共有步骤如下：

// 创建节点的时候都需要加上portMarkup属性
let node = graph.createNode({
        shape: data.shape,
        data: data.data,
        portMarkup: [Markup.getForeignObjectMarkup()],
        attrs: {
          body: { fillOpacity: "0.15", strokeOpacity: "0.6" },
          label: { text: data.label, fill: "#2CFEFF" }
        },
      });

方式1： js为主

第一步：

// 初始化graph时，监听onPortRendered
this.graph = new Graph({
      container: container,
     
      onPortRendered(args) {
        const selectors = args.contentSelectors
        const container = selectors && selectors.foContent
        if (container) {
          container.setAttribute('class', 'my-port')
          // container.style.width = '200px'
          // container.style.height = '30px'
          // container.style.zIndex = '10000'
          container.appendChild(document.createElement('div'))
          // 想要获取动态值，则通过args里的node port等相应获取
          container.childNodes[0].innerHTML = 'testsss'  
        }
      },
      
    });

第二步：

// 设置port时，在attrs添加fo 设置port大小方位，添加magnet属性，true则可以发出连线
outparams: {
    position: "absolute",
    attrs: {   
      fo: {
        width: 16,
        height: 16,
        x: -8,
        y: -8,
        magnet: 'true',
      },
    }
  },

第三步：

// css设置添加的节点的样式，及hover到port时显示port简介
.my-port {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid #31d0c6;
  border-radius: 100%;
  background: rgba(44, 254, 255, 0.25);

  >div {
    color: #ffffff;
    display: none;
  }

  &:hover {
    >div {
      display: block;
    }
  }
}
.x6-node foreignObject {
  overflow: visible !important;
}

方法2： css为主

第一步：

// addport时，对port进行属性设置，添加label属性，动态获取标签内容
{
                group: "outparams",
                label: {
                  position: {
                    name : 'bottom',
                    args: {
                      y: 15, // 强制指定 y 坐标为 10，替换计算结果中的 y 坐标
                      attrs: {
                        text: {
                          text: '名称：' + item.name + '\n 类型：' + typename, // 标签文本
                          fill: '#ffffff', // 设置标签颜色为红色
                        },
                      },
                    },
                  },
                },
                args: {
                  x: seat + '%',
                  y: '100%',
                },
                direction: 'out',
                linkedid: item.constraintId + '-' + item.dataType,
                argId: item.id,
              },

第二步：

// 设置port大小，方向偏移量，设置magnet true为可以画线
outparams: {
    position: "absolute",
    attrs: {   
      fo: {
        width: 16,
        height: 16,
        x: -8,
        y: -8,
        magnet: 'true',
      },
    }
  },

第三步：

// 根据dom设置样式
.x6-port {
  .x6-port-body {
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #31d0c6;
    border-radius: 100%;
    background: rgba(44, 254, 255, 0.25);
    
  }

  .x6-port-label {
    display: none;
  }
  &:hover {
    .x6-port-label {
      display: block;
    }
  }
}

方法3：与平时的都一样，主要是对port label的样式进行了修改

// port里面添加label
{
                group: "inparams",                
                label: {
                  position: {
                    name : 'top',
                    args: {
                      y: -30, // 强制指定 y 坐标为 10，替换计算结果中的 y 坐标
                      attrs: {
                        text: {
                          text: '名称：' + item.name + '\n 类型：' + typename, // 标签文本
                          fill: '#ffffff', // 设置标签颜色为红色
                        },
                      },
                    },
                  },
                },
                args: {
                  x: seat + '%',
                  y: 0,
                },
                direction: 'in',
                linkedid: item.constraintId + '-' + item.dataType,
                argId: item.id,
              },

第二步：

// 自定义port的样式，定义成circle，利用magnet来定义哪一类port可以被当做连线起始点
inparams: {
    position: "absolute",
    attrs: {
      circle: {
        r: 8,
        magnet: "passive",
        fill: "#2cfeff",
        fillOpacity: "0.25",
        stroke: "#2cfeff",
        strokeOpacity: "0.6",
        strokeWidth: 1,
        style: {
          visibility: "visible"
        }
      }
    }
  },
  outparams: {
    position: "absolute",
    attrs: {   
      circle: {
        r: 8,
        magnet: "true",
        fill: "#2cfeff",
        fillOpacity: "0.15",
        stroke: "#2cfeff",
        strokeOpacity: "0.6",
        strokeWidth: 1,
        style: {
          visibility: "visible"
        },
        magnet: 'true',
      }
    }
  },

第三步：

// 修改样式
.x6-port {
  .x6-port-label {
    display: none;
  }
  &:hover {
    .x6-port-label {
      display: block;
    }
  }
}

总结：

方式1和方式2会在对port连线进行校验时会出现问题，凡是没有定义manget属性的，在validateConnection钩子函数中都不会被校验，所以推荐方法3