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

@foblex/flow-dagre-layout 添加手动版式适配器 达格尔 内 Foblex 流动。 。 。 .

当您的图形大多是分级的时使用此软件包, 您想要对工作流程、 树、 依赖性地图或 Org- chart 样式编辑器进行可预测的左到右或上到下布局 .

安装

最简单的路径是:

ng add @foblex/flow-dagre-layout

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

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

Nx 工作空间 :

nx g @foblex/flow-dagre-layout:add

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

• @foblex/flow
• @foblex/platform
• @foblex/mediator
• @foblex/2d
• @foblex/utils
• 达格雷包本身

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

如果您喜欢手工安装 :

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

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

引擎会做什么

DagreLayoutEngine 从 :

• 节点标识
• 可选节点大小
• 源/目标连接
• 方向、间隔和算法等布局选项

引擎返回时只计算出节点位置. 您的应用程序继续负责图态 并决定如何将这些位置 合并回您的节点模型.

最小设置

import { Component, inject } from '@angular/core';
import {
  EFLayoutDirection,
  IFLayoutConnection,
  IFLayoutNode,
  provideFLayout,
} from '@foblex/flow';
import {
  DagreLayoutEngine,
  EDagreLayoutAlgorithm,
} from '@foblex/flow-dagre-layout';

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

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

    const result = await this._layout.calculate(nodes, connections, {
      direction: EFLayoutDirection.LEFT_RIGHT,
      algorithm: EDagreLayoutAlgorithm.NETWORK_SIMPLEX,
      nodeGap: 32,
      layerGap: 48,
    });

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

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

主要选项

• direction数字 : EFLayoutDirection
• algorithm数字 : EDagreLayoutAlgorithm
• nodeGap: 水平间距或兄弟姐妹间距
• layerGap: 等级间距
• defaultNodeSize: 当节点不提供时倒数大小 size

可用的算法 :

• EDagreLayoutAlgorithm.NETWORK_SIMPLEX
• EDagreLayoutAlgorithm.TIGHT_TREE
• EDagreLayoutAlgorithm.LONGEST_PATH

典型的一体化流动

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

示例

• 现场实例 : https://flow.foblex.com/examples/dagre-layout (英语)
• 示例来源 : 液化液/液化液/液化液/液化液/液化液/液化液

选择达格尔时

需要时选择达格:

• 快速定向布局
• 树状或分层结构
• 简单和可预测的间隔控制
• 一个比ELK.js小的选项表面