jointjs
Version:
JavaScript diagramming library
277 lines (217 loc) • 12.5 kB
HTML
<html>
<head>
<link rel="canonical" href="http://www.jointjs.com/" />
<meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
<meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/tutorial.css" />
<link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">
<link rel="stylesheet" href="../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css">
<link rel="stylesheet" href="../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css">
<!-- Dependencies: -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>
<script src="../node_modules/backbone/backbone.js"></script>
<link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
<script type="text/javascript" src="../build/joint.min.js"></script>
<title>JointJS - JavaScript diagramming library - Getting started.</title>
</head>
<body class="language-javascript tutorial-page">
<script>
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
};
</script>
<div class="tutorial">
<h2>Graph & Paper</h2>
<p><a href="hello-world.html">In the first part of the tutorial, we saw a working example of a
simple JointJS application:</a></p>
<div class="paper" id="paper-hello-world"></div>
<p><a href="installation.html">Now that we have included JointJS on our webpage</a>, we can
start creating our diagram.</p>
<p>In this section, we will learn how to finish setting up by creating a graph and a paper in our JointJS code
and linking them to our HTML.
We will be looking at these portions of the original Hello, World! application:</p>
<pre class="line-numbers" data-line="8,19,21-27"><code><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="node_modules/jointjs/dist/joint.css" />
</head>
<body>
<!-- content -->
<div id="myholder"></div>
<!-- dependencies -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="node_modules/backbone/backbone.js"></script>
<script src="node_modules/jointjs/dist/joint.js"></script>
<!-- code -->
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 1
});
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
body: {
fill: 'blue'
},
label: {
text: 'Hello',
fill: 'white'
}
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);
</script>
</body>
</html></code></pre>
<p>All useful JointJS applications need to have a graph and a paper.
The graph contains a reference to all components of your diagram, and the paper is responsible for
rendering the graph.</p>
<p>The <a href="/docs/jointjs#dia.Graph" target="_blank">Graph model</a> is usually defined on the
first line of the JointJS JavaScript code.
In our code, we saved a reference to it as <code>var graph</code>.
In order to have our cells (elements and links) rendered, we need to add them to the graph; unless we
add our cells, the diagram does not know they exist.
In our example, we do that with the <code>addTo()</code> functions, but we could also do it with the
<a href="/docs/jointjs#dia.Graph.prototype.addCells" target="_blank"><code>graph.addCells()</code></a>
function.</p>
<p>Normally, the <a href="/docs/jointjs#dia.Paper" target="_blank">Paper view</a> is specified directly
after the graph definition.
We create it with an options object and save it as <code>var paper</code>.
Of the five options, two define crucial paper attributes:</p>
<ul>
<li><a href="/docs/jointjs#dia.Paper.prototype.options.el" target="_blank"><code>el</code></a> - an HTML
element into which the paper will be rendered.</li>
<li><a href="/docs/jointjs#dia.Paper.prototype.options.graph" target="_blank"><code>graph</code></a> - a
Graph model we want to render into the paper.</li>
</ul>
<p>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.</p>
<p>The three other options specify the paper's presentation attributes.
In our example, these are:</p>
<ul>
<li><a href="/docs/jointjs#dia.Paper.prototype.options.width" target="_blank"><code>width</code></a> and
<a href="/docs/jointjs#dia.Paper.prototype.options.height" target="_blank"><code>height</code></a> -
the dimensions of the rendered paper (in pixels).</li>
<li><a href="/docs/jointjs#dia.Paper.prototype.options.gridSize" target="_blank"><code>gridSize</code></a>
- the size of the grid to which elements are aligned. Affects the granularity of element
movement.</li>
</ul>
<p><a href="/docs/jointjs#dia.Paper.prototype.options" target="_blank">The full list of available Paper
attributes</a> is long and allows customizing almost everything about the paper rendering.
You will encounter these in the advanced portions of the tutorial series.
The most used paper attributes are presented in visual form in the
<a href="/demo/paper" target="_blank">Paper Attributes demo</a>.</p>
<h3 id="paper-styling">Paper Styling</h3>
<p>Now, let's make some changes to the appearance of the original Hello, World! application.
We can specify a background color with the
<a href="/docs/jointjs#dia.Paper.prototype.options.background" target="_blank"><code>background</code></a>
attribute, and show the grid with
<a href="/docs/jointjs#dia.Paper.prototype.options.drawGrid" target="_blank"><code>drawGrid</code></a>.
For the grid to be visible, we also need to increase <code>gridSize</code>:</p>
<div class="paper" id="paper-graph-and-paper"></div>
<p>The code is presented below.
The changes we made are highlighted:</p>
<pre class="line-numbers" data-line="26-30"><code><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="node_modules/jointjs/dist/joint.css" />
</head>
<body>
<!-- content -->
<div id="myholder"></div>
<!-- dependencies -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="node_modules/backbone/backbone.js"></script>
<script src="node_modules/jointjs/dist/joint.js"></script>
<!-- code -->
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 10,
drawGrid: true,
background: {
color: 'rgba(0, 255, 0, 0.3)'
}
});
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
body: {
fill: 'blue'
},
label: {
text: 'Hello',
fill: 'white'
}
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);
</script>
</body>
</html></code></pre>
<p>JointJS source code: <a href="js/graph-and-paper.js" target="_blank">graph-and-paper.js</a></p>
<h3 id="paper-scaling">Appendix: Paper Scaling</h3>
<p>At any point after defining the paper, we can use the
<a href="/docs/jointjs#dia.Paper.prototype.scale" target="_blank"><code>paper.scale()</code></a>
function to transform the paper and all of its contents.
Have a look at the advanced <a href="multiple-papers.html">Multiple Papers tutorial</a> 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:</p>
<div class="paper" id="paper-graph-and-paper-scaled"></div>
<pre><code>paper.scale(0.5, 0.5);</code></pre>
<p>JointJS source code: <a href="js/graph-and-paper-scaled.js" target="_blank">graph-and-paper-scaled.js</a></p>
<h3 id="paper-translation">Appendix: Paper Translation</h3>
<p>We can also use the
<a href="/docs/jointjs#dia.Paper.prototype.scale" target="_blank"><code>paper.translate()</code></a>
function to move the origin of the paper coordinates and all of its contents; when used in a
<a href="events.html">custom interaction</a>, this may support paper panning functionality.
The example presents the scaled diagram from above translated by 300 and 50 units:</p>
<div class="paper" id="paper-graph-and-paper-translated"></div>
<pre><code>paper.translate(300, 50);</code></pre>
<p>JointJS source code: <a href="js/graph-and-paper-translated.js" target="_blank">graph-and-paper-translated.js</a></p>
<p>We now understand the importance of the Graph and Paper objects, and know how to change the appearance of
our paper.</p>
<p><a href="elements.html">The next step is to learn how to work with elements.</a></p>
</div><!--end tutorial-->
<script src="../node_modules/prismjs/prism.js"></script>
<script src="../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"></script>
<script src="../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.js"></script>
<script src="js/hello-world.js"></script>
<script src="js/graph-and-paper.js"></script>
<script src="js/graph-and-paper-scaled.js"></script>
<script src="js/graph-and-paper-translated.js"></script>
</body>
</html>