<!-- saved from url=(0026)http://www.naturaldocs.org -->
<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><h1class=CTitle><aname="mxEdgeStyle"></a>mxEdgeStyle</h1><divclass=CBody><p>Provides various edge styles to be used as the values for <ahref="../util/mxConstants-js.html#mxConstants.STYLE_EDGE"class=LVariableid=link11onMouseOver="ShowTip(event, 'tt1', 'link11')"onMouseOut="HideTip('tt1')">mxConstants.STYLE_EDGE</a> in a cell style.</p><h4class=CHeading>Example</h4><blockquote><preclass="prettyprint">var style = stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;</pre></blockquote><p>Sets the default edge style to <ahref="#mxEdgeStyle.ElbowConnector"class=LFunctionid=link12onMouseOver="ShowTip(event, 'tt4', 'link12')"onMouseOut="HideTip('tt4')">ElbowConnector</a>.</p><h4class=CHeading>Custom edge style</h4><p>To write a custom edge style, a function must be added to the mxEdgeStyle object as follows:</p><blockquote><preclass="prettyprint">mxEdgeStyle.MyStyle = function(state, source, target, points, result)
{
if (source != null && target != null)
{
var pt = new mxPoint(target.getCenterX(), source.getCenterY());
if (mxUtils.contains(source, pt.x, pt.y))
{
pt.y = source.y + source.height;
}
result.push(pt);
}
};</pre></blockquote><p>In the above example, a right angle is created using a point on the horizontal center of the target vertex and the vertical center of the source vertex. The code checks if that point intersects the source vertex and makes the edge straight if it does. The point is then added into the result array, which acts as the return value of the function.</p><h4class=CHeading>The new edge style should then be registered in the <ahref="mxStyleRegistry-js.html#mxStyleRegistry"class=LClassid=link13onMouseOver="ShowTip(event, 'tt9', 'link13')"onMouseOut="HideTip('tt9')">mxStyleRegistry</a> as follows</h4><blockquote><preclass="prettyprint">mxStyleRegistry.putValue('myEdgeStyle', mxEdgeStyle.MyStyle);</pre></blockquote><h4class=CHeading>The custom edge style above can now be used in a specific edge as follows</h4><blockquote><preclass="prettyprint">model.setStyle(edge, 'edgeStyle=myEdgeStyle');</pre></blockquote><p>Note that the key of the <ahref="mxStyleRegistry-js.html#mxStyleRegistry"class=LClassid=link14onMouseOver="ShowTip(event, 'tt9', 'link14')"onMouseOut="HideTip('tt9')">mxStyleRegistry</a> entry for the function should be used in string values, unless <ahref="mxGraphView-js.html#mxGraphView.allowEval"class=LVariableid=link15onMouseOver="ShowTip(event, 'tt10', 'link15')"onMouseOut="HideTip('tt10')">mxGraphView.allowEval</a> is true, in which case you can also use mxEdgeStyle.MyStyle for the value in the cell style above.</p><h4class=CHeading>Or it can be used for all edges in the graph as follows</h4><blockquote><preclass="prettyprint">var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.MyStyle;</pre></blockquote><p>Note that the object can be used directly when programmatically setting the value, but the key in the <ahref="mxStyleRegistry-js.html#mxStyleRegistry"class=LClassid=link16onMouseOver="ShowTip(event, 'tt9', 'link16')"onMouseOut="HideTip('tt9')">mxStyleRegistry</a> should be used when setting the value via a key, value pair in a cell style.</p><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#mxEdgeStyle">mxEdgeStyle</a></td><tdclass=SDescription>Provides various edge styles to be used as the values for <ahref="../util/mxConstants-js.html#mxConstants.STYLE_EDGE"class=LVariableid=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">mxConstants.STYLE_EDGE</a> in a cell style.</td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxEdgeStyle.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxEdgeStyle.EntityRelation"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">EntityRelation</a></td><tdclass=SDescription>Implements an entity relation style for edges (as used in database schema diagrams). </td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#mxEdgeStyle.Loop"id=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">Loop</a></td><tdclass=SDescription>Implements a self-reference, aka. </td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxEdgeStyle.ElbowConnector"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">ElbowConnector</a></td><tdclass=SDescription>Uses either <ahref="#mxEdgeStyle.SideToSide"class=LFunctionid=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">SideToSide</a> or <ahref="#mxEdgeStyle.TopToBottom"class=LFunctionid=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">TopToBottom</a> depending on the horizontal flag in the cell style. </td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#mxEdgeStyle.SideToSide"id=link7onMouseOver="ShowTip(event, 'tt5', 'link7')"onMouseOut="HideTip('tt5')">SideToSide</a></td><tdclass=SDescription>Implements a vertical elbow edge. </td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxEdgeStyle.TopToBottom"id=link8onMouseOver="ShowTip(event, 'tt6', 'link8')"onMouseOut="HideTip('tt6')">TopToBottom</a></td><tdclass=SDescription>Implements a horizontal elbow edge. </td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#mxEdgeStyle.SegmentConnector"id=link9onMouseOver="ShowTip(event, 'tt7', 'link9')"onMouseOut="HideTip('tt7')">SegmentConnector</a></td><tdclass=SDescription>Implements an orthogonal edge style. </td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxEdgeStyle.OrthConnector"id=link10onMouseOver="ShowTip(event, 'tt8', 'link10')"onMouseOut="HideTip('tt8')">OrthConnector</a></td><tdclass=SDescription>Implements a local orthogonal router between the given cells.</td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxEdgeStyle.EntityRelation"></a>EntityRelation</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>EntityRelation: function (</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>source,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>target,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>points,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>result</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Implements an entity relation style for edges (as used in database schema diagrams). At the time the function is called, the result array contains a placeholder (null) for the first absolute point, that is, the point where the edge and source terminal are connected. The implementation of the style then adds all intermediate waypoints except for the last point, that is, the connection point between the edge and the target terminal. The first ant the last point in the result array are then replaced with mxPoints that take into account the terminal’s perimeter and next point on the edge.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>state</td><tdclass=CDLDescription><ahref="mxCellState-js.html#mxCellState"class=LClassid=link17onMouseOver="ShowTip(event, 'tt11', 'link17')"onMouseOut="HideTip('tt11')">mxCellState</a> that represents the edge to be updated.</td></tr><tr><tdclass=CDLEntry>source</td><tdclass=CDLDescription><ahref="mxCellState-js.html#mxCellState"class=LClassid=link18onMouseOver="ShowTip(event, 'tt11', 'link18')"onMouseOut="HideTip('tt11')">mxCellState</a> that represents the source terminal.</td></tr><tr><tdclass=CDLEntry>target</td><tdclass=CDLDescription><ahref="mxCellState-js.html#mxCellState"class=LClassid=link19onMouseOver="ShowTip(event, 'tt11', 'link19')"onMouseOut="HideTip('tt11')">mxCellState</a> that represents the target terminal.</td></tr><tr><tdclass=CDLEntry>points</td><tdclass=CDLDescription>List of relative control points.</td></tr><tr><tdclass=CDLEntry>result</td><tdclass=CDLDescription>Array of <ahref="../util/mxPoint-js.html#mxPoint"class=LClassid=link20onMouseOver="ShowTip(event, 'tt12', 'link20')"onMouseOut="HideTip('tt12')">mxPoints</a> that represent the actual points of the edge.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxEdgeStyle.ElbowConnector"></a>ElbowConnector</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>ElbowConnector: function (</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>source,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>target,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>points,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>result</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Uses either <ahref="#mxEdgeStyle.SideToSide"class=LFunctionid=link21onMouseOver="ShowTip(event, 'tt5', 'link21')"onMouseOut="HideTip('tt5')">SideToSide</a> or <ahref="#mxEdgeStyle.TopToBottom"class=LFunctionid=link22onMouseOver="ShowTip(event, 'tt6', 'link22')"onMouseOut="HideTip('tt6')">TopToBottom</a> depending on the horizontal flag in the cell style. <ahref="#mxEdgeStyle.SideToSide"class=LFunctionid=link23onMouseOver="ShowTip(event, 'tt5', 'link23')"onMouseOut="HideTip('tt5')">SideToSide</a> is used if horizontal is true or unspecified. See <ahref="#mxEdgeStyle.EntityRelation"class=LFunctionid=link24onMouseOver="ShowTip(event, 'tt2', 'link24')"onMouseOut="HideTip('tt2')">EntityRelation</a> for a description of the parameters.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxEdgeStyle.SideToSide"></a>SideToSide</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>SideToSide: function (</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>source,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>target,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>points,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>result</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Implements a vertical elbow edge. See <ahref="#mxEdgeStyle.EntityRelation"class=LFunctionid=link25onMouseOver="ShowTip(event, 'tt2', 'link25')"onMouseOut="HideTip('tt2')">EntityRelation</a> for a description of the parameters.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxEdgeStyle.TopToBottom"></a>TopToBottom</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>TopToBottom: function(</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>source,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>target,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>points,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>result</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Implements a horizontal elbow edge. See <ahref="#mxEdgeStyle.EntityRelation"class=LFunctionid=link26onMouseOver="ShowTip(event, 'tt2', 'link26')"onMouseOut="HideTip('tt2')">EntityRelation</a> for a description of the parameters.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxEdgeStyle.SegmentConnector"></a>SegmentConnector</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>SegmentConnector: function(</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>source,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>target,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>hints,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>result</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Implements an orthogonal edge style. Use <mxEdgeSegmentHandler> as an interactive handler for this style.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxEdgeStyle.OrthConnector"></a>OrthConnector</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>OrthConnector: function(</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>source,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>target,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>points,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>result</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Implements a local orthogonal router between the given cells.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>state</td><tdclass=CDLDescription><ahref="mxCellState-js.html#mxCellState"class=LClassid=link27onMouseOver="ShowTip(event, 'tt11', 'link27')"onMouseOut="HideTip('tt11')">mxCellState</a> that represents the edge to be updated.</td></tr><tr><tdclass=CDLEntry>source</td><tdclass=CDLDescription><ahref="mxCellState-js.html#mxCellState"class=LClassid=link28onMouseOver="ShowTip(event, 'tt11', 'link28')"onMouseOut="HideTip('tt11')">mxCellState</a> that represents the source terminal.</td></tr><tr><tdclass=CDLEntry>target</td><tdclass=CDLDescription><ahref="mxCellState-js.html#mxCellState"class=LClassid=link29onMouseOver="ShowTip(event, 'tt11', 'link29')"onMouseOut="HideTip('tt11')">mxCellState</a> that represents the target terminal.</td></tr><tr><tdclass=CDLEntry>points</td><tdclass=CDLDescription>List of relative control points.</td></tr><tr><tdclass=CDLEntry>result</td><tdclass=CDLDescription>Array of <ahref="../util/mxPoint-js.html#mxPoint"class=LClassid=link30onMouseOver="ShowTip(event, 'tt12', 'link30')"onMouseOut="HideTip('tt12')">mxPoints</a> that represent the actual points of the edge.</td></tr></table></div></div></div>
