antvis / G6

♾ A Graph Visualization Framework in JavaScript.
https://g6.antv.antgroup.com/
MIT License
11.06k stars 1.31k forks source link

In the comboCombined layout, after the dagre direction is changed from rankdir: 'LR' to rankdir: 'TB', and then the combo node is expanded, the position of the combo expansion is still the previous position? #6359

Open licc12 opened 1 week ago

licc12 commented 1 week ago

Describe the bug / 问题描述

comboCombined 布局中, dagre方向由 rankdir: 'LR' 切换为 rankdir: 'TB' 后,再展开combo节点,此时combo展开的位置还是之前的位置:

期望:combo展开的位置与折叠状态的位置一致,而不是切换方向前的位置;

const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  layout: {
        animate: true,
        type: 'comboCombined',
        sortByCombo: false,
        collapsed: true,
        innerLayout: new G6.Layout.grid({
          collapsed: true,
        }),
        minZoom: 1,
        maxZoom: 1,
        outerLayout: new G6.Layout.dagre({
          nodesep: 30, // 节点间距
          ranksep: 60, // 层间距
          nodeSize: 30,
          minZoom: 1,
          maxZoom: 2.5,
          rankdir: 'LR',
          linkDistance: 50,
          controlPoints: true, // 可选
          preventOverlap: false,
        }),
        comboPadding: 20,
      },
  });

image

Reproduction link / 重现链接

https://codesandbox.io/p/sandbox/musing-herschel-r2dk4x

Steps to Reproduce the Bug or Issue / 重现步骤

  1. 切换dagre的方向
  2. 点击combo展开
  3. 此时可看到combo位置不对

G6 Version / G6 版本

4.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome

Additional context / 补充说明

G6版本: "@antv/g6": "^4.8.23"

licc12 commented 6 days ago

经过尝试,需要将relayout: true开启,就不用graph.render()强制刷新,但是会导致combo重新布局:又会引起另一个问题,combo展开前先拖拽到其它位置,再点击展开,此时可能由于重新布局的原因,combo的位置不在拖动后的位置了、、、

 modes: {
      default: [
        {
          type: 'collapse-expand-combo',
          trigger: 'click',
          relayout: true, // 收缩展开后,重新布局
        },

....