GooFlow入门使用

 官方网址：https://gooflow.xyz/

 GooFlow已转为闭源项目，github上不再提供clone和下载。
 试用版请访问gitee上的[项目主页]( https://gitee.com/gooflow/gooflow )

特点

• 跨领域:流程图设计器不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.
• 页面顶部栏、左边侧边栏均可自定义；
• 当左边的侧边栏设为不显示时，为只读状态，此时的视图区可当作是一个查看器而非编辑器。
• 当前最新版本已全部使用自定义的阿里巴巴矢量图标库，可不再需要一张用来显示图标样式的图片。
• 侧边工具栏除了基本和一些流程节点按钮外，还自定义新的节点按钮，自定义节点都可以有自有的图标、类型名称，定义后在使用可可在工作区内增加这些自定义节点。
• 顶部栏可显示流程图数据组的标题，也可提供一些常用操作按钮。
• 顶部栏的按钮，除了撤销、重做按钮外，其余按钮均可自定义点击事件。
• 可画直线、折线；折线还可以左右/上下移动其中段。
• 具有区域划分功能，能让用户更直观地了解哪些节点及其相互间的转换，是属于何种自定义区域内的。
• 具有标注功能，用橙红色标注某个结点或者转换线，一般用在展示流程进度时。
• 能直接双击结点、连线、分组区域中的文字进行编辑
• 在对结点、连线、分组区域的各种编辑操作，如新增/删除/修改名称/重设样式或大小/移动/标注时，均可捕捉到事件，并触发自定义事件，如果自定义事件执行的方法返回FALSE，则会阻止操作。
• 具有操作事务序列控制功能，在工作区内的各种有效操作都能记录到一个栈中，然后可以进行撤销（undo()）或重做（redo()），像典型的C/S软件一样。
• 能将流程图以png图片的格式导出并下载（纯JS实现，但不支持IE9及以下浏览器）

一、入门使用：参考Jquery版API文档

1、引入 js 和 css 文件 

    <!-- 引入.css -->
    <link rel="stylesheet" type="text/css" href="./static/plugins/gooFlow1.3/GooFlow.css"/>
    
    <!-- 引入jQuery  -->
    <script src="static/jquery/jquery-3.3.1.js"></script>

<!-- 引入.js-->
<script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFlow.js"></script>
<!-- 可选(只读编辑)，将流程图左侧工具栏可编辑-->
<script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFunc.js"></script>
<!-- 可选，将流程图导出为图片文件的扩展包 -->
<script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFlow.export.js"></script>
<!-- 可选，将流程图输出打印-->
<script type="text/javascript" src="./static/plugins/gooFlow1.3/plugin/printThis.js"></script>
<!-- 可选，将流程图另存为PDF的扩展包-->
<script type="text/javascript" src="./static/plugins/gooFlow1.3/plugin/html2canvas.js"></script>
<script type="text/javascript" src="./static/plugins/gooFlow1.3/GooFlow.color.js"></script>
<script type="text/javascript" src="./static/plugins/gooFlow1.3/plugin/promise.min.js"></script>

 2、创建 div 设置参数（自定义参数）： width 百分比和像素都可以

<div id="flowsuperviseTemp" style="width:750px;min-height:700px;margin:5px;float:left"></div>

3、 js 中初始化 GooFlow 实例

 

<script type="text/javascript">
    var options = {
        //width:800,
        //height:500,
        //initLabelText: "流程图",
        toolBtns: ["start round mix", "end round mix", "task", "node", "chat", "state", "plug", "join", "fork", "complex mix"],
        haveHead: true,
        headLabel: true,
        headBtns: ["new", "save", "undo", "redo", "reload", "print", "exportImg"],//如果haveHead=true，则定义HEAD区的按钮
        haveTool: true,
        haveDashed: true,
        haveGroup: true,
        useOperStack: true
    };

    //设定左侧工具栏中每一种节点或按钮的说明文字
    GooFlow.prototype.remarks.toolBtns = {
        cursor: "选择指针",
        direct: "连接线",
        dashed: "连接线（虚线）",
        start: "开始节点",
        "end": "结束节点",
        "task": "事项节点",
        group: "区块编辑开关"
    };

    //设定顶部栏中每个按钮的说明文字
    GooFlow.prototype.remarks.headBtns = {
        "new": "新建流程",
        open: "打开流程",
        save: "保存结果",
        undo: "撤销",
        redo: "重做",
        reload: "重置流程",
        print: "打印流程图",
        exportImg: "导出流程图"
    };

    GooFlow.prototype.remarks.extendRight = "工作区向右扩展";
    GooFlow.prototype.remarks.extendBottom = "工作区向下扩展";

    var superviseDataStr;   //全局模板初始流程图数据字符串
    var flowsuperviseTemp;	//GooFlow实例本身

    //模拟数据
    //superviseDataStr = "";
    $(document).ready(function () {
        flowsuperviseTemp = $.createGooFlow($("#flowsuperviseTemp"), options); //用jquery扩展方法初始化GooFlow
        //flowsuperviseTemp = GooFlow.init("#flowsuperviseTemp",options);;     //用jquery扩展方法初始化GooFlow
        flowsuperviseTemp.setTitle("事项流程图");
        //flowsuperviseTemp.loadData($.parseJSON(superviseDataStr));	       //初始流程图数据


        //组件获得焦点事件
        flowsuperviseTemp.onItemFocus = function(id, type){
            alert(id + ":" + type);
            return true;
        }

        //组件失去焦点事件
        flowsuperviseTemp.onItemBlur=function(id, type){
            alert(id + ":" + type);
            return true;
        };

        //保存按钮事件
        flowsuperviseTemp.onBtnSaveClick = function () {
            saveflowsupervise();
        }

        //组件删除事件(默认是取消的)
        flowsuperviseTemp.onItemDel=function(id,type){
            this.blurItem();	//取消所选节点/连线被选定的状态。
            return true;
        }

        //重置按钮事件
        flowsuperviseTemp.onFreshClick = function () {
            flowsuperviseTemp.clearData();
            //flowsuperviseTemp.loadData($.parseJSON(superviseDataStr));
        }

        //打印事件
        flowsuperviseTemp.onPrintClick = function () {
            flowsuperviseTemp.print(1);
        }

        //导出图片事件
        var exportName = "事项流程图";
        //flowsuperviseTemp.setNodeRemarks(GooFlow.prototype.remarks.toolBtns);
        flowsuperviseTemp.onExportImgClick = function () {
            flowsuperviseTemp.exportDiagram(exportName);
        }

    });
</script>

<script type="text/javascript">
    function saveflowsupervise() {
        var nodeCount = flowsuperviseTemp.$nodeCount; //节点数（包含开始结束节点数）
        if(nodeCount > 0){
            var flowchart = JSON.stringify(flowsuperviseTemp.exportData());
            alert(flowchart);
        }
    }
</script>

 

 访问结果： 可编辑自己的流程设计：（也可以初始化流程数据，注意数据格式） 

       

 

 

总结：多看 API 和网上的案例