Skip to main content

基本用法

引入​

import AIFlow from '@baidu/aiflow';

基本用法​

定义一个 AIFlow 容器，通过 new AIFlow 进行渲染。

function App() {
    const node1 = {
        id: '100',
        defineData: {
            nodeName: '数据拆分'
        },
        // 画布中位置
        position: [100, 100],
        // 输入
        input: [
            {}
        ],
        // 输出
        output: [
            {}
        ]
    };

    const node2 = {
        id: '101',
        defineData: {
            nodeName: '随机采样'
        },
        // 画布中位置
        position: [300, 100],
        // 输入
        input: [
            {}
        ],
        // 输出
        output: [
            {}
        ]
    };

    const node3 = {
        // id
        id: '102',
        defineData: {
            nodeName: '列选择'
        },
        // 画布中位置
        position: [100, 300],
        // 输入
        input: [
            {}
        ],
        // 输出
        output: [
            {}
        ]
    };

    const nodes = [
        node1,
        node2,
        node3
    ];

    const edges = [
        {
            // 连线起点，输出节点的id : 输出port的index
            // 100:0 表示 id 为 100 的节点的第一个输出
            src: '100:0',
            // 连线终点，输入节点的id : 输入port的index
            // 101:0 表示 id 为 101 的节点的第一个输入
            to: '101:0'
        },
        {
            src: '100:0',
            to: '102:0'
        }
    ];

    // AIFlow 全局配置
    const GLOBAL_CONFIG = {
        // 这里宽高和容器保持一致
        cWidth: 1000,
        cHeight: 1000,
        // 是否静态图片，true 节点和连线都不可拖动，false 可以添加事件监听
        isStatic: false,
        // 开启辅助线
        guideLineOn: true
    };

    useEffect(() => {
        const aiflowIns = new AIFlow(
            // 容器 DOM 对象
            document.getElementById('ai-flow-box'),
            {
                nodes,
                edges
            },
            // 全局配置
            GLOBAL_CONFIG
        );
    }, [])

    return (
        <div className="ai-flow-out-box">
            <div id="ai-flow-box" className="ai-flow-box"></div>
        </div>
    );
}

API​

Flow​

参数说明类型默认值
data初始化数据{nodes, edges}[]
config配置Object--
ref组件实例ref--
templates模版列表Array[]

data node​

参数说明类型默认值
id唯一标识符string--
defineData模版中的自定义数据Objectnull
position在画布中的位置Array[0, 0]
input输入点集合，一个对象代表一个输入点Array[]
output输出点集合，一个对象代表一个输出点Array[]

data edge​

参数说明类型默认值
src连线起点，格式为'{node.id}:{node的输出index}'string--
to连线终点，格式为'{node.id}:{node的输入index}'string--

config​

参数说明类型默认值
isStatic是否静态图片booleanfalse
relationMapping关系映射方式
目前支持一对多(o2m)、多对多(m2m)、暂不支持多对一(m2o)、一对一(o2o)
默认值 o2m		stringo2m
cWidth画布宽度number400
cHeight画布高度number400
templateName是否静态图片booleanfalse
isStatic整个图默认模版stringdefaultTemplate
guideLine辅助线相关配置Object--
guideLine.on是否开启辅助线booleantrue
guideLine.style辅助线样式Object--
autoSort自动排序相关配置Object--
autoSort.on是否需要自动排序
true: 程序智能计算每个 node 的 位置
false: 根据 node position 来定位		booleanfalse
autoSort.horizontal是否水平排序
true: 水平排序
false: 垂直排序		booleanfalse
autoSort.alignnode 对齐方式
start: 水平排列时表示上对齐，垂直排列时表示左对齐
middle: 中间对齐
end: 水平排列时表示下对齐，垂直排列时表示右对齐		stringmiddle
autoSort.beginX起点 X 坐标number0
autoSort.beginY起点 Y 坐标number0
autoSort.spaceX横向间距number50
autoSort.spaceY纵向间距number20
autoSort.type排序算法选择，基础的排序算法 (default)，中位数排序算法 (withMedium)stringdefault
autoSort.hryType排序算法分层方法选择：基础分层方法（default）、重心法（barycenter）stringdefault
frameSelect框选参数Object--
frameSelect.style框选样式Object{}
zoom鼠标滚动触发缩放事件相关配置Object--
zoom.default是否添加默认的缩放响应，即基于鼠标位置对整个图进行缩放booleanfalse
zoom.minScale默认缩放响应的缩放下限number0.2
zoom.maxScale默认缩放响应的缩放上限number5
pan鼠标拖动触发平移事件相关配置Object--
pan.default是否添加默认的平移响应，添加默认的 pan 事件，即在框选不打开和没有节点选中时，平移整个图booleanfalse
dragWithinCanvas拖动节点时，检测并限制节点不移动到 canvas 外部booleantrue

templates​

需要注册的模版

参数说明类型默认值
name模版名称string--
content模版对象Object--

模版内容可以参考:

https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable

TODO...