mxEdgeHandler

Graph event handler that reconnects edges and modifies control points and the edge label location. Uses <mxTerminalMarker> for finding and highlighting new source and target vertices. This handler is automatically created in mxGraph.createHandler for each selected edge.

To enable adding/removing control points, the following code can be used

mxEdgeHandler.prototype.addEnabled = true;
mxEdgeHandler.prototype.removeEnabled = true;

Note: This experimental feature is not recommended for production use.

Summary

mxEdgeHandler	Graph event handler that reconnects edges and modifies control points and the edge label location.
Functions
mxEdgeHandler	Constructs an edge handler for the specified mxCellState.
Variables
graph	Reference to the enclosing mxGraph.
state	Reference to the mxCellState being modified.
marker	Holds the <mxTerminalMarker> which is used for highlighting terminals.
constraintHandler	Holds the mxConstraintHandler used for drawing and highlighting constraints.
error	Holds the current validation error while a connection is being changed.
shape	Holds the mxShape that represents the preview edge.
bends	Holds the mxShapes that represent the points.
labelShape	Holds the mxShape that represents the label position.
cloneEnabled	Specifies if cloning by control-drag is enabled.
addEnabled	Specifies if adding bends by shift-click is enabled.
removeEnabled	Specifies if removing bends by shift-click is enabled.
preferHtml	Specifies if bends should be added to the graph container.
allowHandleBoundsCheck	Specifies if the bounds of handles should be used for hit-detection in IE Default is true.
snapToTerminals	Specifies if waypoints should snap to the routing centers of terminals.
handleImage	Optional mxImage to be used as handles.
tolerance	Optional tolerance for hit-detection in getHandleForEvent.
livePreview	Specifies if changes should be displayed in-place.
Functions
init	Initializes the shapes required for this edge handler.
isAddPointEvent	Returns true if the given event is a trigger to add a new point.
isRemovePointEvent	Returns true if the given event is a trigger to remove a point.
getSelectionPoints	Returns the list of points that defines the selection stroke.
createSelectionShape	Creates the shape used to draw the selection border.
getSelectionColor	Returns mxConstants.EDGE_SELECTION_COLOR.
getSelectionStrokeWidth	Returns mxConstants.EDGE_SELECTION_STROKEWIDTH.
isSelectionDashed	Returns <mxConstants.EDGE_SELECTION_DASHED>.
isConnectableCell	Returns true if the given cell is connectable.
createMarker	Creates and returns the mxCellMarker used in marker.
validateConnection	Returns the error message or an empty string if the connection for the given source, target pair is not valid.
createBends	Creates and returns the bends used for modifying the edge.
isHandleEnabled	Creates the shape used to display the given bend.
isHandleVisible	Returns true if the handle at the given index is visible.
createHandleShape	Creates the shape used to display the given bend.
initBend	Helper method to initialize the given bend.
getHandleForEvent	Returns the index of the handle for the given event.
mouseDown	Handles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null.
start	Starts the handling of the mouse gesture.
clonePreviewState	Returns a clone of the current preview state for the given point and terminal.
getSnapToTerminalTolerance	Returns the tolerance for the guides.
getPointForEvent	Returns the point for the given event.
getPreviewTerminalState	Updates the given preview state taking into account the state of the constraint handler.
getPreviewPoints	Updates the given preview state taking into account the state of the constraint handler.
updatePreviewState	Updates the given preview state taking into account the state of the constraint handler.
mouseMove	Handles the event by updating the preview.
mouseUp	Handles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.
reset	Resets the state of this handler.
setPreviewColor	Sets the color of the preview to the given value.
convertPoint	Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
moveLabel	Changes the coordinates for the label of the given edge.
connect	Changes the terminal or terminal point of the given edge in the graph model.
changeTerminalPoint	Changes the terminal point of the given edge.
changePoints	Changes the control points of the given edge in the graph model.
addPoint	Adds a control point for the given state and event.
addPointAt	Adds a control point at the given point.
removePoint	Removes the control point at the given index from the given state.
getHandleFillColor	Returns the fillcolor for the handle at the given index.
redraw	Redraws the preview, and the bends- and label control points.
redrawHandles	Redraws the handles.
redrawInnerBends	Updates and redraws the inner bends.
drawPreview	Redraws the preview.
destroy	Destroys the handler and all its resources and DOM nodes.

Functions

