<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="JsDoc Toolkit" />
<title>JointJS API Reference - Joint.arrows</title>
<style type="text/css">
/* default.css */
body
{
font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
width: 800px;
color: white;
}
.header
{
clear: both;
background-color: #ccc;
padding: 8px;
}
h1
{
font-size: 150%;
font-weight: bold;
padding: 0;
margin: 1em 0 0 .3em;
}
hr
{
border: none 0;
border-top: 1px solid #7F8FB1;
height: 1px;
}
pre.code
{
display: block;
padding: 8px;
border: 1px dashed #ccc;
}
#index
{
margin-top: 24px;
float: left;
width: 160px;
position: absolute;
left: 8px;
background-color: #F3F3F3;
padding: 8px;
}
#content
{
margin-left: 190px;
width: 600px;
}
.classList
{
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
font-family: arial, sans-serif;
font-size: 1em;
overflow: auto;
}
.classList li
{
padding: 0;
margin: 0 0 8px 0;
}
.summaryTable { width: 100%; }
h1.classTitle
{
font-size:170%;
line-height:130%;
}
h2
{
font-size: 110%;
}
caption, div.sectionTitle
{
background-color: #7F8FB1;
color: #fff;
font-size:130%;
text-align: left;
padding: 2px 6px 2px 6px;
border: 1px #7F8FB1 solid;
}
div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }
.summaryTable td
{
vertical-align: top;
padding: 4px;
border-bottom: 1px #7F8FB1 solid;
border-right: 1px #7F8FB1 solid;
}
/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
border-left: 1px #7F8FB1 solid;
width: 140px;
text-align: right;
}
td.attributes, .fixedFont
{
line-height: 15px;
color: white;
font-weight: bold;
font-family: "Courier New",Courier,monospace;
font-size: 13px;
}
.summaryTable td.nameDescription
{
text-align: left;
font-size: 13px;
line-height: 15px;
}
.summaryTable td.nameDescription, .description
{
line-height: 15px;
padding: 4px;
padding-left: 4px;
}
.summaryTable { margin-bottom: 8px; }
ul.inheritsList
{
list-style: square;
margin-left: 20px;
padding-left: 0;
}
.detailList {
margin-left: 20px;
line-height: 15px;
}
.detailList dt { margin-left: 20px; }
.detailList .heading
{
font-weight: bold;
padding-bottom: 6px;
margin-left: 0;
}
.light, td.attributes, .light a:link, .light a:visited
{
color: #777;
font-style: italic;
}
.fineprint
{
text-align: right;
font-size: 10px;
}
#header {
display: block;
text-align: center;
background-color: #26A2E0;
color: white;
font-size: 24px;
font-weight: bold;
}
#header a {
text-decoration: none;
color: inherit;
}
a {
color: white;
text-decoration: underline;
}
#index a,
#index h2 {
color: black;
}
</style>
</head>
<body>
<!-- ============================== header ================================= -->
<!-- begin static/header.html -->
<!-- end static/header.html -->
<!-- ============================== classes index ============================ -->
<div id="index">
<!-- begin publish.classesIndex -->
<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
<li></li>
<li><a href="../symbols/Joint.html">Joint</a></li>
<li><a href="../symbols/Joint.arrows.html">Joint.arrows</a></li>
<li><a href="../symbols/Joint.dia.html">Joint.dia</a></li>
<li><a href="../symbols/Joint.dia.devs.html">Joint.dia.devs</a></li>
<li><a href="../symbols/Joint.dia.Element.html">Joint.dia.Element</a></li>
<li><a href="../symbols/Joint.dia.erd.html">Joint.dia.erd</a></li>
<li><a href="../symbols/Joint.dia.fsa.html">Joint.dia.fsa</a></li>
<li><a href="../symbols/Joint.dia.org.html">Joint.dia.org</a></li>
<li><a href="../symbols/Joint.dia.pn.html">Joint.dia.pn</a></li>
<li><a href="../symbols/Joint.dia.uml.html">Joint.dia.uml</a></li>
</ul>
<hr />
<!-- end publish.classesIndex -->
</div>
<div id="content">
<!-- ============================== class title ============================ -->
<h1 class="classTitle">
Namespace Joint.arrows
</h1>
<!-- ============================== class summary ========================== -->
<p class="description">
Additional ready-to-use arrows.
<h3>Creating your own arrows</h3>
<p>New arrows can be easily added. Each arrow is a function of one parameter (size) returning an object
which describes the arrow. The object has four properties:</p>
<ul>
<li><i>path</i>: SVG path of arrow shape</li>
<li><i>dx</i>: x-axis offset</li>
<li><i>dy</i>: y-axis offset</li>
<li><i>attrs</i>: SVG path attributes</li>
</ul>
<p>Let's say you want to create an arrow of a square shape. First of all, you need a SVG path describing
the square. Note that the symmetry of the square is along the origin (0, 0). After you have created the path,
you need to specify the dx, dy offsets. The offsets tell the Joint library where to start drawing the connection.
For our square arrow, they equal to its size. As the last thing, you can set some default path attributes
suitable for you arrows. A good practice is to set the fill attribute. Doing so allows you to grab your arrow
by mouse wherever inside your arrow shape.</p>
<pre>
Joint.arrows.square = function(size){
var minusSize = (-size).toString();
size = size.toString();
return {
path: ["M", size, size,
"L", minusSize, size,
"L", minusSize, minusSize,
"L", size, minusSize, "z"],
dx: size,
dy: size,
attrs: {
stroke: "black",
fill: "white"
}
};
};
Joint({x: 20, y: 20}, {x: 300, y: 30}, {
startArrow: {
type: "square",
size: 10
}
});
</pre>
<br /><i>Defined in: </i> <a href="../symbols/src/src_joint.arrows.js.html">joint.arrows.js</a>.
</p>
<!-- ============================== constructor summary ==================== -->
<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class Joint.arrows.">
<caption>Namespace Summary</caption>
<thead>
<tr>
<th scope="col">Constructor Attributes</th>
<th scope="col">Constructor Name and Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="attributes"> </td>
<td class="nameDescription" >
<div class="fixedFont">
<b><a href="../symbols/Joint.arrows.html#constructor">Joint.arrows</a></b>
</div>
<div class="description"></div>
</td>
</tr>
</tbody>
</table>
<!-- ============================== properties summary ===================== -->
<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class Joint.arrows.">
<caption>Field Summary</caption>
<thead>
<tr>
<th scope="col">Field Attributes</th>
<th scope="col">Field Name and Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="attributes"><static> </td>
<td class="nameDescription">
<div class="fixedFont">
Joint.arrows.<b><a href="../symbols/Joint.arrows.html#.flower">flower</a></b>
</div>
<div class="description">Flower arrow.</div>
</td>
</tr>
<tr>
<td class="attributes"><static> </td>
<td class="nameDescription">
<div class="fixedFont">
Joint.arrows.<b><a href="../symbols/Joint.arrows.html#.hand">hand</a></b>
</div>
<div class="description">Hand arrow.</div>
</td>
</tr>
<tr>
<td class="attributes"><static> </td>
<td class="nameDescription">
<div class="fixedFont">
Joint.arrows.<b><a href="../symbols/Joint.arrows.html#.rect">rect</a></b>
</div>
<div class="description">Rectangle arrow.</div>
</td>
</tr>
</tbody>
</table>
<!-- ============================== methods summary ======================== -->
<!-- ============================== events summary ======================== -->
<!-- ============================== constructor details ==================== -->
<div class="details"><a name="constructor"> </a>
<div class="sectionTitle">
Namespace Detail
</div>
<div class="fixedFont">
<b>Joint.arrows</b>
</div>
<div class="description">
</div>
</div>
<!-- ============================== field details ========================== -->
<div class="sectionTitle">
Field Detail
</div>
<a name=".flower"> </a>
<div class="fixedFont"><static>
<span class="light">Joint.arrows.</span><b>flower</b>
</div>
<div class="description">
Flower arrow.
</div>
<hr />
<a name=".hand"> </a>
<div class="fixedFont"><static>
<span class="light">Joint.arrows.</span><b>hand</b>
</div>
<div class="description">
Hand arrow.
</div>
<pre class="code">
Joint({x: 40, y: 40}, {x: 300, y: 70}, {
startArrow: {
type: "flower"
},
endArrow: {
type: "hand"
}
});</pre>
<hr />
<a name=".rect"> </a>
<div class="fixedFont"><static>
<span class="light">Joint.arrows.</span><b>rect</b>
</div>
<div class="description">
Rectangle arrow.
</div>
<!-- ============================== method details ========================= -->
<!-- ============================== event details ========================= -->
<hr />
</div>
<!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both">
JointJS - JavaScript diagramming library, © David Durman, 2009 - 2011
</div>
</body>
</html>