GooFlow入门使用

这是用于Web端构建流程图的在线流程设计器，提供js版，Vue版，React版本，但是其为闭源项目。

引入相关包

<!-- 引入.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>

设置面板使用的容器

<div id="demo" style="margin:10px"></div>

初始化配置

var property={

    width:1200,

    height:540,

    toolBtns:["start round mix","end round","task","node","chat","state","plug","join","fork","complex mix"], // 工具栏按钮

    haveHead:true, // 头部工具

    headLabel:true, // 文件名

    headBtns:["new","open","save","undo","redo","reload","print"],//如果haveHead=true，则定义HEAD区的按钮

    haveTool:true, // 侧边工具

　haveDashed:true, // 虚线

    haveGroup:true, // 组织

    useOperStack:true

};

demo=$.createGooFlow($("#demo"),property); // 初始化面板

基础配置

工具栏title配置

var remark={

    cursor:"选择指针",

    direct:"结点连线",

    dashed:"关联虚线",

    start:"入口结点",

    "end":"结束结点",

    "task":"任务结点",

    node:"自动结点",

    chat:"决策结点",

    state:"状态结点",

    plug:"附加插件",

    fork:"分支结点",

    "join":"联合结点",

    "complex":"复合结点",

    group:"组织划分框编辑开关"

};

demo.setNodeRemarks(remark); // 加载title

文件加载配置

demo.loadData(jsondata); // 加载文件

保存更新配置

flow.onBtnSaveClick = function () { // 保存更新

　　flow.blurItem();

　　wholeUpdate({nodes: flow.$nodeData, lines: flow.$lineData});

};

双击头部满屏配置

$('.GooFlow_head').dblclick(function () {

　　fullscreen();

});

添加节点，获取焦点，失去焦点，移动节点，删除节点

flow.onItemAdd = onItemAdd;

flow.onItemFocus = onItemFocus;

flow.onItemBlur = onItemBlur;

flow.onItemDel = onItemDel;

flow.onItemMove = function () {

　　return true;

};

其他配置

demo.onItemRightClick=function(id,type){

　　return false; //返回false可以阻止原组件自带的双击直接编辑事件

}

demo.onItemDbClick=function(id,type){

　　return false; //返回false可以阻止浏览器默认的右键菜单事件

}

demo.onPrintClick=function(){

　　demo.print(0.8);

} // 初始化内容大小

内部属性

　　this.$nodeData

　　this.$lineData

内部方法

　　this.setName(id, '名称', 'node')；// 设置节点信息

　　this.setTitle('流程名称');// 设置流程名称

 

结束