GooFlow获取节点/线信息和自定义节点属性

使用bootstrap 和 gooflow 完成demo

参考 Jquery版API文档 

用到最主要的两个数据结构定义

1、描述单个节点信息的Json结构体。

NodeItem 类型：Json Object

描述单个节点信息的Json结构体。

属性	类型	默认值	描述
name	String	('node_'+***)	节点的显示名称。
left	Number	0	节点相对于工作区的左边距，单位像素。
top	Number	0	节点相对于工作区的顶距，单位像素。
width	Number	104	节点宽度，单位像素；仅非圆形节点时有效。
height	Number	26	节点高度，单位像素；仅非圆形节点时有效。
type	String	''	必填项：节点类型名称，可用户自定义；其对应的图标样式为'ico_'+节点类型；  类型名中如果有' round'，则为圆形节点，如果有' mix'，则为复合节点(变换背景色)。
marked	Boolean	(undefined)	节点是否已被标注。
alt	Boolean	(undefined)	在编辑模式下节点是否被用户编辑过。
areaId	String	(undefined)	该节点所属分组泳道的id，当为undefined时表示不属于任何分组。
color	String	(undefined)	选填项。该节点对象特有的背景颜色，优先级高于GooFlow.color.node。
fontColor	String	(undefined)	选填项。该节点对象特有的文字颜色，优先级高于GooFlow.color.font。
……	Object	(undefined)	任意类型、任意数量的自定义属性，由用户根据需要自行添加。

    

2、描述单条连线信息的Json结构体。

LineItem 类型：Json Object

描述单条连线信息的Json结构体。

属性	类型	默认值	描述
name	String	(undefiend)	连线的显示名称，未定义时连线上无文字。
from	String	(undefiend)	必填项，连线的起始节点id。
to	String	(undefiend)	必填项，连线的目标节点id。
type	String	sl	连线类型，取值有三种：'sl'直线；'lr'中段可左右移动的折线'；'tb'中段可上下移动的折线。
M	Number	(undefiend)	一种抽象值，单位为像素。 当type='lr'时为必填项，表示中段线相对于工作区的X坐标值； 当type='tb'时为必填项，表示中段线相对于工作区的Y坐标值。 当type='sl'时无任何意义。
marked	Boolean	(undefined)	连线是否已被标注。
alt	Boolean	(undefined)	在编辑模式下连线是否被用户编辑过。
dashed	Boolean	(undefined)	是否为虚线样式，当为undefined时表示默认实线。
noArrow	Boolean	(undefined)	是否有箭头，当为undefined时表示默认为有向线，反之则为无向线段。
color	String	(undefined)	选填项。该连线对象特有的线条颜色，优先级高于GooFlow.color.line。
fontColor	String	(undefined)	选填项。该连线对象特有的文字颜色，优先级高于GooFlow.color.lineFont。
……	Object	(undefined)	任意类型、任意数量的自定义属性，由用户根据需要自行添加。

 

 

