joint.all.js
function(selection, graph, opt) {

        opt = opt || {};
        
        // The method:
        // 1. Find all links that have BOTH source and target in `this.selection`.
        // 2. Clone these links.
        // 3. Clone elements and map their original id to their new id and put them to the clipboard.
        // 4. Reset the target/source id of the cloned links to point to the appropriate cloned elements.
        // 5. Put the modified links to the clipboard too.
        
        var links = [];
        var elements = [];
        var elementsIdMap = {};
        
        selection.each(function(element) {

            var connectedLinks = graph.getConnectedLinks(element);
            
            // filter only those having both source/target in the selection.
            links = links.concat(_.filter(connectedLinks, function(link) {

                if (selection.get(link.get('source').id) && selection.get(link.get('target').id)) {
                    return true;
                }
                return false;
                
            }));

            var clonedElement = element.clone();
            if (opt.translate) {
                clonedElement.translate(opt.translate.dx || 20, opt.translate.dy || 20);
            }
            elements.push(clonedElement);
            elementsIdMap[element.get('id')] = clonedElement.get('id');
            
        });

        // Store the original links so that we can return them from the function together with the
        // original elements.
        var originalLinks = _.unique(links);

        links = _.map(originalLinks, function(link) {

            var clonedLink = link.clone();
            var source = clonedLink.get('source');
            var target = clonedLink.get('target');
            
            source.id = elementsIdMap[source.id];
            target.id = elementsIdMap[target.id];

            clonedLink.set({
                source: _.clone(source),
                target: _.clone(target)
            });

            // Translate vertices as well if necessary.
            if (opt.translate) {

                _.each(clonedLink.get('vertices'), function(vertex) {

                    vertex.x += opt.translate.dx || 20;
                    vertex.y += opt.translate.dy || 20;
                });
            }

            return clonedLink;
        });
        
        this.reset(elements.concat(links));

        if (opt.useLocalStorage && window.localStorage) {

            localStorage.setItem('joint.ui.Clipboard.cells', JSON.stringify(this.toJSON()));
        }

        return (selection.models || []).concat(originalLinks);
    }
function(selection, graph, opt) {

        opt = opt || {};
        
        // The method:
        // 1. Find all links that have BOTH source and target in `this.selection`.
        // 2. Clone these links.
        // 3. Clone elements and map their original id to their new id and put them to the clipboard.
        // 4. Reset the target/source id of the cloned links to point to the appropriate cloned elements.
        // 5. Put the modified links to the clipboard too.
        
        var links = [];
        var elements = [];
        var elementsIdMap = {};
        
        selection.each(function(element) {

            var connectedLinks = graph.getConnectedLinks(element);
            
            // filter only those having both source/target in the selection.
            links = links.concat(_.filter(connectedLinks, function(link) {

                if (selection.get(link.get('source').id) && selection.get(link.get('target').id)) {
                    return true;
                }
                return false;
                
            }));

            var clonedElement = element.clone();
            if (opt.translate) {
                clonedElement.translate(opt.translate.dx || 20, opt.translate.dy || 20);
            }
            elements.push(clonedElement);
            elementsIdMap[element.get('id')] = clonedElement.get('id');
            
        });

        // Store the original links so that we can return them from the function together with the
        // original elements.
        var originalLinks = _.unique(links);

        links = _.map(originalLinks, function(link) {

            var clonedLink = link.clone();
            var source = clonedLink.get('source');
            var target = clonedLink.get('target');
            
            source.id = elementsIdMap[source.id];
            target.id = elementsIdMap[target.id];

            clonedLink.set({
                source: _.clone(source),
                target: _.clone(target)
            });

            // Translate vertices as well if necessary.
            if (opt.translate) {

                _.each(clonedLink.get('vertices'), function(vertex) {

                    vertex.x += opt.translate.dx || 20;
                    vertex.y += opt.translate.dy || 20;
                });
            }

            return clonedLink;
        });
        
        this.reset(elements.concat(links));

        if (opt.useLocalStorage && window.localStorage) {

            localStorage.setItem('joint.ui.Clipboard.cells', JSON.stringify(this.toJSON()));
        }

        return (selection.models || []).concat(originalLinks);
    }
function ( selection , graph , opt ) { opt = opt || { } ; // The method: // 1. Find all links that have BOTH source and target in `this.selection`. // 2. Clone these links. // 3. Clone elements and map their original id to their new id and put them to the clipboard. // 4. Reset the target/source id of the cloned links to point to the appropriate cloned elements. // 5. Put the modified links to the clipboard too. var links = [ ] ; var elements = [ ] ; var elementsIdMap = { } ; selection . each ( function ( element ) { var connectedLinks = graph . getConnectedLinks ( element ) ; // filter only those having both source/target in the selection. links = links . concat ( _ . filter ( connectedLinks , function ( link ) { if ( selection . get ( link . get ( 'source' ) . id ) && selection . get ( link . get ( 'target' ) . id ) ) { return true ; } return false ; } ) ) ; var clonedElement = element . clone ( ) ; if ( opt . translate ) { clonedElement . translate ( opt . translate . dx || 20 , opt . translate . dy || 20 ) ; } elements . push ( clonedElement ) ; elementsIdMap [ element . get ( 'id' ) ] = clonedElement . get ( 'id' ) ; } ) ; // Store the original links so that we can return them from the function together with the // original elements. var originalLinks = _ . unique ( links ) ; links = _ . map ( originalLinks , function ( link ) { var clonedLink = link . clone ( ) ; var source = clonedLink . get ( 'source' ) ; var target = clonedLink . get ( 'target' ) ; source . id = elementsIdMap [ source . id ] ; target . id = elementsIdMap [ target . id ] ; clonedLink . set ( { source : _ . clone ( source ) , target : _ . clone ( target ) } ) ; // Translate vertices as well if necessary. if ( opt . translate ) { _ . each ( clonedLink . get ( 'vertices' ) , function ( vertex ) { vertex . x += opt . translate . dx || 20 ; vertex . y += opt . translate . dy || 20 ; } ) ; } return clonedLink ; } ) ; this . reset ( elements . concat ( links ) ) ; if ( opt . useLocalStorage && window . localStorage ) { localStorage . setItem ( 'joint.ui.Clipboard.cells' , JSON . stringify ( this . toJSON ( ) ) ) ; } return ( selection . models || [ ] ) . concat ( originalLinks ) ; }
`selection` is a Backbone collection containing elements that should be copied to the clipboard. Note that with these elements, also all the associated links are copied. That's why we also need the `graph` parameter, to find these links. This function returns the elements and links from the original graph that were copied. This is useful for implements the Cut operation where the original cells should be removed from the graph. if `opt.translate` object with `dx` and `dy` properties is passed, the copied elements will be translated by the specified amount. This is useful for e.g. the 'cut' operation where we'd like to have the pasted elements moved by an offset to see they were pasted to the paper. if `opt.useLocalStorage` is `true`, the copied elements will be saved to the localStorage (if present) making it possible to copy-paste elements between browser tabs or sessions.
selection is a Backbone collection containing elements that should be copied to the clipboard . Note that with these elements also all the associated links are copied . That s why we also need the graph parameter to find these links . This function returns the elements and links from the original graph that were copied . This is useful for implements the Cut operation where the original cells should be removed from the graph . if opt . translate object with dx and dy properties is passed the copied elements will be translated by the specified amount . This is useful for e . g . the cut operation where we d like to have the pasted elements moved by an offset to see they were pasted to the paper . if opt . useLocalStorage is true the copied elements will be saved to the localStorage ( if present ) making it possible to copy - paste elements between browser tabs or sessions .