mxEdgeHandler

function mxEdgeHandler( state )

Constructs an edge handler for the specified mxCellState.

Parameters

state

mxCellState of the cell to be handled.

Variables

graph

mxEdgeHandler.prototype.graph

Reference to the enclosing mxGraph.

state

mxEdgeHandler.prototype.state

Reference to the mxCellState being modified.

marker

mxEdgeHandler.prototype.marker

Holds the <mxTerminalMarker> which is used for highlighting terminals.

constraintHandler

mxEdgeHandler.prototype.constraintHandler

Holds the mxConstraintHandler used for drawing and highlighting constraints.

error

mxEdgeHandler.prototype.error

Holds the current validation error while a connection is being changed.

shape

mxEdgeHandler.prototype.shape

Holds the mxShape that represents the preview edge.

bends

mxEdgeHandler.prototype.bends

Holds the mxShapes that represent the points.

labelShape

mxEdgeHandler.prototype.labelShape

Holds the mxShape that represents the label position.

cloneEnabled

mxEdgeHandler.prototype.cloneEnabled

Specifies if cloning by control-drag is enabled. Default is true.

addEnabled

mxEdgeHandler.prototype.addEnabled

Specifies if adding bends by shift-click is enabled. Default is false. Note: This experimental feature is not recommended for production use.

removeEnabled

mxEdgeHandler.prototype.removeEnabled

Specifies if removing bends by shift-click is enabled. Default is false. Note: This experimental feature is not recommended for production use.

preferHtml

mxEdgeHandler.prototype.preferHtml

Specifies if bends should be added to the graph container. This is updated in init based on whether the edge or one of its terminals has an HTML label in the container.

allowHandleBoundsCheck

mxEdgeHandler.prototype.allowHandleBoundsCheck

Specifies if the bounds of handles should be used for hit-detection in IE Default is true.

snapToTerminals

mxEdgeHandler.prototype.snapToTerminals

Specifies if waypoints should snap to the routing centers of terminals. Default is false.

handleImage

mxEdgeHandler.prototype.handleImage

Optional mxImage to be used as handles. Default is null.

tolerance

mxEdgeHandler.prototype.tolerance

Optional tolerance for hit-detection in getHandleForEvent. Default is 0.

livePreview

mxEdgeHandler.prototype.livePreview

Specifies if changes should be displayed in-place. This is an experimental feature for non-touch devices. Default is false.

Functions

init

mxEdgeHandler.prototype.init = function()

Initializes the shapes required for this edge handler.

isAddPointEvent

mxEdgeHandler.prototype.isAddPointEvent = function( evt )

Returns true if the given event is a trigger to add a new point. This implementation returns true if shift is pressed.

isRemovePointEvent

mxEdgeHandler.prototype.isRemovePointEvent = function( evt )

Returns true if the given event is a trigger to remove a point. This implementation returns true if shift is pressed.

getSelectionPoints

mxEdgeHandler.prototype.getSelectionPoints = function( state )

Returns the list of points that defines the selection stroke.

createSelectionShape

mxEdgeHandler.prototype.createSelectionShape = function( points )

Creates the shape used to draw the selection border.

getSelectionColor

mxEdgeHandler.prototype.getSelectionColor = function()

Returns mxConstants.EDGE_SELECTION_COLOR.

getSelectionStrokeWidth

mxEdgeHandler.prototype.getSelectionStrokeWidth = function()

Returns mxConstants.EDGE_SELECTION_STROKEWIDTH.

isSelectionDashed

mxEdgeHandler.prototype.isSelectionDashed = function()

Returns <mxConstants.EDGE_SELECTION_DASHED>.

isConnectableCell

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

mxEdgeHandler.prototype.createMarker = function()

Creates and returns the mxCellMarker used in marker.

validateConnection

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

createBends

mxEdgeHandler.prototype.createBends = function()

Creates and returns the bends used for modifying the edge. This is typically an array of mxRectangleShapes.

isHandleEnabled

mxEdgeHandler.prototype.isHandleEnabled = function( index )

Creates the shape used to display the given bend.

isHandleVisible

mxEdgeHandler.prototype.isHandleVisible = function( index )

Returns true if the handle at the given index is visible.

createHandleShape

mxEdgeHandler.prototype.createHandleShape = function( index )

Creates the shape used to display the given bend. Note that the index may be null for special cases, such as when called from mxElbowEdgeHandler.createVirtualBend.

