关于javascript:React-Vue2-Butterfly图编排让数据更自由地驱动DAG

一、简介

     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 // 设置基类之后，画布会依据自定义的类来渲染
  }]
});

     然而，原生的 jquery 编写 dom 形式对于用户 (特地是非专业前端用户) 来说不是非常便捷，也享受不了 React 便利性，存在 vdom 这一层的前端框架而言，在理论我的项目中集成过程中可能有肯定工作量。

     在 butterfly-react 中，我提供了可能是最佳 butterfly 与 React 的集成形式 —— ReactDom.createPortal，并且对其进行了一层封装。

     当初，你能够应用以下便捷的形式来高度定制你的画布：

import React from 'react';
import ReactButterfly from 'butterfly-react';

const nodes = [
  {
    id: '1',
    endpoints: endpoints,
    render() {
      // 能够应用 jsx 来定制，也能够本人写 react 组件传进来
      return (
        <div>
          测试节点 1
        </div>
      );
    }
  }
];

const Demo = () => {
    return (<ReactButterfly nodes={nodes} />
  );
};

（2）外围概念少而精

    从 butterfly 1.0 开始，外围概念的数量不多，精确的说是适合，既没有过多无奈了解的概念，也没有短少要害概念导致有重要的无奈实现的性能。

    目前为止，butterfly 的外围概念有：

• 画布（Canvas）
• 节点组（Group）
• 节点（Node）
• 线（Edge）
• 锚点（Endpoint）
• 布局（Layout）

      对于 butterfly-react 而言，这些外围概念的具体内容将进一步封装，譬如说如果你须要定制线（Edge）上 label 内容，那么你当初能够间接这样写即可。

import React from 'react';
import ReactButterfly from 'butterfly-react';

const endpoints = [
  {
    id: 'right',
    orientation: [1, 0],
    pos: [0, 0.5]
  },
  {
    id: 'left',
    orientation: [-1, 0],
    pos: [0, 0.5]
  }
];

const data = {
  // 定义节点
  nodes: [
    {
      id: '1',
      endpoints: endpoints,
      left: 0,
      top: 0,
      render() {return "节点 1";}
    },
    {
      id: '2',
      endpoints: endpoints,
      left: 400,
      top: 0,
      render() {return "节点 2";}
    }
  ],
  // 定义边
  edges: [
    {
      id: '1-2',
      sourceNode: '1',
      targetNode: '2',
      source: 'right',
      target: 'left',
      shapeType: 'Bezier',
      labelRender() {return <Label />;}
    }
  ],
};

const Demo = () => {return <ReactButterfly {...data} />
}

2. 拓展性加强

（1）更好地反对生态(Antd,Fusion 等 UI 库)

    dom 节点绝对于 svg 或者 canvas 来说，毛病是性能的瓶颈(通过咱们大量的测试，千个节点以下是毫无压力的)，长处则是饱满的表现力和表单能力，并且能够大量复用现有的组件，比如说 antd、比如说代码编辑器 codemirror。

（2）更丰盛的定制性

    butterfly 简直提供了任意部件的定制形式，上面咱们间接来看一下示例

三、总结

     咱们部门始终专一于图编排 4 年，仅想为业界的图编排方向提供一份助力。小蝴蝶曾经给团体内外百张画布提供了自在，便捷的图编辑器引擎。心愿 Butterfly-React 能为小蝴蝶加上一双翅膀，给大家提供更便当的接入形式。

     大家应用上有什么问题随时到 Butterfly 上提 issue，咱们会尽快回复并修复反对。开源不易，喜爱的敌人们能够在 github 上给个 star