【开源】支持子流程及演示动画的流程设计器

背景

最近做的项目中有流程设计的需求,且要求设计器具有可嵌套子流程功能,业务比较复杂,当时没有找到合适的设计器,后来选型cytoscapejs,用vue架构了一个流程设计器,不过相对而言太复杂,业务特征太明显,故计划年后做出版较为通用的流程设计器,且增加演示动画功能(待完善)。本文是对目前所做设计器的一个展示。后续还会继续完善。

npm
NPM downloads
JS gzip size
CSS gzip size
Join the chat at https://gitter.im/tlzzu/flow-chart-editor

基于cytoscape.js的流程设计器。演示文档 Demo。已纳入SoDiao豪华套餐。()

优点如下:

1.  支持实/虚线、连线弯曲、撤销重做、放大缩小;
2.  可导出 json/png/jpg 文档;
3.  toolbar自定义;
4.  允许在流程中嵌套**子流程**;
5.  支持只读、设计两种模式(敬请期待);
6.  支持设置**流程动画**(敬请期待);
7.  ……后续再完善……

在此,感谢 easyicon.net 提供的图标。

1. 预览-Preview

2. 安装使用-Install

3. 二次开发-Build

4. 文档-Document

5. 依赖-Dependencies

6. 错误提交-Bug

7. 捐赠-Donation

8. 许可证-LICENSE

1. 预览-Preview

预览效果如下:



2. 安装使用-Install

npm 安装

推荐使用 npm 安装

npm i flow-chart-editor -S

可在页面中引用

import FCE from "flow-chart-editor";

var fce=new FCE({
  el: document.getElementById("fce"),//初始化节点
  toolbars: [{//自定义toolbar
      name: "rectangle",//节点名称
      icon: "images/rectangle.png",//toolbar的图片
      className: "",//自定义样式
      title: "矩形",//title值
      exec(evt, clickType, obj) {//选中该节点后,点击编辑区域后被触发事件
        const label = prompt("请输入节点名称:"),
          data = { id: new Date().getTime(), label: label };
        if (!label) return;
        if (clickType === "node") {
          data.parent = obj.id;
        }
        this.addNode(data, "rectangle");
      }
    },  
    "animation"]//这里FCE内置的一种制作流程动画组件
  });

脚本引用

<!DOCTYPE html>
<html>
  <head>
    <title>flow-chart-editor流程设计器</title>
    <link href="css/cytoscape-context-menus.css" rel="stylesheet">
    <link href="css/fce.1.0.0.min.css?a643cc98a261f0b1586b" rel="stylesheet">
    <script type="text/javascript" src="js/lib/cytoscape.js"></script>
    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript" src="js/lib/konva.min.js"></script>
    <script type="text/javascript" src="js/lib/cytoscape-node-resize.js"></script>
    <script type="text/javascript" src="js/lib/cytoscape-grid-guide.js"></script>
    <script type="text/javascript" src="js/lib/cytoscape-edgehandles.js"></script>
    <script type="text/javascript" src="js/lib/cytoscape-context-menus.js"></script>
    <script type="text/javascript" src="js/lib/cytoscape-edge-bend-editing.js"></script>
    <script type="text/javascript" src="js/lib/cytoscape-undo-redo.js"></script>
    <script type="text/javascript" src="js/lib/cytoscape-view-utilities.js"></script>
    <script type="text/javascript" src="js/fce.1.0.0.min.js?a643cc98a261f0b1586b"></script>
  </head>
  <body>
    <div id="fce"></div>
    <script>
      var fce=new FCE({
        el: document.getElementById("fce"),//初始化节点
        toolbars: [{//自定义toolbar
          name: "rectangle",//节点名称
          icon: "images/rectangle.png",//toolbar的图片
          className: "",//自定义样式
          title: "矩形",//title值
          exec(evt, clickType, obj) {//选中该节点后,点击编辑区域后被触发事件
            const label = prompt("请输入节点名称:"),
              data = { id: new Date().getTime(), label: label };
            if (!label) return;
            if (clickType === "node") {
              data.parent = obj.id;
            }
            this.addNode(data, "rectangle");
          }
        },  
        "animation"]//这里FCE内置的一种制作流程动画组件
      });
    </script>
  </body>
</html>

3. 二次开发-Build

二次开发前请确保已经安装nodewebpack。在控制台中执行 npm run <target>,其中:

  • dev:开发模式,执行后可直接访问http://localhost:9110/直接调试。
  • build:执行打包,dist 中的文件会重新打包。

4. 文档-Document

//todo 稍后完善。

5. 依赖-Dependencies

jquery ^3.2.1

cytoscape ^3.2.0

6. 错误提交-Bug

  1. 可邮件至dd@sodiao.org
  2. 可以在github中的ISS中提交;

7. 捐赠-Donation

表示您对本项目的支持
image

8. 许可证-LICENSE

MIT.

欢迎下载适用!

posted @ 2018-03-09 01:20  tongling  阅读(4059)  评论(12编辑  收藏  举报