Clipboard

This chapter mainly introduces knowledge related to the clipboard. By reading, you can learn about

How to use the copy and paste function

Usage

The clipboard is used for copying/pasting nodes and edges. We provide a standalone plugin package @antv/x6-plugin-clipboard to utilize this feature.

# npm
$ npm install @antv/x6-plugin-clipboard --save

# yarn
$ yarn add @antv/x6-plugin-clipboard

Then we use it in the code like this:

import { Clipboard } from '@antv/x6-plugin-clipboard'

const graph = new Graph({
  background: {
    color: '#F2F7FA',
  },
})
graph.use(
  new Clipboard({
    enabled: true,
  }),
)

Demo

After selecting a node, click the copy button to copy the node.
Set different offset values to observe the effect on the node's position when pasting.
After enabling localStorage, copy a node, refresh the page or reopen the browser, then click the paste button.

Configuration

Property Name	Type	Default Value	Required	Description
useLocalStorage	boolean	`false`		When enabled, the copied nodes/edges are also saved to `localStorage`, allowing copy/paste to work after refreshing or reopening the browser.

API

graph.copy(...)

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

Copy nodes/edges. Parameters are as follows:

Name	Type	Required	Default Value	Description
cells	Cell[]	✓		The nodes/edges to be copied.
options.deep	boolean		-	Whether to recursively copy all child nodes/edges.
options.useLocalStorage	boolean		-	Whether to save the copied nodes/edges in `localStorage`.

graph.cut(...)

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

Cut nodes/edges. Parameters are as follows:

Name	Type	Required	Default Value	Description
cells	Cell[]	✓		The nodes/edges to be cut.
options.deep	boolean		-	Whether to recursively copy all child nodes/edges.
options.useLocalStorage	boolean		-	Whether to save the copied nodes/edges in `localStorage`.

graph.paste(...)

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

Paste and return the nodes/edges pasted onto the canvas. Parameters are as follows:

Name	Type	Default Value	Description
options.useLocalStorage	boolean	-	Whether to use nodes/edges from `localStorage`.
options.offset	number \| `{ dx: number; dy: number }`	`20`	The offset for the nodes/edges pasted onto the canvas.
options.nodeProps	Node.Properties	-	Additional properties for the nodes pasted onto the canvas.
options.edgeProps	Edge.Properties	-	Additional properties for the edges pasted onto the canvas.
graph	Graph	`this`	The target canvas for pasting, defaults to the current canvas.

graph.getCellsInClipboard()

getCellsInClipboard: Cell[]

Get the nodes/edges in the clipboard.

graph.cleanClipboard()

cleanClipboard(): this

Clear the clipboard.

graph.isClipboardEmpty()

isClipboardEmpty(): boolean

Return whether the clipboard is empty.

graph.isClipboardEnabled()

isClipboardEnabled(): boolean

Return whether the clipboard is enabled.

graph.enableClipboard()

enableClipboard(): this

Enable the clipboard.

graph.disableClipboard()

disableClipboard(): this

Disable the clipboard.

graph.toggleClipboard(...)

toggleClipboard(enabled?: boolean): this

Toggle the clipboard's enabled state. Parameters are as follows:

Name	Type	Required	Default Value	Description
enabled	boolean		-	Whether to enable the clipboard; defaults to toggling the clipboard's enabled state.

Events

Event Name	Parameter Type	Description
`clipboard:changed`	`{ cells: Cell[] }`	Triggered when copying, cutting, or clearing the clipboard.

graph.on('clipboard:changed', ({ cells }) => {
  console.log(cells)
})

// We can also listen to events on the plugin instance
clipboard.on('clipboard:changed', ({ cells }) => {
  console.log(cells)
})