iVis-at-Bilkent / cytoscape.js-clipboard

A Cytoscape.js extension to provide copy-paste utilities
MIT License
8 stars 4 forks source link
cytoscapejs cytoscapejs-extension diagramming editor graph-drawing network-visualization

cytoscape-clipboard

Description

A Cytoscape.js extension to provide copy-paste utilities, distributed under The MIT License.

Here is a demo:

API

    var cy = cytoscape({...});

    var cb = cy.clipboard(options);

cy.clipboard(options) Initializes extension & sets options.

cb.copy(eles [, id]) Copies eles and returns id of operation. If id is not specified, it will be assigned automatically.

cb.cut(eles [, id]) Cuts eles, which copies and removes them. If id is not specified, it will be assigned automatically.

cb.paste([id]) Pastes the copied elements which has id. If id is not specified, it will have the last operation's id.

Default Options

var options = {

    // The following 4 options allow the user to provide custom behavior to
    // the extension. They can be used to maintain consistency of some data
    // when elements are duplicated.
    // These 4 options are set to null by default. The function prototypes
    // are provided below for explanation purpose only.

    // Function executed on the collection of elements being copied, before
    // they are serialized in the clipboard
    beforeCopy: function(eles) {},
    // Function executed on the clipboard just after the elements are copied.
    // clipboard is of the form: {nodes: json, edges: json}
    afterCopy: function(clipboard) {},
    // Function executed on the collection of elements being cut, before
    // they are serialized in the clipboard
    beforeCut: function(eles) {},
    // Function executed on the clipboard just after the elements are cut.
    // clipboard is of the form: {nodes: json, edges: json}
    afterCut: function(clipboard) {},
    // Function executed on the clipboard right before elements are pasted,
    // when they are still in the clipboard.
    beforePaste: function(clipboard) {},
    // Function executed on the collection of pasted elements, after they
    // are pasted.
    afterPaste: function(eles) {}   
};

Default Undo Redo Actions

ur.do("paste"[, { id: idOfOperation }]) Pastes operation. id is optional as is in cb.paste()

Dependencies

Usage instructions

Download the library:

require() the library as appropriate for your project:

CommonJS:

var cytoscape = require('cytoscape');
var jquery = require('jquery');
var clipboard = require('cytoscape-clipboard');

clipboard( cytoscape, jquery ); // register extension

AMD:

require(['cytoscape', 'cytoscape-clipboard'], function( cytoscape, clipboard ){
  clipboard( cytoscape ); // register extension
});

Plain HTML/JS has the extension registered for you automatically, because no require() is needed.

Publishing instructions

This project is set up to automatically be published to npm and bower. To publish:

  1. Set the version number environment variable: export VERSION=1.2.3
  2. Publish: gulp publish
  3. If publishing to bower for the first time, you'll need to run bower register cytoscape-clipboard https://github.com/iVis-at-Bilkent/clipboard.git

Team