[Bug]: 展开收起变形了 #7026

目前折线边是使用 G 的 path 元素绘制的，确实在形变动画上存在一些问题。建议暂时关闭动画使用

🚫 This issue has been marked as "Won't Fix". Here's why:

• The described behavior is working as intended
• The request falls outside our project scope/goals
• The cost/benefit ratio doesn't justify the change

If you have new information that might change this decision, feel free to:

1. Share your additional context
2. Propose alternative solutions
3. Start a discussion to explore different approaches

Thank you for your understanding and engagement! 🙏

🚫 此 issue 被标记为"不予修复"，原因如下：

• 当前行为符合设计预期
• 该请求超出项目范围/目标
• 投入产出比不足以支持此变更

如果您有任何新的想法或建议，欢迎：

1. 分享更多上下文
2. 提出替代方案
3. 发起讨论以探索不同思路

感谢理解与支持！🙏

目前折线边是使用 G 的 path 元素绘制的，确实在形变动画上存在一些问题。建议暂时关闭动画使用

如果直接关闭动画，收起的时候直接错位了

<img width="1145" alt="Image" src="https://github.com/user-attachments/assets/5d45c196-64cc-4832-bbb4-8e7c7ab3b405" />

有两种解法：

1. 全局关闭动画

const graph = new Graph({ animation: false });

2. 自定义边

目前 path 形变动画有点问题，polyline 应该是没问题的。

import { Graph, treeToGraphData, BaseEdge, register, ExtensionCategory } from '@antv/g6';

/**
 * If the node is a leaf node
 * @param {*} d - node data
 * @returns {boolean} - whether the node is a leaf node
 */
function isLeafNode(d) {
  return !d.children || d.children.length === 0;
}

class PolylineEdge extends BaseEdge {
  getKeyPath() { }

  drawKeyShape(attributes, container) {
    const [sourcePoint, targetPoint] = this.getEndpoints(attributes);

    const points = [
      [sourcePoint[0], sourcePoint[1]],
      [targetPoint[0] / 2 + (1 / 2) * sourcePoint[0], sourcePoint[1]],
      [targetPoint[0] / 2 + (1 / 2) * sourcePoint[0], targetPoint[1]],
      [targetPoint[0], targetPoint[1]],
    ];

    this.upsert('key', 'polyline', { points, stroke: 'red' }, container)
  }
}

register(ExtensionCategory.EDGE, 'custom-polyline', PolylineEdge, true);


fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      autoFit: 'view',
      data: treeToGraphData(data),
      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
      node: {
        style: {
          labelText: (d) => d.id,
          labelPlacement: (d) => (isLeafNode(d) ? 'right' : 'left'),
          labelBackground: true,
          ports: [{ placement: 'right' }, { placement: 'left' }],
        },
        animation: {
          enter: false,
        },
      },
      edge: {
        type: 'custom-polyline',
      },
      layout: {
        type: 'compact-box',
        direction: 'LR',
        getHeight: function getHeight() {
          return 32;
        },
        getWidth: function getWidth() {
          return 32;
        },
        getVGap: function getVGap() {
          return 10;
        },
        getHGap: function getHGap() {
          return 100;
        },
      },
    });

    graph.render();
  });

希望还是修一下这个bug吧,自定义边写圆角距离之类的有点麻烦

希望还是修一下这个bug吧,自定义边写圆角距离之类的有点麻烦

这边可以 G 提个 issue~

`import { Graph, treeToGraphData, BaseEdge, register, ExtensionCategory } from '@antv/g6';

/**

• If the node is a leaf node
• @param {*} d - node data
• @returns {boolean} - whether the node is a leaf node
• /

class PolylineEdge extends BaseEdge { _getRoundedPath(points, radius) { const pathSegments = []; pathSegments.push(['M', points[0].x, points[0].y]); for (let i = 1; i < points.length - 1; i++) { const p1 = points[i - 1], p2 = points[i], p3 = points[i + 1]; const vec1 = { x: p1.x - p2.x, y: p1.y - p2.y }; const vec2 = { x: p3.x - p2.x, y: p3.y - p2.y }; const len1 = Math.sqrt(vec1.x * vec1.x + vec1.y * vec1.y); const len2 = Math.sqrt(vec2.x * vec2.x + vec2.y * vec2.y);

        if (len1 === 0 || len2 === 0) {
            pathSegments.push(['L', p2.x, p2.y]);
            continue;
        }

        const unitVec1 = { x: vec1.x / len1, y: vec1.y / len1 };
        const unitVec2 = { x: vec2.x / len2, y: vec2.y / len2 };
        const cornerRadius = Math.min(radius, len1 / 2, len2 / 2);

        if (cornerRadius <= 0 || isNaN(cornerRadius)) {
            pathSegments.push(['L', p2.x, p2.y]);
            continue;
        }

        const pointBeforeCorner = { x: p2.x + unitVec1.x * cornerRadius, y: p2.y + unitVec1.y * cornerRadius };
        const pointAfterCorner = { x: p2.x + unitVec2.x * cornerRadius, y: p2.y + unitVec2.y * cornerRadius };
        pathSegments.push(['L', pointBeforeCorner.x, pointBeforeCorner.y]);
        pathSegments.push(['Q', p2.x, p2.y, pointAfterCorner.x, pointAfterCorner.y]);
    }
    pathSegments.push(['L', points[points.length - 1].x, points[points.length - 1].y]);

    return pathSegments;
}
getKeyPath(attributes) {
    const [sourcePoint, targetPoint] = this.getEndpoints(attributes);
    let points = [{
        x:sourcePoint[0],
        y:sourcePoint[1]
    },{
        x:sourcePoint[0],
        y:(sourcePoint[1] + targetPoint[1]) / 2
    },{
        x:targetPoint[0],
        y:(sourcePoint[1] + targetPoint[1]) / 2
    },{
       x:targetPoint[0],
       y: targetPoint[1]
    }]
    let path = this._getRoundedPath(points,4)
    return path;
}

}

register(ExtensionCategory.EDGE, 'custom123', PolylineEdge); function isLeafNode(d) { return !d.children || d.children.length === 0; }

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json') .then((res) => res.json()) .then((data) => { const graph = new Graph({ container: 'container', autoFit: 'view', data: treeToGraphData(data), behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'], node: { style: (d) => { const style = { labelText: d.id, labelPlacement: 'right', labelOffsetX: 2, labelBackground: true, ports: [{ placement: 'top' }, { placement: 'bottom' }], }; if (isLeafNode(d)) { Object.assign(style, { labelTransform: [ ['rotate', 90], ['translate', 18], ], labelBaseline: 'center', labelTextAlign: 'left', }); } return style; }, animation: { enter: false, }, }, edge: { type: 'custom123', }, layout: { type: 'compact-box', direction: 'TB', getHeight: function getHeight() { return 20; }, getWidth: function getWidth() { return 16; }, getVGap: function getVGap() { return 80; }, getHGap: function getHGap() { return 20; }, }, });

graph.render();

}); `

我补一个自己实现的吧，希望能帮助到别人，

还是希望官方修复这个bug 😭