<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=link90onMouseOver="ShowTip(event, 'tt6', 'link90')"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=link91onMouseOver="ShowTip(event, 'tt73', 'link91')"onMouseOut="HideTip('tt73')">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=link92onMouseOver="ShowTip(event, 'tt69', 'link92')"onMouseOut="HideTip('tt69')">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=link93onMouseOver="ShowTip(event, 'tt1', 'link93')"onMouseOut="HideTip('tt1')">connect</a>. The new edge is created using <ahref="#mxConnectionHandler.createEdge"class=LFunctionid=link94onMouseOver="ShowTip(event, 'tt71', 'link94')"onMouseOut="HideTip('tt71')">createEdge</a> which in turn uses <ahref="#mxConnectionHandler.factoryMethod"class=LVariableid=link95onMouseOver="ShowTip(event, 'tt6', 'link95')"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 MS Visio and other products. In order to allow both, moving and connecting cells at the same time, <ahref="../util/mxConstants-js.html#mxConstants.DEFAULT_HOTSPOT"class=LVariableid=link96onMouseOver="ShowTip(event, 'tt74', 'link96')"onMouseOut="HideTip('tt74')">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=link97onMouseOver="ShowTip(event, 'tt75', 'link97')"onMouseOut="HideTip('tt75')">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=link98onMouseOver="ShowTip(event, 'tt48', 'link98')"onMouseOut="HideTip('tt48')">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=link99onMouseOver="ShowTip(event, 'tt48', 'link99')"onMouseOut="HideTip('tt48')">createIcons</a> hook may be overridden to create more than one <ahref="../shape/mxImageShape-js.html#mxImageShape"class=LClassid=link100onMouseOver="ShowTip(event, 'tt49', 'link100')"onMouseOut="HideTip('tt49')">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=link101onMouseOver="ShowTip(event, 'tt10', 'link101')"onMouseOut="HideTip('tt10')">mxImage</a> instance:</p><blockquote><preclass="prettyprint">mxConnectionHandler.prototype.connectImage = new mxIma
<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=link102onMouseOver="ShowTip(event, 'tt1', 'link102')"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=link103onMouseOver="ShowTip(event, 'tt1', 'link103')"onMouseOut="HideTip('tt1')">connect</a> (where target corresponds to the dropTarget argument).</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=link104onMouseOver="ShowTip(event, 'tt76', 'link104')"onMouseOut="HideTip('tt76')">mxGraph.getConnectionConstraint</a> can be used. To resolve the port IDs, use <ahref="../model/mxGraphModel-js.html#mxGraphModel.getCell"class=LFunctionid=link105onMouseOver="ShowTip(event, 'tt77', 'link105')"onMouseOut="HideTip('tt77')">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=link106onMouseOver="ShowTip(event, 'tt2', 'link106')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>function mxConnectionHandler(</td><tdclass=PParameternowrap>graph,</td></tr><tr><td></td><tdclass=PParameternowrap>factoryMethod</td><tdclass=PAfterParametersnowrap>)</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=link107onMouseOver="ShowTip(event, 'tt5', 'link107')"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=link108onMouseOver="ShowTip(event, 'tt78', 'link108')"onMouseOut="HideTip('tt78')">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=link109onMouseOver="ShowTip(event, 'tt78', 'link109')"onMouseOut="HideTip('tt78')">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 prettyprint"><tr><td>mxConnectionHandler.prototype.graph</td></tr></table></blockquote><p>Reference to the enclosing <ahref="../view/mxGraph-js.html#mxGraph"class=LClassid=link110onMouseOver="ShowTip(event, 'tt5', 'link110')"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 prettyprint"><tr><td>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=link111onMouseOver="ShowTip(event, 'tt78', 'link111')"onMouseOut="HideTip('tt78')">mxCell</a> as the first and second argument and returns a new <ahref="../model/mxCell-js.html#mxCell"class=LClassid=link112onMouseOver="ShowTip(event, 'tt78', 'link112')"onMouseOut="HideTip('tt78')">mxCell</a> that represents the edge. This is used in <ahref="#mxConnectionHandler.createEdge"class=LFunctionid=link113onMouseOver="ShowTip(event, 'tt71', 'link113')"onMouseOut="HideTip('tt71')">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 prettyprint"><tr><td>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=link114onMouseOver="ShowTip(event, 'tt8', 'link114')"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 prettyprint"><tr><td>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 prettyprint"><tr><td>mxConnectionHandler.prototype.connectImage</td></tr></table></blockquote><p><ahref="../util/mxImage-js.html#mxImage"class=LClassid=link115onMouseOver="ShowTip(event, 'tt10', 'link115')"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=link116onMouseOver="ShowTip(event, 'tt48', 'link116')"onMouseOut="HideTip('tt48')">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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>mxConnectionHandler.prototype.createTarget</td></tr></table></blockquote><p>Specifies if <ahref="#mxConnectionHandler.createTargetVertex"class=LFunctionid=link117onMouseOver="ShowTip(event, 'tt15', 'link117')"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=link118onMouseOver="ShowTip(event, 'tt15', 'link118')"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=link119onMouseOver="ShowTip(event, 'tt15', 'link119')"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 prettyprint"><tr><td>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 prettyprint"><tr><td>mxConnectionHandler.prototype.constraintHandler</td></tr></table></blockquote><p>Holds the <ahref="mxConstraintHandler-js.html#mxConstraintHandler"class=LClassid=link120onMouseOver="ShowTip(event, 'tt18', 'link120')"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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>mxConnectionHandler.prototype.first</td></tr></table></blockquote><p>Holds the <ahref="../util/mxPoint-js.html#mxPoint"class=LClassid=link121onMouseOver="ShowTip(event, 'tt23', 'link121')"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 prettyprint"><tr><td>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=link122onMouseOver="ShowTip(event, 'tt79', 'link122')"onMouseOut="HideTip('tt79')">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 prettyprint"><tr><td>mxConnectionHandler.prototype.edgeState</td></tr></table></blockquote><p>Optional <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link123onMouseOver="ShowTip(event, 'tt26', 'link123')"onMouseOut="HideTip('tt26')">mxCellState</a> that represents the preview edge while the handler is active. This is created in <ahref="#mxConnectionHandler.createEdgeState"class=LFunctionid=link124onMouseOver="ShowTip(event, 'tt55', 'link124')"onMouseOut="HideTip('tt55')">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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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=link125onMouseOver="ShowTip(event, 'tt80', 'link125')"onMouseOut="HideTip('tt80')">mxClient.IS_VML</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.isEnabled"></a>isEnabled</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.isEnabled = function()</td></tr></table></blockquote><p>Returns true if events are handled. This implementation returns <ahref="#mxConnectionHandler.enabled"class=LVariableid=link126onMouseOver="ShowTip(event, 'tt12', 'link126')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.setEnabled = function(</td><tdclass=PParameternowrap>enabled</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Enables or disables event handling. This implementation updates <ahref="#mxConnectionHandler.enabled"class=LVariableid=link127onMouseOver="ShowTip(event, 'tt12', 'link127')"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.createShape"></a>createShape</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.isConnectableCell = function(</td><tdclass=PParameternowrap>cell</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td>mxConnectionHandler.prototype.createMarker = function()</td></tr></table></blockquote><p>Creates and returns the <ahref="mxCellMarker-js.html#mxCellMarker"class=LClassid=link130onMouseOver="ShowTip(event, 'tt39', 'link130')"onMouseOut="HideTip('tt39')">mxCellMarker</a> used in <ahref="#mxConnectionHandler.marker"class=LVariableid=link131onMouseOver="ShowTip(event, 'tt16', 'link131')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.start = function(</td><tdclass=PParameternowrap>state,</td></tr><tr><td></td><tdclass=PParameternowrap>x,</td></tr><tr><td></td><tdclass=PParameternowrap>y,</td></tr><tr><td></td><tdclass=PParameternowrap>edgeState</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td>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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.isValidSource = function(</td><tdclass=PParameternowrap>cell</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns <ahref="../view/mxGraph-js.html#mxGraph.isValidSource"class=LFunctionid=link132onMouseOver="ShowTip(event, 'tt43', 'link132')"onMouseOut="HideTip('tt43')">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=link133onMouseOver="ShowTip(event, 'tt78', 'link133')"onMouseOut="HideTip('tt78')">mxCell</a> that represents the source terminal.</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.isValidTarget = function(</td><tdclass=PParameternowrap>cell</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true. The call to <ahref="../view/mxGraph-js.html#mxGraph.isValidTarget"class=LFunctionid=link134onMouseOver="ShowTip(event, 'tt81', 'link134')"onMouseOut="HideTip('tt81')">mxGraph.isValidTarget</a> is implicit by calling <ahref="../view/mxGraph-js.html#mxGraph.getEdgeValidationError"class=LFunctionid=link135onMouseOver="ShowTip(event, 'tt82', 'link135')"onMouseOut="HideTip('tt82')">mxGraph.getEdgeValidationError</a> in <ahref="#mxConnectionHandler.validateConnection"class=LFunctionid=link136onMouseOver="ShowTip(event, 'tt45', 'link136')"onMouseOut="HideTip('tt45')">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=link137onMouseOver="ShowTip(event, 'tt78', 'link137')"onMouseOut="HideTip('tt78')">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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.validateConnection = function(</td><tdclass=PParameternowrap>source,</td></tr><tr><td></td><tdclass=PParameternowrap>target</td><tdclass=PAfterParametersnowrap>)</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=link138onMouseOver="ShowTip(event, 'tt82', 'link138')"onMouseOut="HideTip('tt82')">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=link139onMouseOver="ShowTip(event, 'tt78', 'link139')"onMouseOut="HideTip('tt78')">mxCell</a> that represents the source terminal.</td></tr><tr><tdclass=CDLEntry>target</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link140onMouseOver="ShowTip(event, 'tt78', 'link140')"onMouseOut="HideTip('tt78')">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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.getConnectImage = function(</td><tdclass=PParameternowrap>state</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to return the <ahref="../util/mxImage-js.html#mxImage"class=LClassid=link141onMouseOver="ShowTip(event, 'tt10', 'link141')"onMouseOut="HideTip('tt10')">mxImage</a> used for the connection icon of the given <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link142onMouseOver="ShowTip(event, 'tt26', 'link142')"onMouseOut="HideTip('tt26')">mxCellState</a>. This implementation returns <ahref="#mxConnectionHandler.connectImage"class=LVariableid=link143onMouseOver="ShowTip(event, 'tt9', 'link143')"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=link144onMouseOver="ShowTip(event, 'tt26', 'link144')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.isMoveIconToFrontForState = function(</td><tdclass=PParameternowrap>state</td><tdclass=PAfterParametersnowrap>)</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=link145onMouseOver="ShowTip(event, 'tt7', 'link145')"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=link146onMouseOver="ShowTip(event, 'tt26', 'link146')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.createIcons = function(</td><tdclass=PParameternowrap>state</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates the array <ahref="../shape/mxImageShape-js.html#mxImageShape"class=LClassid=link147onMouseOver="ShowTip(event, 'tt49', 'link147')"onMouseOut="HideTip('tt49')">mxImageShapes</a> that represent the connect icons for the given <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link148onMouseOver="ShowTip(event, 'tt26', 'link148')"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=link149onMouseOver="ShowTip(event, 'tt26', 'link149')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.redrawIcons = function(</td><tdclass=PParameternowrap>icons,</td></tr><tr><td></td><tdclass=PParameternowrap>state</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Redraws the given array of <ahref="../shape/mxImageShape-js.html#mxImageShape"class=LClassid=link150onMouseOver="ShowTip(event, 'tt49', 'link150')"onMouseOut="HideTip('tt49')">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=link151onMouseOver="ShowTip(event, 'tt49', 'link151')"onMouseOut="HideTip('tt49')">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=link152onMouseOver="ShowTip(event, 'tt49', 'link152')"onMouseOut="HideTip('tt49')">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=link153onMouseOver="ShowTip(event, 'tt49', 'link153')"onMouseOut="HideTip('tt49')">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 prettyprint"><tr><td>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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.isStartEvent = function(</td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</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=link154onMouseOver="ShowTip(event, 'tt17', 'link154')"onMouseOut="HideTip('tt17')">constraintHandler</a> are not null, or <previous> and <ahref="#mxConnectionHandler.error"class=LVariableid=link155onMouseOver="ShowTip(event, 'tt19', 'link155')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.mouseDown = function(</td><tdclass=PParameternowrap>sender,</td></tr><tr><td></td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.isImmediateConnectSource = function(</td><tdclass=PParameternowrap>state</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.createEdgeState = function(</td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to return an <ahref="../view/mxCellState-js.html#mxCellState"class=LClassid=link156onMouseOver="ShowTip(event, 'tt26', 'link156')"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)
{
var edge = graph.createEdge(null, null, null, null, null, 'edgeStyle=elbowEdgeStyle');
return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.updateCurrentState"></a>updateCurrentState</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.updateCurrentState = function(</td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</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=link157onMouseOver="ShowTip(event, 'tt16', 'link157')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.convertWaypoint = function(</td><tdclass=PParameternowrap>point</td><tdclass=PAfterParametersnowrap>)</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.mouseMove"></a>mouseMove</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.mouseMove = function(</td><tdclass=PParameternowrap>sender,</td></tr><tr><td></td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.getTargetPerimeterPoint = function(</td><tdclass=PParameternowrap>state,</td></tr><tr><td></td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</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=link158onMouseOver="ShowTip(event, 'tt26', 'link158')"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=link159onMouseOver="ShowTip(event, 'tt83', 'link159')"onMouseOut="HideTip('tt83')">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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.getSourcePerimeterPoint = function(</td><tdclass=PParameternowrap>state,</td></tr><tr><td></td><tdclass=PParameternowrap>next,</td></tr><tr><td></td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</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=link160onMouseOver="ShowTip(event, 'tt26', 'link160')"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=link161onMouseOver="ShowTip(event, 'tt23', 'link161')"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=link162onMouseOver="ShowTip(event, 'tt83', 'link162')"onMouseOut="HideTip('tt83')">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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.updateIcons = function(</td><tdclass=PParameternowrap>state,</td></tr><tr><td></td><tdclass=PParameternowrap>icons,</td></tr><tr><td></td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</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=link163onMouseOver="ShowTip(event, 'tt26', 'link163')"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=link164onMouseOver="ShowTip(event, 'tt83', 'link164')"onMouseOut="HideTip('tt83')">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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.isStopEvent = function(</td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</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=link165onMouseOver="ShowTip(event, 'tt19', 'link165')"onMouseOut="HideTip('tt19')">error</a> is null. Note that this is only called if <ahref="#mxConnectionHandler.waypointsEnabled"class=LVariableid=link166onMouseOver="ShowTip(event, 'tt20', 'link166')"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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.addWaypointForEvent = function(</td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.mouseUp = function(</td><tdclass=PParameternowrap>sender,</td></tr><tr><td></td><tdclass=PParameternowrap>me</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td>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 prettyprint"><tr><td>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=link167onMouseOver="ShowTip(event, 'tt66', 'link167')"onMouseOut="HideTip('tt66')">getEdgeColor</a> and <ahref="#mxConnectionHandler.getEdgeWidth"class=LFunctionid=link168onMouseOver="ShowTip(event, 'tt67', 'link168')"onMouseOut="HideTip('tt67')">getEdgeWidth</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.getEdgeColor"></a>getEdgeColor</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.getEdgeColor = function(</td><tdclass=PParameternowrap>valid</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.getEdgeWidth = function(</td><tdclass=PParameternowrap>valid</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.connect = function(</td><tdclass=PParameternowrap>source,</td></tr><tr><td></td><tdclass=PParameternowrap>target,</td></tr><tr><td></td><tdclass=PParameternowrap>evt,</td></tr><tr><td></td><tdclass=PParameternowrap>dropTarget</td><tdclass=PAfterParametersnowrap>)</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=link169onMouseOver="ShowTip(event, 'tt71', 'link169')"onMouseOut="HideTip('tt71')">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=link170onMouseOver="ShowTip(event, 'tt78', 'link170')"onMouseOut="HideTip('tt78')">mxCell</a> that represents the source terminal.</td></tr><tr><tdclass=CDLEntry>target</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link171onMouseOver="ShowTip(event, 'tt78', 'link171')"onMouseOut="HideTip('tt78')">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=link172onMouseOver="ShowTip(event, 'tt78', 'link172')"onMouseOut="HideTip('tt78')">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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.selectCells = function(</td><tdclass=PParameternowrap>edge,</td></tr><tr><td></td><tdclass=PParameternowrap>target</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.insertEdge = function(</td><tdclass=PParameternowrap>parent,</td></tr><tr><td></td><tdclass=PParameternowrap>id,</td></tr><tr><td></td><tdclass=PParameternowrap>value,</td></tr><tr><td></td><tdclass=PParameternowrap>source,</td></tr><tr><td></td><tdclass=PParameternowrap>target,</td></tr><tr><td></td><tdclass=PParameternowrap>style</td><tdclass=PAfterParametersnowrap>)</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=link173onMouseOver="ShowTip(event, 'tt71', 'link173')"onMouseOut="HideTip('tt71')">createEdge</a> if <ahref="#mxConnectionHandler.factoryMethod"class=LVariableid=link174onMouseOver="ShowTip(event, 'tt6', 'link174')"onMouseOut="HideTip('tt6')">factoryMethod</a> is defined, otherwise <ahref="../view/mxGraph-js.html#mxGraph.insertEdge"class=LFunctionid=link175onMouseOver="ShowTip(event, 'tt84', 'link175')"onMouseOut="HideTip('tt84')">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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.createTargetVertex = function(</td><tdclass=PParameternowrap>evt,</td></tr><tr><td></td><tdclass=PParameternowrap>source</td><tdclass=PAfterParametersnowrap>)</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=link176onMouseOver="ShowTip(event, 'tt14', 'link176')"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=link177onMouseOver="ShowTip(event, 'tt78', 'link177')"onMouseOut="HideTip('tt78')">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 prettyprint"><tr><td>mxConnectionHandler.prototype.getAlignmentTolerance = function()</td></tr></table></blockquote><p>Returns the tolerance for aligning new targets to sources.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxConnectionHandler.createEdge"></a>createEdge</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.createEdge = function(</td><tdclass=PParameternowrap>value,</td></tr><tr><td></td><tdclass=PParameternowrap>source,</td></tr><tr><td></td><tdclass=PParameternowrap>target,</td></tr><tr><td></td><tdclass=PParameternowrap>style</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates and returns a new edge using <ahref="#mxConnectionHandler.factoryMethod"class=LVariableid=link178onMouseOver="ShowTip(event, 'tt6', 'link178')"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=link179onMouseOver="ShowTip(event, 'tt78', 'link179')"onMouseOut="HideTip('tt78')">mxCell</a> that represents the source terminal.</td></tr><tr><tdclass=CDLEntry>target</td><tdclass=CDLDescription><ahref="../model/mxCell-js.html#mxCell"class=LClassid=link180onMouseOver="ShowTip(event, 'tt78', 'link180')"onMouseOut="HideTip('tt78')">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 prettyprint"><tr><td>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=link181onMouseOver="ShowTip(event, 'tt5', 'link181')"onMouseOut="HideTip('tt5')">mxGraph</a>.</p></div></div></div>
<divclass=CToolTipid="tt1"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxConnectionHandler.prototype.connect = function(</td><tdclass=PParameternowrap>source,</td></tr><tr><td></td><tdclass=PParameternowrap>target,</td></tr><tr><td></td><tdclass=PParameternowrap>evt,</td></tr><tr><td></td><tdclass=PParameternowrap>dropTarget</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td>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 prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>function mxConnectionHandler(</td><tdclass=PParameternowrap>graph,</td></tr><tr><td></td><tdclass=PParameternowrap>factoryMethod</td><tdclass=PAfterParametersnowrap>)</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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>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 prettyprint"><tr><td>mxConnectionHandler.prototype.enabled</td></tr></table></blockquote>Specifies if events are handled. </div></div><divclass=CToolTipid="tt13"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.select</td></tr></table></blockquote>Specifies if new edges should be selected. </div></div><divclass=CToolTipid="tt14"><divclass=CVariable>
