Clipboard

Clipboard implements the ability to copy and paste cells. It extends the mvc.Collection.

Learn more about the Clipboard plugin.

constructor

constructor(opt?: Clipboard.Options);

The Clipboard constructor accepts several parameters:

addCellOptions

[optional] Options that will be passed to the graph.addCell method during paste operations.

cloneCells()

cloneCells: (cells: Array<dia.Cell>) => Array<dia.Cell>;

[optional] A callback function that is called whenever the clipboard needs a copy of the cells (e.g. when copyElements() is called). The function should return an array of copied cells.

The function can be used to update the copied cells with additional information. For example, you can add a reference to the original cell to the copied cell.

const clipboard = new ui.Clipboard({
  cloneCells: (cells) => {
    const clonesMap = util.cloneCells(cells);
    const clones = Object.values(clonesMap);
    /* update the clones using the references to the original cell */
    cells.forEach(cell => {
       clonesMap[cell.id].set('originalId', cell.get('originalId') || cell.id);
    });
    return clones;
  }
});

deep

[optional] Set to true if you want the clipboard to automatically add all embedded cells to the provided elements for copying.

link

[optional] 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 }.

origin

[optional] 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'.

translate

[optional] 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 }.

removeCellOptions

[optional] Options that will be passed to the cell's remove method during the cut operation.

useLocalStorage

[optional] Set to false if you don't want to use window.localStorage for storing copied cells. It defaults to true.

Methods

copyElements()

clipboard.copyElements(
    selection: mvc.Collection<dia.Cell> | Array<dia.Cell>,
    graph: dia.Graph,
    opt?: Clipboard.BaseOptions
): Array<dia.Cell>;

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 an mvc.Collection or an array of cells. The options opt passed as a parameter can override the global options.

cutElements()

clipboard.cutElements(
    selection: mvc.Collection<dia.Cell> | Array<dia.Cell>,
    graph: dia.Graph,
    opt?: Clipboard.CutElementsOptions
): Array<dia.Cell>;

Similar to copyElements() but it also removes all copied cells from the graph.

pasteCells()

clipboard.pasteCells(graph: dia.Graph, opt?: Clipboard.PasteCellsOptions): Array<dia.Cell>;

Add copies of stored cells to the graph at a 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()

clipboard.isEmpty(opt?: Clipboard.BaseOptions): boolean;

Return true when there are no cells stored on the Clipboard instance. It returns false otherwise. It checks local storage if the useLocalStorage option is true.

saveToLocalStorage()

clipboard.saveToLocalStorage(): void;

Store the the current cells to the window.localStorage.

fetchCellsFromLocalStorage()

clipboard.fetchCellsFromLocalStorage(cellNamespace: any): dia.Cell[];

Fetch the cells from the window.localStorage and return them as an array of cells.

clear()

clipboard.clear(opt?: Clipboard.BaseOptions): void;

Clear all stored cells. Also clears window.localStorage if useLocalStorage is true.

Types

BaseOptions

interface BaseOptions {
    useLocalStorage?: boolean;
    deep?: boolean;
    [key: string]: any;
}

Options

interface Options extends BaseOptions {
    link?: { [key: string]: any };
    origin?: dia.PositionName;
    translate?: { dx: number, dy: number };
    removeCellOptions?: dia.Cell.DisconnectableOptions;
    addCellOptions?: dia.CollectionAddOptions;
}