<!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</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">
Class Joint
</h1>
<!-- ============================== class summary ========================== -->
<p class="description">
<br /><i>Defined in: </i> <a href="../symbols/src/src_joint.js.html">joint.js</a>.
</p>
<!-- ============================== constructor summary ==================== -->
<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class Joint.">
<caption>Class 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.html#constructor">Joint</a></b>(from, to, opts)
</div>
<div class="description"></div>
</td>
</tr>
</tbody>
</table>
<!-- ============================== properties summary ===================== -->
<!-- ============================== methods summary ======================== -->
<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class Joint.">
<caption>Method Summary</caption>
<thead>
<tr>
<th scope="col">Method Attributes</th>
<th scope="col">Method Name and Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#compact">compact</a></b>()
</div>
<div class="description">Returns compact object representation of joint.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#disconnect">disconnect</a></b>(cap)
</div>
<div class="description">Disconnects joint from objects.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#euid">euid</a></b>()
</div>
<div class="description"></div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#getVertices">getVertices</a></b>()
</div>
<div class="description">Get connection vertices.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#hideHandle">hideHandle</a></b>(cap)
</div>
<div class="description">Hide handle.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#highlight">highlight</a></b>(color)
</div>
<div class="description">Highlight connection.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#isSmooth">isSmooth</a></b>()
</div>
<div class="description">Find out whether the connection is smooth or not.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#label">label</a></b>(str)
</div>
<div class="description">Set a label of the connection.</div>
</td>
</tr>
<tr>
<td class="attributes"><static> </td>
<td class="nameDescription">
<div class="fixedFont">Joint.<b><a href="../symbols/Joint.html#.paper">paper</a></b>(p)
</div>
<div class="description">Set a paper for graphics rendering.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#register">register</a></b>(obj, cap)
</div>
<div class="description">Register object(s) so that it can be pointed by my cap.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#registerCallback">registerCallback</a></b>(evt, fnc)
</div>
<div class="description">Register callback function on various events.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#registeredObjects">registeredObjects</a></b>()
</div>
<div class="description"></div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#registerForever">registerForever</a></b>(arr)
</div>
<div class="description">The difference between register and registerForever is that registerForever
saves reference to an array passed as argument.</div>
</td>
</tr>
<tr>
<td class="attributes"><static> </td>
<td class="nameDescription">
<div class="fixedFont">Joint.<b><a href="../symbols/Joint.html#.resetPaper">resetPaper</a></b>()
</div>
<div class="description">Clear paper, reset again.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#setBBoxCorrection">setBBoxCorrection</a></b>(corr, cap)
</div>
<div class="description">Set bounding box correction.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#setVertices">setVertices</a></b>(vertices)
</div>
<div class="description">Set the vertices of the connection</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#showHandle">showHandle</a></b>(cap)
</div>
<div class="description">Show handle.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#straighten">straighten</a></b>()
</div>
<div class="description">Straighten the bent connection path.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#stringify">stringify</a></b>()
</div>
<div class="description"></div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#toggleHandle">toggleHandle</a></b>(cap)
</div>
<div class="description">Show/hide handle(s).</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#toggleSmoothing">toggleSmoothing</a></b>()
</div>
<div class="description">Toggle the connection smoothing (bezier/straight).</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#unhighlight">unhighlight</a></b>()
</div>
<div class="description">Unhighlight connection.</div>
</td>
</tr>
<tr>
<td class="attributes"> </td>
<td class="nameDescription">
<div class="fixedFont"><b><a href="../symbols/Joint.html#unregister">unregister</a></b>(obj, cap)
</div>
<div class="description">Cancel registration of an object.</div>
</td>
</tr>
</tbody>
</table>
<!-- ============================== events summary ======================== -->
<!-- ============================== constructor details ==================== -->
<div class="details"><a name="constructor"> </a>
<div class="sectionTitle">
Class Detail
</div>
<div class="fixedFont">
<b>Joint</b>(from, to, opts)
</div>
<div class="description">
</div>
<pre class="code">Joint({x: 10, y: 10}, {x: 300, y: 100}, {
label: "my label",
beSmooth: true,
startArrow: {
type: "basic",
size: 7,
attrs: {
fill: "red",
stroke: "blue"
}
},
handle: {
timeout: 4000,
start: {
radius: 6,
attrs: {
fill: "green",
stroke: "black"
}
},
end: {
radius: 4,
attrs: {
fill: "red",
stroke: "black"
}
}
}
});</pre>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{RaphaelObject|Shape|object}</span> <b>from</b>
</dt>
<dd>Object/position where the connection starts.</dd>
<dt>
<span class="light fixedFont">{RaphaelObject|Shape|object}</span> <b>to</b>
</dt>
<dd>Object/position where the connection ends.</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts</b>
<i>Optional</i>
</dt>
<dd>opt Options</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.interactive</b>
<i>Optional</i>
</dt>
<dd>Is the joint interactive? [default = true]</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.attrs</b>
<i>Optional</i>
</dt>
<dd>Connection options (see Raphael possible parameters)</dd>
<dt>
<span class="light fixedFont">{string}</span> <b>opts.cursor</b>
<i>Optional</i>
</dt>
<dd>Connection CSS cursor property</dd>
<dt>
<span class="light fixedFont">{boolean}</span> <b>opts.beSmooth</b>
<i>Optional</i>
</dt>
<dd>Connection enable/disable smoothing</dd>
<dt>
<span class="light fixedFont">{string|array}</span> <b>opts.label</b>
<i>Optional</i>
</dt>
<dd>Connection label(s)</dd>
<dt>
<span class="light fixedFont">{object|array}</span> <b>opts.labelAttrs</b>
<i>Optional</i>
</dt>
<dd>Label(s) options (see Raphael possible parameters) + position attribute (<0, [0, 1], >1)</dd>
<dt>
<span class="light fixedFont">{object|array}</span> <b>opts.labelBoxAttrs</b>
<i>Optional</i>
</dt>
<dd>SVG Attributes of the label(s) bounding rectangle + padding attribute</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.startArrow</b>
<i>Optional</i>
</dt>
<dd>Start arrow options</dd>
<dt>
<span class="light fixedFont">{string}</span> <b>opts.startArrow.type</b>
<i>Optional</i>
</dt>
<dd>"none"|"basic"</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.startArrow.size</b>
<i>Optional</i>
</dt>
<dd>Start arrow size</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.startArrow.attrs</b>
<i>Optional</i>
</dt>
<dd>Start Arrow options (see Raphael possible parameters)</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.endArrow</b>
<i>Optional</i>
</dt>
<dd>End arrow options</dd>
<dt>
<span class="light fixedFont">{string}</span> <b>opts.endArrow.type</b>
<i>Optional</i>
</dt>
<dd>"none"|"basic"</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.endArrow.size</b>
<i>Optional</i>
</dt>
<dd>End arrow size</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.endArrow.attrs</b>
<i>Optional</i>
</dt>
<dd>End Arrow options (see Raphael possible parameters)</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.dummy</b>
<i>Optional</i>
</dt>
<dd>Dummy node options (shows when dragging arrows)</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.dummy.start</b>
<i>Optional</i>
</dt>
<dd>Start dummy node options</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.dummy.start.radius</b>
<i>Optional</i>
</dt>
<dd>Start dummy radius</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.dummy.start.attrs</b>
<i>Optional</i>
</dt>
<dd>Start dummy options (see Raphael possible parameters)</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.dummy.end</b>
<i>Optional</i>
</dt>
<dd>End dummy node options</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.dummy.end.radius</b>
<i>Optional</i>
</dt>
<dd>End dummy radius</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.dummy.end.attrs</b>
<i>Optional</i>
</dt>
<dd>End dummy options (see Raphael possible parameters)</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.handle</b>
<i>Optional</i>
</dt>
<dd>Handle options</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.handle.timeout</b>
<i>Optional</i>
</dt>
<dd>Number of milliseconds handle stays shown</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.handle.start</b>
<i>Optional</i>
</dt>
<dd>Start handle options</dd>
<dt>
<span class="light fixedFont">{boolean}</span> <b>opts.handle.start.enabled</b>
<i>Optional</i>
</dt>
<dd>Start handle enabled/disabled</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.handle.start.radius</b>
<i>Optional</i>
</dt>
<dd>Start handle radius</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.handle.start.attrs</b>
<i>Optional</i>
</dt>
<dd>Start handle attributes (see Raphael possible parameters)</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.handle.end</b>
<i>Optional</i>
</dt>
<dd>End handle options</dd>
<dt>
<span class="light fixedFont">{boolean}</span> <b>opts.handle.end.enabled</b>
<i>Optional</i>
</dt>
<dd>End handle enabled/disabled</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.handle.end.radius</b>
<i>Optional</i>
</dt>
<dd>End handle radius</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.handle.end.attrs</b>
<i>Optional</i>
</dt>
<dd>End handle attributes (see Raphael possible parameters)</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.bboxCorrection</b>
<i>Optional</i>
</dt>
<dd>Correction of a bounding box (useful when, e.g., the connection should start in the center of an object)</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.bboxCorrection.start</b>
<i>Optional</i>
</dt>
<dd>BBox correction of the start object.</dd>
<dt>
<span class="light fixedFont">{string}</span> <b>opts.bboxCorrection.start.type</b>
<i>Optional</i>
</dt>
<dd>"ellipse"|"rect"</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.bboxCorrection.start.x</b>
<i>Optional</i>
</dt>
<dd>Translation in the x-axis</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.bboxCorrection.start.y</b>
<i>Optional</i>
</dt>
<dd>Translation in the y-axis</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.bboxCorrection.start.width</b>
<i>Optional</i>
</dt>
<dd>BBox width</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.bboxCorrection.start.height</b>
<i>Optional</i>
</dt>
<dd>BBox height</dd>
<dt>
<span class="light fixedFont">{object}</span> <b>opts.bboxCorrection.end</b>
<i>Optional</i>
</dt>
<dd>BBox correction of the end object.</dd>
<dt>
<span class="light fixedFont">{string}</span> <b>opts.bboxCorrection.end.type</b>
<i>Optional</i>
</dt>
<dd>"ellipse"|"rect"</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.bboxCorrection.end.x</b>
<i>Optional</i>
</dt>
<dd>Translation in the x-axis</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.bboxCorrection.end.y</b>
<i>Optional</i>
</dt>
<dd>Translation in the y-axis</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.bboxCorrection.end.width</b>
<i>Optional</i>
</dt>
<dd>BBox width</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>opts.bboxCorrection.end.height</b>
<i>Optional</i>
</dt>
<dd>BBox height</dd>
</dl>
</div>
<!-- ============================== field details ========================== -->
<!-- ============================== method details ========================= -->
<div class="sectionTitle">
Method Detail
</div>
<a name="compact"> </a>
<div class="fixedFont">
<span class="light">{Object}</span>
<b>compact</b>()
</div>
<div class="description">
Returns compact object representation of joint. Used for serialization.
<br />
<i>Defined in: </i> <a href="../symbols/src/src_joint.dia.serializer.js.html">joint.dia.serializer.js</a>.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Object}</span> Compact representation of the joint.</dd>
</dl>
<hr />
<a name="disconnect"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>disconnect</b>(cap)
</div>
<div class="description">
Disconnects joint from objects.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{string}</span> <b>cap</b>
</dt>
<dd>"start|end|both" which side to disconnect</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> return this to allow chaining</dd>
</dl>
<hr />
<a name="euid"> </a>
<div class="fixedFont">
<span class="light">{String}</span>
<b>euid</b>()
</div>
<div class="description">
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{String}</span> Joint unique identifier.</dd>
</dl>
<hr />
<a name="getVertices"> </a>
<div class="fixedFont">
<span class="light">{array}</span>
<b>getVertices</b>()
</div>
<div class="description">
Get connection vertices.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{array}</span> array of connection vertices</dd>
</dl>
<hr />
<a name="hideHandle"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>hideHandle</b>(cap)
</div>
<div class="description">
Hide handle.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>cap</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<hr />
<a name="highlight"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>highlight</b>(color)
</div>
<div class="description">
Highlight connection.
Note that highlight diseappears after the first update.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>color</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> Return this.</dd>
</dl>
<hr />
<a name="isSmooth"> </a>
<div class="fixedFont">
<span class="light">{boolean}</span>
<b>isSmooth</b>()
</div>
<div class="description">
Find out whether the connection is smooth or not.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{boolean}</span> true if connection is smooth</dd>
</dl>
<hr />
<a name="label"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>label</b>(str)
</div>
<div class="description">
Set a label of the connection.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{string|array}</span> <b>str</b>
</dt>
<dd>label(s)</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<hr />
<a name=".paper"> </a>
<div class="fixedFont"><static>
<span class="light">{Raphael}</span>
<span class="light">Joint.</span><b>paper</b>(p)
</div>
<div class="description">
Set a paper for graphics rendering.
</div>
<pre class="code">// create paper from existing HTMLElement with id "world" specifying width and height
Joint.paper("world", 640, 480);
// create paper specifying x, y position and width and height
Joint.paper(50, 50, 640, 480);
// paper is created from the HTMLElement with id "world"
Joint.paper(document.getElementById("world"));
// create paper using Raphael
Joint.paper(Raphael("world", 640, 480));</pre>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{Raphael|number|number|number|number|string|number|number|HTMLElement}</span> <b>p</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{Raphael}</span> Paper.</dd>
</dl>
<hr />
<a name="register"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>register</b>(obj, cap)
</div>
<div class="description">
Register object(s) so that it can be pointed by my cap.
</div>
<pre class="code">j.register(circle, "end")</pre>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{RaphaelObject|Shape|array}</span> <b>obj</b>
</dt>
<dd></dd>
<dt>
<span class="light fixedFont">{string}</span> <b>cap</b>
</dt>
<dd>"start|end|both" cap to register default: "both"</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<hr />
<a name="registerCallback"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>registerCallback</b>(evt, fnc)
</div>
<div class="description">
Register callback function on various events.
</div>
<pre class="code">j.registerCallback("justConnected", function(side){ ... this points to the object the joint was just connected to ... });
j.registerCallback("disconnected", function(side){ ... this points to the object the joint was just disconnected from ... });
j.registerCallback("justBroken", function(mousePos){ ... this points to the joint object ... });
j.registerCallback("wiring", function(mousePos){ ... this points to the joint object ... });
j.registerCallback("objectMoving", function(obj){ ... this points to the joint object ... });
j.registerCallback("justConnected", function(side){
if (side === "start"){
console.log("Start cap connected.");
} else { // side === "end"
console.log("End cap connected");
}
});</pre>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{string}</span> <b>evt</b>
</dt>
<dd>"justConnected"|"disconnected"|"justBroken"|"wiring"|"objectMoving"</dd>
<dt>
<b>fnc</b>
</dt>
<dd>Callback</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<dl class="detailList">
<dt class="heading">See:</dt>
<dd>Callbacks</dd>
</dl>
<hr />
<a name="registeredObjects"> </a>
<div class="fixedFont">
<span class="light">{array}</span>
<b>registeredObjects</b>()
</div>
<div class="description">
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{array}</span> Registered Objects.</dd>
</dl>
<hr />
<a name="registerForever"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>registerForever</b>(arr)
</div>
<div class="description">
The difference between register and registerForever is that registerForever
saves reference to an array passed as argument. It means that all objects pushed
into the array before and/or after the call of this method will be registered (for both caps).
This method is useful for applications that do not know to which objects the connection
can be sticked when the joint is created.
</div>
<pre class="code">var all = [];
j.registerForever(all);
// ... create objects and push them into all array</pre>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{array}</span> <b>arr</b>
</dt>
<dd>An array holding objects which the joint is going to be registered to.</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<hr />
<a name=".resetPaper"> </a>
<div class="fixedFont"><static>
<span class="light">Joint.</span><b>resetPaper</b>()
</div>
<div class="description">
Clear paper, reset again.
</div>
<pre class="code">// create paper from existing HTMLElement with id "world" specifying width and height
Joint.paper("world", 640, 480);
// ... draw objects, diagrams, etc. ...
Joint.resetPaper();
// paper is clear and ready for next usage</pre>
<hr />
<a name="setBBoxCorrection"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>setBBoxCorrection</b>(corr, cap)
</div>
<div class="description">
Set bounding box correction.
This advanced feature of Joint library allows you to shift a point to which a connection sticks.
You can for example modify a connection to point to the center of an object or you can set a distance
between an object and a connection arrow.
</div>
<pre class="code">// 1.) both sides of the connection will point to the center of
// a circular object with radius == 30
j.setBBoxCorrection({
type: "ellipse",
x: 30,
y: 30,
width: -60,
height: -60
});
// 2.) keep 20px distance between connection's arrow
// and a circular object
j.setBBoxCorrection({
type: "ellipse",
x: -20,
y: -20,
width: 40,
height: 40
});</pre>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{object}</span> <b>corr</b>
<i>Optional</i>
</dt>
<dd>correction Correction</dd>
<dt>
<span class="light fixedFont">{string}</span> <b>corr.type</b>
<i>Optional</i>
</dt>
<dd>fake type of an object to which a cap points</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>corr.x</b>
<i>Optional</i>
</dt>
<dd>x-axis shift of an object bounding box</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>corr.y</b>
<i>Optional</i>
</dt>
<dd>y-axis shift of an object bounding box</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>corr.width</b>
<i>Optional</i>
</dt>
<dd>change in an object bounding box width (can be negative)</dd>
<dt>
<span class="light fixedFont">{number}</span> <b>corr.height</b>
<i>Optional</i>
</dt>
<dd>change in an object bounding box height (can be negative)</dd>
<dt>
<span class="light fixedFont">{string}</span> <b>cap</b>
</dt>
<dd>"start|end"|undefined cap (undefined === both caps)</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<hr />
<a name="setVertices"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>setVertices</b>(vertices)
</div>
<div class="description">
Set the vertices of the connection
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{array}</span> <b>vertices</b>
</dt>
<dd>Array of points (vertices) - either of the form: {x: 5, y; 10} or "5 10" or "5@10"</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<hr />
<a name="showHandle"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>showHandle</b>(cap)
</div>
<div class="description">
Show handle.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<b>cap</b>
</dt>
<dd></dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<hr />
<a name="straighten"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>straighten</b>()
</div>
<div class="description">
Straighten the bent connection path.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<hr />
<a name="stringify"> </a>
<div class="fixedFont">
<span class="light">{String}</span>
<b>stringify</b>()
</div>
<div class="description">
<br />
<i>Defined in: </i> <a href="../symbols/src/src_joint.dia.serializer.js.html">joint.dia.serializer.js</a>.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{String}</span> JSON representation of joint.</dd>
</dl>
<hr />
<a name="toggleHandle"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>toggleHandle</b>(cap)
</div>
<div class="description">
Show/hide handle(s).
If a connection arrow is, e.g., of type none, it is difficult to grab the end of the connection.
For these cases, you can use handles, which are just simple circles showing at the end of a connection.
</div>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{string}</span> <b>cap</b>
</dt>
<dd>&optional [start|end] Specifies on what side handle should be shown.</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<hr />
<a name="toggleSmoothing"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>toggleSmoothing</b>()
</div>
<div class="description">
Toggle the connection smoothing (bezier/straight).
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<hr />
<a name="unhighlight"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>unhighlight</b>()
</div>
<div class="description">
Unhighlight connection.
</div>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> Return this.</dd>
</dl>
<hr />
<a name="unregister"> </a>
<div class="fixedFont">
<span class="light">{<a href="../symbols/Joint.html">Joint</a>}</span>
<b>unregister</b>(obj, cap)
</div>
<div class="description">
Cancel registration of an object.
</div>
<pre class="code">j.unregister(circle, "end");</pre>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{RaphaelObject|Shape}</span> <b>obj</b>
</dt>
<dd></dd>
<dt>
<span class="light fixedFont">{string}</span> <b>cap</b>
</dt>
<dd>"start|end|both" cap to unregister default: "both"</dd>
</dl>
<dl class="detailList">
<dt class="heading">Returns:</dt>
<dd><span class="light fixedFont">{<a href="../symbols/Joint.html">Joint</a>}</span> </dd>
</dl>
<!-- ============================== event details ========================= -->
<hr />
</div>
<!-- ============================== footer ================================= -->
<div class="fineprint" style="clear:both">
JointJS - JavaScript diagramming library, © David Durman, 2009 - 2011
</div>
</body>
</html>