jointjs
Version:
JavaScript diagramming library
74 lines (53 loc) • 3.68 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="html-elements" class="tutorial">
<h2>Using HTML in JointJS elements</h2>
<p>Many times, you might want to use HTML inputs or other HTML elements inside your JointJS graphs. This
tutorial describes a way of doing this. The technique used in this tutorial is creating a custom
view that renders your HTML and takes care of the interaction with the HTML. A different approach might
be to use the
<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject" target="_blank">foreignObject</a> and
embed it in the <code>markup</code> of your JointJS elements.
This technique is however problematic due to a poor browser support. (However, this seems to be the right
way
of combining HTML with SVG in JointJS in the future.)</p>
<p>The good news is that if you setup your custom HTML view properly, you can take advantage
of many of the features JointJS has to offer.</p>
<div id="paper-html-elements"></div>
<p>The code below shows how you can create a custom JointJS view that renders HTML (including
functional inputs). The trick is to update the HTML element position and dimension so that it follows
the underlying JointJS element. Additionally, we observe changes on the embedded inputs and update
the JointJS model accordingly. This also works the other way round, if the model changes, we
reflect the changes in the HTML.</p>
<link rel="stylesheet" type="text/css" href="css/html-elements.css"/>
<script type="text/javascript" src="js/html-elements.js"></script>
<h3>JavaScript code</h3>
<pre data-src="js/html-elements.js" style="height: 2100px"></pre>
<h3>CSS stylesheet</h3>
<pre data-src="css/html-elements.css" style="height: 1600px"></pre>
</div>
<script src="../node_modules/prismjs/prism.js"></script>
</body>
</html>