mxConnectionHandler

Graph event handler that creates new connections. Uses <mxTerminalMarker> for finding and highlighting the source and target vertices and factoryMethod to create the edge instance. This handler is built-into <mxGraph.connectionHandler> and enabled using mxGraph.setConnectable.

Example

new mxConnectionHandler(graph, function(source, target, style)
{
  edge = new mxCell('', new mxGeometry());
  edge.setEdge(true);
  edge.setStyle(style);
  edge.geometry.relative = true;
  return edge;
});

Here is an alternative solution that just sets a specific user object for new edges by overriding insertEdge.

mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
mxConnectionHandler.prototype.insertEdge = function(parent, id, value, source, target, style)
{
  value = 'Test';

  return mxConnectionHandlerInsertEdge.apply(this, arguments);
};

Using images to trigger connections

This handler uses mxTerminalMarker to find the source and target cell for the new connection and creates a new edge using connect. The new edge is created using createEdge which in turn uses factoryMethod or creates a new default edge.

The handler uses a “highlight-paradigm” for indicating if a cell is being used as a source or target terminal, as seen in other diagramming products. In order to allow both, moving and connecting cells at the same time, mxConstants.DEFAULT_HOTSPOT is used in the handler to determine the hotspot of a cell, that is, the region of the cell which is used to trigger a new connection. The constant is a value between 0 and 1 that specifies the amount of the width and height around the center to be used for the hotspot of a cell and its default value is 0.5. In addition, mxConstants.MIN_HOTSPOT_SIZE defines the minimum number of pixels for the width and height of the hotspot.

This solution, while standards compliant, may be somewhat confusing because there is no visual indicator for the hotspot and the highlight is seen to switch on and off while the mouse is being moved in and out. Furthermore, this paradigm does not allow to create different connections depending on the highlighted hotspot as there is only one hotspot per cell and it normally does not allow cells to be moved and connected at the same time as there is no clear indication of the connectable area of the cell.

To come across these issues, the handle has an additional createIcons hook with a default implementation that allows to create one icon to be used to trigger new connections. If this icon is specified, then new connections can only be created if the image is clicked while the cell is being highlighted. The createIcons hook may be overridden to create more than one mxImageShape for creating new connections, but the default implementation supports one image and is used as follows:

In order to display the “connect image” whenever the mouse is over the cell, an DEFAULT_HOTSPOT of 1 should be used:

mxConstants.DEFAULT_HOTSPOT = 1;

In order to avoid confusion with the highlighting, the highlight color should not be used with a connect image:

mxConstants.HIGHLIGHT_COLOR = null;

To install the image, the connectImage field of the mxConnectionHandler must be assigned a new mxImage instance:

mxConnectionHandler.prototype.connectImage = new mxImage('images/green-dot.gif', 14, 14);

This will use the green-dot.gif with a width and height of 14 pixels as the image to trigger new connections. 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. 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. This is useful if more than one icon may be used to create a connection.

Summary

