1. 介绍

• Butterfly是一个基于JS的数据驱动的节点式编排组件库，丰富DEMO，开箱即用，支持demo调试，导出即用。
• 技术主要涉及：vite+vue3+butterfly-dag
• 数据主要使用mockjs模拟

2. 配置

npm install butterfly-dag --save
注意事项：不需要安装butterfly-vue依赖

3.代码

<template>
    <div className="litegraph-canvas" id="chart"></div>
 </template>
 
    let root = document.getElementById('chart');
    const canvas= new Canvas({
        root: root,
        disLinkable: true, // 可删除连线
        linkable: true,    // 可连线
        draggable: true,   // 可拖动
        zoomable: true,    // 可放大
        moveable: true,    // 可平移
        theme: {
            edge: {
                shapeType: 'AdvancedBezier',
                arrow: true, 
                arrowPosition: 0.5,  //箭头位置(0 ~ 1)
                arrowOffset: 0.0,    //箭头偏移
            }
        }
    });
    canvas.draw(mockData, () => {//mockData为从mock中获取的数据
        canvas.setGridMode(true, {
            isAdsorb: false,         // 是否自动吸附,默认关闭
            theme: {
                shapeType: 'circle',     // 展示的类型，支持line & circle
                gap: 20,               // 网格间隙
                background: 'rgba(0, 0, 0, 0.65)',     // 网格背景颜色
                circleRadiu: 1.5,        // 圆点半径
                circleColor: 'rgba(255, 255, 255, 0.8)'    // 圆点颜色
            }
        });
    });