antvis/G6

想知道源码中拖拽节点后锚点位置更新的逻辑,因为在拖拽自定义节点的过程中,两个锚点的位置并不是两节点最近的连接方式 #4941

XiaoRIGE posted onGitHub

问题描述

在拖拽自定义节点过程中,两个节点上的锚点没有匹配到我期望的位置(两节点最近的两个锚点相连接)

重现链接

www.test.com

重现步骤

目前找到的代码时g6-core中node.js里边在Node原型上定义的getLinkPoint方法,请问拖拽过程中锚点的更新是通过这个方法实现的吗?

预期行为

期望效果是不管怎么拖拽,两节点连选中的锚点是连线最短的两个锚点。

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox]
  • G6 版本: [4.5.1 ... ]

屏幕截图或视频(可选)

image image image

补充说明(可选)

No response


这个是自定义节点吗?

posted by Yanyan-Wang over 1 year ago

是自定义节点,相关自定义代码如下

G6.registerNode(
    'System',
    {
      size: 200,
      drawShape: function drawShape(cfg, group) {
        const colorInfo = getSystemColor(cfg.catalogName)
        const shape = group.addShape('rect', {
          attrs: {
            x: 0,
            y: 0,
            height: 136,
            width: 230,
            radius: 2,
            stroke: colorInfo[0],
            fill: colorInfo[0],
          },
          name: 'System-rect-bg',
          draggable: true,
        })
        // tags
        const tagsLength = cfg.tags?.length || 0
        group.addShape('text', {
          attrs: {
            textBaseline: 'top',
            x: 114,
            y: 16,
            text: fittingStringEllipsis(cfg.name, 215, 16),
            fill: colorInfo[2],
            fontSize: 16,
            fontWeight: 600,
            lineHeight: 24,
            textAlign: 'center',
            fontFamily: 'Daimler CS',
          },
          name: `System-${cfg.name}`,
          draggable: true,
        })

        group.addShape('text', {
          attrs: {
            x: 110,
            y: 46, // 40,
            text: '[software system]',
            fill: colorInfo[2],
            fontSize: 12,
            fontWeight: 400,
            lineHeight: 12,
            textAlign: 'center',
            fontFamily: 'Daimler CS',
          },
          name: `System-desc`,
          draggable: true,
        })

        group.addShape('text', {
          attrs: {
            textBaseline: 'top',
            y: 60,
            x: 116,
            text: fittingString(cfg.description, 215, 12),
            fill: colorInfo[2],
            fontSize: 12,
            fontWeight: 400,
            lineHeight: 16,
            textAlign: 'center',
            fontFamily: 'Daimler CS',
          },
          name: `System-${cfg.content}`,
          draggable: true,
        })
        if (tagsLength !== 2) {
          cfg.tags.forEach((item, index) => {
            const textWidth =
              tagsLength === 1 ? getLetterWidth(item, 12) + 16 : 56
            const formatTextWidth = textWidth > 180 ? 180 : textWidth
            if (index <= 2) {
              group.addShape('rect', {
                attrs: {
                  y: 100,
                  x:
                    tagsLength === 1
                      ? (220 - formatTextWidth) / 2 + index * 64 + 4
                      : 18 + index * 64 + 4,
                  height: 20,
                  width: formatTextWidth,
                  radius: 2,
                  stroke: colorInfo[1],
                },
                name: `System-index-rect-${index}`,
                draggable: true,
              })

              group.addShape('text', {
                attrs: {
                  textBaseline: 'top',
                  y: 106,
                  x:
                    tagsLength === 1
                      ? (233 - formatTextWidth) / 2 + index * 64 + 4
                      : 22 + index * 64 + 4,
                  fontWeight: 400,
                  lineHeight: 12,
                  fontSize: 12,
                  text: fittingStringEllipsis(item, formatTextWidth, 12),
                  fill: colorInfo[2],
                  fontFamily: 'Daimler CS',
                },
                name: `System-index-value-${index}`,
                draggable: true,
              })
            }
          })
        } else {
          let formatTextWidthTwo = 0
          cfg.tags.forEach((item, index) => {
            const textWidth =
              tagsLength === 1 ? getLetterWidth(item, 12) + 16 : 56
            const formatTextWidth = textWidth > 180 ? 180 : textWidth
            formatTextWidthTwo += formatTextWidth
            if (index <= 2) {
              group.addShape('rect', {
                attrs: {
                  y: 100,
                  x:
                    index === 0
                      ? formatTextWidthTwo - 8
                      : formatTextWidthTwo + 4,
                  height: 20,
                  width: formatTextWidth + 8,
                  radius: 2,
                  stroke: colorInfo[1],
                },
                name: `System-index-rect-${index}`,
                draggable: true,
              })

              group.addShape('text', {
                attrs: {
                  textBaseline: 'top',
                  y: 106,
                  x: index === 0 ? formatTextWidthTwo : formatTextWidthTwo + 8,
                  fontWeight: 400,
                  lineHeight: 12,
                  fontSize: 12,
                  text: fittingStringEllipsis(item, formatTextWidth, 12),
                  fill: colorInfo[2],
                  fontFamily: 'Daimler CS',
                },
                name: `System-index-value-${index}`,
                draggable: true,
              })
            }
          })
        }

        return shape
      },
      getAnchorPoints() {
        return systemAnchorPoints
      },
      setState: setActiveState,
    },
    'rect'
  )
posted by XiaoRIGE over 1 year ago

测试发现只要是自定义节点都会有点偏移

posted by XiaoRIGE over 1 year ago

发现如果自定义图形使用全局配置linkCenter:true,线的位置就是我所期望的位置,但是有个问题是我希望在edge结束的地方设置箭头,如果我配置了linkCenter,那箭头信息就会被盖住。请问能不能不配置linkCenter,也达到这个效果(两节点之前的连线一定是最近的)?或者说linkcenter只配置在source边上?

posted by XiaoRIGE over 1 year ago

自定义节点如果是矩形作为 keyShape,应该需要把这个图形的 x y 分别减去宽高的一半,保证自身坐标系的原点位于矩形的中心: x: -width / 2, y: -height / 2

尝试一下,然后锚点文档可以参考:https://g6.antv.antgroup.com/api/items/node-properties#anchorpoints

posted by Yanyan-Wang over 1 year ago

自定义节点如果是矩形作为 keyShape,应该需要把这个图形的 x y 分别减去宽高的一半,保证自身坐标系的原点位于矩形的中心: x: -width / 2, y: -height / 2

尝试一下,然后锚点文档可以参考:https://g6.antv.antgroup.com/api/items/node-properties#anchorpoints

成功解决了我的问题,非常感谢!

另外是不是可以考虑将这个写到自定义节点文档里,方便以后大家使用。

posted by XiaoRIGE over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests