myflow.js 流程圖插件 拖拽組織架構流程圖 代碼和簡單文檔操作

 

jQuery ui基於myflow.js繪製流程圖插件，自定義組織架構圖圖表，拖拽繪製組織架構圖表代碼。支持分支、節點狀態工作流程圖表樣式代碼。下載地址https://download.csdn.net/download/qq_29099209/10658520，https://download.csdn.net/download/qq_29099209/11258209

有需要改裝的源碼的可以訪問https://download.csdn.net/download/qq_29099209/11846881，下面是一些改造操作的代碼 基本全局一搜就能找到代碼

經過改造自用的流程圖

源碼改起來不怎麼方便 以下是自己改動的一些：

1自定義工具欄

 var toolBar = createTool(dom);
    function createTool(dom) {
        var tool = [];
        var myflow = $.myflow;
        for (var i in dom) {
            tool[dom[i]['type']] = [];
            tool[dom[i]['type']]['showType'] = 'text';
            tool[dom[i]['type']]['type'] = dom[i]['type'];
            tool[dom[i]['type']]['name'] = {text: '<<' + dom[i]['type'] + '>>'};
            tool[dom[i]['type']]['text'] = {text: dom[i]['text']};
            tool[dom[i]['type']]['img'] = {src: dom[i]['img'], width: 48, height: 48};
            tool[dom[i]['type']]['props'] = [];
            tool[dom[i]['type']]['props']['text'] = [];
            tool[dom[i]['type']]['props']['text']['name'] = dom[i]['props1_name'];
            tool[dom[i]['type']]['props']['text']['label'] = dom[i]['props1_label'];
            tool[dom[i]['type']]['props']['text']['value'] = dom[i]['props1_value'];
            tool[dom[i]['type']]['props']['text']['editor'] = function () {
                return new myflow.editors.textEditor();
            };
        }
        return tool;
    }

在myflow.jpdl4.js文件中修改

  $.extend(true, myflow.config.tools.states,toolBar);

 2加入到項目後可能會因爲畫板偏移導致放置圖形和畫線偏移，需要對源碼進行部分修改

myflow.js中新增 resize()的初始化函數init_resize()，對以上內容的初始值進行修改，具體如下

 //初始位置
        function init_resize() {
            console.log('圖形初始位置')
            //初始位置修改
            var rx = _bbox.x + _o.margin - $("#SiteInfoPanel").offset().left,
                ry = _bbox.y + _o.margin - $("#SiteInfoPanel").offset().top,
                rw = _bbox.width - _o.margin * 2,
                rh = _bbox.height - _o.margin * 2;
            _rect.attr({
                x: rx ,
                y: ry ,
                width: rw,
                height: rh
            });
            switch (_o.showType) {
                case 'image':
                    _img.attr({
                        x: rx + (rw - _o.img.width) / 2,
                        y: ry + (rh - _o.img.height) / 2
                    }).show();
                    break;
                case 'text':
                    _rect.show();
                    _text.attr({
                        x: rx + rw / 2,
                        y: ry + rh / 2
                    }).show(); // 文本
                    break;
                case 'image&text':
                    _rect.show();
                    _name.attr({
                        x: rx + _o.img.width + (rw - _o.img.width) / 2,
                        y: ry + myflow.config.lineHeight / 2
                    }).show();
                    _text.attr({
                        x: rx + _o.img.width + (rw - _o.img.width) / 2,
                        y: ry + (rh - myflow.config.lineHeight) / 2
                        + myflow.config.lineHeight
                    }).show(); // 文本
                    _img.attr({
                        x: rx + _o.img.width / 2,
                        y: ry + (rh - _o.img.height) / 2
                    }).show();
                    break;
            }

            _bbox.x = _bbox.x - $("#SiteInfoPanel").offset().left
            _bbox.y = _bbox.y - $("#SiteInfoPanel").offset().top
            _bdots['t'].attr({
                x: _bbox.x + _bbox.width / 2 - _bw / 2,
                y: _bbox.y - _bw / 2
            }); // 上
            _bdots['lt'].attr({
                x: _bbox.x - _bw / 2,
                y: _bbox.y - _bw / 2
            }); // 左上
            _bdots['l'].attr({
                x: _bbox.x - _bw / 2,
                y: _bbox.y - _bw / 2 + _bbox.height / 2
            }); // 左
            _bdots['lb'].attr({
                x: _bbox.x - _bw / 2,
                y: _bbox.y - _bw / 2 + _bbox.height
            }); // 左下
            _bdots['b'].attr({
                x: _bbox.x - _bw / 2 + _bbox.width / 2,
                y: _bbox.y - _bw / 2 + _bbox.height
            }); // 下
            _bdots['rb'].attr({
                x: _bbox.x - _bw / 2 + _bbox.width,
                y: _bbox.y - _bw / 2 + _bbox.height
            }); // 右下
            _bdots['r'].attr({
                x: _bbox.x - _bw / 2 + _bbox.width,
                y: _bbox.y - _bw / 2 + _bbox.height / 2
            }); // 右
            _bdots['rt'].attr({
                x: _bbox.x - _bw / 2 + _bbox.width,
                y: _bbox.y - _bw / 2
            }); // 右上
            _bpath.attr({
                path: getBoxPathString()
            });

            $(_r).trigger('rectresize', _this);
        };