initBend

mxEdgeHandler.prototype.initBend = function( bend )

Helper method to initialize the given bend.

Parameters

bend	mxShape that represents the bend to be initialized.

getHandleForEvent

mxEdgeHandler.prototype.getHandleForEvent = function( me )

Returns the index of the handle for the given event.

mouseDown

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

Handles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null. The indices may be one of <LABEL_HANDLE> or the number of the respective control point. The source and target points are used for reconnecting the edge.

start

mxEdgeHandler.prototype.start = function( x,
y,
index )

Starts the handling of the mouse gesture.

clonePreviewState

mxEdgeHandler.prototype.clonePreviewState = function( point,
terminal )

Returns a clone of the current preview state for the given point and terminal.

getSnapToTerminalTolerance

mxEdgeHandler.prototype.getSnapToTerminalTolerance = function()

Returns the tolerance for the guides. Default value is gridSize * scale / 2.

getPointForEvent

mxEdgeHandler.prototype.getPointForEvent = function( me )

Returns the point for the given event.

getPreviewTerminalState

mxEdgeHandler.prototype.getPreviewTerminalState = function( me )

Updates the given preview state taking into account the state of the constraint handler.

getPreviewPoints

mxEdgeHandler.prototype.getPreviewPoints = function( point )

Updates the given preview state taking into account the state of the constraint handler.

updatePreviewState

mxEdgeHandler.prototype.updatePreviewState = function( edge,
point,
terminalState )

Updates the given preview state taking into account the state of the constraint handler.

mouseMove

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

Handles the event by updating the preview.

mouseUp

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

Handles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.

reset

mxEdgeHandler.prototype.reset = function()

Resets the state of this handler.

setPreviewColor

mxEdgeHandler.prototype.setPreviewColor = function( color )

Sets the color of the preview to the given value.

convertPoint

mxEdgeHandler.prototype.convertPoint = function( point,
gridEnabled )

Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid. Returns the given, modified point instance.

Parameters

point	mxPoint to be converted.
gridEnabled	Boolean that specifies if the grid should be applied.

moveLabel

mxEdgeHandler.prototype.moveLabel = function( edgeState,
x,
y )

Changes the coordinates for the label of the given edge.

Parameters

edge	mxCell that represents the edge.
x	Integer that specifies the x-coordinate of the new location.
y	Integer that specifies the y-coordinate of the new location.

connect

mxEdgeHandler.prototype.connect = function( edge,
terminal,
isSource,
isClone,
me )

Changes the terminal or terminal point of the given edge in the graph model.

Parameters

edge	mxCell that represents the edge to be reconnected.
terminal	mxCell that represents the new terminal.
isSource	Boolean indicating if the new terminal is the source or target terminal.
isClone	Boolean indicating if the new connection should be a clone of the old edge.
me	mxMouseEvent that contains the mouse up event.

changeTerminalPoint

mxEdgeHandler.prototype.changeTerminalPoint = function( edge,
point,
isSource )

Changes the terminal point of the given edge.

changePoints

mxEdgeHandler.prototype.changePoints = function( edge,
points )

Changes the control points of the given edge in the graph model.

addPoint

mxEdgeHandler.prototype.addPoint = function( state,
evt )

Adds a control point for the given state and event.

addPointAt

mxEdgeHandler.prototype.addPointAt = function( state,
x,
y )

Adds a control point at the given point.

removePoint

mxEdgeHandler.prototype.removePoint = function( state,
index )

Removes the control point at the given index from the given state.

getHandleFillColor

mxEdgeHandler.prototype.getHandleFillColor = function( index )

Returns the fillcolor for the handle at the given index.

redraw

mxEdgeHandler.prototype.redraw = function()

Redraws the preview, and the bends- and label control points.

redrawHandles

mxEdgeHandler.prototype.redrawHandles = function()

Redraws the handles.

redrawInnerBends

mxEdgeHandler.prototype.redrawInnerBends = function( p0,
pe )

Updates and redraws the inner bends.

Parameters

p0	mxPoint that represents the location of the first point.
pe	mxPoint that represents the location of the last point.

drawPreview

mxEdgeHandler.prototype.drawPreview = function()

Redraws the preview.

destroy

mxEdgeHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes. This does normally not need to be called as handlers are destroyed automatically when the corresponding cell is deselected.