一、簡介

     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上給個