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 MS Visio and other 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.
tapAndHoldEnabledSpecifies if tap and hold should be used for starting connections on touch-based devices.
tapAndHoldDelaySpecifies the time for a tap and hold.
tapAndHoldInProgressTrue if the timer for tap and hold events is running.
tapAndHoldValidTrue as long as the timer is running and the touch events stay within the given tapAndHoldTolerance.
tapAndHoldToleranceSpecifies the tolerance for a tap and hold.
initialTouchXHolds the x-coordinate of the intial touch event for tap and hold.
initialTouchYHolds the y-coordinate of the intial touch event for tap and hold.
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.
isEnabledReturns true if events are handled.
setEnabledEnables or disables event handling.
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 given array of mxImageShapes.
isStartEventReturns true if the given mouse down event should start this handler.
mouseDownHandles the event by initiating a new connection.
tapAndHoldHandles the mxMouseEvent by highlighting the mxCellState.
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.
updateCurrentStateUpdates the current state for a given mouse move event by using the marker.
convertWaypointConverts the given point from screen coordinates to model coordinates.
mouseMoveHandles the event by updating the preview edge or by highlighting a possible source or target terminal.
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>.
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.
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.

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.

tapAndHoldEnabled

mxConnectionHandler.prototype.tapAndHoldEnabled

Specifies if tap and hold should be used for starting connections on touch-based devices.  Default is true.

tapAndHoldDelay

mxConnectionHandler.prototype.tapAndHoldDelay

Specifies the time for a tap and hold.  Default is 500 ms.

tapAndHoldInProgress

mxConnectionHandler.prototype.tapAndHoldInProgress

True if the timer for tap and hold events is running.

tapAndHoldValid

mxConnectionHandler.prototype.tapAndHoldValid

True as long as the timer is running and the touch events stay within the given tapAndHoldTolerance.

tapAndHoldTolerance

mxConnectionHandler.prototype.tapAndHoldTolerance

Specifies the tolerance for a tap and hold.  Default is 4 pixels.

initialTouchX

mxConnectionHandler.prototype.initialTouchX

Holds the x-coordinate of the intial touch event for tap and hold.

initialTouchY

mxConnectionHandler.prototype.initialTouchY

Holds the y-coordinate of the intial touch event for tap and hold.

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_IE.

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.

isCreateTarget

mxConnectionHandler.prototype.isCreateTarget = function()

Returns createTarget.

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)

Returns mxGraph.isValidSource for the given source terminal.

Parameters

cellmxCell that represents the source terminal.

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(icons)

Destroys the given array of mxImageShapes.

Parameters

iconsOptional array of mxImageShapes to be destroyed.

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.

tapAndHold

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

Handles the mxMouseEvent by highlighting the mxCellState.

Parameters

memxMouseEvent that represents the touch event.
stateOptional mxCellState that is associated with the event.

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

[code] 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)); }; [/code]

updateCurrentState

mxConnectionHandler.prototype.updateCurrentState = function(me)

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

convertWaypoint

mxConnectionHandler.prototype.convertWaypoint = function(point)

Converts the given point from screen coordinates to model coordinates.

mouseMove

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

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

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>.

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

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()

Returns the tolerance for aligning new targets to sources.

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.tapAndHoldEnabled
Specifies if tap and hold should be used for starting connections on touch-based devices.
mxConnectionHandler.prototype.tapAndHoldDelay
Specifies the time for a tap and hold.
mxConnectionHandler.prototype.tapAndHoldInProgress
True if the timer for tap and hold events is running.
mxConnectionHandler.prototype.tapAndHoldValid
True as long as the timer is running and the touch events stay within the given tapAndHoldTolerance.
mxConnectionHandler.prototype.tapAndHoldTolerance
Specifies the tolerance for a tap and hold.
mxConnectionHandler.prototype.initialTouchX
Holds the x-coordinate of the intial touch event for tap and hold.
mxConnectionHandler.prototype.initialTouchY
Holds the y-coordinate of the intial touch event for tap and hold.
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.isEnabled = function()
Returns true if events are handled.
mxConnectionHandler.prototype.setEnabled = function(enabled)
Enables or disables event handling.
mxConnectionHandler.prototype.isCreateTarget = function()
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)
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(icons)
Destroys the given array of mxImageShapes.
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.tapAndHold = function(me,
state)
Handles the mxMouseEvent by highlighting the mxCellState.
Base class for all mouse events in mxGraph.
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.updateCurrentState = function(me)
Updates the current state for a given mouse move event by using the marker.
mxConnectionHandler.prototype.convertWaypoint = function(point)
Converts the given point from screen coordinates to model coordinates.
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.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.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.
mxConnectionHandler.prototype.getEdgeColor = function(valid)
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()
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.
Defines the portion of the cell which is to be used as a connectable region.
Defines the minimum size in pixels of the portion of the cell which is to be used as a connectable region.
Cells are the elements of the graph model.
Defines the vertical offset for the tooltip.
IS_IE: navigator.userAgent.indexOf('MSIE') >
True if the current browser is Internet Explorer.
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