FlowGram.AI
指引
例子
常用 API
API 文档
指引
例子
常用 API
API 文档
简体中文

WorkflowLinesManager (free)

自由布局线条管理, 目前挂在自由布局 document 下边

> API Detail

import { useClientContext } from '@flowgram.ai/free-layout-editor'

const ctx = useClientContext();
console.log(ctx.document.linesManager)

getAllLines

获取所有线条的实体

const allLines = ctx.document.linesManager.getAllLines()

createLine

创建线条

// from和 to 为对应要连线的节点id， fromPort, toPort 为 端口 id, 如果节点为单个端口可以不指定
const line = ctx.document.linesManager.createLine({ from, to, fromPort, toPort })

toJSON

导出线条数据

const json = ctx.document.linesManager.toJSON()

onAvailableLinesChange

监听所有线条的连线变化

import { useEffect } from 'react'
import { useClientContext, useRefresh } from '@flowgram.ai/free-layout-editor'


function SomeReact() {
  const refresh = useRefresh()
  const linesManager = useClientContext().document.linesManager
  useEffect(() => {
      const dispose = linesManager.onAvailableLinesChange(() => refresh())
      return () => dispose.dispose()
  }, [])
  console.log(ctx.document.linesManager.getAllLines())
}

自定义箭头渲染器

WorkflowLinesManager 支持通过渲染器注册表自定义箭头样式。详细使用方法请参考 线条配置指南 文档。

// 简单示例：注册自定义箭头
const editorProps = {
  materials: {
    components: {
      'arrow-renderer': MyCustomArrow,
    },
  },
};