maxGraph/docs/js-api/files/handler/mxConnectionHandler-js.html

207 lines
137 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><title>mxConnectionHandler</title><link rel="stylesheet" type="text/css" href="../../styles/main.css"><script language=JavaScript src="../../javascript/main.js"></script><script language=JavaScript src="../../javascript/prettify.js"></script><script language=JavaScript src="../../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad();prettyPrint();"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>
<!-- Generated by Natural Docs, version 1.5 -->
<!-- http://www.naturaldocs.org -->
<!-- saved from url=(0026)http://www.naturaldocs.org -->
<div id=Content><div class="CClass"><div class=CTopic id=MainTopic><h1 class=CTitle><a name="mxConnectionHandler"></a>mxConnectionHandler</h1><div class=CBody><p>Graph event handler that creates new connections.&nbsp; Uses &lt;mxTerminalMarker&gt; for finding and highlighting the source and target vertices and <a href="#mxConnectionHandler.factoryMethod" class=LVariable id=link90 onMouseOver="ShowTip(event, 'tt6', 'link90')" onMouseOut="HideTip('tt6')">factoryMethod</a> to create the edge instance.&nbsp; This handler is built-into &lt;mxGraph.connectionHandler&gt; and enabled using <a href="../view/mxGraph-js.html#mxGraph.setConnectable" class=LFunction id=link91 onMouseOver="ShowTip(event, 'tt73', 'link91')" onMouseOut="HideTip('tt73')">mxGraph.setConnectable</a>.</p><h4 class=CHeading>Example</h4><blockquote><pre class="prettyprint">new mxConnectionHandler(graph, function(source, target, style)
{
edge = new mxCell('', new mxGeometry());
edge.setEdge(true);
edge.setStyle(style);
edge.geometry.relative = true;
return edge;
});</pre></blockquote><p>Here is an alternative solution that just sets a specific user object for new edges by overriding <a href="#mxConnectionHandler.insertEdge" class=LFunction id=link92 onMouseOver="ShowTip(event, 'tt69', 'link92')" onMouseOut="HideTip('tt69')">insertEdge</a>.</p><blockquote><pre class="prettyprint">mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
mxConnectionHandler.prototype.insertEdge = function(parent, id, value, source, target, style)
{
value = 'Test';
return mxConnectionHandlerInsertEdge.apply(this, arguments);
};</pre></blockquote><h4 class=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 <a href="#mxConnectionHandler.connect" class=LFunction id=link93 onMouseOver="ShowTip(event, 'tt1', 'link93')" onMouseOut="HideTip('tt1')">connect</a>.&nbsp; The new edge is created using <a href="#mxConnectionHandler.createEdge" class=LFunction id=link94 onMouseOver="ShowTip(event, 'tt71', 'link94')" onMouseOut="HideTip('tt71')">createEdge</a> which in turn uses <a href="#mxConnectionHandler.factoryMethod" class=LVariable id=link95 onMouseOver="ShowTip(event, 'tt6', 'link95')" onMouseOut="HideTip('tt6')">factoryMethod</a> or creates a new default edge.</p><p>The handler uses a &ldquo;highlight-paradigm&rdquo; for indicating if a cell is being used as a source or target terminal, as seen in MS Visio and other products.&nbsp; In order to allow both, moving and connecting cells at the same time, <a href="../util/mxConstants-js.html#mxConstants.DEFAULT_HOTSPOT" class=LVariable id=link96 onMouseOver="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.&nbsp; 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.&nbsp; In addition, <a href="../util/mxConstants-js.html#mxConstants.MIN_HOTSPOT_SIZE" class=LVariable id=link97 onMouseOver="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.&nbsp; 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 <a href="#mxConnectionHandler.createIcons" class=LFunction id=link98 onMouseOver="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.&nbsp; If this icon is specified, then new connections can only be created if the image is clicked while the cell is being highlighted.&nbsp; The <a href="#mxConnectionHandler.createIcons" class=LFunction id=link99 onMouseOver="ShowTip(event, 'tt48', 'link99')" onMouseOut="HideTip('tt48')">createIcons</a> hook may be overridden to create more than one <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link100 onMouseOver="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 &ldquo;connect image&rdquo; whenever the mouse is over the cell, an DEFAULT_HOTSPOT of 1 should be used:</p><blockquote><pre class="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><pre class="prettyprint">mxConstants.HIGHLIGHT_COLOR = null;</pre></blockquote><p>To install the image, the connectImage field of the mxConnectionHandler must be assigned a new <a href="../util/mxImage-js.html#mxImage" class=LClass id=link101 onMouseOver="ShowTip(event, 'tt10', 'link101')" onMouseOut="HideTip('tt10')">mxImage</a> instance:</p><blockquote><pre class="prettyprint">mxConnectionHandler.prototype.connectImage = new mxImage('images/green-dot.gif', 14, 14);</pre></blockquote><p>This will use the green-dot.gif with a width and height of 14 pixels as the image to trigger new connections.&nbsp; In createIcons the icon field of the handler will be set in order to remember the icon that has been clicked for creating the new connection.&nbsp; This field will be available under selectedIcon in the connect method, which may be overridden to take the icon that triggered the new connection into account.&nbsp; This is useful if more than one icon may be used to create a connection.</p><!--START_ND_SUMMARY--><div class=Summary><div class=STitle>Summary</div><div class=SBorder><table border=0 cellspacing=0 cellpadding=0 class=STable><tr class="SMain"><td class=SEntry><a href="#mxConnectionHandler" >mxConnectionHandler</a></td><td class=SDescription>Graph event handler that creates new connections. </td></tr><tr class="SGroup SIndent1"><td class=SEntry><a href="#mxConnectionHandler.Events" >Events</a></td><td class=SDescription></td></tr><tr class="SEvent SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.mxEvent.START" >mxEvent.<wbr>START</a></td><td class=SDescription>Fires when a new connection is being created by the user. </td></tr><tr class="SEvent SIndent2"><td class=SEntry><a href="#mxConnectionHandler.mxEvent.CONNECT" >mxEvent.<wbr>CONNECT</a></td><td class=SDescription>Fires between begin- and endUpdate in <a href="#mxConnectionHandler.connect" class=LFunction id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">connect</a>. </td></tr><tr class="SEvent SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.mxEvent.RESET" >mxEvent.<wbr>RESET</a></td><td class=SDescription>Fires when the <a href="#mxConnectionHandler.reset" class=LFunction id=link2 onMouseOver="ShowTip(event, 'tt2', 'link2')" onMouseOut="HideTip('tt2')">reset</a> method is invoked.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.mxConnectionHandler" id=link3 onMouseOver="ShowTip(event, 'tt3', 'link3')" onMouseOut="HideTip('tt3')">mxConnectionHandler</a></td><td class=SDescription>Constructs an event handler that connects vertices using the specified factory method to create the new edges. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.graph" id=link4 onMouseOver="ShowTip(event, 'tt4', 'link4')" onMouseOut="HideTip('tt4')">graph</a></td><td class=SDescription>Reference to the enclosing <a href="../view/mxGraph-js.html#mxGraph" class=LClass id=link5 onMouseOver="ShowTip(event, 'tt5', 'link5')" onMouseOut="HideTip('tt5')">mxGraph</a>.</td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.factoryMethod" id=link6 onMouseOver="ShowTip(event, 'tt6', 'link6')" onMouseOut="HideTip('tt6')">factoryMethod</a></td><td class=SDescription>Function that is used for creating new edges. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.moveIconFront" id=link7 onMouseOver="ShowTip(event, 'tt7', 'link7')" onMouseOut="HideTip('tt7')">moveIconFront</a></td><td class=SDescription>Specifies if icons should be displayed inside the graph container instead of the overlay pane. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.moveIconBack" id=link8 onMouseOver="ShowTip(event, 'tt8', 'link8')" onMouseOut="HideTip('tt8')">moveIconBack</a></td><td class=SDescription>Specifies if icons should be moved to the back of the overlay pane. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.connectImage" id=link9 onMouseOver="ShowTip(event, 'tt9', 'link9')" onMouseOut="HideTip('tt9')">connectImage</a></td><td class=SDescription><a href="../util/mxImage-js.html#mxImage" class=LClass id=link10 onMouseOver="ShowTip(event, 'tt10', 'link10')" onMouseOut="HideTip('tt10')">mxImage</a> that is used to trigger the creation of a new connection. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.targetConnectImage" id=link11 onMouseOver="ShowTip(event, 'tt11', 'link11')" onMouseOut="HideTip('tt11')">targetConnectImage</a></td><td class=SDescription>Specifies if the connect icon should be centered on the target state while connections are being previewed. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.enabled" id=link12 onMouseOver="ShowTip(event, 'tt12', 'link12')" onMouseOut="HideTip('tt12')">enabled</a></td><td class=SDescription>Specifies if events are handled. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.select" id=link13 onMouseOver="ShowTip(event, 'tt13', 'link13')" onMouseOut="HideTip('tt13')">select</a></td><td class=SDescription>Specifies if new edges should be selected. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.createTarget" id=link14 onMouseOver="ShowTip(event, 'tt14', 'link14')" onMouseOut="HideTip('tt14')">createTarget</a></td><td class=SDescription>Specifies if <a href="#mxConnectionHandler.createTargetVertex" class=LFunction id=link15 onMouseOver="ShowTip(event, 'tt15', 'link15')" onMouseOut="HideTip('tt15')">createTargetVertex</a> should be called if no target was under the mouse for the new connection. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.marker" id=link16 onMouseOver="ShowTip(event, 'tt16', 'link16')" onMouseOut="HideTip('tt16')">marker</a></td><td class=SDescription>Holds the &lt;mxTerminalMarker&gt; used for finding source and target cells.</td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.constraintHandler" id=link17 onMouseOver="ShowTip(event, 'tt17', 'link17')" onMouseOut="HideTip('tt17')">constraintHandler</a></td><td class=SDescription>Holds the <a href="mxConstraintHandler-js.html#mxConstraintHandler" class=LClass id=link18 onMouseOver="ShowTip(event, 'tt18', 'link18')" onMouseOut="HideTip('tt18')">mxConstraintHandler</a> used for drawing and highlighting constraints.</td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.error" id=link19 onMouseOver="ShowTip(event, 'tt19', 'link19')" onMouseOut="HideTip('tt19')">error</a></td><td class=SDescription>Holds the current validation error while connections are being created.</td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.waypointsEnabled" id=link20 onMouseOver="ShowTip(event, 'tt20', 'link20')" onMouseOut="HideTip('tt20')">waypointsEnabled</a></td><td class=SDescription>Specifies if single clicks should add waypoints on the new edge. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.ignoreMouseDown" id=link21 onMouseOver="ShowTip(event, 'tt21', 'link21')" onMouseOut="HideTip('tt21')">ignoreMouseDown</a></td><td class=SDescription>Specifies if the connection handler should ignore the state of the mouse button when highlighting the source. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.first" id=link22 onMouseOver="ShowTip(event, 'tt22', 'link22')" onMouseOut="HideTip('tt22')">first</a></td><td class=SDescription>Holds the <a href="../util/mxPoint-js.html#mxPoint" class=LClass id=link23 onMouseOver="ShowTip(event, 'tt23', 'link23')" onMouseOut="HideTip('tt23')">mxPoint</a> where the mouseDown took place while the handler is active.</td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.connectIconOffset" id=link24 onMouseOver="ShowTip(event, 'tt24', 'link24')" onMouseOut="HideTip('tt24')">connectIconOffset</a></td><td class=SDescription>Holds the offset for connect icons during connection preview. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.edgeState" id=link25 onMouseOver="ShowTip(event, 'tt25', 'link25')" onMouseOut="HideTip('tt25')">edgeState</a></td><td class=SDescription>Optional <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link26 onMouseOver="ShowTip(event, 'tt26', 'link26')" onMouseOut="HideTip('tt26')">mxCellState</a> that represents the preview edge while the handler is active. </td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.changeHandler" id=link27 onMouseOver="ShowTip(event, 'tt27', 'link27')" onMouseOut="HideTip('tt27')">changeHandler</a></td><td class=SDescription>Holds the change event listener for later removal.</td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.drillHandler" id=link28 onMouseOver="ShowTip(event, 'tt28', 'link28')" onMouseOut="HideTip('tt28')">drillHandler</a></td><td class=SDescription>Holds the drill event listener for later removal.</td></tr><tr class="SVariable SIndent2"><td class=SEntry><a href="#mxConnectionHandler.mouseDownCounter" id=link29 onMouseOver="ShowTip(event, 'tt29', 'link29')" onMouseOut="HideTip('tt29')">mouseDownCounter</a></td><td class=SDescription>Counts the number of mouseDown events since the start. </td></tr><tr class="SVariable SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.movePreviewAway" id=link30 onMouseOver="ShowTip(event, 'tt30', 'link30')" onMouseOut="HideTip('tt30')">movePreviewAway</a></td><td class=SDescription>Switch to enable moving the preview away from the mousepointer. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isEnabled" id=link31 onMouseOver="ShowTip(event, 'tt31', 'link31')" onMouseOut="HideTip('tt31')">isEnabled</a></td><td class=SDescription>Returns true if events are handled. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.setEnabled" id=link32 onMouseOver="ShowTip(event, 'tt32', 'link32')" onMouseOut="HideTip('tt32')">setEnabled</a></td><td class=SDescription>Enables or disables event handling. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isCreateTarget" id=link33 onMouseOver="ShowTip(event, 'tt33', 'link33')" onMouseOut="HideTip('tt33')">isCreateTarget</a></td><td class=SDescription>Returns <a href="#mxConnectionHandler.createTarget" class=LVariable id=link34 onMouseOver="ShowTip(event, 'tt14', 'link34')" onMouseOut="HideTip('tt14')">createTarget</a>.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.setCreateTarget" id=link35 onMouseOver="ShowTip(event, 'tt34', 'link35')" onMouseOut="HideTip('tt34')">setCreateTarget</a></td><td class=SDescription>Sets <a href="#mxConnectionHandler.createTarget" class=LVariable id=link36 onMouseOver="ShowTip(event, 'tt14', 'link36')" onMouseOut="HideTip('tt14')">createTarget</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.createShape" id=link37 onMouseOver="ShowTip(event, 'tt35', 'link37')" onMouseOut="HideTip('tt35')">createShape</a></td><td class=SDescription>Creates the preview shape for new connections.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.init" id=link38 onMouseOver="ShowTip(event, 'tt36', 'link38')" onMouseOut="HideTip('tt36')">init</a></td><td class=SDescription>Initializes the shapes required for this connection handler. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isConnectableCell" id=link39 onMouseOver="ShowTip(event, 'tt37', 'link39')" onMouseOut="HideTip('tt37')">isConnectableCell</a></td><td class=SDescription>Returns true if the given cell is connectable. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.createMarker" id=link40 onMouseOver="ShowTip(event, 'tt38', 'link40')" onMouseOut="HideTip('tt38')">createMarker</a></td><td class=SDescription>Creates and returns the <a href="mxCellMarker-js.html#mxCellMarker" class=LClass id=link41 onMouseOver="ShowTip(event, 'tt39', 'link41')" onMouseOut="HideTip('tt39')">mxCellMarker</a> used in <a href="#mxConnectionHandler.marker" class=LVariable id=link42 onMouseOver="ShowTip(event, 'tt16', 'link42')" onMouseOut="HideTip('tt16')">marker</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.start" id=link43 onMouseOver="ShowTip(event, 'tt40', 'link43')" onMouseOut="HideTip('tt40')">start</a></td><td class=SDescription>Starts a new connection for the given state and coordinates.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.isConnecting" id=link44 onMouseOver="ShowTip(event, 'tt41', 'link44')" onMouseOut="HideTip('tt41')">isConnecting</a></td><td class=SDescription>Returns true if the source terminal has been clicked and a new connection is currently being previewed.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isValidSource" id=link45 onMouseOver="ShowTip(event, 'tt42', 'link45')" onMouseOut="HideTip('tt42')">isValidSource</a></td><td class=SDescription>Returns <a href="../view/mxGraph-js.html#mxGraph.isValidSource" class=LFunction id=link46 onMouseOver="ShowTip(event, 'tt43', 'link46')" onMouseOut="HideTip('tt43')">mxGraph.isValidSource</a> for the given source terminal.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.isValidTarget" id=link47 onMouseOver="ShowTip(event, 'tt44', 'link47')" onMouseOut="HideTip('tt44')">isValidTarget</a></td><td class=SDescription>Returns true. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.validateConnection" id=link48 onMouseOver="ShowTip(event, 'tt45', 'link48')" onMouseOut="HideTip('tt45')">validateConnection</a></td><td class=SDescription>Returns the error message or an empty string if the connection for the given source target pair is not valid. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.getConnectImage" id=link49 onMouseOver="ShowTip(event, 'tt46', 'link49')" onMouseOut="HideTip('tt46')">getConnectImage</a></td><td class=SDescription>Hook to return the <a href="../util/mxImage-js.html#mxImage" class=LClass id=link50 onMouseOver="ShowTip(event, 'tt10', 'link50')" onMouseOut="HideTip('tt10')">mxImage</a> used for the connection icon of the given <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link51 onMouseOver="ShowTip(event, 'tt26', 'link51')" onMouseOut="HideTip('tt26')">mxCellState</a>. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.isMoveIconToFrontForState" id=link52 onMouseOver="ShowTip(event, 'tt47', 'link52')" onMouseOut="HideTip('tt47')">isMoveIconToFrontForState</a></td><td class=SDescription>Returns true if the state has a HTML label in the graph&rsquo;s container, otherwise it returns <a href="#mxConnectionHandler.moveIconFront" class=LVariable id=link53 onMouseOver="ShowTip(event, 'tt7', 'link53')" onMouseOut="HideTip('tt7')">moveIconFront</a>.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.createIcons" id=link54 onMouseOver="ShowTip(event, 'tt48', 'link54')" onMouseOut="HideTip('tt48')">createIcons</a></td><td class=SDescription>Creates the array <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link55 onMouseOver="ShowTip(event, 'tt49', 'link55')" onMouseOut="HideTip('tt49')">mxImageShapes</a> that represent the connect icons for the given <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link56 onMouseOver="ShowTip(event, 'tt26', 'link56')" onMouseOut="HideTip('tt26')">mxCellState</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.redrawIcons" id=link57 onMouseOver="ShowTip(event, 'tt50', 'link57')" onMouseOut="HideTip('tt50')">redrawIcons</a></td><td class=SDescription>Redraws the given array of <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link58 onMouseOver="ShowTip(event, 'tt49', 'link58')" onMouseOut="HideTip('tt49')">mxImageShapes</a>.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.redrawIcons" >redrawIcons</a></td><td class=SDescription>Redraws the given array of <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link59 onMouseOver="ShowTip(event, 'tt49', 'link59')" onMouseOut="HideTip('tt49')">mxImageShapes</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.destroyIcons" id=link60 onMouseOver="ShowTip(event, 'tt51', 'link60')" onMouseOut="HideTip('tt51')">destroyIcons</a></td><td class=SDescription>Destroys the connect icons and resets the respective state.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.isStartEvent" id=link61 onMouseOver="ShowTip(event, 'tt52', 'link61')" onMouseOut="HideTip('tt52')">isStartEvent</a></td><td class=SDescription>Returns true if the given mouse down event should start this handler. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.mouseDown" id=link62 onMouseOver="ShowTip(event, 'tt53', 'link62')" onMouseOut="HideTip('tt53')">mouseDown</a></td><td class=SDescription>Handles the event by initiating a new connection.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.isImmediateConnectSource" id=link63 onMouseOver="ShowTip(event, 'tt54', 'link63')" onMouseOut="HideTip('tt54')">isImmediateConnectSource</a></td><td class=SDescription>Returns true if a tap on the given source state should immediately start connecting. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.createEdgeState" id=link64 onMouseOver="ShowTip(event, 'tt55', 'link64')" onMouseOut="HideTip('tt55')">createEdgeState</a></td><td class=SDescription>Hook to return an <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link65 onMouseOver="ShowTip(event, 'tt26', 'link65')" onMouseOut="HideTip('tt26')">mxCellState</a> which may be used during the preview. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.updateCurrentState" id=link66 onMouseOver="ShowTip(event, 'tt56', 'link66')" onMouseOut="HideTip('tt56')">updateCurrentState</a></td><td class=SDescription>Updates the current state for a given mouse move event by using the <a href="#mxConnectionHandler.marker" class=LVariable id=link67 onMouseOver="ShowTip(event, 'tt16', 'link67')" onMouseOut="HideTip('tt16')">marker</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.convertWaypoint" id=link68 onMouseOver="ShowTip(event, 'tt57', 'link68')" onMouseOut="HideTip('tt57')">convertWaypoint</a></td><td class=SDescription>Converts the given point from screen coordinates to model coordinates.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.mouseMove" id=link69 onMouseOver="ShowTip(event, 'tt58', 'link69')" onMouseOut="HideTip('tt58')">mouseMove</a></td><td class=SDescription>Handles the event by updating the preview edge or by highlighting a possible source or target terminal.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.getTargetPerimeterPoint" id=link70 onMouseOver="ShowTip(event, 'tt59', 'link70')" onMouseOut="HideTip('tt59')">getTargetPerimeterPoint</a></td><td class=SDescription>Returns the perimeter point for the given target state.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.getSourcePerimeterPoint" id=link71 onMouseOver="ShowTip(event, 'tt60', 'link71')" onMouseOut="HideTip('tt60')">getSourcePerimeterPoint</a></td><td class=SDescription>Hook to update the icon position(s) based on a mouseOver event. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.updateIcons" id=link72 onMouseOver="ShowTip(event, 'tt61', 'link72')" onMouseOut="HideTip('tt61')">updateIcons</a></td><td class=SDescription>Hook to update the icon position(s) based on a mouseOver event. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.isStopEvent" id=link73 onMouseOver="ShowTip(event, 'tt62', 'link73')" onMouseOut="HideTip('tt62')">isStopEvent</a></td><td class=SDescription>Returns true if the given mouse up event should stop this handler. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.addWaypoint" id=link74 onMouseOver="ShowTip(event, 'tt63', 'link74')" onMouseOut="HideTip('tt63')">addWaypoint</a></td><td class=SDescription>Adds the waypoint for the given event to &lt;waypoints&gt;.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.mouseUp" id=link75 onMouseOver="ShowTip(event, 'tt64', 'link75')" onMouseOut="HideTip('tt64')">mouseUp</a></td><td class=SDescription>Handles the event by inserting the new connection.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.reset" id=link76 onMouseOver="ShowTip(event, 'tt2', 'link76')" onMouseOut="HideTip('tt2')">reset</a></td><td class=SDescription>Resets the state of this handler.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.drawPreview" id=link77 onMouseOver="ShowTip(event, 'tt65', 'link77')" onMouseOut="HideTip('tt65')">drawPreview</a></td><td class=SDescription>Redraws the preview edge using the color and width returned by <a href="#mxConnectionHandler.getEdgeColor" class=LFunction id=link78 onMouseOver="ShowTip(event, 'tt66', 'link78')" onMouseOut="HideTip('tt66')">getEdgeColor</a> and <a href="#mxConnectionHandler.getEdgeWidth" class=LFunction id=link79 onMouseOver="ShowTip(event, 'tt67', 'link79')" onMouseOut="HideTip('tt67')">getEdgeWidth</a>.</td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.getEdgeColor" id=link80 onMouseOver="ShowTip(event, 'tt66', 'link80')" onMouseOut="HideTip('tt66')">getEdgeColor</a></td><td class=SDescription>Returns the color used to draw the preview edge. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.getEdgeWidth" id=link81 onMouseOver="ShowTip(event, 'tt67', 'link81')" onMouseOut="HideTip('tt67')">getEdgeWidth</a></td><td class=SDescription>Returns the width used to draw the preview edge. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.connect" id=link82 onMouseOver="ShowTip(event, 'tt1', 'link82')" onMouseOut="HideTip('tt1')">connect</a></td><td class=SDescription>Connects the given source and target using a new edge. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.selectCells" id=link83 onMouseOver="ShowTip(event, 'tt68', 'link83')" onMouseOut="HideTip('tt68')">selectCells</a></td><td class=SDescription>Selects the given edge after adding a new connection. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.insertEdge" id=link84 onMouseOver="ShowTip(event, 'tt69', 'link84')" onMouseOut="HideTip('tt69')">insertEdge</a></td><td class=SDescription>Creates, inserts and returns the new edge for the given parameters. </td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.createTargetVertex" id=link85 onMouseOver="ShowTip(event, 'tt15', 'link85')" onMouseOut="HideTip('tt15')">createTargetVertex</a></td><td class=SDescription>Hook method for creating new vertices on the fly if no target was under the mouse. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.getAlignmentTolerance" id=link86 onMouseOver="ShowTip(event, 'tt70', 'link86')" onMouseOut="HideTip('tt70')">getAlignmentTolerance</a></td><td class=SDescription>Returns the tolerance for aligning new targets to sources.</td></tr><tr class="SFunction SIndent2 SMarked"><td class=SEntry><a href="#mxConnectionHandler.createEdge" id=link87 onMouseOver="ShowTip(event, 'tt71', 'link87')" onMouseOut="HideTip('tt71')">createEdge</a></td><td class=SDescription>Creates and returns a new edge using <a href="#mxConnectionHandler.factoryMethod" class=LVariable id=link88 onMouseOver="ShowTip(event, 'tt6', 'link88')" onMouseOut="HideTip('tt6')">factoryMethod</a> if one exists. </td></tr><tr class="SFunction SIndent2"><td class=SEntry><a href="#mxConnectionHandler.destroy" id=link89 onMouseOver="ShowTip(event, 'tt72', 'link89')" onMouseOut="HideTip('tt72')">destroy</a></td><td class=SDescription>Destroys the handler and all its resources and DOM nodes. </td></tr></table></div></div><!--END_ND_SUMMARY--></div></div></div>
<div class="CGroup"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.Events"></a>Events</h3></div></div>
<div class="CEvent"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mxEvent.START"></a>mxEvent.<wbr>START</h3><div class=CBody><p>Fires when a new connection is being created by the user.&nbsp; The &lt;code&gt;state&lt;/code&gt; property contains the state of the source cell.</p></div></div></div>
<div class="CEvent"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mxEvent.CONNECT"></a>mxEvent.<wbr>CONNECT</h3><div class=CBody><p>Fires between begin- and endUpdate in <a href="#mxConnectionHandler.connect" class=LFunction id=link102 onMouseOver="ShowTip(event, 'tt1', 'link102')" onMouseOut="HideTip('tt1')">connect</a>.&nbsp; The &lt;code&gt;cell&lt;/code&gt; property contains the inserted edge, the &lt;code&gt;event&lt;/code&gt; and &lt;code&gt;target&lt;/code&gt; properties contain the respective arguments that were passed to <a href="#mxConnectionHandler.connect" class=LFunction id=link103 onMouseOver="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.&nbsp; Depending on the logic in the handler, this doesn&rsquo;t necessarily have to be the target of the inserted edge.&nbsp; To print the source, target or any optional ports IDs that the edge is connected to, the following code can be used.&nbsp; To get more details about the actual connection point, <a href="../view/mxGraph-js.html#mxGraph.getConnectionConstraint" class=LFunction id=link104 onMouseOver="ShowTip(event, 'tt76', 'link104')" onMouseOut="HideTip('tt76')">mxGraph.getConnectionConstraint</a> can be used.&nbsp; To resolve the port IDs, use <a href="../model/mxGraphModel-js.html#mxGraphModel.getCell" class=LFunction id=link105 onMouseOver="ShowTip(event, 'tt77', 'link105')" onMouseOut="HideTip('tt77')">mxGraphModel.getCell</a>.</p><blockquote><pre class="prettyprint">graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt)
{
var edge = evt.getProperty('cell');
var source = graph.getModel().getTerminal(edge, true);
var target = graph.getModel().getTerminal(edge, false);
var style = graph.getCellStyle(edge);
var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
var targetPortId = style[mxConstants.STYLE_TARGET_PORT];
mxLog.show();
mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});</pre></blockquote></div></div></div>
<div class="CEvent"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mxEvent.RESET"></a>mxEvent.<wbr>RESET</h3><div class=CBody><p>Fires when the <a href="#mxConnectionHandler.reset" class=LFunction id=link106 onMouseOver="ShowTip(event, 'tt2', 'link106')" onMouseOut="HideTip('tt2')">reset</a> method is invoked.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mxConnectionHandler"></a>mxConnectionHandler</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>function mxConnectionHandler(</td><td class=PParameter nowrap>graph,</td></tr><tr><td></td><td class=PParameter nowrap>factoryMethod</td><td class=PAfterParameters 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.&nbsp; Modify &lt;mxConstants.ACTIVE_REGION&gt; to setup the region on a cell which triggers the creation of a new connection or use connect icons as explained above.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>graph</td><td class=CDLDescription>Reference to the enclosing <a href="../view/mxGraph-js.html#mxGraph" class=LClass id=link107 onMouseOver="ShowTip(event, 'tt5', 'link107')" onMouseOut="HideTip('tt5')">mxGraph</a>.</td></tr><tr><td class=CDLEntry>factoryMethod</td><td class=CDLDescription>Optional function to create the edge.&nbsp; The function takes the source and target <a href="../model/mxCell-js.html#mxCell" class=LClass id=link108 onMouseOver="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.&nbsp; It returns the <a href="../model/mxCell-js.html#mxCell" class=LClass id=link109 onMouseOver="ShowTip(event, 'tt78', 'link109')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the new edge.</td></tr></table></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.graph"></a>graph</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.graph</td></tr></table></blockquote><p>Reference to the enclosing <a href="../view/mxGraph-js.html#mxGraph" class=LClass id=link110 onMouseOver="ShowTip(event, 'tt5', 'link110')" onMouseOut="HideTip('tt5')">mxGraph</a>.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.factoryMethod"></a>factoryMethod</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.factoryMethod</td></tr></table></blockquote><p>Function that is used for creating new edges.&nbsp; The function takes the source and target <a href="../model/mxCell-js.html#mxCell" class=LClass id=link111 onMouseOver="ShowTip(event, 'tt78', 'link111')" onMouseOut="HideTip('tt78')">mxCell</a> as the first and second argument and returns a new <a href="../model/mxCell-js.html#mxCell" class=LClass id=link112 onMouseOver="ShowTip(event, 'tt78', 'link112')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the edge.&nbsp; This is used in <a href="#mxConnectionHandler.createEdge" class=LFunction id=link113 onMouseOver="ShowTip(event, 'tt71', 'link113')" onMouseOut="HideTip('tt71')">createEdge</a>.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.moveIconFront"></a>moveIconFront</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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.&nbsp; This is used for HTML labels on vertices which hide the connect icon.&nbsp; This has precendence over <a href="#mxConnectionHandler.moveIconBack" class=LVariable id=link114 onMouseOver="ShowTip(event, 'tt8', 'link114')" onMouseOut="HideTip('tt8')">moveIconBack</a> when set to true.&nbsp; Default is false.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.moveIconBack"></a>moveIconBack</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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.&nbsp; This can be set to true if the icons of the connection handler conflict with other handles, such as the vertex label move handle.&nbsp; Default is false.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.connectImage"></a>connectImage</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.connectImage</td></tr></table></blockquote><p><a href="../util/mxImage-js.html#mxImage" class=LClass id=link115 onMouseOver="ShowTip(event, 'tt10', 'link115')" onMouseOut="HideTip('tt10')">mxImage</a> that is used to trigger the creation of a new connection.&nbsp; This is used in <a href="#mxConnectionHandler.createIcons" class=LFunction id=link116 onMouseOver="ShowTip(event, 'tt48', 'link116')" onMouseOut="HideTip('tt48')">createIcons</a>.&nbsp; Default is null.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.targetConnectImage"></a>targetConnectImage</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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.&nbsp; Default is false.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.enabled"></a>enabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.enabled</td></tr></table></blockquote><p>Specifies if events are handled.&nbsp; Default is true.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.select"></a>select</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.select</td></tr></table></blockquote><p>Specifies if new edges should be selected.&nbsp; Default is true.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createTarget"></a>createTarget</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.createTarget</td></tr></table></blockquote><p>Specifies if <a href="#mxConnectionHandler.createTargetVertex" class=LFunction id=link117 onMouseOver="ShowTip(event, 'tt15', 'link117')" onMouseOut="HideTip('tt15')">createTargetVertex</a> should be called if no target was under the mouse for the new connection.&nbsp; Setting this to true means the connection will be drawn as valid if no target is under the mouse, and <a href="#mxConnectionHandler.createTargetVertex" class=LFunction id=link118 onMouseOver="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 <a href="#mxConnectionHandler.createTargetVertex" class=LFunction id=link119 onMouseOver="ShowTip(event, 'tt15', 'link119')" onMouseOut="HideTip('tt15')">createTargetVertex</a>, which can be overridden to create a new target.&nbsp; Default is false.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.marker"></a>marker</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.marker</td></tr></table></blockquote><p>Holds the &lt;mxTerminalMarker&gt; used for finding source and target cells.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.constraintHandler"></a>constraintHandler</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.constraintHandler</td></tr></table></blockquote><p>Holds the <a href="mxConstraintHandler-js.html#mxConstraintHandler" class=LClass id=link120 onMouseOver="ShowTip(event, 'tt18', 'link120')" onMouseOut="HideTip('tt18')">mxConstraintHandler</a> used for drawing and highlighting constraints.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.error"></a>error</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.waypointsEnabled"></a>waypointsEnabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.waypointsEnabled</td></tr></table></blockquote><p>Specifies if single clicks should add waypoints on the new edge.&nbsp; Default is false.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.ignoreMouseDown"></a>ignoreMouseDown</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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.&nbsp; Default is false, that is, the handler only highlights the source if no button is being pressed.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.first"></a>first</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.first</td></tr></table></blockquote><p>Holds the <a href="../util/mxPoint-js.html#mxPoint" class=LClass id=link121 onMouseOver="ShowTip(event, 'tt23', 'link121')" onMouseOut="HideTip('tt23')">mxPoint</a> where the mouseDown took place while the handler is active.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.connectIconOffset"></a>connectIconOffset</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.connectIconOffset</td></tr></table></blockquote><p>Holds the offset for connect icons during connection preview.&nbsp; Default is mxPoint(0, <a href="../util/mxConstants-js.html#mxConstants.TOOLTIP_VERTICAL_OFFSET" class=LVariable id=link122 onMouseOver="ShowTip(event, 'tt79', 'link122')" onMouseOut="HideTip('tt79')">mxConstants.TOOLTIP_VERTICAL_OFFSET</a>).&nbsp; Note that placing the icon under the mouse pointer with an offset of (0,0) will affect hit detection.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.edgeState"></a>edgeState</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.edgeState</td></tr></table></blockquote><p>Optional <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link123 onMouseOver="ShowTip(event, 'tt26', 'link123')" onMouseOut="HideTip('tt26')">mxCellState</a> that represents the preview edge while the handler is active.&nbsp; This is created in <a href="#mxConnectionHandler.createEdgeState" class=LFunction id=link124 onMouseOver="ShowTip(event, 'tt55', 'link124')" onMouseOut="HideTip('tt55')">createEdgeState</a>.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.changeHandler"></a>changeHandler</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.changeHandler</td></tr></table></blockquote><p>Holds the change event listener for later removal.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.drillHandler"></a>drillHandler</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.drillHandler</td></tr></table></blockquote><p>Holds the drill event listener for later removal.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mouseDownCounter"></a>mouseDownCounter</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.mouseDownCounter</td></tr></table></blockquote><p>Counts the number of mouseDown events since the start.&nbsp; The initial mouse down event counts as 1.</p></div></div></div>
<div class="CVariable"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.movePreviewAway"></a>movePreviewAway</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.movePreviewAway</td></tr></table></blockquote><p>Switch to enable moving the preview away from the mousepointer.&nbsp; 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.&nbsp; Default is the value of <a href="../mxClient-js.html#mxClient.IS_VML" class=LVariable id=link125 onMouseOver="ShowTip(event, 'tt80', 'link125')" onMouseOut="HideTip('tt80')">mxClient.IS_VML</a>.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isEnabled"></a>isEnabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.isEnabled = function()</td></tr></table></blockquote><p>Returns true if events are handled.&nbsp; This implementation returns <a href="#mxConnectionHandler.enabled" class=LVariable id=link126 onMouseOver="ShowTip(event, 'tt12', 'link126')" onMouseOut="HideTip('tt12')">enabled</a>.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.setEnabled"></a>setEnabled</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.setEnabled = function(</td><td class=PParameter nowrap>enabled</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Enables or disables event handling.&nbsp; This implementation updates <a href="#mxConnectionHandler.enabled" class=LVariable id=link127 onMouseOver="ShowTip(event, 'tt12', 'link127')" onMouseOut="HideTip('tt12')">enabled</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>enabled</td><td class=CDLDescription>Boolean that specifies the new enabled state.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isCreateTarget"></a>isCreateTarget</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.isCreateTarget = function()</td></tr></table></blockquote><p>Returns <a href="#mxConnectionHandler.createTarget" class=LVariable id=link128 onMouseOver="ShowTip(event, 'tt14', 'link128')" onMouseOut="HideTip('tt14')">createTarget</a>.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.setCreateTarget"></a>setCreateTarget</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.setCreateTarget = function(</td><td class=PParameter nowrap>value</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Sets <a href="#mxConnectionHandler.createTarget" class=LVariable id=link129 onMouseOver="ShowTip(event, 'tt14', 'link129')" onMouseOut="HideTip('tt14')">createTarget</a>.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createShape"></a>createShape</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.createShape = function()</td></tr></table></blockquote><p>Creates the preview shape for new connections.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.init"></a>init</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.init = function()</td></tr></table></blockquote><p>Initializes the shapes required for this connection handler.&nbsp; This should be invoked if &lt;mxGraph.container&gt; is assigned after the connection handler has been created.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isConnectableCell"></a>isConnectableCell</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isConnectableCell = function(</td><td class=PParameter nowrap>cell</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given cell is connectable.&nbsp; This is a hook to disable floating connections.&nbsp; This implementation returns true.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createMarker"></a>createMarker</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.createMarker = function()</td></tr></table></blockquote><p>Creates and returns the <a href="mxCellMarker-js.html#mxCellMarker" class=LClass id=link130 onMouseOver="ShowTip(event, 'tt39', 'link130')" onMouseOut="HideTip('tt39')">mxCellMarker</a> used in <a href="#mxConnectionHandler.marker" class=LVariable id=link131 onMouseOver="ShowTip(event, 'tt16', 'link131')" onMouseOut="HideTip('tt16')">marker</a>.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.start"></a>start</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.start = function(</td><td class=PParameter nowrap>state,</td></tr><tr><td></td><td class=PParameter nowrap>x,</td></tr><tr><td></td><td class=PParameter nowrap>y,</td></tr><tr><td></td><td class=PParameter nowrap>edgeState</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Starts a new connection for the given state and coordinates.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isConnecting"></a>isConnecting</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isValidSource"></a>isValidSource</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isValidSource = function(</td><td class=PParameter nowrap>cell</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns <a href="../view/mxGraph-js.html#mxGraph.isValidSource" class=LFunction id=link132 onMouseOver="ShowTip(event, 'tt43', 'link132')" onMouseOut="HideTip('tt43')">mxGraph.isValidSource</a> for the given source terminal.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>cell</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link133 onMouseOver="ShowTip(event, 'tt78', 'link133')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the source terminal.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isValidTarget"></a>isValidTarget</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isValidTarget = function(</td><td class=PParameter nowrap>cell</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true.&nbsp; The call to <a href="../view/mxGraph-js.html#mxGraph.isValidTarget" class=LFunction id=link134 onMouseOver="ShowTip(event, 'tt81', 'link134')" onMouseOut="HideTip('tt81')">mxGraph.isValidTarget</a> is implicit by calling <a href="../view/mxGraph-js.html#mxGraph.getEdgeValidationError" class=LFunction id=link135 onMouseOver="ShowTip(event, 'tt82', 'link135')" onMouseOut="HideTip('tt82')">mxGraph.getEdgeValidationError</a> in <a href="#mxConnectionHandler.validateConnection" class=LFunction id=link136 onMouseOver="ShowTip(event, 'tt45', 'link136')" onMouseOut="HideTip('tt45')">validateConnection</a>.&nbsp; This is an additional hook for disabling certain targets in this specific handler.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>cell</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link137 onMouseOver="ShowTip(event, 'tt78', 'link137')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the target terminal.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.validateConnection"></a>validateConnection</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.validateConnection = function(</td><td class=PParameter nowrap>source,</td></tr><tr><td></td><td class=PParameter nowrap>target</td><td class=PAfterParameters 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.&nbsp; Otherwise it returns null.&nbsp; This implementation uses <a href="../view/mxGraph-js.html#mxGraph.getEdgeValidationError" class=LFunction id=link138 onMouseOver="ShowTip(event, 'tt82', 'link138')" onMouseOut="HideTip('tt82')">mxGraph.getEdgeValidationError</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>source</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link139 onMouseOver="ShowTip(event, 'tt78', 'link139')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the source terminal.</td></tr><tr><td class=CDLEntry>target</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link140 onMouseOver="ShowTip(event, 'tt78', 'link140')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the target terminal.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getConnectImage"></a>getConnectImage</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.getConnectImage = function(</td><td class=PParameter nowrap>state</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to return the <a href="../util/mxImage-js.html#mxImage" class=LClass id=link141 onMouseOver="ShowTip(event, 'tt10', 'link141')" onMouseOut="HideTip('tt10')">mxImage</a> used for the connection icon of the given <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link142 onMouseOver="ShowTip(event, 'tt26', 'link142')" onMouseOut="HideTip('tt26')">mxCellState</a>.&nbsp; This implementation returns <a href="#mxConnectionHandler.connectImage" class=LVariable id=link143 onMouseOver="ShowTip(event, 'tt9', 'link143')" onMouseOut="HideTip('tt9')">connectImage</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link144 onMouseOver="ShowTip(event, 'tt26', 'link144')" onMouseOut="HideTip('tt26')">mxCellState</a> whose connect image should be returned.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isMoveIconToFrontForState"></a>isMoveIconToFrontForState</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isMoveIconToFrontForState = function(</td><td class=PParameter nowrap>state</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the state has a HTML label in the graph&rsquo;s container, otherwise it returns <a href="#mxConnectionHandler.moveIconFront" class=LVariable id=link145 onMouseOver="ShowTip(event, 'tt7', 'link145')" onMouseOut="HideTip('tt7')">moveIconFront</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link146 onMouseOver="ShowTip(event, 'tt26', 'link146')" onMouseOut="HideTip('tt26')">mxCellState</a> whose connect icons should be returned.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createIcons"></a>createIcons</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.createIcons = function(</td><td class=PParameter nowrap>state</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates the array <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link147 onMouseOver="ShowTip(event, 'tt49', 'link147')" onMouseOut="HideTip('tt49')">mxImageShapes</a> that represent the connect icons for the given <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link148 onMouseOver="ShowTip(event, 'tt26', 'link148')" onMouseOut="HideTip('tt26')">mxCellState</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link149 onMouseOver="ShowTip(event, 'tt26', 'link149')" onMouseOut="HideTip('tt26')">mxCellState</a> whose connect icons should be returned.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.redrawIcons"></a>redrawIcons</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.redrawIcons = function(</td><td class=PParameter nowrap>icons,</td></tr><tr><td></td><td class=PParameter nowrap>state</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Redraws the given array of <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link150 onMouseOver="ShowTip(event, 'tt49', 'link150')" onMouseOut="HideTip('tt49')">mxImageShapes</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>icons</td><td class=CDLDescription>Optional array of <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link151 onMouseOver="ShowTip(event, 'tt49', 'link151')" onMouseOut="HideTip('tt49')">mxImageShapes</a> to be redrawn.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.redrawIcons"></a>redrawIcons</h3><div class=CBody><p>Redraws the given array of <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link152 onMouseOver="ShowTip(event, 'tt49', 'link152')" onMouseOut="HideTip('tt49')">mxImageShapes</a>.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>icons</td><td class=CDLDescription>Optional array of <a href="../shape/mxImageShape-js.html#mxImageShape" class=LClass id=link153 onMouseOver="ShowTip(event, 'tt49', 'link153')" onMouseOut="HideTip('tt49')">mxImageShapes</a> to be redrawn.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.destroyIcons"></a>destroyIcons</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isStartEvent"></a>isStartEvent</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isStartEvent = function(</td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given mouse down event should start this handler.&nbsp; The This implementation returns true if the event does not force marquee selection, and the currentConstraint and currentFocus of the <a href="#mxConnectionHandler.constraintHandler" class=LVariable id=link154 onMouseOver="ShowTip(event, 'tt17', 'link154')" onMouseOut="HideTip('tt17')">constraintHandler</a> are not null, or &lt;previous&gt; and <a href="#mxConnectionHandler.error" class=LVariable id=link155 onMouseOver="ShowTip(event, 'tt19', 'link155')" onMouseOut="HideTip('tt19')">error</a> are not null and &lt;icons&gt; is null or &lt;icons&gt; and &lt;icon&gt; are not null.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mouseDown"></a>mouseDown</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.mouseDown = function(</td><td class=PParameter nowrap>sender,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by initiating a new connection.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isImmediateConnectSource"></a>isImmediateConnectSource</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isImmediateConnectSource = function(</td><td class=PParameter nowrap>state</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if a tap on the given source state should immediately start connecting.&nbsp; This implementation returns true if the state is not movable in the graph.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createEdgeState"></a>createEdgeState</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.createEdgeState = function(</td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to return an <a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link156 onMouseOver="ShowTip(event, 'tt26', 'link156')" onMouseOut="HideTip('tt26')">mxCellState</a> which may be used during the preview.&nbsp; This implementation returns null.</p><h4 class=CHeading>Use the following code to create a preview for an existing edge style</h4><blockquote><pre class="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));
};</pre></blockquote></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.updateCurrentState"></a>updateCurrentState</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.updateCurrentState = function(</td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Updates the current state for a given mouse move event by using the <a href="#mxConnectionHandler.marker" class=LVariable id=link157 onMouseOver="ShowTip(event, 'tt16', 'link157')" onMouseOut="HideTip('tt16')">marker</a>.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.convertWaypoint"></a>convertWaypoint</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.convertWaypoint = function(</td><td class=PParameter nowrap>point</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Converts the given point from screen coordinates to model coordinates.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mouseMove"></a>mouseMove</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.mouseMove = function(</td><td class=PParameter nowrap>sender,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters 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>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getTargetPerimeterPoint"></a>getTargetPerimeterPoint</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.getTargetPerimeterPoint = function(</td><td class=PParameter nowrap>state,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the perimeter point for the given target state.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link158 onMouseOver="ShowTip(event, 'tt26', 'link158')" onMouseOut="HideTip('tt26')">mxCellState</a> that represents the target cell state.</td></tr><tr><td class=CDLEntry>me</td><td class=CDLDescription><a href="../util/mxMouseEvent-js.html#mxMouseEvent" class=LClass id=link159 onMouseOver="ShowTip(event, 'tt83', 'link159')" onMouseOut="HideTip('tt83')">mxMouseEvent</a> that represents the mouse move.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getSourcePerimeterPoint"></a>getSourcePerimeterPoint</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.getSourcePerimeterPoint = function(</td><td class=PParameter nowrap>state,</td></tr><tr><td></td><td class=PParameter nowrap>next,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to update the icon position(s) based on a mouseOver event.&nbsp; This is an empty implementation.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link160 onMouseOver="ShowTip(event, 'tt26', 'link160')" onMouseOut="HideTip('tt26')">mxCellState</a> that represents the target cell state.</td></tr><tr><td class=CDLEntry>next</td><td class=CDLDescription><a href="../util/mxPoint-js.html#mxPoint" class=LClass id=link161 onMouseOver="ShowTip(event, 'tt23', 'link161')" onMouseOut="HideTip('tt23')">mxPoint</a> that represents the next point along the previewed edge.</td></tr><tr><td class=CDLEntry>me</td><td class=CDLDescription><a href="../util/mxMouseEvent-js.html#mxMouseEvent" class=LClass id=link162 onMouseOver="ShowTip(event, 'tt83', 'link162')" onMouseOut="HideTip('tt83')">mxMouseEvent</a> that represents the mouse move.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.updateIcons"></a>updateIcons</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.updateIcons = function(</td><td class=PParameter nowrap>state,</td></tr><tr><td></td><td class=PParameter nowrap>icons,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Hook to update the icon position(s) based on a mouseOver event.&nbsp; This is an empty implementation.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>state</td><td class=CDLDescription><a href="../view/mxCellState-js.html#mxCellState" class=LClass id=link163 onMouseOver="ShowTip(event, 'tt26', 'link163')" onMouseOut="HideTip('tt26')">mxCellState</a> under the mouse.</td></tr><tr><td class=CDLEntry>icons</td><td class=CDLDescription>Array of currently displayed icons.</td></tr><tr><td class=CDLEntry>me</td><td class=CDLDescription><a href="../util/mxMouseEvent-js.html#mxMouseEvent" class=LClass id=link164 onMouseOver="ShowTip(event, 'tt83', 'link164')" onMouseOut="HideTip('tt83')">mxMouseEvent</a> that contains the mouse event.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.isStopEvent"></a>isStopEvent</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isStopEvent = function(</td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the given mouse up event should stop this handler.&nbsp; The connection will be created if <a href="#mxConnectionHandler.error" class=LVariable id=link165 onMouseOver="ShowTip(event, 'tt19', 'link165')" onMouseOut="HideTip('tt19')">error</a> is null.&nbsp; Note that this is only called if <a href="#mxConnectionHandler.waypointsEnabled" class=LVariable id=link166 onMouseOver="ShowTip(event, 'tt20', 'link166')" onMouseOut="HideTip('tt20')">waypointsEnabled</a> is true.&nbsp; This implemtation returns true if there is a cell state in the given event.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.addWaypoint"></a>addWaypoint</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.addWaypointForEvent = function(</td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Adds the waypoint for the given event to &lt;waypoints&gt;.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.mouseUp"></a>mouseUp</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.mouseUp = function(</td><td class=PParameter nowrap>sender,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Handles the event by inserting the new connection.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.reset"></a>reset</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.reset = function()</td></tr></table></blockquote><p>Resets the state of this handler.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.drawPreview"></a>drawPreview</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.drawPreview = function()</td></tr></table></blockquote><p>Redraws the preview edge using the color and width returned by <a href="#mxConnectionHandler.getEdgeColor" class=LFunction id=link167 onMouseOver="ShowTip(event, 'tt66', 'link167')" onMouseOut="HideTip('tt66')">getEdgeColor</a> and <a href="#mxConnectionHandler.getEdgeWidth" class=LFunction id=link168 onMouseOver="ShowTip(event, 'tt67', 'link168')" onMouseOut="HideTip('tt67')">getEdgeWidth</a>.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getEdgeColor"></a>getEdgeColor</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.getEdgeColor = function(</td><td class=PParameter nowrap>valid</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the color used to draw the preview edge.&nbsp; This returns green if there is no edge validation error and red otherwise.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>valid</td><td class=CDLDescription>Boolean indicating if the color for a valid edge should be returned.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getEdgeWidth"></a>getEdgeWidth</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.getEdgeWidth = function(</td><td class=PParameter nowrap>valid</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the width used to draw the preview edge.&nbsp; This returns 3 if there is no edge validation error and 1 otherwise.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>valid</td><td class=CDLDescription>Boolean indicating if the width for a valid edge should be returned.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.connect"></a>connect</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.connect = function(</td><td class=PParameter nowrap>source,</td></tr><tr><td></td><td class=PParameter nowrap>target,</td></tr><tr><td></td><td class=PParameter nowrap>evt,</td></tr><tr><td></td><td class=PParameter nowrap>dropTarget</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Connects the given source and target using a new edge.&nbsp; This implementation uses <a href="#mxConnectionHandler.createEdge" class=LFunction id=link169 onMouseOver="ShowTip(event, 'tt71', 'link169')" onMouseOut="HideTip('tt71')">createEdge</a> to create the edge.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>source</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link170 onMouseOver="ShowTip(event, 'tt78', 'link170')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the source terminal.</td></tr><tr><td class=CDLEntry>target</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link171 onMouseOver="ShowTip(event, 'tt78', 'link171')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the target terminal.</td></tr><tr><td class=CDLEntry>evt</td><td class=CDLDescription>Mousedown event of the connect gesture.</td></tr><tr><td class=CDLEntry>dropTarget</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link172 onMouseOver="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>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.selectCells"></a>selectCells</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.selectCells = function(</td><td class=PParameter nowrap>edge,</td></tr><tr><td></td><td class=PParameter nowrap>target</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Selects the given edge after adding a new connection.&nbsp; The target argument contains the target vertex if one has been inserted.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.insertEdge"></a>insertEdge</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.insertEdge = function(</td><td class=PParameter nowrap>parent,</td></tr><tr><td></td><td class=PParameter nowrap>id,</td></tr><tr><td></td><td class=PParameter nowrap>value,</td></tr><tr><td></td><td class=PParameter nowrap>source,</td></tr><tr><td></td><td class=PParameter nowrap>target,</td></tr><tr><td></td><td class=PParameter nowrap>style</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates, inserts and returns the new edge for the given parameters.&nbsp; This implementation does only use <a href="#mxConnectionHandler.createEdge" class=LFunction id=link173 onMouseOver="ShowTip(event, 'tt71', 'link173')" onMouseOut="HideTip('tt71')">createEdge</a> if <a href="#mxConnectionHandler.factoryMethod" class=LVariable id=link174 onMouseOver="ShowTip(event, 'tt6', 'link174')" onMouseOut="HideTip('tt6')">factoryMethod</a> is defined, otherwise <a href="../view/mxGraph-js.html#mxGraph.insertEdge" class=LFunction id=link175 onMouseOver="ShowTip(event, 'tt84', 'link175')" onMouseOut="HideTip('tt84')">mxGraph.insertEdge</a> will be used.</p></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createTargetVertex"></a>createTargetVertex</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.createTargetVertex = function(</td><td class=PParameter nowrap>evt,</td></tr><tr><td></td><td class=PParameter nowrap>source</td><td class=PAfterParameters 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.&nbsp; This is only called if <a href="#mxConnectionHandler.createTarget" class=LVariable id=link176 onMouseOver="ShowTip(event, 'tt14', 'link176')" onMouseOut="HideTip('tt14')">createTarget</a> is true and returns null.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>evt</td><td class=CDLDescription>Mousedown event of the connect gesture.</td></tr><tr><td class=CDLEntry>source</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link177 onMouseOver="ShowTip(event, 'tt78', 'link177')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the source terminal.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.getAlignmentTolerance"></a>getAlignmentTolerance</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.createEdge"></a>createEdge</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.createEdge = function(</td><td class=PParameter nowrap>value,</td></tr><tr><td></td><td class=PParameter nowrap>source,</td></tr><tr><td></td><td class=PParameter nowrap>target,</td></tr><tr><td></td><td class=PParameter nowrap>style</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote><p>Creates and returns a new edge using <a href="#mxConnectionHandler.factoryMethod" class=LVariable id=link178 onMouseOver="ShowTip(event, 'tt6', 'link178')" onMouseOut="HideTip('tt6')">factoryMethod</a> if one exists.&nbsp; If no factory method is defined, then a new default edge is returned.&nbsp; The source and target arguments are informal, the actual connection is setup later by the caller of this function.</p><h4 class=CHeading>Parameters</h4><table border=0 cellspacing=0 cellpadding=0 class=CDescriptionList><tr><td class=CDLEntry>value</td><td class=CDLDescription>Value to be used for creating the edge.</td></tr><tr><td class=CDLEntry>source</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link179 onMouseOver="ShowTip(event, 'tt78', 'link179')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the source terminal.</td></tr><tr><td class=CDLEntry>target</td><td class=CDLDescription><a href="../model/mxCell-js.html#mxCell" class=LClass id=link180 onMouseOver="ShowTip(event, 'tt78', 'link180')" onMouseOut="HideTip('tt78')">mxCell</a> that represents the target terminal.</td></tr><tr><td class=CDLEntry>style</td><td class=CDLDescription>Optional style from the preview edge.</td></tr></table></div></div></div>
<div class="CFunction"><div class=CTopic><h3 class=CTitle><a name="mxConnectionHandler.destroy"></a>destroy</h3><div class=CBody><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.destroy = function()</td></tr></table></blockquote><p>Destroys the handler and all its resources and DOM nodes.&nbsp; This should be called on all instances.&nbsp; It is called automatically for the built-in instance created for each <a href="../view/mxGraph-js.html#mxGraph" class=LClass id=link181 onMouseOver="ShowTip(event, 'tt5', 'link181')" onMouseOut="HideTip('tt5')">mxGraph</a>.</p></div></div></div>
</div><!--Content-->
<div id=Footer><a href="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->
<div id=Menu><div class=MEntry><div class=MFile><a href="../index-txt.html">API Specification</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent1')">Editor</a><div class=MGroupContent id=MGroupContent1><div class=MEntry><div class=MFile><a href="../editor/mxDefaultKeyHandler-js.html">mxDefaultKeyHandler</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxDefaultPopupMenu-js.html">mxDefaultPopupMenu</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxDefaultToolbar-js.html">mxDefaultToolbar</a></div></div><div class=MEntry><div class=MFile><a href="../editor/mxEditor-js.html">mxEditor</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent2')">Handler</a><div class=MGroupContent id=MGroupContent2><div class=MEntry><div class=MFile><a href="mxCellHighlight-js.html">mxCellHighlight</a></div></div><div class=MEntry><div class=MFile><a href="mxCellMarker-js.html">mxCellMarker</a></div></div><div class=MEntry><div class=MFile><a href="mxCellTracker-js.html">mxCellTracker</a></div></div><div class=MEntry><div class=MFile id=MSelected>mxConnectionHandler</div></div><div class=MEntry><div class=MFile><a href="mxConstraintHandler-js.html">mxConstraintHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxEdgeHandler-js.html">mxEdgeHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxEdgeSegmentHandler-js.html">mxEdgeSegmentHandler.js</a></div></div><div class=MEntry><div class=MFile><a href="mxElbowEdgeHandler-js.html">mxElbowEdgeHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxGraphHandler-js.html">mxGraphHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxKeyHandler-js.html">mxKeyHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxPanningHandler-js.html">mxPanningHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxPopupMenuHandler-js.html">mxPanningHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxRubberband-js.html">mxRubberband</a></div></div><div class=MEntry><div class=MFile><a href="mxSelectionCellsHandler-js.html">mxSelectionCellsHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxTooltipHandler-js.html">mxTooltipHandler</a></div></div><div class=MEntry><div class=MFile><a href="mxVertexHandler-js.html">mxVertexHandler</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent3')">Io</a><div class=MGroupContent id=MGroupContent3><div class=MEntry><div class=MFile><a href="../io/mxCellCodec-js.html">mxCellCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxChildChangeCodec-js.html">mxChildChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxCodec-js.html">mxCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxCodecRegistry-js.html">mxCodecRegistry</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultKeyHandlerCodec-js.html">mxDefaultKeyHandlerCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultPopupMenuCodec-js.html">mxDefaultPopupMenuCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxDefaultToolbarCodec-js.html">mxDefaultToolbarCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxEditorCodec-js.html">mxEditorCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGenericChangeCodec-js.html">mxGenericChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGraphCodec-js.html">mxGraphCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxGraphViewCodec-js.html">mxGraphViewCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxModelCodec-js.html">mxModelCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxObjectCodec-js.html">mxObjectCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxRootChangeCodec-js.html">mxRootChangeCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxStylesheetCodec-js.html">mxStylesheetCodec</a></div></div><div class=MEntry><div class=MFile><a href="../io/mxTerminalChangeCodec-js.html">mxTerminalChangeCodec</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent7')">Layout</a><div class=MGroupContent id=MGroupContent7><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent6')">Hierarchical</a><div class=MGroupContent id=MGroupContent6><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent4')">Model</a><div class=MGroupContent id=MGroupContent4><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphAbstractHierarchyCell-js.html">mxGraphAbstractHierarchyCell</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphHierarchyEdge-js.html">mxGraphHierarchyEdge</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphHierarchyModel-js.html">mxGraphHierarchyModel</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxGraphHierarchyNode-js.html">mxGraphHierarchyNode</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/model/mxSwimlaneModel-js.html">mxSwimlaneModel</a></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/mxHierarchicalLayout-js.html">mxHierarchicalLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/mxSwimlaneLayout-js.html">mxSwimlaneLayout</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent5')">Stage</a><div class=MGroupContent id=MGroupContent5><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxCoordinateAssignment-js.html">mxCoordinateAssignment</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxHierarchicalLayoutStage-js.html">mxHierarchicalLayoutStage</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxMedianHybridCrossingReduction-js.html">mxMedianHybridCrossingReduction</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxMinimumCycleRemover-js.html">mxMinimumCycleRemover</a></div></div><div class=MEntry><div class=MFile><a href="../layout/hierarchical/stage/mxSwimlaneOrdering-js.html">mxSwimlaneOrdering</a></div></div></div></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../layout/mxCircleLayout-js.html">mxCircleLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxCompactTreeLayout-js.html">mxCompactTreeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxCompositeLayout-js.html">mxCompositeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxEdgeLabelLayout-js.html">mxEdgeLabelLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxFastOrganicLayout-js.html">mxFastOrganicLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxGraphLayout-js.html">mxGraphLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxParallelEdgeLayout-js.html">mxParallelEdgeLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxPartitionLayout-js.html">mxPartitionLayout</a></div></div><div class=MEntry><div class=MFile><a href="../layout/mxStackLayout-js.html">mxStackLayout</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent8')">Model</a><div class=MGroupContent id=MGroupContent8><div class=MEntry><div class=MFile><a href="../model/mxCell-js.html">mxCell</a></div></div><div class=MEntry><div class=MFile><a href="../model/mxCellPath-js.html">mxCellPath</a></div></div><div class=MEntry><div class=MFile><a href="../model/mxGeometry-js.html">mxGeometry</a></div></div><div class=MEntry><div class=MFile><a href="../model/mxGraphModel-js.html">mxGraphModel</a></div></div></div></div></div><div class=MEntry><div class=MFile><a href="../mxClient-js.html">mxClient</a></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent9')">Shape</a><div class=MGroupContent id=MGroupContent9><div class=MEntry><div class=MFile><a href="../shape/mxActor-js.html">mxActor</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxArrow-js.html">mxArrow</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxCloud-js.html">mxCloud</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxConnector-js.html">mxConnector</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxCylinder-js.html">mxCylinder</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxDoubleEllipse-js.html">mxDoubleEllipse</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxEllipse-js.html">mxEllipse</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxHexagon-js.html">mxHexagon</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxImageShape-js.html">mxImageShape</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxLabel-js.html">mxLabel</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxLine-js.html">mxLine</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxMarker-js.html">mxMarker</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxPolyline-js.html">mxPolyline</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxRectangleShape-js.html">mxRectangleShape</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxRhombus-js.html">mxRhombus</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxShape-js.html">mxShape</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxStencil-js.html">mxStencil</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxStencilRegistry-js.html">mxStencilRegistry</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxSwimlane-js.html">mxSwimlane</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxText-js.html">mxText</a></div></div><div class=MEntry><div class=MFile><a href="../shape/mxTriangle-js.html">mxTriangle</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent10')">Util</a><div class=MGroupContent id=MGroupContent10><div class=MEntry><div class=MFile><a href="../util/mxAbstractCanvas2D-js.html">mxAbstractCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxAnimation-js.html">mxAnimation</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxAutoSaveManager-js.html">mxAutoSaveManager</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxClipboard-js.html">mxClipboard</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxConstants-js.html">mxConstants</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxDictionary-js.html">mxDictionary</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxDivResizer-js.html">mxDivResizer</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxDragSource-js.html">mxDragSource</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEffects-js.html">mxEffects</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEvent-js.html">mxEvent</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEventObject-js.html">mxEventObject</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxEventSource-js.html">mxEventSource</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxForm-js.html">mxForm</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxGuide-js.html">mxGuide</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxImage-js.html">mxImage</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxImageBundle-js.html">mxImageBundle</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxImageExport-js.html">mxImageExport</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxLog-js.html">mxLog</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxMorphing-js.html">mxMorphing</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxMouseEvent-js.html">mxMouseEvent</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxObjectIdentity-js.html">mxObjectIdentity</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxPanningManager-js.html">mxPanningManager</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxPoint-js.html">mxPoint</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxPopupMenu-js.html">mxPopupMenu</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxRectangle-js.html">mxRectangle</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxResources-js.html">mxResources</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxSession-js.html">mxSession</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxSvgCanvas2D-js.html">mxSvgCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxToolbar-js.html">mxToolbar</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUndoableEdit-js.html">mxUndoableEdit</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUndoManager-js.html">mxUndoManager</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUrlConverter-js.html">mxUrlConverter</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxUtils-js.html">mxUtils</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxVmlCanvas2D-js.html">mxVmlCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxWindow-js.html">mxWindow</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxXmlCanvas2D-js.html">mxXmlCanvas2D</a></div></div><div class=MEntry><div class=MFile><a href="../util/mxXmlRequest-js.html">mxXmlRequest</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent11')">View</a><div class=MGroupContent id=MGroupContent11><div class=MEntry><div class=MFile><a href="../view/mxCellEditor-js.html">mxCellEditor</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxCellOverlay-js.html">mxCellOverlay</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxCellRenderer-js.html">mxCellRenderer</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxCellState-js.html">mxCellState</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxCellStatePreview-js.html">mxCellStatePreview</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxConnectionConstraint-js.html">mxConnectionConstraint</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxEdgeStyle-js.html">mxEdgeStyle</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxGraph-js.html">mxGraph</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxGraphSelectionModel-js.html">mxGraphSelectionModel</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxGraphView-js.html">mxGraphView</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxLayoutManager-js.html">mxLayoutManager</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxMultiplicity-js.html">mxMultiplicity</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxOutline-js.html">mxOutline</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxPerimeter-js.html">mxPerimeter</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxPrintPreview-js.html">mxPrintPreview</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxSpaceManager-js.html">mxSpaceManager</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxStyleRegistry-js.html">mxStyleRegistry</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxStylesheet-js.html">mxStylesheet</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxSwimlaneManager-js.html">mxSwimlaneManager</a></div></div><div class=MEntry><div class=MFile><a href="../view/mxTemporaryCellStates-js.html">mxTemporaryCellStates</a></div></div></div></div></div><div class=MEntry><div class=MGroup><a href="javascript:ToggleMenu('MGroupContent12')">Index</a><div class=MGroupContent id=MGroupContent12><div class=MEntry><div class=MIndex><a href="../../index/General.html">Everything</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Classes.html">Classes</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Cookies.html">Cookies</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Events.html">Events</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Files.html">Files</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Functions.html">Functions</a></div></div><div class=MEntry><div class=MIndex><a href="../../index/Variables.html">Variables</a></div></div></div></div></div><script type="text/javascript"><!--
var searchPanel = new SearchPanel("searchPanel", "HTML", "../../search");
--></script><div id=MSearchPanel class=MSearchPanelInactive><input type=text id=MSearchField value=Search onFocus="searchPanel.OnSearchFieldFocus(true)" onBlur="searchPanel.OnSearchFieldFocus(false)" onKeyUp="searchPanel.OnSearchFieldChange()"><select id=MSearchType onFocus="searchPanel.OnSearchTypeFocus(true)" onBlur="searchPanel.OnSearchTypeFocus(false)" onChange="searchPanel.OnSearchTypeChange()"><option id=MSearchEverything selected value="General">Everything</option><option value="Classes">Classes</option><option value="Cookies">Cookies</option><option value="Events">Events</option><option value="Files">Files</option><option value="Functions">Functions</option><option value="Variables">Variables</option></select></div><script language=JavaScript><!--
HideAllBut([2], 13);// --></script></div><!--Menu-->
<!--START_ND_TOOLTIPS-->
<div class=CToolTip id="tt1"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.connect = function(</td><td class=PParameter nowrap>source,</td></tr><tr><td></td><td class=PParameter nowrap>target,</td></tr><tr><td></td><td class=PParameter nowrap>evt,</td></tr><tr><td></td><td class=PParameter nowrap>dropTarget</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Connects the given source and target using a new edge. </div></div><div class=CToolTip id="tt2"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.reset = function()</td></tr></table></blockquote>Resets the state of this handler.</div></div><div class=CToolTip id="tt3"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>function mxConnectionHandler(</td><td class=PParameter nowrap>graph,</td></tr><tr><td></td><td class=PParameter nowrap>factoryMethod</td><td class=PAfterParameters 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><div class=CToolTip id="tt4"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.graph</td></tr></table></blockquote>Reference to the enclosing mxGraph.</div></div><div class=CToolTip id="tt5"><div class=CClass>Extends mxEventSource to implement a graph component for the browser. </div></div><div class=CToolTip id="tt6"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.factoryMethod</td></tr></table></blockquote>Function that is used for creating new edges. </div></div><div class=CToolTip id="tt7"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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><div class=CToolTip id="tt8"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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><div class=CToolTip id="tt9"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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><div class=CToolTip id="tt10"><div class=CClass>Encapsulates the URL, width and height of an image.</div></div><div class=CToolTip id="tt11"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="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><div class=CToolTip id="tt12"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.enabled</td></tr></table></blockquote>Specifies if events are handled. </div></div><div class=CToolTip id="tt13"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.select</td></tr></table></blockquote>Specifies if new edges should be selected. </div></div><div class=CToolTip id="tt14"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.createTarget</td></tr></table></blockquote>Specifies if createTargetVertex should be called if no target was under the mouse for the new connection. </div></div><div class=CToolTip id="tt15"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.createTargetVertex = function(</td><td class=PParameter nowrap>evt,</td></tr><tr><td></td><td class=PParameter nowrap>source</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Hook method for creating new vertices on the fly if no target was under the mouse. </div></div><div class=CToolTip id="tt16"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.marker</td></tr></table></blockquote>Holds the mxTerminalMarker used for finding source and target cells.</div></div><div class=CToolTip id="tt17"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.constraintHandler</td></tr></table></blockquote>Holds the mxConstraintHandler used for drawing and highlighting constraints.</div></div><div class=CToolTip id="tt18"><div class=CClass>Handles constraints on connection targets. </div></div><div class=CToolTip id="tt19"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.error</td></tr></table></blockquote>Holds the current validation error while connections are being created.</div></div><div class=CToolTip id="tt20"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.waypointsEnabled</td></tr></table></blockquote>Specifies if single clicks should add waypoints on the new edge. </div></div><div class=CToolTip id="tt21"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.ignoreMouseDown</td></tr></table></blockquote>Specifies if the connection handler should ignore the state of the mouse button when highlighting the source. </div></div><div class=CToolTip id="tt22"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.first</td></tr></table></blockquote>Holds the mxPoint where the mouseDown took place while the handler is active.</div></div><div class=CToolTip id="tt23"><div class=CClass>Implements a 2-dimensional vector with double precision coordinates.</div></div><div class=CToolTip id="tt24"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.connectIconOffset</td></tr></table></blockquote>Holds the offset for connect icons during connection preview. </div></div><div class=CToolTip id="tt25"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.edgeState</td></tr></table></blockquote>Optional mxCellState that represents the preview edge while the handler is active. </div></div><div class=CToolTip id="tt26"><div class=CClass>Represents the current state of a cell in a given mxGraphView.</div></div><div class=CToolTip id="tt27"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.changeHandler</td></tr></table></blockquote>Holds the change event listener for later removal.</div></div><div class=CToolTip id="tt28"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.drillHandler</td></tr></table></blockquote>Holds the drill event listener for later removal.</div></div><div class=CToolTip id="tt29"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.mouseDownCounter</td></tr></table></blockquote>Counts the number of mouseDown events since the start. </div></div><div class=CToolTip id="tt30"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.movePreviewAway</td></tr></table></blockquote>Switch to enable moving the preview away from the mousepointer. </div></div><div class=CToolTip id="tt31"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.isEnabled = function()</td></tr></table></blockquote>Returns true if events are handled. </div></div><div class=CToolTip id="tt32"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.setEnabled = function(</td><td class=PParameter nowrap>enabled</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Enables or disables event handling. </div></div><div class=CToolTip id="tt33"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.isCreateTarget = function()</td></tr></table></blockquote>Returns createTarget.</div></div><div class=CToolTip id="tt34"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.setCreateTarget = function(</td><td class=PParameter nowrap>value</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Sets createTarget.</div></div><div class=CToolTip id="tt35"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.createShape = function()</td></tr></table></blockquote>Creates the preview shape for new connections.</div></div><div class=CToolTip id="tt36"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.init = function()</td></tr></table></blockquote>Initializes the shapes required for this connection handler. </div></div><div class=CToolTip id="tt37"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isConnectableCell = function(</td><td class=PParameter nowrap>cell</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the given cell is connectable. </div></div><div class=CToolTip id="tt38"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.createMarker = function()</td></tr></table></blockquote>Creates and returns the mxCellMarker used in marker.</div></div><div class=CToolTip id="tt39"><div class=CClass>A helper class to process mouse locations and highlight cells.</div></div><div class=CToolTip id="tt40"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.start = function(</td><td class=PParameter nowrap>state,</td></tr><tr><td></td><td class=PParameter nowrap>x,</td></tr><tr><td></td><td class=PParameter nowrap>y,</td></tr><tr><td></td><td class=PParameter nowrap>edgeState</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Starts a new connection for the given state and coordinates.</div></div><div class=CToolTip id="tt41"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.isConnecting = function()</td></tr></table></blockquote>Returns true if the source terminal has been clicked and a new connection is currently being previewed.</div></div><div class=CToolTip id="tt42"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isValidSource = function(</td><td class=PParameter nowrap>cell</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns mxGraph.isValidSource for the given source terminal.</div></div><div class=CToolTip id="tt43"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxGraph.prototype.isValidSource = function(</td><td class=PParameter nowrap>cell</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the given cell is a valid source for new connections. </div></div><div class=CToolTip id="tt44"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isValidTarget = function(</td><td class=PParameter nowrap>cell</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true. </div></div><div class=CToolTip id="tt45"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.validateConnection = function(</td><td class=PParameter nowrap>source,</td></tr><tr><td></td><td class=PParameter nowrap>target</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the error message or an empty string if the connection for the given source target pair is not valid. </div></div><div class=CToolTip id="tt46"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.getConnectImage = function(</td><td class=PParameter nowrap>state</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Hook to return the mxImage used for the connection icon of the given mxCellState. </div></div><div class=CToolTip id="tt47"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isMoveIconToFrontForState = function(</td><td class=PParameter nowrap>state</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the state has a HTML label in the graph&rsquo;s container, otherwise it returns moveIconFront.</div></div><div class=CToolTip id="tt48"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.createIcons = function(</td><td class=PParameter nowrap>state</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Creates the array mxImageShapes that represent the connect icons for the given mxCellState.</div></div><div class=CToolTip id="tt49"><div class=CClass>Extends mxShape to implement an image shape. </div></div><div class=CToolTip id="tt50"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.redrawIcons = function(</td><td class=PParameter nowrap>icons,</td></tr><tr><td></td><td class=PParameter nowrap>state</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Redraws the given array of mxImageShapes.</div></div><div class=CToolTip id="tt51"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.destroyIcons = function()</td></tr></table></blockquote>Destroys the connect icons and resets the respective state.</div></div><div class=CToolTip id="tt52"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isStartEvent = function(</td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the given mouse down event should start this handler. </div></div><div class=CToolTip id="tt53"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.mouseDown = function(</td><td class=PParameter nowrap>sender,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Handles the event by initiating a new connection.</div></div><div class=CToolTip id="tt54"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isImmediateConnectSource = function(</td><td class=PParameter nowrap>state</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if a tap on the given source state should immediately start connecting. </div></div><div class=CToolTip id="tt55"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.createEdgeState = function(</td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Hook to return an mxCellState which may be used during the preview. </div></div><div class=CToolTip id="tt56"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.updateCurrentState = function(</td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Updates the current state for a given mouse move event by using the marker.</div></div><div class=CToolTip id="tt57"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.convertWaypoint = function(</td><td class=PParameter nowrap>point</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Converts the given point from screen coordinates to model coordinates.</div></div><div class=CToolTip id="tt58"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.mouseMove = function(</td><td class=PParameter nowrap>sender,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Handles the event by updating the preview edge or by highlighting a possible source or target terminal.</div></div><div class=CToolTip id="tt59"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.getTargetPerimeterPoint = function(</td><td class=PParameter nowrap>state,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the perimeter point for the given target state.</div></div><div class=CToolTip id="tt60"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.getSourcePerimeterPoint = function(</td><td class=PParameter nowrap>state,</td></tr><tr><td></td><td class=PParameter nowrap>next,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Hook to update the icon position(s) based on a mouseOver event. </div></div><div class=CToolTip id="tt61"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.updateIcons = function(</td><td class=PParameter nowrap>state,</td></tr><tr><td></td><td class=PParameter nowrap>icons,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Hook to update the icon position(s) based on a mouseOver event. </div></div><div class=CToolTip id="tt62"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.isStopEvent = function(</td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns true if the given mouse up event should stop this handler. </div></div><div class=CToolTip id="tt63"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.addWaypointForEvent = function(</td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Adds the waypoint for the given event to waypoints.</div></div><div class=CToolTip id="tt64"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.mouseUp = function(</td><td class=PParameter nowrap>sender,</td></tr><tr><td></td><td class=PParameter nowrap>me</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Handles the event by inserting the new connection.</div></div><div class=CToolTip id="tt65"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.drawPreview = function()</td></tr></table></blockquote>Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.</div></div><div class=CToolTip id="tt66"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.getEdgeColor = function(</td><td class=PParameter nowrap>valid</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the color used to draw the preview edge. </div></div><div class=CToolTip id="tt67"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.getEdgeWidth = function(</td><td class=PParameter nowrap>valid</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the width used to draw the preview edge. </div></div><div class=CToolTip id="tt68"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.selectCells = function(</td><td class=PParameter nowrap>edge,</td></tr><tr><td></td><td class=PParameter nowrap>target</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Selects the given edge after adding a new connection. </div></div><div class=CToolTip id="tt69"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.insertEdge = function(</td><td class=PParameter nowrap>parent,</td></tr><tr><td></td><td class=PParameter nowrap>id,</td></tr><tr><td></td><td class=PParameter nowrap>value,</td></tr><tr><td></td><td class=PParameter nowrap>source,</td></tr><tr><td></td><td class=PParameter nowrap>target,</td></tr><tr><td></td><td class=PParameter nowrap>style</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Creates, inserts and returns the new edge for the given parameters. </div></div><div class=CToolTip id="tt70"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.getAlignmentTolerance = function()</td></tr></table></blockquote>Returns the tolerance for aligning new targets to sources.</div></div><div class=CToolTip id="tt71"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxConnectionHandler.prototype.createEdge = function(</td><td class=PParameter nowrap>value,</td></tr><tr><td></td><td class=PParameter nowrap>source,</td></tr><tr><td></td><td class=PParameter nowrap>target,</td></tr><tr><td></td><td class=PParameter nowrap>style</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Creates and returns a new edge using factoryMethod if one exists. </div></div><div class=CToolTip id="tt72"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>mxConnectionHandler.prototype.destroy = function()</td></tr></table></blockquote>Destroys the handler and all its resources and DOM nodes. </div></div><div class=CToolTip id="tt73"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxGraph.prototype.setConnectable = function(</td><td class=PParameter nowrap>connectable</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Specifies if the graph should allow new connections. </div></div><div class=CToolTip id="tt74"><div class=CVariable>Defines the portion of the cell which is to be used as a connectable region. </div></div><div class=CToolTip id="tt75"><div class=CVariable>Defines the minimum size in pixels of the portion of the cell which is to be used as a connectable region. </div></div><div class=CToolTip id="tt76"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxGraph.prototype.getConnectionConstraint = function(</td><td class=PParameter nowrap>edge,</td></tr><tr><td></td><td class=PParameter nowrap>terminal,</td></tr><tr><td></td><td class=PParameter nowrap>source</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns an mxConnectionConstraint that describes the given connection point. </div></div><div class=CToolTip id="tt77"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxGraphModel.prototype.getCell = function(</td><td class=PParameter nowrap>id</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the mxCell for the specified Id or null if no cell can be found for the given Id.</div></div><div class=CToolTip id="tt78"><div class=CClass>Cells are the elements of the graph model. </div></div><div class=CToolTip id="tt79"><div class=CVariable>Defines the vertical offset for the tooltip. </div></div><div class=CToolTip id="tt80"><div class=CVariable><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td>IS_VML: navigator.appName.toUpperCase()</td></tr></table></blockquote>True if the browser supports VML.</div></div><div class=CToolTip id="tt81"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxGraph.prototype.isValidTarget = function(</td><td class=PParameter nowrap>cell</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns isValidSource for the given cell. </div></div><div class=CToolTip id="tt82"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxGraph.prototype.getEdgeValidationError = function(</td><td class=PParameter nowrap>edge,</td></tr><tr><td></td><td class=PParameter nowrap>source,</td></tr><tr><td></td><td class=PParameter nowrap>target</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Returns the validation error message to be displayed when inserting or changing an edges&rsquo; connectivity. </div></div><div class=CToolTip id="tt83"><div class=CClass>Base class for all mouse events in mxGraph. </div></div><div class=CToolTip id="tt84"><div class=CFunction><blockquote><table border=0 cellspacing=0 cellpadding=0 class="Prototype prettyprint"><tr><td><table border=0 cellspacing=0 cellpadding=0><tr><td class=PBeforeParameters nowrap>mxGraph.prototype.insertEdge = function(</td><td class=PParameter nowrap>parent,</td></tr><tr><td></td><td class=PParameter nowrap>id,</td></tr><tr><td></td><td class=PParameter nowrap>value,</td></tr><tr><td></td><td class=PParameter nowrap>source,</td></tr><tr><td></td><td class=PParameter nowrap>target,</td></tr><tr><td></td><td class=PParameter nowrap>style</td><td class=PAfterParameters nowrap>)</td></tr></table></td></tr></table></blockquote>Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge. </div></div><!--END_ND_TOOLTIPS-->
<div id=MSearchResultsWindow><iframe src="" frameborder=0 name=MSearchResults id=MSearchResults></iframe><a href="javascript:searchPanel.CloseResultsWindow()" id=MSearchResultsWindowClose>Close</a></div>
<script language=JavaScript><!--
if (browserType) {if (browserVer) {document.write("</div>"); }document.write("</div>");}// --></script></body></html>