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

(二)React Ant Design Pro + .Net5 WebApi:前端环境搭建

一、简介

     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)

    JavaScript入门-函数function(二)

  • 节点(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

.NET 云原生架构师训练营(模块二 基础巩固 Scrum 核心)–学习笔记

给TA买糖
共{{data.count}}人
人已赞赏
经验教程

DHCP最佳实践(二)

2021-1-17 22:49:00

经验教程

(二)React Ant Design Pro + .Net5 WebApi:前端环境搭建

2021-1-17 23:20:00

⚠️
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。本站部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 momeis6@qq.com 或点击右侧 私信:momeis 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索