V2 中自定义边如何修改边选中颜色和加粗选中边

[eevin]

Ant Pro中的选中效果实在不明显。甲方爸爸要求调整。

自定义边中stroke，lineWidth，lineAppendWidth 等都没问题。 假如设置lineWidth > 1 取消选中后，lineWidth会变成1。

在边的定义中添加setState 却无法监听到状态的改变

<RegisterEdge
  name="graphEdge"
  config={{
    draw(item) {
      const group = item.getGraphicGroup();
      const path = this.getPath(item);
      return group.addShape('path', {
        attrs: {
          path,
          stroke: '#bfbfbf',
          lineWidth: 1,
          lineAppendWidth: 10,
          endArrow: {
            path(item) {
              const keyShape = item.getKeyShape();
              let lineWidth = keyShape.attr('lineWidth');
              lineWidth = lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE;
              const width = (lineWidth * 10) / 3;
              const halfHeight = (lineWidth * 4) / 3;
              const radius = lineWidth * 4;
              return [
                ['M', -width, halfHeight],
                ['L', 0, 0],
                ['L', -width, -halfHeight],
                ['A', radius, radius, 0, 0, 1, -width, halfHeight],
                ['Z'],
              ];
            },
            shorten(item) {
              const keyShape = item.getKeyShape();
              const lineWidth = keyShape.attr('lineWidth');
              return (lineWidth > MIN_ARROW_SIZE ? lineWidth : MIN_ARROW_SIZE) * 3.1;
            },
            style(item) {
              const keyShape = item.getKeyShape();
              const { strokeOpacity, stroke } = keyShape.attr();
              return {
                fillOpacity: strokeOpacity,
                fill: stroke,
              };
            },
          },
        },
      });
    },
    getPath(item) {
      var points = item.getPoints();
      var start = points[0];
      var end = points[points.length - 1];
      var hgap = Math.abs(end.x - start.x);
      if (end.x > start.x) {
        return [
          ['M', start.x, start.y],
          ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y],
        ];
      }
      return [
        ['M', start.x, start.y],
        ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y],
      ];
    },
    setState(name, value, item) {
      const group = item.getContainer();
      const shape = group.get('children')[0]; // 顺序根据 draw 时确定
      if (name === 'active') {
        if (value) {
          shape.attr('stroke', 'red');
        } else {
          shape.attr('stroke', '#333');
        }
      }
      if (name === 'selected') {
        if (value) {
          shape.attr('lineWidth', 3);
        } else {
          shape.attr('lineWidth', 2);
        }
      }
    },
  }}
/>

[eevin]

经常一提问就找到了答案

getSelectedStyle(item) { return { // lineWidth: 5, stroke: 'red', }; },

[moxiewf]

经常一提问就找到了答案

getSelectedStyle(item) { return { // lineWidth: 5, stroke: 'red', }; },

有效果？ 不是操作完之后就没了样式了？

[eevin]

@moxiewf 是的操作完成就没效果了。 如果不使用FlowItemPanel 组件也是有效果的，或者重写getActivedStyle 才得行。

getSelectedStyle(item) { return { stroke: 'red', lineWidth: 3, }; }, getActivedStyle(item) { return !item.isSelected ? { stroke: '#44C0FF', lineWidth: 3, } : {}; }

但是这种写法选中后箭头会消失。 哎，文档缺失，版本低，实在太痛苦了。 这次之后直接使用G6吧，不在偷懒了。想找个东西太难。

[moxiewf]

@moxiewf 是的操作完成就没效果了。 如果不使用FlowItemPanel 组件也是有效果的，或者重写getActivedStyle 才得行。

getSelectedStyle(item) { return { stroke: 'red', lineWidth: 3, }; }, getActivedStyle(item) { return !item.isSelected ? { stroke: '#44C0FF', lineWidth: 3, } : {}; }

但是这种写法选中后箭头会消失。 哎，文档缺失，版本低，实在太痛苦了。 这次之后直接使用G6吧，不在偷懒了。想找个东西太难。

是的，各种写法都不行…… 十分感谢大佬指导