mxConnectionHandler	Graph event handler that creates new connections.
Events
mxEvent.START	Fires when a new connection is being created by the user.
mxEvent.CONNECT	Fires between begin- and endUpdate in connect.
mxEvent.RESET	Fires when the reset method is invoked.
mxConnectionHandler	Constructs an event handler that connects vertices using the specified factory method to create the new edges.
graph	Reference to the enclosing mxGraph.
factoryMethod	Function that is used for creating new edges.
moveIconFront	Specifies if icons should be displayed inside the graph container instead of the overlay pane.
moveIconBack	Specifies if icons should be moved to the back of the overlay pane.
connectImage	mxImage that is used to trigger the creation of a new connection.
targetConnectImage	Specifies if the connect icon should be centered on the target state while connections are being previewed.
enabled	Specifies if events are handled.
select	Specifies if new edges should be selected.
createTarget	Specifies if createTargetVertex should be called if no target was under the mouse for the new connection.
marker	Holds the <mxTerminalMarker> used for finding source and target cells.
constraintHandler	Holds the mxConstraintHandler used for drawing and highlighting constraints.
error	Holds the current validation error while connections are being created.
waypointsEnabled	Specifies if single clicks should add waypoints on the new edge.
ignoreMouseDown	Specifies if the connection handler should ignore the state of the mouse button when highlighting the source.
first	Holds the mxPoint where the mouseDown took place while the handler is active.
connectIconOffset	Holds the offset for connect icons during connection preview.
edgeState	Optional mxCellState that represents the preview edge while the handler is active.
changeHandler	Holds the change event listener for later removal.
drillHandler	Holds the drill event listener for later removal.
mouseDownCounter	Counts the number of mouseDown events since the start.
movePreviewAway	Switch to enable moving the preview away from the mousepointer.
outlineConnect	Specifies if connections to the outline of a highlighted target should be enabled.
livePreview	Specifies if the actual shape of the edge state should be used for the preview.
cursor	Specifies the cursor to be used while the handler is active.
insertBeforeSource	Specifies if new edges should be inserted before the source vertex in the cell hierarchy.
isEnabled	Returns true if events are handled.
setEnabled	Enables or disables event handling.
isInsertBefore	Returns insertBeforeSource for non-loops and false for loops.
isCreateTarget	Returns createTarget.
setCreateTarget	Sets createTarget.
createShape	Creates the preview shape for new connections.
init	Initializes the shapes required for this connection handler.
isConnectableCell	Returns true if the given cell is connectable.
createMarker	Creates and returns the mxCellMarker used in marker.
start	Starts a new connection for the given state and coordinates.
isConnecting	Returns true if the source terminal has been clicked and a new connection is currently being previewed.
isValidSource	Returns mxGraph.isValidSource for the given source terminal.
isValidTarget	Returns true.
validateConnection	Returns the error message or an empty string if the connection for the given source target pair is not valid.
getConnectImage	Hook to return the mxImage used for the connection icon of the given mxCellState.
isMoveIconToFrontForState	Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.
createIcons	Creates the array mxImageShapes that represent the connect icons for the given mxCellState.
redrawIcons	Redraws the given array of mxImageShapes.
redrawIcons	Redraws the given array of mxImageShapes.
destroyIcons	Destroys the connect icons and resets the respective state.
isStartEvent	Returns true if the given mouse down event should start this handler.
mouseDown	Handles the event by initiating a new connection.
isImmediateConnectSource	Returns true if a tap on the given source state should immediately start connecting.
createEdgeState	Hook to return an mxCellState which may be used during the preview.
isOutlineConnectEvent	Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
updateCurrentState	Updates the current state for a given mouse move event by using the marker.
isCellEnabled	Returns true if the given cell allows new connections to be created.
convertWaypoint	Converts the given point from screen coordinates to model coordinates.
snapToPreview	Called to snap the given point to the current preview.
mouseMove	Handles the event by updating the preview edge or by highlighting a possible source or target terminal.
updateEdgeState	Updates edgeState.
getTargetPerimeterPoint	Returns the perimeter point for the given target state.
getSourcePerimeterPoint	Hook to update the icon position(s) based on a mouseOver event.
updateIcons	Hook to update the icon position(s) based on a mouseOver event.
isStopEvent	Returns true if the given mouse up event should stop this handler.
addWaypoint	Adds the waypoint for the given event to <waypoints>.
checkConstraints	Returns true if the connection for the given constraints is valid.
mouseUp	Handles the event by inserting the new connection.
reset	Resets the state of this handler.
drawPreview	Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.
getEdgeColor	Returns the color used to draw the preview edge.
getEdgeColor	Returns the color used to draw the preview edge.
getEdgeWidth	Returns the width used to draw the preview edge.
connect	Connects the given source and target using a new edge.
selectCells	Selects the given edge after adding a new connection.
insertEdge	Creates, inserts and returns the new edge for the given parameters.
createTargetVertex	Hook method for creating new vertices on the fly if no target was under the mouse.
getAlignmentTolerance	Returns the tolerance for aligning new targets to sources.
createEdge	Creates and returns a new edge using factoryMethod if one exists.
destroy	Destroys the handler and all its resources and DOM nodes.

