剪切板 Clipboard

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

const netGraph = new NetPlanGraph({
  clipboard: true,
})

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

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

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

持久化

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

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

const netGraph = new NetPlanGraph({
  clipboard: {
    enabled: true,
    useLocalStorage: true,
  }
})

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

• netGraph.copy(cells: Cell[], options: CopyOptions = {})
• netGraph.cut(cells: Cell[], options: CopyOptions = {})
• netGraph.paste(options: PasteOptions = {}, targetGraph: Graph = this)

例如：

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

演示

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

API

netGraph.copy(...)

复制节点/边。

netGraph.cut(...)

剪切节点/边。

netGraph.paste(...)

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

netGraph.getCellsInClipboard()

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

netGraph.cleanClipboard()

清空剪切板。

netGraph.isClipboardEmpty()

返回剪切板是否为空。

netGraph.isClipboardEnabled()

返回是否启用了剪切板。

netGraph.enableClipboard()

启用剪切板。

netGraph.disableClipboard()

禁用剪切板。

netGraph.toggleClipboard(...)

切换剪切板的启用状态。

事件

clipboard:changed

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

netGraph.on('clipboard:changed', ({cells}) => { 
  // code here
})