[https://jgraph.github.io/mxgraph/javascript/index.html](https://jgraph.github.io/mxgraph/javascript/index.html)
* 设置画布背景图片
~~~
const url = 'https://cdn.pixabay.com/photo/2016/02/19/11/25/business-1209705_960_720.jpg'
const img = new mxImage(url, 400, 400)
graph.setBackgroundImage(img)
~~~
* 禁用浏览器上下文菜单
~~~
mxEvent.disableContextMenu(container)
~~~
* 使用套索选择组件
~~~
new mxRubberband(graph)
~~~
* 节点不可改变大小
~~~
graph.setCellsResizeable(false)
~~~
* 是否可移动
~~~
// 没有了移动功能
graph.setCellsMovable(false)
// 禁用移动功能，鼠标指针还是显示移动指标
mxGraphHandler.prototype.setMoveEnabled(false)
~~~
* Cell 是否可连线
~~~
graph.setConnectable(false)
graph.setCellsLocked(true);// 是否可以移动连线，重新连接其他cell，主要用来展现中用
~~~
* 边被拖动时始终保持连接
```
graph.setDisconnectOnMove(false)
```
* 启用右键移动元素
```
graph.setPanning(true)
```
* 禁用双击改变数据
~~~
graph.dblClick = function(evt, cell) {
const model = graph.getModel()
if (model.isVertex(cell)) {
return false
}
}
~~~
* 事件
~~~
// 单击
graph.click = function(evt) {
// ...
}
// or
graph.addListener(mxConstants.CLICK, function(sender, evt) {
// ...
})
// 双击
graph.dblClick = function(evt, cell) {
// ...
}
// or
graph.addListener(mxConstants.DOUBLE_CLICK, function(sender, evt) {
// ...
})
~~~
* 节点事件监听
~~~
// 尺寸改变
graph.addListener(mxEvent,RESIZE_CELLS, function(sender, evt) {
const cells = evt.getProperty('cells') // cell
const bounds = evt.getProperty('bounds') // mxGeometry
})
// 移动
graph.addListener(mxEvent.CELLS_MOVED, function(sender, evt) {
// ...
})
~~~
* 自定义 Tooltip
~~~
graph.setTooltips(true)
graph.getTooltipForCell = function(cell) {
return 'xxx'
}
~~~
* 预览模式(只读)
~~~
graph.setEnabled(false)
// 预览时鼠标悬浮到节点时，改变鼠标样式
graph.getCursorForCell = function(cell) {
if (cell != null && cell.value != null && cell.vertex == 1) {
return 'pointer'
}
}
~~~
* 删除选中的 Cell 或 Edge
~~~
const keyHandler = new mxKeyHandler(graph)
keyHandler.bindKey(46, function(evt) {
if (graph.isEnabled()) {
graph.removeCells()
}
})
~~~
* 使用 `mxRectangle` 操作 Cell
```
const v = graph.insertVertex(...)
const geo = v.getGeometry()
const rect = new mxRectangle(30, 30, 80, 30)
geo.add(rect)
graph.refresh(v)
```
* 创建上下文菜单
```
mxEvent.disableContextMenu(container)
graph.popupMenuHandler.factoryMethod = function(menu, cell, evt) {
return function(graph, menu, cell, evt) {
if (cell != null) {
menu.addItem('菜单一', null, function() {
console.log('1')
})
} else {
menu.addItem('点击画布', null, function() {
console.log('画布')
})
}
menu.addSeparator();
menu.addItem('退出', null, function() {
console.log(self.graph.getSelectionCount())
})
}
}
```
注ts使用写法为：
```
(graph.popupMenuHandler as any).factoryMethod = function(menu: mxgraph.mxPopupMenuHandler, cell: mxgraph.mxCell, evt: EventTarget) {
//...
}
```
