React & Vue2 Butterfly图编排——让数据更自由地驱动DAG流程图

最新推荐文章于 2024-08-28 07:58:54 发布

jambin_front

最新推荐文章于 2024-08-28 07:58:54 发布

阅读量3.9k

点赞数 1

本文链接：https://blog.csdn.net/jambin_front/article/details/112698791

版权

Butterfly是一款由阿里云开发的图编辑器引擎，旨在提供高度定制和易用的图编排体验。针对React和Vue生态的适配，通过ReactDom.createPortal封装，降低了集成成本，支持Antd等UI库，增强了易用性和拓展性。用户现在可以更方便地定制画布、节点和线条，为图编排提供了更多可能性。

摘要由CSDN通过智能技术生成

一、简介

Butterfly是由阿里云-数字产业产研部孵化出来的的图编辑器引擎，由咱们部门以及其他开发者共同维护开发，具有使用自由、定制性高的优势，已支持集团内外上百张画布，不夸张的说，我觉得可以算的上“杭州余杭区最自由的图编辑器引擎”。

在这里插入图片描述
可是，由于大多数用户对于原生的jquery操作还是略感繁琐，对于React的生态(特别是Antd,Fusion等UI库)支持不够友好，随之而来butterfly对于React & Vue支持的呼声日渐升温。很抱歉，React-Butterfly & Vue-Butterfly 来迟了，但永远不会缺席。

二、核心优势

1. 易用性增强

（1）上手成本降低

原本基于dom的设计模型大大方便了用户的入门门槛，提供自定义节点，锚点的模式大大降低了用户的定制性：

// 继承式的定制
const Node = require('butterfly-dag').Node;
class ANode extends Node {
   
  draw(obj) {
   
    // "零件式"开发，把最终的dom返回给我即可
  }
  // 随意自己拓展方法 
}

canvas.draw({
   
  nodes: [{
   
    id: 'xxxx',
    top: 100,
    left: 100,
    Class: ANode //设置基类之后，画布会根据自定义的类来渲染
  }]
})