Events

mxEvent.START

Fires when a new connection is being created by the user. The <code>state</code> property contains the state of the source cell.

mxEvent.CONNECT

Fires between begin- and endUpdate in connect. The <code>cell</code> property contains the inserted edge, the <code>event</code> and <code>target</code> properties contain the respective arguments that were passed to connect (where target corresponds to the dropTarget argument). Finally, the <code>terminal</code> property corresponds to the target argument in connect or the clone of the source terminal if createTarget is enabled.

Note that the target is the cell under the mouse where the mouse button was released. Depending on the logic in the handler, this doesn’t necessarily have to be the target of the inserted edge. To print the source, target or any optional ports IDs that the edge is connected to, the following code can be used. To get more details about the actual connection point, mxGraph.getConnectionConstraint can be used. To resolve the port IDs, use mxGraphModel.getCell.

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);
});

mxEvent.RESET

Fires when the reset method is invoked.

mxConnectionHandler

function mxConnectionHandler( graph,
factoryMethod )

Constructs an event handler that connects vertices using the specified factory method to create the new edges. Modify <mxConstants.ACTIVE_REGION> to setup the region on a cell which triggers the creation of a new connection or use connect icons as explained above.

Parameters

graph	Reference to the enclosing mxGraph.
factoryMethod	Optional function to create the edge. The function takes the source and target mxCell as the first and second argument and an optional cell style from the preview as the third argument. It returns the mxCell that represents the new edge.

graph

mxConnectionHandler.prototype.graph

Reference to the enclosing mxGraph.

factoryMethod

mxConnectionHandler.prototype.factoryMethod

Function that is used for creating new edges. The function takes the source and target mxCell as the first and second argument and returns a new mxCell that represents the edge. This is used in createEdge.

moveIconFront

mxConnectionHandler.prototype.moveIconFront

Specifies if icons should be displayed inside the graph container instead of the overlay pane. This is used for HTML labels on vertices which hide the connect icon. This has precendence over moveIconBack when set to true. Default is false.

moveIconBack

mxConnectionHandler.prototype.moveIconBack

Specifies if icons should be moved to the back of the overlay pane. This can be set to true if the icons of the connection handler conflict with other handles, such as the vertex label move handle. Default is false.

connectImage

mxConnectionHandler.prototype.connectImage

mxImage that is used to trigger the creation of a new connection. This is used in createIcons. Default is null.

targetConnectImage

mxConnectionHandler.prototype.targetConnectImage

Specifies if the connect icon should be centered on the target state while connections are being previewed. Default is false.

enabled

mxConnectionHandler.prototype.enabled

Specifies if events are handled. Default is true.

select

mxConnectionHandler.prototype.select

Specifies if new edges should be selected. Default is true.

createTarget

mxConnectionHandler.prototype.createTarget

Specifies if createTargetVertex should be called if no target was under the mouse for the new connection. Setting this to true means the connection will be drawn as valid if no target is under the mouse, and createTargetVertex will be called before the connection is created between the source cell and the newly created vertex in createTargetVertex, which can be overridden to create a new target. Default is false.

marker

mxConnectionHandler.prototype.marker

Holds the <mxTerminalMarker> used for finding source and target cells.

constraintHandler

mxConnectionHandler.prototype.constraintHandler

Holds the mxConstraintHandler used for drawing and highlighting constraints.

error

mxConnectionHandler.prototype.error

Holds the current validation error while connections are being created.

waypointsEnabled

mxConnectionHandler.prototype.waypointsEnabled

Specifies if single clicks should add waypoints on the new edge. Default is false.

ignoreMouseDown

mxConnectionHandler.prototype.ignoreMouseDown

Specifies if the connection handler should ignore the state of the mouse button when highlighting the source. Default is false, that is, the handler only highlights the source if no button is being pressed.

