Multiple views/renders of the same kineticjs model

Question

I am building a graph utility that displays a rather large graph containing a lot of data. One of the things I would like to be able to support is having multiple views of the data simultaneously in different panels of my application.

I've drawn a picture to try and demonstrate what i mean. Suppose i've built the gradiented image in the background using kinetic.

I'd like to be able to grab show the part outlined in red and the part outlined in green simultaneously, without having to rebuild the entire image.

var stage1 = new Kinetic.Stage({
  container: 'container1',
  width: somewidth,
  height: someheight
});

var stage2 = new Kinetic.Stage({
  container: 'container1',
  width: someotherwidth,
  height: someotherheight
});

var Layer1 = new Kinetic.Layer({
  y: someY,
  scale: someScale
});
// add stuff to first layer here...

var Layer2 = new Kinetic.Layer({
  y: otherY,
  scale: otherScale
});
// add other stuff to second layer here...

stage1.add(mapLayer);
stage1.add(topLayer);

stage2.add(mapLayer);
stage2.add(topLayer);

at the point at which I've added my layers to stage1, everything is fine, but as soon as i try to add them to stage2 as well, it breaks down. I'm sifting through the source but I cant see anything forcing data to be unique to a stage. Is this possible? Or do i have to duplicate all of my shapes?

Answer 1

Adding a node into multiple parents is not possible by KineticJS design. Each Layer has <canvas> element. As I know it is not possible to insert a DOM element into document twice.