3修改連線末端座標

$("#myflow").mousemove函數中修改

  var path, rect, circle;
        $("#myflow").mousemove(function (e) {
            var moving = myflow.config.moving;
            if (moving.flag) {
                var pre = $(_r).data('currNode');

                if (path && !moving.isNewDot) {
                    path.remove();
                    circle.remove();
                } else {
                    moving.isNewDot = false;
                }

                var dot = moving.prepdot;

                if (pre && pre.getBBox()) {
                    dot = myflow.util.connPoint(pre.getBBox(), {x: e.pageX, y: e.pageY});
                }
                var x = e.pageX - 10 - $("#SiteInfoPanel").offset().left, y = e.pageY - 60 - $("#SiteInfoPanel").offset().top;
                circle = _r.circle(x, y, 6).attr({fill: 'red', stroke: '#fff', cursor: 'move'});

                path = _r.path('M' + dot.x + ' ' + dot.y + 'L' + x + ' ' + y + 'z')
                    .attr({stroke: '#cdcdcd', fill: "none", "stroke-width": 2, cursor: "pointer"});

                moving.temp.push(circle);
                moving.temp.push(path);
            }

        })

 4點擊節點實現子節點顯示隱藏

分別在myflow.js文件中修改myflow.path和myflow.rect函數，在函數內添加如下，具體內容可根據對應的remove屬性修改

 this.hide = function () {
            _rect.hide();
            _text.hide();
            _name.hide();
            _img.hide();
            _bpath.hide();
        };
        this.show = function () {
            _rect.show();
            _text.show();
            _name.show();
            _img.show();
            _bpath.show();
        };

clickRect: function (id, data) {
                    if (eval("(" + data + ")").type == "core") {
                        if (show_hide[id] == true) {
                            if (data_source['states']) {
                                for (var i in data_source['states']) {
                                    for (var j in data_source['paths']) {
                                        if (id == data_source['paths'][j].to().getId() && data_source['states'][i].getId() == data_source['paths'][j].from().getId()) {
                                            data_source['states'][i].hide();
                                            data_source['paths'][j].hide();
                                        }
                                    }
                                }
                            }
                            show_hide[id] = false;
                        } else {
                            if (data_source['states']) {
                                for (var i in data_source['states']) {
                                    for (var j in data_source['paths']) {
                                        if (id == data_source['paths'][j].to().getId() && data_source['states'][i].getId() == data_source['paths'][j].from().getId()) {
                                            data_source['states'][i].show();
                                            data_source['paths'][j].show();
                                        }
                                    }
                                }
                            }
                            show_hide[id] = true;
                        }


                    }
                },

 

 

5添加自定義監聽事件

例如監聽雙擊點擊元素事件

myflow.js

 $([_rect.node, _text.node, _name.node, _img.node]).bind('dblclick',
            function () {
                myflow.config.tools.dblclickRect(_this.getId(), _this.toJson());
                return false;
            });

index.js

 dblclickRect: function (id, data) {
                },

6修改SVG畫布大小

在myflow-master/lib/raphael-min.js文件內第1403行修改，我是將畫布長寬減少了一半

bG(i, {xmlns: "http://www.w3.org/2000/svg", version: 1.1, width: f/2, height: h/2});

7右鍵切換選擇和畫線狀態 myflow.js中修改如下

document.oncontextmenu = function (e) {
            if (myflow.config.oncontextmenu == true) {
                $("#path").click();
                myflow.config.oncontextmenu = false;
                document.getElementById('SiteInfoPanel').style.cursor = 'pointer';
            } else {
                $("#pointer").click();
                myflow.config.oncontextmenu = true;
                document.getElementById('SiteInfoPanel').style.cursor = 'default';
            }
            return false;
        }