记录一些简单的功能API
API
http://jgraph.github.io/mxgraph/docs/js-api/files/index-txt.html
http://jgraph.github.io/mxgraph/javascript/index.html
1 2 3 4 5 6 7 8 9 10 11 12 13
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 ; } };
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
// 居中缩放 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); };
1 2 3 4 5 6
//可以点击背景进行平移流程图 鼠标左右键都可以 graph.setCellsMovable(false ); graph.setAutoSizeCells(true ); graph.setPanning(true ); graph.centerZoom = false ; graph.panningHandler.useLeftButtonForPanning = true ;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
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); } } });
1 2 3 4 5 6 7 8 9
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)
1 2 3 4 5
graph.getCursorForCell = function (cell){ if (cell != null && cell.value != null && cell.vertex ==1 ){ return 'pointer' ; } }
1 2 3 4
// 获取所有被选择的元素 var cells = graph.getSelectionCells() //删除所有选择 graph.removeSelectionCells(cell)
