layout is not a function

[resetsix]

Describe the bug

antv/x6是基于 antv/layout 包实现的布局算法，我按照官网教程尝试使用antv/layout包中的 dagre布局，但是在实例化布局的时候遇到两个问题。

1、提示type等参数不在DagreLayout配置中，我跳转到 ts 源码类型提示发现确实没有 type 相关的类型只有图二中nodeSize和GraphLabel, NodeConfig, EdgeConfig父类型，可是无法跳转了。不知道官网文档示例是否已过时。

new DagreLayout({
  type: "dagre",
  rankdir: "LR", // 水平方向布局
  align: "UL",
  ranksep: 80, // 节点间距
  nodesep: 100, // 层间距
})

2、new XXXLayout()实例化对象已经没有layout方法了，不知道官网文档示例是否已过时。只有如下类型提示

id: string;
options: Partial<DagreLayoutOptions>;
execute(graph: Graph, options?: DagreLayoutOptions): Promise<LayoutMapping>;
assign(graph: Graph, options?: DagreLayoutOptions): Promise<void>;

即使我使用execute和assign方法替代layout，但是传递的data数据提示execute和assign的类型传不符。

data 数据

const data = {
  nodes: [
    {
      id: "start",
      shape: "circle",
      x: 100,
      y: 60,
      width: 80,
      height: 80,
      label: "开始",
      attrs: {
        body: {
          fill: "#5F95FF",
          stroke: "#5F95FF",
        },
        label: {
          fill: "#ffffff",
        },
      },
    },
    {
      id: "process",
      shape: "rect",
      x: 300,
      y: 80,
      width: 120,
      height: 40,
      label: "处理",
      attrs: {
        body: {
          fill: "#FFB366",
          stroke: "#FFB366",
        },
      },
    },
    {
      id: "end",
      shape: "circle",
      x: 500,
      y: 60,
      width: 80,
      height: 80,
      label: "结束",
      attrs: {
        body: {
          fill: "#FF6666",
          stroke: "#FF6666",
        },
        label: {
          fill: "#ffffff",
        },
      },
    },
  ],
  edges: [
    {
      source: "start",
      target: "process",
      label: "开始处理",
      attrs: {
        line: {
          stroke: "#5F95FF",
          strokeWidth: 2,
        },
      },
    },
    {
      source: "process",
      target: "end",
      label: "处理完成",
      attrs: {
        line: {
          stroke: "#5F95FF",
          strokeWidth: 2,
        },
      },
    },
  ],
};

我不知道该如何在 antv/x6 中使用drage布局算法。

Your Example Website or App

https://codesandbox.io/p/sandbox/2xxwj5?file=%2Fsrc%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. 导入 import { DagreLayout } from "@antv/layout";
2. 实例化对象

const layout = new DagreLayout({
  type: "dagre",
  rankdir: "TB", // 可以是 "TB", "BT", "LR", 或 "RL"
  align: "UL",
  ranksep: 70, // 节点间距
  nodesep: 70, // 层间距
});

3. 应用布局

Expected behavior

antv/x6正常使用dagre布局

Screenshots or Videos

No response

Platform

• OS: [macOS]
• Browser: [Chrome最新, Firefox最新]
• Version: [2.18.1]

Additional context

No response

[x6-bot]

👋 @resetsix

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[6653302wy]

我也碰到和楼主一样的问题了，官方文档是过时了吗？

[resetsix]

我也碰到和楼主一样的问题了，官方文档是过时了吗？

应该是文档没及时更新吧，有些 api 还停留在 v1

[Ardanas]

直接看源码的demo

demo