[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) {
//...
}
```
