activate-relations 改变了原有线条的粗细 #5137

问题描述

使用activate-relations， hover节点，相关节点和线条active，但是线条的粗细不满足预期。 希望线条粗细能保持size设置的粗细。

重现链接

https://g6.antv.antgroup.com/zh/examples/scatter/edge/#edge

重现步骤

https://g6.antv.antgroup.com/zh/examples/scatter/edge/#edge

尝试了下如修改，使线条粗细size为10，然后hover节点，节点和线变为active状态。 edges: [ { source: 'node1', target: 'node2', size: 10, }, ],

defaultEdge: { type: 'line-dash', style: { // lineWidth: 2, stroke: '#bae7ff', }, },

import G6 from '@antv/g6';

const lineDash = [4, 2, 1, 2];
G6.registerEdge(
  'line-dash',
  {
    afterDraw(cfg, group) {
      // get the first shape in the group, it is the edge's path here=
      const shape = group.get('children')[0];
      let index = 0;
      // Define the animation
      shape.animate(
        () => {
          index++;
          if (index > 9) {
            index = 0;
          }
          const res = {
            lineDash,
            lineDashOffset: -index,
          };
          // returns the modified configurations here, lineDash and lineDashOffset here
          return res;
        },
        {
          repeat: true, // whether executes the animation repeatly
          duration: 3000, // the duration for executing once
        },
      );
    },
  },
  'cubic', // extend the built-in edge 'cubic'
);

const data = {
  nodes: [
    {
      id: 'node1',
      x: 100,
      y: 100,
      label: 'Node 1',
      labelCfg: {
        position: 'top',
      },
    },
    {
      id: 'node2',
      x: 300,
      y: 200,
      color: '#40a9ff',
      label: 'Node 2',
      labelCfg: {
        position: 'left',
        offset: 10,
      },
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
      size: 10,
    },
  ],
};

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  modes: {
        default: ['zoom-canvas', 'drag-canvas', 'activate-relations'],
      },
  defaultEdge: {
    type: 'line-dash',
    style: {
      // lineWidth: 2,
      stroke: '#bae7ff',
    },
  },
});
graph.data(data);
graph.render();

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight);
  };

预期行为

我期望，edge在active状态下，能保持原有的size。 现在看到的现象是：size为10的线，active状态下变成了很细的一根线。

平台

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

屏幕截图或视频（可选）

https://github.com/antvis/G6/assets/20938424/8f376cfb-7764-40a5-90f5-f0bb93c05924

补充说明（可选）

No response