Mxgraph一些基础功能

2018-01-16

记录一些简单的功能API

API http://jgraph.github.io/mxgraph/docs/js-api/files/index-txt.html
DEMO http://jgraph.github.io/mxgraph/javascript/index.html

mxGrap API

始终从选择的mxcells返回数组的第一个细胞
1
graph.getSelectionCell()
多选的时候会将cell数据放到一个数组当中、例如选中三个数据[mxcell,mxcell,mxcell]
1
2
//获取所有被选择的元素
graph.getSelectionCells()
返回所选择所有cells的所有信息
1
graph.getSelectionModel()

设置选中节点cell

1	graph.setSelectionCell(v1);

一些功能

graph.setEnabled(false);//对图形进行拖拽拉伸等操作
graph.setCellsResizable(false); //节点不可改变大小
mxGraphHandler.prototype.setMoveEnabled(true); //是否可以移动
mxGraphHandler.prototype.guidesEnabled = true; //显示细胞位置标尺
graph.setCellsMovable(false);//禁止拖拽流程图

/*禁用节点双击，防止改变数据 */
　　graph.dblClick = function (evt, cell) {
　　　　var model = graph.getModel();
　　　　if (model.isVertex(cell)) {
　　　　　　return false;
　　　　}
　　};

按钮事件API

// 居中缩放
graph.centerZoom = true;
//禁用浏览器默认的右键菜单栏
mxEvent.disableContextMenu(container);
//选中全部盒子和线
graph.selectAll();
//选中所有盒子
graph.selectVertices()
//选中所有的线
graph.selectEdges();
//取消选中的元素
graph.clearSelection();
//放大图形
graph.zoomIn();
//缩小图形
graph.zoomOut();
//还原
graph.zoomActual();
//选择一个盒子
graph.selectCell()
//取消全部选择
document.querySelector('.removeSelectAll').onclick = function(){
   var cells = graph.getSelectionCells();
   graph.removeSelectionCells(cells);
};

鼠标平移

//可以点击背景进行平移流程图 鼠标左右键都可以
graph.setCellsMovable(false);
graph.setAutoSizeCells(true);
graph.setPanning(true);
graph.centerZoom = false;
graph.panningHandler.useLeftButtonForPanning = true;

添加点击多选事件

graph.addListener(mxEvent.CLICK, function(sender, evt) {
              var cell = evt.getProperty('cell');
              //判断是否为线
              var line = graph.isLabelMovable(cell)
              if (cell != null && line != true)
              {
                  if(graph.isCellSelected(cell)){
                      graph.removeSelectionCell(cell)
                      graph.removeCellOverlays(cell);

                  } else {
                      graph.addSelectionCell(cell)
                      var overlay = new mxCellOverlay(
                              new mxImage('images/overlays/check.png', 16, 16),
                              'Overlay tooltip');
                      // 在图形中覆盖
                      graph.addCellOverlay(cell, overlay);
                  }
              }
          });

返回选择节点信息 graph.getSelectionModel()

var ids = [];
var selectCell = graph.getSelectionModel();
console.log(selectCell)
for(var i = 0;i<selectCell.cells.length; i++){
    ids.push(selectCell.cells[i].value);
    //console.log(a.cells[i].value)
}
var b = ids.join(',')
console.log(b)

预览时鼠标悬浮到节点时，改变鼠标样式

graph.getCursorForCell = function(cell){
    if (cell != null && cell.value != null && cell.vertex ==1 ){
           return 'pointer';
    }
}

删除所有选择的节点cells

// 获取所有被选择的元素
var cells = graph.getSelectionCells()
//删除所有选择
graph.removeSelectionCells(cell)