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

 

在這裡插入圖片描述

2. 擴充性增強

(1)更好地支援生態(Antd,Fusion等UI庫)

    dom節點相對於 svg 或者 canvas 來說,缺點是效能的瓶頸(經過我們大量的測試,千個節點以下是毫無壓力的),優點則是豐滿的表現力和表單能力,並且可以大量複用現有的元件,比如說 antd 、比如說程式碼編輯器codemirror。

在這裡插入圖片描述

在這裡插入圖片描述

(2)更豐富的定製性

    butterfly 幾乎提供了任意部件的定製方式,下面我們直接來看一下示例

在這裡插入圖片描述

三、總結

     我們部門一直專注於圖編排4年,僅想為業界的圖編排方向提供一份助力。小蝴蝶已經給集團內外百張畫布提供了自由,便捷的圖編輯器引擎。希望Butterfly-React能為小蝴蝶加上一雙翅膀,給大家提供更便利的接入方式。

     大家使用上有什麼問題隨時到Butterfly上提issue,我們會盡快回復並修復支援。開源不易,喜歡的朋友們可以在github上給個star

相關文章