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
mxConnectionHandlerGraph event handler that creates new connections.
Events
mxEvent.STARTFires when a new connection is being created by the user.
mxEvent.CONNECTFires between begin- and endUpdate in connect.
mxEvent.RESETFires when the reset method is invoked.
mxConnectionHandlerConstructs an event handler that connects vertices using the specified factory method to create the new edges.
graphReference to the enclosing mxGraph.
factoryMethodFunction that is used for creating new edges.
moveIconFrontSpecifies if icons should be displayed inside the graph container instead of the overlay pane.
moveIconBackSpecifies if icons should be moved to the back of the overlay pane.
connectImagemxImage that is used to trigger the creation of a new connection.
targetConnectImageSpecifies if the connect icon should be centered on the target state while connections are being previewed.
enabledSpecifies if events are handled.
selectSpecifies if new edges should be selected.
createTargetSpecifies if createTargetVertex should be called if no target was under the mouse for the new connection.
markerHolds the <mxTerminalMarker> used for finding source and target cells.
constraintHandlerHolds the mxConstraintHandler used for drawing and highlighting constraints.
errorHolds the current validation error while connections are being created.
waypointsEnabledSpecifies if single clicks should add waypoints on the new edge.
ignoreMouseDownSpecifies if the connection handler should ignore the state of the mouse button when highlighting the source.
firstHolds the mxPoint where the mouseDown took place while the handler is active.
connectIconOffsetHolds the offset for connect icons during connection preview.
edgeStateOptional mxCellState that represents the preview edge while the handler is active.
changeHandlerHolds the change event listener for later removal.
drillHandlerHolds the drill event listener for later removal.
mouseDownCounterCounts the number of mouseDown events since the start.
movePreviewAwaySwitch to enable moving the preview away from the mousepointer.
outlineConnectSpecifies if connections to the outline of a highlighted target should be enabled.
livePreviewSpecifies if the actual shape of the edge state should be used for the preview.
cursorSpecifies the cursor to be used while the handler is active.
insertBeforeSourceSpecifies if new edges should be inserted before the source vertex in the cell hierarchy.
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
isInsertBeforeReturns insertBeforeSource for non-loops and false for loops.
isCreateTargetReturns createTarget.
setCreateTargetSets createTarget.
createShapeCreates the preview shape for new connections.
initInitializes the shapes required for this connection handler.
isConnectableCellReturns true if the given cell is connectable.
createMarkerCreates and returns the mxCellMarker used in marker.
startStarts a new connection for the given state and coordinates.
isConnectingReturns true if the source terminal has been clicked and a new connection is currently being previewed.
isValidSourceReturns mxGraph.isValidSource for the given source terminal.
isValidTargetReturns true.
validateConnectionReturns the error message or an empty string if the connection for the given source target pair is not valid.
getConnectImageHook to return the mxImage used for the connection icon of the given mxCellState.
isMoveIconToFrontForStateReturns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.
createIconsCreates the array mxImageShapes that represent the connect icons for the given mxCellState.
redrawIconsRedraws the given array of mxImageShapes.
redrawIconsRedraws the given array of mxImageShapes.
destroyIconsDestroys the connect icons and resets the respective state.
isStartEventReturns true if the given mouse down event should start this handler.
mouseDownHandles the event by initiating a new connection.
isImmediateConnectSourceReturns true if a tap on the given source state should immediately start connecting.
createEdgeStateHook to return an mxCellState which may be used during the preview.
isOutlineConnectEventReturns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
updateCurrentStateUpdates the current state for a given mouse move event by using the marker.
isCellEnabledReturns true if the given cell does not allow new connections to be created.
convertWaypointConverts the given point from screen coordinates to model coordinates.
snapToPreviewCalled to snap the given point to the current preview.
mouseMoveHandles the event by updating the preview edge or by highlighting a possible source or target terminal.
updateEdgeStateUpdates edgeState.
getTargetPerimeterPointReturns the perimeter point for the given target state.
getSourcePerimeterPointHook to update the icon position(s) based on a mouseOver event.
updateIconsHook to update the icon position(s) based on a mouseOver event.
isStopEventReturns true if the given mouse up event should stop this handler.
addWaypointAdds the waypoint for the given event to <waypoints>.
checkConstraintsReturns true if the connection for the given constraints is valid.
mouseUpHandles the event by inserting the new connection.
resetResets the state of this handler.
drawPreviewRedraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.
getEdgeColorReturns the color used to draw the preview edge.
getEdgeColorReturns the color used to draw the preview edge.
getEdgeWidthReturns the width used to draw the preview edge.
connectConnects the given source and target using a new edge.
selectCellsSelects the given edge after adding a new connection.
insertEdgeCreates, inserts and returns the new edge for the given parameters.
createTargetVertexHook method for creating new vertices on the fly if no target was under the mouse.
getAlignmentToleranceReturns the tolerance for aligning new targets to sources.
createEdgeCreates and returns a new edge using factoryMethod if one exists.
destroyDestroys 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

