React & Vue2 Butterfly圖編排——讓資料更自由地驅動DAG

jambinliang發表於2021-01-17

一、簡介

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} />
}