Raphaeljs: Copy element or set to another paper - svg

Question

Is there a possibility of adding an element or set that exists within a paper to another paper, without creating each element twice from scratch?
Background for this: I visualize a large node graph and want to create an "overview map" in a separate paper.

Answer 1

The following set of codes adds a nw function to Raphael Set and Raphael Elements. The usage is to simply call .cloneToPaper(targetPaper) on any set or element.
(function (R) {
var cloneSet; // to cache set cloning function for optimisation
/**
* Clones Raphael element from one paper to another
*
* #param {Paper} targetPaper is the paper to which this element
* has to be cloned
*
* #return RaphaelElement
*/
R.el.cloneToPaper = function (targetPaper) {
return (!this.removed &&
targetPaper[this.type]().attr(this.attr()));
};
/**
* Clones Raphael Set from one paper to another
*
* #param {Paper} targetPaper is the paper to which this element
* has to be cloned
*
* #return RaphaelSet
*/
R.st.cloneToPaper = function (targetPaper) {
targetPaper.setStart();
this.forEach(cloneSet || (cloneSet = function (el) {
el.cloneToPaper(targetPaper);
}));
return targetPaper.setFinish();
};
}(Raphael));
For a sample implementation, you may check out this fiddle: http://jsfiddle.net/shamasis/39yTS/
Note that if you have events on the source elements, they will not be cloned to the target paper.

Answer 2

Raphael don't allow to move element from one paper to another directly.
So it is better to create a new element with same property in the target paper.
I have created following sample method. you can add the code in your page and use cloneToPaper function to clone a element or a set to another paper.
function extractJSON(element) {
var attr = element.attr(),
newNodeJSON = {type: element.type},
key;
for (key in attr) {
newNodeJSON[key] = attr[key];
}
return newNodeJSON;
}
/*
* #param {Object} element: raphael element or set
* #param {Object} paper: Target paper where to clone
* #return {object}: newly created set or element
*/
function cloneToPaper(element, paper) {
var isSet = element.type === 'set',
elementJSONArr = [],
i, ln, newSet;
if (isSet) {
ln = element.items.length;
for (i = 0; i < ln; i += 1) {
elementJSONArr.push(extractJSON(element.items[i]));
}
}
else {
elementJSONArr.push(extractJSON(element));
}
newSet = paper.add(elementJSONArr);
return isSet ? newSet : newSet[0];
}