Now when you learned that a joint.dia.Paper
is a view for the joint.dia.Graph
model, you can imagine that the same model can have
multiple views. That's right. Let's use the same application as the Hello World! above and let's add another
paper, scaled and non-interactive, that serves as a small
overview of the graph.
var paperSmall = new joint.dia.Paper({
el: $('#myholder-small'),
width: 600,
height: 100,
model: graph,
gridSize: 1
});
paperSmall.scale(.5);
paperSmall.$el.css('pointer-events', 'none');
Try to interact with the first, bigger, paper. You should see all the changes reflected in the other, smaller, paper.