一、创建两个div 布局

    1、引入 js 和 css 文件 参考 GooFlow入门使用

    2、一个 div 初始化 GooFlow 实例，另一个一个显示信息

    <div class="col-md-8" >
        <div id="flowsuperviseTemp" style="width:750px;min-height:700px;margin:5px;float:left"></div>
    </div>
    <div class="col-md-4" >
        <form id="flowsuperviseItemForm">
            <div class="form-group">
                <table class="table table-hover table-bordered table-condensed" style="width: 99%" id="configtable">
                    <tr>
                        <th colspan="2" >节点属性</th>
                    </tr>
                    <tr>
                        <th>节点ID：</th>
                        <td><input type="text" class="form-control form-group-sm" id="ele_id" name="compid" readonly="readonly"/></td>
                    </tr>
                    <tr>
                        <th>名称：</th>
                        <td><input type="text" class="form-control form-group-sm"  id="ele_name" name="name" /></td>
                    </tr>
                    <tr>
                        <th>类型：</th>
                        <td><input type="text" class="form-control form-group-sm"  id="ele_type" name="type" /></td>
                    </tr>
                    <tr>
                        <th>属性：</th>
                        <td><input type="text" class="form-control form-group-sm"  id="ele_model" name="model"/></td>
                    </tr>
                    <tr>
                        <th>左边距：</th>
                        <td><input type="text" class="form-control form-group-sm"  id="ele_left" name="left" comptype="node" /></td>
                    </tr>
                    <tr>
                        <th>上边距：</th>
                        <td><input type="text" class="form-control form-group-sm"  id="ele_top" name="top" comptype="node"/></td>
                    </tr>
                    <tr>
                        <th>宽度：</th>
                        <td><input type="text" class="form-control form-group-sm"  id="ele_width" name="width" comptype="node" /></td>
                    </tr>
                    <tr>
                        <th>高度：</th>
                        <td><input type="text" class="form-control form-group-sm"  id="ele_height" name="height" comptype="node" /></td>
                    </tr>
                    <tr>
                        <th colspan="2">连接属性</th>
                    </tr>
                    <tr>
                        <th>起始节点：</th>
                        <td><input type="text" class="form-control form-group-sm"  id="ele_from" name="from" comptype="line" /></td>
                    </tr>
                    <tr>
                        <th>结束节点：</th>
                        <td><input type="text" class="form-control form-group-sm"  id="ele_to" name="to" comptype="line" /></td>
                    </tr>
                    <tr>
                        <th>是否虚线：</th>
                        <td><input type="text" class="form-control form-group-sm"  id="ele_dash" name="dash" comptype="line" /></td>
                    </tr>
                    <tr id="sxsx">
                        <th colspan="2"> 自定义配置属性
                            <a href="javascript:showDialog('url')">
                                <div style="float: right;cursor:pointer;" title="配置"><i class="icon-settings"></i>&nbsp; </div>
                            </a>
                        </th>
                    </tr>
                    <tr>
                        <th>姓名</th>
                        <td><input type="text" class="form-control" placeholder="姓名"/></td>
                    </tr>
                    <tr>
                        <th>性别</th>
                        <td><input type="text" class="form-control" placeholder="性别"/></td>
                    </tr>
                    <tr>
                        <th colspan="2">
                            <input type="reset" class="btn-default" value="重置"/>
                            <input type="button" class="btn-primary" value="确定" onclick="editflowsuperviseItem()"/>
                        </th>
                    </tr>
                </table>
            </div>
        </form>
    </div>

input 中的 name 名和数据结构定义的属性名保持一致（需要什么显示什么），也可以自定义 name 名 。例如 节点id 和 属性等

input  也可以自定义属性（用于业务处理），例如 comtype 属性等

 

二、js 初始化 GooFlow 实例

 1、需要用到 事件钩子 和 内部属性等，举两个，其他参考文档

      1.1 组件获得焦点事件

this.onItemFocus() 返回值：boolean

当操作某个元素（节点/连线）被由不选中变成选中时，触发的方法。

传参：( id, type )

名称	类型/格式	描述
id	String	元素的id，唯一标识。
type	String	元素的种类，有'node'节点、'line'连线两种

     1.2  组件失去焦点事件

this.onItemBlur() 返回值：boolean

当操作某个元素（节点/连线）被由选中变成不选中时，触发的方法。

传参：( id, type )

名称	类型/格式	描述
id	String	元素的id，唯一标识。
type	String	元素的种类，有'node'节点、'line'连线两种。

 2、在获取失去焦点时，回显和删除 form 表单的信息

