Graph

阅读时间约 5 分钟

配置

new Graph(options: Options)
选项类型必选默认值描述
containerHTMLElement画布的容器。
widthnumberundefined画布宽度,默认使用容器宽度。
heightnumberundefined画布高度,默认使用容器高度。
autoResizeboolean | Element | Documentfalse是否监听容器大小改变,并自动更新画布大小。默认监听画布容器,也可以指定监听的元素,如 Document
panningobject{ enabled: false, eventTypes: ['leftMouseDown'],}画布是否可以拖动
gridboolean | number | objectfalse网格,默认使用 10px 的网格,但不绘制网格背景。
backgroundfalse | objectfalse背景,默认不绘制背景。
snaplineboolean | objectfalse对齐线,默认禁用。
scrollerboolean | objectfalse滚动画布,默认禁用。
minimapboolean | objectfalse小地图,默认禁用。
historyboolean | objectfalse撤销/重做,默认禁用。
clipboardboolean | objectfalse剪切板,默认禁用。
keyboardboolean | objectfalse键盘快捷键,默认禁用。
mousewheelboolean | objectfalse鼠标滚轮缩放,默认禁用。
selectingboolean | objectfalse点选/框选,默认禁用。
rotatingboolean | objectfalse旋转节点,默认禁用。
resizingboolean | objectfalse缩放节点,默认禁用。
translatingobjectobject平移节点。
transformingobjectobject平移和缩放节点的基础选项。
embeddingboolean | objectfalse嵌套节点,默认禁用。
connectingobjectobject连线选项。
highlightingobjectobject高亮选项。
interactingobject | function{ edgeLabelMovable: false }定制节点和边的交互行为。
sorting'none' | 'approx' | 'exact''exact'节点和边视图的排序方式。
asyncbooleanfalse是否是异步渲染的画布。
frozenbooleanfalse异步渲染的画布是否处于冻结状态。
checkViewfunction-返回指定的视图是否应该渲染到 DOM 中。
magnetThresholdnumber | 'onleave'0鼠标移动多少次后才触发连线,或者设置为 'onleave' 时表示鼠标移出元素时才触发连线。
moveThresholdnumber0触发 'mousemove' 事件之前,允许鼠标移动的次数。
clickThresholdnumber0当鼠标移动次数超过指定的数字时,将不触发鼠标点击事件。
preventDefaultContextMenubooleantrue是否禁用浏览器默认右键菜单。
preventDefaultBlankActionbooleantrue在画布空白位置响应鼠标事件时,是否禁用鼠标默认行为。
guardfunction() => false返回是否应该忽略某个鼠标事件,返回 true 时忽略指定的鼠标事件。
allowRubberbandfunction() => true返回是否响应框选事件。
allowPanningfunction() => true返回是否响应画布平移事件。
getCellViewfunction() => null获取节点/边的视图类。
createCellViewfunctionundefined创建节点/边的视图,默认自动根据节点和边的 view 选项创建对应的视图。
getHTMLComponentfunctionundefined获取 HTML 节点的 HTML 元素,默认根据节点的 html 选项返回对应的 HTML 元素。
onPortRenderedfunctionundefined当某个链接桩渲染完成时触发的回调。
onEdgeLabelRenderedfunctionundefined当边的文本标签渲染完成时触发的回调。
onToolItemCreatedfunctionundefined当工具项渲染完成时触发的回调。
modelModelundefined画布对应的模型,默认创建一个新模型。

container

画布容器。

width

画布宽度,默认使用容器宽度。创建画布后可以使用 resize(w, h) 方法来设置画布大小。

height

画布高度,默认使用容器高度。 创建画布后可以使用 resize(w, h) 方法来设置画布大小。

autoResize

是否监听容器大小改变,并自动更新画布大小,默认为 false。默认监听画布容器,也可以指定监听的元素,如 Document

需要注意的是,目前仅支持 flex 布局,例如像下面这样指定画布容器及其父节点的样式:

<div style="display: flex">
  <div id="container" style="flex: 1"></div>
</div>

使用上面 "container" 容器和 autoResize 选项初始化画布:

const graph = new Graph({
  container: document.getElementById('container'),
  autoResize: true,
})

拖动下面 DEMO 中的分隔条体验自动调整画布大小。

panning

画布通过开启 panning 选项来支持拖拽平移。

const graph = new Graph({
  panning: true,
})

// 等同于
const graph = new Graph({
  panning: {
    enabled: true,
  },
})

拖拽可能和其他操作冲突,此时可以设置 modifiers 参数,设置修饰键后需要按下修饰键并点击鼠标才能触发画布拖拽。

const graph = new Graph({
  panning: {
    enabled: true,
    modifiers: 'shift',
  },
})

还可以配置 eventTypes 来设置触发画布拖拽的行为,支持 leftMouseDownrightMouseDownmouseWheel,默认为 ['leftMouseDown']

const graph = new Graph({
  panning: {
    enabled: true,
    eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
  },
})

可以通过以下 API 来启用/禁止画布平移:

graph.isPannable() // 画布是否可以平移
graph.enablePanning() // 启用画布平移
graph.disablePanning() // 禁止画布平移
graph.togglePanning() // 切换画布平移状态

方法

startBatch(...)

startBatch(name: string, data?: KeyValue): this

开始一个指定名称事务。开始和结束事务必须成对使用,一个事务结束前的所有变更都归属于该事务。

参数

名称类型必选默认值描述
namestring事务名称。
dataKeyValue额外的数据,供事件回调函数使用。

stopBatch(...)

stopBatch(name: string, data?: KeyValue): this

结束指定名称事务。事开始和结束事务必须成对使用,一个事务结束前的所有变更都归属于该事务。

参数

名称类型必选默认值描述
namestring事务名称。
dataKeyValue额外的数据,供事件回调函数使用。

用法

graph.startBatch('rename')

rect.prop('zIndex', 10)
rect.attr('label/text', 'hello')
rect.attr('label/fill', '#ff0000')

graph.stopBatch('rename')

batchUpdate(...)

batchUpdate<T>(name: string, execute: () => T, data?: KeyValue): T

执行一个成对的事务。

参数

名称类型必选默认值描述
namestring事务名称。
execute() => T事务执行的函数。
dataKeyValue额外的数据,供事件回调函数使用。

用法

graph.batchUpdate('rename', () => {
  rect.prop('zIndex', 10)
  rect.attr('label/text', 'hello')
  rect.attr('label/fill', '#ff0000')  
})
batchUpdate<T>(execute: () => T, data?: KeyValue): T

执行一个成对的事务。事务名为 'update'

参数

名称类型必选默认值描述
execute() => T事务执行的函数。
dataKeyValue额外的数据,供事件回调函数使用。

用法

graph.batchUpdate(() => {
  rect.prop('zIndex', 10)
  rect.attr('label/text', 'hello')
  rect.attr('label/fill', '#ff0000')  
})