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

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

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

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

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

例如：

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

方法

copy(...)

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

复制节点/边。

参数

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

cut(...)

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

剪切节点/边。

参数

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

paste(...)

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

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

参数

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

getCellsInClipboard()

getCellsInClipboard: Cell[]

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

cleanClipboard()

cleanClipboard(): this

清空剪切板。

isClipboardEmpty()

isClipboardEmpty(): boolean

返回剪切板是否为空。

isClipboardEnabled()

isClipboardEnabled(): boolean

返回是否启用了剪切板。

enableClipboard()

enableClipboard(): this

启用剪切板。

disableClipboard()

disableClipboard(): this

禁用剪切板。

toggleClipboard(...)

toggleClipboard(enabled?: boolean): this

切换剪切板的启用状态。

参数

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