first

mxConnectionHandler.prototype.first

Holds the mxPoint where the mouseDown took place while the handler is active.

connectIconOffset

mxConnectionHandler.prototype.connectIconOffset

Holds the offset for connect icons during connection preview. Default is mxPoint(0, mxConstants.TOOLTIP_VERTICAL_OFFSET). Note that placing the icon under the mouse pointer with an offset of (0,0) will affect hit detection.

edgeState

mxConnectionHandler.prototype.edgeState

Optional mxCellState that represents the preview edge while the handler is active. This is created in createEdgeState.

changeHandler

mxConnectionHandler.prototype.changeHandler

Holds the change event listener for later removal.

drillHandler

mxConnectionHandler.prototype.drillHandler

Holds the drill event listener for later removal.

mouseDownCounter

mxConnectionHandler.prototype.mouseDownCounter

Counts the number of mouseDown events since the start. The initial mouse down event counts as 1.

movePreviewAway

mxConnectionHandler.prototype.movePreviewAway

Switch to enable moving the preview away from the mousepointer. This is required in browsers where the preview cannot be made transparent to events and if the built-in hit detection on the HTML elements in the page should be used. Default is the value of mxClient.IS_VML.

outlineConnect

mxConnectionHandler.prototype.outlineConnect

Specifies if connections to the outline of a highlighted target should be enabled. This will allow to place the connection point along the outline of the highlighted target. Default is false.

livePreview

mxConnectionHandler.prototype.livePreview

Specifies if the actual shape of the edge state should be used for the preview. Default is false. (Ignored if no edge state is created in createEdgeState.)

cursor

mxConnectionHandler.prototype.cursor

Specifies the cursor to be used while the handler is active. Default is null.

insertBeforeSource

mxConnectionHandler.prototype.insertBeforeSource

Specifies if new edges should be inserted before the source vertex in the cell hierarchy. Default is false for backwards compatibility.

isEnabled

mxConnectionHandler.prototype.isEnabled = function()

Returns true if events are handled. This implementation returns enabled.

setEnabled

mxConnectionHandler.prototype.setEnabled = function( enabled )

Enables or disables event handling. This implementation updates enabled.

Parameters

enabled

Boolean that specifies the new enabled state.

isInsertBefore

mxConnectionHandler.prototype.isInsertBefore = function( edge,
source,
target,
evt,
dropTarget )

Returns insertBeforeSource for non-loops and false for loops.

Parameters

edge	mxCell that represents the edge to be inserted.
source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.
evt	Mousedown event of the connect gesture.
dropTarget	mxCell that represents the cell under the mouse when it was released.

isCreateTarget

mxConnectionHandler.prototype.isCreateTarget = function( evt )

Returns createTarget.

Parameters

evt	Current active native pointer event.

setCreateTarget

mxConnectionHandler.prototype.setCreateTarget = function( value )

Sets createTarget.

createShape

mxConnectionHandler.prototype.createShape = function()

Creates the preview shape for new connections.

init

mxConnectionHandler.prototype.init = function()

Initializes the shapes required for this connection handler. This should be invoked if <mxGraph.container> is assigned after the connection handler has been created.

isConnectableCell

mxConnectionHandler.prototype.isConnectableCell = function( cell )

Returns true if the given cell is connectable. This is a hook to disable floating connections. This implementation returns true.

createMarker

mxConnectionHandler.prototype.createMarker = function()

Creates and returns the mxCellMarker used in marker.

start

mxConnectionHandler.prototype.start = function( state,
x,
y,
edgeState )

Starts a new connection for the given state and coordinates.

isConnecting

mxConnectionHandler.prototype.isConnecting = function()

Returns true if the source terminal has been clicked and a new connection is currently being previewed.

isValidSource

mxConnectionHandler.prototype.isValidSource = function( cell,
me )

Returns mxGraph.isValidSource for the given source terminal.

Parameters

cell	mxCell that represents the source terminal.
me	mxMouseEvent that is associated with this call.

