A list,

Butterfly research by ali cloud – digital industry production of hatching diagram editor engine, from our department, and other developers jointly maintain the development, has the advantages of using free, customizable high has hundreds of inside and outside the canvas support group, literally, I think can count on “hangzhou yuhang district is the most free diagram editor engine”.

However, as most users are still a little bit fussy about the original jquery operation and are not friendly enough to support React ecology (especially Antd,Fusion and other UI libraries), the voice of Butterfly for React & Vue support is heating up day by day. I’m very sorry,React-Butterfly & Vue-ButterflyLate, but never absent.

Second, core strengths

1. Enhanced ease of use

(1) Lower start-up costs

The original DESIGN model based on DOM greatly facilitates the entry threshold of users, provides custom nodes, and the mode of anchor points greatly reduces the customization of users:

// Inheritable customization
const Node = require('butterfly-dag').Node;
class ANode extends Node {
  draw(obj) {
    // "parts" development, return the final DOM to me
  }
  // Feel free to extend methods yourself
}

canvas.draw({
  nodes: [{
    id: 'xxxx'.top: 100.left: 100.Class: ANode // After the base class is set, the canvas will be rendered according to the custom class}}]);Copy the code

However, the native dom writing method of jquery is not very convenient for users (especially non-professional front-end users), nor can they enjoy the convenience of React. For front-end frameworks with vDOM layer, there may be a certain amount of work in the integration process of actual projects.

In Butterfly – React, I provide reactdom.createPortal, which is probably the best way to integrate Butterfly with React, and encapsulate it.

Now, you can highly customize your canvas in the following convenient ways:

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

const nodes = [
  {
    id: '1'.endpoints: endpoints,
    render() {
      // You can customize it using JSX, or you can write the React component and pass it in
      return (
        <div>Test Node 1</div>); }}];const Demo = () = > {
	return (
	  <ReactButterfly nodes={nodes} />
  );
};
Copy the code

(2) Fewer but better core concepts

From Butterfly 1.0, the number of core concepts was small, to be exact, and there were neither too many concepts that could not be understood nor too many key concepts that could not be implemented because of the lack of key concepts.

So far, butterfly’s core concepts are:

  • Canvas

  • Node Group

  • Node (Node)

  • Line (Edge)

  • Anchor point

  • Layout (Layout)

    For Butterfly – React, the details of these core concepts are further encapsulated. For example, if you need to customize the label content on the Edge, you can now do so directly.

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 = {
  // Define a node
  nodes: [{id: '1'.endpoints: endpoints,
      left: 0.top: 0.render() {
        return "Node 1"; }}, {id: '2'.endpoints: endpoints,
      left: 400.top: 0.render() {
        return "Node 2"; }}]./ / define edge
  edges: [{id: '2'.sourceNode: '1'.targetNode: '2'.source: 'right'.target: 'left'.shapeType: 'Bezier'.labelRender() {
        return <Label />; ]}}};const Demo = () = > {
	return <ReactButterfly {. data} / >
}
Copy the code

2. Expansive enhancement

(1) Better support for ecology (Antd,Fusion and other UI libraries)

Compared with SVG or Canvas, DOM node has the disadvantage of performance bottleneck (after a lot of tests, there is no pressure under a thousand nodes), and the advantage is rich expression and form ability, and can reuse a lot of existing components, such as ANTD and code editor Codemirror.

(2) Richer customization

Butterfly provides a way to customize almost any part, so let’s jump right to an example

Third, summary

Our department has been focusing on graphic layout for 4 years, just want to provide a help for the direction of graphic layout in the industry. Little Butterfly has provided a free and convenient graph editor engine for hundreds of canvases inside and outside the group. Hope butterfly-React can add a pair of wings to the small butterflies and provide more convenient access.

If you have any problem with the use of Butterfly, please feel free to issue it on Butterfly. We will reply and repair the support as soon as possible. Open source is not easy, if you like friends can give a star on Github