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

@foblex/flow-elk-layout 添加手动版式适配器 ELK.js (爱尔兰语) 内 Foblex 流动。 。 。 .

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

安装

最简单的路径是:

ng add @foblex/flow-elk-layout

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

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

Nx 工作空间 :

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 改为缺少主题条目时的应用程序样式.

如果您喜欢手工安装 :

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

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

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

最小设置

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 页面存档备份,存于互联网档案馆
• 示例来源 : 液化液/液化液/液化液/液化液/液化液

当选择 ELK.js

需要时选择 ELK.js :

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