isValidTarget

mxConnectionHandler.prototype.isValidTarget = function( cell )

Returns true. The call to mxGraph.isValidTarget is implicit by calling mxGraph.getEdgeValidationError in validateConnection. This is an additional hook for disabling certain targets in this specific handler.

Parameters

cell	mxCell that represents the target terminal.

validateConnection

mxConnectionHandler.prototype.validateConnection = function( source,
target )

Returns the error message or an empty string if the connection for the given source target pair is not valid. Otherwise it returns null. This implementation uses mxGraph.getEdgeValidationError.

Parameters

source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.

getConnectImage

mxConnectionHandler.prototype.getConnectImage = function( state )

Hook to return the mxImage used for the connection icon of the given mxCellState. This implementation returns connectImage.

Parameters

state

mxCellState whose connect image should be returned.

isMoveIconToFrontForState

mxConnectionHandler.prototype.isMoveIconToFrontForState = function( state )

Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.

Parameters

state

mxCellState whose connect icons should be returned.

createIcons

mxConnectionHandler.prototype.createIcons = function( state )

Creates the array mxImageShapes that represent the connect icons for the given mxCellState.

Parameters

state

mxCellState whose connect icons should be returned.

redrawIcons

mxConnectionHandler.prototype.redrawIcons = function( icons,
state )

Redraws the given array of mxImageShapes.

Parameters

icons

Optional array of mxImageShapes to be redrawn.

redrawIcons

Redraws the given array of mxImageShapes.

Parameters

icons

Optional array of mxImageShapes to be redrawn.

destroyIcons

mxConnectionHandler.prototype.destroyIcons = function()

Destroys the connect icons and resets the respective state.

isStartEvent

mxConnectionHandler.prototype.isStartEvent = function( me )

Returns true if the given mouse down event should start this handler. The This implementation returns true if the event does not force marquee selection, and the currentConstraint and currentFocus of the constraintHandler are not null, or <previous> and error are not null and <icons> is null or <icons> and <icon> are not null.

mouseDown

mxConnectionHandler.prototype.mouseDown = function( sender,
me )

Handles the event by initiating a new connection.

isImmediateConnectSource

mxConnectionHandler.prototype.isImmediateConnectSource = function( state )

Returns true if a tap on the given source state should immediately start connecting. This implementation returns true if the state is not movable in the graph.

createEdgeState

mxConnectionHandler.prototype.createEdgeState = function( me )

Hook to return an mxCellState which may be used during the preview. This implementation returns null.

Use the following code to create a preview for an existing edge style

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));
};

isOutlineConnectEvent

mxConnectionHandler.prototype.isOutlineConnectEvent = function( me )

Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.

updateCurrentState

mxConnectionHandler.prototype.updateCurrentState = function( me,
point )

Updates the current state for a given mouse move event by using the marker.

isCellEnabled

mxConnectionHandler.prototype.isCellEnabled = function( cell )

Returns true if the given cell allows new connections to be created. This implementation always returns true.

convertWaypoint

mxConnectionHandler.prototype.convertWaypoint = function( point )

Converts the given point from screen coordinates to model coordinates.

snapToPreview

mxConnectionHandler.prototype.snapToPreview = function( me,
point )

Called to snap the given point to the current preview. This snaps to the first point of the preview if alt is not pressed.

mouseMove

mxConnectionHandler.prototype.mouseMove = function( sender,
me )

Handles the event by updating the preview edge or by highlighting a possible source or target terminal.

updateEdgeState

mxConnectionHandler.prototype.updateEdgeState = function( current,
constraint )

Updates edgeState.

getTargetPerimeterPoint

mxConnectionHandler.prototype.getTargetPerimeterPoint = function( state,
me )

Returns the perimeter point for the given target state.

Parameters

state	mxCellState that represents the target cell state.
me	mxMouseEvent that represents the mouse move.

getSourcePerimeterPoint

mxConnectionHandler.prototype.getSourcePerimeterPoint = function( state,
next,
me )

