@knotx/plugins-dagre-layout v0.0.1

Dagre Layout for Knotx

基于 dagre 的 Knotx 图布局插件，提供自动布局功能。

功能特点

• 为 Knotx 图形提供自动布局能力
• 支持各种布局方向（从上到下、从左到右等）
• 无缝集成到 Knotx 生态系统
• 响应式布局更新

安装

# 使用 npm
npm install @knotx/plugins-dagre-layout

# 使用 yarn
yarn add @knotx/plugins-dagre-layout

# 使用 pnpm
pnpm add @knotx/plugins-dagre-layout

使用方法

在您的 Knotx 应用中引入并使用该插件：

import { DagreLayout } from '@knotx/plugins-dagre-layout'
import { Knotx } from '@knotx/react'

function App() {
  return (
    <Knotx
      // ...其他属性
      plugins={[DagreLayout]}
      pluginConfig={{
        // ...其他插件配置
        dagreLayout: {
          rankdir: 'TB', // 布局方向：TB（从上到下）, LR（从左到右）等
          // 其他 dagre 配置选项
        },
      }}
    />
  )
}

布局配置

您可以通过 pluginConfig.dagreLayout 传递 dagre 支持的配置选项：

• rankdir: 布局方向 ('TB', 'BT', 'LR', 或 'RL')
• align: 节点对齐方式 ('UL', 'UR', 'DL', 或 'DR')
• nodesep: 同一层级节点之间的间距（像素）
• edgesep: 边之间的间距（像素）
• ranksep: 层级之间的间距（像素）
• marginx, marginy: 图形边缘的边距（像素）
• acyclicer: 如何处理循环（'greedy' 或 undefined）
• ranker: 层级分配算法 ('network-simplex', 'tight-tree' 或 'longest-path')

手动触发布局

您可以在需要时手动触发布局重新计算：

import type { PluginData } from '@knotx/core'

// 在组件内部使用
import { inject } from '@knotx/decorators'

class YourPlugin extends BasePlugin {
  @inject.dagreLayout.rebuild()
  private layout!: PluginData['dagreLayout']['rebuild']

  someMethod() {
    // 在需要时触发布局重新计算
    this.layout()
  }
}

示例

详细示例请参考 playground 目录。

许可证

MIT © Knotx