graphReference to the enclosing mxGraph.
factoryMethodOptional 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

enabledBoolean 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

edgemxCell that represents the edge to be inserted.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.
evtMousedown event of the connect gesture.
dropTargetmxCell that represents the cell under the mouse when it was released.

isCreateTarget

mxConnectionHandler.prototype.isCreateTarget = function(evt)

Returns createTarget.

Parameters

evtCurrent 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

cellmxCell that represents the source terminal.
memxMouseEvent 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

cellmxCell 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

sourcemxCell that represents the source terminal.
targetmxCell 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

statemxCellState 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

statemxCellState 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

statemxCellState whose connect icons should be returned.

redrawIcons

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

Redraws the given array of mxImageShapes.

Parameters

iconsOptional array of mxImageShapes to be redrawn.

redrawIcons

Redraws the given array of mxImageShapes.

Parameters

iconsOptional 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 does not allow new connections to be created.

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

statemxCellState that represents the target cell state.
memxMouseEvent 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

statemxCellState that represents the target cell state.
nextmxPoint that represents the next point along the previewed edge.
memxMouseEvent 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

statemxCellState under the mouse.
iconsArray of currently displayed icons.
memxMouseEvent 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

validBoolean 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

validBoolean 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

validBoolean 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

sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.
evtMousedown event of the connect gesture.
dropTargetmxCell 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

evtMousedown event of the connect gesture.
sourcemxCell 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

valueValue to be used for creating the edge.
sourcemxCell that represents the source terminal.
targetmxCell that represents the target terminal.
styleOptional 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.

