导出XML

//转XML格式输出
var encoder = new mxCodec();
var node = encoder.encode(graph.getModel());
console.log(mxUtils.getXml(node));
扩充版(解决浏览器兼容问题)
//获取当前编辑指标的名称、xml
getGraphXML : function() {
    //生成graph视图的xml格式文件
    var getGraphXml = function(graph) {
        var encoder = new mxCodec();
        var code = encoder.encode(graph);
        return code;
    }
    var model = graph.getModel();
    if (model) {
        var graphXmlObj = getGraphXml(model);
        if (judgeIsIe8()) {
            //console.log("ie8");
            graphXmlForIe = graphXmlObj.xml; //<>转义得用第三变量传递一下,不能用var graphXml
            return graphXmlForIe;
        } else {
            var oSerializer = new XMLSerializer();
            var report_xmlStr = oSerializer.serializeToString(graphXmlObj);
            graphXmlOther = report_xmlStr;
            return graphXmlOther;
        }
    }
}

回显XML

// XML回显到编辑区(渲染画布)
var xmlFile = '<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="Hello," vertex="1" parent="1"><mxCell id="7" value="椭圆" style="shape=ellipse;perimeter=ellipsePerimeter;" vertex="1" parent="1"><mxGeometry x="550" y="50" width="150" height="150" as="geometry"/></mxCell><mxCell id="8" value="三角形" style="shape=triangle;perimeter=ellipsePerimeter;direction=south;" vertex="1" parent="1"><mxGeometry x="800" y="50" width="150" height="150" as="geometry"/></mxCell></mxCell></root></mxGraphModel>';
var doc = mxUtils.parseXml(xmlFile),
dec = new mxCodec(doc);
dec.decode(doc.documentElement, graph.getModel());
扩充版(解决浏览器兼容问题)
//解析xml字符串并转化成graph视图
createXmlDom : function(str) {
    if (document.all) { //判断浏览器是否是IE
        var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
        xmlDom.loadXML(str);
        return xmlDom;
    } else {
        return (new DOMParser()).parseFromString(str, "text/xml");
    }
},
readGraphXML : function(xmlstr, graph) {
    if (xmlstr) {
        graph.getModel().beginUpdate();
        try {
            var xmlDoc = this.createXmlDom(xmlstr);
            var node = xmlDoc.documentElement;
            var dec = new mxCodec(node.ownerDocument);
            dec.decode(node, graph.getModel());
            console.log(dec);
        } finally {
            graph.getModel().endUpdate();
        }
    }
}

右键菜单

graph.popupMenuHandler.autoExpand = true;
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) {
    if(cell != null) {
        menu.addItem('添加节点', null, function() {
            changeTaskType(cell.id, "")
        });
       //二级菜单
        var conn_pos = menu.addItem('连接位置', null, function() {});
        menu.addItem('左右', null, function() {}, conn_pos);
        menu.addItem('三面', null, function() {}, conn_pos);
        menu.addItem('四面', null, function() {}, conn_pos);
        menu.addItem('设置', null, function() {});
        menu.addItem('详细信息', null, function() {});
        menu.addItem('远程更新版本', null, function() {});
        menu.addItem('远程控制(新窗口)', null, function() {
            window.open('index.html?serverUUID=' + cell.id + '&serverName=' + encodeURI(cell.value));
        });
        menu.addItem('查看目录', null, function() {
            viewDataDirectoryWin.show(data.UUID, data.subOrSup);
        });
        menu.addItem('查看话题', null, function() {
            viewTopicWin.show(data.UUID, data.subOrSup);
        });
    }
}

组合型shape配置

// Helper method to mark parts with constituent=1 in the style
//在style里面用constituent=1标记部件
graph.isPart = function(cell) {
    var state = this.view.getState(cell);
    var style = (state != null) ? state.style : this.getCellStyle(cell);
    return style['constituent'] == '1';
};
// 重定义组合型图形的选中事件,不能选中里面的子部件
graph.selectCellForEvent = function(cell) {
    if(this.isPart(cell)) {
        cell = this.model.getParent(cell);
    }
    mxGraph.prototype.selectCellForEvent.apply(this, arguments);
};

绘制组合图形

var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try {
    var taskWrap = graph.insertVertex(parent, "Taskid", 'Looped\nSub-Process', 200, 200, 200, 100, 'whiteSpace=wrap;');
    //constituent=1;表示节点作为一个part存在的
    var taskTypeCell = graph.insertVertex(taskWrap, null, 'dfdfgd', 0.5, 1, 30, 30, 'shape=ellipse;fontSize=9;constituent=1;resizable=0;;outlineConnect=0;');
    taskTypeCell.type = "taskType";
    taskTypeCell.expr = "ffffffffffffffffff";
    taskTypeCell.geometry.relative = true;
    taskTypeCell.geometry.offset = new mxPoint(-15, -35);
    taskTypeCell.connectable = false;
    taskTypeCell.value = "jshdjhsdbvf";

} finally {
    // Updates the display
    graph.getModel().endUpdate();
}

边缘事件

参考/examples/boundary.html

设置style样式[graph.setCellStyles(mxConstant.xxxx,设置的val, [cells])]

var changeTaskType = function(cellId, Task) {
    var endFill = "";
    var graph = myGraphInfo.graph;
    switch(examine) {
        case "EXAMINE_ADOPT": //审批通过 
            endFill = 1;
            break;
        case "EXAMINE_REJECT": //审批拒绝 case :
        case "EXAMINE_CONNECT":
        case "EXAMINE_NOT": //未审批 case :
        case "EXAMINING": //待审批 
            endFill = 0;
            break;
    }
    var thisCell = graph.getModel().getCell(uuid);
    var thisEdge = thisCell.edges[0];
    graph.setCellStyles("shape", "", [cell]);
    graph.refresh(thisEdge);//刷新改细胞
}

