Clipboard implements copy-pasting of cells. Optionally, clipboard also supports storing cells in an HTML 5 localStorage so that copy-pasting of cells works despite a browser tab being refreshed or closed/reopened. Additionally, clipboard is also able to copy cells from one paper and paste them to another. However, the determination of the targeted paper is left to the application layer.
Include joint.ui.clipboard.js to your HTML:
<script src="joint.ui.clipboard.js"></script>Instantiating a clipboard is a matter of creating a joint.ui.Clipboard object:
var clipboard = new joint.ui.Clipboard({ useLocalStorage: false });>| link | Set of attributes to be set on each copied link on every pasteCells() call. It is defined as an object. e.g. { z: 1 }. |
|---|---|
| translate | An increment that is added to the pasted elements position on every pasteCells() call. It can be either a number or an object with dx and dy attributes. It defaults to { dx: 20, dy: 20 }. |
| useLocalStorage | Set to false if you don't want to use window.localStorage for storing copied cells. It defaults to true. |
| copyElements(collection, graph, opt) | Store the elements from the collection along with all links, which are connected by both source and target to these elements. The options opt passed as a parameter can override the global options. |
|---|---|
| cutElements(collection, graph, opt) | Similar to copyElements() but it also removes all copied cells from the graph. |
| pasteCells(graph, opt) | Add copies of stored cells to the graph. The method can be called multiple times and it always produces new copies. |
| clear() | Clear all stored cells. |
| isEmpty() | Return true when there is no cells stored on the Clipboard instance. Returns false otherwise. |
The next step is hooking these methods to relevant user events.
var selection = new joint.ui.Selection({ paper: paper });
var keyboard = new joint.ui.Keyboard;
keyboard.on('ctrl+c', function() { clipboard.copyElements(selection.collection, paper.model); });
keyboard.on('ctrl+x', function() { clipboard.cutElements(selection.collection, paper.model); });
keyboard.on('ctrl+v', function() { clipboard.pasteCells(paper.model); });
Note that the selection.collection is a Backbone.Collection that stores the selected elements. The clipboard is
probably the best when used in combination with the Selection JointJS plugin. We suggest you to look at the
documentation to the Selection plugin for further details on using selections.
Also, it is advisable to look at our Kitchen Sink application to see how the Selection and Clipboard work together.