JointJS+ Clipboard

ui.Clipboard

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.

Installation

Include joint.ui.clipboard.js to your HTML:

<script src="joint.ui.clipboard.js"></script>

Clipboard Configuration

Instantiating a clipboard is a matter of creating a joint.ui.Clipboard object:

var clipboard = new joint.ui.Clipboard({ useLocalStorage: false });>

Options passed to a clipboard used for clipboard operations but can be overridden for the specific method call.

link	Set of attributes to be set on each copied link on every pasteCells() or pasteCellsAtPoint() 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 is an object with `dx` and `dy` attributes. It defaults to `{ dx: 20, dy: 20 }`.
origin	A position in a cells' bbox which is used for determining the origin on every `pasteCellsAtPoint()` call. It is a string representing bbox positions (e.g. 'top-left', 'bottom' etc.). It defaults to `'center'`.
useLocalStorage	Set to `false` if you don't want to use `window.localStorage` for storing copied cells. It defaults to `true`.
addCellOptions	Options that will be passed to the `graph.addCell` method during paste operations.
removeCellOptions	Options that will be passed to the cell's `remove` method during the cut operation.

Clipboard API

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. Collection can be either a `Backbone.Collection` or an array of cells.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.
pasteCellsAtPoint(graph, point, opt)	Add copies of stored cells to the `graph` at specific point. The method can be called multiple times and it always produces new copies. The `origin` option indicates which point on the cells bbox should be used for pasting. The default value is `'center'`.
isEmpty(opt)	Return `true` when there is no cells stored on the Clipboard instance. Returns `false` otherwise. Checks local storage if the `useLocalStorage` option is `true`.
clear(opt)	Clear all stored cells. Also clears `window.localStorage` if `useLocalStorage` is `true`.

Clipboard Setup

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.