We mentioned in the tutorial introduction that JointJS has an MVC
Importantly, this also applies to the two main JointJS components -
joint.dia.Graph model and its view -
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>
JointJS source code: multiple-papers.js