【開源】支持子流程及演示動畫的流程設計器

本文轉載自查看原文 2018-03-09 01:20 2689 流程動畫/ 流程設計器/ 前端/ FCE

背景

最近做的項目中有流程設計的需求，且要求設計器具有可嵌套子流程功能，業務比較復雜，當時沒有找到合適的設計器，后來選型cytoscapejs，用vue架構了一個流程設計器，不過相對而言太復雜，業務特征太明顯，故計划年后做出版較為通用的流程設計器，且增加演示動畫功能（待完善）。本文是對目前所做設計器的一個展示。后續還會繼續完善。

JS gzip size
CSS gzip size

基於cytoscape.js的流程設計器。演示文檔 Demo。已納入SoDiao豪華套餐。(^▽)

優點如下：

1.  支持實/虛線、連線彎曲、撤銷重做、放大縮小;
2.  可導出 json/png/jpg 文檔；
3.  toolbar自定義；
4.  允許在流程中嵌套**子流程**；
5.  支持只讀、設計兩種模式（敬請期待）;
6.  支持設置**流程動畫**（敬請期待）;
7.  ……后續再完善……

在此，感謝 easyicon.net 提供的圖標。

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>