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

時間 2021-01-18

標籤 javascript 前端 vue java node react jquery git github canvas 欄目 React 简体版

原文原文鏈接

1、簡介

Butterfly是由阿里雲-數字產業產研部孵化出來的的圖編輯器引擎，由我們部門以及其餘開發者共同維護開發，具備使用自由、定製性高的優點，已支持集團內外上百張畫布，不誇張的說，我以爲能夠算的上「杭州餘杭區最自由的圖編輯器引擎」。javascript

但是，因爲大多數用戶對於原生的jquery操做仍是略感繁瑣，對於React的生態(特別是Antd,Fusion等UI庫)支持不夠友好，隨之而來butterfly對於React & Vue支持的呼聲日漸升溫。很抱歉，React-Butterfly & Vue-Butterfly 來遲了，但永遠不會缺席。前端

2、核心優點

1. 易用性加強

（1）上手成本下降vue

本來基於dom的設計模型大大方便了用戶的入門門檻，提供自定義節點，錨點的模式大大下降了用戶的定製性：java

// 繼承式的定製
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 這一層的前端框架而言，在實際項目中集成過程當中可能有必定工做量。node

在 butterfly-react 中，我提供了多是最佳 butterfly 與 React 的集成方式 —— ReactDom.createPortal ，而且對其進行了一層封裝。react

如今，你可使用如下便捷的方式來高度定製你的畫布：jquery

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）核心概念少而精git

從 butterfly 1.0開始，核心概念的數量很少，準確的說是合適，既沒有過多沒法理解的概念，也沒有缺乏關鍵概念致使有重要的沒法實現的功能。github

目前爲止， butterfly 的核心概念有：canvas

畫布（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} />
}