Search code examples
jointjsrappid

Paste elements to another graph in Rappid?


I am building an administration tool thats manipulates diagrams, using JointsJS + Rappid. I am trying to copy paste elements from one paper A to another paper B (located on different browser tabs) but I face the following problem:

  • I can copy-paste from A to B one set of elements (that's good)
  • I can even paste it several times (that's still good)
  • but if I copy another set of elements from A, and try to paste it into B, the former set is pasted, instead of the new one
  • I can still paste elements from A into A, and B into B, but not from one to another anymore.

It seems that this behaviour is the same in the Kitchen Sink Rappid demo: if I open 2 tabs on the demo, I face exactly the same problem. You can reproduce it easily by opening 2 tabs with the demo app.

This is my piece of code (directly taken from Rappid demos):

this.clipboard = new joint.ui.Clipboard();
this.selection = new joint.ui.Selection({
    paper: this.paper,
    handles: App.config.selection.handles,
    collection: new Backbone.Collection
});

this.keyboard = new joint.ui.Keyboard();
this.keyboard.on({
    'ctrl+c': function () {
        // Copy all selected elements and their associated links.
        this.clipboard.copyElements(this.selection.collection, this.graph);
    },
    'ctrl+v': function () {
        var pastedCells = this.clipboard.pasteCells(this.graph, {
            translate: {dx: 20, dy: 20},
            useLocalStorage: true
        });
        var elements = _.filter(pastedCells, function (cell) {
            return cell.isElement();
        });
        // Make sure pasted elements get selected immediately. This makes the UX better as
        // the user can immediately manipulate the pasted elements.
        this.selection.collection.reset(elements);
    },
}

In the Rappid documentation, it is stated that:

"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."

I didn't fully understand the second sentence ("However ..." to end).

I monitored the local storage and discovered that both papers probably use the same storage entry, which make me think inter-graph paste is managed.

At this stage, I am struggling to find whether:

  • my code should perform inter-graph copy-paste at all,
  • I am doing something wrong,
  • there is a bug in Rappid (considering that this behaviour is the same in the official demo).

Thanks for your help.


Solution

  • I've had an answer from the Rappid crew and this is a bug in Rappid which is being fixed.

    The fix will be embedded in the next release (2.5 probably).