Multiple papers for the same graph

We mentioned in the tutorial introduction that JointJS has an MVC structure. Importantly, this also applies to the two main JointJS components - the joint.dia.Graph model and its view - joint.dia.Paper. Therefore, nothing prevents us from associating more than one paper to a single graph!

When several papers are connected to the same graph, they all present the same data and communicate user interaction to the same underlying model. Each of those papers can apply their own transformations to the presented information, which allows us to create diagram minimaps and previews.

Let's adapt our basic Hello, World! application and overlay it with a smaller, non-interactive minimap. Notice that as you interact with the bigger paper, all modifications are reflected in the preview.

We use a simple HTML to make the papers overlap...

<div style="position: relative; padding-bottom: 100px;">
    <div class="paper" id="paper-multiple-papers" style="position: absolute;"></div>
    <div class="paper" id="paper-multiple-papers-small" style="position: absolute; top: 75px; left: 450px;"></div>
</div>

...and the following JavaScript to populate the two papers:



            

JointJS source code: multiple-papers.js