mxConnectionHandler.prototype.connect = function(source,
target,
evt,
dropTarget)
Connects the given source and target using a new edge.
mxConnectionHandler.prototype.reset = function()
Resets the state of this handler.
function mxConnectionHandler(graph,
factoryMethod)
Constructs an event handler that connects vertices using the specified factory method to create the new edges.
mxConnectionHandler.prototype.graph
Reference to the enclosing mxGraph.
Extends mxEventSource to implement a graph component for the browser.
mxConnectionHandler.prototype.factoryMethod
Function that is used for creating new edges.
mxConnectionHandler.prototype.moveIconFront
Specifies if icons should be displayed inside the graph container instead of the overlay pane.
mxConnectionHandler.prototype.moveIconBack
Specifies if icons should be moved to the back of the overlay pane.
mxConnectionHandler.prototype.connectImage
mxImage that is used to trigger the creation of a new connection.
Encapsulates the URL, width and height of an image.
mxConnectionHandler.prototype.targetConnectImage
Specifies if the connect icon should be centered on the target state while connections are being previewed.
mxConnectionHandler.prototype.enabled
Specifies if events are handled.
mxConnectionHandler.prototype.select
Specifies if new edges should be selected.
mxConnectionHandler.prototype.createTarget
Specifies if createTargetVertex should be called if no target was under the mouse for the new connection.
mxConnectionHandler.prototype.createTargetVertex = function(evt,
source)
Hook method for creating new vertices on the fly if no target was under the mouse.
mxConnectionHandler.prototype.marker
Holds the mxTerminalMarker used for finding source and target cells.
mxConnectionHandler.prototype.constraintHandler
Holds the mxConstraintHandler used for drawing and highlighting constraints.
Handles constraints on connection targets.
mxConnectionHandler.prototype.error
Holds the current validation error while connections are being created.
mxConnectionHandler.prototype.waypointsEnabled
Specifies if single clicks should add waypoints on the new edge.
mxConnectionHandler.prototype.ignoreMouseDown
Specifies if the connection handler should ignore the state of the mouse button when highlighting the source.
mxConnectionHandler.prototype.first
Holds the mxPoint where the mouseDown took place while the handler is active.
Implements a 2-dimensional vector with double precision coordinates.
mxConnectionHandler.prototype.connectIconOffset
Holds the offset for connect icons during connection preview.
mxConnectionHandler.prototype.edgeState
Optional mxCellState that represents the preview edge while the handler is active.
Represents the current state of a cell in a given mxGraphView.
mxConnectionHandler.prototype.changeHandler
Holds the change event listener for later removal.
mxConnectionHandler.prototype.drillHandler
Holds the drill event listener for later removal.
mxConnectionHandler.prototype.mouseDownCounter
Counts the number of mouseDown events since the start.
mxConnectionHandler.prototype.movePreviewAway
Switch to enable moving the preview away from the mousepointer.
mxConnectionHandler.prototype.outlineConnect
Specifies if connections to the outline of a highlighted target should be enabled.
mxConnectionHandler.prototype.livePreview
Specifies if the actual shape of the edge state should be used for the preview.
mxConnectionHandler.prototype.cursor
Specifies the cursor to be used while the handler is active.
mxConnectionHandler.prototype.insertBeforeSource
Specifies if new edges should be inserted before the source vertex in the cell hierarchy.
mxConnectionHandler.prototype.isEnabled = function()
Returns true if events are handled.
mxConnectionHandler.prototype.setEnabled = function(enabled)
Enables or disables event handling.
mxConnectionHandler.prototype.isInsertBefore = function(edge,
source,
target,
evt,
dropTarget)
Returns insertBeforeSource for non-loops and false for loops.
mxConnectionHandler.prototype.isCreateTarget = function(evt)
Returns createTarget.
mxConnectionHandler.prototype.setCreateTarget = function(value)
Sets createTarget.
mxConnectionHandler.prototype.createShape = function()
Creates the preview shape for new connections.
mxConnectionHandler.prototype.init = function()
Initializes the shapes required for this connection handler.
mxConnectionHandler.prototype.isConnectableCell = function(cell)
Returns true if the given cell is connectable.
mxConnectionHandler.prototype.createMarker = function()
Creates and returns the mxCellMarker used in marker.
A helper class to process mouse locations and highlight cells.
mxConnectionHandler.prototype.start = function(state,
x,
y,
edgeState)
Starts a new connection for the given state and coordinates.
mxConnectionHandler.prototype.isConnecting = function()
Returns true if the source terminal has been clicked and a new connection is currently being previewed.
mxConnectionHandler.prototype.isValidSource = function(cell,
me)
Returns mxGraph.isValidSource for the given source terminal.
mxGraph.prototype.isValidSource = function(cell)
Returns true if the given cell is a valid source for new connections.
mxConnectionHandler.prototype.isValidTarget = function(cell)
Returns true.
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.
mxConnectionHandler.prototype.getConnectImage = function(state)
Hook to return the mxImage used for the connection icon of the given mxCellState.
mxConnectionHandler.prototype.isMoveIconToFrontForState = function(state)
Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.
mxConnectionHandler.prototype.createIcons = function(state)
Creates the array mxImageShapes that represent the connect icons for the given mxCellState.
Extends mxShape to implement an image shape.
mxConnectionHandler.prototype.redrawIcons = function(icons,
state)
Redraws the given array of mxImageShapes.
mxConnectionHandler.prototype.destroyIcons = function()
Destroys the connect icons and resets the respective state.
mxConnectionHandler.prototype.isStartEvent = function(me)
Returns true if the given mouse down event should start this handler.
mxConnectionHandler.prototype.mouseDown = function(sender,
me)
Handles the event by initiating a new connection.
mxConnectionHandler.prototype.isImmediateConnectSource = function(state)
Returns true if a tap on the given source state should immediately start connecting.
mxConnectionHandler.prototype.createEdgeState = function(me)
Hook to return an mxCellState which may be used during the preview.
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.
mxConnectionHandler.prototype.updateCurrentState = function(me,
point)
Updates the current state for a given mouse move event by using the marker.
mxConnectionHandler.prototype.isCellEnabled = function(cell)
Returns true if the given cell does not allow new connections to be created.
mxConnectionHandler.prototype.convertWaypoint = function(point)
Converts the given point from screen coordinates to model coordinates.
mxConnectionHandler.prototype.snapToPreview = function(me,
point)
Called to snap the given point to the current preview.
mxConnectionHandler.prototype.mouseMove = function(sender,
me)
Handles the event by updating the preview edge or by highlighting a possible source or target terminal.
mxConnectionHandler.prototype.updateEdgeState = function(current,
constraint)
Updates edgeState.
mxConnectionHandler.prototype.getTargetPerimeterPoint = function(state,
me)
Returns the perimeter point for the given target state.
mxConnectionHandler.prototype.getSourcePerimeterPoint = function(state,
next,
me)
Hook to update the icon position(s) based on a mouseOver event.
mxConnectionHandler.prototype.updateIcons = function(state,
icons,
me)
Hook to update the icon position(s) based on a mouseOver event.
mxConnectionHandler.prototype.isStopEvent = function(me)
Returns true if the given mouse up event should stop this handler.
mxConnectionHandler.prototype.addWaypointForEvent = function(me)
Adds the waypoint for the given event to waypoints.
mxConnectionHandler.prototype.checkConstraints = function(c1,
c2)
Returns true if the connection for the given constraints is valid.
mxConnectionHandler.prototype.mouseUp = function(sender,
me)
Handles the event by inserting the new connection.
mxConnectionHandler.prototype.drawPreview = function()
Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.
Returns the color used to draw the preview edge.
mxConnectionHandler.prototype.getEdgeWidth = function(valid)
Returns the width used to draw the preview edge.
mxConnectionHandler.prototype.selectCells = function(edge,
target)
Selects the given edge after adding a new connection.
mxConnectionHandler.prototype.insertEdge = function(parent,
id,
value,
source,
target,
style)
Creates, inserts and returns the new edge for the given parameters.
mxConnectionHandler.prototype.getAlignmentTolerance = function(evt)
Returns the tolerance for aligning new targets to sources.
mxConnectionHandler.prototype.createEdge = function(value,
source,
target,
style)
Creates and returns a new edge using factoryMethod if one exists.
mxConnectionHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
mxGraph.prototype.setConnectable = function(connectable)
Specifies if the graph should allow new connections.
DEFAULT_HOTSPOT: 0.3
Defines the portion of the cell which is to be used as a connectable region.
MIN_HOTSPOT_SIZE: 8
Defines the minimum size in pixels of the portion of the cell which is to be used as a connectable region.
mxGraph.prototype.getConnectionConstraint = function(edge,
terminal,
source)
Returns an mxConnectionConstraint that describes the given connection point.
mxGraphModel.prototype.getCell = function(id)
Returns the mxCell for the specified Id or null if no cell can be found for the given Id.
Cells are the elements of the graph model.
TOOLTIP_VERTICAL_OFFSET: 16
Defines the vertical offset for the tooltip.
IS_VML: navigator.appName.toUpperCase()
True if the browser supports VML.
Base class for all mouse events in mxGraph.
mxGraph.prototype.isValidTarget = function(cell)
Returns isValidSource for the given cell.
mxGraph.prototype.getEdgeValidationError = function(edge,
source,
target)
Returns the validation error message to be displayed when inserting or changing an edges’ connectivity.
mxGraph.prototype.insertEdge = function(parent,
id,
value,
source,
target,
style)
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.
Close