程序地带

React & Vue2 Butterfly图编排——让数据更自由地驱动DAG


一、简介

     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


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/noonnightstorm/p/14290713.html

随机推荐

linux扩容根目录空间_Linux系统扩容根目录磁盘空间

Linux系统扩容根目录磁盘空间使用背景发现虚拟机磁盘空间不够用了,于是准备给根分区进行扩容,控制台扩容或者添加磁盘后为发现没有生效,原因在于没有格式化。磁盘...

weixin_39975810 阅读(351)

Kettlea安装详解

Kettle连接Oracle数据库连接数据库的步骤1、下载数据库的驱动oracle数据库驱动的下载地址:https://www.oracle.com/cn/database/techno...

☜☞ 阅读(182)

CAD制图初学入门:如何在CAD图纸中插入图框?

在使用正版CAD软件绘制完成图纸后,为了能让CAD图纸更加清晰明了,一般情况下会需要给CAD图纸加上图框。可是有些CAD制图初学入门者并不知道该如何进行操作,...

7Joong 阅读(279)