Hook to update the icon position(s) based on a mouseOver event. This is an empty implementation.

Parameters

state	mxCellState that represents the target cell state.
next	mxPoint that represents the next point along the previewed edge.
me	mxMouseEvent that represents the mouse move.

updateIcons

mxConnectionHandler.prototype.updateIcons = function( state,
icons,
me )

Hook to update the icon position(s) based on a mouseOver event. This is an empty implementation.

Parameters

state	mxCellState under the mouse.
icons	Array of currently displayed icons.
me	mxMouseEvent that contains the mouse event.

isStopEvent

mxConnectionHandler.prototype.isStopEvent = function( me )

Returns true if the given mouse up event should stop this handler. The connection will be created if error is null. Note that this is only called if waypointsEnabled is true. This implemtation returns true if there is a cell state in the given event.

addWaypoint

mxConnectionHandler.prototype.addWaypointForEvent = function( me )

Adds the waypoint for the given event to <waypoints>.

checkConstraints

mxConnectionHandler.prototype.checkConstraints = function( c1,
c2 )

Returns true if the connection for the given constraints is valid. This implementation returns true if the constraints are not pointing to the same fixed connection point.

mouseUp

mxConnectionHandler.prototype.mouseUp = function( sender,
me )

Handles the event by inserting the new connection.

reset

mxConnectionHandler.prototype.reset = function()

Resets the state of this handler.

drawPreview

mxConnectionHandler.prototype.drawPreview = function()

Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.

getEdgeColor

Returns the color used to draw the preview edge. This returns green if there is no edge validation error and red otherwise.

Parameters

valid

Boolean indicating if the color for a valid edge should be returned.

getEdgeColor

mxConnectionHandler.prototype.getEdgeColor = function( valid )

Returns the color used to draw the preview edge. This returns green if there is no edge validation error and red otherwise.

Parameters

valid

Boolean indicating if the color for a valid edge should be returned.

getEdgeWidth

mxConnectionHandler.prototype.getEdgeWidth = function( valid )

Returns the width used to draw the preview edge. This returns 3 if there is no edge validation error and 1 otherwise.

Parameters

valid

Boolean indicating if the width for a valid edge should be returned.

connect

mxConnectionHandler.prototype.connect = function( source,
target,
evt,
dropTarget )

Connects the given source and target using a new edge. This implementation uses createEdge to create the edge.

Parameters

source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.
evt	Mousedown event of the connect gesture.
dropTarget	mxCell that represents the cell under the mouse when it was released.

selectCells

mxConnectionHandler.prototype.selectCells = function( edge,
target )

Selects the given edge after adding a new connection. The target argument contains the target vertex if one has been inserted.

insertEdge

mxConnectionHandler.prototype.insertEdge = function( parent,
id,
value,
source,
target,
style )

Creates, inserts and returns the new edge for the given parameters. This implementation does only use createEdge if factoryMethod is defined, otherwise mxGraph.insertEdge will be used.

createTargetVertex

mxConnectionHandler.prototype.createTargetVertex = function( evt,
source )

Hook method for creating new vertices on the fly if no target was under the mouse. This is only called if createTarget is true and returns null.

Parameters

evt	Mousedown event of the connect gesture.
source	mxCell that represents the source terminal.

getAlignmentTolerance

mxConnectionHandler.prototype.getAlignmentTolerance = function( evt )

Returns the tolerance for aligning new targets to sources. This returns the grid size / 2.

createEdge

mxConnectionHandler.prototype.createEdge = function( value,
source,
target,
style )

Creates and returns a new edge using factoryMethod if one exists. If no factory method is defined, then a new default edge is returned. The source and target arguments are informal, the actual connection is setup later by the caller of this function.

Parameters

value	Value to be used for creating the edge.
source	mxCell that represents the source terminal.
target	mxCell that represents the target terminal.
style	Optional style from the preview edge.

destroy

mxConnectionHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes. This should be called on all instances. It is called automatically for the built-in instance created for each mxGraph.