能否实现Edge拖动后变更位置 #5567

不需要那个拖动锚点，只想要那个功能

https://github.com/antvis/G6/assets/54572770/8d457bc3-e8ba-4dee-849b-b3bf5fc01d08

你可能是想要这个

我这个还有点问题，主要是相邻节点间横纵坐标距离太近时，会有path变形的问题，所以暂时不能分享出来。不过你可以，考虑用自定义交互实现，g6的自定义交互还是很强大灵活的

https://github.com/antvis/G6/assets/33613409/45c79fd6-bd11-44f9-b14b-8aff0fc34214

2024-03-19.090234.mp4 你可能是想要这个

我想要的是这种效果，我主要是没搞懂路径中path的内容

查一下svg path各种指令，然后计算下折线的顶点位置就可以了；我现在采用的是[['M',x,y],['l',x,y],['l',x,y]...['L',x,y]]

查一下svg path各种指令，然后计算下折线的顶点位置就可以了；我现在采用的是[['M',x,y],['l',x,y],['l',x,y]...['L',x,y]]

感谢，我了解下

查一下svg path各种指令，然后计算下折线的顶点位置就可以了；我现在采用的是[['M',x,y],['l',x,y],['l',x,y]...['L',x,y]]

请教一下你是怎么实现在拖动节点时还能保留边手动调整后的位置，我这边实现出来的结果是拖动节点后边就还原了

查一下svg path各种指令，然后计算下折线的顶点位置就可以了；我现在采用的是[['M',x,y],['l',x,y],['l',x,y]...['L',x,y]]

请教一下你是怎么实现在拖动节点时还能保留边手动调整后的位置，我这边实现出来的结果是拖动节点后边就还原了

拖动时，动态修改edge的controlPoints里对应点坐标，比如你拖动的是controlPoints里第二个点的坐标，就需要动态更新这个点的坐标；如果是增加或减少controlPoints中的点，需要先计算你操作的点介于controlePoints中哪两个点间，然后再增减或更新。

这个还是有点麻烦的，要考虑的问题比较多；后面v5稳定后，基于v5中正交路由的polyline做，可能要方便点

查一下svg path各种指令，然后计算下折线的顶点位置就可以了；我现在采用的是[['M',x,y],['l',x,y],['l',x,y]...['L',x,y]]

请教一下你是怎么实现在拖动节点时还能保留边手动调整后的位置，我这边实现出来的结果是拖动节点后边就还原了

拖动时，动态修改edge的controlPoints里对应点坐标，比如你拖动的是controlPoints里第二个点的坐标，就需要动态更新这个点的坐标；如果是增加或减少controlPoints中的点，需要先计算你操作的点介于controlePoints中哪两个点间，然后再增减或更新。

我现在已经作出这样的效果了，但是就是拖动节点就还原了 https://github.com/antvis/G6/issues/5592

查一下svg path各种指令，然后计算下折线的顶点位置就可以了；我现在采用的是[['M',x,y],['l',x,y],['l',x,y]...['L',x,y]]

请教一下你是怎么实现在拖动节点时还能保留边手动调整后的位置，我这边实现出来的结果是拖动节点后边就还原了

拖动时，动态修改edge的controlPoints里对应点坐标，比如你拖动的是controlPoints里第二个点的坐标，就需要动态更新这个点的坐标；如果是增加或减少controlPoints中的点，需要先计算你操作的点介于controlePoints中哪两个点间，然后再增减或更新。

我现在已经作出这样的效果了，但是就是拖动节点就还原了 #5592

你要更新graph里edge data中的数据，你可以把你代码贴出来看下

查一下svg path各种指令，然后计算下折线的顶点位置就可以了；我现在采用的是[['M',x,y],['l',x,y],['l',x,y]...['L',x,y]]

请教一下你是怎么实现在拖动节点时还能保留边手动调整后的位置，我这边实现出来的结果是拖动节点后边就还原了

拖动时，动态修改edge的controlPoints里对应点坐标，比如你拖动的是controlPoints里第二个点的坐标，就需要动态更新这个点的坐标；如果是增加或减少controlPoints中的点，需要先计算你操作的点介于controlePoints中哪两个点间，然后再增减或更新。

我现在已经作出这样的效果了，但是就是拖动节点就还原了 #5592

你要更新graph里edge data中的数据，你可以把你代码贴出来看下

// 更新线段位置
  updateSegment(index: number, dx: number, dy: number) {
    const pathData = this.pathData, segments = this.segments;
    if (index < 0 || index >= segments.length) return;
    const {graph} = this as any;

    const segment = segments[index];
    if (segment.start.x === segment.end.x) { // 垂直线段
      segment.start.x += dx;
      segment.end.x += dx;
      if (index > 0) { // 伸缩前一个水平线段
        segments[index - 1].end.x += dx;
      }
      if (index < segments.length - 1) { // 伸缩后一个水平线段
        segments[index + 1].start.x += dx;
      }
    } else if (segment.start.y === segment.end.y) { // 水平线段
      segment.start.y += dy;
      segment.end.y += dy;
      if (index > 0) { // 伸缩前一个垂直线段
        segments[index - 1].end.y += dy;
      }
      if (index < segments.length - 1) { // 伸缩后一个垂直线段
        segments[index + 1].start.y += dy;
      }
    }
    // 更新pathData
    pathData[index + 1] = ['L', segment.end.x, segment.end.y];
    if (index > 0) {
      pathData[index] = ['L', segment.start.x, segment.start.y];
    }
    this.pathData = pathData;
    console.log(cloneDeep(pathData), cloneDeep(segments))
    // this.dragItem?.toFront();
    const attr = this.dragItem?.getKeyShape().attr();
    // this.dragItem?.getKeyShape().attr({
    //   ...attr,
    //   path: pathData,
    // })
    const group = this.dragItem.getContainer();
    const shape = group.find((element) => element.get('name') === 'edge-shape');
    shape.attr('path', pathData)

    // graph.paint();
    // graph.refreshItem(this.dragItem)
    // graph.updateItem(this.dragItem, {attrs: {path: pathData}})
  },

自定义边

G6.registerEdge('CONDITION_LINK', {
  afterDraw: function (model: any, group: any) {
    const shape = group.get("children")[0];
    shape.attr({
      lineAppendWidth: 8
    })
  },
}, 'polyline');

你方式错了，不应该写在自定义边里；自定义边里的数据是渲染数据，渲染数据在画布更新时，会丢失

两种方式：1、你在自定义边里，将每个边的controlpoints保存到一个全局变量里，就不会受画布更新的影响了，但是这样会带来很多问题，比如画布数据持久化，历史操作等；2、建议用g6的自定义交互实现。

两种方式：1、你在自定义边里，将每个边的controlpoints保存到一个全局变量里，就不会受画布更新的影响了，但是这样会带来很多问题，比如画布数据持久化，历史操作等；2、建议用g6的自定义交互实现。

updateSegment是属于自定义事件，我那个自定义边只是改了个响应宽度，我在想是不是不能继承内置边polyline