jointjs
Version:
JavaScript diagramming library
122 lines (94 loc) • 5.12 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">
<!-- 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 id="requirejs" class="tutorial">
<h2>Integrating JointJS with RequireJS</h2>
<p>
Some people ask how to integrate <em>JointJS</em> with the <a href="http://requirejs.org" target="_blank">RequireJS</a>
module loader.
This tutorial describes how to do just that. Starting from <em>JointJS</em> v0.9, it is actually pretty
simple. <em>JointJS</em>
is in the AMD format which makes it easy to use it with RequireJS.
<em>JointJS</em> exports only one global variable <b><code>joint</code></b>.
</p>
<h3>index.html</h3>
<p>Let's start with our <code>index.html</code> file. This file includes only the <code>require.js</code>
library, our stylesheets
and defines what is the starting point of our application (in our case, <code>main.js</code> file):
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
</head>
<body>
<div id="app"></div>
<script data-main="main" src="require.js"></script>
</body>
</html></code></pre>
For simplicity, we assume all the files are in the same folder as our <code>index.html</code> file.
<h3>RequireJS config, the main.js file</h3>
<p>Now we can start with the more interesting part, our <code>main.js</code> file, containing the configuration
of our modules needed by RequireJS. <em>JointJS</em> is dependent on <em>jQuery</em>, <em>Backbone</em>
(which further depends on <em>Underscore</em>*).
</p>
<p>The only thing we have to do is to define our module names and tell RequireJS where to find them (the <code>paths</code>
object).
Next, we have to trick Backbone to use Lodash instead of Underscore (this is because JointJS requires
Lodash, not just Underscore).
All the files can be downloaded from <a href="http://jointjs.com/opensource#Download-JointJS" target="_blank">Download page</a>.</p>
<pre><code class="language-javascript">require.config({
paths: {
jquery: './jquery',
lodash: './lodash',
backbone: './backbone'
},
map: {
'*': {
// Backbone requires underscore. This forces requireJS to load lodash instead:
'underscore': 'lodash'
}
}
});
// Now we're ready to require JointJS and write our application code.
require(['joint'], function(joint) {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ width: 600, height: 400, model: graph });
var elApp = document.getElementById('app');
elApp.appendChild(paper.el);
var rect = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 100 }
});
graph.addCell(rect);
});</code></pre>
<p>
* Note we previously mentioned that <em>Backbone</em> is dependent on <em>Underscore</em> but we actually
use the <em>Lodash</em> library instead.
This is becausae Lodash library is a drop-in replacement for <em>Underscore</em> extending it with more
features that <em>JointJS</em> uses.
</p>
</div>
<script src="../node_modules/prismjs/prism.js"></script>
</body>
</html>