Paper

Paper is the view for the Graph model. It inherits from mvc.View.

Creating a paper

While creating the diagram, the Paper is specified directly after the graph definition. Of the multiple paper options, two define crucial paper attributes:

• el - an HTML element into which the paper will be rendered.
• model - a Graph model we want to render into the paper.

These attributes relate the rendered paper to our HTML on one side, and to our JointJS data (element and link models) on the other. This makes paper the most important building block of any diagram.

Other important options are:

• width and height - the dimensions of the rendered paper (in pixels).
• cellViewNamespace - this option can be used to tell JointJS where to look for cell model definitions. cellViewNamespace and cellNamespace are often used together, but only one of them needs to be provided to state the default namespace. You can find more information on cell namespaces in the following section.

You can look at the full list of available Paper options in our api. The most used paper attributes are presented in visual form in the Paper Attributes demo on our site.

Open Sandbox

Styling

We can change appearance of a paper using some options. We can specify a background color with the background option, and show the grid with drawGrid. For the grid to be visible, we also need to set gridSize:

Open Sandbox

Scaling

At any point after defining the paper, we can use the paper.scale() method to transform the paper and all of its contents. You can look at the question section to learn how to use this functionality to create diagram minimaps and previews. The example presents the diagram scaled at a factor of one half; note that scaling does not affect paper dimensions:

Open Sandbox

paper.scale(0.5, 0.5);

note

JointJS+ provides additional capabilities for zooming and scrolling. You can learn about it here.

Translating

We can also use the paper.translate() method to move the origin of the paper coordinates and all of its contents; when used in conjunction with events, this may support paper panning functionality. The example presents the scaled diagram from above translated by 300 and 50 units:

Open Sandbox

paper.translate(300, 50);

note

JointJS+ provides additional capabilities for zooming and scrolling. You can learn about it here.

Frequently asked questions

How can I have multiple papers at once?

As per MVC structure you can have several views for one model. So you can have multiple papers for the same graph model.

Learn more...

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 look at the example:

Open Sandbox

Notice that as you interact with the bigger paper, all modifications are reflected in the preview.

Regarding the HTML we are using this markup:

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