logoCreated with Sketch.

X6

剪切板 Clipboard

阅读时间约 2 分钟

剪切板用于复制/粘贴节点和边，并支持跨画布的复制/粘贴，创建画布时通过以下配置启用。

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

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

创建画布后，可以调用 graph.enableClipboard() 和 graph.disableClipboard() 来启用和禁用剪贴板。

if (graph.isClipboardEnabled()) {
  graph.disableClipboard()
} else {
  graph.enableClipboard()
}

持久化

开启 useLocalStorage 后，被复制的节点/边同时被保存到 localStorage 中，浏览器刷新或者关闭后重新打开，复制/粘贴也能正常工作。

可以在创建画布时全局开启。

const graph = new Graph({
  clipboard: {
    enabled: true,
    useLocalStorage: true,
  }
})

也可以在调用以下三个方法时开启。

例如：

graph.copy(cells, {
  useLocalStorage: true,
})

演示

  • 选中节点后，点击复制按钮复制节点。
  • 设置不同的 offset，观察粘贴时对节点位置的影响。
  • 启用 localStorage 后复制节点，刷新页面或重新打开浏览器后，点击粘贴按钮。

API

graph.copy(...)

copy(cells: Cell[], options: CopyOptions = {}): this

复制节点/边。

参数

名称类型必选默认值描述
cellsCell[]✓被复制的节点/边。
options.deepboolean-是否递归复制所有子节点/边。
options.useLocalStorageboolean-是否将复制的节点/边保存在 localStorage 中。

graph.cut(...)

cut(cells: Cell[], options: CopyOptions = {}): this

剪切节点/边。

参数

名称类型必选默认值描述
cellsCell[]✓被剪切的节点/边。
options.deepboolean-是否递归复制所有子节点/边。
options.useLocalStorageboolean-是否将复制的节点/边保存在 localStorage 中。

graph.paste(...)

paste(options?: PasteOptions, graph?: Graph): Cell[]

粘贴，返回粘贴到画布的节点/边。

参数

名称类型必选默认值描述
options.useLocalStorageboolean-是否使用 localStorage 中的节点/边。
options.offsetnumber | { dx: number; dy: number }20粘贴到画布的节点/边的偏移量。
options.nodePropsNode.Properties-粘贴到画布的节点的额外属性。
options.edgePropsEdge.Properties-粘贴到画布的边的额外属性。
graphGraphthis粘贴的目标画布，默认粘贴到当前画布。

graph.getCellsInClipboard()

getCellsInClipboard: Cell[]

获取剪切板中的节点/边。

graph.cleanClipboard()

cleanClipboard(): this

清空剪切板。

graph.isClipboardEmpty()

isClipboardEmpty(): boolean

返回剪切板是否为空。

graph.isClipboardEnabled()

isClipboardEnabled(): boolean

返回是否启用了剪切板。

graph.enableClipboard()

enableClipboard(): this

启用剪切板。

graph.disableClipboard()

disableClipboard(): this

禁用剪切板。

graph.toggleClipboard(...)

toggleClipboard(enabled?: boolean): this

切换剪切板的启用状态。

参数

名称类型必选默认值描述
enabledboolean-是否启用剪切板，缺省时切换剪切板的启用状态。

事件

clipboard:changed

复制、剪切、清空剪切板时触发。

graph.on('clipboard:changed', ({ 
  cells: Cell[]
}) => { 
  // code here
})