jointjs
Version:
JavaScript diagramming library
45 lines (34 loc) • 1.29 kB
HTML
<html>
<head>
<meta charset="utf8"/>
<title>Basic shapes</title>
<link rel="stylesheet" type="text/css" href="../build/joint.css" />
<style>
#paper {
display: inline-block;
border: 1px solid gray;
}
</style>
</head>
<body>
<p>Drag & Drop line drawing.</p>
<div id="paper"></div>
<h3>How to</h3>
<p>
The idea is to draw a temporary SVG path while the user is creating the
line by drag&drop. When the user releases the mouse cursor
when in the line drawing mode (<code>creatingLine === true</code>),
we create the JointJS <code>basic.Path</code> shape based on the
line coordinates gathered during the drawing. The result of this
is a normal JointJS shapes that we can put the <code>ui.Halo</code>
and/or <code>ui.FreeTransform</code> control panels around.
</p>
<!-- 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="../build/joint.js"></script>
<script src="./line-draw.js"></script>
</body>
</html>