# @foblex/flow-elk-layout 中文文档

规范地址：https://npmcn.com/package/%40foblex/flow-elk-layout/

版本：19\.4\.0
npm 元数据更新时间：2026-10-25T09:41:28.405Z
中文译文更新时间：2026-11-15T03:44:48.936Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40foblex/flow-elk-layout
原文对照：https://npmcn.com/package/%40foblex/flow-elk-layout/?lang=original
项目主页：https://flow.foblex.com/
源码仓库：https://github.com/Foblex/f-flow

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：38.9 kB，19 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：@foblex/flow ^19\.4\.0，@angular/core \>=17\.3\.0，@angular/common \>=17\.3\.0
- 首次发布：2026-04-14T10:54:52.868Z
- 最新版本发布：2026-10-25T09:41:27.876Z
- 近 30 天下载量：34334（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 15 个）

## 中文简介

Foblex Flow的ELK.js布局引擎适配器.

## 安装

```sh
npm install @foblex/flow-elk-layout
```

也可以使用：`pnpm add @foblex/flow-elk-layout`、`yarn add @foblex/flow-elk-layout`、`bun add @foblex/flow-elk-layout`

## README

# @ foblex/ flow-elk-layout (英语)

`@foblex/flow-elk-layout` 添加手动版式适配器 [ELK.js (爱尔兰语)](https://github.com/kieler/elkjs) 内 [Foblex 流动](https://flow.foblex.com/)。 。 。 .

当您需要比简单的定向树更丰富的布局策略时使用此软件包,并想要访问分层的,光圈的,力风格的,或者其他的ELK.js算法,同时仍然通过Foblex Flow渲染和相互作用.

## 安装

最简单的路径是:

```bash
ng add @foblex/flow-elk-layout
```

如果您的应用程序已经单独管理了流程样式, 您可以跳过默认的主题线程 :

```bash
ng add @foblex/flow-elk-layout --skipTheme
```

Nx 工作空间 :

```bash
nx g @foblex/flow-elk-layout:add
```

`ng add` 确保这些软件包存在, 只添加缺失的软件包 :

-   `@foblex/flow`
-   `@foblex/platform`
-   `@foblex/mediator`
-   `@foblex/2d`
-   `@foblex/utils`
-   eLK.js软件包本身

它还说 `node_modules/@foblex/flow/styles/default.scss` 改为缺少主题条目时的应用程序样式.

如果您喜欢手工安装 :

```bash
npm install @foblex/flow @foblex/flow-elk-layout @foblex/platform@^1.0.4 @foblex/mediator@^1.1.3 @foblex/2d@^1.2.2 @foblex/utils@^1.1.1
```

基础 `elkjs` 软件包作为此软件包的运行时依赖性被运出,所以不需要单独安装.

## 引擎会做什么

`ElkLayoutEngine` 从 :

-   节点标识
-   可选节点大小
-   源/目标连接
-   共享布局选项, 如方向、 间隔和算法
-   可选的 ELK.js 特性 `layoutOptions`

引擎返回时只计算出节点位置. 您的应用程序仍然负责国家管理 以及将这些职位应用到您的图表模型.

对于力量,射线,随机等非方向算法,或以包装为导向的模式,示例集成可以将连接器切换为计算模式,因此连接锚按实际节点几何而不是固定的左/右或上/下规则.

## 最小设置

```ts
import { Component, inject } from '@angular/core';
import {
  EFLayoutDirection,
  IFLayoutConnection,
  IFLayoutNode,
  provideFLayout,
} from '@foblex/flow';
import {
  EElkLayoutAlgorithm,
  ElkLayoutEngine,
} from '@foblex/flow-elk-layout';

@Component({
  standalone: true,
  providers: [provideFLayout(ElkLayoutEngine)],
  template: '',
})
export class WorkflowLayoutExample {
  private readonly _layout = inject(ElkLayoutEngine);

  protected async relayout(): Promise<void> {
    const nodes: IFLayoutNode[] = [
      { id: 'A' },
      { id: 'B' },
      { id: 'C' },
    ];
    const connections: IFLayoutConnection[] = [
      { source: 'A', target: 'B' },
      { source: 'A', target: 'C' },
    ];

    const result = await this._layout.calculate(nodes, connections, {
      direction: EFLayoutDirection.TOP_BOTTOM,
      algorithm: EElkLayoutAlgorithm.LAYERED,
      nodeGap: 32,
      layerGap: 48,
      layoutOptions: {
        'elk.layered.spacing.nodeNodeBetweenLayers': '64',
      },
    });

    const positions = new Map(result.nodes.map((node) => [node.id, node.position]));

    console.log(positions.get('A'));
  }
}
```

## 主要选项

-   `direction`数字 : `EFLayoutDirection`
-   `algorithm`数字 : `EElkLayoutAlgorithm`
-   `nodeGap`: 节点之间的间隔
-   `layerGap`: 布局层之间的间隔
-   `defaultNodeSize`: 当节点不提供时倒数大小 `size`
-   `layoutOptions`:原始的 ELK.js 选项传递给引擎

可用的算法 :

-   `EElkLayoutAlgorithm.FIXED`
-   `EElkLayoutAlgorithm.BOX`
-   `EElkLayoutAlgorithm.RANDOM`
-   `EElkLayoutAlgorithm.LAYERED`
-   `EElkLayoutAlgorithm.STRESS`
-   `EElkLayoutAlgorithm.MRTREE`
-   `EElkLayoutAlgorithm.RADIAL`
-   `EElkLayoutAlgorithm.FORCE`
-   `EElkLayoutAlgorithm.DISCO`
-   `EElkLayoutAlgorithm.SPORE_OVERLAP`
-   `EElkLayoutAlgorithm.SPORE_COMPACTION`
-   `EElkLayoutAlgorithm.RECT_PACKING`

## 典型的一体化流动

1.  建立自己的图表数据.
2.  转换为 `IFLayoutNode[]` 财务报告和审定财务报表 `IFLayoutConnection[]`。 。 。 .
3.  打电话 `calculate(...)`。 。 。 .
4.  将返回的位置合并到您的视图模型中 .
5.  显示节点 `f-flow`。 。 。 .

## 示例

-   现场实例 : [https://flow.foblex.com/examples/elkjs-layout 页面存档备份,存于互联网档案馆](https://flow.foblex.com/examples/elkjs-layout)
-   示例来源 : [液化液/液化液/液化液/液化液/液化液](https://github.com/Foblex/f-flow/tree/main/libs/f-examples/plugins/elk-layout)

## 当选择 ELK.js

需要时选择 ELK.js :

-   更多布局算法
-   更丰富的间隔和路由控制
-   密度或更小的树状图
-   您可以通过原始 ELK.js 选项进一步调取引擎

## 常见问题

### @foblex/flow-elk-layout 是什么？

Foblex Flow的ELK\.js布局引擎适配器\.

### 如何安装 @foblex/flow-elk-layout？

在项目目录运行 npm install @foblex/flow-elk-layout，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@foblex/flow（^19\.4\.0）、@angular/core（\>=17\.3\.0）、@angular/common（\>=17\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @foblex/flow-elk-layout 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @foblex/flow-elk-layout 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @foblex/flow-elk-layout 可以商用吗？

@foblex/flow-elk-layout 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @foblex/flow-elk-layout 的下载量有多少？

根据 npm 官方下载统计，@foblex/flow-elk-layout 在 2026/10/15 – 2026/11/13 这 30 天内被下载 34,334 次，日均约 1,144 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @foblex/flow-elk-layout 还在维护吗？

最新版本 19\.4\.0 发布于 2026/10/25（21 天前）；至今共发布 15 个版本，其中过去 12 个月发布了 15 个；首次发布于 2026/04/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。