限制最大最小宽度

graph.cellResized = function (cell, rect, ignoreRelative, recurse) {
    var flagClass = "mxCol_" + cell.id;
    if (rect.width < 40) {
        rect.width = 40;
        $("." + flagClass).width("0px");
    } else if (rect.width > 800) {
        rect.width = 800;
        $("." + flagClass).width((800 - 43) + "px");
    } else {
        $("." + flagClass).width((rect.width - 43) + "px");
    }
    return mxGraph.prototype.cellResized.apply(this, arguments);

};

关于是否可连接设置

//目标可连接性设置
graph.isValidTarget = function (cell) {
    if (cell) {
        if (cell.type) {
            if (cell.type == "table" || cell.type == "gather") {
              //  designMxgraph.setTabConnectable(true);
                return true;
            }
        }
    }
}
//连线可行性验证
graph.validateEdge = function (edge, source, target) {
    if (!edge) {
      //  designMxgraph.setTabConnectable(false);
    } else {
        return true;
    }
}

Drop拖动目标验证

//Drop拖动目标验证
//cell:target
//cells:source  一般用于group
graph.isValidDropTarget = function (cell, cells, evt) {
    if (cell) {
        if (cells.length == 1) {
            source = cells[0];
            if (cell.type == "group" && cells[0].type != "group" && cells[0].type != "gather") {
                if (source.edges) {
                    for (var i = 0; i < source.edges.length; i++) {
                        if (source.edges[i].id.indexOf("flowline_") != -1) {//针对流向线
                            if (source.edges[i].target.id != source.id) {
                                return false;//一旦线的目标终点不是source本身,就不可以拖进去
                            } else if (source.edges[i].source.id == cell.id) {
                                return false;
                            } else {
                                continue;
                            }
                        }
                    }
                }
                return true;
            }
        }
    }
}

获取所有画布内得图形对象

graph.getChildCells()---包括连线
graph.getChildVertices()---不包括连线

设置细胞可连接性

  cell.setConnectable(bool);

泳道布局

//配置泳道里的细胞自动布局,泳道布局
editor.layoutSwimlanes = true;
editor.createSwimlaneLayout = function () {
    var layout = new mxStackLayout(this.graph, false);
    layout.fill = true;
    layout.resizeParent = true;
    // Overrides the function to always return true
    layout.isVertexMovable = function (cell) {
        return true;
    };
    return layout;
};

添加A细胞到B细胞的连线

var newLine = graph.insertEdge(parent, id, label, startCell, endCell, 'dashed=1;' +
'startArrow=oval;endArrow=oval;sourcePerimeterSpacing=4;startFill=1;endFill=1;strokeColor=green;' +
'strokeWidth=1;fontSize=12;edgeStyle=sideToSideEdgeStyle;');
dashed----
startArrow----线头起始形状   有oval(圆形),classic(箭头),none(无)
endArrow-----线头结束形状
startFill、endFill-----是否填充颜色
edgeStyle----线条的类型
entryX,entryY---结尾的落点坐标
exitX,exitY----开始的坐标
sourcePerimeterSpacing---留白

根据xml注册图形

var req = mxUtils.load('stencils.xml');
var root = req.getDocumentElement();
var shape = root.firstChild;          
while (shape != null)
{
    if (shape.nodeType == mxConstants.NODETYPE_ELEMENT)
    {
        mxStencilRegistry.addStencil(shape.getAttribute('name'), new mxStencil(shape));
    }
    
    shape = shape.nextSibling;
}

自定义一个图形

// Plus Shape
function PlusShape()
{
    mxRectangleShape.call(this);
};
mxUtils.extend(PlusShape, mxRectangleShape);
PlusShape.prototype.isHtmlAllowed = function()
{
    return false;
};
PlusShape.prototype.paintForeground = function(c, x, y, w, h)
{
    var border = Math.min(w / 5, h / 5) + 1;
    
    c.begin();
    c.moveTo(x + w / 2, y + border);
    c.lineTo(x + w / 2, y + h - border);
    c.moveTo(x + border, y + h / 2);
    c.lineTo(x + w - border, y + h / 2);
    c.end();
    c.stroke();
    mxRectangleShape.prototype.paintForeground.apply(this, arguments);
};
帖子状态

话题参与者

回复显示排序:

给大家安利一款免费的在线流程图设计软件:贼好用 ProcessFlow — 免费在线作图、实时协作 ProcessFlow是一个在线作图工具的聚合平台, 它可以在线画流程图、思维导图、UI原型图、UML、网络拓扑图、组织结构图等等, 您无需担心下载和更新的问题, 不管Mac还是Windows,一个浏览器就可以随时随地的发挥创意,规划工作,解放您的双手,让您腾出双手去成就别人的梦想。

Finally!
有没有特别的设计建议或更新的指南?
Finally!
您好,这边没有的。
tesla02 best answer
6 Jan,2019
Finally!
有没有特别的设计建议或更新的指南?
此帖子已被版主标记,收到太多否决票。

这是太大的预览图像,它应该更小,甚至五行。在一个页面上有30到60个页面,它是1800个项目 类别例如在附加组件类别有22749个项目,为什么不看到所有的项目,但只有那1800个项目?这是件坏事。

看起来您是个新人,欢迎免费注册社区,加入我们的大家庭,一起学习,一起成长。
提交你的评论
System.out.println("请输入你的代码块...");
Settings

请插入代码块