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

時間 2019-11-26

標籤開源支持流程演示動畫設計简体版

原文原文鏈接

背景

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

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

優勢以下：html

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

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

1. 預覽-Previewjava

2. 安裝使用-Installnode

3. 二次開發-Buildjquery

4. 文檔-Documentwebpack

5. 依賴-Dependenciesgit

6. 錯誤提交-Buggithub

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>