<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){
            var $form = $("#flowsuperviseItemForm");
                $form[0].reset();
                $form.find("input[name='compid']").val(id);
                $form.find("input[name='model']").val(type);
            var obj;
            if(type == "line"){
                obj = this.$lineData[id];
            }else if(type == "node"){
                obj=this.$nodeData[id];
            }
            $.each(obj, function (i, n) {
                $form.find("input[name='"+i+"']").val(n);
            });
            //alert(id + ":" + type);
            return true;
        }

        //组件失去焦点事件
        flowsuperviseTemp.onItemBlur=function(id, type){
           var $form = $("#flowsuperviseItemForm");
            $form[0].reset();
            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());
            console.log(flowchart);
            alert(flowchart);
        }else{
            alert("请先绘制流程图");
        }
    }
    
    function editflowsuperviseItem(){
        var $form = $("#flowsuperviseItemForm");
        //获取节点ID 和 属性（node/line）
        var comp_id = $form.find("input[name='compid']").val();
        var comp_model = $form.find("input[name='model']").val();

        if(comp_id){
            var flowchartdata = flowsuperviseTemp.exportData();
            if(comp_model && comp_model == "node"){
                $.each(flowchartdata.nodes, function (i, n) {
                    if(i == comp_id){
                        //将form表单信息更新到node节点事项各个属性中
                        $form.find("input").each(function(){
                            if($(this).prop('name') && $(this).prop('name') != 'compid'){//组件ID 不相等就不修改了
                                if(!($(this).attr('comptype')) || $(this).attr('comptype')=='node'){
                                    n[$(this).prop('name')] = $(this).val();
                                    // name 名 和 节点属性对应，把值放进去，跟回显信息相反
                                    // alert($(this).prop('name') + ":" + $(this).val());
                                }
                            }
                        });
                        //n['name'] = $form.find("input[name='name']").val();
                        flowchartdata.nodes[i]=n;
                    }
                });
            }
            if(comp_model && comp_model=='line'){
                $.each(flowchartdata.lines, function (i, n) {
                    if(i == comp_id){
                        //将form表单信息更新到line节点事项各个属性中
                        $form.find("input").each(function(){
                            if($(this).prop('name') && $(this).prop('name') != 'compid'){//组件ID就不修改了
                                if(!($(this).attr('comptype')) || $(this).attr('comptype')=='line'){
                                    if($(this).prop('name') == "dash"){
                                        if($(this).val() == "false"){
                                            n[$(this).prop('name')]=false;
                                        }
                                        if($(this).val() == "true"){
                                            n[$(this).prop('name')]=true;
                                        }
                                    }else{
                                        n[$(this).prop('name')]=$(this).val();
                                    }
                                }
                            }
                        });
                        // n['name']=$form.find("input[name='name']").val();
                        flowchartdata.lines[i]=n;
                    }
                });
            }
            flowsuperviseTemp.clearData();
            flowsuperviseTemp.loadData(flowchartdata);
        }else{
            alert('请先选择节点！');
        }
    }
</script>

 1、 确定按钮 保存单个节点的信息到节点实例中

 2、流程图保存按钮 

    获取 json 结构的流程数据， ajax 请求 交互后台

3、用到一些 GooFlow de 内部属性

  

   

{
    "title":"事项流程图",
    "nodes":{
	"1553438226938":{"name":"开始","left":267,"top":88,"type":"start round mix","width":28,"height":28,"alt":true},
	"1553438229007":{"name":"结束","left":277,"top":412,"type":"end round mix","width":28,"height":28,"alt":true},
	"1553438231623":{"name":"节点1","left":"237","top":"169","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"张三","xb":"男"},
	"1553438232544":{"name":"节点2左","left":"107","top":"251","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"李四","xb":"女"},
	"1553438233100":{"name":"节点2右","left":"382","top":"251","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"王五","xb":"男"},
	"1553438235571":{"name":"节点3","left":"242","top":"333","type":"task","width":"104","height":"28","alt":true,"model":"node","xm":"赵柳","xb":"不详"}
    },
    "lines":{
	"1553438237966":{"type":"sl","from":"1553438226938","to":"1553438231623","name":"","dash":false},
	"1553438238928":{"type":"sl","from":"1553438231623","to":"1553438233100","name":"","dash":false},
	"1553438240303":{"type":"sl","from":"1553438231623","to":"1553438232544","name":"","dash":false},
	"1553438241365":{"type":"sl","from":"1553438232544","to":"1553438235571","name":"","dash":false},
	"1553438243677":{"type":"sl","from":"1553438233100","to":"1553438235571","name":"","dash":false},
	"1553438245066":{"type":"sl","from":"1553438235571","to":"1553438229007","name":"","dash":false}
    },
    "areas":{},
    "initNum":13
}

大体 GooFlow 的一个 节点信息 与 自定义字段的 回显/保存 有了一点了解,

多查看文档 end ~