<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><h1class=CTitle><aname="mxConnectionHandler"></a>mxConnectionHandler</h1><divclass=CBody><p>Graph event handler that creates new connections. Uses <mxTerminalMarker> for finding and highlighting the source and target vertices and <ahref="#mxConnectionHandler.factoryMethod"class=LVariableid=link101onMouseOver="ShowTip(event, 'tt6', 'link101')"onMouseOut="HideTip('tt6')">factoryMethod</a> to create the edge instance. This handler is built-into <mxGraph.connectionHandler> and enabled using <ahref="../view/mxGraph-js.html#mxGraph.setConnectable"class=LFunctionid=link102onMouseOver="ShowTip(event, 'tt81', 'link102')"onMouseOut="HideTip('tt81')">mxGraph.setConnectable</a>.</p><h4class=CHeading>Example</h4><blockquote><preclass="prettyprint">new mxConnectionHandler(graph, function(source, target, style)
});</pre></blockquote><p>Here is an alternative solution that just sets a specific user object for new edges by overriding <ahref="#mxConnectionHandler.insertEdge"class=LFunctionid=link103onMouseOver="ShowTip(event, 'tt77', 'link103')"onMouseOut="HideTip('tt77')">insertEdge</a>.</p><blockquote><preclass="prettyprint">mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
};</pre></blockquote><h4class=CHeading>Using images to trigger connections</h4><p>This handler uses mxTerminalMarker to find the source and target cell for the new connection and creates a new edge using <ahref="#mxConnectionHandler.connect"class=LFunctionid=link104onMouseOver="ShowTip(event, 'tt1', 'link104')"onMouseOut="HideTip('tt1')">connect</a>. The new edge is created using <ahref="#mxConnectionHandler.createEdge"class=LFunctionid=link105onMouseOver="ShowTip(event, 'tt79', 'link105')"onMouseOut="HideTip('tt79')">createEdge</a> which in turn uses <ahref="#mxConnectionHandler.factoryMethod"class=LVariableid=link106onMouseOver="ShowTip(event, 'tt6', 'link106')"onMouseOut="HideTip('tt6')">factoryMethod</a> or creates a new default edge.</p><p>The handler uses a “highlight-paradigm” for indicating if a cell is being used as a source or target terminal, as seen in other diagramming products. In order to allow both, moving and connecting cells at the same time, <ahref="../util/mxConstants-js.html#mxConstants.DEFAULT_HOTSPOT"class=LVariableid=link107onMouseOver="ShowTip(event, 'tt82', 'link107')"onMouseOut="HideTip('tt82')">mxConstants.DEFAULT_HOTSPOT</a> is used in the handler to determine the hotspot of a cell, that is, the region of the cell which is used to trigger a new connection. The constant is a value between 0 and 1 that specifies the amount of the width and height around the center to be used for the hotspot of a cell and its default value is 0.5. In addition, <ahref="../util/mxConstants-js.html#mxConstants.MIN_HOTSPOT_SIZE"class=LVariableid=link108onMouseOver="ShowTip(event, 'tt83', 'link108')"onMouseOut="HideTip('tt83')">mxConstants.MIN_HOTSPOT_SIZE</a> defines the minimum number of pixels for the width and height of the hotspot.</p><p>This solution, while standards compliant, may be somewhat confusing because there is no visual indicator for the hotspot and the highlight is seen to switch on and off while the mouse is being moved in and out. Furthermore, this paradigm does not allow to create different connections depending on the highlighted hotspot as there is only one hotspot per cell and it normally does not allow cells to be moved and connected at the same time as there is no clear indication of the connectable area of the cell.</p><p>To come across these issues, the handle has an additional <ahref="#mxConnectionHandler.createIcons"class=LFunctionid=link109onMouseOver="ShowTip(event, 'tt53', 'link109')"onMouseOut="HideTip('tt53')">createIcons</a> hook with a default implementation that allows to create one icon to be used to trigger new connections. If this icon is specified, then new connections can only be created if the image is clicked while the cell is being highlighted. The <ahref="#mxConnectionHandler.createIcons"class=LFunctionid=link110onMouseOver="ShowTip(event, 'tt53', 'link110')"onMouseOut="HideTip('tt53')">createIcons</a> hook may be overridden to create more than one <ahref="../shape/mxImageShape-js.html#mxImageShape"class=LClassid=link111onMouseOver="ShowTip(event, 'tt54', 'link111')"onMouseOut="HideTip('tt54')">mxImageShape</a> for creating new connections, but the default implementation supports one image and is used as follows:</p><p>In order to display the “connect image” whenever the mouse is over the cell, an DEFAULT_HOTSPOT of 1 should be used:</p><blockquote><preclass="prettyprint">mxConstants.DEFAULT_HOTSPOT = 1;</pre></blockquote><p>In order to avoid confusion with the highlighting, the highlight color should not be used with a connect image:</p><blockquote><preclass="prettyprint">mxConstants.HIGHLIGHT_COLOR = null;</pre></blockquote><p>To install the image, the connectImage field of the mxConnectionHandler must be assigned a new <ahref="../util/mxImage-js.html#mxImage"class=LClassid=link112onMouseOver="ShowTip(event, 'tt10', 'link112')"onMouseOut="HideTip('tt10')">mxImage</a> instance:</p><blockquote><preclass="prettyprint">mxConnectionHandler.prototype.connectImag
<divclass="CEvent"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.mxEvent.START"></a>mxEvent.<wbr>START</h3><divclass=CBody><p>Fires when a new connection is being created by the user. The <code>state</code> property contains the state of the source cell.</p></div></div></div>
<divclass="CEvent"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.mxEvent.CONNECT"></a>mxEvent.<wbr>CONNECT</h3><divclass=CBody><p>Fires between begin- and endUpdate in <ahref="#mxConnectionHandler.connect"class=LFunctionid=link113onMouseOver="ShowTip(event, 'tt1', 'link113')"onMouseOut="HideTip('tt1')">connect</a>. The <code>cell</code> property contains the inserted edge, the <code>event</code> and <code>target</code> properties contain the respective arguments that were passed to <ahref="#mxConnectionHandler.connect"class=LFunctionid=link114onMouseOver="ShowTip(event, 'tt1', 'link114')"onMouseOut="HideTip('tt1')">connect</a> (where target corresponds to the dropTarget argument). Finally, the <code>terminal</code> property corresponds to the target argument in <ahref="#mxConnectionHandler.connect"class=LFunctionid=link115onMouseOver="ShowTip(event, 'tt1', 'link115')"onMouseOut="HideTip('tt1')">connect</a> or the clone of the source terminal if <ahref="#mxConnectionHandler.createTarget"class=LVariableid=link116onMouseOver="ShowTip(event, 'tt14', 'link116')"onMouseOut="HideTip('tt14')">createTarget</a> is enabled.</p><p>Note that the target is the cell under the mouse where the mouse button was released. Depending on the logic in the handler, this doesn’t necessarily have to be the target of the inserted edge. To print the source, target or any optional ports IDs that the edge is connected to, the following code can be used. To get more details about the actual connection point, <ahref="../view/mxGraph-js.html#mxGraph.getConnectionConstraint"class=LFunctionid=link117onMouseOver="ShowTip(event, 'tt84', 'link117')"onMouseOut="HideTip('tt84')">mxGraph.getConnectionConstraint</a> can be used. To resolve the port IDs, use <ahref="../model/mxGraphModel-js.html#mxGraphModel.getCell"class=LFunctionid=link118onMouseOver="ShowTip(event, 'tt85', 'link118')"onMouseOut="HideTip('tt85')">mxGraphModel.getCell</a>.</p><blockquote><preclass="prettyprint">graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt)
<divclass="CEvent"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.mxEvent.RESET"></a>mxEvent.<wbr>RESET</h3><divclass=CBody><p>Fires when the <ahref="#mxConnectionHandler.reset"class=LFunctionid=link119onMouseOver="ShowTip(event, 'tt2', 'link119')"onMouseOut="HideTip('tt2')">reset</a> method is invoked.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.mxConnectionHandler"></a>mxConnectionHandler</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>function mxConnectionHandler(</td><tdclass="PParameter prettyprint "nowrap>graph,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>factoryMethod</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Constructs an event handler that connects vertices using the specified factory method to create the new edges. Modify <mxConstants.ACTIVE_REGION> to setup the region on a cell which triggers the creation of a new connection or use connect icons as explained above.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>graph</td><tdclass=CDLDescription>Reference to the enclosing <ahref="../view/mxGraph-js.html#mxGraph"class=LClassid=link120onMouseOver="ShowTip(event, 'tt5', 'link120')"onMouseOut="HideTip('tt5')">mxGraph</a>.</td></tr><tr><tdclass=CDLEntry>factoryMethod</td><tdclass=CDLDescription>Optional function to create the edge. The function takes the source and target <ahref="../model/mxCell-js.html#mxCell"class=LClassid=link121onMouseOver="ShowTip(event, 'tt86', 'link121')"onMouseOut="HideTip('tt86')">mxCell</a> as the first and second argument and an optional cell style from the preview as the third argument. It returns the <ahref="../model/mxCell-js.html#mxCell"class=LClassid=link122onMouseOver="ShowTip(event, 'tt86', 'link122')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the new edge.</td></tr></table></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.graph"></a>graph</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.graph</td></tr></table></blockquote><p>Reference to the enclosing <ahref="../view/mxGraph-js.html#mxGraph"class=LClassid=link123onMouseOver="ShowTip(event, 'tt5', 'link123')"onMouseOut="HideTip('tt5')">mxGraph</a>.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.factoryMethod"></a>factoryMethod</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.factoryMethod</td></tr></table></blockquote><p>Function that is used for creating new edges. The function takes the source and target <ahref="../model/mxCell-js.html#mxCell"class=LClassid=link124onMouseOver="ShowTip(event, 'tt86', 'link124')"onMouseOut="HideTip('tt86')">mxCell</a> as the first and second argument and returns a new <ahref="../model/mxCell-js.html#mxCell"class=LClassid=link125onMouseOver="ShowTip(event, 'tt86', 'link125')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the edge. This is used in <ahref="#mxConnectionHandler.createEdge"class=LFunctionid=link126onMouseOver="ShowTip(event, 'tt79', 'link126')"onMouseOut="HideTip('tt79')">createEdge</a>.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.moveIconFront"></a>moveIconFront</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.moveIconFront</td></tr></table></blockquote><p>Specifies if icons should be displayed inside the graph container instead of the overlay pane. This is used for HTML labels on vertices which hide the connect icon. This has precendence over <ahref="#mxConnectionHandler.moveIconBack"class=LVariableid=link127onMouseOver="ShowTip(event, 'tt8', 'link127')"onMouseOut="HideTip('tt8')">moveIconBack</a> when set to true. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.moveIconBack"></a>moveIconBack</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.moveIconBack</td></tr></table></blockquote><p>Specifies if icons should be moved to the back of the overlay pane. This can be set to true if the icons of the connection handler conflict with other handles, such as the vertex label move handle. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.connectImage"></a>connectImage</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.connectImage</td></tr></table></blockquote><p><ahref="../util/mxImage-js.html#mxImage"class=LClassid=link128onMouseOver="ShowTip(event, 'tt10', 'link128')"onMouseOut="HideTip('tt10')">mxImage</a> that is used to trigger the creation of a new connection. This is used in <ahref="#mxConnectionHandler.createIcons"class=LFunctionid=link129onMouseOver="ShowTip(event, 'tt53', 'link129')"onMouseOut="HideTip('tt53')">createIcons</a>. Default is null.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.targetConnectImage"></a>targetConnectImage</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.targetConnectImage</td></tr></table></blockquote><p>Specifies if the connect icon should be centered on the target state while connections are being previewed. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.enabled"></a>enabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.enabled</td></tr></table></blockquote><p>Specifies if events are handled. Default is true.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.select"></a>select</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.select</td></tr></table></blockquote><p>Specifies if new edges should be selected. Default is true.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.createTarget"></a>createTarget</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.createTarget</td></tr></table></blockquote><p>Specifies if <ahref="#mxConnectionHandler.createTargetVertex"class=LFunctionid=link130onMouseOver="ShowTip(event, 'tt15', 'link130')"onMouseOut="HideTip('tt15')">createTargetVertex</a> should be called if no target was under the mouse for the new connection. Setting this to true means the connection will be drawn as valid if no target is under the mouse, and <ahref="#mxConnectionHandler.createTargetVertex"class=LFunctionid=link131onMouseOver="ShowTip(event, 'tt15', 'link131')"onMouseOut="HideTip('tt15')">createTargetVertex</a> will be called before the connection is created between the source cell and the newly created vertex in <ahref="#mxConnectionHandler.createTargetVertex"class=LFunctionid=link132onMouseOver="ShowTip(event, 'tt15', 'link132')"onMouseOut="HideTip('tt15')">createTargetVertex</a>, which can be overridden to create a new target. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.marker"></a>marker</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.marker</td></tr></table></blockquote><p>Holds the <mxTerminalMarker> used for finding source and target cells.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.constraintHandler"></a>constraintHandler</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.constraintHandler</td></tr></table></blockquote><p>Holds the <ahref="mxConstraintHandler-js.html#mxConstraintHandler"class=LClassid=link133onMouseOver="ShowTip(event, 'tt18', 'link133')"onMouseOut="HideTip('tt18')">mxConstraintHandler</a> used for drawing and highlighting constraints.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.error"></a>error</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.error</td></tr></table></blockquote><p>Holds the current validation error while connections are being created.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.waypointsEnabled"></a>waypointsEnabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.waypointsEnabled</td></tr></table></blockquote><p>Specifies if single clicks should add waypoints on the new edge. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.ignoreMouseDown"></a>ignoreMouseDown</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.ignoreMouseDown</td></tr></table></blockquote><p>Specifies if the connection handler should ignore the state of the mouse button when highlighting the source. Default is false, that is, the handler only highlights the source if no button is being pressed.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.first"></a>first</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.first</td></tr></table></blockquote><p>Holds the <ahref="../util/mxPoint-js.html#mxPoint"class=LClassid=link134onMouseOver="ShowTip(event, 'tt23', 'link134')"onMouseOut="HideTip('tt23')">mxPoint</a> where the mouseDown took place while the handler is active.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.connectIconOffset"></a>connectIconOffset</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.connectIconOffset</td></tr></table></blockquote><p>Holds the offset for connect icons during connection preview. Default is mxPoint(0, <ahref="../util/mxConstants-js.html#mxConstants.TOOLTIP_VERTICAL_OFFSET"class=LVariableid=link135onMouseOver="ShowTip(event, 'tt87', 'link135')"onMouseOut="HideTip('tt87')">mxConstants.TOOLTIP_VERTICAL_OFFSET</a>). Note that placing the icon under the mouse pointer with an offset of (0,0) will affect hit detection.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.edgeState"></a>edgeState</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.edgeState</td></tr></table></blockquote><p>Optional <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link136onMouseOver="ShowTip(event, 'tt26', 'link136')"onMouseOut="HideTip('tt26')">mxCellState</a> that represents the preview edge while the handler is active. This is created in <ahref="#mxConnectionHandler.createEdgeState"class=LFunctionid=link137onMouseOver="ShowTip(event, 'tt60', 'link137')"onMouseOut="HideTip('tt60')">createEdgeState</a>.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.changeHandler"></a>changeHandler</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.changeHandler</td></tr></table></blockquote><p>Holds the change event listener for later removal.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.drillHandler"></a>drillHandler</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.drillHandler</td></tr></table></blockquote><p>Holds the drill event listener for later removal.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.mouseDownCounter"></a>mouseDownCounter</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.mouseDownCounter</td></tr></table></blockquote><p>Counts the number of mouseDown events since the start. The initial mouse down event counts as 1.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.movePreviewAway"></a>movePreviewAway</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.movePreviewAway</td></tr></table></blockquote><p>Switch to enable moving the preview away from the mousepointer. This is required in browsers where the preview cannot be made transparent to events and if the built-in hit detection on the HTML elements in the page should be used. Default is the value of <ahref="../mxClient-js.html#mxClient.IS_VML"class=LVariableid=link138onMouseOver="ShowTip(event, 'tt88', 'link138')"onMouseOut="HideTip('tt88')">mxClient.IS_VML</a>.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.outlineConnect"></a>outlineConnect</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.outlineConnect</td></tr></table></blockquote><p>Specifies if connections to the outline of a highlighted target should be enabled. This will allow to place the connection point along the outline of the highlighted target. Default is false.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.livePreview"></a>livePreview</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.livePreview</td></tr></table></blockquote><p>Specifies if the actual shape of the edge state should be used for the preview. Default is false. (Ignored if no edge state is created in <ahref="#mxConnectionHandler.createEdgeState"class=LFunctionid=link139onMouseOver="ShowTip(event, 'tt60', 'link139')"onMouseOut="HideTip('tt60')">createEdgeState</a>.)</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.cursor"></a>cursor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.cursor</td></tr></table></blockquote><p>Specifies the cursor to be used while the handler is active. Default is null.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.insertBeforeSource"></a>insertBeforeSource</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.insertBeforeSource</td></tr></table></blockquote><p>Specifies if new edges should be inserted before the source vertex in the cell hierarchy. Default is false for backwards compatibility.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isEnabled"></a>isEnabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.isEnabled = function()</td></tr></table></blockquote><p>Returns true if events are handled. This implementation returns <ahref="#mxConnectionHandler.enabled"class=LVariableid=link140onMouseOver="ShowTip(event, 'tt12', 'link140')"onMouseOut="HideTip('tt12')">enabled</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.setEnabled"></a>setEnabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.setEnabled = function(</td><tdclass="PParameter prettyprint "nowrap>enabled</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Enables or disables event handling. This implementation updates <ahref="#mxConnectionHandler.enabled"class=LVariableid=link141onMouseOver="ShowTip(event, 'tt12', 'link141')"onMouseOut="HideTip('tt12')">enabled</a>.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>enabled</td><tdclass=CDLDescription>Boolean that specifies the new enabled state.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isInsertBefore"></a>isInsertBefore</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.isInsertBefore = function(</td><tdclass="PParameter prettyprint "nowrap>edge,</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>evt,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>dropTarget</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns <ahref="#mxConnectionHandler.insertBeforeSource"class=LVariableid=link142onMouseOver="ShowTip(event, 'tt34', 'link142')"onMouseOut="HideTip('tt34')">insertBeforeSource</a> for non-loops and false for loops.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>edge</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link143onMouseOver="ShowTip(event, 'tt86', 'link143')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the edge to be inserted.</td></tr><tr><tdclass=CDLEntry>source</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link144onMouseOver="ShowTip(event, 'tt86', 'link144')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the source terminal.</td></tr><tr><tdclass=CDLEntry>target</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link145onMouseOver="ShowTip(event, 'tt86', 'link145')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the target terminal.</td></tr><tr><tdclass=CDLEntry>evt</td><tdclass=CDLDescription>Mousedown event of the connect gesture.</td></tr><tr><tdclass=CDLEntry>dropTarget</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link146onMouseOver="ShowTip(event, 'tt86', 'link146')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the cell under the mouse when it was released.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.createShape"></a>createShape</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.createShape = function()</td></tr></table></blockquote><p>Creates the preview shape for new connections.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.init"></a>init</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.init = function()</td></tr></table></blockquote><p>Initializes the shapes required for this connection handler. This should be invoked if <mxGraph.container> is assigned after the connection handler has been created.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isConnectableCell"></a>isConnectableCell</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.isConnectableCell = function(</td><tdclass="PParameter prettyprint "nowrap>cell</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given cell is connectable. This is a hook to disable floating connections. This implementation returns true.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.createMarker"></a>createMarker</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.createMarker = function()</td></tr></table></blockquote><p>Creates and returns the <ahref="mxCellMarker-js.html#mxCellMarker"class=LClassid=link149onMouseOver="ShowTip(event, 'tt44', 'link149')"onMouseOut="HideTip('tt44')">mxCellMarker</a> used in <ahref="#mxConnectionHandler.marker"class=LVariableid=link150onMouseOver="ShowTip(event, 'tt16', 'link150')"onMouseOut="HideTip('tt16')">marker</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.start"></a>start</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.start = function(</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>x,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>y,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>edgeState</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Starts a new connection for the given state and coordinates.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isConnecting"></a>isConnecting</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.isConnecting = function()</td></tr></table></blockquote><p>Returns true if the source terminal has been clicked and a new connection is currently being previewed.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isValidSource"></a>isValidSource</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.isValidSource = function(</td><tdclass="PParameter prettyprint "nowrap>cell,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns <ahref="../view/mxGraph-js.html#mxGraph.isValidSource"class=LFunctionid=link151onMouseOver="ShowTip(event, 'tt48', 'link151')"onMouseOut="HideTip('tt48')">mxGraph.isValidSource</a> for the given source terminal.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>cell</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link152onMouseOver="ShowTip(event, 'tt86', 'link152')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the source terminal.</td></tr><tr><tdclass=CDLEntry>me</td><tdclass=CDLDescription><ahref="../util/mxMouseEvent-js.html#mxMouseEvent"class=LClassid=link153onMouseOver="ShowTip(event, 'tt89', 'link153')"onMouseOut="HideTip('tt89')">mxMouseEvent</a> that is associated with this call.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isValidTarget"></a>isValidTarget</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.isValidTarget = function(</td><tdclass="PParameter prettyprint "nowrap>cell</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true. The call to <ahref="../view/mxGraph-js.html#mxGraph.isValidTarget"class=LFunctionid=link154onMouseOver="ShowTip(event, 'tt90', 'link154')"onMouseOut="HideTip('tt90')">mxGraph.isValidTarget</a> is implicit by calling <ahref="../view/mxGraph-js.html#mxGraph.getEdgeValidationError"class=LFunctionid=link155onMouseOver="ShowTip(event, 'tt91', 'link155')"onMouseOut="HideTip('tt91')">mxGraph.getEdgeValidationError</a> in <ahref="#mxConnectionHandler.validateConnection"class=LFunctionid=link156onMouseOver="ShowTip(event, 'tt50', 'link156')"onMouseOut="HideTip('tt50')">validateConnection</a>. This is an additional hook for disabling certain targets in this specific handler.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>cell</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link157onMouseOver="ShowTip(event, 'tt86', 'link157')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the target terminal.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.validateConnection"></a>validateConnection</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.validateConnection = function(</td><tdclass="PParameter prettyprint "nowrap>source,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>target</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the error message or an empty string if the connection for the given source target pair is not valid. Otherwise it returns null. This implementation uses <ahref="../view/mxGraph-js.html#mxGraph.getEdgeValidationError"class=LFunctionid=link158onMouseOver="ShowTip(event, 'tt91', 'link158')"onMouseOut="HideTip('tt91')">mxGraph.getEdgeValidationError</a>.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>source</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link159onMouseOver="ShowTip(event, 'tt86', 'link159')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the source terminal.</td></tr><tr><tdclass=CDLEntry>target</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link160onMouseOver="ShowTip(event, 'tt86', 'link160')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the target terminal.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.getConnectImage"></a>getConnectImage</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.getConnectImage = function(</td><tdclass="PParameter prettyprint "nowrap>state</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to return the <ahref="../util/mxImage-js.html#mxImage"class=LClassid=link161onMouseOver="ShowTip(event, 'tt10', 'link161')"onMouseOut="HideTip('tt10')">mxImage</a> used for the connection icon of the given <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link162onMouseOver="ShowTip(event, 'tt26', 'link162')"onMouseOut="HideTip('tt26')">mxCellState</a>. This implementation returns <ahref="#mxConnectionHandler.connectImage"class=LVariableid=link163onMouseOver="ShowTip(event, 'tt9', 'link163')"onMouseOut="HideTip('tt9')">connectImage</a>.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>state</td><tdclass=CDLDescription><ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link164onMouseOver="ShowTip(event, 'tt26', 'link164')"onMouseOut="HideTip('tt26')">mxCellState</a> whose connect image should be returned.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isMoveIconToFrontForState"></a>isMoveIconToFrontForState</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.isMoveIconToFrontForState = function(</td><tdclass="PParameter prettyprint "nowrap>state</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the state has a HTML label in the graph’s container, otherwise it returns <ahref="#mxConnectionHandler.moveIconFront"class=LVariableid=link165onMouseOver="ShowTip(event, 'tt7', 'link165')"onMouseOut="HideTip('tt7')">moveIconFront</a>.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>state</td><tdclass=CDLDescription><ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link166onMouseOver="ShowTip(event, 'tt26', 'link166')"onMouseOut="HideTip('tt26')">mxCellState</a> whose connect icons should be returned.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.createIcons"></a>createIcons</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.createIcons = function(</td><tdclass="PParameter prettyprint "nowrap>state</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates the array <ahref="../shape/mxImageShape-js.html#mxImageShape"class=LClassid=link167onMouseOver="ShowTip(event, 'tt54', 'link167')"onMouseOut="HideTip('tt54')">mxImageShapes</a> that represent the connect icons for the given <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link168onMouseOver="ShowTip(event, 'tt26', 'link168')"onMouseOut="HideTip('tt26')">mxCellState</a>.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>state</td><tdclass=CDLDescription><ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link169onMouseOver="ShowTip(event, 'tt26', 'link169')"onMouseOut="HideTip('tt26')">mxCellState</a> whose connect icons should be returned.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.redrawIcons"></a>redrawIcons</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.redrawIcons = function(</td><tdclass="PParameter prettyprint "nowrap>icons,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>state</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Redraws the given array of <ahref="../shape/mxImageShape-js.html#mxImageShape"class=LClassid=link170onMouseOver="ShowTip(event, 'tt54', 'link170')"onMouseOut="HideTip('tt54')">mxImageShapes</a>.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>icons</td><tdclass=CDLDescription>Optional array of <ahref="../shape/mxImageShape-js.html#mxImageShape"class=LClassid=link171onMouseOver="ShowTip(event, 'tt54', 'link171')"onMouseOut="HideTip('tt54')">mxImageShapes</a> to be redrawn.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.redrawIcons"></a>redrawIcons</h3><divclass=CBody><p>Redraws the given array of <ahref="../shape/mxImageShape-js.html#mxImageShape"class=LClassid=link172onMouseOver="ShowTip(event, 'tt54', 'link172')"onMouseOut="HideTip('tt54')">mxImageShapes</a>.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>icons</td><tdclass=CDLDescription>Optional array of <ahref="../shape/mxImageShape-js.html#mxImageShape"class=LClassid=link173onMouseOver="ShowTip(event, 'tt54', 'link173')"onMouseOut="HideTip('tt54')">mxImageShapes</a> to be redrawn.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.destroyIcons"></a>destroyIcons</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.destroyIcons = function()</td></tr></table></blockquote><p>Destroys the connect icons and resets the respective state.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isStartEvent"></a>isStartEvent</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.isStartEvent = function(</td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given mouse down event should start this handler. The This implementation returns true if the event does not force marquee selection, and the currentConstraint and currentFocus of the <ahref="#mxConnectionHandler.constraintHandler"class=LVariableid=link174onMouseOver="ShowTip(event, 'tt17', 'link174')"onMouseOut="HideTip('tt17')">constraintHandler</a> are not null, or <previous> and <ahref="#mxConnectionHandler.error"class=LVariableid=link175onMouseOver="ShowTip(event, 'tt19', 'link175')"onMouseOut="HideTip('tt19')">error</a> are not null and <icons> is null or <icons> and <icon> are not null.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.mouseDown"></a>mouseDown</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.mouseDown = function(</td><tdclass="PParameter prettyprint "nowrap>sender,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by initiating a new connection.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isImmediateConnectSource"></a>isImmediateConnectSource</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.isImmediateConnectSource = function(</td><tdclass="PParameter prettyprint "nowrap>state</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if a tap on the given source state should immediately start connecting. This implementation returns true if the state is not movable in the graph.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.createEdgeState"></a>createEdgeState</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.createEdgeState = function(</td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to return an <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link176onMouseOver="ShowTip(event, 'tt26', 'link176')"onMouseOut="HideTip('tt26')">mxCellState</a> which may be used during the preview. This implementation returns null.</p><h4class=CHeading>Use the following code to create a preview for an existing edge style</h4><blockquote><preclass="prettyprint">graph.connectionHandler.createEdgeState = function(me)
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isOutlineConnectEvent"></a>isOutlineConnectEvent</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.isOutlineConnectEvent = function(</td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if <ahref="#mxConnectionHandler.outlineConnect"class=LVariableid=link177onMouseOver="ShowTip(event, 'tt31', 'link177')"onMouseOut="HideTip('tt31')">outlineConnect</a> is true and the source of the event is the outline shape or shift is pressed.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.updateCurrentState"></a>updateCurrentState</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.updateCurrentState = function(</td><tdclass="PParameter prettyprint "nowrap>me,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>point</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Updates the current state for a given mouse move event by using the <ahref="#mxConnectionHandler.marker"class=LVariableid=link178onMouseOver="ShowTip(event, 'tt16', 'link178')"onMouseOut="HideTip('tt16')">marker</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.convertWaypoint"></a>convertWaypoint</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.convertWaypoint = function(</td><tdclass="PParameter prettyprint "nowrap>point</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Converts the given point from screen coordinates to model coordinates.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.snapToPreview"></a>snapToPreview</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.snapToPreview = function(</td><tdclass="PParameter prettyprint "nowrap>me,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>point</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Called to snap the given point to the current preview. This snaps to the first point of the preview if alt is not pressed.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.mouseMove"></a>mouseMove</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.mouseMove = function(</td><tdclass="PParameter prettyprint "nowrap>sender,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by updating the preview edge or by highlighting a possible source or target terminal.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.getTargetPerimeterPoint"></a>getTargetPerimeterPoint</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.getTargetPerimeterPoint = function(</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the perimeter point for the given target state.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>state</td><tdclass=CDLDescription><ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link180onMouseOver="ShowTip(event, 'tt26', 'link180')"onMouseOut="HideTip('tt26')">mxCellState</a> that represents the target cell state.</td></tr><tr><tdclass=CDLEntry>me</td><tdclass=CDLDescription><ahref="../util/mxMouseEvent-js.html#mxMouseEvent"class=LClassid=link181onMouseOver="ShowTip(event, 'tt89', 'link181')"onMouseOut="HideTip('tt89')">mxMouseEvent</a> that represents the mouse move.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.getSourcePerimeterPoint"></a>getSourcePerimeterPoint</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.getSourcePerimeterPoint = function(</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>next,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to update the icon position(s) based on a mouseOver event. This is an empty implementation.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>state</td><tdclass=CDLDescription><ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link182onMouseOver="ShowTip(event, 'tt26', 'link182')"onMouseOut="HideTip('tt26')">mxCellState</a> that represents the target cell state.</td></tr><tr><tdclass=CDLEntry>next</td><tdclass=CDLDescription><ahref="../util/mxPoint-js.html#mxPoint"class=LClassid=link183onMouseOver="ShowTip(event, 'tt23', 'link183')"onMouseOut="HideTip('tt23')">mxPoint</a> that represents the next point along the previewed edge.</td></tr><tr><tdclass=CDLEntry>me</td><tdclass=CDLDescription><ahref="../util/mxMouseEvent-js.html#mxMouseEvent"class=LClassid=link184onMouseOver="ShowTip(event, 'tt89', 'link184')"onMouseOut="HideTip('tt89')">mxMouseEvent</a> that represents the mouse move.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.updateIcons"></a>updateIcons</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.updateIcons = function(</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>icons,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to update the icon position(s) based on a mouseOver event. This is an empty implementation.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>state</td><tdclass=CDLDescription><ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link185onMouseOver="ShowTip(event, 'tt26', 'link185')"onMouseOut="HideTip('tt26')">mxCellState</a> under the mouse.</td></tr><tr><tdclass=CDLEntry>icons</td><tdclass=CDLDescription>Array of currently displayed icons.</td></tr><tr><tdclass=CDLEntry>me</td><tdclass=CDLDescription><ahref="../util/mxMouseEvent-js.html#mxMouseEvent"class=LClassid=link186onMouseOver="ShowTip(event, 'tt89', 'link186')"onMouseOut="HideTip('tt89')">mxMouseEvent</a> that contains the mouse event.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isStopEvent"></a>isStopEvent</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.isStopEvent = function(</td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given mouse up event should stop this handler. The connection will be created if <ahref="#mxConnectionHandler.error"class=LVariableid=link187onMouseOver="ShowTip(event, 'tt19', 'link187')"onMouseOut="HideTip('tt19')">error</a> is null. Note that this is only called if <ahref="#mxConnectionHandler.waypointsEnabled"class=LVariableid=link188onMouseOver="ShowTip(event, 'tt20', 'link188')"onMouseOut="HideTip('tt20')">waypointsEnabled</a> is true. This implemtation returns true if there is a cell state in the given event.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.addWaypoint"></a>addWaypoint</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.addWaypointForEvent = function(</td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Adds the waypoint for the given event to <waypoints>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.mouseUp"></a>mouseUp</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.mouseUp = function(</td><tdclass="PParameter prettyprint "nowrap>sender,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>me</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by inserting the new connection.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.reset"></a>reset</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.reset = function()</td></tr></table></blockquote><p>Resets the state of this handler.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.drawPreview"></a>drawPreview</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.drawPreview = function()</td></tr></table></blockquote><p>Redraws the preview edge using the color and width returned by <ahref="#mxConnectionHandler.getEdgeColor"class=LFunctionid=link189onMouseOver="ShowTip(event, 'tt74', 'link189')"onMouseOut="HideTip('tt74')">getEdgeColor</a> and <ahref="#mxConnectionHandler.getEdgeWidth"class=LFunctionid=link190onMouseOver="ShowTip(event, 'tt75', 'link190')"onMouseOut="HideTip('tt75')">getEdgeWidth</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.getEdgeColor"></a>getEdgeColor</h3><divclass=CBody><p>Returns the color used to draw the preview edge. This returns green if there is no edge validation error and red otherwise.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>valid</td><tdclass=CDLDescription>Boolean indicating if the color for a valid edge should be returned.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.getEdgeColor"></a>getEdgeColor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.getEdgeColor = function(</td><tdclass="PParameter prettyprint "nowrap>valid</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the color used to draw the preview edge. This returns green if there is no edge validation error and red otherwise.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>valid</td><tdclass=CDLDescription>Boolean indicating if the color for a valid edge should be returned.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.getEdgeWidth"></a>getEdgeWidth</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.getEdgeWidth = function(</td><tdclass="PParameter prettyprint "nowrap>valid</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the width used to draw the preview edge. This returns 3 if there is no edge validation error and 1 otherwise.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>valid</td><tdclass=CDLDescription>Boolean indicating if the width for a valid edge should be returned.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.connect"></a>connect</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.connect = function(</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>evt,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>dropTarget</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Connects the given source and target using a new edge. This implementation uses <ahref="#mxConnectionHandler.createEdge"class=LFunctionid=link191onMouseOver="ShowTip(event, 'tt79', 'link191')"onMouseOut="HideTip('tt79')">createEdge</a> to create the edge.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>source</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link192onMouseOver="ShowTip(event, 'tt86', 'link192')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the source terminal.</td></tr><tr><tdclass=CDLEntry>target</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link193onMouseOver="ShowTip(event, 'tt86', 'link193')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the target terminal.</td></tr><tr><tdclass=CDLEntry>evt</td><tdclass=CDLDescription>Mousedown event of the connect gesture.</td></tr><tr><tdclass=CDLEntry>dropTarget</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link194onMouseOver="ShowTip(event, 'tt86', 'link194')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the cell under the mouse when it was released.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.selectCells"></a>selectCells</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.selectCells = function(</td><tdclass="PParameter prettyprint "nowrap>edge,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>target</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Selects the given edge after adding a new connection. The target argument contains the target vertex if one has been inserted.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.insertEdge"></a>insertEdge</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.insertEdge = function(</td><tdclass="PParameter prettyprint "nowrap>parent,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>id,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>value,</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>style</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates, inserts and returns the new edge for the given parameters. This implementation does only use <ahref="#mxConnectionHandler.createEdge"class=LFunctionid=link195onMouseOver="ShowTip(event, 'tt79', 'link195')"onMouseOut="HideTip('tt79')">createEdge</a> if <ahref="#mxConnectionHandler.factoryMethod"class=LVariableid=link196onMouseOver="ShowTip(event, 'tt6', 'link196')"onMouseOut="HideTip('tt6')">factoryMethod</a> is defined, otherwise <ahref="../view/mxGraph-js.html#mxGraph.insertEdge"class=LFunctionid=link197onMouseOver="ShowTip(event, 'tt92', 'link197')"onMouseOut="HideTip('tt92')">mxGraph.insertEdge</a> will be used.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.createTargetVertex"></a>createTargetVertex</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.createTargetVertex = function(</td><tdclass="PParameter prettyprint "nowrap>evt,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>source</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook method for creating new vertices on the fly if no target was under the mouse. This is only called if <ahref="#mxConnectionHandler.createTarget"class=LVariableid=link198onMouseOver="ShowTip(event, 'tt14', 'link198')"onMouseOut="HideTip('tt14')">createTarget</a> is true and returns null.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>evt</td><tdclass=CDLDescription>Mousedown event of the connect gesture.</td></tr><tr><tdclass=CDLEntry>source</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link199onMouseOver="ShowTip(event, 'tt86', 'link199')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the source terminal.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.getAlignmentTolerance"></a>getAlignmentTolerance</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.getAlignmentTolerance = function(</td><tdclass="PParameter prettyprint "nowrap>evt</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the tolerance for aligning new targets to sources. This returns the grid size / 2.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.createEdge"></a>createEdge</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.createEdge = function(</td><tdclass="PParameter prettyprint "nowrap>value,</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>style</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates and returns a new edge using <ahref="#mxConnectionHandler.factoryMethod"class=LVariableid=link200onMouseOver="ShowTip(event, 'tt6', 'link200')"onMouseOut="HideTip('tt6')">factoryMethod</a> if one exists. If no factory method is defined, then a new default edge is returned. The source and target arguments are informal, the actual connection is setup later by the caller of this function.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>value</td><tdclass=CDLDescription>Value to be used for creating the edge.</td></tr><tr><tdclass=CDLEntry>source</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link201onMouseOver="ShowTip(event, 'tt86', 'link201')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the source terminal.</td></tr><tr><tdclass=CDLEntry>target</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link202onMouseOver="ShowTip(event, 'tt86', 'link202')"onMouseOut="HideTip('tt86')">mxCell</a> that represents the target terminal.</td></tr><tr><tdclass=CDLEntry>style</td><tdclass=CDLDescription>Optional style from the preview edge.</td></tr></table></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.destroy"></a>destroy</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.destroy = function()</td></tr></table></blockquote><p>Destroys the handler and all its resources and DOM nodes. This should be called on all instances. It is called automatically for the built-in instance created for each <ahref="../view/mxGraph-js.html#mxGraph"class=LClassid=link203onMouseOver="ShowTip(event, 'tt5', 'link203')"onMouseOut="HideTip('tt5')">mxGraph</a>.</p></div></div></div>
<divclass=CToolTipid="tt1"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxConnectionHandler.prototype.connect = function(</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>evt,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>dropTarget</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Connects the given source and target using a new edge. </div></div><divclass=CToolTipid="tt2"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.reset = function()</td></tr></table></blockquote>Resets the state of this handler.</div></div><divclass=CToolTipid="tt3"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>function mxConnectionHandler(</td><tdclass="PParameter prettyprint "nowrap>graph,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>factoryMethod</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Constructs an event handler that connects vertices using the specified factory method to create the new edges. </div></div><divclass=CToolTipid="tt4"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.graph</td></tr></table></blockquote>Reference to the enclosing mxGraph.</div></div><divclass=CToolTipid="tt5"><divclass=CClass>Extends mxEventSource to implement a graph component for the browser. </div></div><divclass=CToolTipid="tt6"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.factoryMethod</td></tr></table></blockquote>Function that is used for creating new edges. </div></div><divclass=CToolTipid="tt7"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.moveIconFront</td></tr></table></blockquote>Specifies if icons should be displayed inside the graph container instead of the overlay pane. </div></div><divclass=CToolTipid="tt8"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.moveIconBack</td></tr></table></blockquote>Specifies if icons should be moved to the back of the overlay pane. </div></div><divclass=CToolTipid="tt9"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.connectImage</td></tr></table></blockquote>mxImage that is used to trigger the creation of a new connection. </div></div><divclass=CToolTipid="tt10"><divclass=CClass>Encapsulates the URL, width and height of an image.</div></div><divclass=CToolTipid="tt11"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.targetConnectImage</td></tr></table></blockquote>Specifies if the connect icon should be centered on the target state while connections are being previewed. </div></div><divclass=CToolTipid="tt12"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxConnectionHandler.prototype.enabled</td></tr></table></blockquote>Specifies if events are handled. </div></div><divclass=CToolTipid="tt13"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototyp
