Copy & Paste

JointJS+ provides a Clipboard plugin that enables the ability to copy and paste cells.

Installation

Access Clipboard via the ui namespace, and create an instance.

import { ui } from '@joint/plus';

const clipboard = new ui.Clipboard({ useLocalStorage: false });

There is also a UMD version available

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

index.html

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

Access Clipboard through the joint.ui namespace:

index.js

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

How does Clipboard work?

Clipboard enables the ability for users to copy and paste JointJS cells. Optionally, clipboard also supports storing cells in HTML 5 localStorage so that the copy and 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.

Clipboard Setup

After creating an instance of Clipboard, the next step is hooking these methods to relevant user events.

import { ui } from '@joint/plus';

const clipboard = new ui.Clipboard({ useLocalStorage: false });

const selection = new ui.Selection({ paper: paper });
const keyboard = new ui.Keyboard;

keyboard.on('ctrl+c', () => clipboard.copyElements(selection.collection, paper.model));
keyboard.on('ctrl+x', () => clipboard.cutElements(selection.collection, paper.model));
keyboard.on('ctrl+v', () => clipboard.pasteCells(paper.model));

Note that the selection.collection is an mvc.Collection that stores the selected elements. The clipboard is probably the best when used in combination with the Selection plugin.