流程设计器实现文档.docx

流程设计器文档重要功能点实现方法：创建画布添加节点到画布中设置添加节点的样式创建包含特殊业务逻辑的节点与节点交互添加大纲视图创建节点图标工具栏创建节点覆盖物（overlay）节点分组的操作操作的撤销和重做图形数据的输入输出创建画布：我们这里使用mxEditor来包装graph对象，mxEditor封装了很多方法可以简化很多操作的代码：// 创建包装器editor，editor = new mxEditor();graph = editor.graph;//引用graph做一些操作editor.setGraphContainer(container);//设置editor画布容器添加节点到画布中：比起普通添加节点代码，我们这里添加了泳道判断，意思是如果当前要添加的节点如果在泳道类型的容器上面，则添加到该容器内，设置该容器为父节点，否则设置graph.getDefaultParent()的结果为父节点。前者添加时还要计算其坐标，因为设置的坐标将相对于容器所在位置，所以将鼠标所在位置减去容器坐标既是相对坐标。另外新添加节点如果是容器，其样式名称设置为“group”，而且设置其折叠后的大小，另外容器是不允许连线的，如果不是容器就设置为默认节点样式，只需要设置其image属性的值即可。var parent = null;//添加节点的父节点var model = graph.getModel();//model引用var v1 = null;//待添加节点model.beginUpdate();try{// 如果目标是泳道，则将新节点父节点设置为该泳道，// 同时设置添加节点坐标为相对泳道的坐标，// 否则将新节点父节点设置为根节点if(graph.isSwimlane(cell)){parent = cell;x -= cell.geometry.x;y -= cell.geometry.y;}else{parent = graph.getDefaultParent();}// 如果添加节点类型为容器，设置其样式为group，并设置节点折叠大小// 否则设置应用默认节点样式if(label.getAttribute(TYPE) != container)v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, image=+image);else{v1 = graph.insertVertex(parent, null, label, x, y, 80, 80, group);v1.geometry.alternateBounds = new mxRectangle(0, 0, 80, 40);v1.setConnectable(false);}}finally{model.endUpdate();}graph.setSelectionCell(v1);设置添加节点的样式：// 定义默认节点样式var style = new Object();style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL;style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER;style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER;style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP;style[mxConstants.STYLE_SPACING_TOP] = 50;//style[mxConstants.STYLE_GRADIENTCOLOR] = #7d85df;//style[mxConstants.STYLE_STROKECOLOR] = #5d65df;//style[mxConstants.STYLE_FILLCOLOR] = #adc5ff;style[mxConstants.STYLE_FONTCOLOR] = #1d258f;style[mxConstants.STYLE_FONTFAMILY] = 微软雅黑;style[mxConstants.STYLE_FONTSIZE] = 12;style[mxConstants.STYLE_FONTSTYLE